@veritree/ui 0.19.2 → 0.20.0-0

package/src/components/Listbox/VTListbox.vue

@@ -1,39 +1,57 @@
 <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 $mutable = {};
+
+        // Used to get and update the value computed
+        // that will then emit the value up to the
+        // parent component
+        Object.defineProperty($mutable, 'valueComputed', {
+          enumerable: true,
+          get: () => this.valueComputed,
+          set: (value) => (this.valueComputed = value),
+        });
+
+        /**
+         * This function registers a trigger by setting its value to the componentTrigger property of the current object.
+         * @param {VueComponent} trigger - The trigger to be registered.
+         */
         const registerTrigger = (trigger) => {
           if (!trigger) return;
-          this.trigger = trigger;
+          this.componentTrigger = trigger;
         };
 
+        /**
+         * Registers content to be used in the children components by setting its value to the componentContent property of the current object.
+         * @param {any} content - The content to be registered.
+         */
         const registerContent = (content) => {
           if (!content) return;
-          this.content = content;
+          this.componentContent = content;
         };
 
+        /**
+         * Registers search to be used in the children components by setting its value to the componentSearch property of the current object.
+         * @param {any} search - The search to be registered.
+         */
         const registerSearch = (search) => {
           if (!search) return;
-          this.search = search;
-        };
-
-        const registerList = (list) => {
-          if (!list) return;
-          this.list = list;
+          this.componentSearch = search;
         };
 
         const registerItem = (item) => {
@@ -46,27 +64,37 @@ export default {
           this.items.splice(index, 1);
         };
 
+        const pushSearch = (key) => {
+          key === 'Backspace' && this.search.length
+            ? (this.search = this.search.slice(0, -1))
+            : (this.search += key);
+        };
+
+        const clearSearch = () => {
+          this.search = '';
+        };
+
         const emit = (value) => {
-          this.$emit("input", value);
-          this.$emit("change", value);
+          this.valueComputed = value;
         };
 
         return {
-          id,
-          isDark,
-          isRight,
-          listbox,
-          trigger,
-          search,
-          content,
-          list,
-          items,
+          id: this.componentId,
+          component: this.component,
+          componentTrigger: this.componentTrigger,
+          componentContent: this.componentContent,
+          componentSearch: this.componentSearch,
+          items: this.items,
+          multiple: this.multiple,
+          search: this.search,
+          $mutable,
           registerTrigger,
           registerContent,
           registerSearch,
-          registerList,
           registerItem,
           unregisterItem,
+          pushSearch,
+          clearSearch,
           emit,
         };
       },
@@ -74,19 +102,52 @@ export default {
   },
 
   props: {
-    value: {
-      type: [String, Number, Object],
+    /**
+     * The value of the component. Can be a string, number, object, or array.
+     * @type {string|number|object|array}
+     * @default null
+     */
+    modelValue: {
+      type: [String, Number, Object, Array],
       default: null,
     },
+    /**
+     * Determines whether the button will use its default atomic style (tailwind) or its default class
+     * @type {boolean}
+     * @values
+     * - true: The button will have no default style and can be fully customized with a custom class
+     * - false: The button will use its default atomic style (tailwind) and can be further customized with additional classes
+     * @default null
+     */
     headless: {
       type: Boolean,
       default: false,
     },
-    dark: {
+    /**
+     * The placement of the component relative to its trigger element.
+     * @type {string}
+     * @values 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'
+     * @default 'bottom-start'
+     */
+    placement: {
+      type: String,
+      default: 'bottom-start',
+    },
+    /**
+     * Determines whether the component should be aligned to the right of its trigger element.
+     * @type {boolean}
+     * @default false
+     */
+    right: {
       type: Boolean,
       default: false,
     },
-    right: {
+    /**
+     * Determines whether the component should allow multiple selections.
+     * @type {boolean}
+     * @default false
+     */
+    multiple: {
       type: Boolean,
       default: false,
     },
@@ -94,31 +155,42 @@ export default {
 
   data() {
     return {
-      id: `listbox-${genId()}`,
-      listbox: null,
-      trigger: null,
-      content: null,
-      search: null,
-      list: null,
+      componentId: genId(),
+      componentSearch: null,
+      search: '',
       items: [],
-      active: false,
-    };
-  },
-
-  mounted() {
-    this.listbox = {
-      setActive: this.setActive,
-      clearActive: this.clearActive,
+      itemsChecked: [],
+      /**
+       * 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,
     };
   },
 
-  methods: {
-    setActive() {
-      this.active = true;
+  computed: {
+    id() {
+      return `listbox-${this.componentId}`;
     },
 
-    clearActive() {
-      this.active = null;
+    valueComputed: {
+      get() {
+        return this.modelValue;
+      },
+      set(newValue) {
+        this.$emit('update:modelValue', newValue);
+        this.$emit('change', newValue);
+      },
     },
   },
 };

package/src/components/Listbox/VTListboxContent.vue

@@ -1,95 +1,43 @@
 <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"
+    :aria-activedescendant="activeDescedant"
+    component="listbox"
+    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;
     },
   },
 
@@ -101,51 +49,7 @@ export default {
       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>