Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: add TagsInput form example (#725)

Browse Source
This commit is contained in:
Roman Hrynevych 2024-08-22 10:17:56 +03:00 committed by GitHub
parent 1a1dd4a611
commit 68d9804109
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 142 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
apps/www/__registry__/index.ts
View File

@ -1067,6 +1067,13 @@ export const Index = {
component: () => import("../src/lib/registry/default/example/TagsInputDemo.vue").then((m) => m.default),
files: ["../src/lib/registry/default/example/TagsInputDemo.vue"],
},
"TagsInputFormDemo": {
name: "TagsInputFormDemo",
type: "components:example",
registryDependencies: ["tags-input","button","form","toast"],
component: () => import("../src/lib/registry/default/example/TagsInputFormDemo.vue").then((m) => m.default),
files: ["../src/lib/registry/default/example/TagsInputFormDemo.vue"],
},
"TextareaDemo": {
name: "TextareaDemo",
type: "components:example",
@ -2545,6 +2552,13 @@ export const Index = {
component: () => import("../src/lib/registry/new-york/example/TagsInputDemo.vue").then((m) => m.default),
files: ["../src/lib/registry/new-york/example/TagsInputDemo.vue"],
},
"TagsInputFormDemo": {
name: "TagsInputFormDemo",
type: "components:example",
registryDependencies: ["tags-input","button","form","toast"],
component: () => import("../src/lib/registry/new-york/example/TagsInputFormDemo.vue").then((m) => m.default),
files: ["../src/lib/registry/new-york/example/TagsInputFormDemo.vue"],
},
"TextareaDemo": {
name: "TextareaDemo",
type: "components:example",

4
apps/www/src/content/docs/components/tags-input.md
View File

@ -18,3 +18,7 @@ npx shadcn-vue@latest add tags-input
### Tags with Combobox
<ComponentPreview name="TagsInputComboboxDemo" />
### Form
<ComponentPreview name="TagsInputFormDemo" />

62
apps/www/src/lib/registry/default/example/TagsInputFormDemo.vue Normal file
View File

@ -0,0 +1,62 @@
<script setup lang="ts">
import { h, ref } from 'vue'
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
import { z } from 'zod'
import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/default/ui/tags-input'
import { Button } from '@/lib/registry/default/ui/button'
import {
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
} from '@/lib/registry/default/ui/form'
import { toast } from '@/lib/registry/default/ui/toast'
const formSchema = toTypedSchema(z.object({
fruits: z.array(z.string()).min(1).max(3),
}))
const { handleSubmit } = useForm({
validationSchema: formSchema,
initialValues: {
fruits: ['Apple', 'Banana'],
},
})
const onSubmit = handleSubmit((values) => {
toast({
title: 'You submitted the following values:',
description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
})
})
</script>
<template>
<form class="w-2/3 space-y-6" @submit="onSubmit">
<FormField v-slot="{ value }" name="fruits">
<FormItem>
<FormLabel>Fruits</FormLabel>
<FormControl>
<TagsInput :model-value="value">
<TagsInputItem v-for="item in value" :key="item" :value="item">
<TagsInputItemText />
<TagsInputItemDelete />
</TagsInputItem>
<TagsInputInput placeholder="Fruits..." />
</TagsInput>
</FormControl>
<FormDescription>
Select your favorite fruits.
</FormDescription>
<FormMessage />
</FormItem>
</FormField>
<Button type="submit">
Submit
</Button>
</form>
</template>

62
apps/www/src/lib/registry/new-york/example/TagsInputFormDemo.vue Normal file
View File

@ -0,0 +1,62 @@
<script setup lang="ts">
import { h, ref } from 'vue'
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
import { z } from 'zod'
import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/new-york/ui/tags-input'
import { Button } from '@/lib/registry/new-york/ui/button'
import {
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
} from '@/lib/registry/new-york/ui/form'
import { toast } from '@/lib/registry/new-york/ui/toast'
const formSchema = toTypedSchema(z.object({
fruits: z.array(z.string()).min(1).max(3),
}))
const { handleSubmit } = useForm({
validationSchema: formSchema,
initialValues: {
fruits: ['Apple', 'Banana'],
},
})
const onSubmit = handleSubmit((values) => {
toast({
title: 'You submitted the following values:',
description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),
})
})
</script>
<template>
<form class="w-2/3 space-y-6" @submit="onSubmit">
<FormField v-slot="{ value }" name="fruits">
<FormItem>
<FormLabel>Fruits</FormLabel>
<FormControl>
<TagsInput :model-value="value">
<TagsInputItem v-for="item in value" :key="item" :value="item">
<TagsInputItemText />
<TagsInputItemDelete />
</TagsInputItem>
<TagsInputInput placeholder="Fruits..." />
</TagsInput>
</FormControl>
<FormDescription>
Select your favorite fruits.
</FormDescription>
<FormMessage />
</FormItem>
</FormField>
<Button type="submit">
Submit
</Button>
</form>
</template>