@v-c/image 1.0.0 → 1.0.2
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/Preview/index.js +1 -1
- package/package.json +4 -4
- package/dist/Image.cjs +0 -231
- package/dist/Preview/CloseBtn.cjs +0 -44
- package/dist/Preview/Footer.cjs +0 -234
- package/dist/Preview/PrevNext.cjs +0 -59
- package/dist/Preview/index.cjs +0 -404
- package/dist/PreviewGroup.cjs +0 -138
- package/dist/common.cjs +0 -13
- package/dist/context.cjs +0 -11
- package/dist/getFixScaleEleTransPosition.cjs +0 -28
- package/dist/hooks/useImageTransform.cjs +0 -99
- package/dist/hooks/useMouseEvent.cjs +0 -96
- package/dist/hooks/usePreviewItems.cjs +0 -48
- package/dist/hooks/useRegisterImage.cjs +0 -28
- package/dist/hooks/useStatus.cjs +0 -49
- package/dist/hooks/useTouchEvent.cjs +0 -125
- package/dist/index.cjs +0 -11
- package/dist/interface.cjs +0 -1
- package/dist/portal/dist/Context.cjs +0 -12
- package/dist/portal/dist/Portal.cjs +0 -100
- package/dist/portal/dist/index.cjs +0 -3
- package/dist/portal/dist/useDom.cjs +0 -47
- package/dist/portal/dist/useEscKeyDown.cjs +0 -57
- package/dist/portal/dist/useScrollLocker.cjs +0 -28
- package/dist/portal/dist/util.cjs +0 -4
- package/dist/previewConfig.cjs +0 -5
- package/dist/util/dist/Dom/canUseDom.cjs +0 -4
- package/dist/util/dist/Dom/contains.cjs +0 -11
- package/dist/util/dist/Dom/dynamicCSS.cjs +0 -80
- package/dist/util/dist/KeyCode.cjs +0 -81
- package/dist/util/dist/RenderComponent.cjs +0 -29
- package/dist/util/dist/classnames.cjs +0 -36
- package/dist/util/dist/getScrollBarSize.cjs +0 -53
- package/dist/util/dist/hooks/useId.cjs +0 -5
- package/dist/util/dist/hooks/useMergedState.cjs +0 -24
- package/dist/util/dist/index.cjs +0 -7
- package/dist/util/dist/isEqual.cjs +0 -27
- package/dist/util/dist/omit.cjs +0 -8
- package/dist/util/dist/pickAttrs.cjs +0 -39
- package/dist/util/dist/props-util/index.cjs +0 -47
- package/dist/util/dist/raf.cjs +0 -36
- package/dist/util/dist/type.cjs +0 -2
- package/dist/util/dist/utils/transition.cjs +0 -21
- package/dist/util/dist/warning.cjs +0 -37
- package/dist/util.cjs +0 -27
|
@@ -1,96 +0,0 @@
|
|
|
1
|
-
Object.defineProperties(exports, {
|
|
2
|
-
__esModule: { value: true },
|
|
3
|
-
[Symbol.toStringTag]: { value: "Module" }
|
|
4
|
-
});
|
|
5
|
-
const require_warning = require("../util/dist/warning.cjs");
|
|
6
|
-
require("../util/dist/index.cjs");
|
|
7
|
-
const require_getFixScaleEleTransPosition = require("../getFixScaleEleTransPosition.cjs");
|
|
8
|
-
const require_previewConfig = require("../previewConfig.cjs");
|
|
9
|
-
let vue = require("vue");
|
|
10
|
-
function useMouseEvent(imgRef, movable, open, scaleStep, transform, updateTransform, dispatchZoomChange) {
|
|
11
|
-
const isMoving = (0, vue.shallowRef)(false);
|
|
12
|
-
const startPositionInfo = (0, vue.shallowRef)({
|
|
13
|
-
diffX: 0,
|
|
14
|
-
diffY: 0,
|
|
15
|
-
transformX: 0,
|
|
16
|
-
transformY: 0
|
|
17
|
-
});
|
|
18
|
-
const onMouseDown = (event) => {
|
|
19
|
-
const { x, y } = transform.value;
|
|
20
|
-
if (!movable.value || event.button !== 0) return;
|
|
21
|
-
event.preventDefault();
|
|
22
|
-
event.stopPropagation();
|
|
23
|
-
startPositionInfo.value = {
|
|
24
|
-
diffX: event.pageX - x,
|
|
25
|
-
diffY: event.pageY - y,
|
|
26
|
-
transformX: x,
|
|
27
|
-
transformY: y
|
|
28
|
-
};
|
|
29
|
-
isMoving.value = true;
|
|
30
|
-
};
|
|
31
|
-
const onMouseMove = (event) => {
|
|
32
|
-
if (open.value && isMoving.value) updateTransform({
|
|
33
|
-
x: event.pageX - startPositionInfo.value.diffX,
|
|
34
|
-
y: event.pageY - startPositionInfo.value.diffY
|
|
35
|
-
}, "move");
|
|
36
|
-
};
|
|
37
|
-
const onMouseUp = () => {
|
|
38
|
-
if (open.value && isMoving.value) {
|
|
39
|
-
const { x, y, scale, rotate } = transform.value;
|
|
40
|
-
isMoving.value = false;
|
|
41
|
-
const { transformX, transformY } = startPositionInfo.value;
|
|
42
|
-
if (!(x !== transformX && y !== transformY)) return;
|
|
43
|
-
if (!imgRef.value) return;
|
|
44
|
-
const width = imgRef.value.offsetWidth * scale;
|
|
45
|
-
const height = imgRef.value.offsetHeight * scale;
|
|
46
|
-
const { left, top } = imgRef.value.getBoundingClientRect() ?? {};
|
|
47
|
-
const isRotate = rotate % 180 !== 0;
|
|
48
|
-
const fixState = require_getFixScaleEleTransPosition.default(isRotate ? height : width, isRotate ? width : height, left, top);
|
|
49
|
-
if (fixState) updateTransform({ ...fixState }, "dragRebound");
|
|
50
|
-
}
|
|
51
|
-
};
|
|
52
|
-
const onWheel = (event) => {
|
|
53
|
-
if (!open.value || event.deltaY === 0) return;
|
|
54
|
-
const scaleRatio = Math.abs(event.deltaY / 100);
|
|
55
|
-
let ratio = 1 + Math.min(scaleRatio, 1) * scaleStep.value;
|
|
56
|
-
if (event.deltaY > 0) ratio = 1 / ratio;
|
|
57
|
-
dispatchZoomChange(ratio, "wheel", event.clientX, event.clientY);
|
|
58
|
-
};
|
|
59
|
-
(0, vue.watch)([
|
|
60
|
-
open,
|
|
61
|
-
isMoving,
|
|
62
|
-
transform,
|
|
63
|
-
movable
|
|
64
|
-
], (_n, _o, onCleanup) => {
|
|
65
|
-
if (movable.value) {
|
|
66
|
-
window.addEventListener("mouseup", onMouseUp, false);
|
|
67
|
-
window.addEventListener("mousemove", onMouseMove, false);
|
|
68
|
-
try {
|
|
69
|
-
/* istanbul ignore next */
|
|
70
|
-
if (window.top !== window.self) {
|
|
71
|
-
window?.top?.addEventListener("mouseup", onMouseUp, false);
|
|
72
|
-
window?.top?.addEventListener("mousemove", onMouseMove, false);
|
|
73
|
-
}
|
|
74
|
-
} catch (e) {
|
|
75
|
-
require_warning.warning_default(false, `[vc-image] ${e}`);
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
onCleanup(() => {
|
|
79
|
-
window.removeEventListener("mouseup", onMouseUp);
|
|
80
|
-
window.removeEventListener("mousemove", onMouseMove);
|
|
81
|
-
/* istanbul ignore next */
|
|
82
|
-
try {
|
|
83
|
-
window.top?.removeEventListener("mouseup", onMouseUp);
|
|
84
|
-
window.top?.removeEventListener("mousemove", onMouseMove);
|
|
85
|
-
} catch (error) {}
|
|
86
|
-
});
|
|
87
|
-
});
|
|
88
|
-
return {
|
|
89
|
-
isMoving,
|
|
90
|
-
onMouseDown,
|
|
91
|
-
onMouseMove,
|
|
92
|
-
onMouseUp,
|
|
93
|
-
onWheel
|
|
94
|
-
};
|
|
95
|
-
}
|
|
96
|
-
exports.default = useMouseEvent;
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
Object.defineProperties(exports, {
|
|
2
|
-
__esModule: { value: true },
|
|
3
|
-
[Symbol.toStringTag]: { value: "Module" }
|
|
4
|
-
});
|
|
5
|
-
const require_common = require("../common.cjs");
|
|
6
|
-
let vue = require("vue");
|
|
7
|
-
function usePreviewItems(items) {
|
|
8
|
-
const images = (0, vue.shallowRef)({});
|
|
9
|
-
const registerImage = (id, data) => {
|
|
10
|
-
images.value = {
|
|
11
|
-
...images.value,
|
|
12
|
-
[id]: data
|
|
13
|
-
};
|
|
14
|
-
return () => {
|
|
15
|
-
const cloneImgs = { ...images.value };
|
|
16
|
-
delete cloneImgs[id];
|
|
17
|
-
images.value = cloneImgs;
|
|
18
|
-
};
|
|
19
|
-
};
|
|
20
|
-
const mergedItems = (0, vue.shallowRef)([]);
|
|
21
|
-
(0, vue.watchEffect)(() => {
|
|
22
|
-
if (items?.value) {
|
|
23
|
-
mergedItems.value = items.value.map((item) => {
|
|
24
|
-
if (typeof item === "string") return { data: { src: item } };
|
|
25
|
-
const data = {};
|
|
26
|
-
Object.keys(item).forEach((key) => {
|
|
27
|
-
if (["src", ...require_common.COMMON_PROPS].includes(key)) data[key] = item[key];
|
|
28
|
-
});
|
|
29
|
-
return { data };
|
|
30
|
-
});
|
|
31
|
-
return;
|
|
32
|
-
}
|
|
33
|
-
mergedItems.value = Object.keys(images.value).reduce((total, id) => {
|
|
34
|
-
const { canPreview, data } = images.value[id];
|
|
35
|
-
if (canPreview) total.push({
|
|
36
|
-
data,
|
|
37
|
-
id
|
|
38
|
-
});
|
|
39
|
-
return total;
|
|
40
|
-
}, []);
|
|
41
|
-
});
|
|
42
|
-
return [
|
|
43
|
-
mergedItems,
|
|
44
|
-
registerImage,
|
|
45
|
-
(0, vue.computed)(() => !!items?.value)
|
|
46
|
-
];
|
|
47
|
-
}
|
|
48
|
-
exports.default = usePreviewItems;
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
Object.defineProperties(exports, {
|
|
2
|
-
__esModule: { value: true },
|
|
3
|
-
[Symbol.toStringTag]: { value: "Module" }
|
|
4
|
-
});
|
|
5
|
-
const require_context = require("../context.cjs");
|
|
6
|
-
let vue = require("vue");
|
|
7
|
-
var uid = 0;
|
|
8
|
-
function useRegisterImage(canPreview, data) {
|
|
9
|
-
uid += 1;
|
|
10
|
-
const id = (0, vue.shallowRef)(String(uid));
|
|
11
|
-
const groupContext = require_context.usePreviewGroupContext();
|
|
12
|
-
const registerData = () => ({
|
|
13
|
-
data: data.value,
|
|
14
|
-
canPreview: canPreview.value
|
|
15
|
-
});
|
|
16
|
-
let unRegister;
|
|
17
|
-
(0, vue.onMounted)(() => {
|
|
18
|
-
if (groupContext) unRegister = groupContext.register(id.value, registerData());
|
|
19
|
-
});
|
|
20
|
-
(0, vue.watch)([canPreview, data], () => {
|
|
21
|
-
if (groupContext) groupContext.register(id.value, registerData());
|
|
22
|
-
}, { deep: true });
|
|
23
|
-
(0, vue.onBeforeUnmount)(() => {
|
|
24
|
-
unRegister?.();
|
|
25
|
-
});
|
|
26
|
-
return id.value;
|
|
27
|
-
}
|
|
28
|
-
exports.default = useRegisterImage;
|
package/dist/hooks/useStatus.cjs
DELETED
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
Object.defineProperties(exports, {
|
|
2
|
-
__esModule: { value: true },
|
|
3
|
-
[Symbol.toStringTag]: { value: "Module" }
|
|
4
|
-
});
|
|
5
|
-
const require_util = require("../util.cjs");
|
|
6
|
-
let vue = require("vue");
|
|
7
|
-
function useStatus(options) {
|
|
8
|
-
const { src, isCustomPlaceholder, fallback } = options;
|
|
9
|
-
const status = (0, vue.shallowRef)(isCustomPlaceholder?.value ? "loading" : "normal");
|
|
10
|
-
const isLoaded = (0, vue.shallowRef)(false);
|
|
11
|
-
const isError = (0, vue.computed)(() => status.value === "error");
|
|
12
|
-
(0, vue.watchEffect)((onCleanup) => {
|
|
13
|
-
let isCurrentSrc = true;
|
|
14
|
-
require_util.isImageValid(src.value || "").then((isValid) => {
|
|
15
|
-
if (!isValid && isCurrentSrc) status.value = "error";
|
|
16
|
-
});
|
|
17
|
-
onCleanup(() => {
|
|
18
|
-
isCurrentSrc = false;
|
|
19
|
-
});
|
|
20
|
-
});
|
|
21
|
-
(0, vue.watch)(() => src.value, () => {
|
|
22
|
-
isLoaded.value = false;
|
|
23
|
-
if (isCustomPlaceholder?.value && !isLoaded.value) status.value = "loading";
|
|
24
|
-
else if (isError.value) status.value = "normal";
|
|
25
|
-
}, { immediate: true });
|
|
26
|
-
const onLoad = () => {
|
|
27
|
-
isLoaded.value = true;
|
|
28
|
-
status.value = "normal";
|
|
29
|
-
};
|
|
30
|
-
const getImgRef = (img) => {
|
|
31
|
-
isLoaded.value = false;
|
|
32
|
-
if (status.value === "loading" && img?.complete && (img.naturalWidth || img.naturalHeight)) {
|
|
33
|
-
isLoaded.value = true;
|
|
34
|
-
onLoad();
|
|
35
|
-
}
|
|
36
|
-
};
|
|
37
|
-
return [
|
|
38
|
-
getImgRef,
|
|
39
|
-
(0, vue.computed)(() => {
|
|
40
|
-
if (isError.value && fallback?.value) return { src: fallback.value };
|
|
41
|
-
return {
|
|
42
|
-
onLoad,
|
|
43
|
-
src: src.value
|
|
44
|
-
};
|
|
45
|
-
}),
|
|
46
|
-
status
|
|
47
|
-
];
|
|
48
|
-
}
|
|
49
|
-
exports.default = useStatus;
|
|
@@ -1,125 +0,0 @@
|
|
|
1
|
-
Object.defineProperties(exports, {
|
|
2
|
-
__esModule: { value: true },
|
|
3
|
-
[Symbol.toStringTag]: { value: "Module" }
|
|
4
|
-
});
|
|
5
|
-
const require_canUseDom = require("../util/dist/Dom/canUseDom.cjs");
|
|
6
|
-
const require_getFixScaleEleTransPosition = require("../getFixScaleEleTransPosition.cjs");
|
|
7
|
-
let vue = require("vue");
|
|
8
|
-
function getDistance(a, b) {
|
|
9
|
-
const x = a.x - b.x;
|
|
10
|
-
const y = a.y - b.y;
|
|
11
|
-
return Math.hypot(x, y);
|
|
12
|
-
}
|
|
13
|
-
function getCenter(oldPoint1, oldPoint2, newPoint1, newPoint2) {
|
|
14
|
-
const distance1 = getDistance(oldPoint1, newPoint1);
|
|
15
|
-
const distance2 = getDistance(oldPoint2, newPoint2);
|
|
16
|
-
if (distance1 === 0 && distance2 === 0) return [oldPoint1.x, oldPoint1.y];
|
|
17
|
-
const ratio = distance1 / (distance1 + distance2);
|
|
18
|
-
return [oldPoint1.x + ratio * (oldPoint2.x - oldPoint1.x), oldPoint1.y + ratio * (oldPoint2.y - oldPoint1.y)];
|
|
19
|
-
}
|
|
20
|
-
function useTouchEvent(imgRef, movable, open, minScale, transform, updateTransform, dispatchZoomChange) {
|
|
21
|
-
const isTouching = (0, vue.shallowRef)(false);
|
|
22
|
-
const touchPointInfo = (0, vue.shallowRef)({
|
|
23
|
-
point1: {
|
|
24
|
-
x: 0,
|
|
25
|
-
y: 0
|
|
26
|
-
},
|
|
27
|
-
point2: {
|
|
28
|
-
x: 0,
|
|
29
|
-
y: 0
|
|
30
|
-
},
|
|
31
|
-
eventType: "none"
|
|
32
|
-
});
|
|
33
|
-
const updateTouchPointInfo = (values) => {
|
|
34
|
-
touchPointInfo.value = {
|
|
35
|
-
...touchPointInfo.value,
|
|
36
|
-
...values
|
|
37
|
-
};
|
|
38
|
-
};
|
|
39
|
-
const onTouchStart = (event) => {
|
|
40
|
-
if (!movable.value) return;
|
|
41
|
-
event.stopPropagation();
|
|
42
|
-
isTouching.value = true;
|
|
43
|
-
const { touches = [] } = event;
|
|
44
|
-
const { x, y } = transform.value;
|
|
45
|
-
if (touches.length > 1) updateTouchPointInfo({
|
|
46
|
-
point1: {
|
|
47
|
-
x: touches[0].clientX,
|
|
48
|
-
y: touches[0].clientY
|
|
49
|
-
},
|
|
50
|
-
point2: {
|
|
51
|
-
x: touches[1].clientX,
|
|
52
|
-
y: touches[1].clientY
|
|
53
|
-
},
|
|
54
|
-
eventType: "touchZoom"
|
|
55
|
-
});
|
|
56
|
-
else updateTouchPointInfo({
|
|
57
|
-
point1: {
|
|
58
|
-
x: touches[0].clientX - x,
|
|
59
|
-
y: touches[0].clientY - y
|
|
60
|
-
},
|
|
61
|
-
eventType: "move"
|
|
62
|
-
});
|
|
63
|
-
};
|
|
64
|
-
const onTouchMove = (event) => {
|
|
65
|
-
const { touches = [] } = event;
|
|
66
|
-
const { point1, point2, eventType } = touchPointInfo.value;
|
|
67
|
-
if (touches.length > 1 && eventType === "touchZoom") {
|
|
68
|
-
const newPoint1 = {
|
|
69
|
-
x: touches[0].clientX,
|
|
70
|
-
y: touches[0].clientY
|
|
71
|
-
};
|
|
72
|
-
const newPoint2 = {
|
|
73
|
-
x: touches[1].clientX,
|
|
74
|
-
y: touches[1].clientY
|
|
75
|
-
};
|
|
76
|
-
const [centerX, centerY] = getCenter(point1, point2, newPoint1, newPoint2);
|
|
77
|
-
dispatchZoomChange(getDistance(newPoint1, newPoint2) / getDistance(point1, point2), "touchZoom", centerX, centerY, true);
|
|
78
|
-
updateTouchPointInfo({
|
|
79
|
-
point1: newPoint1,
|
|
80
|
-
point2: newPoint2,
|
|
81
|
-
eventType: "touchZoom"
|
|
82
|
-
});
|
|
83
|
-
} else if (eventType === "move") {
|
|
84
|
-
updateTransform({
|
|
85
|
-
x: touches[0].clientX - point1.x,
|
|
86
|
-
y: touches[0].clientY - point1.y
|
|
87
|
-
}, "move");
|
|
88
|
-
updateTouchPointInfo({ eventType: "move" });
|
|
89
|
-
}
|
|
90
|
-
};
|
|
91
|
-
const onTouchEnd = () => {
|
|
92
|
-
if (!open.value || !imgRef.value) return;
|
|
93
|
-
if (isTouching.value) isTouching.value = false;
|
|
94
|
-
updateTouchPointInfo({ eventType: "none" });
|
|
95
|
-
const { rotate, scale } = transform.value;
|
|
96
|
-
if (minScale.value > scale) return updateTransform({
|
|
97
|
-
x: 0,
|
|
98
|
-
y: 0,
|
|
99
|
-
scale: minScale.value
|
|
100
|
-
}, "touchZoom");
|
|
101
|
-
const width = imgRef.value.offsetWidth * scale;
|
|
102
|
-
const height = imgRef.value.offsetHeight * scale;
|
|
103
|
-
const { left, top } = imgRef.value.getBoundingClientRect() ?? {};
|
|
104
|
-
const isRotate = rotate % 180 !== 0;
|
|
105
|
-
const fixState = require_getFixScaleEleTransPosition.default(isRotate ? height : width, isRotate ? width : height, left, top);
|
|
106
|
-
if (fixState) updateTransform({ ...fixState }, "dragRebound");
|
|
107
|
-
};
|
|
108
|
-
(0, vue.watchEffect)((onCleanup) => {
|
|
109
|
-
const preventDefault = (e) => {
|
|
110
|
-
e.preventDefault();
|
|
111
|
-
};
|
|
112
|
-
if (open.value && movable.value) window.addEventListener("touchmove", preventDefault, { passive: false });
|
|
113
|
-
onCleanup(() => {
|
|
114
|
-
if (!require_canUseDom.canUseDom()) return;
|
|
115
|
-
window.removeEventListener("touchmove", preventDefault);
|
|
116
|
-
});
|
|
117
|
-
});
|
|
118
|
-
return {
|
|
119
|
-
isTouching,
|
|
120
|
-
onTouchStart,
|
|
121
|
-
onTouchMove,
|
|
122
|
-
onTouchEnd
|
|
123
|
-
};
|
|
124
|
-
}
|
|
125
|
-
exports.default = useTouchEvent;
|
package/dist/index.cjs
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
Object.defineProperties(exports, {
|
|
2
|
-
__esModule: { value: true },
|
|
3
|
-
[Symbol.toStringTag]: { value: "Module" }
|
|
4
|
-
});
|
|
5
|
-
const require_Image = require("./Image.cjs");
|
|
6
|
-
const require_PreviewGroup = require("./PreviewGroup.cjs");
|
|
7
|
-
var ExportImage = require_Image.default;
|
|
8
|
-
ExportImage.PreviewGroup = require_PreviewGroup.default;
|
|
9
|
-
var src_default = ExportImage;
|
|
10
|
-
exports.PreviewGroup = require_PreviewGroup.default;
|
|
11
|
-
exports.default = src_default;
|
package/dist/interface.cjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
let vue = require("vue");
|
|
2
|
-
var QueueContextKey = Symbol("QueueContextKey");
|
|
3
|
-
function useContextProvider(appendFunc) {
|
|
4
|
-
const queueCreate = appendFunc;
|
|
5
|
-
(0, vue.provide)(QueueContextKey, queueCreate);
|
|
6
|
-
return queueCreate;
|
|
7
|
-
}
|
|
8
|
-
function useContextState() {
|
|
9
|
-
return (0, vue.inject)(QueueContextKey, void 0);
|
|
10
|
-
}
|
|
11
|
-
exports.useContextProvider = useContextProvider;
|
|
12
|
-
exports.useContextState = useContextState;
|
|
@@ -1,100 +0,0 @@
|
|
|
1
|
-
const require_index = require("../../util/dist/props-util/index.cjs");
|
|
2
|
-
const require_warning = require("../../util/dist/warning.cjs");
|
|
3
|
-
require("../../util/dist/index.cjs");
|
|
4
|
-
const require_Context = require("./Context.cjs");
|
|
5
|
-
const require_canUseDom = require("../../util/dist/Dom/canUseDom.cjs");
|
|
6
|
-
const require_useDom = require("./useDom.cjs");
|
|
7
|
-
const require_useEscKeyDown = require("./useEscKeyDown.cjs");
|
|
8
|
-
const require_useScrollLocker = require("./useScrollLocker.cjs");
|
|
9
|
-
let vue = require("vue");
|
|
10
|
-
function _isSlot(s) {
|
|
11
|
-
return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, vue.isVNode)(s);
|
|
12
|
-
}
|
|
13
|
-
function getPortalContainer(getContainer) {
|
|
14
|
-
if (getContainer === false) return false;
|
|
15
|
-
if (!require_canUseDom.canUseDom() || !getContainer) return null;
|
|
16
|
-
if (typeof getContainer === "string") return document.querySelector(getContainer);
|
|
17
|
-
if (typeof getContainer === "function") return getContainer();
|
|
18
|
-
return getContainer;
|
|
19
|
-
}
|
|
20
|
-
var Portal_default = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots, expose }) => {
|
|
21
|
-
const shouldRender = (0, vue.shallowRef)(props.open);
|
|
22
|
-
const mergedRender = (0, vue.computed)(() => shouldRender.value || props.open);
|
|
23
|
-
if (process.env.NODE_ENV !== "production") require_warning.warning_default(require_canUseDom.canUseDom() || !props.open, `Portal only work in client side. Please call 'useEffect' to show Portal instead default render in SSR.`);
|
|
24
|
-
(0, vue.watch)([() => props.open, () => props.autoDestroy], () => {
|
|
25
|
-
if (props.autoDestroy || props.open) shouldRender.value = props.open;
|
|
26
|
-
});
|
|
27
|
-
const innerContainer = (0, vue.shallowRef)(getPortalContainer(props.getContainer));
|
|
28
|
-
(0, vue.onMounted)(() => {
|
|
29
|
-
innerContainer.value = getPortalContainer(props.getContainer) ?? null;
|
|
30
|
-
});
|
|
31
|
-
(0, vue.watch)(() => props.getContainer, () => {
|
|
32
|
-
innerContainer.value = getPortalContainer(props.getContainer) ?? null;
|
|
33
|
-
});
|
|
34
|
-
const [defaultContainer, queueCreate] = require_useDom.useDom((0, vue.computed)(() => !!(mergedRender.value && !innerContainer.value)), props.debug);
|
|
35
|
-
require_Context.useContextProvider(queueCreate);
|
|
36
|
-
const mergedContainer = (0, vue.computed)(() => innerContainer.value ?? defaultContainer);
|
|
37
|
-
require_useScrollLocker.useScrollLocker((0, vue.computed)(() => !!(props.autoLock && props.open && require_canUseDom.canUseDom() && (mergedContainer.value === defaultContainer || mergedContainer.value === document.body))));
|
|
38
|
-
require_useEscKeyDown.useEscKeyDown((0, vue.computed)(() => !!props.open), (...args) => {
|
|
39
|
-
props.onEsc?.(...args);
|
|
40
|
-
});
|
|
41
|
-
const elementEl = (0, vue.shallowRef)();
|
|
42
|
-
const setRef = (el) => {
|
|
43
|
-
elementEl.value = el;
|
|
44
|
-
};
|
|
45
|
-
expose({ elementEl });
|
|
46
|
-
return () => {
|
|
47
|
-
if (!mergedRender.value || !require_canUseDom.canUseDom() || innerContainer.value === void 0) return null;
|
|
48
|
-
const renderInline = mergedContainer.value === false;
|
|
49
|
-
const reffedChildren = require_index.filterEmpty(slots.default?.() ?? []);
|
|
50
|
-
if (renderInline) return reffedChildren;
|
|
51
|
-
else {
|
|
52
|
-
const child = reffedChildren.length === 1 ? (0, vue.isVNode)(reffedChildren[0]) ? (0, vue.createVNode)(reffedChildren[0], { ref: setRef }) : reffedChildren[0] : reffedChildren;
|
|
53
|
-
return (0, vue.createVNode)(vue.Teleport, { "to": mergedContainer.value }, _isSlot(child) ? child : { default: () => [child] });
|
|
54
|
-
}
|
|
55
|
-
};
|
|
56
|
-
}, {
|
|
57
|
-
props: /* @__PURE__ */ (0, vue.mergeDefaults)({
|
|
58
|
-
getContainer: {
|
|
59
|
-
type: [
|
|
60
|
-
String,
|
|
61
|
-
Function,
|
|
62
|
-
Boolean
|
|
63
|
-
],
|
|
64
|
-
required: false,
|
|
65
|
-
skipCheck: true,
|
|
66
|
-
default: void 0
|
|
67
|
-
},
|
|
68
|
-
open: {
|
|
69
|
-
type: Boolean,
|
|
70
|
-
required: false,
|
|
71
|
-
default: void 0
|
|
72
|
-
},
|
|
73
|
-
autoDestroy: {
|
|
74
|
-
type: Boolean,
|
|
75
|
-
required: false,
|
|
76
|
-
default: void 0
|
|
77
|
-
},
|
|
78
|
-
autoLock: {
|
|
79
|
-
type: Boolean,
|
|
80
|
-
required: false,
|
|
81
|
-
default: void 0
|
|
82
|
-
},
|
|
83
|
-
onEsc: {
|
|
84
|
-
type: Function,
|
|
85
|
-
required: false,
|
|
86
|
-
default: void 0
|
|
87
|
-
},
|
|
88
|
-
debug: {
|
|
89
|
-
type: String,
|
|
90
|
-
required: false,
|
|
91
|
-
default: void 0
|
|
92
|
-
}
|
|
93
|
-
}, {
|
|
94
|
-
autoDestroy: true,
|
|
95
|
-
getContainer: void 0
|
|
96
|
-
}),
|
|
97
|
-
name: "Portal",
|
|
98
|
-
inheritAttrs: false
|
|
99
|
-
});
|
|
100
|
-
exports.Portal_default = Portal_default;
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
const require_Context = require("./Context.cjs");
|
|
2
|
-
const require_canUseDom = require("../../util/dist/Dom/canUseDom.cjs");
|
|
3
|
-
let vue = require("vue");
|
|
4
|
-
var EMPTY_LIST = [];
|
|
5
|
-
function useDom(render, debug) {
|
|
6
|
-
const eleFun = () => {
|
|
7
|
-
if (!require_canUseDom.canUseDom()) return null;
|
|
8
|
-
const defaultEle = document.createElement("div");
|
|
9
|
-
if (process.env.NODE_ENV !== "production" && debug) defaultEle.setAttribute("data-debug", debug);
|
|
10
|
-
return defaultEle;
|
|
11
|
-
};
|
|
12
|
-
const ele = eleFun();
|
|
13
|
-
const appendedRef = (0, vue.shallowRef)(false);
|
|
14
|
-
const queueCreate = require_Context.useContextState();
|
|
15
|
-
const queue = (0, vue.shallowRef)([]);
|
|
16
|
-
const mergedQueueCreate = (0, vue.computed)(() => queueCreate?.value || (appendedRef.value ? void 0 : (appendFn) => {
|
|
17
|
-
queue.value = [appendFn, ...queue.value];
|
|
18
|
-
}));
|
|
19
|
-
function append() {
|
|
20
|
-
if (!ele?.parentElement) document.body.appendChild(ele);
|
|
21
|
-
appendedRef.value = true;
|
|
22
|
-
}
|
|
23
|
-
function cleanup() {
|
|
24
|
-
if (ele?.parentElement) ele?.parentElement?.removeChild(ele);
|
|
25
|
-
else if (ele && appendedRef.value) document.body?.removeChild?.(ele);
|
|
26
|
-
appendedRef.value = false;
|
|
27
|
-
}
|
|
28
|
-
(0, vue.watch)(render, () => {
|
|
29
|
-
if (render.value) if (queueCreate?.value) queueCreate.value(append);
|
|
30
|
-
else append();
|
|
31
|
-
else (0, vue.nextTick)(() => {
|
|
32
|
-
cleanup();
|
|
33
|
-
});
|
|
34
|
-
}, { immediate: true });
|
|
35
|
-
(0, vue.onUnmounted)(cleanup);
|
|
36
|
-
(0, vue.watch)(queue, () => {
|
|
37
|
-
if (queue.value.length) {
|
|
38
|
-
queue.value.forEach((fn) => fn());
|
|
39
|
-
queue.value = [...EMPTY_LIST];
|
|
40
|
-
}
|
|
41
|
-
}, {
|
|
42
|
-
flush: "post",
|
|
43
|
-
immediate: true
|
|
44
|
-
});
|
|
45
|
-
return [ele, mergedQueueCreate];
|
|
46
|
-
}
|
|
47
|
-
exports.useDom = useDom;
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
let vue = require("vue");
|
|
2
|
-
var stack = [];
|
|
3
|
-
var IME_LOCK_DURATION = 200;
|
|
4
|
-
var lastCompositionEndTime = 0;
|
|
5
|
-
var _test = process.env.NODE_ENV === "test" ? () => ({
|
|
6
|
-
stack,
|
|
7
|
-
reset: () => {
|
|
8
|
-
lastCompositionEndTime = 0;
|
|
9
|
-
}
|
|
10
|
-
}) : null;
|
|
11
|
-
function onGlobalKeyDown(event) {
|
|
12
|
-
if (event.key === "Escape" && !event.isComposing) {
|
|
13
|
-
if (Date.now() - lastCompositionEndTime < IME_LOCK_DURATION) return;
|
|
14
|
-
const len = stack.length;
|
|
15
|
-
for (let i = len - 1; i >= 0; i -= 1) stack?.[i]?.onEsc?.({
|
|
16
|
-
top: i === len - 1,
|
|
17
|
-
event
|
|
18
|
-
});
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
function onGlobalCompositionEnd() {
|
|
22
|
-
lastCompositionEndTime = Date.now();
|
|
23
|
-
}
|
|
24
|
-
function attachGlobalEventListeners() {
|
|
25
|
-
window.addEventListener("keydown", onGlobalKeyDown);
|
|
26
|
-
window.addEventListener("compositionend", onGlobalCompositionEnd);
|
|
27
|
-
}
|
|
28
|
-
function detachGlobalEventListeners() {
|
|
29
|
-
if (stack.length === 0) {
|
|
30
|
-
window.removeEventListener("keydown", onGlobalKeyDown);
|
|
31
|
-
window.removeEventListener("compositionend", onGlobalCompositionEnd);
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
function useEscKeyDown(open, onEsc = () => {}) {
|
|
35
|
-
const id = (0, vue.useId)();
|
|
36
|
-
const onEventEsc = onEsc;
|
|
37
|
-
const ensure = () => {
|
|
38
|
-
if (!stack.find((item) => item.id === id)) stack.push({
|
|
39
|
-
id,
|
|
40
|
-
onEsc: onEventEsc
|
|
41
|
-
});
|
|
42
|
-
};
|
|
43
|
-
const clear = () => {
|
|
44
|
-
stack = stack.filter((item) => item.id !== id);
|
|
45
|
-
};
|
|
46
|
-
(0, vue.watch)(open, (_, _o, onCleanup) => {
|
|
47
|
-
if (open.value) {
|
|
48
|
-
ensure();
|
|
49
|
-
attachGlobalEventListeners();
|
|
50
|
-
onCleanup(() => {
|
|
51
|
-
clear();
|
|
52
|
-
detachGlobalEventListeners();
|
|
53
|
-
});
|
|
54
|
-
} else if (!open.value) clear();
|
|
55
|
-
}, { immediate: true });
|
|
56
|
-
}
|
|
57
|
-
exports.useEscKeyDown = useEscKeyDown;
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
const require_util = require("./util.cjs");
|
|
2
|
-
const require_dynamicCSS = require("../../util/dist/Dom/dynamicCSS.cjs");
|
|
3
|
-
const require_getScrollBarSize = require("../../util/dist/getScrollBarSize.cjs");
|
|
4
|
-
let vue = require("vue");
|
|
5
|
-
var UNIQUE_ID = `vc-util-locker-${Date.now()}`;
|
|
6
|
-
var uuid = 0;
|
|
7
|
-
function useScrollLocker(lock) {
|
|
8
|
-
const mergedLock = (0, vue.computed)(() => (0, vue.unref)(lock));
|
|
9
|
-
uuid += 1;
|
|
10
|
-
const id = (0, vue.shallowRef)(`${UNIQUE_ID}_${uuid}`);
|
|
11
|
-
(0, vue.watch)([id, mergedLock], async (_, _o, onCleanup) => {
|
|
12
|
-
if (mergedLock.value) {
|
|
13
|
-
const scrollbarSize = require_getScrollBarSize.getTargetScrollBarSize(document.body).width;
|
|
14
|
-
require_dynamicCSS.updateCSS(`
|
|
15
|
-
html body {
|
|
16
|
-
overflow-y: hidden;
|
|
17
|
-
${require_util.isBodyOverflowing() ? `width: calc(100% - ${scrollbarSize}px);` : ""}
|
|
18
|
-
}`, id.value);
|
|
19
|
-
onCleanup(() => {
|
|
20
|
-
require_dynamicCSS.removeCSS(id.value);
|
|
21
|
-
});
|
|
22
|
-
} else require_dynamicCSS.removeCSS(id.value);
|
|
23
|
-
}, {
|
|
24
|
-
flush: "post",
|
|
25
|
-
immediate: true
|
|
26
|
-
});
|
|
27
|
-
}
|
|
28
|
-
exports.useScrollLocker = useScrollLocker;
|
package/dist/previewConfig.cjs
DELETED