@veritree/ui 0.84.0 → 0.84.2

package/mixins/floating-ui.js

@@ -139,12 +139,7 @@ export const floatingUiMixin = {
       const content = document.getElementById(this.componentContent.id);
       const minWidthLimit = Number(this.floatingUiMinWidth);
 
-      if (
-        this.top !== null ||
-        this.top !== undefined ||
-        this.left !== null ||
-        this.left !== undefined
-      ) {
+      if (this.top || this.left) {
         this.positionContentToTriggerByTopAndLeft(
           trigger,
           content,
@@ -153,29 +148,31 @@ export const floatingUiMixin = {
         return;
       }
 
-      computePosition(trigger, content, {
-        placement: this.placement,
-        middleware: [
-          offset(Number(this.offset)),
-          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}px`,
-          top: `${y}px`,
+      this.floatingUiUpdaterDisposer = autoUpdate(trigger, content, () => {
+        computePosition(trigger, content, {
+          placement: this.placement,
+          middleware: [
+            offset(Number(this.offset)),
+            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}px`,
+            top: `${y}px`,
+          });
         });
       });
     },

package/package.json

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

package/src/components/Alert/VTAlert.vue

@@ -8,20 +8,20 @@
       headless
         ? `alert--${variant}`
         : isSuccess
-        ? 'border-success-300 bg-success-200 text-success-700'
-        : isError
-        ? 'border-error-300 bg-error-200 text-error-700'
-        : isWarning
-        ? 'border-warning-300 bg-warning-200 text-warning-700'
-        : null,
+          ? 'border-success-300 bg-success-200 text-success-700'
+          : isError
+            ? 'border-error-300 bg-error-200 text-error-700'
+            : isWarning
+              ? 'border-warning-300 bg-warning-200 text-warning-700'
+              : null,
       // sizes styles
       headless
         ? `alert--${size}`
         : isLarge
-        ? 'p-3'
-        : isSmall
-        ? 'py-1 px-2 text-sm'
-        : null,
+          ? 'p-3'
+          : isSmall
+            ? 'py-1 px-2 text-sm'
+            : null,
     ]"
     role="alert"
   >
@@ -34,12 +34,12 @@
         headless
           ? `alert-close--${variant}`
           : isLarge
-          ? 'mt-1'
-          : isSmall
-          ? 'mt-0.5'
-          : null,
+            ? 'mt-1'
+            : isSmall
+              ? 'mt-0.5'
+              : null,
       ]"
-      @click="hide"
+      @click.stop.prevent="hide"
     >
       <IconClose />
     </button>