@veritree/ui 0.27.0 → 0.28.0-1

package/src/components/Listbox/VTListboxItem.vue

@@ -1,8 +1,9 @@
 <template>
   <li
     :id="id"
-    :class="classComputed"
+    :class="computedClasses"
     :aria-disabled="disabled"
+    :disabled="disabled"
     :aria-selected="String(selected)"
     :tabindex="tabIndex"
     :role="'option'"
@@ -16,10 +17,25 @@
     @keydown.enter.prevent="onClick"
     @keydown.tab.prevent
   >
-    <slot></slot>
-    <span v-if="wasSelected" class="ml-auto">
-      <IconCheckOutline class="text-secondary-200 h-5 w-5" />
-    </span>
+    <template v-if="this.multiple">
+      <input
+        :id="`${id}-checkbox`"
+        :ref="`${id}-checkbox`"
+        :value="value"
+        :checked="checked"
+        class="form-control-check"
+        type="checkbox"
+        @click.stop
+        @change="onChange(value, $event)"
+      />
+      <slot></slot>
+    </template>
+    <template v-else>
+      <slot></slot>
+      <span v-if="checked" class="ml-auto">
+        <IconCheckOutline class="text-secondary-300 h-5 w-5" />
+      </span>
+    </template>
   </li>
 </template>
 
@@ -54,6 +70,10 @@ export default {
   },
 
   computed: {
+    computedClasses() {
+      return this.classComputed;
+    },
+
     componentContent() {
       return this.apiInjected().componentContent;
     },
@@ -66,22 +86,30 @@ export default {
       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() {
+    multiple() {
+      return this.apiListbox().multiple;
+    },
+
+    checked() {
+      if (this.multiple) {
+        return this.apiListbox().valueComputed.some(
+          (value) => JSON.stringify(this.value) === JSON.stringify(value),
+        );
+      }
+
       return (
         JSON.stringify(this.value) ===
-        JSON.stringify(this.apiListbox().selectedValue)
+        JSON.stringify(this.apiListbox().valueComputed)
       );
     },
   },
 
   mounted() {
-    if (this.wasSelected) {
+    if (this.multiple) {
+      return;
+    }
+
+    if (this.checked) {
       /**
        * There are some conflicts between the portal and the interaction
        * with the element. It's unclear why it happens but if no delay,
@@ -141,7 +169,7 @@ export default {
        * with any of the items to get its index value
        */
       const newItemSelectedIndex = this.items.findIndex((item) =>
-        item.text.toLowerCase().includes(this.search.toLowerCase())
+        item.text.toLowerCase().includes(this.search.toLowerCase()),
       );
 
       /**
@@ -160,6 +188,20 @@ export default {
         this.apiListbox().clearSearch();
       }, 1000);
     },
+
+    /**
+     * On change is used only when multiple is set to true.
+     * It handles the checkbox changes to interact with
+     * the provider by pushing or removing values.
+     *
+     * @param {*} value
+     * @param {Object} event
+     */
+    onChange(value, event) {
+      event.target.checked
+        ? this.apiListbox().pushValueToValueComputed(value)
+        : this.apiListbox().removeValueFromValueComputed(value);
+    },
   },
 };
 </script>

package/src/components/Listbox/VTListboxLabel.vue

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

package/src/components/Listbox/VTListboxList.vue

@@ -1,10 +1,5 @@
 <template>
-  <ul
-    :id="id"
-    :class="[
-      headless ? 'listbox-list' : '-mx-3 max-h-[160px] w-auto overflow-y-auto',
-    ]"
-  >
+  <ul :id="id" :class="[headless ? 'listbox-list' : null]">
     <slot></slot>
   </ul>
 </template>

package/src/components/Listbox/VTListboxPlaceholder.vue

@@ -0,0 +1,25 @@
+<template>
+  <component
+    :is="as"
+    :class="[headless ? 'listbox-placeholder' : 'font-light text-gray-500']"
+  >
+    <slot></slot>
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'VTListboxPlaceholder',
+
+  props: {
+    as: {
+      type: String,
+      default: 'span',
+    },
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>

package/src/components/Listbox/VTListboxSearch.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="-mx-3 -mt-2">
     <input
-      ref="search"
+      ref="searchInput"
       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"
+      class="leading-0 hidden sm:block 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"
@@ -29,6 +29,8 @@ export default {
 
   inheritAttrs: false,
 
+  emits: ['change'],
+
   inject: ['apiListbox'],
 
   data() {
@@ -59,12 +61,11 @@ export default {
     };
 
     this.apiListbox().registerSearch(componentSearch);
-    this.$nextTick(() => setTimeout(() => this.$refs.search.focus(), 150));
+    this.$nextTick(() => setTimeout(() => this.$refs.searchInput.focus(), 150));
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.search = '';
-    this.$emit('change', this.search.trim());
   },
 
   methods: {
@@ -111,6 +112,7 @@ export default {
 
       // select new item
       if (this.items[newSelectedIndex]) {
+        this.index = newSelectedIndex;
         this.items[newSelectedIndex].select();
       }
     },
@@ -124,10 +126,12 @@ export default {
     },
 
     onChange() {
-      this.index = 0;
-      if (this.item) this.item.select();
-
       this.$emit('change', this.search.trim());
+
+      this.$nextTick(() => {
+        this.index = 0;
+        if (this.item) this.item.select();
+      });
     },
 
     onKeyEnter() {

package/src/components/Listbox/VTListboxTrigger.vue

@@ -1,10 +1,12 @@
 <template>
   <button
     :id="id"
-    :class="classComputed"
-    :disabled="disabled"
+    :data-testid="dataTestidComputed"
+    :class="classList"
+    :disabled="isDisabled"
     :aria-expanded="expanded"
     :aria-haspopup="hasPopup"
+    :role="role"
     type="button"
     @click.prevent="onClick"
     @keydown.down.prevent="onKeyDownOrUp"
@@ -14,9 +16,19 @@
     <span :class="[headless ? 'listbox-button__text' : 'truncate text-left']">
       <slot></slot>
     </span>
-    <span :class="[headless ? 'listbox-button__icon' : 'shrink-0']">
+    <span
+      :class="[
+        headless ? 'listbox-button__icon' : '-mr-1 ml-2 shrink-0 text-gray-500',
+      ]"
+    >
+      <VTSpinner v-if="loading" class="mr-0.5 max-w-4 max-h-4" />
+      <IconChevronDownV2
+        v-else-if="apiListbox().version === '2'"
+        :class="{ 'rotate-180': expanded }"
+      />
       <IconChevronDown
-        class="transition-transform"
+        v-else
+        class="w-5 text-gray-700 transition-transform"
         :class="{ 'rotate-180': expanded }"
       />
     </span>
@@ -39,6 +51,27 @@ export default {
 
   inject: ['apiListbox'],
 
+  inheritAttrs: false,
+
+  props: {
+    dataTestid: {
+      type: String,
+      default: null,
+    },
+    role: {
+      type: String,
+      default: 'combobox',
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    stopPropagation: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
   data() {
     return {
       expanded: false,
@@ -51,10 +84,18 @@ export default {
       return `listbox-trigger-${this.apiListbox().id}`;
     },
 
+    dataTestidComputed() {
+      return this.dataTestid || `listbox-trigger-${this.apiListbox().id}`;
+    },
+
     componentContent() {
       return this.apiListbox().componentContent;
     },
 
+    multiple() {
+      return this.apiListbox().multiple;
+    },
+
     items() {
       return this.apiListbox().items;
     },
@@ -66,6 +107,42 @@ export default {
     lastMenuItem() {
       return this.items[this.items.length - 1];
     },
+
+    classList() {
+      if (this.headless) {
+        return this.$attrs.class || null;
+      }
+
+      // TODO: role isn't the best way to determine button styles, we should have a better prop for that
+      if (this.role === 'combobox') {
+        const version2Classes = [];
+
+        if (this.apiListbox().version === '2') {
+          version2Classes.push('listbox-trigger--version-2');
+
+          if (this.variant) {
+            version2Classes.push(`listbox-trigger--${this.variant}`);
+          }
+
+          if (this.size) {
+            version2Classes.push(`listbox-trigger--${this.size}`);
+          }
+        }
+
+        return [
+          this.classComputed,
+          this.headless ? null : 'hover:bg-gray-200',
+          ...version2Classes,
+          this.$attrs.class,
+        ];
+      }
+
+      return `button-base button--${this.variant} button--${this.size}`;
+    },
+
+    isDisabled() {
+      return this.disabled || this.loading;
+    },
   },
 
   mounted() {
@@ -122,7 +199,11 @@ export default {
     },
 
     onClick(e) {
+      if (this.stopPropagation) {
+        e.stopPropagation();
+      }
       this.init(e);
+      this.$emit('click');
     },
 
     onKeyDownOrUp(e) {
@@ -135,8 +216,8 @@ export default {
         keyCode === 'ArrowDown'
           ? 'firstMenuItem'
           : keyCode === 'ArrowUp'
-          ? 'lastMenuItem'
-          : null;
+            ? 'lastMenuItem'
+            : null;
 
       // settimeout here is delaying the focusing the element
       // since it is not rendered yet. All items will only

package/src/components/Listbox/VTListboxTriggerHighlight.vue

@@ -0,0 +1,204 @@
+<template>
+  <div
+    :id="highlightId"
+    :class="[
+      headless ? 'listbox-highlight' : 'relative',
+      headless
+        ? isActive
+          ? 'listbox-highlight--active'
+          : null
+        : isActive
+          ? '[&>*]:border-gray-700'
+          : null,
+    ]"
+  >
+    <slot />
+  </div>
+</template>
+
+<script>
+import { computePosition, offset, autoUpdate } from '@floating-ui/dom';
+
+export default {
+  name: 'VTListboxHighlight',
+
+  inject: ['apiListbox'],
+
+  props: {
+    /**
+     * 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 default value for the listbox item, used to determine its initial state.
+     * @type {string|null}
+     * @default null
+     */
+    defaultValue: {
+      type: String,
+      default: null,
+    },
+  },
+
+  computed: {
+    /**
+     * Computed property that generates an identifier for the counter element associated with the listbox.
+     *
+     * @property
+     * @name counterId
+     * @memberof VTListboxTriggerHighlight
+     * @description Returns an ID for the listbox counter element.
+     * @returns {string} The generated counter ID.
+     */
+    counterId() {
+      return `listbox-counter-${this.apiListbox().id}`;
+    },
+
+    /**
+     * Computed property that generates an identifier for the highlight element associated with the listbox.
+     *
+     * @property
+     * @name highlightId
+     * @memberof VTListboxTriggerHighlight
+     * @description Returns an ID for the listbox highlight element.
+     * @returns {string} The generated highlight ID.
+     */
+    highlightId() {
+      return `listbox-highlight-${this.apiListbox().id}`;
+    },
+
+    /**
+     * Computes the current value of the listbox item.
+     *
+     * @property
+     * @name computedValue
+     * @memberof VTListboxTriggerHighlight
+     * @description Returns the computed value of the listbox item.
+     * @returns {*} The computed value.
+     */
+    computedValue() {
+      return this.apiListbox().valueComputed;
+    },
+
+    /**
+     * Checks if the computed value is an array.
+     *
+     * @property
+     * @name isValueAnArray
+     * @memberof VTListboxTriggerHighlight
+     * @description Checks if the computed value is an array.
+     * @returns {boolean} True if the value is an array, false otherwise.
+     */
+    isValueAnArray() {
+      return Array.isArray(this.computedValue);
+    },
+
+    /**
+     * Computes the length of the value, considering whether it's an array or a single value.
+     *
+     * @property
+     * @name computedValueLength
+     * @memberof VTListboxTriggerHighlight
+     * @description Returns the length of the computed value.
+     * @returns {number} The length of the computed value.
+     */
+    computedValueLength() {
+      if (this.isValueAnArray) {
+        return this.computedValue.length;
+      } else {
+        return this.computedValue ? 1 : 0;
+      }
+    },
+
+    /**
+     * Determines if the listbox item is active based on its value and default value.
+     *
+     * @property
+     * @name isActive
+     * @memberof VTListboxTriggerHighlight
+     * @description Checks if the listbox item is considered active.
+     * @returns {boolean} True if the listbox item is active, false otherwise.
+     */
+    isActive() {
+      return this.isValueAnArray
+        ? this.computedValueLength > 0
+        : this.defaultValue !== this.computedValue;
+    },
+
+    // /**
+    //  * Checks if the badge should be visible for the listbox item.
+    //  *
+    //  * @property
+    //  * @name isBadgeVisible
+    //  * @memberof VTListboxTriggerHighlight
+    //  * @description Checks if the badge should be visible for the listbox item.
+    //  * @returns {boolean} True if the badge should be visible, false otherwise.
+    //  */
+    // isBadgeVisible() {
+    //   return this.isValueAnArray && this.isActive;
+    // },
+  },
+
+  // mounted() {
+  //   this.$nextTick(() => this.positionFloatingContent());
+  // },
+
+  // methods: {
+  //   /**
+  //    * Positions the floating content relative to a specified trigger element.
+  //    *
+  //    * @function
+  //    * @name positionFloatingContent
+  //    * @description Calculates and updates the position of the floating content
+  //    *              based on the position of the reference element.
+  //    * @returns {void}
+  //    */
+  //   positionFloatingContent() {
+  //     /**
+  //      * The reference element that triggers the positioning of the floating content.
+  //      * @type {HTMLElement}
+  //      */
+  //     const referenceElement = document.getElementById(this.highlightId);
+
+  //     /**
+  //      * The floating element whose position needs to be updated.
+  //      * @type {HTMLElement}
+  //      */
+  //     const floatingElement = document.getElementById(this.counterId);
+
+  //     /**
+  //      * Callback function to update the position of the floating element
+  //      * using the autoUpdate and computePosition utilities.
+  //      * @type {Function}
+  //      */
+  //     const updatePositionCallback = () => {
+  //       computePosition(referenceElement, floatingElement, {
+  //         placement: 'top-end',
+  //         middleware: [
+  //           offset({
+  //             alignmentAxis: -10,
+  //             mainAxis: -10,
+  //           }),
+  //         ],
+  //       }).then(({ x, y }) => {
+  //         Object.assign(floatingElement.style, {
+  //           left: `${x}px`,
+  //           top: `${y}px`,
+  //         });
+  //       });
+  //     };
+
+  //     // Call the autoUpdate function with the specified elements and callback.
+  //     autoUpdate(referenceElement, floatingElement, updatePositionCallback);
+  //   },
+  // },
+};
+</script>

package/src/components/Listbox/VTListboxViewport.vue

@@ -0,0 +1,33 @@
+<template>
+  <div
+    :id="id"
+    :class="[
+      headless
+        ? 'listbox-viewport'
+        : '-mx-3 max-h-[300px] w-auto overflow-y-auto scroll-auto',
+    ]"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'VTListboxViewport',
+
+  inject: ['apiListbox'],
+
+  props: {
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  computed: {
+    id() {
+      return `listbox-viewport-${this.apiListbox().id}`;
+    },
+  },
+};
+</script>

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

@@ -1,7 +1,7 @@
 <template>
   <div
     :class="{
-      'popover-divider': headless,
+      PopoverDivider: headless,
       'h-[1px]': !headless,
     }"
   ></div>

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';
     },
   },