feat(Form): handle @error event (#718)

Co-authored-by: Albert <albert@Alberts-MacBook-Pro.local>
Co-authored-by: Romain Hamel <romain@boilr.io>
Co-authored-by: Benjamin Canac <canacb1@gmail.com>

src/runtime/components/forms/Form.vue

@@ -11,9 +11,17 @@ import type { ZodSchema } from 'zod'
 import type { ValidationError as JoiError, Schema as JoiSchema } from 'joi'
 import type { ObjectSchema as YupObjectSchema, ValidationError as YupError } from 'yup'
 import type { ObjectSchemaAsync as ValibotObjectSchema } from 'valibot'
-import type { FormError, FormEvent, FormEventType, FormSubmitEvent, Form } from '../../types/form'
+import type { FormError, FormEvent, FormEventType, FormSubmitEvent, FormErrorEvent, Form } from '../../types/form'
 import { uid } from '../../utils/uid'
 
+class FormException extends Error {
+  constructor (message: string) {
+    super(message)
+    this.message = message
+    Object.setPrototypeOf(this, FormException.prototype)
+  }
+}
+
 export default defineComponent({
   props: {
     schema: {
@@ -39,7 +47,7 @@ export default defineComponent({
       default: () => ['blur', 'input', 'change', 'submit']
     }
   },
-  emits: ['submit'],
+  emits: ['submit', 'error'],
   setup (props, { expose, emit }) {
     const bus = useEventBus<FormEvent>(`form-${uid()}`)
 
@@ -52,6 +60,8 @@ export default defineComponent({
     const errors = ref<FormError[]>([])
     provide('form-errors', errors)
     provide('form-events', bus)
+    const inputs = ref({})
+    provide('form-inputs', inputs)
 
     async function getErrors (): Promise<FormError[]> {
       let errs = await props.validate(props.state)
@@ -87,7 +97,7 @@ export default defineComponent({
       }
 
       if (!opts.silent && errors.value.length > 0) {
-        throw new Error(
+        throw new FormException(
           `Form validation failed: ${JSON.stringify(errors.value, null, 2)}`
         )
       }
@@ -95,12 +105,29 @@ export default defineComponent({
     }
 
     async function onSubmit (event: SubmitEvent) {
-      if (props.validateOn?.includes('submit')) {
-        await validate()
+      try {
+        if (props.validateOn?.includes('submit')) {
+          await validate()
+        }
+        const submitEvent: FormSubmitEvent<any> = {
+          ...event,
+          data: props.state
+        }
+        emit('submit', submitEvent)
+      } catch (error) {
+        if (!(error instanceof FormException)) {
+          throw error
+        }
+
+        const errorEvent: FormErrorEvent = {
+          ...event,
+          errors: errors.value.map((err) => ({
+            ...err,
+            id: inputs.value[err.path]
+          }))
+        }
+        emit('error', errorEvent)
       }
-      const submitEvent = event as FormSubmitEvent<any>
-      submitEvent.data = props.state
-      emit('submit', event)
     }
 
     expose({

src/runtime/composables/useFormGroup.ts

@@ -1,22 +1,32 @@
-import { inject, ref, computed } from 'vue'
+import { inject, ref, computed, onMounted } from 'vue'
 import { type UseEventBusReturn, useDebounceFn } from '@vueuse/core'
 import type { FormEvent, FormEventType, InjectedFormGroupValue } from '../types/form'
 
 type InputProps = {
   id?: string
-  size?: string
+  size?: string | number | symbol
   color?: string
   name?: string
 }
 
 export const useFormGroup = (inputProps?: InputProps, config?: any) => {
     const formBus = inject<UseEventBusReturn<FormEvent, string> | undefined>('form-events', undefined)
-    const formGroup = inject<InjectedFormGroupValue>('form-group', undefined)
+    const formGroup = inject<InjectedFormGroupValue | undefined>('form-group', undefined)
+    const formInputs = inject<any>('form-inputs', undefined)
 
-    if (formGroup) {
-      // Updates for="..." attribute on label if inputProps.id is provided
-      formGroup.inputId.value = inputProps?.id ?? formGroup?.inputId.value
-    }
+    const inputId = ref(inputProps?.id)
+
+    onMounted(() => {
+      inputId.value = inputProps?.id ?? formGroup?.inputId.value
+      if (formGroup) {
+        // Updates for="..." attribute on label if inputProps.id is provided
+        formGroup.inputId.value = inputId.value
+
+        if (formInputs) {
+          formInputs.value[formGroup.name.value] = inputId
+        }
+      }
+    })
 
     const blurred = ref(false)
 
@@ -42,7 +52,7 @@ export const useFormGroup = (inputProps?: InputProps, config?: any) => {
     }, 300)
 
     return {
-      inputId: computed(() => inputProps.id ?? formGroup?.inputId.value),
+      inputId,
       name: computed(() => inputProps?.name ?? formGroup?.name.value),
       size: computed(() => inputProps?.size ?? formGroup?.size.value ?? config?.default?.size),
       color: computed(() => formGroup?.error?.value ? 'red' : inputProps?.color),

src/runtime/types/form.d.ts

@@ -1,10 +1,16 @@
-export interface FormError {
-  path: string
+import { Ref } from 'vue'
+
+export interface FormError<T extends string = string> {
+  path: T
   message: string
 }
 
+export interface FormErrorWithId extends FormError {
+  id: string
+}
+
 export interface Form<T> {
-  validate(path?: string, opts: { silent?: boolean }): Promise<T>
+  validate(path?: string, opts?: { silent?: boolean }): Promise<T>
   clear(path?: string): void
   errors: Ref<FormError[]>
   setErrors(errs: FormError[], path?: string): void
@@ -12,17 +18,18 @@ export interface Form<T> {
 }
 
 export type FormSubmitEvent<T> = SubmitEvent & { data: T }
+export type FormErrorEvent = SubmitEvent & { errors: FormErrorWithId[] }
 
 export type FormEventType = 'blur' | 'input' | 'change' | 'submit'
 
 export interface FormEvent {
   type: FormEventType
-  path: string
+  path?: string
 }
 
 export interface InjectedFormGroupValue {
-  inputId: Ref<string>
+  inputId: Ref<string | undefined>
   name: Ref<string>
-  size: Ref<string>
+  size: Ref<string | number | symbol>
   error: Ref<string | boolean>
 }