refactor: centralize forwarded input attrs

Author: reiroop

src/components/shared/BaseNumberInput.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import BaseInputFrame from './BaseInputFrame.vue'
-import { computed, useAttrs, useId } from 'vue'
+import { useForwardInputAttrs } from './useForwardInputAttrs'
+import { computed, useId } from 'vue'
 
 defineOptions({ inheritAttrs: false })
 
@@ -38,37 +39,13 @@ const emit = defineEmits<{
   (e: 'input' | 'change', value: Event): void
 }>()
 
-const attrs = useAttrs()
-const containerClass = computed(() => attrs.class)
-const containerStyle = computed(() => attrs.style)
-const describedByAttr = computed(
-  () => attrs['aria-describedby'] as string | undefined
-)
-
-const baseForwardedAttrs = computed<Record<string, unknown>>(() => {
-  const rest = { ...(attrs as Record<string, unknown>) }
-  delete rest.class
-  delete rest.style
-  delete rest['aria-describedby']
-  return rest
-})
-
-const isListenerAttr = (key: string) => /^on[A-Z]/.test(key)
-
-const frameAttrs = computed(() =>
-  Object.fromEntries(
-    Object.entries(baseForwardedAttrs.value).filter(
-      ([key]) => !isListenerAttr(key)
-    )
-  )
-)
-
-const inputAttrs = computed<Record<string, unknown>>(() => {
-  const rest = { ...baseForwardedAttrs.value }
-  delete rest.id
-  delete rest.value
-  return rest
-})
+const {
+  containerClass,
+  containerStyle,
+  describedByAttr,
+  frameAttrs,
+  inputAttrs
+} = useForwardInputAttrs()
 
 const generatedId = useId()
 const inputId = computed(() => props.id ?? generatedId)

src/components/shared/BaseTextInput.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import BaseInputFrame from './BaseInputFrame.vue'
-import { computed, useAttrs, useId } from 'vue'
+import { useForwardInputAttrs } from './useForwardInputAttrs'
+import { computed, useId } from 'vue'
 
 defineOptions({ inheritAttrs: false })
 
@@ -46,37 +47,13 @@ const emit = defineEmits<{
   (e: 'input' | 'change', value: Event): void
 }>()
 
-const attrs = useAttrs()
-const containerClass = computed(() => attrs.class)
-const containerStyle = computed(() => attrs.style)
-const describedByAttr = computed(
-  () => attrs['aria-describedby'] as string | undefined
-)
-
-const baseForwardedAttrs = computed<Record<string, unknown>>(() => {
-  const rest = { ...(attrs as Record<string, unknown>) }
-  delete rest.class
-  delete rest.style
-  delete rest['aria-describedby']
-  return rest
-})
-
-const isListenerAttr = (key: string) => /^on[A-Z]/.test(key)
-
-const frameAttrs = computed(() =>
-  Object.fromEntries(
-    Object.entries(baseForwardedAttrs.value).filter(
-      ([key]) => !isListenerAttr(key)
-    )
-  )
-)
-
-const inputAttrs = computed<Record<string, unknown>>(() => {
-  const rest = { ...baseForwardedAttrs.value }
-  delete rest.id
-  delete rest.value
-  return rest
-})
+const {
+  containerClass,
+  containerStyle,
+  describedByAttr,
+  frameAttrs,
+  inputAttrs
+} = useForwardInputAttrs()
 
 const generatedId = useId()
 const inputId = computed(() => props.id ?? generatedId)

src/components/shared/useForwardInputAttrs.ts

@@ -0,0 +1,56 @@
+import { computed, useAttrs } from 'vue'
+
+type Attrs = Record<string, unknown>
+
+const listenerPattern = /^on[A-Z]/
+const frameSpecificKeys = new Set(['role', 'tabindex'])
+
+const shouldStayOnFrame = (key: string) =>
+  key.startsWith('data-') ||
+  key.startsWith('aria-') ||
+  frameSpecificKeys.has(key)
+
+export const useForwardInputAttrs = () => {
+  const attrs = useAttrs()
+
+  const containerClass = computed(() => attrs.class)
+  const containerStyle = computed(() => attrs.style)
+  const describedByAttr = computed(
+    () => attrs['aria-describedby'] as string | undefined
+  )
+
+  const baseForwardedAttrs = computed<Attrs>(() => {
+    const rest = { ...(attrs as Attrs) }
+    delete rest.class
+    delete rest.style
+    delete rest['aria-describedby']
+    return rest
+  })
+
+  const frameAttrs = computed<Attrs>(() =>
+    Object.fromEntries(
+      Object.entries(baseForwardedAttrs.value).filter(([key]) => {
+        if (listenerPattern.test(key)) return false
+        return shouldStayOnFrame(key)
+      })
+    )
+  )
+
+  const inputAttrs = computed<Attrs>(() =>
+    Object.fromEntries(
+      Object.entries(baseForwardedAttrs.value).filter(([key]) => {
+        if (listenerPattern.test(key)) return false
+        if (shouldStayOnFrame(key)) return false
+        return key !== 'id' && key !== 'value'
+      })
+    )
+  )
+
+  return {
+    containerClass,
+    containerStyle,
+    describedByAttr,
+    frameAttrs,
+    inputAttrs
+  }
+}