feat(form): Introduce useForm and useFormControl composable

docs/app/components/content/examples/form/FormExampleElements.vue

@@ -139,7 +139,7 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
         Submit
       </UButton>
 
-      <UButton variant="outline" @click="form?.clear()">
+      <UButton variant="outline" @click="form?.clearErrors()">
         Clear
       </UButton>
     </div>

src/runtime/components/Checkbox.vue

@@ -91,8 +91,12 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.checkbox ||
 }))
 
 function onUpdate(value: any) {
-  // @ts-expect-error - 'target' does not exist in type 'EventInit'
-  const event = new Event('change', { target: { value } })
+  const event = new CustomEvent('change', {
+    detail: {
+      value
+    }
+  })
+
   emits('change', event)
   emitFormChange()
   emitFormInput()

src/runtime/components/CheckboxGroup.vue

@@ -146,8 +146,11 @@ const normalizedItems = computed(() => {
 })
 
 function onUpdate(value: any) {
-  // @ts-expect-error - 'target' does not exist in type 'EventInit'
-  const event = new Event('change', { target: { value } })
+  const event = new CustomEvent('change', {
+    detail: {
+      value
+    }
+  })
   emits('change', event)
   emitFormChange()
   emitFormInput()

src/runtime/components/FileUpload.vue

@@ -223,8 +223,11 @@ function onUpdate(files: File[], reset = false) {
     modelValue.value = files?.[0] as (M extends true ? File[] : File) | null
   }
 
-  // @ts-expect-error - 'target' does not exist in type 'EventInit'
-  const event = new Event('change', { target: { value: modelValue.value } })
+  const event = new CustomEvent('change', {
+    detail: {
+      value: modelValue.value
+    }
+  })
   emits('change', event)
   emitFormChange()
   emitFormInput()

src/runtime/components/Form.vue

@@ -1,8 +1,9 @@
 <script lang="ts">
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/form'
-import type { FormSchema, FormError, FormInputEvents, FormErrorEvent, FormSubmitEvent, FormEvent, Form, FormErrorWithId, InferInput, InferOutput, FormData } from '../types/form'
+import type { FormSchema, FormError, FormInputEvents, FormErrorEvent, FormSubmitEvent, FormEvent, Form, InferInput, FormData, FormValidationException } from '../types/form'
 import type { ComponentConfig } from '../types/utils'
+import { useForm } from '../composables/useForm'
 
 type FormConfig = ComponentConfig<typeof theme, AppConfig, 'form'>
 
@@ -64,16 +65,13 @@ export interface FormSlots {
 </script>
 
 <script lang="ts" setup generic="S extends FormSchema, T extends boolean = true">
-import { provide, inject, nextTick, ref, onUnmounted, onMounted, computed, useId, readonly, reactive } from 'vue'
+import { provide, inject, nextTick, onUnmounted, onMounted, computed, useId, readonly } from 'vue'
 import { useEventBus } from '@vueuse/core'
 import { useAppConfig } from '#imports'
-import { formOptionsInjectionKey, formInputsInjectionKey, formBusInjectionKey, formLoadingInjectionKey } from '../composables/useFormField'
+import { formBusInjectionKey } from '../composables/useFormField'
 import { tv } from '../utils/tv'
-import { validateSchema } from '../utils/form'
-import { FormValidationException } from '../types/form'
 
 type I = InferInput<S>
-type O = InferOutput<S>
 
 const props = withDefaults(defineProps<FormProps<S, T>>(), {
   validateOn() {
@@ -87,13 +85,51 @@ const props = withDefaults(defineProps<FormProps<S, T>>(), {
 
 const emits = defineEmits<FormEmits<S, T>>()
 defineSlots<FormSlots>()
+const formId = props.id ?? useId() as string
+
+const {
+  errors,
+  loading,
+  validate: formValidate,
+  handleSubmit,
+  setErrors,
+  getErrors,
+  setFieldError,
+  clearErrors,
+  watch,
+  setFieldValue,
+  disabled: formDisabled,
+  dirtyFields,
+  touchedFields,
+  blurredFields,
+  errorBag,
+  bind,
+  registerNestedForm,
+  unregisterNestedForm,
+  getFieldValue,
+  reset,
+  resetField,
+  handleBlur,
+  handleFocus,
+  handleChange,
+  handleInput
+} = useForm({
+  id: formId,
+  schema: props.schema,
+  validate: props.validate,
+  validateOn: props.validateOn,
+  validateOnInputDelay: props.validateOnInputDelay,
+  transform: props.transform,
+  loadingAuto: props.loadingAuto,
+  values: props.state,
+  defaultValues: props.state,
+  disabled: computed(() => props.disabled)
+})
 
 const appConfig = useAppConfig() as FormConfig['AppConfig']
 
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.form || {}) }))
 
-const formId = props.id ?? useId() as string
-
 const bus = useEventBus<FormEvent<I>>(`form-${formId}`)
 const parentBus = props.attach && inject(
   formBusInjectionKey,
@@ -102,19 +138,17 @@ const parentBus = props.attach && inject(
 
 provide(formBusInjectionKey, bus)
 
-const nestedForms = ref<Map<string | number, { validate: typeof _validate }>>(new Map())
-
 onMounted(async () => {
   bus.on(async (event) => {
     if (event.type === 'attach') {
-      nestedForms.value.set(event.formId, { validate: event.validate })
+      registerNestedForm(event.formId, { validate: event.validate })
     } else if (event.type === 'detach') {
-      nestedForms.value.delete(event.formId)
+      unregisterNestedForm(event.formId)
     } else if (props.validateOn?.includes(event.type) && !loading.value) {
       if (event.type !== 'input') {
-        await _validate({ name: event.name, silent: true, nested: false })
+        await formValidate({ name: event.name, silent: true, nested: false })
       } else if (event.eager || blurredFields.has(event.name)) {
-        await _validate({ name: event.name, silent: true, nested: false })
+        await formValidate({ name: event.name, silent: true, nested: false })
       }
     }
 
@@ -139,7 +173,7 @@ onUnmounted(() => {
 onMounted(async () => {
   if (parentBus) {
     await nextTick()
-    parentBus.emit({ type: 'attach', validate: _validate, formId })
+    parentBus.emit({ type: 'attach', validate: formValidate, formId })
   }
 })
 
@@ -149,162 +183,52 @@ onUnmounted(() => {
   }
 })
 
-const errors = ref<FormErrorWithId[]>([])
-provide('form-errors', errors)
-
-const inputs = ref<{ [P in keyof I]?: { id?: string, pattern?: RegExp } }>({})
-provide(formInputsInjectionKey, inputs as any)
-
-const dirtyFields: Set<keyof I> = reactive(new Set<keyof I>())
-const touchedFields: Set<keyof I> = reactive(new Set<keyof I>())
-const blurredFields: Set<keyof I> = reactive(new Set<keyof I>())
-
-function resolveErrorIds(errs: FormError[]): FormErrorWithId[] {
-  return errs.map(err => ({
-    ...err,
-    id: err?.name ? inputs.value[err.name]?.id : undefined
-  }))
-}
-
-const transformedState = ref<O | null>(null)
-
-async function getErrors(): Promise<FormErrorWithId[]> {
-  let errs = props.validate ? (await props.validate(props.state)) ?? [] : []
-
-  if (props.schema) {
-    const { errors, result } = await validateSchema(props.state, props.schema as FormSchema<typeof props.state>)
-    if (errors) {
-      errs = errs.concat(errors)
-    } else {
-      transformedState.value = result
-    }
-  }
-
-  return resolveErrorIds(errs)
-}
-
-type ValidateOpts<Silent extends boolean, Transform extends boolean> = { name?: keyof I | (keyof I)[], silent?: Silent, nested?: boolean, transform?: Transform }
-async function _validate<T extends boolean>(opts: ValidateOpts<false, T>): Promise<FormData<S, T>>
-async function _validate<T extends boolean>(opts: ValidateOpts<true, T>): Promise<FormData<S, T> | false>
-async function _validate<T extends boolean>(opts: ValidateOpts<boolean, boolean> = { silent: false, nested: true, transform: false }): Promise<FormData<S, T> | false> {
-  const names = opts.name && !Array.isArray(opts.name) ? [opts.name] : opts.name as (keyof O)[]
-
-  const nestedValidatePromises = !names && opts.nested
-    ? Array.from(nestedForms.value.values()).map(
-        ({ validate }) => validate(opts as any).then(() => undefined).catch((error: Error) => {
-          if (!(error instanceof FormValidationException)) {
-            throw error
-          }
-          return error
-        })
-      )
-    : []
-
-  if (names) {
-    const otherErrors = errors.value.filter(error => !names.some((name) => {
-      const pattern = inputs.value?.[name]?.pattern
-      return name === error.name || (pattern && error.name?.match(pattern))
-    }))
-
-    const pathErrors = (await getErrors()).filter(error => names.some((name) => {
-      const pattern = inputs.value?.[name]?.pattern
-      return name === error.name || (pattern && error.name?.match(pattern))
-    }))
-
-    errors.value = otherErrors.concat(pathErrors)
-  } else {
-    errors.value = await getErrors()
-  }
-
-  const childErrors = (await Promise.all(nestedValidatePromises)).filter(val => val !== undefined)
-
-  if (errors.value.length + childErrors.length > 0) {
-    if (opts.silent) return false
-    throw new FormValidationException(formId, errors.value, childErrors)
-  }
-
-  if (opts.transform) {
-    Object.assign(props.state, transformedState.value)
-  }
-
-  return props.state as FormData<S, T>
+const onSuccess = async (data: FormData<S, T>, payload?: Event) => {
+  const event = payload as FormSubmitEvent<FormData<S, T>>
+  event.data = data
+  await props.onSubmit?.(event)
 }
 
-const loading = ref(false)
-provide(formLoadingInjectionKey, readonly(loading))
-
-async function onSubmitWrapper(payload: Event) {
-  loading.value = props.loadingAuto && true
-
+const onError = (error: FormValidationException, payload?: Event) => {
   const event = payload as FormSubmitEvent<FormData<S, T>>
 
-  try {
-    event.data = await _validate({ nested: true, transform: props.transform })
-    await props.onSubmit?.(event)
-    dirtyFields.clear()
-  } catch (error) {
-    if (!(error instanceof FormValidationException)) {
-      throw error
-    }
-
-    const errorEvent: FormErrorEvent = {
-      ...event,
-      errors: error.errors,
-      children: error.children
-    }
-    emits('error', errorEvent)
-  } finally {
-    loading.value = false
+  const errorEvent: FormErrorEvent = {
+    ...event,
+    errors: error.errors,
+    children: error.children
   }
+  emits('error', errorEvent)
 }
 
-const disabled = computed(() => props.disabled || loading.value)
-
-provide(formOptionsInjectionKey, computed(() => ({
-  disabled: disabled.value,
-  validateOnInputDelay: props.validateOnInputDelay
-})))
+const onSubmitWrapper = handleSubmit(onSuccess, onError)
 
 defineExpose<Form<S>>({
-  validate: _validate,
+  getFieldValue,
+  validate: formValidate,
   errors,
-
-  setErrors(errs: FormError[], name?: keyof I | RegExp) {
-    if (name) {
-      errors.value = errors.value
-        .filter(err => name instanceof RegExp ? !(err.name && name.test(err.name)) : err.name !== name)
-        .concat(resolveErrorIds(errs))
-    } else {
-      errors.value = resolveErrorIds(errs)
-    }
-  },
-
+  setErrors,
+  getErrors,
+  clearErrors,
   async submit() {
     await onSubmitWrapper(new Event('submit'))
   },
-
-  getErrors(name?: keyof I | RegExp) {
-    if (name) {
-      return errors.value.filter(err => name instanceof RegExp ? err.name && name.test(err.name) : err.name === name)
-    }
-    return errors.value
-  },
-
-  clear(name?: keyof I | RegExp) {
-    if (name) {
-      errors.value = errors.value.filter(err => name instanceof RegExp ? !(err.name && name.test(err.name)) : err.name !== name)
-    } else {
-      errors.value = []
-    }
-  },
-
-  disabled,
+  disabled: formDisabled,
   loading,
   dirty: computed(() => !!dirtyFields.size),
-
   dirtyFields: readonly(dirtyFields),
   blurredFields: readonly(blurredFields),
-  touchedFields: readonly(touchedFields)
+  touchedFields: readonly(touchedFields),
+  setFieldError,
+  errorBag,
+  bind,
+  watch,
+  setFieldValue,
+  resetField,
+  handleInput,
+  handleChange,
+  handleBlur,
+  handleFocus,
+  reset
 })
 </script>
 

src/runtime/components/InputMenu.vue

@@ -317,8 +317,11 @@ function onUpdate(value: any) {
   if (toRaw(props.modelValue) === value) {
     return
   }
-  // @ts-expect-error - 'target' does not exist in type 'EventInit'
-  const event = new Event('change', { target: { value } })
+  const event = new CustomEvent('change', {
+    detail: {
+      value
+    }
+  })
   emits('change', event)
   emitFormChange()
   emitFormInput()

src/runtime/components/InputNumber.vue

@@ -121,8 +121,11 @@ const decrementIcon = computed(() => props.decrementIcon || (props.orientation =
 const inputRef = ref<InstanceType<typeof NumberFieldInput> | null>(null)
 
 function onUpdate(value: number) {
-  // @ts-expect-error - 'target' does not exist in type 'EventInit'
-  const event = new Event('change', { target: { value } })
+  const event = new CustomEvent('change', {
+    detail: {
+      value
+    }
+  })
   emits('change', event)
 
   emitFormChange()