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 Search from "$icon/search";
4 import Mail from "$icon/mail";
5 import Input from "./Input.svelte";
6
7 const { Story } = defineMeta({
8 title: "UI/Input",
9 component: Input,
10 tags: ["autodocs"],
11 argTypes: {
12 error: { control: "boolean" },
13 disabled: { control: "boolean" },
14 loading: { control: "boolean" },
15 placeholder: { control: "text" }
16 },
17 args: {
18 error: false,
19 disabled: false,
20 loading: false,
21 placeholder: "Placeholder"
22 }
23 });
24</script>
25
26<Story name="Default" />
27<Story name="Focus" args={{ autofocus: true }} />
28<Story name="Filled" args={{ value: "Filled value" }} />
29<Story name="Error" args={{ error: true, value: "Invalid value" }} />
30<Story name="Disabled" args={{ disabled: true, value: "Can't edit this" }} />
31<Story name="Loading" args={{ loading: true, value: "Checking..." }} />
32<Story name="With left icon" args={{ iconLeft: Search, placeholder: "Search" }} />
33<Story name="With right icon" args={{ iconRight: Mail, placeholder: "you@example.com" }} />