chore: migrate UInput

Author: genu

src/runtime/components/FormField.vue

@@ -47,41 +47,31 @@ export interface FormFieldSlots {
 </script>
 
 <script setup lang="ts">
-import { computed, ref, inject, provide, useId, watch } from 'vue'
-import type { Ref } from 'vue'
+import { computed, provide } from 'vue'
 import { Primitive, Label } from 'reka-ui'
+import { useFormField } from '@formwerk/core'
 import { useAppConfig } from '#imports'
-import { formFieldInjectionKey, inputIdInjectionKey, formErrorsInjectionKey, formInputsInjectionKey } from '../composables/useFormField'
+import { formFieldInjectionKey } from '../composables/useFormField'
 import { tv } from '../utils/tv'
-import type { FormError, FormFieldInjectedOptions } from '../types/form'
+import type { FormFieldInjectedOptions } from '../types/form'
 
 const props = defineProps<FormFieldProps>()
 const slots = defineSlots<FormFieldSlots>()
 
 const appConfig = useAppConfig() as FormField['AppConfig']
 
+const { labelProps, descriptionProps, errorMessageProps, state: { errorMessage, isTouched } } = useFormField({
+  path: props.name,
+  label: props.label,
+  description: props.description
+})
+
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.formField || {}) })({
   size: props.size,
   required: props.required
 }))
 
-const formErrors = inject<Ref<FormError[]> | null>(formErrorsInjectionKey, null)
-
-const error = computed(() => props.error || formErrors?.value?.find(error => error.name === props.name || (props.errorPattern && error.name?.match(props.errorPattern)))?.message)
-
-const id = ref(useId())
-// Copies id's initial value to bind aria-attributes such as aria-describedby.
-// This is required for the RadioGroup component which unsets the id value.
-const ariaId = id.value
-
-const formInputs = inject(formInputsInjectionKey, undefined)
-watch(id, () => {
-  if (formInputs && props.name) {
-    formInputs.value[props.name] = { id: id.value, pattern: props.errorPattern }
-  }
-}, { immediate: true })
-
-provide(inputIdInjectionKey, id)
+const error = computed(() => props.error || (errorMessage.value && isTouched.value ? errorMessage.value : undefined))
 
 provide(formFieldInjectionKey, computed(() => ({
   error: error.value,
@@ -92,28 +82,27 @@ provide(formFieldInjectionKey, computed(() => ({
   errorPattern: props.errorPattern,
   hint: props.hint,
   description: props.description,
-  help: props.help,
-  ariaId
+  help: props.help
 }) as FormFieldInjectedOptions<FormFieldProps>))
 </script>
 
 <template>
   <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <div :class="ui.wrapper({ class: props.ui?.wrapper })">
       <div v-if="label || !!slots.label" :class="ui.labelWrapper({ class: props.ui?.labelWrapper })">
-        <Label :for="id" :class="ui.label({ class: props.ui?.label })">
+        <Label v-bind="labelProps" :class="ui.label({ class: props.ui?.label })">
           <slot name="label" :label="label">
             {{ label }}
           </slot>
         </Label>
-        <span v-if="hint || !!slots.hint" :id="`${ariaId}-hint`" :class="ui.hint({ class: props.ui?.hint })">
+        <span v-if="hint || !!slots.hint" :id="`${labelProps.id}-hint`" :class="ui.hint({ class: props.ui?.hint })">
           <slot name="hint" :hint="hint">
             {{ hint }}
           </slot>
         </span>
       </div>
 
-      <p v-if="description || !!slots.description" :id="`${ariaId}-description`" :class="ui.description({ class: props.ui?.description })">
+      <p v-if="description || !!slots.description" :v-bind="descriptionProps" :class="ui.description({ class: props.ui?.description })">
         <slot name="description" :description="description">
           {{ description }}
         </slot>
@@ -123,12 +112,12 @@ provide(formFieldInjectionKey, computed(() => ({
     <div :class="[(label || !!slots.label || description || !!slots.description) && ui.container({ class: props.ui?.container })]">
       <slot :error="error" />
 
-      <div v-if="(typeof error === 'string' && error) || !!slots.error" :id="`${ariaId}-error`" :class="ui.error({ class: props.ui?.error })">
+      <div v-if="(typeof error === 'string' && error) || !!slots.error" :v-bind="errorMessageProps" :class="ui.error({ class: props.ui?.error })">
         <slot name="error" :error="error">
           {{ error }}
         </slot>
       </div>
-      <div v-else-if="help || !!slots.help" :id="`${ariaId}-help`" :class="ui.help({ class: props.ui?.help })">
+      <div v-else-if="help || !!slots.help" :id="`${labelProps.id}-help`" :class="ui.help({ class: props.ui?.help })">
         <slot name="help" :help="help">
           {{ help }}
         </slot>

src/runtime/components/Input.vue

@@ -65,6 +65,7 @@ export interface InputSlots {
 import { ref, computed, onMounted } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useVModel } from '@vueuse/core'
+import { useCustomControl } from '@formwerk/core'
 import { useAppConfig } from '#imports'
 import { useFieldGroup } from '../composables/useFieldGroup'
 import { useComponentIcons } from '../composables/useComponentIcons'
@@ -88,7 +89,13 @@ const modelValue = useVModel<InputProps<T>, 'modelValue', 'update:modelValue'>(p
 
 const appConfig = useAppConfig() as Input['AppConfig']
 
-const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled, emitFormFocus, ariaAttrs } = useFormField<InputProps<T>>(props, { deferInputValidation: true })
+const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, name, highlight, disabled, emitFormFocus } = useFormField<InputProps<T>>(props, { deferInputValidation: true })
+const { controlProps, field: { isDisabled } } = useCustomControl({
+  name,
+  disabled,
+  required: props.required,
+  controlType: 'UInput'
+})
 const { orientation, size: fieldGroupSize } = useFieldGroup<InputProps<T>>(props)
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
 
@@ -177,17 +184,15 @@ defineExpose({
 <template>
   <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <input
-      :id="id"
       ref="inputRef"
       :type="type"
       :value="modelValue"
-      :name="name"
       :placeholder="placeholder"
       :class="ui.base({ class: props.ui?.base })"
-      :disabled="disabled"
+      :disabled="isDisabled"
       :required="required"
       :autocomplete="autocomplete"
-      v-bind="{ ...$attrs, ...ariaAttrs }"
+      v-bind="{ ...$attrs, ...controlProps }"
       @input="onInput"
       @blur="onBlur"
       @change="onChange"