<script lang="ts">
import {
Field,
Select,
File,
Option,
Errors,
faivform,
} from "@tuentyfaiv/svelte-form";
import type {
FieldsSchema,
OptionItem,
SelectOption,
} from "@tuentyfaiv/svelte-form";
const schema = {
username: {
type: "string",
required: true,
},
email: {
type: "string",
required: true,
},
avatar: "file",
details: {
type: "string",
required: true,
max: 500,
},
permissions: {
type: "array",
required: true,
min: 2,
item: {
type: "string",
required: true,
},
},
categories: {
type: "array",
required: true,
min: 3,
item: {
type: "string",
required: true,
},
},
} satisfies FieldsSchema;
faivform({ fields: schema });
const permissions: SelectOption[] = [
{ value: "read", label: "Read" },
{ value: "write", label: "Write" },
{ value: "delete", label: "Delete" },
];
const categories: OptionItem[] = [
{ value: "news", label: "News" },
{ value: "sports", label: "Sports" },
{ value: "technology", label: "Technology" },
{ value: "entertainment", label: "Entertainment" },
{ value: "lifestyle", label: "Lifestyle" },
];
</script>
<Field label="Username:" name="username">
<svelte:fragment slot="error">
<small>Username is required</small>
</svelte:fragment>
</Field>
<Field label="Email:" name="email" type="email">
<svelte:fragment slot="error">
<small>Email is required</small>
</svelte:fragment>
</Field>
<File name="avatar">
<svelte:fragment slot="error">
<small>Avatar is required</small>
</svelte:fragment>
</File>
<Field label="Details:" name="details" type="textarea">
<svelte:fragment slot="error">
<small>Details is required</small>
</svelte:fragment>
</Field>
<Select
label="Permissions:"
name="permissions"
options={permissions}
multiple
>
<svelte:fragment slot="error">
<small>Choose at least 2 permission</small>
</svelte:fragment>
</Select>
<Option
label="Categories:"
name="categories"
options={categories}
multiple
>
<svelte:fragment slot="error">
<small>Choose at least 3 categories</small>
</svelte:fragment>
</Option>
<Errors />