@veritree/ui 0.21.1-8 → 0.22.0-0

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>
@@ -22,44 +24,10 @@ export default {
     },
   },
 
-  data() {
-    return {
-      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,
-    };
-
-    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,37 +1,41 @@
 <template>
-  <input
-    v-model="search"
-    :class="{ 'listbox-search': headless, 'form-control mb-1': !headless }"
-    type="text"
-    @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"
+      :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: ['apiListbox'],
+  mixins: [formControlMixin],
 
-  props: {
-    headless: {
-      type: Boolean,
-      default: false,
-    },
-  },
+  inheritAttrs: false,
+
+  inject: ['apiListbox'],
 
   data() {
     return {
+      name: 'listbox-search',
+      index: null,
       search: '',
-      index: -1,
     };
   },
 
@@ -40,10 +44,6 @@ export default {
       return this.apiListbox().componentTrigger;
     },
 
-    list() {
-      return this.apiListbox().list;
-    },
-
     items() {
       return this.apiListbox().items;
     },
@@ -54,74 +54,81 @@ 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() {
+  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() {

package/src/components/Listbox/VTListboxTrigger.vue

@@ -1,37 +1,20 @@
 <template>
   <button
     :id="id"
+    :class="classComputed"
+    :disabled="disabled"
     :aria-expanded="expanded"
     :aria-haspopup="hasPopup"
-    :class="[
-      headless
-        ? 'listbox-button'
-        : 'flex w-full justify-between border border-solid py-2 px-3 gap-3 rounded text-inherit max-w-full',
-      headless
-        ? `listbox-button--${variant}`
-        : isError
-        ? 'border-error-300'
-        : 'border-gray-300',
-    ]"
     type="button"
     @click.prevent="onClick"
     @keydown.down.prevent="onKeyDownOrUp"
     @keydown.up.prevent="onKeyDownOrUp"
     @keydown.esc.stop="onKeyEsc"
   >
-    <span
-      :class="{
-        'listbox-button__text': headless,
-        'text-left': !headless,
-      }"
-    >
+    <span :class="[headless ? 'listbox-button__text' : 'truncate text-left']">
       <slot></slot>
     </span>
-    <span
-      :class="{
-        'listbox-button__icon': headless,
-      }"
-    >
+    <span :class="[headless ? 'listbox-button__icon' : 'shrink-0']">
       <IconChevronDown
         class="transition-transform"
         :class="{ 'rotate-180': expanded }"
@@ -41,6 +24,10 @@
 </template>
 
 <script>
+import {
+  formControlMixin,
+  formControlStyleMixin,
+} from '../../../mixins/form-control';
 import { IconChevronDown } from '@veritree/icons';
 
 export default {
@@ -48,25 +35,13 @@ export default {
 
   components: { IconChevronDown },
 
-  inject: ['apiListbox'],
+  mixins: [formControlMixin, formControlStyleMixin],
 
-  props: {
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    headless: {
-      type: Boolean,
-      default: false,
-    },
-    variant: {
-      type: [String, Object, Function],
-      default: '',
-    },
-  },
+  inject: ['apiListbox'],
 
   data() {
     return {
+      name: 'listbox-trigger',
       expanded: false,
       hasPopup: false,
     };
@@ -77,10 +52,6 @@ export default {
       return `listbox-trigger-${this.apiListbox().id}`;
     },
 
-    isError() {
-      return this.variant === 'error';
-    },
-
     componentContent() {
       return this.apiListbox().componentContent;
     },
@@ -133,6 +104,7 @@ export default {
       if (!this.componentContent) {
         return;
       }
+
       this.expanded = false;
 
       this.hideComponentContent();
@@ -152,6 +124,7 @@ export default {
 
     onClick(e) {
       this.init(e);
+      this.$emit('click');
     },
 
     onKeyDownOrUp(e) {

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/VTPopoverItem.vue

@@ -5,7 +5,7 @@
       // default styles
       headless
         ? 'popover-item'
-        : 'relative z-10 -mx-3 flex items-center gap-2 px-3 py-2 text-inherit no-underline hover:bg-secondary-200/10',
+        : 'hover:bg-secondary-200/10 relative z-10 -mx-3 flex items-center gap-2 px-3 py-2 text-inherit no-underline',
     ]"
     @click="onClick"
   >
@@ -44,7 +44,11 @@ export default {
     },
 
     as() {
-      return this.href ? 'a' : this.to ? 'NuxtLink' : 'button';
+      return this.href
+        ? 'a'
+        : this.to
+        ? resolveComponent('NuxtLink')
+        : 'button';
     },
   },
 

package/src/components/ProgressBar/VTProgressBar.vue

@@ -7,7 +7,7 @@
     ]"
     role="progressbar"
     aria-valuemin="0"
-    aria-valuemax="100"
+    :aria-valuemax="max"
     :aria-valuenow="value"
     :aria-label="label"
   >
@@ -15,9 +15,9 @@
       :class="[
         headless
           ? 'progress-bar__indicator'
-          : 'absolute left-0 h-full bg-secondary-300 transition-all',
+          : 'bg-secondary-200 absolute left-0 h-full transition-all',
       ]"
-      :style="{ width: `${value}%` }"
+      :style="{ width: `${percentageComputed}%` }"
     ></div>
   </div>
 </template>
@@ -37,6 +37,24 @@ export default {
       type: [String, Number],
       default: 0,
     },
+    max: {
+      type: [String, Number],
+      default: 100,
+    },
+    percentage: {
+      type: [String, Number],
+      default: null,
+    },
+  },
+
+  computed: {
+    percentageComputed() {
+      if (typeof this.percentage !== 'undefined' && this.percentage !== null) {
+        return this.percentage;
+      }
+
+      return (this.value / this.max) * 100;
+    },
   },
 };
 </script>

package/src/components/Skeleton/VTSkeleton.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="animate-pulse">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'VTSkeleton',
+};
+</script>

package/src/components/Skeleton/VTSkeletonItem.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="bg-gray-300" />
+</template>
+
+<script>
+export default {
+  name: 'VTSkeletonItem',
+};
+</script>

package/src/components/Tabs/VTTab.vue

@@ -18,11 +18,11 @@
     ]"
     role="tab"
     type="button"
-    @click.stop="onClick"
+    @click.prevent.stop="onClick"
     @keydown="onKeyDown"
     @blur="onBlur"
   >
-    <slot></slot>
+    <slot :selected="selected"></slot>
   </button>
 </template>
 
@@ -60,7 +60,7 @@ export default {
     this.api.registerTab(this);
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.api.unregisterTab(this.index);
   },
 
@@ -106,6 +106,7 @@ export default {
     onClick() {
       this.api.selectTab(this.index);
       this.$emit('change');
+      this.$emit('click');
     },
 
     onKeyDown(event) {

package/src/components/Tabs/VTTabGroup.vue

@@ -5,10 +5,10 @@
 </template>
 
 <style scoped>
-.TabGroup.vertical{
+.TabGroup.vertical {
   display: flex;
 }
-.TabGroup.vertical .TabList{
+.TabGroup.vertical .TabList {
   display: flex;
   flex-direction: column;
 }
@@ -17,15 +17,17 @@
 <script>
 export default {
   name: 'VTTabGroup',
+
   props: {
-      vertical: {
-          type: Boolean,
-          default: false
-      }
+    vertical: {
+      type: Boolean,
+      default: false,
+    },
   },
+
   provide() {
     return {
-      api: () => {
+      apiTabs: () => {
         const registerTab = (tab) => {
           _register(this.tabs, tab);
           if (tab.index === 0) tab.select();

package/src/components/Tabs/VTTabPanel.vue

@@ -14,11 +14,10 @@
 export default {
   name: 'VTTabPanel',
 
-  inject: ['api'],
+  inject: ['apiTabs'],
 
   data() {
     return {
-      api: this.api(),
       index: null,
       visible: false,
     };
@@ -31,11 +30,11 @@ export default {
   },
 
   mounted() {
-    this.api.registerTabPanel(this);
+    this.apiTabs().registerTabPanel(this);
   },
 
-  beforeDestroy() {
-    this.api.unregisterTabPanel(this.id);
+  beforeUnmount() {
+    this.apiTabs().unregisterTabPanel(this.id);
   },
 
   methods: {

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>