mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

Align v10.39 (#738)

Browse source 
* chore(deps-dev): upgrade carbon-components to v10.39.0

* fix(data-table): deprecate Table shouldShowBorder prop

Ref: 0f7324156

* fix(form-group): add legendId

Ref: 4fc56c30b

* feat(number-input): support readonly variant

Ref: d0bd8eddb

* feat(multi-select): export multiSelectRef, fieldRef, selectionRef

* feat(local-storage): add clearItem, clearAll instance methods

* docs(local-storage): simplify clear example

* docs(local-storage): add instructions [ci skip]

* chore(local-storage): reset value on clear [ci skip]

* chore(local-storage): revert value clear [ci skip]
This commit is contained in:
Eric Liu 2021-07-09 13:40:25 -07:00 • committed by GitHub
commit b6fa25c3e7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 221 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

80
docs/src/COMPONENT_API.json
View file

@ -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": [],

16
docs/src/pages/components/LocalStorage.svx
View file

@ -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.
<FileSource src="/framed/LocalStorage/LocalStorage" />
<FileSource src="/framed/LocalStorage/LocalStorage" />
### 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.
<FileSource src="/framed/LocalStorage/LocalStorageClear" />

4
docs/src/pages/components/NumberInput.svx
View file

@ -31,6 +31,10 @@ components: ["NumberInput", "NumberInputSkeleton"]
<NumberInput light label="Clusters" />
### Read-only variant
<NumberInput readonly label="Clusters" />
### Extra-large size
<NumberInput size="xl" label="Clusters" />

4
docs/src/pages/framed/LocalStorage/LocalStorage.svelte
View file

@ -1,7 +1,6 @@
<script>
import { LocalStorage, Toggle, Button } from "carbon-components-svelte";
import { LocalStorage, Toggle } from "carbon-components-svelte";
let storage;
let toggled = false;
let events = [];
@ -9,7 +8,6 @@
</script>
<LocalStorage
bind:this="{storage}"
key="dark-mode"
bind:value="{toggled}"
on:save="{() => {

17
docs/src/pages/framed/LocalStorage/LocalStorageClear.svelte Normal file
View file

@ -0,0 +1,17 @@
<script>
import { LocalStorage, Toggle, Button } from "carbon-components-svelte";
let storage;
let toggled = false;
$: document.documentElement.setAttribute("theme", toggled ? "g100" : "white");
</script>
<LocalStorage bind:this="{storage}" bind:value="{toggled}" />
<Toggle size="sm" labelText="Dark mode" bind:toggled />
<br />
<br />
<Button size="small" on:click="{storage.clearAll}">Clear storage</Button>