@veritree/ui 0.72.1 → 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,11 +1,14 @@
 {
   "name": "@veritree/ui",
-  "version": "0.72.1",
+  "version": "0.74.0",
   "description": "veritree ui library",
   "type": "module",
   "main": "index.js",
   "repository": "https://github.com/tentree-org/veritree-ui.git",
   "author": "cyroveritree <cyro@veritree.com>",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
+  },
   "scripts": {
     "test": "vitest",
     "coverage": "vitest run --coverage",
@@ -34,6 +37,5 @@
   "engines": {
     "npm": ">=8.0.0",
     "node": ">=18.0.0"
-  },
-  "packageManager": "yarn@4.1.1"
-}
+  }
+}

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/Listbox/VTListboxTriggerHighlight.vue

@@ -9,39 +9,21 @@
             ? 'listbox-highlight--active'
             : null
           : isActive
-          ? '[&>*]:border-gray-700'
-          : null,
+            ? '[&>*]:border-gray-700'
+            : null,
       ]"
     >
       <slot />
     </div>
-    <Portal>
-      <span
-        :id="counterId"
-        v-show="isBadgeVisible"
-        :class="[
-          headless
-            ? 'listbox-highlight__badge'
-            : 'absolute z-40 grid h-5 min-w-[20px] place-content-center rounded-full bg-gray-800 text-xs font-medium text-white',
-        ]"
-      >
-        {{ computedValueLength }}
-      </span>
-    </Portal>
   </div>
 </template>
 
 <script>
-import { Portal } from '@linusborg/vue-simple-portal';
 import { computePosition, offset, autoUpdate } from '@floating-ui/dom';
 
 export default {
   name: 'VTListboxHighlight',
 
-  components: {
-    Portal,
-  },
-
   inject: ['apiListbox'],
 
   props: {
@@ -153,72 +135,72 @@ export default {
         : this.defaultValue !== this.computedValue;
     },
 
-    /**
-     * Checks if the badge should be visible for the listbox item.
-     *
-     * @property
-     * @name isBadgeVisible
-     * @memberof VTListboxTriggerHighlight
-     * @description Checks if the badge should be visible for the listbox item.
-     * @returns {boolean} True if the badge should be visible, false otherwise.
-     */
-    isBadgeVisible() {
-      return this.isValueAnArray && this.isActive;
-    },
+    // /**
+    //  * Checks if the badge should be visible for the listbox item.
+    //  *
+    //  * @property
+    //  * @name isBadgeVisible
+    //  * @memberof VTListboxTriggerHighlight
+    //  * @description Checks if the badge should be visible for the listbox item.
+    //  * @returns {boolean} True if the badge should be visible, false otherwise.
+    //  */
+    // isBadgeVisible() {
+    //   return this.isValueAnArray && this.isActive;
+    // },
   },
 
-  mounted() {
-    this.$nextTick(() => this.positionFloatingContent());
-  },
-
-  methods: {
-    /**
-     * Positions the floating content relative to a specified trigger element.
-     *
-     * @function
-     * @name positionFloatingContent
-     * @description Calculates and updates the position of the floating content
-     *              based on the position of the reference element.
-     * @returns {void}
-     */
-    positionFloatingContent() {
-      /**
-       * The reference element that triggers the positioning of the floating content.
-       * @type {HTMLElement}
-       */
-      const referenceElement = document.getElementById(this.highlightId);
-
-      /**
-       * The floating element whose position needs to be updated.
-       * @type {HTMLElement}
-       */
-      const floatingElement = document.getElementById(this.counterId);
-
-      /**
-       * Callback function to update the position of the floating element
-       * using the autoUpdate and computePosition utilities.
-       * @type {Function}
-       */
-      const updatePositionCallback = () => {
-        computePosition(referenceElement, floatingElement, {
-          placement: 'top-end',
-          middleware: [
-            offset({
-              alignmentAxis: -10,
-              mainAxis: -10,
-            }),
-          ],
-        }).then(({ x, y }) => {
-          Object.assign(floatingElement.style, {
-            left: `${x}px`,
-            top: `${y}px`,
-          });
-        });
-      };
-
-      // Call the autoUpdate function with the specified elements and callback.
-      autoUpdate(referenceElement, floatingElement, updatePositionCallback);
-    },
-  },
+  // mounted() {
+  //   this.$nextTick(() => this.positionFloatingContent());
+  // },
+
+  // methods: {
+  //   /**
+  //    * Positions the floating content relative to a specified trigger element.
+  //    *
+  //    * @function
+  //    * @name positionFloatingContent
+  //    * @description Calculates and updates the position of the floating content
+  //    *              based on the position of the reference element.
+  //    * @returns {void}
+  //    */
+  //   positionFloatingContent() {
+  //     /**
+  //      * The reference element that triggers the positioning of the floating content.
+  //      * @type {HTMLElement}
+  //      */
+  //     const referenceElement = document.getElementById(this.highlightId);
+
+  //     /**
+  //      * The floating element whose position needs to be updated.
+  //      * @type {HTMLElement}
+  //      */
+  //     const floatingElement = document.getElementById(this.counterId);
+
+  //     /**
+  //      * Callback function to update the position of the floating element
+  //      * using the autoUpdate and computePosition utilities.
+  //      * @type {Function}
+  //      */
+  //     const updatePositionCallback = () => {
+  //       computePosition(referenceElement, floatingElement, {
+  //         placement: 'top-end',
+  //         middleware: [
+  //           offset({
+  //             alignmentAxis: -10,
+  //             mainAxis: -10,
+  //           }),
+  //         ],
+  //       }).then(({ x, y }) => {
+  //         Object.assign(floatingElement.style, {
+  //           left: `${x}px`,
+  //           top: `${y}px`,
+  //         });
+  //       });
+  //     };
+
+  //     // Call the autoUpdate function with the specified elements and callback.
+  //     autoUpdate(referenceElement, floatingElement, updatePositionCallback);
+  //   },
+  // },
 };
 </script>

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>