@gx-design-vue/image 0.2.0-alpha.1 → 0.2.0-alpha.2

package/dist/ImagePreview/hooks/useMouseEvent.js

@@ -1,100 +0,0 @@
-import addEventListenerWrap from "../utils/addEventListener.js";
-import { BASE_SCALE_RATIO, WHEEL_MAX_SCALE_RATIO } from "../utils/util.js";
-import getFixScaleEleTransPosition from "./getFixScaleEleTransPosition.js";
-import { ref } from "vue";
-import { useEffect, useState } from "@gx-design-vue/pro-hooks";
-
-//#region src/ImagePreview/hooks/useMouseEvent.ts
-function useMouseEvent(imgRef, movable, visible, scaleStep, transform, updateTransform, dispatchZoomChange) {
-	const [isMoving, setMoving] = useState(false);
-	const startPositionInfo = ref({
-		diffX: 0,
-		diffY: 0,
-		transformX: 0,
-		transformY: 0
-	});
-	const onMouseDown = (event) => {
-		if (!movable || event.button !== 0) return;
-		event.preventDefault();
-		event.stopPropagation();
-		startPositionInfo.value = {
-			diffX: event.pageX - transform.value.x,
-			diffY: event.pageY - transform.value.y,
-			transformX: transform.value.x,
-			transformY: transform.value.y
-		};
-		setMoving(true);
-	};
-	const onMouseMove = (event) => {
-		if (visible && isMoving.value) updateTransform({
-			x: event.pageX - startPositionInfo.value.diffX,
-			y: event.pageY - startPositionInfo.value.diffY
-		}, "move");
-	};
-	const onMouseUp = () => {
-		if (visible && isMoving.value) {
-			setMoving(false);
-			/** No need to restore the position when the picture is not moved, So as not to interfere with the click */
-			const { transformX, transformY } = startPositionInfo.value;
-			if (!(transform.value.x !== transformX && transform.value.y !== transformY)) return;
-			const width = imgRef.value.offsetWidth * transform.value.scale;
-			const height = imgRef.value.offsetHeight * transform.value.scale;
-			const { left, top } = imgRef.value.getBoundingClientRect();
-			const isRotate = transform.value.rotate % 180 !== 0;
-			const fixState = getFixScaleEleTransPosition(isRotate ? height : width, isRotate ? width : height, left, top);
-			if (fixState) updateTransform({ ...fixState }, "dragRebound");
-		}
-	};
-	const onWheel = (event) => {
-		if (!visible || event.deltaY === 0) return;
-		const scaleRatio = Math.abs(event.deltaY / 100);
-		let ratio = BASE_SCALE_RATIO + Math.min(scaleRatio, WHEEL_MAX_SCALE_RATIO) * scaleStep.value;
-		if (event.deltaY > 0) ratio = BASE_SCALE_RATIO / ratio;
-		dispatchZoomChange(ratio, "wheel", event.clientX, event.clientY);
-	};
-	useEffect(() => {
-		let onTopMouseUpListener;
-		let onTopMouseMoveListener;
-		let onMouseUpListener;
-		let onMouseMoveListener;
-		if (movable) {
-			onMouseUpListener = addEventListenerWrap(window, "mouseup", onMouseUp, false);
-			onMouseMoveListener = addEventListenerWrap(window, "mousemove", onMouseMove, false);
-			try {
-				/* istanbul ignore next */
-				if (window.top !== window.self) {
-					onTopMouseUpListener = addEventListenerWrap(window.top, "mouseup", onMouseUp, false);
-					onTopMouseMoveListener = addEventListenerWrap(window.top, "mousemove", onMouseMove, false);
-				}
-			} catch (error) {
-				/* istanbul ignore next */
-				console.warn(`[rc-image] ${error}`);
-			}
-		}
-		return () => {
-			onMouseUpListener?.remove();
-			onMouseMoveListener?.remove();
-			/* istanbul ignore next */
-			onTopMouseUpListener?.remove();
-			/* istanbul ignore next */
-			onTopMouseMoveListener?.remove();
-		};
-	}, [
-		visible,
-		isMoving,
-		() => transform.value.x,
-		() => transform.value.y,
-		() => transform.value.rotate,
-		movable
-	]);
-	return {
-		isMoving,
-		onMouseDown,
-		onMouseMove,
-		onMouseUp,
-		onWheel
-	};
-}
-
-//#endregion
-export { useMouseEvent as default };

package/dist/ImagePreview/hooks/useTouchEvent.d.ts

@@ -1,12 +0,0 @@
-import { DispatchZoomChangeFunc, TransformType, UpdateTransformFunc } from "./useImageTransform.js";
-import { Ref } from "vue";
-
-//#region src/ImagePreview/hooks/useTouchEvent.d.ts
-declare function useTouchEvent(imgRef: Ref<HTMLImageElement>, movable: Ref<boolean>, visible: Ref<boolean>, minScale: Ref<number>, transform: Ref<TransformType>, updateTransform: UpdateTransformFunc, dispatchZoomChange: DispatchZoomChangeFunc): {
-  isTouching: Ref<boolean, boolean>;
-  onTouchStart: (event: TouchEvent) => void;
-  onTouchMove: (event: TouchEvent) => void;
-  onTouchEnd: () => void;
-};
-//#endregion
-export { useTouchEvent as default };

package/dist/ImagePreview/index.d.ts

@@ -1,162 +0,0 @@
-import { TransformAction, TransformType } from "./hooks/useImageTransform.js";
-import _default, { PreviewPropsIcons } from "./props.js";
-import * as vue6 from "vue";
-import { ExtractPropTypes, SlotsType } from "vue";
-import * as _gx_design_vue_pro_utils3 from "@gx-design-vue/pro-utils";
-import * as ant_design_vue_es__util_type0 from "ant-design-vue/es/_util/type";
-
-//#region src/ImagePreview/index.d.ts
-type ImagePreviewProps = Partial<ExtractPropTypes<typeof _default>>;
-declare const GImagePreview: vue6.DefineComponent<ExtractPropTypes<{
-  urls: {
-    type: vue6.PropType<string[]>;
-    default: () => any[];
-  };
-  open: {
-    type: vue6.PropType<boolean>;
-    default: boolean;
-  };
-  scaleStep: {
-    type: vue6.PropType<number>;
-    default: number;
-  };
-  minScale: {
-    type: vue6.PropType<number>;
-    default: number;
-  };
-  maxScale: {
-    type: vue6.PropType<number>;
-    default: number;
-  };
-  movable: {
-    type: vue6.PropType<boolean>;
-    default: boolean;
-  };
-  disabled: vue6.PropType<boolean>;
-  zIndex: {
-    type: vue6.PropType<number>;
-    default: number;
-  };
-  current: {
-    type: vue6.PropType<number>;
-    default: number;
-  };
-  infinite: {
-    type: vue6.PropType<boolean>;
-    default: boolean;
-  };
-  getContainer: {
-    type: vue6.PropType<string>;
-  };
-  onHideOnClickModal: {
-    type: vue6.PropType<boolean>;
-    default: boolean;
-  };
-  countRender: vue6.PropType<_gx_design_vue_pro_utils3.WithFalse<(current: number, total: number) => _gx_design_vue_pro_utils3.CustomRender>>;
-  icons: {
-    type: vue6.PropType<PreviewPropsIcons>;
-    default: () => PreviewPropsIcons;
-  };
-  onTransform: vue6.PropType<(info: {
-    transform: TransformType;
-    action: TransformAction;
-  }) => void>;
-  onOpenChange: vue6.PropType<(val: boolean) => void>;
-  'onUpdate:open': vue6.PropType<(val: boolean) => void>;
-}>, () => ant_design_vue_es__util_type0.VueNode, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {
-  close: () => true;
-  transform: (_info: {
-    transform: TransformType;
-    action: TransformAction;
-  }) => true;
-  'update:open': (_val: boolean) => true;
-}, string, vue6.PublicProps, Readonly<ExtractPropTypes<{
-  urls: {
-    type: vue6.PropType<string[]>;
-    default: () => any[];
-  };
-  open: {
-    type: vue6.PropType<boolean>;
-    default: boolean;
-  };
-  scaleStep: {
-    type: vue6.PropType<number>;
-    default: number;
-  };
-  minScale: {
-    type: vue6.PropType<number>;
-    default: number;
-  };
-  maxScale: {
-    type: vue6.PropType<number>;
-    default: number;
-  };
-  movable: {
-    type: vue6.PropType<boolean>;
-    default: boolean;
-  };
-  disabled: vue6.PropType<boolean>;
-  zIndex: {
-    type: vue6.PropType<number>;
-    default: number;
-  };
-  current: {
-    type: vue6.PropType<number>;
-    default: number;
-  };
-  infinite: {
-    type: vue6.PropType<boolean>;
-    default: boolean;
-  };
-  getContainer: {
-    type: vue6.PropType<string>;
-  };
-  onHideOnClickModal: {
-    type: vue6.PropType<boolean>;
-    default: boolean;
-  };
-  countRender: vue6.PropType<_gx_design_vue_pro_utils3.WithFalse<(current: number, total: number) => _gx_design_vue_pro_utils3.CustomRender>>;
-  icons: {
-    type: vue6.PropType<PreviewPropsIcons>;
-    default: () => PreviewPropsIcons;
-  };
-  onTransform: vue6.PropType<(info: {
-    transform: TransformType;
-    action: TransformAction;
-  }) => void>;
-  onOpenChange: vue6.PropType<(val: boolean) => void>;
-  'onUpdate:open': vue6.PropType<(val: boolean) => void>;
-}>> & Readonly<{
-  onClose?: () => any;
-  onTransform?: (_info: {
-    transform: TransformType;
-    action: TransformAction;
-  }) => any;
-  "onUpdate:open"?: (_val: boolean) => any;
-}>, {
-  zIndex: number;
-  icons: PreviewPropsIcons;
-  infinite: boolean;
-  current: number;
-  open: boolean;
-  urls: string[];
-  scaleStep: number;
-  minScale: number;
-  maxScale: number;
-  movable: boolean;
-  onHideOnClickModal: boolean;
-}, SlotsType<{
-  close: () => void;
-  left: () => void;
-  right: () => void;
-  countRender: () => void;
-  rotateRight: () => void;
-  zoomIn: () => void;
-  zoomOut: () => void;
-  flipX: () => void;
-  flipY: () => void;
-  rotateLeft: () => void;
-  placeholder: () => void;
-}>, {}, {}, string, vue6.ComponentProvideOptions, true, {}, any>;
-//#endregion
-export { ImagePreviewProps, GImagePreview as default };

package/dist/ImagePreview/index.js

@@ -1,303 +0,0 @@
-import useImageTransform from "./hooks/useImageTransform.js";
-import addEventListenerWrap from "./utils/addEventListener.js";
-import { BASE_SCALE_RATIO } from "./utils/util.js";
-import useMouseEvent from "./hooks/useMouseEvent.js";
-import useTouchEvent from "./hooks/useTouchEvent.js";
-import props_default from "./props.js";
-import Operations_default from "./Operations.js";
-import { useStyle as useStyle$1 } from "./style.js";
-import KeyCode_default from "./utils/KeyCode.js";
-import { Fragment, Teleport, Transition, computed, createVNode, defineComponent, mergeProps, onMounted, onUnmounted, reactive, ref, toRef, vShow, watch, withDirectives } from "vue";
-import { RotateLeftOutlined, RotateRightOutlined, SwapOutlined, ZoomInOutlined, ZoomOutOutlined } from "@ant-design/icons-vue";
-import { getTransitionProps } from "@gx-design-vue/pro-provider";
-import { getPrefixCls, getSlot, getSlotVNode, getSlotsProps, isArray, isNumber } from "@gx-design-vue/pro-utils";
-import { omit } from "es-toolkit";
-import { useEffect, useMergedState, useState } from "@gx-design-vue/pro-hooks";
-
-//#region src/ImagePreview/index.tsx
-const defaultIcons = {
-	rotateLeft: createVNode(RotateLeftOutlined, null, null),
-	rotateRight: createVNode(RotateRightOutlined, null, null),
-	zoomIn: createVNode(ZoomInOutlined, null, null),
-	zoomOut: createVNode(ZoomOutOutlined, null, null),
-	flipX: createVNode(SwapOutlined, null, null),
-	flipY: createVNode(SwapOutlined, { "rotate": 90 }, null)
-};
-const GImagePreview = /* @__PURE__ */ defineComponent({
-	name: "GImagePreview",
-	props: props_default,
-	inheritAttrs: false,
-	slots: Object,
-	emits: {
-		close: () => true,
-		transform: (_info) => true,
-		"update:open": (_val) => true
-	},
-	setup: (props, { emit, expose, slots }) => {
-		const baseClassName = getPrefixCls({ suffixCls: "image-view" });
-		const { wrapSSR, hashId } = useStyle$1(baseClassName);
-		const [_, setOpen, innerOpen] = useMergedState(props.open, {
-			value: toRef(props, "open"),
-			onChange: (val) => {
-				props.onOpenChange?.(val);
-				emit("update:open", val);
-			}
-		});
-		const [animate, setAnimate] = useState(false);
-		const [enableTransition, setEnableTransition] = useState(true);
-		const imgRef = ref();
-		const { transform, resetTransform, updateTransform, dispatchZoomChange } = useImageTransform(imgRef, toRef(props, "minScale"), toRef(props, "maxScale"), props.onTransform);
-		const { isMoving, onMouseDown, onWheel } = useMouseEvent(imgRef, toRef(props, "movable"), innerOpen, toRef(props, "scaleStep"), transform, updateTransform, dispatchZoomChange);
-		const { isTouching, onTouchStart, onTouchMove, onTouchEnd } = useTouchEvent(imgRef, toRef(props, "movable"), innerOpen, toRef(props, "minScale"), transform, updateTransform, dispatchZoomChange);
-		useEffect(() => {
-			if (!enableTransition.value) setEnableTransition(true);
-		}, [enableTransition]);
-		const wrapper = ref(null);
-		const current = ref(props.current);
-		const urls = reactive(/* @__PURE__ */ new Map());
-		const canPreviewUrls = computed(() => new Map(Array.from(urls).map(([id, { url }]) => [id, url])));
-		const currentSrc = computed(() => canPreviewUrls.value.get(current.value));
-		const previewGroupCount = computed(() => canPreviewUrls.value.size);
-		const urlsKeys = computed(() => Array.from(canPreviewUrls.value.keys()));
-		const currentPreviewIndex = computed(() => urlsKeys.value.indexOf(current.value));
-		const showLeftOrRightSwitches = computed(() => previewGroupCount.value > 1);
-		const showOperationsProgress = computed(() => previewGroupCount.value >= 1);
-		watch(innerOpen, (val) => {
-			if (val) animate.value = true;
-		});
-		const setCurrent = (val) => {
-			current.value = val;
-		};
-		watch(() => props.current, (val) => {
-			if (isNumber(val)) setCurrent(val);
-		});
-		function registerImage(id, url) {
-			urls.set(id, {
-				url,
-				loading: true,
-				canPreview: false
-			});
-		}
-		const onClose = () => {
-			setAnimate(false);
-		};
-		const onAnimateChange = () => {
-			resetTransform("close");
-			emit("close");
-		};
-		const hideMask = (e) => {
-			if (isMoving.value) return;
-			if (wrapper.value === e?.target) onClose();
-		};
-		const handleImgLoad = () => {
-			const currentImage = urls.get(current.value);
-			if (currentImage) {
-				currentImage.loading = false;
-				currentImage.canPreview = true;
-			}
-		};
-		const handleImgError = (e) => {
-			const currentImage = urls.get(current.value);
-			if (currentImage) {
-				currentImage.loading = false;
-				currentImage.canPreview = false;
-			}
-			e.target.alt = "加载失败";
-		};
-		const onSwitchLeft = () => {
-			if (currentPreviewIndex.value > 0 || props.infinite) {
-				const prevIndex = currentPreviewIndex.value - 1 < 0 ? props.urls.length - 1 : currentPreviewIndex.value - 1;
-				setCurrent(urlsKeys.value[prevIndex]);
-				resetTransform("prev");
-			}
-		};
-		const onSwitchRight = () => {
-			if (currentPreviewIndex.value < previewGroupCount.value - 1 || props.infinite) {
-				const nextIndex = currentPreviewIndex.value + 1 > props.urls.length - 1 ? 0 : currentPreviewIndex.value + 1;
-				setCurrent(urlsKeys.value[nextIndex]);
-				resetTransform("next");
-			}
-		};
-		const onZoomIn = () => {
-			dispatchZoomChange(BASE_SCALE_RATIO + props.scaleStep, "zoomIn");
-		};
-		const onZoomOut = () => {
-			dispatchZoomChange(BASE_SCALE_RATIO / (BASE_SCALE_RATIO + props.scaleStep), "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 toolsFn = () => {
-			const slotsProps = getSlotsProps({
-				slots,
-				props: props.icons,
-				keys: [
-					"flipY",
-					"flipX",
-					"rotateLeft",
-					"rotateRight",
-					"zoomOut",
-					"zoomIn"
-				],
-				render: true,
-				defaultVNodes: [
-					defaultIcons.flipY,
-					defaultIcons.flipX,
-					defaultIcons.rotateLeft,
-					defaultIcons.rotateRight,
-					defaultIcons.zoomOut,
-					defaultIcons.zoomIn
-				]
-			});
-			return [
-				{
-					icon: slotsProps.flipY,
-					onClick: onFlipY,
-					type: "flipY"
-				},
-				{
-					icon: slotsProps.flipX,
-					onClick: onFlipX,
-					type: "flipX"
-				},
-				{
-					icon: slotsProps.rotateLeft,
-					onClick: onRotateLeft,
-					type: "rotateLeft"
-				},
-				{
-					icon: slotsProps.rotateRight,
-					onClick: onRotateRight,
-					type: "rotateRight"
-				},
-				{
-					icon: slotsProps.zoomOut,
-					onClick: () => onZoomOut(),
-					type: "zoomOut",
-					disabled: computed(() => transform.value.scale <= props.minScale)
-				},
-				{
-					icon: slotsProps.zoomIn,
-					onClick: () => onZoomIn(),
-					type: "zoomIn",
-					disabled: computed(() => transform.value.scale === props.maxScale)
-				}
-			];
-		};
-		const onDoubleClick = (event) => {
-			if (innerOpen.value) if (transform.value.scale !== 1) updateTransform({
-				x: 0,
-				y: 0,
-				scale: 1
-			}, "doubleClick");
-			else dispatchZoomChange(BASE_SCALE_RATIO + props.scaleStep, "doubleClick", event.clientX, event.clientY);
-		};
-		const onKeyDown = (event) => {
-			if (event.keyCode === KeyCode_default.ESC) onClose();
-			if (!innerOpen.value || !showLeftOrRightSwitches.value) return;
-			if (event.keyCode === KeyCode_default.LEFT) onSwitchLeft();
-			else if (event.keyCode === KeyCode_default.RIGHT) onSwitchRight();
-		};
-		let removeListeners = () => {};
-		onMounted(() => {
-			watch(() => props.urls, (val) => {
-				if (isArray(val)) val.forEach((src, currentId) => {
-					registerImage(currentId, src);
-				});
-			}, {
-				flush: "post",
-				immediate: true
-			});
-			watch([() => innerOpen.value, () => isMoving.value], () => {
-				removeListeners();
-				const onKeyDownListener = addEventListenerWrap(window, "keydown", onKeyDown, false);
-				removeListeners = () => {
-					onKeyDownListener.remove();
-				};
-			}, {
-				flush: "post",
-				immediate: true
-			});
-		});
-		onUnmounted(() => {
-			removeListeners();
-		});
-		expose({ setOpen: (val) => {
-			setOpen(val);
-			current.value = props.current;
-		} });
-		return () => {
-			const transitionProps = getTransitionProps(`${baseClassName}-mask-zoom`);
-			const zoomTransitionProps = getTransitionProps(`${baseClassName}-zoom`);
-			const icons = {};
-			for (const key in props.icons) icons[key] = getSlotVNode({
-				slots,
-				props: props.icons,
-				key
-			});
-			return wrapSSR(createVNode(Fragment, null, [createVNode(Teleport, { "to": props.getContainer || "body" }, { default: () => [innerOpen.value && createVNode(Fragment, null, [createVNode("div", { "class": `${baseClassName}-root ${hashId.value}` }, [createVNode(Transition, transitionProps, { default: () => [withDirectives(createVNode("div", { "class": `${baseClassName}-mask ${hashId.value}` }, null), [[vShow, innerOpen.value && animate.value]])] }), createVNode("div", {
-				"ref": wrapper,
-				"tabindex": -1,
-				"class": [
-					`${baseClassName}-wrap`,
-					`${hashId.value}`,
-					isMoving.value && `${baseClassName}-moving`
-				],
-				"onClick": (e) => props.onHideOnClickModal && hideMask(e)
-			}, [createVNode(Transition, mergeProps(zoomTransitionProps, { "onAfterLeave": () => onAnimateChange() }), { default: () => [withDirectives(createVNode("div", {
-				"role": "dialog",
-				"class": `${baseClassName} ${hashId.value}`
-			}, [createVNode("div", { "class": `${baseClassName}-content ${hashId.value}` }, [createVNode("div", { "class": `${baseClassName}-body ${hashId.value}` }, [createVNode("div", { "class": `${baseClassName}-img-wrapper ${hashId.value}` }, [createVNode("img", {
-				"ref": imgRef,
-				"class": `${baseClassName}-img ${hashId.value}`,
-				"src": currentSrc.value,
-				"onLoad": () => handleImgLoad(),
-				"onError": (e) => handleImgError(e),
-				"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)])])])]), [[vShow, innerOpen.value && animate.value]])] })])])])] }), innerOpen.value && animate.value && createVNode(Operations_default, {
-				"open": innerOpen.value && animate.value,
-				"hashId": hashId.value,
-				"count": props.urls.length,
-				"current": current.value,
-				"zIndex": props.zIndex + 1,
-				"getContainer": props.getContainer,
-				"prefixCls": baseClassName,
-				"icons": omit(icons, toolsFn().map(({ type }) => type)),
-				"tools": toolsFn(),
-				"infinite": props.infinite,
-				"countRender": getSlot({
-					slots,
-					props,
-					key: "countRender"
-				}),
-				"showSwitch": showLeftOrRightSwitches.value,
-				"showProgress": showOperationsProgress.value,
-				"onClose": onClose,
-				"onActive": (effect) => effect > 0 ? onSwitchRight() : onSwitchLeft()
-			}, null)]));
-		};
-	}
-});
-var ImagePreview_default = GImagePreview;
-
-//#endregion
-export { ImagePreview_default as default };

package/dist/ImagePreview/props.d.ts

@@ -1,88 +0,0 @@
-import { TransformAction, TransformType } from "./hooks/useImageTransform.js";
-import { PropType, VNode } from "vue";
-import { CustomRender, WithFalse } from "@gx-design-vue/pro-utils";
-
-//#region src/ImagePreview/props.d.ts
-interface PreviewPropsIcons {
-  close?: WithFalse<CustomRender>;
-  rotateLeft?: WithFalse<CustomRender>;
-  rotateRight?: WithFalse<CustomRender>;
-  zoomIn?: WithFalse<CustomRender>;
-  zoomOut?: WithFalse<CustomRender>;
-  left?: WithFalse<CustomRender>;
-  right?: WithFalse<CustomRender>;
-  flipX?: WithFalse<CustomRender>;
-  flipY?: WithFalse<CustomRender>;
-}
-type BaseImagePreviewProps = Partial<{
-  urls: string[];
-  mask: VNode | boolean;
-  maskClass: string;
-  disabled: boolean;
-  zIndex: number;
-  current: number;
-  infinite: boolean;
-  getContainer: string;
-  onHideOnClickModal: boolean;
-  countRender: WithFalse<(current: number, total: number) => CustomRender>;
-  icons: PreviewPropsIcons;
-}>;
-declare const _default: {
-  urls: {
-    type: PropType<string[]>;
-    default: () => any[];
-  };
-  open: {
-    type: PropType<boolean>;
-    default: boolean;
-  };
-  scaleStep: {
-    type: PropType<number>;
-    default: number;
-  };
-  minScale: {
-    type: PropType<number>;
-    default: number;
-  };
-  maxScale: {
-    type: PropType<number>;
-    default: number;
-  };
-  movable: {
-    type: PropType<boolean>;
-    default: boolean;
-  };
-  disabled: PropType<boolean>;
-  zIndex: {
-    type: PropType<number>;
-    default: number;
-  };
-  current: {
-    type: PropType<number>;
-    default: number;
-  };
-  infinite: {
-    type: PropType<boolean>;
-    default: boolean;
-  };
-  getContainer: {
-    type: PropType<string>;
-  };
-  onHideOnClickModal: {
-    type: PropType<boolean>;
-    default: boolean;
-  };
-  countRender: PropType<WithFalse<(current: number, total: number) => CustomRender>>;
-  icons: {
-    type: PropType<PreviewPropsIcons>;
-    default: () => PreviewPropsIcons;
-  };
-  onTransform: PropType<(info: {
-    transform: TransformType;
-    action: TransformAction;
-  }) => void>;
-  onOpenChange: PropType<(val: boolean) => void>;
-  'onUpdate:open': PropType<(val: boolean) => void>;
-};
-//#endregion
-export { BaseImagePreviewProps, PreviewPropsIcons, _default as default };