diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 98997501..f8723f3a 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -2184,13 +2184,13 @@ None. ### Events -| Event name | Type | Detail | -| :--------- | :--------- | :----- | -| clear | forwarded | -- | -| keydown | forwarded | -- | -| focus | forwarded | -- | -| blur | forwarded | -- | -| select | dispatched | -- | +| Event name | Type | Detail | +| :--------- | :--------- | :-------------------------------------------------------------------------------------------------- | +| select | dispatched | { selectedIds: string[]; selected: MultiSelectItem[]; unselected: MultiSelectItem[]; } | +| clear | forwarded | -- | +| keydown | forwarded | -- | +| focus | forwarded | -- | +| blur | forwarded | -- | ## `NotificationActionButton` diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 18d8a86e..697fd202 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -5403,11 +5403,15 @@ ], "slots": [], "events": [ + { + "type": "dispatched", + "name": "select", + "detail": "{ selectedIds: string[]; selected: MultiSelectItem[]; unselected: MultiSelectItem[]; }" + }, { "type": "forwarded", "name": "clear", "element": "ListBoxSelection" }, { "type": "forwarded", "name": "keydown", "element": "input" }, { "type": "forwarded", "name": "focus", "element": "input" }, - { "type": "forwarded", "name": "blur", "element": "input" }, - { "type": "dispatched", "name": "select" } + { "type": "forwarded", "name": "blur", "element": "input" } ], "typedefs": [ { diff --git a/src/MultiSelect/MultiSelect.svelte b/src/MultiSelect/MultiSelect.svelte index c0bae642..01a8edb1 100644 --- a/src/MultiSelect/MultiSelect.svelte +++ b/src/MultiSelect/MultiSelect.svelte @@ -121,6 +121,7 @@ * @typedef {string} MultiSelectItemId * @typedef {string} MultiSelectItemText * @typedef {{ id: MultiSelectItemId; text: MultiSelectItemText; }} MultiSelectItem + * @event {{ selectedIds: string[]; selected: MultiSelectItem[]; unselected: MultiSelectItem[]; }} select */ import { afterUpdate, createEventDispatcher, setContext } from "svelte"; diff --git a/tests/MultiSelect.test.svelte b/tests/MultiSelect.test.svelte index 23720a04..bb632fc5 100644 --- a/tests/MultiSelect.test.svelte +++ b/tests/MultiSelect.test.svelte @@ -11,6 +11,11 @@ { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }, ]}" + on:select="{(e) => { + console.log(e.detail.selectedIds); + console.log(e.detail.selected); + console.log(e.detail.unselected); + }}" /> ; clear: WindowEventMap["clear"]; keydown: WindowEventMap["keydown"]; focus: WindowEventMap["focus"]; blur: WindowEventMap["blur"]; - select: CustomEvent; }, {} > {}