fix(Form): return state on validate (#472)

docs/components/content/examples/FormExampleJoi.vue

@@ -3,8 +3,8 @@ import { ref } from 'vue'
 import Joi from 'joi'
 
 const schema = Joi.object({
-  email: Joi.string().required(),
-  password: Joi.string()
+  emailJoi: Joi.string().required(),
+  passwordJoi: Joi.string()
     .min(8)
     .required()
 })
@@ -29,11 +29,11 @@ async function submit () {
     :state="state"
     @submit.prevent="submit"
   >
-    <UFormGroup label="Email" name="email-joi">
+    <UFormGroup label="Email" name="emailJoi">
       <UInput v-model="state.email" />
     </UFormGroup>
 
-    <UFormGroup label="Password" name="password-joi">
+    <UFormGroup label="Password" name="passwordJoi">
       <UInput v-model="state.password" type="password" />
     </UFormGroup>
 

docs/components/content/examples/FormExampleYup.vue

@@ -4,8 +4,8 @@ import { object, string, InferType } from 'yup'
 import type { Form } from '@nuxthq/ui/dist/runtime/types'
 
 const schema = object({
-  email: string().email('Invalid email').required('Required'),
-  password: string()
+  emailYup: string().email('Invalid email').required('Required'),
+  passwordYup: string()
     .min(8, 'Must be at least 8 characters')
     .required('Required')
 })
@@ -32,11 +32,11 @@ async function submit () {
     :state="state"
     @submit.prevent="submit"
   >
-    <UFormGroup label="Email" name="email-yup">
+    <UFormGroup label="Email" name="emailYup">
       <UInput v-model="state.email" />
     </UFormGroup>
 
-    <UFormGroup label="Password" name="password-yup">
+    <UFormGroup label="Password" name="passwordYup">
       <UInput v-model="state.password" type="password" />
     </UFormGroup>
 

docs/components/content/examples/FormExampleZod.vue

@@ -4,8 +4,8 @@ import { z } from 'zod'
 import type { Form } from '@nuxthq/ui/dist/runtime/types'
 
 const schema = z.object({
-  email: z.string().email('Invalid email'),
-  password: z.string().min(8, 'Must be at least 8 characters')
+  emailZod: z.string().email('Invalid email'),
+  passwordZod: z.string().min(8, 'Must be at least 8 characters')
 })
 
 type Schema = z.output<typeof schema>
@@ -30,11 +30,11 @@ async function submit () {
     :state="state"
     @submit.prevent="submit"
   >
-    <UFormGroup label="Email" name="email-zod">
+    <UFormGroup label="Email" name="emailZod">
       <UInput v-model="state.email" />
     </UFormGroup>
 
-    <UFormGroup label="Password" name="password-zod">
+    <UFormGroup label="Password" name="passwordZod">
       <UInput v-model="state.password" type="password" />
     </UFormGroup>
 

docs/content/3.forms/10.form.md

@@ -301,11 +301,7 @@ defineExpose({
 </script>
 
 <template>
-  <UForm
-    ref="form"
-    :model="model"
-    @validate="validateWithVuelidate"
-  >
+  <UForm ref="form" :model="model" :validate="validateWithVuelidate">
     <slot />
   </UForm>
 </template>

src/runtime/components/forms/Form.ts

@@ -68,6 +68,8 @@ export default defineComponent({
           `Form validation failed: ${JSON.stringify(errors.value, null, 2)}`
         )
       }
+
+      return props.state
     }
 
     expose({