@veritree/ui 0.19.2 → 0.20.0-0

package/src/components/Drawer/VTDrawerMain.vue

@@ -12,7 +12,7 @@
 export default {
   name: 'VTDrawerMain',
 
-  inject: ['api'],
+  inject: ['apiDrawer'],
 
   props: {
     as: {
@@ -23,15 +23,15 @@ export default {
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiDrawer().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDrawer().isHeadless;
     },
 
     id() {
-      return `${this.api().id}-desc`;
+      return `${this.apiDrawer().id}-desc`;
     },
   },
 
@@ -42,7 +42,7 @@ export default {
   methods: {
     // In here because if there is no body, the dialog will not be described by
     setDialogDescribedby() {
-      const dialog = document.getElementById(this.api().id);
+      const dialog = document.getElementById(this.apiDrawer().id);
 
       if (dialog) {
         dialog.setAttribute('aria-describedby', this.id);

package/src/components/Drawer/VTDrawerOverlay.vue

@@ -12,14 +12,14 @@
 </template>
 
 <script>
-import FadeInOut from "../Transitions/FadeInOut.vue";
+import FadeInOut from '../Transitions/FadeInOut.vue';
 
 export default {
   components: {
     FadeInOut,
   },
 
-  inject: ["api"],
+  inject: ['apiDrawer'],
 
   data() {
     return {
@@ -29,21 +29,21 @@ export default {
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiDrawer().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDrawer().isHeadless;
     },
 
     id() {
-      return `${this.api().id}-overlay`;
+      return `${this.apiDrawer().id}-overlay`;
     },
   },
 
   mounted() {
     this.visible = true;
-    this.api().registerOverlay(this);
+    this.apiDrawer().registerOverlay(this);
   },
 
   methods: {

package/src/components/Drawer/VTDrawerTitle.vue

@@ -15,7 +15,7 @@
 export default {
   name: 'VTDrawerTitle',
 
-  inject: ['api'],
+  inject: ['apiDrawer'],
 
   props: {
     as: {
@@ -26,15 +26,15 @@ export default {
 
   computed: {
     dark() {
-      return this.api().isDark;
+      return this.apiDrawer().isDark;
     },
 
     headless() {
-      return this.api().isHeadless;
+      return this.apiDrawer().isHeadless;
     },
 
     id() {
-      return `${this.api().id}-title`;
+      return `${this.apiDrawer().id}-title`;
     },
   },
 
@@ -45,7 +45,7 @@ export default {
   methods: {
     // In here because if there is no header, the dialog will not be labelled by
     setDialogLabelledby() {
-      const dialog = document.getElementById(this.api().id);
+      const dialog = document.getElementById(this.apiDrawer().id);
 
       if (dialog) {
         dialog.setAttribute('aria-labelledby', this.id);

package/src/components/DropdownMenu/VTDropdownMenu.vue

@@ -5,45 +5,47 @@
 </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;
-
+      apiDropdownMenu: () => {
         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,38 @@ export default {
       type: Boolean,
       default: false,
     },
-    dark: {
-      type: Boolean,
-      default: false,
-    },
-    right: {
-      type: Boolean,
-      default: false,
+    placement: {
+      type: String,
+      default: 'bottom-start',
     },
   },
 
   data() {
     return {
-      id: `menu-${genId()}`,
-      trigger: null,
-      content: null,
+      componentId: genId(),
       items: [],
+      /**
+       * Explaining the need for the floatingUiMinWidth data
+       *
+       * The floating ui is a result of two items:
+       *
+       * 1. Trigger: the action button
+       * 2. Content: the popper/wrapper that appears after triggering the action button
+       *
+       * By default, the content will match the triggers width.
+       * The problem with this is that the trigger width
+       * might be too small causing the content to not fit
+       * what is inside it properly. So, to avoid this,
+       * a min width is needed.
+       */
+      floatingUiMinWidth: 200,
     };
   },
+
+  computed: {
+    id() {
+      return `dropdown-menu-${this.componentId}`;
+    },
+  },
 };
 </script>

package/src/components/DropdownMenu/VTDropdownMenuContent.vue

@@ -1,93 +1,58 @@
 <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
+    :id="id"
+    :visible="visible"
+    :headless="headless"
+    component="dropdown"
   >
-    <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: ['api'],
+  inheritAttrs: false,
 
-  data() {
-    return {
-      id: `menucontent-${genId()}`,
-      visible: false,
-    };
-  },
+  mixins: [floatingUiContentMixin],
 
-  computed: {
-    dark() {
-      return this.api().isDark;
-    },
+  inject: ['apiDropdownMenu'],
 
-    headless() {
-      return this.api().isHeadless;
+  computed: {
+    id() {
+      return `dropdown-menu-content-${this.apiDropdownMenu().id}`;
     },
 
-    right() {
-      return this.api().isRight;
+    component() {
+      return this.apiDropdownMenu().component;
     },
 
-    trigger() {
-      return this.api().trigger;
+    componentTrigger() {
+      return this.apiDropdownMenu().componentTrigger;
     },
   },
 
   mounted() {
-    this.api().registerContent(this);
-
-    this.$nextTick(() => {
-      if (this.trigger) this.trigger.toggleHasPopup();
-    });
-
-    // TODO: Create a directive or mixin for this
-    document.addEventListener('click', (e) => {
-      e.stopPropagation();
-      if (this.visible && !this.$el.contains(e.target)) this.trigger.onClick();
-    });
-  },
+    const content = {
+      id: this.id,
+      hide: this.hide,
+      show: this.show,
+      setActiveDescedant: this.setActiveDescedant,
+    };
 
-  destroyed() {
-    // TODO: Create a directive or mixin for this
-    document.removeEventListener('click', this.trigger.onClick());
+    this.apiDropdownMenu().registerContent(content);
   },
 
   methods: {
-    show() {
-      this.visible = true;
-      this.$emit('shown');
+    hidden() {
+      this.$emit('hidden');
     },
 
-    hide() {
-      this.visible = false;
-      this.$emit('hidden');
-      this.api().unregisterItems();
+    shown() {
+      this.$emit('shown');
     },
   },
 };

package/src/components/DropdownMenu/VTDropdownMenuDivider.vue

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

package/src/components/DropdownMenu/VTDropdownMenuItem.vue

@@ -3,20 +3,14 @@
     :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"
-    @keydown.up.prevent="focusNextItem"
+    @keydown.down.prevent="focusNextItem"
+    @keydown.up.prevent="focusPreviousItem"
     @keydown.home.prevent="focusFirstItem"
     @keydown.end.prevent="focusLastItem"
     @keydown.esc.prevent="onKeyEsc"
@@ -28,12 +22,14 @@
 </template>
 
 <script>
-import { genId } from '../../utils/ids';
+import { floatingUiItemMixin } from '../../../mixins/floating-ui-item';
 
 export default {
   name: 'VTDropdownMenuItem',
 
-  inject: ['api'],
+  mixins: [floatingUiItemMixin],
+
+  inject: ['apiDropdownMenu'],
 
   props: {
     to: {
@@ -44,128 +40,19 @@ 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.api().isDark;
-    },
-
-    headless() {
-      return this.api().isHeadless;
-    },
-
     as() {
       return this.href ? 'a' : this.to ? 'NuxtLink' : 'button';
     },
-
-    items() {
-      return this.api().items;
-    },
-
-    el() {
-      return this.$el;
-    },
-
-    trigger() {
-      return this.api().trigger;
-    },
-
-    content() {
-      return this.api().content;
-    },
-  },
-
-  mounted() {
-    const item = {
-      focus: this.focus,
-      el: this.el,
-    };
-
-    this.api().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() {
-      if (this.disabled) return;
-
-      this.$emit('click');
-      this.$nextTick(() => this.leaveMenu());
-    },
   },
 };
 </script>

package/src/components/DropdownMenu/VTDropdownMenuLabel.vue

@@ -1,11 +1,6 @@
 <template>
   <span
-    :class="{
-      MenuLabel: headless,
-      'mb-2 block text-xs uppercase': !headless,
-      'text-inherit': !dark,
-      'text-white': dark,
-    }"
+    :class="[headless ? 'dropdown-menu-label' : 'mb-2 block text-xs uppercase']"
   >
     <slot></slot>
   </span>
@@ -15,15 +10,11 @@
 export default {
   name: 'VTDropdownMenuLabel',
 
-  inject: ['api'],
+  inject: ['apiDropdownMenu'],
 
   computed: {
-    dark() {
-      return this.api().isDark;
-    },
-
     headless() {
-      return this.api().isHeadless;
+      return this.apiDropdownMenu().isHeadless;
     },
   },
 };