@veritree/ui 0.67.1 → 0.67.2

package/package.json

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

package/src/components/Listbox/VTListboxTriggerHighlight.vue

@@ -1,34 +1,47 @@
 <template>
-  <div
-    :class="[
-      headless ? 'listbox-highlight' : 'relative',
-      headless
-        ? isActive
-          ? 'listbox-highlight--active'
-          : null
-        : isActive
-        ? '[&>*]:border-gray-700'
-        : null,
-    ]"
-  >
-    <span
-      v-show="isBadgeVisible"
+  <div>
+    <div
+      :id="highlightId"
       :class="[
+        headless ? 'listbox-highlight' : 'relative',
         headless
-          ? 'listbox-highlight__badge'
-          : 'absolute -right-2 -top-2 z-10 grid h-5 min-w-[20px] place-content-center rounded-full bg-gray-800 text-xs font-medium text-white',
+          ? isActive
+            ? 'listbox-highlight--active'
+            : null
+          : isActive
+          ? '[&>*]:border-gray-700'
+          : null,
       ]"
     >
-      {{ valueLength }}
-    </span>
-    <slot />
+      <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: {
@@ -56,32 +69,156 @@ export default {
   },
 
   computed: {
-    // Computes the current value of the listbox item.
-    value() {
+    /**
+     * Computed property that generates an identifier for the counter element associated with the listbox.
+     *
+     * @property
+     * @name counterId
+     * @memberof VTListboxTriggerHighlight
+     * @description Returns an ID for the listbox counter element.
+     * @returns {string} The generated counter ID.
+     */
+    counterId() {
+      return `listbox-counter-${this.apiListbox().id}`;
+    },
+
+    /**
+     * Computed property that generates an identifier for the highlight element associated with the listbox.
+     *
+     * @property
+     * @name highlightId
+     * @memberof VTListboxTriggerHighlight
+     * @description Returns an ID for the listbox highlight element.
+     * @returns {string} The generated highlight ID.
+     */
+    highlightId() {
+      return `listbox-highlight-${this.apiListbox().id}`;
+    },
+
+    /**
+     * Computes the current value of the listbox item.
+     *
+     * @property
+     * @name computedValue
+     * @memberof VTListboxTriggerHighlight
+     * @description Returns the computed value of the listbox item.
+     * @returns {*} The computed value.
+     */
+    computedValue() {
       return this.apiListbox().valueComputed;
     },
 
-    // Checks if the computed value is an array.
+    /**
+     * Checks if the computed value is an array.
+     *
+     * @property
+     * @name isValueAnArray
+     * @memberof VTListboxTriggerHighlight
+     * @description Checks if the computed value is an array.
+     * @returns {boolean} True if the value is an array, false otherwise.
+     */
     isValueAnArray() {
-      return Array.isArray(this.value);
+      return Array.isArray(this.computedValue);
     },
 
-    // Computes the length of the value, considering whether it's an array or a single value.
-    valueLength() {
-      return this.isValueAnArray ? this.value.length : this.value ? 1 : 0;
+    /**
+     * Computes the length of the value, considering whether it's an array or a single value.
+     *
+     * @property
+     * @name computedValueLength
+     * @memberof VTListboxTriggerHighlight
+     * @description Returns the length of the computed value.
+     * @returns {number} The length of the computed value.
+     */
+    computedValueLength() {
+      if (this.isValueAnArray) {
+        return this.computedValue.length;
+      } else {
+        return this.computedValue ? 1 : 0;
+      }
     },
 
-    // Determines if the listbox item is active based on its value and default value.
+    /**
+     * Determines if the listbox item is active based on its value and default value.
+     *
+     * @property
+     * @name isActive
+     * @memberof VTListboxTriggerHighlight
+     * @description Checks if the listbox item is considered active.
+     * @returns {boolean} True if the listbox item is active, false otherwise.
+     */
     isActive() {
       return this.isValueAnArray
-        ? this.valueLength > 0
-        : this.defaultValue !== this.value;
+        ? this.computedValueLength > 0
+        : this.defaultValue !== this.computedValue;
     },
 
-    // Checks if the badge should be visible for the listbox item.
+    /**
+     * 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);
+    },
+  },
 };
 </script>