@v-c/trigger 0.0.10 → 0.0.11

package/dist/hooks/useAlign.cjs

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

package/dist/hooks/useAlign.d.ts

@@ -1,4 +1,4 @@
 import { Ref } from 'vue';
 import { TriggerProps } from '../index.tsx';
 import { AlignType } from '../interface';
-export default function useAlign(open: Ref<boolean>, popupEle: Ref<HTMLElement>, target: Ref<HTMLElement | [x: number, y: number]>, placement: Ref<string>, builtinPlacements: Ref<any>, popupAlign?: Ref<AlignType | undefined>, onPopupAlign?: TriggerProps['onPopupAlign'], mobile?: Ref<boolean | undefined>): readonly [import('vue').ComputedRef<boolean>, import('vue').ComputedRef<number>, import('vue').ComputedRef<number>, import('vue').ComputedRef<number>, import('vue').ComputedRef<number>, import('vue').ComputedRef<number>, import('vue').ComputedRef<number>, import('vue').ComputedRef<number>, import('vue').ComputedRef<number>, import('vue').ComputedRef<any>, () => void];
+export default function useAlign(open: Ref<boolean>, popupEle: Ref<HTMLElement>, target: Ref<HTMLElement | [x: number, y: number]>, placement: Ref<string>, builtinPlacements: Ref<any>, popupAlign?: Ref<AlignType | undefined>, onPopupAlign?: TriggerProps['onPopupAlign'], mobile?: Ref<boolean | undefined>): readonly [Ref<boolean, boolean>, Ref<number, number>, Ref<number, number>, Ref<number, number>, Ref<number, number>, Ref<number, number>, Ref<number, number>, Ref<number, number>, Ref<number, number>, Ref<any, any>, () => void];