diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 377e5622..c41c2973 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -1466,11 +1466,12 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :---------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------- | +| noMargin | let | No | boolean | false | Set to `true` for to remove the bottom margin | | invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | | message | let | No | boolean | false | Set to `true` to render a form requirement | -| noMargin | let | No | boolean | false | Set to `true` for to remove the bottom margin | | messageText | let | No | string | "" | Specify the message text | | legendText | let | No | string | "" | Specify the legend text | +| legendId | let | No | string | "" | Specify an id for the legend element | ### Slots @@ -2240,10 +2241,12 @@ None. ### 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 | +| 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 | +| clearItem | function | No | () => void | () => { localStorage.removeItem(key); } | Remove the persisted key value from the browser's local storage | +| clearAll | function | No | () => void | () => { localStorage.clear(); } | Clear all key values from the browser's local storage | ### Slots @@ -2397,6 +2400,9 @@ export interface MultiSelectItem { | Prop name | Kind | Reactive | Type | Default value | Description | | :---------------- | :--------------- | :------- | :--------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | +| selectionRef | let | Yes | null | HTMLDivElement | null | Obtain a reference to the selection element | +| fieldRef | let | Yes | null | HTMLDivElement | null | Obtain a reference to the field box element | +| multiSelectRef | let | Yes | null | HTMLDivElement | null | Obtain a reference to the outer div element | | inputRef | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | | open | let | Yes | boolean | false | Set to `true` to open the dropdown | | value | let | Yes | string | "" | Specify the multiselect value | diff --git a/docs/package.json b/docs/package.json index b9094863..9da2aeb7 100644 --- a/docs/package.json +++ b/docs/package.json @@ -11,7 +11,7 @@ "devDependencies": { "@sveltech/routify": "^1.9.9", "autoprefixer": "^10.2.3", - "carbon-components": "10.38.0", + "carbon-components": "10.39.0", "carbon-components-svelte": "../", "clipboard-copy": "^4.0.1", "mdsvex": "^0.8.8", diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index b0f47135..29ce2bac 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -3682,6 +3682,16 @@ "moduleName": "FormGroup", "filePath": "src/FormGroup/FormGroup.svelte", "props": [ + { + "name": "noMargin", + "kind": "let", + "description": "Set to `true` for to remove the bottom margin", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, + "reactive": false + }, { "name": "invalid", "kind": "let", @@ -3702,16 +3712,6 @@ "constant": false, "reactive": false }, - { - "name": "noMargin", - "kind": "let", - "description": "Set to `true` for to remove the bottom margin", - "type": "boolean", - "value": "false", - "isFunction": false, - "constant": false, - "reactive": false - }, { "name": "messageText", "kind": "let", @@ -3731,6 +3731,16 @@ "isFunction": false, "constant": false, "reactive": false + }, + { + "name": "legendId", + "kind": "let", + "description": "Specify an id for the legend element", + "type": "string", + "value": "\"\"", + "isFunction": false, + "constant": false, + "reactive": false } ], "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], @@ -5341,6 +5351,26 @@ "isFunction": false, "constant": false, "reactive": true + }, + { + "name": "clearItem", + "kind": "function", + "description": "Remove the persisted key value from the browser's local storage", + "type": "() => void", + "value": "() => { localStorage.removeItem(key); }", + "isFunction": true, + "constant": false, + "reactive": false + }, + { + "name": "clearAll", + "kind": "function", + "description": "Clear all key values from the browser's local storage", + "type": "() => void", + "value": "() => { localStorage.clear(); }", + "isFunction": true, + "constant": false, + "reactive": false } ], "slots": [], @@ -6068,6 +6098,36 @@ "isFunction": false, "constant": false, "reactive": true + }, + { + "name": "multiSelectRef", + "kind": "let", + "description": "Obtain a reference to the outer div element", + "type": "null | HTMLDivElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "fieldRef", + "kind": "let", + "description": "Obtain a reference to the field box element", + "type": "null | HTMLDivElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true + }, + { + "name": "selectionRef", + "kind": "let", + "description": "Obtain a reference to the selection element", + "type": "null | HTMLDivElement", + "value": "null", + "isFunction": false, + "constant": false, + "reactive": true } ], "slots": [], diff --git a/docs/src/pages/components/LocalStorage.svx b/docs/src/pages/components/LocalStorage.svx index b2250719..3fb133b7 100644 --- a/docs/src/pages/components/LocalStorage.svx +++ b/docs/src/pages/components/LocalStorage.svx @@ -5,5 +5,19 @@ This utility component wraps the [Window.localStorage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) and is useful for persisting ephemeral data (e.g., color theme) at the browser level. ### Reactive example + +In the example below, toggle the switch and reload the page. The updated theme should be persisted locally. - \ No newline at end of file + + +### Clear item, clear all + +Use the `bind:this` directive to access the `clearItem` and `clearAll` methods. + +Invoking `clearItem` will remove the persisted key value from the browser's local storage. + +Invoking `clearAll` will remove all key values. + +In the following example, toggle the switch and reload the page. Then, click the "Clear storage" button. Refresh the page; the theme should be reset to the untoggled state. + + \ No newline at end of file diff --git a/docs/src/pages/components/NumberInput.svx b/docs/src/pages/components/NumberInput.svx index 237569db..923fab25 100644 --- a/docs/src/pages/components/NumberInput.svx +++ b/docs/src/pages/components/NumberInput.svx @@ -31,6 +31,10 @@ components: ["NumberInput", "NumberInputSkeleton"] +### Read-only variant + + + ### Extra-large size diff --git a/docs/src/pages/framed/LocalStorage/LocalStorage.svelte b/docs/src/pages/framed/LocalStorage/LocalStorage.svelte index c6115dc5..d7aea0de 100644 --- a/docs/src/pages/framed/LocalStorage/LocalStorage.svelte +++ b/docs/src/pages/framed/LocalStorage/LocalStorage.svelte @@ -1,7 +1,6 @@ + + + + + +
+
+ + diff --git a/docs/yarn.lock b/docs/yarn.lock index ef23d593..002ef591 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -837,15 +837,15 @@ caniuse-lite@^1.0.30001173, caniuse-lite@^1.0.30001178: integrity sha512-n8JVqXuZMVSPKiPiypjFtDTXc4jWIdjxull0f92WLo7e1MSi3uJ3NvveakSh/aCl1QKFAvIz3vIj0v+0K+FrXw== carbon-components-svelte@../: - version "0.38.2" + version "0.39.0" dependencies: carbon-icons-svelte "^10.27.0" flatpickr "4.6.9" -carbon-components@10.38.0: - version "10.38.0" - resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.38.0.tgz#f275192f70eccf0d0052a192113ee20059594d4f" - integrity sha512-o5Ns3M2LQMuQ41UJiT+WFU+t/hAerde+77LKmrBpiPRBHJ+/VEBAfKmjB5TiH5QM/VWVDWo0Dvr8gc6yNKRqug== +carbon-components@10.39.0: + version "10.39.0" + resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.39.0.tgz#384cf2467d3f213af16865c80703da9b96329573" + integrity sha512-UrDWQ1RlUr7Nn0b9Vs9E3p14V3o5U+3TS700hbHyAxYYq9CoI8WKQhx16x5Leot6dD8HVVTxkb3ahgv6iJG9Rg== dependencies: "@carbon/telemetry" "0.0.0-alpha.6" flatpickr "4.6.1" diff --git a/package.json b/package.json index e185b3d3..270a2dd1 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ "@rollup/plugin-node-resolve": "^11.1.1", "@tsconfig/svelte": "^1.0.10", "autoprefixer": "^10.2.4", - "carbon-components": "10.38.0", + "carbon-components": "10.39.0", "gh-pages": "^3.1.0", "husky": "^4.3.8", "lint-staged": "^10.5.3", diff --git a/src/DataTable/Table.svelte b/src/DataTable/Table.svelte index d93fcc74..ffb83af2 100644 --- a/src/DataTable/Table.svelte +++ b/src/DataTable/Table.svelte @@ -11,7 +11,10 @@ /** Set to `true` to use static width */ export let useStaticWidth = false; - /** Set to `true` for the bordered variant */ + /** + * Set to `true` for the bordered variant + * @deprecated this prop will be removed in the next major release + */ export let shouldShowBorder = false; /** Set to `true` for the sortable variant */ diff --git a/src/FormGroup/FormGroup.svelte b/src/FormGroup/FormGroup.svelte index 2c3bb40d..311807e2 100644 --- a/src/FormGroup/FormGroup.svelte +++ b/src/FormGroup/FormGroup.svelte @@ -1,31 +1,38 @@
- {legendText} + {legendText} {#if message}
{messageText}
diff --git a/src/LocalStorage/LocalStorage.svelte b/src/LocalStorage/LocalStorage.svelte index 66cfa8e0..6e46c277 100644 --- a/src/LocalStorage/LocalStorage.svelte +++ b/src/LocalStorage/LocalStorage.svelte @@ -15,6 +15,22 @@ */ export let value = ""; + /** + * Remove the persisted key value from the browser's local storage + * @type {() => void} + */ + export function clearItem() { + localStorage.removeItem(key); + } + + /** + * Clear all key values from the browser's local storage + * @type {() => void} + */ + export function clearAll() { + localStorage.clear(); + } + import { onMount, afterUpdate, createEventDispatcher } from "svelte"; const dispatch = createEventDispatcher(); diff --git a/src/MultiSelect/MultiSelect.svelte b/src/MultiSelect/MultiSelect.svelte index 185dac63..d6c52177 100644 --- a/src/MultiSelect/MultiSelect.svelte +++ b/src/MultiSelect/MultiSelect.svelte @@ -128,6 +128,21 @@ /** Obtain a reference to the input HTML element */ export let inputRef = null; + /** Obtain a reference to the outer div element */ + export let multiSelectRef = null; + + /** + * Obtain a reference to the field box element + * @type {null | HTMLDivElement} + */ + export let fieldRef = null; + + /** + * Obtain a reference to the selection element + * @type {null | HTMLDivElement} + */ + export let selectionRef = null; + import { afterUpdate, createEventDispatcher, setContext } from "svelte"; import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte"; import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte"; @@ -143,10 +158,6 @@ const dispatch = createEventDispatcher(); - let multiSelectRef = null; - let fieldRef = null; - let selectionRef = null; - let inputValue = ""; let initialSorted = false; let highlightedIndex = -1; diff --git a/src/NumberInput/NumberInput.svelte b/src/NumberInput/NumberInput.svelte index b88b142f..ea93b23e 100644 --- a/src/NumberInput/NumberInput.svelte +++ b/src/NumberInput/NumberInput.svelte @@ -108,6 +108,7 @@ import Subtract16 from "carbon-icons-svelte/lib/Subtract16/Subtract16.svelte"; import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte"; import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte"; + import EditOff16 from "carbon-icons-svelte/lib/EditOff16/EditOff16.svelte"; const defaultTranslations = { [translationIds.increment]: "Increment number", @@ -273,6 +274,9 @@ class="bx--number__invalid bx--number__invalid--warning" /> {/if} + {#if readonly} + + {/if} {#if !hideSteppers}