@v-c/trigger 1.0.6 → 1.0.7
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/index.d.ts +1 -1
- package/package.json +3 -3
- package/dist/Popup/Arrow.cjs +0 -63
- package/dist/Popup/Mask.cjs +0 -58
- package/dist/Popup/PopupContent.cjs +0 -27
- package/dist/Popup/index.cjs +0 -318
- package/dist/UniqueProvider/UniqueContainer.cjs +0 -134
- package/dist/UniqueProvider/index.cjs +0 -164
- package/dist/UniqueProvider/useTargetState.cjs +0 -44
- package/dist/_virtual/rolldown_runtime.cjs +0 -21
- package/dist/context.cjs +0 -28
- package/dist/hooks/useAction.cjs +0 -29
- package/dist/hooks/useAlign.cjs +0 -378
- package/dist/hooks/useDelay.cjs +0 -27
- package/dist/hooks/useOffsetStyle.cjs +0 -39
- package/dist/hooks/useWatch.cjs +0 -44
- package/dist/hooks/useWinClick.cjs +0 -60
- package/dist/index.cjs +0 -590
- package/dist/interface.cjs +0 -1
- package/dist/util.cjs +0 -86
|
@@ -1,164 +0,0 @@
|
|
|
1
|
-
Object.defineProperties(exports, {
|
|
2
|
-
__esModule: { value: true },
|
|
3
|
-
[Symbol.toStringTag]: { value: "Module" }
|
|
4
|
-
});
|
|
5
|
-
const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
|
|
6
|
-
const require_context = require("../context.cjs");
|
|
7
|
-
const require_util = require("../util.cjs");
|
|
8
|
-
const require_useAlign = require("../hooks/useAlign.cjs");
|
|
9
|
-
const require_useDelay = require("../hooks/useDelay.cjs");
|
|
10
|
-
const require_index = require("../Popup/index.cjs");
|
|
11
|
-
const require_UniqueContainer = require("./UniqueContainer.cjs");
|
|
12
|
-
const require_useTargetState = require("./useTargetState.cjs");
|
|
13
|
-
let vue = require("vue");
|
|
14
|
-
let _v_c_portal = require("@v-c/portal");
|
|
15
|
-
_v_c_portal = require_rolldown_runtime.__toESM(_v_c_portal);
|
|
16
|
-
let _v_c_util = require("@v-c/util");
|
|
17
|
-
let _v_c_util_dist_Dom_findDOMNode = require("@v-c/util/dist/Dom/findDOMNode");
|
|
18
|
-
var UniqueProvider = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots }) => {
|
|
19
|
-
const [trigger, open, options, onTargetVisibleChanged] = require_useTargetState.default();
|
|
20
|
-
const mergedOptions = (0, vue.computed)(() => {
|
|
21
|
-
if (!options.value || !props.postTriggerProps) return options.value;
|
|
22
|
-
return props.postTriggerProps(options.value);
|
|
23
|
-
});
|
|
24
|
-
const popupEle = (0, vue.shallowRef)(null);
|
|
25
|
-
const popupSize = (0, vue.ref)(null);
|
|
26
|
-
const externalPopupRef = (0, vue.shallowRef)(null);
|
|
27
|
-
const resolveToElement = (node) => {
|
|
28
|
-
if (!node) return null;
|
|
29
|
-
if ((0, _v_c_util_dist_Dom_findDOMNode.isDOM)(node)) return node;
|
|
30
|
-
const exposed = node;
|
|
31
|
-
if ((0, _v_c_util_dist_Dom_findDOMNode.isDOM)(exposed?.$el)) return exposed.$el;
|
|
32
|
-
const nativeEl = exposed?.nativeElement;
|
|
33
|
-
if ((0, _v_c_util_dist_Dom_findDOMNode.isDOM)(nativeEl?.value)) return nativeEl.value;
|
|
34
|
-
if ((0, _v_c_util_dist_Dom_findDOMNode.isDOM)(nativeEl)) return nativeEl;
|
|
35
|
-
if (typeof exposed?.getElement === "function") {
|
|
36
|
-
const el = exposed.getElement();
|
|
37
|
-
if ((0, _v_c_util_dist_Dom_findDOMNode.isDOM)(el)) return el;
|
|
38
|
-
}
|
|
39
|
-
return null;
|
|
40
|
-
};
|
|
41
|
-
const setPopupRef = (node) => {
|
|
42
|
-
const element = resolveToElement(node);
|
|
43
|
-
if (!element) return;
|
|
44
|
-
externalPopupRef.value = element;
|
|
45
|
-
if (popupEle.value !== element) popupEle.value = element;
|
|
46
|
-
};
|
|
47
|
-
const isOpenRef = (0, vue.shallowRef)();
|
|
48
|
-
const delayInvoke = require_useDelay.default();
|
|
49
|
-
const show = (showOptions, isOpen) => {
|
|
50
|
-
isOpenRef.value = isOpen;
|
|
51
|
-
delayInvoke(() => {
|
|
52
|
-
trigger(showOptions);
|
|
53
|
-
}, showOptions.delay);
|
|
54
|
-
};
|
|
55
|
-
const hide = (delay) => {
|
|
56
|
-
delayInvoke(() => {
|
|
57
|
-
if (isOpenRef.value?.()) return;
|
|
58
|
-
trigger(false);
|
|
59
|
-
}, delay);
|
|
60
|
-
};
|
|
61
|
-
const [ready, offsetX, offsetY, offsetR, offsetB, arrowX, arrowY, , , alignInfo, onAlign] = require_useAlign.default(open, popupEle, (0, vue.computed)(() => mergedOptions.value?.target), (0, vue.computed)(() => mergedOptions.value?.popupPlacement), (0, vue.computed)(() => mergedOptions.value?.builtinPlacements || {}), (0, vue.computed)(() => mergedOptions.value?.popupAlign), void 0, (0, vue.ref)(false));
|
|
62
|
-
const inMotion = (0, vue.shallowRef)(false);
|
|
63
|
-
(0, vue.watch)(open, () => {
|
|
64
|
-
if (open.value) inMotion.value = true;
|
|
65
|
-
});
|
|
66
|
-
const triggerAlign = () => {
|
|
67
|
-
if (!inMotion.value) onAlign();
|
|
68
|
-
};
|
|
69
|
-
const onVisibleChanged = (visible) => {
|
|
70
|
-
onTargetVisibleChanged(visible);
|
|
71
|
-
inMotion.value = false;
|
|
72
|
-
onAlign();
|
|
73
|
-
};
|
|
74
|
-
const alignedClassName = (0, vue.computed)(() => {
|
|
75
|
-
if (!mergedOptions.value) return "";
|
|
76
|
-
return (0, _v_c_util.classNames)(require_util.getAlignPopupClassName(mergedOptions.value?.builtinPlacements || {}, mergedOptions.value.prefixCls || "", alignInfo.value, false), mergedOptions.value?.getPopupClassNameFromAlign?.(alignInfo.value));
|
|
77
|
-
});
|
|
78
|
-
const contextValue = {
|
|
79
|
-
show,
|
|
80
|
-
hide
|
|
81
|
-
};
|
|
82
|
-
(0, vue.watch)(() => mergedOptions.value?.target, () => {
|
|
83
|
-
onAlign();
|
|
84
|
-
});
|
|
85
|
-
const onPrepare = () => {
|
|
86
|
-
onAlign();
|
|
87
|
-
return Promise.resolve();
|
|
88
|
-
};
|
|
89
|
-
const subPopupElements = (0, vue.ref)({});
|
|
90
|
-
const parentContext = require_context.useTriggerContext();
|
|
91
|
-
const triggerContextValue = (0, vue.computed)(() => {
|
|
92
|
-
return { registerSubPopup: (id, subPopupEle) => {
|
|
93
|
-
if (subPopupEle) subPopupElements.value[id] = subPopupEle;
|
|
94
|
-
else delete subPopupElements.value[id];
|
|
95
|
-
parentContext?.value?.registerSubPopup(id, subPopupEle);
|
|
96
|
-
} };
|
|
97
|
-
});
|
|
98
|
-
return () => {
|
|
99
|
-
const prefixCls = mergedOptions?.value?.prefixCls;
|
|
100
|
-
return (0, vue.createVNode)(require_context.UniqueContextProvider, contextValue, { default: () => [slots?.default?.(), !!mergedOptions.value && (0, vue.createVNode)(require_context.TriggerContextProvider, triggerContextValue.value, { default: () => [(0, vue.createVNode)(require_index.default, {
|
|
101
|
-
"ref": setPopupRef,
|
|
102
|
-
"portal": _v_c_portal.default,
|
|
103
|
-
"prefixCls": prefixCls,
|
|
104
|
-
"popup": mergedOptions.value?.popup,
|
|
105
|
-
"onEsc": mergedOptions.value?.onEsc,
|
|
106
|
-
"className": (0, _v_c_util.classNames)(mergedOptions.value?.popupClassName, alignedClassName.value, `${prefixCls}-unique-controlled`),
|
|
107
|
-
"style": mergedOptions.value?.popupStyle,
|
|
108
|
-
"target": mergedOptions.value?.target,
|
|
109
|
-
"open": open.value,
|
|
110
|
-
"keepDom": true,
|
|
111
|
-
"fresh": true,
|
|
112
|
-
"autoDestroy": false,
|
|
113
|
-
"onVisibleChanged": onVisibleChanged,
|
|
114
|
-
"ready": ready.value,
|
|
115
|
-
"offsetX": offsetX.value,
|
|
116
|
-
"offsetY": offsetY.value,
|
|
117
|
-
"offsetR": offsetR.value,
|
|
118
|
-
"offsetB": offsetB.value,
|
|
119
|
-
"onAlign": triggerAlign,
|
|
120
|
-
"onPrepare": onPrepare,
|
|
121
|
-
"onResize": (size) => {
|
|
122
|
-
popupSize.value = {
|
|
123
|
-
width: size.offsetWidth,
|
|
124
|
-
height: size.offsetHeight
|
|
125
|
-
};
|
|
126
|
-
},
|
|
127
|
-
"arrowPos": {
|
|
128
|
-
x: arrowX.value,
|
|
129
|
-
y: arrowY.value
|
|
130
|
-
},
|
|
131
|
-
"align": alignInfo.value,
|
|
132
|
-
"zIndex": mergedOptions.value?.zIndex,
|
|
133
|
-
"mask": mergedOptions.value?.mask,
|
|
134
|
-
"arrow": mergedOptions.value?.arrow,
|
|
135
|
-
"motion": mergedOptions.value?.popupMotion,
|
|
136
|
-
"maskMotion": mergedOptions.value?.maskMotion,
|
|
137
|
-
"getPopupContainer": mergedOptions.value.getPopupContainer
|
|
138
|
-
}, { default: () => [(0, vue.createVNode)(require_UniqueContainer.default, {
|
|
139
|
-
"prefixCls": prefixCls,
|
|
140
|
-
"isMobile": false,
|
|
141
|
-
"ready": ready.value,
|
|
142
|
-
"open": open.value,
|
|
143
|
-
"align": alignInfo.value,
|
|
144
|
-
"offsetX": offsetX.value,
|
|
145
|
-
"offsetY": offsetY.value,
|
|
146
|
-
"offsetR": offsetR.value,
|
|
147
|
-
"offsetB": offsetB.value,
|
|
148
|
-
"arrowPos": {
|
|
149
|
-
x: arrowX.value,
|
|
150
|
-
y: arrowY.value
|
|
151
|
-
},
|
|
152
|
-
"popupSize": popupSize.value,
|
|
153
|
-
"motion": mergedOptions.value?.popupMotion,
|
|
154
|
-
"uniqueContainerClassName": (0, _v_c_util.classNames)(mergedOptions.value?.uniqueContainerClassName, alignedClassName.value),
|
|
155
|
-
"uniqueContainerStyle": mergedOptions?.value?.uniqueContainerStyle
|
|
156
|
-
}, null)] })] })] });
|
|
157
|
-
};
|
|
158
|
-
}, { props: { postTriggerProps: {
|
|
159
|
-
type: Function,
|
|
160
|
-
required: false,
|
|
161
|
-
default: void 0
|
|
162
|
-
} } });
|
|
163
|
-
var UniqueProvider_default = UniqueProvider;
|
|
164
|
-
exports.default = UniqueProvider_default;
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
Object.defineProperties(exports, {
|
|
2
|
-
__esModule: { value: true },
|
|
3
|
-
[Symbol.toStringTag]: { value: "Module" }
|
|
4
|
-
});
|
|
5
|
-
const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
|
|
6
|
-
let vue = require("vue");
|
|
7
|
-
function useTargetState() {
|
|
8
|
-
const options = (0, vue.ref)();
|
|
9
|
-
const open = (0, vue.ref)(false);
|
|
10
|
-
const isAnimating = (0, vue.ref)(false);
|
|
11
|
-
const pendingOptionsRef = (0, vue.ref)();
|
|
12
|
-
const trigger = (nextOptions) => {
|
|
13
|
-
const wasOpen = open.value;
|
|
14
|
-
if (nextOptions === false) {
|
|
15
|
-
pendingOptionsRef.value = null;
|
|
16
|
-
open.value = false;
|
|
17
|
-
} else if (isAnimating.value && wasOpen) pendingOptionsRef.value = nextOptions;
|
|
18
|
-
else {
|
|
19
|
-
open.value = true;
|
|
20
|
-
options.value = nextOptions;
|
|
21
|
-
pendingOptionsRef.value = null;
|
|
22
|
-
if (!wasOpen) isAnimating.value = true;
|
|
23
|
-
}
|
|
24
|
-
};
|
|
25
|
-
const onVisibleChanged = (visible) => {
|
|
26
|
-
if (visible) {
|
|
27
|
-
isAnimating.value = false;
|
|
28
|
-
if (pendingOptionsRef.value) {
|
|
29
|
-
options.value = pendingOptionsRef.value;
|
|
30
|
-
pendingOptionsRef.value = null;
|
|
31
|
-
}
|
|
32
|
-
} else {
|
|
33
|
-
isAnimating.value = false;
|
|
34
|
-
pendingOptionsRef.value = null;
|
|
35
|
-
}
|
|
36
|
-
};
|
|
37
|
-
return [
|
|
38
|
-
trigger,
|
|
39
|
-
open,
|
|
40
|
-
options,
|
|
41
|
-
onVisibleChanged
|
|
42
|
-
];
|
|
43
|
-
}
|
|
44
|
-
exports.default = useTargetState;
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
var __create = Object.create;
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __copyProps = (to, from, except, desc) => {
|
|
8
|
-
if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
|
|
9
|
-
key = keys[i];
|
|
10
|
-
if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
|
|
11
|
-
get: ((k) => from[k]).bind(null, key),
|
|
12
|
-
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
|
|
13
|
-
});
|
|
14
|
-
}
|
|
15
|
-
return to;
|
|
16
|
-
};
|
|
17
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
|
|
18
|
-
value: mod,
|
|
19
|
-
enumerable: true
|
|
20
|
-
}) : target, mod));
|
|
21
|
-
exports.__toESM = __toESM;
|
package/dist/context.cjs
DELETED
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
|
-
const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
|
|
3
|
-
let vue = require("vue");
|
|
4
|
-
var TriggerContextKey = Symbol("TriggerContextKey");
|
|
5
|
-
function useTriggerContext() {
|
|
6
|
-
return (0, vue.inject)(TriggerContextKey, void 0);
|
|
7
|
-
}
|
|
8
|
-
const TriggerContextProvider = (0, vue.defineComponent)((props, { slots }) => {
|
|
9
|
-
(0, vue.provide)(TriggerContextKey, (0, vue.computed)(() => props));
|
|
10
|
-
return () => {
|
|
11
|
-
return slots?.default?.();
|
|
12
|
-
};
|
|
13
|
-
}, { props: ["registerSubPopup"] });
|
|
14
|
-
const UniqueContextKey = Symbol("UniqueContextKey");
|
|
15
|
-
function useUniqueContext() {
|
|
16
|
-
return (0, vue.inject)(UniqueContextKey, void 0);
|
|
17
|
-
}
|
|
18
|
-
const UniqueContextProvider = (0, vue.defineComponent)((props, { slots }) => {
|
|
19
|
-
(0, vue.provide)(UniqueContextKey, props);
|
|
20
|
-
return () => {
|
|
21
|
-
return slots?.default?.();
|
|
22
|
-
};
|
|
23
|
-
}, { props: ["show", "hide"] });
|
|
24
|
-
exports.TriggerContextProvider = TriggerContextProvider;
|
|
25
|
-
exports.UniqueContextKey = UniqueContextKey;
|
|
26
|
-
exports.UniqueContextProvider = UniqueContextProvider;
|
|
27
|
-
exports.useTriggerContext = useTriggerContext;
|
|
28
|
-
exports.useUniqueContext = useUniqueContext;
|
package/dist/hooks/useAction.cjs
DELETED
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
Object.defineProperties(exports, {
|
|
2
|
-
__esModule: { value: true },
|
|
3
|
-
[Symbol.toStringTag]: { value: "Module" }
|
|
4
|
-
});
|
|
5
|
-
const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
|
|
6
|
-
let vue = require("vue");
|
|
7
|
-
function toArray(val) {
|
|
8
|
-
return val ? Array.isArray(val) ? val : [val] : [];
|
|
9
|
-
}
|
|
10
|
-
function normalizeAction(action) {
|
|
11
|
-
if (typeof action === "string") return action.toLowerCase();
|
|
12
|
-
return action;
|
|
13
|
-
}
|
|
14
|
-
function useAction(action, showAction, hideAction) {
|
|
15
|
-
const _showAction = (0, vue.shallowRef)(/* @__PURE__ */ new Set());
|
|
16
|
-
const _hideAction = (0, vue.shallowRef)(/* @__PURE__ */ new Set());
|
|
17
|
-
(0, vue.watchEffect)(() => {
|
|
18
|
-
const mergedShowAction = toArray(showAction?.value ?? action.value).map(normalizeAction);
|
|
19
|
-
const mergedHideAction = toArray(hideAction?.value ?? action.value).map(normalizeAction);
|
|
20
|
-
const showActionSet = new Set(mergedShowAction);
|
|
21
|
-
const hideActionSet = new Set(mergedHideAction);
|
|
22
|
-
if (showActionSet.has("hover") && !showActionSet.has("click")) showActionSet.add("touch");
|
|
23
|
-
if (hideActionSet.has("hover") && !hideActionSet.has("click")) hideActionSet.add("touch");
|
|
24
|
-
_showAction.value = showActionSet;
|
|
25
|
-
_hideAction.value = hideActionSet;
|
|
26
|
-
});
|
|
27
|
-
return [_showAction, _hideAction];
|
|
28
|
-
}
|
|
29
|
-
exports.default = useAction;
|
package/dist/hooks/useAlign.cjs
DELETED
|
@@ -1,378 +0,0 @@
|
|
|
1
|
-
Object.defineProperties(exports, {
|
|
2
|
-
__esModule: { value: true },
|
|
3
|
-
[Symbol.toStringTag]: { value: "Module" }
|
|
4
|
-
});
|
|
5
|
-
const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
|
|
6
|
-
const require_util = require("../util.cjs");
|
|
7
|
-
let vue = require("vue");
|
|
8
|
-
let _v_c_util_dist_Dom_findDOMNode = require("@v-c/util/dist/Dom/findDOMNode");
|
|
9
|
-
let _v_c_util_dist_Dom_isVisible = require("@v-c/util/dist/Dom/isVisible");
|
|
10
|
-
_v_c_util_dist_Dom_isVisible = require_rolldown_runtime.__toESM(_v_c_util_dist_Dom_isVisible);
|
|
11
|
-
function getUnitOffset(size, offset = 0) {
|
|
12
|
-
const offsetStr = `${offset}`;
|
|
13
|
-
const cells = offsetStr.match(/^(.*)\%$/);
|
|
14
|
-
if (cells) return size * (parseFloat(cells[1]) / 100);
|
|
15
|
-
return parseFloat(offsetStr);
|
|
16
|
-
}
|
|
17
|
-
function getNumberOffset(rect, offset) {
|
|
18
|
-
const [offsetX, offsetY] = offset || [];
|
|
19
|
-
return [getUnitOffset(rect.width, offsetX), getUnitOffset(rect.height, offsetY)];
|
|
20
|
-
}
|
|
21
|
-
function splitPoints(points = "") {
|
|
22
|
-
return [points[0], points[1]];
|
|
23
|
-
}
|
|
24
|
-
function getAlignPoint(rect, points) {
|
|
25
|
-
const topBottom = points[0];
|
|
26
|
-
const leftRight = points[1];
|
|
27
|
-
let x;
|
|
28
|
-
let y;
|
|
29
|
-
if (topBottom === "t") y = rect.y;
|
|
30
|
-
else if (topBottom === "b") y = rect.y + rect.height;
|
|
31
|
-
else y = rect.y + rect.height / 2;
|
|
32
|
-
if (leftRight === "l") x = rect.x;
|
|
33
|
-
else if (leftRight === "r") x = rect.x + rect.width;
|
|
34
|
-
else x = rect.x + rect.width / 2;
|
|
35
|
-
return {
|
|
36
|
-
x,
|
|
37
|
-
y
|
|
38
|
-
};
|
|
39
|
-
}
|
|
40
|
-
function reversePoints(points, index) {
|
|
41
|
-
const reverseMap = {
|
|
42
|
-
t: "b",
|
|
43
|
-
b: "t",
|
|
44
|
-
l: "r",
|
|
45
|
-
r: "l"
|
|
46
|
-
};
|
|
47
|
-
const clone = [...points];
|
|
48
|
-
clone[index] = reverseMap[points[index]] || "c";
|
|
49
|
-
return clone;
|
|
50
|
-
}
|
|
51
|
-
function flatPoints(points) {
|
|
52
|
-
return points.join("");
|
|
53
|
-
}
|
|
54
|
-
function shouldSwitchPlacement(isOverflow, isVisibleFirst, newVisibleArea, originVisibleArea, newRecommendArea, originRecommendArea) {
|
|
55
|
-
if (isOverflow) return newVisibleArea > originVisibleArea || newVisibleArea === originVisibleArea && (!isVisibleFirst || newRecommendArea >= originRecommendArea);
|
|
56
|
-
return newVisibleArea > originVisibleArea || isVisibleFirst && newVisibleArea === originVisibleArea && newRecommendArea > originRecommendArea;
|
|
57
|
-
}
|
|
58
|
-
function useAlign(open, popupEle, target, placement, builtinPlacements, popupAlign, onPopupAlign, mobile) {
|
|
59
|
-
const offsetInfo = (0, vue.reactive)({
|
|
60
|
-
ready: false,
|
|
61
|
-
offsetX: 0,
|
|
62
|
-
offsetY: 0,
|
|
63
|
-
offsetR: 0,
|
|
64
|
-
offsetB: 0,
|
|
65
|
-
arrowX: 0,
|
|
66
|
-
arrowY: 0,
|
|
67
|
-
scaleX: 1,
|
|
68
|
-
scaleY: 1,
|
|
69
|
-
align: builtinPlacements.value[placement.value] || {}
|
|
70
|
-
});
|
|
71
|
-
const alignCountRef = (0, vue.shallowRef)(0);
|
|
72
|
-
const scrollerList = (0, vue.computed)(() => {
|
|
73
|
-
if (!popupEle.value || mobile?.value) return [];
|
|
74
|
-
return require_util.collectScroller(popupEle.value);
|
|
75
|
-
});
|
|
76
|
-
const prevFlipRef = (0, vue.ref)({});
|
|
77
|
-
const resetFlipCache = () => {
|
|
78
|
-
prevFlipRef.value = {};
|
|
79
|
-
};
|
|
80
|
-
let cacheTargetRect = null;
|
|
81
|
-
const _onAlign = (cache = false) => {
|
|
82
|
-
if (cache && !cacheTargetRect) return;
|
|
83
|
-
if (popupEle.value && target.value && open.value && !mobile?.value) {
|
|
84
|
-
const popupElement = popupEle.value;
|
|
85
|
-
const doc = popupElement.ownerDocument;
|
|
86
|
-
const popupComputedStyle = require_util.getWin(popupElement).getComputedStyle(popupElement);
|
|
87
|
-
const { position: popupPosition } = popupComputedStyle;
|
|
88
|
-
const originLeft = popupElement.style.left;
|
|
89
|
-
const originTop = popupElement.style.top;
|
|
90
|
-
const originRight = popupElement.style.right;
|
|
91
|
-
const originBottom = popupElement.style.bottom;
|
|
92
|
-
const originOverflow = popupElement.style.overflow;
|
|
93
|
-
const placementInfo = {
|
|
94
|
-
...builtinPlacements.value[placement.value],
|
|
95
|
-
...popupAlign?.value
|
|
96
|
-
};
|
|
97
|
-
const placeholderElement = doc.createElement("div");
|
|
98
|
-
popupElement.parentElement?.appendChild(placeholderElement);
|
|
99
|
-
placeholderElement.style.left = `${popupElement.offsetLeft}px`;
|
|
100
|
-
placeholderElement.style.top = `${popupElement.offsetTop}px`;
|
|
101
|
-
placeholderElement.style.position = popupPosition;
|
|
102
|
-
placeholderElement.style.height = `${popupElement.offsetHeight}px`;
|
|
103
|
-
placeholderElement.style.width = `${popupElement.offsetWidth}px`;
|
|
104
|
-
popupElement.style.left = "0";
|
|
105
|
-
popupElement.style.top = "0";
|
|
106
|
-
popupElement.style.right = "auto";
|
|
107
|
-
popupElement.style.bottom = "auto";
|
|
108
|
-
popupElement.style.overflow = "hidden";
|
|
109
|
-
let targetRect;
|
|
110
|
-
if (Array.isArray(target.value)) targetRect = {
|
|
111
|
-
x: target.value[0],
|
|
112
|
-
y: target.value[1],
|
|
113
|
-
width: 0,
|
|
114
|
-
height: 0
|
|
115
|
-
};
|
|
116
|
-
else {
|
|
117
|
-
const targetRectInfo = target.value.getBoundingClientRect();
|
|
118
|
-
const rect = cache ? Object.assign(targetRectInfo, cacheTargetRect ?? {}) : targetRectInfo;
|
|
119
|
-
if (!cache) cacheTargetRect = {
|
|
120
|
-
width: rect.width,
|
|
121
|
-
height: rect.height
|
|
122
|
-
};
|
|
123
|
-
rect.x = rect.x ?? rect.left;
|
|
124
|
-
rect.y = rect.y ?? rect.top;
|
|
125
|
-
targetRect = {
|
|
126
|
-
x: rect.x,
|
|
127
|
-
y: rect.y,
|
|
128
|
-
width: rect.width,
|
|
129
|
-
height: rect.height
|
|
130
|
-
};
|
|
131
|
-
}
|
|
132
|
-
const rawPopupRect = popupElement.getBoundingClientRect();
|
|
133
|
-
const { clientWidth, clientHeight, scrollWidth, scrollHeight, scrollTop, scrollLeft } = doc.documentElement;
|
|
134
|
-
const targetHeight = targetRect.height;
|
|
135
|
-
const targetWidth = targetRect.width;
|
|
136
|
-
const visibleRegion = {
|
|
137
|
-
left: 0,
|
|
138
|
-
top: 0,
|
|
139
|
-
right: clientWidth,
|
|
140
|
-
bottom: clientHeight
|
|
141
|
-
};
|
|
142
|
-
const scrollRegion = {
|
|
143
|
-
left: -scrollLeft,
|
|
144
|
-
top: -scrollTop,
|
|
145
|
-
right: scrollWidth - scrollLeft,
|
|
146
|
-
bottom: scrollHeight - scrollTop
|
|
147
|
-
};
|
|
148
|
-
let { htmlRegion } = placementInfo;
|
|
149
|
-
const VISIBLE = "visible";
|
|
150
|
-
const VISIBLE_FIRST = "visibleFirst";
|
|
151
|
-
if (htmlRegion !== "scroll" && htmlRegion !== VISIBLE_FIRST) htmlRegion = VISIBLE;
|
|
152
|
-
const isVisibleFirst = htmlRegion === VISIBLE_FIRST;
|
|
153
|
-
const scrollRegionArea = require_util.getVisibleArea(scrollRegion, scrollerList.value);
|
|
154
|
-
const visibleRegionArea = require_util.getVisibleArea(visibleRegion, scrollerList.value);
|
|
155
|
-
const visibleArea = htmlRegion === VISIBLE ? visibleRegionArea : scrollRegionArea;
|
|
156
|
-
const adjustCheckVisibleArea = isVisibleFirst ? visibleRegionArea : visibleArea;
|
|
157
|
-
popupElement.style.left = "auto";
|
|
158
|
-
popupElement.style.top = "auto";
|
|
159
|
-
popupElement.style.right = "0";
|
|
160
|
-
popupElement.style.bottom = "0";
|
|
161
|
-
const rawPopupMirrorRect = popupElement.getBoundingClientRect();
|
|
162
|
-
popupElement.style.left = originLeft;
|
|
163
|
-
popupElement.style.top = originTop;
|
|
164
|
-
popupElement.style.right = originRight;
|
|
165
|
-
popupElement.style.bottom = originBottom;
|
|
166
|
-
popupElement.style.overflow = originOverflow;
|
|
167
|
-
popupElement.parentElement?.removeChild(placeholderElement);
|
|
168
|
-
const popupRect = rawPopupRect;
|
|
169
|
-
popupRect.x = popupRect.x ?? popupRect.left;
|
|
170
|
-
popupRect.y = popupRect.y ?? popupRect.top;
|
|
171
|
-
const { height, width } = popupComputedStyle;
|
|
172
|
-
const popupHeight = popupRect.height;
|
|
173
|
-
const popupWidth = popupRect.width;
|
|
174
|
-
const popupMirrorRect = rawPopupMirrorRect;
|
|
175
|
-
const scaleX$1 = require_util.toNum(Math.round(popupWidth / parseFloat(width) * 1e3) / 1e3);
|
|
176
|
-
const scaleY$1 = require_util.toNum(Math.round(popupHeight / parseFloat(height) * 1e3) / 1e3);
|
|
177
|
-
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;
|
|
178
|
-
const { offset, targetOffset } = placementInfo;
|
|
179
|
-
let [popupOffsetX, popupOffsetY] = getNumberOffset(popupRect, offset);
|
|
180
|
-
const [targetOffsetX, targetOffsetY] = getNumberOffset(targetRect, targetOffset);
|
|
181
|
-
targetRect.x -= targetOffsetX;
|
|
182
|
-
targetRect.y -= targetOffsetY;
|
|
183
|
-
const [popupPoint, targetPoint] = placementInfo.points || [];
|
|
184
|
-
const targetPoints = splitPoints(targetPoint);
|
|
185
|
-
const popupPoints = splitPoints(popupPoint);
|
|
186
|
-
const targetAlignPoint = getAlignPoint(targetRect, targetPoints);
|
|
187
|
-
const popupAlignPoint = getAlignPoint(popupRect, popupPoints);
|
|
188
|
-
const nextAlignInfo = { ...placementInfo };
|
|
189
|
-
let nextPoints = [popupPoints, targetPoints];
|
|
190
|
-
let nextOffsetX = targetAlignPoint.x - popupAlignPoint.x + popupOffsetX;
|
|
191
|
-
let nextOffsetY = targetAlignPoint.y - popupAlignPoint.y + popupOffsetY;
|
|
192
|
-
function getIntersectionVisibleArea(offsetX$1, offsetY$1, area = visibleArea) {
|
|
193
|
-
const l = popupRect.x + offsetX$1;
|
|
194
|
-
const t = popupRect.y + offsetY$1;
|
|
195
|
-
const r = l + popupWidth;
|
|
196
|
-
const b = t + popupHeight;
|
|
197
|
-
const visibleL = Math.max(l, area.left);
|
|
198
|
-
const visibleT = Math.max(t, area.top);
|
|
199
|
-
const visibleR = Math.min(r, area.right);
|
|
200
|
-
const visibleB = Math.min(b, area.bottom);
|
|
201
|
-
return Math.max(0, (visibleR - visibleL) * (visibleB - visibleT));
|
|
202
|
-
}
|
|
203
|
-
const originIntersectionVisibleArea = getIntersectionVisibleArea(nextOffsetX, nextOffsetY);
|
|
204
|
-
const originIntersectionRecommendArea = getIntersectionVisibleArea(nextOffsetX, nextOffsetY, visibleRegionArea);
|
|
205
|
-
const targetAlignPointTL = getAlignPoint(targetRect, ["t", "l"]);
|
|
206
|
-
const popupAlignPointTL = getAlignPoint(popupRect, ["t", "l"]);
|
|
207
|
-
const targetAlignPointBR = getAlignPoint(targetRect, ["b", "r"]);
|
|
208
|
-
const popupAlignPointBR = getAlignPoint(popupRect, ["b", "r"]);
|
|
209
|
-
const { adjustX, adjustY, shiftX, shiftY } = placementInfo.overflow || {};
|
|
210
|
-
const supportAdjust = (val) => {
|
|
211
|
-
if (typeof val === "boolean") return val;
|
|
212
|
-
return val >= 0;
|
|
213
|
-
};
|
|
214
|
-
let nextPopupY;
|
|
215
|
-
let nextPopupBottom;
|
|
216
|
-
let nextPopupX;
|
|
217
|
-
let nextPopupRight;
|
|
218
|
-
function syncNextPopupPosition() {
|
|
219
|
-
nextPopupY = popupRect.y + nextOffsetY;
|
|
220
|
-
nextPopupBottom = nextPopupY + popupHeight;
|
|
221
|
-
nextPopupX = popupRect.x + nextOffsetX;
|
|
222
|
-
nextPopupRight = nextPopupX + popupWidth;
|
|
223
|
-
}
|
|
224
|
-
syncNextPopupPosition();
|
|
225
|
-
const needAdjustY = supportAdjust(adjustY);
|
|
226
|
-
const sameTB = popupPoints[0] === targetPoints[0];
|
|
227
|
-
const overflowBottom = nextPopupBottom > adjustCheckVisibleArea.bottom;
|
|
228
|
-
if (needAdjustY && popupPoints[0] === "t" && (overflowBottom || prevFlipRef.value.bt)) {
|
|
229
|
-
let tmpNextOffsetY = nextOffsetY;
|
|
230
|
-
if (sameTB) tmpNextOffsetY -= popupHeight - targetHeight;
|
|
231
|
-
else tmpNextOffsetY = targetAlignPointTL.y - popupAlignPointBR.y - popupOffsetY;
|
|
232
|
-
if (shouldSwitchPlacement(overflowBottom, isVisibleFirst, getIntersectionVisibleArea(nextOffsetX, tmpNextOffsetY), originIntersectionVisibleArea, getIntersectionVisibleArea(nextOffsetX, tmpNextOffsetY, visibleRegionArea), originIntersectionRecommendArea)) {
|
|
233
|
-
prevFlipRef.value.bt = true;
|
|
234
|
-
nextOffsetY = tmpNextOffsetY;
|
|
235
|
-
popupOffsetY = -popupOffsetY;
|
|
236
|
-
nextPoints = [reversePoints(nextPoints[0], 0), reversePoints(nextPoints[1], 0)];
|
|
237
|
-
} else prevFlipRef.value.bt = false;
|
|
238
|
-
}
|
|
239
|
-
const overflowTop = nextPopupY < adjustCheckVisibleArea.top;
|
|
240
|
-
if (needAdjustY && popupPoints[0] === "b" && (overflowTop || prevFlipRef.value.tb)) {
|
|
241
|
-
let tmpNextOffsetY = nextOffsetY;
|
|
242
|
-
if (sameTB) tmpNextOffsetY += popupHeight - targetHeight;
|
|
243
|
-
else tmpNextOffsetY = targetAlignPointBR.y - popupAlignPointTL.y - popupOffsetY;
|
|
244
|
-
if (shouldSwitchPlacement(overflowTop, isVisibleFirst, getIntersectionVisibleArea(nextOffsetX, tmpNextOffsetY), originIntersectionVisibleArea, getIntersectionVisibleArea(nextOffsetX, tmpNextOffsetY, visibleRegionArea), originIntersectionRecommendArea)) {
|
|
245
|
-
prevFlipRef.value.tb = true;
|
|
246
|
-
nextOffsetY = tmpNextOffsetY;
|
|
247
|
-
popupOffsetY = -popupOffsetY;
|
|
248
|
-
nextPoints = [reversePoints(nextPoints[0], 0), reversePoints(nextPoints[1], 0)];
|
|
249
|
-
} else prevFlipRef.value.tb = false;
|
|
250
|
-
}
|
|
251
|
-
const needAdjustX = supportAdjust(adjustX);
|
|
252
|
-
const sameLR = popupPoints[1] === targetPoints[1];
|
|
253
|
-
const overflowRight = nextPopupRight > adjustCheckVisibleArea.right;
|
|
254
|
-
if (needAdjustX && popupPoints[1] === "l" && (overflowRight || prevFlipRef.value.rl)) {
|
|
255
|
-
let tmpNextOffsetX = nextOffsetX;
|
|
256
|
-
if (sameLR) tmpNextOffsetX -= popupWidth - targetWidth;
|
|
257
|
-
else tmpNextOffsetX = targetAlignPointTL.x - popupAlignPointBR.x - popupOffsetX;
|
|
258
|
-
if (shouldSwitchPlacement(overflowRight, isVisibleFirst, getIntersectionVisibleArea(tmpNextOffsetX, nextOffsetY), originIntersectionVisibleArea, getIntersectionVisibleArea(tmpNextOffsetX, nextOffsetY, visibleRegionArea), originIntersectionRecommendArea)) {
|
|
259
|
-
prevFlipRef.value.rl = true;
|
|
260
|
-
nextOffsetX = tmpNextOffsetX;
|
|
261
|
-
popupOffsetX = -popupOffsetX;
|
|
262
|
-
nextPoints = [reversePoints(nextPoints[0], 1), reversePoints(nextPoints[1], 1)];
|
|
263
|
-
} else prevFlipRef.value.rl = false;
|
|
264
|
-
}
|
|
265
|
-
const overflowLeft = nextPopupX < adjustCheckVisibleArea.left;
|
|
266
|
-
if (needAdjustX && popupPoints[1] === "r" && (overflowLeft || prevFlipRef.value.lr)) {
|
|
267
|
-
let tmpNextOffsetX = nextOffsetX;
|
|
268
|
-
if (sameLR) tmpNextOffsetX += popupWidth - targetWidth;
|
|
269
|
-
else tmpNextOffsetX = targetAlignPointBR.x - popupAlignPointTL.x - popupOffsetX;
|
|
270
|
-
if (shouldSwitchPlacement(overflowLeft, isVisibleFirst, getIntersectionVisibleArea(tmpNextOffsetX, nextOffsetY), originIntersectionVisibleArea, getIntersectionVisibleArea(tmpNextOffsetX, nextOffsetY, visibleRegionArea), originIntersectionRecommendArea)) {
|
|
271
|
-
prevFlipRef.value.lr = true;
|
|
272
|
-
nextOffsetX = tmpNextOffsetX;
|
|
273
|
-
popupOffsetX = -popupOffsetX;
|
|
274
|
-
nextPoints = [reversePoints(nextPoints[0], 1), reversePoints(nextPoints[1], 1)];
|
|
275
|
-
} else prevFlipRef.value.lr = false;
|
|
276
|
-
}
|
|
277
|
-
nextAlignInfo.points = [flatPoints(nextPoints[0]), flatPoints(nextPoints[1])];
|
|
278
|
-
syncNextPopupPosition();
|
|
279
|
-
const numShiftX = shiftX === true ? 0 : shiftX;
|
|
280
|
-
if (typeof numShiftX === "number") {
|
|
281
|
-
if (nextPopupX < visibleRegionArea.left) {
|
|
282
|
-
nextOffsetX -= nextPopupX - visibleRegionArea.left - popupOffsetX;
|
|
283
|
-
if (targetRect.x + targetWidth < visibleRegionArea.left + numShiftX) nextOffsetX += targetRect.x - visibleRegionArea.left + targetWidth - numShiftX;
|
|
284
|
-
}
|
|
285
|
-
if (nextPopupRight > visibleRegionArea.right) {
|
|
286
|
-
nextOffsetX -= nextPopupRight - visibleRegionArea.right - popupOffsetX;
|
|
287
|
-
if (targetRect.x > visibleRegionArea.right - numShiftX) nextOffsetX += targetRect.x - visibleRegionArea.right + numShiftX;
|
|
288
|
-
}
|
|
289
|
-
}
|
|
290
|
-
const numShiftY = shiftY === true ? 0 : shiftY;
|
|
291
|
-
if (typeof numShiftY === "number") {
|
|
292
|
-
if (nextPopupY < visibleRegionArea.top) {
|
|
293
|
-
nextOffsetY -= nextPopupY - visibleRegionArea.top - popupOffsetY;
|
|
294
|
-
if (targetRect.y + targetHeight < visibleRegionArea.top + numShiftY) nextOffsetY += targetRect.y - visibleRegionArea.top + targetHeight - numShiftY;
|
|
295
|
-
}
|
|
296
|
-
if (nextPopupBottom > visibleRegionArea.bottom) {
|
|
297
|
-
nextOffsetY -= nextPopupBottom - visibleRegionArea.bottom - popupOffsetY;
|
|
298
|
-
if (targetRect.y > visibleRegionArea.bottom - numShiftY) nextOffsetY += targetRect.y - visibleRegionArea.bottom + numShiftY;
|
|
299
|
-
}
|
|
300
|
-
}
|
|
301
|
-
const popupLeft = popupRect.x + nextOffsetX;
|
|
302
|
-
const popupRight = popupLeft + popupWidth;
|
|
303
|
-
const popupTop = popupRect.y + nextOffsetY;
|
|
304
|
-
const popupBottom = popupTop + popupHeight;
|
|
305
|
-
const targetLeft = targetRect.x;
|
|
306
|
-
const targetRight = targetLeft + targetWidth;
|
|
307
|
-
const targetTop = targetRect.y;
|
|
308
|
-
const targetBottom = targetTop + targetHeight;
|
|
309
|
-
const nextArrowX = (Math.max(popupLeft, targetLeft) + Math.min(popupRight, targetRight)) / 2 - popupLeft;
|
|
310
|
-
const nextArrowY = (Math.max(popupTop, targetTop) + Math.min(popupBottom, targetBottom)) / 2 - popupTop;
|
|
311
|
-
onPopupAlign?.(popupEle.value, nextAlignInfo);
|
|
312
|
-
let offsetX4Right = popupMirrorRect.right - popupRect.x - (nextOffsetX + popupRect.width);
|
|
313
|
-
let offsetY4Bottom = popupMirrorRect.bottom - popupRect.y - (nextOffsetY + popupRect.height);
|
|
314
|
-
if (scaleX$1 === 1) {
|
|
315
|
-
nextOffsetX = Math.floor(nextOffsetX);
|
|
316
|
-
offsetX4Right = Math.floor(offsetX4Right);
|
|
317
|
-
}
|
|
318
|
-
if (scaleY$1 === 1) {
|
|
319
|
-
nextOffsetY = Math.floor(nextOffsetY);
|
|
320
|
-
offsetY4Bottom = Math.floor(offsetY4Bottom);
|
|
321
|
-
}
|
|
322
|
-
const nextOffsetInfo = {
|
|
323
|
-
ready: true,
|
|
324
|
-
offsetX: nextOffsetX / scaleX$1,
|
|
325
|
-
offsetY: nextOffsetY / scaleY$1,
|
|
326
|
-
offsetR: offsetX4Right / scaleX$1,
|
|
327
|
-
offsetB: offsetY4Bottom / scaleY$1,
|
|
328
|
-
arrowX: nextArrowX / scaleX$1,
|
|
329
|
-
arrowY: nextArrowY / scaleY$1,
|
|
330
|
-
scaleX: scaleX$1,
|
|
331
|
-
scaleY: scaleY$1,
|
|
332
|
-
align: nextAlignInfo
|
|
333
|
-
};
|
|
334
|
-
Object.assign(offsetInfo, nextOffsetInfo);
|
|
335
|
-
}
|
|
336
|
-
};
|
|
337
|
-
const onAlign = _onAlign;
|
|
338
|
-
const triggerAlign = (cache) => {
|
|
339
|
-
alignCountRef.value += 1;
|
|
340
|
-
const id = alignCountRef.value;
|
|
341
|
-
Promise.resolve().then(() => {
|
|
342
|
-
if (alignCountRef.value === id) onAlign(cache);
|
|
343
|
-
});
|
|
344
|
-
};
|
|
345
|
-
(0, vue.watch)(popupEle, async (ele) => {
|
|
346
|
-
if (ele && open.value && !mobile?.value) {
|
|
347
|
-
await (0, vue.nextTick)();
|
|
348
|
-
triggerAlign();
|
|
349
|
-
}
|
|
350
|
-
});
|
|
351
|
-
const resetReady = () => {
|
|
352
|
-
offsetInfo.ready = false;
|
|
353
|
-
};
|
|
354
|
-
(0, vue.watch)(placement, () => {
|
|
355
|
-
resetReady();
|
|
356
|
-
});
|
|
357
|
-
(0, vue.watch)(open, () => {
|
|
358
|
-
if (!open.value) {
|
|
359
|
-
resetFlipCache();
|
|
360
|
-
resetReady();
|
|
361
|
-
}
|
|
362
|
-
}, { immediate: true });
|
|
363
|
-
const { ready, offsetX, offsetR, offsetY, offsetB, align, arrowY, arrowX, scaleY, scaleX } = (0, vue.toRefs)(offsetInfo);
|
|
364
|
-
return [
|
|
365
|
-
ready,
|
|
366
|
-
offsetX,
|
|
367
|
-
offsetY,
|
|
368
|
-
offsetR,
|
|
369
|
-
offsetB,
|
|
370
|
-
arrowX,
|
|
371
|
-
arrowY,
|
|
372
|
-
scaleX,
|
|
373
|
-
scaleY,
|
|
374
|
-
align,
|
|
375
|
-
triggerAlign
|
|
376
|
-
];
|
|
377
|
-
}
|
|
378
|
-
exports.default = useAlign;
|