From c55e3a9b3dabf073594ee445bd711f509b51e405 Mon Sep 17 00:00:00 2001 From: Samuel Janda Date: Sat, 13 Jan 2024 20:47:35 +1100 Subject: [PATCH] Initial commit --- COMPONENT_INDEX.md | 604 +++++++++++++++--------- docs/package-lock.json | 10 +- docs/src/COMPONENT_API.json | 240 +++++----- docs/src/pages/components/TextInput.svx | 4 + package.json | 3 +- src/TextInput/TextInput.svelte | 169 ++++--- types/TextInput/TextInput.svelte.d.ts | 122 ++--- 7 files changed, 697 insertions(+), 455 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 036a2a74..22c7c8ef 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 @@ -538,26 +546,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>`).

NOTE: you _must_ use the `code` prop for the copy-to-clipboard functionality. | -| copy | No | let | No | (code: string) => void | async (code) => { try { await navigator.clipboard.writeText(code); } catch (e) { console.log(e); } } | By default, this component uses `navigator.clipboard.writeText` API to copy text to the user's clipboard.

Provide a custom function to override this behavior. | -| 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: this prop only works with the `type="multi"` variant | -| 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.

NOTE: this prop only works with the `type="multi"` variant | -| showMoreText | No | let | No | string | "Show more" | Specify the show more text

NOTE: this prop only works with the `type="multi"` variant | -| 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>`).

NOTE: you _must_ use the `code` prop for the copy-to-clipboard functionality. | +| copy | No | let | No | (code: string) => void | async (code) => { | + + try { + await navigator.clipboard.writeText(code); + } catch (e) { + console.log(e); + } + +} | By default, this component uses `navigator.clipboard.writeText` API to copy text to the user's clipboard.

Provide a custom function to override this behavior. | +| 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: this prop only works with the `type="multi"` variant | +| 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.

NOTE: this prop only works with the `type="multi"` variant | +| showMoreText | No | let | No | string | "Show more" | Specify the show more text

NOTE: this prop only works with the `type="multi"` variant | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the code element | ### Slots @@ -656,32 +672,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" | "lg" | 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" | "lg" | 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 @@ -899,13 +926,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 @@ -1254,21 +1289,25 @@ 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 | -| labelTitle | No | let | No | string | "" | Specify the label title.
Alternatively, use the named slot "labelTitle" (e.g., `<span slot="labelTitle">...</span>`) | -| labelDescription | No | let | No | string | "" | Specify the label description.
Alternatively, use the named slot "labelDescription" (e.g., `<span slot="labelDescription">...</span>`) | -| kind | No | let | No | import("../Button/Button.svelte").ButtonProps["kind"] | "primary" | Specify the kind of file uploader button | -| size | No | let | No | import("../Button/Button.svelte").ButtonProps["size"] | "small" | Specify the size of the 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 | +| labelTitle | No | let | No | string | "" | Specify the label title.
Alternatively, use the named slot "labelTitle" (e.g., `<span slot="labelTitle">...</span>`) | +| labelDescription | No | let | No | string | "" | Specify the label description.
Alternatively, use the named slot "labelDescription" (e.g., `<span slot="labelDescription">...</span>`) | +| kind | No | let | No | import("../Button/Button.svelte").ButtonProps["kind"] | "primary" | Specify the kind of file uploader button | +| size | No | let | No | import("../Button/Button.svelte").ButtonProps["size"] | "small" | Specify the size of the 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 @@ -1835,9 +1874,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 @@ -1874,16 +1914,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 @@ -2137,13 +2187,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 @@ -2199,12 +2257,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 @@ -2359,43 +2423,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; value?: string } | (item) => {} | Override the item name, title, labelText, or value passed to the user-selectable checkbox input as well as the hidden inputs. | -| size | No | let | No | "sm" | "lg" | 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; value?: string } | (item) => {} | Override the item name, title, labelText, or value passed to the user-selectable checkbox input as well as the hidden inputs. | +| size | No | let | No | "sm" | "lg" | 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 @@ -2489,31 +2555,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" | "lg" | 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" | "lg" | 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 | ### Slots @@ -2625,10 +2696,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 @@ -2659,9 +2736,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 @@ -2674,24 +2754,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 @@ -4132,26 +4215,28 @@ None. ### 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 | string | "" | Specify the input value.

`value` will be set to `null` if type="number"
and the value is empty. | -| size | No | let | No | "sm" | "lg" | undefined | Set the size of the input | -| placeholder | No | let | No | string | "" | Specify the placeholder text | -| light | No | let | No | boolean | false | Set to `true` to enable the light variant | -| disabled | No | let | No | boolean | false | Set to `true` to disable the input | -| helperText | No | let | No | string | "" | Specify the helper text | -| 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 | -| labelText | No | let | No | string | "" | Specify the label text | -| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | -| 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 | -| required | No | let | No | boolean | false | Set to `true` to mark the field as required | -| inline | No | let | No | boolean | false | Set to `true` to use the inline variant | -| readonly | No | let | No | boolean | false | Set to `true` to use the read-only variant | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :---------- | :------- | :--------------- | :------- | --------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| value | No | let | Yes | null | number | string | "" | Specify the input value
`value` will be set to `null` if `type = "number"` and the value is empty | +| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| disabled | No | let | No | boolean | false | Set to `true` to disable the input | +| counter | No | let | No | "char" | "word" | undefined | Set to "char" to enable display the character counter or "word" to display the word count. | +| helperText | No | let | No | string | "" | Specify the helper text | +| 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 input element | +| inline | No | let | No | boolean | false | Set to `true` to use the inline variant | +| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state | +| invalidText | No | let | No | string | "" | Specify the invalid state text | +| labelText | No | let | No | string | "" | Specify the label text | +| light | No | let | No | boolean | false | Set to `true` to enable the light variant
For use on $ui-01 backgrounds only. Don't use this to make tile background color same as container background color
The light prop for `TextInput` has been deprecated in favor of the new `Layer` Layer component. It will be removed in the next major release
@deprecated | +| maxCount | No | let | No | number | undefined | Specify the maximum number of characters/words allowed
This is needed in order for `counter` to display | +| name | No | let | No | string | undefined | Specify a name attribute for the input | +| placeholder | No | let | No | string | "" | Specify the placeholder text | +| readonly | No | let | No | boolean | false | Set to `true` to use the read-only variant | +| required | No | let | No | boolean | false | Set to `true` to mark the field as required | +| size | No | let | No | "sm" | "md" | "lg" | undefined | Set the size of the input | +| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state | +| warnText | No | let | No | string | "" | Specify the warning state text | ### Slots @@ -4206,15 +4291,27 @@ export type CarbonTheme = "white" | "g10" | "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 @@ -4444,10 +4541,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 @@ -4682,20 +4780,62 @@ 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 | "xs" | "sm" | "sm" | 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 | -| showNode | No | function | No | (id: TreeNodeId) => void | () => { for (const child of children) { const nodes = findNodeById(child, id); if (nodes) { const ids = nodes.map((node) => node.id); const nodeIds = new Set(ids); expandNodes((node) => nodeIds.has(node.id)); const lastId = ids[ids.length - 1]; activeId = lastId; selectedIds = [lastId]; tick().then(() => { ref?.querySelector(\`[id="${lastId}"]\`)?.focus(); }); // Break out of the loop if the node is found. break; } } } | Programmatically show a node by `id`.
The matching node will be expanded, selected, and focused | +| 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 | "xs" | "sm" | "sm" | 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 | +| showNode | No | function | No | (id: TreeNodeId) => void | () => { +for (const child of children) { +const nodes = findNodeById(child, id); + + if (nodes) { + const ids = nodes.map((node) => node.id); + const nodeIds = new Set(ids); + + expandNodes((node) => nodeIds.has(node.id)); + + const lastId = ids[ids.length - 1]; + + activeId = lastId; + selectedIds = [lastId]; + + tick().then(() => { + ref?.querySelector(\`[id="${lastId}"]\`)?.focus(); + }); + + // Break out of the loop if the node is found. + break; + } + } + +} | Programmatically show a node by `id`.
The matching node will be expanded, selected, and focused | ### Slots diff --git a/docs/package-lock.json b/docs/package-lock.json index 5e5a5a12..1a9b52b1 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -25,7 +25,7 @@ } }, "..": { - "version": "0.82.7", + "version": "1.0.0-next.0", "dev": true, "license": "Apache-2.0", "dependencies": { @@ -39,17 +39,17 @@ "autoprefixer": "^10.4.8", "carbon-icons-svelte": "^12.1.0", "postcss": "^8.4.16", - "prettier": "^3.1.1", - "prettier-plugin-svelte": "^3.1.2", + "prettier": "^2.8.8", + "prettier-plugin-svelte": "^2.10.1", "rollup": "^2.78.1", "rollup-plugin-svelte": "^7.1.0", "rollup-plugin-terser": "^7.0.2", "sass": "^1.49.11", "standard-version": "^9.5.0", - "sveld": "^0.19.0", + "sveld": "^0.19.1", "svelte": "^4.2.0", "svelte-check": "^3.4.6", - "typescript": "^4.7.4" + "typescript": "^5.3.3" } }, "node_modules/@ampproject/remapping": { diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index a86fb2a0..6c9b933c 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, @@ -1041,7 +1041,7 @@ "kind": "let", "description": "By default, this component uses `navigator.clipboard.writeText` API to copy text to the user's clipboard.\n\nProvide a custom function to override this behavior.", "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, @@ -1732,7 +1732,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, @@ -2322,7 +2322,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, @@ -3791,7 +3791,7 @@ "kind": "const", "description": "Programmatically clear the uploaded files", "type": "() => void", - "value": "() => { files = []; }", + "value": "() => {\r files = [];\r }", "isFunction": true, "isFunctionDeclaration": false, "isRequired": false, @@ -5397,7 +5397,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 }" } ], @@ -5527,7 +5527,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, @@ -6259,8 +6259,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, @@ -6411,7 +6411,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, @@ -6423,7 +6423,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, @@ -7119,7 +7119,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, @@ -7179,7 +7179,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, @@ -7810,7 +7810,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, @@ -8131,7 +8131,7 @@ { "name": "menu", "default": false, - "fallback": "", + "fallback": "", "slot_props": "{}" } ], @@ -8268,7 +8268,7 @@ { "name": "__default__", "default": true, - "fallback": "
\n {text}\n
", + "fallback": "
\r\n {text}\r\n
", "slot_props": "{}" } ], @@ -8360,7 +8360,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, @@ -8372,7 +8372,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, @@ -8456,7 +8456,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, @@ -12697,53 +12697,6 @@ "moduleName": "TextInput", "filePath": "src/TextInput/TextInput.svelte", "props": [ - { - "name": "size", - "kind": "let", - "description": "Set the size of the input", - "type": "\"sm\" | \"lg\"", - "isFunction": false, - "isFunctionDeclaration": false, - "isRequired": false, - "constant": false, - "reactive": false - }, - { - "name": "value", - "kind": "let", - "description": "Specify the input value.\n\n`value` will be set to `null` if type=\"number\"\nand the value is empty.", - "type": "null | number | string", - "value": "\"\"", - "isFunction": false, - "isFunctionDeclaration": false, - "isRequired": false, - "constant": false, - "reactive": true - }, - { - "name": "placeholder", - "kind": "let", - "description": "Specify the placeholder text", - "type": "string", - "value": "\"\"", - "isFunction": false, - "isFunctionDeclaration": false, - "isRequired": false, - "constant": false, - "reactive": false - }, - { - "name": "light", - "kind": "let", - "description": "Set to `true` to enable the light variant", - "type": "boolean", - "value": "false", - "isFunction": false, - "isFunctionDeclaration": false, - "isRequired": false, - "constant": false, - "reactive": false - }, { "name": "disabled", "kind": "let", @@ -12756,6 +12709,17 @@ "constant": false, "reactive": false }, + { + "name": "counter", + "kind": "let", + "description": "Set to \"char\" to enable display the character counter or \"word\" to display the word count.", + "type": "\"char\" | \"word\"", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, { "name": "helperText", "kind": "let", @@ -12768,6 +12732,18 @@ "constant": false, "reactive": false }, + { + "name": "hideLabel", + "kind": "let", + "description": "Set to `true` to visually hide the label text", + "type": "boolean", + "value": "false", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, { "name": "id", "kind": "let", @@ -12781,32 +12757,9 @@ "reactive": false }, { - "name": "name", + "name": "inline", "kind": "let", - "description": "Specify a name attribute for the input", - "type": "string", - "isFunction": false, - "isFunctionDeclaration": false, - "isRequired": false, - "constant": false, - "reactive": false - }, - { - "name": "labelText", - "kind": "let", - "description": "Specify the label text", - "type": "string", - "value": "\"\"", - "isFunction": false, - "isFunctionDeclaration": false, - "isRequired": false, - "constant": false, - "reactive": false - }, - { - "name": "hideLabel", - "kind": "let", - "description": "Set to `true` to visually hide the label text", + "description": "Set to `true` to use the inline variant", "type": "boolean", "value": "false", "isFunction": false, @@ -12840,9 +12793,21 @@ "reactive": false }, { - "name": "warn", + "name": "labelText", "kind": "let", - "description": "Set to `true` to indicate an warning state", + "description": "Specify the label text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, + { + "name": "light", + "kind": "let", + "description": "Set to `true` to enable the light variant\nFor use on $ui-01 backgrounds only. Don't use this to make tile background color same as container background color\nThe light prop for `TextInput` has been deprecated in favor of the new `Layer` Layer component. It will be removed in the next major release\n@deprecated ", "type": "boolean", "value": "false", "isFunction": false, @@ -12852,9 +12817,31 @@ "reactive": false }, { - "name": "warnText", + "name": "maxCount", "kind": "let", - "description": "Specify the warning state text", + "description": "Specify the maximum number of characters/words allowed\nThis is needed in order for `counter` to display", + "type": "number", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Specify a name attribute for the input", + "type": "string", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, + { + "name": "placeholder", + "kind": "let", + "description": "Specify the placeholder text", "type": "string", "value": "\"\"", "isFunction": false, @@ -12863,6 +12850,18 @@ "constant": false, "reactive": false }, + { + "name": "readonly", + "kind": "let", + "description": "Set to `true` to use the read-only variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, { "name": "ref", "kind": "let", @@ -12888,9 +12887,32 @@ "reactive": false }, { - "name": "inline", + "name": "size", "kind": "let", - "description": "Set to `true` to use the inline variant", + "description": "Set the size of the input", + "type": "\"sm\" | \"md\" | \"lg\"", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, + { + "name": "value", + "kind": "let", + "description": "Specify the input value\n`value` will be set to `null` if `type = \"number\"` and the value is empty", + "type": "null | number | string", + "value": "\"\"", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": true + }, + { + "name": "warn", + "kind": "let", + "description": "Set to `true` to indicate an warning state", "type": "boolean", "value": "false", "isFunction": false, @@ -12900,11 +12922,11 @@ "reactive": false }, { - "name": "readonly", + "name": "warnText", "kind": "let", - "description": "Set to `true` to use the read-only variant", - "type": "boolean", - "value": "false", + "description": "Specify the warning state text", + "type": "string", + "value": "\"\"", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -13041,7 +13063,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, @@ -13053,7 +13075,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, @@ -13830,7 +13852,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, @@ -14547,7 +14569,7 @@ "kind": "function", "description": "Programmatically expand all nodes", "type": "() => void", - "value": "() => { expandedIds = [...nodeIds]; }", + "value": "() => {\r expandedIds = [...nodeIds];\r }", "isFunction": true, "isFunctionDeclaration": true, "isRequired": false, @@ -14559,7 +14581,7 @@ "kind": "function", "description": "Programmatically collapse all nodes", "type": "() => void", - "value": "() => { expandedIds = []; }", + "value": "() => {\r expandedIds = [];\r }", "isFunction": true, "isFunctionDeclaration": true, "isRequired": false, @@ -14571,7 +14593,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, @@ -14583,7 +14605,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, @@ -14595,7 +14617,7 @@ "kind": "function", "description": "Programmatically show a node by `id`.\nThe matching node will be expanded, selected, and focused", "type": "(id: TreeNodeId) => void", - "value": "() => { for (const child of children) { const nodes = findNodeById(child, id); if (nodes) { const ids = nodes.map((node) => node.id); const nodeIds = new Set(ids); expandNodes((node) => nodeIds.has(node.id)); const lastId = ids[ids.length - 1]; activeId = lastId; selectedIds = [lastId]; tick().then(() => { ref?.querySelector(`[id=\"${lastId}\"]`)?.focus(); }); // Break out of the loop if the node is found. break; } } }", + "value": "() => {\r for (const child of children) {\r const nodes = findNodeById(child, id);\r \r if (nodes) {\r const ids = nodes.map((node) => node.id);\r const nodeIds = new Set(ids);\r \r expandNodes((node) => nodeIds.has(node.id));\r \r const lastId = ids[ids.length - 1];\r \r activeId = lastId;\r selectedIds = [lastId];\r \r tick().then(() => {\r ref?.querySelector(`[id=\"${lastId}\"]`)?.focus();\r });\r \r // Break out of the loop if the node is found.\r break;\r }\r }\r }", "isFunction": true, "isFunctionDeclaration": true, "isRequired": false, diff --git a/docs/src/pages/components/TextInput.svx b/docs/src/pages/components/TextInput.svx index e624a225..ebaf0cae 100644 --- a/docs/src/pages/components/TextInput.svx +++ b/docs/src/pages/components/TextInput.svx @@ -39,6 +39,10 @@ components: ["TextInput", "TextInputSkeleton"] +## Character Counter + + + ## Invalid state diff --git a/package.json b/package.json index 774bee0c..4580ed50 100644 --- a/package.json +++ b/package.json @@ -88,6 +88,7 @@ "contributors": [ "Josef Aidt (https://github.com/josefaidt)", "Eric Liu (https://github.com/metonym)", - "Enrico Sacchetti (https://github.com/theetrain)" + "Enrico Sacchetti (https://github.com/theetrain)", + "Samuel Janda (https://github.com/SimpleProgrammingAU)" ] } diff --git a/src/TextInput/TextInput.svelte b/src/TextInput/TextInput.svelte index fb574ef4..dbff2f7e 100644 --- a/src/TextInput/TextInput.svelte +++ b/src/TextInput/TextInput.svelte @@ -4,47 +4,26 @@ * @event {null | number | string} input */ - /** - * Set the size of the input - * @type {"sm" | "lg"} - */ - export let size = undefined; - - /** - * Specify the input value. - * - * `value` will be set to `null` if type="number" - * and the value is empty. - * @type {null | number | string} - */ - export let value = ""; - - /** Specify the placeholder text */ - export let placeholder = ""; - - /** Set to `true` to enable the light variant */ - export let light = false; - /** Set to `true` to disable the input */ export let disabled = false; + /** + * Set to "char" to enable display the character counter or "word" to display the word count. + * @type {"char" | "word"} + */ + export let counter = undefined; + /** Specify the helper text */ export let helperText = ""; + /** Set to `true` to visually hide the label text */ + export let hideLabel = false; + /** Set an id for the input element */ export let id = "ccs-" + Math.random().toString(36); - /** - * Specify a name attribute for the input - * @type {string} - */ - export let name = undefined; - - /** Specify the label text */ - export let labelText = ""; - - /** Set to `true` to visually hide the label text */ - export let hideLabel = false; + /** Set to `true` to use the inline variant */ + export let inline = false; /** Set to `true` to indicate an invalid state */ export let invalid = false; @@ -52,11 +31,35 @@ /** Specify the invalid state text */ export let invalidText = ""; - /** Set to `true` to indicate an warning state */ - export let warn = false; + /** Specify the label text */ + export let labelText = ""; - /** Specify the warning state text */ - export let warnText = ""; + /** + * Set to `true` to enable the light variant + * For use on $ui-01 backgrounds only. Don't use this to make tile background color same as container background color + * The light prop for `TextInput` has been deprecated in favor of the new `Layer` Layer component. It will be removed in the next major release + * @deprecated + */ + export let light = false; + + /** + * Specify the maximum number of characters/words allowed + * This is needed in order for `counter` to display + * @type {number} + */ + export let maxCount = undefined; + + /** + * Specify a name attribute for the input + * @type {string} + */ + export let name = undefined; + + /** Specify the placeholder text */ + export let placeholder = ""; + + /** Set to `true` to use the read-only variant */ + export let readonly = false; /** Obtain a reference to the input HTML element */ export let ref = null; @@ -64,11 +67,24 @@ /** Set to `true` to mark the field as required */ export let required = false; - /** Set to `true` to use the inline variant */ - export let inline = false; + /** + * Set the size of the input + * @type {"sm" | "md" | "lg"} + */ + export let size = undefined; - /** Set to `true` to use the read-only variant */ - export let readonly = false; + /** + * Specify the input value + * `value` will be set to `null` if `type = "number"` and the value is empty + * @type {null | number | string} + */ + export let value = ""; + + /** Set to `true` to indicate an warning state */ + export let warn = false; + + /** Specify the warning state text */ + export let warnText = ""; import { createEventDispatcher, getContext } from "svelte"; import WarningFilled from "../icons/WarningFilled.svelte"; @@ -77,6 +93,7 @@ const ctx = getContext("Form"); const dispatch = createEventDispatcher(); + let count = 0; function parse(raw) { if ($$restProps.type !== "number") return raw; @@ -86,6 +103,8 @@ /** @type {(e: Event) => void} */ const onInput = (e) => { value = parse(e.target.value); + if (maxCount && value.length > maxCount) value = value.slice(0, maxCount); + if (counter && maxCount) updateCount(); dispatch("input", value); }; @@ -94,6 +113,14 @@ dispatch("change", parse(e.target.value)); }; + const updateCount = () => { + if (counter === "char") { + count = value.length; + } else if (counter === "word") { + count = value.split(/\b/).length - 1; + } + }; + $: isFluid = !!ctx && ctx.isFluid; $: error = invalid && !readonly; $: helperId = `helper-${id}`; @@ -125,12 +152,21 @@ class:bx--label--disabled="{disabled}" class:bx--label--inline="{inline}" class:bx--label--inline--sm="{size === 'sm'}" + class:bx--label--inline--md="{size === 'md'}" class:bx--label--inline--lg="{size === 'lg' || size === 'xl'}" > {labelText} + {#if maxCount && counter} +
+ {count}/{maxCount} +
+ {/if} {/if} {#if !isFluid && helperText}
{/if} {#if !inline && (labelText || $$slots.labelText)} - +
+ + {#if maxCount && counter} +
+ {count}/{maxCount} +
+ {/if} +
{/if}
+ + diff --git a/types/TextInput/TextInput.svelte.d.ts b/types/TextInput/TextInput.svelte.d.ts index e42bfaf6..836465ff 100644 --- a/types/TextInput/TextInput.svelte.d.ts +++ b/types/TextInput/TextInput.svelte.d.ts @@ -4,45 +4,30 @@ import type { SvelteHTMLElements } from "svelte/elements"; type RestProps = SvelteHTMLElements["input"]; export interface TextInputProps extends RestProps { - /** - * Set the size of the input - * @default undefined - */ - size?: "sm" | "lg"; - - /** - * Specify the input value. - * - * `value` will be set to `null` if type="number" - * and the value is empty. - * @default "" - */ - value?: null | number | string; - - /** - * Specify the placeholder text - * @default "" - */ - placeholder?: string; - - /** - * Set to `true` to enable the light variant - * @default false - */ - light?: boolean; - /** * Set to `true` to disable the input * @default false */ disabled?: boolean; + /** + * Set to "char" to enable display the character counter or "word" to display the word count. + * @default undefined + */ + counter?: "char" | "word"; + /** * Specify the helper text * @default "" */ helperText?: string; + /** + * Set to `true` to visually hide the label text + * @default false + */ + hideLabel?: boolean; + /** * Set an id for the input element * @default "ccs-" + Math.random().toString(36) @@ -50,22 +35,10 @@ export interface TextInputProps extends RestProps { id?: string; /** - * Specify a name attribute for the input - * @default undefined - */ - name?: string; - - /** - * Specify the label text - * @default "" - */ - labelText?: string; - - /** - * Set to `true` to visually hide the label text + * Set to `true` to use the inline variant * @default false */ - hideLabel?: boolean; + inline?: boolean; /** * Set to `true` to indicate an invalid state @@ -80,16 +53,44 @@ export interface TextInputProps extends RestProps { invalidText?: string; /** - * Set to `true` to indicate an warning state - * @default false - */ - warn?: boolean; - - /** - * Specify the warning state text + * Specify the label text * @default "" */ - warnText?: string; + labelText?: string; + + /** + * Set to `true` to enable the light variant + * For use on $ui-01 backgrounds only. Don't use this to make tile background color same as container background color + * The light prop for `TextInput` has been deprecated in favor of the new `Layer` Layer component. It will be removed in the next major release + * @deprecated + * @default false + */ + light?: boolean; + + /** + * Specify the maximum number of characters/words allowed + * This is needed in order for `counter` to display + * @default undefined + */ + maxCount?: number; + + /** + * Specify a name attribute for the input + * @default undefined + */ + name?: string; + + /** + * Specify the placeholder text + * @default "" + */ + placeholder?: string; + + /** + * Set to `true` to use the read-only variant + * @default false + */ + readonly?: boolean; /** * Obtain a reference to the input HTML element @@ -104,16 +105,29 @@ export interface TextInputProps extends RestProps { required?: boolean; /** - * Set to `true` to use the inline variant - * @default false + * Set the size of the input + * @default undefined */ - inline?: boolean; + size?: "sm" | "md" | "lg"; /** - * Set to `true` to use the read-only variant + * Specify the input value + * `value` will be set to `null` if `type = "number"` and the value is empty + * @default "" + */ + value?: null | number | string; + + /** + * Set to `true` to indicate an warning state * @default false */ - readonly?: boolean; + warn?: boolean; + + /** + * Specify the warning state text + * @default "" + */ + warnText?: string; [key: `data-${string}`]: any; }