diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 6592dd66..3ccb3e9a 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -2410,40 +2410,40 @@ 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) => string | (item) => item.text || item.id | Override the display of a multiselect item | -| size | let | No | "sm" | "lg" | "xl" | -- | 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.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 | -- | 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 | -- | 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) => string | (item) => item.text || item.id | Override the display of a multiselect item | +| size | let | No | "sm" | "lg" | "xl" | -- | 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 | -- | 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 | -- | Specify a name attribute for the select | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 7bc1b87a..f24a8600 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -6472,7 +6472,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) => item.text.toLowerCase().includes(value.toLowerCase())", + "value": "(item, value) => item.text.toLowerCase().includes(value.trim().toLowerCase())", "isFunction": true, "isFunctionDeclaration": false, "constant": false, diff --git a/types/MultiSelect/MultiSelect.svelte.d.ts b/types/MultiSelect/MultiSelect.svelte.d.ts index 7ed384b8..b3abbcb7 100644 --- a/types/MultiSelect/MultiSelect.svelte.d.ts +++ b/types/MultiSelect/MultiSelect.svelte.d.ts @@ -74,7 +74,7 @@ export interface MultiSelectProps /** * Override the filtering logic * The default filtering is an exact string comparison - * @default (item, value) => item.text.toLowerCase().includes(value.toLowerCase()) + * @default (item, value) => item.text.toLowerCase().includes(value.trim().toLowerCase()) */ filterItem?: (item: MultiSelectItem, value: string) => string;