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

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="id"
         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="id" :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('ui.checkbox', props.ui, config, { mergeWrapper: true })
 
-    const { emitFormChange, formGroup } = useFormGroup()
-    const color = computed(() => formGroup?.error?.value ? 'red' : props.color)
+    const { emitFormChange, color, name } = useFormGroup(props)
 
     const toggle = computed({
       get () {
@@ -137,6 +142,8 @@ export default defineComponent({
       attrs,
       toggle,
       // 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-${seed}`)
+    const bus = useEventBus<FormEvent>(`form-${uid()}`)
 
     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('ui.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,

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="id"
         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="id" :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('ui.radio', props.ui, config, { mergeWrapper: true })
 
-    const { emitFormChange, formGroup } = useFormGroup()
-    const color = computed(() => formGroup?.error?.value ? 'red' : props.color)
+    const { emitFormChange, color, name } = useFormGroup(props)
 
     const pick = computed({
       get () {
@@ -123,6 +128,8 @@ export default defineComponent({
       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('ui.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

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('ui.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,

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,