@veritree/ui 0.63.2 → 0.64.0

package/package.json

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

package/src/components/Button/VTButton.vue

@@ -11,7 +11,7 @@
       headless
         ? 'button'
         : isIcon
-        ? `relative inline-flex items-center justify-center rounded-full [&_svg]:max-h-full [&_svg]:max-w-full`
+        ? 'relative inline-flex items-center justify-center rounded-full [&_svg]:max-h-full [&_svg]:max-w-full'
         : 'relative inline-flex rounded border border-solid px-4 text-sm font-semibold leading-none no-underline transition-all',
       // variant styles
       headless

package/src/components/Listbox/VTListboxContent.vue

@@ -52,5 +52,15 @@ export default {
 
     this.apiListbox().registerContent(content);
   },
+
+  methods: {
+    shown() {
+      this.$emit('shown');
+    },
+
+    hidden() {
+      this.$emit('hidden');
+    },
+  },
 };
 </script>

package/src/components/Listbox/VTListboxTrigger.vue

@@ -1,6 +1,7 @@
 <template>
   <button
     :id="id"
+    class="hover:bg-gray-200"
     :class="classComputed"
     :disabled="disabled"
     :aria-expanded="expanded"
@@ -31,8 +32,8 @@
       ]"
     >
       <IconChevronDown
-        class="w-5 transition-transform"
-        :class="{ 'rotate-18': expanded }"
+        class="w-5 text-gray-700 transition-transform"
+        :class="{ 'rotate-180': expanded }"
       />
     </span>
   </button>

package/src/components/Tooltip/VTTooltipTrigger.vue

@@ -2,6 +2,7 @@
   <div
     :id="id"
     :aria-describedby="ariaDescribedBy"
+    :class="[headless ? 'tooltip-trigger' : 'flex']"
     @mouseenter="onMouseenter"
     @mouseleave="onmouseout"
   >
@@ -17,6 +18,20 @@ export default {
 
   inject: ['apiTooltip'],
 
+  props: {
+    /**
+     * Determines whether the button will use its default atomic style (tailwind) or its default class
+     *
+     * @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
+     */
+    headless: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
   data() {
     return {
       expanded: false,