From b40321e3d93cbec1c4ff6c0d3f2e39b5e920d28f Mon Sep 17 00:00:00 2001
From: Sadegh Barati <sadeghbaratiwork@gmail.com>
Date: Tue, 19 Dec 2023 18:23:05 +0330
Subject: [PATCH] docs: fix `vee-validate` checkbox and radio-group examples
 (#213)

* docs: fix checkbox and radio form examples

add type="checkbox|radio" and name in FormField

* docs: add `vee-validate` documentation link for checkbox and radio inputs

* chore: update `vee-validate` deps
---
 apps/www/package.json                         |  4 +--
 .../src/content/docs/components/checkbox.md   |  2 ++
 .../content/docs/components/radio-group.md    |  2 ++
 .../default/example/CheckboxFormMultiple.vue  | 10 ++----
 .../default/example/CheckboxFormSingle.vue    |  2 +-
 .../default/example/RadioGroupForm.vue        |  2 +-
 .../new-york/example/CheckboxFormMultiple.vue | 10 ++----
 .../new-york/example/CheckboxFormSingle.vue   |  2 +-
 .../new-york/example/RadioGroupForm.vue       |  2 +-
 pnpm-lock.yaml                                | 36 +++++++++----------
 10 files changed, 34 insertions(+), 38 deletions(-)

diff --git a/apps/www/package.json b/apps/www/package.json
index 8846267f..a98c3cc0 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -21,7 +21,7 @@
     "@tanstack/vue-table": "^8.10.7",
     "@unovis/ts": "^1.2.3",
     "@unovis/vue": "1.3.0-beta.3",
-    "@vee-validate/zod": "^4.11.8",
+    "@vee-validate/zod": "^4.12.3",
     "@vueuse/core": "^10.5.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
@@ -31,7 +31,7 @@
     "radix-vue": "^1.2.3",
     "tailwindcss-animate": "^1.0.7",
     "v-calendar": "^3.1.2",
-    "vee-validate": "4.11.8",
+    "vee-validate": "4.12.3",
     "vue": "^3.3.7",
     "vue-wrap-balancer": "^1.1.3",
     "zod": "^3.22.4"
diff --git a/apps/www/src/content/docs/components/checkbox.md b/apps/www/src/content/docs/components/checkbox.md
index 07e24bfc..07697e6e 100644
--- a/apps/www/src/content/docs/components/checkbox.md
+++ b/apps/www/src/content/docs/components/checkbox.md
@@ -40,6 +40,8 @@ import { Checkbox } from '@/components/ui/checkbox'
 
 ### Form
 
+Please first read `vee-validate` section for [Checkbox and Radio Inputs](https://vee-validate.logaretm.com/v4/examples/checkboxes-and-radio/)
+
 <ComponentPreview name="CheckboxFormSingle" />
 
 <ComponentPreview name="CheckboxFormMultiple" />
diff --git a/apps/www/src/content/docs/components/radio-group.md b/apps/www/src/content/docs/components/radio-group.md
index d7db0bc9..9dbbabbf 100644
--- a/apps/www/src/content/docs/components/radio-group.md
+++ b/apps/www/src/content/docs/components/radio-group.md
@@ -40,4 +40,6 @@ import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
 
 ### Form
 
+Please first read `vee-validate` section for [Checkbox and Radio Inputs](https://vee-validate.logaretm.com/v4/examples/checkboxes-and-radio/)
+
 <ComponentPreview name="RadioGroupForm" />
diff --git a/apps/www/src/lib/registry/default/example/CheckboxFormMultiple.vue b/apps/www/src/lib/registry/default/example/CheckboxFormMultiple.vue
index cba68c1d..641c719b 100644
--- a/apps/www/src/lib/registry/default/example/CheckboxFormMultiple.vue
+++ b/apps/www/src/lib/registry/default/example/CheckboxFormMultiple.vue
@@ -77,16 +77,12 @@ const onSubmit = handleSubmit((values) => {
           </FormDescription>
         </div>
 
-        <FormField v-for="item in items" v-slot="{ value, handleChange }" :key="item.id" name="items">
-          <FormItem :key="item.id" class="flex flex-row items-start space-x-3 space-y-0">
+        <FormField v-for="item in items" v-slot="{ value, handleChange }" :key="item.id" type="checkbox" :value="item.id" :unchecked-value="false" name="items">
+          <FormItem class="flex flex-row items-start space-x-3 space-y-0">
             <FormControl>
               <Checkbox
                 :checked="value.includes(item.id)"
-                @update:checked="(checked) => {
-                  if (Array.isArray(value)) {
-                    handleChange(checked ? [...value, item.id] : value.filter(id => id !== item.id))
-                  }
-                }"
+                @update:checked="handleChange"
               />
             </FormControl>
             <FormLabel class="font-normal">
diff --git a/apps/www/src/lib/registry/default/example/CheckboxFormSingle.vue b/apps/www/src/lib/registry/default/example/CheckboxFormSingle.vue
index 4cb8453a..43414195 100644
--- a/apps/www/src/lib/registry/default/example/CheckboxFormSingle.vue
+++ b/apps/www/src/lib/registry/default/example/CheckboxFormSingle.vue
@@ -37,7 +37,7 @@ const onSubmit = handleSubmit((values) => {
 
 <template>
   <form class="space-y-6" @submit="onSubmit">
-    <FormField v-slot="{ value, handleChange }" name="mobile">
+    <FormField v-slot="{ value, handleChange }" type="checkbox" name="mobile">
       <FormItem class="flex flex-row items-start gap-x-3 space-y-0 rounded-md border p-4">
         <FormControl>
           <Checkbox :checked="value" @update:checked="handleChange" />
diff --git a/apps/www/src/lib/registry/default/example/RadioGroupForm.vue b/apps/www/src/lib/registry/default/example/RadioGroupForm.vue
index fca75855..fb8eed47 100644
--- a/apps/www/src/lib/registry/default/example/RadioGroupForm.vue
+++ b/apps/www/src/lib/registry/default/example/RadioGroupForm.vue
@@ -35,7 +35,7 @@ const onSubmit = handleSubmit((values) => {
 
 <template>
   <form class="w-2/3 space-y-6" @submit="onSubmit">
-    <FormField v-slot="{ componentField }" name="type">
+    <FormField v-slot="{ componentField }" type="radio" name="type">
       <FormItem class="space-y-3">
         <FormLabel>Notify me about...</FormLabel>
 
diff --git a/apps/www/src/lib/registry/new-york/example/CheckboxFormMultiple.vue b/apps/www/src/lib/registry/new-york/example/CheckboxFormMultiple.vue
index 41a55c43..1debb310 100644
--- a/apps/www/src/lib/registry/new-york/example/CheckboxFormMultiple.vue
+++ b/apps/www/src/lib/registry/new-york/example/CheckboxFormMultiple.vue
@@ -77,16 +77,12 @@ const onSubmit = handleSubmit((values) => {
           </FormDescription>
         </div>
 
-        <FormField v-for="item in items" v-slot="{ value, handleChange }" :key="item.id" name="items">
-          <FormItem :key="item.id" class="flex flex-row items-start space-x-3 space-y-0">
+        <FormField v-for="item in items" v-slot="{ value, handleChange }" :key="item.id" type="checkbox" :value="item.id" :unchecked-value="false" name="items">
+          <FormItem class="flex flex-row items-start space-x-3 space-y-0">
             <FormControl>
               <Checkbox
                 :checked="value.includes(item.id)"
-                @update:checked="(checked) => {
-                  if (Array.isArray(value)) {
-                    handleChange(checked ? [...value, item.id] : value.filter(id => id !== item.id))
-                  }
-                }"
+                @update:checked="handleChange"
               />
             </FormControl>
             <FormLabel class="font-normal">
diff --git a/apps/www/src/lib/registry/new-york/example/CheckboxFormSingle.vue b/apps/www/src/lib/registry/new-york/example/CheckboxFormSingle.vue
index b1699959..71e0ea55 100644
--- a/apps/www/src/lib/registry/new-york/example/CheckboxFormSingle.vue
+++ b/apps/www/src/lib/registry/new-york/example/CheckboxFormSingle.vue
@@ -37,7 +37,7 @@ const onSubmit = handleSubmit((values) => {
 
 <template>
   <form class="space-y-6" @submit="onSubmit">
-    <FormField v-slot="{ value, handleChange }" name="mobile">
+    <FormField v-slot="{ value, handleChange }" type="checkbox" name="mobile">
       <FormItem class="flex flex-row items-start gap-x-3 space-y-0 rounded-md border p-4 shadow">
         <FormControl>
           <Checkbox :checked="value" @update:checked="handleChange" />
diff --git a/apps/www/src/lib/registry/new-york/example/RadioGroupForm.vue b/apps/www/src/lib/registry/new-york/example/RadioGroupForm.vue
index a0e797e1..542d19c0 100644
--- a/apps/www/src/lib/registry/new-york/example/RadioGroupForm.vue
+++ b/apps/www/src/lib/registry/new-york/example/RadioGroupForm.vue
@@ -35,7 +35,7 @@ const onSubmit = handleSubmit((values) => {
 
 <template>
   <form class="w-2/3 space-y-6" @submit="onSubmit">
-    <FormField v-slot="{ componentField }" name="type">
+    <FormField v-slot="{ componentField }" type="radio" name="type">
       <FormItem class="space-y-3">
         <FormLabel>Notify me about...</FormLabel>
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0b4b9b94..29b79f36 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -66,8 +66,8 @@ importers:
         specifier: 1.3.0-beta.3
         version: 1.3.0-beta.3(@unovis/ts@1.2.3)(vue@3.3.7)
       '@vee-validate/zod':
-        specifier: ^4.11.8
-        version: 4.11.8(vue@3.3.7)
+        specifier: ^4.12.3
+        version: 4.12.3(vue@3.3.7)
       '@vueuse/core':
         specifier: ^10.5.0
         version: 10.5.0(vue@3.3.7)
@@ -96,8 +96,8 @@ importers:
         specifier: ^3.1.2
         version: 3.1.2(@popperjs/core@2.11.8)(vue@3.3.7)
       vee-validate:
-        specifier: 4.11.8
-        version: 4.11.8(vue@3.3.7)
+        specifier: 4.12.3
+        version: 4.12.3(vue@3.3.7)
       vue:
         specifier: ^3.3.7
         version: 3.3.7(typescript@5.2.2)
@@ -4143,11 +4143,11 @@ packages:
       vue: 3.3.7(typescript@5.2.2)
     dev: false
 
-  /@vee-validate/zod@4.11.8(vue@3.3.7):
-    resolution: {integrity: sha512-qAyqDEigklMf669ZqIw9t95g0Ipzu9rMYUqcZpANlCvyaIAeBlJGcsv+2CewlqgwuC6BL9EAURLJ8Ux5WlBgXg==}
+  /@vee-validate/zod@4.12.3(vue@3.3.7):
+    resolution: {integrity: sha512-9qXi433ISGgneBL5D/YpVvcVRqY3EvDnoTnTD6Y16QeBulcS4u3zHrPlJ0K0iKtAUKnfsTzUppud10GWwkm1QQ==}
     dependencies:
-      type-fest: 4.3.2
-      vee-validate: 4.11.8(vue@3.3.7)
+      type-fest: 4.8.3
+      vee-validate: 4.12.3(vue@3.3.7)
       zod: 3.22.4
     transitivePeerDependencies:
       - vue
@@ -4487,13 +4487,8 @@ packages:
       '@vue/compiler-dom': 3.3.9
       '@vue/shared': 3.3.9
 
-  /@vue/devtools-api@6.5.0:
-    resolution: {integrity: sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==}
-    dev: false
-
   /@vue/devtools-api@6.5.1:
     resolution: {integrity: sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA==}
-    dev: true
 
   /@vue/language-core@1.8.22(typescript@5.2.2):
     resolution: {integrity: sha512-bsMoJzCrXZqGsxawtUea1cLjUT9dZnDsy5TuZ+l1fxRMzUGQUG9+Ypq4w//CqpWmrx7nIAJpw2JVF/t258miRw==}
@@ -12635,6 +12630,11 @@ packages:
     resolution: {integrity: sha512-VpwuOgnTsQUUWi0id8Hl4/xiQ+OoaeJGe8dnFjzubJYe/lOc2/d1Qx/d3FqWR0FlpOG/cvukAXfB12A49Y4iiA==}
     engines: {node: '>=16'}
 
+  /type-fest@4.8.3:
+    resolution: {integrity: sha512-//BaTm14Q/gHBn09xlnKNqfI8t6bmdzx2DXYfPBNofN0WUybCEUDcbCWcTa0oF09lzLjZgPphXAsvRiMK0V6Bw==}
+    engines: {node: '>=16'}
+    dev: false
+
   /typedarray@0.0.6:
     resolution: {integrity: sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==}
     dev: false
@@ -13113,13 +13113,13 @@ packages:
       builtins: 5.0.1
     dev: true
 
-  /vee-validate@4.11.8(vue@3.3.7):
-    resolution: {integrity: sha512-ZuVpw0axWYBM3aVTD/bm94hcWHumqeUgNjptOqfBT0gyqyHaGYCrm0tSD/0bygEbWUDwEPJOQaEKaUGM82j8TQ==}
+  /vee-validate@4.12.3(vue@3.3.7):
+    resolution: {integrity: sha512-+ux21pFm2beGK21Q8LFDJdYqCu/7yd0HDIGolNvr7GjjlBTrK0JXm2y+h01jssyIlT1/+sSTNwAEqlSs0Nz0QA==}
     peerDependencies:
-      vue: ^3.3.4
+      vue: ^3.3.11
     dependencies:
-      '@vue/devtools-api': 6.5.0
-      type-fest: 4.3.2
+      '@vue/devtools-api': 6.5.1
+      type-fest: 4.8.3
       vue: 3.3.7(typescript@5.2.2)
     dev: false