@veritree/ui 0.19.2-16 → 0.19.2-17

package/src/components/DropdownMenu/VTDropdownMenuItem.vue

@@ -3,16 +3,10 @@
     :is="as"
     :id="id"
     :to="to"
-    :class="{
-      MenuItem: headless,
-      '-mx-3 flex min-w-max items-center gap-3 px-3 py-2 text-inherit no-underline':
-        !headless,
-      'hover:bg-secondary-200/10': !dark,
-      'text-white hover:bg-fd-450 focus:bg-fd-450': dark,
-      'pointer-events-none opacity-75': disabled,
-    }"
-    :tabindex="tabIndex"
+    :class="classComputed"
     :aria-disabled="disabled"
+    :tabindex="tabIndex"
+    class="-mx-3"
     role="menuitem"
     @click.stop.prevent="onClick"
     @keydown.down.prevent="focusPreviousItem"
@@ -28,11 +22,13 @@
 </template>
 
 <script>
-import { genId } from '../../utils/ids';
+import { floatingUiItemMixin } from '../../../mixins/floating-ui-item';
 
 export default {
   name: 'VTDropdownMenuItem',
 
+  mixins: [floatingUiItemMixin],
+
   inject: ['apiDropdownMenu'],
 
   props: {
@@ -44,29 +40,16 @@ export default {
       type: String,
       default: null,
     },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
   },
 
   data() {
     return {
-      id: `menuitem-${genId()}`,
-      index: null,
-      tabIndex: 0,
+      apiInjected: this.apiDropdownMenu,
+      componentName: 'dropdown-menu-item',
     };
   },
 
   computed: {
-    dark() {
-      return this.apiDropdownMenu().isDark;
-    },
-
-    headless() {
-      return this.apiDropdownMenu().isHeadless;
-    },
-
     as() {
       return this.href
         ? 'a'
@@ -74,109 +57,6 @@ export default {
         ? resolveComponent('NuxtLink')
         : 'button';
     },
-
-    items() {
-      return this.apiDropdownMenu().items;
-    },
-
-    el() {
-      return this.$el;
-    },
-
-    trigger() {
-      return this.apiDropdownMenu().trigger;
-    },
-
-    content() {
-      return this.apiDropdownMenu().content;
-    },
-  },
-
-  mounted() {
-    const item = {
-      focus: this.focus,
-      el: this.el,
-    };
-
-    this.apiDropdownMenu().registerItem(item);
-
-    this.index = this.items.length - 1;
-  },
-
-  methods: {
-    focus() {
-      if (!this.el) return;
-
-      this.tabIndex = -1;
-      this.el.focus();
-    },
-
-    focusFirstItem() {
-      this.setFocusToItem(0);
-    },
-
-    focusLastItem() {
-      this.setFocusToItem(this.items.length - 1);
-    },
-
-    /**
-     * Focus the previous item in the menu.
-     * If is the first item, jump to the last item.
-     */
-    focusPreviousItem() {
-      const isLast = this.index === this.items.length - 1;
-      const goToIndex = isLast ? 0 : this.index + 1;
-
-      this.setFocusToItem(goToIndex);
-    },
-
-    /**
-     * Focus the next item in the menu.
-     * If is the last item, jump to the first item.
-     */
-    focusNextItem() {
-      const isFirst = this.index === 0;
-      const goToIndex = isFirst ? this.items.length - 1 : this.index - 1;
-
-      this.setFocusToItem(goToIndex);
-    },
-
-    /**
-     * Focus item by remove its tabindex and calling
-     * focus to the element.
-     *
-     * @param {Number, String} goToIndex
-     */
-    setFocusToItem(goToIndex) {
-      this.tabIndex = 0;
-      this.items[goToIndex].focus();
-    },
-
-    /**
-     * Hides content/menu and focus on trigger
-     */
-    leaveMenu() {
-      if (this.content) this.content.hide();
-      if (this.trigger) this.trigger.focus();
-    },
-
-    onKeyEsc() {
-      this.leaveMenu();
-    },
-
-    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());
-    },
   },
 };
 </script>

package/src/components/DropdownMenu/VTDropdownMenuLabel.vue

@@ -15,15 +15,15 @@
 export default {
   name: 'VTDropdownMenuLabel',
 
-  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/VTDropdownMenuTrigger.vue

@@ -1,11 +1,12 @@
 <template>
   <div
+    :id="id"
     :aria-haspopup="hasPopup"
     :aria-expanded="expanded"
     :aria-controls="controls"
-    @keydown.down.prevent="onKeyArrowDown"
-    @keydown.up.prevent="onKeyArrowUp"
-    @keydown.esc.prevent="onKeyesc"
+    @keydown.down.prevent="onKeyDownOrUp"
+    @keydown.up.prevent="onKeyDownOrUp"
+    @keydown.esc.stop="onKeyEsc"
   >
     <slot></slot>
   </div>
@@ -19,17 +20,21 @@ export default {
 
   data() {
     return {
-      trigger: null,
       expanded: false,
-      controls: null,
       hasPopup: false,
+      controls: null,
+      trigger: null,
+      id: null,
     };
   },
 
   computed: {
-    // gets slot element
-    content() {
-      return this.apiDropdownMenu().content;
+    // id() {
+    //   return `dropdown-menu-trigger-${this.apiDropdownMenu().id}`;
+    // },
+
+    componentContent() {
+      return this.apiDropdownMenu().componentContent;
     },
 
     items() {
@@ -45,14 +50,30 @@ export default {
     },
   },
 
+  watch: {
+    expanded() {
+      this.toggleAriaHasPopup();
+    },
+  },
+
   mounted() {
-    this.apiDropdownMenu().registerTrigger(this);
+    this.id = `dropdown-menu-trigger-${this.apiDropdownMenu().id}`;
+
+    const trigger = {
+      id: this.id,
+      el: this.$el,
+      cancel: this.cancel,
+      focus: this.focus,
+    };
+
+    this.apiDropdownMenu().registerTrigger(trigger);
+
     this.setTrigger();
     this.addTriggerEvents();
   },
 
-  unmounted() {
-    this.trigger.removeEventListener('click', this.onClick());
+  destroyed() {
+    this.trigger.removeEventListener('click', this.onClick);
   },
 
   methods: {
@@ -60,140 +81,104 @@ export default {
       this.trigger = this.$el.querySelector(':first-child');
     },
 
+    /**
+     * 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.
+     */
     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);
+        this.onClick(e);
       });
     },
 
-    /**
-     * Shows content/menu if not already visible
-     */
-    showContent() {
-      if (!this.expanded) {
-        this.toggleExpanded();
-        this.content.show();
+    init(e) {
+      if (!this.componentContent) {
+        return;
       }
-    },
 
-    /**
-     * Focus slot element if it exists and toggle expanded
-     */
-    focus() {
-      if (!this.trigger) return;
-
-      this.trigger.focus();
-      this.toggleExpanded();
-    },
+      if (this.expanded) {
+        this.cancel();
+        return;
+      }
 
-    /**
-     * Toggles aria expanded attribute/state
-     */
-    toggleExpanded() {
-      this.expanded = !this.expanded;
-    },
+      this.expanded = true;
 
-    /**
-     * Sets aria expanded attribute/state to false
-     */
-    hideExpanded() {
-      this.expanded = false;
+      // delay stop propagation to close other visible
+      // dropdowns and delay click event to control
+      // this dropdown visibility
+      setTimeout(() => e.stopImmediatePropagation(), 50);
+      setTimeout(() => this.showComponentContent(), 100);
     },
 
-    /**
-     * Toggles aria popup/controls attribute/state
-     */
-    toggleHasPopup() {
-      if (!this.content) return;
-
-      this.hasPopup = !this.hasPopup;
-
-      if (!this.hasPopup) {
-        this.controls = null;
+    cancel() {
+      if (!this.componentContent) {
         return;
       }
 
-      this.controls = this.content.id;
-    },
-
-    /**
-     * On click, do the following:
-     *
-     * 1. Toggle aria expanded attribute/state
-     * 2. Open the menu if it's closed
-     * 3. Close the menu if it's open
-     */
-    onClick() {
-      if (!this.content) return;
+      this.expanded = false;
 
-      this.toggleExpanded();
+      this.hideComponentContent();
+    },
 
-      this.$nextTick(() => {
-        if (this.expanded) this.content.show();
-        else this.content.hide();
-      });
+    focus() {
+      if (this.trigger) this.trigger.focus();
     },
 
-    /**
-     * 1. Set aria expanded attribute/state to false
-     * 2. Close the menu
-     */
-    hide() {
-      this.hideExpanded();
+    showComponentContent() {
+      this.componentContent.show();
+    },
 
-      this.$nextTick(() => {
-        this.content.hide();
-      });
+    hideComponentContent() {
+      this.componentContent.hide();
     },
 
-    /**
-     * On key arrow down, do the following:
-     *
-     * 1. if the menu is not expanded, expand it and focus the first menu item
-     * 2. if the menu is expanded, focus the first menu item
-     */
-    onKeyArrowDown() {
-      if (!this.content) return;
+    toggleAriaHasPopup() {
+      if (this.expanded) {
+        this.hasPopup = this.componentContent !== null;
+        this.controls = this.hasPopup ? this.componentContent.id : null;
 
-      this.showContent();
+        return;
+      }
 
-      this.$nextTick(() => {
-        this.firstMenuItem.focus();
-      });
+      this.hasPopup = null;
+      this.controls = null;
     },
 
-    /**
-     * On key arrow up, do the following:
-     *
-     * 1. if the menu is not expanded, expand it and focus the last menu item
-     * 2. if the menu is expanded, focus the last menu item
-     */
-    onKeyArrowUp() {
-      if (!this.content) return;
+    onClick(e) {
+      this.init(e);
+    },
 
-      this.showContent();
+    onKeyDownOrUp(e) {
+      if (!this.expanded) {
+        this.$el.click(e);
+      }
 
+      const keyCode = e.code;
+      const listItemPosition =
+        keyCode === 'ArrowDown'
+          ? 'firstMenuItem'
+          : keyCode === 'ArrowUp'
+          ? 'lastMenuItem'
+          : null;
+
+      // settimeout here is delaying the focusing the element
+      // since it is not rendered yet. All items will only
+      // be available when the content is fully visible.
       this.$nextTick(() => {
-        this.lastMenuItem.focus();
+        setTimeout(() => this[listItemPosition].focus(), 100);
       });
     },
 
-    onKeyesc() {
-      if (!this.content) return;
-
-      if (this.expanded) {
-        this.toggleExpanded();
-        this.content.hide();
-      }
+    // change it to a better name or move the methods inside to another function
+    onKeyEsc() {
+      this.cancel();
+      this.focus();
     },
   },
 };

package/src/components/Form/VTFormLabel.vue

@@ -1,7 +1,9 @@
 <template>
   <label
     :class="[
-      headless ? 'form-label' : 'font-semibold mb-1 flex justify-between gap-3',
+      headless
+        ? 'form-label'
+        : 'mb-1 flex justify-between gap-3 text-sm font-semibold',
     ]"
   >
     <slot />

package/src/components/Form/VTFormRow.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="grid grid-cols-1 md:grid-cols-2 md:gap-4">
+    <slot />
+  </div>
+</template>

package/src/components/Listbox/VTListbox.vue

@@ -1,29 +1,29 @@
 <template>
-  <div :class="{ Listbox: headless, relative: !headless, 'z-20': active }">
+  <div :class="{ listbox: headless }">
     <slot></slot>
   </div>
 </template>
 
 <script>
+import { floatingUiMixin } from '../../../mixins/floating-ui';
 import { genId } from '../../utils/ids';
 
 export default {
   name: 'VTListbox',
 
+  mixins: [floatingUiMixin],
+
   provide() {
     return {
       apiListbox: () => {
-        const { dark: isDark, right: isRight } = this;
-        const { id, listbox, trigger, content, search, list, items } = this;
-
         const registerTrigger = (trigger) => {
           if (!trigger) return;
-          this.trigger = trigger;
+          this.componentTrigger = trigger;
         };
 
         const registerContent = (content) => {
           if (!content) return;
-          this.content = content;
+          this.componentContent = content;
         };
 
         const registerSearch = (search) => {
@@ -31,10 +31,10 @@ export default {
           this.search = search;
         };
 
-        const registerList = (list) => {
-          if (!list) return;
-          this.list = list;
-        };
+        // const registerList = (list) => {
+        //   if (!list) return;
+        //   this.list = list;
+        // };
 
         const registerItem = (item) => {
           if (!item) return;
@@ -52,19 +52,16 @@ export default {
         };
 
         return {
-          id,
-          isDark,
-          isRight,
-          listbox,
-          trigger,
-          search,
-          content,
-          list,
-          items,
+          id: this.componentId,
+          component: this.component,
+          componentTrigger: this.componentTrigger,
+          componentContent: this.componentContent,
+          items: this.items,
+          search: this.search,
           registerTrigger,
           registerContent,
           registerSearch,
-          registerList,
+          // registerList,
           registerItem,
           unregisterItem,
           emit,
@@ -74,7 +71,7 @@ export default {
   },
 
   props: {
-    modelValue: {
+    value: {
       type: [String, Number, Object],
       default: null,
     },
@@ -94,31 +91,15 @@ export default {
 
   data() {
     return {
-      id: `listbox-${genId()}`,
-      listbox: null,
-      trigger: null,
-      content: null,
+      componentId: genId(),
       search: null,
-      list: null,
       items: [],
-      active: false,
-    };
-  },
-
-  mounted() {
-    this.listbox = {
-      setActive: this.setActive,
-      clearActive: this.clearActive,
     };
   },
 
-  methods: {
-    setActive() {
-      this.active = true;
-    },
-
-    clearActive() {
-      this.active = null;
+  computed: {
+    id() {
+      return `listbox-${this.componentId}`;
     },
   },
 };