From e2fe0ceeddab881bc056fa1c1ebfb2a009a133ff Mon Sep 17 00:00:00 2001
From: sadeghbarati <sadeghbaratiwork@gmail.com>
Date: Sun, 26 May 2024 08:37:30 +0330
Subject: [PATCH] chore: update `NumberFieldForm.vue`

---
 .../registry/default/example/NumberFieldForm.vue   | 14 ++++++++++----
 .../registry/new-york/example/NumberFieldForm.vue  | 14 ++++++++++----
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/apps/www/src/lib/registry/default/example/NumberFieldForm.vue b/apps/www/src/lib/registry/default/example/NumberFieldForm.vue
index 56418ff4..04192dcd 100644
--- a/apps/www/src/lib/registry/default/example/NumberFieldForm.vue
+++ b/apps/www/src/lib/registry/default/example/NumberFieldForm.vue
@@ -26,7 +26,7 @@ const formSchema = toTypedSchema(z.object({
   payment: z.number().min(10, 'Min 10 euros to send payment').max(5000, 'Max 5000 euros to send payment'),
 }))
 
-const { handleSubmit } = useForm({
+const { handleSubmit, setFieldValue } = useForm({
   validationSchema: formSchema,
   initialValues: {
     payment: 10,
@@ -43,12 +43,11 @@ const onSubmit = handleSubmit((values) => {
 
 <template>
   <form class="w-2/3 space-y-6" @submit="onSubmit">
-    <FormField v-slot="{ value, handleChange }" name="payment">
+    <FormField name="payment">
       <FormItem>
         <FormLabel>Payment</FormLabel>
         <NumberField
           class="gap-2"
-          :model-value="value"
           :min="0"
           :format-options="{
             style: 'currency',
@@ -56,7 +55,14 @@ const onSubmit = handleSubmit((values) => {
             currencyDisplay: 'code',
             currencySign: 'accounting',
           }"
-          @update:model-value="handleChange"
+          @update:model-value="(v) => {
+            if (v) {
+              setFieldValue('payment', v)
+            }
+            else {
+              setFieldValue('payment', undefined)
+            }
+          }"
         >
           <NumberFieldContent>
             <NumberFieldDecrement />
diff --git a/apps/www/src/lib/registry/new-york/example/NumberFieldForm.vue b/apps/www/src/lib/registry/new-york/example/NumberFieldForm.vue
index c866b191..134b39e7 100644
--- a/apps/www/src/lib/registry/new-york/example/NumberFieldForm.vue
+++ b/apps/www/src/lib/registry/new-york/example/NumberFieldForm.vue
@@ -26,7 +26,7 @@ const formSchema = toTypedSchema(z.object({
   payment: z.number().min(10, 'Min 10 euros to send payment').max(5000, 'Max 5000 euros to send payment'),
 }))
 
-const { handleSubmit } = useForm({
+const { handleSubmit, setFieldValue } = useForm({
   validationSchema: formSchema,
   initialValues: {
     payment: 10,
@@ -43,12 +43,11 @@ const onSubmit = handleSubmit((values) => {
 
 <template>
   <form class="w-2/3 space-y-6" @submit="onSubmit">
-    <FormField v-slot="{ value, handleChange }" name="payment">
+    <FormField name="payment">
       <FormItem>
         <FormLabel>Payment</FormLabel>
         <NumberField
           class="gap-2"
-          :model-value="value"
           :min="0"
           :format-options="{
             style: 'currency',
@@ -56,7 +55,14 @@ const onSubmit = handleSubmit((values) => {
             currencyDisplay: 'code',
             currencySign: 'accounting',
           }"
-          @update:model-value="handleChange"
+          @update:model-value="(v) => {
+            if (v) {
+              setFieldValue('payment', v)
+            }
+            else {
+              setFieldValue('payment', undefined)
+            }
+          }"
         >
           <NumberFieldContent>
             <NumberFieldDecrement />