diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 252b1319..15e5a5f3 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -2418,41 +2418,41 @@ export interface MultiSelectItem { ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :---------------- | :--------------- | :------- | :--------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------- | -| selectionRef | let | Yes | null | HTMLDivElement | null | Obtain a reference to the selection element | -| fieldRef | let | Yes | null | HTMLDivElement | null | Obtain a reference to the field box element | -| multiSelectRef | let | Yes | null | HTMLDivElement | null | Obtain a reference to the outer div element | -| inputRef | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| open | let | Yes | boolean | false | Set to `true` to open the dropdown | -| value | let | Yes | string | "" | Specify the multiselect value | -| selectedIds | let | Yes | MultiSelectItemId[] | [] | Set the selected ids | -| items | let | Yes | MultiSelectItem[] | [] | Set the multiselect items | -| itemToString | let | No | (item: MultiSelectItem) => any | (item) => item.text || item.id | Override the display of a multiselect item | -| itemToName | let | No | (item: MultiSelectItem) => any | (item) => item.id | Override the input name attribute of a multiselect item.
Defaults to using the item id | -| size | let | No | "sm" | "lg" | "xl" | undefined | Set the size of the combobox | -| type | let | No | "default" | "inline" | "default" | Specify the type of multiselect | -| direction | let | No | "bottom" | "top" | "bottom" | Specify the direction of the multiselect dropdown menu | -| selectionFeedback | let | No | "top" | "fixed" | "top-after-reopen" | "top-after-reopen" | Specify the selection feedback after selecting items | -| disabled | let | No | boolean | false | Set to `true` to disable the dropdown | -| filterable | let | No | boolean | false | Set to `true` to filter items | -| filterItem | let | No | (item: MultiSelectItem, value: string) => string | (item, value) => item.text.toLowerCase().includes(value.trim().toLowerCase()) | Override the filtering logic
The default filtering is an exact string comparison | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| locale | let | No | string | "en" | Specify the locale | -| placeholder | let | No | string | "" | Specify the placeholder text | -| sortItem | let | No | ((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) | (() => void) | (a, b) => a.text.localeCompare(b.text, locale, { numeric: true }) | Override the sorting logic
The default sorting compare the item text value | -| translateWithId | let | No | (id: any) => string | undefined | Override the default translation ids | -| titleText | let | No | string | "" | Specify the title text | -| useTitleInItem | let | No | boolean | false | Set to `true` to pass the item to `itemToString` in the checkbox | -| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | -| invalidText | let | No | string | "" | Specify the invalid state text | -| warn | let | No | boolean | false | Set to `true` to indicate an warning state | -| warnText | let | No | string | "" | Specify the warning state text | -| helperText | let | No | string | "" | Specify the helper text | -| label | let | No | string | "" | Specify the list box label | -| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component | -| name | let | No | string | undefined | Specify a name attribute for the select | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :---------------- | :--------------- | :------- | :--------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------- | +| selectionRef | let | Yes | null | HTMLDivElement | null | Obtain a reference to the selection element | +| fieldRef | let | Yes | null | HTMLDivElement | null | Obtain a reference to the field box element | +| multiSelectRef | let | Yes | null | HTMLDivElement | null | Obtain a reference to the outer div element | +| inputRef | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| open | let | Yes | boolean | false | Set to `true` to open the dropdown | +| value | let | Yes | string | "" | Specify the multiselect value | +| selectedIds | let | Yes | MultiSelectItemId[] | [] | Set the selected ids | +| items | let | Yes | MultiSelectItem[] | [] | Set the multiselect items | +| itemToString | let | No | (item: MultiSelectItem) => any | (item) => item.text || item.id | Override the display of a multiselect item | +| itemToInput | let | No | (item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; } | (item) => {} | Override the item name, title, labelText passed to the checkbox input | +| size | let | No | "sm" | "lg" | "xl" | undefined | Set the size of the combobox | +| type | let | No | "default" | "inline" | "default" | Specify the type of multiselect | +| direction | let | No | "bottom" | "top" | "bottom" | Specify the direction of the multiselect dropdown menu | +| selectionFeedback | let | No | "top" | "fixed" | "top-after-reopen" | "top-after-reopen" | Specify the selection feedback after selecting items | +| disabled | let | No | boolean | false | Set to `true` to disable the dropdown | +| filterable | let | No | boolean | false | Set to `true` to filter items | +| filterItem | let | No | (item: MultiSelectItem, value: string) => string | (item, value) => item.text.toLowerCase().includes(value.trim().toLowerCase()) | Override the filtering logic
The default filtering is an exact string comparison | +| light | let | No | boolean | false | Set to `true` to enable the light variant | +| locale | let | No | string | "en" | Specify the locale | +| placeholder | let | No | string | "" | Specify the placeholder text | +| sortItem | let | No | ((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) | (() => void) | (a, b) => a.text.localeCompare(b.text, locale, { numeric: true }) | Override the sorting logic
The default sorting compare the item text value | +| translateWithId | let | No | (id: any) => string | undefined | Override the default translation ids | +| titleText | let | No | string | "" | Specify the title text | +| useTitleInItem | let | No | boolean | false | Set to `true` to pass the item to `itemToString` in the checkbox | +| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | +| invalidText | let | No | string | "" | Specify the invalid state text | +| warn | let | No | boolean | false | Set to `true` to indicate an warning state | +| warnText | let | No | string | "" | Specify the warning state text | +| helperText | let | No | string | "" | Specify the helper text | +| label | let | No | string | "" | Specify the list box label | +| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component | +| name | let | No | string | undefined | Specify a name attribute for the select | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 0ebf8b8a..160767c0 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -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, diff --git a/src/MultiSelect/MultiSelect.svelte b/src/MultiSelect/MultiSelect.svelte index 7ee31993..0c8c7f92 100644 --- a/src/MultiSelect/MultiSelect.svelte +++ b/src/MultiSelect/MultiSelect.svelte @@ -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 @@ }}" >