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

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

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">

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 { emitFormChange, color, name, inputId } = useFormGroup(props)
-    const color = computed(() => formGroup?.error?.value ? 'red' : props.color)
 
     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

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-${uid()}`)
-    const bus = useEventBus<FormEvent>(`form-${seed}`)
 
     bus.on(async (event) => {
       if (event.type !== 'submit' && props.validateOn?.includes(event.type)) {

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

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

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 { emitFormChange, color, name, inputId } = useFormGroup(props)
-    const color = computed(() => formGroup?.error?.value ? 'red' : props.color)
 
     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
     }
   }

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

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

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 { emitFormBlur, emitFormChange, inputId, color, size, name } = useFormGroup(props, config)
-    const color = computed(() => formGroup?.error?.value ? 'red' : props.color)
-    const size = computed(() => formGroup?.size?.value ?? props.size)
-    const id = formGroup?.labelFor
 
     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,

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

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 { emitFormChange, color, inputId, name } = useFormGroup(props)
-    const color = computed(() => formGroup?.error?.value ? 'red' : props.color)
-    const id = formGroup?.labelFor
 
     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,

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,
+      emitFormChange
-      formGroup
     }
 }

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>
-}
+}

src/runtime/utils/uid.ts

@@ -0,0 +1,5 @@
+let _id = 0
+
+export function uid () {
+  return `nuid-${_id++}`
+}