turn off inheritAttributes on components binding @attrs

RopeScore · Jul 10, 2023 · 2aca939 · 2aca939
1 parent e6aff15
commit 2aca939
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 12 deletions.
diff --git a/lib/components/ButtonLink.vue b/lib/components/ButtonLink.vue
@@ -3,19 +3,20 @@ import TextButton from './TextButton.vue'
 import { RouterLink } from 'vue-router'
 
 defineProps({
-  dense: TextButton.props.dense,
-  disabled: TextButton.props.disabled,
-  selected: TextButton.props.selected,
-  color: TextButton.props.color,
-  // @ts-expect-error is global
-  ...RouterLink.props
+  ...TextButton.props,
 })
 </script>
 
+<script lang="ts">
+export default {
+  inheritAttrs: false
+}
+</script>
+
 <template>
-  <router-link :to="to" v-slot="{ href, navigate, isActive }" v-bind="$props" custom>
+  <router-link :to="to" v-slot="{ href, navigate, isActive }" v-bind="$attrs" custom>
     <a :href="href" @click.prevent="disabled ? null : navigate()">
-      <text-button :dense="dense" :selected="selected" :disabled="disabled">
+      <text-button v-bind="$props">
         <slot :is-active="isActive" />
       </text-button>
     </a>

diff --git a/lib/components/Fields/CheckboxField.vue b/lib/components/Fields/CheckboxField.vue
@@ -29,6 +29,12 @@ defineProps({
 const emit = defineEmits<(event: 'update:modelValue', value: boolean) => void>()
 </script>
 
+<script lang="ts">
+export default {
+  inheritAttrs: false
+}
+</script>
+
 <template>
   <label class="flex gap-2 items-center" :class="{ 'mt-2': !dense, 'cursor-pointer': !disabled }">
     <input

diff --git a/lib/components/Fields/NumberField.vue b/lib/components/Fields/NumberField.vue
@@ -44,9 +44,16 @@ function input (event: any) {
 }
 </script>
 
+<script lang="ts">
+export default {
+  inheritAttrs: false
+}
+</script>
+
 <template>
   <div class="relative" :class="{ 'mt-2': !dense }">
     <input
+      v-bind="$attrs"
       :id="id"
       :name="id"
       type="number"
@@ -55,8 +62,7 @@ function input (event: any) {
       :step="step"
       :placeholder="dense ? label : ' '"
       :value="modelValue"
-      v-bind="$attrs"
-      class="block border-0 border-b-2 w-full bg-transparent disabled:bg-gray-200"
+      class="text-base block border-0 border-b-gray-500 border-b-2 w-full bg-transparent disabled:bg-gray-200 invalid:bg-red-100"
       :class="{
         'p-0': dense,
         'px-0.5': dense,

diff --git a/lib/components/Fields/SelectField.vue b/lib/components/Fields/SelectField.vue
@@ -41,6 +41,12 @@ function text (item: DataListItem) {
 }
 </script>
 
+<script lang="ts">
+export default {
+  inheritAttrs: false
+}
+</script>
+
 <template>
   <div class="relative" :class="{ 'mt-2': !dense }">
     <select

diff --git a/lib/components/Fields/TextField.vue b/lib/components/Fields/TextField.vue
@@ -14,7 +14,7 @@ const props = defineProps({
     default: false
   },
   type: {
-    type: String as PropType<'text' | 'number' | 'date' | 'email'>,
+    type: String as PropType<'text' | 'number' | 'date' | 'email' | 'url'>,
     default: 'text'
   },
   modelValue: {
@@ -50,6 +50,12 @@ function text (item: DataListItem) {
 }
 </script>
 
+<script lang="ts">
+export default {
+  inheritAttrs: false
+}
+</script>
+
 <template>
   <div class="relative" :class="{ 'mt-2': !dense }">
     <input
@@ -75,7 +81,7 @@ function text (item: DataListItem) {
     <label
       v-if="!dense"
       :for="id"
-      class="absolute top-4 left-3 transition-all text-base text-dark-100 cursor-text"
+      class="absolute top-4 left-3 transition-all text-base text-dark-100 cursor-text whitespace-nowrap overflow-ellipsis"
     >{{ label }}</label>
   </div>