@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.
@@ -1,366 +1,312 @@
1
- "use strict";
2
- Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
- const vue = require("vue");
4
- const ResizeObserver = require("@v-c/resize-observer");
5
- const util = require("@v-c/util");
6
- const propsUtil = require("@v-c/util/dist/props-util");
7
- const transition = require("@v-c/util/dist/utils/transition");
8
- const useOffsetStyle = require("../hooks/useOffsetStyle.cjs");
9
- const Arrow = require("./Arrow.cjs");
10
- const Mask = require("./Mask.cjs");
11
- const PopupContent = require("./PopupContent.cjs");
12
- const defaults = {
13
- autoDestroy: true
14
- };
15
- const Popup = /* @__PURE__ */ vue.defineComponent((props, {
16
- attrs,
17
- slots,
18
- expose
19
- }) => {
20
- const popupContent = vue.computed(() => typeof props.popup === "function" ? props.popup() : props.popup);
21
- const {
22
- offsetX,
23
- offsetR,
24
- offsetY,
25
- offsetB,
26
- open,
27
- ready,
28
- align
29
- } = propsUtil.toPropsRefs(props, "offsetX", "offsetB", "offsetY", "offsetR", "ready", "open", "align");
30
- const isNodeVisible = vue.computed(() => props.open || props.keepDom);
31
- const isMobile = vue.computed(() => !!props.mobile);
32
- const getPopupContainerNeedParams = props?.getPopupContainer?.length > 0;
33
- const mergedProps = vue.computed(() => {
34
- const {
35
- mobile,
36
- mask,
37
- maskMotion,
38
- motion
39
- } = props;
40
- if (mobile) {
41
- return [mobile.mask, mobile.maskMotion, mobile.motion];
42
- }
43
- return [mask, maskMotion, motion];
44
- });
45
- const show = vue.shallowRef(!props.getPopupContainer || !getPopupContainerNeedParams);
46
- vue.watchEffect(async () => {
47
- await vue.nextTick();
48
- const getPopupContainerNeedParams2 = props?.getPopupContainer?.length > 0;
49
- const target = props.target;
50
- if (!show.value && getPopupContainerNeedParams2 && target) {
51
- show.value = true;
52
- }
53
- });
54
- const onInternalResize = (size, element) => {
55
- props?.onResize?.(size, element);
56
- props?.onAlign?.();
57
- };
58
- const offsetStyle = useOffsetStyle.default(isMobile, ready, open, align, offsetR, offsetB, offsetX, offsetY);
59
- const popupElementRef = vue.shallowRef();
60
- expose({
61
- getElement: () => popupElementRef.value,
62
- nativeElement: popupElementRef
63
- });
64
- return () => {
65
- if (!show.value) {
66
- return null;
67
- }
68
- const {
69
- stretch,
70
- targetHeight,
71
- targetWidth,
72
- portal: Portal,
73
- forceRender,
74
- getPopupContainer,
75
- target,
76
- autoDestroy,
77
- zIndex,
78
- prefixCls,
79
- // Arrow
80
- arrow,
81
- arrowPos,
82
- align: align2,
83
- onMouseEnter,
84
- onMouseLeave,
85
- onPointerEnter,
86
- onPointerDownCapture,
87
- onClick,
88
- fresh,
89
- onPrepare,
90
- onVisibleChanged
91
- } = props;
92
- const miscStyle = {};
93
- if (stretch) {
94
- if (stretch.includes("height") && targetHeight) {
95
- miscStyle.height = `${targetHeight}px`;
96
- } else if (stretch.includes("minHeight") && targetHeight) {
97
- miscStyle.minHeight = `${targetHeight}px`;
98
- }
99
- if (stretch.includes("width") && targetWidth) {
100
- miscStyle.width = `${targetWidth}px`;
101
- } else if (stretch.includes("minWidth") && targetWidth) {
102
- miscStyle.minWidth = `${targetWidth}px`;
103
- }
104
- }
105
- if (!open.value) {
106
- miscStyle.pointerEvents = "none";
107
- }
108
- const [mergedMask, mergedMaskMotion, mergedPopupMotion] = mergedProps.value;
109
- const popupMotionName = mergedPopupMotion?.name ?? mergedPopupMotion?.motionName;
110
- const baseTransitionProps = transition.getTransitionProps(popupMotionName, mergedPopupMotion);
111
- const mergedTransitionProps = {
112
- ...baseTransitionProps,
113
- onBeforeEnter: (element) => {
114
- onPrepare?.();
115
- baseTransitionProps?.onBeforeEnter?.(element);
116
- },
117
- onAfterEnter: (element) => {
118
- baseTransitionProps?.onAfterEnter?.(element);
119
- onVisibleChanged?.(true);
120
- },
121
- onAfterLeave: (element) => {
122
- baseTransitionProps.onAfterLeave?.(element);
123
- onVisibleChanged?.(false);
124
- }
125
- };
126
- const cls = util.classNames(prefixCls, attrs.class, props.className, {
127
- [`${prefixCls}-mobile`]: isMobile.value
128
- });
129
- return vue.createVNode(Portal, {
130
- "open": forceRender || isNodeVisible.value,
131
- "getContainer": getPopupContainer && (() => getPopupContainer(target)),
132
- "autoDestroy": autoDestroy
133
- }, {
134
- default: () => [vue.createVNode(Mask.default, {
135
- "prefixCls": prefixCls,
136
- "open": open.value,
137
- "zIndex": zIndex,
138
- "mask": mergedMask,
139
- "motion": mergedMaskMotion,
140
- "mobile": isMobile.value
141
- }, null), vue.createVNode(ResizeObserver, {
142
- "onResize": onInternalResize,
143
- "disabled": !open.value
144
- }, {
145
- default: () => [vue.createVNode(vue.Transition, mergedTransitionProps, {
146
- default: () => [vue.withDirectives(vue.createVNode("div", vue.mergeProps({
147
- "ref": popupElementRef,
148
- "class": cls,
149
- "style": [{
150
- "--arrow-x": `${arrowPos.x || 0}px`,
151
- "--arrow-y": `${arrowPos.y || 0}px`
152
- }, offsetStyle.value, miscStyle, {
153
- boxSizing: "border-box",
154
- zIndex
155
- }, props.style],
156
- "onMouseenter": onMouseEnter,
157
- "onMouseleave": onMouseLeave,
158
- "onPointerenter": onPointerEnter,
159
- "onClick": onClick
160
- }, {
161
- onPointerdownCapture: onPointerDownCapture
162
- }), [!!arrow && vue.createVNode(Arrow.Arrow, {
163
- "prefixCls": prefixCls,
164
- "arrow": arrow === true ? {} : arrow,
165
- "arrowPos": arrowPos,
166
- "align": align2
167
- }, null), vue.createVNode(PopupContent.default, {
168
- "cache": !open.value && !fresh
169
- }, {
170
- default: () => [popupContent.value]
171
- })]), [[vue.vShow, open.value]])]
172
- })]
173
- }), slots?.default?.()]
174
- });
175
- };
176
- }, {
177
- props: /* @__PURE__ */ vue.mergeDefaults({
178
- prefixCls: {
179
- type: String,
180
- required: true,
181
- default: void 0
182
- },
183
- className: {
184
- type: String,
185
- required: false,
186
- default: void 0
187
- },
188
- style: {
189
- type: null,
190
- required: false,
191
- default: void 0
192
- },
193
- popup: {
194
- type: Function,
195
- required: false,
196
- skipCheck: true,
197
- default: void 0
198
- },
199
- target: {
200
- type: null,
201
- required: true,
202
- default: void 0
203
- },
204
- onMouseEnter: {
205
- type: Function,
206
- required: false,
207
- default: void 0
208
- },
209
- onMouseLeave: {
210
- type: Function,
211
- required: false,
212
- default: void 0
213
- },
214
- onPointerEnter: {
215
- type: Function,
216
- required: false,
217
- default: void 0
218
- },
219
- onPointerDownCapture: {
220
- type: Function,
221
- required: false,
222
- default: void 0
223
- },
224
- zIndex: {
225
- type: Number,
226
- required: false,
227
- default: void 0
228
- },
229
- mask: {
230
- type: Boolean,
231
- required: false,
232
- default: void 0
233
- },
234
- onVisibleChanged: {
235
- type: Function,
236
- required: true,
237
- default: void 0
238
- },
239
- align: {
240
- type: Object,
241
- required: false,
242
- default: void 0
243
- },
244
- arrow: {
245
- type: [Object, Boolean],
246
- required: false,
247
- default: void 0
248
- },
249
- arrowPos: {
250
- type: Object,
251
- required: true,
252
- default: void 0
253
- },
254
- open: {
255
- type: Boolean,
256
- required: true,
257
- default: void 0
258
- },
259
- keepDom: {
260
- type: Boolean,
261
- required: true,
262
- default: void 0
263
- },
264
- fresh: {
265
- type: Boolean,
266
- required: false,
267
- default: void 0
268
- },
269
- onClick: {
270
- type: Function,
271
- required: false,
272
- default: void 0
273
- },
274
- motion: {
275
- type: Object,
276
- required: false,
277
- default: void 0
278
- },
279
- maskMotion: {
280
- type: Object,
281
- required: false,
282
- default: void 0
283
- },
284
- forceRender: {
285
- type: Boolean,
286
- required: false,
287
- default: void 0
288
- },
289
- getPopupContainer: {
290
- type: Function,
291
- required: false,
292
- default: void 0
293
- },
294
- autoDestroy: {
295
- type: Boolean,
296
- required: false,
297
- default: void 0
298
- },
299
- portal: {
300
- type: null,
301
- required: true,
302
- default: void 0
303
- },
304
- ready: {
305
- type: Boolean,
306
- required: true,
307
- default: void 0
308
- },
309
- offsetX: {
310
- type: Number,
311
- required: true,
312
- default: void 0
313
- },
314
- offsetY: {
315
- type: Number,
316
- required: true,
317
- default: void 0
318
- },
319
- offsetR: {
320
- type: Number,
321
- required: true,
322
- default: void 0
323
- },
324
- offsetB: {
325
- type: Number,
326
- required: true,
327
- default: void 0
328
- },
329
- onAlign: {
330
- type: null,
331
- required: true,
332
- default: void 0
333
- },
334
- onPrepare: {
335
- type: Function,
336
- required: true,
337
- default: void 0
338
- },
339
- stretch: {
340
- type: String,
341
- required: false,
342
- default: void 0
343
- },
344
- targetWidth: {
345
- type: Number,
346
- required: false,
347
- default: void 0
348
- },
349
- targetHeight: {
350
- type: Number,
351
- required: false,
352
- default: void 0
353
- },
354
- onResize: {
355
- type: null,
356
- required: false,
357
- default: void 0
358
- },
359
- mobile: {
360
- type: Object,
361
- required: false,
362
- default: void 0
363
- }
364
- }, defaults)
365
- });
366
- exports.default = Popup;
1
+ Object.defineProperty(exports, "__esModule", { value: true });
2
+ const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
3
+ const require_useOffsetStyle = require("../hooks/useOffsetStyle.cjs");
4
+ const require_Arrow = require("./Arrow.cjs");
5
+ const require_Mask = require("./Mask.cjs");
6
+ const require_PopupContent = require("./PopupContent.cjs");
7
+ let vue = require("vue");
8
+ let __v_c_resize_observer = require("@v-c/resize-observer");
9
+ __v_c_resize_observer = require_rolldown_runtime.__toESM(__v_c_resize_observer);
10
+ let __v_c_util = require("@v-c/util");
11
+ let __v_c_util_dist_props_util = require("@v-c/util/dist/props-util");
12
+ let __v_c_util_dist_utils_transition = require("@v-c/util/dist/utils/transition");
13
+ var Popup = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs, slots, expose }) => {
14
+ const popupContent = (0, vue.computed)(() => typeof props.popup === "function" ? props.popup() : props.popup);
15
+ 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
+ const isNodeVisible = (0, vue.computed)(() => props.open || props.keepDom);
17
+ const isMobile = (0, vue.computed)(() => !!props.mobile);
18
+ const getPopupContainerNeedParams = props?.getPopupContainer?.length > 0;
19
+ const mergedProps = (0, vue.computed)(() => {
20
+ const { mobile, mask, maskMotion, motion } = props;
21
+ if (mobile) return [
22
+ mobile.mask,
23
+ mobile.maskMotion,
24
+ mobile.motion
25
+ ];
26
+ return [
27
+ mask,
28
+ maskMotion,
29
+ motion
30
+ ];
31
+ });
32
+ const show = (0, vue.shallowRef)(!props.getPopupContainer || !getPopupContainerNeedParams);
33
+ (0, vue.watchEffect)(async () => {
34
+ await (0, vue.nextTick)();
35
+ const getPopupContainerNeedParams$1 = props?.getPopupContainer?.length > 0;
36
+ const target = props.target;
37
+ if (!show.value && getPopupContainerNeedParams$1 && target) show.value = true;
38
+ });
39
+ const onInternalResize = (size, element) => {
40
+ props?.onResize?.(size, element);
41
+ props?.onAlign?.();
42
+ };
43
+ const offsetStyle = require_useOffsetStyle.default(isMobile, ready, open, align, offsetR, offsetB, offsetX, offsetY);
44
+ const popupElementRef = (0, vue.shallowRef)();
45
+ expose({
46
+ getElement: () => popupElementRef.value,
47
+ nativeElement: popupElementRef
48
+ });
49
+ return () => {
50
+ 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;
52
+ const miscStyle = {};
53
+ if (stretch) {
54
+ if (stretch.includes("height") && targetHeight) miscStyle.height = `${targetHeight}px`;
55
+ else if (stretch.includes("minHeight") && targetHeight) miscStyle.minHeight = `${targetHeight}px`;
56
+ if (stretch.includes("width") && targetWidth) miscStyle.width = `${targetWidth}px`;
57
+ else if (stretch.includes("minWidth") && targetWidth) miscStyle.minWidth = `${targetWidth}px`;
58
+ }
59
+ if (!open.value) miscStyle.pointerEvents = "none";
60
+ const [mergedMask, mergedMaskMotion, mergedPopupMotion] = mergedProps.value;
61
+ const baseTransitionProps = (0, __v_c_util_dist_utils_transition.getTransitionProps)(mergedPopupMotion?.name ?? mergedPopupMotion?.motionName, mergedPopupMotion);
62
+ const mergedTransitionProps = {
63
+ ...baseTransitionProps,
64
+ onBeforeEnter: (element) => {
65
+ onPrepare?.();
66
+ baseTransitionProps?.onBeforeEnter?.(element);
67
+ },
68
+ onAfterEnter: (element) => {
69
+ baseTransitionProps?.onAfterEnter?.(element);
70
+ onVisibleChanged?.(true);
71
+ },
72
+ onAfterLeave: (element) => {
73
+ baseTransitionProps.onAfterLeave?.(element);
74
+ onVisibleChanged?.(false);
75
+ }
76
+ };
77
+ const cls = (0, __v_c_util.classNames)(prefixCls, attrs.class, props.className, { [`${prefixCls}-mobile`]: isMobile.value });
78
+ return (0, vue.createVNode)(Portal, {
79
+ "open": forceRender || isNodeVisible.value,
80
+ "getContainer": getPopupContainer && (() => getPopupContainer(target)),
81
+ "autoDestroy": autoDestroy
82
+ }, { default: () => [
83
+ (0, vue.createVNode)(require_Mask.default, {
84
+ "prefixCls": prefixCls,
85
+ "open": open.value,
86
+ "zIndex": zIndex,
87
+ "mask": mergedMask,
88
+ "motion": mergedMaskMotion,
89
+ "mobile": isMobile.value
90
+ }, null),
91
+ (0, vue.createVNode)(__v_c_resize_observer.default, {
92
+ "onResize": onInternalResize,
93
+ "disabled": !open.value
94
+ }, { default: () => [(0, vue.createVNode)(vue.Transition, mergedTransitionProps, { default: () => [(0, vue.withDirectives)((0, vue.createVNode)("div", (0, vue.mergeProps)({
95
+ "ref": popupElementRef,
96
+ "class": cls,
97
+ "style": [
98
+ {
99
+ "--arrow-x": `${arrowPos.x || 0}px`,
100
+ "--arrow-y": `${arrowPos.y || 0}px`
101
+ },
102
+ offsetStyle.value,
103
+ miscStyle,
104
+ {
105
+ boxSizing: "border-box",
106
+ zIndex
107
+ },
108
+ props.style
109
+ ],
110
+ "onMouseenter": onMouseEnter,
111
+ "onMouseleave": onMouseLeave,
112
+ "onPointerenter": onPointerEnter,
113
+ "onClick": onClick
114
+ }, { onPointerdownCapture: onPointerDownCapture }), [!!arrow && (0, vue.createVNode)(require_Arrow.Arrow, {
115
+ "prefixCls": prefixCls,
116
+ "arrow": arrow === true ? {} : arrow,
117
+ "arrowPos": arrowPos,
118
+ "align": align$1
119
+ }, null), (0, vue.createVNode)(require_PopupContent.default, { "cache": !open.value && !fresh }, { default: () => [popupContent.value] })]), [[vue.vShow, open.value]])] })] }),
120
+ slots?.default?.()
121
+ ] });
122
+ };
123
+ }, { props: /* @__PURE__ */ (0, vue.mergeDefaults)({
124
+ prefixCls: {
125
+ type: String,
126
+ required: true,
127
+ default: void 0
128
+ },
129
+ className: {
130
+ type: String,
131
+ required: false,
132
+ default: void 0
133
+ },
134
+ style: {
135
+ type: null,
136
+ required: false,
137
+ default: void 0
138
+ },
139
+ popup: {
140
+ type: Function,
141
+ required: false,
142
+ skipCheck: true,
143
+ default: void 0
144
+ },
145
+ target: {
146
+ type: null,
147
+ required: true,
148
+ default: void 0
149
+ },
150
+ onMouseEnter: {
151
+ type: Function,
152
+ required: false,
153
+ default: void 0
154
+ },
155
+ onMouseLeave: {
156
+ type: Function,
157
+ required: false,
158
+ default: void 0
159
+ },
160
+ onPointerEnter: {
161
+ type: Function,
162
+ required: false,
163
+ default: void 0
164
+ },
165
+ onPointerDownCapture: {
166
+ type: Function,
167
+ required: false,
168
+ default: void 0
169
+ },
170
+ zIndex: {
171
+ type: Number,
172
+ required: false,
173
+ default: void 0
174
+ },
175
+ mask: {
176
+ type: Boolean,
177
+ required: false,
178
+ default: void 0
179
+ },
180
+ onVisibleChanged: {
181
+ type: Function,
182
+ required: true,
183
+ default: void 0
184
+ },
185
+ align: {
186
+ type: Object,
187
+ required: false,
188
+ default: void 0
189
+ },
190
+ arrow: {
191
+ type: [Object, Boolean],
192
+ required: false,
193
+ default: void 0
194
+ },
195
+ arrowPos: {
196
+ type: Object,
197
+ required: true,
198
+ default: void 0
199
+ },
200
+ open: {
201
+ type: Boolean,
202
+ required: true,
203
+ default: void 0
204
+ },
205
+ keepDom: {
206
+ type: Boolean,
207
+ required: true,
208
+ default: void 0
209
+ },
210
+ fresh: {
211
+ type: Boolean,
212
+ required: false,
213
+ default: void 0
214
+ },
215
+ onClick: {
216
+ type: Function,
217
+ required: false,
218
+ default: void 0
219
+ },
220
+ motion: {
221
+ type: Object,
222
+ required: false,
223
+ default: void 0
224
+ },
225
+ maskMotion: {
226
+ type: Object,
227
+ required: false,
228
+ default: void 0
229
+ },
230
+ forceRender: {
231
+ type: Boolean,
232
+ required: false,
233
+ default: void 0
234
+ },
235
+ getPopupContainer: {
236
+ type: Function,
237
+ required: false,
238
+ default: void 0
239
+ },
240
+ autoDestroy: {
241
+ type: Boolean,
242
+ required: false,
243
+ default: void 0
244
+ },
245
+ portal: {
246
+ type: null,
247
+ required: true,
248
+ default: void 0
249
+ },
250
+ ready: {
251
+ type: Boolean,
252
+ required: true,
253
+ default: void 0
254
+ },
255
+ offsetX: {
256
+ type: Number,
257
+ required: true,
258
+ default: void 0
259
+ },
260
+ offsetY: {
261
+ type: Number,
262
+ required: true,
263
+ default: void 0
264
+ },
265
+ offsetR: {
266
+ type: Number,
267
+ required: true,
268
+ default: void 0
269
+ },
270
+ offsetB: {
271
+ type: Number,
272
+ required: true,
273
+ default: void 0
274
+ },
275
+ onAlign: {
276
+ type: null,
277
+ required: true,
278
+ default: void 0
279
+ },
280
+ onPrepare: {
281
+ type: Function,
282
+ required: true,
283
+ default: void 0
284
+ },
285
+ stretch: {
286
+ type: String,
287
+ required: false,
288
+ default: void 0
289
+ },
290
+ targetWidth: {
291
+ type: Number,
292
+ required: false,
293
+ default: void 0
294
+ },
295
+ targetHeight: {
296
+ type: Number,
297
+ required: false,
298
+ default: void 0
299
+ },
300
+ onResize: {
301
+ type: null,
302
+ required: false,
303
+ default: void 0
304
+ },
305
+ mobile: {
306
+ type: Object,
307
+ required: false,
308
+ default: void 0
309
+ }
310
+ }, { autoDestroy: true }) });
311
+ var Popup_default = Popup;
312
+ exports.default = Popup_default;