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

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'
       )
     })