docs: add v-model.lazy form example

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',

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" />

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>

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>