@veritree/ui 0.19.2-3 → 0.19.2-5

package/src/components/Popover/VTPopoverItem.vue

@@ -18,7 +18,7 @@
 export default {
   name: 'VTPopoverItem',
 
-  inject: ['api'],
+  inject: ['apiPopover'],
 
   props: {
     to: {
@@ -33,15 +33,19 @@ export default {
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiPopover().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiPopover().isHeadless;
     },
 
     as() {
-      return this.href ? 'a' : this.to ? 'NuxtLink' : 'button';
+      return this.href
+        ? 'a'
+        : this.to
+        ? resolveComponent('NuxtLink')
+        : 'button';
     },
   },
 

package/src/components/Popover/VTPopoverTrigger.vue

@@ -8,32 +8,37 @@
 export default {
   name: 'VTPopoverTrigger',
 
-  inject: ['api'],
+  inject: ['apiPopover'],
 
   computed: {
     content() {
-      return this.api().content;
+      return this.apiPopover().content;
     },
   },
 
   mounted() {
-    this.api().registerButton(this);
-    this.handleSlotTrigger();
+    this.apiPopover().registerButton(this);
+    this.setTrigger();
+    this.addTriggerEvents();
   },
 
   methods: {
-    handleSlotTrigger() {
-      const slot = this.$slots.default;
-      const trigger = slot[0].elm;
-
-      if (slot.length > 1) {
-        console.error('VTPopoverButton only accepts one item in its slot');
-        return;
-      }
-
-      trigger.addEventListener('click', (e) => {
-        this.onClick();
-        e.stopPropagation();
+    setTrigger() {
+      this.trigger = this.$el.querySelector(':first-child');
+    },
+
+    addTriggerEvents() {
+      this.trigger.addEventListener('click', (e) => {
+        if (this.expanded) {
+          this.onClick();
+          return;
+        }
+
+        // delay stop propagation to close other visible
+        // dropdowns and delay click event to control
+        // this dropdown visibility
+        setTimeout(() => e.stopImmediatePropagation(), 50);
+        setTimeout(() => this.onClick(), 100);
       });
     },
 

package/src/components/Transitions/FadeInOut.vue

@@ -1,10 +1,10 @@
 <template>
   <transition
     enter-active-class="duration-300 ease-out"
-    enter-class="transform opacity-0"
+    enter-from-class="transform opacity-0"
     enter-to-class="opacity-100"
     leave-active-class="duration-300 ease-in"
-    leave-class="opacity-100"
+    leave-from-class="opacity-100"
     leave-to-class="transform opacity-0"
     @after-enter="afterEnter"
     @after-leave="afterLeave"

package/src/utils/genId.js

@@ -1,13 +0,0 @@
-// Generate id
-// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*
-let gen = null;
-
-function* idMaker() {
-  let index = 0;
-  while (true) yield index++;
-}
-
-export const genId = () => {
-  if (!gen) gen = idMaker();
-  return gen.next().value;
-};