@veritree/ui 0.73.0 → 0.74.0

package/mixins/floating-ui-item.js

@@ -39,8 +39,8 @@ export const floatingUiItemMixin = {
             ? `${this.componentName}--disabled`
             : null
           : this.disabled
-          ? 'pointer-events-none opacity-75'
-          : null,
+            ? 'pointer-events-none opacity-75'
+            : null,
         // selected state styles
         this.headless
           ? this.selected
@@ -49,8 +49,8 @@ export const floatingUiItemMixin = {
               : `${this.componentName}--selected`
             : null
           : this.selected
-          ? 'bg-gray-200'
-          : null,
+            ? 'bg-gray-200'
+            : null,
       ];
     },
   },

package/mixins/form-control.js

@@ -53,7 +53,7 @@ export const formControlMixin = {
           blur: (event) => {
             this.$emit('blur', event);
           },
-        }
+        },
       );
     },
 
@@ -78,18 +78,18 @@ export const formControlStyleMixin = {
         this.headless
           ? `${this.name}--${this.variant}`
           : this.isError
-          ? 'border-error-300'
-          : this.isSuccess
-          ? 'border-success-300'
-          : 'border-gray-300',
+            ? 'border-error-300'
+            : this.isSuccess
+              ? 'border-success-300'
+              : 'border-gray-300',
         // height styles
         this.headless
           ? null
           : this.name === 'textarea'
-          ? 'min-h-10' // limit it because input type number height can be different from other input types
-          : this.size === 'small'
-          ? 'h-8 text-sm'
-          : 'h-10 text-base',
+            ? 'min-h-10' // limit it because input type number height can be different from other input types
+            : this.size === 'small'
+              ? 'h-8 text-sm'
+              : 'h-10 text-base',
         // disabled styles
         this.disabled
           ? this.headless

package/package.json

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

package/src/components/Button/VTButton.vue

@@ -12,7 +12,7 @@
         ? 'button'
         : isIcon
           ? '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',
+          : 'relative inline-flex rounded border border-solid px-4 text-sm font-medium leading-none no-underline transition-all',
       // variant styles
       headless
         ? `button--${variant}`

package/src/components/Listbox/VTListboxItem.vue

@@ -88,7 +88,7 @@ export default {
     checked() {
       if (this.multiple) {
         return this.apiListbox().valueComputed.some(
-          (value) => JSON.stringify(this.value) === JSON.stringify(value)
+          (value) => JSON.stringify(this.value) === JSON.stringify(value),
         );
       }
 
@@ -164,7 +164,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()),
       );
 
       /**

package/src/components/Listbox/VTListboxTrigger.vue

@@ -11,17 +11,6 @@
     @keydown.up.prevent="onKeyDownOrUp"
     @keydown.esc.stop="onKeyEsc"
   >
-    <!-- <template v-if="hasBadge">
-      <span
-        :class="[
-          headless
-            ? 'listbox-button__badge'
-            : 'absolute -right-2 -top-2 grid h-5 min-w-[20px] place-content-center rounded-full bg-gray-800 text-xs font-medium text-white',
-        ]"
-      >
-        {{ valueLength }}
-      </span>
-    </template> -->
     <span :class="[headless ? 'listbox-button__text' : 'truncate text-left']">
       <slot></slot>
     </span>
@@ -171,8 +160,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/Popover/VTPopoverItem.vue

@@ -1,14 +1,5 @@
 <template>
-  <component
-    :is="as"
-    :class="[
-      // 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',
-    ]"
-    @click="onClick"
-  >
+  <component :is="as" :class="classComputed">
     <slot></slot>
   </component>
 </template>
@@ -32,27 +23,54 @@ export default {
       type: [String, Object],
       default: null,
     },
+    as: {
+      type: String,
+      default: 'div',
+    },
   },
 
   computed: {
-    dark() {
-      return this.apiPopover().isDark;
+    classComputed() {
+      return [
+        // default styles
+        this.headless
+          ? `${this.componentName}`
+          : '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
+            ? `${this.componentName}--disabled`
+            : null
+          : this.disabled
+            ? 'pointer-events-none opacity-75'
+            : null,
+        // selected state styles
+        // this.headless
+        //   ? this.selected
+        //     ? this.multiple
+        //       ? null
+        //       : `${this.componentName}--selected`
+        //     : null
+        //   : this.selected
+        //   ? 'bg-gray-200'
+        //   : null,
+      ];
     },
 
-    headless() {
-      return this.apiPopover().isHeadless;
-    },
+    // tag() {
+    //   if(this.href) {
 
-    as() {
-      return this.href ? 'a' : this.to ? 'NuxtLink' : 'button';
-    },
+    //   }
+
+    //   return this.href ? 'a' : this.to ? 'NuxtLink' : 'button';
+    // },
   },
 
   methods: {
-    onClick() {
-      if (this.href || this.to) return;
-      this.$emit('click');
-    },
+    // onClick() {
+    //   if (this.href || this.to) return;
+    //   this.$emit('click');
+    // },
   },
 };
 </script>

package/src/components/Popover/VTPopoverViewport.vue

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