@v-c/image 0.0.1

package/dist/common.d.ts

@@ -0,0 +1,2 @@
+import { ImageElementProps } from './interface';
+export declare const COMMON_PROPS: (keyof Omit<ImageElementProps, 'src'>)[];

package/dist/common.js

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

package/dist/context.cjs

@@ -0,0 +1,10 @@
+let vue = require("vue");
+var PreviewGroupContextKey = Symbol("PreviewGroupContext");
+function usePreviewGroupContext() {
+	return (0, vue.inject)(PreviewGroupContextKey, null);
+}
+function usePreviewGroupProvider(value) {
+	(0, vue.provide)(PreviewGroupContextKey, value);
+}
+exports.usePreviewGroupContext = usePreviewGroupContext;
+exports.usePreviewGroupProvider = usePreviewGroupProvider;

package/dist/context.d.ts

@@ -0,0 +1,7 @@
+import { OnGroupPreview, RegisterImage } from './interface';
+export interface PreviewGroupContextProps {
+    register: RegisterImage;
+    onPreview: OnGroupPreview;
+}
+export declare function usePreviewGroupContext(): PreviewGroupContextProps | null;
+export declare function usePreviewGroupProvider(value: PreviewGroupContextProps): void;

package/dist/context.js

@@ -0,0 +1,9 @@
+import { inject, provide } from "vue";
+var PreviewGroupContextKey = Symbol("PreviewGroupContext");
+function usePreviewGroupContext() {
+	return inject(PreviewGroupContextKey, null);
+}
+function usePreviewGroupProvider(value) {
+	provide(PreviewGroupContextKey, value);
+}
+export { usePreviewGroupContext, usePreviewGroupProvider };

package/dist/getFixScaleEleTransPosition.cjs

@@ -0,0 +1,25 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_util = require("./util.cjs");
+function fixPoint(key, start, width, clientWidth) {
+	const startAddWidth = start + width;
+	const offsetStart = (width - clientWidth) / 2;
+	if (width > clientWidth) {
+		if (start > 0) return { [key]: offsetStart };
+		if (start < 0 && startAddWidth < clientWidth) return { [key]: -offsetStart };
+	} else if (start < 0 || startAddWidth > clientWidth) return { [key]: start < 0 ? offsetStart : -offsetStart };
+	return {};
+}
+function getFixScaleEleTransPosition(width, height, left, top) {
+	const { width: clientWidth, height: clientHeight } = require_util.getClientSize();
+	let fixPos = null;
+	if (width <= clientWidth && height <= clientHeight) fixPos = {
+		x: 0,
+		y: 0
+	};
+	else if (width > clientWidth || height > clientHeight) fixPos = {
+		...fixPoint("x", left, width, clientWidth),
+		...fixPoint("y", top, height, clientHeight)
+	};
+	return fixPos;
+}
+exports.default = getFixScaleEleTransPosition;

package/dist/getFixScaleEleTransPosition.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Fix positon x,y point when
+ *
+ * Ele width && height < client
+ * - Back origin
+ *
+ * - Ele width | height > clientWidth | clientHeight
+ * - left | top > 0 -> Back 0
+ * - left | top + width | height < clientWidth | clientHeight -> Back left | top + width | height === clientWidth | clientHeight
+ *
+ * Regardless of other
+ */
+export default function getFixScaleEleTransPosition(width: number, height: number, left: number, top: number): null | {
+    x: number;
+    y: number;
+};

package/dist/getFixScaleEleTransPosition.js

@@ -0,0 +1,24 @@
+import { getClientSize } from "./util.js";
+function fixPoint(key, start, width, clientWidth) {
+	const startAddWidth = start + width;
+	const offsetStart = (width - clientWidth) / 2;
+	if (width > clientWidth) {
+		if (start > 0) return { [key]: offsetStart };
+		if (start < 0 && startAddWidth < clientWidth) return { [key]: -offsetStart };
+	} else if (start < 0 || startAddWidth > clientWidth) return { [key]: start < 0 ? offsetStart : -offsetStart };
+	return {};
+}
+function getFixScaleEleTransPosition(width, height, left, top) {
+	const { width: clientWidth, height: clientHeight } = getClientSize();
+	let fixPos = null;
+	if (width <= clientWidth && height <= clientHeight) fixPos = {
+		x: 0,
+		y: 0
+	};
+	else if (width > clientWidth || height > clientHeight) fixPos = {
+		...fixPoint("x", left, width, clientWidth),
+		...fixPoint("y", top, height, clientHeight)
+	};
+	return fixPos;
+}
+export { getFixScaleEleTransPosition as default };

package/dist/hooks/useImageTransform.cjs

@@ -0,0 +1,96 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_util = require("../util.cjs");
+const require_isEqual = require("../util/dist/isEqual.cjs");
+const require_raf = require("../util/dist/raf.cjs");
+let vue = require("vue");
+var initialTransform = {
+	x: 0,
+	y: 0,
+	rotate: 0,
+	scale: 1,
+	flipX: false,
+	flipY: false
+};
+function useImageTransform(imgRef, minScale, maxScale, onTransform) {
+	const frame = (0, vue.shallowRef)(null);
+	const queue = (0, vue.ref)([]);
+	const transform = (0, vue.shallowRef)(initialTransform);
+	const resetTransform = (action) => {
+		const oldTransform = transform.value;
+		transform.value = initialTransform;
+		if (!require_isEqual.isEqual_default(initialTransform, oldTransform)) onTransform?.({
+			transform: initialTransform,
+			action
+		});
+	};
+	const updateTransform = (newTransform, action) => {
+		if (frame.value === null) {
+			queue.value = [];
+			frame.value = require_raf.raf_default(() => {
+				let memoState = transform.value;
+				queue.value.forEach((queueState) => {
+					memoState = {
+						...memoState,
+						...queueState
+					};
+				});
+				frame.value = null;
+				onTransform?.({
+					transform: memoState,
+					action
+				});
+				transform.value = memoState;
+			});
+		}
+		queue.value.push({
+			...transform.value,
+			...newTransform
+		});
+	};
+	const dispatchZoomChange = (ratio, action, centerX, centerY, isTouch) => {
+		if (!imgRef.value) return;
+		const { width, height, offsetWidth, offsetHeight, offsetLeft, offsetTop } = imgRef.value;
+		const _transform = transform.value;
+		const _maxScale = maxScale.value;
+		const _minScale = minScale.value;
+		let newRatio = ratio;
+		let newScale = _transform.scale * ratio;
+		if (newScale > _maxScale) {
+			newScale = _maxScale;
+			newRatio = _maxScale / _transform.scale;
+		} else if (newScale < _minScale) {
+			newScale = isTouch ? newScale : _minScale;
+			newRatio = newScale / _transform.scale;
+		}
+		const mergedCenterX = centerX ?? innerWidth / 2;
+		const mergedCenterY = centerY ?? innerHeight / 2;
+		const diffRatio = newRatio - 1;
+		const diffImgX = diffRatio * width * .5;
+		const diffImgY = diffRatio * height * .5;
+		const diffOffsetLeft = diffRatio * (mergedCenterX - _transform.x - offsetLeft);
+		const diffOffsetTop = diffRatio * (mergedCenterY - _transform.y - offsetTop);
+		let newX = _transform.x - (diffOffsetLeft - diffImgX);
+		let newY = _transform.y - (diffOffsetTop - diffImgY);
+		if (ratio < 1 && newScale === 1) {
+			const mergedWidth = offsetWidth * newScale;
+			const mergedHeight = offsetHeight * newScale;
+			const { width: clientWidth, height: clientHeight } = require_util.getClientSize();
+			if (mergedWidth <= clientWidth && mergedHeight <= clientHeight) {
+				newX = 0;
+				newY = 0;
+			}
+		}
+		updateTransform({
+			x: newX,
+			y: newY,
+			scale: newScale
+		}, action);
+	};
+	return {
+		transform,
+		resetTransform,
+		updateTransform,
+		dispatchZoomChange
+	};
+}
+exports.default = useImageTransform;

package/dist/hooks/useImageTransform.d.ts

@@ -0,0 +1,21 @@
+import { Ref } from 'vue';
+export interface TransformType {
+    x: number;
+    y: number;
+    rotate: number;
+    scale: number;
+    flipX: boolean;
+    flipY: boolean;
+}
+export type TransformAction = 'flipY' | 'flipX' | 'rotateLeft' | 'rotateRight' | 'zoomIn' | 'zoomOut' | 'close' | 'prev' | 'next' | 'wheel' | 'doubleClick' | 'move' | 'dragRebound' | 'touchZoom' | 'reset';
+export type UpdateTransformFunc = (newTransform: Partial<TransformType>, action: TransformAction) => void;
+export type DispatchZoomChangeFunc = (ratio: number, action: TransformAction, centerX?: number, centerY?: number, isTouch?: boolean) => void;
+export default function useImageTransform(imgRef: Ref<HTMLImageElement>, minScale: Ref<number>, maxScale: Ref<number>, onTransform: (info: {
+    transform: TransformType;
+    action: TransformAction;
+}) => void): {
+    transform: import('vue').ShallowRef<TransformType, TransformType>;
+    resetTransform: (action: TransformAction) => void;
+    updateTransform: UpdateTransformFunc;
+    dispatchZoomChange: DispatchZoomChangeFunc;
+};

package/dist/hooks/useImageTransform.js

@@ -0,0 +1,95 @@
+import { getClientSize } from "../util.js";
+import { isEqual_default } from "../util/dist/isEqual.js";
+import { raf_default } from "../util/dist/raf.js";
+import { ref, shallowRef } from "vue";
+var initialTransform = {
+	x: 0,
+	y: 0,
+	rotate: 0,
+	scale: 1,
+	flipX: false,
+	flipY: false
+};
+function useImageTransform(imgRef, minScale, maxScale, onTransform) {
+	const frame = shallowRef(null);
+	const queue = ref([]);
+	const transform = shallowRef(initialTransform);
+	const resetTransform = (action) => {
+		const oldTransform = transform.value;
+		transform.value = initialTransform;
+		if (!isEqual_default(initialTransform, oldTransform)) onTransform?.({
+			transform: initialTransform,
+			action
+		});
+	};
+	const updateTransform = (newTransform, action) => {
+		if (frame.value === null) {
+			queue.value = [];
+			frame.value = raf_default(() => {
+				let memoState = transform.value;
+				queue.value.forEach((queueState) => {
+					memoState = {
+						...memoState,
+						...queueState
+					};
+				});
+				frame.value = null;
+				onTransform?.({
+					transform: memoState,
+					action
+				});
+				transform.value = memoState;
+			});
+		}
+		queue.value.push({
+			...transform.value,
+			...newTransform
+		});
+	};
+	const dispatchZoomChange = (ratio, action, centerX, centerY, isTouch) => {
+		if (!imgRef.value) return;
+		const { width, height, offsetWidth, offsetHeight, offsetLeft, offsetTop } = imgRef.value;
+		const _transform = transform.value;
+		const _maxScale = maxScale.value;
+		const _minScale = minScale.value;
+		let newRatio = ratio;
+		let newScale = _transform.scale * ratio;
+		if (newScale > _maxScale) {
+			newScale = _maxScale;
+			newRatio = _maxScale / _transform.scale;
+		} else if (newScale < _minScale) {
+			newScale = isTouch ? newScale : _minScale;
+			newRatio = newScale / _transform.scale;
+		}
+		const mergedCenterX = centerX ?? innerWidth / 2;
+		const mergedCenterY = centerY ?? innerHeight / 2;
+		const diffRatio = newRatio - 1;
+		const diffImgX = diffRatio * width * .5;
+		const diffImgY = diffRatio * height * .5;
+		const diffOffsetLeft = diffRatio * (mergedCenterX - _transform.x - offsetLeft);
+		const diffOffsetTop = diffRatio * (mergedCenterY - _transform.y - offsetTop);
+		let newX = _transform.x - (diffOffsetLeft - diffImgX);
+		let newY = _transform.y - (diffOffsetTop - diffImgY);
+		if (ratio < 1 && newScale === 1) {
+			const mergedWidth = offsetWidth * newScale;
+			const mergedHeight = offsetHeight * newScale;
+			const { width: clientWidth, height: clientHeight } = getClientSize();
+			if (mergedWidth <= clientWidth && mergedHeight <= clientHeight) {
+				newX = 0;
+				newY = 0;
+			}
+		}
+		updateTransform({
+			x: newX,
+			y: newY,
+			scale: newScale
+		}, action);
+	};
+	return {
+		transform,
+		resetTransform,
+		updateTransform,
+		dispatchZoomChange
+	};
+}
+export { useImageTransform as default };

package/dist/hooks/useMouseEvent.cjs

@@ -0,0 +1,93 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_warning = require("../util/dist/warning.cjs");
+require("../util/dist/index.cjs");
+const require_getFixScaleEleTransPosition = require("../getFixScaleEleTransPosition.cjs");
+const require_previewConfig = require("../previewConfig.cjs");
+let vue = require("vue");
+function useMouseEvent(imgRef, movable, open, scaleStep, transform, updateTransform, dispatchZoomChange) {
+	const isMoving = (0, vue.shallowRef)(false);
+	const startPositionInfo = (0, vue.shallowRef)({
+		diffX: 0,
+		diffY: 0,
+		transformX: 0,
+		transformY: 0
+	});
+	const onMouseDown = (event) => {
+		const { x, y } = transform.value;
+		if (!movable.value || event.button !== 0) return;
+		event.preventDefault();
+		event.stopPropagation();
+		startPositionInfo.value = {
+			diffX: event.pageX - x,
+			diffY: event.pageY - y,
+			transformX: x,
+			transformY: y
+		};
+		isMoving.value = true;
+	};
+	const onMouseMove = (event) => {
+		if (open.value && isMoving.value) updateTransform({
+			x: event.pageX - startPositionInfo.value.diffX,
+			y: event.pageY - startPositionInfo.value.diffY
+		}, "move");
+	};
+	const onMouseUp = () => {
+		if (open.value && isMoving.value) {
+			const { x, y, scale, rotate } = transform.value;
+			isMoving.value = false;
+			const { transformX, transformY } = startPositionInfo.value;
+			if (!(x !== transformX && y !== transformY)) return;
+			if (!imgRef.value) return;
+			const width = imgRef.value.offsetWidth * scale;
+			const height = imgRef.value.offsetHeight * scale;
+			const { left, top } = imgRef.value.getBoundingClientRect() ?? {};
+			const isRotate = rotate % 180 !== 0;
+			const fixState = require_getFixScaleEleTransPosition.default(isRotate ? height : width, isRotate ? width : height, left, top);
+			if (fixState) updateTransform({ ...fixState }, "dragRebound");
+		}
+	};
+	const onWheel = (event) => {
+		if (!open.value || event.deltaY === 0) return;
+		const scaleRatio = Math.abs(event.deltaY / 100);
+		let ratio = 1 + Math.min(scaleRatio, 1) * scaleStep.value;
+		if (event.deltaY > 0) ratio = 1 / ratio;
+		dispatchZoomChange(ratio, "wheel", event.clientX, event.clientY);
+	};
+	(0, vue.watch)([
+		open,
+		isMoving,
+		transform,
+		movable
+	], (_n, _o, onCleanup) => {
+		if (movable.value) {
+			window.addEventListener("mouseup", onMouseUp, false);
+			window.addEventListener("mousemove", onMouseMove, false);
+			try {
+				/* istanbul ignore next */
+				if (window.top !== window.self) {
+					window?.top?.addEventListener("mouseup", onMouseUp, false);
+					window?.top?.addEventListener("mousemove", onMouseMove, false);
+				}
+			} catch (e) {
+				require_warning.warning_default(false, `[vc-image] ${e}`);
+			}
+		}
+		onCleanup(() => {
+			window.removeEventListener("mouseup", onMouseUp);
+			window.removeEventListener("mousemove", onMouseMove);
+			/* istanbul ignore next */
+			try {
+				window.top?.removeEventListener("mouseup", onMouseUp);
+				window.top?.removeEventListener("mousemove", onMouseMove);
+			} catch (error) {}
+		});
+	});
+	return {
+		isMoving,
+		onMouseDown,
+		onMouseMove,
+		onMouseUp,
+		onWheel
+	};
+}
+exports.default = useMouseEvent;

package/dist/hooks/useMouseEvent.d.ts

@@ -0,0 +1,9 @@
+import { Ref } from 'vue';
+import { DispatchZoomChangeFunc, TransformType, UpdateTransformFunc } from './useImageTransform.ts';
+export default function useMouseEvent(imgRef: Ref<HTMLImageElement>, movable: Ref<boolean>, open: Ref<boolean>, scaleStep: Ref<number>, transform: Ref<TransformType>, updateTransform: UpdateTransformFunc, dispatchZoomChange: DispatchZoomChangeFunc): {
+    isMoving: import('vue').ShallowRef<boolean, boolean>;
+    onMouseDown: (event: MouseEvent) => void;
+    onMouseMove: (event: MouseEvent) => void;
+    onMouseUp: () => void;
+    onWheel: (event: WheelEvent) => void;
+};

package/dist/hooks/useMouseEvent.js

@@ -0,0 +1,92 @@
+import { warning_default } from "../util/dist/warning.js";
+import "../util/dist/index.js";
+import getFixScaleEleTransPosition from "../getFixScaleEleTransPosition.js";
+import { BASE_SCALE_RATIO, WHEEL_MAX_SCALE_RATIO } from "../previewConfig.js";
+import { shallowRef, watch } from "vue";
+function useMouseEvent(imgRef, movable, open, scaleStep, transform, updateTransform, dispatchZoomChange) {
+	const isMoving = shallowRef(false);
+	const startPositionInfo = shallowRef({
+		diffX: 0,
+		diffY: 0,
+		transformX: 0,
+		transformY: 0
+	});
+	const onMouseDown = (event) => {
+		const { x, y } = transform.value;
+		if (!movable.value || event.button !== 0) return;
+		event.preventDefault();
+		event.stopPropagation();
+		startPositionInfo.value = {
+			diffX: event.pageX - x,
+			diffY: event.pageY - y,
+			transformX: x,
+			transformY: y
+		};
+		isMoving.value = true;
+	};
+	const onMouseMove = (event) => {
+		if (open.value && isMoving.value) updateTransform({
+			x: event.pageX - startPositionInfo.value.diffX,
+			y: event.pageY - startPositionInfo.value.diffY
+		}, "move");
+	};
+	const onMouseUp = () => {
+		if (open.value && isMoving.value) {
+			const { x, y, scale, rotate } = transform.value;
+			isMoving.value = false;
+			const { transformX, transformY } = startPositionInfo.value;
+			if (!(x !== transformX && y !== transformY)) return;
+			if (!imgRef.value) return;
+			const width = imgRef.value.offsetWidth * scale;
+			const height = imgRef.value.offsetHeight * scale;
+			const { left, top } = imgRef.value.getBoundingClientRect() ?? {};
+			const isRotate = rotate % 180 !== 0;
+			const fixState = getFixScaleEleTransPosition(isRotate ? height : width, isRotate ? width : height, left, top);
+			if (fixState) updateTransform({ ...fixState }, "dragRebound");
+		}
+	};
+	const onWheel = (event) => {
+		if (!open.value || event.deltaY === 0) return;
+		const scaleRatio = Math.abs(event.deltaY / 100);
+		let ratio = 1 + Math.min(scaleRatio, 1) * scaleStep.value;
+		if (event.deltaY > 0) ratio = 1 / ratio;
+		dispatchZoomChange(ratio, "wheel", event.clientX, event.clientY);
+	};
+	watch([
+		open,
+		isMoving,
+		transform,
+		movable
+	], (_n, _o, onCleanup) => {
+		if (movable.value) {
+			window.addEventListener("mouseup", onMouseUp, false);
+			window.addEventListener("mousemove", onMouseMove, false);
+			try {
+				/* istanbul ignore next */
+				if (window.top !== window.self) {
+					window?.top?.addEventListener("mouseup", onMouseUp, false);
+					window?.top?.addEventListener("mousemove", onMouseMove, false);
+				}
+			} catch (e) {
+				warning_default(false, `[vc-image] ${e}`);
+			}
+		}
+		onCleanup(() => {
+			window.removeEventListener("mouseup", onMouseUp);
+			window.removeEventListener("mousemove", onMouseMove);
+			/* istanbul ignore next */
+			try {
+				window.top?.removeEventListener("mouseup", onMouseUp);
+				window.top?.removeEventListener("mousemove", onMouseMove);
+			} catch (error) {}
+		});
+	});
+	return {
+		isMoving,
+		onMouseDown,
+		onMouseMove,
+		onMouseUp,
+		onWheel
+	};
+}
+export { useMouseEvent as default };

package/dist/hooks/usePreviewItems.cjs

@@ -0,0 +1,45 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_common = require("../common.cjs");
+let vue = require("vue");
+function usePreviewItems(items) {
+	const images = (0, vue.shallowRef)({});
+	const registerImage = (id, data) => {
+		images.value = {
+			...images.value,
+			[id]: data
+		};
+		return () => {
+			const cloneImgs = { ...images.value };
+			delete cloneImgs[id];
+			images.value = cloneImgs;
+		};
+	};
+	const mergedItems = (0, vue.shallowRef)([]);
+	(0, vue.watchEffect)(() => {
+		if (items?.value) {
+			mergedItems.value = items.value.map((item) => {
+				if (typeof item === "string") return { data: { src: item } };
+				const data = {};
+				Object.keys(item).forEach((key) => {
+					if (["src", ...require_common.COMMON_PROPS].includes(key)) data[key] = item[key];
+				});
+				return { data };
+			});
+			return;
+		}
+		mergedItems.value = Object.keys(images.value).reduce((total, id) => {
+			const { canPreview, data } = images.value[id];
+			if (canPreview) total.push({
+				data,
+				id
+			});
+			return total;
+		}, []);
+	});
+	return [
+		mergedItems,
+		registerImage,
+		(0, vue.computed)(() => !!items?.value)
+	];
+}
+exports.default = usePreviewItems;

package/dist/hooks/usePreviewItems.d.ts

@@ -0,0 +1,10 @@
+import { Ref } from 'vue';
+import { PreviewImageElementProps, RegisterImage } from '../interface';
+import { PreviewGroupProps } from '../PreviewGroup.tsx';
+export type Items = Omit<PreviewImageElementProps & {
+    id?: string;
+}, 'canPreview'>[];
+/**
+ * Merge props provided `items` or context collected images
+ */
+export default function usePreviewItems(items?: Ref<PreviewGroupProps['items'] | undefined>): [items: Ref<Items>, registerImage: RegisterImage, fromItems: Ref<boolean>];

package/dist/hooks/usePreviewItems.js

@@ -0,0 +1,44 @@
+import { COMMON_PROPS } from "../common.js";
+import { computed, shallowRef, watchEffect } from "vue";
+function usePreviewItems(items) {
+	const images = shallowRef({});
+	const registerImage = (id, data) => {
+		images.value = {
+			...images.value,
+			[id]: data
+		};
+		return () => {
+			const cloneImgs = { ...images.value };
+			delete cloneImgs[id];
+			images.value = cloneImgs;
+		};
+	};
+	const mergedItems = shallowRef([]);
+	watchEffect(() => {
+		if (items?.value) {
+			mergedItems.value = items.value.map((item) => {
+				if (typeof item === "string") return { data: { src: item } };
+				const data = {};
+				Object.keys(item).forEach((key) => {
+					if (["src", ...COMMON_PROPS].includes(key)) data[key] = item[key];
+				});
+				return { data };
+			});
+			return;
+		}
+		mergedItems.value = Object.keys(images.value).reduce((total, id) => {
+			const { canPreview, data } = images.value[id];
+			if (canPreview) total.push({
+				data,
+				id
+			});
+			return total;
+		}, []);
+	});
+	return [
+		mergedItems,
+		registerImage,
+		computed(() => !!items?.value)
+	];
+}
+export { usePreviewItems as default };

package/dist/hooks/useRegisterImage.cjs

@@ -0,0 +1,25 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_context = require("../context.cjs");
+let vue = require("vue");
+var uid = 0;
+function useRegisterImage(canPreview, data) {
+	uid += 1;
+	const id = (0, vue.shallowRef)(String(uid));
+	const groupContext = require_context.usePreviewGroupContext();
+	const registerData = () => ({
+		data: data.value,
+		canPreview: canPreview.value
+	});
+	let unRegister;
+	(0, vue.onMounted)(() => {
+		if (groupContext) unRegister = groupContext.register(id.value, registerData());
+	});
+	(0, vue.watch)([canPreview, data], () => {
+		if (groupContext) groupContext.register(id.value, registerData());
+	}, { deep: true });
+	(0, vue.onBeforeUnmount)(() => {
+		unRegister?.();
+	});
+	return id.value;
+}
+exports.default = useRegisterImage;

package/dist/hooks/useRegisterImage.d.ts

@@ -0,0 +1,3 @@
+import { Ref } from 'vue';
+import { ImageElementProps } from '../interface';
+export default function useRegisterImage(canPreview: Ref<boolean>, data: Ref<ImageElementProps>): string;