mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-21 12:49:20 +00:00
feat(multi-select): add itemToInput to allow customizing name/title/labelText
This commit is contained in:
Eric Liu
parent
c42aea86fa
commit
0f7349eff5
4 changed files with 53 additions and 50 deletions
|
|
@ -2418,41 +2418,41 @@ export interface MultiSelectItem {
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :---------------- | :--------------- | :------- | :--------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------- |
|
||||
| selectionRef | <code>let</code> | Yes | <code>null | HTMLDivElement</code> | <code>null</code> | Obtain a reference to the selection element |
|
||||
| fieldRef | <code>let</code> | Yes | <code>null | HTMLDivElement</code> | <code>null</code> | Obtain a reference to the field box element |
|
||||
| multiSelectRef | <code>let</code> | Yes | <code>null | HTMLDivElement</code> | <code>null</code> | Obtain a reference to the outer div element |
|
||||
| inputRef | <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 dropdown |
|
||||
| value | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the multiselect value |
|
||||
| selectedIds | <code>let</code> | Yes | <code>MultiSelectItemId[]</code> | <code>[]</code> | Set the selected ids |
|
||||
| items | <code>let</code> | Yes | <code>MultiSelectItem[]</code> | <code>[]</code> | Set the multiselect items |
|
||||
| itemToString | <code>let</code> | No | <code>(item: MultiSelectItem) => any</code> | <code>(item) => item.text || item.id</code> | Override the display of a multiselect item |
|
||||
| itemToName | <code>let</code> | No | <code>(item: MultiSelectItem) => any</code> | <code>(item) => item.id</code> | Override the input name attribute of a multiselect item.<br />Defaults to using the item id |
|
||||
| size | <code>let</code> | No | <code>"sm" | "lg" | "xl"</code> | <code>undefined</code> | Set the size of the combobox |
|
||||
| type | <code>let</code> | No | <code>"default" | "inline"</code> | <code>"default"</code> | Specify the type of multiselect |
|
||||
| direction | <code>let</code> | No | <code>"bottom" | "top"</code> | <code>"bottom"</code> | Specify the direction of the multiselect dropdown menu |
|
||||
| selectionFeedback | <code>let</code> | No | <code>"top" | "fixed" | "top-after-reopen"</code> | <code>"top-after-reopen"</code> | Specify the selection feedback after selecting items |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the dropdown |
|
||||
| filterable | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to filter items |
|
||||
| filterItem | <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 | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
| locale | <code>let</code> | No | <code>string</code> | <code>"en"</code> | Specify the locale |
|
||||
| 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 |
|
||||
| translateWithId | <code>let</code> | No | <code>(id: any) => string</code> | <code>undefined</code> | Override the default translation ids |
|
||||
| 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 |
|
||||
| invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
|
||||
| invalidText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
|
||||
| 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 |
|
||||
| helperText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
|
||||
| label | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the list box label |
|
||||
| hideLabel | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
|
||||
| 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 select |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :---------------- | :--------------- | :------- | :--------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------- |
|
||||
| selectionRef | <code>let</code> | Yes | <code>null | HTMLDivElement</code> | <code>null</code> | Obtain a reference to the selection element |
|
||||
| fieldRef | <code>let</code> | Yes | <code>null | HTMLDivElement</code> | <code>null</code> | Obtain a reference to the field box element |
|
||||
| multiSelectRef | <code>let</code> | Yes | <code>null | HTMLDivElement</code> | <code>null</code> | Obtain a reference to the outer div element |
|
||||
| inputRef | <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 dropdown |
|
||||
| value | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the multiselect value |
|
||||
| selectedIds | <code>let</code> | Yes | <code>MultiSelectItemId[]</code> | <code>[]</code> | Set the selected ids |
|
||||
| items | <code>let</code> | Yes | <code>MultiSelectItem[]</code> | <code>[]</code> | Set the multiselect items |
|
||||
| itemToString | <code>let</code> | No | <code>(item: MultiSelectItem) => any</code> | <code>(item) => item.text || item.id</code> | Override the display of a multiselect item |
|
||||
| itemToInput | <code>let</code> | No | <code>(item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; }</code> | <code>(item) => {}</code> | Override the item name, title, labelText passed to the checkbox input |
|
||||
| size | <code>let</code> | No | <code>"sm" | "lg" | "xl"</code> | <code>undefined</code> | Set the size of the combobox |
|
||||
| type | <code>let</code> | No | <code>"default" | "inline"</code> | <code>"default"</code> | Specify the type of multiselect |
|
||||
| direction | <code>let</code> | No | <code>"bottom" | "top"</code> | <code>"bottom"</code> | Specify the direction of the multiselect dropdown menu |
|
||||
| selectionFeedback | <code>let</code> | No | <code>"top" | "fixed" | "top-after-reopen"</code> | <code>"top-after-reopen"</code> | Specify the selection feedback after selecting items |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the dropdown |
|
||||
| filterable | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to filter items |
|
||||
| filterItem | <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 | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
| locale | <code>let</code> | No | <code>string</code> | <code>"en"</code> | Specify the locale |
|
||||
| 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 |
|
||||
| translateWithId | <code>let</code> | No | <code>(id: any) => string</code> | <code>undefined</code> | Override the default translation ids |
|
||||
| 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 |
|
||||
| invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
|
||||
| invalidText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
|
||||
| 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 |
|
||||
| helperText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
|
||||
| label | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the list box label |
|
||||
| hideLabel | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
|
||||
| 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 select |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
|
|||
|
|
@ -6447,11 +6447,11 @@
|
|||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "itemToName",
|
||||
"name": "itemToInput",
|
||||
"kind": "let",
|
||||
"description": "Override the input name attribute of a multiselect item.\nDefaults to using the item id",
|
||||
"type": "(item: MultiSelectItem) => any",
|
||||
"value": "(item) => item.id",
|
||||
"description": "Override the item name, title, labelText passed to the checkbox input",
|
||||
"type": "(item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; }",
|
||||
"value": "(item) => {}",
|
||||
"isFunction": true,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
|
|
|
|||
|
|
@ -20,11 +20,10 @@
|
|||
export let itemToString = (item) => item.text || item.id;
|
||||
|
||||
/**
|
||||
* Override the input name attribute of a multiselect item.
|
||||
* Defaults to using the item id
|
||||
* @type {(item: MultiSelectItem) => any}
|
||||
* Override the item name, title, labelText passed to the checkbox input
|
||||
* @type {(item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; }}
|
||||
*/
|
||||
export let itemToName = (item) => item.id;
|
||||
export let itemToInput = (item) => {};
|
||||
|
||||
/**
|
||||
* Set the selected ids
|
||||
|
|
@ -494,12 +493,13 @@
|
|||
}}"
|
||||
>
|
||||
<Checkbox
|
||||
name="{item.id}"
|
||||
labelText="{itemToString(item)}"
|
||||
title="{useTitleInItem ? itemToString(item) : undefined}"
|
||||
{...itemToInput(item)}
|
||||
readonly
|
||||
tabindex="-1"
|
||||
id="checkbox-{item.id}"
|
||||
title="{useTitleInItem ? itemToString(item) : undefined}"
|
||||
name="{itemToName(item)}"
|
||||
labelText="{itemToString(item)}"
|
||||
checked="{item.checked}"
|
||||
disabled="{disabled}"
|
||||
on:blur="{() => {
|
||||
|
|
|
|||
11
types/MultiSelect/MultiSelect.svelte.d.ts
vendored
11
types/MultiSelect/MultiSelect.svelte.d.ts
vendored
|
|
@ -25,11 +25,14 @@ export interface MultiSelectProps
|
|||
itemToString?: (item: MultiSelectItem) => any;
|
||||
|
||||
/**
|
||||
* Override the input name attribute of a multiselect item.
|
||||
* Defaults to using the item id
|
||||
* @default (item) => item.id
|
||||
* Override the item name, title, labelText passed to the checkbox input
|
||||
* @default (item) => {}
|
||||
*/
|
||||
itemToName?: (item: MultiSelectItem) => any;
|
||||
itemToInput?: (item: MultiSelectItem) => {
|
||||
name?: string;
|
||||
labelText?: any;
|
||||
title?: string;
|
||||
};
|
||||
|
||||
/**
|
||||
* Set the selected ids
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue