-
-
Notifications
You must be signed in to change notification settings - Fork 283
/
Copy path_AddToList.svelte
42 lines (35 loc) · 1.05 KB
/
_AddToList.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<div>
<div class="status">
<pre style="display: inline-block;">Selected:</pre>
<Set style="display: inline-block;" bind:chips={selected}>
{#snippet chip(chip)}
<Chip {chip}>
<Text tabindex={0}>{chip}</Text>
<TrailingAction icon$class="material-icons">cancel</TrailingAction>
</Chip>
{/snippet}
</Set>
</div>
<Autocomplete
bind:this={selector}
options={available}
label="Fruit"
showMenuWithNoInput
onSMUIAutocompleteSelected={handleSelection}
/>
</div>
<script lang="ts">
import Autocomplete from '@smui-extra/autocomplete';
import Chip, { Set, TrailingAction, Text } from '@smui/chips';
let fruits = ['Apple', 'Orange', 'Banana', 'Mango'];
let selected: string[] = $state([]);
const available = $derived(
fruits.filter((value) => !selected.includes(value)),
);
let selector: Autocomplete;
function handleSelection(event: CustomEvent<string>) {
// Don't actually select the item.
event.preventDefault();
selected.push(event.detail);
}
</script>