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

package/dist/g-image.esm.js

@@ -0,0 +1,1577 @@
+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";
+typeof process < "u" && process.versions != null && process.versions.node;
+//#endregion
+//#region ../pro-utils/dist/is/type.js
+function L(e, t) {
+	return Object.prototype.toString.call(e) === `[object ${t}]`;
+}
+function R(e) {
+	return typeof e == "boolean";
+}
+function se(e) {
+	return typeof e == "number";
+}
+function z(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 ce(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);
+}
+function de(e, t = 1) {
+	ue += 1;
+	let n = ue;
+	function r(t) {
+		if (t === 0) W(n), e();
+		else {
+			let e = le(() => {
+				r(t - 1);
+			});
+			U.set(n, e);
+		}
+	}
+	return r(t), n;
+}
+de.cancel = (e) => {
+	let t = U.get(e);
+	return W(t), H(t);
+};
+//#endregion
+//#region ../pro-utils/dist/dom/scroll.js
+function fe(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");
+	try {
+		let n = e.style[t];
+		if (n) return n;
+		let r = document?.defaultView?.getComputedStyle(e, "");
+		return r ? r[t] : "";
+	} catch {
+		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 me(e, t) {
+	if (V) return;
+	let n = e;
+	for (; n;) {
+		if ([
+			window,
+			document,
+			document.documentElement
+		].includes(n)) return window;
+		if (pe(n, t)) return n;
+		n = n.parentNode;
+	}
+	return n;
+}
+//#endregion
+//#region ../pro-utils/dist/object/classNames.js
+function K(...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]);
+				n && t.push(n);
+			}
+			else if (B(r)) for (let e in r) r[e] && t.push(e);
+		}
+	}
+	return t.filter((e) => e).join(" ");
+}
+//#endregion
+//#region ../pro-utils/dist/vue/slots.js
+function he({ vnode: e, defaultVNode: t }, ...n) {
+	return e === !1 ? null : typeof e == "function" ? e?.(...n) : e || t;
+}
+function ge(e, ...t) {
+	let { slots: n, key: r = "default", render: i, props: a, defaultChildren: o } = e, s, c = a[r], l = n?.[r], u = typeof o == "function" ? o?.() : o;
+	return s = c === !1 ? !1 : c === !0 ? l ?? u : B(c) && i ? f(c) ? c : l : c || l, s === !1 ? !1 : i ? he({
+		vnode: s,
+		defaultVNode: u
+	}, ...t) : s;
+}
+function q(e, ...t) {
+	let { slots: n, key: r = "default", props: i, defaultChildren: a } = e, o, s = i[r], c = n?.[r]?.(...t), l = typeof a == "function" ? a?.() : a;
+	return o = s === !1 ? !1 : s === !0 ? c ?? l : B(s) ? f(s) ? s : c : s || c, o === !1 ? !1 : he({
+		vnode: o,
+		defaultVNode: l
+	}, ...t);
+}
+function _e(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({
+			slots: n,
+			props: r,
+			key: e,
+			defaultChildren: c
+		}, ...t) : ge({
+			slots: n,
+			props: r,
+			key: e,
+			render: !1,
+			defaultChildren: c
+		}, ...t);
+		(R(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 ve(e, t) {
+	return c() ? (_(e, t), !0) : !1;
+}
+var J = /* @__PURE__ */ new WeakMap(), ye = (...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 be = Object.prototype.toString, xe = (e) => be.call(e) === "[object Object]", Se = () => {}, Ce = /* @__PURE__ */ we();
+function we() {
+	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 Te(...e) {
+	if (e.length !== 1) return S(...e);
+	let t = e[0];
+	return typeof t == "function" ? y(a(() => ({
+		get: t,
+		set: Se
+	}))) : b(t);
+}
+function Ee(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 De(...e) {
+	let t = 0, n, r = !0, i = Se, 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 = Se);
+	};
+	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 Oe(e) {
+	return e.endsWith("rem") ? Number.parseFloat(e) * 16 : Number.parseFloat(e);
+}
+function ke(e) {
+	return Array.isArray(e) ? e : [e];
+}
+function Ae(e) {
+	return e || s();
+}
+function je(e, t = 200, n = !1, r = !0, i = !1) {
+	return Ee(De(t, n, r, i), e);
+}
+function Me(e, t = !0, n) {
+	Ae(n) ? g(e, n) : t ? e() : h(e);
+}
+function Ne(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 Pe = Y ? window : void 0;
+Y && window.document, Y && window.navigator, Y && window.location;
+function Fe(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 = ke(C(e[0])).filter((e) => e != null);
+		return t.every((e) => typeof e != "string") ? t : void 0;
+	});
+	return Ne(() => [
+		n.value?.map((e) => Fe(e)) ?? [Pe].filter((e) => e != null),
+		ke(C(n.value ? e[1] : e[0])),
+		ke(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 = xe(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 Ie() {
+	let e = x(!1), t = s();
+	return t && g(() => {
+		e.value = !0;
+	}, t), e;
+}
+/* @__NO_SIDE_EFFECTS__ */
+function Le(e) {
+	let t = Ie();
+	return r(() => (t.value, !!e()));
+}
+var Re = Symbol("vueuse-ssr-width");
+/* @__NO_SIDE_EFFECTS__ */
+function ze() {
+	let e = l() ? ye(Re, null) : null;
+	return typeof e == "number" ? e : void 0;
+}
+function Be(e, t = {}) {
+	let { window: n = Pe, ssrWidth: i = /* @__PURE__ */ ze() } = t, a = /* @__PURE__ */ Le(() => 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 >= Oe(n[1])), r && a && (a = i <= Oe(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 Ve(e) {
+	return typeof Window < "u" && e instanceof Window ? e.document.documentElement : typeof Document < "u" && e instanceof Document ? e.documentElement : e;
+}
+function He(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 : He(t);
+	}
+}
+function Ue(e) {
+	let t = e || window.event, n = t.target;
+	return He(n) ? !1 : t.touches.length > 1 ? !0 : (t.preventDefault && t.preventDefault(), !1);
+}
+var We = /* @__PURE__ */ new WeakMap();
+function Ge(e, t = !1) {
+	let n = x(t), i = null, a = "";
+	T(Te(e), (e) => {
+		let t = Ve(C(e));
+		if (t) {
+			let e = t;
+			if (We.get(e) || We.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 = Ve(C(e));
+		!t || n.value || (Ce && (i = X(t, "touchmove", (e) => {
+			Ue(e);
+		}, { passive: !1 })), t.style.overflow = "hidden", n.value = !0);
+	}, s = () => {
+		let t = Ve(C(e));
+		!t || !n.value || (Ce && i?.(), t.style.overflow = a, We.delete(t), n.value = !1);
+	};
+	return ve(s), r({
+		get() {
+			return n.value;
+		},
+		set(e) {
+			e ? o() : s();
+		}
+	});
+}
+function Ke(e = {}) {
+	let { window: t = Pe, 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(), Me(l);
+	let u = { passive: !0 };
+	return X("resize", l, u), t && o === "visual" && t.visualViewport && X(t.visualViewport, "resize", l, u), i && T(Be("(orientation: portrait)"), () => l()), {
+		width: s,
+		height: c
+	};
+}
+//#endregion
+//#region src/hooks/useImagePreview.ts
+function qe(e) {
+	let { canPreview: t } = e, n = b(!1), r = b(null), i = Ge(document.body, !1), a;
+	return _(() => {
+		a !== void 0 && (window.cancelAnimationFrame(a), a = void 0), i.value = !1;
+	}), X("wheel", (e) => {
+		n.value && e.ctrlKey && e.preventDefault();
+	}, { passive: !1 }), {
+		showViewer: n,
+		mousePosition: r,
+		openPreview: (e) => {
+			t.value && (a !== void 0 && (window.cancelAnimationFrame(a), a = void 0), e ? r.value = {
+				x: e.clientX,
+				y: e.clientY
+			} : r.value = null, n.value = !0, a = window.requestAnimationFrame(() => {
+				i.value = !0, a = void 0;
+			}));
+		},
+		closePreview: () => {
+			a !== void 0 && (window.cancelAnimationFrame(a), a = void 0), n.value = !1, r.value = null, i.value = !1;
+		}
+	};
+}
+//#endregion
+//#region ../pro-hooks/dist/core/useIsIos.js
+var Je = (typeof window > "u" ? !1 : /iPad|iPhone|iPod/.test(navigator.platform) || navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1) && !window.MSStream;
+typeof window > "u" || Je || window.safari;
+//#endregion
+//#region ../pro-hooks/dist/core/useState.js
+function Ye(e) {
+	let t = b(typeof e == "function" ? e() : e);
+	function n(e) {
+		t.value = e;
+	}
+	return [t, n];
+}
+//#endregion
+//#region ../pro-hooks/dist/core/useMergedState.js
+function Xe(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] = Ye([o.value]);
+	E(() => {
+		let e = r.value === void 0 ? a.value : r.value;
+		t?.postState && (e = t.postState(e, a.value)), o.value = e;
+	}), T(s, () => {
+		let e = s.value[0];
+		a.value !== e && t?.onChange?.(a.value, e);
+	}, { deep: !0 });
+	function l(e) {
+		a.value = e;
+	}
+	function u(e) {
+		l(e), c([o.value]);
+	}
+	return T(r, () => {
+		a.value = r.value;
+	}), [
+		o,
+		u,
+		a
+	];
+}
+//#endregion
+//#region src/hooks/useImageTransform.ts
+var Ze = {
+	x: 0,
+	y: 0,
+	rotate: 0,
+	scale: 1,
+	flipX: !1,
+	flipY: !1
+};
+function Qe(e) {
+	let { imageRef: t, minScale: n, maxScale: r, windowWidth: i, windowHeight: a, onTransform: o } = e, s = b(null), c = b([]), [l, u] = Ye({ ...Ze }), d = (e) => {
+		let t = { ...l.value };
+		u({ ...Ze }), (t.x !== 0 || t.y !== 0 || t.scale !== 1 || t.rotate !== 0 || t.flipX || t.flipY) && o?.({
+			transform: { ...Ze },
+			action: e
+		});
+	}, f = (e, t) => {
+		s.value === null && (c.value = [], s.value = de(() => {
+			let e = { ...l.value };
+			for (let t of c.value) e = {
+				...e,
+				...t
+			};
+			s.value = null, o?.({
+				transform: e,
+				action: t
+			}), u(e);
+		})), c.value.push({
+			...l.value,
+			...e
+		});
+	};
+	return {
+		transform: l,
+		resetTransform: d,
+		updateTransform: f,
+		dispatchZoomChange: (e, o, s, c, u) => {
+			let d = t.value;
+			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);
+			if (e < 1 && b === 1) {
+				let e = h * b, t = g * b;
+				e <= i.value && t <= a.value && (O = 0, k = 0);
+			}
+			f({
+				x: O,
+				y: k,
+				scale: b
+			}, o);
+		}
+	};
+}
+//#endregion
+//#region src/hooks/useImageBoundary.ts
+function $e(e, t, n, r) {
+	let i = t + n, a = (n - r) / 2;
+	if (n > r) {
+		if (t > 0) return { [e]: a };
+		if (t < 0 && i < r) return { [e]: -a };
+	} else if (t < 0 || i > r) return { [e]: t < 0 ? a : -a };
+	return {};
+}
+function et(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 ? {
+		...$e("x", r, t, a),
+		...$e("y", i, n, o)
+	} : null;
+}
+//#endregion
+//#region src/hooks/useMouseEvent.ts
+var tt = 1, nt = 2;
+function rt(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({
+		diffX: 0,
+		diffY: 0,
+		transformX: 0,
+		transformY: 0
+	});
+	return X(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 = et({
+			imageWidth: h ? f : s,
+			imageHeight: h ? s : f,
+			imageLeft: p,
+			imageTop: m,
+			windowWidth: c.value,
+			windowHeight: l.value
+		});
+		g && o({ ...g }, "dragRebound");
+	}), X(window, "mousemove", (e) => {
+		!r.value || !u.value || o({
+			x: e.pageX - d.value.diffX,
+			y: e.pageY - d.value.diffY
+		}, "move");
+	}), {
+		isMoving: u,
+		onMouseDown: (e) => {
+			!n.value || e.button !== 0 || (e.preventDefault(), e.stopPropagation(), d.value = {
+				diffX: e.pageX - a.value.x,
+				diffY: e.pageY - a.value.y,
+				transformX: a.value.x,
+				transformY: a.value.y
+			}, u.value = !0);
+		},
+		onWheel: (e) => {
+			if (!r.value || e.deltaY === 0) return;
+			let t = tt + Math.min(Math.abs(e.deltaY / 100), nt) * i.value;
+			e.deltaY > 0 && (t = tt / t), s(t, "wheel", e.clientX, e.clientY);
+		}
+	};
+}
+//#endregion
+//#region src/hooks/useTouchEvent.ts
+function it(e, t) {
+	return Math.hypot(e.x - t.x, e.y - t.y);
+}
+function at(e, t, n, r) {
+	let i = it(e, n), a = it(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 ot(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({
+		point1: {
+			x: 0,
+			y: 0
+		},
+		point2: {
+			x: 0,
+			y: 0
+		},
+		eventType: "none"
+	}), f = (e) => {
+		d.value = {
+			...d.value,
+			...e
+		};
+	};
+	return X(window, "touchmove", (e) => {
+		r.value && n.value && e.preventDefault();
+	}, { passive: !1 }), {
+		isTouching: u,
+		onTouchStart: (e) => {
+			if (!n.value) return;
+			e.stopPropagation(), u.value = !0;
+			let { touches: t = [] } = e;
+			t.length > 1 ? f({
+				point1: {
+					x: t[0].clientX,
+					y: t[0].clientY
+				},
+				point2: {
+					x: t[1].clientX,
+					y: t[1].clientY
+				},
+				eventType: "touchZoom"
+			}) : f({
+				point1: {
+					x: t[0].clientX - a.value.x,
+					y: t[0].clientY - a.value.y
+				},
+				eventType: "move"
+			});
+		},
+		onTouchMove: (e) => {
+			let { touches: t = [] } = e, { point1: n, point2: r, eventType: i } = d.value;
+			if (t.length > 1 && i === "touchZoom") {
+				let e = {
+					x: t[0].clientX,
+					y: t[0].clientY
+				}, i = {
+					x: t[1].clientX,
+					y: t[1].clientY
+				}, [a, o] = at(n, r, e, i);
+				s(it(e, i) / it(n, r), "touchZoom", a, o, !0), f({
+					point1: e,
+					point2: i,
+					eventType: "touchZoom"
+				});
+			} else i === "move" && (o({
+				x: t[0].clientX - n.x,
+				y: t[0].clientY - n.y
+			}, "move"), f({ eventType: "move" }));
+		},
+		onTouchEnd: () => {
+			if (!r.value) return;
+			if (u.value &&= !1, f({ eventType: "none" }), i.value > a.value.scale) return o({
+				x: 0,
+				y: 0,
+				scale: i.value
+			}, "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 = et({
+				imageWidth: m ? s : n,
+				imageHeight: m ? n : s,
+				imageLeft: d,
+				imageTop: p,
+				windowWidth: c.value,
+				windowHeight: l.value
+			});
+			h && o({ ...h }, "dragRebound");
+		}
+	};
+}
+//#endregion
+//#region src/style/preview.ts
+function st(e) {
+	return {
+		zIndexPopup: `calc(${e.zIndexPopupBase} + 80)`,
+		previewOperationColor: e.colorTextDescription,
+		previewOperationHoverColor: e.colorText,
+		previewOperationColorDisabled: e.colorTextDisabled,
+		imagePreviewSwitchSize: e.controlHeightLG,
+		previewOperationSize: e.fontSizeLG
+	};
+}
+var ct = (e) => {
+	let t = e.componentCls, { motionEaseOut: n, motionDurationSlow: r, previewOperationSize: i, zIndexPopup: a } = e, o = {
+		position: "absolute",
+		color: e.previewOperationColor,
+		backgroundColor: e.colorBgContainer,
+		borderRadius: "50%",
+		width: e.controlHeightLG,
+		height: e.controlHeightLG,
+		padding: 0,
+		outline: 0,
+		border: 0,
+		boxShadow: e.boxShadowTertiary,
+		cursor: "pointer",
+		transition: `all ${r}`,
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		fontSize: i,
+		"&:hover": {
+			color: e.previewOperationHoverColor,
+			backgroundColor: e.colorBgContainer
+		},
+		"&:active": { backgroundColor: e.colorBgContainer },
+		svg: { stroke: "currentColor" }
+	};
+	return { [t]: {
+		textAlign: "center",
+		inset: 0,
+		position: "fixed",
+		userSelect: "none",
+		zIndex: a,
+		[`${t}-mask`]: {
+			position: "absolute",
+			inset: 0,
+			background: `color-mix(in srgb, ${e.colorBgLayout} 90%, transparent)`,
+			backdropFilter: "blur(0px)",
+			transition: `background-color ${r}, backdrop-filter ${r}`,
+			[`&${t}-mask-blur`]: { backdropFilter: "blur(4px)" },
+			[`&${t}-mask-hidden`]: { display: "none" }
+		},
+		[`${t}-body`]: {
+			position: "absolute",
+			inset: 0,
+			overflow: "hidden",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			pointerEvents: "none",
+			"> *": { pointerEvents: "auto" }
+		},
+		[`${t}-img`]: {
+			maxWidth: "100%",
+			maxHeight: "70%",
+			verticalAlign: "middle",
+			transform: "scale3d(1, 1, 1)",
+			transition: `transform ${r} ${n} 0s`,
+			userSelect: "none"
+		},
+		[`&-movable ${t}-img`]: { cursor: "grab" },
+		[`&-moving ${t}-img`]: { cursor: "grabbing" },
+		[`${t}-close`]: {
+			...o,
+			top: e.marginSM,
+			insetInlineEnd: e.marginSM
+		},
+		[`${t}-switch`]: {
+			...o,
+			top: "50%",
+			transform: "translateY(-50%)",
+			"&-disabled": { "&, &:hover, &:active": {
+				color: e.previewOperationColorDisabled,
+				backgroundColor: e.colorBgContainer,
+				cursor: "not-allowed"
+			} },
+			"&-prev": { insetInlineStart: e.marginSM },
+			"&-next": { insetInlineEnd: e.marginSM }
+		},
+		[`${t}-footer`]: {
+			position: "absolute",
+			bottom: e.marginXL,
+			left: {
+				_skip_check_: !0,
+				value: "50%"
+			},
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			color: e.previewOperationColor,
+			transform: "translateX(-50%)",
+			gap: e.marginXS
+		},
+		[`${t}-progress`]: { color: e.previewOperationColor },
+		[`${t}-actions`]: {
+			display: "flex",
+			alignItems: "center",
+			gap: e.marginXXS,
+			padding: e.paddingXXS,
+			color: e.previewOperationColor,
+			backgroundColor: e.colorBgContainer,
+			border: `${F(e.lineWidth)} ${e.lineType} ${e.colorFillTertiary}`,
+			borderRadius: e.borderRadiusLG,
+			fontSize: i,
+			"&-action": {
+				color: "inherit",
+				background: "transparent",
+				border: 0,
+				font: "inherit",
+				lineHeight: 1,
+				width: e.controlHeight,
+				height: e.controlHeight,
+				padding: 0,
+				cursor: "pointer",
+				transition: `all ${r}`,
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				borderRadius: e.borderRadius,
+				userSelect: "none",
+				[`&:not(${t}-actions-action-disabled):hover`]: {
+					color: e.colorTextSecondary,
+					backgroundColor: e.colorFillTertiary
+				},
+				[`&:not(${t}-actions-action-disabled):active`]: {
+					color: e.colorText,
+					backgroundColor: e.colorFillSecondary
+				},
+				"&-disabled": {
+					cursor: "not-allowed",
+					opacity: .5
+				},
+				svg: { stroke: "currentColor" }
+			}
+		}
+	} };
+}, lt = (e) => {
+	let t = e.componentCls, { motionDurationSlow: n, motionEaseOut: r } = e;
+	return { [`${t}`]: {
+		"&-fade-enter-active, &-fade-leave-active": {
+			transition: `visibility ${n}`,
+			[`${t}-mask`]: { transition: `background-color ${n}, backdrop-filter ${n}` },
+			[`${t}-body`]: { transition: `transform ${n} ${r}` },
+			[`${t}-close, ${t}-switch, ${t}-footer`]: { transition: `opacity ${n}, all ${n}` }
+		},
+		"&-fade-enter-from, &-fade-leave-to": {
+			visibility: "visible",
+			[`${t}-mask`]: {
+				backgroundColor: "transparent",
+				backdropFilter: "blur(0px)"
+			},
+			[`${t}-body`]: { transform: "scale(0)" },
+			[`${t}-close, ${t}-switch, ${t}-footer`]: { opacity: 0 }
+		},
+		"&-fade-enter-to, &-fade-leave-from": {
+			[`${t}-mask`]: {
+				backgroundColor: `color-mix(in srgb, ${e.colorBgLayout} 90%, transparent)`,
+				[`&${t}-mask-blur`]: { backdropFilter: "blur(4px)" }
+			},
+			[`${t}-close, ${t}-switch, ${t}-footer`]: { opacity: 1 }
+		}
+	} };
+}, ut = ie("GImagePreview", (e) => [ct(e), lt(e)], st), dt = 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)
+}, Q = {
+	copySuccess: "复制成功",
+	copyFailed: "复制失败",
+	downloadSuccess: "下载成功",
+	downloadFailed: "下载失败"
+};
+function ft(e) {
+	try {
+		let t = new URL(e, window.location.href).pathname.match(/\/([^/]+)$/)?.[1];
+		return t ? decodeURIComponent(t) : "image";
+	} catch {
+		let t = e.split("?")[0]?.split("#")[0]?.split("/").pop();
+		return t ? decodeURIComponent(t) : "image";
+	}
+}
+function pt(e) {
+	let t = {
+		"image/gif": "gif",
+		"image/jpg": "jpg",
+		"image/jpeg": "jpg",
+		"image/png": "png",
+		"image/svg+xml": "svg",
+		"image/webp": "webp"
+	}, n = e?.toLowerCase();
+	return t[n] || n?.split("/")[1]?.split("+")[0] || "png";
+}
+async function mt(e) {
+	let t = await fetch(e, { mode: "cors" });
+	if (!t.ok) throw Error(`Failed to fetch image: ${t.status}`);
+	return t.blob();
+}
+async function ht(e) {
+	return new Promise((t, n) => {
+		let r = new Image(), i = URL.createObjectURL(e);
+		r.onload = () => {
+			URL.revokeObjectURL(i);
+			let e = document.createElement("canvas");
+			e.width = r.naturalWidth, e.height = r.naturalHeight;
+			let a = e.getContext("2d");
+			if (!a) {
+				n(/* @__PURE__ */ Error("Canvas context not available"));
+				return;
+			}
+			a.drawImage(r, 0, 0), e.toBlob((e) => {
+				e ? t(e) : n(/* @__PURE__ */ Error("Failed to convert to PNG"));
+			}, "image/png", 1);
+		}, r.onerror = () => {
+			URL.revokeObjectURL(i), n(/* @__PURE__ */ Error("Failed to load image for PNG conversion"));
+		}, r.src = i;
+	});
+}
+async function gt(e) {
+	let t = (e.type || "").toLowerCase();
+	return t === "image/png" || t === "image/svg+xml" ? { [t]: e } : { "image/png": await ht(e) };
+}
+function _t(e, t) {
+	let n = ft(e);
+	return n.includes(".") ? n.endsWith(".svg+xml") ? n.replace(/\.svg\+xml$/i, ".svg") : n : `${n}.${pt(t)}`;
+}
+function vt(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 yt = /* @__PURE__ */ o((a, { emit: o, slots: s, expose: c }) => {
+	let { width: l, height: u } = Ke(), { prefixCls: d } = ae("pro-image-preview", a), f = oe(d), [p, m] = ut(d, f), [_, y] = Xe(a.open, {
+		value: S(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 } = Qe({
+		imageRef: C,
+		minScale: S(a, "minScale"),
+		maxScale: S(a, "maxScale"),
+		windowWidth: l,
+		windowHeight: u,
+		onTransform: a.onTransform
+	}), { isMoving: P, onMouseDown: re, onWheel: ie } = rt({
+		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 } = ot({
+		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 ? {
+		visible: !1,
+		blur: !1
+	} : a.mask && typeof a.mask == "object" && !("type" in a.mask) ? {
+		visible: !0,
+		blur: a.mask.blur !== !1
+	} : {
+		visible: !0,
+		blur: !0
+	}), le = 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);
+	});
+	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;
+			});
+		}
+	}, 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;
+			});
+		}
+	}, de = () => {
+		N(dt + (a.scaleStep ?? .5), "zoomIn");
+	}, fe = () => {
+		N(dt / (dt + (a.scaleStep ?? .5)), "zoomOut");
+	}, G = () => {
+		M({ rotate: A.value.rotate + 90 }, "rotateRight");
+	}, pe = () => {
+		M({ rotate: A.value.rotate - 90 }, "rotateLeft");
+	}, me = () => {
+		M({ flipX: !A.value.flipX }, "flipX");
+	}, he = () => {
+		M({ flipY: !A.value.flipY }, "flipY");
+	}, ge = async () => {
+		if (!(!z.value || O.value)) {
+			if (!navigator.clipboard || !window.ClipboardItem) {
+				I.error(Q.copyFailed);
+				return;
+			}
+			O.value = !0;
+			try {
+				let e = await gt(await mt(z.value));
+				await navigator.clipboard.write([new ClipboardItem(e)]), I.success(Q.copySuccess);
+			} catch {
+				I.error(Q.copyFailed);
+			} finally {
+				O.value = !1;
+			}
+		}
+	}, ve = async () => {
+		if (!(!z.value || k.value)) {
+			k.value = !0;
+			try {
+				let e = await mt(z.value);
+				vt(e, _t(z.value, e.type)), I.success(Q.downloadSuccess);
+			} catch {
+				I.error(Q.downloadFailed);
+			} finally {
+				k.value = !1;
+			}
+		}
+	}, J = (e) => {
+		_.value && (A.value.scale === 1 ? N(dt + (a.scaleStep ?? .5), "doubleClick", e.clientX, e.clientY) : M({
+			x: 0,
+			y: 0,
+			scale: 1
+		}, "doubleClick"));
+	}, ye = (e) => {
+		if (e.key === "Escape") {
+			H();
+			return;
+		}
+		!_.value || !B.value || (e.key === "ArrowLeft" ? U() : e.key === "ArrowRight" && W());
+	}, Y;
+	g(() => {
+		let e = (e) => ye(e);
+		window.addEventListener("keydown", e), Y = () => window.removeEventListener("keydown", e);
+	}), v(() => {
+		Y?.();
+	}), c({ setOpen: (e) => {
+		y(e), E.value = a.current ?? 0;
+	} });
+	let be = () => _e({
+		slots: s,
+		props: { ...a.icons },
+		keys: [
+			"flipY",
+			"flipX",
+			"rotateLeft",
+			"rotateRight",
+			"zoomOut",
+			"zoomIn",
+			"copy",
+			"download"
+		],
+		render: !0,
+		defaultVNodes: [
+			Z.flipY,
+			Z.flipX,
+			Z.rotateLeft,
+			Z.rotateRight,
+			Z.zoomOut,
+			Z.zoomIn,
+			Z.copy,
+			Z.download
+		]
+	}), xe = () => {
+		let e = be();
+		return [
+			{
+				icon: e.flipY,
+				onClick: he,
+				type: "flipY"
+			},
+			{
+				icon: e.flipX,
+				onClick: me,
+				type: "flipX"
+			},
+			{
+				icon: e.rotateLeft,
+				onClick: pe,
+				type: "rotateLeft"
+			},
+			{
+				icon: e.rotateRight,
+				onClick: G,
+				type: "rotateRight"
+			},
+			{
+				icon: e.zoomOut,
+				onClick: fe,
+				type: "zoomOut",
+				disabled: r(() => A.value.scale <= (a.minScale ?? 1))
+			},
+			{
+				icon: e.zoomIn,
+				onClick: de,
+				type: "zoomIn",
+				disabled: r(() => A.value.scale === (a.maxScale ?? 50))
+			},
+			{
+				icon: O.value ? i(te, { spin: !0 }, null) : e.copy,
+				onClick: ge,
+				type: "copy",
+				disabled: r(() => O.value)
+			},
+			{
+				icon: k.value ? i(te, { spin: !0 }, null) : e.download,
+				onClick: ve,
+				type: "download",
+				disabled: r(() => k.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({
+			slots: s,
+			props: { close: a.icons?.close },
+			key: "close"
+		}), c = q({
+			slots: s,
+			props: { left: a.icons?.left },
+			key: "left"
+		}), l = q({
+			slots: s,
+			props: { right: a.icons?.right },
+			key: "right"
+		}), u = `${d.value}-actions-action`, h = xe();
+		return i(t, { to: a.getContainer || "body" }, { default: () => [i(n, {
+			name: `${d.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
+			}),
+			style: { zIndex: a.zIndex },
+			role: "dialog",
+			"aria-modal": "true",
+			"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
+			}, null),
+			i("div", {
+				class: `${d.value}-body`,
+				style: le.value
+			}, [i("img", {
+				ref: C,
+				class: `${d.value}-img`,
+				src: z.value,
+				alt: "Image",
+				loading: "eager",
+				decoding: "sync",
+				style: r,
+				onWheel: ie,
+				onMousedown: re,
+				onDblclick: J,
+				onTouchstart: L,
+				onTouchmove: R,
+				onTouchend: se,
+				onTouchcancel: se
+			}, null)]),
+			i("button", {
+				type: "button",
+				class: `${d.value}-close`,
+				onClick: H
+			}, [o || i(D, null, null)]),
+			B.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 }),
+				onClick: (e) => {
+					e.preventDefault(), e.stopPropagation(), U();
+				}
+			}, [c || i(ee, null, 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 }),
+				onClick: (e) => {
+					e.preventDefault(), e.stopPropagation(), W();
+				}
+			}, [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", {
+				type: "button",
+				class: K(u, `${u}-${n}`, { [`${u}-disabled`]: r && r.value }),
+				onClick: () => {
+					r?.value || t();
+				},
+				disabled: r ? r.value : !1,
+				"aria-label": n,
+				key: n
+			}, [e]))])])
+		])] })] });
+	};
+}, {
+	props: /* @__PURE__ */ p({
+		class: {
+			type: String,
+			required: !1
+		},
+		style: {
+			type: Object,
+			required: !1
+		},
+		rootClass: {
+			type: String,
+			required: !1
+		},
+		prefixCls: {
+			type: String,
+			required: !1
+		},
+		urls: {
+			type: Array,
+			required: !0
+		},
+		open: {
+			type: Boolean,
+			required: !1,
+			default: void 0
+		},
+		scaleStep: {
+			type: Number,
+			required: !1
+		},
+		minScale: {
+			type: Number,
+			required: !1
+		},
+		maxScale: {
+			type: Number,
+			required: !1
+		},
+		movable: {
+			type: Boolean,
+			required: !1,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			required: !1,
+			default: void 0
+		},
+		zIndex: {
+			type: Number,
+			required: !1
+		},
+		current: {
+			type: Number,
+			required: !1
+		},
+		infinite: {
+			type: Boolean,
+			required: !1,
+			default: void 0
+		},
+		getContainer: {
+			type: String,
+			required: !1
+		},
+		onHideOnClickModal: {
+			type: Boolean,
+			required: !1,
+			default: void 0
+		},
+		mask: {
+			type: [Object, Boolean],
+			required: !1,
+			default: void 0
+		},
+		maskClass: {
+			type: String,
+			required: !1
+		},
+		mousePosition: {
+			type: [Object, null],
+			required: !1
+		},
+		countRender: {
+			type: [Function, Boolean],
+			required: !1,
+			default: void 0
+		},
+		icons: {
+			type: Object,
+			required: !1
+		},
+		onClose: {
+			type: Function,
+			required: !1
+		},
+		onTransform: {
+			type: Function,
+			required: !1
+		},
+		onOpenChange: {
+			type: Function,
+			required: !1
+		},
+		"onUpdate:open": {
+			type: Function,
+			required: !1
+		}
+	}, {
+		open: !1,
+		scaleStep: .5,
+		minScale: 1,
+		maxScale: 50,
+		movable: !0,
+		zIndex: 2e3,
+		current: 0,
+		infinite: !0,
+		onHideOnClickModal: !0,
+		urls: [],
+		icons: {}
+	}),
+	emits: [
+		"close",
+		"transform",
+		"update:open"
+	],
+	name: "GImagePreview",
+	inheritAttrs: !1
+}), bt = (e) => {
+	let { motionDurationSlow: t, paddingXXS: n, marginXXS: r, colorTextLightSolid: i } = e;
+	return {
+		position: "absolute",
+		inset: 0,
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		color: i,
+		background: "rgba(0, 0, 0, 0.5)",
+		cursor: "pointer",
+		opacity: 0,
+		transition: `opacity ${t}`,
+		[`.${e.componentCls}-mask-info`]: {
+			overflow: "hidden",
+			whiteSpace: "nowrap",
+			textOverflow: "ellipsis",
+			padding: `0 ${F(n)}`,
+			".anticon": {
+				marginInlineEnd: r,
+				svg: { verticalAlign: "baseline" }
+			}
+		}
+	};
+}, xt = (e) => {
+	let t = {
+		width: "100%",
+		height: "100%"
+	};
+	return { [e.componentCls]: {
+		display: "inline-block",
+		position: "relative",
+		overflow: "hidden",
+		[`${e.componentCls}-img`]: {
+			...t,
+			verticalAlign: "top",
+			opacity: 1,
+			[`&${e.componentCls}-img-preview`]: {
+				userSelect: "none",
+				cursor: "pointer"
+			},
+			"&-placeholder": {
+				...t,
+				backgroundColor: e.colorBgContainerDisabled,
+				backgroundImage: "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=')",
+				backgroundRepeat: "no-repeat",
+				backgroundPosition: "center center",
+				backgroundSize: "30%"
+			}
+		},
+		[`${e.componentCls}-error`]: {
+			...t,
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center"
+		},
+		[`${e.componentCls}-placeholder`]: {
+			position: "absolute",
+			inset: 0
+		},
+		[`${e.componentCls}-mask`]: { ...bt(e) },
+		[`${e.componentCls}-mask:hover`]: { opacity: 1 }
+	} };
+}, St = ie("GImage", (e) => [xt(e)]), Ct = {
+	src: "",
+	alt: "",
+	fit: "contain",
+	preview: !0,
+	loading: "eager"
+};
+function wt(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] = St(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 ? {
+		...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;
+		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 } = qe({ 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() : {
+			top: 0,
+			bottom: x.value.innerHeight ?? 0,
+			left: 0,
+			right: x.value.innerWidth ?? 0
+		};
+		return e.top < t.bottom && e.bottom > t.top && e.left < t.right && e.right > t.left;
+	}, I = je(() => {
+		ie() && (N(), S?.(), S = void 0);
+	}, 200, !0), L = async () => {
+		if (!Y) return;
+		await h();
+		let { scrollContainer: e } = t;
+		wt(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) {
+			let t = e.currentTarget?.getBoundingClientRect();
+			j(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();
+	}), o({ setOpen: (e) => {
+		e ? j() : M();
+	} }), () => {
+		let n = {}, r = {};
+		for (let [e, t] of Object.entries(s)) /^(?:data-|on[A-Z])/i.test(e) || [
+			"id",
+			"style",
+			"class"
+		].includes(e) ? n[e] = t : r[e] = t;
+		let o = _e({
+			slots: a,
+			props: t,
+			keys: [
+				"fallback",
+				"mask",
+				"placeholder"
+			],
+			render: !0
+		});
+		return i("div", m({
+			class: K(l.value, d.value, f.value, u.value, t.class),
+			ref: y
+		}, n, {
+			style: {
+				width: F(t.size) || k.value,
+				height: F(t.size) || ee.value,
+				...n.style || {}
+			},
+			onClick: (e) => {
+				_.value && R(e);
+			}
+		}), [
+			_.value ? i("div", { class: K(`${l.value}-error`) }, [o.fallback]) : i(e, null, [i("img", m(r, {
+				src: p.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
+				}),
+				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
+			}, [o.placeholder])]),
+			E.value.mask && D.value && i("div", {
+				class: K(`${l.value}-mask`, E.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(yt, 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()
+			}), a)
+		]);
+	};
+}, {
+	props: /* @__PURE__ */ p({
+		rootClass: {
+			type: String,
+			required: !1
+		},
+		prefixCls: {
+			type: String,
+			required: !1
+		},
+		src: {
+			type: String,
+			required: !1
+		},
+		alt: {
+			type: String,
+			required: !1
+		},
+		width: {
+			type: Number,
+			required: !1
+		},
+		height: {
+			type: Number,
+			required: !1
+		},
+		size: {
+			type: Number,
+			required: !1
+		},
+		fit: {
+			type: String,
+			required: !1
+		},
+		loading: {
+			type: String,
+			required: !1
+		},
+		crossOrigin: {
+			type: String,
+			required: !1
+		},
+		imageStyle: {
+			type: Object,
+			required: !1
+		},
+		imageClass: {
+			type: String,
+			required: !1
+		},
+		preview: {
+			type: [Boolean, Object],
+			required: !1,
+			default: void 0
+		},
+		zIndex: {
+			type: Number,
+			required: !1
+		},
+		lazy: {
+			type: Boolean,
+			required: !1,
+			default: void 0
+		},
+		scrollContainer: { required: !1 },
+		placeholder: {
+			type: [
+				Function,
+				Object,
+				String,
+				Number,
+				Boolean,
+				null,
+				Array
+			],
+			required: !1,
+			default: void 0
+		},
+		fallback: {
+			type: [
+				Function,
+				Object,
+				String,
+				Number,
+				Boolean,
+				null,
+				Array
+			],
+			required: !1,
+			default: void 0
+		},
+		onLoad: {
+			type: Function,
+			required: !1
+		},
+		onError: {
+			type: Function,
+			required: !1
+		},
+		onClick: {
+			type: Function,
+			required: !1
+		},
+		"onUpdate:open": {
+			type: Function,
+			required: !1
+		}
+	}, Ct),
+	emits: [
+		"click",
+		"load",
+		"error"
+	],
+	name: "GImage",
+	inheritAttrs: !1
+});
+$.isGImage = !0, $.install = (e) => (e.component($.name, $), e);
+var Tt = $;
+//#endregion
+export { Tt as GImage, yt as ImagePreview };