@v-c/trigger 0.0.13 → 0.0.15

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.
@@ -1,613 +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("");
60
49
  }
61
50
  function parseOriginValue(value, size, axis) {
62
- const fallback = size / 2;
63
- if (!value) {
64
- return fallback;
65
- }
66
- const val = value.trim();
67
- if (!val) {
68
- return fallback;
69
- }
70
- if (val.endsWith("%")) {
71
- return size * (parseFloat(val) / 100);
72
- }
73
- if (val.endsWith("px")) {
74
- return parseFloat(val);
75
- }
76
- if (val === "center") {
77
- return fallback;
78
- }
79
- if (axis === "x") {
80
- if (val === "left") {
81
- return 0;
82
- }
83
- if (val === "right") {
84
- return size;
85
- }
86
- } else if (axis === "y") {
87
- if (val === "top") {
88
- return 0;
89
- }
90
- if (val === "bottom") {
91
- return size;
92
- }
93
- }
94
- const num = parseFloat(val);
95
- return Number.isNaN(num) ? fallback : num;
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;
96
67
  }
97
68
  function getTransformOriginPoint(origin, width, height) {
98
- const [originX = "50%", originY = "50%"] = origin?.split(/\s+/).filter(Boolean) ?? [];
99
- return [
100
- parseOriginValue(originX, width, "x"),
101
- parseOriginValue(originY, height, "y")
102
- ];
69
+ const [originX = "50%", originY = "50%"] = origin?.split(/\s+/).filter(Boolean) ?? [];
70
+ return [parseOriginValue(originX, width, "x"), parseOriginValue(originY, height, "y")];
103
71
  }
104
72
  function normalizeRect(rect, scaleX, scaleY, originX, originY) {
105
- const rawX = rect.x ?? rect.left;
106
- const rawY = rect.y ?? rect.top;
107
- const width = rect.width / scaleX;
108
- const height = rect.height / scaleY;
109
- const x = rawX - (1 - scaleX) * originX;
110
- const y = rawY - (1 - scaleY) * originY;
111
- const right = x + width;
112
- const bottom = y + height;
113
- return {
114
- x,
115
- y,
116
- width,
117
- height,
118
- left: x,
119
- top: y,
120
- right,
121
- bottom
122
- };
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
+ };
123
89
  }
124
90
  function shouldSwitchPlacement(isOverflow, isVisibleFirst, newVisibleArea, originVisibleArea, newRecommendArea, originRecommendArea) {
125
- if (isOverflow) {
126
- return newVisibleArea > originVisibleArea || newVisibleArea === originVisibleArea && (!isVisibleFirst || newRecommendArea >= originRecommendArea);
127
- }
128
- return newVisibleArea > originVisibleArea || 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;
129
93
  }
130
94
  function useAlign(open, popupEle, target, placement, builtinPlacements, popupAlign, onPopupAlign, mobile) {
131
- const offsetInfo = vue.reactive({
132
- ready: false,
133
- offsetX: 0,
134
- offsetY: 0,
135
- offsetR: 0,
136
- offsetB: 0,
137
- arrowX: 0,
138
- arrowY: 0,
139
- scaleX: 1,
140
- scaleY: 1,
141
- align: builtinPlacements.value[placement.value] || {}
142
- });
143
- const alignCountRef = vue.shallowRef(0);
144
- const scrollerList = vue.computed(() => {
145
- if (!popupEle.value || mobile?.value) {
146
- return [];
147
- }
148
- return util.collectScroller(popupEle.value);
149
- });
150
- const prevFlipRef = vue.ref({});
151
- const resetFlipCache = () => {
152
- prevFlipRef.value = {};
153
- };
154
- const _onAlign = () => {
155
- if (popupEle.value && target.value && open.value && !mobile?.value) {
156
- let getIntersectionVisibleArea = function(offsetX2, offsetY2, area = visibleArea) {
157
- const l = popupRect.x + offsetX2;
158
- const t = popupRect.y + offsetY2;
159
- const r = l + popupWidth;
160
- const b = t + popupHeight;
161
- const visibleL = Math.max(l, area.left);
162
- const visibleT = Math.max(t, area.top);
163
- const visibleR = Math.min(r, area.right);
164
- const visibleB = Math.min(b, area.bottom);
165
- return Math.max(0, (visibleR - visibleL) * (visibleB - visibleT));
166
- }, syncNextPopupPosition = function() {
167
- nextPopupY = popupRect.y + nextOffsetY;
168
- nextPopupBottom = nextPopupY + popupHeight;
169
- nextPopupX = popupRect.x + nextOffsetX;
170
- nextPopupRight = nextPopupX + popupWidth;
171
- };
172
- const popupElement = popupEle.value;
173
- const doc = popupElement.ownerDocument;
174
- const win = util.getWin(popupElement);
175
- const popupComputedStyle = win.getComputedStyle(popupElement);
176
- const { position: popupPosition } = popupComputedStyle;
177
- const originLeft = popupElement.style.left;
178
- const originTop = popupElement.style.top;
179
- const originRight = popupElement.style.right;
180
- const originBottom = popupElement.style.bottom;
181
- const originOverflow = popupElement.style.overflow;
182
- const placementInfo = {
183
- ...builtinPlacements.value[placement.value],
184
- ...popupAlign?.value
185
- };
186
- const placeholderElement = doc.createElement("div");
187
- popupElement.parentElement?.appendChild(placeholderElement);
188
- placeholderElement.style.left = `${popupElement.offsetLeft}px`;
189
- placeholderElement.style.top = `${popupElement.offsetTop}px`;
190
- placeholderElement.style.position = popupPosition;
191
- placeholderElement.style.height = `${popupElement.offsetHeight}px`;
192
- placeholderElement.style.width = `${popupElement.offsetWidth}px`;
193
- popupElement.style.left = "0";
194
- popupElement.style.top = "0";
195
- popupElement.style.right = "auto";
196
- popupElement.style.bottom = "auto";
197
- popupElement.style.overflow = "hidden";
198
- let targetRect;
199
- if (Array.isArray(target.value)) {
200
- targetRect = {
201
- x: target.value[0],
202
- y: target.value[1],
203
- width: 0,
204
- height: 0
205
- };
206
- } else {
207
- const rect = target.value.getBoundingClientRect();
208
- rect.x = rect.x ?? rect.left;
209
- rect.y = rect.y ?? rect.top;
210
- targetRect = {
211
- x: rect.x,
212
- y: rect.y,
213
- width: rect.width,
214
- height: rect.height
215
- };
216
- }
217
- const rawPopupRect = popupElement.getBoundingClientRect();
218
- const {
219
- clientWidth,
220
- clientHeight,
221
- scrollWidth,
222
- scrollHeight,
223
- scrollTop,
224
- scrollLeft
225
- } = doc.documentElement;
226
- const targetHeight = targetRect.height;
227
- const targetWidth = targetRect.width;
228
- const visibleRegion = {
229
- left: 0,
230
- top: 0,
231
- right: clientWidth,
232
- bottom: clientHeight
233
- };
234
- const scrollRegion = {
235
- left: -scrollLeft,
236
- top: -scrollTop,
237
- right: scrollWidth - scrollLeft,
238
- bottom: scrollHeight - scrollTop
239
- };
240
- let { htmlRegion } = placementInfo;
241
- const VISIBLE = "visible";
242
- const VISIBLE_FIRST = "visibleFirst";
243
- if (htmlRegion !== "scroll" && htmlRegion !== VISIBLE_FIRST) {
244
- htmlRegion = VISIBLE;
245
- }
246
- const isVisibleFirst = htmlRegion === VISIBLE_FIRST;
247
- const scrollRegionArea = util.getVisibleArea(scrollRegion, scrollerList.value);
248
- const visibleRegionArea = util.getVisibleArea(visibleRegion, scrollerList.value);
249
- const visibleArea = htmlRegion === VISIBLE ? visibleRegionArea : scrollRegionArea;
250
- const adjustCheckVisibleArea = isVisibleFirst ? visibleRegionArea : visibleArea;
251
- popupElement.style.left = "auto";
252
- popupElement.style.top = "auto";
253
- popupElement.style.right = "0";
254
- popupElement.style.bottom = "0";
255
- const rawPopupMirrorRect = popupElement.getBoundingClientRect();
256
- popupElement.style.left = originLeft;
257
- popupElement.style.top = originTop;
258
- popupElement.style.right = originRight;
259
- popupElement.style.bottom = originBottom;
260
- popupElement.style.overflow = originOverflow;
261
- popupElement.parentElement?.removeChild(placeholderElement);
262
- const widthValue = parseFloat(popupComputedStyle.width);
263
- const heightValue = parseFloat(popupComputedStyle.height);
264
- const baseWidth = !Number.isNaN(widthValue) && widthValue > 0 ? widthValue : popupElement.offsetWidth;
265
- const baseHeight = !Number.isNaN(heightValue) && heightValue > 0 ? heightValue : popupElement.offsetHeight;
266
- const safeBaseWidth = baseWidth || rawPopupRect.width || 1;
267
- const safeBaseHeight = baseHeight || rawPopupRect.height || 1;
268
- const scaleX2 = util.toNum(
269
- Math.round(rawPopupRect.width / safeBaseWidth * 1e3) / 1e3
270
- );
271
- const scaleY2 = util.toNum(
272
- Math.round(rawPopupRect.height / safeBaseHeight * 1e3) / 1e3
273
- );
274
- if (scaleX2 === 0 || scaleY2 === 0 || findDOMNode.isDOM(target) && !isVisible(target)) {
275
- return;
276
- }
277
- const [originX, originY] = getTransformOriginPoint(
278
- popupComputedStyle.transformOrigin,
279
- safeBaseWidth,
280
- safeBaseHeight
281
- );
282
- const popupRect = normalizeRect(rawPopupRect, scaleX2, scaleY2, originX, originY);
283
- const popupMirrorRect = normalizeRect(
284
- rawPopupMirrorRect,
285
- scaleX2,
286
- scaleY2,
287
- originX,
288
- originY
289
- );
290
- const popupHeight = popupRect.height;
291
- const popupWidth = popupRect.width;
292
- const { offset, targetOffset } = placementInfo;
293
- let [popupOffsetX, popupOffsetY] = getNumberOffset(popupRect, offset);
294
- const [targetOffsetX, targetOffsetY] = getNumberOffset(
295
- targetRect,
296
- targetOffset
297
- );
298
- targetRect.x -= targetOffsetX;
299
- targetRect.y -= targetOffsetY;
300
- const [popupPoint, targetPoint] = placementInfo.points || [];
301
- const targetPoints = splitPoints(targetPoint);
302
- const popupPoints = splitPoints(popupPoint);
303
- const targetAlignPoint = getAlignPoint(targetRect, targetPoints);
304
- const popupAlignPoint = getAlignPoint(popupRect, popupPoints);
305
- const nextAlignInfo = {
306
- ...placementInfo
307
- };
308
- let nextOffsetX = targetAlignPoint.x - popupAlignPoint.x + popupOffsetX;
309
- let nextOffsetY = targetAlignPoint.y - popupAlignPoint.y + popupOffsetY;
310
- const originIntersectionVisibleArea = getIntersectionVisibleArea(
311
- nextOffsetX,
312
- nextOffsetY
313
- );
314
- const originIntersectionRecommendArea = getIntersectionVisibleArea(
315
- nextOffsetX,
316
- nextOffsetY,
317
- visibleRegionArea
318
- );
319
- const targetAlignPointTL = getAlignPoint(targetRect, ["t", "l"]);
320
- const popupAlignPointTL = getAlignPoint(popupRect, ["t", "l"]);
321
- const targetAlignPointBR = getAlignPoint(targetRect, ["b", "r"]);
322
- const popupAlignPointBR = getAlignPoint(popupRect, ["b", "r"]);
323
- const overflow = placementInfo.overflow || {};
324
- const { adjustX, adjustY, shiftX, shiftY } = overflow;
325
- const supportAdjust = (val) => {
326
- if (typeof val === "boolean") {
327
- return val;
328
- }
329
- return val >= 0;
330
- };
331
- let nextPopupY;
332
- let nextPopupBottom;
333
- let nextPopupX;
334
- let nextPopupRight;
335
- syncNextPopupPosition();
336
- const needAdjustY = supportAdjust(adjustY);
337
- const sameTB = popupPoints[0] === targetPoints[0];
338
- const overflowBottom = nextPopupBottom > adjustCheckVisibleArea.bottom;
339
- if (needAdjustY && popupPoints[0] === "t" && (overflowBottom || prevFlipRef.value.bt)) {
340
- let tmpNextOffsetY = nextOffsetY;
341
- if (sameTB) {
342
- tmpNextOffsetY -= popupHeight - targetHeight;
343
- } else {
344
- tmpNextOffsetY = targetAlignPointTL.y - popupAlignPointBR.y - popupOffsetY;
345
- }
346
- const newVisibleArea = getIntersectionVisibleArea(
347
- nextOffsetX,
348
- tmpNextOffsetY
349
- );
350
- const newVisibleRecommendArea = getIntersectionVisibleArea(
351
- nextOffsetX,
352
- tmpNextOffsetY,
353
- visibleRegionArea
354
- );
355
- const shouldFlip = shouldSwitchPlacement(
356
- overflowBottom,
357
- isVisibleFirst,
358
- newVisibleArea,
359
- originIntersectionVisibleArea,
360
- newVisibleRecommendArea,
361
- originIntersectionRecommendArea
362
- );
363
- if (shouldFlip) {
364
- prevFlipRef.value.bt = true;
365
- nextOffsetY = tmpNextOffsetY;
366
- popupOffsetY = -popupOffsetY;
367
- nextAlignInfo.points = [
368
- reversePoints(popupPoints, 0),
369
- reversePoints(targetPoints, 0)
370
- ];
371
- } else {
372
- prevFlipRef.value.bt = false;
373
- }
374
- }
375
- const overflowTop = nextPopupY < adjustCheckVisibleArea.top;
376
- if (needAdjustY && popupPoints[0] === "b" && (overflowTop || prevFlipRef.value.tb)) {
377
- let tmpNextOffsetY = nextOffsetY;
378
- if (sameTB) {
379
- tmpNextOffsetY += popupHeight - targetHeight;
380
- } else {
381
- tmpNextOffsetY = targetAlignPointBR.y - popupAlignPointTL.y - popupOffsetY;
382
- }
383
- const newVisibleArea = getIntersectionVisibleArea(
384
- nextOffsetX,
385
- tmpNextOffsetY
386
- );
387
- const newVisibleRecommendArea = getIntersectionVisibleArea(
388
- nextOffsetX,
389
- tmpNextOffsetY,
390
- visibleRegionArea
391
- );
392
- const shouldFlip = shouldSwitchPlacement(
393
- overflowTop,
394
- isVisibleFirst,
395
- newVisibleArea,
396
- originIntersectionVisibleArea,
397
- newVisibleRecommendArea,
398
- originIntersectionRecommendArea
399
- );
400
- if (shouldFlip) {
401
- prevFlipRef.value.tb = true;
402
- nextOffsetY = tmpNextOffsetY;
403
- popupOffsetY = -popupOffsetY;
404
- nextAlignInfo.points = [
405
- reversePoints(popupPoints, 0),
406
- reversePoints(targetPoints, 0)
407
- ];
408
- } else {
409
- prevFlipRef.value.tb = false;
410
- }
411
- }
412
- const needAdjustX = supportAdjust(adjustX);
413
- const sameLR = popupPoints[1] === targetPoints[1];
414
- const overflowRight = nextPopupRight > adjustCheckVisibleArea.right;
415
- if (needAdjustX && popupPoints[1] === "l" && (overflowRight || prevFlipRef.value.rl)) {
416
- let tmpNextOffsetX = nextOffsetX;
417
- if (sameLR) {
418
- tmpNextOffsetX -= popupWidth - targetWidth;
419
- } else {
420
- tmpNextOffsetX = targetAlignPointTL.x - popupAlignPointBR.x - popupOffsetX;
421
- }
422
- const newVisibleArea = getIntersectionVisibleArea(
423
- tmpNextOffsetX,
424
- nextOffsetY
425
- );
426
- const newVisibleRecommendArea = getIntersectionVisibleArea(
427
- tmpNextOffsetX,
428
- nextOffsetY,
429
- visibleRegionArea
430
- );
431
- const shouldFlip = shouldSwitchPlacement(
432
- overflowRight,
433
- isVisibleFirst,
434
- newVisibleArea,
435
- originIntersectionVisibleArea,
436
- newVisibleRecommendArea,
437
- originIntersectionRecommendArea
438
- );
439
- if (shouldFlip) {
440
- prevFlipRef.value.rl = true;
441
- nextOffsetX = tmpNextOffsetX;
442
- popupOffsetX = -popupOffsetX;
443
- nextAlignInfo.points = [
444
- reversePoints(popupPoints, 1),
445
- reversePoints(targetPoints, 1)
446
- ];
447
- } else {
448
- prevFlipRef.value.rl = false;
449
- }
450
- }
451
- const overflowLeft = nextPopupX < adjustCheckVisibleArea.left;
452
- if (needAdjustX && popupPoints[1] === "r" && (overflowLeft || prevFlipRef.value.lr)) {
453
- let tmpNextOffsetX = nextOffsetX;
454
- if (sameLR) {
455
- tmpNextOffsetX += popupWidth - targetWidth;
456
- } else {
457
- tmpNextOffsetX = targetAlignPointBR.x - popupAlignPointTL.x - popupOffsetX;
458
- }
459
- const newVisibleArea = getIntersectionVisibleArea(
460
- tmpNextOffsetX,
461
- nextOffsetY
462
- );
463
- const newVisibleRecommendArea = getIntersectionVisibleArea(
464
- tmpNextOffsetX,
465
- nextOffsetY,
466
- visibleRegionArea
467
- );
468
- const shouldFlip = shouldSwitchPlacement(
469
- overflowLeft,
470
- isVisibleFirst,
471
- newVisibleArea,
472
- originIntersectionVisibleArea,
473
- newVisibleRecommendArea,
474
- originIntersectionRecommendArea
475
- );
476
- if (shouldFlip) {
477
- prevFlipRef.value.lr = true;
478
- nextOffsetX = tmpNextOffsetX;
479
- popupOffsetX = -popupOffsetX;
480
- nextAlignInfo.points = [
481
- reversePoints(popupPoints, 1),
482
- reversePoints(targetPoints, 1)
483
- ];
484
- } else {
485
- prevFlipRef.value.lr = false;
486
- }
487
- }
488
- syncNextPopupPosition();
489
- const numShiftX = shiftX === true ? 0 : shiftX;
490
- if (typeof numShiftX === "number") {
491
- if (nextPopupX < visibleRegionArea.left) {
492
- nextOffsetX -= nextPopupX - visibleRegionArea.left - popupOffsetX;
493
- if (targetRect.x + targetWidth < visibleRegionArea.left + numShiftX) {
494
- nextOffsetX += targetRect.x - visibleRegionArea.left + targetWidth - numShiftX;
495
- }
496
- }
497
- if (nextPopupRight > visibleRegionArea.right) {
498
- nextOffsetX -= nextPopupRight - visibleRegionArea.right - popupOffsetX;
499
- if (targetRect.x > visibleRegionArea.right - numShiftX) {
500
- nextOffsetX += targetRect.x - visibleRegionArea.right + numShiftX;
501
- }
502
- }
503
- }
504
- const numShiftY = shiftY === true ? 0 : shiftY;
505
- if (typeof numShiftY === "number") {
506
- if (nextPopupY < visibleRegionArea.top) {
507
- nextOffsetY -= nextPopupY - visibleRegionArea.top - popupOffsetY;
508
- if (targetRect.y + targetHeight < visibleRegionArea.top + numShiftY) {
509
- nextOffsetY += targetRect.y - visibleRegionArea.top + targetHeight - numShiftY;
510
- }
511
- }
512
- if (nextPopupBottom > visibleRegionArea.bottom) {
513
- nextOffsetY -= nextPopupBottom - visibleRegionArea.bottom - popupOffsetY;
514
- if (targetRect.y > visibleRegionArea.bottom - numShiftY) {
515
- nextOffsetY += targetRect.y - visibleRegionArea.bottom + numShiftY;
516
- }
517
- }
518
- }
519
- const popupLeft = popupRect.x + nextOffsetX;
520
- const popupRight = popupLeft + popupWidth;
521
- const popupTop = popupRect.y + nextOffsetY;
522
- const popupBottom = popupTop + popupHeight;
523
- const targetLeft = targetRect.x;
524
- const targetRight = targetLeft + targetWidth;
525
- const targetTop = targetRect.y;
526
- const targetBottom = targetTop + targetHeight;
527
- const maxLeft = Math.max(popupLeft, targetLeft);
528
- const minRight = Math.min(popupRight, targetRight);
529
- const xCenter = (maxLeft + minRight) / 2;
530
- const nextArrowX = xCenter - popupLeft;
531
- const maxTop = Math.max(popupTop, targetTop);
532
- const minBottom = Math.min(popupBottom, targetBottom);
533
- const yCenter = (maxTop + minBottom) / 2;
534
- const nextArrowY = yCenter - popupTop;
535
- onPopupAlign?.(popupEle.value, nextAlignInfo);
536
- let offsetX4Right = popupMirrorRect.right - popupRect.x - (nextOffsetX + popupRect.width);
537
- let offsetY4Bottom = popupMirrorRect.bottom - popupRect.y - (nextOffsetY + popupRect.height);
538
- if (scaleX2 === 1) {
539
- nextOffsetX = Math.round(nextOffsetX);
540
- offsetX4Right = Math.round(offsetX4Right);
541
- }
542
- if (scaleY2 === 1) {
543
- nextOffsetY = Math.round(nextOffsetY);
544
- offsetY4Bottom = Math.round(offsetY4Bottom);
545
- }
546
- const nextOffsetInfo = {
547
- ready: true,
548
- offsetX: nextOffsetX,
549
- offsetY: nextOffsetY,
550
- offsetR: offsetX4Right,
551
- offsetB: offsetY4Bottom,
552
- arrowX: nextArrowX,
553
- arrowY: nextArrowY,
554
- scaleX: scaleX2,
555
- scaleY: scaleY2,
556
- align: nextAlignInfo
557
- };
558
- Object.assign(offsetInfo, nextOffsetInfo);
559
- }
560
- };
561
- const onAlign = raf.rafDebounce(_onAlign);
562
- const triggerAlign = () => {
563
- alignCountRef.value += 1;
564
- const id = alignCountRef.value;
565
- Promise.resolve().then(() => {
566
- if (alignCountRef.value === id) {
567
- onAlign();
568
- }
569
- });
570
- };
571
- vue.watch(
572
- popupEle,
573
- async (ele) => {
574
- if (ele && open.value && !mobile?.value) {
575
- await vue.nextTick();
576
- triggerAlign();
577
- }
578
- }
579
- );
580
- const resetReady = () => {
581
- offsetInfo.ready = false;
582
- };
583
- vue.watch(placement, () => {
584
- resetReady();
585
- });
586
- vue.watch(
587
- open,
588
- () => {
589
- if (!open.value) {
590
- resetFlipCache();
591
- resetReady();
592
- }
593
- },
594
- {
595
- immediate: true
596
- }
597
- );
598
- const { ready, offsetX, offsetR, offsetY, offsetB, align, arrowY, arrowX, scaleY, scaleX } = vue.toRefs(offsetInfo);
599
- return [
600
- ready,
601
- offsetX,
602
- offsetY,
603
- offsetR,
604
- offsetB,
605
- arrowX,
606
- arrowY,
607
- scaleX,
608
- scaleY,
609
- align,
610
- triggerAlign
611
- ];
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
+ ];
612
408
  }
613
409
  exports.default = useAlign;