From 8cae5b70b5b32e74179789c53ab14807ea8f2592 Mon Sep 17 00:00:00 2001
From: Sadegh Barati <sadeghbaratiwork@gmail.com>
Date: Tue, 19 Dec 2023 18:03:46 +0330
Subject: [PATCH] docs: fix checkbox and radio form examples

add type="checkbox|radio" and name in FormField
---
 .../registry/default/example/CheckboxFormMultiple.vue  | 10 +++-------
 .../registry/default/example/CheckboxFormSingle.vue    |  2 +-
 .../lib/registry/default/example/RadioGroupForm.vue    |  2 +-
 .../registry/new-york/example/CheckboxFormMultiple.vue | 10 +++-------
 .../registry/new-york/example/CheckboxFormSingle.vue   |  2 +-
 .../lib/registry/new-york/example/RadioGroupForm.vue   |  2 +-
 6 files changed, 10 insertions(+), 18 deletions(-)

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>