@v-c/trigger 0.0.12 → 0.0.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/dist/Popup/Arrow.cjs +60 -89
  2. package/dist/Popup/Arrow.js +58 -88
  3. package/dist/Popup/Mask.cjs +53 -64
  4. package/dist/Popup/Mask.js +49 -63
  5. package/dist/Popup/PopupContent.cjs +22 -27
  6. package/dist/Popup/PopupContent.js +18 -26
  7. package/dist/Popup/index.cjs +312 -366
  8. package/dist/Popup/index.d.ts +1 -1
  9. package/dist/Popup/index.js +304 -362
  10. package/dist/UniqueProvider/UniqueContainer.cjs +133 -150
  11. package/dist/UniqueProvider/UniqueContainer.js +128 -148
  12. package/dist/UniqueProvider/index.cjs +151 -213
  13. package/dist/UniqueProvider/index.js +144 -210
  14. package/dist/UniqueProvider/useTargetState.cjs +39 -39
  15. package/dist/UniqueProvider/useTargetState.js +37 -39
  16. package/dist/_virtual/rolldown_runtime.cjs +21 -0
  17. package/dist/context.cjs +17 -28
  18. package/dist/context.js +17 -33
  19. package/dist/hooks/useAction.cjs +19 -25
  20. package/dist/hooks/useAction.js +17 -25
  21. package/dist/hooks/useAlign.cjs +396 -486
  22. package/dist/hooks/useAlign.js +391 -484
  23. package/dist/hooks/useDelay.cjs +21 -24
  24. package/dist/hooks/useDelay.js +20 -25
  25. package/dist/hooks/useOffsetStyle.cjs +34 -33
  26. package/dist/hooks/useOffsetStyle.js +32 -33
  27. package/dist/hooks/useWatch.cjs +38 -34
  28. package/dist/hooks/useWatch.js +36 -34
  29. package/dist/hooks/useWinClick.cjs +54 -64
  30. package/dist/hooks/useWinClick.js +51 -63
  31. package/dist/index.cjs +605 -694
  32. package/dist/index.d.ts +1 -1
  33. package/dist/index.js +593 -689
  34. package/dist/interface.cjs +0 -1
  35. package/dist/interface.js +0 -1
  36. package/dist/util.cjs +65 -82
  37. package/dist/util.js +66 -87
  38. package/package.json +4 -4
@@ -1,499 +1,409 @@
1
- "use strict";
2
- Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
- const findDOMNode = require("@v-c/util/dist/Dom/findDOMNode");
4
- const isVisible = require("@v-c/util/dist/Dom/isVisible");
5
- const raf = require("@v-c/util/dist/raf");
6
- const vue = require("vue");
7
- const util = require("../util.cjs");
1
+ Object.defineProperty(exports, "__esModule", { value: true });
2
+ const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
3
+ const require_util = require("../util.cjs");
4
+ let vue = require("vue");
5
+ let __v_c_util_dist_Dom_findDOMNode = require("@v-c/util/dist/Dom/findDOMNode");
6
+ let __v_c_util_dist_Dom_isVisible = require("@v-c/util/dist/Dom/isVisible");
7
+ __v_c_util_dist_Dom_isVisible = require_rolldown_runtime.__toESM(__v_c_util_dist_Dom_isVisible);
8
+ let __v_c_util_dist_raf = require("@v-c/util/dist/raf");
8
9
  function getUnitOffset(size, offset = 0) {
9
- const offsetStr = `${offset}`;
10
- const cells = offsetStr.match(/^(.*)\%$/);
11
- if (cells) {
12
- return size * (parseFloat(cells[1]) / 100);
13
- }
14
- return parseFloat(offsetStr);
10
+ const offsetStr = `${offset}`;
11
+ const cells = offsetStr.match(/^(.*)\%$/);
12
+ if (cells) return size * (parseFloat(cells[1]) / 100);
13
+ return parseFloat(offsetStr);
15
14
  }
16
15
  function getNumberOffset(rect, offset) {
17
- const [offsetX, offsetY] = offset || [];
18
- return [
19
- getUnitOffset(rect.width, offsetX),
20
- getUnitOffset(rect.height, offsetY)
21
- ];
16
+ const [offsetX, offsetY] = offset || [];
17
+ return [getUnitOffset(rect.width, offsetX), getUnitOffset(rect.height, offsetY)];
22
18
  }
23
19
  function splitPoints(points = "") {
24
- return [points[0], points[1]];
20
+ return [points[0], points[1]];
25
21
  }
26
22
  function getAlignPoint(rect, points) {
27
- const topBottom = points[0];
28
- const leftRight = points[1];
29
- let x;
30
- let y;
31
- if (topBottom === "t") {
32
- y = rect.y;
33
- } else if (topBottom === "b") {
34
- y = rect.y + rect.height;
35
- } else {
36
- y = rect.y + rect.height / 2;
37
- }
38
- if (leftRight === "l") {
39
- x = rect.x;
40
- } else if (leftRight === "r") {
41
- x = rect.x + rect.width;
42
- } else {
43
- x = rect.x + rect.width / 2;
44
- }
45
- return { x, y };
23
+ const topBottom = points[0];
24
+ const leftRight = points[1];
25
+ let x;
26
+ let y;
27
+ if (topBottom === "t") y = rect.y;
28
+ else if (topBottom === "b") y = rect.y + rect.height;
29
+ else y = rect.y + rect.height / 2;
30
+ if (leftRight === "l") x = rect.x;
31
+ else if (leftRight === "r") x = rect.x + rect.width;
32
+ else x = rect.x + rect.width / 2;
33
+ return {
34
+ x,
35
+ y
36
+ };
46
37
  }
47
38
  function reversePoints(points, index) {
48
- const reverseMap = {
49
- t: "b",
50
- b: "t",
51
- l: "r",
52
- r: "l"
53
- };
54
- return points.map((point, i) => {
55
- if (i === index) {
56
- return reverseMap[point] || "c";
57
- }
58
- return point;
59
- }).join("");
39
+ const reverseMap = {
40
+ t: "b",
41
+ b: "t",
42
+ l: "r",
43
+ r: "l"
44
+ };
45
+ return points.map((point, i) => {
46
+ if (i === index) return reverseMap[point] || "c";
47
+ return point;
48
+ }).join("");
49
+ }
50
+ function parseOriginValue(value, size, axis) {
51
+ const fallback = size / 2;
52
+ if (!value) return fallback;
53
+ const val = value.trim();
54
+ if (!val) return fallback;
55
+ if (val.endsWith("%")) return size * (parseFloat(val) / 100);
56
+ if (val.endsWith("px")) return parseFloat(val);
57
+ if (val === "center") return fallback;
58
+ if (axis === "x") {
59
+ if (val === "left") return 0;
60
+ if (val === "right") return size;
61
+ } else if (axis === "y") {
62
+ if (val === "top") return 0;
63
+ if (val === "bottom") return size;
64
+ }
65
+ const num = parseFloat(val);
66
+ return Number.isNaN(num) ? fallback : num;
67
+ }
68
+ function getTransformOriginPoint(origin, width, height) {
69
+ const [originX = "50%", originY = "50%"] = origin?.split(/\s+/).filter(Boolean) ?? [];
70
+ return [parseOriginValue(originX, width, "x"), parseOriginValue(originY, height, "y")];
71
+ }
72
+ function normalizeRect(rect, scaleX, scaleY, originX, originY) {
73
+ const rawX = rect.x ?? rect.left;
74
+ const rawY = rect.y ?? rect.top;
75
+ const width = rect.width / scaleX;
76
+ const height = rect.height / scaleY;
77
+ const x = rawX - (1 - scaleX) * originX;
78
+ const y = rawY - (1 - scaleY) * originY;
79
+ return {
80
+ x,
81
+ y,
82
+ width,
83
+ height,
84
+ left: x,
85
+ top: y,
86
+ right: x + width,
87
+ bottom: y + height
88
+ };
89
+ }
90
+ function shouldSwitchPlacement(isOverflow, isVisibleFirst, newVisibleArea, originVisibleArea, newRecommendArea, originRecommendArea) {
91
+ if (isOverflow) return newVisibleArea > originVisibleArea || newVisibleArea === originVisibleArea && (!isVisibleFirst || newRecommendArea >= originRecommendArea);
92
+ return newVisibleArea > originVisibleArea || isVisibleFirst && newVisibleArea === originVisibleArea && newRecommendArea > originRecommendArea;
60
93
  }
61
94
  function useAlign(open, popupEle, target, placement, builtinPlacements, popupAlign, onPopupAlign, mobile) {
62
- const offsetInfo = vue.reactive({
63
- ready: false,
64
- offsetX: 0,
65
- offsetY: 0,
66
- offsetR: 0,
67
- offsetB: 0,
68
- arrowX: 0,
69
- arrowY: 0,
70
- scaleX: 1,
71
- scaleY: 1,
72
- align: builtinPlacements.value[placement.value] || {}
73
- });
74
- const alignCountRef = vue.shallowRef(0);
75
- const scrollerList = vue.computed(() => {
76
- if (!popupEle.value || mobile?.value) {
77
- return [];
78
- }
79
- return util.collectScroller(popupEle.value);
80
- });
81
- const prevFlipRef = vue.ref({});
82
- const resetFlipCache = () => {
83
- prevFlipRef.value = {};
84
- };
85
- const _onAlign = () => {
86
- if (popupEle.value && target.value && open.value && !mobile?.value) {
87
- let getIntersectionVisibleArea = function(offsetX2, offsetY2, area = visibleArea) {
88
- const l = popupRect.x + offsetX2;
89
- const t = popupRect.y + offsetY2;
90
- const r = l + popupWidth;
91
- const b = t + popupHeight;
92
- const visibleL = Math.max(l, area.left);
93
- const visibleT = Math.max(t, area.top);
94
- const visibleR = Math.min(r, area.right);
95
- const visibleB = Math.min(b, area.bottom);
96
- return Math.max(0, (visibleR - visibleL) * (visibleB - visibleT));
97
- }, syncNextPopupPosition = function() {
98
- nextPopupY = popupRect.y + nextOffsetY;
99
- nextPopupBottom = nextPopupY + popupHeight;
100
- nextPopupX = popupRect.x + nextOffsetX;
101
- nextPopupRight = nextPopupX + popupWidth;
102
- };
103
- const popupElement = popupEle.value;
104
- const doc = popupElement.ownerDocument;
105
- const win = util.getWin(popupElement);
106
- const { position: popupPosition } = win.getComputedStyle(popupElement);
107
- const originLeft = popupElement.style.left;
108
- const originTop = popupElement.style.top;
109
- const originRight = popupElement.style.right;
110
- const originBottom = popupElement.style.bottom;
111
- const originOverflow = popupElement.style.overflow;
112
- const placementInfo = {
113
- ...builtinPlacements.value[placement.value],
114
- ...popupAlign?.value
115
- };
116
- const placeholderElement = doc.createElement("div");
117
- popupElement.parentElement?.appendChild(placeholderElement);
118
- placeholderElement.style.left = `${popupElement.offsetLeft}px`;
119
- placeholderElement.style.top = `${popupElement.offsetTop}px`;
120
- placeholderElement.style.position = popupPosition;
121
- placeholderElement.style.height = `${popupElement.offsetHeight}px`;
122
- placeholderElement.style.width = `${popupElement.offsetWidth}px`;
123
- popupElement.style.left = "0";
124
- popupElement.style.top = "0";
125
- popupElement.style.right = "auto";
126
- popupElement.style.bottom = "auto";
127
- popupElement.style.overflow = "hidden";
128
- let targetRect;
129
- if (Array.isArray(target.value)) {
130
- targetRect = {
131
- x: target.value[0],
132
- y: target.value[1],
133
- width: 0,
134
- height: 0
135
- };
136
- } else {
137
- const rect = target.value.getBoundingClientRect();
138
- rect.x = rect.x ?? rect.left;
139
- rect.y = rect.y ?? rect.top;
140
- targetRect = {
141
- x: rect.x,
142
- y: rect.y,
143
- width: rect.width,
144
- height: rect.height
145
- };
146
- }
147
- const popupRect = popupElement.getBoundingClientRect();
148
- const { height, width } = win.getComputedStyle(popupElement);
149
- popupRect.x = popupRect.x ?? popupRect.left;
150
- popupRect.y = popupRect.y ?? popupRect.top;
151
- const {
152
- clientWidth,
153
- clientHeight,
154
- scrollWidth,
155
- scrollHeight,
156
- scrollTop,
157
- scrollLeft
158
- } = doc.documentElement;
159
- const popupHeight = popupRect.height;
160
- const popupWidth = popupRect.width;
161
- const targetHeight = targetRect.height;
162
- const targetWidth = targetRect.width;
163
- const visibleRegion = {
164
- left: 0,
165
- top: 0,
166
- right: clientWidth,
167
- bottom: clientHeight
168
- };
169
- const scrollRegion = {
170
- left: -scrollLeft,
171
- top: -scrollTop,
172
- right: scrollWidth - scrollLeft,
173
- bottom: scrollHeight - scrollTop
174
- };
175
- let { htmlRegion } = placementInfo;
176
- const VISIBLE = "visible";
177
- const VISIBLE_FIRST = "visibleFirst";
178
- if (htmlRegion !== "scroll" && htmlRegion !== VISIBLE_FIRST) {
179
- htmlRegion = VISIBLE;
180
- }
181
- const isVisibleFirst = htmlRegion === VISIBLE_FIRST;
182
- const scrollRegionArea = util.getVisibleArea(scrollRegion, scrollerList.value);
183
- const visibleRegionArea = util.getVisibleArea(visibleRegion, scrollerList.value);
184
- const visibleArea = htmlRegion === VISIBLE ? visibleRegionArea : scrollRegionArea;
185
- const adjustCheckVisibleArea = isVisibleFirst ? visibleRegionArea : visibleArea;
186
- popupElement.style.left = "auto";
187
- popupElement.style.top = "auto";
188
- popupElement.style.right = "0";
189
- popupElement.style.bottom = "0";
190
- const popupMirrorRect = popupElement.getBoundingClientRect();
191
- popupElement.style.left = originLeft;
192
- popupElement.style.top = originTop;
193
- popupElement.style.right = originRight;
194
- popupElement.style.bottom = originBottom;
195
- popupElement.style.overflow = originOverflow;
196
- popupElement.parentElement?.removeChild(placeholderElement);
197
- const scaleX2 = util.toNum(
198
- Math.round(popupWidth / parseFloat(width) * 1e3) / 1e3
199
- );
200
- const scaleY2 = util.toNum(
201
- Math.round(popupHeight / parseFloat(height) * 1e3) / 1e3
202
- );
203
- if (scaleX2 === 0 || scaleY2 === 0 || findDOMNode.isDOM(target) && !isVisible(target)) {
204
- return;
205
- }
206
- const { offset, targetOffset } = placementInfo;
207
- let [popupOffsetX, popupOffsetY] = getNumberOffset(popupRect, offset);
208
- const [targetOffsetX, targetOffsetY] = getNumberOffset(
209
- targetRect,
210
- targetOffset
211
- );
212
- targetRect.x -= targetOffsetX;
213
- targetRect.y -= targetOffsetY;
214
- const [popupPoint, targetPoint] = placementInfo.points || [];
215
- const targetPoints = splitPoints(targetPoint);
216
- const popupPoints = splitPoints(popupPoint);
217
- const targetAlignPoint = getAlignPoint(targetRect, targetPoints);
218
- const popupAlignPoint = getAlignPoint(popupRect, popupPoints);
219
- const nextAlignInfo = {
220
- ...placementInfo
221
- };
222
- let nextOffsetX = targetAlignPoint.x - popupAlignPoint.x + popupOffsetX;
223
- let nextOffsetY = targetAlignPoint.y - popupAlignPoint.y + popupOffsetY;
224
- const originIntersectionVisibleArea = getIntersectionVisibleArea(
225
- nextOffsetX,
226
- nextOffsetY
227
- );
228
- const originIntersectionRecommendArea = getIntersectionVisibleArea(
229
- nextOffsetX,
230
- nextOffsetY,
231
- visibleRegionArea
232
- );
233
- const targetAlignPointTL = getAlignPoint(targetRect, ["t", "l"]);
234
- const popupAlignPointTL = getAlignPoint(popupRect, ["t", "l"]);
235
- const targetAlignPointBR = getAlignPoint(targetRect, ["b", "r"]);
236
- const popupAlignPointBR = getAlignPoint(popupRect, ["b", "r"]);
237
- const overflow = placementInfo.overflow || {};
238
- const { adjustX, adjustY, shiftX, shiftY } = overflow;
239
- const supportAdjust = (val) => {
240
- if (typeof val === "boolean") {
241
- return val;
242
- }
243
- return val >= 0;
244
- };
245
- let nextPopupY;
246
- let nextPopupBottom;
247
- let nextPopupX;
248
- let nextPopupRight;
249
- syncNextPopupPosition();
250
- const needAdjustY = supportAdjust(adjustY);
251
- const sameTB = popupPoints[0] === targetPoints[0];
252
- if (needAdjustY && popupPoints[0] === "t" && (nextPopupBottom > adjustCheckVisibleArea.bottom || prevFlipRef.value.bt)) {
253
- let tmpNextOffsetY = nextOffsetY;
254
- if (sameTB) {
255
- tmpNextOffsetY -= popupHeight - targetHeight;
256
- } else {
257
- tmpNextOffsetY = targetAlignPointTL.y - popupAlignPointBR.y - popupOffsetY;
258
- }
259
- const newVisibleArea = getIntersectionVisibleArea(
260
- nextOffsetX,
261
- tmpNextOffsetY
262
- );
263
- const newVisibleRecommendArea = getIntersectionVisibleArea(
264
- nextOffsetX,
265
- tmpNextOffsetY,
266
- visibleRegionArea
267
- );
268
- if (
269
- // Of course use larger one
270
- newVisibleArea > originIntersectionVisibleArea || newVisibleArea === originIntersectionVisibleArea && (!isVisibleFirst || newVisibleRecommendArea >= originIntersectionRecommendArea)
271
- ) {
272
- prevFlipRef.value.bt = true;
273
- nextOffsetY = tmpNextOffsetY;
274
- popupOffsetY = -popupOffsetY;
275
- nextAlignInfo.points = [
276
- reversePoints(popupPoints, 0),
277
- reversePoints(targetPoints, 0)
278
- ];
279
- } else {
280
- prevFlipRef.value.bt = false;
281
- }
282
- }
283
- if (needAdjustY && popupPoints[0] === "b" && (nextPopupY < adjustCheckVisibleArea.top || prevFlipRef.value.tb)) {
284
- let tmpNextOffsetY = nextOffsetY;
285
- if (sameTB) {
286
- tmpNextOffsetY += popupHeight - targetHeight;
287
- } else {
288
- tmpNextOffsetY = targetAlignPointBR.y - popupAlignPointTL.y - popupOffsetY;
289
- }
290
- const newVisibleArea = getIntersectionVisibleArea(
291
- nextOffsetX,
292
- tmpNextOffsetY
293
- );
294
- const newVisibleRecommendArea = getIntersectionVisibleArea(
295
- nextOffsetX,
296
- tmpNextOffsetY,
297
- visibleRegionArea
298
- );
299
- if (
300
- // Of course use larger one
301
- newVisibleArea > originIntersectionVisibleArea || newVisibleArea === originIntersectionVisibleArea && (!isVisibleFirst || newVisibleRecommendArea >= originIntersectionRecommendArea)
302
- ) {
303
- prevFlipRef.value.tb = true;
304
- nextOffsetY = tmpNextOffsetY;
305
- popupOffsetY = -popupOffsetY;
306
- nextAlignInfo.points = [
307
- reversePoints(popupPoints, 0),
308
- reversePoints(targetPoints, 0)
309
- ];
310
- } else {
311
- prevFlipRef.value.tb = false;
312
- }
313
- }
314
- const needAdjustX = supportAdjust(adjustX);
315
- const sameLR = popupPoints[1] === targetPoints[1];
316
- if (needAdjustX && popupPoints[1] === "l" && (nextPopupRight > adjustCheckVisibleArea.right || prevFlipRef.value.rl)) {
317
- let tmpNextOffsetX = nextOffsetX;
318
- if (sameLR) {
319
- tmpNextOffsetX -= popupWidth - targetWidth;
320
- } else {
321
- tmpNextOffsetX = targetAlignPointTL.x - popupAlignPointBR.x - popupOffsetX;
322
- }
323
- const newVisibleArea = getIntersectionVisibleArea(
324
- tmpNextOffsetX,
325
- nextOffsetY
326
- );
327
- const newVisibleRecommendArea = getIntersectionVisibleArea(
328
- tmpNextOffsetX,
329
- nextOffsetY,
330
- visibleRegionArea
331
- );
332
- if (
333
- // Of course use larger one
334
- newVisibleArea > originIntersectionVisibleArea || newVisibleArea === originIntersectionVisibleArea && (!isVisibleFirst || newVisibleRecommendArea >= originIntersectionRecommendArea)
335
- ) {
336
- prevFlipRef.value.rl = true;
337
- nextOffsetX = tmpNextOffsetX;
338
- popupOffsetX = -popupOffsetX;
339
- nextAlignInfo.points = [
340
- reversePoints(popupPoints, 1),
341
- reversePoints(targetPoints, 1)
342
- ];
343
- } else {
344
- prevFlipRef.value.rl = false;
345
- }
346
- }
347
- if (needAdjustX && popupPoints[1] === "r" && (nextPopupX < adjustCheckVisibleArea.left || prevFlipRef.value.lr)) {
348
- let tmpNextOffsetX = nextOffsetX;
349
- if (sameLR) {
350
- tmpNextOffsetX += popupWidth - targetWidth;
351
- } else {
352
- tmpNextOffsetX = targetAlignPointBR.x - popupAlignPointTL.x - popupOffsetX;
353
- }
354
- const newVisibleArea = getIntersectionVisibleArea(
355
- tmpNextOffsetX,
356
- nextOffsetY
357
- );
358
- const newVisibleRecommendArea = getIntersectionVisibleArea(
359
- tmpNextOffsetX,
360
- nextOffsetY,
361
- visibleRegionArea
362
- );
363
- if (
364
- // Of course use larger one
365
- newVisibleArea > originIntersectionVisibleArea || newVisibleArea === originIntersectionVisibleArea && (!isVisibleFirst || newVisibleRecommendArea >= originIntersectionRecommendArea)
366
- ) {
367
- prevFlipRef.value.lr = true;
368
- nextOffsetX = tmpNextOffsetX;
369
- popupOffsetX = -popupOffsetX;
370
- nextAlignInfo.points = [
371
- reversePoints(popupPoints, 1),
372
- reversePoints(targetPoints, 1)
373
- ];
374
- } else {
375
- prevFlipRef.value.lr = false;
376
- }
377
- }
378
- syncNextPopupPosition();
379
- const numShiftX = shiftX === true ? 0 : shiftX;
380
- if (typeof numShiftX === "number") {
381
- if (nextPopupX < visibleRegionArea.left) {
382
- nextOffsetX -= nextPopupX - visibleRegionArea.left - popupOffsetX;
383
- if (targetRect.x + targetWidth < visibleRegionArea.left + numShiftX) {
384
- nextOffsetX += targetRect.x - visibleRegionArea.left + targetWidth - numShiftX;
385
- }
386
- }
387
- if (nextPopupRight > visibleRegionArea.right) {
388
- nextOffsetX -= nextPopupRight - visibleRegionArea.right - popupOffsetX;
389
- if (targetRect.x > visibleRegionArea.right - numShiftX) {
390
- nextOffsetX += targetRect.x - visibleRegionArea.right + numShiftX;
391
- }
392
- }
393
- }
394
- const numShiftY = shiftY === true ? 0 : shiftY;
395
- if (typeof numShiftY === "number") {
396
- if (nextPopupY < visibleRegionArea.top) {
397
- nextOffsetY -= nextPopupY - visibleRegionArea.top - popupOffsetY;
398
- if (targetRect.y + targetHeight < visibleRegionArea.top + numShiftY) {
399
- nextOffsetY += targetRect.y - visibleRegionArea.top + targetHeight - numShiftY;
400
- }
401
- }
402
- if (nextPopupBottom > visibleRegionArea.bottom) {
403
- nextOffsetY -= nextPopupBottom - visibleRegionArea.bottom - popupOffsetY;
404
- if (targetRect.y > visibleRegionArea.bottom - numShiftY) {
405
- nextOffsetY += targetRect.y - visibleRegionArea.bottom + numShiftY;
406
- }
407
- }
408
- }
409
- const popupLeft = popupRect.x + nextOffsetX;
410
- const popupRight = popupLeft + popupWidth;
411
- const popupTop = popupRect.y + nextOffsetY;
412
- const popupBottom = popupTop + popupHeight;
413
- const targetLeft = targetRect.x;
414
- const targetRight = targetLeft + targetWidth;
415
- const targetTop = targetRect.y;
416
- const targetBottom = targetTop + targetHeight;
417
- const maxLeft = Math.max(popupLeft, targetLeft);
418
- const minRight = Math.min(popupRight, targetRight);
419
- const xCenter = (maxLeft + minRight) / 2;
420
- const nextArrowX = xCenter - popupLeft;
421
- const maxTop = Math.max(popupTop, targetTop);
422
- const minBottom = Math.min(popupBottom, targetBottom);
423
- const yCenter = (maxTop + minBottom) / 2;
424
- const nextArrowY = yCenter - popupTop;
425
- onPopupAlign?.(popupEle.value, nextAlignInfo);
426
- let offsetX4Right = popupMirrorRect.right - popupRect.x - (nextOffsetX + popupRect.width);
427
- let offsetY4Bottom = popupMirrorRect.bottom - popupRect.y - (nextOffsetY + popupRect.height);
428
- if (scaleX2 === 1) {
429
- nextOffsetX = Math.round(nextOffsetX);
430
- offsetX4Right = Math.round(offsetX4Right);
431
- }
432
- if (scaleY2 === 1) {
433
- nextOffsetY = Math.round(nextOffsetY);
434
- offsetY4Bottom = Math.round(offsetY4Bottom);
435
- }
436
- const nextOffsetInfo = {
437
- ready: true,
438
- offsetX: nextOffsetX / scaleX2,
439
- offsetY: nextOffsetY / scaleY2,
440
- offsetR: offsetX4Right / scaleX2,
441
- offsetB: offsetY4Bottom / scaleY2,
442
- arrowX: nextArrowX / scaleX2,
443
- arrowY: nextArrowY / scaleY2,
444
- scaleX: scaleX2,
445
- scaleY: scaleY2,
446
- align: nextAlignInfo
447
- };
448
- Object.assign(offsetInfo, nextOffsetInfo);
449
- }
450
- };
451
- const onAlign = raf.rafDebounce(_onAlign);
452
- const triggerAlign = () => {
453
- alignCountRef.value += 1;
454
- const id = alignCountRef.value;
455
- Promise.resolve().then(() => {
456
- if (alignCountRef.value === id) {
457
- onAlign();
458
- }
459
- });
460
- };
461
- vue.watch(
462
- popupEle,
463
- async (ele) => {
464
- if (ele && open.value && !mobile?.value) {
465
- await vue.nextTick();
466
- triggerAlign();
467
- }
468
- }
469
- );
470
- const resetReady = () => {
471
- offsetInfo.ready = false;
472
- };
473
- vue.watch(placement, async () => {
474
- await vue.nextTick();
475
- resetReady();
476
- });
477
- vue.watchEffect(async () => {
478
- if (!open.value) {
479
- resetFlipCache();
480
- await vue.nextTick();
481
- resetReady();
482
- }
483
- });
484
- const { ready, offsetX, offsetR, offsetY, offsetB, align, arrowY, arrowX, scaleY, scaleX } = vue.toRefs(offsetInfo);
485
- return [
486
- ready,
487
- offsetX,
488
- offsetY,
489
- offsetR,
490
- offsetB,
491
- arrowX,
492
- arrowY,
493
- scaleX,
494
- scaleY,
495
- align,
496
- triggerAlign
497
- ];
95
+ const offsetInfo = (0, vue.reactive)({
96
+ ready: false,
97
+ offsetX: 0,
98
+ offsetY: 0,
99
+ offsetR: 0,
100
+ offsetB: 0,
101
+ arrowX: 0,
102
+ arrowY: 0,
103
+ scaleX: 1,
104
+ scaleY: 1,
105
+ align: builtinPlacements.value[placement.value] || {}
106
+ });
107
+ const alignCountRef = (0, vue.shallowRef)(0);
108
+ const scrollerList = (0, vue.computed)(() => {
109
+ if (!popupEle.value || mobile?.value) return [];
110
+ return require_util.collectScroller(popupEle.value);
111
+ });
112
+ const prevFlipRef = (0, vue.ref)({});
113
+ const resetFlipCache = () => {
114
+ prevFlipRef.value = {};
115
+ };
116
+ const _onAlign = () => {
117
+ if (popupEle.value && target.value && open.value && !mobile?.value) {
118
+ const popupElement = popupEle.value;
119
+ const doc = popupElement.ownerDocument;
120
+ const popupComputedStyle = require_util.getWin(popupElement).getComputedStyle(popupElement);
121
+ const { position: popupPosition } = popupComputedStyle;
122
+ const originLeft = popupElement.style.left;
123
+ const originTop = popupElement.style.top;
124
+ const originRight = popupElement.style.right;
125
+ const originBottom = popupElement.style.bottom;
126
+ const originOverflow = popupElement.style.overflow;
127
+ const placementInfo = {
128
+ ...builtinPlacements.value[placement.value],
129
+ ...popupAlign?.value
130
+ };
131
+ const placeholderElement = doc.createElement("div");
132
+ popupElement.parentElement?.appendChild(placeholderElement);
133
+ placeholderElement.style.left = `${popupElement.offsetLeft}px`;
134
+ placeholderElement.style.top = `${popupElement.offsetTop}px`;
135
+ placeholderElement.style.position = popupPosition;
136
+ placeholderElement.style.height = `${popupElement.offsetHeight}px`;
137
+ placeholderElement.style.width = `${popupElement.offsetWidth}px`;
138
+ popupElement.style.left = "0";
139
+ popupElement.style.top = "0";
140
+ popupElement.style.right = "auto";
141
+ popupElement.style.bottom = "auto";
142
+ popupElement.style.overflow = "hidden";
143
+ let targetRect;
144
+ if (Array.isArray(target.value)) targetRect = {
145
+ x: target.value[0],
146
+ y: target.value[1],
147
+ width: 0,
148
+ height: 0
149
+ };
150
+ else {
151
+ const rect = target.value.getBoundingClientRect();
152
+ rect.x = rect.x ?? rect.left;
153
+ rect.y = rect.y ?? rect.top;
154
+ targetRect = {
155
+ x: rect.x,
156
+ y: rect.y,
157
+ width: rect.width,
158
+ height: rect.height
159
+ };
160
+ }
161
+ const rawPopupRect = popupElement.getBoundingClientRect();
162
+ const { clientWidth, clientHeight, scrollWidth, scrollHeight, scrollTop, scrollLeft } = doc.documentElement;
163
+ const targetHeight = targetRect.height;
164
+ const targetWidth = targetRect.width;
165
+ const visibleRegion = {
166
+ left: 0,
167
+ top: 0,
168
+ right: clientWidth,
169
+ bottom: clientHeight
170
+ };
171
+ const scrollRegion = {
172
+ left: -scrollLeft,
173
+ top: -scrollTop,
174
+ right: scrollWidth - scrollLeft,
175
+ bottom: scrollHeight - scrollTop
176
+ };
177
+ let { htmlRegion } = placementInfo;
178
+ const VISIBLE = "visible";
179
+ const VISIBLE_FIRST = "visibleFirst";
180
+ if (htmlRegion !== "scroll" && htmlRegion !== VISIBLE_FIRST) htmlRegion = VISIBLE;
181
+ const isVisibleFirst = htmlRegion === VISIBLE_FIRST;
182
+ const scrollRegionArea = require_util.getVisibleArea(scrollRegion, scrollerList.value);
183
+ const visibleRegionArea = require_util.getVisibleArea(visibleRegion, scrollerList.value);
184
+ const visibleArea = htmlRegion === VISIBLE ? visibleRegionArea : scrollRegionArea;
185
+ const adjustCheckVisibleArea = isVisibleFirst ? visibleRegionArea : visibleArea;
186
+ popupElement.style.left = "auto";
187
+ popupElement.style.top = "auto";
188
+ popupElement.style.right = "0";
189
+ popupElement.style.bottom = "0";
190
+ const rawPopupMirrorRect = popupElement.getBoundingClientRect();
191
+ popupElement.style.left = originLeft;
192
+ popupElement.style.top = originTop;
193
+ popupElement.style.right = originRight;
194
+ popupElement.style.bottom = originBottom;
195
+ popupElement.style.overflow = originOverflow;
196
+ popupElement.parentElement?.removeChild(placeholderElement);
197
+ const widthValue = parseFloat(popupComputedStyle.width);
198
+ const heightValue = parseFloat(popupComputedStyle.height);
199
+ const baseWidth = !Number.isNaN(widthValue) && widthValue > 0 ? widthValue : popupElement.offsetWidth;
200
+ const baseHeight = !Number.isNaN(heightValue) && heightValue > 0 ? heightValue : popupElement.offsetHeight;
201
+ const safeBaseWidth = baseWidth || rawPopupRect.width || 1;
202
+ const safeBaseHeight = baseHeight || rawPopupRect.height || 1;
203
+ const scaleX$1 = require_util.toNum(Math.round(rawPopupRect.width / safeBaseWidth * 1e3) / 1e3);
204
+ const scaleY$1 = require_util.toNum(Math.round(rawPopupRect.height / safeBaseHeight * 1e3) / 1e3);
205
+ if (scaleX$1 === 0 || scaleY$1 === 0 || (0, __v_c_util_dist_Dom_findDOMNode.isDOM)(target) && !(0, __v_c_util_dist_Dom_isVisible.default)(target)) return;
206
+ const [originX, originY] = getTransformOriginPoint(popupComputedStyle.transformOrigin, safeBaseWidth, safeBaseHeight);
207
+ const popupRect = normalizeRect(rawPopupRect, scaleX$1, scaleY$1, originX, originY);
208
+ const popupMirrorRect = normalizeRect(rawPopupMirrorRect, scaleX$1, scaleY$1, originX, originY);
209
+ const popupHeight = popupRect.height;
210
+ const popupWidth = popupRect.width;
211
+ const { offset, targetOffset } = placementInfo;
212
+ let [popupOffsetX, popupOffsetY] = getNumberOffset(popupRect, offset);
213
+ const [targetOffsetX, targetOffsetY] = getNumberOffset(targetRect, targetOffset);
214
+ targetRect.x -= targetOffsetX;
215
+ targetRect.y -= targetOffsetY;
216
+ const [popupPoint, targetPoint] = placementInfo.points || [];
217
+ const targetPoints = splitPoints(targetPoint);
218
+ const popupPoints = splitPoints(popupPoint);
219
+ const targetAlignPoint = getAlignPoint(targetRect, targetPoints);
220
+ const popupAlignPoint = getAlignPoint(popupRect, popupPoints);
221
+ const nextAlignInfo = { ...placementInfo };
222
+ let nextOffsetX = targetAlignPoint.x - popupAlignPoint.x + popupOffsetX;
223
+ let nextOffsetY = targetAlignPoint.y - popupAlignPoint.y + popupOffsetY;
224
+ function getIntersectionVisibleArea(offsetX$1, offsetY$1, area = visibleArea) {
225
+ const l = popupRect.x + offsetX$1;
226
+ const t = popupRect.y + offsetY$1;
227
+ const r = l + popupWidth;
228
+ const b = t + popupHeight;
229
+ const visibleL = Math.max(l, area.left);
230
+ const visibleT = Math.max(t, area.top);
231
+ const visibleR = Math.min(r, area.right);
232
+ const visibleB = Math.min(b, area.bottom);
233
+ return Math.max(0, (visibleR - visibleL) * (visibleB - visibleT));
234
+ }
235
+ const originIntersectionVisibleArea = getIntersectionVisibleArea(nextOffsetX, nextOffsetY);
236
+ const originIntersectionRecommendArea = getIntersectionVisibleArea(nextOffsetX, nextOffsetY, visibleRegionArea);
237
+ const targetAlignPointTL = getAlignPoint(targetRect, ["t", "l"]);
238
+ const popupAlignPointTL = getAlignPoint(popupRect, ["t", "l"]);
239
+ const targetAlignPointBR = getAlignPoint(targetRect, ["b", "r"]);
240
+ const popupAlignPointBR = getAlignPoint(popupRect, ["b", "r"]);
241
+ const { adjustX, adjustY, shiftX, shiftY } = placementInfo.overflow || {};
242
+ const supportAdjust = (val) => {
243
+ if (typeof val === "boolean") return val;
244
+ return val >= 0;
245
+ };
246
+ let nextPopupY;
247
+ let nextPopupBottom;
248
+ let nextPopupX;
249
+ let nextPopupRight;
250
+ function syncNextPopupPosition() {
251
+ nextPopupY = popupRect.y + nextOffsetY;
252
+ nextPopupBottom = nextPopupY + popupHeight;
253
+ nextPopupX = popupRect.x + nextOffsetX;
254
+ nextPopupRight = nextPopupX + popupWidth;
255
+ }
256
+ syncNextPopupPosition();
257
+ const needAdjustY = supportAdjust(adjustY);
258
+ const sameTB = popupPoints[0] === targetPoints[0];
259
+ const overflowBottom = nextPopupBottom > adjustCheckVisibleArea.bottom;
260
+ if (needAdjustY && popupPoints[0] === "t" && (overflowBottom || prevFlipRef.value.bt)) {
261
+ let tmpNextOffsetY = nextOffsetY;
262
+ if (sameTB) tmpNextOffsetY -= popupHeight - targetHeight;
263
+ else tmpNextOffsetY = targetAlignPointTL.y - popupAlignPointBR.y - popupOffsetY;
264
+ if (shouldSwitchPlacement(overflowBottom, isVisibleFirst, getIntersectionVisibleArea(nextOffsetX, tmpNextOffsetY), originIntersectionVisibleArea, getIntersectionVisibleArea(nextOffsetX, tmpNextOffsetY, visibleRegionArea), originIntersectionRecommendArea)) {
265
+ prevFlipRef.value.bt = true;
266
+ nextOffsetY = tmpNextOffsetY;
267
+ popupOffsetY = -popupOffsetY;
268
+ nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
269
+ } else prevFlipRef.value.bt = false;
270
+ }
271
+ const overflowTop = nextPopupY < adjustCheckVisibleArea.top;
272
+ if (needAdjustY && popupPoints[0] === "b" && (overflowTop || prevFlipRef.value.tb)) {
273
+ let tmpNextOffsetY = nextOffsetY;
274
+ if (sameTB) tmpNextOffsetY += popupHeight - targetHeight;
275
+ else tmpNextOffsetY = targetAlignPointBR.y - popupAlignPointTL.y - popupOffsetY;
276
+ if (shouldSwitchPlacement(overflowTop, isVisibleFirst, getIntersectionVisibleArea(nextOffsetX, tmpNextOffsetY), originIntersectionVisibleArea, getIntersectionVisibleArea(nextOffsetX, tmpNextOffsetY, visibleRegionArea), originIntersectionRecommendArea)) {
277
+ prevFlipRef.value.tb = true;
278
+ nextOffsetY = tmpNextOffsetY;
279
+ popupOffsetY = -popupOffsetY;
280
+ nextAlignInfo.points = [reversePoints(popupPoints, 0), reversePoints(targetPoints, 0)];
281
+ } else prevFlipRef.value.tb = false;
282
+ }
283
+ const needAdjustX = supportAdjust(adjustX);
284
+ const sameLR = popupPoints[1] === targetPoints[1];
285
+ const overflowRight = nextPopupRight > adjustCheckVisibleArea.right;
286
+ if (needAdjustX && popupPoints[1] === "l" && (overflowRight || prevFlipRef.value.rl)) {
287
+ let tmpNextOffsetX = nextOffsetX;
288
+ if (sameLR) tmpNextOffsetX -= popupWidth - targetWidth;
289
+ else tmpNextOffsetX = targetAlignPointTL.x - popupAlignPointBR.x - popupOffsetX;
290
+ if (shouldSwitchPlacement(overflowRight, isVisibleFirst, getIntersectionVisibleArea(tmpNextOffsetX, nextOffsetY), originIntersectionVisibleArea, getIntersectionVisibleArea(tmpNextOffsetX, nextOffsetY, visibleRegionArea), originIntersectionRecommendArea)) {
291
+ prevFlipRef.value.rl = true;
292
+ nextOffsetX = tmpNextOffsetX;
293
+ popupOffsetX = -popupOffsetX;
294
+ nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
295
+ } else prevFlipRef.value.rl = false;
296
+ }
297
+ const overflowLeft = nextPopupX < adjustCheckVisibleArea.left;
298
+ if (needAdjustX && popupPoints[1] === "r" && (overflowLeft || prevFlipRef.value.lr)) {
299
+ let tmpNextOffsetX = nextOffsetX;
300
+ if (sameLR) tmpNextOffsetX += popupWidth - targetWidth;
301
+ else tmpNextOffsetX = targetAlignPointBR.x - popupAlignPointTL.x - popupOffsetX;
302
+ if (shouldSwitchPlacement(overflowLeft, isVisibleFirst, getIntersectionVisibleArea(tmpNextOffsetX, nextOffsetY), originIntersectionVisibleArea, getIntersectionVisibleArea(tmpNextOffsetX, nextOffsetY, visibleRegionArea), originIntersectionRecommendArea)) {
303
+ prevFlipRef.value.lr = true;
304
+ nextOffsetX = tmpNextOffsetX;
305
+ popupOffsetX = -popupOffsetX;
306
+ nextAlignInfo.points = [reversePoints(popupPoints, 1), reversePoints(targetPoints, 1)];
307
+ } else prevFlipRef.value.lr = false;
308
+ }
309
+ syncNextPopupPosition();
310
+ const numShiftX = shiftX === true ? 0 : shiftX;
311
+ if (typeof numShiftX === "number") {
312
+ if (nextPopupX < visibleRegionArea.left) {
313
+ nextOffsetX -= nextPopupX - visibleRegionArea.left - popupOffsetX;
314
+ if (targetRect.x + targetWidth < visibleRegionArea.left + numShiftX) nextOffsetX += targetRect.x - visibleRegionArea.left + targetWidth - numShiftX;
315
+ }
316
+ if (nextPopupRight > visibleRegionArea.right) {
317
+ nextOffsetX -= nextPopupRight - visibleRegionArea.right - popupOffsetX;
318
+ if (targetRect.x > visibleRegionArea.right - numShiftX) nextOffsetX += targetRect.x - visibleRegionArea.right + numShiftX;
319
+ }
320
+ }
321
+ const numShiftY = shiftY === true ? 0 : shiftY;
322
+ if (typeof numShiftY === "number") {
323
+ if (nextPopupY < visibleRegionArea.top) {
324
+ nextOffsetY -= nextPopupY - visibleRegionArea.top - popupOffsetY;
325
+ if (targetRect.y + targetHeight < visibleRegionArea.top + numShiftY) nextOffsetY += targetRect.y - visibleRegionArea.top + targetHeight - numShiftY;
326
+ }
327
+ if (nextPopupBottom > visibleRegionArea.bottom) {
328
+ nextOffsetY -= nextPopupBottom - visibleRegionArea.bottom - popupOffsetY;
329
+ if (targetRect.y > visibleRegionArea.bottom - numShiftY) nextOffsetY += targetRect.y - visibleRegionArea.bottom + numShiftY;
330
+ }
331
+ }
332
+ const popupLeft = popupRect.x + nextOffsetX;
333
+ const popupRight = popupLeft + popupWidth;
334
+ const popupTop = popupRect.y + nextOffsetY;
335
+ const popupBottom = popupTop + popupHeight;
336
+ const targetLeft = targetRect.x;
337
+ const targetRight = targetLeft + targetWidth;
338
+ const targetTop = targetRect.y;
339
+ const targetBottom = targetTop + targetHeight;
340
+ const nextArrowX = (Math.max(popupLeft, targetLeft) + Math.min(popupRight, targetRight)) / 2 - popupLeft;
341
+ const nextArrowY = (Math.max(popupTop, targetTop) + Math.min(popupBottom, targetBottom)) / 2 - popupTop;
342
+ onPopupAlign?.(popupEle.value, nextAlignInfo);
343
+ let offsetX4Right = popupMirrorRect.right - popupRect.x - (nextOffsetX + popupRect.width);
344
+ let offsetY4Bottom = popupMirrorRect.bottom - popupRect.y - (nextOffsetY + popupRect.height);
345
+ if (scaleX$1 === 1) {
346
+ nextOffsetX = Math.round(nextOffsetX);
347
+ offsetX4Right = Math.round(offsetX4Right);
348
+ }
349
+ if (scaleY$1 === 1) {
350
+ nextOffsetY = Math.round(nextOffsetY);
351
+ offsetY4Bottom = Math.round(offsetY4Bottom);
352
+ }
353
+ const nextOffsetInfo = {
354
+ ready: true,
355
+ offsetX: nextOffsetX,
356
+ offsetY: nextOffsetY,
357
+ offsetR: offsetX4Right,
358
+ offsetB: offsetY4Bottom,
359
+ arrowX: nextArrowX,
360
+ arrowY: nextArrowY,
361
+ scaleX: scaleX$1,
362
+ scaleY: scaleY$1,
363
+ align: nextAlignInfo
364
+ };
365
+ Object.assign(offsetInfo, nextOffsetInfo);
366
+ }
367
+ };
368
+ const onAlign = (0, __v_c_util_dist_raf.rafDebounce)(_onAlign);
369
+ const triggerAlign = () => {
370
+ alignCountRef.value += 1;
371
+ const id = alignCountRef.value;
372
+ Promise.resolve().then(() => {
373
+ if (alignCountRef.value === id) onAlign();
374
+ });
375
+ };
376
+ (0, vue.watch)(popupEle, async (ele) => {
377
+ if (ele && open.value && !mobile?.value) {
378
+ await (0, vue.nextTick)();
379
+ triggerAlign();
380
+ }
381
+ });
382
+ const resetReady = () => {
383
+ offsetInfo.ready = false;
384
+ };
385
+ (0, vue.watch)(placement, () => {
386
+ resetReady();
387
+ });
388
+ (0, vue.watch)(open, () => {
389
+ if (!open.value) {
390
+ resetFlipCache();
391
+ resetReady();
392
+ }
393
+ }, { immediate: true });
394
+ const { ready, offsetX, offsetR, offsetY, offsetB, align, arrowY, arrowX, scaleY, scaleX } = (0, vue.toRefs)(offsetInfo);
395
+ return [
396
+ ready,
397
+ offsetX,
398
+ offsetY,
399
+ offsetR,
400
+ offsetB,
401
+ arrowX,
402
+ arrowY,
403
+ scaleX,
404
+ scaleY,
405
+ align,
406
+ triggerAlign
407
+ ];
498
408
  }
499
409
  exports.default = useAlign;