@v-c/trigger 0.0.9 → 0.0.11

package/dist/hooks/useAlign.js

@@ -1,39 +1,64 @@
-import { isDOM as Ye } from "@v-c/util/dist/Dom/findDOMNode";
-import Pe from "@v-c/util/dist/Dom/isVisible";
-import { rafDebounce as Be } from "@v-c/util/dist/raf";
-import { ref as Bt, shallowRef as Me, computed as y, watch as Mt, nextTick as G, watchEffect as Oe } from "vue";
-import { collectScroller as Ve, getWin as Ce, getVisibleArea as Ot, toNum as Vt } from "../util.js";
-function Ct(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 Lt(o, a) {
-  const [f, c] = a || [];
+function getNumberOffset(rect, offset) {
+  const [offsetX, offsetY] = offset || [];
   return [
-    Ct(o.width, f),
-    Ct(o.height, c)
+    getUnitOffset(rect.width, offsetX),
+    getUnitOffset(rect.height, offsetY)
   ];
 }
-function It(o = "") {
-  return [o[0], o[1]];
+function splitPoints(points = "") {
+  return [points[0], points[1]];
 }
-function V(o, a) {
-  const f = a[0], c = a[1];
-  let d, X;
-  return f === "t" ? X = o.y : f === "b" ? X = o.y + o.height : X = 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: X };
+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 w(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 $e(o, a, f, c, d, X, Tt, D) {
-  const h = Bt({
-    ready: !1,
+function useAlign(open, popupEle, target, placement, builtinPlacements, popupAlign, onPopupAlign, mobile) {
+  const offsetInfo = reactive({
+    ready: false,
     offsetX: 0,
     offsetY: 0,
     offsetR: 0,
@@ -42,217 +67,433 @@ function $e(o, a, f, c, d, X, Tt, D) {
     arrowY: 0,
     scaleX: 1,
     scaleY: 1,
-    align: d.value[c.value] || {}
-  }), _ = Me(0), J = y(() => !a.value || D?.value ? [] : Ve(a.value)), p = Bt({}), Ft = () => {
-    p.value = {};
-  }, St = Be(() => {
-    if (a.value && f.value && o.value && !D?.value) {
-      let u = function(t, v, g = rt) {
-        const Yt = s.x + t, Pt = s.y + v, xe = Yt + P, be = Pt + Y, we = Math.max(Yt, g.left), Ae = Math.max(Pt, g.top), Re = Math.min(xe, g.right), Xe = Math.min(be, g.bottom);
-        return Math.max(0, (Re - we) * (Xe - Ae));
-      }, Z = function() {
-        F = s.y + r, H = F + Y, S = s.x + l, E = S + P;
+    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, tt = e.ownerDocument, et = Ce(e), { position: Nt } = et.getComputedStyle(e), jt = e.style.left, Wt = e.style.top, $t = e.style.right, Ht = e.style.bottom, Et = e.style.overflow, C = {
-        ...d.value[c.value],
-        ...X?.value
-      }, A = tt.createElement("div");
-      e.parentElement?.appendChild(A), A.style.left = `${e.offsetLeft}px`, A.style.top = `${e.offsetTop}px`, A.style.position = Nt, A.style.height = `${e.offsetHeight}px`, A.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: Dt, width: _t } = et.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: kt,
-        clientHeight: Ut,
-        scrollWidth: qt,
-        scrollHeight: zt,
-        scrollTop: ot,
-        scrollLeft: nt
-      } = tt.documentElement, Y = s.height, P = s.width, L = i.height, I = i.width, Gt = {
+        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: kt,
-        bottom: Ut
-      }, Jt = {
-        left: -nt,
-        top: -ot,
-        right: qt - nt,
-        bottom: zt - ot
+        right: clientWidth,
+        bottom: clientHeight
+      };
+      const scrollRegion = {
+        left: -scrollLeft,
+        top: -scrollTop,
+        right: scrollWidth - scrollLeft,
+        bottom: scrollHeight - scrollTop
       };
-      let { htmlRegion: T } = C;
-      const st = "visible", it = "visibleFirst";
-      T !== "scroll" && T !== it && (T = st);
-      const lt = T === it, Kt = Ot(Jt, J.value), n = Ot(Gt, J.value), rt = T === st ? n : Kt, W = lt ? 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 = Wt, e.style.right = $t, e.style.bottom = Ht, e.style.overflow = Et, e.parentElement?.removeChild(A);
-      const B = Vt(
-        Math.round(P / parseFloat(_t) * 1e3) / 1e3
-      ), M = Vt(
-        Math.round(Y / parseFloat(Dt) * 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 (B === 0 || M === 0 || Ye(f) && !Pe(f))
+      const scaleY2 = toNum(
+        Math.round(popupHeight / parseFloat(height) * 1e3) / 1e3
+      );
+      if (scaleX2 === 0 || scaleY2 === 0 || isDOM(target) && !isVisible(target)) {
         return;
-      const { offset: Qt, targetOffset: Zt } = C;
-      let [x, b] = Lt(s, Qt);
-      const [te, ee] = Lt(
-        i,
-        Zt
+      }
+      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 -= te, i.y -= ee;
-      const [oe, ne] = C.points || [], R = It(ne), m = It(oe), at = V(i, R), ct = V(s, m), O = {
-        ...C
+      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 ut = u(
-        l,
-        r
-      ), se = u(
-        l,
-        r,
-        n
-      ), $ = (t, v) => !!(t > ut || lt && t === ut && v >= se), pt = V(i, ["t", "l"]), ht = V(s, ["t", "l"]), gt = V(i, ["b", "r"]), mt = V(s, ["b", "r"]), ie = C.overflow || {}, { adjustX: le, adjustY: re, shiftX: vt, shiftY: yt } = ie, dt = (t) => typeof t == "boolean" ? t : t >= 0;
-      let F, H, S, E;
-      Z();
-      const xt = dt(re), bt = m[0] === R[0];
-      if (xt && m[0] === "t" && (H > W.bottom || p.value.bt)) {
-        let t = r;
-        bt ? t -= Y - L : t = pt.y - mt.y - b;
-        const v = u(
-          l,
-          t
-        ), g = 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
         );
-        $(v, g) ? (p.value.bt = !0, r = t, b = -b, O.points = [
-          w(m, 0),
-          w(R, 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 (xt && m[0] === "b" && (F < W.top || p.value.tb)) {
-        let t = r;
-        bt ? t += Y - L : t = gt.y - ht.y - b;
-        const v = u(
-          l,
-          t
-        ), g = 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
         );
-        $(v, g) ? (p.value.tb = !0, r = t, b = -b, O.points = [
-          w(m, 0),
-          w(R, 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 wt = dt(le), At = m[1] === R[1];
-      if (wt && m[1] === "l" && (E > W.right || p.value.rl)) {
-        let t = l;
-        At ? t -= P - I : t = pt.x - mt.x - x;
-        const v = u(
-          t,
-          r
-        ), g = 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
         );
-        $(v, g) ? (p.value.rl = !0, l = t, x = -x, O.points = [
-          w(m, 1),
-          w(R, 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 (wt && m[1] === "r" && (S < W.left || p.value.lr)) {
-        let t = l;
-        At ? t += P - I : t = gt.x - ht.x - x;
-        const v = u(
-          t,
-          r
-        ), g = 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
         );
-        $(v, g) ? (p.value.lr = !0, l = t, x = -x, O.points = [
-          w(m, 1),
-          w(R, 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);
       }
-      Z();
-      const N = vt === !0 ? 0 : vt;
-      typeof N == "number" && (S < n.left && (l -= S - n.left - x, i.x + I < n.left + N && (l += i.x - n.left + I - N)), E > n.right && (l -= E - n.right - x, i.x > n.right - N && (l += i.x - n.right + N)));
-      const j = yt === !0 ? 0 : yt;
-      typeof j == "number" && (F < n.top && (r -= F - n.top - b, i.y + L < n.top + j && (r += i.y - n.top + L - j)), H > n.bottom && (r -= H - n.bottom - b, i.y > n.bottom - j && (r += i.y - n.bottom + j)));
-      const k = s.x + l, fe = k + P, U = s.y + r, ae = U + Y, Rt = i.x, ce = Rt + I, Xt = i.y, ue = Xt + L, pe = Math.max(k, Rt), he = Math.min(fe, ce), ge = (pe + he) / 2 - k, me = Math.max(U, Xt), ve = Math.min(ae, ue), ye = (me + ve) / 2 - U;
-      Tt?.(a.value, O);
-      let q = ft.right - s.x - (l + s.width), z = ft.bottom - s.y - (r + s.height);
-      B === 1 && (l = Math.round(l), q = Math.round(q)), M === 1 && (r = Math.round(r), z = Math.round(z));
-      const de = {
-        ready: !0,
-        offsetX: l / B,
-        offsetY: r / M,
-        offsetR: q / B,
-        offsetB: z / M,
-        arrowX: ge / B,
-        arrowY: ye / M,
-        scaleX: B,
-        scaleY: M,
-        align: O
+      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
       };
-      h.value = de;
+      Object.assign(offsetInfo, nextOffsetInfo);
     }
-  }), K = () => {
-    _.value += 1;
-    const u = _.value;
+  };
+  const onAlign = rafDebounce(_onAlign);
+  const triggerAlign = () => {
+    alignCountRef.value += 1;
+    const id = alignCountRef.value;
     Promise.resolve().then(() => {
-      _.value === u && St();
+      if (alignCountRef.value === id) {
+        onAlign();
+      }
     });
   };
-  Mt(
-    a,
-    async (u) => {
-      u && o.value && !D?.value && (await G(), K());
+  watch(
+    popupEle,
+    async (ele) => {
+      if (ele && open.value && !mobile?.value) {
+        await nextTick();
+        triggerAlign();
+      }
     }
   );
-  const Q = () => {
-    h.value.ready = !1;
+  const resetReady = () => {
+    offsetInfo.ready = false;
   };
-  return Mt(c, async () => {
-    await G(), Q();
-  }), Oe(async () => {
-    await G(), o.value || (Ft(), Q());
-  }), [
-    y(() => h.value?.ready),
-    y(() => h.value?.offsetX),
-    y(() => h.value?.offsetY),
-    y(() => h.value?.offsetR),
-    y(() => h.value?.offsetB),
-    y(() => h.value?.arrowX),
-    y(() => h.value?.arrowY),
-    y(() => h.value?.scaleX),
-    y(() => h.value?.scaleY),
-    y(() => h.value?.align),
-    K
+  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 {
-  $e as default
+  useAlign as default
 };