@veritree/ui 0.91.11 → 0.93.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritree/ui",
-  "version": "0.91.11",
+  "version": "0.93.0",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",

package/src/components/Listbox/VTListbox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="[headless ? 'listbox' : null]">
+  <div :class="classList">
     <slot></slot>
   </div>
 </template>
@@ -101,6 +101,7 @@ export default {
           items: this.items,
           multiple: this.multiple,
           search: this.search,
+          version: this.version,
           valueComputed: this.valueComputed,
           registerTrigger,
           registerContent,
@@ -171,6 +172,15 @@ export default {
       type: Boolean,
       default: false,
     },
+    /**
+     * The version of the component to use.
+     * @type {number|string}
+     * @default '1'
+     */
+    version: {
+      type: [Number, String],
+      default: '1',
+    },
   },
 
   data() {
@@ -211,6 +221,27 @@ export default {
         this.$emit('change', newValue);
       },
     },
+
+    classList() {
+      const list = [];
+
+      // This will be refactor by moving the inline tailwind styling to its own file
+      if (this.headless || this.version === '2') {
+        // use semantic list
+        list.push('listbox');
+        list.push(`listbox--version-${this.version}`);
+
+        if (this.variant) {
+          list.push(`listbox--${this.variant}`);
+        }
+
+        if (this.size) {
+          list.push(`listbox--${this.size}`);
+        }
+      }
+
+      return list;
+    },
   },
 };
 </script>

package/src/components/Listbox/VTListboxContent.vue

@@ -4,7 +4,7 @@
     :visible="visible"
     :headless="headless"
     :aria-activedescendant="activeDescedant"
-    :portal-class="$vnode.data.staticClass"
+    :portal-class="`${$vnode.data.staticClass} ${portalClassList}`"
     component="listbox"
     role="listbox"
     @shown="$emit('shown')"
@@ -43,6 +43,16 @@ export default {
     componentTrigger() {
       return this.apiListbox().componentTrigger;
     },
+
+    portalClassList() {
+      const staticClass = this.$attrs.class || this.$attrs.staticClass || '';
+
+      if (this.apiListbox().version === '2') {
+        return `${staticClass} listbox-content--version-2`;
+      }
+
+      return staticClass;
+    },
   },
 
   mounted() {

package/src/components/Listbox/VTListboxTrigger.vue

@@ -2,7 +2,7 @@
   <button
     :id="id"
     :data-testid="dataTestidComputed"
-    :class="triggerClassComputed"
+    :class="classList"
     :disabled="isDisabled"
     :aria-expanded="expanded"
     :aria-haspopup="hasPopup"
@@ -22,6 +22,25 @@
       ]"
     >
       <VTSpinner v-if="loading" class="mr-0.5 max-w-4 max-h-4" />
+      <svg
+        v-else-if="apiListbox().version === '2'"
+        :class="{ 'rotate-180': expanded }"
+        class="text-gray-700 transition-transform"
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M13 6L8 11L3 6"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          fill="transparent"
+        />
+      </svg>
       <IconChevronDown
         v-else
         class="w-5 text-gray-700 transition-transform"
@@ -104,13 +123,32 @@ export default {
       return this.items[this.items.length - 1];
     },
 
-    triggerClassComputed() {
+    classList() {
       if (this.headless) {
         return null;
       }
 
+      // TODO: role isn't the best way to determine button styles, we should have a better prop for that
       if (this.role === 'combobox') {
-        return [this.classComputed, this.headless ? null : 'hover:bg-gray-200'];
+        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,
+        ];
       }
 
       return `button-base button--${this.variant} button--${this.size}`;