diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index fc973002..2635e2b8 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -2355,46 +2355,43 @@ export interface MultiSelectItem { ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :------------------------------ | :------------------------ | :---------------------------------------------------------------------------------------------------------------------------- | :------- | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| highlightedId | No | let | Yes | null | MultiSelectItemId | null | Id of the highlighted ListBoxMenuItem | -| selectionRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the selection element | -| fieldRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the field box element | -| multiSelectRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the outer div element | -| inputRef | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| open | No | let | Yes | boolean | false | Set to `true` to open the dropdown | -| value | No | let | Yes | string | "" | Specify the multiselect value | -| selectedIds | No | let | Yes | ReadonlyArray | [] | Set the selected ids | -| items | No | let | Yes | ReadonlyArray | [] | Set the multiselect items | -| itemToString | No | let | No | (item: MultiSelectItem) => any | (item) => item.text || item.id | Override the display of a multiselect item | -| itemToInput | No | let | No | (item: MultiSelectItem) => { name?: string; labelText?: any; title?: | -| string; value?: string } | (item) => {} | Override the item name, title, labelText, or value passed to the user-selectable checkbox input as well as the hidden inputs. | -| selectedOnly | No | let | No | boolean | false | Set to `true` to only render selected options as hidden inputs for form submission. | -| combineValues | No | let | No | false | true | string | false | Combine selected items as comma-separated values when submitted in a form.
If set to `true`, the default separator is a comma `,`.
Pass in a string to override the separator. | -| size | No | let | No | "sm" | "lg" | "xl" | undefined | Set the size of the combobox | -| type | No | let | No | "default" | "inline" | "default" | Specify the type of multiselect | -| direction | No | let | No | "bottom" | "top" | "bottom" | Specify the direction of the multiselect dropdown menu | -| selectionFeedback | No | let | No | "top" | "fixed" | "top-after-reopen" | "top-after-reopen" | Specify the selection feedback after selecting items | -| disabled | No | let | No | boolean | false | Set to `true` to disable the dropdown | -| filterable | No | let | No | boolean | false | Set to `true` to filter items | -| filterItem | No | 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 | No | let | No | boolean | false | Set to `true` to enable the light variant | -| locale | No | let | No | string | "en" | Specify the locale | -| placeholder | No | let | No | string | "" | Specify the placeholder text | -| sortItem | No | 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 | No | let | No | (id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string | undefined | Override the chevron icon label based on the open state.
Defaults to "Open menu" when closed and "Close menu" when open | -| translateWithIdSelection | No | let | No | (id: import("../ListBox/ListBoxSelection.svelte").ListBoxSelectionTranslationId) => string | undefined | Override the label of the clear button when the input has a selection.
Defaults to "Clear selected item" and "Clear all items" if more than one item is selected | -| titleText | No | let | No | string | "" | Specify the title text | -| useTitleInItem | No | let | No | boolean | false | Set to `true` to pass the item to `itemToString` in the checkbox | -| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state | -| invalidText | No | let | No | string | "" | Specify the invalid state text | -| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state | -| warnText | No | let | No | string | "" | Specify the warning state text | -| helperText | No | let | No | string | "" | Specify the helper text | -| label | No | let | No | string | "" | Specify the list box label | -| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | -| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component | -| name | No | let | No | string | undefined | Specify a name attribute for the select | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :----------------------- | :------- | :--------------- | :------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| highlightedId | No | let | Yes | null | MultiSelectItemId | null | Id of the highlighted ListBoxMenuItem | +| selectionRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the selection element | +| fieldRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the field box element | +| multiSelectRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the outer div element | +| inputRef | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| open | No | let | Yes | boolean | false | Set to `true` to open the dropdown | +| value | No | let | Yes | string | "" | Specify the multiselect value | +| selectedIds | No | let | Yes | ReadonlyArray | [] | Set the selected ids | +| items | No | let | Yes | ReadonlyArray | [] | Set the multiselect items | +| itemToString | No | let | No | (item: MultiSelectItem) => any | (item) => item.text || item.id | Override the display of a multiselect item | +| itemToInput | No | let | No | (item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; value?: string } | (item) => {} | Override the item name, title, labelText, or value passed to the user-selectable checkbox input as well as the hidden inputs. | +| size | No | let | No | "sm" | "lg" | "xl" | undefined | Set the size of the combobox | +| type | No | let | No | "default" | "inline" | "default" | Specify the type of multiselect | +| direction | No | let | No | "bottom" | "top" | "bottom" | Specify the direction of the multiselect dropdown menu | +| selectionFeedback | No | let | No | "top" | "fixed" | "top-after-reopen" | "top-after-reopen" | Specify the selection feedback after selecting items | +| disabled | No | let | No | boolean | false | Set to `true` to disable the dropdown | +| filterable | No | let | No | boolean | false | Set to `true` to filter items | +| filterItem | No | 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 | No | let | No | boolean | false | Set to `true` to enable the light variant | +| locale | No | let | No | string | "en" | Specify the locale | +| placeholder | No | let | No | string | "" | Specify the placeholder text | +| sortItem | No | 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 | No | let | No | (id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string | undefined | Override the chevron icon label based on the open state.
Defaults to "Open menu" when closed and "Close menu" when open | +| translateWithIdSelection | No | let | No | (id: import("../ListBox/ListBoxSelection.svelte").ListBoxSelectionTranslationId) => string | undefined | Override the label of the clear button when the input has a selection.
Defaults to "Clear selected item" and "Clear all items" if more than one item is selected | +| titleText | No | let | No | string | "" | Specify the title text | +| useTitleInItem | No | let | No | boolean | false | Set to `true` to pass the item to `itemToString` in the checkbox | +| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state | +| invalidText | No | let | No | string | "" | Specify the invalid state text | +| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state | +| warnText | No | let | No | string | "" | Specify the warning state text | +| helperText | No | let | No | string | "" | Specify the helper text | +| label | No | let | No | string | "" | Specify the list box label | +| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component | +| name | No | 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 1cbcc58e..c7102e90 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -7007,7 +7007,7 @@ "name": "itemToInput", "kind": "let", "description": "Override the item name, title, labelText, or value passed to the user-selectable checkbox input as well as the hidden inputs.", - "type": "(item: MultiSelectItem) => { name?: string; labelText?: any; title?:\nstring; value?: string }", + "type": "(item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; value?: string }", "value": "(item) => {}", "isFunction": true, "isFunctionDeclaration": false, @@ -7015,30 +7015,6 @@ "constant": false, "reactive": false }, - { - "name": "selectedOnly", - "kind": "let", - "description": "Set to `true` to only render selected options as hidden inputs for form submission.", - "type": "boolean", - "value": "false", - "isFunction": false, - "isFunctionDeclaration": false, - "isRequired": false, - "constant": false, - "reactive": false - }, - { - "name": "combineValues", - "kind": "let", - "description": "Combine selected items as comma-separated values when submitted in a form.\nIf set to `true`, the default separator is a comma `,`.\nPass in a string to override the separator.", - "type": "false | true | string", - "value": "false", - "isFunction": false, - "isFunctionDeclaration": false, - "isRequired": false, - "constant": false, - "reactive": false - }, { "name": "selectedIds", "kind": "let", diff --git a/docs/src/pages/components/MultiSelect.svx b/docs/src/pages/components/MultiSelect.svx index fde130b3..563fee26 100644 --- a/docs/src/pages/components/MultiSelect.svx +++ b/docs/src/pages/components/MultiSelect.svx @@ -14,10 +14,9 @@ By default, items will be ordered alphabetically based on the `item.text` value. To prevent this, see [#no-alphabetical-ordering](#no-alphabetical-ordering). -Hidden inputs will be rendered based on user selection, such as `` to mirror checkbox values and to allow MultiSelect to -be submittable within forms. These hidden inputs can be customized with -the `combineValues` or `itemToInput` props. +MultiSelect provides interactivity for a list of checkbox inputs. Those +checkboxes will remain rendered in the DOM and are submittable within forms. +Checkbox attributes can be adjusted via the `itemToInput` prop.