@veritree/ui 0.60.0 → 0.61.0

package/mixins/form-control.js

@@ -69,8 +69,6 @@ export const formControlStyleMixin = {
           ? 'border-error-300'
           : this.isSuccess
           ? 'border-success-300'
-          : this.isOutline
-          ? 'border-gray-700'
           : 'border-gray-300',
         // height styles
         this.headless
@@ -86,11 +84,5 @@ export const formControlStyleMixin = {
           : null,
       ];
     },
-
-    // not all places as form control is used needs outline,
-    // so this is here mostly as a placeholder
-    isOutline() {
-      return null
-    }
   },
 };

package/package.json

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

package/src/components/Listbox/VTListbox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="{ listbox: headless }">
+  <div :class="[headless ? 'listbox' : null]">
     <slot></slot>
   </div>
 </template>

package/src/components/Listbox/VTListboxTrigger.vue

@@ -11,7 +11,7 @@
     @keydown.up.prevent="onKeyDownOrUp"
     @keydown.esc.stop="onKeyEsc"
   >
-    <template v-if="hasBadge">
+    <!-- <template v-if="hasBadge">
       <span
         :class="[
           headless
@@ -21,7 +21,7 @@
       >
         {{ valueLength }}
       </span>
-    </template>
+    </template> -->
     <span :class="[headless ? 'listbox-button__text' : 'truncate text-left']">
       <slot></slot>
     </span>
@@ -86,21 +86,21 @@ export default {
       return this.items[this.items.length - 1];
     },
 
-    valueLength() {
-      if (this.multiple) {
-        return this.apiListbox().valueComputed.length;
-      }
+    // valueLength() {
+    //   if (this.multiple) {
+    //     return this.apiListbox().valueComputed.length;
+    //   }
 
-      return 0;
-    },
+    //   return 0;
+    // },
 
-    hasBadge() {
-      return this.valueLength > 0;
-    },
+    // hasBadge() {
+    //   return this.valueLength > 0;
+    // },
 
-    isOutline() {
-      return this.valueLength > 0;
-    },
+    // isOutline() {
+    //   return this.valueLength > 0;
+    // },
   },
 
   mounted() {

package/src/components/Listbox/VTListboxTriggerHighlight.vue

@@ -0,0 +1,87 @@
+<template>
+  <div
+    :class="[
+      headless ? 'listbox-highlight' : 'relative',
+      headless
+        ? isActive
+          ? 'listbox-highlight--active'
+          : null
+        : isActive
+        ? '[&>*]:border-gray-700'
+        : null,
+    ]"
+  >
+    <span
+      v-show="isBadgeVisible"
+      :class="[
+        headless
+          ? 'listbox-highlight__badge'
+          : 'absolute -right-2 -top-2 z-10 grid h-5 min-w-[20px] place-content-center rounded-full bg-gray-800 text-xs font-medium text-white',
+      ]"
+    >
+      {{ valueLength }}
+    </span>
+    <slot />
+  </div>
+</template>
+
+<script>
+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: {
+    // Computes the current value of the listbox item.
+    value() {
+      return this.apiListbox().valueComputed;
+    },
+
+    // Checks if the computed value is an array.
+    isValueAnArray() {
+      return Array.isArray(this.value);
+    },
+
+    // Computes the length of the value, considering whether it's an array or a single value.
+    valueLength() {
+      return this.isValueAnArray ? this.value.length : this.value ? 1 : 0;
+    },
+
+    // Determines if the listbox item is active based on its value and default value.
+    isActive() {
+      return this.isValueAnArray
+        ? this.valueLength > 0
+        : this.defaultValue !== this.value;
+    },
+
+    // Checks if the badge should be visible for the listbox item.
+    isBadgeVisible() {
+      return this.isValueAnArray && this.isActive;
+    },
+  },
+};
+</script>