@v-c/image 1.0.1 → 1.0.3

package/dist/Preview/Footer.cjs

@@ -1,234 +0,0 @@
-Object.defineProperties(exports, {
-	__esModule: { value: true },
-	[Symbol.toStringTag]: { value: "Module" }
-});
-const require_classnames = require("../util/dist/classnames.cjs");
-require("../util/dist/index.cjs");
-let vue = require("vue");
-var Footer = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
-	const renderOperation = ({ type, disabled, onClick, icon }) => {
-		const actionCls = `${props.prefixCls}-actions-action`;
-		return (0, vue.createVNode)("div", {
-			"key": type,
-			"class": require_classnames.clsx(actionCls, `${actionCls}-${type}`, { [`${actionCls}-disabled`]: !!disabled }),
-			"onClick": () => {
-				if (!disabled) onClick();
-			}
-		}, [icon]);
-	};
-	return () => {
-		const { prefixCls, showProgress, current, count, showSwitch, classNames, styles, icons, image, transform, countRender, actionsRender, scale, minScale, maxScale, onActive, onFlipY, onFlipX, onRotateLeft, onRotateRight, onZoomOut, onZoomIn, onClose, onReset } = props;
-		const progressNode = showProgress && (0, vue.createVNode)("div", { "class": `${prefixCls}-progress` }, [countRender ? countRender(current + 1, count) : (0, vue.createVNode)("bdi", null, [`${current + 1} / ${count}`])]);
-		const switchPrevNode = showSwitch ? renderOperation({
-			icon: icons?.prev ?? icons?.left,
-			onClick: () => onActive(-1),
-			type: "prev",
-			disabled: current === 0
-		}) : void 0;
-		const switchNextNode = showSwitch ? renderOperation({
-			icon: icons?.next ?? icons?.right,
-			onClick: () => onActive(1),
-			type: "next",
-			disabled: current === count - 1
-		}) : void 0;
-		const flipYNode = renderOperation({
-			icon: icons?.flipY,
-			onClick: onFlipY,
-			type: "flipY"
-		});
-		const flipXNode = renderOperation({
-			icon: icons?.flipX,
-			onClick: onFlipX,
-			type: "flipX"
-		});
-		const rotateLeftNode = renderOperation({
-			icon: icons?.rotateLeft,
-			onClick: onRotateLeft,
-			type: "rotateLeft"
-		});
-		const rotateRightNode = renderOperation({
-			icon: icons?.rotateRight,
-			onClick: onRotateRight,
-			type: "rotateRight"
-		});
-		const zoomOutNode = renderOperation({
-			icon: icons?.zoomOut,
-			onClick: onZoomOut,
-			type: "zoomOut",
-			disabled: scale <= minScale
-		});
-		const zoomInNode = renderOperation({
-			icon: icons?.zoomIn,
-			onClick: onZoomIn,
-			type: "zoomIn",
-			disabled: scale === maxScale
-		});
-		const actionsNode = (0, vue.createVNode)("div", {
-			"class": require_classnames.clsx(`${prefixCls}-actions`, classNames.actions),
-			"style": styles.actions
-		}, [
-			flipYNode,
-			flipXNode,
-			rotateLeftNode,
-			rotateRightNode,
-			zoomOutNode,
-			zoomInNode
-		]);
-		const renderNode = actionsRender ? actionsRender(actionsNode, {
-			icons: {
-				prevIcon: switchPrevNode,
-				nextIcon: switchNextNode,
-				flipYIcon: flipYNode,
-				flipXIcon: flipXNode,
-				rotateLeftIcon: rotateLeftNode,
-				rotateRightIcon: rotateRightNode,
-				zoomOutIcon: zoomOutNode,
-				zoomInIcon: zoomInNode
-			},
-			actions: {
-				onActive,
-				onFlipY,
-				onFlipX,
-				onRotateLeft,
-				onRotateRight,
-				onZoomOut,
-				onZoomIn,
-				onReset,
-				onClose
-			},
-			transform,
-			current,
-			total: count,
-			image
-		}) : actionsNode;
-		return (0, vue.createVNode)("div", {
-			"class": require_classnames.clsx(`${prefixCls}-footer`, classNames.footer),
-			"style": styles.footer
-		}, [progressNode, renderNode]);
-	};
-}, {
-	props: {
-		prefixCls: {
-			type: String,
-			required: true,
-			default: void 0
-		},
-		showProgress: {
-			type: Boolean,
-			required: true,
-			default: void 0
-		},
-		countRender: {
-			type: Function,
-			required: false,
-			default: void 0
-		},
-		actionsRender: {
-			type: Function,
-			required: false,
-			default: void 0
-		},
-		current: {
-			type: Number,
-			required: true,
-			default: void 0
-		},
-		count: {
-			type: Number,
-			required: true,
-			default: void 0
-		},
-		showSwitch: {
-			type: Boolean,
-			required: true,
-			default: void 0
-		},
-		icons: {
-			required: true,
-			default: void 0
-		},
-		scale: {
-			type: Number,
-			required: true,
-			default: void 0
-		},
-		minScale: {
-			type: Number,
-			required: true,
-			default: void 0
-		},
-		maxScale: {
-			type: Number,
-			required: true,
-			default: void 0
-		},
-		image: {
-			type: Object,
-			required: true,
-			default: void 0
-		},
-		transform: {
-			type: Object,
-			required: true,
-			default: void 0
-		},
-		classNames: {
-			type: Object,
-			required: true,
-			default: void 0
-		},
-		styles: {
-			type: Object,
-			required: true,
-			default: void 0
-		},
-		onActive: {
-			type: Function,
-			required: true,
-			default: void 0
-		},
-		onFlipY: {
-			type: Function,
-			required: true,
-			default: void 0
-		},
-		onFlipX: {
-			type: Function,
-			required: true,
-			default: void 0
-		},
-		onRotateLeft: {
-			type: Function,
-			required: true,
-			default: void 0
-		},
-		onRotateRight: {
-			type: Function,
-			required: true,
-			default: void 0
-		},
-		onZoomOut: {
-			type: Function,
-			required: true,
-			default: void 0
-		},
-		onZoomIn: {
-			type: Function,
-			required: true,
-			default: void 0
-		},
-		onClose: {
-			type: Function,
-			required: true,
-			default: void 0
-		},
-		onReset: {
-			type: Function,
-			required: true,
-			default: void 0
-		}
-	},
-	name: "ImagePreviewFooter"
-});
-var Footer_default = Footer;
-exports.default = Footer_default;

package/dist/Preview/PrevNext.cjs

@@ -1,59 +0,0 @@
-Object.defineProperties(exports, {
-	__esModule: { value: true },
-	[Symbol.toStringTag]: { value: "Module" }
-});
-const require_classnames = require("../util/dist/classnames.cjs");
-require("../util/dist/index.cjs");
-let vue = require("vue");
-var PrevNext = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
-	return () => {
-		const { prefixCls, onActive, current, count, icons } = props;
-		const switchCls = `${prefixCls}-switch`;
-		const prevIcon = icons.prev ?? icons.left;
-		const nextIcon = icons.next ?? icons.right;
-		const isPrevDisabled = current === 0;
-		const isNextDisabled = current === count - 1;
-		return (0, vue.createVNode)(vue.Fragment, null, [(0, vue.createVNode)("div", {
-			"class": require_classnames.clsx(switchCls, `${switchCls}-prev`, { [`${switchCls}-disabled`]: isPrevDisabled }),
-			"onClick": () => {
-				if (!isPrevDisabled) onActive(-1);
-			}
-		}, [prevIcon]), (0, vue.createVNode)("div", {
-			"class": require_classnames.clsx(switchCls, `${switchCls}-next`, { [`${switchCls}-disabled`]: isNextDisabled }),
-			"onClick": () => {
-				if (!isNextDisabled) onActive(1);
-			}
-		}, [nextIcon])]);
-	};
-}, {
-	props: {
-		prefixCls: {
-			type: String,
-			required: true,
-			default: void 0
-		},
-		onActive: {
-			type: Function,
-			required: true,
-			default: void 0
-		},
-		current: {
-			type: Number,
-			required: true,
-			default: void 0
-		},
-		count: {
-			type: Number,
-			required: true,
-			default: void 0
-		},
-		icons: {
-			type: Object,
-			required: true,
-			default: void 0
-		}
-	},
-	name: "ImagePreviewPrevNext"
-});
-var PrevNext_default = PrevNext;
-exports.default = PrevNext_default;

package/dist/Preview/index.cjs

@@ -1,404 +0,0 @@
-Object.defineProperties(exports, {
-	__esModule: { value: true },
-	[Symbol.toStringTag]: { value: "Module" }
-});
-const require_KeyCode = require("../util/dist/KeyCode.cjs");
-const require_classnames = require("../util/dist/classnames.cjs");
-require("../util/dist/index.cjs");
-const require_context = require("../context.cjs");
-const require_useStatus = require("../hooks/useStatus.cjs");
-const require_canUseDom = require("../util/dist/Dom/canUseDom.cjs");
-const require_index$1 = require("../portal/dist/index.cjs");
-const require_transition = require("../util/dist/utils/transition.cjs");
-const require_useImageTransform = require("../hooks/useImageTransform.cjs");
-const require_previewConfig = require("../previewConfig.cjs");
-const require_useMouseEvent = require("../hooks/useMouseEvent.cjs");
-const require_useTouchEvent = require("../hooks/useTouchEvent.cjs");
-const require_CloseBtn = require("./CloseBtn.cjs");
-const require_Footer = require("./Footer.cjs");
-const require_PrevNext = require("./PrevNext.cjs");
-let vue = require("vue");
-var Preview = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs, slots }) => {
-	const imgEl = (0, vue.shallowRef)();
-	const groupContext = require_context.usePreviewGroupContext();
-	const showLeftOrRightSwitches = (0, vue.computed)(() => !!groupContext && (props.count ?? 1) > 1);
-	const showOperationsProgress = (0, vue.computed)(() => !!groupContext && (props.count ?? 1) >= 1);
-	const enableTransition = (0, vue.shallowRef)(true);
-	(0, vue.watch)(enableTransition, async (val) => {
-		if (!val) {
-			await (0, vue.nextTick)();
-			enableTransition.value = true;
-		}
-	});
-	const { transform, resetTransform, updateTransform, dispatchZoomChange } = require_useImageTransform.default(imgEl, (0, vue.computed)(() => props.minScale ?? 1), (0, vue.computed)(() => props.maxScale ?? 50), (info) => props.onTransform?.(info));
-	const { isMoving, onMouseDown, onWheel } = require_useMouseEvent.default(imgEl, (0, vue.computed)(() => props.movable ?? true), (0, vue.computed)(() => !!props.open), (0, vue.computed)(() => props.scaleStep ?? .5), transform, updateTransform, dispatchZoomChange);
-	const { isTouching, onTouchStart, onTouchMove, onTouchEnd } = require_useTouchEvent.default(imgEl, (0, vue.computed)(() => props.movable ?? true), (0, vue.computed)(() => !!props.open), (0, vue.computed)(() => props.minScale ?? 1), transform, updateTransform, dispatchZoomChange);
-	(0, vue.watch)(() => props.open, (open) => {
-		if (!open) resetTransform("close");
-	});
-	const onDoubleClick = (event) => {
-		if (!props.open) return;
-		if (transform.value.scale !== 1) updateTransform({
-			x: 0,
-			y: 0,
-			scale: 1
-		}, "doubleClick");
-		else dispatchZoomChange(1 + (props.scaleStep ?? .5), "doubleClick", event.clientX, event.clientY);
-	};
-	const onZoomIn = () => {
-		dispatchZoomChange(1 + (props.scaleStep ?? .5), "zoomIn");
-	};
-	const onZoomOut = () => {
-		dispatchZoomChange(1 / (1 + (props.scaleStep ?? .5)), "zoomOut");
-	};
-	const onRotateRight = () => {
-		updateTransform({ rotate: transform.value.rotate + 90 }, "rotateRight");
-	};
-	const onRotateLeft = () => {
-		updateTransform({ rotate: transform.value.rotate - 90 }, "rotateLeft");
-	};
-	const onFlipX = () => {
-		updateTransform({ flipX: !transform.value.flipX }, "flipX");
-	};
-	const onFlipY = () => {
-		updateTransform({ flipY: !transform.value.flipY }, "flipY");
-	};
-	const onReset = () => {
-		resetTransform("reset");
-	};
-	const onActive = (offset) => {
-		const current = props.current ?? 0;
-		const count = props.count ?? 1;
-		const nextCurrent = current + offset;
-		if (nextCurrent >= 0 && nextCurrent <= count - 1) {
-			enableTransition.value = false;
-			resetTransform(offset < 0 ? "prev" : "next");
-			props.onChange?.(nextCurrent, current);
-		}
-	};
-	const onKeyDown = (event) => {
-		if (!props.open) return;
-		const { key } = event;
-		if (key === require_KeyCode.KeyCodeStr.Escape) {
-			props.onClose?.();
-			return;
-		}
-		if (showLeftOrRightSwitches.value) {
-			if (key === require_KeyCode.KeyCodeStr.ArrowLeft) onActive(-1);
-			else if (key === require_KeyCode.KeyCodeStr.ArrowRight) onActive(1);
-		}
-	};
-	(0, vue.watchEffect)((onCleanup) => {
-		if (!require_canUseDom.canUseDom()) return;
-		if (props.open) window.addEventListener("keydown", onKeyDown);
-		onCleanup(() => {
-			window.removeEventListener("keydown", onKeyDown);
-		});
-	});
-	const lockScroll = (0, vue.shallowRef)(false);
-	(0, vue.watch)(() => props.open, (open) => {
-		if (open) lockScroll.value = true;
-	});
-	const portalRender = (0, vue.shallowRef)(false);
-	(0, vue.watch)(() => props.open, (open) => {
-		if (open) portalRender.value = true;
-	});
-	const onVisibleChanged = (nextVisible) => {
-		if (!nextVisible) {
-			lockScroll.value = false;
-			portalRender.value = false;
-		}
-		props.afterOpenChange?.(nextVisible);
-	};
-	const setImgRef = (el) => {
-		imgEl.value = el;
-	};
-	const [getImgRef, srcAndOnload] = require_useStatus.default({
-		src: (0, vue.computed)(() => props.src),
-		fallback: (0, vue.computed)(() => props.fallback)
-	});
-	return () => {
-		const { prefixCls, rootClassName, src, alt, imageInfo, open, closeIcon, getContainer, current = 0, count = 1, countRender, motionName = "fade", imageRender, imgCommonProps, actionsRender = slots?.actionsRender, classNames = {}, styles = {}, mousePosition, zIndex, icons = {} } = props;
-		const bodyStyle = { ...styles.body ?? {} };
-		if (mousePosition) bodyStyle.transformOrigin = `${mousePosition.x}px ${mousePosition.y}px`;
-		const image = {
-			url: src || "",
-			alt: alt || "",
-			...imageInfo
-		};
-		const imgNode = (0, vue.createVNode)("img", (0, vue.mergeProps)(imgCommonProps, {
-			"src": srcAndOnload.value.src,
-			"ref": (el) => {
-				setImgRef(el);
-				getImgRef(el);
-			},
-			"width": props.width,
-			"height": props.height,
-			"class": `${prefixCls}-img`,
-			"alt": alt,
-			"onLoad": srcAndOnload.value.onLoad,
-			"style": {
-				transform: `translate3d(${transform.value.x}px, ${transform.value.y}px, 0) scale3d(${transform.value.flipX ? "-" : ""}${transform.value.scale}, ${transform.value.flipY ? "-" : ""}${transform.value.scale}, 1) rotate(${transform.value.rotate}deg)`,
-				transitionDuration: !enableTransition.value || isTouching.value ? "0s" : void 0
-			},
-			"onWheel": onWheel,
-			"onMousedown": onMouseDown,
-			"onDblclick": onDoubleClick,
-			"onTouchstart": onTouchStart,
-			"onTouchmove": onTouchMove,
-			"onTouchend": onTouchEnd,
-			"onTouchcancel": onTouchEnd
-		}), null);
-		const mergedRootStyle = {
-			...styles.root ?? {},
-			...attrs.style
-		};
-		if (zIndex) mergedRootStyle.zIndex = zIndex;
-		const mergedRootCls = require_classnames.clsx(prefixCls, rootClassName, classNames.root, { [`${prefixCls}-moving`]: isMoving.value });
-		const transitionProps = require_transition.getTransitionProps(motionName);
-		return (0, vue.createVNode)(require_index$1.src_default, {
-			"open": portalRender.value,
-			"getContainer": getContainer,
-			"autoLock": lockScroll.value
-		}, { default: () => [(0, vue.createVNode)(vue.Transition, (0, vue.mergeProps)(transitionProps, {
-			"onAfterEnter": () => onVisibleChanged(true),
-			"onAfterLeave": () => onVisibleChanged(false)
-		}), { default: () => {
-			if (!(portalRender.value && open)) return null;
-			return (0, vue.createVNode)("div", {
-				"class": mergedRootCls,
-				"style": mergedRootStyle
-			}, [
-				(0, vue.createVNode)("div", {
-					"class": require_classnames.clsx(`${prefixCls}-mask`, classNames.mask),
-					"style": styles.mask,
-					"onClick": () => props.onClose?.()
-				}, null),
-				(0, vue.createVNode)("div", {
-					"class": require_classnames.clsx(`${prefixCls}-body`, classNames.body),
-					"style": bodyStyle
-				}, [imageRender ? imageRender(imgNode, {
-					transform: transform.value,
-					image,
-					...groupContext ? { current } : {}
-				}) : imgNode]),
-				closeIcon !== false && closeIcon !== null && (0, vue.createVNode)(require_CloseBtn.default, {
-					"prefixCls": prefixCls,
-					"icon": closeIcon === true ? icons.close : closeIcon || icons.close,
-					"onClick": () => props.onClose?.()
-				}, null),
-				showLeftOrRightSwitches.value && (0, vue.createVNode)(require_PrevNext.default, {
-					"prefixCls": prefixCls,
-					"current": current,
-					"count": count,
-					"icons": icons,
-					"onActive": onActive
-				}, null),
-				(0, vue.createVNode)(require_Footer.default, {
-					"prefixCls": prefixCls,
-					"showProgress": showOperationsProgress.value,
-					"current": current,
-					"count": count,
-					"showSwitch": showLeftOrRightSwitches.value,
-					"classNames": classNames,
-					"styles": styles,
-					"image": image,
-					"transform": transform.value,
-					"icons": icons,
-					"countRender": countRender,
-					"actionsRender": actionsRender,
-					"scale": transform.value.scale,
-					"minScale": props.minScale ?? 1,
-					"maxScale": props.maxScale ?? 50,
-					"onActive": onActive,
-					"onFlipY": onFlipY,
-					"onFlipX": onFlipX,
-					"onRotateLeft": onRotateLeft,
-					"onRotateRight": onRotateRight,
-					"onZoomOut": onZoomOut,
-					"onZoomIn": onZoomIn,
-					"onClose": () => props.onClose?.(),
-					"onReset": onReset
-				}, null)
-			]);
-		} })] });
-	};
-}, {
-	props: /* @__PURE__ */ (0, vue.mergeDefaults)({
-		prefixCls: {
-			type: String,
-			required: true,
-			default: void 0
-		},
-		classNames: {
-			type: Object,
-			required: false,
-			default: void 0
-		},
-		styles: {
-			type: Object,
-			required: false,
-			default: void 0
-		},
-		imageInfo: {
-			type: Object,
-			required: false,
-			default: void 0
-		},
-		fallback: {
-			type: String,
-			required: false,
-			default: void 0
-		},
-		imgCommonProps: {
-			type: Object,
-			required: false,
-			default: void 0
-		},
-		width: {
-			type: [String, Number],
-			required: false,
-			default: void 0
-		},
-		height: {
-			type: [String, Number],
-			required: false,
-			default: void 0
-		},
-		current: {
-			type: Number,
-			required: false,
-			default: void 0
-		},
-		count: {
-			type: Number,
-			required: false,
-			default: void 0
-		},
-		onChange: {
-			type: Function,
-			required: false,
-			default: void 0
-		},
-		onClose: {
-			type: Function,
-			required: false,
-			default: void 0
-		},
-		mousePosition: {
-			type: [null, Object],
-			required: true,
-			default: void 0
-		},
-		rootClassName: {
-			type: String,
-			required: false,
-			default: void 0
-		},
-		src: {
-			type: String,
-			required: false,
-			default: void 0
-		},
-		alt: {
-			type: String,
-			required: false,
-			default: void 0
-		},
-		scaleStep: {
-			type: Number,
-			required: false,
-			default: void 0
-		},
-		minScale: {
-			type: Number,
-			required: false,
-			default: void 0
-		},
-		maxScale: {
-			type: Number,
-			required: false,
-			default: void 0
-		},
-		motionName: {
-			type: String,
-			required: false,
-			default: void 0
-		},
-		open: {
-			type: Boolean,
-			required: false,
-			default: void 0
-		},
-		getContainer: {
-			required: false,
-			default: void 0
-		},
-		zIndex: {
-			type: Number,
-			required: false,
-			default: void 0
-		},
-		afterOpenChange: {
-			type: Function,
-			required: false,
-			default: void 0
-		},
-		movable: {
-			type: Boolean,
-			required: false,
-			default: void 0
-		},
-		icons: {
-			type: Object,
-			required: false,
-			default: void 0
-		},
-		closeIcon: {
-			type: [
-				Object,
-				Function,
-				String,
-				Number,
-				null,
-				Boolean,
-				Array
-			],
-			required: false,
-			default: void 0
-		},
-		onTransform: {
-			type: Function,
-			required: false,
-			default: void 0
-		},
-		countRender: {
-			type: Function,
-			required: false,
-			default: void 0
-		},
-		imageRender: {
-			type: Function,
-			required: false,
-			default: void 0
-		},
-		actionsRender: {
-			type: Function,
-			required: false,
-			default: void 0
-		}
-	}, {
-		movable: true,
-		scaleStep: .5,
-		minScale: 1,
-		maxScale: 50,
-		motionName: "fade",
-		current: 0,
-		count: 1,
-		icons: {}
-	}),
-	name: "ImagePreview",
-	inheritAttrs: false
-});
-var Preview_default = Preview;
-exports.default = Preview_default;