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

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

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

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

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

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

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>
 

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

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

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>