From 68d9804109c607ff25c7624db3372a97da32772e Mon Sep 17 00:00:00 2001
From: Roman Hrynevych <82209198+romanhrynevych@users.noreply.github.com>
Date: Thu, 22 Aug 2024 10:17:56 +0300
Subject: [PATCH] docs: add `TagsInput` form example (#725)

---
 apps/www/__registry__/index.ts                | 14 +++++
 .../src/content/docs/components/tags-input.md |  4 ++
 .../default/example/TagsInputFormDemo.vue     | 62 +++++++++++++++++++
 .../new-york/example/TagsInputFormDemo.vue    | 62 +++++++++++++++++++
 4 files changed, 142 insertions(+)
 create mode 100644 apps/www/src/lib/registry/default/example/TagsInputFormDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/TagsInputFormDemo.vue

diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index 19a64516..85383e9a 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -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",
diff --git a/apps/www/src/content/docs/components/tags-input.md b/apps/www/src/content/docs/components/tags-input.md
index 97071831..f5d7468c 100644
--- a/apps/www/src/content/docs/components/tags-input.md
+++ b/apps/www/src/content/docs/components/tags-input.md
@@ -18,3 +18,7 @@ npx shadcn-vue@latest add tags-input
 ### Tags with Combobox
 
 <ComponentPreview name="TagsInputComboboxDemo" />
+
+### Form
+
+<ComponentPreview name="TagsInputFormDemo" />
diff --git a/apps/www/src/lib/registry/default/example/TagsInputFormDemo.vue b/apps/www/src/lib/registry/default/example/TagsInputFormDemo.vue
new file mode 100644
index 00000000..88766242
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/TagsInputFormDemo.vue
@@ -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>
diff --git a/apps/www/src/lib/registry/new-york/example/TagsInputFormDemo.vue b/apps/www/src/lib/registry/new-york/example/TagsInputFormDemo.vue
new file mode 100644
index 00000000..3d894e5d
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/TagsInputFormDemo.vue
@@ -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>