mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11: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

16
COMPONENT_INDEX.md
View file

@ -1466,11 +1466,12 @@ None.
| Prop name | Kind | Reactive | Type | Default value | Description |
| :---------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------- |
| noMargin | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for to remove the bottom margin |
| invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
| message | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a form requirement |
| noMargin | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for to remove the bottom margin |
| messageText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the message text |
| legendText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the legend text |
| legendId | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify an id for the legend element |
### Slots
@ -2240,10 +2241,12 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :------------------ | -------------------------------- | ----------------------------- |
| value | <code>let</code> | Yes | <code>any</code> | <code>""</code> | Provide a value to persist |
| key | <code>let</code> | No | <code>string</code> | <code>"local-storage-key"</code> | Specify the local storage key |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :-------------------- | :------- | :---------------------- | ---------------------------------------------------- | --------------------------------------------------------------- |
| value | <code>let</code> | Yes | <code>any</code> | <code>""</code> | Provide a value to persist |
| key | <code>let</code> | No | <code>string</code> | <code>"local-storage-key"</code> | Specify the local storage key |
| clearItem | <code>function</code> | No | <code>() => void</code> | <code>() => { localStorage.removeItem(key); }</code> | Remove the persisted key value from the browser's local storage |
| clearAll | <code>function</code> | No | <code>() => void</code> | <code>() => { localStorage.clear(); }</code> | 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 | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the selection element |
| fieldRef | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the field box element |
| multiSelectRef | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the outer div element |
| inputRef | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the dropdown |
| value | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the multiselect value |

2
docs/package.json
View file

@ -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",

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

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

@ -6,4 +6,18 @@ This utility component wraps the [Window.localStorage API](https://developer.moz
### 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" />
### 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>

10
docs/yarn.lock
View file

@ -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"

2
package.json
View file

@ -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",

5
src/DataTable/Table.svelte
View file

@ -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 */

15
src/FormGroup/FormGroup.svelte
View file

@ -1,31 +1,38 @@
<script>
/** Set to `true` for to remove the bottom margin */
export let noMargin = false;
/** Set to `true` to indicate an invalid state */
export let invalid = false;
/** Set to `true` to render a form requirement */
export let message = false;
/** Set to `true` for to remove the bottom margin */
export let noMargin = false;
/** Specify the message text */
export let messageText = "";
/** Specify the legend text */
export let legendText = "";
/** Specify an id for the legend element */
export let legendId = "";
</script>
<fieldset
data-invalid="{invalid || undefined}"
class:bx--fieldset="{true}"
class:bx--fieldset--no-margin="{noMargin}"
aria-labelledby="{$$restProps['aria-labelledby'] || legendId}"
{...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave
>
<legend class:bx--label="{true}">{legendText}</legend>
<legend
class:bx--label="{true}"
id="{legendId || $$restProps['aria-labelledby']}">{legendText}</legend
>
<slot />
{#if message}
<div class:bx--form__requirement="{true}">{messageText}</div>

16
src/LocalStorage/LocalStorage.svelte
View file

@ -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();

19
src/MultiSelect/MultiSelect.svelte
View file

@ -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;

4
src/NumberInput/NumberInput.svelte
View file

@ -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}
<EditOff16 class="bx--text-input__readonly-icon" />
{/if}
{#if !hideSteppers}
<div class:bx--number__controls="{true}">
<button

18
types/FormGroup/FormGroup.d.ts vendored
View file

@ -3,6 +3,12 @@ import { SvelteComponentTyped } from "svelte";
export interface FormGroupProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["fieldset"]> {
/**
* Set to `true` for to remove the bottom margin
* @default false
*/
noMargin?: boolean;
/**
* Set to `true` to indicate an invalid state
* @default false
@ -15,12 +21,6 @@ export interface FormGroupProps
*/
message?: boolean;
/**
* Set to `true` for to remove the bottom margin
* @default false
*/
noMargin?: boolean;
/**
* Specify the message text
* @default ""
@ -32,6 +32,12 @@ export interface FormGroupProps
* @default ""
*/
legendText?: string;
/**
* Specify an id for the legend element
* @default ""
*/
legendId?: string;
}
export default class FormGroup extends SvelteComponentTyped<

12
types/LocalStorage/LocalStorage.d.ts vendored
View file

@ -13,6 +13,18 @@ export interface LocalStorageProps {
* @default ""
*/
value?: any;
/**
* Remove the persisted key value from the browser's local storage
* @default () => { localStorage.removeItem(key); }
*/
clearItem?: () => void;
/**
* Clear all key values from the browser's local storage
* @default () => { localStorage.clear(); }
*/
clearAll?: () => void;
}
export default class LocalStorage extends SvelteComponentTyped<

18
types/MultiSelect/MultiSelect.d.ts vendored
View file

@ -180,6 +180,24 @@ export interface MultiSelectProps
* @default null
*/
inputRef?: null | HTMLInputElement;
/**
* Obtain a reference to the outer div element
* @default null
*/
multiSelectRef?: null | HTMLDivElement;
/**
* Obtain a reference to the field box element
* @default null
*/
fieldRef?: null | HTMLDivElement;
/**
* Obtain a reference to the selection element
* @default null
*/
selectionRef?: null | HTMLDivElement;
}
export default class MultiSelect extends SvelteComponentTyped<

8
yarn.lock
View file

@ -453,10 +453,10 @@ caniuse-lite@^1.0.30001181:
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001183.tgz#7a57ba9d6584119bb5f2bc76d3cc47ba9356b3e2"
integrity sha512-7JkwTEE1hlRKETbCFd8HDZeLiQIUcl8rC6JgNjvHCNaxOeNmQ9V4LvQXRUsKIV2CC73qKxljwVhToaA3kLRqTw==
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"