mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-20 20:33:02 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(multi-select): make MultiSelect slottable

Browse source
This commit is contained in:
Eric Liu 2022-03-19 09:04:59 -07:00
commit b3985a697d
1 changed files with 7 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/MultiSelect/MultiSelect.svelte
View file

@ -1,14 +1,12 @@
<script> <script>
/**
* @event {FocusEvent | CustomEvent<FocusEvent>} blur
*/
/** /**
* @typedef {any} MultiSelectItemId * @typedef {any} MultiSelectItemId
* @typedef {string} MultiSelectItemText * @typedef {string} MultiSelectItemText
* @typedef {{ id: MultiSelectItemId; text: MultiSelectItemText; }} MultiSelectItem * @typedef {{ id: MultiSelectItemId; text: MultiSelectItemText; }} MultiSelectItem
* @event {{ selectedIds: MultiSelectItemId[]; selected: MultiSelectItem[]; unselected: MultiSelectItem[]; }} select * @event {{ selectedIds: MultiSelectItemId[]; selected: MultiSelectItem[]; unselected: MultiSelectItem[]; }} select
* @event {null} clear * @event {null} clear
* @event {FocusEvent | CustomEvent<FocusEvent>} blur
* @slot {{ item: MultiSelectItem; index: number }}
*/ */
/** /**
@ -487,7 +485,6 @@
> >
<Checkbox <Checkbox
name="{item.id}" name="{item.id}"
labelText="{itemToString(item)}"
title="{useTitleInItem ? itemToString(item) : undefined}" title="{useTitleInItem ? itemToString(item) : undefined}"
{...itemToInput(item)} {...itemToInput(item)}
readonly readonly
@ -498,7 +495,11 @@
on:blur="{() => { on:blur="{() => {
if (i === filteredItems.length - 1) open = false; if (i === filteredItems.length - 1) open = false;
}}" }}"
/> >
<slot slot="labelText" item="{item}" index="{i}">
{itemToString(item)}
</slot>
</Checkbox>
</ListBoxMenuItem> </ListBoxMenuItem>
{/each} {/each}
</ListBoxMenu> </ListBoxMenu>