@v-c/trigger 1.0.1 → 1.0.3
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 +3 -2
- package/dist/Popup/Mask.cjs +6 -3
- package/dist/Popup/PopupContent.cjs +4 -1
- package/dist/Popup/index.cjs +27 -22
- package/dist/Popup/index.d.ts +2 -0
- package/dist/Popup/index.js +17 -14
- package/dist/UniqueProvider/UniqueContainer.cjs +11 -8
- package/dist/UniqueProvider/UniqueContainer.js +4 -4
- package/dist/UniqueProvider/index.cjs +30 -17
- package/dist/UniqueProvider/index.js +13 -3
- package/dist/UniqueProvider/useTargetState.cjs +4 -2
- package/dist/UniqueProvider/useTargetState.js +0 -1
- package/dist/context.cjs +1 -0
- package/dist/context.d.ts +2 -0
- package/dist/hooks/useAction.cjs +4 -1
- package/dist/hooks/useAlign.cjs +48 -79
- package/dist/hooks/useAlign.d.ts +1 -1
- package/dist/hooks/useAlign.js +41 -75
- package/dist/hooks/useDelay.cjs +4 -1
- package/dist/hooks/useOffsetStyle.cjs +5 -2
- package/dist/hooks/useOffsetStyle.js +1 -1
- package/dist/hooks/useWatch.cjs +4 -1
- package/dist/hooks/useWinClick.cjs +8 -5
- package/dist/index.cjs +40 -46
- package/dist/index.js +23 -31
- package/dist/interface.cjs +1 -0
- package/dist/util.cjs +4 -2
- package/dist/util.js +3 -2
- package/package.json +4 -4
package/dist/Popup/Arrow.cjs
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
1
2
|
const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
|
|
2
3
|
let vue = require("vue");
|
|
3
|
-
let
|
|
4
|
+
let _v_c_util = require("@v-c/util");
|
|
4
5
|
const Arrow = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
5
6
|
props: {
|
|
6
7
|
prefixCls: {
|
|
@@ -50,7 +51,7 @@ const Arrow = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
|
50
51
|
}
|
|
51
52
|
return (0, vue.createVNode)("div", {
|
|
52
53
|
"ref": arrowRef,
|
|
53
|
-
"class": (0,
|
|
54
|
+
"class": (0, _v_c_util.classNames)(`${prefixCls}-arrow`, className),
|
|
54
55
|
"style": {
|
|
55
56
|
...alignStyle,
|
|
56
57
|
...style
|
package/dist/Popup/Mask.cjs
CHANGED
|
@@ -1,12 +1,15 @@
|
|
|
1
|
-
Object.
|
|
1
|
+
Object.defineProperties(exports, {
|
|
2
|
+
__esModule: { value: true },
|
|
3
|
+
[Symbol.toStringTag]: { value: "Module" }
|
|
4
|
+
});
|
|
2
5
|
const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
|
|
3
6
|
let vue = require("vue");
|
|
4
|
-
let
|
|
7
|
+
let _v_c_util_dist_utils_transition = require("@v-c/util/dist/utils/transition");
|
|
5
8
|
var Mask = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs }) => {
|
|
6
9
|
return () => {
|
|
7
10
|
const { prefixCls, open, zIndex, mask, motion, mobile } = props;
|
|
8
11
|
if (!mask) return null;
|
|
9
|
-
return (0, vue.createVNode)(vue.Transition, (0,
|
|
12
|
+
return (0, vue.createVNode)(vue.Transition, (0, _v_c_util_dist_utils_transition.getTransitionProps)(motion?.name, motion), { default: () => [open ? (0, vue.createVNode)("div", {
|
|
10
13
|
"style": { zIndex },
|
|
11
14
|
"class": [
|
|
12
15
|
`${prefixCls}-mask`,
|
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
Object.
|
|
1
|
+
Object.defineProperties(exports, {
|
|
2
|
+
__esModule: { value: true },
|
|
3
|
+
[Symbol.toStringTag]: { value: "Module" }
|
|
4
|
+
});
|
|
2
5
|
const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
|
|
3
6
|
let vue = require("vue");
|
|
4
7
|
var PopupContent = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots }) => {
|
package/dist/Popup/index.cjs
CHANGED
|
@@ -1,18 +1,20 @@
|
|
|
1
|
-
Object.
|
|
1
|
+
Object.defineProperties(exports, {
|
|
2
|
+
__esModule: { value: true },
|
|
3
|
+
[Symbol.toStringTag]: { value: "Module" }
|
|
4
|
+
});
|
|
2
5
|
const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
|
|
3
6
|
const require_useOffsetStyle = require("../hooks/useOffsetStyle.cjs");
|
|
4
7
|
const require_Arrow = require("./Arrow.cjs");
|
|
5
8
|
const require_Mask = require("./Mask.cjs");
|
|
6
9
|
const require_PopupContent = require("./PopupContent.cjs");
|
|
7
10
|
let vue = require("vue");
|
|
8
|
-
let
|
|
9
|
-
|
|
10
|
-
let
|
|
11
|
-
let
|
|
12
|
-
let __v_c_util_dist_utils_transition = require("@v-c/util/dist/utils/transition");
|
|
11
|
+
let _v_c_resize_observer = require("@v-c/resize-observer");
|
|
12
|
+
let _v_c_util = require("@v-c/util");
|
|
13
|
+
let _v_c_util_dist_props_util = require("@v-c/util/dist/props-util");
|
|
14
|
+
let _v_c_util_dist_utils_transition = require("@v-c/util/dist/utils/transition");
|
|
13
15
|
var Popup = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs, slots, expose }) => {
|
|
14
16
|
const popupContent = (0, vue.computed)(() => typeof props.popup === "function" ? props.popup() : props.popup);
|
|
15
|
-
const { offsetX, offsetR, offsetY, offsetB, open, ready, align } = (0,
|
|
17
|
+
const { offsetX, offsetR, offsetY, offsetB, open, ready, align } = (0, _v_c_util_dist_props_util.toPropsRefs)(props, "offsetX", "offsetB", "offsetY", "offsetR", "ready", "open", "align");
|
|
16
18
|
const isNodeVisible = (0, vue.computed)(() => props.open || props.keepDom);
|
|
17
19
|
const isMobile = (0, vue.computed)(() => !!props.mobile);
|
|
18
20
|
const getPopupContainerNeedParams = props?.getPopupContainer?.length > 0;
|
|
@@ -46,9 +48,10 @@ var Popup = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs, slots, exp
|
|
|
46
48
|
getElement: () => popupElementRef.value,
|
|
47
49
|
nativeElement: popupElementRef
|
|
48
50
|
});
|
|
51
|
+
(0, _v_c_resize_observer.useResizeObserver)(open, popupElementRef, onInternalResize);
|
|
49
52
|
return () => {
|
|
50
53
|
if (!show.value) return null;
|
|
51
|
-
const { stretch, targetHeight, targetWidth, portal: Portal, forceRender, getPopupContainer, target, autoDestroy, zIndex, prefixCls, arrow, arrowPos, align: align$1, onMouseEnter, onMouseLeave, onPointerEnter, onPointerDownCapture, onClick, fresh, onPrepare, onVisibleChanged } = props;
|
|
54
|
+
const { onEsc, stretch, targetHeight, targetWidth, portal: Portal, forceRender, getPopupContainer, target, autoDestroy, zIndex, prefixCls, arrow, arrowPos, align: align$1, onMouseEnter, onMouseLeave, onPointerEnter, onPointerDownCapture, onClick, fresh, onPrepare, onVisibleChanged } = props;
|
|
52
55
|
const miscStyle = {};
|
|
53
56
|
if (stretch) {
|
|
54
57
|
if (stretch.includes("height") && targetHeight) miscStyle.height = `${targetHeight}px`;
|
|
@@ -59,7 +62,7 @@ var Popup = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs, slots, exp
|
|
|
59
62
|
if (!open.value) miscStyle.pointerEvents = "none";
|
|
60
63
|
const [mergedMask, mergedMaskMotion, mergedPopupMotion] = mergedProps.value;
|
|
61
64
|
const popupMotionName = mergedPopupMotion?.name ?? mergedPopupMotion?.motionName;
|
|
62
|
-
const baseTransitionProps = popupMotionName ? (0,
|
|
65
|
+
const baseTransitionProps = popupMotionName ? (0, _v_c_util_dist_utils_transition.getTransitionProps)(popupMotionName, mergedPopupMotion) : {
|
|
63
66
|
appear: true,
|
|
64
67
|
...mergedPopupMotion || {}
|
|
65
68
|
};
|
|
@@ -69,21 +72,26 @@ var Popup = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs, slots, exp
|
|
|
69
72
|
onBeforeEnter: (element) => {
|
|
70
73
|
onPrepare?.();
|
|
71
74
|
baseTransitionProps?.onBeforeEnter?.(element);
|
|
72
|
-
onVisibleChanged?.(true);
|
|
73
75
|
},
|
|
74
76
|
onAfterEnter: (element) => {
|
|
75
77
|
baseTransitionProps?.onAfterEnter?.(element);
|
|
78
|
+
requestAnimationFrame(() => {
|
|
79
|
+
requestAnimationFrame(() => {
|
|
80
|
+
onVisibleChanged?.(true);
|
|
81
|
+
});
|
|
82
|
+
});
|
|
76
83
|
},
|
|
77
84
|
onAfterLeave: (element) => {
|
|
78
85
|
baseTransitionProps.onAfterLeave?.(element);
|
|
79
86
|
onVisibleChanged?.(false);
|
|
80
87
|
}
|
|
81
88
|
};
|
|
82
|
-
const cls = (0,
|
|
89
|
+
const cls = (0, _v_c_util.classNames)(prefixCls, attrs.class, props.className, { [`${prefixCls}-mobile`]: isMobile.value });
|
|
83
90
|
return (0, vue.createVNode)(Portal, {
|
|
84
91
|
"open": forceRender || isNodeVisible.value,
|
|
85
92
|
"getContainer": getPopupContainer && (() => getPopupContainer(target)),
|
|
86
|
-
"autoDestroy": autoDestroy
|
|
93
|
+
"autoDestroy": autoDestroy,
|
|
94
|
+
"onEsc": onEsc
|
|
87
95
|
}, { default: () => [
|
|
88
96
|
(0, vue.createVNode)(require_Mask.default, {
|
|
89
97
|
"prefixCls": prefixCls,
|
|
@@ -93,10 +101,7 @@ var Popup = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs, slots, exp
|
|
|
93
101
|
"motion": mergedMaskMotion,
|
|
94
102
|
"mobile": isMobile.value
|
|
95
103
|
}, null),
|
|
96
|
-
(0, vue.createVNode)(
|
|
97
|
-
"onResize": onInternalResize,
|
|
98
|
-
"disabled": !open.value
|
|
99
|
-
}, { default: () => [(0, vue.createVNode)(vue.Transition, mergedTransitionProps, { default: () => [(0, vue.withDirectives)((0, vue.createVNode)("div", (0, vue.mergeProps)({
|
|
104
|
+
(0, vue.createVNode)(vue.Transition, mergedTransitionProps, { default: () => [(0, vue.withDirectives)((0, vue.createVNode)("div", (0, vue.mergeProps)({
|
|
100
105
|
"ref": popupElementRef,
|
|
101
106
|
"class": cls,
|
|
102
107
|
"style": [
|
|
@@ -121,11 +126,15 @@ var Popup = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs, slots, exp
|
|
|
121
126
|
"arrow": arrow === true ? {} : arrow,
|
|
122
127
|
"arrowPos": arrowPos,
|
|
123
128
|
"align": align$1
|
|
124
|
-
}, null), (0, vue.createVNode)(require_PopupContent.default, { "cache": !open.value && !fresh }, { default: () => [popupContent.value] })]), [[vue.vShow, open.value]])] })
|
|
129
|
+
}, null), (0, vue.createVNode)(require_PopupContent.default, { "cache": !open.value && !fresh }, { default: () => [popupContent.value] })]), [[vue.vShow, open.value]])] }),
|
|
125
130
|
slots?.default?.()
|
|
126
131
|
] });
|
|
127
132
|
};
|
|
128
133
|
}, { props: /* @__PURE__ */ (0, vue.mergeDefaults)({
|
|
134
|
+
onEsc: {
|
|
135
|
+
required: false,
|
|
136
|
+
default: void 0
|
|
137
|
+
},
|
|
129
138
|
prefixCls: {
|
|
130
139
|
type: String,
|
|
131
140
|
required: true,
|
|
@@ -137,7 +146,7 @@ var Popup = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs, slots, exp
|
|
|
137
146
|
default: void 0
|
|
138
147
|
},
|
|
139
148
|
style: {
|
|
140
|
-
type:
|
|
149
|
+
type: Object,
|
|
141
150
|
required: false,
|
|
142
151
|
default: void 0
|
|
143
152
|
},
|
|
@@ -148,7 +157,6 @@ var Popup = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs, slots, exp
|
|
|
148
157
|
default: void 0
|
|
149
158
|
},
|
|
150
159
|
target: {
|
|
151
|
-
type: null,
|
|
152
160
|
required: true,
|
|
153
161
|
default: void 0
|
|
154
162
|
},
|
|
@@ -248,7 +256,6 @@ var Popup = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs, slots, exp
|
|
|
248
256
|
default: void 0
|
|
249
257
|
},
|
|
250
258
|
portal: {
|
|
251
|
-
type: null,
|
|
252
259
|
required: true,
|
|
253
260
|
default: void 0
|
|
254
261
|
},
|
|
@@ -278,7 +285,6 @@ var Popup = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs, slots, exp
|
|
|
278
285
|
default: void 0
|
|
279
286
|
},
|
|
280
287
|
onAlign: {
|
|
281
|
-
type: null,
|
|
282
288
|
required: true,
|
|
283
289
|
default: void 0
|
|
284
290
|
},
|
|
@@ -303,7 +309,6 @@ var Popup = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs, slots, exp
|
|
|
303
309
|
default: void 0
|
|
304
310
|
},
|
|
305
311
|
onResize: {
|
|
306
|
-
type: null,
|
|
307
312
|
required: false,
|
|
308
313
|
default: void 0
|
|
309
314
|
},
|
package/dist/Popup/index.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { PortalProps } from '@v-c/portal';
|
|
1
2
|
import { ResizeObserverProps } from '@v-c/resize-observer';
|
|
2
3
|
import { CSSMotionProps } from '@v-c/util/dist/utils/transition';
|
|
3
4
|
import { CSSProperties } from 'vue';
|
|
@@ -11,6 +12,7 @@ export interface MobileConfig {
|
|
|
11
12
|
maskMotion?: CSSMotionProps;
|
|
12
13
|
}
|
|
13
14
|
export interface PopupProps {
|
|
15
|
+
onEsc?: PortalProps['onEsc'];
|
|
14
16
|
prefixCls: string;
|
|
15
17
|
className?: string;
|
|
16
18
|
style?: CSSProperties;
|
package/dist/Popup/index.js
CHANGED
|
@@ -3,7 +3,7 @@ import { Arrow } from "./Arrow.js";
|
|
|
3
3
|
import Mask_default from "./Mask.js";
|
|
4
4
|
import PopupContent_default from "./PopupContent.js";
|
|
5
5
|
import { Transition, computed, createVNode, defineComponent, mergeDefaults, mergeProps, nextTick, shallowRef, vShow, watchEffect, withDirectives } from "vue";
|
|
6
|
-
import
|
|
6
|
+
import { useResizeObserver } from "@v-c/resize-observer";
|
|
7
7
|
import { classNames } from "@v-c/util";
|
|
8
8
|
import { toPropsRefs } from "@v-c/util/dist/props-util";
|
|
9
9
|
import { getTransitionProps } from "@v-c/util/dist/utils/transition";
|
|
@@ -43,9 +43,10 @@ var Popup_default = /* @__PURE__ */ defineComponent((props, { attrs, slots, expo
|
|
|
43
43
|
getElement: () => popupElementRef.value,
|
|
44
44
|
nativeElement: popupElementRef
|
|
45
45
|
});
|
|
46
|
+
useResizeObserver(open, popupElementRef, onInternalResize);
|
|
46
47
|
return () => {
|
|
47
48
|
if (!show.value) return null;
|
|
48
|
-
const { stretch, targetHeight, targetWidth, portal: Portal, forceRender, getPopupContainer, target, autoDestroy, zIndex, prefixCls, arrow, arrowPos, align: align$1, onMouseEnter, onMouseLeave, onPointerEnter, onPointerDownCapture, onClick, fresh, onPrepare, onVisibleChanged } = props;
|
|
49
|
+
const { onEsc, stretch, targetHeight, targetWidth, portal: Portal, forceRender, getPopupContainer, target, autoDestroy, zIndex, prefixCls, arrow, arrowPos, align: align$1, onMouseEnter, onMouseLeave, onPointerEnter, onPointerDownCapture, onClick, fresh, onPrepare, onVisibleChanged } = props;
|
|
49
50
|
const miscStyle = {};
|
|
50
51
|
if (stretch) {
|
|
51
52
|
if (stretch.includes("height") && targetHeight) miscStyle.height = `${targetHeight}px`;
|
|
@@ -66,10 +67,14 @@ var Popup_default = /* @__PURE__ */ defineComponent((props, { attrs, slots, expo
|
|
|
66
67
|
onBeforeEnter: (element) => {
|
|
67
68
|
onPrepare?.();
|
|
68
69
|
baseTransitionProps?.onBeforeEnter?.(element);
|
|
69
|
-
onVisibleChanged?.(true);
|
|
70
70
|
},
|
|
71
71
|
onAfterEnter: (element) => {
|
|
72
72
|
baseTransitionProps?.onAfterEnter?.(element);
|
|
73
|
+
requestAnimationFrame(() => {
|
|
74
|
+
requestAnimationFrame(() => {
|
|
75
|
+
onVisibleChanged?.(true);
|
|
76
|
+
});
|
|
77
|
+
});
|
|
73
78
|
},
|
|
74
79
|
onAfterLeave: (element) => {
|
|
75
80
|
baseTransitionProps.onAfterLeave?.(element);
|
|
@@ -80,7 +85,8 @@ var Popup_default = /* @__PURE__ */ defineComponent((props, { attrs, slots, expo
|
|
|
80
85
|
return createVNode(Portal, {
|
|
81
86
|
"open": forceRender || isNodeVisible.value,
|
|
82
87
|
"getContainer": getPopupContainer && (() => getPopupContainer(target)),
|
|
83
|
-
"autoDestroy": autoDestroy
|
|
88
|
+
"autoDestroy": autoDestroy,
|
|
89
|
+
"onEsc": onEsc
|
|
84
90
|
}, { default: () => [
|
|
85
91
|
createVNode(Mask_default, {
|
|
86
92
|
"prefixCls": prefixCls,
|
|
@@ -90,10 +96,7 @@ var Popup_default = /* @__PURE__ */ defineComponent((props, { attrs, slots, expo
|
|
|
90
96
|
"motion": mergedMaskMotion,
|
|
91
97
|
"mobile": isMobile.value
|
|
92
98
|
}, null),
|
|
93
|
-
createVNode(
|
|
94
|
-
"onResize": onInternalResize,
|
|
95
|
-
"disabled": !open.value
|
|
96
|
-
}, { default: () => [createVNode(Transition, mergedTransitionProps, { default: () => [withDirectives(createVNode("div", mergeProps({
|
|
99
|
+
createVNode(Transition, mergedTransitionProps, { default: () => [withDirectives(createVNode("div", mergeProps({
|
|
97
100
|
"ref": popupElementRef,
|
|
98
101
|
"class": cls,
|
|
99
102
|
"style": [
|
|
@@ -118,11 +121,15 @@ var Popup_default = /* @__PURE__ */ defineComponent((props, { attrs, slots, expo
|
|
|
118
121
|
"arrow": arrow === true ? {} : arrow,
|
|
119
122
|
"arrowPos": arrowPos,
|
|
120
123
|
"align": align$1
|
|
121
|
-
}, null), createVNode(PopupContent_default, { "cache": !open.value && !fresh }, { default: () => [popupContent.value] })]), [[vShow, open.value]])] })
|
|
124
|
+
}, null), createVNode(PopupContent_default, { "cache": !open.value && !fresh }, { default: () => [popupContent.value] })]), [[vShow, open.value]])] }),
|
|
122
125
|
slots?.default?.()
|
|
123
126
|
] });
|
|
124
127
|
};
|
|
125
128
|
}, { props: /* @__PURE__ */ mergeDefaults({
|
|
129
|
+
onEsc: {
|
|
130
|
+
required: false,
|
|
131
|
+
default: void 0
|
|
132
|
+
},
|
|
126
133
|
prefixCls: {
|
|
127
134
|
type: String,
|
|
128
135
|
required: true,
|
|
@@ -134,7 +141,7 @@ var Popup_default = /* @__PURE__ */ defineComponent((props, { attrs, slots, expo
|
|
|
134
141
|
default: void 0
|
|
135
142
|
},
|
|
136
143
|
style: {
|
|
137
|
-
type:
|
|
144
|
+
type: Object,
|
|
138
145
|
required: false,
|
|
139
146
|
default: void 0
|
|
140
147
|
},
|
|
@@ -145,7 +152,6 @@ var Popup_default = /* @__PURE__ */ defineComponent((props, { attrs, slots, expo
|
|
|
145
152
|
default: void 0
|
|
146
153
|
},
|
|
147
154
|
target: {
|
|
148
|
-
type: null,
|
|
149
155
|
required: true,
|
|
150
156
|
default: void 0
|
|
151
157
|
},
|
|
@@ -245,7 +251,6 @@ var Popup_default = /* @__PURE__ */ defineComponent((props, { attrs, slots, expo
|
|
|
245
251
|
default: void 0
|
|
246
252
|
},
|
|
247
253
|
portal: {
|
|
248
|
-
type: null,
|
|
249
254
|
required: true,
|
|
250
255
|
default: void 0
|
|
251
256
|
},
|
|
@@ -275,7 +280,6 @@ var Popup_default = /* @__PURE__ */ defineComponent((props, { attrs, slots, expo
|
|
|
275
280
|
default: void 0
|
|
276
281
|
},
|
|
277
282
|
onAlign: {
|
|
278
|
-
type: null,
|
|
279
283
|
required: true,
|
|
280
284
|
default: void 0
|
|
281
285
|
},
|
|
@@ -300,7 +304,6 @@ var Popup_default = /* @__PURE__ */ defineComponent((props, { attrs, slots, expo
|
|
|
300
304
|
default: void 0
|
|
301
305
|
},
|
|
302
306
|
onResize: {
|
|
303
|
-
type: null,
|
|
304
307
|
required: false,
|
|
305
308
|
default: void 0
|
|
306
309
|
},
|
|
@@ -1,19 +1,21 @@
|
|
|
1
|
-
Object.
|
|
1
|
+
Object.defineProperties(exports, {
|
|
2
|
+
__esModule: { value: true },
|
|
3
|
+
[Symbol.toStringTag]: { value: "Module" }
|
|
4
|
+
});
|
|
2
5
|
const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
|
|
3
6
|
const require_useOffsetStyle = require("../hooks/useOffsetStyle.cjs");
|
|
4
7
|
let vue = require("vue");
|
|
5
|
-
let
|
|
6
|
-
let
|
|
8
|
+
let _v_c_util_dist_props_util = require("@v-c/util/dist/props-util");
|
|
9
|
+
let _v_c_util_dist_utils_transition = require("@v-c/util/dist/utils/transition");
|
|
7
10
|
var UniqueContainer = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
|
|
8
11
|
const motionVisible = (0, vue.shallowRef)(false);
|
|
9
|
-
const { open, isMobile, align, ready, offsetR, offsetB, offsetX, offsetY } = (0,
|
|
12
|
+
const { open, isMobile, align, ready, offsetR, offsetB, offsetX, offsetY } = (0, _v_c_util_dist_props_util.toPropsRefs)(props, "open", "isMobile", "align", "ready", "offsetR", "offsetB", "offsetX", "offsetY");
|
|
10
13
|
const offsetStyle = require_useOffsetStyle.default(isMobile, ready, open, align, offsetR, offsetB, offsetX, offsetY);
|
|
11
14
|
const cachedOffsetStyleRef = (0, vue.shallowRef)(offsetStyle.value);
|
|
12
15
|
(0, vue.watchEffect)(() => {
|
|
13
16
|
if (ready.value) cachedOffsetStyleRef.value = offsetStyle.value;
|
|
14
17
|
});
|
|
15
|
-
(0, vue.watch)(open,
|
|
16
|
-
await (0, vue.nextTick)();
|
|
18
|
+
(0, vue.watch)(open, (nextVisible) => {
|
|
17
19
|
if (nextVisible) motionVisible.value = true;
|
|
18
20
|
});
|
|
19
21
|
return () => {
|
|
@@ -23,7 +25,7 @@ var UniqueContainer = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
|
|
|
23
25
|
sizeStyle.width = `${popupSize.width}px`;
|
|
24
26
|
sizeStyle.height = `${popupSize.height}px`;
|
|
25
27
|
}
|
|
26
|
-
const baseTransitionProps = (0,
|
|
28
|
+
const baseTransitionProps = (0, _v_c_util_dist_utils_transition.getTransitionProps)(motion?.name, motion);
|
|
27
29
|
const mergedTransitionProps = {
|
|
28
30
|
...baseTransitionProps,
|
|
29
31
|
onBeforeEnter: (element) => {
|
|
@@ -36,6 +38,7 @@ var UniqueContainer = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
|
|
|
36
38
|
},
|
|
37
39
|
onAfterLeave: (element) => {
|
|
38
40
|
motionVisible.value = false;
|
|
41
|
+
cachedOffsetStyleRef.value = {};
|
|
39
42
|
baseTransitionProps.onAfterLeave?.(element);
|
|
40
43
|
}
|
|
41
44
|
};
|
|
@@ -124,7 +127,7 @@ var UniqueContainer = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
|
|
|
124
127
|
default: void 0
|
|
125
128
|
},
|
|
126
129
|
uniqueContainerStyle: {
|
|
127
|
-
type:
|
|
130
|
+
type: Object,
|
|
128
131
|
required: false,
|
|
129
132
|
default: void 0
|
|
130
133
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import useOffsetStyle from "../hooks/useOffsetStyle.js";
|
|
2
|
-
import { Transition, createVNode, defineComponent,
|
|
2
|
+
import { Transition, createVNode, defineComponent, shallowRef, vShow, watch, watchEffect, withDirectives } from "vue";
|
|
3
3
|
import { toPropsRefs } from "@v-c/util/dist/props-util";
|
|
4
4
|
import { getTransitionProps } from "@v-c/util/dist/utils/transition";
|
|
5
5
|
var UniqueContainer_default = /* @__PURE__ */ defineComponent((props) => {
|
|
@@ -10,8 +10,7 @@ var UniqueContainer_default = /* @__PURE__ */ defineComponent((props) => {
|
|
|
10
10
|
watchEffect(() => {
|
|
11
11
|
if (ready.value) cachedOffsetStyleRef.value = offsetStyle.value;
|
|
12
12
|
});
|
|
13
|
-
watch(open,
|
|
14
|
-
await nextTick();
|
|
13
|
+
watch(open, (nextVisible) => {
|
|
15
14
|
if (nextVisible) motionVisible.value = true;
|
|
16
15
|
});
|
|
17
16
|
return () => {
|
|
@@ -34,6 +33,7 @@ var UniqueContainer_default = /* @__PURE__ */ defineComponent((props) => {
|
|
|
34
33
|
},
|
|
35
34
|
onAfterLeave: (element) => {
|
|
36
35
|
motionVisible.value = false;
|
|
36
|
+
cachedOffsetStyleRef.value = {};
|
|
37
37
|
baseTransitionProps.onAfterLeave?.(element);
|
|
38
38
|
}
|
|
39
39
|
};
|
|
@@ -122,7 +122,7 @@ var UniqueContainer_default = /* @__PURE__ */ defineComponent((props) => {
|
|
|
122
122
|
default: void 0
|
|
123
123
|
},
|
|
124
124
|
uniqueContainerStyle: {
|
|
125
|
-
type:
|
|
125
|
+
type: Object,
|
|
126
126
|
required: false,
|
|
127
127
|
default: void 0
|
|
128
128
|
}
|
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
Object.
|
|
1
|
+
Object.defineProperties(exports, {
|
|
2
|
+
__esModule: { value: true },
|
|
3
|
+
[Symbol.toStringTag]: { value: "Module" }
|
|
4
|
+
});
|
|
2
5
|
const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
|
|
3
6
|
const require_context = require("../context.cjs");
|
|
4
7
|
const require_util = require("../util.cjs");
|
|
@@ -8,10 +11,10 @@ const require_index = require("../Popup/index.cjs");
|
|
|
8
11
|
const require_UniqueContainer = require("./UniqueContainer.cjs");
|
|
9
12
|
const require_useTargetState = require("./useTargetState.cjs");
|
|
10
13
|
let vue = require("vue");
|
|
11
|
-
let
|
|
12
|
-
|
|
13
|
-
let
|
|
14
|
-
let
|
|
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");
|
|
15
18
|
var UniqueProvider = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots }) => {
|
|
16
19
|
const [trigger, open, options, onTargetVisibleChanged] = require_useTargetState.default();
|
|
17
20
|
const mergedOptions = (0, vue.computed)(() => {
|
|
@@ -23,15 +26,15 @@ var UniqueProvider = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots })
|
|
|
23
26
|
const externalPopupRef = (0, vue.shallowRef)(null);
|
|
24
27
|
const resolveToElement = (node) => {
|
|
25
28
|
if (!node) return null;
|
|
26
|
-
if ((0,
|
|
29
|
+
if ((0, _v_c_util_dist_Dom_findDOMNode.isDOM)(node)) return node;
|
|
27
30
|
const exposed = node;
|
|
28
|
-
if ((0,
|
|
31
|
+
if ((0, _v_c_util_dist_Dom_findDOMNode.isDOM)(exposed?.$el)) return exposed.$el;
|
|
29
32
|
const nativeEl = exposed?.nativeElement;
|
|
30
|
-
if ((0,
|
|
31
|
-
if ((0,
|
|
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;
|
|
32
35
|
if (typeof exposed?.getElement === "function") {
|
|
33
36
|
const el = exposed.getElement();
|
|
34
|
-
if ((0,
|
|
37
|
+
if ((0, _v_c_util_dist_Dom_findDOMNode.isDOM)(el)) return el;
|
|
35
38
|
}
|
|
36
39
|
return null;
|
|
37
40
|
};
|
|
@@ -55,13 +58,22 @@ var UniqueProvider = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots })
|
|
|
55
58
|
trigger(false);
|
|
56
59
|
}, delay);
|
|
57
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
|
+
};
|
|
58
69
|
const onVisibleChanged = (visible) => {
|
|
59
70
|
onTargetVisibleChanged(visible);
|
|
71
|
+
inMotion.value = false;
|
|
72
|
+
onAlign();
|
|
60
73
|
};
|
|
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
74
|
const alignedClassName = (0, vue.computed)(() => {
|
|
63
75
|
if (!mergedOptions.value) return "";
|
|
64
|
-
return (0,
|
|
76
|
+
return (0, _v_c_util.classNames)(require_util.getAlignPopupClassName(mergedOptions.value?.builtinPlacements || {}, mergedOptions.value.prefixCls || "", alignInfo.value, false), mergedOptions.value?.getPopupClassNameFromAlign?.(alignInfo.value));
|
|
65
77
|
});
|
|
66
78
|
const contextValue = {
|
|
67
79
|
show,
|
|
@@ -69,7 +81,7 @@ var UniqueProvider = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots })
|
|
|
69
81
|
};
|
|
70
82
|
(0, vue.watch)(() => mergedOptions.value?.target, () => {
|
|
71
83
|
onAlign();
|
|
72
|
-
}
|
|
84
|
+
});
|
|
73
85
|
const onPrepare = () => {
|
|
74
86
|
onAlign();
|
|
75
87
|
return Promise.resolve();
|
|
@@ -87,10 +99,11 @@ var UniqueProvider = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots })
|
|
|
87
99
|
const prefixCls = mergedOptions?.value?.prefixCls;
|
|
88
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, {
|
|
89
101
|
"ref": setPopupRef,
|
|
90
|
-
"portal":
|
|
102
|
+
"portal": _v_c_portal.default,
|
|
91
103
|
"prefixCls": prefixCls,
|
|
92
104
|
"popup": mergedOptions.value?.popup,
|
|
93
|
-
"
|
|
105
|
+
"onEsc": mergedOptions.value?.onEsc,
|
|
106
|
+
"className": (0, _v_c_util.classNames)(mergedOptions.value?.popupClassName, alignedClassName.value, `${prefixCls}-unique-controlled`),
|
|
94
107
|
"style": mergedOptions.value?.popupStyle,
|
|
95
108
|
"target": mergedOptions.value?.target,
|
|
96
109
|
"open": open.value,
|
|
@@ -103,7 +116,7 @@ var UniqueProvider = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots })
|
|
|
103
116
|
"offsetY": offsetY.value,
|
|
104
117
|
"offsetR": offsetR.value,
|
|
105
118
|
"offsetB": offsetB.value,
|
|
106
|
-
"onAlign":
|
|
119
|
+
"onAlign": triggerAlign,
|
|
107
120
|
"onPrepare": onPrepare,
|
|
108
121
|
"onResize": (size) => {
|
|
109
122
|
popupSize.value = {
|
|
@@ -138,7 +151,7 @@ var UniqueProvider = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots })
|
|
|
138
151
|
},
|
|
139
152
|
"popupSize": popupSize.value,
|
|
140
153
|
"motion": mergedOptions.value?.popupMotion,
|
|
141
|
-
"uniqueContainerClassName": (0,
|
|
154
|
+
"uniqueContainerClassName": (0, _v_c_util.classNames)(mergedOptions.value?.uniqueContainerClassName, alignedClassName.value),
|
|
142
155
|
"uniqueContainerStyle": mergedOptions?.value?.uniqueContainerStyle
|
|
143
156
|
}, null)] })] })] });
|
|
144
157
|
};
|
|
@@ -52,10 +52,19 @@ var UniqueProvider_default = /* @__PURE__ */ defineComponent((props, { slots })
|
|
|
52
52
|
trigger(false);
|
|
53
53
|
}, delay);
|
|
54
54
|
};
|
|
55
|
+
const [ready, offsetX, offsetY, offsetR, offsetB, arrowX, arrowY, , , alignInfo, onAlign] = useAlign(open, popupEle, computed(() => mergedOptions.value?.target), computed(() => mergedOptions.value?.popupPlacement), computed(() => mergedOptions.value?.builtinPlacements || {}), computed(() => mergedOptions.value?.popupAlign), void 0, ref(false));
|
|
56
|
+
const inMotion = shallowRef(false);
|
|
57
|
+
watch(open, () => {
|
|
58
|
+
if (open.value) inMotion.value = true;
|
|
59
|
+
});
|
|
60
|
+
const triggerAlign = () => {
|
|
61
|
+
if (!inMotion.value) onAlign();
|
|
62
|
+
};
|
|
55
63
|
const onVisibleChanged = (visible) => {
|
|
56
64
|
onTargetVisibleChanged(visible);
|
|
65
|
+
inMotion.value = false;
|
|
66
|
+
onAlign();
|
|
57
67
|
};
|
|
58
|
-
const [ready, offsetX, offsetY, offsetR, offsetB, arrowX, arrowY, , , alignInfo, onAlign] = useAlign(open, popupEle, computed(() => mergedOptions.value?.target), computed(() => mergedOptions.value?.popupPlacement), computed(() => mergedOptions.value?.builtinPlacements || {}), computed(() => mergedOptions.value?.popupAlign), void 0, ref(false));
|
|
59
68
|
const alignedClassName = computed(() => {
|
|
60
69
|
if (!mergedOptions.value) return "";
|
|
61
70
|
return classNames(getAlignPopupClassName(mergedOptions.value?.builtinPlacements || {}, mergedOptions.value.prefixCls || "", alignInfo.value, false), mergedOptions.value?.getPopupClassNameFromAlign?.(alignInfo.value));
|
|
@@ -66,7 +75,7 @@ var UniqueProvider_default = /* @__PURE__ */ defineComponent((props, { slots })
|
|
|
66
75
|
};
|
|
67
76
|
watch(() => mergedOptions.value?.target, () => {
|
|
68
77
|
onAlign();
|
|
69
|
-
}
|
|
78
|
+
});
|
|
70
79
|
const onPrepare = () => {
|
|
71
80
|
onAlign();
|
|
72
81
|
return Promise.resolve();
|
|
@@ -87,6 +96,7 @@ var UniqueProvider_default = /* @__PURE__ */ defineComponent((props, { slots })
|
|
|
87
96
|
"portal": Portal,
|
|
88
97
|
"prefixCls": prefixCls,
|
|
89
98
|
"popup": mergedOptions.value?.popup,
|
|
99
|
+
"onEsc": mergedOptions.value?.onEsc,
|
|
90
100
|
"className": classNames(mergedOptions.value?.popupClassName, alignedClassName.value, `${prefixCls}-unique-controlled`),
|
|
91
101
|
"style": mergedOptions.value?.popupStyle,
|
|
92
102
|
"target": mergedOptions.value?.target,
|
|
@@ -100,7 +110,7 @@ var UniqueProvider_default = /* @__PURE__ */ defineComponent((props, { slots })
|
|
|
100
110
|
"offsetY": offsetY.value,
|
|
101
111
|
"offsetR": offsetR.value,
|
|
102
112
|
"offsetB": offsetB.value,
|
|
103
|
-
"onAlign":
|
|
113
|
+
"onAlign": triggerAlign,
|
|
104
114
|
"onPrepare": onPrepare,
|
|
105
115
|
"onResize": (size) => {
|
|
106
116
|
popupSize.value = {
|
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
Object.
|
|
1
|
+
Object.defineProperties(exports, {
|
|
2
|
+
__esModule: { value: true },
|
|
3
|
+
[Symbol.toStringTag]: { value: "Module" }
|
|
4
|
+
});
|
|
2
5
|
const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
|
|
3
6
|
let vue = require("vue");
|
|
4
7
|
function useTargetState() {
|
|
@@ -11,7 +14,6 @@ function useTargetState() {
|
|
|
11
14
|
if (nextOptions === false) {
|
|
12
15
|
pendingOptionsRef.value = null;
|
|
13
16
|
open.value = false;
|
|
14
|
-
isAnimating.value = false;
|
|
15
17
|
} else if (isAnimating.value && wasOpen) pendingOptionsRef.value = nextOptions;
|
|
16
18
|
else {
|
|
17
19
|
open.value = true;
|
package/dist/context.cjs
CHANGED
package/dist/context.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { PortalProps } from '@v-c/portal';
|
|
1
2
|
import { CSSMotionProps } from '@v-c/util/dist/utils/transition';
|
|
2
3
|
import { CSSProperties, InjectionKey, Ref } from 'vue';
|
|
3
4
|
import { TriggerProps } from './index';
|
|
@@ -32,6 +33,7 @@ export interface UniqueShowOptions {
|
|
|
32
33
|
arrow?: ArrowTypeOuter;
|
|
33
34
|
getPopupContainer?: TriggerProps['getPopupContainer'];
|
|
34
35
|
getPopupClassNameFromAlign?: (align: AlignType) => string;
|
|
36
|
+
onEsc?: PortalProps['onEsc'];
|
|
35
37
|
}
|
|
36
38
|
export interface UniqueContextProps {
|
|
37
39
|
show: (options: UniqueShowOptions, isOpen: () => boolean) => void;
|
package/dist/hooks/useAction.cjs
CHANGED
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
Object.
|
|
1
|
+
Object.defineProperties(exports, {
|
|
2
|
+
__esModule: { value: true },
|
|
3
|
+
[Symbol.toStringTag]: { value: "Module" }
|
|
4
|
+
});
|
|
2
5
|
const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
|
|
3
6
|
let vue = require("vue");
|
|
4
7
|
function toArray(val) {
|