@veritree/ui 0.61.1 → 0.63.0

package/mixins/floating-ui-item.js

@@ -32,7 +32,7 @@ export const floatingUiItemMixin = {
         // default styles
         this.headless
           ? `${this.componentName}`
-          : 'relative z-10 flex items-center gap-2 px-3 py-2 text-inherit no-underline cursor-pointer',
+          : 'relative z-10 text-sm flex items-center gap-2 px-3 py-2 text-inherit no-underline cursor-pointer',
         // disabled state styles
         this.headless
           ? this.disabled

package/mixins/form-control.js

@@ -21,6 +21,18 @@ export const formControlMixin = {
       type: [String, Object, Function],
       default: '',
     },
+    
+    /**
+     * Specifies the size of the button
+     *
+     * @values
+     * - 'small': A smaller size for the button
+     * - 'large': A larger size for the button
+     */
+    size: {
+      type: String,
+      default: 'large',
+    },
   },
 
   computed: {
@@ -61,7 +73,7 @@ export const formControlStyleMixin = {
       return [
         this.headless
           ? `${this.name}`
-          : 'leading-0 flex w-full max-w-full relative appearance-none placeholder:font-light placeholder:text-gray-500 items-center justify-between rounded border border-solid px-3 py-2 font-inherit text-base text-inherit file:hidden focus:border-gray-600 focus:placeholder:text-gray-400',
+          : 'leading-0 flex w-full max-w-full relative appearance-none placeholder:font-light placeholder:text-gray-500 items-center justify-between rounded border border-solid px-3 py-2 font-inherit text-sm text-inherit file:hidden focus:border-gray-600 focus:placeholder:text-gray-400',
         // variant styles
         this.headless
           ? `${this.name}--${this.variant}`
@@ -75,7 +87,7 @@ export const formControlStyleMixin = {
           ? null
           : this.name === 'textarea'
           ? 'min-h-10' // limit it because input type number height can be different from other input types
-          : 'h-10',
+          : this.size === 'small' ? 'h-8' : 'h-10',
         // disabled styles
         this.disabled
           ? this.headless

package/package.json

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

package/src/components/Dialog/VTDialogOverlay.vue

@@ -3,7 +3,11 @@
     <div
       v-if="visible"
       :id="id"
-      :class="[headless ? 'dialog-overlay' : 'bg-primary-200/80 fixed inset-0']"
+      :class="[
+        headless
+          ? 'dialog-overlay'
+          : 'bg-primary-200/80 fixed inset-0 backdrop-blur-[3px]',
+      ]"
     />
   </FadeInOut>
 </template>

package/src/components/Listbox/VTListboxTrigger.vue

@@ -27,12 +27,12 @@
     </span>
     <span
       :class="[
-        headless ? 'listbox-button__icon' : 'ml-2 shrink-0 text-gray-500',
+        headless ? 'listbox-button__icon' : '-mr-1 ml-2 shrink-0 text-gray-500',
       ]"
     >
       <IconChevronDown
-        class="transition-transform"
-        :class="{ 'rotate-180': expanded }"
+        class="w-5 transition-transform"
+        :class="{ 'rotate-18': expanded }"
       />
     </span>
   </button>