@veritree/ui 0.19.2 → 0.20.0-0

package/src/components/Listbox/VTListboxItem.vue

@@ -1,51 +1,54 @@
 <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"
-    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 class="truncate"><slot></slot></span>
+    <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 { scrollElementIntoView } from "../../utils/components";
-import { genId } from "../../utils/ids";
+import { IconCheckOutline } from '@veritree/icons';
+import { floatingUiItemMixin } from '../../../mixins/floating-ui-item';
+
+let keydownSearchTimeout = null;
 
 export default {
-  name: "VTListboxItem",
+  name: 'VTListboxItem',
+
+  mixins: [floatingUiItemMixin],
 
-  inject: ["api"],
+  components: { IconCheckOutline },
+
+  inject: ['apiListbox'],
 
   props: {
-    headless: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
     value: {
       type: [String, Number, Object, Array],
       required: true,
@@ -54,172 +57,118 @@ export default {
 
   data() {
     return {
-      id: `listboxitem-${genId()}`,
-      index: null,
-      selected: false,
-      tabIndex: 0,
+      // apiInjected is used in the mixin floating-ui-item
+      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;
+    componentContent() {
+      return this.apiInjected().componentContent;
     },
 
-    list() {
-      return this.api().list;
+    hasComponentSearch() {
+      return this.apiListbox().componentSearch !== null;
     },
 
     search() {
-      return this.api().search;
+      return this.apiListbox().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);
-      }
+    /**
+     * 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() {
-    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);
+    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: {
-    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.
+     * This event is mainly for the search since other keydown
+     * events are handled with vue v-on (@) directive
      *
-     * @param {Number, String} goToIndex
+     * @param {Object} event
      */
-    setFocusToItem(goToIndex) {
-      this.tabIndex = 0;
-      this.selected = false;
-
-      const isMousemove = this.list.getMousemove();
-
-      if (isMousemove) {
-        this.list.unsetMousemove();
-        this.items.forEach((item) => item.unselect());
+    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);
       }
-
-      this.items[goToIndex].focus();
     },
 
     /**
-     * Hides content/menu and focus on trigger
+     * Searches and focus the options that matches the
+     * value typed when the item is selected.
+     *
+     * @param {Object} event
      */
-    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();
+    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,12 +1,9 @@
 <template>
   <component
     :is="as"
-    :class="{
-      ListboxLabel: headless,
-      'mb-2 block text-xs font-normal uppercase': !headless,
-      'text-inherit': !dark && !headless,
-      'text-white': dark && !headless,
-    }"
+    :class="[
+      headless ? 'listbox-label' : 'mb-2 block text-xs font-normal uppercase',
+    ]"
   >
     <slot></slot>
   </component>
@@ -16,8 +13,6 @@
 export default {
   name: 'VTListboxLabel',
 
-  inject: ['api'],
-
   props: {
     as: {
       type: String,
@@ -28,11 +23,5 @@ export default {
       default: false,
     },
   },
-
-  computed: {
-    dark() {
-      return this.api().isDark;
-    },
-  },
 };
 </script>

package/src/components/Listbox/VTListboxList.vue

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

package/src/components/Listbox/VTListboxSearch.vue

@@ -1,54 +1,51 @@
 <template>
-  <input
-    v-model="search"
-    :class="{ ListboxList: headless, 'form-control mb-1': !headless }"
-    type="text"
-    @input="onChange"
-    @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>
+import { formControlMixin } from '../../../mixins/form-control';
+
 export default {
   name: 'VTListboxSearch',
 
-  inject: ['api'],
+  mixins: [formControlMixin],
 
-  props: {
-    headless: {
-      type: Boolean,
-      default: false,
-    },
-  },
+  inheritAttrs: false,
+
+  inject: ['apiListbox'],
 
   data() {
     return {
+      name: 'listbox-search',
+      index: null,
       search: '',
-      index: -1,
     };
   },
 
   computed: {
-    content() {
-      return this.api().content;
-    },
-
-    trigger() {
-      return this.api().trigger;
-    },
-
-    list() {
-      return this.api().list;
+    componentTrigger() {
+      return this.apiListbox().componentTrigger;
     },
 
     items() {
-      return this.api().items;
+      return this.apiListbox().items;
     },
 
     item() {
@@ -57,73 +54,81 @@ export default {
   },
 
   mounted() {
-    const search = {
+    const componentSearch = {
       el: this.$el,
     };
 
-    this.api().registerSearch(search);
+    this.apiListbox().registerSearch(componentSearch);
+    this.$nextTick(() => setTimeout(() => this.$refs.search.focus(), 150));
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.search = '';
-    this.$emit('change', this.search.trim());
+    this.$emit('update:modelValue', '');
   },
 
   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();
+      const selectedIndex = this.getItemSelectedIndex();
+      const isFirst = selectedIndex === 0;
+      const lastItemIndex = this.items.length - 1;
+      const previousItemIndex = selectedIndex - 1;
+      const newSelectedIndex = isFirst ? lastItemIndex : previousItemIndex;
 
-      this.index--;
-
-      if (this.index < 0) {
-        this.index = this.items.length - 1;
-      }
-
-      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.list.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.list.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();
     },
 
-    onChange() {
+    getItemSelectedIndex() {
+      return this.items.findIndex((item) => item.isSelected());
+    },
+
+    onInput(event) {
       this.index = 0;
       if (this.item) this.item.select();
 
-      this.$emit('change', this.search.trim());
+      this.$emit('update:modelValue', event.target.value);
     },
 
     onKeyEnter() {
@@ -131,7 +136,10 @@ export default {
     },
 
     hide() {
-      if (this.content) this.content.hide();
+      if (this.componentTrigger) {
+        this.componentTrigger.cancel();
+        this.componentTrigger.focus();
+      }
     },
   },
 };