@veritree/ui 0.87.1 → 0.87.2

package/mixins/floating-ui-content.js

@@ -43,7 +43,18 @@ export const floatingUiContentMixin = {
         this.component.setActive();
 
         setTimeout(() => {
+          if (!this.id) {
+            console.log('No id provided');
+            return;
+          }
+
           this.el = document.getElementById(this.id);
+
+          if (!this.el) {
+            console.log('Element not found', this.id);
+            return;
+          }
+
           this.$emit('shown');
         }, 100);
       });

package/mixins/floating-ui.js

@@ -139,6 +139,11 @@ export const floatingUiMixin = {
       const content = document.getElementById(this.componentContent.id);
       const minWidthLimit = Number(this.floatingUiMinWidth);
 
+      if (!trigger || !content) {
+        console.error('The trigger or content element does not exist.');
+        return;
+      }
+
       if (this.top || this.left) {
         this.positionContentToTriggerByTopAndLeft(
           trigger,

package/mixins/form-control.js

@@ -5,10 +5,6 @@ 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.87.1",
+  "version": "0.87.2",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",

package/src/components/Form/VTInput.vue

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

package/src/components/Form/VTInputDate.vue

@@ -72,6 +72,10 @@ export default {
   },
 
   props: {
+    id: {
+      type: String,
+      default: null,
+    },
     dataTestid: {
       type: String,
       default: null,

package/src/components/Form/VTInputNumber.vue

@@ -37,6 +37,10 @@ export default {
   },
 
   props: {
+    id: {
+      type: String,
+      default: null,
+    },
     dataTestid: {
       type: String,
       default: null,

package/src/components/Listbox/VTListbox.vue

@@ -118,6 +118,10 @@ export default {
   },
 
   props: {
+    id: {
+      type: String,
+      default: null,
+    },
     /**
      * The value of the component. Can be a string, number, object, or array.
      * @type {string|number|object|array}
@@ -171,7 +175,6 @@ export default {
 
   data() {
     return {
-      componentId: genId(),
       componentSearch: null,
       search: '',
       items: [],
@@ -195,8 +198,8 @@ export default {
   },
 
   computed: {
-    id() {
-      return `listbox-${this.componentId}`;
+    componentId() {
+      return `listbox-${this.id || genId()}`;
     },
 
     valueComputed: {

package/src/components/Listbox/VTListboxTrigger.vue

@@ -1,7 +1,7 @@
 <template>
   <button
-    :id="idComputed"
-    :data-testid="dataTestid"
+    :id="id"
+    :data-testid="dataTestidComputed"
     :class="triggerClassComputed"
     :disabled="isDisabled"
     :aria-expanded="expanded"
@@ -47,6 +47,8 @@ export default {
 
   inject: ['apiListbox'],
 
+  inheritAttrs: false,
+
   props: {
     dataTestid: {
       type: String,
@@ -74,8 +76,12 @@ export default {
   },
 
   computed: {
-    idComputed() {
-      return this.id || `listbox-trigger-${this.apiListbox().id}`;
+    id() {
+      return `listbox-trigger-${this.apiListbox().id}`;
+    },
+
+    dataTestidComputed() {
+      return this.dataTestid || `listbox-trigger-${this.apiListbox().id}`;
     },
 
     componentContent() {
@@ -120,7 +126,7 @@ export default {
       el: this.$el,
       cancel: this.cancel,
       focus: this.focus,
-      id: this.idComputed,
+      id: this.id,
     };
 
     this.apiListbox().registerTrigger(trigger);