@veritree/ui 0.19.2-20 → 0.19.2-21

package/mixins/floating-ui-content.js

@@ -10,22 +10,17 @@ export const floatingUiContentMixin = {
       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));
+    document.addEventListener('click', this.onDocumentClick);
   },
 
   destroyed() {
@@ -79,22 +74,6 @@ export const floatingUiContentMixin = {
       }
     },
 
-    // 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

@@ -19,10 +19,6 @@ export const floatingUiItemMixin = {
       return this.apiInjected().items;
     },
 
-    el() {
-      return this.$el;
-    },
-
     componentContent() {
       return this.apiInjected().componentContent;
     },
@@ -36,7 +32,7 @@ export const floatingUiItemMixin = {
         // default styles
         this.headless
           ? `${this.componentName}`
-          : 'relative z-10 flex items-center gap-2 px-3 py-2 text-inherit no-underline',
+          : 'relative z-10 flex items-center gap-2 px-3 py-2 text-inherit no-underline cursor-pointer',
         // disabled state styles
         this.headless
           ? this.disabled
@@ -51,7 +47,7 @@ export const floatingUiItemMixin = {
             ? `${this.componentName}--selected`
             : null
           : this.selected
-          ? 'bg-secondary-200/10'
+          ? 'bg-gray-200'
           : null,
       ];
     },
@@ -62,20 +58,24 @@ export const floatingUiItemMixin = {
       index: null,
       selected: false,
       tabIndex: 0,
+      eventType: null,
     };
   },
 
   watch: {
     selected(newValue) {
-      if (!newValue || !this.componentContent) return;
+      if (!newValue || !this.componentContent) {
+        return;
+      }
 
       this.componentContent.setActiveDescedant(this.id);
 
-      const isMousemove = this.componentContent.getMousemove();
-
-      if (!isMousemove) {
-        this.el.scrollIntoView({ block: 'nearest' });
+      // do not scroll into view if it's a mouse event
+      if (this.eventType && this.eventType.includes('mouse')) {
+        return;
       }
+
+      this.$el.scrollIntoView({ block: 'nearest' });
     },
   },
 
@@ -95,8 +95,10 @@ export const floatingUiItemMixin = {
 
       const item = {
         id: this.id,
+        text: '',
         select: this.select,
         unselect: this.unselect,
+        isSelected: this.isSelected,
         focus: this.focus,
         onClick: this.onClick,
       };
@@ -104,17 +106,30 @@ export const floatingUiItemMixin = {
       this.apiInjected().registerItem(item);
     },
 
+    /**
+     * mousemove and mouseleave events will be attached to
+     * the element here instead of using vue @mousemove
+     * and @mouseleave in the element since they did
+     * not worker properly
+     */
     addMouseEventListeners() {
-      this.el.addEventListener('mousemove', this.onMousemove);
-      this.el.addEventListener('mouseleave', this.onMouseleave);
+      this.$el.addEventListener('mousemove', this.onMousemove);
+      this.$el.addEventListener('mouseleave', this.onMouseleave);
     },
 
+    /**
+     * remove the mousemove and mouseleave added for
+     * avoiding memory leaks, if @mousemove and
+     * @mouseleave were in the element, this
+     * wound't be needed
+     */
     removeMouseEventListeners() {
-      this.el.removeEventListener('mousemove', this.onMousemove);
-      this.el.removeEventListener('mouseleave', this.onMouseleave);
+      this.$el.removeEventListener('mousemove', this.onMousemove);
+      this.$el.removeEventListener('mouseleave', this.onMouseleave);
     },
 
-    select() {
+    select(eventType) {
+      this.eventType = eventType;
       this.selected = true;
     },
 
@@ -122,59 +137,84 @@ export const floatingUiItemMixin = {
       this.selected = false;
     },
 
+    isSelected() {
+      return this.selected;
+    },
+
     focus() {
-      if (!this.el) return;
+      if (!this.$el) return;
 
       this.tabIndex = -1;
       this.selected = true;
-      this.el.focus();
+      this.$el.focus();
     },
 
     focusFirstItem() {
-      this.setFocusToItem(0);
+      const selectedIndex = this.getItemSelectedIndex();
+      const newSelectedIndex = 0;
+
+      this.setFocusToItem(selectedIndex, newSelectedIndex);
     },
 
     focusLastItem() {
-      this.setFocusToItem(this.items.length - 1);
+      const selectedIndex = this.getItemSelectedIndex();
+      const newSelectedIndex = this.items.length - 1;
+
+      this.setFocusToItem(selectedIndex, newSelectedIndex);
     },
 
     /**
-     * Focus the previous item in the menu.
-     * If is the first item, jump to the last item.
+     * Focus the next item in the menu.
+     * If is the last item, jump to the first item.
      */
-    focusPreviousItem() {
-      const isLast = this.index === this.items.length - 1;
-      const goToIndex = isLast ? 0 : this.index + 1;
+    focusNextItem() {
+      const selectedIndex = this.getItemSelectedIndex();
+      const isLast = selectedIndex === this.items.length - 1;
+      const firstItemIndex = 0;
+      const nextItemIndex = selectedIndex + 1;
+      const newSelectedIndex = isLast ? firstItemIndex : nextItemIndex;
 
-      this.setFocusToItem(goToIndex);
+      this.setFocusToItem(selectedIndex, newSelectedIndex);
     },
 
     /**
-     * Focus the next item in the menu.
-     * If is the last item, jump to the first item.
+     * Focus the previous item in the menu.
+     * If is the first item, jump to the last item.
      */
-    focusNextItem() {
-      const isFirst = this.index === 0;
-      const goToIndex = isFirst ? this.items.length - 1 : this.index - 1;
+    focusPreviousItem() {
+      const selectedIndex = this.getItemSelectedIndex();
+      const isFirst = selectedIndex === 0;
+      const lastItemIndex = this.items.length - 1;
+      const previousItemIndex = selectedIndex - 1;
+      const newSelectedIndex = isFirst ? lastItemIndex : previousItemIndex;
 
-      this.setFocusToItem(goToIndex);
+      this.setFocusToItem(selectedIndex, newSelectedIndex);
     },
 
     /**
-     * Focus item by remove its tabindex and calling
+     * Focus/select item by removing its tabindex and calling
      * focus to the element.
      *
-     * @param {Number, String} goToIndex
+     * @param {Number, String} selectedIndex
+     * @param {Number, String} newSelectedIndex
      */
-    setFocusToItem(goToIndex) {
+    setFocusToItem(selectedIndex, newSelectedIndex) {
       this.tabIndex = 0;
-      this.selected = false;
 
-      // set all selected to false
-      this.items.forEach((item) => item.unselect());
+      // before focusing, let's unselect selected
+      // item that were previously focused
+      if (selectedIndex >= 0) {
+        this.items[selectedIndex].unselect();
+      }
+
+      // focus new item
+      if (this.items[newSelectedIndex]) {
+        this.items[newSelectedIndex].focus();
+      }
+    },
 
-      // focus item
-      this.items[goToIndex].focus();
+    getItemSelectedIndex() {
+      return this.items.findIndex((item) => item.isSelected());
     },
 
     leaveMenu() {
@@ -200,20 +240,27 @@ export const floatingUiItemMixin = {
       this.leaveMenu();
     },
 
-    onMousemove() {
+    onMousemove(event) {
       if (this.selected) {
         return;
       }
 
-      this.items.forEach((item) => item.unselect());
+      // unselect all items before selecting new one
+      for (const item of this.items) {
+        item.unselect();
+      }
 
-      this.select();
-      this.componentContent.setMousemove();
+      /**
+       * Select item passing the event type to decide if
+       * scrolling will be disabled or not. It is
+       * expected that on mouse move event, the scroll
+       * doesn't happen automatically.
+       */
+      this.select(event.type);
     },
 
     onMouseleave() {
       this.unselect();
-      this.componentContent.unsetMousemove();
     },
   },
-};
+};

package/mixins/floating-ui.js

@@ -1,13 +1,6 @@
 import { computePosition, flip, shift, offset, size } from '@floating-ui/dom';
 
 export const floatingUiMixin = {
-  props: {
-    placement: {
-      type: String,
-      default: 'bottom-start',
-    },
-  },
-
   data() {
     return {
       component: null,
@@ -42,18 +35,18 @@ export const floatingUiMixin = {
     positionContentToTrigger() {
       const trigger = document.getElementById(this.componentTrigger.id);
       const content = document.getElementById(this.componentContent.id);
+      const minWidthLimit = Number(this.floatingUiMinWidth);
 
       computePosition(trigger, content, {
         placement: this.placement,
         middleware: [
-          offset(6),
+          offset(5),
           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;
+              if (!minWidthLimit) return;
+
               const width = rects.reference.width;
               const minWidth = width < minWidthLimit ? minWidthLimit : width;
 
@@ -71,4 +64,4 @@ export const floatingUiMixin = {
       });
     },
   },
-};
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritree/ui",
-  "version": "0.19.2-20",
+  "version": "0.19.2-21",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",

package/src/components/Listbox/VTListbox.vue

@@ -16,26 +16,44 @@ export default {
   provide() {
     return {
       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.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.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;
+          this.componentSearch = search;
         };
 
-        // const registerList = (list) => {
-        //   if (!list) return;
-        //   this.list = list;
-        // };
-
         const registerItem = (item) => {
           if (!item) return;
           this.items.push(item);
@@ -46,9 +64,18 @@ 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('update:modelValue', value);
-          this.$emit('change', value);
+          this.valueComputed = value;
         };
 
         return {
@@ -56,14 +83,18 @@ export default {
           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,
         };
       },
@@ -71,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,
     },
@@ -92,8 +156,25 @@ export default {
   data() {
     return {
       componentId: genId(),
-      search: null,
+      componentSearch: null,
+      search: '',
       items: [],
+      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,
     };
   },
 
@@ -101,6 +182,16 @@ export default {
     id() {
       return `listbox-${this.componentId}`;
     },
+
+    valueComputed: {
+      get() {
+        return this.modelValue;
+      },
+      set(newValue) {
+        this.$emit('update:modelValue', newValue);
+        this.$emit('change', newValue);
+      },
+    },
   },
 };
 </script>

package/src/components/Listbox/VTListboxContent.vue

@@ -1,11 +1,10 @@
 <template>
   <FloatingUi
-    :visible="visible"
     :id="id"
-    :aria-activedescendant="activeDescedant"
+    :visible="visible"
     :headless="headless"
-    :class="{ 'listbox-content': headless }"
-    :floating-ui-class="floatingUiClass"
+    :aria-activedescendant="activeDescedant"
+    component="listbox"
     role="listbox"
   >
     <slot></slot>
@@ -47,9 +46,6 @@ export default {
       id: this.id,
       show: this.show,
       hide: this.hide,
-      getMousemove: this.getMousemove,
-      setMousemove: this.setMousemove,
-      unsetMousemove: this.unsetMousemove,
       setActiveDescedant: this.setActiveDescedant,
     };
 

package/src/components/Listbox/VTListboxItem.vue

@@ -5,30 +5,47 @@
     :aria-disabled="disabled"
     :aria-selected="String(selected)"
     :tabindex="tabIndex"
-    role="option"
+    :role="'option'"
     @click.stop="onClick"
-    @keydown.down.prevent="focusPreviousItem"
-    @keydown.up.prevent="focusNextItem"
+    @keydown.prevent="onKeydown"
+    @keydown.down.prevent="focusNextItem"
+    @keydown.up.prevent="focusPreviousItem"
     @keydown.home.prevent="focusFirstItem"
     @keydown.end.prevent="focusLastItem"
     @keydown.esc.stop="onKeyEsc"
     @keydown.enter.prevent="onClick"
-    @mousemove="onMousemove"
-    @mouseout="onMouseleave"
     @keydown.tab.prevent
   >
+    <span v-if="apiListbox().multiple">
+      <input
+        v-model="apiListbox().$mutable.valueComputed"
+        :id="`${id}-checkbox`"
+        :value="value"
+        type="checkbox"
+        @click.stop
+        @change="onChange"
+      />
+    </span>
     <slot></slot>
+    <span v-if="wasSelected" class="ml-auto">
+      <IconCheckOutline class="text-secondary-200 h-5 w-5" />
+    </span>
   </li>
 </template>
 
 <script>
+import { IconCheckOutline } from '@veritree/icons';
 import { floatingUiItemMixin } from '../../../mixins/floating-ui-item';
 
+let keydownSearchTimeout = null;
+
 export default {
   name: 'VTListboxItem',
 
   mixins: [floatingUiItemMixin],
 
+  components: { IconCheckOutline },
+
   inject: ['apiListbox'],
 
   props: {
@@ -40,14 +57,119 @@ export default {
 
   data() {
     return {
+      // apiInjected is used in the mixin floating-ui-item
       apiInjected: this.apiListbox,
       componentName: 'listbox-item',
     };
   },
 
   computed: {
+    componentContent() {
+      return this.apiInjected().componentContent;
+    },
+
+    hasComponentSearch() {
+      return this.apiListbox().componentSearch !== null;
+    },
+
     search() {
-      return this.apiInjected().search;
+      return this.apiListbox().search;
+    },
+
+    /**
+     * The difference between selected (in the mixin) and
+     * wasSelected is that selected is more related to
+     * the aria-selected while wasSelected is the
+     * real selected option for the listbox
+     */
+    wasSelected() {
+      return (
+        JSON.stringify(this.value) ===
+        JSON.stringify(this.apiListbox().$mutable.valueComputed)
+      );
+    },
+  },
+
+  mounted() {
+    console.log(this.apiListbox().$mutable);
+    if (this.wasSelected) {
+      /**
+       * There are some conflicts between the portal and the interaction
+       * with the element. It's unclear why it happens but if no delay,
+       * the floating ui content, that is placed in the body by the
+       * vue portal plugin, will not appear close to the trigger.
+       *
+       * Kind hacky but no time do find real solution.
+       */
+      setTimeout(() => {
+        this.hasComponentSearch ? this.select() : this.focus();
+      }, 1);
+    }
+  },
+
+  methods: {
+    /**
+     * This event is mainly for the search since other keydown
+     * events are handled with vue v-on (@) directive
+     *
+     * @param {Object} event
+     */
+    onKeydown(e) {
+      const isLetter = e.code.includes('Key');
+      const isNumber = e.code.includes('Numpad') || e.code.includes('Digit');
+      const isBackspace = e.code === 'Backspace';
+      const isSpace = e.code === 'Space';
+
+      if (isLetter || isNumber || isBackspace || isSpace) {
+        this.doSearch(e);
+      }
+    },
+
+    /**
+     * Searches and focus the options that matches the
+     * value typed when the item is selected.
+     *
+     * @param {Object} event
+     */
+    doSearch(e) {
+      clearTimeout(keydownSearchTimeout);
+
+      /**
+       * Add letter or number to search data in component
+       * root, so it is available for all children
+       */
+      this.apiListbox().pushSearch(e.key);
+
+      /**
+       * Let's get the item selected index at the moment the search
+       * starts to later unselect it if necessary
+       */
+      const itemSelectedIndex = this.getItemSelectedIndex();
+
+      /**
+       * As we have now the search data with value, let's go
+       * through all items and check if the search matches
+       * with any of the items to get its index value
+       */
+      const newItemSelectedIndex = this.items.findIndex((item) =>
+        item.text.toLowerCase().includes(this.search.toLowerCase())
+      );
+
+      /**
+       * Focus the item that matches the search, and if no match
+       * we will just remove the selected state from item
+       */
+      newItemSelectedIndex >= 0
+        ? this.setFocusToItem(itemSelectedIndex, newItemSelectedIndex)
+        : this.unselect();
+
+      /**
+       * Clear the search data value after some time
+       * to allow other searches to be performed
+       */
+      keydownSearchTimeout = setTimeout(() => {
+        this.apiListbox().clearSearch();
+      }, 1000);
     },
   },
 };

package/src/components/Listbox/VTListboxLabel.vue

@@ -1,10 +1,9 @@
 <template>
   <component
     :is="as"
-    :class="{
-      ListboxLabel: headless,
-      'mb-2 block text-xs font-normal uppercase': !headless,
-    }"
+    :class="[
+      headless ? 'listbox-label' : 'mb-2 block text-xs font-normal uppercase',
+    ]"
   >
     <slot></slot>
   </component>

package/src/components/Listbox/VTListboxList.vue

@@ -2,7 +2,9 @@
   <ul
     :id="id"
     :class="[
-      headless ? 'listbox-list' : 'max-h-[160px] w-auto overflow-y-auto -mx-3',
+      headless
+        ? 'listbox-list'
+        : '-mx-3 max-h-[160px] w-auto overflow-y-auto scroll-auto',
     ]"
   >
     <slot></slot>
@@ -27,28 +29,5 @@ export default {
       return `listbox-list-${this.apiListbox().id}`;
     },
   },
-
-  // mounted() {
-  //   const list = {
-  //     el: this.$el,
-  //   };
-
-  //   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;
-    // },
-  },
 };
 </script>

package/src/components/Listbox/VTListboxSearch.vue

@@ -1,18 +1,22 @@
 <template>
-  <input
-    :value="modelValue"
-    type="text"
-    :class="classComputed"
-    @input="onInput"
-    @click.stop
-    @keydown.down.prevent="focusNextItem"
-    @keydown.up.prevent="focusPreviousItem"
-    @keydown.home.prevent="focusFirstItem"
-    @keydown.end.prevent="focusLastItem"
-    @keydown.enter.prevent="onKeyEnter"
-    @keydown.esc.stop="hide"
-    @keydown.tab.prevent="hide"
-  />
+  <div class="-mx-3 -mt-2">
+    <input
+      ref="search"
+      :value="modelValue"
+      v-bind="$attrs"
+      type="text"
+      class="leading-0 font-inherit w-full max-w-full appearance-none border-b border-solid border-gray-300 py-2 px-3 text-base text-inherit"
+      @input="onInput"
+      @click.stop
+      @keydown.down.prevent="focusNextItem"
+      @keydown.up.prevent="focusPreviousItem"
+      @keydown.home.prevent="focusFirstItem"
+      @keydown.end.prevent="focusLastItem"
+      @keydown.enter.prevent="onKeyEnter"
+      @keydown.esc.stop="hide"
+      @keydown.tab.prevent="hide"
+    />
+  </div>
 </template>
 
 <script>
@@ -23,12 +27,14 @@ export default {
 
   mixins: [formControlMixin],
 
+  inheritAttrs: false,
+
   inject: ['apiListbox'],
 
   data() {
     return {
       name: 'listbox-search',
-      index: -1,
+      index: null,
       search: '',
     };
   },
@@ -38,10 +44,6 @@ export default {
       return this.apiListbox().componentTrigger;
     },
 
-    componentContent() {
-      return this.apiListbox().componentContent;
-    },
-
     items() {
       return this.apiListbox().items;
     },
@@ -52,12 +54,12 @@ export default {
   },
 
   mounted() {
-    const search = {
+    const componentSearch = {
       el: this.$el,
     };
 
-    this.apiListbox().registerSearch(search);
-    this.$nextTick(() => setTimeout(() => this.$el.focus(), 150));
+    this.apiListbox().registerSearch(componentSearch);
+    this.$nextTick(() => setTimeout(() => this.$refs.search.focus(), 150));
   },
 
   beforeUnmount() {
@@ -67,56 +69,61 @@ export default {
 
   methods: {
     focusNextItem() {
-      if (this.index !== -1) {
-        this.unselectItem();
-      }
-
-      this.index++;
+      const selectedIndex = this.getItemSelectedIndex();
+      const isLast = selectedIndex === this.items.length - 1;
+      const firstItemIndex = 0;
+      const nextItemIndex = selectedIndex + 1;
+      const newSelectedIndex = isLast ? firstItemIndex : nextItemIndex;
 
-      if (this.index > this.items.length - 1) {
-        this.index = 0;
-      }
-
-      if (this.item) {
-        this.item.select();
-      }
+      this.selectItem(selectedIndex, newSelectedIndex);
     },
 
     focusPreviousItem() {
-      this.unselectItem();
-
-      this.index--;
-
-      if (this.index < 0) {
-        this.index = this.items.length - 1;
-      }
+      const selectedIndex = this.getItemSelectedIndex();
+      const isFirst = selectedIndex === 0;
+      const lastItemIndex = this.items.length - 1;
+      const previousItemIndex = selectedIndex - 1;
+      const newSelectedIndex = isFirst ? lastItemIndex : previousItemIndex;
 
-      this.item.select();
+      this.selectItem(selectedIndex, newSelectedIndex);
     },
 
     focusFirstItem() {
-      this.unselectItem();
-      this.index = 0;
-      this.item.select();
+      const selectedIndex = this.getItemSelectedIndex();
+      const newSelectedIndex = 0;
+
+      this.selectItem(selectedIndex, newSelectedIndex);
     },
 
     focusLastItem() {
-      this.unselectItem();
-      this.index = this.items.length - 1;
-      this.item.select();
+      const selectedIndex = this.getItemSelectedIndex();
+      const newSelectedIndex = this.items.length - 1;
+
+      this.selectItem(selectedIndex, newSelectedIndex);
     },
 
-    unselectItem() {
-      const isMousemove = this.componentContent.getMousemove();
+    selectItem(selectedIndex, newSelectedIndex) {
+      // before selecting, let's unselect selected
+      // item that were previously focused
+      if (selectedIndex >= 0) {
+        this.items[selectedIndex].unselect();
+      }
 
-      if (isMousemove) {
-        this.componentContent.unsetMousemove();
-        this.items.forEach((item) => item.unselect());
+      // select new item
+      if (this.items[newSelectedIndex]) {
+        this.index = newSelectedIndex;
+        this.items[newSelectedIndex].select();
       }
+    },
 
+    unselectItem() {
       if (this.item) this.item.unselect();
     },
 
+    getItemSelectedIndex() {
+      return this.items.findIndex((item) => item.isSelected());
+    },
+
     onInput(event) {
       this.index = 0;
       if (this.item) this.item.select();

package/src/components/Listbox/VTListboxTrigger.vue

@@ -24,7 +24,10 @@
 </template>
 
 <script>
-import { formControlMixin } from '../../../mixins/form-control';
+import {
+  formControlMixin,
+  formControlStyleMixin,
+} from '../../../mixins/form-control';
 import { IconChevronDown } from '@veritree/icons';
 
 export default {
@@ -32,20 +35,23 @@ export default {
 
   components: { IconChevronDown },
 
-  mixins: [formControlMixin],
+  mixins: [formControlMixin, formControlStyleMixin],
 
   inject: ['apiListbox'],
 
   data() {
     return {
-      name: 'listbox-button',
+      name: 'listbox-trigger',
       expanded: false,
       hasPopup: false,
-      id: null,
     };
   },
 
   computed: {
+    id() {
+      return `listbox-trigger-${this.apiListbox().id}`;
+    },
+
     componentContent() {
       return this.apiListbox().componentContent;
     },
@@ -64,8 +70,6 @@ export default {
   },
 
   mounted() {
-    this.id = `listbox-trigger-${this.apiListbox().id}`;
-
     const trigger = {
       el: this.$el,
       cancel: this.cancel,
@@ -100,6 +104,7 @@ export default {
       if (!this.componentContent) {
         return;
       }
+
       this.expanded = false;
 
       this.hideComponentContent();
@@ -119,6 +124,7 @@ export default {
 
     onClick(e) {
       this.init(e);
+      this.$emit('click');
     },
 
     onKeyDownOrUp(e) {

package/src/components/Utils/FloatingUi.vue

@@ -2,25 +2,24 @@
   <Teleport to="body">
     <transition
       enter-active-class="duration-200 ease-out"
-      enter-from-class="translate-y-[15px] opacity-0"
-      enter-to-class="translate-y-0 opacity-100"
+      :enter-from-class="transitionEnterClass"
+      :enter-to-class="transitionEnterToClass"
       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"
+      :leave-from-class="transitionLeaveClass"
+      :leave-to-class="transitionLeaveToClass"
+      @after-leave="hidden"
+      @after-enter="shown"
     >
       <div
         v-if="visible"
-        :id="id"
         :class="[
           headless
-            ? null
-            : 'shadow-300 absolute z-50 grid overflow-x-hidden rounded-md border-gray-100 bg-white py-2 px-3',
-          floatingUiClass ? floatingUiClass : null,
+            ? `${this.component}-content`
+            : `absolute z-50 grid overflow-hidden rounded-md shadow-md  ${this.classes} ${this.portalClass}`,
         ]"
         v-bind="$attrs"
       >
-        <slot></slot>
+        <slot />
       </div>
     </transition>
   </Teleport>
@@ -28,30 +27,60 @@
 
 <script>
 export default {
-  inheritAttrs: false,
-
   props: {
+    component: {
+      type: String,
+      default: null,
+    },
     headless: {
       type: Boolean,
       default: false,
     },
-    id: {
-      type: [String, Number],
-      default: null,
-    },
     visible: {
       type: Boolean,
       default: false,
     },
-    floatingUiClass: {
+    portalClass: {
       type: [String, Function],
       default: null,
     },
   },
 
+  computed: {
+    isTooltip() {
+      return this.component === 'tooltip';
+    },
+
+    classes() {
+      return this.isTooltip
+        ? 'bg-gray-800 text-sm text-white py-1 px-2'
+        : 'bg-white py-2 px-3';
+    },
+
+    transitionEnterClass() {
+      return this.isTooltip ? 'opacity-0' : 'translate-y-[15px] opacity-0';
+    },
+
+    transitionEnterToClass() {
+      return this.isTooltip ? 'opacity-100' : 'translate-y-0 opacity-100';
+    },
+
+    transitionLeaveClass() {
+      return this.transitionEnterToClass;
+    },
+
+    transitionLeaveToClass() {
+      return this.transitionEnterClass;
+    },
+  },
+
   methods: {
-    hide() {
-      this.$emit('hide');
+    shown() {
+      this.$emit('shown');
+    },
+
+    hidden() {
+      this.$emit('hidden');
     },
   },
 };