mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-20 20:33:02 +00:00
Run "yarn build:docs"
This commit is contained in:
Eric Liu
parent
ba8321ec8d
commit
2ef9bb65ec
4 changed files with 27 additions and 55 deletions
|
|
@ -649,33 +649,32 @@ export interface ComboBoxItem {
|
||||||
|
|
||||||
### Props
|
### Props
|
||||||
|
|
||||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||||
| :------------------- | :-------------------- | :------- | :---------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
|
| :------------------- | :-------------------- | :------- | :---------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||||
| listRef | <code>let</code> | Yes | <code>null | HTMLDivElement</code> | <code>null</code> | Obtain a reference to the list HTML element |
|
| listRef | <code>let</code> | Yes | <code>null | HTMLDivElement</code> | <code>null</code> | Obtain a reference to the list HTML element |
|
||||||
| ref | <code>let</code> | Yes | <code>null | HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
|
| ref | <code>let</code> | Yes | <code>null | HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
|
||||||
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the combobox menu dropdown |
|
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the combobox menu dropdown |
|
||||||
| value | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the selected combobox value |
|
| value | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the selected combobox value |
|
||||||
| selectedId | <code>let</code> | Yes | <code>ComboBoxItemId</code> | <code>undefined</code> | Set the selected item by value id |
|
| selectedId | <code>let</code> | Yes | <code>ComboBoxItemId</code> | <code>undefined</code> | Set the selected item by value id |
|
||||||
| items | <code>let</code> | No | <code>ComboBoxItem[]</code> | <code>[]</code> | Set the combobox items |
|
| items | <code>let</code> | No | <code>ComboBoxItem[]</code> | <code>[]</code> | Set the combobox items |
|
||||||
| itemToString | <code>let</code> | No | <code>(item: ComboBoxItem) => string</code> | <code>(item) => item.text || item.id</code> | Override the display of a combobox item |
|
| itemToString | <code>let</code> | No | <code>(item: ComboBoxItem) => string</code> | <code>(item) => item.text || item.id</code> | Override the display of a combobox item |
|
||||||
| direction | <code>let</code> | No | <code>"bottom" | "top"</code> | <code>"bottom"</code> | Specify the direction of the combobox dropdown menu |
|
| direction | <code>let</code> | No | <code>"bottom" | "top"</code> | <code>"bottom"</code> | Specify the direction of the combobox dropdown menu |
|
||||||
| size | <code>let</code> | No | <code>"sm" | "xl"</code> | <code>undefined</code> | Set the size of the combobox |
|
| size | <code>let</code> | No | <code>"sm" | "xl"</code> | <code>undefined</code> | Set the size of the combobox |
|
||||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the combobox |
|
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the combobox |
|
||||||
| titleText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text of the combobox |
|
| titleText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text of the combobox |
|
||||||
| placeholder | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text |
|
| placeholder | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text |
|
||||||
| helperText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
|
| helperText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
|
||||||
| invalidText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
|
| invalidText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
|
||||||
| invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
|
| invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
|
||||||
| warn | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state |
|
| warn | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state |
|
||||||
| warnText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
|
| warnText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
|
||||||
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||||
| shouldFilterItem | <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 | <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 | <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 | <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 |
|
||||||
| translateWithIdMenu | <code>let</code> | No | <code>(id: any) => string</code> | <code>undefined</code> | Override the menu label based on the open state.<br />Defaults to "Open menu" and "Close menu" |
|
| translateWithIdInput | <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. |
|
||||||
| translateWithIdInput | <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" |
|
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the list box component |
|
||||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the list box component |
|
| name | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the input |
|
||||||
| name | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the input |
|
| clear | <code>function</code> | No | <code>(options?: { focus?: boolean; }) => void</code> | <code>() => { prevSelectedId = null; highlightedIndex = -1; highlightedId = undefined; selectedId = undefined; selectedItem = undefined; open = false; inputValue = ""; if (options?.focus !== false) ref?.focus(); }</code> | Clear the combo box programmatically |
|
||||||
| clear | <code>function</code> | No | <code>(options?: { focus?: boolean; }) => void</code> | <code>() => { prevSelectedId = null; highlightedIndex = -1; highlightedId = undefined; selectedId = undefined; selectedItem = undefined; open = false; inputValue = ""; if (options?.focus !== false) ref?.focus(); }</code> | Clear the combo box programmatically |
|
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
|
|
@ -2352,7 +2351,6 @@ export interface MultiSelectItem {
|
||||||
| placeholder | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text |
|
| placeholder | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text |
|
||||||
| sortItem | <code>let</code> | No | <code>((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) | (() => 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 | <code>let</code> | No | <code>((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) | (() => 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 | <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 | <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 |
|
||||||
| translateWithIdMenu | <code>let</code> | No | <code>(id: any) => string</code> | <code>undefined</code> | Override the default translation ids for the menu |
|
|
||||||
| translateWithIdInput | <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" |
|
| translateWithIdInput | <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" |
|
||||||
| titleText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text |
|
| titleText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text |
|
||||||
| useTitleInItem | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to pass the item to `itemToString` in the checkbox |
|
| useTitleInItem | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to pass the item to `itemToString` in the checkbox |
|
||||||
|
|
|
||||||
|
|
@ -1562,20 +1562,10 @@
|
||||||
"constant": false,
|
"constant": false,
|
||||||
"reactive": false
|
"reactive": false
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"name": "translateWithIdMenu",
|
|
||||||
"kind": "let",
|
|
||||||
"description": "Override the menu label based on the open state.\nDefaults to \"Open menu\" and \"Close menu\"",
|
|
||||||
"type": "(id: any) => string",
|
|
||||||
"isFunction": false,
|
|
||||||
"isFunctionDeclaration": false,
|
|
||||||
"constant": false,
|
|
||||||
"reactive": false
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"name": "translateWithIdInput",
|
"name": "translateWithIdInput",
|
||||||
"kind": "let",
|
"kind": "let",
|
||||||
"description": "Override the label of the clear button when the input has a selection.\nDefaults to \"Clear selected item\"",
|
"description": "Override the label of the clear button when the input has a selection.\nDefaults to \"Clear selected item\" since a combo box can only have on selection.",
|
||||||
"type": "(id: \"clearSelection\") => string",
|
"type": "(id: \"clearSelection\") => string",
|
||||||
"isFunction": false,
|
"isFunction": false,
|
||||||
"isFunctionDeclaration": false,
|
"isFunctionDeclaration": false,
|
||||||
|
|
@ -6610,16 +6600,6 @@
|
||||||
"constant": false,
|
"constant": false,
|
||||||
"reactive": false
|
"reactive": false
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"name": "translateWithIdMenu",
|
|
||||||
"kind": "let",
|
|
||||||
"description": "Override the default translation ids for the menu",
|
|
||||||
"type": "(id: any) => string",
|
|
||||||
"isFunction": false,
|
|
||||||
"isFunctionDeclaration": false,
|
|
||||||
"constant": false,
|
|
||||||
"reactive": false
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"name": "translateWithIdInput",
|
"name": "translateWithIdInput",
|
||||||
"kind": "let",
|
"kind": "let",
|
||||||
|
|
|
||||||
|
|
@ -27,9 +27,6 @@
|
||||||
console.log(id); // "open" | "close"
|
console.log(id); // "open" | "close"
|
||||||
return id;
|
return id;
|
||||||
}}"
|
}}"
|
||||||
translateWithIdMenu="{(id) => {
|
|
||||||
return id;
|
|
||||||
}}"
|
|
||||||
translateWithIdInput="{(id) => {
|
translateWithIdInput="{(id) => {
|
||||||
console.log(id); // "clearSelection"
|
console.log(id); // "clearSelection"
|
||||||
return id;
|
return id;
|
||||||
|
|
|
||||||
|
|
@ -24,9 +24,6 @@
|
||||||
console.log(id); // "open" | "close"
|
console.log(id); // "open" | "close"
|
||||||
return id;
|
return id;
|
||||||
}}"
|
}}"
|
||||||
translateWithIdMenu="{(id) => {
|
|
||||||
return id;
|
|
||||||
}}"
|
|
||||||
translateWithIdInput="{(id) => {
|
translateWithIdInput="{(id) => {
|
||||||
console.log(id); // "clearAll" | "clearSelection"
|
console.log(id); // "clearAll" | "clearSelection"
|
||||||
return id;
|
return id;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue