@nexxtmove/ui 1.6.0 → 1.7.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/components/InputField/InputField.vue

@@ -1,11 +1,29 @@
 <script setup lang="ts">
-import { computed, getCurrentInstance, useTemplateRef } from 'vue'
+import { computed, getCurrentInstance, useAttrs, useTemplateRef } from 'vue'
 import Icon from '../Icon/Icon.vue'
 
 const INPUT_ID = 'input-field-' + Math.random().toString(36).slice(2, 10)
 
+const attrs = useAttrs()
+
+// `class` and `style` describe where the field sits in the consumer's layout,
+// so they belong on the outer wrapper. Everything else -- id, name, type,
+// placeholder, data-* , aria-* -- describes the control, so it goes to the
+// input. Nothing lands on both any more.
+const inputAttrs = computed(() => {
+  const rest: Record<string, unknown> = { ...attrs }
+  delete rest.class
+  delete rest.style
+  return rest
+})
+
 defineOptions({
   name: 'NexxtInputField',
+  // Attributes used to land twice: Vue applied them to the root *and* the
+  // explicit v-bind put them on the input. `id` was therefore duplicated across
+  // two elements, and a consumer's layout class ended up on an input that
+  // already carries `w-full` itself. Routing is now explicit: see the template.
+  inheritAttrs: false,
 })
 
 export interface NexxtInputFieldProps {
@@ -50,7 +68,7 @@ const decrement = () => {
 </script>
 
 <template>
-  <div class="inline-flex flex-col gap-1">
+  <div class="inline-flex flex-col gap-1" :class="attrs.class" :style="attrs.style">
     <label v-if="label" class="justify-start small-normal text-gray-700" :for="INPUT_ID">
       {{ label }}
       <span v-if="required" class="text-brick-500">*</span>
@@ -69,7 +87,7 @@ const decrement = () => {
         :id="INPUT_ID"
         v-model="modelValue"
         :placeholder="placeholder"
-        v-bind="$attrs"
+        v-bind="inputAttrs"
         class="bg-transparant h-10 w-full min-w-60 text-sm text-gray-900 placeholder-gray-400 focus:outline-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
         :class="{ 'pl-3': !leftIcon, 'pr-3': !rightIcon }"
       />

package/src/components/InputSelect/InputSelect.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, useAttrs } from 'vue'
 import NexxtIcon from '../Icon/Icon.vue'
 import NexxtFloatingPanel from '../FloatingPanel/FloatingPanel.vue'
 import type Icon from '../Icon/Icon.vue'
@@ -11,7 +11,24 @@ const generateId = () => 'input-select-' + Math.random().toString(36).slice(2, 1
 const fieldId = generateId()
 const selectId = generateId()
 
-defineOptions({ name: 'NexxtInputSelect' })
+const attrs = useAttrs()
+
+// `class` and `style` position the field in the consumer's layout and belong on
+// the wrapper; everything else describes the control and goes to the input.
+const inputAttrs = computed(() => {
+  const rest: Record<string, unknown> = { ...attrs }
+  delete rest.class
+  delete rest.style
+  return rest
+})
+
+defineOptions({
+  name: 'NexxtInputSelect',
+  // Same routing as NexxtInputField: attributes used to land on the root and
+  // the input at once, duplicating `id` and putting layout classes on a control
+  // that is already full-width. See the template.
+  inheritAttrs: false,
+})
 
 export interface NexxtInputSelectProps {
   options: SelectOption[]
@@ -49,7 +66,7 @@ const select = (opt: SelectOption, close: () => void) => {
 </script>
 
 <template>
-  <div class="inline-flex flex-col gap-1">
+  <div class="inline-flex flex-col gap-1" :class="attrs.class" :style="attrs.style">
     <label v-if="label" class="justify-start small-normal text-gray-700" :for="fieldId">
       {{ label }}
       <span v-if="required" class="text-brick-500">*</span>
@@ -114,7 +131,7 @@ const select = (opt: SelectOption, close: () => void) => {
         :id="fieldId"
         v-model="inputModel"
         :placeholder="placeholder"
-        v-bind="$attrs"
+        v-bind="inputAttrs"
         class="bg-transparant h-10 w-full min-w-40 px-3 text-sm text-gray-900 placeholder-gray-400 focus:outline-none"
       />
     </div>