@veritree/ui 0.22.3 → 0.24.0

package/src/components/Listbox/VTListboxItem.vue

@@ -5,30 +5,37 @@
     :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
   >
     <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 +47,118 @@ 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().selectedValue)
+      );
+    },
+  },
+
+  mounted() {
+    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/VTListboxList.vue

@@ -2,7 +2,7 @@
   <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',
     ]"
   >
     <slot></slot>
@@ -27,28 +27,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
-    v-model="search"
-    type="text"
-    :class="classComputed"
-    @input="onChange"
-    @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"
+      v-model="search"
+      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="onChange"
+      @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));
   },
 
   beforeDestroy() {
@@ -67,54 +69,58 @@ 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;
 
-    unselectItem() {
-      const isMousemove = this.componentContent.getMousemove();
+      this.selectItem(selectedIndex, newSelectedIndex);
+    },
 
-      if (isMousemove) {
-        this.componentContent.unsetMousemove();
-        this.items.forEach((item) => item.unselect());
+    selectItem(selectedIndex, newSelectedIndex) {
+      // before selecting, let's unselect selected
+      // item that were previously focused
+      if (selectedIndex >= 0) {
+        this.items[selectedIndex].unselect();
       }
 
+      // select new item
+      this.items[newSelectedIndex].select();
+    },
+
+    unselectItem() {
       if (this.item) this.item.unselect();
     },
 
+    getItemSelectedIndex() {
+      return this.items.findIndex((item) => item.isSelected());
+    },
+
     onChange() {
       this.index = 0;
       if (this.item) this.item.select();

package/src/components/Listbox/VTListboxTrigger.vue

@@ -11,7 +11,7 @@
     @keydown.up.prevent="onKeyDownOrUp"
     @keydown.esc.stop="onKeyEsc"
   >
-    <span :class="[headless ? 'listbox-button__text' : 'text-left truncate']">
+    <span :class="[headless ? 'listbox-button__text' : 'truncate text-left']">
       <slot></slot>
     </span>
     <span :class="[headless ? 'listbox-button__icon' : 'shrink-0']">
@@ -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,13 +35,12 @@ export default {
 
   components: { IconChevronDown },
 
-  mixins: [formControlMixin],
+  mixins: [formControlMixin, formControlStyleMixin],
 
   inject: ['apiListbox'],
 
   data() {
     return {
-      name: 'listbox-button',
       expanded: false,
       hasPopup: false,
     };
@@ -101,6 +103,7 @@ export default {
       if (!this.componentContent) {
         return;
       }
+
       this.expanded = false;
 
       this.hideComponentContent();

package/src/components/Modal/VTModal.vue

@@ -11,7 +11,7 @@
   >
     <div
       v-if="visible"
-      class="fixed inset-0 z-50 flex flex-col justify-center bg-fd-700/75"
+      class="bg-fd-700/75 fixed inset-0 z-50 flex flex-col justify-center"
       tabindex="-1"
       @keyup.esc="close"
       @click="close"

package/src/components/Popover/VTPopover.vue

@@ -48,11 +48,30 @@ export default {
       type: Boolean,
       default: false,
     },
+    placement: {
+      type: String,
+      default: 'bottom-start',
+    },
   },
 
   data() {
     return {
       componentId: genId(),
+      /**
+       * 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,
     };
   },
 

package/src/components/Popover/VTPopoverContent.vue

@@ -1,10 +1,10 @@
 <template>
   <FloatingUi
-    :visible="visible"
     :id="id"
+    :visible="visible"
     :headless="headless"
-    :class="{ 'popover-content': headless }"
-    :floating-ui-class="floatingUiClass"
+    :portal-class="$vnode.data.staticClass"
+    component="popover"
   >
     <slot></slot>
   </FloatingUi>

package/src/components/Tooltip/VTTooltip.vue

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <slot />
+  </div>
+</template>
+
+<script>
+import { floatingUiMixin } from '../../../mixins/floating-ui';
+import { genId } from '../../utils/ids';
+
+export default {
+  name: 'VTTooltip',
+
+  mixins: [floatingUiMixin],
+
+  props: {
+    delayDuration: {
+      type: [String, Number],
+      default: 500,
+    },
+    placement: {
+      type: String,
+      default: 'bottom',
+    },
+  },
+
+  data() {
+    return {
+      floatingUiMinWidth: 0,
+    };
+  },
+
+  provide() {
+    return {
+      apiTooltip: () => {
+        const registerTrigger = (trigger) => {
+          if (!trigger) return;
+          this.componentTrigger = trigger;
+        };
+
+        const registerContent = (content) => {
+          if (!content) return;
+          this.componentContent = content;
+        };
+
+        return {
+          id: this.componentId,
+          component: this.component,
+          componentTrigger: this.componentTrigger,
+          componentContent: this.componentContent,
+          delayDuration: this.delayDuration,
+          registerTrigger,
+          registerContent,
+        };
+      },
+    };
+  },
+
+  data() {
+    return {
+      componentId: genId(),
+    };
+  },
+};
+</script>

package/src/components/Tooltip/VTTooltipContent.vue

@@ -0,0 +1,59 @@
+<template>
+  <FloatingUi
+    :id="id"
+    :visible="visible"
+    :headless="headless"
+    component="tooltip"
+  >
+    <slot></slot>
+  </FloatingUi>
+</template>
+
+<script>
+import { floatingUiContentMixin } from '../../../mixins/floating-ui-content';
+
+export default {
+  name: 'VTTooltipContent',
+
+  inheritAttrs: false,
+
+  mixins: [floatingUiContentMixin],
+
+  inject: ['apiTooltip'],
+
+  data() {
+    return {
+      visible: false,
+    };
+  },
+
+  computed: {
+    id() {
+      return `tooltip-content-${this.apiTooltip().id}`;
+    },
+
+    component() {
+      return this.apiTooltip().component;
+    },
+
+    componentTrigger() {
+      return this.apiTooltip().componentTrigger;
+    },
+
+    ariaLabelledby() {
+      if (!this.componentTrigger) return null;
+      return this.visible ? this.componentTrigger.id : null;
+    },
+  },
+
+  mounted() {
+    const content = {
+      id: this.id,
+      hide: this.hide,
+      show: this.show,
+    };
+
+    this.apiTooltip().registerContent(content);
+  },
+};
+</script>

package/src/components/Tooltip/VTTooltipTrigger.vue

@@ -0,0 +1,100 @@
+<template>
+  <div
+    :id="id"
+    :aria-describedby="ariaDescribedBy"
+    class="inline-flex"
+    @mouseenter="onMouseenter"
+    @mouseleave="onMouseleave"
+  >
+    <slot />
+  </div>
+</template>
+
+<script>
+let tooltipTriggerTimeout = null;
+
+export default {
+  name: 'VTTooltipTrigger',
+
+  inject: ['apiTooltip'],
+
+  data() {
+    return {
+      expanded: false,
+    };
+  },
+
+  computed: {
+    id() {
+      return `tooltip-trigger-${this.apiTooltip().id}`;
+    },
+
+    componentContent() {
+      return this.apiTooltip().componentContent;
+    },
+
+    ariaDescribedBy() {
+      if (!this.componentContent) return null;
+      return this.expanded ? this.componentContent.id : null;
+    },
+  },
+
+  mounted() {
+    const trigger = {
+      cancel: this.cancel,
+      id: this.id,
+    };
+
+    this.apiTooltip().registerTrigger(trigger);
+  },
+
+  methods: {
+    onMouseenter(e) {
+      tooltipTriggerTimeout = setTimeout(() => {
+        this.init(e);
+      }, this.apiTooltip().delayDuration);
+    },
+
+    onMouseleave() {
+      clearTimeout(tooltipTriggerTimeout);
+      this.cancel();
+    },
+
+    init(e) {
+      if (!this.componentContent) {
+        return;
+      }
+
+      if (this.expanded) {
+        this.cancel();
+        return;
+      }
+
+      this.expanded = true;
+
+      // delay stop propagation to close other visible
+      // dropdowns and delay click event to control
+      // this dropdown visibility
+      setTimeout(() => e.stopImmediatePropagation(), 50);
+      setTimeout(() => this.showComponentContent(), 100);
+    },
+
+    cancel() {
+      if (!this.componentContent) {
+        return;
+      }
+
+      this.expanded = false;
+      this.hideComponentContent();
+    },
+
+    showComponentContent() {
+      this.componentContent.show();
+    },
+
+    hideComponentContent() {
+      this.componentContent.hide();
+    },
+  },
+};
+</script>