From 7fdf916443215af4dec589cf6363a7f8fae04f58 Mon Sep 17 00:00:00 2001
From: Roman Hrynevych <82209198+romanhrynevych@users.noreply.github.com>
Date: Mon, 13 May 2024 00:50:25 +0300
Subject: [PATCH] refactor: change `setValues` to `setFieldValue` for better
 validation (#547)

---
 apps/www/src/content/docs/components/auto-form.md  |  4 +---
 .../src/examples/forms/components/AccountForm.vue  | 14 ++++----------
 .../lib/registry/default/example/CalendarForm.vue  | 10 +++-------
 .../lib/registry/default/example/ComboboxForm.vue  |  6 ++----
 .../registry/default/example/DatePickerForm.vue    | 10 +++-------
 .../lib/registry/new-york/example/CalendarForm.vue | 10 +++-------
 .../lib/registry/new-york/example/ComboboxForm.vue |  6 ++----
 .../registry/new-york/example/DatePickerForm.vue   | 11 +++--------
 8 files changed, 21 insertions(+), 50 deletions(-)

diff --git a/apps/www/src/content/docs/components/auto-form.md b/apps/www/src/content/docs/components/auto-form.md
index 49913db2..9dd5286f 100644
--- a/apps/www/src/content/docs/components/auto-form.md
+++ b/apps/www/src/content/docs/components/auto-form.md
@@ -414,9 +414,7 @@ const form = useForm({
   validationSchema: toTypedSchema(schema),
 })
 
-form.setValues({
-  username: 'foo'
-})
+form.setFieldValue('username', 'bar')
 </script>
 
 <template>
diff --git a/apps/www/src/examples/forms/components/AccountForm.vue b/apps/www/src/examples/forms/components/AccountForm.vue
index 968e7b28..3366987f 100644
--- a/apps/www/src/examples/forms/components/AccountForm.vue
+++ b/apps/www/src/examples/forms/components/AccountForm.vue
@@ -84,7 +84,7 @@ async function onSubmit(values: any) {
     </p>
   </div>
   <Separator />
-  <Form v-slot="{ setValues }" :validation-schema="accountFormSchema" class="space-y-8" @submit="onSubmit">
+  <Form v-slot="{ setFieldValue }" :validation-schema="accountFormSchema" class="space-y-8" @submit="onSubmit">
     <FormField v-slot="{ componentField }" name="name">
       <FormItem>
         <FormLabel>Name</FormLabel>
@@ -126,15 +126,11 @@ async function onSubmit(values: any) {
               @update:model-value="(v) => {
                 if (v) {
                   dateValue = v
-                  setValues({
-                    dob: toDate(v).toISOString(),
-                  }, false)
+                  setFieldValue('dob', toDate(v).toISOString())
                 }
                 else {
                   dateValue = undefined
-                  setValues({
-                    dob: undefined,
-                  }, false)
+                  setFieldValue('dob', undefined)
                 }
               }"
             />
@@ -178,9 +174,7 @@ async function onSubmit(values: any) {
                   <CommandItem
                     v-for="language in languages" :key="language.value" :value="language.label"
                     @select="() => {
-                      setValues({
-                        language: language.value,
-                      }, false)
+                      setFieldValue('language', language.value)
                       open = false
                     }"
                   >
diff --git a/apps/www/src/lib/registry/default/example/CalendarForm.vue b/apps/www/src/lib/registry/default/example/CalendarForm.vue
index 5b6b762e..3bb7e9d9 100644
--- a/apps/www/src/lib/registry/default/example/CalendarForm.vue
+++ b/apps/www/src/lib/registry/default/example/CalendarForm.vue
@@ -32,7 +32,7 @@ const formSchema = toTypedSchema(z.object({
 
 const placeholder = ref()
 
-const { handleSubmit, setValues, values } = useForm({
+const { handleSubmit, setFieldValue, values } = useForm({
   validationSchema: formSchema,
 })
 
@@ -79,14 +79,10 @@ const onSubmit = handleSubmit((values) => {
               :max-value="today(getLocalTimeZone())"
               @update:model-value="(v) => {
                 if (v) {
-                  setValues({
-                    dob: v.toString(),
-                  })
+                  setFieldValue('dob', v.toString())
                 }
                 else {
-                  setValues({
-                    dob: '',
-                  })
+                  setFieldValue('dob', undefined)
                 }
               }"
             />
diff --git a/apps/www/src/lib/registry/default/example/ComboboxForm.vue b/apps/www/src/lib/registry/default/example/ComboboxForm.vue
index fe4de4c4..d7c27a52 100644
--- a/apps/www/src/lib/registry/default/example/ComboboxForm.vue
+++ b/apps/www/src/lib/registry/default/example/ComboboxForm.vue
@@ -48,7 +48,7 @@ const formSchema = toTypedSchema(z.object({
   }),
 }))
 
-const { handleSubmit, setValues, values } = useForm({
+const { handleSubmit, setFieldValue, values } = useForm({
   validationSchema: formSchema,
 })
 
@@ -91,9 +91,7 @@ const onSubmit = handleSubmit((values) => {
                     :key="language.value"
                     :value="language.label"
                     @select="() => {
-                      setValues({
-                        language: language.value,
-                      })
+                      setFieldValue('language', language.value)
                     }"
                   >
                     <Check
diff --git a/apps/www/src/lib/registry/default/example/DatePickerForm.vue b/apps/www/src/lib/registry/default/example/DatePickerForm.vue
index 3fa542fb..6f499148 100644
--- a/apps/www/src/lib/registry/default/example/DatePickerForm.vue
+++ b/apps/www/src/lib/registry/default/example/DatePickerForm.vue
@@ -32,7 +32,7 @@ const formSchema = toTypedSchema(z.object({
 
 const placeholder = ref()
 
-const { handleSubmit, setValues, values } = useForm({
+const { handleSubmit, setFieldValue, values } = useForm({
   validationSchema: formSchema,
   initialValues: {
 
@@ -82,14 +82,10 @@ const onSubmit = handleSubmit((values) => {
               :max-value="today(getLocalTimeZone())"
               @update:model-value="(v) => {
                 if (v) {
-                  setValues({
-                    dob: v.toString(),
-                  })
+                  setFieldValue('dob', v.toString())
                 }
                 else {
-                  setValues({
-                    dob: '',
-                  })
+                  setFieldValue('dob', undefined)
                 }
 
               }"
diff --git a/apps/www/src/lib/registry/new-york/example/CalendarForm.vue b/apps/www/src/lib/registry/new-york/example/CalendarForm.vue
index 90c599f1..61ab5371 100644
--- a/apps/www/src/lib/registry/new-york/example/CalendarForm.vue
+++ b/apps/www/src/lib/registry/new-york/example/CalendarForm.vue
@@ -32,7 +32,7 @@ const formSchema = toTypedSchema(z.object({
 
 const placeholder = ref()
 
-const { handleSubmit, setValues, values } = useForm({
+const { handleSubmit, setFieldValue, values } = useForm({
   validationSchema: formSchema,
 })
 
@@ -79,14 +79,10 @@ const onSubmit = handleSubmit((values) => {
               :max-value="today(getLocalTimeZone())"
               @update:model-value="(v) => {
                 if (v) {
-                  setValues({
-                    dob: v.toString(),
-                  })
+                  setFieldValue('dob', v.toString())
                 }
                 else {
-                  setValues({
-                    dob: '',
-                  })
+                  setFieldValue('dob', undefined)
                 }
               }"
             />
diff --git a/apps/www/src/lib/registry/new-york/example/ComboboxForm.vue b/apps/www/src/lib/registry/new-york/example/ComboboxForm.vue
index 247c0870..f58cfacd 100644
--- a/apps/www/src/lib/registry/new-york/example/ComboboxForm.vue
+++ b/apps/www/src/lib/registry/new-york/example/ComboboxForm.vue
@@ -48,7 +48,7 @@ const formSchema = toTypedSchema(z.object({
   }),
 }))
 
-const { handleSubmit, setValues, values } = useForm({
+const { handleSubmit, setFieldValue, values } = useForm({
   validationSchema: formSchema,
   initialValues: {
     language: '',
@@ -94,9 +94,7 @@ const onSubmit = handleSubmit((values) => {
                     :key="language.value"
                     :value="language.label"
                     @select="() => {
-                      setValues({
-                        language: language.value,
-                      })
+                      setFieldValue('language', language.value)
                     }"
                   >
                     {{ language.label }}
diff --git a/apps/www/src/lib/registry/new-york/example/DatePickerForm.vue b/apps/www/src/lib/registry/new-york/example/DatePickerForm.vue
index c751b251..a027293d 100644
--- a/apps/www/src/lib/registry/new-york/example/DatePickerForm.vue
+++ b/apps/www/src/lib/registry/new-york/example/DatePickerForm.vue
@@ -32,7 +32,7 @@ const formSchema = toTypedSchema(z.object({
 
 const placeholder = ref()
 
-const { handleSubmit, setValues, values } = useForm({
+const { handleSubmit, setFieldValue, values } = useForm({
   validationSchema: formSchema,
   initialValues: {
 
@@ -82,16 +82,11 @@ const onSubmit = handleSubmit((values) => {
               :max-value="today(getLocalTimeZone())"
               @update:model-value="(v) => {
                 if (v) {
-                  setValues({
-                    dob: v.toString(),
-                  })
+                  setFieldValue('dob', v.toString())
                 }
                 else {
-                  setValues({
-                    dob: '',
-                  })
+                  setFieldValue('dob', undefined)
                 }
-
               }"
             />
           </PopoverContent>