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

Re-run yarn build:docs

Browse source
This commit is contained in:
Eric Liu 2023-06-11 18:39:38 -07:00
commit 12bf822afd
3 changed files with 237 additions and 354 deletions
Download patch file Download diff file Expand all files Collapse all files

198
COMPONENT_INDEX.md
View file

@ -352,16 +352,8 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
### Props
| 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>{ 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
@ -543,21 +535,13 @@ None.
### Props
| 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 |
| 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") |
| 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 />You must use the `code` prop to copy the code |
| 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> | Override the default copy behavior of using the navigator.clipboard.writeText API to copy text |
| 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> | Override the default copy behavior of using the navigator.clipboard.writeText API to copy text |
| 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 |
| wrapText | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to wrap the text<br />Note that `type` must be "multi" |
@ -669,7 +653,7 @@ export interface ComboBoxItem {
### Props
| 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 |
| 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 |
@ -693,18 +677,7 @@ export interface ComboBoxItem {
| 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 |
| 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
@ -923,20 +896,12 @@ None.
### Props
| 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 |
| 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 |
| 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
@ -1286,17 +1251,13 @@ None.
### Props
| 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 |
| 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 |
| 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 |
| 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>() => { files = []; }</code> | Programmatically clear the uploaded files |
| labelDescription | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label description |
| labelTitle | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label title |
| kind | No | <code>let</code> | No | <code>"primary" &#124; "secondary" &#124; "tertiary" &#124; "ghost" &#124; "danger"</code> | <code>"primary"</code> | Specify the kind of file uploader button |
@ -1862,9 +1823,8 @@ export interface HeaderSearchResult {
### Slots
| 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
@ -1902,7 +1862,7 @@ None.
### Props
| 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 |
| 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 |
@ -1910,17 +1870,7 @@ None.
| 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 |
| 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
@ -2175,19 +2125,11 @@ export type ListBoxSelectionTranslationId = "clearAll" | "clearSelection";
### Props
| 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 |
| 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 |
| 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>{ 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
@ -2246,17 +2188,11 @@ None.
### Props
| 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 |
| 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 |
| clearAll | No | <code>function</code> | No | <code>() => void</code> | <code>() => {
localStorage.clear();
}</code> | Clear all key values from the browser's local storage |
| 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 |
| clearAll | No | <code>function</code> | No | <code>() => void</code> | <code>() => { localStorage.clear(); }</code> | Clear all key values from the browser's local storage |
### Slots
@ -2412,7 +2348,7 @@ export interface MultiSelectItem {
### Props
| 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 |
| 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 |
@ -2430,13 +2366,11 @@ export interface MultiSelectItem {
| 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 |
| 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) => item.text.toLowerCase().includes(value.trim().toLowerCase())</code> | Override the filtering logic<br />The default filtering is an exact string comparison |
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| locale | No | <code>let</code> | No | <code>string</code> | <code>"en"</code> | Specify the locale |
| placeholder | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text |
| 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 |
| 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 |
| 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: 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 |
| titleText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text |
@ -2544,7 +2478,7 @@ export type NumberInputTranslationId = "increment" | "decrement";
### Props
| 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</code> | <code>null</code> | Specify the input value.<br />Use `null` to denote "no value" |
| size | No | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Set the size of the input |
@ -2565,12 +2499,7 @@ export type NumberInputTranslationId = "increment" | "decrement";
| 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 |
| 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>{ 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 |
@ -2685,15 +2614,9 @@ None.
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------------------------- |
| :-------- | :------ | :---- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| -- | 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
@ -2725,11 +2648,8 @@ None.
### Slots
| 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
@ -2743,7 +2663,7 @@ None.
### Props
| 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 |
| 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 |
@ -2751,17 +2671,14 @@ None.
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| pageInputDisabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the page input |
| pageSizeInputDisabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the page size input |
| pageSizes | No | <code>let</code> | No | <code>ReadonlyArray<number></code> | <code>[10]</code> | Specify the available page sizes |
| pagesUnknown | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` if the number of pages is unknown |
| 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 |
| 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
@ -4258,26 +4175,14 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
### Props
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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
@ -4533,10 +4438,9 @@ None.
### Props
| 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 |
| 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
@ -4772,7 +4676,7 @@ export interface TreeNode {
### Props
| 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 |
| 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 |
@ -4780,28 +4684,10 @@ export interface TreeNode {
| size | No | <code>let</code> | No | <code>"default" &#124; "compact"</code> | <code>"default"</code> | Specify the TreeView size |
| 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 |
| expandAll | No | <code>function</code> | No | <code>() => void</code> | <code>() => { |
expandedIds = [...nodeIds];
}</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 |
| expandAll | No | <code>function</code> | No | <code>() => void</code> | <code>() => { expandedIds = [...nodeIds]; }</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 |
### Slots

52
docs/src/COMPONENT_API.json
View file

@ -409,7 +409,7 @@
"kind": "let",
"description": "Carbon grid sizes as an object",
"type": "Record<BreakpointSize, boolean>",
"value": "{\r sm: false,\r md: false,\r lg: false,\r xlg: false,\r max: false,\r }",
"value": "{ sm: false, md: false, lg: false, xlg: false, max: false, }",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -1037,7 +1037,7 @@
"kind": "let",
"description": "Override the default copy behavior of using the navigator.clipboard.writeText API to copy text",
"type": "(code: string) => void",
"value": "async (code) => {\r try {\r await navigator.clipboard.writeText(code);\r } catch (e) {\r console.log(e);\r }\r }",
"value": "async (code) => { try { await navigator.clipboard.writeText(code); } catch (e) { console.log(e); } }",
"isFunction": true,
"isFunctionDeclaration": false,
"isRequired": false,
@ -1728,7 +1728,7 @@
"kind": "function",
"description": "Clear the combo box programmatically",
"type": "(options?: { focus?: boolean; }) => void",
"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 }",
"value": "() => { prevSelectedId = null; highlightedIndex = -1; highlightedId = undefined; selectedId = undefined; selectedItem = undefined; open = false; value = \"\"; if (options?.focus !== false) ref?.focus(); }",
"isFunction": true,
"isFunctionDeclaration": true,
"isRequired": false,
@ -2318,7 +2318,7 @@
"kind": "let",
"description": "Override the default copy behavior of using the navigator.clipboard.writeText API to copy text",
"type": "(text: string) => void",
"value": "async (text) => {\r try {\r await navigator.clipboard.writeText(text);\r } catch (e) {\r console.log(e);\r }\r }",
"value": "async (text) => { try { await navigator.clipboard.writeText(text); } catch (e) { console.log(e); } }",
"isFunction": true,
"isFunctionDeclaration": false,
"isRequired": false,
@ -3787,7 +3787,7 @@
"kind": "const",
"description": "Programmatically clear the uploaded files",
"type": "() => void",
"value": "() => {\r files = [];\r }",
"value": "() => { files = []; }",
"isFunction": true,
"isFunctionDeclaration": false,
"isRequired": false,
@ -5338,7 +5338,7 @@
{
"name": "__default__",
"default": true,
"fallback": "{result.text}\r\n {#if result.description}<span>– {result.description}</span>{/if}",
"fallback": "{result.text}\n {#if result.description}<span>– {result.description}</span>{/if}",
"slot_props": "{ result: HeaderSearchResult; index: number }"
}
],
@ -5468,7 +5468,7 @@
"kind": "const",
"description": "Method invoked to load the image provided a `src` value",
"type": "(url?: string) => void",
"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 }",
"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); }",
"isFunction": true,
"isFunctionDeclaration": false,
"isRequired": false,
@ -6200,8 +6200,8 @@
"name": "translationIds",
"kind": "const",
"description": "Default translation ids",
"type": "{\r clearAll: \"clearAll\",\r clearSelection: \"clearSelection\",\r }",
"value": "{\r clearAll: \"clearAll\",\r clearSelection: \"clearSelection\",\r }",
"type": "{ clearAll: \"clearAll\", clearSelection: \"clearSelection\", }",
"value": "{ clearAll: \"clearAll\", clearSelection: \"clearSelection\", }",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -6364,7 +6364,7 @@
"kind": "function",
"description": "Remove the persisted key value from the browser's local storage",
"type": "() => void",
"value": "() => {\r localStorage.removeItem(key);\r }",
"value": "() => { localStorage.removeItem(key); }",
"isFunction": true,
"isFunctionDeclaration": true,
"isRequired": false,
@ -6376,7 +6376,7 @@
"kind": "function",
"description": "Clear all key values from the browser's local storage",
"type": "() => void",
"value": "() => {\r localStorage.clear();\r }",
"value": "() => { localStorage.clear(); }",
"isFunction": true,
"isFunctionDeclaration": true,
"isRequired": false,
@ -7072,7 +7072,7 @@
"kind": "let",
"description": "Override the filtering logic\nThe default filtering is an exact string comparison",
"type": "(item: MultiSelectItem, value: string) => string",
"value": "(item, value) =>\r item.text.toLowerCase().includes(value.trim().toLowerCase())",
"value": "(item, value) => item.text.toLowerCase().includes(value.trim().toLowerCase())",
"isFunction": true,
"isFunctionDeclaration": false,
"isRequired": false,
@ -7132,7 +7132,7 @@
"kind": "let",
"description": "Override the sorting logic\nThe default sorting compare the item text value",
"type": "((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) | (() => void)",
"value": "(a, b) =>\r a.text.localeCompare(b.text, locale, { numeric: true })",
"value": "(a, b) => a.text.localeCompare(b.text, locale, { numeric: true })",
"isFunction": true,
"isFunctionDeclaration": false,
"isRequired": false,
@ -7763,7 +7763,7 @@
"kind": "const",
"description": "Default translation ids",
"type": "{ increment: \"increment\"; decrement: \"decrement\" }",
"value": "{\r increment: \"increment\",\r decrement: \"decrement\",\r }",
"value": "{ increment: \"increment\", decrement: \"decrement\", }",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -8084,7 +8084,7 @@
{
"name": "menu",
"default": false,
"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 />",
"fallback": "<svelte:component\n this=\"{icon}\"\n aria-label=\"{iconDescription}\"\n title=\"{iconDescription}\"\n class=\"bx--overflow-menu__icon {iconClass}\"\n />",
"slot_props": "{}"
}
],
@ -8221,7 +8221,7 @@
{
"name": "__default__",
"default": true,
"fallback": "<div class:bx--overflow-menu-options__option-content=\"{true}\">\r\n {text}\r\n </div>",
"fallback": "<div class:bx--overflow-menu-options__option-content=\"{true}\">\n {text}\n </div>",
"slot_props": "{}"
}
],
@ -8313,7 +8313,7 @@
"kind": "let",
"description": "Override the item text",
"type": "(min: number, max: number) => string",
"value": "(min, max) =>\r `${min}–${max} item${max === 1 ? \"\" : \"s\"}`",
"value": "(min, max) => `${min}–${max} item${max === 1 ? \"\" : \"s\"}`",
"isFunction": true,
"isFunctionDeclaration": false,
"isRequired": false,
@ -8325,7 +8325,7 @@
"kind": "let",
"description": "Override the item range text",
"type": "(min: number, max: number, total: number) => string",
"value": "(min, max, total) =>\r `${min}–${max} of ${total} item${max === 1 ? \"\" : \"s\"}`",
"value": "(min, max, total) => `${min}–${max} of ${total} item${max === 1 ? \"\" : \"s\"}`",
"isFunction": true,
"isFunctionDeclaration": false,
"isRequired": false,
@ -8409,7 +8409,7 @@
"kind": "let",
"description": "Override the page range text",
"type": "(current: number, total: number) => string",
"value": "(current, total) =>\r `of ${total} page${total === 1 ? \"\" : \"s\"}`",
"value": "(current, total) => `of ${total} page${total === 1 ? \"\" : \"s\"}`",
"isFunction": true,
"isFunctionDeclaration": false,
"isRequired": false,
@ -12936,7 +12936,7 @@
"kind": "let",
"description": "Override the default toggle props",
"type": "import(\"../Toggle/Toggle\").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; }",
"value": "{\r themes: [\"white\", \"g100\"],\r labelA: \"\",\r labelB: \"\",\r labelText: \"Dark mode\",\r hideLabel: false,\r }",
"value": "{ themes: [\"white\", \"g100\"], labelA: \"\", labelB: \"\", labelText: \"Dark mode\", hideLabel: false, }",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -12948,7 +12948,7 @@
"kind": "let",
"description": "Override the default select props",
"type": "import(\"../Select/Select\").SelectProps & { themes?: CarbonTheme[]; }",
"value": "{\r themes: themeKeys,\r labelText: \"Themes\",\r hideLabel: false,\r }",
"value": "{ themes: themeKeys, labelText: \"Themes\", hideLabel: false, }",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -13772,7 +13772,7 @@
"kind": "let",
"description": "Override the total items selected text",
"type": "(totalSelected: number) => string",
"value": "(totalSelected) =>\r `${totalSelected} item${totalSelected === 1 ? \"\" : \"s\"} selected`",
"value": "(totalSelected) => `${totalSelected} item${totalSelected === 1 ? \"\" : \"s\"} selected`",
"isFunction": true,
"isFunctionDeclaration": false,
"isRequired": false,
@ -14489,7 +14489,7 @@
"kind": "function",
"description": "Programmatically expand all nodes",
"type": "() => void",
"value": "() => {\r expandedIds = [...nodeIds];\r }",
"value": "() => { expandedIds = [...nodeIds]; }",
"isFunction": true,
"isFunctionDeclaration": true,
"isRequired": false,
@ -14501,7 +14501,7 @@
"kind": "function",
"description": "Programmatically collapse all nodes",
"type": "() => void",
"value": "() => {\r expandedIds = [];\r }",
"value": "() => { expandedIds = []; }",
"isFunction": true,
"isFunctionDeclaration": true,
"isRequired": false,
@ -14513,7 +14513,7 @@
"kind": "function",
"description": "Programmatically expand a subset of nodes.\nExpands all nodes if no argument is provided",
"type": "(filterId?: (node: TreeNode) => boolean) => void",
"value": "() => {\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 }",
"value": "() => { expandedIds = nodes .filter( (node) => filterNode(node) || node.children?.some((child) => filterNode(child) && child.children) ) .map((node) => node.id); }",
"isFunction": true,
"isFunctionDeclaration": true,
"isRequired": false,
@ -14525,7 +14525,7 @@
"kind": "function",
"description": "Programmatically collapse a subset of nodes.\nCollapses all nodes if no argument is provided",
"type": "(filterId?: (node: TreeNode) => boolean) => void",
"value": "() => {\r expandedIds = nodes\r .filter((node) => expandedIds.includes(node.id) && !filterNode(node))\r .map((node) => node.id);\r }",
"value": "() => { expandedIds = nodes .filter((node) => expandedIds.includes(node.id) && !filterNode(node)) .map((node) => node.id); }",
"isFunction": true,
"isFunctionDeclaration": true,
"isRequired": false,

5
types/ListBox/ListBoxSelection.svelte.d.ts vendored
View file

@ -38,8 +38,5 @@ export default class ListBoxSelection extends SvelteComponentTyped<
/**
* Default translation ids
*/
translationIds: {
clearAll: "clearAll";
clearSelection: "clearSelection";
};
translationIds: { clearAll: "clearAll"; clearSelection: "clearSelection" };
}