alice.pds.demo.boltless.dev
This repository has no description
1<script module lang="ts">
2 import { defineMeta } from "@storybook/addon-svelte-csf";
3 import Select from "./Select.svelte";
4
5 const { Story } = defineMeta({
6 title: "UI/Select",
7 component: Select,
8 tags: ["autodocs"],
9 argTypes: {
10 error: { control: "boolean" },
11 disabled: { control: "boolean" }
12 },
13 args: {
14 error: false,
15 disabled: false
16 }
17 });
18</script>
19
20<!-- Select's content comes through its `children` snippet, provided here as Story slot content. -->
21<Story name="Default">
22 <option value="" disabled selected>Select</option>
23 <option value="one">One</option>
24 <option value="two">Two</option>
25 <option value="three">Three</option>
26</Story>
27
28<Story name="Filled" args={{ value: "two" }}>
29 <option value="one">One</option>
30 <option value="two">Two</option>
31 <option value="three">Three</option>
32</Story>
33
34<Story name="Error" args={{ error: true, value: "two" }}>
35 <option value="one">One</option>
36 <option value="two">Two</option>
37 <option value="three">Three</option>
38</Story>
39
40<Story name="Disabled" args={{ disabled: true, value: "one" }}>
41 <option value="one">One</option>
42 <option value="two">Two</option>
43 <option value="three">Three</option>
44</Story>
45
46<Story name="States">
47 <div class="flex flex-col gap-3">
48 <Select>
49 <option value="" disabled selected>Select</option>
50 <option value="one">One</option>
51 </Select>
52 <Select value="one">
53 <option value="one">One</option>
54 <option value="two">Two</option>
55 </Select>
56 <Select error value="one">
57 <option value="one">One</option>
58 <option value="two">Two</option>
59 </Select>
60 <Select disabled value="one">
61 <option value="one">One</option>
62 <option value="two">Two</option>
63 </Select>
64 </div>
65</Story>