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 + + \ No newline at end of file diff --git a/docs/src/pages/framed/LocalStorage/LocalStorage.svelte b/docs/src/pages/framed/LocalStorage/LocalStorage.svelte new file mode 100644 index 00000000..c6115dc5 --- /dev/null +++ b/docs/src/pages/framed/LocalStorage/LocalStorage.svelte @@ -0,0 +1,29 @@ + + + + + + +
+ +
+  {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 @@ + + + diff --git a/types/LocalStorage/LocalStorage.d.ts b/types/LocalStorage/LocalStorage.d.ts new file mode 100644 index 00000000..f0c93cd5 --- /dev/null +++ b/types/LocalStorage/LocalStorage.d.ts @@ -0,0 +1,25 @@ +/// +import { SvelteComponentTyped } from "svelte"; + +export interface LocalStorageProps { + /** + * Specify the local storage key + * @default "local-storage-key" + */ + key?: string; + + /** + * Provide a value to persist + * @default "" + */ + value?: any; +} + +export default class LocalStorage extends SvelteComponentTyped< + LocalStorageProps, + { + save: CustomEvent; + update: CustomEvent<{ prevValue: any; value: any }>; + }, + {} +> {} diff --git a/types/index.d.ts b/types/index.d.ts index 7c4014ea..16073c71 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -69,6 +69,7 @@ export { default as ListBoxMenuItem } from "./ListBox/ListBoxMenuItem"; export { default as ListBoxSelection } from "./ListBox/ListBoxSelection"; export { default as ListItem } from "./ListItem/ListItem"; export { default as Loading } from "./Loading/Loading"; +export { default as LocalStorage } from "./LocalStorage/LocalStorage"; export { default as MultiSelect } from "./MultiSelect/MultiSelect"; export { default as Modal } from "./Modal/Modal"; export { default as ToastNotification } from "./Notification/ToastNotification";