@veritree/ui 0.86.0 → 0.87.0

package/mixins/form-control.js

@@ -5,6 +5,10 @@ export const formControlMixin = {
   },
 
   props: {
+    id: {
+      type: String,
+      default: null,
+    },
     disabled: {
       type: Boolean,
       default: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritree/ui",
-  "version": "0.86.0",
+  "version": "0.87.0",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",

package/src/components/Form/VTInput.vue

@@ -19,6 +19,13 @@ export default {
 
   mixins: [formControlMixin, formControlStyleMixin],
 
+  props: {
+    dataTestId: {
+      type: String,
+      default: null,
+    },
+  },
+
   data() {
     return {
       name: 'input',

package/src/components/Form/VTInputDate.vue

@@ -1,7 +1,13 @@
 <template>
   <VTPopover>
     <VTPopoverTrigger ref="trigger">
-      <button :class="classComputed" :disabled="disabled" @click.prevent>
+      <button
+        :id="id"
+        :class="classComputed"
+        :data-testid="dataTestid"
+        :disabled="disabled"
+        @click.prevent
+      >
         <span v-if="valueModel">{{ valueModelFormatted }}</span>
         <span class="text-gray-500" v-else>{{ format }}</span>
         <span
@@ -66,6 +72,10 @@ export default {
   },
 
   props: {
+    dataTestid: {
+      type: String,
+      default: null,
+    },
     disabledDates: {
       type: [Function, Object],
       default: null,

package/src/components/Form/VTInputNumber.vue

@@ -4,7 +4,9 @@
       currencySymbol
     }}</span>
     <input
+      :id="id"
       v-model="valueFormatted"
+      :data-testid="dataTestid"
       :disabled="disabled"
       :inputmode="inputmode"
       :placeholder="placeholder"
@@ -35,6 +37,10 @@ export default {
   },
 
   props: {
+    dataTestid: {
+      type: String,
+      default: null,
+    },
     currency: {
       type: String,
       default: 'USD',

package/src/components/Form/VTInputRanger.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="range-slider" :style="style">
     <input
+      :id="id"
       v-model.number="computedValue"
+      :data-testid="dataTestid"
       :min="min"
       :max="max"
       :step="step"
@@ -24,6 +26,14 @@ export default {
   },
 
   props: {
+    id: {
+      type: String,
+      default: null,
+    },
+    dataTestid: {
+      type: String,
+      default: null,
+    },
     value: {
       type: [Number, String],
       default: 0,

package/src/components/Listbox/VTListboxTrigger.vue

@@ -1,6 +1,7 @@
 <template>
   <button
     :id="id"
+    :data-testid="dataTestid"
     :class="triggerClassComputed"
     :disabled="isDisabled"
     :aria-expanded="expanded"
@@ -47,6 +48,10 @@ export default {
   inject: ['apiListbox'],
 
   props: {
+    dataTestid: {
+      type: String,
+      default: null,
+    },
     role: {
       type: String,
       default: 'combobox',
@@ -69,8 +74,8 @@ export default {
   },
 
   computed: {
-    id() {
-      return `listbox-trigger-${this.apiListbox().id}`;
+    idComputed() {
+      return this.id || `listbox-trigger-${this.apiListbox().id}`;
     },
 
     componentContent() {