@veritree/ui 0.19.2-16 → 0.19.2-17

package/mixins/floating-ui-content.js

@@ -0,0 +1,102 @@
+import FloatingUi from '../src/components/Utils/FloatingUi.vue';
+
+export const floatingUiContentMixin = {
+  components: {
+    FloatingUi,
+  },
+
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+    floatingUiClass: {
+      type: [String, Function],
+      default: null,
+    },
+  },
+
+  data() {
+    return {
+      el: null,
+      isMousemove: false,
+      visible: false,
+    };
+  },
+
+  mounted() {
+    document.addEventListener('click', (e) => this.onDocumentClick(e));
+  },
+
+  destroyed() {
+    document.removeEventListener('click', this.onDocumentClick);
+  },
+
+  methods: {
+    show() {
+      if (this.visible) {
+        return;
+      }
+
+      this.visible = true;
+
+      this.$nextTick(() => {
+        this.component.setActive();
+
+        setTimeout(() => {
+          this.el = document.getElementById(this.id);
+          this.$emit('shown');
+        }, 100);
+      });
+    },
+
+    hide() {
+      if (!this.visible) {
+        return;
+      }
+
+      this.visible = false;
+
+      this.$nextTick(() => {
+        this.component.clearActive();
+
+        setTimeout(() => {
+          this.el = document.getElementById(this.id);
+          this.$emit('hidden');
+        }, 100);
+      });
+    },
+
+    onDocumentClick(e) {
+      if (!e) {
+        return;
+      }
+
+      e.stopPropagation();
+
+      if (this.visible && !this.el.contains(e.target)) {
+        this.componentTrigger.cancel();
+      }
+    },
+
+    // Mousemove instead of mouseover to support keyboard navigation.
+    // The problem with mouseover is that when scrolling (scrollIntoView),
+    // mouseover event gets triggered.
+    setMousemove() {
+      this.isMousemove = true;
+    },
+
+    unsetMousemove() {
+      this.isMousemove = false;
+    },
+
+    getMousemove() {
+      return this.isMousemove;
+    },
+
+    // 
+    setActiveDescedant(id) {
+      this.activeDescedant = id;
+    },
+  },
+}

package/mixins/floating-ui-item.js

@@ -0,0 +1,219 @@
+export const floatingUiItemMixin = {
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  computed: {
+    id() {
+      return `${this.componentName}-${this.apiInjected().id}-${this.index}`;
+    },
+
+    items() {
+      return this.apiInjected().items;
+    },
+
+    el() {
+      return this.$el;
+    },
+
+    componentContent() {
+      return this.apiInjected().componentContent;
+    },
+
+    componentTrigger() {
+      return this.apiInjected().componentTrigger;
+    },
+
+    classComputed() {
+      return [
+        // default styles
+        this.headless
+          ? `${this.componentName}`
+          : 'relative z-10 flex items-center gap-2 px-3 py-2 text-inherit no-underline',
+        // disabled state styles
+        this.headless
+          ? this.disabled
+            ? `${this.componentName}--disabled`
+            : null
+          : this.disabled
+          ? 'pointer-events-none opacity-75'
+          : null,
+        // selected state styles
+        this.headless
+          ? this.selected
+            ? `${this.componentName}--selected`
+            : null
+          : this.selected
+          ? 'bg-secondary-200/10'
+          : null,
+      ];
+    },
+  },
+
+  data() {
+    return {
+      index: null,
+      selected: false,
+      tabIndex: 0,
+    };
+  },
+
+  watch: {
+    selected(newValue) {
+      if (!newValue || !this.componentContent) return;
+
+      this.componentContent.setActiveDescedant(this.id);
+
+      const isMousemove = this.componentContent.getMousemove();
+
+      if (!isMousemove) {
+        this.el.scrollIntoView({ block: 'nearest' });
+      }
+    },
+  },
+
+  mounted() {
+    this.init();
+    this.addMouseEventListeners();
+  },
+
+  beforeUnmount() {
+    this.apiInjected().unregisterItem(this.id);
+    this.removeMouseEventListeners();
+  },
+
+  methods: {
+    init() {
+      this.index = this.items.length;
+
+      const item = {
+        id: this.id,
+        select: this.select,
+        unselect: this.unselect,
+        focus: this.focus,
+        onClick: this.onClick,
+      };
+
+      this.apiInjected().registerItem(item);
+    },
+
+    addMouseEventListeners() {
+      this.el.addEventListener('mousemove', this.onMousemove);
+      this.el.addEventListener('mouseleave', this.onMouseleave);
+    },
+
+    removeMouseEventListeners() {
+      this.el.removeEventListener('mousemove', this.onMousemove);
+      this.el.removeEventListener('mouseleave', this.onMouseleave);
+    },
+
+    select() {
+      this.selected = true;
+    },
+
+    unselect() {
+      this.selected = false;
+    },
+
+    focus() {
+      if (!this.el) return;
+
+      this.tabIndex = -1;
+      this.selected = true;
+      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.selected = false;
+
+      // set all selected to false
+      this.items.forEach((item) => item.unselect());
+
+      // focus item
+      this.items[goToIndex].focus();
+    },
+
+    leaveMenu() {
+      if (this.componentTrigger) {
+        this.componentTrigger.cancel();
+        this.componentTrigger.focus();
+      }
+    },
+
+    onClick() {
+      if (this.disabled) {
+        return;
+      }
+
+      this.value !== undefined
+        ? this.apiInjected().emit(this.value)
+        : this.$emit('click');
+
+      this.$nextTick(() => this.leaveMenu());
+    },
+
+    onKeyEsc() {
+      this.leaveMenu();
+    },
+
+    onMousemove() {
+      if (this.selected) {
+        return;
+      }
+
+      this.items.forEach((item) => item.unselect());
+
+      this.select();
+      this.componentContent.setMousemove();
+    },
+
+    onMouseleave() {
+      this.unselect();
+      this.componentContent.unsetMousemove();
+    },
+  },
+};

package/mixins/floating-ui.js

@@ -0,0 +1,74 @@
+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 }) {
+              // the min width to floating uis should be 200
+              // since less than that can look not as nice
+              const minWidthLimit = 200;
+              const width = rects.reference.width;
+              const minWidth = width < minWidthLimit ? minWidthLimit : width;
+
+              Object.assign(content.style, {
+                minWidth: `${minWidth}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.19.2-16",
+  "version": "0.19.2-17",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",
@@ -11,9 +11,13 @@
     "access": "public"
   },
   "dependencies": {
+    "@floating-ui/dom": "^1.0.4",
     "@veritree/icons": "^0.36.1-0"
   },
   "devDependencies": {
-    "@nuxt/kit": "^3.0.0"
+    "@nuxt/kit": "^3.0.0",
+    "prettier": "^2.7.1",
+    "prettier-plugin-tailwindcss": "^0.1.13",
+    "tailwindcss": "^3.2.4"
   }
 }

package/src/components/Dialog/VTDialog.vue

@@ -8,6 +8,7 @@
         'fixed inset-0 z-50 grid grid-cols-1 grid-rows-1 p-4 md:p-8': !headless,
       }"
       aria-modal="true"
+      v-bind="$attrs"
       @click="onClick"
     >
       <slot></slot>
@@ -21,6 +22,8 @@ import { genId } from '../../utils/ids';
 export default {
   name: 'VTDialog',
 
+  inheritAttrs: false,
+
   provide() {
     return {
       apiDialog: () => {

package/src/components/Dialog/VTDialogOverlay.vue

@@ -5,7 +5,7 @@
       :id="id"
       :class="{
         'Dialog-overlay': headless,
-        'fixed inset-0 bg-fd-450/80': !headless,
+        'bg-primary-200/80 fixed inset-0': !headless,
       }"
     ></div>
   </FadeInOut>

package/src/components/DropdownMenu/VTDropdownMenu.vue

@@ -5,45 +5,47 @@
 </template>
 
 <script>
+import { floatingUiMixin } from '../../../mixins/floating-ui';
 import { genId } from '../../utils/ids';
 
 export default {
   name: 'VTDropdownMenu',
 
+  mixins: [floatingUiMixin],
+
   provide() {
     return {
       apiDropdownMenu: () => {
-        const { dark: isDark, headless: isHeadless, right: isRight } = this;
-        const { id, trigger, content, items } = 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);
         };
 
-        const unregisterItems = () => {
-          this.items = [];
+        const unregisterItem = (id) => {
+          const index = this.items.findIndex((item) => item.id === id);
+          this.items.splice(index, 1);
         };
 
         return {
-          id,
-          isDark,
-          isHeadless,
-          isRight,
-          trigger,
-          content,
-          items,
+          id: this.componentId,
+          component: this.component,
+          componentTrigger: this.componentTrigger,
+          componentContent: this.componentContent,
+          items: this.items,
           registerTrigger,
           registerContent,
           registerItem,
-          unregisterItems,
+          unregisterItem,
         };
       },
     };
@@ -54,23 +56,19 @@ export default {
       type: Boolean,
       default: false,
     },
-    dark: {
-      type: Boolean,
-      default: false,
-    },
-    right: {
-      type: Boolean,
-      default: false,
-    },
   },
 
   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,94 +1,51 @@
 <template>
-  <transition
-    enter-active-class="duration-200 ease-out"
-    enter-from-class="translate-y-[15px] opacity-0"
-    enter-to-class="translate-y-0 opacity-100"
-    leave-active-class="duration-200 ease-in"
-    leave-from-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 }"
+    :floating-ui-class="floatingUiClass"
   >
-    <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 { floatingUiContentMixin } from '../../../mixins/floating-ui-content';
 
 export default {
   name: 'VTDropdownMenuContent',
 
-  inject: ['apiDropdownMenu'],
+  mixins: [floatingUiContentMixin],
 
-  data() {
-    return {
-      id: `menucontent-${genId()}`,
-      visible: false,
-    };
-  },
+  inject: ['apiDropdownMenu'],
 
   computed: {
-    dark() {
-      return this.apiDropdownMenu().isDark;
+    id() {
+      return `dropdown-menu-content-${this.apiDropdownMenu().id}`;
     },
 
-    headless() {
-      return this.apiDropdownMenu().isHeadless;
+    component() {
+      return this.apiDropdownMenu().component;
     },
 
-    right() {
-      return this.apiDropdownMenu().isRight;
-    },
-
-    trigger() {
-      return this.apiDropdownMenu().trigger;
+    componentTrigger() {
+      return this.apiDropdownMenu().componentTrigger;
     },
   },
 
   mounted() {
-    this.apiDropdownMenu().registerContent(this);
-
-    this.$nextTick(() => {
-      if (this.trigger) this.trigger.toggleHasPopup();
-    });
-
-    // 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();
-    });
-  },
-
-  unmounted() {
-    // TODO: Create a directive or mixin for this
-    document.removeEventListener('click', this.trigger.onClick());
-  },
-
-  methods: {
-    show() {
-      this.visible = true;
-      this.$emit('shown');
-    },
+    const content = {
+      id: this.id,
+      hide: this.hide,
+      show: this.show,
+      getMousemove: this.getMousemove,
+      setMousemove: this.setMousemove,
+      unsetMousemove: this.unsetMousemove,
+      setActiveDescedant: this.setActiveDescedant,
+    };
 
-    hide() {
-      this.visible = false;
-      this.$emit('hidden');
-      this.apiDropdownMenu().unregisterItems();
-    },
+    this.apiDropdownMenu().registerContent(content);
   },
 };
 </script>

package/src/components/DropdownMenu/VTDropdownMenuDivider.vue

@@ -3,8 +3,6 @@
     :class="{
       PopoverDivider: headless,
       '-mx-3 my-2 h-[1px]': !headless,
-      'bg-gray-200': !dark,
-      'bg-fd-500': dark,
     }"
   ></div>
 </template>
@@ -15,6 +13,11 @@ export default {
 
   inject: ['apiDropdownMenu'],
 
+  headless: {
+    type: Boolean,
+    default: false,
+  },
+
   computed: {
     dark() {
       return this.apiDropdownMenu().isDark;