@veritree/ui 0.24.1 → 0.25.0-0

package/src/components/Listbox/VTListbox.vue

@@ -16,16 +16,39 @@ 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.componentSearch = search;
@@ -52,8 +75,7 @@ export default {
         };
 
         const emit = (value) => {
-          this.$emit('input', value);
-          this.$emit('change', value);
+          this.valueComputed = value;
         };
 
         return {
@@ -63,8 +85,9 @@ export default {
           componentContent: this.componentContent,
           componentSearch: this.componentSearch,
           items: this.items,
+          multiple: this.multiple,
           search: this.search,
-          selectedValue: this.value,
+          $mutable,
           registerTrigger,
           registerContent,
           registerSearch,
@@ -79,22 +102,55 @@ 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,
     },
+    /**
+     * 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,
     },
+    /**
+     * Determines whether the component should allow multiple selections.
+     * @type {boolean}
+     * @default false
+     */
+    multiple: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data() {
@@ -103,6 +159,7 @@ export default {
       componentSearch: null,
       search: '',
       items: [],
+      itemsChecked: [],
       /**
        * Explaining the need for the floatingUiMinWidth data
        *
@@ -125,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

@@ -4,7 +4,6 @@
     :visible="visible"
     :headless="headless"
     :aria-activedescendant="activeDescedant"
-    :portal-class="$vnode.data.staticClass"
     component="listbox"
     role="listbox"
   >

package/src/components/Listbox/VTListboxItem.vue

@@ -16,6 +16,16 @@
     @keydown.enter.prevent="onClick"
     @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" />
@@ -75,7 +85,7 @@ export default {
     wasSelected() {
       return (
         JSON.stringify(this.value) ===
-        JSON.stringify(this.apiListbox().selectedValue)
+        JSON.stringify(this.apiListbox().$mutable.valueComputed)
       );
     },
   },

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' : '-mx-3 max-h-[160px] w-auto overflow-y-auto',
+      headless
+        ? 'listbox-list'
+        : '-mx-3 max-h-[160px] w-auto overflow-y-auto scroll-auto',
     ]"
   >
     <slot></slot>

package/src/components/Listbox/VTListboxSearch.vue

@@ -2,11 +2,11 @@
   <div class="-mx-3 -mt-2">
     <input
       ref="search"
-      v-model="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="onChange"
+      @input="onInput"
       @click.stop
       @keydown.down.prevent="focusNextItem"
       @keydown.up.prevent="focusPreviousItem"
@@ -62,9 +62,9 @@ export default {
     this.$nextTick(() => setTimeout(() => this.$refs.search.focus(), 150));
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.search = '';
-    this.$emit('change', this.search.trim());
+    this.$emit('update:modelValue', '');
   },
 
   methods: {
@@ -111,6 +111,7 @@ export default {
 
       // select new item
       if (this.items[newSelectedIndex]) {
+        this.index = newSelectedIndex;
         this.items[newSelectedIndex].select();
       }
     },
@@ -123,11 +124,11 @@ export default {
       return this.items.findIndex((item) => item.isSelected());
     },
 
-    onChange() {
+    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

@@ -41,6 +41,7 @@ export default {
 
   data() {
     return {
+      name: 'listbox-trigger',
       expanded: false,
       hasPopup: false,
     };
@@ -123,6 +124,7 @@ export default {
 
     onClick(e) {
       this.init(e);
+      this.$emit('click');
     },
 
     onKeyDownOrUp(e) {

package/src/components/Popover/VTPopoverContent.vue

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

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>
 
@@ -32,7 +32,7 @@ import { keys } from '../../utils/keyboard';
 export default {
   name: 'VTTabItem',
 
-  inject: ['api'],
+  inject: ['apiTabs'],
 
   props: {
     headless: {
@@ -43,7 +43,7 @@ export default {
 
   data() {
     return {
-      api: this.api(),
+      api: this.apiTabs(),
       index: null,
       indexFocus: null,
       selected: false,
@@ -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/VTTooltipTrigger.vue

@@ -2,9 +2,8 @@
   <div
     :id="id"
     :aria-describedby="ariaDescribedBy"
-    class="inline-flex"
     @mouseenter="onMouseenter"
-    @mouseleave="onMouseleave"
+    @mouseleave="onmouseout"
   >
     <slot />
   </div>
@@ -55,7 +54,7 @@ export default {
       }, this.apiTooltip().delayDuration);
     },
 
-    onMouseleave() {
+    onmouseout() {
       clearTimeout(tooltipTriggerTimeout);
       this.cancel();
     },
@@ -75,8 +74,7 @@ export default {
       // 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);
+      this.showComponentContent();
     },
 
     cancel() {

package/src/components/Transitions/FadeInOut.vue

@@ -1,10 +1,10 @@
 <template>
   <transition
     enter-active-class="duration-300 ease-out"
-    enter-class="transform opacity-0"
+    enter-from-class="transform opacity-0"
     enter-to-class="opacity-100"
     leave-active-class="duration-300 ease-in"
-    leave-class="opacity-100"
+    leave-from-class="opacity-100"
     leave-to-class="transform opacity-0"
     @after-enter="afterEnter"
     @after-leave="afterLeave"

package/src/components/Utils/FloatingUi.vue

@@ -1,12 +1,12 @@
 <template>
-  <Portal>
+  <Teleport to="body">
     <transition
       enter-active-class="duration-200 ease-out"
-      enter-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-class="translate-y-0 opacity-100"
-      leave-to-class="translate-y-[15px] opacity-0"
+      :leave-from-class="transitionLeaveClass"
+      :leave-to-class="transitionLeaveToClass"
       @after-leave="hidden"
       @after-enter="shown"
     >
@@ -15,23 +15,19 @@
         :class="[
           headless
             ? `${this.component}-content`
-            : `shadow-300 absolute z-50 grid overflow-x-hidden rounded-md py-2 px-3 ${this.classes} ${this.portalClass}`,
+            : `absolute z-50 grid overflow-hidden rounded-md shadow-md  ${this.classes} ${this.portalClass}`,
         ]"
         v-bind="$attrs"
       >
         <slot />
       </div>
     </transition>
-  </Portal>
+  </Teleport>
 </template>
 
 <script>
-import { Portal } from '@linusborg/vue-simple-portal';
-
 export default {
-  components: {
-    Portal,
-  },
+  inheritAttrs: false,
 
   props: {
     component: {
@@ -46,6 +42,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    ariaActivedescendant: {
+      type: String,
+      default: null,
+    },
     portalClass: {
       type: [String, Function],
       default: null,
@@ -58,7 +58,25 @@ export default {
     },
 
     classes() {
-      return this.isTooltip ? 'bg-gray-800 text-sm text-white' : 'bg-white';
+      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;
     },
   },
 

package/src/utils/components.js

@@ -0,0 +1,18 @@
+/**
+ *
+ * @param {HTMLElement} el
+ * @param {HTMLElement} parent
+ */
+ export const scrollElementIntoView = (el, parent) => {
+  // this works better than scrollIntoView
+  if (parent.scrollHeight <= parent.clientHeight) return;
+
+  const scrollBottom = parent.clientHeight + parent.scrollTop;
+  const elBottom = el.offsetTop + el.offsetHeight;
+
+  if (elBottom > scrollBottom) {
+    parent.scrollTop = elBottom - parent.clientHeight;
+  } else if (el.offsetTop < parent.scrollTop) {
+    parent.scrollTop = el.offsetTop;
+  }
+};