@gx-design-vue/image 0.1.2 → 0.2.0-alpha.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 gx12358
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,12 +1,76 @@
-# Image
+<div align="center"><a name="readme-top"></a>
 
-```shell
-pnpm add @gx-design-vue/image
+<img height="180" src="https://gx12358.cn/resource/img/favicon.ico">
+
+<h1>Image</h1>
+
+</div>
+
+## ✨ Features
+
+- 🌈 Enterprise-class UI designed for web applications.
+- 📦 A set of high-quality Vue3 components out of the box.
+- 🛡 Written in TypeScript with predictable static types.
+- ⚙️ Whole package of design resources and development tools.
+- 🌍 Internationalization support for dozens of languages.
+- 🎨 Powerful theme customization based on CSS-in-JS.
+
+## 🖥 Environment Support
+
+- Modern browsers
+- Server-side Rendering
+- [Electron](https://www.electronjs.org/)
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)<br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)<br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)<br>Electron |
+| --- | --- | --- | --- | --- |
+| Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
+
+## 📦 Install
+
+```bash
+npm install @gx-design-vue/image
 ```
 
-```ts
-// 可全局引入，也可以单独引入
-import { GImage } from '@gx-design-vue/image'
+```bash
+yarn add @gx-design-vue/image
+```
+
+```bash
+pnpm add @gx-design-vue/image
+```
 
-import '@gx-design-vue/image/dist/style.less'
+```bash
+bun add @gx-design-vue/image
 ```
+
+## Acknowledgements
+
+Antdv Next is inspired by and built upon the following open-source projects.
+
+- [Ant Design](https://ant.design/)
+- [Vue.js](https://vuejs.org/)
+- [Vite](https://vitejs.dev/)
+
+## Maintainer
+
+[@gx12358](https://github.com/gx12358/vue3-antd-admin)
+
+## Contributors
+
+<a href="https://github.com/gx12358/vue3-antd-admin/graphs/contributors">
+  <img alt="Contributors" src="https://contrib.rocks/image?repo=gx12358/vue3-antd-admin" />
+</a>
+
+## Special Thanks
+
+Thanks to the [vbenjs/vue-vben-admin](https://github.com/gx12358/vue3-antd-admin) project for providing inspiration and reference implementation.
+
+## License
+
+[MIT © gx12358-2021](./LICENSE)
+
+## `Star`
+
+Thank you very much for the stars from kind-hearted people, thank you for your support :heart:
+
+[![Stargazers repo roster for @gx12358/vue3-antd-admin](https://bytecrank.com/nastyox/reporoster/php/stargazersSVG.php?user=gx12358&repo=vue3-antd-admin)](https://github.com/gx12358/vue3-antd-admin/stargazers)

package/dist/GImage.d.ts

@@ -0,0 +1,162 @@
+import { BaseImagePreviewProps } from "./ImagePreview/props.js";
+import { imageProps } from "./props.js";
+import * as vue0 from "vue";
+import { CSSProperties, ExtractPropTypes, SlotsType } from "vue";
+import * as _gx_design_vue_pro_utils0 from "@gx-design-vue/pro-utils";
+import * as ant_design_vue_es__util_type1 from "ant-design-vue/es/_util/type";
+
+//#region src/GImage.d.ts
+type GImageProps = Partial<ExtractPropTypes<typeof imageProps>>;
+declare const GImage: vue0.DefineComponent<ExtractPropTypes<{
+  preview: {
+    type: vue0.PropType<BaseImagePreviewProps | boolean>;
+    default: boolean;
+  };
+  src: {
+    type: vue0.PropType<string>;
+    default: string;
+  };
+  alt: {
+    type: vue0.PropType<string>;
+    default: string;
+  };
+  loading: {
+    type: vue0.PropType<"eager" | "lazy">;
+  };
+  fit: {
+    type: vue0.PropType<"fill" | "contain" | "cover" | "none" | "scale-down">;
+    default: string;
+  };
+  crossOrigin: {
+    type: vue0.PropType<"anonymous" | "use-credentials" | "">;
+  };
+  lazy: vue0.PropType<boolean>;
+  scrollContainer: {
+    type: vue0.PropType<string | HTMLElement | undefined>;
+  };
+  placeholder: {
+    type: vue0.PropType<_gx_design_vue_pro_utils0.WithFalse<_gx_design_vue_pro_utils0.CustomRender>>;
+    default: () => any;
+  };
+  fallback: {
+    type: vue0.PropType<_gx_design_vue_pro_utils0.WithFalse<_gx_design_vue_pro_utils0.CustomRender>>;
+    default: () => any;
+  };
+  onLoad: {
+    type: vue0.PropType<(e: Error) => void>;
+  };
+  onError: {
+    type: vue0.PropType<(e: Error) => void>;
+  };
+  onClick: {
+    type: vue0.PropType<(info: any) => void>;
+  };
+  imageStyle: {
+    type: vue0.PropType<CSSProperties>;
+    default: () => {};
+  };
+  imageClass: vue0.PropType<string>;
+  size: vue0.PropType<number>;
+  width: vue0.PropType<number>;
+  height: vue0.PropType<number>;
+  zIndex: {
+    type: vue0.PropType<number>;
+    default: number;
+  };
+  getContainer: {
+    type: vue0.PropType<string>;
+  };
+}>, () => ant_design_vue_es__util_type1.VueNode, {}, {}, {}, vue0.ComponentOptionsMixin, vue0.ComponentOptionsMixin, {
+  click: (_type: "loaded" | "error" | "success") => true;
+  load: (_event: Event) => true;
+  error: (_event: Event) => true;
+}, string, vue0.PublicProps, Readonly<ExtractPropTypes<{
+  preview: {
+    type: vue0.PropType<BaseImagePreviewProps | boolean>;
+    default: boolean;
+  };
+  src: {
+    type: vue0.PropType<string>;
+    default: string;
+  };
+  alt: {
+    type: vue0.PropType<string>;
+    default: string;
+  };
+  loading: {
+    type: vue0.PropType<"eager" | "lazy">;
+  };
+  fit: {
+    type: vue0.PropType<"fill" | "contain" | "cover" | "none" | "scale-down">;
+    default: string;
+  };
+  crossOrigin: {
+    type: vue0.PropType<"anonymous" | "use-credentials" | "">;
+  };
+  lazy: vue0.PropType<boolean>;
+  scrollContainer: {
+    type: vue0.PropType<string | HTMLElement | undefined>;
+  };
+  placeholder: {
+    type: vue0.PropType<_gx_design_vue_pro_utils0.WithFalse<_gx_design_vue_pro_utils0.CustomRender>>;
+    default: () => any;
+  };
+  fallback: {
+    type: vue0.PropType<_gx_design_vue_pro_utils0.WithFalse<_gx_design_vue_pro_utils0.CustomRender>>;
+    default: () => any;
+  };
+  onLoad: {
+    type: vue0.PropType<(e: Error) => void>;
+  };
+  onError: {
+    type: vue0.PropType<(e: Error) => void>;
+  };
+  onClick: {
+    type: vue0.PropType<(info: any) => void>;
+  };
+  imageStyle: {
+    type: vue0.PropType<CSSProperties>;
+    default: () => {};
+  };
+  imageClass: vue0.PropType<string>;
+  size: vue0.PropType<number>;
+  width: vue0.PropType<number>;
+  height: vue0.PropType<number>;
+  zIndex: {
+    type: vue0.PropType<number>;
+    default: number;
+  };
+  getContainer: {
+    type: vue0.PropType<string>;
+  };
+}>> & Readonly<{
+  onError?: (_event: Event) => any;
+  onClick?: (_type: "loaded" | "error" | "success") => any;
+  onLoad?: (_event: Event) => any;
+}>, {
+  fallback: _gx_design_vue_pro_utils0.CustomRender;
+  placeholder: _gx_design_vue_pro_utils0.CustomRender;
+  zIndex: number;
+  preview: boolean;
+  src: string;
+  alt: string;
+  fit: "fill" | "contain" | "cover" | "none" | "scale-down";
+  imageStyle: CSSProperties;
+}, SlotsType<{
+  default: () => void;
+  mask: () => void;
+  close: () => void;
+  left: () => void;
+  right: () => void;
+  countRender: () => void;
+  rotateRight: () => void;
+  zoomIn: () => void;
+  zoomOut: () => void;
+  flipX: () => void;
+  flipY: () => void;
+  rotateLeft: () => void;
+  fallback: () => void;
+  placeholder: () => void;
+}>, {}, {}, string, vue0.ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { GImageProps, GImage as default };

package/dist/GImage.js

@@ -0,0 +1,221 @@
+import { imageProps } from "./props.js";
+import ImagePreview_default from "./ImagePreview/index.js";
+import { genImageStyle } from "./style.js";
+import { isElement } from "./utils/util.js";
+import { Fragment, computed, createVNode, defineComponent, mergeProps, nextTick, onMounted, ref, watch, watchEffect } from "vue";
+import { EyeOutlined } from "@ant-design/icons-vue";
+import { unit, useProStyle } from "@gx-design-vue/pro-provider";
+import { classNames, getPrefixCls, getScrollContainer, getSlotsProps, isInContainer, isNumber, isString } from "@gx-design-vue/pro-utils";
+import { isClient, useEventListener, useThrottleFn } from "@vueuse/core";
+import { omit } from "es-toolkit";
+
+//#region src/GImage.tsx
+let prevOverflow = "";
+function fromPairs(pairs) {
+	const result = {};
+	for (let i = 0; i < pairs.length; i++) {
+		const pair = pairs[i];
+		result[pair[0]] = pair[1];
+	}
+	return result;
+}
+const GImage = /* @__PURE__ */ defineComponent({
+	props: imageProps,
+	name: "GImage",
+	inheritAttrs: false,
+	emits: {
+		click: (_type) => true,
+		load: (_event) => true,
+		error: (_event) => true
+	},
+	slots: Object,
+	setup(props, { slots, emit, attrs }) {
+		const supportLoading = isClient && "loading" in HTMLImageElement.prototype;
+		const baseClassName = getPrefixCls({ suffixCls: "image" });
+		const { wrapSSR, hashId } = useProStyle("Image", [genImageStyle], baseClassName);
+		const imageViewer = ref();
+		const imageSrc = ref();
+		const hasLoadError = ref(false);
+		const isLoading = ref(true);
+		const showViewer = ref(false);
+		const container = ref();
+		const _scrollContainer = ref();
+		let stopScrollListener;
+		let stopWheelListener;
+		const isManual = computed(() => {
+			if (props.loading === "eager") return false;
+			return !supportLoading && props.loading === "lazy" || props.lazy;
+		});
+		const imageStyle = computed(() => {
+			if (isClient && props.fit) return {
+				...props.imageStyle,
+				objectFit: props.fit
+			};
+			return props.imageStyle;
+		});
+		const previewProps = computed(() => typeof props.preview === "object" ? props.preview : {});
+		const canPreview = computed(() => !!props.preview);
+		const currentImage = computed(() => {
+			const { urls = [], current = 0 } = previewProps.value;
+			if (isNumber(current)) return urls.length >= current ? current : 0;
+			const srcIndex = urls.indexOf(props.src);
+			if (srcIndex >= 0) return srcIndex;
+			return 0;
+		});
+		const width = computed(() => unit(props.width));
+		const height = computed(() => unit(props.height));
+		const loadImage = () => {
+			if (!isClient) return;
+			isLoading.value = true;
+			hasLoadError.value = false;
+			imageSrc.value = props.src;
+		};
+		function handleLoad(event) {
+			if (hasLoadError.value) return;
+			isLoading.value = false;
+			hasLoadError.value = false;
+			emit("load", event);
+		}
+		function handleError(event) {
+			isLoading.value = false;
+			hasLoadError.value = true;
+			emit("error", event);
+		}
+		function handleLazyLoad() {
+			if (isInContainer(container.value, _scrollContainer.value)) {
+				loadImage();
+				removeLazyLoadListener();
+			}
+		}
+		const lazyLoadHandler = useThrottleFn(handleLazyLoad, 200, true);
+		async function addLazyLoadListener() {
+			if (!isClient) return;
+			await nextTick();
+			const { scrollContainer } = props;
+			if (isElement(scrollContainer)) _scrollContainer.value = scrollContainer;
+			else if (isString(scrollContainer) && scrollContainer !== "") _scrollContainer.value = document.querySelector(scrollContainer) ?? void 0;
+			else if (container.value) _scrollContainer.value = getScrollContainer(container.value);
+			if (_scrollContainer.value) {
+				stopScrollListener = useEventListener(_scrollContainer, "scroll", lazyLoadHandler);
+				setTimeout(() => handleLazyLoad(), 100);
+			}
+		}
+		function removeLazyLoadListener() {
+			if (!isClient || !_scrollContainer.value || !lazyLoadHandler) return;
+			stopScrollListener?.();
+			_scrollContainer.value = void 0;
+		}
+		function wheelHandler(e) {
+			if (!e.ctrlKey) return;
+			if (e.deltaY < 0) {
+				e.preventDefault();
+				return false;
+			} else if (e.deltaY > 0) {
+				e.preventDefault();
+				return false;
+			}
+		}
+		const clickHandler = () => {
+			emit("click", isLoading.value ? "loaded" : hasLoadError.value ? "error" : "success");
+			if (isLoading.value || hasLoadError.value) return;
+			if (canPreview.value) {
+				stopWheelListener = useEventListener("wheel", wheelHandler, { passive: false });
+				prevOverflow = document.body.style.overflow;
+				document.body.style.overflow = "hidden";
+				showViewer.value = true;
+			}
+		};
+		const closeViewer = () => {
+			stopWheelListener?.();
+			document.body.style.overflow = prevOverflow;
+			showViewer.value = false;
+		};
+		watch(() => props.src, () => {
+			if (isManual.value) {
+				isLoading.value = true;
+				hasLoadError.value = false;
+				removeLazyLoadListener();
+				addLazyLoadListener();
+			} else loadImage();
+		});
+		watchEffect(() => {
+			if (canPreview.value && showViewer.value) imageViewer.value?.setOpen(true);
+			else imageViewer.value?.setOpen(false);
+		});
+		onMounted(() => {
+			if (isManual.value) addLazyLoadListener();
+			else loadImage();
+		});
+		return () => {
+			const containerAttrs = fromPairs(Object.entries(attrs).filter(([key]) => /^(?:data-|on[A-Z])/i.test(key) || [
+				"id",
+				"style",
+				"class"
+			].includes(key)));
+			const imgAttrs = omit(attrs, Object.keys(containerAttrs));
+			const slotsProps = getSlotsProps({
+				slots,
+				props,
+				keys: [
+					"fallback",
+					"mask",
+					"placeholder"
+				],
+				render: true
+			});
+			return wrapSSR(createVNode("div", mergeProps({
+				"class": {
+					[`${hashId.value}`]: true,
+					[`${baseClassName}`]: true
+				},
+				"ref": container
+			}, containerAttrs, {
+				"style": {
+					width: unit(props.size) || width.value,
+					height: unit(props.size) || height.value,
+					...containerAttrs.style || {}
+				},
+				"onClick": () => {
+					if (hasLoadError.value) clickHandler();
+				}
+			}), [
+				hasLoadError.value ? createVNode("div", { "class": classNames(hashId.value, `${baseClassName}-error`) }, [slotsProps.fallback]) : createVNode(Fragment, null, [createVNode("img", mergeProps(imgAttrs, {
+					"src": imageSrc.value,
+					"loading": props.loading,
+					"style": imageStyle.value,
+					"class": classNames(hashId.value, props.imageClass, `${baseClassName}-img`, {
+						[`${baseClassName}-img-placeholder`]: props.placeholder === true,
+						[`${baseClassName}-img-preview`]: canPreview.value
+					}),
+					"crossorigin": props.crossOrigin,
+					"width": width.value,
+					"height": height.value,
+					"onClick": clickHandler,
+					"onLoad": handleLoad,
+					"onError": handleError
+				}), null), isLoading.value && createVNode("div", {
+					"class": classNames(`${baseClassName}-placeholder`, hashId.value),
+					"onClick": clickHandler
+				}, [slotsProps.placeholder])]),
+				previewProps.value.mask && canPreview.value && createVNode("div", {
+					"class": classNames(`${baseClassName}-mask`, previewProps.value.maskClass, hashId.value),
+					"style": { display: containerAttrs.style?.display === "none" ? "none" : void 0 }
+				}, [slotsProps.mask || createVNode("div", { "class": classNames(`${baseClassName}-mask-info`, hashId.value) }, [createVNode(EyeOutlined, null, null)])]),
+				canPreview.value && createVNode(ImagePreview_default, mergeProps({ "ref": imageViewer }, previewProps.value, {
+					"urls": previewProps.value.urls || [props.src],
+					"current": currentImage.value,
+					"onClose": () => closeViewer()
+				}), slots)
+			]));
+		};
+	}
+});
+GImage.isGImage = true;
+GImage.install = (app) => {
+	app.component(GImage.name, GImage);
+	return app;
+};
+var GImage_default = GImage;
+
+//#endregion
+export { GImage_default as default };

package/dist/ImagePreview/Operations.d.ts

@@ -0,0 +1,83 @@
+import { PreviewPropsIcons } from "./props.js";
+import { ImagePreviewTools } from "./typings.js";
+import * as vue84 from "vue";
+import { PropType } from "vue";
+import * as _gx_design_vue_pro_utils13 from "@gx-design-vue/pro-utils";
+import * as vue_jsx_runtime0 from "vue/jsx-runtime";
+
+//#region src/ImagePreview/Operations.d.ts
+declare const _default: vue84.DefineComponent<vue84.ExtractPropTypes<{
+  open: PropType<boolean>;
+  count: {
+    type: PropType<number>;
+    default: number;
+  };
+  current: {
+    type: PropType<number>;
+    default: number;
+  };
+  showSwitch: PropType<boolean>;
+  showProgress: PropType<boolean>;
+  prefixCls: PropType<string>;
+  hashId: PropType<string>;
+  zIndex: {
+    type: PropType<number>;
+    default: number;
+  };
+  icons: {
+    type: PropType<PreviewPropsIcons>;
+    default: () => PreviewPropsIcons;
+  };
+  infinite: {
+    type: PropType<boolean>;
+    default: boolean;
+  };
+  getContainer: {
+    type: PropType<string>;
+  };
+  countRender: PropType<_gx_design_vue_pro_utils13.WithFalse<(current: number, total: number) => _gx_design_vue_pro_utils13.CustomRender>>;
+  tools: PropType<ImagePreviewTools[]>;
+  onClose: PropType<() => void>;
+  onActive: PropType<(offset: number) => void>;
+}>, () => vue_jsx_runtime0.JSX.Element, {}, {}, {}, vue84.ComponentOptionsMixin, vue84.ComponentOptionsMixin, {}, string, vue84.PublicProps, Readonly<vue84.ExtractPropTypes<{
+  open: PropType<boolean>;
+  count: {
+    type: PropType<number>;
+    default: number;
+  };
+  current: {
+    type: PropType<number>;
+    default: number;
+  };
+  showSwitch: PropType<boolean>;
+  showProgress: PropType<boolean>;
+  prefixCls: PropType<string>;
+  hashId: PropType<string>;
+  zIndex: {
+    type: PropType<number>;
+    default: number;
+  };
+  icons: {
+    type: PropType<PreviewPropsIcons>;
+    default: () => PreviewPropsIcons;
+  };
+  infinite: {
+    type: PropType<boolean>;
+    default: boolean;
+  };
+  getContainer: {
+    type: PropType<string>;
+  };
+  countRender: PropType<_gx_design_vue_pro_utils13.WithFalse<(current: number, total: number) => _gx_design_vue_pro_utils13.CustomRender>>;
+  tools: PropType<ImagePreviewTools[]>;
+  onClose: PropType<() => void>;
+  onActive: PropType<(offset: number) => void>;
+}>> & Readonly<{}>, {
+  zIndex: number;
+  current: number;
+  infinite: boolean;
+  icons: PreviewPropsIcons;
+  count: number;
+}, {}, {}, {}, string, vue84.ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { _default as default };

package/dist/ImagePreview/Operations.js

@@ -0,0 +1,71 @@
+import props_default from "./props.js";
+import { Fragment, Teleport, Transition, cloneVNode, createVNode, defineComponent, vShow, withDirectives } from "vue";
+import { CloseOutlined, LeftOutlined, RightOutlined } from "@ant-design/icons-vue";
+import { getTransitionProps } from "@gx-design-vue/pro-provider";
+import { classNames } from "@gx-design-vue/pro-utils";
+
+//#region src/ImagePreview/Operations.tsx
+var Operations_default = /* @__PURE__ */ defineComponent({
+	name: "Operations",
+	inheritAttrs: false,
+	props: {
+		open: Boolean,
+		count: {
+			type: Number,
+			default: 0
+		},
+		current: {
+			type: Number,
+			default: 0
+		},
+		showSwitch: Boolean,
+		showProgress: Boolean,
+		prefixCls: String,
+		hashId: String,
+		zIndex: props_default.zIndex,
+		icons: props_default.icons,
+		infinite: props_default.infinite,
+		getContainer: props_default.getContainer,
+		countRender: props_default.countRender,
+		tools: Array,
+		onClose: Function,
+		onActive: Function
+	},
+	setup(props) {
+		const handleActive = (e, offset) => {
+			e.preventDefault();
+			e.stopPropagation();
+			props.onActive?.(offset);
+		};
+		return () => {
+			const { prefixCls, hashId, tools } = props;
+			const transitionProps = getTransitionProps(`${props.prefixCls}-fade`);
+			const toolClassName = `${prefixCls}-operations-operation`;
+			const iconClassName = `${prefixCls}-operations-icon`;
+			return createVNode(Teleport, { "to": props.getContainer || "body" }, { default: () => [createVNode(Transition, transitionProps, { default: () => [withDirectives(createVNode("div", {
+				"class": classNames(`${prefixCls}-operations-wrapper`, hashId),
+				"style": { zIndex: props.zIndex }
+			}, [
+				props.icons?.close === null ? null : createVNode("button", {
+					"class": `${prefixCls}-close ${hashId}`,
+					"onClick": props.onClose
+				}, [props.icons?.close || createVNode(CloseOutlined, null, null)]),
+				props.showSwitch && createVNode(Fragment, null, [createVNode("div", {
+					"class": classNames(`${prefixCls}-switch-left ${hashId}`, { [`${prefixCls}-switch-left-disabled`]: props.infinite ? false : props.current === 0 }),
+					"onClick": (e) => handleActive(e, -1)
+				}, [props.icons?.left || createVNode(LeftOutlined, null, null)]), createVNode("div", {
+					"class": classNames(`${prefixCls}-switch-right ${hashId}`, { [`${prefixCls}-switch-right-disabled`]: props.infinite ? false : props.current === props.count - 1 }),
+					"onClick": (e) => handleActive(e, 1)
+				}, [props.icons?.right || createVNode(RightOutlined, null, null)])]),
+				createVNode("div", { "class": `${prefixCls}-footer ${hashId}` }, [props.showProgress && createVNode("div", { "class": `${prefixCls}-progress` }, [props.countRender ? props.countRender(props.current + 1, props.count) : `${props.current + 1} / ${props.count}`]), createVNode("div", { "class": `${props.prefixCls}-operations` }, [tools?.map(({ icon: IconType, onClick, type, disabled }) => createVNode("div", {
+					"class": classNames(toolClassName, { [`${props.prefixCls}-operations-operation-disabled`]: disabled && disabled?.value }),
+					"onClick": onClick,
+					"key": type
+				}, [cloneVNode(IconType, { class: iconClassName })]))])])
+			]), [[vShow, props.open]])] })] });
+		};
+	}
+});
+
+//#endregion
+export { Operations_default as default };

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

@@ -0,0 +1,19 @@
+//#region src/ImagePreview/hooks/getFixScaleEleTransPosition.d.ts
+/**
+ * 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
+ */
+declare function getFixScaleEleTransPosition(width: number, height: number, left: number, top: number): null | {
+  x: number;
+  y: number;
+};
+//#endregion
+export { getFixScaleEleTransPosition as default };