@nexxtmove/ui 1.5.0 → 1.7.0

package/package.json

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

package/src/components/Card/Card.vue

@@ -8,9 +8,7 @@ defineProps<Props>()
 </script>
 
 <template>
-  <div
-    class="card bg-color-white inline-flex w-80 flex-col items-start justify-start gap-0 rounded-t-lg"
-  >
+  <div class="card inline-flex w-80 flex-col items-start justify-start gap-0 rounded-t-lg">
     <slot name="image" v-if="image || $slots.image">
       <img
         v-if="image"

package/src/components/ColorPicker/ColorPicker.vue

@@ -113,7 +113,7 @@ watch(
 
 <template>
   <div class="inline-flex flex-col gap-1" :class="{ 'w-full': fullWidth }">
-    <label v-if="label" :for="PICKER_ID" class="text-color-gray-700 justify-start small-normal">
+    <label v-if="label" :for="PICKER_ID" class="justify-start small-normal text-gray-700">
       {{ label }}
       <span v-if="required" class="text-brick-500">*</span>
     </label>

package/src/components/CountrySelect/CountrySelect.vue

@@ -72,7 +72,7 @@ const onOpen = async () => {
 
 <template>
   <div class="inline-flex flex-col gap-1">
-    <label v-if="label" class="text-color-gray-700 justify-start small-normal" :for="selectId">
+    <label v-if="label" class="justify-start small-normal text-gray-700" :for="selectId">
       {{ label }}
       <span v-if="required" class="text-brick-500">*</span>
     </label>

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,8 +68,8 @@ const decrement = () => {
 </script>
 
 <template>
-  <div class="inline-flex flex-col gap-1">
-    <label v-if="label" class="text-color-gray-700 justify-start small-normal" :for="INPUT_ID">
+  <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>
     </label>
@@ -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,8 +66,8 @@ const select = (opt: SelectOption, close: () => void) => {
 </script>
 
 <template>
-  <div class="inline-flex flex-col gap-1">
-    <label v-if="label" class="text-color-gray-700 justify-start small-normal" :for="fieldId">
+  <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>
     </label>
@@ -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>

package/src/components/PropertyListing/PropertyListing.vue

@@ -11,19 +11,16 @@ defineProps<Props>()
 <template>
   <div class="flex flex-col items-start justify-start gap-2 self-stretch overflow-hidden">
     <div class="inline-flex w-full items-center gap-2 overflow-hidden">
-      <div v-if="price" class="text-color-gray-950 shrink-0 body-semibold">
+      <div v-if="price" class="shrink-0 body-semibold text-gray-950">
         € {{ price.toLocaleString('nl-NL') }}
       </div>
-      <div v-if="price" class="text-color-gray-950 shrink-0 body-normal">|</div>
-      <div
-        class="text-color-gray-950 min-w-0 truncate"
-        :class="price ? 'body-normal' : 'body-semibold'"
-      >
+      <div v-if="price" class="shrink-0 body-normal text-gray-950">|</div>
+      <div class="min-w-0 truncate text-gray-950" :class="price ? 'body-normal' : 'body-semibold'">
         {{ city }}
       </div>
     </div>
 
-    <div v-if="text" class="text-color-gray-950 wrap-break-words w-full body-normal">
+    <div v-if="text" class="wrap-break-words w-full body-normal text-gray-950">
       {{ text }}
     </div>
   </div>

package/src/components/Select/Select.vue

@@ -123,7 +123,7 @@ watch(model, () => {
 
 <template>
   <div class="inline-flex flex-col gap-1">
-    <label v-if="label" class="text-color-gray-700 justify-start small-normal" :for="selectId">
+    <label v-if="label" class="justify-start small-normal text-gray-700" :for="selectId">
       {{ label }}
       <span v-if="required" class="text-brick-500">*</span>
     </label>

package/src/components/ToggleGroup/ToggleGroup.vue

@@ -70,7 +70,7 @@ onMounted(async () => {
 
 <template>
   <div class="flex flex-col gap-1">
-    <label v-if="label" class="text-color-gray-700 justify-start small-normal">
+    <label v-if="label" class="justify-start small-normal text-gray-700">
       {{ label }}
     </label>
     <div