diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index a1634e3c..5e28b8f7 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -1,6 +1,6 @@
# Component Index
-> 159 components exported from carbon-components-svelte@0.29.2.
+> 160 components exported from carbon-components-svelte@0.29.2.
## Components
@@ -73,6 +73,7 @@
- [`ListBoxSelection`](#listboxselection)
- [`ListItem`](#listitem)
- [`Loading`](#loading)
+- [`LocalStorage`](#localstorage)
- [`Modal`](#modal)
- [`ModalBody`](#modalbody)
- [`ModalFooter`](#modalfooter)
@@ -2044,6 +2045,26 @@ None.
None.
+## `LocalStorage`
+
+### Props
+
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :------------------ | -------------------------------- | ----------------------------- |
+| value | let
| Yes | any
| ""
| Provide a value to persist |
+| key | let
| No | string
| "local-storage-key"
| Specify the local storage key |
+
+### Slots
+
+None.
+
+### Events
+
+| Event name | Type | Detail |
+| :--------- | :--------- | :------------------------------------------- |
+| save | dispatched | any
|
+| update | dispatched | { prevValue: any; value: any; }
|
+
## `Modal`
### Props
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index cdc5beef..aee2c87c 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -1,5 +1,5 @@
{
- "total": 159,
+ "total": 160,
"components": [
{
"moduleName": "Accordion",
@@ -4821,6 +4821,42 @@
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" }
},
+ {
+ "moduleName": "LocalStorage",
+ "filePath": "src/LocalStorage/LocalStorage.svelte",
+ "props": [
+ {
+ "name": "key",
+ "kind": "let",
+ "description": "Specify the local storage key",
+ "type": "string",
+ "value": "\"local-storage-key\"",
+ "isFunction": false,
+ "constant": false,
+ "reactive": false
+ },
+ {
+ "name": "value",
+ "kind": "let",
+ "description": "Provide a value to persist",
+ "type": "any",
+ "value": "\"\"",
+ "isFunction": false,
+ "constant": false,
+ "reactive": true
+ }
+ ],
+ "slots": [],
+ "events": [
+ { "type": "dispatched", "name": "save", "detail": "any" },
+ {
+ "type": "dispatched",
+ "name": "update",
+ "detail": "{ prevValue: any; value: any; }"
+ }
+ ],
+ "typedefs": []
+ },
{
"moduleName": "Modal",
"filePath": "src/Modal/Modal.svelte",
diff --git a/docs/src/pages/_layout.svelte b/docs/src/pages/_layout.svelte
index 3dda8722..d4e9bde7 100644
--- a/docs/src/pages/_layout.svelte
+++ b/docs/src/pages/_layout.svelte
@@ -20,7 +20,7 @@
import Footer from "../components/Footer.svelte";
const deprecated = ["ToggleSmall", "Icon"];
- const new_components = ["ImageLoader"];
+ const new_components = ["ImageLoader", "LocalStorage"];
let isOpen = false;
let isSideNavOpen = true;
diff --git a/docs/src/pages/components/LocalStorage.svx b/docs/src/pages/components/LocalStorage.svx
new file mode 100644
index 00000000..41278839
--- /dev/null
+++ b/docs/src/pages/components/LocalStorage.svx
@@ -0,0 +1,9 @@
+
+
+This utility component wraps the [Window.localStorage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) to persist values by key. This is useful for non-persistent data (e.g., dark mode toggle).
+
+### Reactive example
+
+
+
+
+ {JSON.stringify(events, null, 2)} +diff --git a/src/LocalStorage/LocalStorage.svelte b/src/LocalStorage/LocalStorage.svelte new file mode 100644 index 00000000..66cfa8e0 --- /dev/null +++ b/src/LocalStorage/LocalStorage.svelte @@ -0,0 +1,55 @@ + diff --git a/src/LocalStorage/index.js b/src/LocalStorage/index.js new file mode 100644 index 00000000..5ea56755 --- /dev/null +++ b/src/LocalStorage/index.js @@ -0,0 +1 @@ +export { default as LocalStorage } from "./LocalStorage.svelte"; diff --git a/src/index.js b/src/index.js index 63f85b0b..b0574d4c 100644 --- a/src/index.js +++ b/src/index.js @@ -61,6 +61,7 @@ export { } from "./ListBox"; export { ListItem } from "./ListItem"; export { Loading } from "./Loading"; +export { LocalStorage } from "./LocalStorage"; export { MultiSelect } from "./MultiSelect"; export { Modal } from "./Modal"; export { diff --git a/tests/LocalStorage.test.svelte b/tests/LocalStorage.test.svelte new file mode 100644 index 00000000..6cef3fc0 --- /dev/null +++ b/tests/LocalStorage.test.svelte @@ -0,0 +1,18 @@ + + +