diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index ce039d0122..54fd2b03cd 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -667,8 +667,8 @@ export interface ComboBoxItem { | open | No | let | Yes | boolean | false | Set to `true` to open the combobox menu dropdown | | value | No | let | Yes | string | "" | Specify the selected combobox value | | selectedId | No | let | Yes | ComboBoxItemId | undefined | Set the selected item by value id | -| items | No | let | No | ReadonlyArray | [] | Set the combobox items | -| itemToString | No | let | No | (item: ComboBoxItem) => string | (item) => item.text || item.id | Override the display of a combobox item | +| items | No | let | No | ReadonlyArray | [] | Set the combobox items | +| itemToString | No | let | No | (item: Item) => string | (item) => item.text || item.id | Override the display of a combobox item | | direction | No | let | No | "bottom" | "top" | "bottom" | Specify the direction of the combobox dropdown menu | | size | No | let | No | "sm" | "xl" | undefined | Set the size of the combobox | | disabled | No | let | No | boolean | false | Set to `true` to disable the combobox | @@ -683,7 +683,7 @@ export interface ComboBoxItem { | light | No | let | No | boolean | false | Set to `true` to enable the light variant | | allowCustomValue | No | let | No | boolean | false | Set to `true` to allow custom values that are not in the items list.
By default, user-entered text is cleared when the combobox loses focus without selecting an item.
When enabled, custom text is preserved. | | clearFilterOnOpen | No | let | No | boolean | false | Set to `true` to clear the input value when opening the dropdown.
This allows users to see all available items instead of only filtered results.
The original value is restored if the dropdown is closed without making a selection. | -| shouldFilterItem | No | let | No | (item: ComboBoxItem, value: string) => boolean | () => true | Determine if an item should be filtered given the current combobox value | +| shouldFilterItem | No | let | No | (item: Item, value: string) => boolean | () => true | Determine if an item should be filtered given the current combobox 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: "clearSelection") => string | undefined | Override the label of the clear button when the input has a selection.
Defaults to "Clear selected item" since a combo box can only have on selection. | | id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component | @@ -692,24 +692,24 @@ export interface ComboBoxItem { ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :-------------------------------------------------- | :-------------------------------- | -| -- | Yes | { item: ComboBoxItem; index: number } | {itemToString(item)} | -| titleText | No | Record | {titleText} | +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :------------------------------------------ | :-------------------------------- | +| -- | Yes | { item: Item; index: number } | {itemToString(item)} | +| titleText | No | Record | {titleText} | ### Events -| Event name | Type | Detail | Description | -| :--------- | :--------- | :---------------------------------------------------------------------- | :---------- | -| select | dispatched | { selectedId: ComboBoxItemId; selectedItem: ComboBoxItem } | -- | -| clear | forwarded | -- | -- | -| input | forwarded | -- | -- | -| keydown | forwarded | -- | -- | -| keyup | forwarded | -- | -- | -| focus | forwarded | -- | -- | -| blur | forwarded | -- | -- | -| paste | forwarded | -- | -- | -| scroll | forwarded | -- | -- | +| Event name | Type | Detail | Description | +| :--------- | :--------- | :-------------------------------------------------------------- | :---------- | +| select | dispatched | { selectedId: ComboBoxItemId; selectedItem: Item } | -- | +| clear | forwarded | -- | -- | +| input | forwarded | -- | -- | +| keydown | forwarded | -- | -- | +| keyup | forwarded | -- | -- | +| focus | forwarded | -- | -- | +| blur | forwarded | -- | -- | +| paste | forwarded | -- | -- | +| scroll | forwarded | -- | -- | ## `ComposedModal` diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index bb226bb374..7fca1e2b7c 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -1821,7 +1821,7 @@ "name": "items", "kind": "let", "description": "Set the combobox items", - "type": "ReadonlyArray", + "type": "ReadonlyArray", "value": "[]", "isFunction": false, "isFunctionDeclaration": false, @@ -1833,7 +1833,7 @@ "name": "itemToString", "kind": "let", "description": "Override the display of a combobox item", - "type": "(item: ComboBoxItem) => string", + "type": "(item: Item) => string", "value": "(item) => item.text || item.id", "isFunction": true, "isFunctionDeclaration": false, @@ -2047,7 +2047,7 @@ "name": "shouldFilterItem", "kind": "let", "description": "Determine if an item should be filtered given the current combobox value", - "type": "(item: ComboBoxItem, value: string) => boolean", + "type": "(item: Item, value: string) => boolean", "value": "() => true", "isFunction": true, "isFunctionDeclaration": false, @@ -2143,7 +2143,7 @@ "name": null, "default": true, "fallback": "{itemToString(item)}", - "slot_props": "{\n item: ComboBoxItem;\n index: number;\n}" + "slot_props": "{\n item: Item;\n index: number;\n}" }, { "name": "titleText", @@ -2156,7 +2156,7 @@ { "type": "dispatched", "name": "select", - "detail": "{\n selectedId: ComboBoxItemId;\n selectedItem: ComboBoxItem;\n}" + "detail": "{\n selectedId: ComboBoxItemId;\n selectedItem: Item;\n}" }, { "type": "forwarded", @@ -2212,7 +2212,10 @@ "ts": "interface ComboBoxItem {\n id: ComboBoxItemId;\n text: string;\n disabled?: boolean;\n}\n" } ], - "generics": null, + "generics": [ + "Item", + "Item extends ComboBoxItem = ComboBoxItem" + ], "rest_props": { "type": "Element", "name": "input" diff --git a/src/ComboBox/ComboBox.svelte b/src/ComboBox/ComboBox.svelte index 0971e9f1b5..bb0e3f8941 100644 --- a/src/ComboBox/ComboBox.svelte +++ b/src/ComboBox/ComboBox.svelte @@ -1,21 +1,23 @@ + + { + console.log("selected:", e.detail.selectedItem); + }} + let:item +> + {@const { text, price, category } = item} +
+ {text} - ${price} + ({category}) +
+ diff --git a/types/ComboBox/ComboBox.svelte.d.ts b/types/ComboBox/ComboBox.svelte.d.ts index c53fa69b51..8034be15fc 100644 --- a/types/ComboBox/ComboBox.svelte.d.ts +++ b/types/ComboBox/ComboBox.svelte.d.ts @@ -11,18 +11,18 @@ export interface ComboBoxItem { type $RestProps = SvelteHTMLElements["input"]; -type $Props = { +type $Props = { /** * Set the combobox items * @default [] */ - items?: ReadonlyArray; + items?: ReadonlyArray; /** * Override the display of a combobox item * @default (item) => item.text || item.id */ - itemToString?: (item: ComboBoxItem) => string; + itemToString?: (item: Item) => string; /** * Set the selected item by value id @@ -134,7 +134,7 @@ type $Props = { * Determine if an item should be filtered given the current combobox value * @default () => true */ - shouldFilterItem?: (item: ComboBoxItem, value: string) => boolean; + shouldFilterItem?: (item: Item, value: string) => boolean; /** * Override the chevron icon label based on the open state. @@ -179,15 +179,15 @@ type $Props = { [key: `data-${string}`]: any; }; -export type ComboBoxProps = Omit<$RestProps, keyof $Props> & $Props; +export type ComboBoxProps = Omit<$RestProps, keyof $Props> & + $Props; -export default class ComboBox extends SvelteComponentTyped< - ComboBoxProps, +export default class ComboBox< + Item extends ComboBoxItem = ComboBoxItem, +> extends SvelteComponentTyped< + ComboBoxProps, { - select: CustomEvent<{ - selectedId: ComboBoxItemId; - selectedItem: ComboBoxItem; - }>; + select: CustomEvent<{ selectedId: ComboBoxItemId; selectedItem: Item }>; clear: CustomEvent; input: WindowEventMap["input"]; keydown: WindowEventMap["keydown"]; @@ -197,10 +197,7 @@ export default class ComboBox extends SvelteComponentTyped< paste: WindowEventMap["paste"]; scroll: WindowEventMap["scroll"]; }, - { - default: { item: ComboBoxItem; index: number }; - titleText: Record; - } + { default: { item: Item; index: number }; titleText: Record } > { /** * Clear the combo box programmatically