From e80124e894421500a767f0cc5ecb65295e274b63 Mon Sep 17 00:00:00 2001
From: sadeghbarati <sadeghbaratiwork@gmail.com>
Date: Mon, 27 Nov 2023 23:29:02 -0800
Subject: [PATCH] docs: add more info about `v-model.lazy` in input.md and
 form.md

---
 apps/www/__registry__/index.ts                   |  7 +++++++
 apps/www/src/content/docs/components/form.md     | 13 +++++++++++++
 apps/www/src/content/docs/components/input.md    | 16 ++++++++++++----
 .../registry/default/example/InputLazyDemo.vue   | 16 ++++++++++++++++
 .../registry/new-york/example/InputLazyDemo.vue  | 16 ++++++++++++++++
 5 files changed, 64 insertions(+), 4 deletions(-)
 create mode 100644 apps/www/src/lib/registry/default/example/InputLazyDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/InputLazyDemo.vue

diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index f5a5db3d..263bb7e9 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -401,6 +401,13 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/InputWithLabel.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/InputWithLabel.vue'],
     },
+    InputLazyDemo: {
+      name: 'InputLazyDemo',
+      type: 'components:example',
+      registryDependencies: ['input', 'button'],
+      component: () => import('../src/lib/registry/default/example/InputLazyDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/InputLazyDemo.vue'],
+    },
     LabelDemo: {
       name: 'LabelDemo',
       type: 'components:example',
diff --git a/apps/www/src/content/docs/components/form.md b/apps/www/src/content/docs/components/form.md
index 04cff449..382e5785 100644
--- a/apps/www/src/content/docs/components/form.md
+++ b/apps/www/src/content/docs/components/form.md
@@ -336,3 +336,16 @@ See the following links for more examples on how to use the `vee-validate` featu
 This example shows how to add motion to your forms with [Formkit AutoAnimate](https://auto-animate.formkit.com/)
 
 <ComponentPreview name="InputFormAutoAnimate" />
+
+
+This example show how to use `v-model.lazy`-like in VeeValidate with `validateOnChange`
+
+<Callout class="mt-4">
+
+`v-model` modifiers don't work on custom Vue components
+
+</Callout>
+
+<ComponentPreview name="InputLazyForm" />
+
+
diff --git a/apps/www/src/content/docs/components/input.md b/apps/www/src/content/docs/components/input.md
index 5797667d..a895ca8f 100644
--- a/apps/www/src/content/docs/components/input.md
+++ b/apps/www/src/content/docs/components/input.md
@@ -63,10 +63,18 @@ import { Input } from '@/components/ui/input'
 
 <ComponentPreview name="InputWithButton" class="max-w-xs" />
 
+### Lazy (v-model.lazy)
+
+<Callout class="mt-4">
+
+`v-model` modifiers don't work on custom Vue components,
+
+instead you can use `@change` event on custom Vue component
+
+</Callout>
+
+<ComponentPreview name="InputLazyDemo" class="max-w-xs" />
+
 ### Form
 
 <ComponentPreview name="InputForm" />
-
-#### v-model.lazy binding
-
-<ComponentPreview name="InputLazyForm" />
diff --git a/apps/www/src/lib/registry/default/example/InputLazyDemo.vue b/apps/www/src/lib/registry/default/example/InputLazyDemo.vue
new file mode 100644
index 00000000..0a01db0e
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/InputLazyDemo.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Input } from '@/lib/registry/default/ui/input'
+
+const emailRef = ref('')
+</script>
+
+<template>
+  <div class="w-full">
+    <Input type="email" placeholder="Email" @change="event => emailRef = event.target.value" />
+
+    <div>
+      {{ emailRef }}
+    </div>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/InputLazyDemo.vue b/apps/www/src/lib/registry/new-york/example/InputLazyDemo.vue
new file mode 100644
index 00000000..b566fc58
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/InputLazyDemo.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Input } from '@/lib/registry/new-york/ui/input'
+
+const emailRef = ref('')
+</script>
+
+<template>
+  <div class="w-full">
+    <Input type="email" placeholder="Email" @change="event => emailRef = event.target.value" />
+
+    <div>
+      {{ emailRef }}
+    </div>
+  </div>
+</template>