refactor(FormGroup): use computed size in all input components

src/runtime/components/forms/Radio.vue

@@ -2,7 +2,6 @@
   <div :class="ui.wrapper">
     <div class="flex items-center h-5">
       <input
-        :id="`${name}-${value}`"
         v-model="pick"
         :name="name"
         :required="required"

src/runtime/components/forms/Range.vue

@@ -1,7 +1,6 @@
 <template>
   <div :class="wrapperClass">
     <input
-      :id="name"
       ref="input"
       v-model.number="value"
       :name="name"
@@ -83,7 +82,8 @@ export default defineComponent({
 
     const ui = computed<Partial<typeof appConfig.ui.range>>(() => defu({}, props.ui, appConfig.ui.range))
 
-    const { emitFormBlur } = useFormGroup()
+    const { emitFormBlur, formGroup } = useFormGroup()
+    const size = computed(() => formGroup?.size?.value ?? props.size)
 
     const value = computed({
       get () {
@@ -102,7 +102,7 @@ export default defineComponent({
     const wrapperClass = computed(() => {
       return classNames(
         ui.value.wrapper,
-        ui.value.size[props.size]
+        ui.value.size[size.value]
       )
     })
 
@@ -112,7 +112,7 @@ export default defineComponent({
         ui.value.background,
         ui.value.rounded,
         ui.value.ring.replaceAll('{color}', props.color),
-        ui.value.size[props.size]
+        ui.value.size[size.value]
       )
     })
 
@@ -123,7 +123,7 @@ export default defineComponent({
         ui.value.thumb.color.replaceAll('{color}', props.color),
         ui.value.thumb.ring,
         ui.value.thumb.background,
-        ui.value.thumb.size[props.size]
+        ui.value.thumb.size[size.value]
       )
     })
 
@@ -132,7 +132,7 @@ export default defineComponent({
         ui.value.track.base,
         ui.value.track.background,
         ui.value.track.rounded,
-        ui.value.track.size[props.size]
+        ui.value.track.size[size.value]
       )
     })
 
@@ -141,7 +141,7 @@ export default defineComponent({
         ui.value.progress.base,
         ui.value.progress.rounded,
         ui.value.progress.background.replaceAll('{color}', props.color),
-        ui.value.progress.size[props.size]
+        ui.value.progress.size[size.value]
       )
     })
 

src/runtime/components/forms/Select.vue

@@ -1,7 +1,6 @@
 <template>
   <div :class="ui.wrapper">
     <select
-      :id="name"
       :name="name"
       :value="modelValue"
       :required="required"
@@ -174,7 +173,9 @@ export default defineComponent({
 
     const ui = computed<Partial<typeof appConfig.ui.select>>(() => defu({}, props.ui, appConfig.ui.select))
 
-    const { emitFormBlur } = useFormGroup()
+    const { emitFormBlur, formGroup } = useFormGroup()
+    const size = computed(() => formGroup?.size?.value ?? props.size)
+
 
     const onInput = (event: InputEvent) => {
       emit('update:modelValue', (event.target as HTMLInputElement).value)
@@ -243,11 +244,11 @@ export default defineComponent({
       return classNames(
         ui.value.base,
         ui.value.rounded,
-        ui.value.size[props.size],
-        props.padded ? ui.value.padding[props.size] : 'p-0',
+        ui.value.size[size.value],
+        props.padded ? ui.value.padding[size.value] : 'p-0',
         variant?.replaceAll('{color}', props.color),
-        (isLeading.value || slots.leading) && ui.value.leading.padding[props.size],
-        (isTrailing.value || slots.trailing) && ui.value.trailing.padding[props.size]
+        (isLeading.value || slots.leading) && ui.value.leading.padding[size.value],
+        (isTrailing.value || slots.trailing) && ui.value.trailing.padding[size.value]
       )
     })
 
@@ -279,15 +280,15 @@ export default defineComponent({
       return classNames(
         ui.value.icon.leading.wrapper,
         ui.value.icon.leading.pointer,
-        ui.value.icon.leading.padding[props.size]
+        ui.value.icon.leading.padding[size.value]
       )
     })
 
     const leadingIconClass = computed(() => {
       return classNames(
         ui.value.icon.base,
         appConfig.ui.colors.includes(props.color) && ui.value.icon.color.replaceAll('{color}', props.color),
-        ui.value.icon.size[props.size],
+        ui.value.icon.size[size.value],
         props.loading && 'animate-spin'
       )
     })
@@ -296,15 +297,15 @@ export default defineComponent({
       return classNames(
         ui.value.icon.trailing.wrapper,
         ui.value.icon.trailing.pointer,
-        ui.value.icon.trailing.padding[props.size]
+        ui.value.icon.trailing.padding[size.value]
       )
     })
 
     const trailingIconClass = computed(() => {
       return classNames(
         ui.value.icon.base,
         appConfig.ui.colors.includes(props.color) && ui.value.icon.color.replaceAll('{color}', props.color),
-        ui.value.icon.size[props.size],
+        ui.value.icon.size[size.value],
         props.loading && !isLeading.value && 'animate-spin'
       )
     })

src/runtime/components/forms/SelectMenu.vue

@@ -304,7 +304,8 @@ export default defineComponent({
     const popper = computed<PopperOptions>(() => defu({}, props.popper, uiMenu.value.popper as PopperOptions))
 
     const [trigger, container] = usePopper(popper.value)
-    const { emitFormBlur } = useFormGroup()
+    const { emitFormBlur, formGroup } = useFormGroup()
+    const size = computed(() => formGroup?.size?.value ?? props.size)
 
     const query = ref('')
     const searchInput = ref<ComponentPublicInstance<HTMLElement>>()
@@ -316,12 +317,12 @@ export default defineComponent({
         ui.value.base,
         ui.value.rounded,
         'text-left cursor-default',
-        ui.value.size[props.size],
-        ui.value.gap[props.size],
-        props.padded ? ui.value.padding[props.size] : 'p-0',
+        ui.value.size[size.value],
+        ui.value.gap[size.value],
+        props.padded ? ui.value.padding[size.value] : 'p-0',
         variant?.replaceAll('{color}', props.color),
-        (isLeading.value || slots.leading) && ui.value.leading.padding[props.size],
-        (isTrailing.value || slots.trailing) && ui.value.trailing.padding[props.size],
+        (isLeading.value || slots.leading) && ui.value.leading.padding[size.value],
+        (isTrailing.value || slots.trailing) && ui.value.trailing.padding[size.value],
         'inline-flex items-center'
       )
     })
@@ -354,15 +355,15 @@ export default defineComponent({
       return classNames(
         ui.value.icon.leading.wrapper,
         ui.value.icon.leading.pointer,
-        ui.value.icon.leading.padding[props.size]
+        ui.value.icon.leading.padding[size.value]
       )
     })
 
     const leadingIconClass = computed(() => {
       return classNames(
         ui.value.icon.base,
         appConfig.ui.colors.includes(props.color) && ui.value.icon.color.replaceAll('{color}', props.color),
-        ui.value.icon.size[props.size],
+        ui.value.icon.size[size.value],
         props.loading && 'animate-spin'
       )
     })
@@ -371,15 +372,15 @@ export default defineComponent({
       return classNames(
         ui.value.icon.trailing.wrapper,
         ui.value.icon.trailing.pointer,
-        ui.value.icon.trailing.padding[props.size]
+        ui.value.icon.trailing.padding[size.value]
       )
     })
 
     const trailingIconClass = computed(() => {
       return classNames(
         ui.value.icon.base,
         appConfig.ui.colors.includes(props.color) && ui.value.icon.color.replaceAll('{color}', props.color),
-        ui.value.icon.size[props.size],
+        ui.value.icon.size[size.value],
         props.loading && !isLeading.value && 'animate-spin'
       )
     })

src/runtime/components/forms/Textarea.vue

@@ -1,7 +1,6 @@
 <template>
   <div :class="ui.wrapper">
     <textarea
-      :id="name"
       ref="textarea"
       :value="modelValue"
       :name="name"
@@ -112,7 +111,8 @@ export default defineComponent({
 
     const ui = computed<Partial<typeof appConfig.ui.textarea>>(() => defu({}, props.ui, appConfig.ui.textarea))
 
-    const { emitFormBlur } = useFormGroup()
+    const { emitFormBlur, formGroup } = useFormGroup()
+    const size = computed(() => formGroup?.size?.value ?? props.size)
 
     const autoFocus = () => {
       if (props.autofocus) {
@@ -177,8 +177,8 @@ export default defineComponent({
         ui.value.base,
         ui.value.rounded,
         ui.value.placeholder,
-        ui.value.size[props.size],
-        props.padded ? ui.value.padding[props.size] : 'p-0',
+        ui.value.size[size.value],
+        props.padded ? ui.value.padding[size.value] : 'p-0',
         variant?.replaceAll('{color}', props.color),
         !props.resize && 'resize-none'
       )