@veritree/ui 0.19.2-3 → 0.19.2-5

package/src/components/DropdownMenu/VTDropdownMenuContent.vue

@@ -1,10 +1,10 @@
 <template>
   <transition
     enter-active-class="duration-200 ease-out"
-    enter-class="translate-y-[15px] opacity-0"
+    enter-from-class="translate-y-[15px] opacity-0"
     enter-to-class="translate-y-0 opacity-100"
     leave-active-class="duration-200 ease-in"
-    leave-class="translate-y-0 opacity-100"
+    leave-from-class="translate-y-0 opacity-100"
     leave-to-class="translate-y-[15px] opacity-0"
     @after-leave="hide"
   >
@@ -32,7 +32,7 @@ import { genId } from '../../utils/ids';
 export default {
   name: 'VTDropdownMenuContent',
 
-  inject: ['api'],
+  inject: ['apiDropdownMenu'],
 
   data() {
     return {
@@ -43,30 +43,30 @@ export default {
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiDropdownMenu().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDropdownMenu().isHeadless;
     },
 
     right() {
-      return this.api().isRight;
+      return this.apiDropdownMenu().isRight;
     },
 
     trigger() {
-      return this.api().trigger;
+      return this.apiDropdownMenu().trigger;
     },
   },
 
   mounted() {
-    this.api().registerContent(this);
+    this.apiDropdownMenu().registerContent(this);
 
     this.$nextTick(() => {
       if (this.trigger) this.trigger.toggleHasPopup();
     });
 
-    // TODO: Create a directive or mixin for this
+    // T-79 Create a directive or mixin for this
     document.addEventListener('click', (e) => {
       e.stopPropagation();
       if (this.visible && !this.$el.contains(e.target)) this.trigger.onClick();
@@ -87,7 +87,7 @@ export default {
     hide() {
       this.visible = false;
       this.$emit('hidden');
-      this.api().unregisterItems();
+      this.apiDropdownMenu().unregisterItems();
     },
   },
 };

package/src/components/DropdownMenu/VTDropdownMenuDivider.vue

@@ -13,15 +13,15 @@
 export default {
   name: 'VTDropdownMenuDivider',
 
-  inject: ['api'],
+  inject: ['apiDropdownMenu'],
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiDropdownMenu().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDropdownMenu().isHeadless;
     },
   },
 };

package/src/components/DropdownMenu/VTDropdownMenuItem.vue

@@ -33,7 +33,7 @@ import { genId } from '../../utils/ids';
 export default {
   name: 'VTDropdownMenuItem',
 
-  inject: ['api'],
+  inject: ['apiDropdownMenu'],
 
   props: {
     to: {
@@ -60,19 +60,23 @@ export default {
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiDropdownMenu().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDropdownMenu().isHeadless;
     },
 
     as() {
-      return this.href ? 'a' : this.to ? 'NuxtLink' : 'button';
+      return this.href
+        ? 'a'
+        : this.to
+        ? resolveComponent('NuxtLink')
+        : 'button';
     },
 
     items() {
-      return this.api().items;
+      return this.apiDropdownMenu().items;
     },
 
     el() {
@@ -80,11 +84,11 @@ export default {
     },
 
     trigger() {
-      return this.api().trigger;
+      return this.apiDropdownMenu().trigger;
     },
 
     content() {
-      return this.api().content;
+      return this.apiDropdownMenu().content;
     },
   },
 
@@ -94,7 +98,7 @@ export default {
       el: this.el,
     };
 
-    this.api().registerItem(item);
+    this.apiDropdownMenu().registerItem(item);
 
     this.index = this.items.length - 1;
   },
@@ -160,9 +164,16 @@ export default {
       this.leaveMenu();
     },
 
-    onClick() {
+    onClick(ev) {
       if (this.disabled) return;
 
+      // Nuxtlink doesn't understand enter as a click
+      // so, we need to force it here
+      if (ev.key === 'Enter') {
+        ev.target.click();
+        return;
+      }
+
       this.$emit('click');
       this.$nextTick(() => this.leaveMenu());
     },

package/src/components/DropdownMenu/VTDropdownMenuTrigger.vue

@@ -15,32 +15,25 @@
 export default {
   name: 'VTDropdownMenuTrigger',
 
-  inject: ['api'],
+  inject: ['apiDropdownMenu'],
 
   data() {
     return {
+      trigger: null,
       expanded: false,
-      hasPopup: false,
       controls: null,
+      hasPopup: false,
     };
   },
 
   computed: {
     // gets slot element
-    slotElm() {
-      return this.$slots.default[0].elm;
-    },
-
-    slotLength() {
-      return this.$slots.default.length;
-    },
-
     content() {
-      return this.api().content;
+      return this.apiDropdownMenu().content;
     },
 
     items() {
-      return this.api().items;
+      return this.apiDropdownMenu().items;
     },
 
     firstMenuItem() {
@@ -53,35 +46,32 @@ export default {
   },
 
   mounted() {
-    this.api().registerTrigger(this);
-    this.addEventListenerToSlotElm();
+    this.apiDropdownMenu().registerTrigger(this);
+    this.setTrigger();
+    this.addTriggerEvents();
   },
 
   destroyed() {
-    this.slotElm.removeEventListener('click', this.onClick());
+    this.trigger.removeEventListener('click', this.onClick());
   },
 
   methods: {
-    /**
-     * Add event listener to slot element
-     *
-     * The click event has to be added to the slot child element
-     * since we are not setting the onclick on the component
-     * itself.
-     *
-     * Slot must have only one child element. It avoids
-     * errors related to adding the event listener.
-     */
-    addEventListenerToSlotElm() {
-      if (!this.slotLength) return;
-
-      if (this.slotLength > 1) {
-        throw new Error('VTPopoverButton only accepts one item in its slot');
-      }
-
-      this.slotElm.addEventListener('click', (e) => {
-        e.stopImmediatePropagation();
-        this.onClick();
+    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);
       });
     },
 
@@ -99,9 +89,9 @@ export default {
      * Focus slot element if it exists and toggle expanded
      */
     focus() {
-      if (!this.slotElm) return;
+      if (!this.trigger) return;
 
-      this.slotElm.focus();
+      this.trigger.focus();
       this.toggleExpanded();
     },
 

package/src/components/Listbox/VTListbox.vue

@@ -5,14 +5,14 @@
 </template>
 
 <script>
-import { genId } from "../../utils/ids";
+import { genId } from '../../utils/ids';
 
 export default {
-  name: "VTListbox",
+  name: 'VTListbox',
 
   provide() {
     return {
-      api: () => {
+      apiListbox: () => {
         const { dark: isDark, right: isRight } = this;
         const { id, listbox, trigger, content, search, list, items } = this;
 
@@ -47,8 +47,8 @@ export default {
         };
 
         const emit = (value) => {
-          this.$emit("input", value);
-          this.$emit("change", value);
+          this.$emit('input', value);
+          this.$emit('change', value);
         };
 
         return {

package/src/components/Listbox/VTListboxContent.vue

@@ -1,10 +1,10 @@
 <template>
   <transition
     enter-active-class="duration-200 ease-out"
-    enter-class="translate-y-[15px] opacity-0"
+    enter-from-class="translate-y-[15px] opacity-0"
     enter-to-class="translate-y-0 opacity-100"
     leave-active-class="duration-200 ease-in"
-    leave-class="translate-y-0 opacity-100"
+    leave-from-class="translate-y-0 opacity-100"
     leave-to-class="translate-y-[15px] opacity-0"
     @after-leave="hide"
   >
@@ -32,12 +32,12 @@
 </template>
 
 <script>
-import { genId } from "../../utils/ids";
+import { genId } from '../../utils/ids';
 
 export default {
-  name: "VTListboxContent",
+  name: 'VTListboxContent',
 
-  inject: ["api"],
+  inject: ['apiListbox'],
 
   props: {
     headless: {
@@ -64,23 +64,23 @@ export default {
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiListbox().isDark;
     },
 
     right() {
-      return this.api().isRight;
+      return this.apiListbox().isRight;
     },
 
     listbox() {
-      return this.api().listbox;
+      return this.apiListbox().listbox;
     },
 
     trigger() {
-      return this.api().trigger;
+      return this.apiListbox().trigger;
     },
 
     search() {
-      return this.api().search;
+      return this.apiListbox().search;
     },
 
     // directions
@@ -101,18 +101,18 @@ export default {
       setActiveDescedant: this.setActiveDescedant,
     };
 
-    this.api().registerContent(content);
+    this.apiListbox().registerContent(content);
 
-    // TODO: Create a directive or mixin for this
-    document.addEventListener("click", (e) => {
+    // T-87 Create a directive or mixin for this
+    document.addEventListener('click', (e) => {
       e.stopPropagation();
       if (this.visible && !this.$el.contains(e.target)) this.trigger.onClick();
     });
   },
 
   destroyed() {
-    // TODO: Create a directive or mixin for this
-    document.removeEventListener("click", this.trigger.onClick());
+    // T-88 Create a directive or mixin for this
+    document.removeEventListener('click', this.trigger.onClick());
   },
 
   methods: {

package/src/components/Listbox/VTListboxItem.vue

@@ -29,13 +29,13 @@
 </template>
 
 <script>
-import { scrollElementIntoView } from "../../utils/components";
-import { genId } from "../../utils/ids";
+import { scrollElementIntoView } from '../../utils/components';
+import { genId } from '../../utils/ids';
 
 export default {
-  name: "VTListboxItem",
+  name: 'VTListboxItem',
 
-  inject: ["api"],
+  inject: ['apiListbox'],
 
   props: {
     headless: {
@@ -63,11 +63,11 @@ export default {
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiListbox().isDark;
     },
 
     items() {
-      return this.api().items;
+      return this.apiListbox().items;
     },
 
     el() {
@@ -75,19 +75,19 @@ export default {
     },
 
     trigger() {
-      return this.api().trigger;
+      return this.apiListbox().trigger;
     },
 
     content() {
-      return this.api().content;
+      return this.apiListbox().content;
     },
 
     list() {
-      return this.api().list;
+      return this.apiListbox().list;
     },
 
     search() {
-      return this.api().search;
+      return this.apiListbox().search;
     },
   },
 
@@ -116,13 +116,13 @@ export default {
       onClick: this.onClick,
     };
 
-    this.api().registerItem(item);
+    this.apiListbox().registerItem(item);
 
     this.index = this.items.length - 1;
   },
 
   beforeDestroy() {
-    this.api().unregisterItem(this.id);
+    this.apiListbox().unregisterItem(this.id);
   },
 
   methods: {
@@ -206,7 +206,7 @@ export default {
     onClick() {
       if (this.disabled) return;
 
-      this.api().emit(this.value);
+      this.apiListbox().emit(this.value);
       this.$nextTick(() => this.leaveMenu());
     },
 

package/src/components/Listbox/VTListboxLabel.vue

@@ -16,7 +16,7 @@
 export default {
   name: 'VTListboxLabel',
 
-  inject: ['api'],
+  inject: ['apiListbox'],
 
   props: {
     as: {
@@ -31,7 +31,7 @@ export default {
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiListbox().isDark;
     },
   },
 };

package/src/components/Listbox/VTListboxList.vue

@@ -11,12 +11,12 @@
 </template>
 
 <script>
-import { genId } from "../../utils/ids";
+import { genId } from '../../utils/ids';
 
 export default {
-  name: "VTListboxList",
+  name: 'VTListboxList',
 
-  inject: ["api"],
+  inject: ['apiListbox'],
 
   props: {
     headless: {
@@ -40,7 +40,7 @@ export default {
       unsetMousemove: this.unsetMousemove,
     };
 
-    this.api().registerList(list);
+    this.apiListbox().registerList(list);
   },
 
   methods: {

package/src/components/Listbox/VTListboxSearch.vue

@@ -18,7 +18,7 @@
 export default {
   name: 'VTListboxSearch',
 
-  inject: ['api'],
+  inject: ['apiListbox'],
 
   props: {
     headless: {
@@ -36,19 +36,19 @@ export default {
 
   computed: {
     content() {
-      return this.api().content;
+      return this.apiListbox().content;
     },
 
     trigger() {
-      return this.api().trigger;
+      return this.apiListbox().trigger;
     },
 
     list() {
-      return this.api().list;
+      return this.apiListbox().list;
     },
 
     items() {
-      return this.api().items;
+      return this.apiListbox().items;
     },
 
     item() {
@@ -61,7 +61,7 @@ export default {
       el: this.$el,
     };
 
-    this.api().registerSearch(search);
+    this.apiListbox().registerSearch(search);
   },
 
   beforeDestroy() {

package/src/components/Listbox/VTListboxTrigger.vue

@@ -45,7 +45,7 @@ export default {
 
   components: { IconChevronDown },
 
-  inject: ['api'],
+  inject: ['apiListbox'],
 
   props: {
     headless: {
@@ -63,15 +63,15 @@ export default {
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiListbox().isDark;
     },
 
     content() {
-      return this.api().content;
+      return this.apiListbox().content;
     },
 
     items() {
-      return this.api().items;
+      return this.apiListbox().items;
     },
 
     firstMenuItem() {
@@ -91,7 +91,7 @@ export default {
       contract: this.contract,
     };
 
-    this.api().registerTrigger(trigger);
+    this.apiListbox().registerTrigger(trigger);
   },
 
   methods: {

package/src/components/Popover/VTPopover.vue

@@ -10,14 +10,14 @@
 </template>
 
 <script>
-import { genId } from "../../utils/ids";
+import { genId } from '../../utils/ids';
 
 export default {
-  name: "VTPopover",
+  name: 'VTPopover',
 
   provide() {
     return {
-      api: () => {
+      apiPopover: () => {
         const { dark: isDark, headless: isHeadless, right: isRight } = this;
         const { id, button, content } = this;
 

package/src/components/Popover/VTPopoverContent.vue

@@ -1,10 +1,10 @@
 <template>
   <transition
     enter-active-class="duration-200 ease-out"
-    enter-class="translate-y-[15px] opacity-0"
+    enter-from-class="translate-y-[15px] opacity-0"
     enter-to-class="translate-y-0 opacity-100"
     leave-active-class="duration-200 ease-in"
-    leave-class="translate-y-0 opacity-100"
+    leave-from-class="translate-y-0 opacity-100"
     leave-to-class="translate-y-[15px] opacity-0"
     @after-leave="hide"
   >
@@ -26,12 +26,12 @@
 </template>
 
 <script>
-import { genId } from "../../utils/ids";
+import { genId } from '../../utils/ids';
 
 export default {
-  name: "VTPopoverContent",
+  name: 'VTPopoverContent',
 
-  inject: ["api"],
+  inject: ['apiPopover'],
 
   data() {
     return {
@@ -42,31 +42,31 @@ export default {
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiPopover().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiPopover().isHeadless;
     },
 
     right() {
-      return this.api().isRight;
+      return this.apiPopover().isRight;
     },
   },
 
   mounted() {
-    this.api().registerContent(this);
+    this.apiPopover().registerContent(this);
 
-    // TODO: Create a directive or mixin for this
-    document.addEventListener("click", (e) => {
+    // T-75 Create a directive or mixin for this
+    document.addEventListener('click', (e) => {
       e.stopPropagation();
       if (this.visible && !this.$el.contains(e.target)) this.hide();
     });
   },
 
   destroyed() {
-    // TODO: Create a directive or mixin for this
-    document.removeEventListener("click", this.hide());
+    // T-76 Create a directive or mixin for this
+    document.removeEventListener('click', this.hide());
   },
 
   methods: {

package/src/components/Popover/VTPopoverDivider.vue

@@ -13,15 +13,15 @@
 export default {
   name: 'VTPopoverDivider',
 
-  inject: ['api'],
+  inject: ['apiPopover'],
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiPopover().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiPopover().isHeadless;
     },
   },
 };