From eb0cd6562679a9ba79cf1fcc94983fb4593f63bb Mon Sep 17 00:00:00 2001
From: sadeghbarati <sadeghbaratiwork@gmail.com>
Date: Sun, 12 Nov 2023 15:28:49 +0330
Subject: [PATCH] docs: add v-model.lazy form example

---
 apps/www/__registry__/index.ts                |  7 +++
 apps/www/src/content/docs/components/input.md |  4 ++
 .../default/example/InputLazyForm.vue         | 60 +++++++++++++++++++
 .../new-york/example/InputLazyForm.vue        | 60 +++++++++++++++++++
 4 files changed, 131 insertions(+)
 create mode 100644 apps/www/src/lib/registry/default/example/InputLazyForm.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/InputLazyForm.vue

diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index b24d3ade..f5a5db3d 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -373,6 +373,13 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/InputForm.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/InputForm.vue'],
     },
+    InputLazyForm: {
+      name: 'InputLazyForm',
+      type: 'components:example',
+      registryDependencies: ['button', 'form', 'input', 'toast'],
+      component: () => import('../src/lib/registry/default/example/InputLazyForm.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/InputLazyForm.vue'],
+    },
     InputFormAutoAnimate: {
       name: 'InputFormAutoAnimate',
       type: 'components:example',
diff --git a/apps/www/src/content/docs/components/input.md b/apps/www/src/content/docs/components/input.md
index d1614790..5797667d 100644
--- a/apps/www/src/content/docs/components/input.md
+++ b/apps/www/src/content/docs/components/input.md
@@ -66,3 +66,7 @@ import { Input } from '@/components/ui/input'
 ### Form
 
 <ComponentPreview name="InputForm" />
+
+#### v-model.lazy binding
+
+<ComponentPreview name="InputLazyForm" />
diff --git a/apps/www/src/lib/registry/default/example/InputLazyForm.vue b/apps/www/src/lib/registry/default/example/InputLazyForm.vue
new file mode 100644
index 00000000..3c5677e9
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/InputLazyForm.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { h } from 'vue'
+import { configure, useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+
+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'
+import { toast } from '@/lib/registry/default/ui/toast'
+
+configure({
+  validateOnChange: true,
+  validateOnBlur: false,
+  validateOnInput: false,
+  validateOnModelUpdate: false,
+})
+
+const formSchema = toTypedSchema(z.object({
+  username: z.string().min(2).max(50),
+}))
+
+const { handleSubmit } = useForm({
+  validationSchema: formSchema,
+})
+
+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="{ componentField }" name="username">
+      <FormItem>
+        <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/InputLazyForm.vue b/apps/www/src/lib/registry/new-york/example/InputLazyForm.vue
new file mode 100644
index 00000000..190354bf
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/InputLazyForm.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { h } from 'vue'
+import { configure, useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+
+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'
+import { toast } from '@/lib/registry/new-york/ui/toast/use-toast'
+
+configure({
+  validateOnChange: true,
+  validateOnBlur: false,
+  validateOnInput: false,
+  validateOnModelUpdate: false,
+})
+
+const formSchema = toTypedSchema(z.object({
+  username: z.string().min(2).max(50),
+}))
+
+const { handleSubmit } = useForm({
+  validationSchema: formSchema,
+})
+
+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="{ componentField }" name="username">
+      <FormItem>
+        <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>