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

Initial commit

Browse source
This commit is contained in:
Samuel Janda 2024-01-13 20:47:35 +11:00
commit c55e3a9b3d
7 changed files with 697 additions and 455 deletions
Download patch file Download diff file Expand all files Collapse all files

604
COMPONENT_INDEX.md
View file

@ -351,10 +351,18 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------- | :------- | :--------------- | :------- | -------------------------------------------- | ------------------------------------------------------------------------- | ------------------------------------------------- | | :-------- | :------- | :--------------- | :------- | -------------------------------------------- | ------------- | ----------- |
| sizes | No | <code>let</code> | Yes | <code>Record<BreakpointSize, boolean></code> | <code>{ sm: false, md: false, lg: false, xlg: false, max: false, }</code> | Carbon grid sizes as an object | | sizes | No | <code>let</code> | Yes | <code>Record<BreakpointSize, boolean></code> | <code>{ |
| size | No | <code>let</code> | Yes | <code>BreakpointSize</code> | <code>undefined</code> | Determine the current Carbon grid breakpoint size |
sm: false,
md: false,
lg: false,
xlg: false,
max: false,
}</code> | Carbon grid sizes as an object |
| size | No | <code>let</code> | Yes | <code>BreakpointSize</code> | <code>undefined</code> | Determine the current Carbon grid breakpoint size |
### Slots ### Slots
@ -538,26 +546,34 @@ None.
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------------------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | :----------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLPreElement</code> | <code>null</code> | Obtain a reference to the pre HTML element | | ref | No | <code>let</code> | Yes | <code>null &#124; HTMLPreElement</code> | <code>null</code> | Obtain a reference to the pre HTML element |
| showMoreLess | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to enable the show more/less button | | showMoreLess | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to enable the show more/less button |
| expanded | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to expand a multi-line code snippet (type="multi") | | expanded | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to expand a multi-line code snippet (type="multi") |
| type | No | <code>let</code> | No | <code>"single" &#124; "inline" &#124; "multi"</code> | <code>"single"</code> | Set the type of code snippet | | type | No | <code>let</code> | No | <code>"single" &#124; "inline" &#124; "multi"</code> | <code>"single"</code> | Set the type of code snippet |
| code | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set the code snippet text.<br />Alternatively, use the default slot (e.g., `&lt;CodeSnippet&gt;{code}&lt;/CodeSnippet&gt;`).<br /><br />NOTE: you _must_ use the `code` prop for the copy-to-clipboard functionality. | | code | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set the code snippet text.<br />Alternatively, use the default slot (e.g., `&lt;CodeSnippet&gt;{code}&lt;/CodeSnippet&gt;`).<br /><br />NOTE: you _must_ use the `code` prop for the copy-to-clipboard functionality. |
| copy | No | <code>let</code> | No | <code>(code: string) => void</code> | <code>async (code) => { try { await navigator.clipboard.writeText(code); } catch (e) { console.log(e); } }</code> | By default, this component uses `navigator.clipboard.writeText` API to copy text to the user's clipboard.<br /><br />Provide a custom function to override this behavior. | | copy | No | <code>let</code> | No | <code>(code: string) => void</code> | <code>async (code) => { |
| hideCopyButton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the copy button |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the disabled variant.<br />Only applies to the "single", "multi" types | try {
| wrapText | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to wrap the text.<br /><br />NOTE: this prop only works with the `type="multi"` variant | await navigator.clipboard.writeText(code);
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant | } catch (e) {
| skeleton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state | console.log(e);
| copyButtonDescription | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the copy button icon | }
| copyLabel | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label of the copy button |
| feedback | No | <code>let</code> | No | <code>string</code> | <code>"Copied!"</code> | Specify the feedback text displayed when clicking the snippet | }</code> | By default, this component uses `navigator.clipboard.writeText` API to copy text to the user's clipboard.<br /><br />Provide a custom function to override this behavior. |
| feedbackTimeout | No | <code>let</code> | No | <code>number</code> | <code>2000</code> | Set the timeout duration (ms) to display feedback text | | hideCopyButton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the copy button |
| showLessText | No | <code>let</code> | No | <code>string</code> | <code>"Show less"</code> | Specify the show less text.<br /><br />NOTE: this prop only works with the `type="multi"` variant | | disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the disabled variant.<br />Only applies to the "single", "multi" types |
| showMoreText | No | <code>let</code> | No | <code>string</code> | <code>"Show more"</code> | Specify the show more text<br /><br />NOTE: this prop only works with the `type="multi"` variant | | wrapText | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to wrap the text.<br /><br />NOTE: this prop only works with the `type="multi"` variant |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the code element | | light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| skeleton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
| copyButtonDescription | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the copy button icon |
| copyLabel | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label of the copy button |
| feedback | No | <code>let</code> | No | <code>string</code> | <code>"Copied!"</code> | Specify the feedback text displayed when clicking the snippet |
| feedbackTimeout | No | <code>let</code> | No | <code>number</code> | <code>2000</code> | Set the timeout duration (ms) to display feedback text |
| showLessText | No | <code>let</code> | No | <code>string</code> | <code>"Show less"</code> | Specify the show less text.<br /><br />NOTE: this prop only works with the `type="multi"` variant |
| showMoreText | No | <code>let</code> | No | <code>string</code> | <code>"Show more"</code> | Specify the show more text<br /><br />NOTE: this prop only works with the `type="multi"` variant |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the code element |
### Slots ### Slots
@ -656,32 +672,43 @@ export interface ComboBoxItem {
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :----------------------- | :------- | :-------------------- | :------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | | :----------------------- | :------- | :-------------------- | :------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| listRef | No | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the list HTML element | | listRef | No | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the list HTML element |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element | | ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the combobox menu dropdown | | open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the combobox menu dropdown |
| value | No | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the selected combobox value | | value | No | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the selected combobox value |
| selectedId | No | <code>let</code> | Yes | <code>ComboBoxItemId</code> | <code>undefined</code> | Set the selected item by value id | | selectedId | No | <code>let</code> | Yes | <code>ComboBoxItemId</code> | <code>undefined</code> | Set the selected item by value id |
| items | No | <code>let</code> | No | <code>ReadonlyArray<ComboBoxItem></code> | <code>[]</code> | Set the combobox items | | items | No | <code>let</code> | No | <code>ReadonlyArray<ComboBoxItem></code> | <code>[]</code> | Set the combobox items |
| itemToString | No | <code>let</code> | No | <code>(item: ComboBoxItem) => string</code> | <code>(item) => item.text &#124;&#124; item.id</code> | Override the display of a combobox item | | itemToString | No | <code>let</code> | No | <code>(item: ComboBoxItem) => string</code> | <code>(item) => item.text &#124;&#124; item.id</code> | Override the display of a combobox item |
| direction | No | <code>let</code> | No | <code>"bottom" &#124; "top"</code> | <code>"bottom"</code> | Specify the direction of the combobox dropdown menu | | direction | No | <code>let</code> | No | <code>"bottom" &#124; "top"</code> | <code>"bottom"</code> | Specify the direction of the combobox dropdown menu |
| size | No | <code>let</code> | No | <code>"sm" &#124; "lg" </code> | <code>undefined</code> | Set the size of the combobox | | size | No | <code>let</code> | No | <code>"sm" &#124; "lg" </code> | <code>undefined</code> | Set the size of the combobox |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the combobox | | disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the combobox |
| titleText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text of the combobox | | titleText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text of the combobox |
| placeholder | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text | | placeholder | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text |
| helperText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text | | helperText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
| invalidText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text | | invalidText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
| invalid | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state | | invalid | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
| warn | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state | | warn | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state |
| warnText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text | | warnText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant | | light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| shouldFilterItem | No | <code>let</code> | No | <code>(item: ComboBoxItem, value: string) => boolean</code> | <code>() => true</code> | Determine if an item should be filtered given the current combobox value | | shouldFilterItem | No | <code>let</code> | No | <code>(item: ComboBoxItem, value: string) => boolean</code> | <code>() => true</code> | Determine if an item should be filtered given the current combobox value |
| translateWithId | No | <code>let</code> | No | <code>(id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string</code> | <code>undefined</code> | Override the chevron icon label based on the open state.<br />Defaults to "Open menu" when closed and "Close menu" when open | | translateWithId | No | <code>let</code> | No | <code>(id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string</code> | <code>undefined</code> | Override the chevron icon label based on the open state.<br />Defaults to "Open menu" when closed and "Close menu" when open |
| translateWithIdSelection | No | <code>let</code> | No | <code>(id: "clearSelection") => string</code> | <code>undefined</code> | Override the label of the clear button when the input has a selection.<br />Defaults to "Clear selected item" since a combo box can only have on selection. | | translateWithIdSelection | No | <code>let</code> | No | <code>(id: "clearSelection") => string</code> | <code>undefined</code> | Override the label of the clear button when the input has a selection.<br />Defaults to "Clear selected item" since a combo box can only have on selection. |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the list box component | | id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the list box component |
| name | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the input | | name | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the input |
| clear | No | <code>function</code> | No | <code>(options?: { focus?: boolean; }) => void</code> | <code>() => { prevSelectedId = null; highlightedIndex = -1; highlightedId = undefined; selectedId = undefined; selectedItem = undefined; open = false; value = ""; if (options?.focus !== false) ref?.focus(); }</code> | Clear the combo box programmatically | | clear | No | <code>function</code> | No | <code>(options?: { focus?: boolean; }) => void</code> | <code>() => { |
prevSelectedId = null;
highlightedIndex = -1;
highlightedId = undefined;
selectedId = undefined;
selectedItem = undefined;
open = false;
value = "";
if (options?.focus !== false) ref?.focus();
}</code> | Clear the combo box programmatically |
### Slots ### Slots
@ -899,13 +926,21 @@ None.
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------------- | :------- | :--------------- | :------- | ----------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | | :-------------- | :------- | :--------------- | :------- | ----------------------------------- | -------------------------------- | ------------------------------------------------------ |
| feedback | No | <code>let</code> | No | <code>string</code> | <code>"Copied!"</code> | Set the feedback text shown after clicking the button | | feedback | No | <code>let</code> | No | <code>string</code> | <code>"Copied!"</code> | Set the feedback text shown after clicking the button |
| feedbackTimeout | No | <code>let</code> | No | <code>number</code> | <code>2000</code> | Set the timeout duration (ms) to display feedback text | | feedbackTimeout | No | <code>let</code> | No | <code>number</code> | <code>2000</code> | Set the timeout duration (ms) to display feedback text |
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Copy to clipboard"</code> | Set the title and ARIA label for the copy button | | iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Copy to clipboard"</code> | Set the title and ARIA label for the copy button |
| text | Yes | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the text to copy | | text | Yes | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the text to copy |
| copy | No | <code>let</code> | No | <code>(text: string) => void</code> | <code>async (text) => { try { await navigator.clipboard.writeText(text); } catch (e) { console.log(e); } }</code> | Override the default copy behavior of using the navigator.clipboard.writeText API to copy text | | copy | No | <code>let</code> | No | <code>(text: string) => void</code> | <code>async (text) => { |
try {
await navigator.clipboard.writeText(text);
} catch (e) {
console.log(e);
}
}</code> | Override the default copy behavior of using the navigator.clipboard.writeText API to copy text |
### Slots ### Slots
@ -1254,21 +1289,25 @@ None.
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :--------------- | :------- | :----------------- | :------- | ------------------------------------------------------------------ | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | | :--------- | :------- | :----------------- | :------- | -------------------------------------------------------- | ------------------------ | ------------------------------------------ |
| files | No | <code>let</code> | Yes | <code>ReadonlyArray<File></code> | <code>[]</code> | Obtain a reference to the uploaded files | | files | No | <code>let</code> | Yes | <code>ReadonlyArray<File></code> | <code>[]</code> | Obtain a reference to the uploaded files |
| status | No | <code>let</code> | No | <code>"uploading" &#124; "edit" &#124; "complete"</code> | <code>"uploading"</code> | Specify the file uploader status | | status | No | <code>let</code> | No | <code>"uploading" &#124; "edit" &#124; "complete"</code> | <code>"uploading"</code> | Specify the file uploader status |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the file uploader | | disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the file uploader |
| accept | No | <code>let</code> | No | <code>ReadonlyArray<string></code> | <code>[]</code> | Specify the accepted file types | | accept | No | <code>let</code> | No | <code>ReadonlyArray<string></code> | <code>[]</code> | Specify the accepted file types |
| multiple | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow multiple files | | multiple | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow multiple files |
| clearFiles | No | <code>const</code> | No | <code>() => void</code> | <code>() => { files = []; }</code> | Programmatically clear the uploaded files | | clearFiles | No | <code>const</code> | No | <code>() => void</code> | <code>() => { |
| labelTitle | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label title.<br />Alternatively, use the named slot "labelTitle" (e.g., `&lt;span slot="labelTitle"&gt;...&lt;/span&gt;`) |
| labelDescription | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label description.<br />Alternatively, use the named slot "labelDescription" (e.g., `&lt;span slot="labelDescription"&gt;...&lt;/span&gt;`) | files = [];
| kind | No | <code>let</code> | No | <code>import("../Button/Button.svelte").ButtonProps["kind"]</code> | <code>"primary"</code> | Specify the kind of file uploader button |
| size | No | <code>let</code> | No | <code>import("../Button/Button.svelte").ButtonProps["size"]</code> | <code>"small"</code> | Specify the size of the file uploader button | }</code> | Programmatically clear the uploaded files |
| buttonLabel | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the button label | | labelTitle | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label title.<br />Alternatively, use the named slot "labelTitle" (e.g., `&lt;span slot="labelTitle"&gt;...&lt;/span&gt;`) |
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Provide icon description"</code> | Specify the ARIA label used for the status icons | | labelDescription | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label description.<br />Alternatively, use the named slot "labelDescription" (e.g., `&lt;span slot="labelDescription"&gt;...&lt;/span&gt;`) |
| name | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify a name attribute for the file button uploader input | | kind | No | <code>let</code> | No | <code>import("../Button/Button.svelte").ButtonProps["kind"]</code> | <code>"primary"</code> | Specify the kind of file uploader button |
| size | No | <code>let</code> | No | <code>import("../Button/Button.svelte").ButtonProps["size"]</code> | <code>"small"</code> | Specify the size of the file uploader button |
| buttonLabel | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the button label |
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Provide icon description"</code> | Specify the ARIA label used for the status icons |
| name | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify a name attribute for the file button uploader input |
### Slots ### Slots
@ -1835,9 +1874,10 @@ export interface HeaderSearchResult {
### Slots ### Slots
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :-------- | :------ | :---------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------ | | :----------------------------------------------------------------------------------------- | :------ | :---------------------------------------------------------- | :------------------ |
| -- | Yes | <code>{ result: HeaderSearchResult; index: number } </code> | <code>{result.text}<br /> {#if result.description}&lt;span&gt;– {result.description}&lt;/span&gt;{/if}</code> | | -- | Yes | <code>{ result: HeaderSearchResult; index: number } </code> | <code>{result.text} |
| <br /> {#if result.description}&lt;span&gt;– {result.description}&lt;/span&gt;{/if}</code> |
### Events ### Events
@ -1874,16 +1914,26 @@ None.
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------- | :------- | :----------------- | :------- | --------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | | :-------- | :------- | :----------------- | :------- | --------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------- |
| error | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` if an error occurs when loading the image | | error | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` if an error occurs when loading the image |
| loaded | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` when the image is loaded | | loaded | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` when the image is loaded |
| loading | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` when `loaded` is `true` and `error` is false | | loading | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` when `loaded` is `true` and `error` is false |
| src | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the image source | | src | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the image source |
| alt | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the image alt text | | alt | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the image alt text |
| ratio | No | <code>let</code> | No | <code>"2x1" &#124; "16x9" &#124; "4x3" &#124; "1x1" &#124; "3x4" &#124; "3x2" &#124; "9x16" &#124; "1x2"</code> | <code>undefined</code> | Specify the aspect ratio for the image wrapper | | ratio | No | <code>let</code> | No | <code>"2x1" &#124; "16x9" &#124; "4x3" &#124; "1x1" &#124; "3x4" &#124; "3x2" &#124; "9x16" &#124; "1x2"</code> | <code>undefined</code> | Specify the aspect ratio for the image wrapper |
| fadeIn | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to fade in the image on load<br />The duration uses the `fast-02` value following Carbon guidelines on motion | | fadeIn | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to fade in the image on load<br />The duration uses the `fast-02` value following Carbon guidelines on motion |
| loadImage | No | <code>const</code> | No | <code>(url?: string) => void</code> | <code>(url) => { if (image != null) image = null; loaded = false; error = false; image = new Image(); image.src = url &#124;&#124; src; image.onload = () => (loaded = true); image.onerror = () => (error = true); }</code> | Method invoked to load the image provided a `src` value | | loadImage | No | <code>const</code> | No | <code>(url?: string) => void</code> | <code>(url) => { |
if (image != null) image = null;
loaded = false;
error = false;
image = new Image();
image.src = url &#124;&#124; src;
image.onload = () => (loaded = true);
image.onerror = () => (error = true);
}</code> | Method invoked to load the image provided a `src` value |
### Slots ### Slots
@ -2137,13 +2187,21 @@ export type ListBoxSelectionTranslationId = "clearAll" | "clearSelection";
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------------- | :------- | :----------------- | :------- | ------------------------------------------------------------------------ | ------------------------------------------------------------------------ | ------------------------------------------------ | | :------------- | :------- | :----------------- | :------- | --------------------------------------- | ---------------------- | ------------------------------------------------ |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the top-level HTML element | | ref | No | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the top-level HTML element |
| selectionCount | No | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the number of selected items | | selectionCount | No | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the number of selected items |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the list box selection | | disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the list box selection |
| translationIds | No | <code>const</code> | No | <code>{ clearAll: "clearAll", clearSelection: "clearSelection", }</code> | <code>{ clearAll: "clearAll", clearSelection: "clearSelection", }</code> | Default translation ids | | translationIds | No | <code>const</code> | No | <code>{ |
| translateWithId | No | <code>let</code> | No | <code>(id: ListBoxSelectionTranslationId) => string</code> | <code>(id) => defaultTranslations[id]</code> | Override the default translation ids |
clearAll: "clearAll",
clearSelection: "clearSelection",
}</code> | <code>{
clearAll: "clearAll",
clearSelection: "clearSelection",
}</code> | Default translation ids |
| translateWithId | No | <code>let</code> | No | <code>(id: ListBoxSelectionTranslationId) => string</code> | <code>(id) => defaultTranslations[id]</code> | Override the default translation ids |
### Slots ### Slots
@ -2199,12 +2257,18 @@ None.
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------- | :------- | :-------------------- | :------- | ----------------------- | ---------------------------------------------------- | --------------------------------------------------------------- | | :-------- | :------- | :-------------------- | :------- | ----------------------- | -------------------------------- | ----------------------------- |
| value | No | <code>let</code> | Yes | <code>any</code> | <code>""</code> | Provide a value to persist | | value | No | <code>let</code> | Yes | <code>any</code> | <code>""</code> | Provide a value to persist |
| key | No | <code>let</code> | No | <code>string</code> | <code>"local-storage-key"</code> | Specify the local storage key | | key | No | <code>let</code> | No | <code>string</code> | <code>"local-storage-key"</code> | Specify the local storage key |
| clearItem | No | <code>function</code> | No | <code>() => void</code> | <code>() => { localStorage.removeItem(key); }</code> | Remove the persisted key value from the browser's local storage | | clearItem | No | <code>function</code> | No | <code>() => void</code> | <code>() => { |
| clearAll | No | <code>function</code> | No | <code>() => void</code> | <code>() => { localStorage.clear(); }</code> | Clear all key values from the browser's local storage |
localStorage.removeItem(key);
}</code> | Remove the persisted key value from the browser's local storage |
| clearAll | No | <code>function</code> | No | <code>() => void</code> | <code>() => {
localStorage.clear();
}</code> | Clear all key values from the browser's local storage |
### Slots ### Slots
@ -2359,43 +2423,45 @@ export interface MultiSelectItem {
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :----------------------- | :------- | :--------------- | :------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | :------------------------------------------------------------------ | :------------------------------------------------------------------------------------ | :--------------- | :------- | ---------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| highlightedId | No | <code>let</code> | Yes | <code>null &#124; MultiSelectItemId</code> | <code>null</code> | Id of the highlighted ListBoxMenuItem | | highlightedId | No | <code>let</code> | Yes | <code>null &#124; MultiSelectItemId</code> | <code>null</code> | Id of the highlighted ListBoxMenuItem |
| selectionRef | No | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the selection element | | selectionRef | No | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the selection element |
| fieldRef | No | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the field box element | | fieldRef | No | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the field box element |
| multiSelectRef | No | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the outer div element | | multiSelectRef | No | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the outer div element |
| inputRef | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element | | inputRef | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the dropdown | | open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the dropdown |
| value | No | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the multiselect value | | value | No | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the multiselect value |
| selectedIds | No | <code>let</code> | Yes | <code>ReadonlyArray<MultiSelectItemId></code> | <code>[]</code> | Set the selected ids | | selectedIds | No | <code>let</code> | Yes | <code>ReadonlyArray<MultiSelectItemId></code> | <code>[]</code> | Set the selected ids |
| items | No | <code>let</code> | Yes | <code>ReadonlyArray<MultiSelectItem></code> | <code>[]</code> | Set the multiselect items | | items | No | <code>let</code> | Yes | <code>ReadonlyArray<MultiSelectItem></code> | <code>[]</code> | Set the multiselect items |
| itemToString | No | <code>let</code> | No | <code>(item: MultiSelectItem) => any</code> | <code>(item) => item.text &#124;&#124; item.id</code> | Override the display of a multiselect item | | itemToString | No | <code>let</code> | No | <code>(item: MultiSelectItem) => any</code> | <code>(item) => item.text &#124;&#124; item.id</code> | Override the display of a multiselect item |
| itemToInput | No | <code>let</code> | No | <code>(item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; value?: string }</code> | <code>(item) => {}</code> | Override the item name, title, labelText, or value passed to the user-selectable checkbox input as well as the hidden inputs. | | itemToInput | No | <code>let</code> | No | <code>(item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; value?: string }</code> | <code>(item) => {}</code> | Override the item name, title, labelText, or value passed to the user-selectable checkbox input as well as the hidden inputs. |
| size | No | <code>let</code> | No | <code>"sm" &#124; "lg"</code> | <code>undefined</code> | Set the size of the combobox | | size | No | <code>let</code> | No | <code>"sm" &#124; "lg"</code> | <code>undefined</code> | Set the size of the combobox |
| type | No | <code>let</code> | No | <code>"default" &#124; "inline"</code> | <code>"default"</code> | Specify the type of multiselect | | type | No | <code>let</code> | No | <code>"default" &#124; "inline"</code> | <code>"default"</code> | Specify the type of multiselect |
| direction | No | <code>let</code> | No | <code>"bottom" &#124; "top"</code> | <code>"bottom"</code> | Specify the direction of the multiselect dropdown menu | | direction | No | <code>let</code> | No | <code>"bottom" &#124; "top"</code> | <code>"bottom"</code> | Specify the direction of the multiselect dropdown menu |
| selectionFeedback | No | <code>let</code> | No | <code>"top" &#124; "fixed" &#124; "top-after-reopen"</code> | <code>"top-after-reopen"</code> | Specify the selection feedback after selecting items | | selectionFeedback | No | <code>let</code> | No | <code>"top" &#124; "fixed" &#124; "top-after-reopen"</code> | <code>"top-after-reopen"</code> | Specify the selection feedback after selecting items |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the dropdown | | disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the dropdown |
| filterable | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to filter items | | filterable | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to filter items |
| filterItem | No | <code>let</code> | No | <code>(item: MultiSelectItem, value: string) => string</code> | <code>(item, value) => item.text.toLowerCase().includes(value.trim().toLowerCase())</code> | Override the filtering logic<br />The default filtering is an exact string comparison | | filterItem | No | <code>let</code> | No | <code>(item: MultiSelectItem, value: string) => string</code> | <code>(item, value) => |
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant | | item.text.toLowerCase().includes(value.trim().toLowerCase())</code> | Override the filtering logic<br />The default filtering is an exact string comparison |
| locale | No | <code>let</code> | No | <code>string</code> | <code>"en"</code> | Specify the locale | | light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| placeholder | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text | | locale | No | <code>let</code> | No | <code>string</code> | <code>"en"</code> | Specify the locale |
| sortItem | No | <code>let</code> | No | <code>((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) &#124; (() => void)</code> | <code>(a, b) => a.text.localeCompare(b.text, locale, { numeric: true })</code> | Override the sorting logic<br />The default sorting compare the item text value | | placeholder | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text |
| translateWithId | No | <code>let</code> | No | <code>(id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string</code> | <code>undefined</code> | Override the chevron icon label based on the open state.<br />Defaults to "Open menu" when closed and "Close menu" when open | | sortItem | No | <code>let</code> | No | <code>((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) &#124; (() => void)</code> | <code>(a, b) => |
| translateWithIdSelection | No | <code>let</code> | No | <code>(id: import("../ListBox/ListBoxSelection.svelte").ListBoxSelectionTranslationId) => string</code> | <code>undefined</code> | Override the label of the clear button when the input has a selection.<br />Defaults to "Clear selected item" and "Clear all items" if more than one item is selected | | a.text.localeCompare(b.text, locale, { numeric: true })</code> | Override the sorting logic<br />The default sorting compare the item text value |
| titleText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text | | translateWithId | No | <code>let</code> | No | <code>(id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string</code> | <code>undefined</code> | Override the chevron icon label based on the open state.<br />Defaults to "Open menu" when closed and "Close menu" when open |
| useTitleInItem | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to pass the item to `itemToString` in the checkbox | | translateWithIdSelection | No | <code>let</code> | No | <code>(id: import("../ListBox/ListBoxSelection.svelte").ListBoxSelectionTranslationId) => string</code> | <code>undefined</code> | Override the label of the clear button when the input has a selection.<br />Defaults to "Clear selected item" and "Clear all items" if more than one item is selected |
| invalid | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state | | titleText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text |
| invalidText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text | | useTitleInItem | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to pass the item to `itemToString` in the checkbox |
| warn | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state | | invalid | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
| warnText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text | | invalidText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
| helperText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text | | warn | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state |
| label | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the list box label | | warnText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
| hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text | | helperText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the list box component | | label | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the list box label |
| name | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the select | | hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the list box component |
| name | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the select |
### Slots ### Slots
@ -2489,31 +2555,36 @@ export type NumberInputTranslationId = "increment" | "decrement";
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------------- | :------- | :----------------- | :------- | --------------------------------------------------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------- | | :-------------- | :------- | :----------------- | :------- | --------------------------------------------------------------- | -------------------------------------------- | ------------------------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element | | ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| value | No | <code>let</code> | Yes | <code>null &#124; number</code> | <code>null</code> | Specify the input value.<br />Use `null` to denote "no value" | | value | No | <code>let</code> | Yes | <code>null &#124; number</code> | <code>null</code> | Specify the input value.<br />Use `null` to denote "no value" |
| size | No | <code>let</code> | No | <code>"sm" &#124; "lg"</code> | <code>undefined</code> | Set the size of the input | | size | No | <code>let</code> | No | <code>"sm" &#124; "lg"</code> | <code>undefined</code> | Set the size of the input |
| step | No | <code>let</code> | No | <code>number</code> | <code>1</code> | Specify the step increment | | step | No | <code>let</code> | No | <code>number</code> | <code>1</code> | Specify the step increment |
| max | No | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the maximum value | | max | No | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the maximum value |
| min | No | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the minimum value | | min | No | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the minimum value |
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant | | light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| readonly | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the input to be read-only | | readonly | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the input to be read-only |
| allowEmpty | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow for an empty value | | allowEmpty | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow for an empty value |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input | | disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input |
| hideSteppers | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the input stepper buttons | | hideSteppers | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the input stepper buttons |
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label for the increment icons | | iconDescription | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label for the increment icons |
| invalid | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state | | invalid | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
| invalidText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text | | invalidText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
| warn | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state | | warn | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state |
| warnText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text | | warnText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
| helperText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text | | helperText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
| label | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text | | label | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
| hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text | | hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
| translateWithId | No | <code>let</code> | No | <code>(id: NumberInputTranslationId) => string</code> | <code>(id) => defaultTranslations[id]</code> | Override the default translation ids | | translateWithId | No | <code>let</code> | No | <code>(id: NumberInputTranslationId) => string</code> | <code>(id) => defaultTranslations[id]</code> | Override the default translation ids |
| translationIds | No | <code>const</code> | No | <code>{ increment: "increment"; decrement: "decrement" }</code> | <code>{ increment: "increment", decrement: "decrement", }</code> | Default translation ids | | translationIds | No | <code>const</code> | No | <code>{ increment: "increment"; decrement: "decrement" }</code> | <code>{ |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
| name | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the input | increment: "increment",
decrement: "decrement",
}</code> | Default translation ids |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
| name | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the input |
### Slots ### Slots
@ -2625,10 +2696,16 @@ None.
### Slots ### Slots
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | :-------- | :------ | :---- | :------------------------- |
| -- | Yes | -- | -- | | -- | Yes | -- | -- |
| menu | No | -- | <code>&lt;svelte:component<br /> this="{icon}"<br /> aria-label="{iconDescription}"<br /> title="{iconDescription}"<br /> class="bx--overflow-menu\_\_icon {iconClass}"<br /> /&gt;</code> | | menu | No | -- | <code>&lt;svelte:component |
<br /> this="{icon}"
<br /> aria-label="{iconDescription}"
<br /> title="{iconDescription}"
<br /> class="bx--overflow-menu\_\_icon {iconClass}"
<br /> /&gt;</code> |
### Events ### Events
@ -2659,9 +2736,12 @@ None.
### Slots ### Slots
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------------------------------------------------------------------------------------------------------------------ | | :-------- | :------ | :---- | :--------------------------------------------------------------------------- |
| -- | Yes | -- | <code>&lt;div class:bx--overflow-menu-options\_\_option-content="{true}"&gt;<br /> {text}<br /> &lt;/div&gt;</code> | | -- | Yes | -- | <code>&lt;div class:bx--overflow-menu-options\_\_option-content="{true}"&gt; |
<br /> {text}
<br /> &lt;/div&gt;</code> |
### Events ### Events
@ -2674,24 +2754,27 @@ None.
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------------------- | :------- | :--------------- | :------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------ | | :--------------------------------------------------------------- | :--------------------------- | :--------------- | :------- | ---------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------ |
| pageSize | No | <code>let</code> | Yes | <code>number</code> | <code>10</code> | Specify the number of items to display in a page | | pageSize | No | <code>let</code> | Yes | <code>number</code> | <code>10</code> | Specify the number of items to display in a page |
| page | No | <code>let</code> | Yes | <code>number</code> | <code>1</code> | Specify the current page index | | page | No | <code>let</code> | Yes | <code>number</code> | <code>1</code> | Specify the current page index |
| totalItems | No | <code>let</code> | No | <code>number</code> | <code>0</code> | Specify the total number of items | | totalItems | No | <code>let</code> | No | <code>number</code> | <code>0</code> | Specify the total number of items |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the pagination | | disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the pagination |
| forwardText | No | <code>let</code> | No | <code>string</code> | <code>"Next page"</code> | Specify the forward button text | | forwardText | No | <code>let</code> | No | <code>string</code> | <code>"Next page"</code> | Specify the forward button text |
| backwardText | No | <code>let</code> | No | <code>string</code> | <code>"Previous page"</code> | Specify the backward button text | | backwardText | No | <code>let</code> | No | <code>string</code> | <code>"Previous page"</code> | Specify the backward button text |
| itemsPerPageText | No | <code>let</code> | No | <code>string</code> | <code>"Items per page:"</code> | Specify the items per page text | | itemsPerPageText | No | <code>let</code> | No | <code>string</code> | <code>"Items per page:"</code> | Specify the items per page text |
| itemText | No | <code>let</code> | No | <code>(min: number, max: number) => string</code> | <code>(min, max) => \`${min}–${max} item${max === 1 ? "" : "s"}\`</code> | Override the item text | | itemText | No | <code>let</code> | No | <code>(min: number, max: number) => string</code> | <code>(min, max) => |
| itemRangeText | No | <code>let</code> | No | <code>(min: number, max: number, total: number) => string</code> | <code>(min, max, total) => \`${min}–${max} of ${total} item${max === 1 ? "" : "s"}\`</code> | Override the item range text | | \`${min}–${max} item${max === 1 ? "" : "s"}\`</code> | Override the item text |
| pageInputDisabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the page input | | itemRangeText | No | <code>let</code> | No | <code>(min: number, max: number, total: number) => string</code> | <code>(min, max, total) => |
| pageSizeInputDisabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the page size input | | \`${min}–${max} of ${total} item${max === 1 ? "" : "s"}\`</code> | Override the item range text |
| pageSizes | No | <code>let</code> | No | <code>ReadonlyArray<number></code> | <code>[10]</code> | Specify the available page sizes | | pageInputDisabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the page input |
| pagesUnknown | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` if the number of pages is unknown | | pageSizeInputDisabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the page size input |
| pageText | No | <code>let</code> | No | <code>(page: number) => string</code> | <code>(page) => \`page ${page}\`</code> | Override the page text | | pageSizes | No | <code>let</code> | No | <code>ReadonlyArray<number></code> | <code>[10]</code> | Specify the available page sizes |
| pageRangeText | No | <code>let</code> | No | <code>(current: number, total: number) => string</code> | <code>(current, total) => \`of ${total} page${total === 1 ? "" : "s"}\`</code> | Override the page range text | | pagesUnknown | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` if the number of pages is unknown |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level element | | pageText | No | <code>let</code> | No | <code>(page: number) => string</code> | <code>(page) => \`page ${page}\`</code> | Override the page text |
| pageRangeText | No | <code>let</code> | No | <code>(current: number, total: number) => string</code> | <code>(current, total) => |
| \`of ${total} page${total === 1 ? "" : "s"}\`</code> | Override the page range text |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level element |
### Slots ### Slots
@ -4132,26 +4215,28 @@ None.
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :---------- | :------- | :--------------- | :------- | --------------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------- | | :---------- | :------- | :--------------- | :------- | --------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element | | value | No | <code>let</code> | Yes | <code>null &#124; number &#124; string</code> | <code>""</code> | Specify the input value<br />`value` will be set to `null` if `type = "number"` and the value is empty |
| value | No | <code>let</code> | Yes | <code>null &#124; number &#124; string</code> | <code>""</code> | Specify the input value.<br /><br />`value` will be set to `null` if type="number"<br />and the value is empty. | | ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| size | No | <code>let</code> | No | <code>"sm" &#124; "lg"</code> | <code>undefined</code> | Set the size of the input | | disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input |
| placeholder | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text | | counter | No | <code>let</code> | No | <code>"char" &#124; "word"</code> | <code>undefined</code> | Set to "char" to enable display the character counter or "word" to display the word count. |
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant | | helperText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input | | hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
| helperText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text | | id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element | | inline | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant |
| name | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the input | | invalid | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text | | invalidText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
| hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text | | labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
| invalid | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state | | light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant<br />For use on $ui-01 backgrounds only. Don't use this to make tile background color same as container background color<br />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<br />@deprecated |
| invalidText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text | | maxCount | No | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the maximum number of characters/words allowed<br />This is needed in order for `counter` to display |
| warn | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state | | name | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the input |
| warnText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text | | placeholder | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text |
| required | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to mark the field as required | | readonly | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the read-only variant |
| inline | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant | | required | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to mark the field as required |
| readonly | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the read-only variant | | size | No | <code>let</code> | No | <code>"sm" &#124; "md" &#124; "lg"</code> | <code>undefined</code> | Set the size of the input |
| warn | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state |
| warnText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
### Slots ### Slots
@ -4206,15 +4291,27 @@ export type CarbonTheme = "white" | "g10" | "g90" | "g100";
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :--------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | | :--------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| theme | No | <code>let</code> | Yes | <code>CarbonTheme</code> | <code>"white"</code> | Set the current Carbon theme | | theme | No | <code>let</code> | Yes | <code>CarbonTheme</code> | <code>"white"</code> | Set the current Carbon theme |
| tokens | No | <code>let</code> | No | <code>{ [token: string]: any; }</code> | <code>{}</code> | Customize a theme with your own tokens<br />@see https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme | | tokens | No | <code>let</code> | No | <code>{ [token: string]: any; }</code> | <code>{}</code> | Customize a theme with your own tokens<br />@see https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme |
| persist | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the theme using window.localStorage | | persist | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the theme using window.localStorage |
| persistKey | No | <code>let</code> | No | <code>string</code> | <code>"theme"</code> | Specify the local storage key | | persistKey | No | <code>let</code> | No | <code>string</code> | <code>"theme"</code> | Specify the local storage key |
| render | No | <code>let</code> | No | <code>"toggle" &#124; "select"</code> | <code>undefined</code> | Render a toggle or select dropdown to control the theme | | render | No | <code>let</code> | No | <code>"toggle" &#124; "select"</code> | <code>undefined</code> | Render a toggle or select dropdown to control the theme |
| toggle | No | <code>let</code> | No | <code>import("../Toggle/Toggle").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; }</code> | <code>{ themes: ["white", "g100"], labelA: "", labelB: "", labelText: "Dark mode", hideLabel: false, }</code> | Override the default toggle props | | toggle | No | <code>let</code> | No | <code>import("../Toggle/Toggle").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; }</code> | <code>{ |
| select | No | <code>let</code> | No | <code>import("../Select/Select").SelectProps & { themes?: CarbonTheme[]; }</code> | <code>{ themes: themeKeys, labelText: "Themes", hideLabel: false, }</code> | Override the default select props |
themes: ["white", "g100"],
labelA: "",
labelB: "",
labelText: "Dark mode",
hideLabel: false,
}</code> | Override the default toggle props |
| select | No | <code>let</code> | No | <code>import("../Select/Select").SelectProps & { themes?: CarbonTheme[]; }</code> | <code>{
themes: themeKeys,
labelText: "Themes",
hideLabel: false,
}</code> | Override the default select props |
### Slots ### Slots
@ -4444,10 +4541,11 @@ None.
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :------------------ | :------- | :--------------- | :------- | ---------------------------------------------- | --------------------------------------------------------------------------------------------------- | ----------------------------------------- | | :------------------------------------------------------------------------- | :------------------------------------- | :--------------- | :------- | ---------------------------------------------- | ------------------------ | ----------------------------------------- |
| active | No | <code>let</code> | Yes | <code>undefined &#124; boolean</code> | <code>undefined</code> | Use a boolean to show or hide the toolbar | | active | No | <code>let</code> | Yes | <code>undefined &#124; boolean</code> | <code>undefined</code> | Use a boolean to show or hide the toolbar |
| formatTotalSelected | No | <code>let</code> | No | <code>(totalSelected: number) => string</code> | <code>(totalSelected) => \`${totalSelected} item${totalSelected === 1 ? "" : "s"} selected\`</code> | Override the total items selected text | | formatTotalSelected | No | <code>let</code> | No | <code>(totalSelected: number) => string</code> | <code>(totalSelected) => |
| \`${totalSelected} item${totalSelected === 1 ? "" : "s"} selected\`</code> | Override the total items selected text |
### Slots ### Slots
@ -4682,20 +4780,62 @@ export interface TreeNode {
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :------------ | :------- | :-------------------- | :------- | ------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | | :---------- | :------- | :-------------------- | :------- | -------------------------------------- | ------------------ | --------------------------------------------------------------- |
| expandedIds | No | <code>let</code> | Yes | <code>ReadonlyArray<TreeNodeId></code> | <code>[]</code> | Set the node ids to be expanded | | expandedIds | No | <code>let</code> | Yes | <code>ReadonlyArray<TreeNodeId></code> | <code>[]</code> | Set the node ids to be expanded |
| selectedIds | No | <code>let</code> | Yes | <code>ReadonlyArray<TreeNodeId></code> | <code>[]</code> | Set the node ids to be selected | | selectedIds | No | <code>let</code> | Yes | <code>ReadonlyArray<TreeNodeId></code> | <code>[]</code> | Set the node ids to be selected |
| activeId | No | <code>let</code> | Yes | <code>TreeNodeId</code> | <code>""</code> | Set the current active node id<br />Only one node can be active | | activeId | No | <code>let</code> | Yes | <code>TreeNodeId</code> | <code>""</code> | Set the current active node id<br />Only one node can be active |
| children | No | <code>let</code> | No | <code>Array<TreeNode></code> | <code>[]</code> | Provide an array of children nodes to render | | children | No | <code>let</code> | No | <code>Array<TreeNode></code> | <code>[]</code> | Provide an array of children nodes to render |
| size | No | <code>let</code> | No | <code>"xs" &#124; "sm"</code> | <code>"sm"</code> | Specify the TreeView size | | size | No | <code>let</code> | No | <code>"xs" &#124; "sm"</code> | <code>"sm"</code> | Specify the TreeView size |
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text | | labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
| hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text | | hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
| expandAll | No | <code>function</code> | No | <code>() => void</code> | <code>() => { expandedIds = [...nodeIds]; }</code> | Programmatically expand all nodes | | expandAll | No | <code>function</code> | No | <code>() => void</code> | <code>() => { |
| collapseAll | No | <code>function</code> | No | <code>() => void</code> | <code>() => { expandedIds = []; }</code> | Programmatically collapse all nodes |
| expandNodes | No | <code>function</code> | No | <code>(filterId?: (node: TreeNode) => boolean) => void</code> | <code>() => { expandedIds = nodes .filter( (node) => filterNode(node) &#124;&#124; node.children?.some((child) => filterNode(child) && child.children) ) .map((node) => node.id); }</code> | Programmatically expand a subset of nodes.<br />Expands all nodes if no argument is provided | expandedIds = [...nodeIds];
| collapseNodes | No | <code>function</code> | No | <code>(filterId?: (node: TreeNode) => boolean) => void</code> | <code>() => { expandedIds = nodes .filter((node) => expandedIds.includes(node.id) && !filterNode(node)) .map((node) => node.id); }</code> | Programmatically collapse a subset of nodes.<br />Collapses all nodes if no argument is provided |
| showNode | No | <code>function</code> | No | <code>(id: TreeNodeId) => void</code> | <code>() => { 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; } } }</code> | Programmatically show a node by `id`.<br />The matching node will be expanded, selected, and focused | }</code> | Programmatically expand all nodes |
| collapseAll | No | <code>function</code> | No | <code>() => void</code> | <code>() => {
expandedIds = [];
}</code> | Programmatically collapse all nodes |
| expandNodes | No | <code>function</code> | No | <code>(filterId?: (node: TreeNode) => boolean) => void</code> | <code>() => {
expandedIds = nodes
.filter(
(node) =>
filterNode(node) &#124;&#124;
node.children?.some((child) => filterNode(child) && child.children)
)
.map((node) => node.id);
}</code> | Programmatically expand a subset of nodes.<br />Expands all nodes if no argument is provided |
| collapseNodes | No | <code>function</code> | No | <code>(filterId?: (node: TreeNode) => boolean) => void</code> | <code>() => {
expandedIds = nodes
.filter((node) => expandedIds.includes(node.id) && !filterNode(node))
.map((node) => node.id);
}</code> | Programmatically collapse a subset of nodes.<br />Collapses all nodes if no argument is provided |
| showNode | No | <code>function</code> | No | <code>(id: TreeNodeId) => void</code> | <code>() => {
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;
}
}
}</code> | Programmatically show a node by `id`.<br />The matching node will be expanded, selected, and focused |
### Slots ### Slots

10
docs/package-lock.json generated
View file

@ -25,7 +25,7 @@
} }
}, },
"..": { "..": {
"version": "0.82.7", "version": "1.0.0-next.0",
"dev": true, "dev": true,
"license": "Apache-2.0", "license": "Apache-2.0",
"dependencies": { "dependencies": {
@ -39,17 +39,17 @@
"autoprefixer": "^10.4.8", "autoprefixer": "^10.4.8",
"carbon-icons-svelte": "^12.1.0", "carbon-icons-svelte": "^12.1.0",
"postcss": "^8.4.16", "postcss": "^8.4.16",
"prettier": "^3.1.1", "prettier": "^2.8.8",
"prettier-plugin-svelte": "^3.1.2", "prettier-plugin-svelte": "^2.10.1",
"rollup": "^2.78.1", "rollup": "^2.78.1",
"rollup-plugin-svelte": "^7.1.0", "rollup-plugin-svelte": "^7.1.0",
"rollup-plugin-terser": "^7.0.2", "rollup-plugin-terser": "^7.0.2",
"sass": "^1.49.11", "sass": "^1.49.11",
"standard-version": "^9.5.0", "standard-version": "^9.5.0",
"sveld": "^0.19.0", "sveld": "^0.19.1",
"svelte": "^4.2.0", "svelte": "^4.2.0",
"svelte-check": "^3.4.6", "svelte-check": "^3.4.6",
"typescript": "^4.7.4" "typescript": "^5.3.3"
} }
}, },
"node_modules/@ampproject/remapping": { "node_modules/@ampproject/remapping": {

240
docs/src/COMPONENT_API.json
View file

@ -409,7 +409,7 @@
"kind": "let", "kind": "let",
"description": "Carbon grid sizes as an object", "description": "Carbon grid sizes as an object",
"type": "Record<BreakpointSize, boolean>", "type": "Record<BreakpointSize, boolean>",
"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, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -1041,7 +1041,7 @@
"kind": "let", "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.", "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", "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, "isFunction": true,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -1732,7 +1732,7 @@
"kind": "function", "kind": "function",
"description": "Clear the combo box programmatically", "description": "Clear the combo box programmatically",
"type": "(options?: { focus?: boolean; }) => void", "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, "isFunction": true,
"isFunctionDeclaration": true, "isFunctionDeclaration": true,
"isRequired": false, "isRequired": false,
@ -2322,7 +2322,7 @@
"kind": "let", "kind": "let",
"description": "Override the default copy behavior of using the navigator.clipboard.writeText API to copy text", "description": "Override the default copy behavior of using the navigator.clipboard.writeText API to copy text",
"type": "(text: string) => void", "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, "isFunction": true,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -3791,7 +3791,7 @@
"kind": "const", "kind": "const",
"description": "Programmatically clear the uploaded files", "description": "Programmatically clear the uploaded files",
"type": "() => void", "type": "() => void",
"value": "() => { files = []; }", "value": "() => {\r files = [];\r }",
"isFunction": true, "isFunction": true,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -5397,7 +5397,7 @@
{ {
"name": "__default__", "name": "__default__",
"default": true, "default": true,
"fallback": "{result.text}\n {#if result.description}<span>– {result.description}</span>{/if}", "fallback": "{result.text}\r\n {#if result.description}<span>– {result.description}</span>{/if}",
"slot_props": "{ result: HeaderSearchResult; index: number }" "slot_props": "{ result: HeaderSearchResult; index: number }"
} }
], ],
@ -5527,7 +5527,7 @@
"kind": "const", "kind": "const",
"description": "Method invoked to load the image provided a `src` value", "description": "Method invoked to load the image provided a `src` value",
"type": "(url?: string) => void", "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, "isFunction": true,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -6259,8 +6259,8 @@
"name": "translationIds", "name": "translationIds",
"kind": "const", "kind": "const",
"description": "Default translation ids", "description": "Default translation ids",
"type": "{ clearAll: \"clearAll\", clearSelection: \"clearSelection\", }", "type": "{\r clearAll: \"clearAll\",\r clearSelection: \"clearSelection\",\r }",
"value": "{ clearAll: \"clearAll\", clearSelection: \"clearSelection\", }", "value": "{\r clearAll: \"clearAll\",\r clearSelection: \"clearSelection\",\r }",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -6411,7 +6411,7 @@
"kind": "function", "kind": "function",
"description": "Remove the persisted key value from the browser's local storage", "description": "Remove the persisted key value from the browser's local storage",
"type": "() => void", "type": "() => void",
"value": "() => { localStorage.removeItem(key); }", "value": "() => {\r localStorage.removeItem(key);\r }",
"isFunction": true, "isFunction": true,
"isFunctionDeclaration": true, "isFunctionDeclaration": true,
"isRequired": false, "isRequired": false,
@ -6423,7 +6423,7 @@
"kind": "function", "kind": "function",
"description": "Clear all key values from the browser's local storage", "description": "Clear all key values from the browser's local storage",
"type": "() => void", "type": "() => void",
"value": "() => { localStorage.clear(); }", "value": "() => {\r localStorage.clear();\r }",
"isFunction": true, "isFunction": true,
"isFunctionDeclaration": true, "isFunctionDeclaration": true,
"isRequired": false, "isRequired": false,
@ -7119,7 +7119,7 @@
"kind": "let", "kind": "let",
"description": "Override the filtering logic\nThe default filtering is an exact string comparison", "description": "Override the filtering logic\nThe default filtering is an exact string comparison",
"type": "(item: MultiSelectItem, value: string) => string", "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, "isFunction": true,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -7179,7 +7179,7 @@
"kind": "let", "kind": "let",
"description": "Override the sorting logic\nThe default sorting compare the item text value", "description": "Override the sorting logic\nThe default sorting compare the item text value",
"type": "((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) | (() => void)", "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, "isFunction": true,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -7810,7 +7810,7 @@
"kind": "const", "kind": "const",
"description": "Default translation ids", "description": "Default translation ids",
"type": "{ increment: \"increment\"; decrement: \"decrement\" }", "type": "{ increment: \"increment\"; decrement: \"decrement\" }",
"value": "{ increment: \"increment\", decrement: \"decrement\", }", "value": "{\r increment: \"increment\",\r decrement: \"decrement\",\r }",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -8131,7 +8131,7 @@
{ {
"name": "menu", "name": "menu",
"default": false, "default": false,
"fallback": "<svelte:component\n this=\"{icon}\"\n aria-label=\"{iconDescription}\"\n title=\"{iconDescription}\"\n class=\"bx--overflow-menu__icon {iconClass}\"\n />", "fallback": "<svelte:component\r\n this=\"{icon}\"\r\n aria-label=\"{iconDescription}\"\r\n title=\"{iconDescription}\"\r\n class=\"bx--overflow-menu__icon {iconClass}\"\r\n />",
"slot_props": "{}" "slot_props": "{}"
} }
], ],
@ -8268,7 +8268,7 @@
{ {
"name": "__default__", "name": "__default__",
"default": true, "default": true,
"fallback": "<div class:bx--overflow-menu-options__option-content=\"{true}\">\n {text}\n </div>", "fallback": "<div class:bx--overflow-menu-options__option-content=\"{true}\">\r\n {text}\r\n </div>",
"slot_props": "{}" "slot_props": "{}"
} }
], ],
@ -8360,7 +8360,7 @@
"kind": "let", "kind": "let",
"description": "Override the item text", "description": "Override the item text",
"type": "(min: number, max: number) => string", "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, "isFunction": true,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -8372,7 +8372,7 @@
"kind": "let", "kind": "let",
"description": "Override the item range text", "description": "Override the item range text",
"type": "(min: number, max: number, total: number) => string", "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, "isFunction": true,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -8456,7 +8456,7 @@
"kind": "let", "kind": "let",
"description": "Override the page range text", "description": "Override the page range text",
"type": "(current: number, total: number) => string", "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, "isFunction": true,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -12697,53 +12697,6 @@
"moduleName": "TextInput", "moduleName": "TextInput",
"filePath": "src/TextInput/TextInput.svelte", "filePath": "src/TextInput/TextInput.svelte",
"props": [ "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", "name": "disabled",
"kind": "let", "kind": "let",
@ -12756,6 +12709,17 @@
"constant": false, "constant": false,
"reactive": 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", "name": "helperText",
"kind": "let", "kind": "let",
@ -12768,6 +12732,18 @@
"constant": false, "constant": false,
"reactive": 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", "name": "id",
"kind": "let", "kind": "let",
@ -12781,32 +12757,9 @@
"reactive": false "reactive": false
}, },
{ {
"name": "name", "name": "inline",
"kind": "let", "kind": "let",
"description": "Specify a name attribute for the input", "description": "Set to `true` to use the inline variant",
"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",
"type": "boolean", "type": "boolean",
"value": "false", "value": "false",
"isFunction": false, "isFunction": false,
@ -12840,9 +12793,21 @@
"reactive": false "reactive": false
}, },
{ {
"name": "warn", "name": "labelText",
"kind": "let", "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", "type": "boolean",
"value": "false", "value": "false",
"isFunction": false, "isFunction": false,
@ -12852,9 +12817,31 @@
"reactive": false "reactive": false
}, },
{ {
"name": "warnText", "name": "maxCount",
"kind": "let", "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", "type": "string",
"value": "\"\"", "value": "\"\"",
"isFunction": false, "isFunction": false,
@ -12863,6 +12850,18 @@
"constant": false, "constant": false,
"reactive": 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", "name": "ref",
"kind": "let", "kind": "let",
@ -12888,9 +12887,32 @@
"reactive": false "reactive": false
}, },
{ {
"name": "inline", "name": "size",
"kind": "let", "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", "type": "boolean",
"value": "false", "value": "false",
"isFunction": false, "isFunction": false,
@ -12900,11 +12922,11 @@
"reactive": false "reactive": false
}, },
{ {
"name": "readonly", "name": "warnText",
"kind": "let", "kind": "let",
"description": "Set to `true` to use the read-only variant", "description": "Specify the warning state text",
"type": "boolean", "type": "string",
"value": "false", "value": "\"\"",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -13041,7 +13063,7 @@
"kind": "let", "kind": "let",
"description": "Override the default toggle props", "description": "Override the default toggle props",
"type": "import(\"../Toggle/Toggle\").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; }", "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, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -13053,7 +13075,7 @@
"kind": "let", "kind": "let",
"description": "Override the default select props", "description": "Override the default select props",
"type": "import(\"../Select/Select\").SelectProps & { themes?: CarbonTheme[]; }", "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, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -13830,7 +13852,7 @@
"kind": "let", "kind": "let",
"description": "Override the total items selected text", "description": "Override the total items selected text",
"type": "(totalSelected: number) => string", "type": "(totalSelected: number) => string",
"value": "(totalSelected) => `${totalSelected} item${totalSelected === 1 ? \"\" : \"s\"} selected`", "value": "(totalSelected) =>\r `${totalSelected} item${totalSelected === 1 ? \"\" : \"s\"} selected`",
"isFunction": true, "isFunction": true,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -14547,7 +14569,7 @@
"kind": "function", "kind": "function",
"description": "Programmatically expand all nodes", "description": "Programmatically expand all nodes",
"type": "() => void", "type": "() => void",
"value": "() => { expandedIds = [...nodeIds]; }", "value": "() => {\r expandedIds = [...nodeIds];\r }",
"isFunction": true, "isFunction": true,
"isFunctionDeclaration": true, "isFunctionDeclaration": true,
"isRequired": false, "isRequired": false,
@ -14559,7 +14581,7 @@
"kind": "function", "kind": "function",
"description": "Programmatically collapse all nodes", "description": "Programmatically collapse all nodes",
"type": "() => void", "type": "() => void",
"value": "() => { expandedIds = []; }", "value": "() => {\r expandedIds = [];\r }",
"isFunction": true, "isFunction": true,
"isFunctionDeclaration": true, "isFunctionDeclaration": true,
"isRequired": false, "isRequired": false,
@ -14571,7 +14593,7 @@
"kind": "function", "kind": "function",
"description": "Programmatically expand a subset of nodes.\nExpands all nodes if no argument is provided", "description": "Programmatically expand a subset of nodes.\nExpands all nodes if no argument is provided",
"type": "(filterId?: (node: TreeNode) => boolean) => void", "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, "isFunction": true,
"isFunctionDeclaration": true, "isFunctionDeclaration": true,
"isRequired": false, "isRequired": false,
@ -14583,7 +14605,7 @@
"kind": "function", "kind": "function",
"description": "Programmatically collapse a subset of nodes.\nCollapses all nodes if no argument is provided", "description": "Programmatically collapse a subset of nodes.\nCollapses all nodes if no argument is provided",
"type": "(filterId?: (node: TreeNode) => boolean) => void", "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, "isFunction": true,
"isFunctionDeclaration": true, "isFunctionDeclaration": true,
"isRequired": false, "isRequired": false,
@ -14595,7 +14617,7 @@
"kind": "function", "kind": "function",
"description": "Programmatically show a node by `id`.\nThe matching node will be expanded, selected, and focused", "description": "Programmatically show a node by `id`.\nThe matching node will be expanded, selected, and focused",
"type": "(id: TreeNodeId) => void", "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, "isFunction": true,
"isFunctionDeclaration": true, "isFunctionDeclaration": true,
"isRequired": false, "isRequired": false,

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

@ -39,6 +39,10 @@ components: ["TextInput", "TextInputSkeleton"]
<TextInput size="sm" labelText="User name" placeholder="Enter user name..." /> <TextInput size="sm" labelText="User name" placeholder="Enter user name..." />
## Character Counter
<TextInput labelText="Username" placeholder="Enter username..." maxCount={32} counter="char" />
## Invalid state ## Invalid state
<TextInput invalid invalidText="User name is already taken. Please try another." labelText="User name" placeholder="Enter user name..." /> <TextInput invalid invalidText="User name is already taken. Please try another." labelText="User name" placeholder="Enter user name..." />

3
package.json
View file

@ -88,6 +88,7 @@
"contributors": [ "contributors": [
"Josef Aidt (https://github.com/josefaidt)", "Josef Aidt (https://github.com/josefaidt)",
"Eric Liu (https://github.com/metonym)", "Eric Liu (https://github.com/metonym)",
"Enrico Sacchetti (https://github.com/theetrain)" "Enrico Sacchetti (https://github.com/theetrain)",
"Samuel Janda (https://github.com/SimpleProgrammingAU)"
] ]
} }

169
src/TextInput/TextInput.svelte
View file

@ -4,47 +4,26 @@
* @event {null | number | string} input * @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 */ /** Set to `true` to disable the input */
export let disabled = false; 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 */ /** Specify the helper text */
export let helperText = ""; export let helperText = "";
/** Set to `true` to visually hide the label text */
export let hideLabel = false;
/** Set an id for the input element */ /** Set an id for the input element */
export let id = "ccs-" + Math.random().toString(36); export let id = "ccs-" + Math.random().toString(36);
/** /** Set to `true` to use the inline variant */
* Specify a name attribute for the input export let inline = false;
* @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 indicate an invalid state */ /** Set to `true` to indicate an invalid state */
export let invalid = false; export let invalid = false;
@ -52,11 +31,35 @@
/** Specify the invalid state text */ /** Specify the invalid state text */
export let invalidText = ""; export let invalidText = "";
/** Set to `true` to indicate an warning state */ /** Specify the label text */
export let warn = false; 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 */ /** Obtain a reference to the input HTML element */
export let ref = null; export let ref = null;
@ -64,11 +67,24 @@
/** Set to `true` to mark the field as required */ /** Set to `true` to mark the field as required */
export let required = false; 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 { createEventDispatcher, getContext } from "svelte";
import WarningFilled from "../icons/WarningFilled.svelte"; import WarningFilled from "../icons/WarningFilled.svelte";
@ -77,6 +93,7 @@
const ctx = getContext("Form"); const ctx = getContext("Form");
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
let count = 0;
function parse(raw) { function parse(raw) {
if ($$restProps.type !== "number") return raw; if ($$restProps.type !== "number") return raw;
@ -86,6 +103,8 @@
/** @type {(e: Event) => void} */ /** @type {(e: Event) => void} */
const onInput = (e) => { const onInput = (e) => {
value = parse(e.target.value); value = parse(e.target.value);
if (maxCount && value.length > maxCount) value = value.slice(0, maxCount);
if (counter && maxCount) updateCount();
dispatch("input", value); dispatch("input", value);
}; };
@ -94,6 +113,14 @@
dispatch("change", parse(e.target.value)); 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; $: isFluid = !!ctx && ctx.isFluid;
$: error = invalid && !readonly; $: error = invalid && !readonly;
$: helperId = `helper-${id}`; $: helperId = `helper-${id}`;
@ -125,12 +152,21 @@
class:bx--label--disabled="{disabled}" class:bx--label--disabled="{disabled}"
class:bx--label--inline="{inline}" class:bx--label--inline="{inline}"
class:bx--label--inline--sm="{size === 'sm'}" class:bx--label--inline--sm="{size === 'sm'}"
class:bx--label--inline--md="{size === 'md'}"
class:bx--label--inline--lg="{size === 'lg' || size === 'xl'}" class:bx--label--inline--lg="{size === 'lg' || size === 'xl'}"
> >
<slot name="labelText"> <slot name="labelText">
{labelText} {labelText}
</slot> </slot>
</label> </label>
{#if maxCount && counter}
<div
class:bx--label="{true}"
class:bx--text-input__label-counter="{true}"
>
{count}/{maxCount}
</div>
{/if}
{/if} {/if}
{#if !isFluid && helperText} {#if !isFluid && helperText}
<div <div
@ -144,19 +180,32 @@
</div> </div>
{/if} {/if}
{#if !inline && (labelText || $$slots.labelText)} {#if !inline && (labelText || $$slots.labelText)}
<label <div class:bx--text-input__label-wrapper="{true}">
for="{id}" <label
class:bx--label="{true}" for="{id}"
class:bx--visually-hidden="{hideLabel}" class:bx--label="{true}"
class:bx--label--disabled="{disabled}" class:bx--visually-hidden="{hideLabel}"
class:bx--label--inline="{inline}" class:bx--label--disabled="{disabled}"
class:bx--label--inline-sm="{inline && size === 'sm'}" class:bx--label--inline="{inline}"
class:bx--label--inline-xl="{inline && size === 'xl'}" class:bx--label--inline-sm="{inline && size === 'sm'}"
> class:bx--label--inline-md="{inline && size === 'md'}"
<slot name="labelText"> class:bx--label--inline-lg="{inline &&
{labelText} (size === 'lg' || size === 'xl')}"
</slot> >
</label> <slot name="labelText">
{labelText}
</slot>
</label>
{#if maxCount && counter}
<div
class:bx--label="{true}"
class:bx--text-input__label-counter="{true}"
class:fluid-form-fix="{isFluid}"
>
{count}/{maxCount}
</div>
{/if}
</div>
{/if} {/if}
<div <div
class:bx--text-input__field-outer-wrapper="{true}" class:bx--text-input__field-outer-wrapper="{true}"
@ -195,7 +244,7 @@
id="{id}" id="{id}"
name="{name}" name="{name}"
placeholder="{placeholder}" placeholder="{placeholder}"
bind:value bind:value="{value}"
required="{required}" required="{required}"
readonly="{readonly}" readonly="{readonly}"
class:bx--text-input="{true}" class:bx--text-input="{true}"
@ -203,7 +252,11 @@
class:bx--text-input--invalid="{error}" class:bx--text-input--invalid="{error}"
class:bx--text-input--warning="{warn}" class:bx--text-input--warning="{warn}"
class:bx--text-input--sm="{size === 'sm'}" class:bx--text-input--sm="{size === 'sm'}"
class:bx--text-input--md="{size === 'md'}"
class:bx--text-input--lg="{size === 'lg' || size === 'xl'}" class:bx--text-input--lg="{size === 'lg' || size === 'xl'}"
class:bx--layout--size-sm="{size === 'sm'}"
class:bx--layout--size-md="{size === 'md'}"
class:bx--layout--size-lg="{size === 'lg' || size === 'xl'}"
{...$$restProps} {...$$restProps}
on:change="{onChange}" on:change="{onChange}"
on:input="{onInput}" on:input="{onInput}"
@ -245,3 +298,11 @@
{/if} {/if}
</div> </div>
</div> </div>
<style>
.fluid-form-fix {
right: 0;
inset-inline-start: unset;
padding-right: 1rem;
}
</style>

122
types/TextInput/TextInput.svelte.d.ts vendored
View file

@ -4,45 +4,30 @@ import type { SvelteHTMLElements } from "svelte/elements";
type RestProps = SvelteHTMLElements["input"]; type RestProps = SvelteHTMLElements["input"];
export interface TextInputProps extends RestProps { 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 * Set to `true` to disable the input
* @default false * @default false
*/ */
disabled?: boolean; 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 * Specify the helper text
* @default "" * @default ""
*/ */
helperText?: string; helperText?: string;
/**
* Set to `true` to visually hide the label text
* @default false
*/
hideLabel?: boolean;
/** /**
* Set an id for the input element * Set an id for the input element
* @default "ccs-" + Math.random().toString(36) * @default "ccs-" + Math.random().toString(36)
@ -50,22 +35,10 @@ export interface TextInputProps extends RestProps {
id?: string; id?: string;
/** /**
* Specify a name attribute for the input * Set to `true` to use the inline variant
* @default undefined
*/
name?: string;
/**
* Specify the label text
* @default ""
*/
labelText?: string;
/**
* Set to `true` to visually hide the label text
* @default false * @default false
*/ */
hideLabel?: boolean; inline?: boolean;
/** /**
* Set to `true` to indicate an invalid state * Set to `true` to indicate an invalid state
@ -80,16 +53,44 @@ export interface TextInputProps extends RestProps {
invalidText?: string; invalidText?: string;
/** /**
* Set to `true` to indicate an warning state * Specify the label text
* @default false
*/
warn?: boolean;
/**
* Specify the warning state text
* @default "" * @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 * Obtain a reference to the input HTML element
@ -104,16 +105,29 @@ export interface TextInputProps extends RestProps {
required?: boolean; required?: boolean;
/** /**
* Set to `true` to use the inline variant * Set the size of the input
* @default false * @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 * @default false
*/ */
readonly?: boolean; warn?: boolean;
/**
* Specify the warning state text
* @default ""
*/
warnText?: string;
[key: `data-${string}`]: any; [key: `data-${string}`]: any;
} }