@v-c/trigger 0.0.11 → 0.0.13

package/dist/Popup/index.cjs

@@ -14,6 +14,7 @@ const defaults = {
 };
 const Popup = /* @__PURE__ */ vue.defineComponent((props, {
   attrs,
+  slots,
   expose
 }) => {
   const popupContent = vue.computed(() => typeof props.popup === "function" ? props.popup() : props.popup);
@@ -158,9 +159,9 @@ const Popup = /* @__PURE__ */ vue.defineComponent((props, {
             "onClick": onClick
           }, {
             onPointerdownCapture: onPointerDownCapture
-          }), [arrow && vue.createVNode(Arrow.Arrow, {
+          }), [!!arrow && vue.createVNode(Arrow.Arrow, {
             "prefixCls": prefixCls,
-            "arrow": arrow,
+            "arrow": arrow === true ? {} : arrow,
             "arrowPos": arrowPos,
             "align": align2
           }, null), vue.createVNode(PopupContent.default, {
@@ -169,7 +170,7 @@ const Popup = /* @__PURE__ */ vue.defineComponent((props, {
             default: () => [popupContent.value]
           })]), [[vue.vShow, open.value]])]
         })]
-      })]
+      }), slots?.default?.()]
     });
   };
 }, {
@@ -241,7 +242,7 @@ const Popup = /* @__PURE__ */ vue.defineComponent((props, {
       default: void 0
     },
     arrow: {
-      type: Object,
+      type: [Object, Boolean],
       required: false,
       default: void 0
     },

package/dist/Popup/index.d.ts

@@ -24,7 +24,7 @@ export interface PopupProps {
     mask?: boolean;
     onVisibleChanged: (visible: boolean) => void;
     align?: AlignType;
-    arrow?: ArrowTypeOuter;
+    arrow?: ArrowTypeOuter | boolean;
     arrowPos: ArrowPos;
     open: boolean;
     /** Tell Portal that should keep in screen. e.g. should wait all motion end */

package/dist/Popup/index.js

@@ -12,6 +12,7 @@ const defaults = {
 };
 const Popup = /* @__PURE__ */ defineComponent((props, {
   attrs,
+  slots,
   expose
 }) => {
   const popupContent = computed(() => typeof props.popup === "function" ? props.popup() : props.popup);
@@ -156,9 +157,9 @@ const Popup = /* @__PURE__ */ defineComponent((props, {
             "onClick": onClick
           }, {
             onPointerdownCapture: onPointerDownCapture
-          }), [arrow && createVNode(Arrow, {
+          }), [!!arrow && createVNode(Arrow, {
             "prefixCls": prefixCls,
-            "arrow": arrow,
+            "arrow": arrow === true ? {} : arrow,
             "arrowPos": arrowPos,
             "align": align2
           }, null), createVNode(PopupContent, {
@@ -167,7 +168,7 @@ const Popup = /* @__PURE__ */ defineComponent((props, {
             default: () => [popupContent.value]
           })]), [[vShow, open.value]])]
         })]
-      })]
+      }), slots?.default?.()]
     });
   };
 }, {
@@ -239,7 +240,7 @@ const Popup = /* @__PURE__ */ defineComponent((props, {
       default: void 0
     },
     arrow: {
-      type: Object,
+      type: [Object, Boolean],
       required: false,
       default: void 0
     },

package/dist/UniqueProvider/UniqueContainer.cjs

@@ -23,12 +23,11 @@ const UniqueContainer = /* @__PURE__ */ vue.defineComponent((props) => {
       cachedOffsetStyleRef.value = offsetStyle.value;
     }
   });
-  vue.watch(open, (nextVisible) => {
+  vue.watch(open, async (nextVisible) => {
+    await vue.nextTick();
     if (nextVisible) {
       motionVisible.value = true;
     }
-  }, {
-    immediate: true
   });
   return () => {
     const {
@@ -47,18 +46,10 @@ const UniqueContainer = /* @__PURE__ */ vue.defineComponent((props) => {
     const baseTransitionProps = transition.getTransitionProps(motion?.name, motion);
     const mergedTransitionProps = {
       ...baseTransitionProps,
-      onBeforeAppear: (element) => {
-        motionVisible.value = true;
-        baseTransitionProps.onBeforeAppear?.(element);
-      },
       onBeforeEnter: (element) => {
         motionVisible.value = true;
         baseTransitionProps.onBeforeEnter?.(element);
       },
-      onAfterAppear: (element) => {
-        motionVisible.value = true;
-        baseTransitionProps.onAfterAppear?.(element);
-      },
       onAfterEnter: (element) => {
         motionVisible.value = true;
         baseTransitionProps.onAfterEnter?.(element);
@@ -72,8 +63,8 @@ const UniqueContainer = /* @__PURE__ */ vue.defineComponent((props) => {
     return vue.createVNode(vue.Transition, mergedTransitionProps, {
       default: () => [vue.withDirectives(vue.createVNode("div", {
         "class": [containerCls, uniqueContainerClassName, {
-          [`${containerCls}-visible`]: motionVisible.value,
-          [`${containerCls}-hidden`]: !motionVisible.value
+          [`${containerCls}-visible`]: motionVisible.value
+          // [`${containerCls}-hidden`]: !motionVisible.value,
         }],
         "style": [{
           "--arrow-x": `${arrowPos?.x || 0}px`,

package/dist/UniqueProvider/UniqueContainer.js

@@ -1,4 +1,4 @@
-import { defineComponent, shallowRef, watchEffect, watch, createVNode, Transition, withDirectives, vShow } from "vue";
+import { defineComponent, shallowRef, watchEffect, watch, nextTick, createVNode, Transition, withDirectives, vShow } from "vue";
 import { toPropsRefs } from "@v-c/util/dist/props-util";
 import { getTransitionProps } from "@v-c/util/dist/utils/transition";
 import useOffsetStyle from "../hooks/useOffsetStyle.js";
@@ -21,12 +21,11 @@ const UniqueContainer = /* @__PURE__ */ defineComponent((props) => {
       cachedOffsetStyleRef.value = offsetStyle.value;
     }
   });
-  watch(open, (nextVisible) => {
+  watch(open, async (nextVisible) => {
+    await nextTick();
     if (nextVisible) {
       motionVisible.value = true;
     }
-  }, {
-    immediate: true
   });
   return () => {
     const {
@@ -45,18 +44,10 @@ const UniqueContainer = /* @__PURE__ */ defineComponent((props) => {
     const baseTransitionProps = getTransitionProps(motion?.name, motion);
     const mergedTransitionProps = {
       ...baseTransitionProps,
-      onBeforeAppear: (element) => {
-        motionVisible.value = true;
-        baseTransitionProps.onBeforeAppear?.(element);
-      },
       onBeforeEnter: (element) => {
         motionVisible.value = true;
         baseTransitionProps.onBeforeEnter?.(element);
       },
-      onAfterAppear: (element) => {
-        motionVisible.value = true;
-        baseTransitionProps.onAfterAppear?.(element);
-      },
       onAfterEnter: (element) => {
         motionVisible.value = true;
         baseTransitionProps.onAfterEnter?.(element);
@@ -70,8 +61,8 @@ const UniqueContainer = /* @__PURE__ */ defineComponent((props) => {
     return createVNode(Transition, mergedTransitionProps, {
       default: () => [withDirectives(createVNode("div", {
         "class": [containerCls, uniqueContainerClassName, {
-          [`${containerCls}-visible`]: motionVisible.value,
-          [`${containerCls}-hidden`]: !motionVisible.value
+          [`${containerCls}-visible`]: motionVisible.value
+          // [`${containerCls}-hidden`]: !motionVisible.value,
         }],
         "style": [{
           "--arrow-x": `${arrowPos?.x || 0}px`,

package/dist/UniqueProvider/index.cjs

@@ -52,6 +52,9 @@ const UniqueProvider = /* @__PURE__ */ vue.defineComponent((props, {
   };
   const setPopupRef = (node) => {
     const element = resolveToElement(node);
+    if (!element) {
+      return;
+    }
     externalPopupRef.value = element;
     if (popupEle.value !== element) {
       popupEle.value = element;
@@ -84,9 +87,9 @@ const UniqueProvider = /* @__PURE__ */ vue.defineComponent((props, {
     offsetB,
     arrowX,
     arrowY,
-    // scaleX - not used in UniqueProvider
     ,
     ,
+    // scaleX - not used in UniqueProvider
     // scaleY - not used in UniqueProvider
     alignInfo,
     onAlign

package/dist/UniqueProvider/index.js

@@ -50,6 +50,9 @@ const UniqueProvider = /* @__PURE__ */ defineComponent((props, {
   };
   const setPopupRef = (node) => {
     const element = resolveToElement(node);
+    if (!element) {
+      return;
+    }
     externalPopupRef.value = element;
     if (popupEle.value !== element) {
       popupEle.value = element;
@@ -82,9 +85,9 @@ const UniqueProvider = /* @__PURE__ */ defineComponent((props, {
     offsetB,
     arrowX,
     arrowY,
-    // scaleX - not used in UniqueProvider
     ,
     ,
+    // scaleX - not used in UniqueProvider
     // scaleY - not used in UniqueProvider
     alignInfo,
     onAlign

package/dist/hooks/useAlign.cjs

@@ -58,6 +58,75 @@ function reversePoints(points, index) {
     return point;
   }).join("");
 }
+function parseOriginValue(value, size, axis) {
+  const fallback = size / 2;
+  if (!value) {
+    return fallback;
+  }
+  const val = value.trim();
+  if (!val) {
+    return fallback;
+  }
+  if (val.endsWith("%")) {
+    return size * (parseFloat(val) / 100);
+  }
+  if (val.endsWith("px")) {
+    return parseFloat(val);
+  }
+  if (val === "center") {
+    return fallback;
+  }
+  if (axis === "x") {
+    if (val === "left") {
+      return 0;
+    }
+    if (val === "right") {
+      return size;
+    }
+  } else if (axis === "y") {
+    if (val === "top") {
+      return 0;
+    }
+    if (val === "bottom") {
+      return size;
+    }
+  }
+  const num = parseFloat(val);
+  return Number.isNaN(num) ? fallback : num;
+}
+function getTransformOriginPoint(origin, width, height) {
+  const [originX = "50%", originY = "50%"] = origin?.split(/\s+/).filter(Boolean) ?? [];
+  return [
+    parseOriginValue(originX, width, "x"),
+    parseOriginValue(originY, height, "y")
+  ];
+}
+function normalizeRect(rect, scaleX, scaleY, originX, originY) {
+  const rawX = rect.x ?? rect.left;
+  const rawY = rect.y ?? rect.top;
+  const width = rect.width / scaleX;
+  const height = rect.height / scaleY;
+  const x = rawX - (1 - scaleX) * originX;
+  const y = rawY - (1 - scaleY) * originY;
+  const right = x + width;
+  const bottom = y + height;
+  return {
+    x,
+    y,
+    width,
+    height,
+    left: x,
+    top: y,
+    right,
+    bottom
+  };
+}
+function shouldSwitchPlacement(isOverflow, isVisibleFirst, newVisibleArea, originVisibleArea, newRecommendArea, originRecommendArea) {
+  if (isOverflow) {
+    return newVisibleArea > originVisibleArea || newVisibleArea === originVisibleArea && (!isVisibleFirst || newRecommendArea >= originRecommendArea);
+  }
+  return newVisibleArea > originVisibleArea || isVisibleFirst && newVisibleArea === originVisibleArea && newRecommendArea > originRecommendArea;
+}
 function useAlign(open, popupEle, target, placement, builtinPlacements, popupAlign, onPopupAlign, mobile) {
   const offsetInfo = vue.reactive({
     ready: false,
@@ -103,7 +172,8 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       const popupElement = popupEle.value;
       const doc = popupElement.ownerDocument;
       const win = util.getWin(popupElement);
-      const { position: popupPosition } = win.getComputedStyle(popupElement);
+      const popupComputedStyle = win.getComputedStyle(popupElement);
+      const { position: popupPosition } = popupComputedStyle;
       const originLeft = popupElement.style.left;
       const originTop = popupElement.style.top;
       const originRight = popupElement.style.right;
@@ -144,10 +214,7 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
           height: rect.height
         };
       }
-      const popupRect = popupElement.getBoundingClientRect();
-      const { height, width } = win.getComputedStyle(popupElement);
-      popupRect.x = popupRect.x ?? popupRect.left;
-      popupRect.y = popupRect.y ?? popupRect.top;
+      const rawPopupRect = popupElement.getBoundingClientRect();
       const {
         clientWidth,
         clientHeight,
@@ -156,8 +223,6 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
         scrollTop,
         scrollLeft
       } = doc.documentElement;
-      const popupHeight = popupRect.height;
-      const popupWidth = popupRect.width;
       const targetHeight = targetRect.height;
       const targetWidth = targetRect.width;
       const visibleRegion = {
@@ -187,22 +252,43 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       popupElement.style.top = "auto";
       popupElement.style.right = "0";
       popupElement.style.bottom = "0";
-      const popupMirrorRect = popupElement.getBoundingClientRect();
+      const rawPopupMirrorRect = popupElement.getBoundingClientRect();
       popupElement.style.left = originLeft;
       popupElement.style.top = originTop;
       popupElement.style.right = originRight;
       popupElement.style.bottom = originBottom;
       popupElement.style.overflow = originOverflow;
       popupElement.parentElement?.removeChild(placeholderElement);
+      const widthValue = parseFloat(popupComputedStyle.width);
+      const heightValue = parseFloat(popupComputedStyle.height);
+      const baseWidth = !Number.isNaN(widthValue) && widthValue > 0 ? widthValue : popupElement.offsetWidth;
+      const baseHeight = !Number.isNaN(heightValue) && heightValue > 0 ? heightValue : popupElement.offsetHeight;
+      const safeBaseWidth = baseWidth || rawPopupRect.width || 1;
+      const safeBaseHeight = baseHeight || rawPopupRect.height || 1;
       const scaleX2 = util.toNum(
-        Math.round(popupWidth / parseFloat(width) * 1e3) / 1e3
+        Math.round(rawPopupRect.width / safeBaseWidth * 1e3) / 1e3
       );
       const scaleY2 = util.toNum(
-        Math.round(popupHeight / parseFloat(height) * 1e3) / 1e3
+        Math.round(rawPopupRect.height / safeBaseHeight * 1e3) / 1e3
       );
       if (scaleX2 === 0 || scaleY2 === 0 || findDOMNode.isDOM(target) && !isVisible(target)) {
         return;
       }
+      const [originX, originY] = getTransformOriginPoint(
+        popupComputedStyle.transformOrigin,
+        safeBaseWidth,
+        safeBaseHeight
+      );
+      const popupRect = normalizeRect(rawPopupRect, scaleX2, scaleY2, originX, originY);
+      const popupMirrorRect = normalizeRect(
+        rawPopupMirrorRect,
+        scaleX2,
+        scaleY2,
+        originX,
+        originY
+      );
+      const popupHeight = popupRect.height;
+      const popupWidth = popupRect.width;
       const { offset, targetOffset } = placementInfo;
       let [popupOffsetX, popupOffsetY] = getNumberOffset(popupRect, offset);
       const [targetOffsetX, targetOffsetY] = getNumberOffset(
@@ -249,7 +335,8 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       syncNextPopupPosition();
       const needAdjustY = supportAdjust(adjustY);
       const sameTB = popupPoints[0] === targetPoints[0];
-      if (needAdjustY && popupPoints[0] === "t" && (nextPopupBottom > adjustCheckVisibleArea.bottom || prevFlipRef.value.bt)) {
+      const overflowBottom = nextPopupBottom > adjustCheckVisibleArea.bottom;
+      if (needAdjustY && popupPoints[0] === "t" && (overflowBottom || prevFlipRef.value.bt)) {
         let tmpNextOffsetY = nextOffsetY;
         if (sameTB) {
           tmpNextOffsetY -= popupHeight - targetHeight;
@@ -265,10 +352,15 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
           tmpNextOffsetY,
           visibleRegionArea
         );
-        if (
-          // Of course use larger one
-          newVisibleArea > originIntersectionVisibleArea || newVisibleArea === originIntersectionVisibleArea && (!isVisibleFirst || newVisibleRecommendArea >= originIntersectionRecommendArea)
-        ) {
+        const shouldFlip = shouldSwitchPlacement(
+          overflowBottom,
+          isVisibleFirst,
+          newVisibleArea,
+          originIntersectionVisibleArea,
+          newVisibleRecommendArea,
+          originIntersectionRecommendArea
+        );
+        if (shouldFlip) {
           prevFlipRef.value.bt = true;
           nextOffsetY = tmpNextOffsetY;
           popupOffsetY = -popupOffsetY;
@@ -280,7 +372,8 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
           prevFlipRef.value.bt = false;
         }
       }
-      if (needAdjustY && popupPoints[0] === "b" && (nextPopupY < adjustCheckVisibleArea.top || prevFlipRef.value.tb)) {
+      const overflowTop = nextPopupY < adjustCheckVisibleArea.top;
+      if (needAdjustY && popupPoints[0] === "b" && (overflowTop || prevFlipRef.value.tb)) {
         let tmpNextOffsetY = nextOffsetY;
         if (sameTB) {
           tmpNextOffsetY += popupHeight - targetHeight;
@@ -296,10 +389,15 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
           tmpNextOffsetY,
           visibleRegionArea
         );
-        if (
-          // Of course use larger one
-          newVisibleArea > originIntersectionVisibleArea || newVisibleArea === originIntersectionVisibleArea && (!isVisibleFirst || newVisibleRecommendArea >= originIntersectionRecommendArea)
-        ) {
+        const shouldFlip = shouldSwitchPlacement(
+          overflowTop,
+          isVisibleFirst,
+          newVisibleArea,
+          originIntersectionVisibleArea,
+          newVisibleRecommendArea,
+          originIntersectionRecommendArea
+        );
+        if (shouldFlip) {
           prevFlipRef.value.tb = true;
           nextOffsetY = tmpNextOffsetY;
           popupOffsetY = -popupOffsetY;
@@ -313,7 +411,8 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       }
       const needAdjustX = supportAdjust(adjustX);
       const sameLR = popupPoints[1] === targetPoints[1];
-      if (needAdjustX && popupPoints[1] === "l" && (nextPopupRight > adjustCheckVisibleArea.right || prevFlipRef.value.rl)) {
+      const overflowRight = nextPopupRight > adjustCheckVisibleArea.right;
+      if (needAdjustX && popupPoints[1] === "l" && (overflowRight || prevFlipRef.value.rl)) {
         let tmpNextOffsetX = nextOffsetX;
         if (sameLR) {
           tmpNextOffsetX -= popupWidth - targetWidth;
@@ -329,10 +428,15 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
           nextOffsetY,
           visibleRegionArea
         );
-        if (
-          // Of course use larger one
-          newVisibleArea > originIntersectionVisibleArea || newVisibleArea === originIntersectionVisibleArea && (!isVisibleFirst || newVisibleRecommendArea >= originIntersectionRecommendArea)
-        ) {
+        const shouldFlip = shouldSwitchPlacement(
+          overflowRight,
+          isVisibleFirst,
+          newVisibleArea,
+          originIntersectionVisibleArea,
+          newVisibleRecommendArea,
+          originIntersectionRecommendArea
+        );
+        if (shouldFlip) {
           prevFlipRef.value.rl = true;
           nextOffsetX = tmpNextOffsetX;
           popupOffsetX = -popupOffsetX;
@@ -344,7 +448,8 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
           prevFlipRef.value.rl = false;
         }
       }
-      if (needAdjustX && popupPoints[1] === "r" && (nextPopupX < adjustCheckVisibleArea.left || prevFlipRef.value.lr)) {
+      const overflowLeft = nextPopupX < adjustCheckVisibleArea.left;
+      if (needAdjustX && popupPoints[1] === "r" && (overflowLeft || prevFlipRef.value.lr)) {
         let tmpNextOffsetX = nextOffsetX;
         if (sameLR) {
           tmpNextOffsetX += popupWidth - targetWidth;
@@ -360,10 +465,15 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
           nextOffsetY,
           visibleRegionArea
         );
-        if (
-          // Of course use larger one
-          newVisibleArea > originIntersectionVisibleArea || newVisibleArea === originIntersectionVisibleArea && (!isVisibleFirst || newVisibleRecommendArea >= originIntersectionRecommendArea)
-        ) {
+        const shouldFlip = shouldSwitchPlacement(
+          overflowLeft,
+          isVisibleFirst,
+          newVisibleArea,
+          originIntersectionVisibleArea,
+          newVisibleRecommendArea,
+          originIntersectionRecommendArea
+        );
+        if (shouldFlip) {
           prevFlipRef.value.lr = true;
           nextOffsetX = tmpNextOffsetX;
           popupOffsetX = -popupOffsetX;
@@ -435,12 +545,12 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       }
       const nextOffsetInfo = {
         ready: true,
-        offsetX: nextOffsetX / scaleX2,
-        offsetY: nextOffsetY / scaleY2,
-        offsetR: offsetX4Right / scaleX2,
-        offsetB: offsetY4Bottom / scaleY2,
-        arrowX: nextArrowX / scaleX2,
-        arrowY: nextArrowY / scaleY2,
+        offsetX: nextOffsetX,
+        offsetY: nextOffsetY,
+        offsetR: offsetX4Right,
+        offsetB: offsetY4Bottom,
+        arrowX: nextArrowX,
+        arrowY: nextArrowY,
         scaleX: scaleX2,
         scaleY: scaleY2,
         align: nextAlignInfo
@@ -470,17 +580,21 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
   const resetReady = () => {
     offsetInfo.ready = false;
   };
-  vue.watch(placement, async () => {
-    await vue.nextTick();
+  vue.watch(placement, () => {
     resetReady();
   });
-  vue.watchEffect(async () => {
-    if (!open.value) {
-      resetFlipCache();
-      await vue.nextTick();
-      resetReady();
+  vue.watch(
+    open,
+    () => {
+      if (!open.value) {
+        resetFlipCache();
+        resetReady();
+      }
+    },
+    {
+      immediate: true
     }
-  });
+  );
   const { ready, offsetX, offsetR, offsetY, offsetB, align, arrowY, arrowX, scaleY, scaleX } = vue.toRefs(offsetInfo);
   return [
     ready,

package/dist/hooks/useAlign.js

@@ -1,7 +1,7 @@
 import { isDOM } from "@v-c/util/dist/Dom/findDOMNode";
 import isVisible from "@v-c/util/dist/Dom/isVisible";
 import { rafDebounce } from "@v-c/util/dist/raf";
-import { reactive, shallowRef, computed, ref, watch, nextTick, watchEffect, toRefs } from "vue";
+import { reactive, shallowRef, computed, ref, watch, nextTick, toRefs } from "vue";
 import { collectScroller, getWin, getVisibleArea, toNum } from "../util.js";
 function getUnitOffset(size, offset = 0) {
   const offsetStr = `${offset}`;
@@ -56,6 +56,75 @@ function reversePoints(points, index) {
     return point;
   }).join("");
 }
+function parseOriginValue(value, size, axis) {
+  const fallback = size / 2;
+  if (!value) {
+    return fallback;
+  }
+  const val = value.trim();
+  if (!val) {
+    return fallback;
+  }
+  if (val.endsWith("%")) {
+    return size * (parseFloat(val) / 100);
+  }
+  if (val.endsWith("px")) {
+    return parseFloat(val);
+  }
+  if (val === "center") {
+    return fallback;
+  }
+  if (axis === "x") {
+    if (val === "left") {
+      return 0;
+    }
+    if (val === "right") {
+      return size;
+    }
+  } else if (axis === "y") {
+    if (val === "top") {
+      return 0;
+    }
+    if (val === "bottom") {
+      return size;
+    }
+  }
+  const num = parseFloat(val);
+  return Number.isNaN(num) ? fallback : num;
+}
+function getTransformOriginPoint(origin, width, height) {
+  const [originX = "50%", originY = "50%"] = origin?.split(/\s+/).filter(Boolean) ?? [];
+  return [
+    parseOriginValue(originX, width, "x"),
+    parseOriginValue(originY, height, "y")
+  ];
+}
+function normalizeRect(rect, scaleX, scaleY, originX, originY) {
+  const rawX = rect.x ?? rect.left;
+  const rawY = rect.y ?? rect.top;
+  const width = rect.width / scaleX;
+  const height = rect.height / scaleY;
+  const x = rawX - (1 - scaleX) * originX;
+  const y = rawY - (1 - scaleY) * originY;
+  const right = x + width;
+  const bottom = y + height;
+  return {
+    x,
+    y,
+    width,
+    height,
+    left: x,
+    top: y,
+    right,
+    bottom
+  };
+}
+function shouldSwitchPlacement(isOverflow, isVisibleFirst, newVisibleArea, originVisibleArea, newRecommendArea, originRecommendArea) {
+  if (isOverflow) {
+    return newVisibleArea > originVisibleArea || newVisibleArea === originVisibleArea && (!isVisibleFirst || newRecommendArea >= originRecommendArea);
+  }
+  return newVisibleArea > originVisibleArea || isVisibleFirst && newVisibleArea === originVisibleArea && newRecommendArea > originRecommendArea;
+}
 function useAlign(open, popupEle, target, placement, builtinPlacements, popupAlign, onPopupAlign, mobile) {
   const offsetInfo = reactive({
     ready: false,
@@ -101,7 +170,8 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       const popupElement = popupEle.value;
       const doc = popupElement.ownerDocument;
       const win = getWin(popupElement);
-      const { position: popupPosition } = win.getComputedStyle(popupElement);
+      const popupComputedStyle = win.getComputedStyle(popupElement);
+      const { position: popupPosition } = popupComputedStyle;
       const originLeft = popupElement.style.left;
       const originTop = popupElement.style.top;
       const originRight = popupElement.style.right;
@@ -142,10 +212,7 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
           height: rect.height
         };
       }
-      const popupRect = popupElement.getBoundingClientRect();
-      const { height, width } = win.getComputedStyle(popupElement);
-      popupRect.x = popupRect.x ?? popupRect.left;
-      popupRect.y = popupRect.y ?? popupRect.top;
+      const rawPopupRect = popupElement.getBoundingClientRect();
       const {
         clientWidth,
         clientHeight,
@@ -154,8 +221,6 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
         scrollTop,
         scrollLeft
       } = doc.documentElement;
-      const popupHeight = popupRect.height;
-      const popupWidth = popupRect.width;
       const targetHeight = targetRect.height;
       const targetWidth = targetRect.width;
       const visibleRegion = {
@@ -185,22 +250,43 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       popupElement.style.top = "auto";
       popupElement.style.right = "0";
       popupElement.style.bottom = "0";
-      const popupMirrorRect = popupElement.getBoundingClientRect();
+      const rawPopupMirrorRect = popupElement.getBoundingClientRect();
       popupElement.style.left = originLeft;
       popupElement.style.top = originTop;
       popupElement.style.right = originRight;
       popupElement.style.bottom = originBottom;
       popupElement.style.overflow = originOverflow;
       popupElement.parentElement?.removeChild(placeholderElement);
+      const widthValue = parseFloat(popupComputedStyle.width);
+      const heightValue = parseFloat(popupComputedStyle.height);
+      const baseWidth = !Number.isNaN(widthValue) && widthValue > 0 ? widthValue : popupElement.offsetWidth;
+      const baseHeight = !Number.isNaN(heightValue) && heightValue > 0 ? heightValue : popupElement.offsetHeight;
+      const safeBaseWidth = baseWidth || rawPopupRect.width || 1;
+      const safeBaseHeight = baseHeight || rawPopupRect.height || 1;
       const scaleX2 = toNum(
-        Math.round(popupWidth / parseFloat(width) * 1e3) / 1e3
+        Math.round(rawPopupRect.width / safeBaseWidth * 1e3) / 1e3
       );
       const scaleY2 = toNum(
-        Math.round(popupHeight / parseFloat(height) * 1e3) / 1e3
+        Math.round(rawPopupRect.height / safeBaseHeight * 1e3) / 1e3
       );
       if (scaleX2 === 0 || scaleY2 === 0 || isDOM(target) && !isVisible(target)) {
         return;
       }
+      const [originX, originY] = getTransformOriginPoint(
+        popupComputedStyle.transformOrigin,
+        safeBaseWidth,
+        safeBaseHeight
+      );
+      const popupRect = normalizeRect(rawPopupRect, scaleX2, scaleY2, originX, originY);
+      const popupMirrorRect = normalizeRect(
+        rawPopupMirrorRect,
+        scaleX2,
+        scaleY2,
+        originX,
+        originY
+      );
+      const popupHeight = popupRect.height;
+      const popupWidth = popupRect.width;
       const { offset, targetOffset } = placementInfo;
       let [popupOffsetX, popupOffsetY] = getNumberOffset(popupRect, offset);
       const [targetOffsetX, targetOffsetY] = getNumberOffset(
@@ -247,7 +333,8 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       syncNextPopupPosition();
       const needAdjustY = supportAdjust(adjustY);
       const sameTB = popupPoints[0] === targetPoints[0];
-      if (needAdjustY && popupPoints[0] === "t" && (nextPopupBottom > adjustCheckVisibleArea.bottom || prevFlipRef.value.bt)) {
+      const overflowBottom = nextPopupBottom > adjustCheckVisibleArea.bottom;
+      if (needAdjustY && popupPoints[0] === "t" && (overflowBottom || prevFlipRef.value.bt)) {
         let tmpNextOffsetY = nextOffsetY;
         if (sameTB) {
           tmpNextOffsetY -= popupHeight - targetHeight;
@@ -263,10 +350,15 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
           tmpNextOffsetY,
           visibleRegionArea
         );
-        if (
-          // Of course use larger one
-          newVisibleArea > originIntersectionVisibleArea || newVisibleArea === originIntersectionVisibleArea && (!isVisibleFirst || newVisibleRecommendArea >= originIntersectionRecommendArea)
-        ) {
+        const shouldFlip = shouldSwitchPlacement(
+          overflowBottom,
+          isVisibleFirst,
+          newVisibleArea,
+          originIntersectionVisibleArea,
+          newVisibleRecommendArea,
+          originIntersectionRecommendArea
+        );
+        if (shouldFlip) {
           prevFlipRef.value.bt = true;
           nextOffsetY = tmpNextOffsetY;
           popupOffsetY = -popupOffsetY;
@@ -278,7 +370,8 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
           prevFlipRef.value.bt = false;
         }
       }
-      if (needAdjustY && popupPoints[0] === "b" && (nextPopupY < adjustCheckVisibleArea.top || prevFlipRef.value.tb)) {
+      const overflowTop = nextPopupY < adjustCheckVisibleArea.top;
+      if (needAdjustY && popupPoints[0] === "b" && (overflowTop || prevFlipRef.value.tb)) {
         let tmpNextOffsetY = nextOffsetY;
         if (sameTB) {
           tmpNextOffsetY += popupHeight - targetHeight;
@@ -294,10 +387,15 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
           tmpNextOffsetY,
           visibleRegionArea
         );
-        if (
-          // Of course use larger one
-          newVisibleArea > originIntersectionVisibleArea || newVisibleArea === originIntersectionVisibleArea && (!isVisibleFirst || newVisibleRecommendArea >= originIntersectionRecommendArea)
-        ) {
+        const shouldFlip = shouldSwitchPlacement(
+          overflowTop,
+          isVisibleFirst,
+          newVisibleArea,
+          originIntersectionVisibleArea,
+          newVisibleRecommendArea,
+          originIntersectionRecommendArea
+        );
+        if (shouldFlip) {
           prevFlipRef.value.tb = true;
           nextOffsetY = tmpNextOffsetY;
           popupOffsetY = -popupOffsetY;
@@ -311,7 +409,8 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       }
       const needAdjustX = supportAdjust(adjustX);
       const sameLR = popupPoints[1] === targetPoints[1];
-      if (needAdjustX && popupPoints[1] === "l" && (nextPopupRight > adjustCheckVisibleArea.right || prevFlipRef.value.rl)) {
+      const overflowRight = nextPopupRight > adjustCheckVisibleArea.right;
+      if (needAdjustX && popupPoints[1] === "l" && (overflowRight || prevFlipRef.value.rl)) {
         let tmpNextOffsetX = nextOffsetX;
         if (sameLR) {
           tmpNextOffsetX -= popupWidth - targetWidth;
@@ -327,10 +426,15 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
           nextOffsetY,
           visibleRegionArea
         );
-        if (
-          // Of course use larger one
-          newVisibleArea > originIntersectionVisibleArea || newVisibleArea === originIntersectionVisibleArea && (!isVisibleFirst || newVisibleRecommendArea >= originIntersectionRecommendArea)
-        ) {
+        const shouldFlip = shouldSwitchPlacement(
+          overflowRight,
+          isVisibleFirst,
+          newVisibleArea,
+          originIntersectionVisibleArea,
+          newVisibleRecommendArea,
+          originIntersectionRecommendArea
+        );
+        if (shouldFlip) {
           prevFlipRef.value.rl = true;
           nextOffsetX = tmpNextOffsetX;
           popupOffsetX = -popupOffsetX;
@@ -342,7 +446,8 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
           prevFlipRef.value.rl = false;
         }
       }
-      if (needAdjustX && popupPoints[1] === "r" && (nextPopupX < adjustCheckVisibleArea.left || prevFlipRef.value.lr)) {
+      const overflowLeft = nextPopupX < adjustCheckVisibleArea.left;
+      if (needAdjustX && popupPoints[1] === "r" && (overflowLeft || prevFlipRef.value.lr)) {
         let tmpNextOffsetX = nextOffsetX;
         if (sameLR) {
           tmpNextOffsetX += popupWidth - targetWidth;
@@ -358,10 +463,15 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
           nextOffsetY,
           visibleRegionArea
         );
-        if (
-          // Of course use larger one
-          newVisibleArea > originIntersectionVisibleArea || newVisibleArea === originIntersectionVisibleArea && (!isVisibleFirst || newVisibleRecommendArea >= originIntersectionRecommendArea)
-        ) {
+        const shouldFlip = shouldSwitchPlacement(
+          overflowLeft,
+          isVisibleFirst,
+          newVisibleArea,
+          originIntersectionVisibleArea,
+          newVisibleRecommendArea,
+          originIntersectionRecommendArea
+        );
+        if (shouldFlip) {
           prevFlipRef.value.lr = true;
           nextOffsetX = tmpNextOffsetX;
           popupOffsetX = -popupOffsetX;
@@ -433,12 +543,12 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
       }
       const nextOffsetInfo = {
         ready: true,
-        offsetX: nextOffsetX / scaleX2,
-        offsetY: nextOffsetY / scaleY2,
-        offsetR: offsetX4Right / scaleX2,
-        offsetB: offsetY4Bottom / scaleY2,
-        arrowX: nextArrowX / scaleX2,
-        arrowY: nextArrowY / scaleY2,
+        offsetX: nextOffsetX,
+        offsetY: nextOffsetY,
+        offsetR: offsetX4Right,
+        offsetB: offsetY4Bottom,
+        arrowX: nextArrowX,
+        arrowY: nextArrowY,
         scaleX: scaleX2,
         scaleY: scaleY2,
         align: nextAlignInfo
@@ -468,17 +578,21 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
   const resetReady = () => {
     offsetInfo.ready = false;
   };
-  watch(placement, async () => {
-    await nextTick();
+  watch(placement, () => {
     resetReady();
   });
-  watchEffect(async () => {
-    if (!open.value) {
-      resetFlipCache();
-      await nextTick();
-      resetReady();
+  watch(
+    open,
+    () => {
+      if (!open.value) {
+        resetFlipCache();
+        resetReady();
+      }
+    },
+    {
+      immediate: true
     }
-  });
+  );
   const { ready, offsetX, offsetR, offsetY, offsetB, align, arrowY, arrowX, scaleY, scaleX } = toRefs(offsetInfo);
   return [
     ready,

package/dist/hooks/useOffsetStyle.cjs

@@ -10,6 +10,10 @@ function useOffsetStyle(isMobile, ready, open, align, offsetR, offsetB, offsetX,
       right: AUTO,
       bottom: AUTO
     };
+    const offsetShow = offsetX.value > 0 || offsetY.value > 0 || offsetR.value > 0 || offsetB.value > 0;
+    if (!offsetShow) {
+      return {};
+    }
     if (!isMobile.value && (ready.value || !open.value)) {
       const { points } = align.value ?? {};
       const dynamicInset = align.value?.dynamicInset || align.value?._experimental?.dynamicInset;

package/dist/hooks/useOffsetStyle.js

@@ -8,6 +8,10 @@ function useOffsetStyle(isMobile, ready, open, align, offsetR, offsetB, offsetX,
       right: AUTO,
       bottom: AUTO
     };
+    const offsetShow = offsetX.value > 0 || offsetY.value > 0 || offsetR.value > 0 || offsetB.value > 0;
+    if (!offsetShow) {
+      return {};
+    }
     if (!isMobile.value && (ready.value || !open.value)) {
       const { points } = align.value ?? {};
       const dynamicInset = align.value?.dynamicInset || align.value?._experimental?.dynamicInset;

package/dist/index.d.ts

@@ -63,7 +63,7 @@ export interface TriggerProps {
     unique?: boolean;
     arrow?: boolean | ArrowTypeOuter;
     /**
-     * @private Bump fixed position at bottom in mobile.
+     * @private
      * Will replace the config of root props.
      * This will directly trade as mobile view which will not check what real is.
      * This is internal usage currently, do not use in your prod.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/trigger",
   "type": "module",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -29,8 +29,8 @@
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "@v-c/portal": "0.0.3",
-    "@v-c/resize-observer": "0.0.2",
+    "@v-c/portal": "0.0.4",
+    "@v-c/resize-observer": "0.0.3",
     "@v-c/util": "0.0.13"
   },
   "scripts": {