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

Co-authored-by: Benjamin Canac <[email protected]>

docs/components/content/ComponentCard.vue

@@ -164,9 +164,7 @@ const code = computed(() => {
       continue
     }
 
-    const prop = meta?.meta?.props?.find((prop: any) => prop.name === key)
-
-    code += ` ${(prop?.type === 'boolean' && value !== true) || typeof value === 'object' ? ':' : ''}${key === 'modelValue' ? 'value' : useKebabCase(key)}${prop?.type === 'boolean' && !!value && key !== 'modelValue' ? '' : `="${typeof value === 'object' ? renderObject(value) : value}"`}`
+    code += ` ${(typeof value === 'boolean' && value !== true) || typeof value === 'object' ? ':' : ''}${key === 'modelValue' ? 'value' : useKebabCase(key)}${typeof value === 'boolean' && !!value && key !== 'modelValue' ? '' : `="${typeof value === 'object' ? renderObject(value) : value}"`}`
   }
 
   if (props.slots) {

docs/components/content/examples/FormExampleBasic.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import type { FormError } from '@nuxthq/ui/dist/runtime/types'
+import type { FormError, FormSubmitEvent } from '@nuxthq/ui/dist/runtime/types'
 
 const state = ref({
   email: undefined,
@@ -14,20 +14,17 @@ const validate = (state: any): FormError[] => {
   return errors
 }
 
-const form = ref()
-
-async function submit () {
-  await form.value!.validate()
-  // Do something with state.value
+async function submit (event: FormSubmitEvent<any>) {
+  // Do something with data
+  console.log(event.data)
 }
 </script>
 
 <template>
   <UForm
-    ref="form"
     :validate="validate"
     :state="state"
-    @submit.prevent="submit"
+    @submit="submit"
   >
     <UFormGroup label="Email" name="email">
       <UInput v-model="state.email" />

docs/components/content/examples/FormExampleElements.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { z } from 'zod'
-import type { Form } from '@nuxthq/ui/dist/runtime/types'
+import type { FormSubmitEvent } from '@nuxthq/ui/dist/runtime/types'
 
 const options = [
   { label: 'Option 1', value: 'option-1' },
@@ -44,11 +44,11 @@ const schema = z.object({
 
 type Schema = z.infer<typeof schema>
 
-const form = ref<Form<Schema>>()
+const form = ref()
 
-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>
 
@@ -57,7 +57,7 @@ async function submit () {
     ref="form"
     :schema="schema"
     :state="state"
-    @submit.prevent="submit"
+    @submit="submit"
   >
     <UFormGroup name="input" label="Input">
       <UInput v-model="state.input" />
@@ -96,5 +96,9 @@ async function submit () {
     <UButton type="submit">
       Submit
     </UButton>
+
+    <UButton variant="outline" class="ml-2" @click="form.clear()">
+      Clear
+    </UButton>
   </UForm>
 </template>

docs/components/content/examples/FormExampleJoi.vue

@@ -1,40 +1,38 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import Joi from 'joi'
+import type { FormSubmitEvent } from '@nuxthq/ui/dist/runtime/types'
 
 const schema = Joi.object({
-  emailJoi: Joi.string().required(),
-  passwordJoi: Joi.string()
+  email: Joi.string().required(),
+  password: Joi.string()
     .min(8)
     .required()
 })
 
 const state = ref({
-  emailJoi: undefined,
-  passwordJoi: undefined
+  email: undefined,
+  password: undefined
 })
 
-const form = ref()
-
-async function submit () {
-  await form.value!.validate()
-  // Do something with state.value
+async function submit (event: FormSubmitEvent<any>) {
+  // 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="emailJoi">
-      <UInput v-model="state.emailJoi" />
+    <UFormGroup label="Email" name="email">
+      <UInput v-model="state.email" />
     </UFormGroup>
 
-    <UFormGroup label="Password" name="passwordJoi">
-      <UInput v-model="state.passwordJoi" type="password" />
+    <UFormGroup label="Password" name="password">
+      <UInput v-model="state.password" type="password" />
     </UFormGroup>
 
     <UButton type="submit">

docs/components/content/examples/FormExampleYup.vue

@@ -1,43 +1,40 @@
 <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')
 })
 
 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">

docs/components/content/examples/FormExampleZod.vue

@@ -1,41 +1,38 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { z } from 'zod'
-import type { Form } from '@nuxthq/ui/dist/runtime/types'
+import type { FormSubmitEvent } from '@nuxthq/ui/dist/runtime/types'
 
 const schema = z.object({
-  emailZod: z.string().email('Invalid email'),
-  passwordZod: z.string().min(8, 'Must be at least 8 characters')
+  email: z.string().email('Invalid email'),
+  password: z.string().min(8, 'Must be at least 8 characters')
 })
 
 type Schema = z.output<typeof schema>
 
 const state = ref({
-  emailZod: undefined,
-  passwordZod: 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 data
+  console.log(event.data)
 }
 </script>
 
 <template>
   <UForm
-    ref="form"
     :schema="schema"
     :state="state"
-    @submit.prevent="submit"
+    @submit="submit"
   >
-    <UFormGroup label="Email" name="emailZod">
-      <UInput v-model="state.emailZod" />
+    <UFormGroup label="Email" name="email">
+      <UInput v-model="state.email" />
     </UFormGroup>
 
-    <UFormGroup label="Password" name="passwordZod">
-      <UInput v-model="state.passwordZod" type="password" />
+    <UFormGroup label="Password" name="password">
+      <UInput v-model="state.password" type="password" />
     </UFormGroup>
 
     <UButton type="submit">

docs/components/content/examples/FormGroupErrorExample.vue

@@ -0,0 +1,9 @@
+<template>
+  <UFormGroup v-slot="{ error }" label="Email" :error="!email && 'You must enter an email'" help="This is a nice email!">
+    <UInput v-model="email" type="email" placeholder="Enter email" :trailing-icon="error && 'i-heroicons-exclamation-triangle-20-solid'" />
+  </UFormGroup>
+</template>
+
+<script setup lang="ts">
+const email = ref('')
+</script>