chore(input): allow data attrs (#76)

.changeset/pink-rabbits-cheat.md

@@ -0,0 +1,5 @@
+---
+"@indielayer/ui": patch
+---
+
+chore(input): allow data attrs

packages/ui/docs/pages/component/input/usage.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-const name = ref(0)
+const name = ref('John')
 </script>
 
 <template>
   <x-input
     v-model="name"
-    label="Label here"
+    label="Name"
+    name="name"
     placeholder="Placeholder"
     helper="Helper text here"
     tooltip="Tooltip here"

packages/ui/src/components/input/Input.vue

@@ -42,7 +42,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, type PropType, type ExtractPublicPropTypes, watch } from 'vue'
+import { ref, type PropType, type ExtractPublicPropTypes, watch, useAttrs, computed } from 'vue'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 import { useColors } from '../../composables/useColors'
 import { useCommon } from '../../composables/useCommon'
@@ -58,6 +58,15 @@ const props = defineProps(inputProps)
 
 const emit = defineEmits(useInputtable.emits())
 
+const attrs = useAttrs()
+const dataAttrs = computed(() => {
+  return Object.keys(attrs).reduce((acc, key) => {
+    if (key.startsWith('data-')) acc[key] = attrs[key]
+
+    return acc
+  }, {} as Record<string, any>)
+})
+
 const elRef = ref<HTMLInputElement | null>(null)
 const currentType = ref(props.type)
 
@@ -153,6 +162,7 @@ defineExpose({ focus, blur, reset, validate, setError })
         :readonly="readonly"
         :type="currentType"
         :value="typeof modelValue !== 'undefined' ? modelValue : ''"
+        v-bind="dataAttrs"
         v-on="inputListeners"
         @change="onChange"
       />

packages/ui/src/components/textarea/Textarea.vue

@@ -38,7 +38,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, watch, type ExtractPublicPropTypes, type Ref } from 'vue'
+import { ref, watch, type ExtractPublicPropTypes, type Ref, useAttrs, computed } from 'vue'
 import { useResizeObserver, useEventListener } from '@vueuse/core'
 import { useCSS } from '../../composables/useCSS'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
@@ -54,6 +54,15 @@ const props = defineProps(textareaProps)
 
 const emit = defineEmits(useInputtable.emits())
 
+const attrs = useAttrs()
+const dataAttrs = computed(() => {
+  return Object.keys(attrs).reduce((acc, key) => {
+    if (key.startsWith('data-')) acc[key] = attrs[key]
+
+    return acc
+  }, {} as Record<string, any>)
+})
+
 const elRef = ref<HTMLTextAreaElement | null>(null)
 
 useResizeObserver(elRef, resize)
@@ -139,6 +148,7 @@ defineExpose({ focus, blur, reset, validate, setError })
       :placeholder="placeholder"
       :readonly="readonly"
       :value="typeof modelValue !== 'undefined' ? String(modelValue) : ''"
+      v-bind="dataAttrs"
       v-on="inputListeners"
       @keydown.enter="onEnter"
       @input="onInput"