/
_AddToList.svelte
45 lines (36 loc) · 1.12 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
43
44
45
<div>
<div class="status">
<pre style="display: inline-block;">Selected:</pre>
<Set style="display: inline-block;" bind:chips={selected} let:chip>
<Chip {chip}>
<Text tabindex={0}>{chip}</Text>
<TrailingAction icon$class="material-icons">cancel</TrailingAction>
</Chip>
</Set>
</div>
<Autocomplete
bind:this={selector}
options={available}
bind:value
label="Fruit"
on:SMUIAutocomplete:selected={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[] = [];
$: available = fruits.filter((value) => !selected.includes(value));
let selector: Autocomplete;
let value = '';
function handleSelection(event: CustomEvent<string>) {
// Don't actually select the item.
event.preventDefault();
// You could also set value back to '' here.
selected.push(event.detail);
// Make sure the chips get updated.
selected = selected;
selector.focus();
}
</script>