@veritree/ui 0.19.2-2 → 0.19.2-20

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 { genId } from "../../utils/ids";
+import { floatingUiMixin } from '../../../mixins/floating-ui';
+import { genId } from '../../utils/ids';
 
 export default {
-  name: "VTListbox",
+  name: 'VTListbox',
+
+  mixins: [floatingUiMixin],
 
   provide() {
     return {
-      api: () => {
-        const { dark: isDark, right: isRight } = this;
-        const { id, listbox, trigger, content, search, list, items } = this;
-
+      apiListbox: () => {
         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;
@@ -47,24 +47,21 @@ export default {
         };
 
         const emit = (value) => {
-          this.$emit("input", value);
-          this.$emit("change", value);
+          this.$emit('update:modelValue', value);
+          this.$emit('change', value);
         };
 
         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,
@@ -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}`;
     },
   },
 };

package/src/components/Listbox/VTListboxContent.vue

@@ -1,95 +1,44 @@
 <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"
+    :aria-activedescendant="activeDescedant"
+    :headless="headless"
+    :class="{ 'listbox-content': headless }"
+    :floating-ui-class="floatingUiClass"
+    role="listbox"
   >
-    <div
-      v-if="visible"
-      :id="id"
-      :aria-activedescendant="activeDescedant"
-      :class="{
-        MenuList: headless,
-        'absolute z-10 grid w-full min-w-[222px] overflow-hidden rounded-md py-2 px-3':
-          !headless,
-        'border-gray-100 bg-white shadow-300': !dark && !headless,
-        'bg-forest-default border border-solid border-gray-700 shadow-gray-700':
-          dark && !headless,
-        'left-0': !right && !headless,
-        'right-0': right && !headless,
-        'top-full mt-3': isTop && !headless,
-        'bottom-full mb-3': isBottom && !headless,
-      }"
-      role="listbox"
-    >
-      <slot></slot>
-    </div>
-  </transition>
+    <slot></slot>
+  </FloatingUi>
 </template>
 
 <script>
-import { genId } from "../../utils/ids";
+import { floatingUiContentMixin } from '../../../mixins/floating-ui-content';
 
 export default {
-  name: "VTListboxContent",
+  name: 'VTListboxContent',
 
-  inject: ["api"],
+  mixins: [floatingUiContentMixin],
 
-  props: {
-    headless: {
-      type: Boolean,
-      default: false,
-    },
-    bottom: {
-      type: Boolean,
-      default: false,
-    },
-    top: {
-      type: Boolean,
-      default: true,
-    },
-  },
+  inject: ['apiListbox'],
 
   data() {
     return {
-      id: `listboxcontent-${genId()}`,
       activeDescedant: null,
-      visible: false,
     };
   },
 
   computed: {
-    dark() {
-      return this.api().isDark;
-    },
-
-    right() {
-      return this.api().isRight;
-    },
-
-    listbox() {
-      return this.api().listbox;
-    },
-
-    trigger() {
-      return this.api().trigger;
+    id() {
+      return `listbox-content-${this.apiListbox().id}`;
     },
 
-    search() {
-      return this.api().search;
+    component() {
+      return this.apiListbox().component;
     },
 
-    // directions
-    isTop() {
-      return this.top && !this.bottom;
-    },
-
-    isBottom() {
-      return this.bottom;
+    componentTrigger() {
+      return this.apiListbox().componentTrigger;
     },
   },
 
@@ -98,54 +47,13 @@ export default {
       id: this.id,
       show: this.show,
       hide: this.hide,
+      getMousemove: this.getMousemove,
+      setMousemove: this.setMousemove,
+      unsetMousemove: this.unsetMousemove,
       setActiveDescedant: this.setActiveDescedant,
     };
 
-    this.api().registerContent(content);
-
-    // 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();
-    });
-  },
-
-  destroyed() {
-    // TODO: Create a directive or mixin for this
-    document.removeEventListener("click", this.trigger.onClick());
-  },
-
-  methods: {
-    show() {
-      if (this.visible) return;
-
-      this.visible = true;
-
-      this.$nextTick(() => {
-        this.listbox.setActive();
-
-        if (this.search) this.search.el.focus();
-      });
-    },
-
-    hide() {
-      if (!this.visible) return;
-
-      this.visible = false;
-
-      this.$nextTick(() => {
-        this.trigger.focus();
-
-        setTimeout(() => {
-          this.listbox.clearActive();
-          this.trigger.contract();
-        }, 100);
-      });
-    },
-
-    setActiveDescedant(id) {
-      this.activeDescedant = id;
-    },
+    this.apiListbox().registerContent(content);
   },
 };
 </script>

package/src/components/Listbox/VTListboxItem.vue

@@ -1,14 +1,7 @@
 <template>
   <li
     :id="id"
-    :class="{
-      ListboxItem: headless,
-      'relative z-10 flex items-center gap-2 px-3 py-2 no-underline': !headless,
-      'hover:bg-secondary-200/10': !dark && !headless,
-      'text-white': dark && !headless,
-      'pointer-events-none opacity-75': disabled && !headless,
-      'bg-secondary-200/10': selected && !headless,
-    }"
+    :class="classComputed"
     :aria-disabled="disabled"
     :aria-selected="String(selected)"
     :tabindex="tabIndex"
@@ -24,28 +17,21 @@
     @mouseout="onMouseleave"
     @keydown.tab.prevent
   >
-    <span class="truncate"><slot></slot></span>
+    <slot></slot>
   </li>
 </template>
 
 <script>
-import { scrollElementIntoView } from "../../utils/components";
-import { genId } from "../../utils/ids";
+import { floatingUiItemMixin } from '../../../mixins/floating-ui-item';
 
 export default {
-  name: "VTListboxItem",
+  name: 'VTListboxItem',
 
-  inject: ["api"],
+  mixins: [floatingUiItemMixin],
+
+  inject: ['apiListbox'],
 
   props: {
-    headless: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
     value: {
       type: [String, Number, Object, Array],
       required: true,
@@ -54,172 +40,14 @@ export default {
 
   data() {
     return {
-      id: `listboxitem-${genId()}`,
-      index: null,
-      selected: false,
-      tabIndex: 0,
+      apiInjected: this.apiListbox,
+      componentName: 'listbox-item',
     };
   },
 
   computed: {
-    dark() {
-      return this.api().isDark;
-    },
-
-    items() {
-      return this.api().items;
-    },
-
-    el() {
-      return this.$el;
-    },
-
-    trigger() {
-      return this.api().trigger;
-    },
-
-    content() {
-      return this.api().content;
-    },
-
-    list() {
-      return this.api().list;
-    },
-
     search() {
-      return this.api().search;
-    },
-  },
-
-  watch: {
-    selected(newValue) {
-      if (!newValue || !this.list) return;
-
-      if (this.content) {
-        this.content.setActiveDescedant(this.id);
-      }
-
-      const isMousemove = this.list.getMousemove();
-
-      if (!isMousemove) {
-        scrollElementIntoView(this.el, this.list.el);
-      }
-    },
-  },
-
-  mounted() {
-    const item = {
-      id: this.id,
-      focus: this.focus,
-      select: this.select,
-      unselect: this.unselect,
-      onClick: this.onClick,
-    };
-
-    this.api().registerItem(item);
-
-    this.index = this.items.length - 1;
-  },
-
-  beforeDestroy() {
-    this.api().unregisterItem(this.id);
-  },
-
-  methods: {
-    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;
-
-      const isMousemove = this.list.getMousemove();
-
-      if (isMousemove) {
-        this.list.unsetMousemove();
-        this.items.forEach((item) => item.unselect());
-      }
-
-      this.items[goToIndex].focus();
-    },
-
-    /**
-     * Hides content/menu and focus on trigger
-     */
-    leaveMenu() {
-      if (this.content) this.content.hide();
-    },
-
-    onKeyEsc() {
-      this.leaveMenu();
-    },
-
-    onClick() {
-      if (this.disabled) return;
-
-      this.api().emit(this.value);
-      this.$nextTick(() => this.leaveMenu());
-    },
-
-    onMousemove() {
-      this.items.forEach((item) => item.unselect());
-
-      this.select();
-      this.list.setMousemove();
-    },
-
-    onMouseleave() {
-      this.unselect();
-      this.list.unsetMousemove();
+      return this.apiInjected().search;
     },
   },
 };

package/src/components/Listbox/VTListboxLabel.vue

@@ -4,8 +4,6 @@
     :class="{
       ListboxLabel: headless,
       'mb-2 block text-xs font-normal uppercase': !headless,
-      'text-inherit': !dark && !headless,
-      'text-white': dark && !headless,
     }"
   >
     <slot></slot>
@@ -16,8 +14,6 @@
 export default {
   name: 'VTListboxLabel',
 
-  inject: ['api'],
-
   props: {
     as: {
       type: String,
@@ -28,11 +24,5 @@ export default {
       default: false,
     },
   },
-
-  computed: {
-    dark() {
-      return this.api().isDark;
-    },
-  },
 };
 </script>

package/src/components/Listbox/VTListboxList.vue

@@ -1,22 +1,19 @@
 <template>
   <ul
     :id="id"
-    :class="{
-      ListboxList: headless,
-      '-mx-3 max-h-[160px] w-auto overflow-y-auto': !headless,
-    }"
+    :class="[
+      headless ? 'listbox-list' : 'max-h-[160px] w-auto overflow-y-auto -mx-3',
+    ]"
   >
     <slot></slot>
   </ul>
 </template>
 
 <script>
-import { genId } from "../../utils/ids";
-
 export default {
-  name: "VTListboxList",
+  name: 'VTListboxList',
 
-  inject: ["api"],
+  inject: ['apiListbox'],
 
   props: {
     headless: {
@@ -25,39 +22,33 @@ export default {
     },
   },
 
-  data() {
-    return {
-      id: `listboxlist-${genId()}`,
-      isMousemove: false,
-    };
+  computed: {
+    id() {
+      return `listbox-list-${this.apiListbox().id}`;
+    },
   },
 
-  mounted() {
-    const list = {
-      el: this.$el,
-      getMousemove: this.getMousemove,
-      setMousemove: this.setMousemove,
-      unsetMousemove: this.unsetMousemove,
-    };
+  // mounted() {
+  //   const list = {
+  //     el: this.$el,
+  //   };
 
-    this.api().registerList(list);
-  },
+  //   this.apiListbox().registerList(list);
+  // },
 
   methods: {
     // 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;
-    },
+    // setMousemove() {
+    //   this.isMousemove = true;
+    // },
+    // unsetMousemove() {
+    //   this.isMousemove = false;
+    // },
+    // getMousemove() {
+    //   return this.isMousemove;
+    // },
   },
 };
 </script>