@gx-design-vue/image 0.2.0-alpha.4 → 0.2.0-alpha.5

package/dist/g-image.esm.js

@@ -1,62 +1,63 @@
-import { Fragment as e, Teleport as t, Transition as n, computed as r, createVNode as i, customRef as a, defineComponent as o, getCurrentInstance as s, getCurrentScope as c, hasInjectionContext as l, inject as u, isRef as d, isVNode as f, mergeDefaults as p, mergeProps as m, nextTick as h, onMounted as g, onScopeDispose as _, onUnmounted as v, readonly as y, ref as b, shallowRef as x, toRef as S, toValue as C, unref as w, watch as T, watchEffect as E } from "vue";
-import { CloseOutlined as D, CopyOutlined as O, DownloadOutlined as k, EyeOutlined as A, LeftOutlined as ee, LoadingOutlined as te, RightOutlined as ne, RotateLeftOutlined as j, RotateRightOutlined as M, SwapOutlined as N, ZoomInOutlined as P, ZoomOutOutlined as re } from "@antdv-next/icons";
-import { proGenStyleHooks as ie, unit as F } from "@gx-design-vue/pro-provider";
-import { useBaseConfig as ae } from "antdv-next/config-provider/context";
-import oe from "antdv-next/config-provider/hooks/useCSSVarCls";
-import { message as I } from "antdv-next";
+import { Fragment as e, Teleport as t, Transition as n, computed as r, createVNode as i, defineComponent as a, isVNode as o, mergeDefaults as s, mergeProps as c, nextTick as l, onMounted as u, onScopeDispose as d, onUnmounted as f, ref as p, toRef as m, unref as h, watch as g, watchEffect as _ } from "vue";
+import { GIcon as v } from "@gx-design-vue/icon";
+import { proGenStyleHooks as y, unit as b } from "@gx-design-vue/pro-provider";
+import { isClient as x, useEventListener as S, useScrollLock as C, useThrottleFn as w, useWindowSize as T } from "@vueuse/core";
+import { useBaseConfig as ee } from "antdv-next/config-provider/context";
+import te from "antdv-next/config-provider/hooks/useCSSVarCls";
+import { message as E } from "antdv-next";
 //#region ../pro-utils/dist/is/type.js
-function L(e, t) {
+function D(e, t) {
 	return Object.prototype.toString.call(e) === `[object ${t}]`;
 }
-function R(e) {
+function O(e) {
 	return typeof e == "boolean";
 }
-function se(e) {
+function k(e) {
 	return typeof e == "number";
 }
-function z(e) {
+function A(e) {
 	return Array.isArray === void 0 ? Object.prototype.toString.call(e) === "[object Array]" : Array.isArray(e);
 }
-function B(e) {
-	return e !== null && L(e, "Object");
+function j(e) {
+	return e !== null && D(e, "Object");
 }
-function ce(e) {
+function M(e) {
 	return typeof e == "string";
 }
 //#endregion
 //#region ../pro-utils/dist/is/server.js
-var V = typeof window > "u", le = (e) => setTimeout(e, 16), H = (e) => clearTimeout(e);
-typeof window < "u" && "requestAnimationFrame" in window && (le = (e) => window.requestAnimationFrame(e), H = (e) => window.cancelAnimationFrame(e));
-var ue = 0, U = /* @__PURE__ */ new Map();
-function W(e) {
-	U.delete(e);
+var N = typeof window > "u", P = (e) => setTimeout(e, 16), F = (e) => clearTimeout(e);
+typeof window < "u" && "requestAnimationFrame" in window && (P = (e) => window.requestAnimationFrame(e), F = (e) => window.cancelAnimationFrame(e));
+var I = 0, L = /* @__PURE__ */ new Map();
+function R(e) {
+	L.delete(e);
 }
-function de(e, t = 1) {
-	ue += 1;
-	let n = ue;
+function z(e, t = 1) {
+	I += 1;
+	let n = I;
 	function r(t) {
-		if (t === 0) W(n), e();
+		if (t === 0) R(n), e();
 		else {
-			let e = le(() => {
+			let e = P(() => {
 				r(t - 1);
 			});
-			U.set(n, e);
+			L.set(n, e);
 		}
 	}
 	return r(t), n;
 }
-de.cancel = (e) => {
-	let t = U.get(e);
-	return W(t), H(t);
+z.cancel = (e) => {
+	let t = L.get(e);
+	return R(t), F(t);
 };
 //#endregion
 //#region ../pro-utils/dist/dom/scroll.js
-function fe(e) {
+function ne(e) {
 	return e.replace(/[-_](.)/g, (e, t) => t.toUpperCase());
 }
-function G(e, t) {
-	if (V || !e || !t) return "";
-	t = fe(t), t === "float" && (t = "cssFloat");
+function B(e, t) {
+	if (N || !e || !t) return "";
+	t = ne(t), t === "float" && (t = "cssFloat");
 	try {
 		let n = e.style[t];
 		if (n) return n;
@@ -66,11 +67,11 @@ function G(e, t) {
 		return e.style[t];
 	}
 }
-function pe(e, t) {
-	if (!V) return (t == null ? G(e, "overflow") : t ? G(e, "overflow-y") : G(e, "overflow-x")).match(/(scroll|auto|overlay)/);
+function V(e, t) {
+	if (!N) return (t == null ? B(e, "overflow") : t ? B(e, "overflow-y") : B(e, "overflow-x")).match(/(scroll|auto|overlay)/);
 }
-function me(e, t) {
-	if (V) return;
+function H(e, t) {
+	if (N) return;
 	let n = e;
 	for (; n;) {
 		if ([
@@ -78,274 +79,85 @@ function me(e, t) {
 			document,
 			document.documentElement
 		].includes(n)) return window;
-		if (pe(n, t)) return n;
+		if (V(n, t)) return n;
 		n = n.parentNode;
 	}
 	return n;
 }
 //#endregion
 //#region ../pro-utils/dist/object/classNames.js
-function K(...e) {
+function U(...e) {
 	let t = [];
 	for (let n = 0; n < e.length; n++) {
 		let r = e[n];
 		if (r) {
-			if (ce(r)) t.push(r);
-			else if (z(r)) for (let e = 0; e < r.length; e++) {
-				let n = K(r[e]);
+			if (M(r)) t.push(r);
+			else if (A(r)) for (let e = 0; e < r.length; e++) {
+				let n = U(r[e]);
 				n && t.push(n);
 			}
-			else if (B(r)) for (let e in r) r[e] && t.push(e);
+			else if (j(r)) for (let e in r) r[e] && t.push(e);
 		}
 	}
 	return t.filter((e) => e).join(" ");
 }
 //#endregion
 //#region ../pro-utils/dist/slots/index.js
-function he({ vnode: e, defaultVNode: t }, ...n) {
+function W({ vnode: e, defaultVNode: t }, ...n) {
 	return e === !1 ? null : typeof e == "function" ? e?.(...n) : e || t;
 }
-function ge({ value: e, slotsValue: t, defaultVNode: n, render: r }) {
-	return e === !1 ? !1 : e === !0 ? t ?? n : B(e) && r ? f(e) ? e : t : e || t;
+function G({ value: e, slotsValue: t, defaultVNode: n, render: r }) {
+	return e === !1 ? !1 : e === !0 ? t ?? n : j(e) && r ? o(e) ? e : t : e || t;
 }
-function _e(e, ...t) {
-	let { slots: n, key: r = "default", render: i, props: a, defaultChildren: o } = e, s = a[r], c = n?.[r], l = typeof o == "function" ? o?.() : o, u = ge({
+function re(e, ...t) {
+	let { slots: n, key: r = "default", render: i, props: a, defaultChildren: o } = e, s = a[r], c = n?.[r], l = typeof o == "function" ? o?.() : o, u = G({
 		value: s,
 		slotsValue: c,
 		defaultVNode: l,
 		render: i
 	});
-	return u === !1 ? !1 : i ? he({
+	return u === !1 ? !1 : i ? W({
 		vnode: u,
 		defaultVNode: l
 	}, ...t) : u;
 }
-function q(e, ...t) {
-	let { slots: n, key: r = "default", props: i, defaultChildren: a } = e, o = i[r], s = n?.[r]?.(...t), c = typeof a == "function" ? a?.() : a, l = ge({
+function K(e, ...t) {
+	let { slots: n, key: r = "default", props: i, defaultChildren: a } = e, o = i[r], s = n?.[r]?.(...t), c = typeof a == "function" ? a?.() : a, l = G({
 		value: o,
 		slotsValue: s,
 		defaultVNode: c,
 		render: !0
 	});
-	return l === !1 ? !1 : he({
+	return l === !1 ? !1 : W({
 		vnode: l,
 		defaultVNode: c
 	}, ...t);
 }
-function ve(e, ...t) {
+function ie(e, ...t) {
 	let { slots: n, props: r, keys: i, render: a, defaultVNodes: o } = e, s = {};
 	return i.forEach((e, i) => {
-		let c = o ? o[i] : null, l = a ? q({
+		let c = o ? o[i] : null, l = a ? K({
 			slots: n,
 			props: r,
 			key: e,
 			defaultChildren: c
-		}, ...t) : _e({
+		}, ...t) : re({
 			slots: n,
 			props: r,
 			key: e,
 			render: !1,
 			defaultChildren: c
 		}, ...t);
-		(R(l) || l) && (s[e] = l);
+		(O(l) || l) && (s[e] = l);
 	}), s;
 }
 //#endregion
-//#region ../../node_modules/.pnpm/@vueuse+shared@14.3.0_vue@3.5.27_typescript@6.0.3_/node_modules/@vueuse/shared/dist/index.js
-function ye(e, t) {
-	return c() ? (_(e, t), !0) : !1;
-}
-var J = /* @__PURE__ */ new WeakMap(), be = (...e) => {
-	let t = e[0], n = s()?.proxy ?? c();
-	if (n == null && !l()) throw Error("injectLocal must be called in setup");
-	return n && J.has(n) && t in J.get(n) ? J.get(n)[t] : u(...e);
-}, Y = typeof window < "u" && typeof document < "u";
-typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
-var xe = Object.prototype.toString, Se = (e) => xe.call(e) === "[object Object]", Ce = () => {}, we = /* @__PURE__ */ Te();
-function Te() {
-	var e, t;
-	return Y && !!(!((e = window) == null || (e = e.navigator) == null) && e.userAgent) && (/iP(?:ad|hone|od)/.test(window.navigator.userAgent) || ((t = window) == null || (t = t.navigator) == null ? void 0 : t.maxTouchPoints) > 2 && /iPad|Macintosh/.test(window?.navigator.userAgent));
-}
-function Ee(...e) {
-	if (e.length !== 1) return S(...e);
-	let t = e[0];
-	return typeof t == "function" ? y(a(() => ({
-		get: t,
-		set: Ce
-	}))) : b(t);
-}
-function De(e, t) {
-	function n(...n) {
-		return new Promise((r, i) => {
-			Promise.resolve(e(() => t.apply(this, n), {
-				fn: t,
-				thisArg: this,
-				args: n
-			})).then(r).catch(i);
-		});
-	}
-	return n;
-}
-function Oe(...e) {
-	let t = 0, n, r = !0, i = Ce, a, o, s, c, l;
-	!d(e[0]) && typeof e[0] == "object" ? {delay: o, trailing: s = !0, leading: c = !0, rejectOnCancel: l = !1} = e[0] : [o, s = !0, c = !0, l = !1] = e;
-	let u = () => {
-		n && (clearTimeout(n), n = void 0, i(), i = Ce);
-	};
-	return (e) => {
-		let d = C(o), f = Date.now() - t, p = () => a = e();
-		return u(), d <= 0 ? (t = Date.now(), p()) : (f > d ? (t = Date.now(), (c || !r) && p()) : s && (a = new Promise((e, a) => {
-			i = l ? a : e, n = setTimeout(() => {
-				t = Date.now(), r = !0, e(p()), u();
-			}, Math.max(0, d - f));
-		})), !c && !n && (n = setTimeout(() => r = !0, d)), r = !1, a);
-	};
-}
-function ke(e) {
-	return e.endsWith("rem") ? Number.parseFloat(e) * 16 : Number.parseFloat(e);
-}
-function Ae(e) {
-	return Array.isArray(e) ? e : [e];
-}
-function je(e) {
-	return e || s();
-}
-function Me(e, t = 200, n = !1, r = !0, i = !1) {
-	return De(Oe(t, n, r, i), e);
-}
-function Ne(e, t = !0, n) {
-	je(n) ? g(e, n) : t ? e() : h(e);
-}
-function Pe(e, t, n) {
-	return T(e, t, {
-		...n,
-		immediate: !0
-	});
-}
-//#endregion
-//#region ../../node_modules/.pnpm/@vueuse+core@14.3.0_vue@3.5.27_typescript@6.0.3_/node_modules/@vueuse/core/dist/index.js
-var Fe = Y ? window : void 0;
-Y && window.document, Y && window.navigator, Y && window.location;
-function Ie(e) {
-	let t = C(e);
-	return t?.$el ?? t;
-}
-function X(...e) {
-	let t = (e, t, n, r) => (e.addEventListener(t, n, r), () => e.removeEventListener(t, n, r)), n = r(() => {
-		let t = Ae(C(e[0])).filter((e) => e != null);
-		return t.every((e) => typeof e != "string") ? t : void 0;
-	});
-	return Pe(() => [
-		n.value?.map((e) => Ie(e)) ?? [Fe].filter((e) => e != null),
-		Ae(C(n.value ? e[1] : e[0])),
-		Ae(w(n.value ? e[2] : e[1])),
-		C(n.value ? e[3] : e[2])
-	], ([e, n, r, i], a, o) => {
-		if (!e?.length || !n?.length || !r?.length) return;
-		let s = Se(i) ? { ...i } : i, c = e.flatMap((e) => n.flatMap((n) => r.map((r) => t(e, n, r, s))));
-		o(() => {
-			c.forEach((e) => e());
-		});
-	}, { flush: "post" });
-}
-function Le() {
-	let e = x(!1), t = s();
-	return t && g(() => {
-		e.value = !0;
-	}, t), e;
-}
-/* @__NO_SIDE_EFFECTS__ */
-function Re(e) {
-	let t = Le();
-	return r(() => (t.value, !!e()));
-}
-var ze = Symbol("vueuse-ssr-width");
-/* @__NO_SIDE_EFFECTS__ */
-function Be() {
-	let e = l() ? be(ze, null) : null;
-	return typeof e == "number" ? e : void 0;
-}
-function Ve(e, t = {}) {
-	let { window: n = Fe, ssrWidth: i = /* @__PURE__ */ Be() } = t, a = /* @__PURE__ */ Re(() => n && "matchMedia" in n && typeof n.matchMedia == "function"), o = x(typeof i == "number"), s = x(), c = x(!1);
-	return E(() => {
-		if (o.value) {
-			o.value = !a.value, c.value = C(e).split(",").some((e) => {
-				let t = e.includes("not all"), n = e.match(/\(\s*min-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/), r = e.match(/\(\s*max-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/), a = !!(n || r);
-				return n && a && (a = i >= ke(n[1])), r && a && (a = i <= ke(r[1])), t ? !a : a;
-			});
-			return;
-		}
-		a.value && (s.value = n.matchMedia(C(e)), c.value = s.value.matches);
-	}), X(s, "change", (e) => {
-		c.value = e.matches;
-	}, { passive: !0 }), r(() => c.value);
-}
-function He(e) {
-	return typeof Window < "u" && e instanceof Window ? e.document.documentElement : typeof Document < "u" && e instanceof Document ? e.documentElement : e;
-}
-function Ue(e) {
-	let t = window.getComputedStyle(e);
-	if (t.overflowX === "scroll" || t.overflowY === "scroll" || t.overflowX === "auto" && e.clientWidth < e.scrollWidth || t.overflowY === "auto" && e.clientHeight < e.scrollHeight) return !0;
-	{
-		let t = e.parentNode;
-		return !t || t.tagName === "BODY" ? !1 : Ue(t);
-	}
-}
-function We(e) {
-	let t = e || window.event, n = t.target;
-	return Ue(n) ? !1 : t.touches.length > 1 ? !0 : (t.preventDefault && t.preventDefault(), !1);
-}
-var Ge = /* @__PURE__ */ new WeakMap();
-function Ke(e, t = !1) {
-	let n = x(t), i = null, a = "";
-	T(Ee(e), (e) => {
-		let t = He(C(e));
-		if (t) {
-			let e = t;
-			if (Ge.get(e) || Ge.set(e, e.style.overflow), e.style.overflow !== "hidden" && (a = e.style.overflow), e.style.overflow === "hidden") return n.value = !0;
-			if (n.value) return e.style.overflow = "hidden";
-		}
-	}, { immediate: !0 });
-	let o = () => {
-		let t = He(C(e));
-		!t || n.value || (we && (i = X(t, "touchmove", (e) => {
-			We(e);
-		}, { passive: !1 })), t.style.overflow = "hidden", n.value = !0);
-	}, s = () => {
-		let t = He(C(e));
-		!t || !n.value || (we && i?.(), t.style.overflow = a, Ge.delete(t), n.value = !1);
-	};
-	return ye(s), r({
-		get() {
-			return n.value;
-		},
-		set(e) {
-			e ? o() : s();
-		}
-	});
-}
-function qe(e = {}) {
-	let { window: t = Fe, initialWidth: n = Infinity, initialHeight: r = Infinity, listenOrientation: i = !0, includeScrollbar: a = !0, type: o = "inner" } = e, s = x(n), c = x(r), l = () => {
-		if (t) if (o === "outer") s.value = t.outerWidth, c.value = t.outerHeight;
-		else if (o === "visual" && t.visualViewport) {
-			let { width: e, height: n, scale: r } = t.visualViewport;
-			s.value = Math.round(e * r), c.value = Math.round(n * r);
-		} else a ? (s.value = t.innerWidth, c.value = t.innerHeight) : (s.value = t.document.documentElement.clientWidth, c.value = t.document.documentElement.clientHeight);
-	};
-	l(), Ne(l);
-	let u = { passive: !0 };
-	return X("resize", l, u), t && o === "visual" && t.visualViewport && X(t.visualViewport, "resize", l, u), i && T(Ve("(orientation: portrait)"), () => l()), {
-		width: s,
-		height: c
-	};
-}
-//#endregion
 //#region src/hooks/useImagePreview.ts
-function Je(e) {
-	let { canPreview: t } = e, n = b(!1), r = b(null), i = Ke(document.body, !1), a;
-	return _(() => {
+function ae(e) {
+	let { canPreview: t } = e, n = p(!1), r = p(null), i = C(document.body, !1), a;
+	return d(() => {
 		a !== void 0 && (window.cancelAnimationFrame(a), a = void 0), i.value = !1;
-	}), X("wheel", (e) => {
+	}), S("wheel", (e) => {
 		n.value && e.ctrlKey && e.preventDefault();
 	}, { passive: !1 }), {
 		showViewer: n,
@@ -365,12 +177,12 @@ function Je(e) {
 }
 //#endregion
 //#region ../pro-hooks/dist/core/useIsIos.js
-var Ye = (typeof window > "u" ? !1 : /iPad|iPhone|iPod/.test(navigator.platform) || navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1) && !window.MSStream;
-typeof window > "u" || Ye || window.safari;
+var q = (typeof window > "u" ? !1 : /iPad|iPhone|iPod/.test(navigator.platform) || navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1) && !window.MSStream;
+typeof window > "u" || q || window.safari;
 //#endregion
 //#region ../pro-hooks/dist/core/useState.js
-function Xe(e) {
-	let t = b(typeof e == "function" ? e() : e);
+function J(e) {
+	let t = p(typeof e == "function" ? e() : e);
 	function n(e) {
 		t.value = e;
 	}
@@ -378,36 +190,36 @@ function Xe(e) {
 }
 //#endregion
 //#region ../pro-hooks/dist/core/useMergedState.js
-function Ze(e, t) {
-	let { defaultValue: n, value: r = b() } = t || {}, i = typeof e == "function" ? e() : e;
-	r.value !== void 0 && (i = w(r)), n !== void 0 && (i = typeof n == "function" ? n() : n);
-	let a = b(i), o = b(i), [s, c] = Xe([o.value]), l = E(() => {
+function oe(e, t) {
+	let { defaultValue: n, value: r = p() } = t || {}, i = typeof e == "function" ? e() : e;
+	r.value !== void 0 && (i = h(r)), n !== void 0 && (i = typeof n == "function" ? n() : n);
+	let a = p(i), o = p(i), [s, c] = J([o.value]), l = _(() => {
 		let e = r.value === void 0 ? a.value : r.value;
 		t?.postState && (e = t.postState(e, a.value)), o.value = e;
-	}), u = T(s, () => {
+	}), u = g(s, () => {
 		let e = s.value[0];
 		a.value !== e && t?.onChange?.(a.value, e);
 	}, { deep: !0 });
-	function d(e) {
+	function f(e) {
 		a.value = e;
 	}
-	function f(e) {
-		d(e), c([o.value]);
+	function m(e) {
+		f(e), c([o.value]);
 	}
-	let p = T(r, () => {
+	let v = g(r, () => {
 		a.value = r.value;
 	});
-	return _(() => {
-		l(), u(), p();
+	return d(() => {
+		l(), u(), v();
 	}), [
 		o,
-		f,
+		m,
 		a
 	];
 }
 //#endregion
 //#region src/hooks/useImageTransform.ts
-var Qe = {
+var Y = {
 	x: 0,
 	y: 0,
 	rotate: 0,
@@ -415,15 +227,15 @@ var Qe = {
 	flipX: !1,
 	flipY: !1
 };
-function $e(e) {
-	let { imageRef: t, minScale: n, maxScale: r, windowWidth: i, windowHeight: a, onTransform: o } = e, s = b(null), c = b([]), [l, u] = Xe({ ...Qe }), d = (e) => {
+function se(e) {
+	let { imageRef: t, minScale: n, maxScale: r, windowWidth: i, windowHeight: a, onTransform: o } = e, s = p(null), c = p([]), [l, u] = J({ ...Y }), d = (e) => {
 		let t = { ...l.value };
-		u({ ...Qe }), (t.x !== 0 || t.y !== 0 || t.scale !== 1 || t.rotate !== 0 || t.flipX || t.flipY) && o?.({
-			transform: { ...Qe },
+		u({ ...Y }), (t.x !== 0 || t.y !== 0 || t.scale !== 1 || t.rotate !== 0 || t.flipX || t.flipY) && o?.({
+			transform: { ...Y },
 			action: e
 		});
 	}, f = (e, t) => {
-		s.value === null && (c.value = [], s.value = de(() => {
+		s.value === null && (c.value = [], s.value = z(() => {
 			let e = { ...l.value };
 			for (let t of c.value) e = {
 				...e,
@@ -447,14 +259,14 @@ function $e(e) {
 			if (!d) return;
 			let { width: p, height: m, offsetWidth: h, offsetHeight: g, offsetLeft: _, offsetTop: v } = d, y = e, b = l.value.scale * e;
 			b > r.value ? (b = r.value, y = r.value / l.value.scale) : b < n.value && (b = u ? b : n.value, y = b / l.value.scale);
-			let x = s ?? i.value / 2, S = c ?? a.value / 2, C = y - 1, w = C * p * .5, T = C * m * .5, E = C * (x - l.value.x - _), D = C * (S - l.value.y - v), O = l.value.x - (E - w), k = l.value.y - (D - T);
+			let x = s ?? i.value / 2, S = c ?? a.value / 2, C = y - 1, w = C * p * .5, T = C * m * .5, ee = C * (x - l.value.x - _), te = C * (S - l.value.y - v), E = l.value.x - (ee - w), D = l.value.y - (te - T);
 			if (e < 1 && b === 1) {
 				let e = h * b, t = g * b;
-				e <= i.value && t <= a.value && (O = 0, k = 0);
+				e <= i.value && t <= a.value && (E = 0, D = 0);
 			}
 			f({
-				x: O,
-				y: k,
+				x: E,
+				y: D,
 				scale: b
 			}, o);
 		}
@@ -462,7 +274,7 @@ function $e(e) {
 }
 //#endregion
 //#region src/hooks/useImageBoundary.ts
-function et(e, t, n, r) {
+function ce(e, t, n, r) {
 	let i = t + n, a = (n - r) / 2;
 	if (n > r) {
 		if (t > 0) return { [e]: a };
@@ -470,34 +282,34 @@ function et(e, t, n, r) {
 	} else if (t < 0 || i > r) return { [e]: t < 0 ? a : -a };
 	return {};
 }
-function tt(e) {
+function le(e) {
 	let { imageWidth: t, imageHeight: n, imageLeft: r, imageTop: i, windowWidth: a, windowHeight: o } = e;
 	return t <= a && n <= o ? {
 		x: 0,
 		y: 0
 	} : t > a || n > o ? {
-		...et("x", r, t, a),
-		...et("y", i, n, o)
+		...ce("x", r, t, a),
+		...ce("y", i, n, o)
 	} : null;
 }
 //#endregion
 //#region src/hooks/useMouseEvent.ts
-var nt = 1, rt = 2;
-function it(e) {
-	let { imageRef: t, movable: n, visible: r, scaleStep: i, transform: a, updateTransform: o, dispatchZoomChange: s, windowWidth: c, windowHeight: l } = e, u = b(!1), d = b({
+var ue = 1, de = 2;
+function fe(e) {
+	let { imageRef: t, movable: n, visible: r, scaleStep: i, transform: a, updateTransform: o, dispatchZoomChange: s, windowWidth: c, windowHeight: l } = e, u = p(!1), d = p({
 		diffX: 0,
 		diffY: 0,
 		transformX: 0,
 		transformY: 0
 	});
-	return X(window, "mouseup", () => {
+	return S(window, "mouseup", () => {
 		if (!r.value || !u.value) return;
 		u.value = !1;
 		let { transformX: e, transformY: n } = d.value;
 		if (!(a.value.x !== e && a.value.y !== n)) return;
 		let i = t.value;
 		if (!i) return;
-		let s = i.offsetWidth * a.value.scale, f = i.offsetHeight * a.value.scale, { left: p, top: m } = i.getBoundingClientRect(), h = a.value.rotate % 180 != 0, g = tt({
+		let s = i.offsetWidth * a.value.scale, f = i.offsetHeight * a.value.scale, { left: p, top: m } = i.getBoundingClientRect(), h = a.value.rotate % 180 != 0, g = le({
 			imageWidth: h ? f : s,
 			imageHeight: h ? s : f,
 			imageLeft: p,
@@ -506,7 +318,7 @@ function it(e) {
 			windowHeight: l.value
 		});
 		g && o({ ...g }, "dragRebound");
-	}), X(window, "mousemove", (e) => {
+	}), S(window, "mousemove", (e) => {
 		!r.value || !u.value || o({
 			x: e.pageX - d.value.diffX,
 			y: e.pageY - d.value.diffY
@@ -523,24 +335,24 @@ function it(e) {
 		},
 		onWheel: (e) => {
 			if (!r.value || e.deltaY === 0) return;
-			let t = nt + Math.min(Math.abs(e.deltaY / 100), rt) * i.value;
-			e.deltaY > 0 && (t = nt / t), s(t, "wheel", e.clientX, e.clientY);
+			let t = ue + Math.min(Math.abs(e.deltaY / 100), de) * i.value;
+			e.deltaY > 0 && (t = ue / t), s(t, "wheel", e.clientX, e.clientY);
 		}
 	};
 }
 //#endregion
 //#region src/hooks/useTouchEvent.ts
-function at(e, t) {
+function X(e, t) {
 	return Math.hypot(e.x - t.x, e.y - t.y);
 }
-function ot(e, t, n, r) {
-	let i = at(e, n), a = at(t, r);
+function pe(e, t, n, r) {
+	let i = X(e, n), a = X(t, r);
 	if (i === 0 && a === 0) return [e.x, e.y];
 	let o = i / (i + a);
 	return [e.x + o * (t.x - e.x), e.y + o * (t.y - e.y)];
 }
-function st(e) {
-	let { imageRef: t, movable: n, visible: r, minScale: i, transform: a, updateTransform: o, dispatchZoomChange: s, windowWidth: c, windowHeight: l } = e, u = b(!1), d = b({
+function me(e) {
+	let { imageRef: t, movable: n, visible: r, minScale: i, transform: a, updateTransform: o, dispatchZoomChange: s, windowWidth: c, windowHeight: l } = e, u = p(!1), d = p({
 		point1: {
 			x: 0,
 			y: 0
@@ -556,7 +368,7 @@ function st(e) {
 			...e
 		};
 	};
-	return X(window, "touchmove", (e) => {
+	return S(window, "touchmove", (e) => {
 		r.value && n.value && e.preventDefault();
 	}, { passive: !1 }), {
 		isTouching: u,
@@ -591,8 +403,8 @@ function st(e) {
 				}, i = {
 					x: t[1].clientX,
 					y: t[1].clientY
-				}, [a, o] = ot(n, r, e, i);
-				s(at(e, i) / at(n, r), "touchZoom", a, o, !0), f({
+				}, [a, o] = pe(n, r, e, i);
+				s(X(e, i) / X(n, r), "touchZoom", a, o, !0), f({
 					point1: e,
 					point2: i,
 					eventType: "touchZoom"
@@ -611,7 +423,7 @@ function st(e) {
 			}, "touchZoom");
 			let e = t.value;
 			if (!e) return;
-			let n = e.offsetWidth * a.value.scale, s = e.offsetHeight * a.value.scale, { left: d, top: p } = e.getBoundingClientRect(), m = a.value.rotate % 180 != 0, h = tt({
+			let n = e.offsetWidth * a.value.scale, s = e.offsetHeight * a.value.scale, { left: d, top: p } = e.getBoundingClientRect(), m = a.value.rotate % 180 != 0, h = le({
 				imageWidth: m ? s : n,
 				imageHeight: m ? n : s,
 				imageLeft: d,
@@ -625,7 +437,7 @@ function st(e) {
 }
 //#endregion
 //#region src/style/preview.ts
-function ct(e) {
+function he(e) {
 	return {
 		zIndexPopup: `calc(${e.zIndexPopupBase} + 80)`,
 		previewOperationColor: e.colorTextDescription,
@@ -635,7 +447,7 @@ function ct(e) {
 		previewOperationSize: e.fontSizeLG
 	};
 }
-var lt = (e) => {
+var ge = (e) => {
 	let t = e.componentCls, { motionEaseOut: n, motionDurationSlow: r, previewOperationSize: i, zIndexPopup: a } = e, o = {
 		position: "absolute",
 		color: e.previewOperationColor,
@@ -734,7 +546,7 @@ var lt = (e) => {
 			padding: e.paddingXXS,
 			color: e.previewOperationColor,
 			backgroundColor: e.colorBgContainer,
-			border: `${F(e.lineWidth)} ${e.lineType} ${e.colorFillTertiary}`,
+			border: `${b(e.lineWidth)} ${e.lineType} ${e.colorFillTertiary}`,
 			borderRadius: e.borderRadiusLG,
 			fontSize: i,
 			"&-action": {
@@ -769,7 +581,7 @@ var lt = (e) => {
 			}
 		}
 	} };
-}, ut = (e) => {
+}, _e = (e) => {
 	let t = e.componentCls, { motionDurationSlow: n, motionEaseOut: r } = e;
 	return { [`${t}`]: {
 		"&-fade-enter-active, &-fade-leave-active": {
@@ -795,22 +607,25 @@ var lt = (e) => {
 			[`${t}-close, ${t}-switch, ${t}-footer`]: { opacity: 1 }
 		}
 	} };
-}, dt = ie("GImagePreview", (e) => [lt(e), ut(e)], ct), ft = 1, Z = {
-	rotateLeft: i(j, null, null),
-	rotateRight: i(M, null, null),
-	zoomIn: i(P, null, null),
-	zoomOut: i(re, null, null),
-	flipX: i(N, null, null),
-	flipY: i(N, { rotate: 90 }, null),
-	copy: i(O, null, null),
-	download: i(k, null, null)
+}, ve = y("GImagePreview", (e) => [ge(e), _e(e)], he), ye = 1, Z = {
+	rotateLeft: i(v, { type: "RotateLeftOutlined" }, null),
+	rotateRight: i(v, { type: "RotateRightOutlined" }, null),
+	zoomIn: i(v, { type: "ZoomInOutlined" }, null),
+	zoomOut: i(v, { type: "ZoomOutOutlined" }, null),
+	flipX: i(v, { type: "SwapOutlined" }, null),
+	flipY: i(v, {
+		type: "SwapOutlined",
+		rotate: 90
+	}, null),
+	copy: i(v, { type: "CopyOutlined" }, null),
+	download: i(v, { type: "DownloadOutlined" }, null)
 }, Q = {
 	copySuccess: "复制成功",
 	copyFailed: "复制失败",
 	downloadSuccess: "下载成功",
 	downloadFailed: "下载失败"
 };
-function pt(e) {
+function be(e) {
 	try {
 		let t = new URL(e, window.location.href).pathname.match(/\/([^/]+)$/)?.[1];
 		return t ? decodeURIComponent(t) : "image";
@@ -819,7 +634,7 @@ function pt(e) {
 		return t ? decodeURIComponent(t) : "image";
 	}
 }
-function mt(e) {
+function xe(e) {
 	let t = {
 		"image/gif": "gif",
 		"image/jpg": "jpg",
@@ -830,12 +645,12 @@ function mt(e) {
 	}, n = e?.toLowerCase();
 	return t[n] || n?.split("/")[1]?.split("+")[0] || "png";
 }
-async function ht(e) {
+async function Se(e) {
 	let t = await fetch(e, { mode: "cors" });
 	if (!t.ok) throw Error(`Failed to fetch image: ${t.status}`);
 	return t.blob();
 }
-async function gt(e) {
+async function Ce(e) {
 	return new Promise((t, n) => {
 		let r = new Image(), i = URL.createObjectURL(e);
 		r.onload = () => {
@@ -855,52 +670,52 @@ async function gt(e) {
 		}, r.src = i;
 	});
 }
-async function _t(e) {
+async function we(e) {
 	let t = (e.type || "").toLowerCase();
-	return t === "image/png" || t === "image/svg+xml" ? { [t]: e } : { "image/png": await gt(e) };
+	return t === "image/png" || t === "image/svg+xml" ? { [t]: e } : { "image/png": await Ce(e) };
 }
-function vt(e, t) {
-	let n = pt(e);
-	return n.includes(".") ? n.endsWith(".svg+xml") ? n.replace(/\.svg\+xml$/i, ".svg") : n : `${n}.${mt(t)}`;
+function Te(e, t) {
+	let n = be(e);
+	return n.includes(".") ? n.endsWith(".svg+xml") ? n.replace(/\.svg\+xml$/i, ".svg") : n : `${n}.${xe(t)}`;
 }
-function yt(e, t) {
+function Ee(e, t) {
 	let n = URL.createObjectURL(e), r = document.createElement("a");
 	r.href = n, r.download = t, r.style.display = "none", document.body.appendChild(r), r.click(), r.remove(), URL.revokeObjectURL(n);
 }
-var bt = /* @__PURE__ */ o((a, { emit: o, slots: s, expose: c }) => {
-	let { width: l, height: u } = qe(), { prefixCls: d } = ae("pro-image-preview", a), f = oe(d), [p, m] = dt(d, f), [_, y] = Ze(a.open, {
-		value: S(a, "open"),
+var De = /* @__PURE__ */ a((a, { emit: o, slots: s, expose: c }) => {
+	let { width: d, height: h } = T(), { prefixCls: _ } = ee("pro-image-preview", a), y = te(_), [b, x] = ve(_, y), [S, C] = oe(a.open, {
+		value: m(a, "open"),
 		onChange: (e) => {
 			a.onOpenChange?.(e), o("update:open", e);
 		}
-	}), x = b(!0), C = b(), w = b(), E = b(a.current ?? 0), O = b(!1), k = b(!1), { transform: A, resetTransform: j, updateTransform: M, dispatchZoomChange: N } = $e({
-		imageRef: C,
-		minScale: S(a, "minScale"),
-		maxScale: S(a, "maxScale"),
-		windowWidth: l,
-		windowHeight: u,
+	}), w = p(!0), D = p(), O = p(), k = p(a.current ?? 0), A = p(!1), j = p(!1), { transform: M, resetTransform: N, updateTransform: P, dispatchZoomChange: F } = se({
+		imageRef: D,
+		minScale: m(a, "minScale"),
+		maxScale: m(a, "maxScale"),
+		windowWidth: d,
+		windowHeight: h,
 		onTransform: a.onTransform
-	}), { isMoving: P, onMouseDown: re, onWheel: ie } = it({
-		imageRef: C,
-		movable: S(a, "movable"),
-		visible: _,
-		scaleStep: S(a, "scaleStep"),
-		transform: A,
-		updateTransform: M,
-		dispatchZoomChange: N,
-		windowWidth: l,
-		windowHeight: u
-	}), { isTouching: F, onTouchStart: L, onTouchMove: R, onTouchEnd: se } = st({
-		imageRef: C,
-		movable: S(a, "movable"),
-		visible: _,
-		minScale: S(a, "minScale"),
-		transform: A,
-		updateTransform: M,
-		dispatchZoomChange: N,
-		windowWidth: l,
-		windowHeight: u
-	}), z = r(() => a.urls[E.value]), B = r(() => a.urls.length > 1), ce = r(() => a.urls.length >= 1), V = r(() => a.mask === !1 ? {
+	}), { isMoving: I, onMouseDown: L, onWheel: R } = fe({
+		imageRef: D,
+		movable: m(a, "movable"),
+		visible: S,
+		scaleStep: m(a, "scaleStep"),
+		transform: M,
+		updateTransform: P,
+		dispatchZoomChange: F,
+		windowWidth: d,
+		windowHeight: h
+	}), { isTouching: z, onTouchStart: ne, onTouchMove: B, onTouchEnd: V } = me({
+		imageRef: D,
+		movable: m(a, "movable"),
+		visible: S,
+		minScale: m(a, "minScale"),
+		transform: M,
+		updateTransform: P,
+		dispatchZoomChange: F,
+		windowWidth: d,
+		windowHeight: h
+	}), H = r(() => a.urls[k.value]), W = r(() => a.urls.length > 1), G = r(() => a.urls.length >= 1), re = r(() => a.mask === !1 ? {
 		visible: !1,
 		blur: !1
 	} : a.mask && typeof a.mask == "object" && !("type" in a.mask) ? {
@@ -909,95 +724,95 @@ var bt = /* @__PURE__ */ o((a, { emit: o, slots: s, expose: c }) => {
 	} : {
 		visible: !0,
 		blur: !0
-	}), le = r(() => {
+	}), ae = r(() => {
 		let e = {};
 		return a.mousePosition && (e.transformOrigin = `${a.mousePosition.x}px ${a.mousePosition.y}px`), e;
 	});
-	T(() => a.current, (e) => {
-		e !== void 0 && (E.value = e);
-	}), T(() => a.current, (e) => {
-		e !== void 0 && (E.value = e);
+	g(() => a.current, (e) => {
+		e !== void 0 && (k.value = e);
+	}), g(() => a.current, (e) => {
+		e !== void 0 && (k.value = e);
 	});
-	let H = () => {
-		y(!1), a.onClose?.(), o("close");
-	}, ue = () => {
-		P.value || H();
-	}, U = () => {
-		if (E.value > 0 || a.infinite) {
-			let e = E.value - 1 < 0 ? a.urls.length - 1 : E.value - 1;
-			x.value = !1, E.value = e, j("prev"), h(() => {
-				x.value = !0;
+	let q = () => {
+		C(!1), a.onClose?.(), o("close");
+	}, J = () => {
+		I.value || q();
+	}, Y = () => {
+		if (k.value > 0 || a.infinite) {
+			let e = k.value - 1 < 0 ? a.urls.length - 1 : k.value - 1;
+			w.value = !1, k.value = e, N("prev"), l(() => {
+				w.value = !0;
 			});
 		}
-	}, W = () => {
-		if (E.value < a.urls.length - 1 || a.infinite) {
-			let e = E.value + 1 > a.urls.length - 1 ? 0 : E.value + 1;
-			x.value = !1, E.value = e, j("next"), h(() => {
-				x.value = !0;
+	}, ce = () => {
+		if (k.value < a.urls.length - 1 || a.infinite) {
+			let e = k.value + 1 > a.urls.length - 1 ? 0 : k.value + 1;
+			w.value = !1, k.value = e, N("next"), l(() => {
+				w.value = !0;
 			});
 		}
+	}, le = () => {
+		F(ye + (a.scaleStep ?? .5), "zoomIn");
+	}, ue = () => {
+		F(ye / (ye + (a.scaleStep ?? .5)), "zoomOut");
 	}, de = () => {
-		N(ft + (a.scaleStep ?? .5), "zoomIn");
-	}, fe = () => {
-		N(ft / (ft + (a.scaleStep ?? .5)), "zoomOut");
-	}, G = () => {
-		M({ rotate: A.value.rotate + 90 }, "rotateRight");
+		P({ rotate: M.value.rotate + 90 }, "rotateRight");
+	}, X = () => {
+		P({ rotate: M.value.rotate - 90 }, "rotateLeft");
 	}, pe = () => {
-		M({ rotate: A.value.rotate - 90 }, "rotateLeft");
-	}, me = () => {
-		M({ flipX: !A.value.flipX }, "flipX");
+		P({ flipX: !M.value.flipX }, "flipX");
 	}, he = () => {
-		M({ flipY: !A.value.flipY }, "flipY");
+		P({ flipY: !M.value.flipY }, "flipY");
 	}, ge = async () => {
-		if (!(!z.value || O.value)) {
+		if (!(!H.value || A.value)) {
 			if (!navigator.clipboard || !window.ClipboardItem) {
-				I.error(Q.copyFailed);
+				E.error(Q.copyFailed);
 				return;
 			}
-			O.value = !0;
+			A.value = !0;
 			try {
-				let e = await _t(await ht(z.value));
-				await navigator.clipboard.write([new ClipboardItem(e)]), I.success(Q.copySuccess);
+				let e = await we(await Se(H.value));
+				await navigator.clipboard.write([new ClipboardItem(e)]), E.success(Q.copySuccess);
 			} catch {
-				I.error(Q.copyFailed);
+				E.error(Q.copyFailed);
 			} finally {
-				O.value = !1;
+				A.value = !1;
 			}
 		}
 	}, _e = async () => {
-		if (!(!z.value || k.value)) {
-			k.value = !0;
+		if (!(!H.value || j.value)) {
+			j.value = !0;
 			try {
-				let e = await ht(z.value);
-				yt(e, vt(z.value, e.type)), I.success(Q.downloadSuccess);
+				let e = await Se(H.value);
+				Ee(e, Te(H.value, e.type)), E.success(Q.downloadSuccess);
 			} catch {
-				I.error(Q.downloadFailed);
+				E.error(Q.downloadFailed);
 			} finally {
-				k.value = !1;
+				j.value = !1;
 			}
 		}
-	}, ye = (e) => {
-		_.value && (A.value.scale === 1 ? N(ft + (a.scaleStep ?? .5), "doubleClick", e.clientX, e.clientY) : M({
+	}, be = (e) => {
+		S.value && (M.value.scale === 1 ? F(ye + (a.scaleStep ?? .5), "doubleClick", e.clientX, e.clientY) : P({
 			x: 0,
 			y: 0,
 			scale: 1
 		}, "doubleClick"));
-	}, J = (e) => {
+	}, xe = (e) => {
 		if (e.key === "Escape") {
-			H();
+			q();
 			return;
 		}
-		!_.value || !B.value || (e.key === "ArrowLeft" ? U() : e.key === "ArrowRight" && W());
-	}, be;
-	g(() => {
-		let e = (e) => J(e);
-		window.addEventListener("keydown", e), be = () => window.removeEventListener("keydown", e);
-	}), v(() => {
-		be?.();
+		!S.value || !W.value || (e.key === "ArrowLeft" ? Y() : e.key === "ArrowRight" && ce());
+	}, Ce;
+	u(() => {
+		let e = (e) => xe(e);
+		window.addEventListener("keydown", e), Ce = () => window.removeEventListener("keydown", e);
+	}), f(() => {
+		Ce?.();
 	}), c({ setOpen: (e) => {
-		y(e), E.value = a.current ?? 0;
+		C(e), k.value = a.current ?? 0;
 	} });
-	let Y = () => ve({
+	let De = () => ie({
 		slots: s,
 		props: { ...a.icons },
 		keys: [
@@ -1021,8 +836,8 @@ var bt = /* @__PURE__ */ o((a, { emit: o, slots: s, expose: c }) => {
 			Z.copy,
 			Z.download
 		]
-	}), xe = () => {
-		let e = Y();
+	}), Oe = () => {
+		let e = De();
 		return [
 			{
 				icon: e.flipY,
@@ -1031,71 +846,77 @@ var bt = /* @__PURE__ */ o((a, { emit: o, slots: s, expose: c }) => {
 			},
 			{
 				icon: e.flipX,
-				onClick: me,
+				onClick: pe,
 				type: "flipX"
 			},
 			{
 				icon: e.rotateLeft,
-				onClick: pe,
+				onClick: X,
 				type: "rotateLeft"
 			},
 			{
 				icon: e.rotateRight,
-				onClick: G,
+				onClick: de,
 				type: "rotateRight"
 			},
 			{
 				icon: e.zoomOut,
-				onClick: fe,
+				onClick: ue,
 				type: "zoomOut",
-				disabled: r(() => A.value.scale <= (a.minScale ?? 1))
+				disabled: r(() => M.value.scale <= (a.minScale ?? 1))
 			},
 			{
 				icon: e.zoomIn,
-				onClick: de,
+				onClick: le,
 				type: "zoomIn",
-				disabled: r(() => A.value.scale === (a.maxScale ?? 50))
+				disabled: r(() => M.value.scale === (a.maxScale ?? 50))
 			},
 			{
-				icon: O.value ? i(te, { spin: !0 }, null) : e.copy,
+				icon: A.value ? i(v, {
+					type: "Spinning",
+					spin: !0
+				}, null) : e.copy,
 				onClick: ge,
 				type: "copy",
-				disabled: r(() => O.value)
+				disabled: r(() => A.value)
 			},
 			{
-				icon: k.value ? i(te, { spin: !0 }, null) : e.download,
+				icon: j.value ? i(v, {
+					type: "Spinning",
+					spin: !0
+				}, null) : e.download,
 				onClick: _e,
 				type: "download",
-				disabled: r(() => k.value)
+				disabled: r(() => j.value)
 			}
 		];
 	};
 	return () => {
 		let r = {
-			transform: `translate3d(${A.value.x}px, ${A.value.y}px, 0) scale3d(${A.value.flipX ? "-" : ""}${A.value.scale}, ${A.value.flipY ? "-" : ""}${A.value.scale}, 1) rotate(${A.value.rotate}deg)`,
-			transitionDuration: !x.value || F.value ? "0s" : void 0
-		}, o = q({
+			transform: `translate3d(${M.value.x}px, ${M.value.y}px, 0) scale3d(${M.value.flipX ? "-" : ""}${M.value.scale}, ${M.value.flipY ? "-" : ""}${M.value.scale}, 1) rotate(${M.value.rotate}deg)`,
+			transitionDuration: !w.value || z.value ? "0s" : void 0
+		}, o = K({
 			slots: s,
 			props: { close: a.icons?.close },
 			key: "close"
-		}), c = q({
+		}), c = K({
 			slots: s,
 			props: { left: a.icons?.left },
 			key: "left"
-		}), l = q({
+		}), l = K({
 			slots: s,
 			props: { right: a.icons?.right },
 			key: "right"
-		}), u = `${d.value}-actions-action`, h = xe();
+		}), u = `${_.value}-actions-action`, d = Oe();
 		return i(t, { to: a.getContainer || "body" }, { default: () => [i(n, {
-			name: `${d.value}-fade`,
+			name: `${_.value}-fade`,
 			appear: !0,
-			onAfterLeave: () => j("close")
-		}, { default: () => [_.value && i("div", {
-			ref: w,
-			class: K(d.value, p.value, m.value, f.value, {
-				[`${d.value}-movable`]: a.movable,
-				[`${d.value}-moving`]: P.value
+			onAfterLeave: () => N("close")
+		}, { default: () => [S.value && i("div", {
+			ref: O,
+			class: U(_.value, b.value, x.value, y.value, {
+				[`${_.value}-movable`]: a.movable,
+				[`${_.value}-moving`]: I.value
 			}),
 			style: { zIndex: a.zIndex },
 			role: "dialog",
@@ -1103,50 +924,50 @@ var bt = /* @__PURE__ */ o((a, { emit: o, slots: s, expose: c }) => {
 			"aria-label": "Image",
 			tabindex: -1
 		}, [
-			V.value.visible && i("div", {
-				class: K(`${d.value}-mask`, a.maskClass, { [`${d.value}-mask-blur`]: V.value.blur }),
-				onClick: a.onHideOnClickModal ? ue : void 0
+			re.value.visible && i("div", {
+				class: U(`${_.value}-mask`, a.maskClass, { [`${_.value}-mask-blur`]: re.value.blur }),
+				onClick: a.onHideOnClickModal ? J : void 0
 			}, null),
 			i("div", {
-				class: `${d.value}-body`,
-				style: le.value
+				class: `${_.value}-body`,
+				style: ae.value
 			}, [i("img", {
-				ref: C,
-				class: `${d.value}-img`,
-				src: z.value,
+				ref: D,
+				class: `${_.value}-img`,
+				src: H.value,
 				alt: "Image",
 				loading: "eager",
 				decoding: "sync",
 				style: r,
-				onWheel: ie,
-				onMousedown: re,
-				onDblclick: ye,
-				onTouchstart: L,
-				onTouchmove: R,
-				onTouchend: se,
-				onTouchcancel: se
+				onWheel: R,
+				onMousedown: L,
+				onDblclick: be,
+				onTouchstart: ne,
+				onTouchmove: B,
+				onTouchend: V,
+				onTouchcancel: V
 			}, null)]),
 			i("button", {
 				type: "button",
-				class: `${d.value}-close`,
-				onClick: H
-			}, [o || i(D, null, null)]),
-			B.value && i(e, null, [i("button", {
+				class: `${_.value}-close`,
+				onClick: q
+			}, [o || i(v, { type: "CloseOutlined" }, null)]),
+			W.value && i(e, null, [i("button", {
 				type: "button",
-				class: K(`${d.value}-switch`, `${d.value}-switch-prev`, { [`${d.value}-switch-disabled`]: !a.infinite && E.value === 0 }),
+				class: U(`${_.value}-switch`, `${_.value}-switch-prev`, { [`${_.value}-switch-disabled`]: !a.infinite && k.value === 0 }),
 				onClick: (e) => {
-					e.preventDefault(), e.stopPropagation(), U();
+					e.preventDefault(), e.stopPropagation(), Y();
 				}
-			}, [c || i(ee, null, null)]), i("button", {
+			}, [c || i(v, { type: "LeftOutlined" }, null)]), i("button", {
 				type: "button",
-				class: K(`${d.value}-switch`, `${d.value}-switch-next`, { [`${d.value}-switch-disabled`]: !a.infinite && E.value === a.urls.length - 1 }),
+				class: U(`${_.value}-switch`, `${_.value}-switch-next`, { [`${_.value}-switch-disabled`]: !a.infinite && k.value === a.urls.length - 1 }),
 				onClick: (e) => {
-					e.preventDefault(), e.stopPropagation(), W();
+					e.preventDefault(), e.stopPropagation(), ce();
 				}
-			}, [l || i(ne, null, null)])]),
-			i("div", { class: `${d.value}-footer` }, [ce.value && i("div", { class: `${d.value}-progress` }, [a.countRender ? a.countRender(E.value + 1, a.urls.length) : `${E.value + 1} / ${a.urls.length}`]), i("div", { class: `${d.value}-actions` }, [h.map(({ icon: e, onClick: t, type: n, disabled: r }) => i("button", {
+			}, [l || i(v, { type: "RightOutlined" }, null)])]),
+			i("div", { class: `${_.value}-footer` }, [G.value && i("div", { class: `${_.value}-progress` }, [a.countRender ? a.countRender(k.value + 1, a.urls.length) : `${k.value + 1} / ${a.urls.length}`]), i("div", { class: `${_.value}-actions` }, [d.map(({ icon: e, onClick: t, type: n, disabled: r }) => i("button", {
 				type: "button",
-				class: K(u, `${u}-${n}`, { [`${u}-disabled`]: r && r.value }),
+				class: U(u, `${u}-${n}`, { [`${u}-disabled`]: r && r.value }),
 				onClick: () => {
 					r?.value || t();
 				},
@@ -1157,7 +978,7 @@ var bt = /* @__PURE__ */ o((a, { emit: o, slots: s, expose: c }) => {
 		])] })] });
 	};
 }, {
-	props: /* @__PURE__ */ p({
+	props: /*@__PURE__*/ s({
 		class: {
 			type: String,
 			required: !1
@@ -1285,7 +1106,7 @@ var bt = /* @__PURE__ */ o((a, { emit: o, slots: s, expose: c }) => {
 	],
 	name: "GImagePreview",
 	inheritAttrs: !1
-}), xt = (e) => {
+}), Oe = (e) => {
 	let { motionDurationSlow: t, paddingXXS: n, marginXXS: r, colorTextLightSolid: i } = e;
 	return {
 		position: "absolute",
@@ -1302,14 +1123,14 @@ var bt = /* @__PURE__ */ o((a, { emit: o, slots: s, expose: c }) => {
 			overflow: "hidden",
 			whiteSpace: "nowrap",
 			textOverflow: "ellipsis",
-			padding: `0 ${F(n)}`,
+			padding: `0 ${b(n)}`,
 			".anticon": {
 				marginInlineEnd: r,
 				svg: { verticalAlign: "baseline" }
 			}
 		}
 	};
-}, St = (e) => {
+}, ke = (e) => {
 	let t = {
 		width: "100%",
 		height: "100%"
@@ -1345,67 +1166,67 @@ var bt = /* @__PURE__ */ o((a, { emit: o, slots: s, expose: c }) => {
 			position: "absolute",
 			inset: 0
 		},
-		[`${e.componentCls}-mask`]: { ...xt(e) },
+		[`${e.componentCls}-mask`]: { ...Oe(e) },
 		[`${e.componentCls}-mask:hover`]: { opacity: 1 }
 	} };
-}, Ct = ie("GImage", (e) => [St(e)]), wt = {
+}, Ae = y("GImage", (e) => [ke(e)]), je = {
 	src: "",
 	alt: "",
 	fit: "contain",
 	preview: !0,
 	loading: "eager"
 };
-function Tt(e) {
+function Me(e) {
 	return e && e.nodeType === 1;
 }
-var $ = /* @__PURE__ */ o((t, { emit: n, slots: a, expose: o, attrs: s }) => {
-	let c = Y && "loading" in HTMLImageElement.prototype, { prefixCls: l } = ae("pro-image", t), u = oe(l), [d, f] = Ct(l, u), p = b(), _ = b(!1), v = b(!0), y = b(), x = b(), S, C = r(() => t.loading === "eager" ? !1 : !c && t.loading === "lazy" || t.lazy), w = r(() => Y && t.fit ? {
+var $ = /* @__PURE__ */ a((t, { emit: n, slots: a, expose: o, attrs: s }) => {
+	let d = x && "loading" in HTMLImageElement.prototype, { prefixCls: f } = ee("pro-image", t), m = te(f), [h, _] = Ae(f, m), y = p(), C = p(!1), T = p(!0), E = p(), D = p(), O, A = r(() => t.loading === "eager" ? !1 : !d && t.loading === "lazy" || t.lazy), j = r(() => x && t.fit ? {
 		...t.imageStyle,
 		objectFit: t.fit
-	} : { ...t.imageStyle }), E = r(() => typeof t.preview == "object" ? t.preview : {}), D = r(() => !!t.preview), O = r(() => {
-		let { urls: e = [], current: n = 0 } = E.value;
-		if (se(n)) return e.length >= n ? n : 0;
+	} : { ...t.imageStyle }), N = r(() => typeof t.preview == "object" ? t.preview : {}), P = r(() => !!t.preview), F = r(() => {
+		let { urls: e = [], current: n = 0 } = N.value;
+		if (k(n)) return e.length >= n ? n : 0;
 		let r = e.indexOf(t.src ?? "");
 		return r >= 0 ? r : 0;
-	}), k = r(() => F(t.width)), ee = r(() => F(t.height)), { showViewer: te, mousePosition: ne, openPreview: j, closePreview: M } = Je({ canPreview: D }), N = () => {
-		Y && (v.value = !0, _.value = !1, p.value = t.src);
-	}, P = (e) => {
-		_.value || (v.value = !1, _.value = !1, t.onLoad?.(e), n("load", e));
-	}, re = (e) => {
-		v.value = !1, _.value = !0, t.onError?.(e), n("error", e);
-	}, ie = () => {
-		if (!y.value || !x.value) return !1;
-		let e = y.value.getBoundingClientRect(), t = x.value.getBoundingClientRect ? x.value.getBoundingClientRect() : {
+	}), I = r(() => b(t.width)), L = r(() => b(t.height)), { showViewer: R, mousePosition: z, openPreview: ne, closePreview: B } = ae({ canPreview: P }), V = () => {
+		x && (T.value = !0, C.value = !1, y.value = t.src);
+	}, W = (e) => {
+		C.value || (T.value = !1, C.value = !1, t.onLoad?.(e), n("load", e));
+	}, G = (e) => {
+		T.value = !1, C.value = !0, t.onError?.(e), n("error", e);
+	}, re = () => {
+		if (!E.value || !D.value) return !1;
+		let e = E.value.getBoundingClientRect(), t = D.value.getBoundingClientRect ? D.value.getBoundingClientRect() : {
 			top: 0,
-			bottom: x.value.innerHeight ?? 0,
+			bottom: D.value.innerHeight ?? 0,
 			left: 0,
-			right: x.value.innerWidth ?? 0
+			right: D.value.innerWidth ?? 0
 		};
 		return e.top < t.bottom && e.bottom > t.top && e.left < t.right && e.right > t.left;
-	}, I = Me(() => {
-		ie() && (N(), S?.(), S = void 0);
-	}, 200, !0), L = async () => {
-		if (!Y) return;
-		await h();
+	}, K = w(() => {
+		re() && (V(), O?.(), O = void 0);
+	}, 200, !0), q = async () => {
+		if (!x) return;
+		await l();
 		let { scrollContainer: e } = t;
-		Tt(e) ? x.value = e : ce(e) && e !== "" ? x.value = document.querySelector(e) ?? void 0 : y.value && (x.value = me(y.value)), x.value && (S = X(x.value, "scroll", I), setTimeout(I, 100));
-	}, R = (e) => {
-		let r = v.value ? "loaded" : _.value ? "error" : "success";
-		if (t.onClick?.(r), n("click", r), !(v.value || _.value) && D.value) {
+		Me(e) ? D.value = e : M(e) && e !== "" ? D.value = document.querySelector(e) ?? void 0 : E.value && (D.value = H(E.value)), D.value && (O = S(D.value, "scroll", K), setTimeout(K, 100));
+	}, J = (e) => {
+		let r = T.value ? "loaded" : C.value ? "error" : "success";
+		if (t.onClick?.(r), n("click", r), !(T.value || C.value) && P.value) {
 			let t = e.currentTarget?.getBoundingClientRect();
-			j(t ? {
+			ne(t ? {
 				...e,
 				clientX: t.x + t.width / 2,
 				clientY: t.y + t.height / 2
 			} : e);
 		}
 	};
-	return T(() => t.src, () => {
-		C.value ? (v.value = !0, _.value = !1, S?.(), L()) : N();
-	}), g(() => {
-		C.value ? L() : N();
+	return g(() => t.src, () => {
+		A.value ? (T.value = !0, C.value = !1, O?.(), q()) : V();
+	}), u(() => {
+		A.value ? q() : V();
 	}), o({ setOpen: (e) => {
-		e ? j() : M();
+		e ? ne() : B();
 	} }), () => {
 		let n = {}, r = {};
 		for (let [e, t] of Object.entries(s)) /^(?:data-|on[A-Z])/i.test(e) || [
@@ -1413,7 +1234,7 @@ var $ = /* @__PURE__ */ o((t, { emit: n, slots: a, expose: o, attrs: s }) => {
 			"style",
 			"class"
 		].includes(e) ? n[e] = t : r[e] = t;
-		let o = ve({
+		let o = ie({
 			slots: a,
 			props: t,
 			keys: [
@@ -1423,53 +1244,53 @@ var $ = /* @__PURE__ */ o((t, { emit: n, slots: a, expose: o, attrs: s }) => {
 			],
 			render: !0
 		});
-		return i("div", m({
-			class: K(l.value, d.value, f.value, u.value, t.class),
-			ref: y
+		return i("div", c({
+			class: U(f.value, h.value, _.value, m.value, t.class),
+			ref: E
 		}, n, {
 			style: {
-				width: F(t.size) || k.value,
-				height: F(t.size) || ee.value,
+				width: b(t.size) || I.value,
+				height: b(t.size) || L.value,
 				...n.style || {}
 			},
 			onClick: (e) => {
-				_.value && R(e);
+				C.value && J(e);
 			}
 		}), [
-			_.value ? i("div", { class: K(`${l.value}-error`) }, [o.fallback]) : i(e, null, [i("img", m(r, {
-				src: p.value,
+			C.value ? i("div", { class: U(`${f.value}-error`) }, [o.fallback]) : i(e, null, [i("img", c(r, {
+				src: y.value,
 				loading: t.loading,
-				style: w.value,
-				class: K(t.imageClass, `${l.value}-img`, {
-					[`${l.value}-img-placeholder`]: t.placeholder === !0,
-					[`${l.value}-img-preview`]: D.value
+				style: j.value,
+				class: U(t.imageClass, `${f.value}-img`, {
+					[`${f.value}-img-placeholder`]: t.placeholder === !0,
+					[`${f.value}-img-preview`]: P.value
 				}),
 				crossorigin: t.crossOrigin,
-				width: k.value,
-				height: ee.value,
-				onClick: R,
-				onLoad: P,
-				onError: re
-			}), null), v.value && i("div", {
-				class: K(`${l.value}-placeholder`),
-				onClick: R
+				width: I.value,
+				height: L.value,
+				onClick: J,
+				onLoad: W,
+				onError: G
+			}), null), T.value && i("div", {
+				class: U(`${f.value}-placeholder`),
+				onClick: J
 			}, [o.placeholder])]),
-			E.value.mask && D.value && i("div", {
-				class: K(`${l.value}-mask`, E.value.maskClass),
+			N.value.mask && P.value && i("div", {
+				class: U(`${f.value}-mask`, N.value.maskClass),
 				style: { display: n.style?.display === "none" ? "none" : void 0 }
-			}, [o.mask || i("div", { class: K(`${l.value}-mask-info`) }, [i(A, null, null)])]),
-			D.value && i(bt, m(E.value, {
-				urls: E.value.urls || (t.src ? [t.src] : []),
-				current: O.value,
-				zIndex: t.zIndex ?? E.value.zIndex,
-				open: te.value,
-				mousePosition: ne.value,
-				onClose: () => M()
+			}, [o.mask || i("div", { class: U(`${f.value}-mask-info`) }, [i(v, { type: "EyeOutlined" }, null)])]),
+			P.value && i(De, c(N.value, {
+				urls: N.value.urls || (t.src ? [t.src] : []),
+				current: F.value,
+				zIndex: t.zIndex ?? N.value.zIndex,
+				open: R.value,
+				mousePosition: z.value,
+				onClose: () => B()
 			}), a)
 		]);
 	};
 }, {
-	props: /* @__PURE__ */ p({
+	props: /*@__PURE__*/ s({
 		rootClass: {
 			type: String,
 			required: !1
@@ -1573,7 +1394,7 @@ var $ = /* @__PURE__ */ o((t, { emit: n, slots: a, expose: o, attrs: s }) => {
 			type: Function,
 			required: !1
 		}
-	}, wt),
+	}, je),
 	emits: [
 		"click",
 		"load",
@@ -1583,6 +1404,6 @@ var $ = /* @__PURE__ */ o((t, { emit: n, slots: a, expose: o, attrs: s }) => {
 	inheritAttrs: !1
 });
 $.isGImage = !0, $.install = (e) => (e.component($.name, $), e);
-var Et = $;
+var Ne = $;
 //#endregion
-export { Et as GImage, bt as GImagePreview };
+export { Ne as GImage, De as GImagePreview };