From cb0dbd61d5f66ab197920780c2e051c3d0138a19 Mon Sep 17 00:00:00 2001
From: sadeghbarati <sadeghbaratiwork@gmail.com>
Date: Mon, 9 Oct 2023 15:36:08 +0330
Subject: [PATCH] docs: add `@formkit/auto-animate` example

---
 apps/www/package.json                         |  1 +
 apps/www/src/content/docs/components/form.md  |  7 +++
 .../examples/forms/components/ProfileForm.vue |  2 +-
 .../default/example/InputFormAutoAnimate.vue  | 49 +++++++++++++++++++
 .../new-york/example/InputFormAutoAnimate.vue | 49 +++++++++++++++++++
 pnpm-lock.yaml                                |  9 +++-
 6 files changed, 115 insertions(+), 2 deletions(-)
 create mode 100644 apps/www/src/lib/registry/default/example/InputFormAutoAnimate.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/InputFormAutoAnimate.vue

diff --git a/apps/www/package.json b/apps/www/package.json
index dc6bb0d0..9a00623b 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -12,6 +12,7 @@
     "build:registry": "tsx ./scripts/build-registry.ts"
   },
   "dependencies": {
+    "@formkit/auto-animate": "^0.8.0",
     "@morev/vue-transitions": "^2.3.6",
     "@radix-icons/vue": "^1.0.0",
     "@tanstack/vue-table": "^8.10.3",
diff --git a/apps/www/src/content/docs/components/form.md b/apps/www/src/content/docs/components/form.md
index 4721788b..a5712001 100644
--- a/apps/www/src/content/docs/components/form.md
+++ b/apps/www/src/content/docs/components/form.md
@@ -329,3 +329,10 @@ See the following links for more examples on how to use the `vee-validate` featu
 - [Switch](/docs/components/switch#form)
 - [Textarea](/docs/components/textarea#form)
 - [Combobox](/docs/components/combobox#form)
+
+
+## Extras
+
+This example shows how to add motion to your forms with [Formkit AutoAnimate](https://auto-animate.formkit.com/)
+
+<ComponentPreview name="InputFormAutoAnimate" />
diff --git a/apps/www/src/examples/forms/components/ProfileForm.vue b/apps/www/src/examples/forms/components/ProfileForm.vue
index a956903b..e53df428 100644
--- a/apps/www/src/examples/forms/components/ProfileForm.vue
+++ b/apps/www/src/examples/forms/components/ProfileForm.vue
@@ -139,7 +139,7 @@ const onSubmit = handleSubmit((values) => {
                 <FormControl>
                   <Input type="url" v-bind="componentField" />
                 </FormControl>
-                <button class="absolute py-2 pe-3 end-0 text-muted-foreground" @click="remove(index)">
+                <button type="button" class="absolute py-2 pe-3 end-0 text-muted-foreground" @click="remove(index)">
                   <Cross1Icon class="w-3" />
                 </button>
               </div>
diff --git a/apps/www/src/lib/registry/default/example/InputFormAutoAnimate.vue b/apps/www/src/lib/registry/default/example/InputFormAutoAnimate.vue
new file mode 100644
index 00000000..d75b37d6
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/InputFormAutoAnimate.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+import { vAutoAnimate } from '@formkit/auto-animate/vue'
+
+import { Button } from '@/lib/registry/default/ui/button'
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/lib/registry/default/ui/form'
+import { Input } from '@/lib/registry/default/ui/input'
+
+const formSchema = toTypedSchema(z.object({
+  username: z.string().min(2).max(50),
+}))
+
+const { handleSubmit } = useForm({
+  validationSchema: formSchema,
+})
+
+const onSubmit = handleSubmit((values) => {
+  console.log('Form submitted!', values)
+})
+</script>
+
+<template>
+  <form class="w-2/3 space-y-6" @submit="onSubmit">
+    <FormField v-slot="{ componentField }" name="username">
+      <FormItem v-auto-animate>
+        <FormLabel>Username</FormLabel>
+        <FormControl>
+          <Input type="text" placeholder="shadcn" v-bind="componentField" />
+        </FormControl>
+        <FormDescription>
+          This is your public display name.
+        </FormDescription>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+    <Button type="submit">
+      Submit
+    </Button>
+  </Form>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/InputFormAutoAnimate.vue b/apps/www/src/lib/registry/new-york/example/InputFormAutoAnimate.vue
new file mode 100644
index 00000000..564bb989
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/InputFormAutoAnimate.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+import { vAutoAnimate } from '@formkit/auto-animate/vue'
+
+import { Button } from '@/lib/registry/new-york/ui/button'
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/lib/registry/new-york/ui/form'
+import { Input } from '@/lib/registry/new-york/ui/input'
+
+const formSchema = toTypedSchema(z.object({
+  username: z.string().min(2).max(50),
+}))
+
+const { isFieldDirty, handleSubmit } = useForm({
+  validationSchema: formSchema,
+})
+
+const onSubmit = handleSubmit((values) => {
+  console.log('Form submitted!', values)
+})
+</script>
+
+<template>
+  <form class="w-2/3 space-y-6" @submit="onSubmit">
+    <FormField v-slot="{ componentField }" name="username" :validate-on-blur="!isFieldDirty">
+      <FormItem v-auto-animate>
+        <FormLabel>Username</FormLabel>
+        <FormControl>
+          <Input type="text" placeholder="shadcn" v-bind="componentField" />
+        </FormControl>
+        <FormDescription>
+          This is your public display name.
+        </FormDescription>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+    <Button type="submit">
+      Submit
+    </Button>
+  </Form>
+</template>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 94b68d98..4c387551 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -50,6 +50,9 @@ importers:
 
   apps/www:
     dependencies:
+      '@formkit/auto-animate':
+        specifier: ^0.8.0
+        version: 0.8.0
       '@morev/vue-transitions':
         specifier: ^2.3.6
         version: 2.3.6(vue@3.3.4)
@@ -1386,6 +1389,10 @@ packages:
       - '@vue/composition-api'
       - vue
 
+  /@formkit/auto-animate@0.8.0:
+    resolution: {integrity: sha512-G8f7489ka0mWyi+1IEZT+xgIwcpWtRMmE2x+IrVoQ+KM1cP6VDj/TbujZjwxdb0P8w8b16/qBfViRmydbYHwMw==}
+    dev: false
+
   /@humanwhocodes/config-array@0.11.11:
     resolution: {integrity: sha512-N2brEuAadi0CcdeMXUkhbZB84eskAc8MEX1By6qEchoVywSgXPIjou4rYsl0V3Hj0ZnuGycGCjdNgockbzeWNA==}
     engines: {node: '>=10.10.0'}
@@ -3534,7 +3541,7 @@ packages:
     dev: true
 
   /concat-map@0.0.1:
-    resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=}
+    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
   /consola@3.2.3:
     resolution: {integrity: sha512-I5qxpzLv+sJhTVEoLYNcTW+bThDCPsit0vLNKShZx6rLtpilNpmmeTPaeqJb9ZE9dV3DGaeby6Vuhrw38WjeyQ==}