@v-c/trigger 0.0.13 → 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.js +304 -362
- package/dist/UniqueProvider/UniqueContainer.cjs +133 -150
- package/dist/UniqueProvider/UniqueContainer.js +128 -148
- package/dist/UniqueProvider/index.cjs +151 -216
- package/dist/UniqueProvider/index.js +144 -213
- 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 +388 -592
- package/dist/hooks/useAlign.js +383 -590
- package/dist/hooks/useDelay.cjs +21 -24
- package/dist/hooks/useDelay.js +20 -25
- package/dist/hooks/useOffsetStyle.cjs +34 -37
- package/dist/hooks/useOffsetStyle.js +32 -37
- 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.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 +2 -2
package/dist/interface.cjs
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";
|
package/dist/interface.js
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
|
package/dist/util.cjs
CHANGED
|
@@ -1,98 +1,81 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
1
|
function isPointsEq(a1 = [], a2 = [], isAlignPoint) {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
}
|
|
7
|
-
return a1[0] === a2[0] && a1[1] === a2[1];
|
|
2
|
+
if (isAlignPoint) return a1[0] === a2[0];
|
|
3
|
+
return a1[0] === a2[0] && a1[1] === a2[1];
|
|
8
4
|
}
|
|
9
5
|
function getAlignPopupClassName(builtinPlacements, prefixCls, align, isAlignPoint) {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
}
|
|
18
|
-
return "";
|
|
6
|
+
const { points } = align;
|
|
7
|
+
const placements = Object.keys(builtinPlacements);
|
|
8
|
+
for (let i = 0; i < placements.length; i += 1) {
|
|
9
|
+
const placement = placements[i];
|
|
10
|
+
if (isPointsEq(builtinPlacements[placement]?.points, points, isAlignPoint)) return `${prefixCls}-placement-${placement}`;
|
|
11
|
+
}
|
|
12
|
+
return "";
|
|
19
13
|
}
|
|
20
14
|
function getWin(ele) {
|
|
21
|
-
|
|
15
|
+
return ele.ownerDocument.defaultView;
|
|
22
16
|
}
|
|
23
17
|
function collectScroller(ele) {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
18
|
+
const scrollerList = [];
|
|
19
|
+
let current = ele?.parentElement;
|
|
20
|
+
const scrollStyle = [
|
|
21
|
+
"hidden",
|
|
22
|
+
"scroll",
|
|
23
|
+
"clip",
|
|
24
|
+
"auto"
|
|
25
|
+
];
|
|
26
|
+
while (current) {
|
|
27
|
+
const { overflowX, overflowY, overflow } = getWin(current).getComputedStyle(current);
|
|
28
|
+
if ([
|
|
29
|
+
overflowX,
|
|
30
|
+
overflowY,
|
|
31
|
+
overflow
|
|
32
|
+
].some((o) => scrollStyle.includes(o))) scrollerList.push(current);
|
|
33
|
+
current = current.parentElement;
|
|
34
|
+
}
|
|
35
|
+
return scrollerList;
|
|
35
36
|
}
|
|
36
37
|
function toNum(num, defaultValue = 1) {
|
|
37
|
-
|
|
38
|
+
return Number.isNaN(num) ? defaultValue : num;
|
|
38
39
|
}
|
|
39
40
|
function getPxValue(val) {
|
|
40
|
-
|
|
41
|
+
return toNum(parseFloat(val), 0);
|
|
41
42
|
}
|
|
42
43
|
function getVisibleArea(initArea, scrollerList) {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
const scaledBorderRightWidth = borderRightNum * scaleX;
|
|
79
|
-
let clipMarginWidth = 0;
|
|
80
|
-
let clipMarginHeight = 0;
|
|
81
|
-
if (overflow === "clip") {
|
|
82
|
-
const clipNum = getPxValue(overflowClipMargin);
|
|
83
|
-
clipMarginWidth = clipNum * scaleX;
|
|
84
|
-
clipMarginHeight = clipNum * scaleY;
|
|
85
|
-
}
|
|
86
|
-
const eleLeft = eleRect.x + scaledBorderLeftWidth - clipMarginWidth;
|
|
87
|
-
const eleTop = eleRect.y + scaledBorderTopWidth - clipMarginHeight;
|
|
88
|
-
const eleRight = eleLeft + eleRect.width + 2 * clipMarginWidth - scaledBorderLeftWidth - scaledBorderRightWidth - eleScrollWidth;
|
|
89
|
-
const eleBottom = eleTop + eleRect.height + 2 * clipMarginHeight - scaledBorderTopWidth - scaledBorderBottomWidth - eleScrollHeight;
|
|
90
|
-
visibleArea.left = Math.max(visibleArea.left, eleLeft);
|
|
91
|
-
visibleArea.top = Math.max(visibleArea.top, eleTop);
|
|
92
|
-
visibleArea.right = Math.min(visibleArea.right, eleRight);
|
|
93
|
-
visibleArea.bottom = Math.min(visibleArea.bottom, eleBottom);
|
|
94
|
-
});
|
|
95
|
-
return visibleArea;
|
|
44
|
+
const visibleArea = { ...initArea };
|
|
45
|
+
(scrollerList || []).forEach((ele) => {
|
|
46
|
+
if (ele instanceof HTMLBodyElement || ele instanceof HTMLHtmlElement) return;
|
|
47
|
+
const { overflow, overflowClipMargin, borderTopWidth, borderBottomWidth, borderLeftWidth, borderRightWidth } = getWin(ele).getComputedStyle(ele);
|
|
48
|
+
const eleRect = ele.getBoundingClientRect();
|
|
49
|
+
const { offsetHeight: eleOutHeight, clientHeight: eleInnerHeight, offsetWidth: eleOutWidth, clientWidth: eleInnerWidth } = ele;
|
|
50
|
+
const borderTopNum = getPxValue(borderTopWidth);
|
|
51
|
+
const borderBottomNum = getPxValue(borderBottomWidth);
|
|
52
|
+
const borderLeftNum = getPxValue(borderLeftWidth);
|
|
53
|
+
const borderRightNum = getPxValue(borderRightWidth);
|
|
54
|
+
const scaleX = toNum(Math.round(eleRect.width / eleOutWidth * 1e3) / 1e3);
|
|
55
|
+
const scaleY = toNum(Math.round(eleRect.height / eleOutHeight * 1e3) / 1e3);
|
|
56
|
+
const eleScrollWidth = (eleOutWidth - eleInnerWidth - borderLeftNum - borderRightNum) * scaleX;
|
|
57
|
+
const eleScrollHeight = (eleOutHeight - eleInnerHeight - borderTopNum - borderBottomNum) * scaleY;
|
|
58
|
+
const scaledBorderTopWidth = borderTopNum * scaleY;
|
|
59
|
+
const scaledBorderBottomWidth = borderBottomNum * scaleY;
|
|
60
|
+
const scaledBorderLeftWidth = borderLeftNum * scaleX;
|
|
61
|
+
const scaledBorderRightWidth = borderRightNum * scaleX;
|
|
62
|
+
let clipMarginWidth = 0;
|
|
63
|
+
let clipMarginHeight = 0;
|
|
64
|
+
if (overflow === "clip") {
|
|
65
|
+
const clipNum = getPxValue(overflowClipMargin);
|
|
66
|
+
clipMarginWidth = clipNum * scaleX;
|
|
67
|
+
clipMarginHeight = clipNum * scaleY;
|
|
68
|
+
}
|
|
69
|
+
const eleLeft = eleRect.x + scaledBorderLeftWidth - clipMarginWidth;
|
|
70
|
+
const eleTop = eleRect.y + scaledBorderTopWidth - clipMarginHeight;
|
|
71
|
+
const eleRight = eleLeft + eleRect.width + 2 * clipMarginWidth - scaledBorderLeftWidth - scaledBorderRightWidth - eleScrollWidth;
|
|
72
|
+
const eleBottom = eleTop + eleRect.height + 2 * clipMarginHeight - scaledBorderTopWidth - scaledBorderBottomWidth - eleScrollHeight;
|
|
73
|
+
visibleArea.left = Math.max(visibleArea.left, eleLeft);
|
|
74
|
+
visibleArea.top = Math.max(visibleArea.top, eleTop);
|
|
75
|
+
visibleArea.right = Math.min(visibleArea.right, eleRight);
|
|
76
|
+
visibleArea.bottom = Math.min(visibleArea.bottom, eleBottom);
|
|
77
|
+
});
|
|
78
|
+
return visibleArea;
|
|
96
79
|
}
|
|
97
80
|
exports.collectScroller = collectScroller;
|
|
98
81
|
exports.getAlignPopupClassName = getAlignPopupClassName;
|
package/dist/util.js
CHANGED
|
@@ -1,101 +1,80 @@
|
|
|
1
1
|
function isPointsEq(a1 = [], a2 = [], isAlignPoint) {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
}
|
|
5
|
-
return a1[0] === a2[0] && a1[1] === a2[1];
|
|
2
|
+
if (isAlignPoint) return a1[0] === a2[0];
|
|
3
|
+
return a1[0] === a2[0] && a1[1] === a2[1];
|
|
6
4
|
}
|
|
7
5
|
function getAlignPopupClassName(builtinPlacements, prefixCls, align, isAlignPoint) {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
}
|
|
16
|
-
return "";
|
|
6
|
+
const { points } = align;
|
|
7
|
+
const placements = Object.keys(builtinPlacements);
|
|
8
|
+
for (let i = 0; i < placements.length; i += 1) {
|
|
9
|
+
const placement = placements[i];
|
|
10
|
+
if (isPointsEq(builtinPlacements[placement]?.points, points, isAlignPoint)) return `${prefixCls}-placement-${placement}`;
|
|
11
|
+
}
|
|
12
|
+
return "";
|
|
17
13
|
}
|
|
18
14
|
function getWin(ele) {
|
|
19
|
-
|
|
15
|
+
return ele.ownerDocument.defaultView;
|
|
20
16
|
}
|
|
21
17
|
function collectScroller(ele) {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
18
|
+
const scrollerList = [];
|
|
19
|
+
let current = ele?.parentElement;
|
|
20
|
+
const scrollStyle = [
|
|
21
|
+
"hidden",
|
|
22
|
+
"scroll",
|
|
23
|
+
"clip",
|
|
24
|
+
"auto"
|
|
25
|
+
];
|
|
26
|
+
while (current) {
|
|
27
|
+
const { overflowX, overflowY, overflow } = getWin(current).getComputedStyle(current);
|
|
28
|
+
if ([
|
|
29
|
+
overflowX,
|
|
30
|
+
overflowY,
|
|
31
|
+
overflow
|
|
32
|
+
].some((o) => scrollStyle.includes(o))) scrollerList.push(current);
|
|
33
|
+
current = current.parentElement;
|
|
34
|
+
}
|
|
35
|
+
return scrollerList;
|
|
33
36
|
}
|
|
34
37
|
function toNum(num, defaultValue = 1) {
|
|
35
|
-
|
|
38
|
+
return Number.isNaN(num) ? defaultValue : num;
|
|
36
39
|
}
|
|
37
40
|
function getPxValue(val) {
|
|
38
|
-
|
|
41
|
+
return toNum(parseFloat(val), 0);
|
|
39
42
|
}
|
|
40
43
|
function getVisibleArea(initArea, scrollerList) {
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
const scaledBorderRightWidth = borderRightNum * scaleX;
|
|
77
|
-
let clipMarginWidth = 0;
|
|
78
|
-
let clipMarginHeight = 0;
|
|
79
|
-
if (overflow === "clip") {
|
|
80
|
-
const clipNum = getPxValue(overflowClipMargin);
|
|
81
|
-
clipMarginWidth = clipNum * scaleX;
|
|
82
|
-
clipMarginHeight = clipNum * scaleY;
|
|
83
|
-
}
|
|
84
|
-
const eleLeft = eleRect.x + scaledBorderLeftWidth - clipMarginWidth;
|
|
85
|
-
const eleTop = eleRect.y + scaledBorderTopWidth - clipMarginHeight;
|
|
86
|
-
const eleRight = eleLeft + eleRect.width + 2 * clipMarginWidth - scaledBorderLeftWidth - scaledBorderRightWidth - eleScrollWidth;
|
|
87
|
-
const eleBottom = eleTop + eleRect.height + 2 * clipMarginHeight - scaledBorderTopWidth - scaledBorderBottomWidth - eleScrollHeight;
|
|
88
|
-
visibleArea.left = Math.max(visibleArea.left, eleLeft);
|
|
89
|
-
visibleArea.top = Math.max(visibleArea.top, eleTop);
|
|
90
|
-
visibleArea.right = Math.min(visibleArea.right, eleRight);
|
|
91
|
-
visibleArea.bottom = Math.min(visibleArea.bottom, eleBottom);
|
|
92
|
-
});
|
|
93
|
-
return visibleArea;
|
|
44
|
+
const visibleArea = { ...initArea };
|
|
45
|
+
(scrollerList || []).forEach((ele) => {
|
|
46
|
+
if (ele instanceof HTMLBodyElement || ele instanceof HTMLHtmlElement) return;
|
|
47
|
+
const { overflow, overflowClipMargin, borderTopWidth, borderBottomWidth, borderLeftWidth, borderRightWidth } = getWin(ele).getComputedStyle(ele);
|
|
48
|
+
const eleRect = ele.getBoundingClientRect();
|
|
49
|
+
const { offsetHeight: eleOutHeight, clientHeight: eleInnerHeight, offsetWidth: eleOutWidth, clientWidth: eleInnerWidth } = ele;
|
|
50
|
+
const borderTopNum = getPxValue(borderTopWidth);
|
|
51
|
+
const borderBottomNum = getPxValue(borderBottomWidth);
|
|
52
|
+
const borderLeftNum = getPxValue(borderLeftWidth);
|
|
53
|
+
const borderRightNum = getPxValue(borderRightWidth);
|
|
54
|
+
const scaleX = toNum(Math.round(eleRect.width / eleOutWidth * 1e3) / 1e3);
|
|
55
|
+
const scaleY = toNum(Math.round(eleRect.height / eleOutHeight * 1e3) / 1e3);
|
|
56
|
+
const eleScrollWidth = (eleOutWidth - eleInnerWidth - borderLeftNum - borderRightNum) * scaleX;
|
|
57
|
+
const eleScrollHeight = (eleOutHeight - eleInnerHeight - borderTopNum - borderBottomNum) * scaleY;
|
|
58
|
+
const scaledBorderTopWidth = borderTopNum * scaleY;
|
|
59
|
+
const scaledBorderBottomWidth = borderBottomNum * scaleY;
|
|
60
|
+
const scaledBorderLeftWidth = borderLeftNum * scaleX;
|
|
61
|
+
const scaledBorderRightWidth = borderRightNum * scaleX;
|
|
62
|
+
let clipMarginWidth = 0;
|
|
63
|
+
let clipMarginHeight = 0;
|
|
64
|
+
if (overflow === "clip") {
|
|
65
|
+
const clipNum = getPxValue(overflowClipMargin);
|
|
66
|
+
clipMarginWidth = clipNum * scaleX;
|
|
67
|
+
clipMarginHeight = clipNum * scaleY;
|
|
68
|
+
}
|
|
69
|
+
const eleLeft = eleRect.x + scaledBorderLeftWidth - clipMarginWidth;
|
|
70
|
+
const eleTop = eleRect.y + scaledBorderTopWidth - clipMarginHeight;
|
|
71
|
+
const eleRight = eleLeft + eleRect.width + 2 * clipMarginWidth - scaledBorderLeftWidth - scaledBorderRightWidth - eleScrollWidth;
|
|
72
|
+
const eleBottom = eleTop + eleRect.height + 2 * clipMarginHeight - scaledBorderTopWidth - scaledBorderBottomWidth - eleScrollHeight;
|
|
73
|
+
visibleArea.left = Math.max(visibleArea.left, eleLeft);
|
|
74
|
+
visibleArea.top = Math.max(visibleArea.top, eleTop);
|
|
75
|
+
visibleArea.right = Math.min(visibleArea.right, eleRight);
|
|
76
|
+
visibleArea.bottom = Math.min(visibleArea.bottom, eleBottom);
|
|
77
|
+
});
|
|
78
|
+
return visibleArea;
|
|
94
79
|
}
|
|
95
|
-
export {
|
|
96
|
-
collectScroller,
|
|
97
|
-
getAlignPopupClassName,
|
|
98
|
-
getVisibleArea,
|
|
99
|
-
getWin,
|
|
100
|
-
toNum
|
|
101
|
-
};
|
|
80
|
+
export { collectScroller, getAlignPopupClassName, getVisibleArea, getWin, toNum };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@v-c/trigger",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.14",
|
|
5
5
|
"description": "",
|
|
6
6
|
"publishConfig": {
|
|
7
7
|
"access": "public"
|
|
@@ -29,8 +29,8 @@
|
|
|
29
29
|
"vue": "^3.0.0"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@v-c/portal": "0.0.4",
|
|
33
32
|
"@v-c/resize-observer": "0.0.3",
|
|
33
|
+
"@v-c/portal": "0.0.5",
|
|
34
34
|
"@v-c/util": "0.0.13"
|
|
35
35
|
},
|
|
36
36
|
"scripts": {
|