feat(Form): improve form control and input validation trigger (#487)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

docs/components/content/examples/FormExampleYup.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { object, string, InferType } from 'yup'
-import type { Form } from '@nuxthq/ui/dist/runtime/types'
+import type { FormSubmitEvent } from '@nuxthq/ui/dist/runtime/types'
 
 const schema = object({
-  emailYup: string().email('Invalid email').required('Required'),
-  passwordYup: string()
+  email: string().email('Invalid email').required('Required'),
+  password: string()
     .min(8, 'Must be at least 8 characters')
     .required('Required')
 })
@@ -13,31 +13,28 @@ const schema = object({
 type Schema = InferType<typeof schema>
 
 const state = ref({
-  emailYup: undefined,
-  passwordYup: undefined
+  email: undefined,
+  password: undefined
 })
 
-const form = ref<Form<Schema>>()
-
-async function submit () {
-  await form.value!.validate()
-  // Do something with state.value
+async function submit (event: FormSubmitEvent<Schema>) {
+  // Do something with event.data
+  console.log(event.data)
 }
 </script>
 
 <template>
   <UForm
-    ref="form"
     :schema="schema"
     :state="state"
-    @submit.prevent="submit"
+    @submit="submit"
   >
-    <UFormGroup label="Email" name="emailYup">
-      <UInput v-model="state.emailYup" />
+    <UFormGroup label="Email" name="email">
+      <UInput v-model="state.email" />
     </UFormGroup>
 
-    <UFormGroup label="Password" name="passwordYup">
-      <UInput v-model="state.passwordYup" type="password" />
+    <UFormGroup label="Password" name="password">
+      <UInput v-model="state.password" type="password" />
     </UFormGroup>
 
     <UButton type="submit">