@v-c/trigger 0.0.10 → 0.0.12

package/dist/hooks/useAlign.js

@@ -1,39 +1,64 @@
-import { isDOM as Re } from "@v-c/util/dist/Dom/findDOMNode";
-import Xe from "@v-c/util/dist/Dom/isVisible";
-import { rafDebounce as Ye } from "@v-c/util/dist/raf";
-import { ref as Pt, shallowRef as Pe, computed as y, watch as Bt, nextTick as Be, watchEffect as Me } from "vue";
-import { collectScroller as Oe, getWin as Ve, getVisibleArea as Mt, toNum as Ot } from "../util.js";
-function Vt(o, a = 0) {
-  const f = `${a}`, c = f.match(/^(.*)\%$/);
-  return c ? o * (parseFloat(c[1]) / 100) : parseFloat(f);
+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 { collectScroller, getWin, getVisibleArea, toNum } from "../util.js";
+function getUnitOffset(size, offset = 0) {
+  const offsetStr = `${offset}`;
+  const cells = offsetStr.match(/^(.*)\%$/);
+  if (cells) {
+    return size * (parseFloat(cells[1]) / 100);
+  }
+  return parseFloat(offsetStr);
 }
-function Ct(o, a) {
-  const [f, c] = a || [];
+function getNumberOffset(rect, offset) {
+  const [offsetX, offsetY] = offset || [];
   return [
-    Vt(o.width, f),
-    Vt(o.height, c)
+    getUnitOffset(rect.width, offsetX),
+    getUnitOffset(rect.height, offsetY)
   ];
 }
-function Lt(o = "") {
-  return [o[0], o[1]];
+function splitPoints(points = "") {
+  return [points[0], points[1]];
 }
-function C(o, a) {
-  const f = a[0], c = a[1];
-  let d, Y;
-  return f === "t" ? Y = o.y : f === "b" ? Y = o.y + o.height : Y = o.y + o.height / 2, c === "l" ? d = o.x : c === "r" ? d = o.x + o.width : d = o.x + o.width / 2, { x: d, y: Y };
+function getAlignPoint(rect, points) {
+  const topBottom = points[0];
+  const leftRight = points[1];
+  let x;
+  let y;
+  if (topBottom === "t") {
+    y = rect.y;
+  } else if (topBottom === "b") {
+    y = rect.y + rect.height;
+  } else {
+    y = rect.y + rect.height / 2;
+  }
+  if (leftRight === "l") {
+    x = rect.x;
+  } else if (leftRight === "r") {
+    x = rect.x + rect.width;
+  } else {
+    x = rect.x + rect.width / 2;
+  }
+  return { x, y };
 }
-function A(o, a) {
-  const f = {
+function reversePoints(points, index) {
+  const reverseMap = {
     t: "b",
     b: "t",
     l: "r",
     r: "l"
   };
-  return o.map((c, d) => d === a ? f[c] || "c" : c).join("");
+  return points.map((point, i) => {
+    if (i === index) {
+      return reverseMap[point] || "c";
+    }
+    return point;
+  }).join("");
 }
-function We(o, a, f, c, d, Y, It, k) {
-  const g = Pt({
-    ready: !1,
+function useAlign(open, popupEle, target, placement, builtinPlacements, popupAlign, onPopupAlign, mobile) {
+  const offsetInfo = reactive({
+    ready: false,
     offsetX: 0,
     offsetY: 0,
     offsetR: 0,
@@ -42,221 +67,433 @@ function We(o, a, f, c, d, Y, It, k) {
     arrowY: 0,
     scaleX: 1,
     scaleY: 1,
-    align: d.value[c.value] || {}
-  }), U = Pe(0), K = y(() => !a.value || k?.value ? [] : Oe(a.value)), p = Pt({}), Tt = () => {
-    p.value = {};
-  }, Ft = Ye(() => {
-    if (a.value && f.value && o.value && !k?.value) {
-      let u = function(t, h, m = rt) {
-        const Xt = s.x + t, Yt = s.y + h, ye = Xt + B, de = Yt + P, xe = Math.max(Xt, m.left), be = Math.max(Yt, m.top), we = Math.min(ye, m.right), Ae = Math.min(de, m.bottom);
-        return Math.max(0, (we - xe) * (Ae - be));
-      }, tt = function() {
-        j = s.y + r, D = j + P, N = s.x + l, _ = N + B;
+    align: builtinPlacements.value[placement.value] || {}
+  });
+  const alignCountRef = shallowRef(0);
+  const scrollerList = computed(() => {
+    if (!popupEle.value || mobile?.value) {
+      return [];
+    }
+    return collectScroller(popupEle.value);
+  });
+  const prevFlipRef = ref({});
+  const resetFlipCache = () => {
+    prevFlipRef.value = {};
+  };
+  const _onAlign = () => {
+    if (popupEle.value && target.value && open.value && !mobile?.value) {
+      let getIntersectionVisibleArea = function(offsetX2, offsetY2, area = visibleArea) {
+        const l = popupRect.x + offsetX2;
+        const t = popupRect.y + offsetY2;
+        const r = l + popupWidth;
+        const b = t + popupHeight;
+        const visibleL = Math.max(l, area.left);
+        const visibleT = Math.max(t, area.top);
+        const visibleR = Math.min(r, area.right);
+        const visibleB = Math.min(b, area.bottom);
+        return Math.max(0, (visibleR - visibleL) * (visibleB - visibleT));
+      }, syncNextPopupPosition = function() {
+        nextPopupY = popupRect.y + nextOffsetY;
+        nextPopupBottom = nextPopupY + popupHeight;
+        nextPopupX = popupRect.x + nextOffsetX;
+        nextPopupRight = nextPopupX + popupWidth;
       };
-      const e = a.value, et = e.ownerDocument, ot = Ve(e), { position: St } = ot.getComputedStyle(e), jt = e.style.left, Nt = e.style.top, Wt = e.style.right, $t = e.style.bottom, Ht = e.style.overflow, L = {
-        ...d.value[c.value],
-        ...Y?.value
-      }, R = et.createElement("div");
-      e.parentElement?.appendChild(R), R.style.left = `${e.offsetLeft}px`, R.style.top = `${e.offsetTop}px`, R.style.position = St, R.style.height = `${e.offsetHeight}px`, R.style.width = `${e.offsetWidth}px`, e.style.left = "0", e.style.top = "0", e.style.right = "auto", e.style.bottom = "auto", e.style.overflow = "hidden";
-      let i;
-      if (Array.isArray(f.value))
-        i = {
-          x: f.value[0],
-          y: f.value[1],
+      const popupElement = popupEle.value;
+      const doc = popupElement.ownerDocument;
+      const win = getWin(popupElement);
+      const { position: popupPosition } = win.getComputedStyle(popupElement);
+      const originLeft = popupElement.style.left;
+      const originTop = popupElement.style.top;
+      const originRight = popupElement.style.right;
+      const originBottom = popupElement.style.bottom;
+      const originOverflow = popupElement.style.overflow;
+      const placementInfo = {
+        ...builtinPlacements.value[placement.value],
+        ...popupAlign?.value
+      };
+      const placeholderElement = doc.createElement("div");
+      popupElement.parentElement?.appendChild(placeholderElement);
+      placeholderElement.style.left = `${popupElement.offsetLeft}px`;
+      placeholderElement.style.top = `${popupElement.offsetTop}px`;
+      placeholderElement.style.position = popupPosition;
+      placeholderElement.style.height = `${popupElement.offsetHeight}px`;
+      placeholderElement.style.width = `${popupElement.offsetWidth}px`;
+      popupElement.style.left = "0";
+      popupElement.style.top = "0";
+      popupElement.style.right = "auto";
+      popupElement.style.bottom = "auto";
+      popupElement.style.overflow = "hidden";
+      let targetRect;
+      if (Array.isArray(target.value)) {
+        targetRect = {
+          x: target.value[0],
+          y: target.value[1],
           width: 0,
           height: 0
         };
-      else {
-        const t = f.value.getBoundingClientRect();
-        t.x = t.x ?? t.left, t.y = t.y ?? t.top, i = {
-          x: t.x,
-          y: t.y,
-          width: t.width,
-          height: t.height
+      } else {
+        const rect = target.value.getBoundingClientRect();
+        rect.x = rect.x ?? rect.left;
+        rect.y = rect.y ?? rect.top;
+        targetRect = {
+          x: rect.x,
+          y: rect.y,
+          width: rect.width,
+          height: rect.height
         };
       }
-      const s = e.getBoundingClientRect(), { height: Et, width: Dt } = ot.getComputedStyle(e);
-      s.x = s.x ?? s.left, s.y = s.y ?? s.top;
+      const popupRect = popupElement.getBoundingClientRect();
+      const { height, width } = win.getComputedStyle(popupElement);
+      popupRect.x = popupRect.x ?? popupRect.left;
+      popupRect.y = popupRect.y ?? popupRect.top;
       const {
-        clientWidth: _t,
-        clientHeight: kt,
-        scrollWidth: Ut,
-        scrollHeight: qt,
-        scrollTop: nt,
-        scrollLeft: st
-      } = et.documentElement, P = s.height, B = s.width, I = i.height, T = i.width, zt = {
+        clientWidth,
+        clientHeight,
+        scrollWidth,
+        scrollHeight,
+        scrollTop,
+        scrollLeft
+      } = doc.documentElement;
+      const popupHeight = popupRect.height;
+      const popupWidth = popupRect.width;
+      const targetHeight = targetRect.height;
+      const targetWidth = targetRect.width;
+      const visibleRegion = {
         left: 0,
         top: 0,
-        right: _t,
-        bottom: kt
-      }, Gt = {
-        left: -st,
-        top: -nt,
-        right: Ut - st,
-        bottom: qt - nt
+        right: clientWidth,
+        bottom: clientHeight
+      };
+      const scrollRegion = {
+        left: -scrollLeft,
+        top: -scrollTop,
+        right: scrollWidth - scrollLeft,
+        bottom: scrollHeight - scrollTop
       };
-      let { htmlRegion: F } = L;
-      const it = "visible", lt = "visibleFirst";
-      F !== "scroll" && F !== lt && (F = it);
-      const S = F === lt, Jt = Mt(Gt, K.value), n = Mt(zt, K.value), rt = F === it ? n : Jt, H = S ? n : rt;
-      e.style.left = "auto", e.style.top = "auto", e.style.right = "0", e.style.bottom = "0";
-      const ft = e.getBoundingClientRect();
-      e.style.left = jt, e.style.top = Nt, e.style.right = Wt, e.style.bottom = $t, e.style.overflow = Ht, e.parentElement?.removeChild(R);
-      const M = Ot(
-        Math.round(B / parseFloat(Dt) * 1e3) / 1e3
-      ), O = Ot(
-        Math.round(P / parseFloat(Et) * 1e3) / 1e3
+      let { htmlRegion } = placementInfo;
+      const VISIBLE = "visible";
+      const VISIBLE_FIRST = "visibleFirst";
+      if (htmlRegion !== "scroll" && htmlRegion !== VISIBLE_FIRST) {
+        htmlRegion = VISIBLE;
+      }
+      const isVisibleFirst = htmlRegion === VISIBLE_FIRST;
+      const scrollRegionArea = getVisibleArea(scrollRegion, scrollerList.value);
+      const visibleRegionArea = getVisibleArea(visibleRegion, scrollerList.value);
+      const visibleArea = htmlRegion === VISIBLE ? visibleRegionArea : scrollRegionArea;
+      const adjustCheckVisibleArea = isVisibleFirst ? visibleRegionArea : visibleArea;
+      popupElement.style.left = "auto";
+      popupElement.style.top = "auto";
+      popupElement.style.right = "0";
+      popupElement.style.bottom = "0";
+      const popupMirrorRect = 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 scaleX2 = toNum(
+        Math.round(popupWidth / parseFloat(width) * 1e3) / 1e3
       );
-      if (M === 0 || O === 0 || Re(f) && !Xe(f))
+      const scaleY2 = toNum(
+        Math.round(popupHeight / parseFloat(height) * 1e3) / 1e3
+      );
+      if (scaleX2 === 0 || scaleY2 === 0 || isDOM(target) && !isVisible(target)) {
         return;
-      const { offset: Kt, targetOffset: Qt } = L;
-      let [x, b] = Ct(s, Kt);
-      const [Zt, te] = Ct(
-        i,
-        Qt
+      }
+      const { offset, targetOffset } = placementInfo;
+      let [popupOffsetX, popupOffsetY] = getNumberOffset(popupRect, offset);
+      const [targetOffsetX, targetOffsetY] = getNumberOffset(
+        targetRect,
+        targetOffset
+      );
+      targetRect.x -= targetOffsetX;
+      targetRect.y -= targetOffsetY;
+      const [popupPoint, targetPoint] = placementInfo.points || [];
+      const targetPoints = splitPoints(targetPoint);
+      const popupPoints = splitPoints(popupPoint);
+      const targetAlignPoint = getAlignPoint(targetRect, targetPoints);
+      const popupAlignPoint = getAlignPoint(popupRect, popupPoints);
+      const nextAlignInfo = {
+        ...placementInfo
+      };
+      let nextOffsetX = targetAlignPoint.x - popupAlignPoint.x + popupOffsetX;
+      let nextOffsetY = targetAlignPoint.y - popupAlignPoint.y + popupOffsetY;
+      const originIntersectionVisibleArea = getIntersectionVisibleArea(
+        nextOffsetX,
+        nextOffsetY
+      );
+      const originIntersectionRecommendArea = getIntersectionVisibleArea(
+        nextOffsetX,
+        nextOffsetY,
+        visibleRegionArea
       );
-      i.x -= Zt, i.y -= te;
-      const [ee, oe] = L.points || [], X = Lt(oe), v = Lt(ee), at = C(i, X), ct = C(s, v), V = {
-        ...L
+      const targetAlignPointTL = getAlignPoint(targetRect, ["t", "l"]);
+      const popupAlignPointTL = getAlignPoint(popupRect, ["t", "l"]);
+      const targetAlignPointBR = getAlignPoint(targetRect, ["b", "r"]);
+      const popupAlignPointBR = getAlignPoint(popupRect, ["b", "r"]);
+      const overflow = placementInfo.overflow || {};
+      const { adjustX, adjustY, shiftX, shiftY } = overflow;
+      const supportAdjust = (val) => {
+        if (typeof val === "boolean") {
+          return val;
+        }
+        return val >= 0;
       };
-      let l = at.x - ct.x + x, r = at.y - ct.y + b;
-      const w = u(
-        l,
-        r
-      ), E = u(
-        l,
-        r,
-        n
-      ), ut = C(i, ["t", "l"]), pt = C(s, ["t", "l"]), ht = C(i, ["b", "r"]), gt = C(s, ["b", "r"]), ne = L.overflow || {}, { adjustX: se, adjustY: ie, shiftX: mt, shiftY: vt } = ne, yt = (t) => typeof t == "boolean" ? t : t >= 0;
-      let j, D, N, _;
-      tt();
-      const dt = yt(ie), xt = v[0] === X[0];
-      if (dt && v[0] === "t" && (D > H.bottom || p.value.bt)) {
-        let t = r;
-        xt ? t -= P - I : t = ut.y - gt.y - b;
-        const h = u(
-          l,
-          t
-        ), m = u(
-          l,
-          t,
-          n
+      let nextPopupY;
+      let nextPopupBottom;
+      let nextPopupX;
+      let nextPopupRight;
+      syncNextPopupPosition();
+      const needAdjustY = supportAdjust(adjustY);
+      const sameTB = popupPoints[0] === targetPoints[0];
+      if (needAdjustY && popupPoints[0] === "t" && (nextPopupBottom > adjustCheckVisibleArea.bottom || prevFlipRef.value.bt)) {
+        let tmpNextOffsetY = nextOffsetY;
+        if (sameTB) {
+          tmpNextOffsetY -= popupHeight - targetHeight;
+        } else {
+          tmpNextOffsetY = targetAlignPointTL.y - popupAlignPointBR.y - popupOffsetY;
+        }
+        const newVisibleArea = getIntersectionVisibleArea(
+          nextOffsetX,
+          tmpNextOffsetY
+        );
+        const newVisibleRecommendArea = getIntersectionVisibleArea(
+          nextOffsetX,
+          tmpNextOffsetY,
+          visibleRegionArea
         );
-        // Of course use larger one
-        h > w || h === w && (!S || m >= E) ? (p.value.bt = !0, r = t, b = -b, V.points = [
-          A(v, 0),
-          A(X, 0)
-        ]) : p.value.bt = !1;
+        if (
+          // Of course use larger one
+          newVisibleArea > originIntersectionVisibleArea || newVisibleArea === originIntersectionVisibleArea && (!isVisibleFirst || newVisibleRecommendArea >= originIntersectionRecommendArea)
+        ) {
+          prevFlipRef.value.bt = true;
+          nextOffsetY = tmpNextOffsetY;
+          popupOffsetY = -popupOffsetY;
+          nextAlignInfo.points = [
+            reversePoints(popupPoints, 0),
+            reversePoints(targetPoints, 0)
+          ];
+        } else {
+          prevFlipRef.value.bt = false;
+        }
       }
-      if (dt && v[0] === "b" && (j < H.top || p.value.tb)) {
-        let t = r;
-        xt ? t += P - I : t = ht.y - pt.y - b;
-        const h = u(
-          l,
-          t
-        ), m = u(
-          l,
-          t,
-          n
+      if (needAdjustY && popupPoints[0] === "b" && (nextPopupY < adjustCheckVisibleArea.top || prevFlipRef.value.tb)) {
+        let tmpNextOffsetY = nextOffsetY;
+        if (sameTB) {
+          tmpNextOffsetY += popupHeight - targetHeight;
+        } else {
+          tmpNextOffsetY = targetAlignPointBR.y - popupAlignPointTL.y - popupOffsetY;
+        }
+        const newVisibleArea = getIntersectionVisibleArea(
+          nextOffsetX,
+          tmpNextOffsetY
         );
-        // Of course use larger one
-        h > w || h === w && (!S || m >= E) ? (p.value.tb = !0, r = t, b = -b, V.points = [
-          A(v, 0),
-          A(X, 0)
-        ]) : p.value.tb = !1;
+        const newVisibleRecommendArea = getIntersectionVisibleArea(
+          nextOffsetX,
+          tmpNextOffsetY,
+          visibleRegionArea
+        );
+        if (
+          // Of course use larger one
+          newVisibleArea > originIntersectionVisibleArea || newVisibleArea === originIntersectionVisibleArea && (!isVisibleFirst || newVisibleRecommendArea >= originIntersectionRecommendArea)
+        ) {
+          prevFlipRef.value.tb = true;
+          nextOffsetY = tmpNextOffsetY;
+          popupOffsetY = -popupOffsetY;
+          nextAlignInfo.points = [
+            reversePoints(popupPoints, 0),
+            reversePoints(targetPoints, 0)
+          ];
+        } else {
+          prevFlipRef.value.tb = false;
+        }
       }
-      const bt = yt(se), wt = v[1] === X[1];
-      if (bt && v[1] === "l" && (_ > H.right || p.value.rl)) {
-        let t = l;
-        wt ? t -= B - T : t = ut.x - gt.x - x;
-        const h = u(
-          t,
-          r
-        ), m = u(
-          t,
-          r,
-          n
+      const needAdjustX = supportAdjust(adjustX);
+      const sameLR = popupPoints[1] === targetPoints[1];
+      if (needAdjustX && popupPoints[1] === "l" && (nextPopupRight > adjustCheckVisibleArea.right || prevFlipRef.value.rl)) {
+        let tmpNextOffsetX = nextOffsetX;
+        if (sameLR) {
+          tmpNextOffsetX -= popupWidth - targetWidth;
+        } else {
+          tmpNextOffsetX = targetAlignPointTL.x - popupAlignPointBR.x - popupOffsetX;
+        }
+        const newVisibleArea = getIntersectionVisibleArea(
+          tmpNextOffsetX,
+          nextOffsetY
+        );
+        const newVisibleRecommendArea = getIntersectionVisibleArea(
+          tmpNextOffsetX,
+          nextOffsetY,
+          visibleRegionArea
         );
-        // Of course use larger one
-        h > w || h === w && (!S || m >= E) ? (p.value.rl = !0, l = t, x = -x, V.points = [
-          A(v, 1),
-          A(X, 1)
-        ]) : p.value.rl = !1;
+        if (
+          // Of course use larger one
+          newVisibleArea > originIntersectionVisibleArea || newVisibleArea === originIntersectionVisibleArea && (!isVisibleFirst || newVisibleRecommendArea >= originIntersectionRecommendArea)
+        ) {
+          prevFlipRef.value.rl = true;
+          nextOffsetX = tmpNextOffsetX;
+          popupOffsetX = -popupOffsetX;
+          nextAlignInfo.points = [
+            reversePoints(popupPoints, 1),
+            reversePoints(targetPoints, 1)
+          ];
+        } else {
+          prevFlipRef.value.rl = false;
+        }
       }
-      if (bt && v[1] === "r" && (N < H.left || p.value.lr)) {
-        let t = l;
-        wt ? t += B - T : t = ht.x - pt.x - x;
-        const h = u(
-          t,
-          r
-        ), m = u(
-          t,
-          r,
-          n
+      if (needAdjustX && popupPoints[1] === "r" && (nextPopupX < adjustCheckVisibleArea.left || prevFlipRef.value.lr)) {
+        let tmpNextOffsetX = nextOffsetX;
+        if (sameLR) {
+          tmpNextOffsetX += popupWidth - targetWidth;
+        } else {
+          tmpNextOffsetX = targetAlignPointBR.x - popupAlignPointTL.x - popupOffsetX;
+        }
+        const newVisibleArea = getIntersectionVisibleArea(
+          tmpNextOffsetX,
+          nextOffsetY
+        );
+        const newVisibleRecommendArea = getIntersectionVisibleArea(
+          tmpNextOffsetX,
+          nextOffsetY,
+          visibleRegionArea
         );
-        // Of course use larger one
-        h > w || h === w && (!S || m >= E) ? (p.value.lr = !0, l = t, x = -x, V.points = [
-          A(v, 1),
-          A(X, 1)
-        ]) : p.value.lr = !1;
+        if (
+          // Of course use larger one
+          newVisibleArea > originIntersectionVisibleArea || newVisibleArea === originIntersectionVisibleArea && (!isVisibleFirst || newVisibleRecommendArea >= originIntersectionRecommendArea)
+        ) {
+          prevFlipRef.value.lr = true;
+          nextOffsetX = tmpNextOffsetX;
+          popupOffsetX = -popupOffsetX;
+          nextAlignInfo.points = [
+            reversePoints(popupPoints, 1),
+            reversePoints(targetPoints, 1)
+          ];
+        } else {
+          prevFlipRef.value.lr = false;
+        }
+      }
+      syncNextPopupPosition();
+      const numShiftX = shiftX === true ? 0 : shiftX;
+      if (typeof numShiftX === "number") {
+        if (nextPopupX < visibleRegionArea.left) {
+          nextOffsetX -= nextPopupX - visibleRegionArea.left - popupOffsetX;
+          if (targetRect.x + targetWidth < visibleRegionArea.left + numShiftX) {
+            nextOffsetX += targetRect.x - visibleRegionArea.left + targetWidth - numShiftX;
+          }
+        }
+        if (nextPopupRight > visibleRegionArea.right) {
+          nextOffsetX -= nextPopupRight - visibleRegionArea.right - popupOffsetX;
+          if (targetRect.x > visibleRegionArea.right - numShiftX) {
+            nextOffsetX += targetRect.x - visibleRegionArea.right + numShiftX;
+          }
+        }
+      }
+      const numShiftY = shiftY === true ? 0 : shiftY;
+      if (typeof numShiftY === "number") {
+        if (nextPopupY < visibleRegionArea.top) {
+          nextOffsetY -= nextPopupY - visibleRegionArea.top - popupOffsetY;
+          if (targetRect.y + targetHeight < visibleRegionArea.top + numShiftY) {
+            nextOffsetY += targetRect.y - visibleRegionArea.top + targetHeight - numShiftY;
+          }
+        }
+        if (nextPopupBottom > visibleRegionArea.bottom) {
+          nextOffsetY -= nextPopupBottom - visibleRegionArea.bottom - popupOffsetY;
+          if (targetRect.y > visibleRegionArea.bottom - numShiftY) {
+            nextOffsetY += targetRect.y - visibleRegionArea.bottom + numShiftY;
+          }
+        }
+      }
+      const popupLeft = popupRect.x + nextOffsetX;
+      const popupRight = popupLeft + popupWidth;
+      const popupTop = popupRect.y + nextOffsetY;
+      const popupBottom = popupTop + popupHeight;
+      const targetLeft = targetRect.x;
+      const targetRight = targetLeft + targetWidth;
+      const targetTop = targetRect.y;
+      const targetBottom = targetTop + targetHeight;
+      const maxLeft = Math.max(popupLeft, targetLeft);
+      const minRight = Math.min(popupRight, targetRight);
+      const xCenter = (maxLeft + minRight) / 2;
+      const nextArrowX = xCenter - popupLeft;
+      const maxTop = Math.max(popupTop, targetTop);
+      const minBottom = Math.min(popupBottom, targetBottom);
+      const yCenter = (maxTop + minBottom) / 2;
+      const nextArrowY = yCenter - popupTop;
+      onPopupAlign?.(popupEle.value, nextAlignInfo);
+      let offsetX4Right = popupMirrorRect.right - popupRect.x - (nextOffsetX + popupRect.width);
+      let offsetY4Bottom = popupMirrorRect.bottom - popupRect.y - (nextOffsetY + popupRect.height);
+      if (scaleX2 === 1) {
+        nextOffsetX = Math.round(nextOffsetX);
+        offsetX4Right = Math.round(offsetX4Right);
       }
-      tt();
-      const W = mt === !0 ? 0 : mt;
-      typeof W == "number" && (N < n.left && (l -= N - n.left - x, i.x + T < n.left + W && (l += i.x - n.left + T - W)), _ > n.right && (l -= _ - n.right - x, i.x > n.right - W && (l += i.x - n.right + W)));
-      const $ = vt === !0 ? 0 : vt;
-      typeof $ == "number" && (j < n.top && (r -= j - n.top - b, i.y + I < n.top + $ && (r += i.y - n.top + I - $)), D > n.bottom && (r -= D - n.bottom - b, i.y > n.bottom - $ && (r += i.y - n.bottom + $)));
-      const q = s.x + l, le = q + B, z = s.y + r, re = z + P, At = i.x, fe = At + T, Rt = i.y, ae = Rt + I, ce = Math.max(q, At), ue = Math.min(le, fe), pe = (ce + ue) / 2 - q, he = Math.max(z, Rt), ge = Math.min(re, ae), me = (he + ge) / 2 - z;
-      It?.(a.value, V);
-      let G = ft.right - s.x - (l + s.width), J = ft.bottom - s.y - (r + s.height);
-      M === 1 && (l = Math.round(l), G = Math.round(G)), O === 1 && (r = Math.round(r), J = Math.round(J));
-      const ve = {
-        ready: !0,
-        offsetX: l / M,
-        offsetY: r / O,
-        offsetR: G / M,
-        offsetB: J / O,
-        arrowX: pe / M,
-        arrowY: me / O,
-        scaleX: M,
-        scaleY: O,
-        align: V
+      if (scaleY2 === 1) {
+        nextOffsetY = Math.round(nextOffsetY);
+        offsetY4Bottom = Math.round(offsetY4Bottom);
+      }
+      const nextOffsetInfo = {
+        ready: true,
+        offsetX: nextOffsetX / scaleX2,
+        offsetY: nextOffsetY / scaleY2,
+        offsetR: offsetX4Right / scaleX2,
+        offsetB: offsetY4Bottom / scaleY2,
+        arrowX: nextArrowX / scaleX2,
+        arrowY: nextArrowY / scaleY2,
+        scaleX: scaleX2,
+        scaleY: scaleY2,
+        align: nextAlignInfo
       };
-      g.value = ve;
+      Object.assign(offsetInfo, nextOffsetInfo);
     }
-  }), Q = () => {
-    U.value += 1;
-    const u = U.value;
+  };
+  const onAlign = rafDebounce(_onAlign);
+  const triggerAlign = () => {
+    alignCountRef.value += 1;
+    const id = alignCountRef.value;
     Promise.resolve().then(() => {
-      U.value === u && Ft();
+      if (alignCountRef.value === id) {
+        onAlign();
+      }
     });
   };
-  Bt(
-    a,
-    async (u) => {
-      u && o.value && !k?.value && (await Be(), Q());
+  watch(
+    popupEle,
+    async (ele) => {
+      if (ele && open.value && !mobile?.value) {
+        await nextTick();
+        triggerAlign();
+      }
     }
   );
-  const Z = () => {
-    g.value.ready = !1;
+  const resetReady = () => {
+    offsetInfo.ready = false;
   };
-  return Bt(c, () => {
-    Z();
-  }), Me(() => {
-    o.value || (Tt(), Z());
-  }), [
-    y(() => g.value?.ready),
-    y(() => g.value?.offsetX),
-    y(() => g.value?.offsetY),
-    y(() => g.value?.offsetR),
-    y(() => g.value?.offsetB),
-    y(() => g.value?.arrowX),
-    y(() => g.value?.arrowY),
-    y(() => g.value?.scaleX),
-    y(() => g.value?.scaleY),
-    y(() => g.value?.align),
-    Q
+  watch(placement, async () => {
+    await nextTick();
+    resetReady();
+  });
+  watchEffect(async () => {
+    if (!open.value) {
+      resetFlipCache();
+      await nextTick();
+      resetReady();
+    }
+  });
+  const { ready, offsetX, offsetR, offsetY, offsetB, align, arrowY, arrowX, scaleY, scaleX } = toRefs(offsetInfo);
+  return [
+    ready,
+    offsetX,
+    offsetY,
+    offsetR,
+    offsetB,
+    arrowX,
+    arrowY,
+    scaleX,
+    scaleY,
+    align,
+    triggerAlign
   ];
 }
 export {
-  We as default
+  useAlign as default
 };