feat(Form): use nuxt useId to bind input labels (#1211)

src/runtime/components/forms/Form.vue

@@ -5,6 +5,7 @@
 </template>
 
 <script lang="ts">
+import { useId } from '#app'
 import { provide, ref, type PropType, defineComponent, onUnmounted, onMounted } from 'vue'
 import { useEventBus } from '@vueuse/core'
 import type { ZodSchema } from 'zod'
@@ -12,7 +13,6 @@ 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, FormErrorEvent, Form } from '../../types/form'
-import { uid } from '../../utils/uid'
 
 class FormException extends Error {
   constructor (message: string) {
@@ -49,7 +49,8 @@ export default defineComponent({
   },
   emits: ['submit', 'error'],
   setup (props, { expose, emit }) {
-    const bus = useEventBus<FormEvent>(`form-${uid()}`)
+    const formId = useId()
+    const bus = useEventBus<FormEvent>(`form-${formId}`)
 
     onMounted(() => {
       bus.on(async (event) => {

src/runtime/components/forms/FormGroup.vue

@@ -38,6 +38,7 @@
 </template>
 
 <script lang="ts">
+import { useId } from '#app'
 import { computed, defineComponent, provide, inject, ref, toRef } from 'vue'
 import type { Ref, PropType } from 'vue'
 import { useUI } from '../../composables/useUI'
@@ -112,7 +113,7 @@ export default defineComponent({
     })
 
     const size = computed(() => ui.value.size[props.size ?? config.default.size])
-    const inputId = ref()
+    const inputId = ref(useId())
 
     provide<InjectedFormGroupValue>('form-group', {
       error,

src/runtime/components/forms/Radio.vue

@@ -26,7 +26,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, toRef, onMounted, ref } from 'vue'
+import { useId } from '#app'
+import { computed, defineComponent, inject, toRef } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
@@ -36,17 +37,15 @@ 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'
 import { useFormGroup } from '../../composables/useFormGroup'
 
 const config = mergeConfig<typeof radio>(appConfig.ui.strategy, appConfig.ui.radio, radio)
 
 export default defineComponent({
-  inheritAttrs: false,
   props: {
     id: {
       type: String,
-      default: () => null
+      default: null
     },
     value: {
       type: [String, Number, Boolean],
@@ -100,15 +99,10 @@ export default defineComponent({
   setup (props, { emit }) {
     const { ui, attrs } = useUI('radio', toRef(props, 'ui'), config, toRef(props, 'class'))
 
+    const inputId = props.id ?? useId()
+
     const radioGroup = inject('radio-group', null)
     const { emitFormChange, color, name } = radioGroup ?? useFormGroup(props, config)
-    const inputId = ref(props.id)
-
-    onMounted(() => {
-      if (!inputId.value) {
-        inputId.value = uid()
-      }
-    })
 
     const pick = computed({
       get () {

src/runtime/composables/useFormGroup.ts

@@ -1,7 +1,6 @@
-import { inject, ref, computed, onMounted } from 'vue'
+import { inject, ref, computed } from 'vue'
 import { type UseEventBusReturn, useDebounceFn } from '@vueuse/core'
 import type { FormEvent, FormEventType, InjectedFormGroupValue } from '../types/form'
-import { uid } from '../utils/uid'
 
 type InputProps = {
   id?: string
@@ -17,21 +16,16 @@ export const useFormGroup = (inputProps?: InputProps, config?: any) => {
     const formGroup = inject<InjectedFormGroupValue | undefined>('form-group', undefined)
     const formInputs = inject<any>('form-inputs', undefined)
 
-    const inputId = ref(inputProps?.id)
+    if (formGroup) {
-
+      if (inputProps?.id) {
-    onMounted(() => {
-      // Remove FormGroup label bindings for RadioGroup elements to avoid label conflicts
-      inputId.value = inputProps?.legend === null || inputProps.legend ? undefined : inputProps?.id ?? uid()
-
-      if (formGroup) {
         // Updates for="..." attribute on label if inputProps.id is provided
-        formGroup.inputId.value = inputId.value
+        formGroup.inputId.value = inputProps?.id
-
-        if (formInputs) {
-          formInputs.value[formGroup.name.value] = inputId
-        }
       }
-    })
+
+      if (formInputs) {
+        formInputs.value[formGroup.name.value] = formGroup.inputId.value
+      }
+    }
 
     const blurred = ref(false)
 
@@ -57,7 +51,7 @@ export const useFormGroup = (inputProps?: InputProps, config?: any) => {
     }, 300)
 
     return {
-      inputId,
+      inputId: computed(() => inputProps?.id ?? formGroup?.inputId.value),
       name: computed(() => inputProps?.name ?? formGroup?.name.value),
       size: computed(() => {
         const formGroupSize = config.size[formGroup?.size.value as string] ? formGroup?.size.value : null

src/runtime/utils/uid.ts

@@ -1,6 +0,0 @@
-let _id = 0
-
-export function uid () {
-  _id = (_id + 1) % Number.MAX_SAFE_INTEGER
-  return `nuid-${_id}`
-}