@v-c/image 0.0.1

package/dist/Preview/index.js

@@ -0,0 +1,397 @@
+import { clsx } from "../util/dist/classnames.js";
+import "../util/dist/index.js";
+import { usePreviewGroupContext } from "../context.js";
+import useStatus from "../hooks/useStatus.js";
+import { src_default } from "../portal/dist/index.js";
+import { KeyCodeStr } from "../util/dist/KeyCode.js";
+import { getTransitionProps } from "../util/dist/utils/transition.js";
+import useImageTransform from "../hooks/useImageTransform.js";
+import { BASE_SCALE_RATIO } from "../previewConfig.js";
+import useMouseEvent from "../hooks/useMouseEvent.js";
+import useTouchEvent from "../hooks/useTouchEvent.js";
+import CloseBtn_default from "./CloseBtn.js";
+import Footer_default from "./Footer.js";
+import PrevNext_default from "./PrevNext.js";
+import { Transition, computed, createVNode, defineComponent, mergeDefaults, mergeProps, nextTick, shallowRef, watch, watchEffect } from "vue";
+var Preview_default = /* @__PURE__ */ defineComponent((props, { attrs }) => {
+	const imgEl = shallowRef();
+	const groupContext = usePreviewGroupContext();
+	const showLeftOrRightSwitches = computed(() => !!groupContext && (props.count ?? 1) > 1);
+	const showOperationsProgress = computed(() => !!groupContext && (props.count ?? 1) >= 1);
+	const enableTransition = shallowRef(true);
+	watch(enableTransition, async (val) => {
+		if (!val) {
+			await nextTick();
+			enableTransition.value = true;
+		}
+	});
+	const { transform, resetTransform, updateTransform, dispatchZoomChange } = useImageTransform(imgEl, computed(() => props.minScale ?? 1), computed(() => props.maxScale ?? 50), (info) => props.onTransform?.(info));
+	const { isMoving, onMouseDown, onWheel } = useMouseEvent(imgEl, computed(() => props.movable ?? true), computed(() => !!props.open), computed(() => props.scaleStep ?? .5), transform, updateTransform, dispatchZoomChange);
+	const { isTouching, onTouchStart, onTouchMove, onTouchEnd } = useTouchEvent(imgEl, computed(() => props.movable ?? true), computed(() => !!props.open), computed(() => props.minScale ?? 1), transform, updateTransform, dispatchZoomChange);
+	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 === KeyCodeStr.Escape) {
+			props.onClose?.();
+			return;
+		}
+		if (showLeftOrRightSwitches.value) {
+			if (key === KeyCodeStr.ArrowLeft) onActive(-1);
+			else if (key === KeyCodeStr.ArrowRight) onActive(1);
+		}
+	};
+	watchEffect((onCleanup) => {
+		if (props.open) window.addEventListener("keydown", onKeyDown);
+		onCleanup(() => {
+			window.removeEventListener("keydown", onKeyDown);
+		});
+	});
+	const lockScroll = shallowRef(false);
+	watch(() => props.open, (open) => {
+		if (open) lockScroll.value = true;
+	});
+	const portalRender = shallowRef(false);
+	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] = useStatus({
+		src: computed(() => props.src),
+		fallback: 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 = createVNode("img", 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 = clsx(prefixCls, rootClassName, classNames.root, { [`${prefixCls}-moving`]: isMoving.value });
+		const transitionProps = getTransitionProps(motionName);
+		return createVNode(src_default, {
+			"open": portalRender.value,
+			"getContainer": getContainer,
+			"autoLock": lockScroll.value
+		}, { default: () => [createVNode(Transition, mergeProps(transitionProps, {
+			"onAfterEnter": () => onVisibleChanged(true),
+			"onAfterLeave": () => onVisibleChanged(false)
+		}), { default: () => {
+			if (!(portalRender.value && open)) return null;
+			return createVNode("div", {
+				"class": mergedRootCls,
+				"style": mergedRootStyle
+			}, [
+				createVNode("div", {
+					"class": clsx(`${prefixCls}-mask`, classNames.mask),
+					"style": styles.mask,
+					"onClick": () => props.onClose?.()
+				}, null),
+				createVNode("div", {
+					"class": clsx(`${prefixCls}-body`, classNames.body),
+					"style": bodyStyle
+				}, [imageRender ? imageRender(imgNode, {
+					transform: transform.value,
+					image,
+					...groupContext ? { current } : {}
+				}) : imgNode]),
+				closeIcon !== false && closeIcon !== null && createVNode(CloseBtn_default, {
+					"prefixCls": prefixCls,
+					"icon": closeIcon === true ? icons.close : closeIcon || icons.close,
+					"onClick": () => props.onClose?.()
+				}, null),
+				showLeftOrRightSwitches.value && createVNode(PrevNext_default, {
+					"prefixCls": prefixCls,
+					"current": current,
+					"count": count,
+					"icons": icons,
+					"onActive": onActive
+				}, null),
+				createVNode(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__ */ 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
+});
+export { Preview_default as default };

package/dist/PreviewGroup.cjs

@@ -0,0 +1,135 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_useMergedState = require("./util/dist/hooks/useMergedState.cjs");
+const require_context = require("./context.cjs");
+const require_index = require("./Preview/index.cjs");
+const require_usePreviewItems = require("./hooks/usePreviewItems.cjs");
+let vue = require("vue");
+var PreviewGroup = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots, emit }) => {
+	const mergedPreviewConfig = (0, vue.computed)(() => {
+		if (props.preview && typeof props.preview === "object") return props.preview;
+		return {};
+	});
+	const previewOpen = (0, vue.computed)(() => mergedPreviewConfig.value.open);
+	const previewCurrent = (0, vue.computed)(() => mergedPreviewConfig.value.current);
+	const [mergedItems, register, fromItems] = require_usePreviewItems.default((0, vue.toRef)(props, "items"));
+	const [current, setCurrent] = require_useMergedState.useMergedState(0, { value: previewCurrent });
+	const keepOpenIndex = (0, vue.shallowRef)(false);
+	const [isShowPreview, setShowPreview] = require_useMergedState.useMergedState(!!previewOpen.value, { value: previewOpen });
+	const triggerShowPreview = (next) => {
+		const prev = isShowPreview.value;
+		setShowPreview(next);
+		if (next !== prev) mergedPreviewConfig.value.onOpenChange?.(next, { current: current.value });
+	};
+	const mousePosition = (0, vue.shallowRef)(null);
+	const onPreviewFromImage = (id, imageSrc, mouseX, mouseY) => {
+		const itemsList = mergedItems.value;
+		const index = fromItems.value ? itemsList.findIndex((item) => item.data.src === imageSrc) : itemsList.findIndex((item) => item.id === id);
+		setCurrent(index < 0 ? 0 : index);
+		triggerShowPreview(true);
+		mousePosition.value = {
+			x: mouseX,
+			y: mouseY
+		};
+		keepOpenIndex.value = true;
+	};
+	(0, vue.watch)(isShowPreview, (open) => {
+		if (open) {
+			if (!keepOpenIndex.value) setCurrent(0);
+		} else keepOpenIndex.value = false;
+	});
+	const onInternalChange = (next, prev) => {
+		setCurrent(next);
+		mergedPreviewConfig.value.onChange?.(next, prev);
+		emit("change", next, prev);
+	};
+	const onPreviewClose = () => {
+		triggerShowPreview(false);
+		mousePosition.value = null;
+	};
+	require_context.usePreviewGroupProvider({
+		register,
+		onPreview: onPreviewFromImage
+	});
+	return () => {
+		const itemsList = mergedItems.value;
+		const { src,...imgCommonProps } = itemsList[current.value]?.data || {};
+		const countRender = slots.countRender ? (currentNum, total) => slots.countRender?.(currentNum, total) : mergedPreviewConfig.value.countRender;
+		const { open: _open, current: _current, onOpenChange: _onOpenChange, onChange: _onChange,...restPreviewConfig } = mergedPreviewConfig.value;
+		return (0, vue.createVNode)(vue.Fragment, null, [slots.default?.(), (0, vue.createVNode)(require_index.default, (0, vue.mergeProps)({
+			"aria-hidden": !isShowPreview.value,
+			"open": isShowPreview.value,
+			"prefixCls": props.previewPrefixCls,
+			"onClose": onPreviewClose,
+			"mousePosition": mousePosition.value,
+			"imgCommonProps": imgCommonProps,
+			"src": src,
+			"fallback": props.fallback,
+			"icons": props.icons,
+			"current": current.value,
+			"count": itemsList.length,
+			"onChange": onInternalChange
+		}, restPreviewConfig, {
+			"countRender": countRender,
+			"classNames": props.classNames?.popup,
+			"styles": props.styles?.popup
+		}), null)]);
+	};
+}, {
+	props: /* @__PURE__ */ (0, vue.mergeDefaults)({
+		previewPrefixCls: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		classNames: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		styles: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		icons: {
+			required: false,
+			default: void 0
+		},
+		items: {
+			type: Array,
+			required: false,
+			default: void 0
+		},
+		fallback: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		preview: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		children: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		}
+	}, {
+		previewPrefixCls: "vc-image-preview",
+		icons: {}
+	}),
+	name: "ImagePreviewGroup",
+	inheritAttrs: false,
+	emits: ["change"]
+});
+var PreviewGroup_default = PreviewGroup;
+exports.default = PreviewGroup_default;

package/dist/PreviewGroup.d.ts

@@ -0,0 +1,34 @@
+import { VueNode } from '@v-c/util/dist/type';
+import { CSSProperties } from 'vue';
+import { TransformType } from './hooks/useImageTransform';
+import { ImgInfo } from './Image';
+import { ImageElementProps } from './interface';
+import { InternalPreviewConfig, PreviewProps, PreviewSemanticName } from './Preview';
+export interface GroupPreviewConfig extends Omit<InternalPreviewConfig, 'imageRender'> {
+    current?: number;
+    imageRender?: (originalNode: VueNode, info: {
+        transform: TransformType;
+        current: number;
+        image: ImgInfo;
+    }) => VueNode;
+    onOpenChange?: (value: boolean, info: {
+        current: number;
+    }) => void;
+    onChange?: (current: number, prevCurrent: number) => void;
+}
+export interface PreviewGroupProps {
+    previewPrefixCls?: string;
+    classNames?: {
+        popup?: Partial<Record<PreviewSemanticName, string>>;
+    };
+    styles?: {
+        popup?: Partial<Record<PreviewSemanticName, CSSProperties>>;
+    };
+    icons?: PreviewProps['icons'];
+    items?: (string | ImageElementProps)[];
+    fallback?: string;
+    preview?: boolean | GroupPreviewConfig;
+    children?: VueNode;
+}
+declare const PreviewGroup: import('vue').DefineSetupFnComponent<PreviewGroupProps, {}, {}, PreviewGroupProps & {}, import('vue').PublicProps>;
+export default PreviewGroup;

package/dist/PreviewGroup.js

@@ -0,0 +1,133 @@
+import { useMergedState } from "./util/dist/hooks/useMergedState.js";
+import { usePreviewGroupProvider } from "./context.js";
+import Preview_default from "./Preview/index.js";
+import usePreviewItems from "./hooks/usePreviewItems.js";
+import { Fragment, computed, createVNode, defineComponent, mergeDefaults, mergeProps, shallowRef, toRef, watch } from "vue";
+var PreviewGroup_default = /* @__PURE__ */ defineComponent((props, { slots, emit }) => {
+	const mergedPreviewConfig = computed(() => {
+		if (props.preview && typeof props.preview === "object") return props.preview;
+		return {};
+	});
+	const previewOpen = computed(() => mergedPreviewConfig.value.open);
+	const previewCurrent = computed(() => mergedPreviewConfig.value.current);
+	const [mergedItems, register, fromItems] = usePreviewItems(toRef(props, "items"));
+	const [current, setCurrent] = useMergedState(0, { value: previewCurrent });
+	const keepOpenIndex = shallowRef(false);
+	const [isShowPreview, setShowPreview] = useMergedState(!!previewOpen.value, { value: previewOpen });
+	const triggerShowPreview = (next) => {
+		const prev = isShowPreview.value;
+		setShowPreview(next);
+		if (next !== prev) mergedPreviewConfig.value.onOpenChange?.(next, { current: current.value });
+	};
+	const mousePosition = shallowRef(null);
+	const onPreviewFromImage = (id, imageSrc, mouseX, mouseY) => {
+		const itemsList = mergedItems.value;
+		const index = fromItems.value ? itemsList.findIndex((item) => item.data.src === imageSrc) : itemsList.findIndex((item) => item.id === id);
+		setCurrent(index < 0 ? 0 : index);
+		triggerShowPreview(true);
+		mousePosition.value = {
+			x: mouseX,
+			y: mouseY
+		};
+		keepOpenIndex.value = true;
+	};
+	watch(isShowPreview, (open) => {
+		if (open) {
+			if (!keepOpenIndex.value) setCurrent(0);
+		} else keepOpenIndex.value = false;
+	});
+	const onInternalChange = (next, prev) => {
+		setCurrent(next);
+		mergedPreviewConfig.value.onChange?.(next, prev);
+		emit("change", next, prev);
+	};
+	const onPreviewClose = () => {
+		triggerShowPreview(false);
+		mousePosition.value = null;
+	};
+	usePreviewGroupProvider({
+		register,
+		onPreview: onPreviewFromImage
+	});
+	return () => {
+		const itemsList = mergedItems.value;
+		const { src,...imgCommonProps } = itemsList[current.value]?.data || {};
+		const countRender = slots.countRender ? (currentNum, total) => slots.countRender?.(currentNum, total) : mergedPreviewConfig.value.countRender;
+		const { open: _open, current: _current, onOpenChange: _onOpenChange, onChange: _onChange,...restPreviewConfig } = mergedPreviewConfig.value;
+		return createVNode(Fragment, null, [slots.default?.(), createVNode(Preview_default, mergeProps({
+			"aria-hidden": !isShowPreview.value,
+			"open": isShowPreview.value,
+			"prefixCls": props.previewPrefixCls,
+			"onClose": onPreviewClose,
+			"mousePosition": mousePosition.value,
+			"imgCommonProps": imgCommonProps,
+			"src": src,
+			"fallback": props.fallback,
+			"icons": props.icons,
+			"current": current.value,
+			"count": itemsList.length,
+			"onChange": onInternalChange
+		}, restPreviewConfig, {
+			"countRender": countRender,
+			"classNames": props.classNames?.popup,
+			"styles": props.styles?.popup
+		}), null)]);
+	};
+}, {
+	props: /* @__PURE__ */ mergeDefaults({
+		previewPrefixCls: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		classNames: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		styles: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		icons: {
+			required: false,
+			default: void 0
+		},
+		items: {
+			type: Array,
+			required: false,
+			default: void 0
+		},
+		fallback: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		preview: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		children: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		}
+	}, {
+		previewPrefixCls: "vc-image-preview",
+		icons: {}
+	}),
+	name: "ImagePreviewGroup",
+	inheritAttrs: false,
+	emits: ["change"]
+});
+export { PreviewGroup_default as default };

package/dist/common.cjs

@@ -0,0 +1,12 @@
+const COMMON_PROPS = [
+	"crossOrigin",
+	"decoding",
+	"draggable",
+	"loading",
+	"referrerPolicy",
+	"sizes",
+	"srcset",
+	"useMap",
+	"alt"
+];
+exports.COMMON_PROPS = COMMON_PROPS;