fix(forms)!: bind $attrs to elements (#279)

docs/components/ThemeSelect.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="flex items-center shadow-sm">
-    <ClientOnly>
+  <ClientOnly>
+    <div class="inline-flex shadow-sm rounded-md">
       <USelectMenu
         v-model="primary"
         name="primary"
-        class="w-full [&>div>button]:!rounded-r-none"
+        class="!rounded-r-none !shadow-none focus:z-[1]"
         color="gray"
         :ui="{ width: 'w-[194px]' }"
         :popper="{ placement: 'bottom-start' }"
@@ -22,15 +22,13 @@
           {{ option.text }}
         </template>
       </USelectMenu>
-    </ClientOnly>
 
-    <ClientOnly>
       <USelectMenu
         v-model="gray"
         name="gray"
-        class="w-full [&>div>button]:!rounded-l-none [&>div>button]:-ml-px"
+        class="!rounded-l-none !shadow-none"
         color="gray"
-        :ui="{ width: 'w-[194px]' }"
+        :ui="{ width: 'w-[194px]', wrapper: '-ml-px' }"
         :popper="{ placement: 'bottom-end' }"
         :options="grayOptions"
       >
@@ -46,8 +44,8 @@
           {{ option.text }}
         </template>
       </USelectMenu>
-    </ClientOnly>
-  </div>
+    </div>
+  </ClientOnly>
 </template>
 
 <script setup lang="ts">

docs/components/content/ComponentCard.vue

@@ -8,18 +8,16 @@
           v-model="componentProps[prop.name]"
           :name="`prop-${prop.name}`"
           variant="none"
-          class="justify-center"
+          :ui="{ wrapper: 'relative flex items-start justify-center' }"
         />
         <USelectMenu
           v-else-if="prop.type === 'string' && prop.options.length"
           v-model="componentProps[prop.name]"
           :options="prop.options"
           :name="`prop-${prop.name}`"
-          :label="componentProps[prop.name]"
           variant="none"
-          class="inline-flex"
-          :ui="{ width: 'w-32 !-mt-px', rounded: 'rounded-b-md' }"
-          :ui-select="{ custom: '!py-0' }"
+          :ui="{ width: 'w-32 !-mt-px', rounded: 'rounded-b-md', wrapper: 'relative inline-flex' }"
+          class="!py-0"
           :popper="{ strategy: 'fixed', placement: 'bottom-start' }"
         />
         <UInput
@@ -29,7 +27,7 @@
           :name="`prop-${prop.name}`"
           variant="none"
           autocomplete="off"
-          :ui="{ custom: '!py-0' }"
+          class="!py-0"
           @update:model-value="val => componentProps[prop.name] = prop.type === 'number' ? Number(val) : val"
         />
       </div>

src/runtime/app.config.ts

@@ -281,7 +281,6 @@ const input = {
   base: 'relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0',
   rounded: 'rounded-md',
   placeholder: 'placeholder-gray-400 dark:placeholder-gray-500',
-  custom: '',
   size: {
     '2xs': 'text-xs',
     xs: 'text-xs',

src/runtime/components/forms/Checkbox.vue

@@ -13,6 +13,7 @@
         type="checkbox"
         class="form-checkbox"
         :class="[ui.base, ui.rounded, ui.custom]"
+        v-bind="$attrs"
         @focus="$emit('focus', $event)"
         @blur="$emit('blur', $event)"
       >
@@ -41,6 +42,7 @@ import appConfig from '#build/app.config'
 // const appConfig = useAppConfig()
 
 export default defineComponent({
+  inheritAttrs: false,
   props: {
     value: {
       type: [String, Number, Boolean, Object],

src/runtime/components/forms/Input.vue

@@ -9,11 +9,9 @@
       :required="required"
       :placeholder="placeholder"
       :disabled="disabled || loading"
-      :readonly="readonly"
-      :autocomplete="autocomplete"
-      :spellcheck="spellcheck"
       class="form-input"
       :class="inputClass"
+      v-bind="$attrs"
       @input="onInput"
       @focus="$emit('focus', $event)"
       @blur="$emit('blur', $event)"
@@ -51,6 +49,7 @@ export default defineComponent({
   components: {
     UIcon
   },
+  inheritAttrs: false,
   props: {
     modelValue: {
       type: [String, Number],
@@ -76,22 +75,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
-    readonly: {
-      type: Boolean,
-      default: false
-    },
     autofocus: {
       type: Boolean,
       default: false
     },
-    autocomplete: {
-      type: String,
-      default: null
-    },
-    spellcheck: {
-      type: Boolean,
-      default: null
-    },
     icon: {
       type: String,
       default: null
@@ -189,8 +176,7 @@ export default defineComponent({
         props.padded ? ui.value.padding[props.size] : '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],
-        ui.value.custom
+        (isTrailing.value || slots.trailing) && ui.value.trailing.padding[props.size]
       )
     })
 

src/runtime/components/forms/Radio.vue

@@ -11,6 +11,7 @@
         type="radio"
         class="form-radio"
         :class="[ui.base, ui.custom]"
+        v-bind="$attrs"
         @focus="$emit('focus', $event)"
         @blur="$emit('blur', $event)"
       >
@@ -39,6 +40,7 @@ import appConfig from '#build/app.config'
 // const appConfig = useAppConfig()
 
 export default defineComponent({
+  inheritAttrs: false,
   props: {
     value: {
       type: [String, Number, Boolean],

src/runtime/components/forms/Select.vue

@@ -8,6 +8,7 @@
       :disabled="disabled || loading"
       class="form-select"
       :class="selectClass"
+      v-bind="$attrs"
       @input="onInput"
     >
       <template v-for="(option, index) in normalizedOptionsWithPlaceholder">
@@ -69,6 +70,7 @@ export default defineComponent({
   components: {
     UIcon
   },
+  inheritAttrs: false,
   props: {
     modelValue: {
       type: [String, Number, Object],
@@ -236,8 +238,7 @@ export default defineComponent({
         props.padded ? ui.value.padding[props.size] : '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],
-        ui.value.custom
+        (isTrailing.value || slots.trailing) && ui.value.trailing.padding[props.size]
       )
     })
 

src/runtime/components/forms/SelectMenu.vue

@@ -28,7 +28,7 @@
       class="inline-flex w-full"
     >
       <slot :open="open" :disabled="disabled" :loading="loading">
-        <button :class="selectMenuClass" :disabled="disabled || loading" type="button">
+        <button :class="selectMenuClass" :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" />
@@ -146,6 +146,7 @@ export default defineComponent({
     UIcon,
     UAvatar
   },
+  inheritAttrs: false,
   props: {
     modelValue: {
       type: [String, Number, Object, Array],
@@ -300,7 +301,6 @@ export default defineComponent({
         variant?.replaceAll('{color}', props.color),
         (isLeading.value || slots.leading) && uiSelect.value.leading.padding[props.size],
         (isTrailing.value || slots.trailing) && uiSelect.value.trailing.padding[props.size],
-        uiSelect.value.custom,
         'inline-flex items-center'
       )
     })

src/runtime/components/forms/Textarea.vue

@@ -9,9 +9,9 @@
       :required="required"
       :disabled="disabled"
       :placeholder="placeholder"
-      :autocomplete="autocomplete"
       class="form-textarea"
       :class="textareaClass"
+      v-bind="$attrs"
       @input="onInput"
       @focus="$emit('focus', $event)"
       @blur="$emit('blur', $event)"
@@ -32,6 +32,7 @@ import appConfig from '#build/app.config'
 // const appConfig = useAppConfig()
 
 export default defineComponent({
+  inheritAttrs: false,
   props: {
     modelValue: {
       type: [String, Number],
@@ -65,10 +66,6 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
-    autocomplete: {
-      type: String,
-      default: null
-    },
     resize: {
       type: Boolean,
       default: false
@@ -170,8 +167,7 @@ export default defineComponent({
         ui.value.size[props.size],
         props.padded ? ui.value.padding[props.size] : 'p-0',
         variant?.replaceAll('{color}', props.color),
-        !props.resize && 'resize-none',
-        ui.value.custom
+        !props.resize && 'resize-none'
       )
     })