@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.
- package/dist/Popup/Arrow.cjs +60 -89
- package/dist/Popup/Arrow.js +58 -88
- package/dist/Popup/Mask.cjs +53 -64
- package/dist/Popup/Mask.js +49 -63
- package/dist/Popup/PopupContent.cjs +22 -27
- package/dist/Popup/PopupContent.js +18 -26
- package/dist/Popup/index.cjs +312 -366
- package/dist/Popup/index.d.ts +1 -1
- package/dist/Popup/index.js +304 -362
- package/dist/UniqueProvider/UniqueContainer.cjs +133 -150
- package/dist/UniqueProvider/UniqueContainer.js +128 -148
- package/dist/UniqueProvider/index.cjs +151 -213
- package/dist/UniqueProvider/index.js +144 -210
- package/dist/UniqueProvider/useTargetState.cjs +39 -39
- package/dist/UniqueProvider/useTargetState.js +37 -39
- package/dist/_virtual/rolldown_runtime.cjs +21 -0
- package/dist/context.cjs +17 -28
- package/dist/context.js +17 -33
- package/dist/hooks/useAction.cjs +19 -25
- package/dist/hooks/useAction.js +17 -25
- package/dist/hooks/useAlign.cjs +396 -486
- package/dist/hooks/useAlign.js +391 -484
- package/dist/hooks/useDelay.cjs +21 -24
- package/dist/hooks/useDelay.js +20 -25
- package/dist/hooks/useOffsetStyle.cjs +34 -33
- package/dist/hooks/useOffsetStyle.js +32 -33
- package/dist/hooks/useWatch.cjs +38 -34
- package/dist/hooks/useWatch.js +36 -34
- package/dist/hooks/useWinClick.cjs +54 -64
- package/dist/hooks/useWinClick.js +51 -63
- package/dist/index.cjs +605 -694
- package/dist/index.d.ts +1 -1
- package/dist/index.js +593 -689
- package/dist/interface.cjs +0 -1
- package/dist/interface.js +0 -1
- package/dist/util.cjs +65 -82
- package/dist/util.js +66 -87
- package/package.json +4 -4
package/dist/hooks/useAlign.cjs
CHANGED
|
@@ -1,499 +1,409 @@
|
|
|
1
|
-
"
|
|
2
|
-
|
|
3
|
-
const
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
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
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
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
|
-
|
|
18
|
-
|
|
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
|
-
|
|
20
|
+
return [points[0], points[1]];
|
|
25
21
|
}
|
|
26
22
|
function getAlignPoint(rect, points) {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
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
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
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
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
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;
|