@veritree/ui 0.20.1 → 0.21.1-0

package/mixins/floating-ui.js

@@ -0,0 +1,68 @@
+import { computePosition, flip, shift, offset, size } from '@floating-ui/dom';
+
+export const floatingUiMixin = {
+  props: {
+    placement: {
+      type: String,
+      default: 'bottom-start'
+    }
+  },
+
+  data() {
+    return {
+      component: null,
+      componentTrigger: null,
+      componentContent: null,
+      active: false,
+    }
+  },
+
+  watch: {
+    active(newVal) {
+      if (newVal) this.$nextTick(() => this.positionContentToTrigger());
+    },
+  },
+
+  mounted() {
+    this.component = {
+      setActive: this.setActive,
+      clearActive: this.clearActive,
+    };
+  },
+
+  methods: {
+    setActive() {
+      this.active = true;
+    },
+
+    clearActive() {
+      this.active = null;
+    },
+
+    positionContentToTrigger() {
+      const trigger = document.getElementById(this.componentTrigger.id);
+      const content = document.getElementById(this.componentContent.id);
+
+      computePosition(trigger, content, {
+        placement: this.placement,
+        middleware: [
+          offset(6),
+          flip(),
+          shift({ padding: 5 }),
+          size({
+            apply({ rects }) {
+              Object.assign(content.style, {
+                width: `${rects.reference.width}px`,
+              });
+            },
+          }),
+        ],
+      }).then(({ x, y }) => {
+        Object.assign(content.style, {
+          left: `${x}px`,
+          top: `${y}px`,
+        });
+      });
+    },
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritree/ui",
-  "version": "0.20.1",
+  "version": "0.21.1-0",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",
@@ -11,6 +11,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@floating-ui/dom": "^1.0.4",
     "@linusborg/vue-simple-portal": "^0.1.5",
     "@veritree/icons": "^0.19.0"
   },

package/src/components/DropdownMenu/VTDropdownMenu.vue

@@ -5,26 +5,31 @@
 </template>
 
 <script>
-import { genId } from "../../utils/ids";
+import { floatingUiMixin } from '../../../mixins/floating-ui';
+import { genId } from '../../utils/ids';
 
 export default {
-  name: "VTDropdownMenu",
+  name: 'VTDropdownMenu',
+
+  mixins: [floatingUiMixin],
 
   provide() {
     return {
       api: () => {
-        const { dark: isDark, headless: isHeadless, right: isRight } = this;
-        const { id, trigger, content, items } = this;
+        const { dark: isDark, headless: isHeadless } = this;
 
         const registerTrigger = (trigger) => {
-          this.trigger = trigger;
+          if (!trigger) return;
+          this.componentTrigger = trigger;
         };
 
         const registerContent = (content) => {
-          this.content = content;
+          if (!content) return;
+          this.componentContent = content;
         };
 
         const registerItem = (item) => {
+          if (!item) return;
           this.items.push(item);
         };
 
@@ -33,13 +38,13 @@ export default {
         };
 
         return {
-          id,
+          id: this.componentId,
           isDark,
           isHeadless,
-          isRight,
-          trigger,
-          content,
-          items,
+          component: this.component,
+          componentTrigger: this.componentTrigger,
+          componentContent: this.componentContent,
+          items: this.items,
           registerTrigger,
           registerContent,
           registerItem,
@@ -66,11 +71,15 @@ export default {
 
   data() {
     return {
-      id: `menu-${genId()}`,
-      trigger: null,
-      content: null,
+      componentId: genId(),
       items: [],
     };
   },
+
+  computed: {
+    id() {
+      return `dropdown-menu-${this.componentId}`;
+    },
+  },
 };
 </script>

package/src/components/DropdownMenu/VTDropdownMenuContent.vue

@@ -1,47 +1,37 @@
 <template>
-  <transition
-    enter-active-class="duration-200 ease-out"
-    enter-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-to-class="translate-y-[15px] opacity-0"
-    @after-leave="hide"
+  <FloatingUi
+    :visible="visible"
+    :id="id"
+    :headless="headless"
+    :class="{ 'dropdown-menu-content': headless }"
   >
-    <div
-      v-if="visible"
-      :id="id"
-      :class="{
-        MenuList: headless,
-        'absolute top-full mt-3 grid min-w-[222px] overflow-hidden rounded border border-solid py-2 px-3 transition-all':
-          !headless,
-        'border-gray-100 bg-white shadow-300': !dark,
-        'bg-forest-default border-gray-700 shadow-gray-700': dark,
-        'left-0': !right,
-        'right-0': right,
-      }"
-    >
-      <slot></slot>
-    </div>
-  </transition>
+    <slot></slot>
+  </FloatingUi>
 </template>
 
 <script>
-import { genId } from '../../utils/ids';
+import FloatingUi from '../Utils/FloatingUi.vue';
 
 export default {
   name: 'VTDropdownMenuContent',
 
+  components: {
+    FloatingUi,
+  },
+
   inject: ['api'],
 
   data() {
     return {
-      id: `menucontent-${genId()}`,
       visible: false,
     };
   },
 
   computed: {
+    id() {
+      return `dropdown-menu-content-${this.api().id}`;
+    },
+
     dark() {
       return this.api().isDark;
     },
@@ -50,44 +40,59 @@ export default {
       return this.api().isHeadless;
     },
 
-    right() {
-      return this.api().isRight;
+    component() {
+      return this.api().component;
     },
 
-    trigger() {
-      return this.api().trigger;
+    componentTrigger() {
+      return this.api().componentTrigger;
     },
   },
 
   mounted() {
     this.api().registerContent(this);
 
-    this.$nextTick(() => {
-      if (this.trigger) this.trigger.toggleHasPopup();
-    });
-
-    // TODO: Create a directive or mixin for this
+    // T-218 Create a directive or mixin for this
     document.addEventListener('click', (e) => {
+      if (!e) {
+        return;
+      }
+
       e.stopPropagation();
-      if (this.visible && !this.$el.contains(e.target)) this.trigger.onClick();
+
+      if (this.visible && !this.$el.contains(e.target)) {
+        this.componentTrigger.onClick();
+      }
     });
   },
 
   destroyed() {
-    // TODO: Create a directive or mixin for this
-    document.removeEventListener('click', this.trigger.onClick());
+    document.removeEventListener('click', this.componentTrigger.onClick);
   },
 
   methods: {
     show() {
+      if (this.visible) return;
+
       this.visible = true;
-      this.$emit('shown');
+
+      this.$nextTick(() => {
+        this.component.setActive();
+        this.$emit('shown');
+      });
     },
 
     hide() {
+      if (!this.visible) return;
+
       this.visible = false;
-      this.$emit('hidden');
-      this.api().unregisterItems();
+
+      this.$nextTick(() => {
+        this.componentTrigger.focus();
+        this.componentTrigger.hideExpanded();
+        this.component.clearActive();
+        this.$emit('hidden');
+      });
     },
   },
 };

package/src/components/DropdownMenu/VTDropdownMenuItem.vue

@@ -5,11 +5,12 @@
     :to="to"
     :class="{
       MenuItem: headless,
-      '-mx-3 flex min-w-max items-center gap-3 px-3 py-2 text-inherit no-underline':
+      '-mx-3 flex min-w-max items-center gap-2 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,
+      'hover:bg-secondary-200/10': !dark && !headless,
+      'text-white': dark && !headless,
+      'pointer-events-none opacity-75': disabled && !headless,
+      'bg-secondary-200/10': selected && !headless,
     }"
     :tabindex="tabIndex"
     :aria-disabled="disabled"
@@ -52,13 +53,17 @@ export default {
 
   data() {
     return {
-      id: `menuitem-${genId()}`,
       index: null,
+      selected: false,
       tabIndex: 0,
     };
   },
 
   computed: {
+    id() {
+      return `dropdown-menu-item-${this.api().id}-${genId()}`;
+    },
+
     dark() {
       return this.api().isDark;
     },
@@ -79,19 +84,20 @@ export default {
       return this.$el;
     },
 
-    trigger() {
-      return this.api().trigger;
+    componentTrigger() {
+      return this.api().componentTrigger;
     },
 
-    content() {
-      return this.api().content;
+    componentContent() {
+      return this.api().componentContent;
     },
   },
 
   mounted() {
     const item = {
+      select: this.select,
+      unselect: this.unselect,
       focus: this.focus,
-      el: this.el,
     };
 
     this.api().registerItem(item);
@@ -100,10 +106,19 @@ export default {
   },
 
   methods: {
+    select() {
+      this.selected = true;
+    },
+
+    unselect() {
+      this.selected = false;
+    },
+
     focus() {
       if (!this.el) return;
 
       this.tabIndex = -1;
+      this.selected = true;
       this.el.focus();
     },
 
@@ -145,6 +160,12 @@ export default {
      */
     setFocusToItem(goToIndex) {
       this.tabIndex = 0;
+      this.selected = false;
+
+      // set all selected to false
+      this.items.forEach((item) => item.unselect());
+
+      // focus item
       this.items[goToIndex].focus();
     },
 
@@ -152,8 +173,8 @@ export default {
      * Hides content/menu and focus on trigger
      */
     leaveMenu() {
-      if (this.content) this.content.hide();
-      if (this.trigger) this.trigger.focus();
+      if (this.componentContent) this.componentContent.hide();
+      if (this.componentTrigger) this.componentTrigger.focus();
     },
 
     onKeyEsc() {

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.esc.stop="onKeyesc"
   >
     <slot></slot>
   </div>
@@ -22,21 +23,17 @@ export default {
       expanded: false,
       hasPopup: false,
       controls: null,
+      trigger: null,
     };
   },
 
   computed: {
-    // gets slot element
-    slotElm() {
-      return this.$slots.default[0].elm;
+    id() {
+      return `dropdown-menu-trigger-${this.api().id}`;
     },
 
-    slotLength() {
-      return this.$slots.default.length;
-    },
-
-    content() {
-      return this.api().content;
+    componentContent() {
+      return this.api().componentContent;
     },
 
     items() {
@@ -53,15 +50,30 @@ export default {
   },
 
   mounted() {
-    this.api().registerTrigger(this);
-    this.addEventListenerToSlotElm();
+    const trigger = {
+      toggleExpanded: this.toggleExpanded,
+      hideExpanded: this.hideExpanded,
+      el: this.$el,
+      focus: this.focus,
+      id: this.id,
+      onClick: this.onClick,
+    };
+
+    this.api().registerTrigger(trigger);
+
+    this.setTrigger();
+    this.addTriggerEvents();
   },
 
   destroyed() {
-    this.slotElm.removeEventListener('click', this.onClick());
+    this.trigger.removeEventListener('click', this.onClick);
   },
 
   methods: {
+    setTrigger() {
+      this.trigger = this.$el.querySelector(':first-child');
+    },
+
     /**
      * Add event listener to slot element
      *
@@ -72,16 +84,9 @@ export default {
      * 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();
+    addTriggerEvents() {
+      this.trigger.addEventListener('click', (e) => {
+        this.onClick(e);
       });
     },
 
@@ -89,27 +94,21 @@ export default {
      * Shows content/menu if not already visible
      */
     showContent() {
-      if (!this.expanded) {
-        this.toggleExpanded();
-        this.content.show();
-      }
+      this.expanded = true;
+      this.componentContent.show();
     },
 
     /**
      * Focus slot element if it exists and toggle expanded
      */
     focus() {
-      if (!this.slotElm) return;
-
-      this.slotElm.focus();
-      this.toggleExpanded();
+      if (this.trigger) this.trigger.focus();
     },
 
-    /**
-     * Toggles aria expanded attribute/state
-     */
+    //
     toggleExpanded() {
-      this.expanded = !this.expanded;
+      if (!this.expanded) return;
+      this.expanded = false;
     },
 
     /**
@@ -123,7 +122,7 @@ export default {
      * Toggles aria popup/controls attribute/state
      */
     toggleHasPopup() {
-      if (!this.content) return;
+      if (!this.componentContent) return;
 
       this.hasPopup = !this.hasPopup;
 
@@ -132,37 +131,41 @@ export default {
         return;
       }
 
-      this.controls = this.content.id;
+      this.controls = this.componentContent.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
+     * 1. Set aria expanded attribute/state to false
+     * 2. Close the menu
      */
-    onClick() {
-      if (!this.content) return;
-
-      this.toggleExpanded();
+    hide() {
+      this.hideExpanded();
 
       this.$nextTick(() => {
-        if (this.expanded) this.content.show();
-        else this.content.hide();
+        this.componentContent.hide();
       });
     },
 
     /**
-     * 1. Set aria expanded attribute/state to false
-     * 2. Close the menu
+     * 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
      */
-    hide() {
-      this.hideExpanded();
+    onClick(e) {
+      if (!this.componentContent) return;
 
-      this.$nextTick(() => {
-        this.content.hide();
-      });
+      if (this.expanded) {
+        this.componentContent.hide();
+        return;
+      }
+
+      // delay stop propagation to close other visible
+      // dropdowns and delay click event to control
+      // this dropdown visibility
+      setTimeout(() => e.stopImmediatePropagation(), 50);
+      setTimeout(() => this.showContent(), 100);
     },
 
     /**
@@ -172,12 +175,15 @@ export default {
      * 2. if the menu is expanded, focus the first menu item
      */
     onKeyArrowDown() {
-      if (!this.content) return;
+      if (!this.componentContent) return;
 
       this.showContent();
 
+      // 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.firstMenuItem.focus();
+        setTimeout(() => this.firstMenuItem.focus(), 150);
       });
     },
 
@@ -188,21 +194,23 @@ export default {
      * 2. if the menu is expanded, focus the last menu item
      */
     onKeyArrowUp() {
-      if (!this.content) return;
+      if (!this.componentContent) return;
 
       this.showContent();
 
+      // 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.lastMenuItem.focus(), 150);
       });
     },
 
     onKeyesc() {
-      if (!this.content) return;
+      if (!this.componentContent) return;
 
       if (this.expanded) {
-        this.toggleExpanded();
-        this.content.hide();
+        this.componentContent.hide();
       }
     },
   },