From 9b75dcf9d2d8f778d1dc5f76e812d8127953857c Mon Sep 17 00:00:00 2001
From: Sadegh Barati <sadeghbaratiwork@gmail.com>
Date: Mon, 9 Oct 2023 16:05:49 +0330
Subject: [PATCH] docs: add `@formkit/auto-animate` example in form.md (#108)

* fix: typo for injection key

* 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 +++++++++++++++++++
 .../lib/registry/default/ui/form/FormItem.vue |  4 +-
 .../registry/default/ui/form/useFormField.ts  |  4 +-
 .../new-york/example/InputFormAutoAnimate.vue | 49 +++++++++++++++++++
 .../registry/new-york/ui/form/FormItem.vue    |  4 +-
 .../registry/new-york/ui/form/useFormField.ts |  4 +-
 pnpm-lock.yaml                                |  9 +++-
 10 files changed, 123 insertions(+), 10 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/default/ui/form/FormItem.vue b/apps/www/src/lib/registry/default/ui/form/FormItem.vue
index 5618d73c..6bccf027 100644
--- a/apps/www/src/lib/registry/default/ui/form/FormItem.vue
+++ b/apps/www/src/lib/registry/default/ui/form/FormItem.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { type InjectionKey } from 'vue'
 
-export const FORMI_TEM_INJECTION_KEY
+export const FORM_ITEM_INJECTION_KEY
   = Symbol() as InjectionKey<string>
 </script>
 
@@ -15,7 +15,7 @@ defineOptions({
 })
 
 const id = useId()
-provide(FORMI_TEM_INJECTION_KEY, id)
+provide(FORM_ITEM_INJECTION_KEY, id)
 
 const { class: className, ...rest } = useAttrs()
 </script>
diff --git a/apps/www/src/lib/registry/default/ui/form/useFormField.ts b/apps/www/src/lib/registry/default/ui/form/useFormField.ts
index 06b87fa9..73eeee3e 100644
--- a/apps/www/src/lib/registry/default/ui/form/useFormField.ts
+++ b/apps/www/src/lib/registry/default/ui/form/useFormField.ts
@@ -1,10 +1,10 @@
 import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'
 import { inject } from 'vue'
-import { FORMI_TEM_INJECTION_KEY } from './FormItem.vue'
+import { FORM_ITEM_INJECTION_KEY } from './FormItem.vue'
 
 export function useFormField() {
   const fieldContext = inject(FieldContextKey)
-  const fieldItemContext = inject(FORMI_TEM_INJECTION_KEY)
+  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)
 
   const fieldState = {
     valid: useIsFieldValid(),
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/apps/www/src/lib/registry/new-york/ui/form/FormItem.vue b/apps/www/src/lib/registry/new-york/ui/form/FormItem.vue
index 8b5f94ed..2e5feaf1 100644
--- a/apps/www/src/lib/registry/new-york/ui/form/FormItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/form/FormItem.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { type InjectionKey } from 'vue'
 
-export const FORMI_TEM_INJECTION_KEY
+export const FORM_ITEM_INJECTION_KEY
   = Symbol() as InjectionKey<string>
 </script>
 
@@ -11,7 +11,7 @@ import { useId } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
 const id = useId()
-provide(FORMI_TEM_INJECTION_KEY, id)
+provide(FORM_ITEM_INJECTION_KEY, id)
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/ui/form/useFormField.ts b/apps/www/src/lib/registry/new-york/ui/form/useFormField.ts
index 06b87fa9..73eeee3e 100644
--- a/apps/www/src/lib/registry/new-york/ui/form/useFormField.ts
+++ b/apps/www/src/lib/registry/new-york/ui/form/useFormField.ts
@@ -1,10 +1,10 @@
 import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'
 import { inject } from 'vue'
-import { FORMI_TEM_INJECTION_KEY } from './FormItem.vue'
+import { FORM_ITEM_INJECTION_KEY } from './FormItem.vue'
 
 export function useFormField() {
   const fieldContext = inject(FieldContextKey)
-  const fieldItemContext = inject(FORMI_TEM_INJECTION_KEY)
+  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)
 
   const fieldState = {
     valid: useIsFieldValid(),
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==}