@v-c/image 0.0.1

package/dist/Preview/index.cjs

@@ -0,0 +1,399 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+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_index$1 = require("../portal/dist/index.cjs");
+const require_KeyCode = require("../util/dist/KeyCode.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 }) => {
+	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 (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, 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;

package/dist/Preview/index.d.ts

@@ -0,0 +1,101 @@
+import { PortalProps } from '@v-c/portal';
+import { VueNode } from '@v-c/util/dist/type';
+import { CSSProperties } from 'vue';
+import { TransformAction, TransformType } from '../hooks/useImageTransform';
+import { ImgInfo } from '../Image';
+import { FooterSemanticName } from './Footer';
+export type PreviewSemanticName = 'root' | 'mask' | 'body' | FooterSemanticName;
+export interface OperationIcons {
+    rotateLeft?: VueNode;
+    rotateRight?: VueNode;
+    zoomIn?: VueNode;
+    zoomOut?: VueNode;
+    close?: VueNode;
+    prev?: VueNode;
+    next?: VueNode;
+    /** @deprecated Please use `prev` instead */
+    left?: VueNode;
+    /** @deprecated Please use `next` instead */
+    right?: VueNode;
+    flipX?: VueNode;
+    flipY?: VueNode;
+}
+export interface Actions {
+    onActive: (offset: number) => void;
+    onFlipY: () => void;
+    onFlipX: () => void;
+    onRotateLeft: () => void;
+    onRotateRight: () => void;
+    onZoomOut: () => void;
+    onZoomIn: () => void;
+    onClose: () => void;
+    onReset: () => void;
+}
+export interface ToolbarRenderInfoType {
+    icons: {
+        prevIcon?: VueNode;
+        nextIcon?: VueNode;
+        flipYIcon: VueNode;
+        flipXIcon: VueNode;
+        rotateLeftIcon: VueNode;
+        rotateRightIcon: VueNode;
+        zoomOutIcon: VueNode;
+        zoomInIcon: VueNode;
+    };
+    actions: Actions;
+    transform: TransformType;
+    current: number;
+    total: number;
+    image: ImgInfo;
+}
+export interface InternalPreviewConfig {
+    /** Better to use `classNames.root` instead */
+    rootClassName?: string;
+    src?: string;
+    alt?: string;
+    scaleStep?: number;
+    minScale?: number;
+    maxScale?: number;
+    motionName?: string;
+    open?: boolean;
+    getContainer?: PortalProps['getContainer'];
+    zIndex?: number;
+    afterOpenChange?: (open: boolean) => void;
+    movable?: boolean;
+    icons?: OperationIcons;
+    closeIcon?: VueNode | boolean | null;
+    onTransform?: (info: {
+        transform: TransformType;
+        action: TransformAction;
+    }) => void;
+    countRender?: (current: number, total: number) => VueNode;
+    imageRender?: (originalNode: VueNode, info: {
+        transform: TransformType;
+        current?: number;
+        image: ImgInfo;
+    }) => VueNode;
+    actionsRender?: (originalNode: VueNode, info: ToolbarRenderInfoType) => VueNode;
+}
+export interface PreviewProps extends InternalPreviewConfig {
+    prefixCls: string;
+    classNames?: Partial<Record<PreviewSemanticName, string>>;
+    styles?: Partial<Record<PreviewSemanticName, CSSProperties>>;
+    imageInfo?: {
+        width: number | string;
+        height: number | string;
+    };
+    fallback?: string;
+    imgCommonProps?: Record<string, any>;
+    width?: string | number;
+    height?: string | number;
+    current?: number;
+    count?: number;
+    onChange?: (current: number, prev: number) => void;
+    onClose?: () => void;
+    mousePosition: null | {
+        x: number;
+        y: number;
+    };
+}
+declare const Preview: import('vue').DefineSetupFnComponent<PreviewProps, {}, {}, PreviewProps & {}, import('vue').PublicProps>;
+export default Preview;