feat(multi-select): make MultiSelect slottable

This commit is contained in:
Eric Liu 2022-03-19 09:04:59 -07:00
commit b3985a697d

View file

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