blob: af1bf4e8b017535e1a4e4a49ed83db8a94c4e999 (
plain) (
blame)
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
46
47
|
<script>
import Dropdown from "$shared/components/dropdown.svelte";
import {generate_random_hex_color} from "$shared/lib/colors";
let entries = [];
let dropdown;
for (let i = 1; i < 20; i++) {
entries.push({
id: crypto.randomUUID(),
name: "Option " + i,
selected: false,
color: generate_random_hex_color(true)
});
}
function on_create({detail}) {
const copy = entries;
const entry = {id: crypto.randomUUID(), name: detail.name};
copy.push(entry);
entries = copy;
console.log("Created", entry);
dropdown.select_entry(entry.id);
}
function on_select({detail}) {
console.log(detail);
}
</script>
<main class="grid gap-y-lg padding-md">
<div class="row">
<label for="dropdown">Choose an entry</label>
<Dropdown id="dropdown"
name="dropdown"
placeholder="Search or create"
maxlength="50"
creatable="true"
multiple="false"
{entries}
bind:this={dropdown}
on:create={on_create}
on:select={on_select}
/>
</div>
</main>
|
