@v-c/trigger 1.0.6 → 1.0.8

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.
@@ -237,7 +237,7 @@ var Popup_default = /* @__PURE__ */ defineComponent((props, { attrs, slots, expo
237
237
  default: void 0
238
238
  },
239
239
  getPopupContainer: {
240
- type: Function,
240
+ type: [Function, Boolean],
241
241
  required: false,
242
242
  default: void 0
243
243
  },
package/dist/index.d.ts CHANGED
@@ -25,7 +25,7 @@ export interface TriggerProps {
25
25
  onPopupVisibleChange?: (visible: boolean) => void;
26
26
  /** @deprecated Use `afterOpenChange` instead */
27
27
  afterPopupVisibleChange?: (visible: boolean) => void;
28
- getPopupContainer?: (node: HTMLElement) => HTMLElement;
28
+ getPopupContainer?: ((node: HTMLElement) => HTMLElement) | false;
29
29
  forceRender?: boolean;
30
30
  autoDestroy?: boolean;
31
31
  mask?: boolean;
package/dist/index.js CHANGED
@@ -437,7 +437,7 @@ function generateTrigger(PortalComponent = Portal) {
437
437
  default: void 0
438
438
  },
439
439
  getPopupContainer: {
440
- type: Function,
440
+ type: [Function, Boolean],
441
441
  required: false,
442
442
  default: void 0
443
443
  },
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@v-c/trigger",
3
3
  "type": "module",
4
- "version": "1.0.6",
4
+ "version": "1.0.8",
5
5
  "description": "",
6
6
  "publishConfig": {
7
7
  "access": "public"
@@ -15,7 +15,7 @@
15
15
  ".": {
16
16
  "types": "./dist/index.d.ts",
17
17
  "import": "./dist/index.js",
18
- "require": "./dist/index.cjs"
18
+ "default": "./dist/index.js"
19
19
  },
20
20
  "./dist/*": "./dist/*",
21
21
  "./package.json": "./package.json"
@@ -31,7 +31,7 @@
31
31
  "dependencies": {
32
32
  "@v-c/portal": "^1.0.6",
33
33
  "@v-c/resize-observer": "^1.0.8",
34
- "@v-c/util": "^1.0.9"
34
+ "@v-c/util": "^1.0.11"
35
35
  },
36
36
  "scripts": {
37
37
  "build": "vite build",
@@ -1,63 +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
- let _v_c_util = require("@v-c/util");
5
- const Arrow = /* @__PURE__ */ (0, vue.defineComponent)({
6
- props: {
7
- prefixCls: {
8
- type: String,
9
- required: true,
10
- default: void 0
11
- },
12
- align: {
13
- type: Object,
14
- required: true,
15
- default: void 0
16
- },
17
- arrow: {
18
- type: Object,
19
- required: true,
20
- default: void 0
21
- },
22
- arrowPos: {
23
- type: Object,
24
- required: true,
25
- default: void 0
26
- }
27
- },
28
- name: "Arrow",
29
- setup(props, { expose }) {
30
- const arrowRef = (0, vue.shallowRef)();
31
- expose({ arrowRef });
32
- return () => {
33
- const { prefixCls, align, arrow, arrowPos } = props;
34
- const { className, content, style } = arrow || {};
35
- const { x = 0, y = 0 } = arrowPos;
36
- if (!align || !align.points) return null;
37
- const alignStyle = { position: "absolute" };
38
- if (align.autoArrow !== false) {
39
- const popupPoints = align.points[0];
40
- const targetPoints = align.points[1];
41
- const popupTB = popupPoints[0];
42
- const popupLR = popupPoints[1];
43
- const targetTB = targetPoints[0];
44
- const targetLR = targetPoints[1];
45
- if (popupTB === targetTB || !["t", "b"].includes(popupTB)) alignStyle.top = `${y}px`;
46
- else if (popupTB === "t") alignStyle.top = 0;
47
- else alignStyle.bottom = 0;
48
- if (popupLR === targetLR || !["l", "r"].includes(popupLR)) alignStyle.left = `${x}px`;
49
- else if (popupLR === "l") alignStyle.left = 0;
50
- else alignStyle.right = 0;
51
- }
52
- return (0, vue.createVNode)("div", {
53
- "ref": arrowRef,
54
- "class": (0, _v_c_util.classNames)(`${prefixCls}-arrow`, className),
55
- "style": {
56
- ...alignStyle,
57
- ...style
58
- }
59
- }, [content]);
60
- };
61
- }
62
- });
63
- exports.Arrow = Arrow;
@@ -1,58 +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
- let _v_c_util_dist_utils_transition = require("@v-c/util/dist/utils/transition");
8
- var Mask = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs }) => {
9
- return () => {
10
- const { prefixCls, open, zIndex, mask, motion, mobile } = props;
11
- if (!mask) return null;
12
- return (0, vue.createVNode)(vue.Transition, (0, _v_c_util_dist_utils_transition.getTransitionProps)(motion?.name, motion), { default: () => [open ? (0, vue.createVNode)("div", {
13
- "style": { zIndex },
14
- "class": [
15
- `${prefixCls}-mask`,
16
- mobile && `${prefixCls}-mask-mobile`,
17
- attrs.class
18
- ]
19
- }, null) : null] });
20
- };
21
- }, {
22
- props: {
23
- prefixCls: {
24
- type: String,
25
- required: true,
26
- default: void 0
27
- },
28
- open: {
29
- type: Boolean,
30
- required: false,
31
- default: void 0
32
- },
33
- zIndex: {
34
- type: Number,
35
- required: false,
36
- default: void 0
37
- },
38
- mask: {
39
- type: Boolean,
40
- required: false,
41
- default: void 0
42
- },
43
- motion: {
44
- type: Object,
45
- required: false,
46
- default: void 0
47
- },
48
- mobile: {
49
- type: Boolean,
50
- required: false,
51
- default: void 0
52
- }
53
- },
54
- inheritAttrs: false,
55
- name: "PopupMask"
56
- });
57
- var Mask_default = Mask;
58
- exports.default = Mask_default;
@@ -1,27 +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
- var PopupContent = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots }) => {
8
- const cachedChildren = (0, vue.shallowRef)();
9
- return () => {
10
- const children = slots?.default?.();
11
- if (!props.cache) {
12
- cachedChildren.value = children;
13
- return children;
14
- }
15
- if (!cachedChildren.value) cachedChildren.value = children;
16
- return cachedChildren.value;
17
- };
18
- }, {
19
- props: { cache: {
20
- type: Boolean,
21
- required: false,
22
- default: void 0
23
- } },
24
- name: "PopupContext"
25
- });
26
- var PopupContent_default = PopupContent;
27
- exports.default = PopupContent_default;
@@ -1,318 +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_useOffsetStyle = require("../hooks/useOffsetStyle.cjs");
7
- const require_Arrow = require("./Arrow.cjs");
8
- const require_Mask = require("./Mask.cjs");
9
- let vue = require("vue");
10
- let _v_c_resize_observer = require("@v-c/resize-observer");
11
- let _v_c_util = require("@v-c/util");
12
- let _v_c_util_dist_props_util = require("@v-c/util/dist/props-util");
13
- let _v_c_util_dist_utils_transition = require("@v-c/util/dist/utils/transition");
14
- var Popup = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs, slots, expose }) => {
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
- (0, _v_c_resize_observer.useResizeObserver)(open, popupElementRef, onInternalResize);
50
- return () => {
51
- if (!show.value) return null;
52
- const { onEsc, stretch, targetHeight, targetWidth, portal: Portal, forceRender, getPopupContainer, target, autoDestroy, zIndex, prefixCls, arrow, arrowPos, align: align$1, onMouseEnter, onMouseLeave, onPointerEnter, onPointerDownCapture, onClick, onPrepare, onVisibleChanged } = props;
53
- const miscStyle = {};
54
- if (stretch) {
55
- if (stretch.includes("height") && targetHeight) miscStyle.height = `${targetHeight}px`;
56
- else if (stretch.includes("minHeight") && targetHeight) miscStyle.minHeight = `${targetHeight}px`;
57
- if (stretch.includes("width") && targetWidth) miscStyle.width = `${targetWidth}px`;
58
- else if (stretch.includes("minWidth") && targetWidth) miscStyle.minWidth = `${targetWidth}px`;
59
- }
60
- if (!open.value) miscStyle.pointerEvents = "none";
61
- const [mergedMask, mergedMaskMotion, mergedPopupMotion] = mergedProps.value;
62
- const popupMotionName = mergedPopupMotion?.name ?? mergedPopupMotion?.motionName;
63
- const baseTransitionProps = popupMotionName ? (0, _v_c_util_dist_utils_transition.getTransitionProps)(popupMotionName, mergedPopupMotion) : {
64
- appear: true,
65
- ...mergedPopupMotion || {}
66
- };
67
- const mergedTransitionProps = {
68
- appear: true,
69
- ...baseTransitionProps,
70
- onBeforeEnter: (element) => {
71
- onPrepare?.();
72
- baseTransitionProps?.onBeforeEnter?.(element);
73
- },
74
- onAfterEnter: (element) => {
75
- baseTransitionProps?.onAfterEnter?.(element);
76
- requestAnimationFrame(() => {
77
- onVisibleChanged?.(true);
78
- });
79
- },
80
- onAfterLeave: (element) => {
81
- baseTransitionProps.onAfterLeave?.(element);
82
- onVisibleChanged?.(false);
83
- }
84
- };
85
- const cls = (0, _v_c_util.classNames)(prefixCls, attrs.class, props.className, { [`${prefixCls}-mobile`]: isMobile.value });
86
- return (0, vue.createVNode)(Portal, {
87
- "open": forceRender || isNodeVisible.value,
88
- "getContainer": getPopupContainer && (() => getPopupContainer(target)),
89
- "autoDestroy": autoDestroy,
90
- "onEsc": onEsc
91
- }, { default: () => [
92
- (0, vue.createVNode)(require_Mask.default, {
93
- "prefixCls": prefixCls,
94
- "open": open.value,
95
- "zIndex": zIndex,
96
- "mask": mergedMask,
97
- "motion": mergedMaskMotion,
98
- "mobile": isMobile.value
99
- }, null),
100
- (0, vue.createVNode)(vue.Transition, mergedTransitionProps, { default: () => [(0, vue.withDirectives)((0, vue.createVNode)("div", (0, vue.mergeProps)({
101
- "ref": popupElementRef,
102
- "class": cls,
103
- "style": [
104
- {
105
- "--arrow-x": `${arrowPos.x || 0}px`,
106
- "--arrow-y": `${arrowPos.y || 0}px`
107
- },
108
- offsetStyle.value,
109
- miscStyle,
110
- {
111
- boxSizing: "border-box",
112
- zIndex
113
- },
114
- props.style
115
- ],
116
- "onMouseenter": onMouseEnter,
117
- "onMouseleave": onMouseLeave,
118
- "onPointerenter": onPointerEnter,
119
- "onClick": onClick
120
- }, { onPointerdownCapture: onPointerDownCapture }), [!!arrow && (0, vue.createVNode)(require_Arrow.Arrow, {
121
- "prefixCls": prefixCls,
122
- "arrow": arrow === true ? {} : arrow,
123
- "arrowPos": arrowPos,
124
- "align": align$1
125
- }, null), typeof props?.popup === "function" ? props.popup() : props.popup]), [[vue.vShow, open.value]])] }),
126
- slots?.default?.()
127
- ] });
128
- };
129
- }, { props: /* @__PURE__ */ (0, vue.mergeDefaults)({
130
- onEsc: {
131
- required: false,
132
- default: void 0
133
- },
134
- prefixCls: {
135
- type: String,
136
- required: true,
137
- default: void 0
138
- },
139
- className: {
140
- type: String,
141
- required: false,
142
- default: void 0
143
- },
144
- style: {
145
- type: Object,
146
- required: false,
147
- default: void 0
148
- },
149
- popup: {
150
- type: Function,
151
- required: false,
152
- skipCheck: true,
153
- default: void 0
154
- },
155
- target: {
156
- required: true,
157
- default: void 0
158
- },
159
- onMouseEnter: {
160
- type: Function,
161
- required: false,
162
- default: void 0
163
- },
164
- onMouseLeave: {
165
- type: Function,
166
- required: false,
167
- default: void 0
168
- },
169
- onPointerEnter: {
170
- type: Function,
171
- required: false,
172
- default: void 0
173
- },
174
- onPointerDownCapture: {
175
- type: Function,
176
- required: false,
177
- default: void 0
178
- },
179
- zIndex: {
180
- type: Number,
181
- required: false,
182
- default: void 0
183
- },
184
- mask: {
185
- type: Boolean,
186
- required: false,
187
- default: void 0
188
- },
189
- onVisibleChanged: {
190
- type: Function,
191
- required: true,
192
- default: void 0
193
- },
194
- align: {
195
- type: Object,
196
- required: false,
197
- default: void 0
198
- },
199
- arrow: {
200
- type: [Object, Boolean],
201
- required: false,
202
- default: void 0
203
- },
204
- arrowPos: {
205
- type: Object,
206
- required: true,
207
- default: void 0
208
- },
209
- open: {
210
- type: Boolean,
211
- required: true,
212
- default: void 0
213
- },
214
- keepDom: {
215
- type: Boolean,
216
- required: true,
217
- default: void 0
218
- },
219
- fresh: {
220
- type: Boolean,
221
- required: false,
222
- default: void 0
223
- },
224
- onClick: {
225
- type: Function,
226
- required: false,
227
- default: void 0
228
- },
229
- motion: {
230
- type: Object,
231
- required: false,
232
- default: void 0
233
- },
234
- maskMotion: {
235
- type: Object,
236
- required: false,
237
- default: void 0
238
- },
239
- forceRender: {
240
- type: Boolean,
241
- required: false,
242
- default: void 0
243
- },
244
- getPopupContainer: {
245
- type: Function,
246
- required: false,
247
- default: void 0
248
- },
249
- autoDestroy: {
250
- type: Boolean,
251
- required: false,
252
- default: void 0
253
- },
254
- portal: {
255
- required: true,
256
- default: void 0
257
- },
258
- ready: {
259
- type: Boolean,
260
- required: true,
261
- default: void 0
262
- },
263
- offsetX: {
264
- type: Number,
265
- required: true,
266
- default: void 0
267
- },
268
- offsetY: {
269
- type: Number,
270
- required: true,
271
- default: void 0
272
- },
273
- offsetR: {
274
- type: Number,
275
- required: true,
276
- default: void 0
277
- },
278
- offsetB: {
279
- type: Number,
280
- required: true,
281
- default: void 0
282
- },
283
- onAlign: {
284
- required: true,
285
- default: void 0
286
- },
287
- onPrepare: {
288
- type: Function,
289
- required: true,
290
- default: void 0
291
- },
292
- stretch: {
293
- type: String,
294
- required: false,
295
- default: void 0
296
- },
297
- targetWidth: {
298
- type: Number,
299
- required: false,
300
- default: void 0
301
- },
302
- targetHeight: {
303
- type: Number,
304
- required: false,
305
- default: void 0
306
- },
307
- onResize: {
308
- required: false,
309
- default: void 0
310
- },
311
- mobile: {
312
- type: Object,
313
- required: false,
314
- default: void 0
315
- }
316
- }, { autoDestroy: true }) });
317
- var Popup_default = Popup;
318
- exports.default = Popup_default;
@@ -1,134 +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_useOffsetStyle = require("../hooks/useOffsetStyle.cjs");
7
- let vue = require("vue");
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");
10
- var UniqueContainer = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
11
- const motionVisible = (0, vue.shallowRef)(false);
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");
13
- const offsetStyle = require_useOffsetStyle.default(isMobile, ready, open, align, offsetR, offsetB, offsetX, offsetY);
14
- const cachedOffsetStyleRef = (0, vue.shallowRef)(offsetStyle.value);
15
- (0, vue.watchEffect)(() => {
16
- if (ready.value) cachedOffsetStyleRef.value = offsetStyle.value;
17
- });
18
- const mergedOffsetStyle = (0, vue.computed)(() => {
19
- if (cachedOffsetStyleRef.value && Object.keys(cachedOffsetStyleRef.value).length > 0) return cachedOffsetStyleRef.value;
20
- return offsetStyle.value;
21
- });
22
- return () => {
23
- const { popupSize, motion, prefixCls, uniqueContainerClassName, arrowPos, uniqueContainerStyle } = props;
24
- const sizeStyle = {};
25
- if (popupSize) {
26
- sizeStyle.width = `${popupSize.width}px`;
27
- sizeStyle.height = `${popupSize.height}px`;
28
- }
29
- const baseTransitionProps = (0, _v_c_util_dist_utils_transition.getTransitionProps)(motion?.name, motion);
30
- const containerCls = `${prefixCls}-unique-container`;
31
- return (0, vue.createVNode)(vue.Transition, {
32
- ...baseTransitionProps,
33
- onAfterEnter: (element) => {
34
- motionVisible.value = true;
35
- baseTransitionProps.onAfterEnter?.(element);
36
- },
37
- onAfterLeave: (element) => {
38
- motionVisible.value = false;
39
- baseTransitionProps.onAfterLeave?.(element);
40
- }
41
- }, { default: () => [(0, vue.withDirectives)((0, vue.createVNode)("div", {
42
- "class": [
43
- containerCls,
44
- uniqueContainerClassName,
45
- {
46
- [`${containerCls}-visible`]: motionVisible.value,
47
- [`${containerCls}-hidden`]: !open.value
48
- }
49
- ],
50
- "style": [
51
- {
52
- "--arrow-x": `${arrowPos?.x || 0}px`,
53
- "--arrow-y": `${arrowPos?.y || 0}px`
54
- },
55
- mergedOffsetStyle.value,
56
- sizeStyle,
57
- uniqueContainerStyle
58
- ]
59
- }, null), [[vue.vShow, open.value]])] });
60
- };
61
- }, { props: {
62
- prefixCls: {
63
- type: String,
64
- required: true,
65
- default: void 0
66
- },
67
- isMobile: {
68
- type: Boolean,
69
- required: true,
70
- default: void 0
71
- },
72
- ready: {
73
- type: Boolean,
74
- required: true,
75
- default: void 0
76
- },
77
- open: {
78
- type: Boolean,
79
- required: true,
80
- default: void 0
81
- },
82
- align: {
83
- type: Object,
84
- required: true,
85
- default: void 0
86
- },
87
- offsetR: {
88
- type: Number,
89
- required: true,
90
- default: void 0
91
- },
92
- offsetB: {
93
- type: Number,
94
- required: true,
95
- default: void 0
96
- },
97
- offsetX: {
98
- type: Number,
99
- required: true,
100
- default: void 0
101
- },
102
- offsetY: {
103
- type: Number,
104
- required: true,
105
- default: void 0
106
- },
107
- arrowPos: {
108
- type: Object,
109
- required: false,
110
- default: void 0
111
- },
112
- popupSize: {
113
- type: Object,
114
- required: false,
115
- default: void 0
116
- },
117
- motion: {
118
- type: Object,
119
- required: false,
120
- default: void 0
121
- },
122
- uniqueContainerClassName: {
123
- type: String,
124
- required: false,
125
- default: void 0
126
- },
127
- uniqueContainerStyle: {
128
- type: Object,
129
- required: false,
130
- default: void 0
131
- }
132
- } });
133
- var UniqueContainer_default = UniqueContainer;
134
- exports.default = UniqueContainer_default;