chore(FormGroup): simplify bindings between input and form group p… (#704)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
2026-01-14 12:14:41 +01:00 · 2023-09-21 23:22:55 +02:00
parent a94782d94b
commit 46879dc1b7
14 changed files with 81 additions and 65 deletions
--- a/docs/components/content/examples/FormExampleElements.vue
+++ b/docs/components/content/examples/FormExampleElements.vue
@@ -80,7 +80,7 @@ async function submit (event: FormSubmitEvent<Schema>) {
    </UFormGroup>

    <UFormGroup name="checkbox" label="Checkbox">
-      <UCheckbox v-model="state.checkbox" />
+      <UCheckbox v-model="state.checkbox" label="Check me" />
    </UFormGroup>

    <UFormGroup name="radio" label="Radio">
--- a/src/runtime/components/forms/Checkbox.vue
+++ b/src/runtime/components/forms/Checkbox.vue
@@ -2,7 +2,7 @@
  <div :class="ui.wrapper">
    <div class="flex items-center h-5">
      <input
-        :id="name"
+        :id="inputId"
        v-model="toggle"
        :name="name"
        :required="required"
@@ -18,7 +18,7 @@
      >
    </div>
    <div v-if="label || $slots.label" class="ms-3 text-sm">
-      <label :for="name" :class="ui.label">
+      <label :for="inputId" :class="ui.label">
        <slot name="label">{{ label }}</slot>
        <span v-if="required" :class="ui.required">*</span>
      </label>
@@ -36,6 +36,7 @@ import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { useFormGroup } from '../../composables/useFormGroup'
 import { mergeConfig } from '../../utils'
+import { uid } from '../../utils/uid'
 import type { Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
@@ -47,6 +48,11 @@ const config = mergeConfig<typeof checkbox>(appConfig.ui.strategy, appConfig.ui.
 export default defineComponent({
  inheritAttrs: false,
  props: {
+    id: {
+      type: String,
+      // A default value is needed here to bind the label
+      default: () => uid()
+    },
    value: {
      type: [String, Number, Boolean, Object],
      default: null
@@ -103,8 +109,7 @@ export default defineComponent({
  setup (props, { emit }) {
    const { ui, attrs } = useUI('checkbox', props.ui, config, { mergeWrapper: true })

-    const { emitFormChange, formGroup } = useFormGroup()
-    const color = computed(() => formGroup?.error?.value ? 'red' : props.color)
+    const { emitFormChange, color, name, inputId } = useFormGroup(props)

    const toggle = computed({
      get () {
@@ -136,6 +141,9 @@ export default defineComponent({
      ui,
      attrs,
      toggle,
+      inputId,
+      // eslint-disable-next-line vue/no-dupe-keys
+      name,
      // eslint-disable-next-line vue/no-dupe-keys
      inputClass,
      onChange
--- a/src/runtime/components/forms/Form.vue
+++ b/src/runtime/components/forms/Form.vue
@@ -12,6 +12,7 @@ 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 { uid } from '../../utils/uid'

 export default defineComponent({
  props: {
@@ -40,8 +41,7 @@ export default defineComponent({
  },
  emits: ['submit'],
  setup (props, { expose, emit }) {
-    const seed = Math.random().toString(36).substring(7)
-    const bus = useEventBus<FormEvent>(`form-${seed}`)
+    const bus = useEventBus<FormEvent>(`form-${uid()}`)

    bus.on(async (event) => {
      if (event.type !== 'submit' && props.validateOn?.includes(event.type)) {
--- a/src/runtime/components/forms/FormGroup.vue
+++ b/src/runtime/components/forms/FormGroup.vue
@@ -1,7 +1,7 @@
 <template>
  <div :class="ui.wrapper" v-bind="attrs">
    <div v-if="label" :class="[ui.label.wrapper, size]">
-      <label :for="labelFor" :class="[ui.label.base, required ? ui.label.required : '']">{{ label }}</label>
+      <label :for="inputId" :class="[ui.label.base, required ? ui.label.required : '']">{{ label }}</label>
      <span v-if="hint" :class="[ui.hint]">{{ hint }}</span>
    </div>
    <p v-if="description" :class="[ui.description, size]">
@@ -28,11 +28,10 @@ import type { FormError, InjectedFormGroupValue, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
 import { formGroup } from '#ui/ui.config'
+import { uid } from '../../utils/uid'

 const config = mergeConfig<typeof formGroup>(appConfig.ui.strategy, appConfig.ui.formGroup, formGroup)

-let increment = 0
-
 export default defineComponent({
  inheritAttrs: false,
  props: {
@@ -88,11 +87,11 @@ export default defineComponent({
    })

    const size = computed(() => ui.value.size[props.size ?? config.default.size])
-    const labelFor = ref(`${props.name || 'lf'}-${increment = increment < 1000000 ? increment + 1 : 0}`)
+    const inputId = ref(uid())

    provide<InjectedFormGroupValue>('form-group', {
      error,
-      labelFor,
+      inputId,
      name: computed(() => props.name),
      size: computed(() => props.size)
    })
@@ -101,7 +100,7 @@ export default defineComponent({
      // eslint-disable-next-line vue/no-dupe-keys
      ui,
      attrs,
-      labelFor,
+      inputId,
      // eslint-disable-next-line vue/no-dupe-keys
      size,
      // eslint-disable-next-line vue/no-dupe-keys
--- a/src/runtime/components/forms/Input.vue
+++ b/src/runtime/components/forms/Input.vue
@@ -1,7 +1,7 @@
 <template>
  <div :class="ui.wrapper">
    <input
-      :id="id"
+      :id="inputId"
      ref="input"
      :name="name"
      :value="modelValue"
@@ -119,7 +119,7 @@ export default defineComponent({
    },
    size: {
      type: String as PropType<keyof typeof config.size>,
-      default: () => config.default.size,
+      default: null,
      validator (value: string) {
        return Object.keys(config.size).includes(value)
      }
@@ -154,10 +154,7 @@ export default defineComponent({
  setup (props, { emit, slots }) {
    const { ui, attrs } = useUI('input', props.ui, config, { mergeWrapper: true })

-    const { emitFormBlur, emitFormInput, formGroup } = useFormGroup(props)
-    const color = computed(() => formGroup?.error?.value ? 'red' : props.color)
-    const size = computed(() => formGroup?.size?.value ?? props.size)
-    const id = formGroup?.labelFor
+    const { emitFormBlur, emitFormInput, size, color, inputId, name } = useFormGroup(props, config)

    const input = ref<HTMLInputElement | null>(null)

@@ -261,7 +258,8 @@ export default defineComponent({
      ui,
      attrs,
      // eslint-disable-next-line vue/no-dupe-keys
-      id,
+      name,
+      inputId,
      input,
      isLeading,
      isTrailing,
--- a/src/runtime/components/forms/Radio.vue
+++ b/src/runtime/components/forms/Radio.vue
@@ -2,7 +2,7 @@
  <div :class="ui.wrapper">
    <div class="flex items-center h-5">
      <input
-        :id="`${name}-${value}`"
+        :id="inputId"
        v-model="pick"
        :name="name"
        :required="required"
@@ -15,7 +15,7 @@
      >
    </div>
    <div v-if="label || $slots.label" class="ms-3 text-sm">
-      <label :for="`${name}-${value}`" :class="ui.label">
+      <label :for="inputId" :class="ui.label">
        <slot name="label">{{ label }}</slot>
        <span v-if="required" :class="ui.required">*</span>
      </label>
@@ -38,12 +38,18 @@ import type { Strategy } from '../../types'
 import appConfig from '#build/app.config'
 import { radio } from '#ui/ui.config'
 import colors from '#ui-colors'
+import { uid } from '../../utils/uid'

 const config = mergeConfig<typeof radio>(appConfig.ui.strategy, appConfig.ui.radio, radio)

 export default defineComponent({
  inheritAttrs: false,
  props: {
+    id: {
+      type: String,
+      // A default value is needed here to bind the label
+      default: () => uid()
+    },
    value: {
      type: [String, Number, Boolean],
      default: null
@@ -92,8 +98,7 @@ export default defineComponent({
  setup (props, { emit }) {
    const { ui, attrs } = useUI('radio', props.ui, config, { mergeWrapper: true })

-    const { emitFormChange, formGroup } = useFormGroup()
-    const color = computed(() => formGroup?.error?.value ? 'red' : props.color)
+    const { emitFormChange, color, name, inputId } = useFormGroup(props)

    const pick = computed({
      get () {
@@ -120,9 +125,12 @@ export default defineComponent({
    return {
      // eslint-disable-next-line vue/no-dupe-keys
      ui,
+      inputId,
      attrs,
      pick,
      // eslint-disable-next-line vue/no-dupe-keys
+      name,
+      // eslint-disable-next-line vue/no-dupe-keys
      inputClass
    }
  }
--- a/src/runtime/components/forms/Range.vue
+++ b/src/runtime/components/forms/Range.vue
@@ -1,7 +1,7 @@
 <template>
  <div :class="wrapperClass">
    <input
-      :id="id"
+      :id="inputId"
      ref="input"
      v-model.number="value"
      :name="name"
@@ -67,7 +67,7 @@ export default defineComponent({
    },
    size: {
      type: String as PropType<keyof typeof config.size>,
-      default: () => config.default.size,
+      default: null,
      validator (value: string) {
        return Object.keys(config.size).includes(value)
      }
@@ -92,10 +92,7 @@ export default defineComponent({
  setup (props, { emit }) {
    const { ui, attrs, attrsClass } = useUI('range', props.ui, config)

-    const { emitFormChange, formGroup } = useFormGroup(props)
-    const color = computed(() => formGroup?.error?.value ? 'red' : props.color)
-    const size = computed(() => formGroup?.size?.value ?? props.size)
-    const id = formGroup?.labelFor
+    const { emitFormChange, inputId, color, size, name } = useFormGroup(props, config)

    const value = computed({
      get () {
@@ -171,7 +168,8 @@ export default defineComponent({
      ui,
      attrs,
      // eslint-disable-next-line vue/no-dupe-keys
-      id,
+      name,
+      inputId,
      value,
      wrapperClass,
      // eslint-disable-next-line vue/no-dupe-keys
--- a/src/runtime/components/forms/Select.vue
+++ b/src/runtime/components/forms/Select.vue
@@ -1,7 +1,7 @@
 <template>
  <div :class="ui.wrapper">
    <select
-      :id="id"
+      :id="inputId"
      :name="name"
      :value="modelValue"
      :required="required"
@@ -137,7 +137,7 @@ export default defineComponent({
    },
    size: {
      type: String as PropType<keyof typeof config.size>,
-      default: () => config.default.size,
+      default: null,
      validator (value: string) {
        return Object.keys(config.size).includes(value)
      }
@@ -180,10 +180,7 @@ export default defineComponent({
  setup (props, { emit, slots }) {
    const { ui, attrs } = useUI('select', props.ui, config, { mergeWrapper: true })

-    const { emitFormChange, formGroup } = useFormGroup(props)
-    const color = computed(() => formGroup?.error?.value ? 'red' : props.color)
-    const size = computed(() => formGroup?.size?.value ?? props.size)
-    const id = formGroup?.labelFor
+    const { emitFormChange, inputId, color, size, name } = useFormGroup(props, config)

    const onInput = (event: InputEvent) => {
      emit('update:modelValue', (event.target as HTMLInputElement).value)
@@ -323,7 +320,8 @@ export default defineComponent({
      ui,
      attrs,
      // eslint-disable-next-line vue/no-dupe-keys
-      id,
+      name,
+      inputId,
      normalizedOptionsWithPlaceholder,
      normalizedValue,
      isLeading,
--- a/src/runtime/components/forms/SelectMenu.vue
+++ b/src/runtime/components/forms/SelectMenu.vue
@@ -28,7 +28,7 @@
      class="inline-flex w-full"
    >
      <slot :open="open" :disabled="disabled" :loading="loading">
-        <button :id="id" :class="selectClass" :disabled="disabled || loading" type="button" v-bind="attrs">
+        <button :id="inputId" :class="selectClass" :disabled="disabled || loading" type="button" v-bind="attrs">
          <span v-if="(isLeading && leadingIconName) || $slots.leading" :class="leadingWrapperIconClass">
            <slot name="leading" :disabled="disabled" :loading="loading">
              <UIcon :name="leadingIconName" :class="leadingIconClass" />
@@ -254,7 +254,7 @@ export default defineComponent({
    },
    size: {
      type: String as PropType<keyof typeof config.size>,
-      default: () => config.default.size,
+      default: null,
      validator (value: string) {
        return Object.keys(config.size).includes(value)
      }
@@ -314,10 +314,7 @@ export default defineComponent({
    const popper = computed<PopperOptions>(() => defu({}, props.popper, uiMenu.value.popper as PopperOptions))

    const [trigger, container] = usePopper(popper.value)
-    const { emitFormBlur, emitFormChange, formGroup } = useFormGroup(props)
-    const color = computed(() => formGroup?.error?.value ? 'red' : props.color)
-    const size = computed(() => formGroup?.size?.value ?? props.size)
-    const id = formGroup?.labelFor
+    const { emitFormBlur, emitFormChange, inputId, color, size, name } = useFormGroup(props, config)

    const query = ref('')
    const searchInput = ref<ComponentPublicInstance<HTMLElement>>()
@@ -446,7 +443,8 @@ export default defineComponent({
      uiMenu,
      attrs,
      // eslint-disable-next-line vue/no-dupe-keys
-      id,
+      name,
+      inputId,
      trigger,
      container,
      isLeading,
--- a/src/runtime/components/forms/Textarea.vue
+++ b/src/runtime/components/forms/Textarea.vue
@@ -1,7 +1,7 @@
 <template>
  <div :class="ui.wrapper">
    <textarea
-      :id="id"
+      :id="inputId"
      ref="textarea"
      :value="modelValue"
      :name="name"
@@ -82,7 +82,7 @@ export default defineComponent({
    },
    size: {
      type: String as PropType<keyof typeof config.size>,
-      default: () => config.default.size,
+      default: null,
      validator (value: string) {
        return Object.keys(config.size).includes(value)
      }
@@ -117,10 +117,7 @@ export default defineComponent({
  setup (props, { emit }) {
    const { ui, attrs } = useUI('textarea', props.ui, config, { mergeWrapper: true })

-    const { emitFormBlur, emitFormInput, formGroup } = useFormGroup(props)
-    const color = computed(() => formGroup?.error?.value ? 'red' : props.color)
-    const size = computed(() => formGroup?.size?.value ?? props.size)
-    const id = formGroup?.labelFor
+    const { emitFormBlur, emitFormInput, inputId, color, size, name } = useFormGroup(props, config)

    const textarea = ref<HTMLTextAreaElement | null>(null)

@@ -200,7 +197,8 @@ export default defineComponent({
      ui,
      attrs,
      // eslint-disable-next-line vue/no-dupe-keys
-      id,
+      name,
+      inputId,
      textarea,
      // eslint-disable-next-line vue/no-dupe-keys
      textareaClass,
--- a/src/runtime/components/forms/Toggle.vue
+++ b/src/runtime/components/forms/Toggle.vue
@@ -1,6 +1,6 @@
 <template>
  <HSwitch
-    :id="id"
+    :id="inputId"
    v-model="active"
    :name="name"
    :disabled="disabled"
@@ -82,9 +82,7 @@ export default defineComponent({
  setup (props, { emit }) {
    const { ui, attrs, attrsClass } = useUI('toggle', props.ui, config)

-    const { emitFormChange, formGroup } = useFormGroup(props)
-    const color = computed(() => formGroup?.error?.value ? 'red' : props.color)
-    const id = formGroup?.labelFor
+    const { emitFormChange, color, inputId, name } = useFormGroup(props)

    const active = computed({
      get () {
@@ -122,7 +120,8 @@ export default defineComponent({
      ui,
      attrs,
      // eslint-disable-next-line vue/no-dupe-keys
-      id,
+      name,
+      inputId,
      active,
      switchClass,
      onIconClass,
--- a/src/runtime/composables/useFormGroup.ts
+++ b/src/runtime/composables/useFormGroup.ts
@@ -1,17 +1,21 @@
-import { inject, ref } from 'vue'
+import { inject, ref, computed } from 'vue'
 import { type UseEventBusReturn, useDebounceFn } from '@vueuse/core'
 import type { FormEvent, FormEventType, InjectedFormGroupValue } from '../types/form'

-type InputAttrs = {
+type InputProps = {
  id?: string
+  size?: string
+  color?: string
+  name?: string
 }

-export const useFormGroup = (inputAttrs?: InputAttrs) => {
+export const useFormGroup = (inputProps?: InputProps, config?: any) => {
    const formBus = inject<UseEventBusReturn<FormEvent, string> | undefined>('form-events', undefined)
    const formGroup = inject<InjectedFormGroupValue>('form-group', undefined)

    if (formGroup) {
-      formGroup.labelFor.value = inputAttrs?.id ?? formGroup?.labelFor.value
+      // Updates for="..." attribute on label if inputProps.id is provided
+      formGroup.inputId.value = inputProps?.id ?? formGroup?.inputId.value
    }

    const blurred = ref(false)
@@ -38,9 +42,12 @@ export const useFormGroup = (inputAttrs?: InputAttrs) => {
    }, 300)

    return {
+      inputId: computed(() => inputProps.id ?? formGroup?.inputId.value),
+      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),
      emitFormBlur,
      emitFormInput,
-      emitFormChange,
-      formGroup
+      emitFormChange
    }
 }
--- a/src/runtime/types/form.d.ts
+++ b/src/runtime/types/form.d.ts
@@ -21,8 +21,8 @@ export interface FormEvent {
 }

 export interface InjectedFormGroupValue {
-  labelFor: Ref<string>
+  inputId: Ref<string>
  name: Ref<string>
  size: Ref<string>
  error: Ref<string | boolean>
-}
+}
--- a/src/runtime/utils/uid.ts
+++ b/src/runtime/utils/uid.ts
@@ -0,0 +1,5 @@
+let _id = 0
+
+export function uid () {
+  return `nuid-${_id++}`
+}