mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
63f52b4683The non-filterable `MultiSelect` is missing a `blur` event. Implementation-wise, we have to dispatch it and include the event as the `detail`. Otherwise, the filterable variant will dispatch "blur" twice because it has both a button and input. The filterable `MultiSelect` continues to forward the blur event to the input.
114 lines
2.2 KiB
Svelte
114 lines
2.2 KiB
Svelte
<script lang="ts">
|
|
import { MultiSelect } from "../types";
|
|
</script>
|
|
|
|
<MultiSelect
|
|
direction="top"
|
|
titleText="Contact"
|
|
label="Select contact methods..."
|
|
hideLabel
|
|
items="{[
|
|
{ id: 0, text: 'Slack' },
|
|
{ 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);
|
|
}}"
|
|
on:blur="{(e) => {
|
|
e.detail; // number | FocusEvent
|
|
}}"
|
|
/>
|
|
|
|
<MultiSelect
|
|
titleText="Contact"
|
|
label="Select contact methods..."
|
|
items="{[
|
|
{ id: '0', text: 'Slack' },
|
|
{ id: '1', text: 'Email' },
|
|
{ id: '2', text: 'Fax' },
|
|
]}"
|
|
sortItem="{() => {}}"
|
|
/>
|
|
|
|
<MultiSelect
|
|
selectedIds="{['0', '1']}"
|
|
titleText="Contact"
|
|
label="Select contact methods..."
|
|
items="{[
|
|
{ id: '0', text: 'Slack' },
|
|
{ id: '1', text: 'Email' },
|
|
{ id: '2', text: 'Fax' },
|
|
]}"
|
|
/>
|
|
|
|
<MultiSelect
|
|
itemToString="{(item) => {
|
|
return item.text + ' (' + item.id + ')';
|
|
}}"
|
|
titleText="Contact"
|
|
label="Select contact methods..."
|
|
items="{[
|
|
{ id: '0', text: 'Slack' },
|
|
{ id: '1', text: 'Email' },
|
|
{ id: '2', text: 'Fax' },
|
|
]}"
|
|
sortItem="{() => {}}"
|
|
/>
|
|
|
|
<MultiSelect
|
|
light
|
|
titleText="Contact"
|
|
label="Select contact methods..."
|
|
items="{[
|
|
{ id: '0', text: 'Slack' },
|
|
{ id: '1', text: 'Email' },
|
|
{ id: '2', text: 'Fax' },
|
|
]}"
|
|
/>
|
|
|
|
<MultiSelect
|
|
type="inline"
|
|
titleText="Contact"
|
|
label="Select contact methods..."
|
|
items="{[
|
|
{ id: '0', text: 'Slack' },
|
|
{ id: '1', text: 'Email' },
|
|
{ id: '2', text: 'Fax' },
|
|
]}"
|
|
/>
|
|
|
|
<MultiSelect
|
|
size="xl"
|
|
titleText="Contact"
|
|
label="Select contact methods..."
|
|
items="{[
|
|
{ id: '0', text: 'Slack' },
|
|
{ id: '1', text: 'Email' },
|
|
{ id: '2', text: 'Fax' },
|
|
]}"
|
|
/>
|
|
|
|
<MultiSelect
|
|
size="sm"
|
|
titleText="Contact"
|
|
label="Select contact methods..."
|
|
items="{[
|
|
{ id: '0', text: 'Slack' },
|
|
{ id: '1', text: 'Email' },
|
|
{ id: '2', text: 'Fax' },
|
|
]}"
|
|
/>
|
|
|
|
<MultiSelect
|
|
filterable
|
|
titleText="Contact"
|
|
placeholder="Filter contact methods..."
|
|
items="{[
|
|
{ id: '0', text: 'Slack' },
|
|
{ id: '1', text: 'Email' },
|
|
{ id: '2', text: 'Fax' },
|
|
]}"
|
|
/>
|