refactor: change setValues to setFieldValue for better validation (#547)

apps/www/src/content/docs/components/auto-form.md

@@ -414,9 +414,7 @@ const form = useForm({
   validationSchema: toTypedSchema(schema),
 })
 
-form.setValues({
+form.setFieldValue('username', 'bar')
-  username: 'foo'
-})
 </script>
 
 <template>

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({
+                  setFieldValue('dob', toDate(v).toISOString())
-                    dob: toDate(v).toISOString(),
-                  }, false)
                 }
                 else {
                   dateValue = undefined
-                  setValues({
+                  setFieldValue('dob', undefined)
-                    dob: undefined,
-                  }, false)
                 }
               }"
             />
@@ -178,9 +174,7 @@ async function onSubmit(values: any) {
                   <CommandItem
                     v-for="language in languages" :key="language.value" :value="language.label"
                     @select="() => {
-                      setValues({
+                      setFieldValue('language', language.value)
-                        language: language.value,
-                      }, false)
                       open = false
                     }"
                   >

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({
+                  setFieldValue('dob', v.toString())
-                    dob: v.toString(),
-                  })
                 }
                 else {
-                  setValues({
+                  setFieldValue('dob', undefined)
-                    dob: '',
-                  })
                 }
               }"
             />

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({
+                      setFieldValue('language', language.value)
-                        language: language.value,
-                      })
                     }"
                   >
                     <Check

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({
+                  setFieldValue('dob', v.toString())
-                    dob: v.toString(),
-                  })
                 }
                 else {
-                  setValues({
+                  setFieldValue('dob', undefined)
-                    dob: '',
-                  })
                 }
 
               }"

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({
+                  setFieldValue('dob', v.toString())
-                    dob: v.toString(),
-                  })
                 }
                 else {
-                  setValues({
+                  setFieldValue('dob', undefined)
-                    dob: '',
-                  })
                 }
               }"
             />

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({
+                      setFieldValue('language', language.value)
-                        language: language.value,
-                      })
                     }"
                   >
                     {{ language.label }}

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({
+                  setFieldValue('dob', v.toString())
-                    dob: v.toString(),
-                  })
                 }
                 else {
-                  setValues({
+                  setFieldValue('dob', undefined)
-                    dob: '',
-                  })
                 }
-
               }"
             />
           </PopoverContent>