@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.
Files changed (20) hide show
  1. package/dist/index.d.ts +1 -1
  2. package/package.json +3 -3
  3. package/dist/Popup/Arrow.cjs +0 -63
  4. package/dist/Popup/Mask.cjs +0 -58
  5. package/dist/Popup/PopupContent.cjs +0 -27
  6. package/dist/Popup/index.cjs +0 -318
  7. package/dist/UniqueProvider/UniqueContainer.cjs +0 -134
  8. package/dist/UniqueProvider/index.cjs +0 -164
  9. package/dist/UniqueProvider/useTargetState.cjs +0 -44
  10. package/dist/_virtual/rolldown_runtime.cjs +0 -21
  11. package/dist/context.cjs +0 -28
  12. package/dist/hooks/useAction.cjs +0 -29
  13. package/dist/hooks/useAlign.cjs +0 -378
  14. package/dist/hooks/useDelay.cjs +0 -27
  15. package/dist/hooks/useOffsetStyle.cjs +0 -39
  16. package/dist/hooks/useWatch.cjs +0 -44
  17. package/dist/hooks/useWinClick.cjs +0 -60
  18. package/dist/index.cjs +0 -590
  19. package/dist/interface.cjs +0 -1
  20. package/dist/util.cjs +0 -86
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/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.7",
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",
package/dist/Popup/Arrow.cjs DELETED
@@ -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;
package/dist/Popup/Mask.cjs DELETED
@@ -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;
package/dist/Popup/PopupContent.cjs DELETED
@@ -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;
package/dist/Popup/index.cjs DELETED
@@ -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;
package/dist/UniqueProvider/UniqueContainer.cjs DELETED
@@ -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;