blob: 9118a546e33e822afed626871228ac91bfde90b7 (
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
<script lang="ts">
import { TextArea, Input, Combobox } from "$lib/components";
import { DatabaseIcon } from "$lib/components/icons";
import LL from "$lib/i18n/i18n-svelte";
let value;
let i = 0;
let options = [];
let tempOptions = [];
while (i < 101) {
tempOptions.push({
id: crypto.randomUUID(),
name: "Option " + i,
});
options = tempOptions;
i++;
}
async function add({ name }) {
const copy = options;
copy.push({
id: crypto.randomUUID(),
name: name,
});
options = copy;
}
</script>
<section>
<h2>Combobox</h2>
<Combobox
{options}
label="Wiii"
multiple
createable
on_create_async={add}
/>
</section>
<section>
<h2>Default</h2>
<Input label="Input me" placeholder="Hello" bind:value />
</section>
<section>
<h2>With icon</h2>
<Input label="Input me" placeholder="Hello" icon={DatabaseIcon} bind:value />
</section>
<section>
<h2>With corner hint</h2>
<Input label="Input me ->" placeholder="Hello" cornerHint="Hint hint" bind:value />
</section>
<section>
<h2>Disabled</h2>
<Input label="No" placeholder="Sorry" disabled bind:value />
</section>
<section>
<h2>Errored</h2>
<Input label="No" placeholder="Sorry" errorText="That's not right" bind:value icon={DatabaseIcon} />
</section>
<section>
<h2>Help</h2>
<Input label="Go ahead" placeholder="Write here" helpText="Write above" bind:value />
</section>
<section>
<h2>Addon</h2>
<Input label="Go ahead" placeholder="Write here" bind:value helpText="Write above" addon="To the right" />
</section>
<section>
<h2>Textarea</h2>
<TextArea bind:value errorText="oh no" label="Hi" />
</section>
|
