@veritree/ui 0.81.0-1 → 0.81.0-2

package/mixins/floating-ui.js

@@ -1,4 +1,12 @@
-import { computePosition, flip, shift, offset, size } from '@floating-ui/dom';
+import {
+  autoUpdate,
+  computePosition,
+  flip,
+  shift,
+  offset,
+  size,
+  // update,
+} from '@floating-ui/dom';
 
 export const floatingUiMixin = {
   props: {
@@ -14,6 +22,7 @@ export const floatingUiMixin = {
       componentTrigger: null,
       componentContent: null,
       active: false,
+      floatingUiUpdaterDisposer: null,
     };
   },
 
@@ -30,6 +39,12 @@ export const floatingUiMixin = {
     };
   },
 
+  beforeDestroy() {
+    if (this.floatingUiUpdaterDisposer) {
+      this.floatingUiUpdaterDisposer();
+    }
+  },
+
   methods: {
     setActive() {
       this.active = true;
@@ -52,54 +67,69 @@ export const floatingUiMixin = {
       const contentWidth = contentRect.width;
       const contentHeight = contentRect.height;
       const triggerWidth = trigger.getBoundingClientRect().width;
-
       let leftObject = this.leftPosition || {};
       let topObject = this.topPosition || {};
-
       let left = leftObject.value || 0;
       let top = topObject.value || 0;
 
       if (leftObject.unit === '%') {
         left = (triggerWidth * left) / 100;
       }
+
       if (topObject.unit === '%') {
         top = (triggerWidth * top) / 100;
       }
+
       if (leftObject.positionBy === 'center') {
         left = left - contentWidth / 2;
       }
+
       if (leftObject.positionBy === 'end') {
         left = left - contentWidth;
       }
+
       if (topObject.positionBy === 'top') {
         top = top + contentHeight;
       }
+
       if (topObject.positionBy === 'center') {
         top = top + contentHeight / 2;
       }
 
-      computePosition(trigger, content, {
-        placement: 'top-start',
-        middleware: [
-          flip(),
-          shift({ padding: 5 }),
-          size({
-            apply({ rects }) {
-              if (!minWidthLimit) return;
-
-              const width = rects.reference.width;
-              const minWidth = width < minWidthLimit ? minWidthLimit : width;
-
-              Object.assign(content.style, {
-                minWidth: `${minWidth}px`,
-              });
-            },
-          }),
-        ],
-      }).then(({ x, y }) => {
-        Object.assign(content.style, {
-          left: `${x + left}px`,
-          top: `${y + top}px`,
+      /**
+       * Initializes the auto-update functionality for positioning the floating UI element.
+       * This method sets up an automatic update mechanism that adjusts the position of the
+       * content element in relation to the trigger element based on changes in the environment,
+       * such as scroll or resize events.
+       *
+       * @param {Element} trigger - The DOM element that acts as the reference point for positioning.
+       * @param {Element} content - The DOM element representing the floating UI content that needs to be positioned.
+       * @param {Function} updateFunction - A callback function that executes the update logic for positioning.
+       */
+      this.floatingUiUpdaterDisposer = autoUpdate(trigger, content, () => {
+        computePosition(trigger, content, {
+          placement: 'top-start',
+          middleware: [
+            flip(),
+            shift({ padding: 5 }),
+            size({
+              apply({ rects }) {
+                if (!minWidthLimit) return;
+
+                const width = rects.reference.width;
+                const minWidth = width < minWidthLimit ? minWidthLimit : width;
+
+                Object.assign(content.style, {
+                  minWidth: `${minWidth}px`,
+                });
+              },
+            }),
+          ],
+        }).then(({ x, y }) => {
+          Object.assign(content.style, {
+            left: `${x + left}px`,
+            top: `${y + top}px`,
+          });
         });
       });
     },

package/package.json

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