@veritree/ui 0.72.1 → 0.73.0

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@veritree/ui",
-  "version": "0.72.1",
+  "version": "0.73.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/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>