diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 6c36a84d..a152e04f 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -2456,15 +2456,17 @@ export interface MultiSelectItem { ### Slots -None. +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :----------------------------------------------------- | :-------------------------------- | +| -- | Yes | { item: MultiSelectItem; index: number } | {itemToString(item)} | ### Events | Event name | Type | Detail | | :--------- | :--------- | :------------------------------------------------------------------------------------------------------------- | -| blur | dispatched | FocusEvent | CustomEvent | | select | dispatched | { selectedIds: MultiSelectItemId[]; selected: MultiSelectItem[]; unselected: MultiSelectItem[]; } | | clear | dispatched | null | +| blur | dispatched | FocusEvent | CustomEvent | | keydown | forwarded | -- | | keyup | forwarded | -- | | focus | forwarded | -- | diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index c54d901a..5505675e 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -6935,19 +6935,26 @@ } ], "moduleExports": [], - "slots": [], - "events": [ + "slots": [ { - "type": "dispatched", - "name": "blur", - "detail": "FocusEvent | CustomEvent" - }, + "name": "__default__", + "default": true, + "fallback": "{itemToString(item)}", + "slot_props": "{ item: MultiSelectItem; index: number }" + } + ], + "events": [ { "type": "dispatched", "name": "select", "detail": "{ selectedIds: MultiSelectItemId[]; selected: MultiSelectItem[]; unselected: MultiSelectItem[]; }" }, { "type": "dispatched", "name": "clear", "detail": "null" }, + { + "type": "dispatched", + "name": "blur", + "detail": "FocusEvent | CustomEvent" + }, { "type": "forwarded", "name": "keydown", "element": "input" }, { "type": "forwarded", "name": "keyup", "element": "input" }, { "type": "forwarded", "name": "focus", "element": "input" } diff --git a/docs/src/pages/components/MultiSelect.svx b/docs/src/pages/components/MultiSelect.svx index 6af4b4dd..5936cebd 100644 --- a/docs/src/pages/components/MultiSelect.svx +++ b/docs/src/pages/components/MultiSelect.svx @@ -13,6 +13,12 @@ By default, items will be ordered alphabetically based on the `item.text` value. {id: "2", text: "Fax"}]}" /> +### Custom slot + +Override the default slot to customize the display of each item. Access the item and index through the `let:` directive. + + + ### No alphabetical ordering To prevent alphabetical item ordering, pass an empty function to the `sortItem` prop. diff --git a/docs/src/pages/framed/MultiSelect/MultiSelectSlot.svelte b/docs/src/pages/framed/MultiSelect/MultiSelectSlot.svelte new file mode 100644 index 00000000..96d591b0 --- /dev/null +++ b/docs/src/pages/framed/MultiSelect/MultiSelectSlot.svelte @@ -0,0 +1,33 @@ + + + +
+ {item.text} +
+
+ id: {item.id} - index: + {index} +
+
+ + diff --git a/src/MultiSelect/MultiSelect.svelte b/src/MultiSelect/MultiSelect.svelte index 87e06e55..c156f88a 100644 --- a/src/MultiSelect/MultiSelect.svelte +++ b/src/MultiSelect/MultiSelect.svelte @@ -1,14 +1,12 @@