diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 35693a9459..78b389a828 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -351,10 +351,18 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584; ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :-------- | :------- | :--------------- | :------- | -------------------------------------------- | ------------------------------------------------------------------------- | ------------------------------------------------- | -| sizes | No | let | Yes | Record | { sm: false, md: false, lg: false, xlg: false, max: false, } | Carbon grid sizes as an object | -| size | No | let | Yes | BreakpointSize | undefined | Determine the current Carbon grid breakpoint size | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | -------------------------------------------- | ------------- | ----------- | +| sizes | No | let | Yes | Record | { | + + sm: false, + md: false, + lg: false, + xlg: false, + max: false, + +} | Carbon grid sizes as an object | +| size | No | let | Yes | BreakpointSize | undefined | Determine the current Carbon grid breakpoint size | ### Slots @@ -534,26 +542,34 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :-------------------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| ref | No | let | Yes | null | HTMLPreElement | null | Obtain a reference to the pre HTML element | -| showMoreLess | No | let | Yes | boolean | false | Set to `true` to enable the show more/less button | -| expanded | No | let | Yes | boolean | false | Set to `true` to expand a multi-line code snippet (type="multi") | -| type | No | let | No | "single" | "inline" | "multi" | "single" | Set the type of code snippet | -| code | No | let | No | string | undefined | Set the code snippet text
Alternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>)
You must use the `code` prop to copy the code | -| copy | No | let | No | (code: string) => void | async (code) => { try { await navigator.clipboard.writeText(code); } catch (e) { console.log(e); } } | Override the default copy behavior of using the navigator.clipboard.writeText API to copy text | -| hideCopyButton | No | let | No | boolean | false | Set to `true` to hide the copy button | -| disabled | No | let | No | boolean | false | Set to `true` for the disabled variant
Only applies to the "single", "multi" types | -| wrapText | No | let | No | boolean | false | Set to `true` to wrap the text
Note that `type` must be "multi" | -| light | No | let | No | boolean | false | Set to `true` to enable the light variant | -| skeleton | No | let | No | boolean | false | Set to `true` to display the skeleton state | -| copyButtonDescription | No | let | No | string | undefined | Specify the ARIA label for the copy button icon | -| copyLabel | No | let | No | string | undefined | Specify the ARIA label of the copy button | -| feedback | No | let | No | string | "Copied!" | Specify the feedback text displayed when clicking the snippet | -| feedbackTimeout | No | let | No | number | 2000 | Set the timeout duration (ms) to display feedback text | -| showLessText | No | let | No | string | "Show less" | Specify the show less text
`type` must be "multi" | -| showMoreText | No | let | No | string | "Show more" | Specify the show more text
`type` must be "multi" | -| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the code element | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :----------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ref | No | let | Yes | null | HTMLPreElement | null | Obtain a reference to the pre HTML element | +| showMoreLess | No | let | Yes | boolean | false | Set to `true` to enable the show more/less button | +| expanded | No | let | Yes | boolean | false | Set to `true` to expand a multi-line code snippet (type="multi") | +| type | No | let | No | "single" | "inline" | "multi" | "single" | Set the type of code snippet | +| code | No | let | No | string | undefined | Set the code snippet text
Alternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>)
You must use the `code` prop to copy the code | +| copy | No | let | No | (code: string) => void | async (code) => { | + + try { + await navigator.clipboard.writeText(code); + } catch (e) { + console.log(e); + } + +} | Override the default copy behavior of using the navigator.clipboard.writeText API to copy text | +| hideCopyButton | No | let | No | boolean | false | Set to `true` to hide the copy button | +| disabled | No | let | No | boolean | false | Set to `true` for the disabled variant
Only applies to the "single", "multi" types | +| wrapText | No | let | No | boolean | false | Set to `true` to wrap the text
Note that `type` must be "multi" | +| light | No | let | No | boolean | false | Set to `true` to enable the light variant | +| skeleton | No | let | No | boolean | false | Set to `true` to display the skeleton state | +| copyButtonDescription | No | let | No | string | undefined | Specify the ARIA label for the copy button icon | +| copyLabel | No | let | No | string | undefined | Specify the ARIA label of the copy button | +| feedback | No | let | No | string | "Copied!" | Specify the feedback text displayed when clicking the snippet | +| feedbackTimeout | No | let | No | number | 2000 | Set the timeout duration (ms) to display feedback text | +| showLessText | No | let | No | string | "Show less" | Specify the show less text
`type` must be "multi" | +| showMoreText | No | let | No | string | "Show more" | Specify the show more text
`type` must be "multi" | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the code element | ### Slots @@ -652,32 +668,43 @@ export interface ComboBoxItem { ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :----------------------- | :------- | :-------------------- | :------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | -| listRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the list HTML element | -| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| open | No | let | Yes | boolean | false | Set to `true` to open the combobox menu dropdown | -| value | No | let | Yes | string | "" | Specify the selected combobox value | -| selectedId | No | let | Yes | ComboBoxItemId | undefined | Set the selected item by value id | -| items | No | let | No | ReadonlyArray | [] | Set the combobox items | -| itemToString | No | let | No | (item: ComboBoxItem) => string | (item) => item.text || item.id | Override the display of a combobox item | -| direction | No | let | No | "bottom" | "top" | "bottom" | Specify the direction of the combobox dropdown menu | -| size | No | let | No | "sm" | "xl" | undefined | Set the size of the combobox | -| disabled | No | let | No | boolean | false | Set to `true` to disable the combobox | -| titleText | No | let | No | string | "" | Specify the title text of the combobox | -| placeholder | No | let | No | string | "" | Specify the placeholder text | -| helperText | No | let | No | string | "" | Specify the helper text | -| invalidText | No | let | No | string | "" | Specify the invalid state text | -| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state | -| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state | -| warnText | No | let | No | string | "" | Specify the warning state text | -| light | No | let | No | boolean | false | Set to `true` to enable the light variant | -| shouldFilterItem | No | let | No | (item: ComboBoxItem, value: string) => boolean | () => true | Determine if an item should be filtered given the current combobox value | -| translateWithId | No | let | No | (id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string | undefined | Override the chevron icon label based on the open state.
Defaults to "Open menu" when closed and "Close menu" when open | -| translateWithIdSelection | No | let | No | (id: "clearSelection") => string | undefined | Override the label of the clear button when the input has a selection.
Defaults to "Clear selected item" since a combo box can only have on selection. | -| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component | -| name | No | let | No | string | undefined | Specify a name attribute for the input | -| clear | No | function | No | (options?: { focus?: boolean; }) => void | () => { prevSelectedId = null; highlightedIndex = -1; highlightedId = undefined; selectedId = undefined; selectedItem = undefined; open = false; value = ""; if (options?.focus !== false) ref?.focus(); } | Clear the combo box programmatically | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :----------------------- | :------- | :-------------------- | :------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | +| listRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the list HTML element | +| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| open | No | let | Yes | boolean | false | Set to `true` to open the combobox menu dropdown | +| value | No | let | Yes | string | "" | Specify the selected combobox value | +| selectedId | No | let | Yes | ComboBoxItemId | undefined | Set the selected item by value id | +| items | No | let | No | ReadonlyArray | [] | Set the combobox items | +| itemToString | No | let | No | (item: ComboBoxItem) => string | (item) => item.text || item.id | Override the display of a combobox item | +| direction | No | let | No | "bottom" | "top" | "bottom" | Specify the direction of the combobox dropdown menu | +| size | No | let | No | "sm" | "xl" | undefined | Set the size of the combobox | +| disabled | No | let | No | boolean | false | Set to `true` to disable the combobox | +| titleText | No | let | No | string | "" | Specify the title text of the combobox | +| placeholder | No | let | No | string | "" | Specify the placeholder text | +| helperText | No | let | No | string | "" | Specify the helper text | +| invalidText | No | let | No | string | "" | Specify the invalid state text | +| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state | +| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state | +| warnText | No | let | No | string | "" | Specify the warning state text | +| light | No | let | No | boolean | false | Set to `true` to enable the light variant | +| shouldFilterItem | No | let | No | (item: ComboBoxItem, value: string) => boolean | () => true | Determine if an item should be filtered given the current combobox value | +| translateWithId | No | let | No | (id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string | undefined | Override the chevron icon label based on the open state.
Defaults to "Open menu" when closed and "Close menu" when open | +| translateWithIdSelection | No | let | No | (id: "clearSelection") => string | undefined | Override the label of the clear button when the input has a selection.
Defaults to "Clear selected item" since a combo box can only have on selection. | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component | +| name | No | let | No | string | undefined | Specify a name attribute for the input | +| clear | No | function | No | (options?: { focus?: boolean; }) => void | () => { | + + prevSelectedId = null; + highlightedIndex = -1; + highlightedId = undefined; + selectedId = undefined; + selectedItem = undefined; + open = false; + value = ""; + if (options?.focus !== false) ref?.focus(); + +} | Clear the combo box programmatically | ### Slots @@ -894,13 +921,21 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :-------------- | :------- | :--------------- | :------- | ----------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | -| feedback | No | let | No | string | "Copied!" | Set the feedback text shown after clicking the button | -| feedbackTimeout | No | let | No | number | 2000 | Set the timeout duration (ms) to display feedback text | -| iconDescription | No | let | No | string | "Copy to clipboard" | Set the title and ARIA label for the copy button | -| text | Yes | let | No | string | undefined | Specify the text to copy | -| copy | No | let | No | (text: string) => void | async (text) => { try { await navigator.clipboard.writeText(text); } catch (e) { console.log(e); } } | Override the default copy behavior of using the navigator.clipboard.writeText API to copy text | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------------- | :------- | :--------------- | :------- | ----------------------------------- | -------------------------------- | ------------------------------------------------------ | +| feedback | No | let | No | string | "Copied!" | Set the feedback text shown after clicking the button | +| feedbackTimeout | No | let | No | number | 2000 | Set the timeout duration (ms) to display feedback text | +| iconDescription | No | let | No | string | "Copy to clipboard" | Set the title and ARIA label for the copy button | +| text | Yes | let | No | string | undefined | Specify the text to copy | +| copy | No | let | No | (text: string) => void | async (text) => { | + + try { + await navigator.clipboard.writeText(text); + } catch (e) { + console.log(e); + } + +} | Override the default copy behavior of using the navigator.clipboard.writeText API to copy text | ### Slots @@ -1249,20 +1284,24 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :--------------- | :------- | :----------------- | :------- | ------------------------------------------------------------------------------------------ | --------------------------------------- | ----------------------------------------------------------- | -| files | No | let | Yes | ReadonlyArray | [] | Obtain a reference to the uploaded files | -| status | No | let | No | "uploading" | "edit" | "complete" | "uploading" | Specify the file uploader status | -| disabled | No | let | No | boolean | false | Set to `true` to disable the file uploader | -| accept | No | let | No | ReadonlyArray | [] | Specify the accepted file types | -| multiple | No | let | No | boolean | false | Set to `true` to allow multiple files | -| clearFiles | No | const | No | () => void | () => { files = []; } | Programmatically clear the uploaded files | -| labelDescription | No | let | No | string | "" | Specify the label description | -| labelTitle | No | let | No | string | "" | Specify the label title | -| kind | No | let | No | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "primary" | Specify the kind of file uploader button | -| buttonLabel | No | let | No | string | "" | Specify the button label | -| iconDescription | No | let | No | string | "Provide icon description" | Specify the ARIA label used for the status icons | -| name | No | let | No | string | "" | Specify a name attribute for the file button uploader input | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :--------- | :------- | :----------------- | :------- | -------------------------------------------------------- | ------------------------ | ------------------------------------------ | +| files | No | let | Yes | ReadonlyArray | [] | Obtain a reference to the uploaded files | +| status | No | let | No | "uploading" | "edit" | "complete" | "uploading" | Specify the file uploader status | +| disabled | No | let | No | boolean | false | Set to `true` to disable the file uploader | +| accept | No | let | No | ReadonlyArray | [] | Specify the accepted file types | +| multiple | No | let | No | boolean | false | Set to `true` to allow multiple files | +| clearFiles | No | const | No | () => void | () => { | + + files = []; + +} | Programmatically clear the uploaded files | +| labelDescription | No | let | No | string | "" | Specify the label description | +| labelTitle | No | let | No | string | "" | Specify the label title | +| kind | No | let | No | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "primary" | Specify the kind of file uploader button | +| buttonLabel | No | let | No | string | "" | Specify the button label | +| iconDescription | No | let | No | string | "Provide icon description" | Specify the ARIA label used for the status icons | +| name | No | let | No | string | "" | Specify a name attribute for the file button uploader input | ### Slots @@ -1819,9 +1858,10 @@ export interface HeaderSearchResult { ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------ | -| -- | Yes | { result: HeaderSearchResult; index: number } | {result.text}
{#if result.description}<span>– {result.description}</span>{/if} | +| Slot name | Default | Props | Fallback | +| :----------------------------------------------------------------------------------------- | :------ | :---------------------------------------------------------- | :------------------ | +| -- | Yes | { result: HeaderSearchResult; index: number } | {result.text} | +|
{#if result.description}<span>– {result.description}</span>{/if} | ### Events @@ -1858,16 +1898,26 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :-------- | :------- | :----------------- | :------- | --------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | -| error | No | let | Yes | boolean | false | Set to `true` if an error occurs when loading the image | -| loaded | No | let | Yes | boolean | false | Set to `true` when the image is loaded | -| loading | No | let | Yes | boolean | false | Set to `true` when `loaded` is `true` and `error` is false | -| src | No | let | No | string | "" | Specify the image source | -| alt | No | let | No | string | "" | Specify the image alt text | -| ratio | No | let | No | "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2" | undefined | Specify the aspect ratio for the image wrapper | -| fadeIn | No | let | No | boolean | false | Set to `true` to fade in the image on load
The duration uses the `fast-02` value following Carbon guidelines on motion | -| loadImage | No | const | No | (url?: string) => void | (url) => { if (image != null) image = null; loaded = false; error = false; image = new Image(); image.src = url || src; image.onload = () => (loaded = true); image.onerror = () => (error = true); } | Method invoked to load the image provided a `src` value | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :----------------- | :------- | --------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------- | +| error | No | let | Yes | boolean | false | Set to `true` if an error occurs when loading the image | +| loaded | No | let | Yes | boolean | false | Set to `true` when the image is loaded | +| loading | No | let | Yes | boolean | false | Set to `true` when `loaded` is `true` and `error` is false | +| src | No | let | No | string | "" | Specify the image source | +| alt | No | let | No | string | "" | Specify the image alt text | +| ratio | No | let | No | "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2" | undefined | Specify the aspect ratio for the image wrapper | +| fadeIn | No | let | No | boolean | false | Set to `true` to fade in the image on load
The duration uses the `fast-02` value following Carbon guidelines on motion | +| loadImage | No | const | No | (url?: string) => void | (url) => { | + + if (image != null) image = null; + loaded = false; + error = false; + image = new Image(); + image.src = url || src; + image.onload = () => (loaded = true); + image.onerror = () => (error = true); + +} | Method invoked to load the image provided a `src` value | ### Slots @@ -2120,13 +2170,21 @@ export type ListBoxSelectionTranslationId = "clearAll" | "clearSelection"; ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :-------------- | :------- | :----------------- | :------- | ------------------------------------------------------------------------ | ------------------------------------------------------------------------ | ------------------------------------------------ | -| ref | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element | -| selectionCount | No | let | No | number | undefined | Specify the number of selected items | -| disabled | No | let | No | boolean | false | Set to `true` to disable the list box selection | -| translationIds | No | const | No | { clearAll: "clearAll", clearSelection: "clearSelection", } | { clearAll: "clearAll", clearSelection: "clearSelection", } | Default translation ids | -| translateWithId | No | let | No | (id: ListBoxSelectionTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------- | :------- | :----------------- | :------- | --------------------------------------- | ---------------------- | ------------------------------------------------ | +| ref | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element | +| selectionCount | No | let | No | number | undefined | Specify the number of selected items | +| disabled | No | let | No | boolean | false | Set to `true` to disable the list box selection | +| translationIds | No | const | No | { | + + clearAll: "clearAll", + clearSelection: "clearSelection", + +} | { +clearAll: "clearAll", +clearSelection: "clearSelection", +} | Default translation ids | +| translateWithId | No | let | No | (id: ListBoxSelectionTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids | ### Slots @@ -2183,12 +2241,18 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :-------- | :------- | :-------------------- | :------- | ----------------------- | ---------------------------------------------------- | --------------------------------------------------------------- | -| value | No | let | Yes | any | "" | Provide a value to persist | -| key | No | let | No | string | "local-storage-key" | Specify the local storage key | -| clearItem | No | function | No | () => void | () => { localStorage.removeItem(key); } | Remove the persisted key value from the browser's local storage | -| clearAll | No | function | No | () => void | () => { localStorage.clear(); } | Clear all key values from the browser's local storage | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :-------------------- | :------- | ----------------------- | -------------------------------- | ----------------------------- | +| value | No | let | Yes | any | "" | Provide a value to persist | +| key | No | let | No | string | "local-storage-key" | Specify the local storage key | +| clearItem | No | function | No | () => void | () => { | + + localStorage.removeItem(key); + +} | Remove the persisted key value from the browser's local storage | +| clearAll | No | function | No | () => void | () => { +localStorage.clear(); +} | Clear all key values from the browser's local storage | ### Slots @@ -2343,43 +2407,45 @@ export interface MultiSelectItem { ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :----------------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| highlightedId | No | let | Yes | null | MultiSelectItemId | null | Id of the highlighted ListBoxMenuItem | -| selectionRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the selection element | -| fieldRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the field box element | -| multiSelectRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the outer div element | -| inputRef | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| open | No | let | Yes | boolean | false | Set to `true` to open the dropdown | -| value | No | let | Yes | string | "" | Specify the multiselect value | -| selectedIds | No | let | Yes | ReadonlyArray | [] | Set the selected ids | -| items | No | let | Yes | ReadonlyArray | [] | Set the multiselect items | -| itemToString | No | let | No | (item: MultiSelectItem) => any | (item) => item.text || item.id | Override the display of a multiselect item | -| itemToInput | No | let | No | (item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; } | (item) => {} | Override the item name, title, labelText passed to the checkbox input | -| size | No | let | No | "sm" | "lg" | "xl" | undefined | Set the size of the combobox | -| type | No | let | No | "default" | "inline" | "default" | Specify the type of multiselect | -| direction | No | let | No | "bottom" | "top" | "bottom" | Specify the direction of the multiselect dropdown menu | -| selectionFeedback | No | let | No | "top" | "fixed" | "top-after-reopen" | "top-after-reopen" | Specify the selection feedback after selecting items | -| disabled | No | let | No | boolean | false | Set to `true` to disable the dropdown | -| filterable | No | let | No | boolean | false | Set to `true` to filter items | -| filterItem | No | let | No | (item: MultiSelectItem, value: string) => string | (item, value) => item.text.toLowerCase().includes(value.trim().toLowerCase()) | Override the filtering logic
The default filtering is an exact string comparison | -| light | No | let | No | boolean | false | Set to `true` to enable the light variant | -| locale | No | let | No | string | "en" | Specify the locale | -| placeholder | No | let | No | string | "" | Specify the placeholder text | -| sortItem | No | let | No | ((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) | (() => void) | (a, b) => a.text.localeCompare(b.text, locale, { numeric: true }) | Override the sorting logic
The default sorting compare the item text value | -| translateWithId | No | let | No | (id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string | undefined | Override the chevron icon label based on the open state.
Defaults to "Open menu" when closed and "Close menu" when open | -| translateWithIdSelection | No | let | No | (id: import("../ListBox/ListBoxSelection.svelte").ListBoxSelectionTranslationId) => string | undefined | Override the label of the clear button when the input has a selection.
Defaults to "Clear selected item" and "Clear all items" if more than one item is selected | -| titleText | No | let | No | string | "" | Specify the title text | -| useTitleInItem | No | let | No | boolean | false | Set to `true` to pass the item to `itemToString` in the checkbox | -| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state | -| invalidText | No | let | No | string | "" | Specify the invalid state text | -| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state | -| warnText | No | let | No | string | "" | Specify the warning state text | -| helperText | No | let | No | string | "" | Specify the helper text | -| label | No | let | No | string | "" | Specify the list box label | -| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | -| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component | -| name | No | let | No | string | undefined | Specify a name attribute for the select | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------------------------------------------------------------ | :------------------------------------------------------------------------------------ | :--------------- | :------- | ------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| highlightedId | No | let | Yes | null | MultiSelectItemId | null | Id of the highlighted ListBoxMenuItem | +| selectionRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the selection element | +| fieldRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the field box element | +| multiSelectRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the outer div element | +| inputRef | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| open | No | let | Yes | boolean | false | Set to `true` to open the dropdown | +| value | No | let | Yes | string | "" | Specify the multiselect value | +| selectedIds | No | let | Yes | ReadonlyArray | [] | Set the selected ids | +| items | No | let | Yes | ReadonlyArray | [] | Set the multiselect items | +| itemToString | No | let | No | (item: MultiSelectItem) => any | (item) => item.text || item.id | Override the display of a multiselect item | +| itemToInput | No | let | No | (item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; } | (item) => {} | Override the item name, title, labelText passed to the checkbox input | +| size | No | let | No | "sm" | "lg" | "xl" | undefined | Set the size of the combobox | +| type | No | let | No | "default" | "inline" | "default" | Specify the type of multiselect | +| direction | No | let | No | "bottom" | "top" | "bottom" | Specify the direction of the multiselect dropdown menu | +| selectionFeedback | No | let | No | "top" | "fixed" | "top-after-reopen" | "top-after-reopen" | Specify the selection feedback after selecting items | +| disabled | No | let | No | boolean | false | Set to `true` to disable the dropdown | +| filterable | No | let | No | boolean | false | Set to `true` to filter items | +| filterItem | No | let | No | (item: MultiSelectItem, value: string) => string | (item, value) => | +| item.text.toLowerCase().includes(value.trim().toLowerCase()) | Override the filtering logic
The default filtering is an exact string comparison | +| light | No | let | No | boolean | false | Set to `true` to enable the light variant | +| locale | No | let | No | string | "en" | Specify the locale | +| placeholder | No | let | No | string | "" | Specify the placeholder text | +| sortItem | No | let | No | ((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) | (() => void) | (a, b) => | +| a.text.localeCompare(b.text, locale, { numeric: true }) | Override the sorting logic
The default sorting compare the item text value | +| translateWithId | No | let | No | (id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string | undefined | Override the chevron icon label based on the open state.
Defaults to "Open menu" when closed and "Close menu" when open | +| translateWithIdSelection | No | let | No | (id: import("../ListBox/ListBoxSelection.svelte").ListBoxSelectionTranslationId) => string | undefined | Override the label of the clear button when the input has a selection.
Defaults to "Clear selected item" and "Clear all items" if more than one item is selected | +| titleText | No | let | No | string | "" | Specify the title text | +| useTitleInItem | No | let | No | boolean | false | Set to `true` to pass the item to `itemToString` in the checkbox | +| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state | +| invalidText | No | let | No | string | "" | Specify the invalid state text | +| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state | +| warnText | No | let | No | string | "" | Specify the warning state text | +| helperText | No | let | No | string | "" | Specify the helper text | +| label | No | let | No | string | "" | Specify the list box label | +| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component | +| name | No | let | No | string | undefined | Specify a name attribute for the select | ### Slots @@ -2472,31 +2538,36 @@ export type NumberInputTranslationId = "increment" | "decrement"; ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :-------------- | :------- | :----------------- | :------- | --------------------------------------------------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------- | -| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| value | No | let | Yes | null | number | null | Specify the input value.
Use `null` to denote "no value" | -| size | No | let | No | "sm" | "xl" | undefined | Set the size of the input | -| step | No | let | No | number | 1 | Specify the step increment | -| max | No | let | No | number | undefined | Specify the maximum value | -| min | No | let | No | number | undefined | Specify the minimum value | -| light | No | let | No | boolean | false | Set to `true` to enable the light variant | -| readonly | No | let | No | boolean | false | Set to `true` for the input to be read-only | -| allowEmpty | No | let | No | boolean | false | Set to `true` to allow for an empty value | -| disabled | No | let | No | boolean | false | Set to `true` to disable the input | -| hideSteppers | No | let | No | boolean | false | Set to `true` to hide the input stepper buttons | -| iconDescription | No | let | No | string | "" | Specify the ARIA label for the increment icons | -| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state | -| invalidText | No | let | No | string | "" | Specify the invalid state text | -| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state | -| warnText | No | let | No | string | "" | Specify the warning state text | -| helperText | No | let | No | string | "" | Specify the helper text | -| label | No | let | No | string | "" | Specify the label text | -| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | -| translateWithId | No | let | No | (id: NumberInputTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids | -| translationIds | No | const | No | { increment: "increment"; decrement: "decrement" } | { increment: "increment", decrement: "decrement", } | Default translation ids | -| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | -| name | No | let | No | string | undefined | Specify a name attribute for the input | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------------- | :------- | :----------------- | :------- | --------------------------------------------------------------- | -------------------------------------------- | ------------------------------------------------------------- | +| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| value | No | let | Yes | null | number | null | Specify the input value.
Use `null` to denote "no value" | +| size | No | let | No | "sm" | "xl" | undefined | Set the size of the input | +| step | No | let | No | number | 1 | Specify the step increment | +| max | No | let | No | number | undefined | Specify the maximum value | +| min | No | let | No | number | undefined | Specify the minimum value | +| light | No | let | No | boolean | false | Set to `true` to enable the light variant | +| readonly | No | let | No | boolean | false | Set to `true` for the input to be read-only | +| required | No | let | No | boolean | true | Set to `false` for the input to not be required | +| disabled | No | let | No | boolean | false | Set to `true` to disable the input | +| hideSteppers | No | let | No | boolean | false | Set to `true` to hide the input stepper buttons | +| iconDescription | No | let | No | string | "" | Specify the ARIA label for the increment icons | +| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state | +| invalidText | No | let | No | string | "Number is not valid" | Specify the invalid state text | +| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state | +| warnText | No | let | No | string | "" | Specify the warning state text | +| helperText | No | let | No | string | "" | Specify the helper text | +| label | No | let | No | string | "" | Specify the label text | +| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | +| translateWithId | No | let | No | (id: NumberInputTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids | +| translationIds | No | const | No | { increment: "increment"; decrement: "decrement" } | { | + + increment: "increment", + decrement: "decrement", + +} | Default translation ids | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| name | No | let | No | string | undefined | Specify a name attribute for the input | ### Slots @@ -2608,10 +2679,16 @@ None. ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| -- | Yes | -- | -- | -| menu | No | -- | <svelte:component
this="{icon}"
aria-label="{iconDescription}"
title="{iconDescription}"
class="bx--overflow-menu\_\_icon {iconClass}"
/> | +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------------------------- | +| -- | Yes | -- | -- | +| menu | No | -- | <svelte:component | + +
this="{icon}" +
aria-label="{iconDescription}" +
title="{iconDescription}" +
class="bx--overflow-menu\_\_icon {iconClass}" +
/> | ### Events @@ -2642,9 +2719,12 @@ None. ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------------------------------------------------------------------------------------------------------------------ | -| -- | Yes | -- | <div class:bx--overflow-menu-options\_\_option-content="{true}">
{text}
</div> | +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :--------------------------------------------------------------------------- | +| -- | Yes | -- | <div class:bx--overflow-menu-options\_\_option-content="{true}"> | + +
{text} +
</div> | ### Events @@ -2657,24 +2737,27 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :-------------------- | :------- | :--------------- | :------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------ | -| pageSize | No | let | Yes | number | 10 | Specify the number of items to display in a page | -| page | No | let | Yes | number | 1 | Specify the current page index | -| totalItems | No | let | No | number | 0 | Specify the total number of items | -| disabled | No | let | No | boolean | false | Set to `true` to disable the pagination | -| forwardText | No | let | No | string | "Next page" | Specify the forward button text | -| backwardText | No | let | No | string | "Previous page" | Specify the backward button text | -| itemsPerPageText | No | let | No | string | "Items per page:" | Specify the items per page text | -| itemText | No | let | No | (min: number, max: number) => string | (min, max) => \`${min}–${max} item${max === 1 ? "" : "s"}\` | Override the item text | -| itemRangeText | No | let | No | (min: number, max: number, total: number) => string | (min, max, total) => \`${min}–${max} of ${total} item${max === 1 ? "" : "s"}\` | Override the item range text | -| pageInputDisabled | No | let | No | boolean | false | Set to `true` to disable the page input | -| pageSizeInputDisabled | No | let | No | boolean | false | Set to `true` to disable the page size input | -| pageSizes | No | let | No | ReadonlyArray | [10] | Specify the available page sizes | -| pagesUnknown | No | let | No | boolean | false | Set to `true` if the number of pages is unknown | -| pageText | No | let | No | (page: number) => string | (page) => \`page ${page}\` | Override the page text | -| pageRangeText | No | let | No | (current: number, total: number) => string | (current, total) => \`of ${total} page${total === 1 ? "" : "s"}\` | Override the page range text | -| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :--------------------------------------------------------------- | :--------------------------- | :--------------- | :------- | ---------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------ | +| pageSize | No | let | Yes | number | 10 | Specify the number of items to display in a page | +| page | No | let | Yes | number | 1 | Specify the current page index | +| totalItems | No | let | No | number | 0 | Specify the total number of items | +| disabled | No | let | No | boolean | false | Set to `true` to disable the pagination | +| forwardText | No | let | No | string | "Next page" | Specify the forward button text | +| backwardText | No | let | No | string | "Previous page" | Specify the backward button text | +| itemsPerPageText | No | let | No | string | "Items per page:" | Specify the items per page text | +| itemText | No | let | No | (min: number, max: number) => string | (min, max) => | +| \`${min}–${max} item${max === 1 ? "" : "s"}\` | Override the item text | +| itemRangeText | No | let | No | (min: number, max: number, total: number) => string | (min, max, total) => | +| \`${min}–${max} of ${total} item${max === 1 ? "" : "s"}\` | Override the item range text | +| pageInputDisabled | No | let | No | boolean | false | Set to `true` to disable the page input | +| pageSizeInputDisabled | No | let | No | boolean | false | Set to `true` to disable the page size input | +| pageSizes | No | let | No | ReadonlyArray | [10] | Specify the available page sizes | +| pagesUnknown | No | let | No | boolean | false | Set to `true` if the number of pages is unknown | +| pageText | No | let | No | (page: number) => string | (page) => \`page ${page}\` | Override the page text | +| pageRangeText | No | let | No | (current: number, total: number) => string | (current, total) => | +| \`of ${total} page${total === 1 ? "" : "s"}\` | Override the page range text | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | ### Slots @@ -4163,15 +4246,27 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100"; ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :--------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | -| theme | No | let | Yes | CarbonTheme | "white" | Set the current Carbon theme | -| tokens | No | let | No | { [token: string]: any; } | {} | Customize a theme with your own tokens
@see https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme | -| persist | No | let | No | boolean | false | Set to `true` to persist the theme using window.localStorage | -| persistKey | No | let | No | string | "theme" | Specify the local storage key | -| render | No | let | No | "toggle" | "select" | undefined | Render a toggle or select dropdown to control the theme | -| toggle | No | let | No | import("../Toggle/Toggle").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; } | { themes: ["white", "g100"], labelA: "", labelB: "", labelText: "Dark mode", hideLabel: false, } | Override the default toggle props | -| select | No | let | No | import("../Select/Select").SelectProps & { themes?: CarbonTheme[]; } | { themes: themeKeys, labelText: "Themes", hideLabel: false, } | Override the default select props | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :--------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------ | +| theme | No | let | Yes | CarbonTheme | "white" | Set the current Carbon theme | +| tokens | No | let | No | { [token: string]: any; } | {} | Customize a theme with your own tokens
@see https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme | +| persist | No | let | No | boolean | false | Set to `true` to persist the theme using window.localStorage | +| persistKey | No | let | No | string | "theme" | Specify the local storage key | +| render | No | let | No | "toggle" | "select" | undefined | Render a toggle or select dropdown to control the theme | +| toggle | No | let | No | import("../Toggle/Toggle").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; } | { | + + themes: ["white", "g100"], + labelA: "", + labelB: "", + labelText: "Dark mode", + hideLabel: false, + +} | Override the default toggle props | +| select | No | let | No | import("../Select/Select").SelectProps & { themes?: CarbonTheme[]; } | { +themes: themeKeys, +labelText: "Themes", +hideLabel: false, +} | Override the default select props | ### Slots @@ -4425,10 +4520,11 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :------------------ | :------- | :--------------- | :------- | ---------------------------------------------- | --------------------------------------------------------------------------------------------------- | ----------------------------------------- | -| active | No | let | Yes | undefined | boolean | undefined | Use a boolean to show or hide the toolbar | -| formatTotalSelected | No | let | No | (totalSelected: number) => string | (totalSelected) => \`${totalSelected} item${totalSelected === 1 ? "" : "s"} selected\` | Override the total items selected text | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------------------------------------------------------------------- | :------------------------------------- | :--------------- | :------- | ---------------------------------------------- | ------------------------ | ----------------------------------------- | +| active | No | let | Yes | undefined | boolean | undefined | Use a boolean to show or hide the toolbar | +| formatTotalSelected | No | let | No | (totalSelected: number) => string | (totalSelected) => | +| \`${totalSelected} item${totalSelected === 1 ? "" : "s"} selected\` | Override the total items selected text | ### Slots @@ -4664,19 +4760,37 @@ export interface TreeNode { ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :------------ | :------- | :-------------------- | :------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ | -| expandedIds | No | let | Yes | ReadonlyArray | [] | Set the node ids to be expanded | -| selectedIds | No | let | Yes | ReadonlyArray | [] | Set the node ids to be selected | -| activeId | No | let | Yes | TreeNodeId | "" | Set the current active node id
Only one node can be active | -| children | No | let | No | Array | [] | Provide an array of children nodes to render | -| size | No | let | No | "default" | "compact" | "default" | Specify the TreeView size | -| labelText | No | let | No | string | "" | Specify the label text | -| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | -| expandAll | No | function | No | () => void | () => { expandedIds = [...nodeIds]; } | Programmatically expand all nodes | -| collapseAll | No | function | No | () => void | () => { expandedIds = []; } | Programmatically collapse all nodes | -| expandNodes | No | function | No | (filterId?: (node: TreeNode) => boolean) => void | () => { expandedIds = nodes .filter( (node) => filterNode(node) || node.children?.some((child) => filterNode(child) && child.children) ) .map((node) => node.id); } | Programmatically expand a subset of nodes.
Expands all nodes if no argument is provided | -| collapseNodes | No | function | No | (filterId?: (node: TreeNode) => boolean) => void | () => { expandedIds = nodes .filter((node) => expandedIds.includes(node.id) && !filterNode(node)) .map((node) => node.id); } | Programmatically collapse a subset of nodes.
Collapses all nodes if no argument is provided | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :---------- | :------- | :-------------------- | :------- | --------------------------------------- | ---------------------- | --------------------------------------------------------------- | +| expandedIds | No | let | Yes | ReadonlyArray | [] | Set the node ids to be expanded | +| selectedIds | No | let | Yes | ReadonlyArray | [] | Set the node ids to be selected | +| activeId | No | let | Yes | TreeNodeId | "" | Set the current active node id
Only one node can be active | +| children | No | let | No | Array | [] | Provide an array of children nodes to render | +| size | No | let | No | "default" | "compact" | "default" | Specify the TreeView size | +| labelText | No | let | No | string | "" | Specify the label text | +| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | +| expandAll | No | function | No | () => void | () => { | + + expandedIds = [...nodeIds]; + +} | Programmatically expand all nodes | +| collapseAll | No | function | No | () => void | () => { +expandedIds = []; +} | Programmatically collapse all nodes | +| expandNodes | No | function | No | (filterId?: (node: TreeNode) => boolean) => void | () => { +expandedIds = nodes +.filter( +(node) => +filterNode(node) || +node.children?.some((child) => filterNode(child) && child.children) +) +.map((node) => node.id); +} | Programmatically expand a subset of nodes.
Expands all nodes if no argument is provided | +| collapseNodes | No | function | No | (filterId?: (node: TreeNode) => boolean) => void | () => { +expandedIds = nodes +.filter((node) => expandedIds.includes(node.id) && !filterNode(node)) +.map((node) => node.id); +} | Programmatically collapse a subset of nodes.
Collapses all nodes if no argument is provided | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index b870e43578..43ce18bfe2 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -409,7 +409,7 @@ "kind": "let", "description": "Carbon grid sizes as an object", "type": "Record", - "value": "{ sm: false, md: false, lg: false, xlg: false, max: false, }", + "value": "{\r sm: false,\r md: false,\r lg: false,\r xlg: false,\r max: false,\r }", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -1037,7 +1037,7 @@ "kind": "let", "description": "Override the default copy behavior of using the navigator.clipboard.writeText API to copy text", "type": "(code: string) => void", - "value": "async (code) => { try { await navigator.clipboard.writeText(code); } catch (e) { console.log(e); } }", + "value": "async (code) => {\r try {\r await navigator.clipboard.writeText(code);\r } catch (e) {\r console.log(e);\r }\r }", "isFunction": true, "isFunctionDeclaration": false, "isRequired": false, @@ -1728,7 +1728,7 @@ "kind": "function", "description": "Clear the combo box programmatically", "type": "(options?: { focus?: boolean; }) => void", - "value": "() => { prevSelectedId = null; highlightedIndex = -1; highlightedId = undefined; selectedId = undefined; selectedItem = undefined; open = false; value = \"\"; if (options?.focus !== false) ref?.focus(); }", + "value": "() => {\r prevSelectedId = null;\r highlightedIndex = -1;\r highlightedId = undefined;\r selectedId = undefined;\r selectedItem = undefined;\r open = false;\r value = \"\";\r if (options?.focus !== false) ref?.focus();\r }", "isFunction": true, "isFunctionDeclaration": true, "isRequired": false, @@ -2312,7 +2312,7 @@ "kind": "let", "description": "Override the default copy behavior of using the navigator.clipboard.writeText API to copy text", "type": "(text: string) => void", - "value": "async (text) => { try { await navigator.clipboard.writeText(text); } catch (e) { console.log(e); } }", + "value": "async (text) => {\r try {\r await navigator.clipboard.writeText(text);\r } catch (e) {\r console.log(e);\r }\r }", "isFunction": true, "isFunctionDeclaration": false, "isRequired": false, @@ -3781,7 +3781,7 @@ "kind": "const", "description": "Programmatically clear the uploaded files", "type": "() => void", - "value": "() => { files = []; }", + "value": "() => {\r files = [];\r }", "isFunction": true, "isFunctionDeclaration": false, "isRequired": false, @@ -5325,7 +5325,7 @@ { "name": "__default__", "default": true, - "fallback": "{result.text}\n {#if result.description}– {result.description}{/if}", + "fallback": "{result.text}\r\n {#if result.description}– {result.description}{/if}", "slot_props": "{ result: HeaderSearchResult; index: number }" } ], @@ -5455,7 +5455,7 @@ "kind": "const", "description": "Method invoked to load the image provided a `src` value", "type": "(url?: string) => void", - "value": "(url) => { if (image != null) image = null; loaded = false; error = false; image = new Image(); image.src = url || src; image.onload = () => (loaded = true); image.onerror = () => (error = true); }", + "value": "(url) => {\r if (image != null) image = null;\r loaded = false;\r error = false;\r image = new Image();\r image.src = url || src;\r image.onload = () => (loaded = true);\r image.onerror = () => (error = true);\r }", "isFunction": true, "isFunctionDeclaration": false, "isRequired": false, @@ -6175,8 +6175,8 @@ "name": "translationIds", "kind": "const", "description": "Default translation ids", - "type": "{ clearAll: \"clearAll\", clearSelection: \"clearSelection\", }", - "value": "{ clearAll: \"clearAll\", clearSelection: \"clearSelection\", }", + "type": "{\r clearAll: \"clearAll\",\r clearSelection: \"clearSelection\",\r }", + "value": "{\r clearAll: \"clearAll\",\r clearSelection: \"clearSelection\",\r }", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -6339,7 +6339,7 @@ "kind": "function", "description": "Remove the persisted key value from the browser's local storage", "type": "() => void", - "value": "() => { localStorage.removeItem(key); }", + "value": "() => {\r localStorage.removeItem(key);\r }", "isFunction": true, "isFunctionDeclaration": true, "isRequired": false, @@ -6351,7 +6351,7 @@ "kind": "function", "description": "Clear all key values from the browser's local storage", "type": "() => void", - "value": "() => { localStorage.clear(); }", + "value": "() => {\r localStorage.clear();\r }", "isFunction": true, "isFunctionDeclaration": true, "isRequired": false, @@ -7047,7 +7047,7 @@ "kind": "let", "description": "Override the filtering logic\nThe default filtering is an exact string comparison", "type": "(item: MultiSelectItem, value: string) => string", - "value": "(item, value) => item.text.toLowerCase().includes(value.trim().toLowerCase())", + "value": "(item, value) =>\r item.text.toLowerCase().includes(value.trim().toLowerCase())", "isFunction": true, "isFunctionDeclaration": false, "isRequired": false, @@ -7107,7 +7107,7 @@ "kind": "let", "description": "Override the sorting logic\nThe default sorting compare the item text value", "type": "((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) | (() => void)", - "value": "(a, b) => a.text.localeCompare(b.text, locale, { numeric: true })", + "value": "(a, b) =>\r a.text.localeCompare(b.text, locale, { numeric: true })", "isFunction": true, "isFunctionDeclaration": false, "isRequired": false, @@ -7586,11 +7586,11 @@ "reactive": false }, { - "name": "allowEmpty", + "name": "required", "kind": "let", - "description": "Set to `true` to allow for an empty value", + "description": "Set to `false` for the input to not be required", "type": "boolean", - "value": "false", + "value": "true", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -7650,7 +7650,7 @@ "kind": "let", "description": "Specify the invalid state text", "type": "string", - "value": "\"\"", + "value": "\"Number is not valid\"", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -7734,7 +7734,7 @@ "kind": "const", "description": "Default translation ids", "type": "{ increment: \"increment\"; decrement: \"decrement\" }", - "value": "{ increment: \"increment\", decrement: \"decrement\", }", + "value": "{\r increment: \"increment\",\r decrement: \"decrement\",\r }", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -8055,7 +8055,7 @@ { "name": "menu", "default": false, - "fallback": "", + "fallback": "", "slot_props": "{}" } ], @@ -8192,7 +8192,7 @@ { "name": "__default__", "default": true, - "fallback": "
\n {text}\n
", + "fallback": "
\r\n {text}\r\n
", "slot_props": "{}" } ], @@ -8284,7 +8284,7 @@ "kind": "let", "description": "Override the item text", "type": "(min: number, max: number) => string", - "value": "(min, max) => `${min}–${max} item${max === 1 ? \"\" : \"s\"}`", + "value": "(min, max) =>\r `${min}–${max} item${max === 1 ? \"\" : \"s\"}`", "isFunction": true, "isFunctionDeclaration": false, "isRequired": false, @@ -8296,7 +8296,7 @@ "kind": "let", "description": "Override the item range text", "type": "(min: number, max: number, total: number) => string", - "value": "(min, max, total) => `${min}–${max} of ${total} item${max === 1 ? \"\" : \"s\"}`", + "value": "(min, max, total) =>\r `${min}–${max} of ${total} item${max === 1 ? \"\" : \"s\"}`", "isFunction": true, "isFunctionDeclaration": false, "isRequired": false, @@ -8380,7 +8380,7 @@ "kind": "let", "description": "Override the page range text", "type": "(current: number, total: number) => string", - "value": "(current, total) => `of ${total} page${total === 1 ? \"\" : \"s\"}`", + "value": "(current, total) =>\r `of ${total} page${total === 1 ? \"\" : \"s\"}`", "isFunction": true, "isFunctionDeclaration": false, "isRequired": false, @@ -12868,7 +12868,7 @@ "kind": "let", "description": "Override the default toggle props", "type": "import(\"../Toggle/Toggle\").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; }", - "value": "{ themes: [\"white\", \"g100\"], labelA: \"\", labelB: \"\", labelText: \"Dark mode\", hideLabel: false, }", + "value": "{\r themes: [\"white\", \"g100\"],\r labelA: \"\",\r labelB: \"\",\r labelText: \"Dark mode\",\r hideLabel: false,\r }", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -12880,7 +12880,7 @@ "kind": "let", "description": "Override the default select props", "type": "import(\"../Select/Select\").SelectProps & { themes?: CarbonTheme[]; }", - "value": "{ themes: themeKeys, labelText: \"Themes\", hideLabel: false, }", + "value": "{\r themes: themeKeys,\r labelText: \"Themes\",\r hideLabel: false,\r }", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -13692,7 +13692,7 @@ "kind": "let", "description": "Override the total items selected text", "type": "(totalSelected: number) => string", - "value": "(totalSelected) => `${totalSelected} item${totalSelected === 1 ? \"\" : \"s\"} selected`", + "value": "(totalSelected) =>\r `${totalSelected} item${totalSelected === 1 ? \"\" : \"s\"} selected`", "isFunction": true, "isFunctionDeclaration": false, "isRequired": false, @@ -14409,7 +14409,7 @@ "kind": "function", "description": "Programmatically expand all nodes", "type": "() => void", - "value": "() => { expandedIds = [...nodeIds]; }", + "value": "() => {\r expandedIds = [...nodeIds];\r }", "isFunction": true, "isFunctionDeclaration": true, "isRequired": false, @@ -14421,7 +14421,7 @@ "kind": "function", "description": "Programmatically collapse all nodes", "type": "() => void", - "value": "() => { expandedIds = []; }", + "value": "() => {\r expandedIds = [];\r }", "isFunction": true, "isFunctionDeclaration": true, "isRequired": false, @@ -14433,7 +14433,7 @@ "kind": "function", "description": "Programmatically expand a subset of nodes.\nExpands all nodes if no argument is provided", "type": "(filterId?: (node: TreeNode) => boolean) => void", - "value": "() => { expandedIds = nodes .filter( (node) => filterNode(node) || node.children?.some((child) => filterNode(child) && child.children) ) .map((node) => node.id); }", + "value": "() => {\r expandedIds = nodes\r .filter(\r (node) =>\r filterNode(node) ||\r node.children?.some((child) => filterNode(child) && child.children)\r )\r .map((node) => node.id);\r }", "isFunction": true, "isFunctionDeclaration": true, "isRequired": false, @@ -14445,7 +14445,7 @@ "kind": "function", "description": "Programmatically collapse a subset of nodes.\nCollapses all nodes if no argument is provided", "type": "(filterId?: (node: TreeNode) => boolean) => void", - "value": "() => { expandedIds = nodes .filter((node) => expandedIds.includes(node.id) && !filterNode(node)) .map((node) => node.id); }", + "value": "() => {\r expandedIds = nodes\r .filter((node) => expandedIds.includes(node.id) && !filterNode(node))\r .map((node) => node.id);\r }", "isFunction": true, "isFunctionDeclaration": true, "isRequired": false, diff --git a/docs/src/pages/components/NumberInput.svx b/docs/src/pages/components/NumberInput.svx index 7c4c7317af..e8ebc97d5e 100644 --- a/docs/src/pages/components/NumberInput.svx +++ b/docs/src/pages/components/NumberInput.svx @@ -27,12 +27,16 @@ See [#no-value](#no-value) to allow for an empty value. -## No value +## No value and error states -Set `allowEmpty` to `true` to allow for no value. +Set `required` to `false` to allow for no value. Set `value` to `null` to denote "no value." +Set `invalid` to `true` to force a `error` state for the input. + +The input is reactive to `min`, `max` and `required` attributes. + ## Hidden label diff --git a/docs/src/pages/framed/NumberInput/NumberInputEmpty.svelte b/docs/src/pages/framed/NumberInput/NumberInputEmpty.svelte index cc76a33093..e7dd225c60 100644 --- a/docs/src/pages/framed/NumberInput/NumberInputEmpty.svelte +++ b/docs/src/pages/framed/NumberInput/NumberInputEmpty.svelte @@ -2,14 +2,40 @@ import { NumberInput, Button } from "carbon-components-svelte"; let value = null; + let invalid = false; + let min; + let max; + let required = false; - +
+ +
-Value: -{value} +

+ Value: + {value} +

+

+ Invalid: + {invalid} +

+ +

+ Required: + {required} +

+ + + diff --git a/src/NumberInput/NumberInput.svelte b/src/NumberInput/NumberInput.svelte index 2b0f76ee15..d7c0b34fc9 100644 --- a/src/NumberInput/NumberInput.svelte +++ b/src/NumberInput/NumberInput.svelte @@ -39,8 +39,8 @@ /** Set to `true` for the input to be read-only */ export let readonly = false; - /** Set to `true` to allow for an empty value */ - export let allowEmpty = false; + /** Set to `false` for the input to not be required */ + export let required = true; /** Set to `true` to disable the input */ export let disabled = false; @@ -55,7 +55,7 @@ export let invalid = false; /** Specify the invalid state text */ - export let invalidText = ""; + export let invalidText = "Number is not valid"; /** Set to `true` to indicate an warning state */ export let warn = false; @@ -99,7 +99,9 @@ /** Obtain a reference to the input HTML element */ export let ref = null; - import { createEventDispatcher } from "svelte"; + let error = false; + + import { createEventDispatcher, tick } from "svelte"; import Add from "../icons/Add.svelte"; import Subtract from "../icons/Subtract.svelte"; import WarningFilled from "../icons/WarningFilled.svelte"; @@ -125,31 +127,20 @@ dispatch("change", value); } + async function setErrorState() { + // We need to wait for the values to be synced before checking the validity. + await tick(); + error = !ref.checkValidity() || invalid; + } + $: incrementLabel = translateWithId("increment"); $: decrementLabel = translateWithId("decrement"); - $: error = - invalid || - (!allowEmpty && value == null) || - value > max || - (typeof value === "number" && value < min); $: errorId = `error-${id}`; $: ariaLabel = $$props["aria-label"] || "Numeric input field with increment and decrement buttons"; - - function parse(raw) { - return raw != "" ? Number(raw) : null; - } - - function onInput({ target }) { - value = parse(target.value); - - dispatch("input", value); - } - - function onChange({ target }) { - dispatch("change", parse(target.value)); - } + $: if (ref) ref.setCustomValidity(invalid ? invalidText : ""); + $: value, invalid, required, step, min, max, setErrorState(); @@ -162,7 +153,7 @@ on:mouseleave >
- {#if invalid} + {#if error} {/if} - {#if !invalid && warn} + {#if !error && warn}