@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.
- 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 +591 -694
- package/dist/index.js +580 -690
- 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 +3 -3
package/dist/hooks/useDelay.cjs
CHANGED
|
@@ -1,27 +1,24 @@
|
|
|
1
|
-
"
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
2
|
+
const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
|
|
3
|
+
let vue = require("vue");
|
|
4
4
|
function useDelay() {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
clearDelay();
|
|
24
|
-
});
|
|
25
|
-
return delayInvoke;
|
|
5
|
+
const delayRef = (0, vue.ref)(null);
|
|
6
|
+
const clearDelay = () => {
|
|
7
|
+
if (delayRef.value) {
|
|
8
|
+
clearTimeout(delayRef.value);
|
|
9
|
+
delayRef.value = null;
|
|
10
|
+
}
|
|
11
|
+
};
|
|
12
|
+
const delayInvoke = (callback, delay) => {
|
|
13
|
+
clearDelay();
|
|
14
|
+
if (delay === 0) callback();
|
|
15
|
+
else delayRef.value = setTimeout(() => {
|
|
16
|
+
callback();
|
|
17
|
+
}, delay * 1e3);
|
|
18
|
+
};
|
|
19
|
+
(0, vue.onBeforeUnmount)(() => {
|
|
20
|
+
clearDelay();
|
|
21
|
+
});
|
|
22
|
+
return delayInvoke;
|
|
26
23
|
}
|
|
27
24
|
exports.default = useDelay;
|
package/dist/hooks/useDelay.js
CHANGED
|
@@ -1,27 +1,22 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { onBeforeUnmount, ref } from "vue";
|
|
2
2
|
function useDelay() {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
clearDelay();
|
|
22
|
-
});
|
|
23
|
-
return delayInvoke;
|
|
3
|
+
const delayRef = ref(null);
|
|
4
|
+
const clearDelay = () => {
|
|
5
|
+
if (delayRef.value) {
|
|
6
|
+
clearTimeout(delayRef.value);
|
|
7
|
+
delayRef.value = null;
|
|
8
|
+
}
|
|
9
|
+
};
|
|
10
|
+
const delayInvoke = (callback, delay) => {
|
|
11
|
+
clearDelay();
|
|
12
|
+
if (delay === 0) callback();
|
|
13
|
+
else delayRef.value = setTimeout(() => {
|
|
14
|
+
callback();
|
|
15
|
+
}, delay * 1e3);
|
|
16
|
+
};
|
|
17
|
+
onBeforeUnmount(() => {
|
|
18
|
+
clearDelay();
|
|
19
|
+
});
|
|
20
|
+
return delayInvoke;
|
|
24
21
|
}
|
|
25
|
-
export {
|
|
26
|
-
useDelay as default
|
|
27
|
-
};
|
|
22
|
+
export { useDelay as default };
|
|
@@ -1,40 +1,37 @@
|
|
|
1
|
-
"
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
2
|
+
const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
|
|
3
|
+
let vue = require("vue");
|
|
4
4
|
function useOffsetStyle(isMobile, ready, open, align, offsetR, offsetB, offsetX, offsetY) {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
}
|
|
37
|
-
return offsetStyle;
|
|
38
|
-
});
|
|
5
|
+
const AUTO = "auto";
|
|
6
|
+
return (0, vue.computed)(() => {
|
|
7
|
+
const offsetStyle = isMobile.value ? {} : {
|
|
8
|
+
left: "-1000vw",
|
|
9
|
+
top: "-1000vh",
|
|
10
|
+
right: AUTO,
|
|
11
|
+
bottom: AUTO
|
|
12
|
+
};
|
|
13
|
+
if (!(offsetX.value > 0 || offsetY.value > 0 || offsetR.value > 0 || offsetB.value > 0)) return {};
|
|
14
|
+
if (!isMobile.value && (ready.value || !open.value)) {
|
|
15
|
+
const { points } = align.value ?? {};
|
|
16
|
+
const dynamicInset = align.value?.dynamicInset || align.value?._experimental?.dynamicInset;
|
|
17
|
+
const alignRight = dynamicInset && points?.[0]?.[1] === "r";
|
|
18
|
+
const alignBottom = dynamicInset && points?.[0]?.[0] === "b";
|
|
19
|
+
if (alignRight) {
|
|
20
|
+
offsetStyle.right = `${offsetR.value}px`;
|
|
21
|
+
offsetStyle.left = AUTO;
|
|
22
|
+
} else {
|
|
23
|
+
offsetStyle.left = `${offsetX.value}px`;
|
|
24
|
+
offsetStyle.right = AUTO;
|
|
25
|
+
}
|
|
26
|
+
if (alignBottom) {
|
|
27
|
+
offsetStyle.bottom = `${offsetB.value}px`;
|
|
28
|
+
offsetStyle.top = AUTO;
|
|
29
|
+
} else {
|
|
30
|
+
offsetStyle.top = `${offsetY.value}px`;
|
|
31
|
+
offsetStyle.bottom = AUTO;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
return offsetStyle;
|
|
35
|
+
});
|
|
39
36
|
}
|
|
40
37
|
exports.default = useOffsetStyle;
|
|
@@ -1,40 +1,35 @@
|
|
|
1
1
|
import { computed } from "vue";
|
|
2
2
|
function useOffsetStyle(isMobile, ready, open, align, offsetR, offsetB, offsetX, offsetY) {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
}
|
|
35
|
-
return offsetStyle;
|
|
36
|
-
});
|
|
3
|
+
const AUTO = "auto";
|
|
4
|
+
return computed(() => {
|
|
5
|
+
const offsetStyle = isMobile.value ? {} : {
|
|
6
|
+
left: "-1000vw",
|
|
7
|
+
top: "-1000vh",
|
|
8
|
+
right: AUTO,
|
|
9
|
+
bottom: AUTO
|
|
10
|
+
};
|
|
11
|
+
if (!(offsetX.value > 0 || offsetY.value > 0 || offsetR.value > 0 || offsetB.value > 0)) return {};
|
|
12
|
+
if (!isMobile.value && (ready.value || !open.value)) {
|
|
13
|
+
const { points } = align.value ?? {};
|
|
14
|
+
const dynamicInset = align.value?.dynamicInset || align.value?._experimental?.dynamicInset;
|
|
15
|
+
const alignRight = dynamicInset && points?.[0]?.[1] === "r";
|
|
16
|
+
const alignBottom = dynamicInset && points?.[0]?.[0] === "b";
|
|
17
|
+
if (alignRight) {
|
|
18
|
+
offsetStyle.right = `${offsetR.value}px`;
|
|
19
|
+
offsetStyle.left = AUTO;
|
|
20
|
+
} else {
|
|
21
|
+
offsetStyle.left = `${offsetX.value}px`;
|
|
22
|
+
offsetStyle.right = AUTO;
|
|
23
|
+
}
|
|
24
|
+
if (alignBottom) {
|
|
25
|
+
offsetStyle.bottom = `${offsetB.value}px`;
|
|
26
|
+
offsetStyle.top = AUTO;
|
|
27
|
+
} else {
|
|
28
|
+
offsetStyle.top = `${offsetY.value}px`;
|
|
29
|
+
offsetStyle.bottom = AUTO;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
return offsetStyle;
|
|
33
|
+
});
|
|
37
34
|
}
|
|
38
|
-
export {
|
|
39
|
-
useOffsetStyle as default
|
|
40
|
-
};
|
|
35
|
+
export { useOffsetStyle as default };
|
package/dist/hooks/useWatch.cjs
CHANGED
|
@@ -1,37 +1,41 @@
|
|
|
1
|
-
"
|
|
2
|
-
|
|
3
|
-
const
|
|
4
|
-
|
|
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
5
|
function useWatch(open, target, popup, onAlign, onScroll) {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
6
|
+
(0, vue.watch)([
|
|
7
|
+
open,
|
|
8
|
+
target,
|
|
9
|
+
popup
|
|
10
|
+
], async (_n, _o, onCleanup) => {
|
|
11
|
+
await (0, vue.nextTick)();
|
|
12
|
+
if (open.value && target.value && popup.value) {
|
|
13
|
+
const targetElement = target.value;
|
|
14
|
+
const popupElement = popup.value;
|
|
15
|
+
const targetScrollList = require_util.collectScroller(targetElement);
|
|
16
|
+
const popupScrollList = require_util.collectScroller(popupElement);
|
|
17
|
+
const win = require_util.getWin(popupElement);
|
|
18
|
+
const mergedList = new Set([
|
|
19
|
+
win,
|
|
20
|
+
...targetScrollList,
|
|
21
|
+
...popupScrollList
|
|
22
|
+
]);
|
|
23
|
+
function notifyScroll() {
|
|
24
|
+
onAlign();
|
|
25
|
+
onScroll();
|
|
26
|
+
}
|
|
27
|
+
mergedList.forEach((scroller) => {
|
|
28
|
+
scroller.addEventListener("scroll", notifyScroll, { passive: true });
|
|
29
|
+
});
|
|
30
|
+
win.addEventListener("resize", notifyScroll, { passive: true });
|
|
31
|
+
onAlign();
|
|
32
|
+
onCleanup(() => {
|
|
33
|
+
mergedList.forEach((scroller) => {
|
|
34
|
+
scroller.removeEventListener("scroll", notifyScroll);
|
|
35
|
+
win.removeEventListener("resize", notifyScroll);
|
|
36
|
+
});
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
});
|
|
36
40
|
}
|
|
37
41
|
exports.default = useWatch;
|
package/dist/hooks/useWatch.js
CHANGED
|
@@ -1,37 +1,39 @@
|
|
|
1
|
-
import { watch, nextTick } from "vue";
|
|
2
1
|
import { collectScroller, getWin } from "../util.js";
|
|
2
|
+
import { nextTick, watch } from "vue";
|
|
3
3
|
function useWatch(open, target, popup, onAlign, onScroll) {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
4
|
+
watch([
|
|
5
|
+
open,
|
|
6
|
+
target,
|
|
7
|
+
popup
|
|
8
|
+
], async (_n, _o, onCleanup) => {
|
|
9
|
+
await nextTick();
|
|
10
|
+
if (open.value && target.value && popup.value) {
|
|
11
|
+
const targetElement = target.value;
|
|
12
|
+
const popupElement = popup.value;
|
|
13
|
+
const targetScrollList = collectScroller(targetElement);
|
|
14
|
+
const popupScrollList = collectScroller(popupElement);
|
|
15
|
+
const win = getWin(popupElement);
|
|
16
|
+
const mergedList = new Set([
|
|
17
|
+
win,
|
|
18
|
+
...targetScrollList,
|
|
19
|
+
...popupScrollList
|
|
20
|
+
]);
|
|
21
|
+
function notifyScroll() {
|
|
22
|
+
onAlign();
|
|
23
|
+
onScroll();
|
|
24
|
+
}
|
|
25
|
+
mergedList.forEach((scroller) => {
|
|
26
|
+
scroller.addEventListener("scroll", notifyScroll, { passive: true });
|
|
27
|
+
});
|
|
28
|
+
win.addEventListener("resize", notifyScroll, { passive: true });
|
|
29
|
+
onAlign();
|
|
30
|
+
onCleanup(() => {
|
|
31
|
+
mergedList.forEach((scroller) => {
|
|
32
|
+
scroller.removeEventListener("scroll", notifyScroll);
|
|
33
|
+
win.removeEventListener("resize", notifyScroll);
|
|
34
|
+
});
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
});
|
|
34
38
|
}
|
|
35
|
-
export {
|
|
36
|
-
useWatch as default
|
|
37
|
-
};
|
|
39
|
+
export { useWatch as default };
|
|
@@ -1,67 +1,57 @@
|
|
|
1
|
-
"
|
|
2
|
-
|
|
3
|
-
const
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
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 = require("@v-c/util");
|
|
6
|
+
let __v_c_util_dist_Dom_shadow = require("@v-c/util/dist/Dom/shadow");
|
|
7
7
|
function useWinClick(open, clickToHide, targetEle, popupEle, mask, maskClosable, inPopupOrChild, triggerOpen) {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
);
|
|
57
|
-
}
|
|
58
|
-
});
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
);
|
|
62
|
-
function onPopupPointerDown() {
|
|
63
|
-
popupPointerDownRef.value = true;
|
|
64
|
-
}
|
|
65
|
-
return onPopupPointerDown;
|
|
8
|
+
const openRef = (0, vue.shallowRef)(open.value);
|
|
9
|
+
(0, vue.watchEffect)(() => {
|
|
10
|
+
openRef.value = open.value;
|
|
11
|
+
});
|
|
12
|
+
const popupPointerDownRef = (0, vue.shallowRef)(false);
|
|
13
|
+
(0, vue.watch)([
|
|
14
|
+
clickToHide,
|
|
15
|
+
targetEle,
|
|
16
|
+
popupEle,
|
|
17
|
+
mask,
|
|
18
|
+
maskClosable
|
|
19
|
+
], ([clickToHide$1, targetEle$1, popupEle$1, mask$1, maskClosable$1], _o, onCleanup) => {
|
|
20
|
+
if (clickToHide$1 && popupEle$1 && (!mask$1 || maskClosable$1)) {
|
|
21
|
+
const onPointerDown = () => {
|
|
22
|
+
popupPointerDownRef.value = false;
|
|
23
|
+
};
|
|
24
|
+
const onTriggerClose = (e) => {
|
|
25
|
+
if (openRef.value && !inPopupOrChild(e.composedPath?.()?.[0] || e.target) && !popupPointerDownRef.value) triggerOpen(false);
|
|
26
|
+
};
|
|
27
|
+
const win = require_util.getWin(popupEle$1);
|
|
28
|
+
win.addEventListener("pointerdown", onPointerDown, true);
|
|
29
|
+
win.addEventListener("mousedown", onTriggerClose, true);
|
|
30
|
+
win.addEventListener("contextmenu", onTriggerClose, true);
|
|
31
|
+
const targetShadowRoot = (0, __v_c_util_dist_Dom_shadow.getShadowRoot)(targetEle$1);
|
|
32
|
+
if (targetShadowRoot) {
|
|
33
|
+
targetShadowRoot.addEventListener("mousedown", onTriggerClose, true);
|
|
34
|
+
targetShadowRoot.addEventListener("contextmenu", onTriggerClose, true);
|
|
35
|
+
}
|
|
36
|
+
if (process.env.NODE_ENV !== "production" && targetEle$1) {
|
|
37
|
+
const targetRoot = targetEle$1.getRootNode?.();
|
|
38
|
+
const popupRoot = popupEle$1.getRootNode?.();
|
|
39
|
+
(0, __v_c_util.warning)(targetRoot === popupRoot, `trigger element and popup element should in same shadow root.`);
|
|
40
|
+
}
|
|
41
|
+
onCleanup(() => {
|
|
42
|
+
win.removeEventListener("pointerdown", onPointerDown, true);
|
|
43
|
+
win.removeEventListener("mousedown", onTriggerClose, true);
|
|
44
|
+
win.removeEventListener("contextmenu", onTriggerClose, true);
|
|
45
|
+
if (targetShadowRoot) {
|
|
46
|
+
targetShadowRoot.removeEventListener("mousedown", onTriggerClose, true);
|
|
47
|
+
targetShadowRoot.removeEventListener("contextmenu", onTriggerClose, true);
|
|
48
|
+
}
|
|
49
|
+
});
|
|
50
|
+
}
|
|
51
|
+
});
|
|
52
|
+
function onPopupPointerDown() {
|
|
53
|
+
popupPointerDownRef.value = true;
|
|
54
|
+
}
|
|
55
|
+
return onPopupPointerDown;
|
|
66
56
|
}
|
|
67
57
|
exports.default = useWinClick;
|
|
@@ -1,67 +1,55 @@
|
|
|
1
|
+
import { getWin } from "../util.js";
|
|
2
|
+
import { shallowRef, watch, watchEffect } from "vue";
|
|
1
3
|
import { warning } from "@v-c/util";
|
|
2
4
|
import { getShadowRoot } from "@v-c/util/dist/Dom/shadow";
|
|
3
|
-
import { shallowRef, watchEffect, watch } from "vue";
|
|
4
|
-
import { getWin } from "../util.js";
|
|
5
5
|
function useWinClick(open, clickToHide, targetEle, popupEle, mask, maskClosable, inPopupOrChild, triggerOpen) {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
);
|
|
55
|
-
}
|
|
56
|
-
});
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
);
|
|
60
|
-
function onPopupPointerDown() {
|
|
61
|
-
popupPointerDownRef.value = true;
|
|
62
|
-
}
|
|
63
|
-
return onPopupPointerDown;
|
|
6
|
+
const openRef = shallowRef(open.value);
|
|
7
|
+
watchEffect(() => {
|
|
8
|
+
openRef.value = open.value;
|
|
9
|
+
});
|
|
10
|
+
const popupPointerDownRef = shallowRef(false);
|
|
11
|
+
watch([
|
|
12
|
+
clickToHide,
|
|
13
|
+
targetEle,
|
|
14
|
+
popupEle,
|
|
15
|
+
mask,
|
|
16
|
+
maskClosable
|
|
17
|
+
], ([clickToHide$1, targetEle$1, popupEle$1, mask$1, maskClosable$1], _o, onCleanup) => {
|
|
18
|
+
if (clickToHide$1 && popupEle$1 && (!mask$1 || maskClosable$1)) {
|
|
19
|
+
const onPointerDown = () => {
|
|
20
|
+
popupPointerDownRef.value = false;
|
|
21
|
+
};
|
|
22
|
+
const onTriggerClose = (e) => {
|
|
23
|
+
if (openRef.value && !inPopupOrChild(e.composedPath?.()?.[0] || e.target) && !popupPointerDownRef.value) triggerOpen(false);
|
|
24
|
+
};
|
|
25
|
+
const win = getWin(popupEle$1);
|
|
26
|
+
win.addEventListener("pointerdown", onPointerDown, true);
|
|
27
|
+
win.addEventListener("mousedown", onTriggerClose, true);
|
|
28
|
+
win.addEventListener("contextmenu", onTriggerClose, true);
|
|
29
|
+
const targetShadowRoot = getShadowRoot(targetEle$1);
|
|
30
|
+
if (targetShadowRoot) {
|
|
31
|
+
targetShadowRoot.addEventListener("mousedown", onTriggerClose, true);
|
|
32
|
+
targetShadowRoot.addEventListener("contextmenu", onTriggerClose, true);
|
|
33
|
+
}
|
|
34
|
+
if (process.env.NODE_ENV !== "production" && targetEle$1) {
|
|
35
|
+
const targetRoot = targetEle$1.getRootNode?.();
|
|
36
|
+
const popupRoot = popupEle$1.getRootNode?.();
|
|
37
|
+
warning(targetRoot === popupRoot, `trigger element and popup element should in same shadow root.`);
|
|
38
|
+
}
|
|
39
|
+
onCleanup(() => {
|
|
40
|
+
win.removeEventListener("pointerdown", onPointerDown, true);
|
|
41
|
+
win.removeEventListener("mousedown", onTriggerClose, true);
|
|
42
|
+
win.removeEventListener("contextmenu", onTriggerClose, true);
|
|
43
|
+
if (targetShadowRoot) {
|
|
44
|
+
targetShadowRoot.removeEventListener("mousedown", onTriggerClose, true);
|
|
45
|
+
targetShadowRoot.removeEventListener("contextmenu", onTriggerClose, true);
|
|
46
|
+
}
|
|
47
|
+
});
|
|
48
|
+
}
|
|
49
|
+
});
|
|
50
|
+
function onPopupPointerDown() {
|
|
51
|
+
popupPointerDownRef.value = true;
|
|
52
|
+
}
|
|
53
|
+
return onPopupPointerDown;
|
|
64
54
|
}
|
|
65
|
-
export {
|
|
66
|
-
useWinClick as default
|
|
67
|
-
};
|
|
55
|
+
export { useWinClick as default };
|