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

Run "yarn build docs"

Browse source
This commit is contained in:
Eric Liu 2022-05-03 19:34:31 -07:00
commit e99c359441
4 changed files with 129 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

8
COMPONENT_INDEX.md
View file

@ -650,7 +650,7 @@ 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 &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the list HTML element | | listRef | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the list HTML element |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element | | ref | <code>let</code> | Yes | <code>null &#124; 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 |
@ -671,6 +671,8 @@ export interface ComboBoxItem {
| 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: any) => string</code> | <code>undefined</code> | Override the default translation ids | | translateWithId | <code>let</code> | No | <code>(id: any) => string</code> | <code>undefined</code> | Override the default translation ids |
| 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: any) => string</code> | <code>undefined</code> | Override the default translation ids for the input |
| 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 |
@ -2326,7 +2328,7 @@ export interface MultiSelectItem {
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :---------------- | :--------------- | :------- | :--------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------- | | :------------------- | :--------------- | :------- | :--------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------- |
| highlightedId | <code>let</code> | Yes | <code>null &#124; MultiSelectItemId</code> | <code>null</code> | Id of the highlighted ListBoxMenuItem | | highlightedId | <code>let</code> | Yes | <code>null &#124; MultiSelectItemId</code> | <code>null</code> | Id of the highlighted ListBoxMenuItem |
| selectionRef | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the selection element | | selectionRef | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the selection element |
| fieldRef | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the field box element | | fieldRef | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the field box element |
@ -2350,6 +2352,8 @@ 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) &#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 | <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 | <code>let</code> | No | <code>(id: any) => string</code> | <code>undefined</code> | Override the default translation ids | | translateWithId | <code>let</code> | No | <code>(id: any) => string</code> | <code>undefined</code> | Override the default translation ids |
| 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: any) => string</code> | <code>undefined</code> | Override the default translation ids for the input |
| 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 |
| 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 |

40
docs/src/COMPONENT_API.json
View file

@ -1562,6 +1562,26 @@
"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",
"kind": "let",
"description": "Override the default translation ids for the input",
"type": "(id: any) => string",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
},
{ {
"name": "id", "name": "id",
"kind": "let", "kind": "let",
@ -6590,6 +6610,26 @@
"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",
"kind": "let",
"description": "Override the default translation ids for the input",
"type": "(id: any) => string",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
},
{ {
"name": "titleText", "name": "titleText",
"kind": "let", "kind": "let",

12
types/ComboBox/ComboBox.svelte.d.ts vendored
View file

@ -118,6 +118,18 @@ export interface ComboBoxProps
*/ */
translateWithId?: (id: any) => string; translateWithId?: (id: any) => string;
/**
* Override the default translation ids for the menu
* @default undefined
*/
translateWithIdMenu?: (id: any) => string;
/**
* Override the default translation ids for the input
* @default undefined
*/
translateWithIdInput?: (id: any) => string;
/** /**
* Set an id for the list box component * Set an id for the list box component
* @default "ccs-" + Math.random().toString(36) * @default "ccs-" + Math.random().toString(36)

12
types/MultiSelect/MultiSelect.svelte.d.ts vendored
View file

@ -128,6 +128,18 @@ export interface MultiSelectProps
*/ */
translateWithId?: (id: any) => string; translateWithId?: (id: any) => string;
/**
* Override the default translation ids for the menu
* @default undefined
*/
translateWithIdMenu?: (id: any) => string;
/**
* Override the default translation ids for the input
* @default undefined
*/
translateWithIdInput?: (id: any) => string;
/** /**
* Specify the title text * Specify the title text
* @default "" * @default ""