@gx-design-vue/image 0.2.0-beta.29 → 0.2.0-beta.30

package/dist/image.js

@@ -1,38 +1,164 @@
-import { ref as $, defineComponent as ye, createVNode as s, Teleport as Ae, Transition as me, withDirectives as he, Fragment as re, cloneVNode as it, vShow as pe, toRef as k, reactive as at, computed as b, watch as J, onMounted as Ee, onUnmounted as lt, mergeProps as ae, watchEffect as rt, nextTick as st } from "vue";
-import { CloseOutlined as ut, LeftOutlined as ct, RightOutlined as dt, SwapOutlined as Le, ZoomOutOutlined as ft, ZoomInOutlined as vt, RotateRightOutlined as gt, RotateLeftOutlined as mt, EyeOutlined as ht } from "@ant-design/icons-vue";
-import { getTransitionProps as we, Keyframe as ue, useStyle as pt, mergeToken as wt, unit as ee, FastColor as yt, useProStyle as St } from "@gx-design-vue/pro-provider";
-import { classNames as X, getPrefixCls as De, isNumber as Re, getSlotVNode as H, isArray as Ct, getSlot as Ne, getSlotsProps as xt, isInContainer as It, isString as bt, getScrollContainer as Lt } from "@gx-design-vue/pro-utils";
-import { useWindowSize as Pe, isClient as Q, useThrottleFn as $t, useEventListener as $e } from "@vueuse/core";
-import { isEqual as Mt, cloneDeep as zt, omit as Xe, fromPairs as Ot, pick as Tt } from "lodash-es";
-import { useState as ne, useEffect as Se, useMergedState as At } from "@gx-design-vue/pro-hooks";
-import { TinyColor as Z } from "@ctrl/tinycolor";
-let Ye = (e) => setTimeout(e, 16), je = (e) => clearTimeout(e);
-typeof window < "u" && "requestAnimationFrame" in window && (Ye = (e) => window.requestAnimationFrame(e), je = (e) => window.cancelAnimationFrame(e));
-let Me = 0;
-const Ce = /* @__PURE__ */ new Map();
-function Be(e) {
-  Ce.delete(e);
+/*!
+  * Gx Design Pro
+  * Version: 0.2.0-beta.29
+  * Author: gx12358
+  * Copyright (C) 2024 gx12358
+  * License: MIT License
+  * Description: Gx Design Image
+  * Date Created: 2025-08-15 
+  * Homepage: 
+  * Contact: gx12358@gmail.com
+*/
+import { ref as $, defineComponent as Ce, createVNode as s, Teleport as De, Transition as pe, withDirectives as we, Fragment as ue, cloneVNode as ot, vShow as ye, toRef as H, reactive as it, computed as b, watch as J, onMounted as Re, onUnmounted as at, mergeProps as le, watchEffect as lt, nextTick as rt } from "vue";
+import { CloseOutlined as st, LeftOutlined as ut, RightOutlined as ct, SwapOutlined as Me, ZoomOutOutlined as dt, ZoomInOutlined as ft, RotateRightOutlined as vt, RotateLeftOutlined as gt, EyeOutlined as mt } from "@ant-design/icons-vue";
+import { getTransitionProps as Se, Keyframe as de, useStyle as ht, mergeToken as pt, unit as ee, FastColor as wt, useProStyle as yt } from "@gx-design-vue/pro-provider";
+import { classNames as X, getPrefixCls as Ne, isNumber as Pe, getSlotVNode as Z, isArray as St, getSlot as re, isInContainer as Ct, isString as xt, getScrollContainer as It } from "@gx-design-vue/pro-utils";
+import { useWindowSize as Xe, isClient as Q, useThrottleFn as bt, useEventListener as ze } from "@vueuse/core";
+import { isEqual as Lt, cloneDeep as $t, omit as Ye, fromPairs as Mt } from "lodash-es";
+import { useState as ne, useEffect as xe, useMergedState as zt } from "@gx-design-vue/pro-hooks";
+import { TinyColor as F } from "@ctrl/tinycolor";
+const te = {
+  infinite: {
+    type: Boolean,
+    default: !0
+  },
+  zIndex: {
+    type: Number,
+    default: 2e3
+  },
+  current: {
+    type: Number,
+    default: 0
+  },
+  getContainer: {
+    type: String
+  }
+}, je = {
+  preview: {
+    type: [Object, Boolean],
+    default: !0
+  },
+  src: {
+    type: String,
+    default: ""
+  },
+  alt: {
+    type: String,
+    default: ""
+  },
+  loading: {
+    type: String
+  },
+  fit: {
+    type: String,
+    default: "contain"
+  },
+  crossOrigin: {
+    type: String
+  },
+  lazy: Boolean,
+  scrollContainer: {
+    type: [String, Object]
+  },
+  placeholder: {
+    type: [Function, Object, Boolean],
+    default: () => {
+    }
+  },
+  fallback: {
+    type: [Function, Object],
+    default: () => {
+    }
+  },
+  onLoad: {
+    type: Function
+  },
+  onError: {
+    type: Function
+  },
+  onClick: {
+    type: Function
+  },
+  imageStyle: {
+    type: Object,
+    default: () => ({})
+  },
+  imageClass: String,
+  size: Number,
+  width: Number,
+  height: Number,
+  zIndex: te.zIndex,
+  getContainer: te.getContainer
+}, G = {
+  urls: {
+    type: Array,
+    default: () => []
+  },
+  open: {
+    type: Boolean,
+    default: !1
+  },
+  scaleStep: {
+    type: Number,
+    default: 0.5
+  },
+  minScale: {
+    type: Number,
+    default: 0.32
+  },
+  maxScale: {
+    type: Number,
+    default: 32
+  },
+  movable: {
+    type: Boolean,
+    default: !0
+  },
+  disabled: Boolean,
+  zIndex: te.zIndex,
+  current: te.current,
+  infinite: te.infinite,
+  getContainer: je.getContainer,
+  onHideOnClickModal: {
+    type: Boolean,
+    default: !0
+  },
+  countRender: [Function, Array, Object],
+  icons: {
+    type: Object,
+    default: () => ({})
+  },
+  onTransform: Function,
+  onOpenChange: Function,
+  "onUpdate:open": Function
+};
+let Be = (e) => setTimeout(e, 16), Fe = (e) => clearTimeout(e);
+typeof window < "u" && "requestAnimationFrame" in window && (Be = (e) => window.requestAnimationFrame(e), Fe = (e) => window.cancelAnimationFrame(e));
+let Oe = 0;
+const Ie = /* @__PURE__ */ new Map();
+function ke(e) {
+  Ie.delete(e);
 }
-function Fe(e, t = 1) {
-  Me += 1;
-  const o = Me;
+function He(e, t = 1) {
+  Oe += 1;
+  const o = Oe;
   function i(n) {
     if (n === 0)
-      Be(o), e();
+      ke(o), e();
     else {
-      const r = Ye(() => {
+      const r = Be(() => {
         i(n - 1);
       });
-      Ce.set(o, r);
+      Ie.set(o, r);
     }
   }
   return i(t), o;
 }
-Fe.cancel = (e) => {
-  const t = Ce.get(e);
-  return Be(t), je(t);
+He.cancel = (e) => {
+  const t = Ie.get(e);
+  return ke(t), Fe(t);
 };
-const ie = {
+const ae = {
   x: 0,
   y: 0,
   rotate: 0,
@@ -40,12 +166,12 @@ const ie = {
   flipX: !1,
   flipY: !1
 };
-function Et(e, t, o, i) {
-  const n = $(null), r = $([]), [c, p] = ne(ie), g = (m) => {
-    p(ie), Mt(ie, c.value) || i?.({ transform: ie, action: m });
+function Ot(e, t, o, i) {
+  const n = $(null), r = $([]), [c, p] = ne(ae), v = (m) => {
+    p(ae), Lt(ae, c.value) || i?.({ transform: ae, action: m });
   }, d = (m, C) => {
-    n.value === null && (r.value = [], n.value = Fe(() => {
-      let x = zt(c.value);
+    n.value === null && (r.value = [], n.value = He(() => {
+      let x = $t(c.value);
       r.value.forEach((a) => {
         x = { ...x, ...a };
       }), n.value = null, i?.({ transform: x, action: C }), p(x);
@@ -56,17 +182,17 @@ function Et(e, t, o, i) {
   };
   return {
     transform: c,
-    resetTransform: g,
+    resetTransform: v,
     updateTransform: d,
     dispatchZoomChange: (m, C, x, a, l) => {
-      const { width: w, height: h, offsetWidth: y, offsetHeight: S, offsetLeft: L, offsetTop: A } = e.value;
+      const { width: w, height: h, offsetWidth: y, offsetHeight: S, offsetLeft: L, offsetTop: T } = e.value;
       let M = m, I = c.value.scale * m;
       I > o.value ? (I = o.value, M = o.value / c.value.scale) : I < t.value && (I = l ? I : t.value, M = I / c.value.scale);
-      const F = x ?? innerWidth / 2, W = a ?? innerHeight / 2, R = M - 1, z = R * w * 0.5, N = R * h * 0.5, Y = R * (F - c.value.x - L), _ = R * (W - c.value.y - A);
+      const k = x ?? innerWidth / 2, W = a ?? innerHeight / 2, R = M - 1, z = R * w * 0.5, N = R * h * 0.5, Y = R * (k - c.value.x - L), _ = R * (W - c.value.y - T);
       let j = c.value.x - (Y - z), B = c.value.y - (_ - N);
       if (m < 1 && I === 1) {
-        const E = y * I, v = S * I, { width: P, height: O } = Pe();
-        E <= P.value && v <= O.value && (j = 0, B = 0);
+        const A = y * I, f = S * I, { width: P, height: E } = Xe();
+        A <= P.value && f <= E.value && (j = 0, B = 0);
       }
       d({
         x: j,
@@ -76,23 +202,23 @@ function Et(e, t, o, i) {
     }
   };
 }
-function Dt(e, t) {
+function Tt(e, t) {
   process.env.NODE_ENV !== "production" && console !== void 0 && console.error(`Warning: ${t}`);
 }
-let ke = !1;
+let Ze = !1;
 try {
   const e = Object.defineProperty({}, "passive", {
     get() {
-      ke = !0;
+      Ze = !0;
     }
   });
   window.addEventListener("testPassive", null, e), window.removeEventListener("testPassive", null, e);
 } catch {
 }
-function q(e, t, o, i) {
+function V(e, t, o, i) {
   if (e && e.addEventListener) {
     let n = i;
-    n === void 0 && ke && (t === "touchstart" || t === "touchmove" || t === "wheel") && (n = { passive: !1 }), e.addEventListener(t, o, n);
+    n === void 0 && Ze && (t === "touchstart" || t === "touchmove" || t === "wheel") && (n = { passive: !1 }), e.addEventListener(t, o, n);
   }
   return {
     remove: () => {
@@ -100,8 +226,8 @@ function q(e, t, o, i) {
     }
   };
 }
-const K = 1, Rt = 1;
-function ze(e, t, o, i) {
+const q = 1, At = 1;
+function Te(e, t, o, i) {
   const n = t + o, r = (o - i) / 2;
   if (o > i) {
     if (t > 0)
@@ -118,30 +244,30 @@ function ze(e, t, o, i) {
     };
   return {};
 }
-function He(e, t, o, i) {
-  const { width: n, height: r } = Pe();
+function We(e, t, o, i) {
+  const { width: n, height: r } = Xe();
   let c = null;
   return e <= n.value && t <= r.value ? c = {
     x: 0,
     y: 0
   } : (e > n.value || t > r.value) && (c = {
-    ...ze("x", o, e, n.value),
-    ...ze("y", i, t, r.value)
+    ...Te("x", o, e, n.value),
+    ...Te("y", i, t, r.value)
   }), c;
 }
-function Nt(e, t, o, i, n, r, c) {
-  const [p, g] = ne(!1), d = $({
+function Et(e, t, o, i, n, r, c) {
+  const [p, v] = ne(!1), d = $({
     diffX: 0,
     diffY: 0,
     transformX: 0,
     transformY: 0
-  }), f = (a) => {
+  }), g = (a) => {
     !t || a.button !== 0 || (a.preventDefault(), a.stopPropagation(), d.value = {
       diffX: a.pageX - n.value.x,
       diffY: a.pageY - n.value.y,
       transformX: n.value.x,
       transformY: n.value.y
-    }, g(!0));
+    }, v(!0));
   }, m = (a) => {
     o && p.value && r({
       x: a.pageX - d.value.diffX,
@@ -149,28 +275,28 @@ function Nt(e, t, o, i, n, r, c) {
     }, "move");
   }, C = () => {
     if (o && p.value) {
-      g(!1);
+      v(!1);
       const { transformX: a, transformY: l } = d.value;
       if (!(n.value.x !== a && n.value.y !== l))
         return;
-      const h = e.value.offsetWidth * n.value.scale, y = e.value.offsetHeight * n.value.scale, { left: S, top: L } = e.value.getBoundingClientRect(), A = n.value.rotate % 180 !== 0, M = He(A ? y : h, A ? h : y, S, L);
+      const h = e.value.offsetWidth * n.value.scale, y = e.value.offsetHeight * n.value.scale, { left: S, top: L } = e.value.getBoundingClientRect(), T = n.value.rotate % 180 !== 0, M = We(T ? y : h, T ? h : y, S, L);
       M && r({ ...M }, "dragRebound");
     }
   }, x = (a) => {
     if (!o || a.deltaY === 0)
       return;
-    const l = Math.abs(a.deltaY / 100), w = Math.min(l, Rt);
-    let h = K + w * i.value;
-    a.deltaY > 0 && (h = K / h), c(h, "wheel", a.clientX, a.clientY);
+    const l = Math.abs(a.deltaY / 100), w = Math.min(l, At);
+    let h = q + w * i.value;
+    a.deltaY > 0 && (h = q / h), c(h, "wheel", a.clientX, a.clientY);
   };
-  return Se(() => {
+  return xe(() => {
     let a, l, w, h;
     if (t) {
-      w = q(window, "mouseup", C, !1), h = q(window, "mousemove", m, !1);
+      w = V(window, "mouseup", C, !1), h = V(window, "mousemove", m, !1);
       try {
-        window.top !== window.self && (a = q(window.top, "mouseup", C, !1), l = q(window.top, "mousemove", m, !1));
+        window.top !== window.self && (a = V(window.top, "mouseup", C, !1), l = V(window.top, "mousemove", m, !1));
       } catch (y) {
-        Dt(!1, `[rc-image] ${y}`);
+        Tt(!1, `[rc-image] ${y}`);
       }
     }
     return () => {
@@ -178,29 +304,29 @@ function Nt(e, t, o, i, n, r, c) {
     };
   }, [o, p, () => n.value.x, () => n.value.y, () => n.value.rotate, t]), {
     isMoving: p,
-    onMouseDown: f,
+    onMouseDown: g,
     onMouseMove: m,
     onMouseUp: C,
     onWheel: x
   };
 }
-function se(e, t) {
+function ce(e, t) {
   const o = e.x - t.x, i = e.y - t.y;
   return Math.hypot(o, i);
 }
-function Pt(e, t, o, i) {
-  const n = se(e, o), r = se(t, i);
+function Dt(e, t, o, i) {
+  const n = ce(e, o), r = ce(t, i);
   if (n === 0 && r === 0)
     return [e.x, e.y];
-  const c = n / (n + r), p = e.x + c * (t.x - e.x), g = e.y + c * (t.y - e.y);
-  return [p, g];
+  const c = n / (n + r), p = e.x + c * (t.x - e.x), v = e.y + c * (t.y - e.y);
+  return [p, v];
 }
-function Xt(e, t, o, i, n, r, c) {
-  const [p, g] = ne(!1), d = $({
+function Rt(e, t, o, i, n, r, c) {
+  const [p, v] = ne(!1), d = $({
     point1: { x: 0, y: 0 },
     point2: { x: 0, y: 0 },
     eventType: "none"
-  }), f = (a) => {
+  }), g = (a) => {
     d.value = {
       ...d.value,
       ...a
@@ -208,13 +334,13 @@ function Xt(e, t, o, i, n, r, c) {
   }, m = (a) => {
     if (!t.value)
       return;
-    a.stopPropagation(), g(!0);
+    a.stopPropagation(), v(!0);
     const { touches: l = [] } = a;
-    l.length > 1 ? f({
+    l.length > 1 ? g({
       point1: { x: l[0].clientX, y: l[0].clientY },
       point2: { x: l[1].clientX, y: l[1].clientY },
       eventType: "touchZoom"
-    }) : f({
+    }) : g({
       point1: {
         x: l[0].clientX - n.value.x,
         y: l[0].clientY - n.value.y
@@ -230,8 +356,8 @@ function Xt(e, t, o, i, n, r, c) {
       }, L = {
         x: l[1].clientX,
         y: l[1].clientY
-      }, [A, M] = Pt(w, h, S, L), I = se(S, L) / se(w, h);
-      c(I, "touchZoom", A, M, !0), f({
+      }, [T, M] = Dt(w, h, S, L), I = ce(S, L) / ce(w, h);
+      c(I, "touchZoom", T, M, !0), g({
         point1: S,
         point2: L,
         eventType: "touchZoom"
@@ -239,18 +365,18 @@ function Xt(e, t, o, i, n, r, c) {
     } else y === "move" && (r({
       x: l[0].clientX - w.x,
       y: l[0].clientY - w.y
-    }, "move"), f({ eventType: "move" }));
+    }, "move"), g({ eventType: "move" }));
   }, x = () => {
     if (!o.value)
       return;
-    if (p && g(!1), f({ eventType: "none" }), i.value > n.value.scale)
+    if (p && v(!1), g({ eventType: "none" }), i.value > n.value.scale)
       return r({ x: 0, y: 0, scale: i.value }, "touchZoom");
-    const a = e.value.offsetWidth * n.value.scale, l = e.value.offsetHeight * n.value.scale, { left: w, top: h } = e.value.getBoundingClientRect(), y = n.value.rotate % 180 !== 0, S = He(y ? l : a, y ? a : l, w, h);
+    const a = e.value.offsetWidth * n.value.scale, l = e.value.offsetHeight * n.value.scale, { left: w, top: h } = e.value.getBoundingClientRect(), y = n.value.rotate % 180 !== 0, S = We(y ? l : a, y ? a : l, w, h);
     S && r({ ...S }, "dragRebound");
   };
-  return Se(() => {
+  return xe(() => {
     let a;
-    return o.value && t.value && (a = q(window, "touchmove", (l) => l.preventDefault(), {
+    return o.value && t.value && (a = V(window, "touchmove", (l) => l.preventDefault(), {
       passive: !1
     })), () => {
       a?.remove();
@@ -262,121 +388,7 @@ function Xt(e, t, o, i, n, r, c) {
     onTouchEnd: x
   };
 }
-const te = {
-  infinite: {
-    type: Boolean,
-    default: !0
-  },
-  zIndex: {
-    type: Number,
-    default: 2e3
-  },
-  current: {
-    type: Number,
-    default: 0
-  },
-  getContainer: {
-    type: String
-  }
-}, Ze = {
-  preview: {
-    type: [Object, Boolean],
-    default: !0
-  },
-  src: {
-    type: String,
-    default: ""
-  },
-  alt: {
-    type: String,
-    default: ""
-  },
-  loading: {
-    type: String
-  },
-  fit: {
-    type: String,
-    default: "contain"
-  },
-  crossOrigin: {
-    type: String
-  },
-  lazy: Boolean,
-  scrollContainer: {
-    type: [String, Object]
-  },
-  placeholder: {
-    type: [Function, Object, Boolean],
-    default: () => {
-    }
-  },
-  fallback: {
-    type: [Function, Object],
-    default: () => {
-    }
-  },
-  onLoad: {
-    type: Function
-  },
-  onError: {
-    type: Function
-  },
-  onClick: {
-    type: Function
-  },
-  imageStyle: {
-    type: Object,
-    default: () => ({})
-  },
-  imageClass: String,
-  size: Number,
-  width: Number,
-  height: Number,
-  zIndex: te.zIndex,
-  getContainer: te.getContainer
-}, V = {
-  urls: {
-    type: Array,
-    default: () => []
-  },
-  open: {
-    type: Boolean,
-    default: !1
-  },
-  scaleStep: {
-    type: Number,
-    default: 0.5
-  },
-  minScale: {
-    type: Number,
-    default: 0.32
-  },
-  maxScale: {
-    type: Number,
-    default: 32
-  },
-  movable: {
-    type: Boolean,
-    default: !0
-  },
-  disabled: Boolean,
-  zIndex: te.zIndex,
-  current: te.current,
-  infinite: te.infinite,
-  getContainer: Ze.getContainer,
-  onHideOnClickModal: {
-    type: Boolean,
-    default: !0
-  },
-  countRender: [Function, Array, Object],
-  icons: {
-    type: Object,
-    default: () => ({})
-  },
-  onTransform: Function,
-  onOpenChange: Function,
-  "onUpdate:open": Function
-}, Yt = /* @__PURE__ */ ye({
+const Nt = /* @__PURE__ */ Ce({
   name: "Operations",
   inheritAttrs: !1,
   props: {
@@ -393,11 +405,11 @@ const te = {
     showProgress: Boolean,
     prefixCls: String,
     hashId: String,
-    zIndex: V.zIndex,
-    icons: V.icons,
-    infinite: V.infinite,
-    getContainer: V.getContainer,
-    countRender: V.countRender,
+    zIndex: G.zIndex,
+    icons: G.icons,
+    infinite: G.infinite,
+    getContainer: G.getContainer,
+    countRender: G.countRender,
     tools: Array,
     onClose: Function,
     onActive: Function
@@ -411,12 +423,12 @@ const te = {
         prefixCls: o,
         hashId: i,
         tools: n
-      } = e, r = we(`${e.prefixCls}-fade`), c = `${o}-operations-operation`, p = `${o}-operations-icon`;
-      return s(Ae, {
+      } = e, r = Se(`${e.prefixCls}-fade`), c = `${o}-operations-operation`, p = `${o}-operations-icon`;
+      return s(De, {
         to: e.getContainer || "body"
       }, {
-        default: () => [s(me, r, {
-          default: () => [he(s("div", {
+        default: () => [s(pe, r, {
+          default: () => [we(s("div", {
             class: X(`${o}-operations-wrapper`, i),
             style: {
               zIndex: e.zIndex
@@ -424,55 +436,55 @@ const te = {
           }, [e.icons?.close === null ? null : s("button", {
             class: `${o}-close ${i}`,
             onClick: e.onClose
-          }, [e.icons?.close || s(ut, null, null)]), e.showSwitch && s(re, null, [s("div", {
+          }, [e.icons?.close || s(st, null, null)]), e.showSwitch && s(ue, null, [s("div", {
             class: X(`${o}-switch-left ${i}`, {
               [`${o}-switch-left-disabled`]: e.infinite ? !1 : e.current === 0
             }),
-            onClick: (g) => t(g, -1)
-          }, [e.icons?.left || s(ct, null, null)]), s("div", {
+            onClick: (v) => t(v, -1)
+          }, [e.icons?.left || s(ut, null, null)]), s("div", {
             class: X(`${o}-switch-right ${i}`, {
               [`${o}-switch-right-disabled`]: e.infinite ? !1 : e.current === e.count - 1
             }),
-            onClick: (g) => t(g, 1)
-          }, [e.icons?.right || s(dt, null, null)])]), s("div", {
+            onClick: (v) => t(v, 1)
+          }, [e.icons?.right || s(ct, null, null)])]), s("div", {
             class: `${o}-footer ${i}`
           }, [e.showProgress && s("div", {
             class: `${o}-progress`
           }, [e.countRender ? e.countRender(e.current + 1, e.count) : `${e.current + 1} / ${e.count}`]), s("div", {
             class: `${e.prefixCls}-operations`
           }, [n?.map(({
-            icon: g,
+            icon: v,
             onClick: d,
-            type: f,
+            type: g,
             disabled: m
           }) => s("div", {
             class: X(c, {
               [`${e.prefixCls}-operations-operation-disabled`]: m && m?.value
             }),
             onClick: d,
-            key: f
-          }, [it(g, {
+            key: g
+          }, [ot(v, {
             class: p
-          })]))])])]), [[pe, e.open]])]
+          })]))])])]), [[ye, e.open]])]
         })]
       });
     };
   }
-}), jt = new ue("viewFadeIn", {
+}), Pt = new de("viewFadeIn", {
   "0%": {
     opacity: 0
   },
   "100%": {
     opacity: 1
   }
-}), Bt = new ue("viewFadeOut", {
+}), Xt = new de("viewFadeOut", {
   "0%": {
     opacity: 1
   },
   "100%": {
     opacity: 0
   }
-}), Ft = new ue("viewZoomBadgeIn", {
+}), Yt = new de("viewZoomBadgeIn", {
   "0%": {
     transform: "scale(0)",
     opacity: 0
@@ -481,7 +493,7 @@ const te = {
     transform: "scale(1)",
     opacity: 1
   }
-}), kt = new ue("viewZoomBadgeOut", {
+}), jt = new de("viewZoomBadgeOut", {
   "0%": {
     transform: "scale(1)"
   },
@@ -489,11 +501,11 @@ const te = {
     transform: "scale(0)",
     opacity: 0
   }
-}), Oe = (e) => ({
+}), Ae = (e) => ({
   position: e || "absolute",
   inset: 0
 });
-function fe(e) {
+function ge(e) {
   return {
     position: e,
     top: 0,
@@ -502,8 +514,8 @@ function fe(e) {
     insetInlineStart: 0
   };
 }
-const Ht = (e) => {
-  const { previewCls: t, modalMaskBg: o, marginXL: i, margin: n, colorTextLightSolid: r, previewOperationColorDisabled: c, previewOperationHoverColor: p, motionDurationSlow: g, iconCls: d } = e, f = new Z(o).setAlpha(0.1), m = f.clone().setAlpha(0.2), C = new Z(o).setAlpha(0.06);
+const Bt = (e) => {
+  const { previewCls: t, modalMaskBg: o, marginXL: i, margin: n, colorTextLightSolid: r, previewOperationColorDisabled: c, previewOperationHoverColor: p, motionDurationSlow: v, iconCls: d } = e, g = new F(o).setAlpha(0.1), m = g.clone().setAlpha(0.2), C = new F(o).setAlpha(0.5), x = new F(o).setAlpha(0.03);
   return {
     [`${t}-footer`]: {
       position: "fixed",
@@ -532,7 +544,7 @@ const Ht = (e) => {
       alignItems: "center",
       justifyContent: "center",
       color: r,
-      backgroundColor: f.toRgbString(),
+      backgroundColor: g.toRgbString(),
       borderRadius: e.borderRadiusLG,
       backdropFilter: "saturate(180%) blur(10px)",
       width: e.sizeXL,
@@ -540,7 +552,7 @@ const Ht = (e) => {
       outline: 0,
       border: 0,
       cursor: "pointer",
-      transition: `all ${g}`,
+      transition: `all ${v}`,
       "&:hover": {
         backgroundColor: m.toRgbString()
       },
@@ -553,9 +565,10 @@ const Ht = (e) => {
       alignItems: "center",
       gap: e.sizeXXS,
       padding: e.paddingXXS,
-      backgroundColor: f.toRgbString(),
+      border: `1px solid ${e.colorBorderSecondary}`,
+      backgroundColor: C.toRgbString(),
       borderRadius: e.borderRadiusLG,
-      backdropFilter: "saturate(180%) blur(10px)",
+      backdropFilter: "saturate(150%) blur(10px)",
       "&-operation": {
         display: "flex",
         alignItems: "center",
@@ -565,13 +578,13 @@ const Ht = (e) => {
         cursor: "pointer",
         color: r,
         borderRadius: e.borderRadiusSM,
-        transition: `all ${g}`,
+        transition: `all ${v}`,
         userSelect: "none",
         [`&:not(${t}-operations-operation-disabled):hover > ${d}`]: {
           color: p
         },
         "&:hover": {
-          backgroundColor: C.toRgbString()
+          backgroundColor: x.toRgbString()
         },
         "&-disabled": {
           color: c,
@@ -586,8 +599,8 @@ const Ht = (e) => {
       }
     }
   };
-}, Zt = (e) => {
-  const { modalMaskBg: t, iconCls: o, previewOperationColorDisabled: i, previewCls: n, zIndexPopup: r, motionDurationSlow: c, colorTextLightSolid: p } = e, g = new Z(t).setAlpha(0.1), d = g.clone().setAlpha(0.2);
+}, Ft = (e) => {
+  const { modalMaskBg: t, iconCls: o, previewOperationColorDisabled: i, previewCls: n, zIndexPopup: r, motionDurationSlow: c, colorTextLightSolid: p } = e, v = new F(t).setAlpha(0.1), d = v.clone().setAlpha(0.2);
   return {
     [`${n}-switch-left, ${n}-switch-right`]: {
       position: "fixed",
@@ -602,7 +615,7 @@ const Ht = (e) => {
       height: e.imagePreviewSwitchSize,
       marginTop: e.calc(e.imagePreviewSwitchSize).mul(-1).div(2).equal(),
       color: p,
-      background: g.toRgbString(),
+      background: v.toRgbString(),
       transform: "translateY(-50%)",
       cursor: "pointer",
       transition: `all ${c}`,
@@ -631,7 +644,7 @@ const Ht = (e) => {
       insetInlineEnd: e.marginSM
     }
   };
-}, Wt = (e) => {
+}, kt = (e) => {
   const { motionEaseOut: t, motionDurationSlow: o } = e;
   return {
     [e.componentCls]: {
@@ -639,28 +652,28 @@ const Ht = (e) => {
       textAlign: "center",
       pointerEvents: "none",
       "&-root": {
-        ...fe("fixed"),
+        ...ge("fixed"),
         zIndex: e.zIndexPopup,
         overflow: "auto",
         outline: 0,
         WebkitOverflowScrolling: "touch"
       },
       "&-wrap": {
-        ...fe("fixed"),
+        ...ge("fixed"),
         zIndex: e.zIndexPopup,
         overflow: "auto",
         outline: 0,
         WebkitOverflowScrolling: "touch"
       },
       "&-mask": {
-        ...fe("fixed"),
+        ...ge("fixed"),
         zIndex: e.zIndexPopupBase,
         height: "100%",
         backgroundColor: e.colorBgMask,
-        backdropFilter: "blur(2px)"
+        backdropFilter: "blur(8px)"
       },
       "&-body": {
-        ...Oe(),
+        ...Ae(),
         overflow: "hidden"
       },
       "&-img": {
@@ -672,7 +685,7 @@ const Ht = (e) => {
         transition: `transform ${o} ${t} 0s`,
         userSelect: "none",
         "&-wrapper": {
-          ...Oe(),
+          ...Ae(),
           transition: `transform ${o} ${t} 0s`,
           display: "flex",
           justifyContent: "center",
@@ -698,19 +711,19 @@ const Ht = (e) => {
         }
       },
       "&-mask-zoom-appear, &-mask-zoom-enter": {
-        animationName: jt,
+        animationName: Pt,
         animationDuration: e.motionDurationSlow,
         animationTimingFunction: "linear",
         userSelect: "none"
       },
       "&-mask-zoom-leave": {
-        animationName: Bt,
+        animationName: Xt,
         animationDuration: e.motionDurationSlow,
         animationTimingFunction: "linear",
         pointerEvents: "none"
       },
       "&-zoom-appear, &-zoom-enter": {
-        animationName: Ft,
+        animationName: Yt,
         opacity: 0,
         animationTimingFunction: e.motionEaseOutCirc,
         animationFillMode: "both",
@@ -722,7 +735,7 @@ const Ht = (e) => {
         animationPlayState: "running"
       },
       "&-zoom-leave": {
-        animationName: kt,
+        animationName: jt,
         animationDuration: e.motionDurationSlow,
         animationTimingFunction: e.motionEaseInOutCirc,
         animationFillMode: "both"
@@ -740,28 +753,28 @@ const Ht = (e) => {
       zIndex: e.calc(e.zIndexPopup).add(1).equal(),
       width: "100%"
     },
-    "&": [Ht(e), Zt(e)]
+    "&": [Bt(e), Ft(e)]
   };
 };
-function _t(e) {
-  return pt("ImageViewer", (t) => {
-    const o = wt(t, {
+function Ht(e) {
+  return ht("ImageViewer", (t) => {
+    const o = pt(t, {
       zIndexPopup: t.zIndexPopupBase + 80,
-      previewOperationColor: new Z(t.colorTextLightSolid).setAlpha(0.65).toRgbString(),
-      previewOperationHoverColor: new Z(t.colorTextLightSolid).setAlpha(0.85).toRgbString(),
-      previewOperationColorDisabled: new Z(t.colorTextLightSolid).setAlpha(0.25).toRgbString(),
+      previewOperationColor: new F(t.colorTextLightSolid).setAlpha(0.65).toRgbString(),
+      previewOperationHoverColor: new F(t.colorTextLightSolid).setAlpha(0.85).toRgbString(),
+      previewOperationColorDisabled: new F(t.colorTextLightSolid).setAlpha(0.25).toRgbString(),
       imagePreviewSwitchSize: t.sizeXL,
-      modalMaskBg: new Z("#000").setAlpha(0.45).toRgbString(),
+      modalMaskBg: new F("#000").setAlpha(0.45).toRgbString(),
       // FIXME: Shared Token
       previewOperationSize: t.fontSizeIcon * 1.5,
       // FIXME: fontSizeIconLG
       iconCls: ".anticon",
       previewCls: t.componentCls
     });
-    return [Wt(o)];
+    return [kt(o)];
   }, e);
 }
-const ve = {
+const me = {
   /**
    * ESC
    */
@@ -776,18 +789,18 @@ const ve = {
    * RIGHT
    */
   RIGHT: 39
-}, G = {
-  rotateLeft: s(mt, null, null),
-  rotateRight: s(gt, null, null),
-  zoomIn: s(vt, null, null),
-  zoomOut: s(ft, null, null),
-  flipX: s(Le, null, null),
-  flipY: s(Le, {
+}, U = {
+  rotateLeft: s(gt, null, null),
+  rotateRight: s(vt, null, null),
+  zoomIn: s(ft, null, null),
+  zoomOut: s(dt, null, null),
+  flipX: s(Me, null, null),
+  flipY: s(Me, {
     rotate: 90
   }, null)
-}, We = ["close", "left", "right", "rotateRight", "rotateRight", "zoomOut", "flipX", "flipY", "rotateLeft"], Ut = /* @__PURE__ */ ye({
+}, Zt = /* @__PURE__ */ Ce({
   name: "GImagePreview",
-  props: V,
+  props: G,
   inheritAttrs: !1,
   slots: Object,
   emits: {
@@ -800,178 +813,178 @@ const ve = {
     expose: o,
     slots: i
   }) => {
-    const n = De({
+    const n = Ne({
       suffixCls: "image-view"
     }), {
       wrapSSR: r,
       hashId: c
-    } = _t(n), [p, g, d] = At(e.open, {
-      value: k(e, "open"),
+    } = Ht(n), [p, v, d] = zt(e.open, {
+      value: H(e, "open"),
       onChange: (u) => {
         e.onOpenChange?.(u), t("update:open", u);
       }
-    }), [f, m] = ne(!1), [C, x] = ne(!0), a = $(), {
+    }), [g, m] = ne(!1), [C, x] = ne(!0), a = $(), {
       transform: l,
       resetTransform: w,
       updateTransform: h,
       dispatchZoomChange: y
-    } = Et(a, k(e, "minScale"), k(e, "maxScale"), e.onTransform), {
+    } = Ot(a, H(e, "minScale"), H(e, "maxScale"), e.onTransform), {
       isMoving: S,
       onMouseDown: L,
-      onWheel: A
-    } = Nt(a, k(e, "movable"), d, k(e, "scaleStep"), l, h, y), {
+      onWheel: T
+    } = Et(a, H(e, "movable"), d, H(e, "scaleStep"), l, h, y), {
       isTouching: M,
       onTouchStart: I,
-      onTouchMove: F,
+      onTouchMove: k,
       onTouchEnd: W
-    } = Xt(a, k(e, "movable"), d, k(e, "minScale"), l, h, y);
-    Se(() => {
+    } = Rt(a, H(e, "movable"), d, H(e, "minScale"), l, h, y);
+    xe(() => {
       C.value || x(!0);
     }, [C]);
-    const R = $(null), z = $(e.current), N = at(/* @__PURE__ */ new Map()), Y = b(() => new Map(Array.from(N).map(([u, {
-      url: T
-    }]) => [u, T]))), _ = b(() => Y.value.get(z.value)), j = b(() => Y.value.size), B = b(() => Array.from(Y.value.keys())), E = b(() => B.value.indexOf(z.value)), v = b(() => j.value > 1), P = b(() => j.value >= 1);
+    const R = $(null), z = $(e.current), N = it(/* @__PURE__ */ new Map()), Y = b(() => new Map(Array.from(N).map(([u, {
+      url: O
+    }]) => [u, O]))), _ = b(() => Y.value.get(z.value)), j = b(() => Y.value.size), B = b(() => Array.from(Y.value.keys())), A = b(() => B.value.indexOf(z.value)), f = b(() => j.value > 1), P = b(() => j.value >= 1);
     J(d, (u) => {
-      u && (f.value = !0);
+      u && (g.value = !0);
     });
-    const O = (u) => {
+    const E = (u) => {
       z.value = u;
     };
     J(() => e.current, (u) => {
-      Re(u) && O(u);
+      Pe(u) && E(u);
     });
-    function ce(u, T) {
+    function fe(u, O) {
       N.set(u, {
-        url: T,
+        url: O,
         loading: !0,
         canPreview: !1
       });
     }
-    const U = () => {
+    const K = () => {
       m(!1);
-    }, _e = () => {
+    }, oe = () => {
       w("close"), t("close");
-    }, Ue = (u) => {
-      S.value || R.value === u?.target && U();
-    }, Ge = () => {
+    }, _e = (u) => {
+      S.value || R.value === u?.target && K();
+    }, Ue = () => {
       const u = N.get(z.value);
       u && (u.loading = !1, u.canPreview = !0);
-    }, Ve = (u) => {
-      const T = N.get(z.value);
-      T && (T.loading = !1, T.canPreview = !1), u.target.alt = "加载失败";
-    }, xe = () => {
-      if (E.value > 0 || e.infinite) {
-        const u = E.value - 1 < 0 ? e.urls.length - 1 : E.value - 1;
-        O(B.value[u]), w("prev");
+    }, Ge = (u) => {
+      const O = N.get(z.value);
+      O && (O.loading = !1, O.canPreview = !1), u.target.alt = "加载失败";
+    }, be = () => {
+      if (A.value > 0 || e.infinite) {
+        const u = A.value - 1 < 0 ? e.urls.length - 1 : A.value - 1;
+        E(B.value[u]), w("prev");
       }
-    }, Ie = () => {
-      if (E.value < j.value - 1 || e.infinite) {
-        const u = E.value + 1 > e.urls.length - 1 ? 0 : E.value + 1;
-        O(B.value[u]), w("next");
+    }, Le = () => {
+      if (A.value < j.value - 1 || e.infinite) {
+        const u = A.value + 1 > e.urls.length - 1 ? 0 : A.value + 1;
+        E(B.value[u]), w("next");
       }
+    }, Ve = () => {
+      y(q + e.scaleStep, "zoomIn");
     }, qe = () => {
-      y(K + e.scaleStep, "zoomIn");
+      y(q / (q + e.scaleStep), "zoomOut");
     }, Ke = () => {
-      y(K / (K + e.scaleStep), "zoomOut");
-    }, Qe = () => {
       h({
         rotate: l.value.rotate + 90
       }, "rotateRight");
-    }, Je = () => {
+    }, Qe = () => {
       h({
         rotate: l.value.rotate - 90
       }, "rotateLeft");
-    }, et = () => {
+    }, Je = () => {
       h({
         flipX: !l.value.flipX
       }, "flipX");
-    }, tt = () => {
+    }, et = () => {
       h({
         flipY: !l.value.flipY
       }, "flipY");
-    }, be = [{
-      icon: H(i, e.icons, "flipY") || G.flipY,
-      onClick: tt,
+    }, $e = [{
+      icon: Z(i, e.icons, "flipY") || U.flipY,
+      onClick: et,
       type: "flipY"
     }, {
-      icon: H(i, e.icons, "flipX") || G.flipX,
-      onClick: et,
+      icon: Z(i, e.icons, "flipX") || U.flipX,
+      onClick: Je,
       type: "flipX"
     }, {
-      icon: H(i, e.icons, "rotateLeft") || G.rotateLeft,
-      onClick: Je,
+      icon: Z(i, e.icons, "rotateLeft") || U.rotateLeft,
+      onClick: Qe,
       type: "rotateLeft"
     }, {
-      icon: H(i, e.icons, "rotateRight") || G.rotateRight,
-      onClick: Qe,
+      icon: Z(i, e.icons, "rotateRight") || U.rotateRight,
+      onClick: Ke,
       type: "rotateRight"
     }, {
-      icon: H(i, e.icons, "zoomOut") || G.zoomOut,
-      onClick: () => Ke(),
+      icon: Z(i, e.icons, "zoomOut") || U.zoomOut,
+      onClick: () => qe(),
       type: "zoomOut",
       disabled: b(() => l.value.scale <= e.minScale)
     }, {
-      icon: H(i, e.icons, "zoomIn") || G.zoomIn,
-      onClick: () => qe(),
+      icon: Z(i, e.icons, "zoomIn") || U.zoomIn,
+      onClick: () => Ve(),
       type: "zoomIn",
       disabled: b(() => l.value.scale === e.maxScale)
-    }], nt = (u) => {
+    }], tt = (u) => {
       d.value && (l.value.scale !== 1 ? h({
         x: 0,
         y: 0,
         scale: 1
-      }, "doubleClick") : y(K + e.scaleStep, "doubleClick", u.clientX, u.clientY));
-    }, ot = (u) => {
-      u.keyCode === ve.ESC && U(), !(!d.value || !v.value) && (u.keyCode === ve.LEFT ? xe() : u.keyCode === ve.RIGHT && Ie());
+      }, "doubleClick") : y(q + e.scaleStep, "doubleClick", u.clientX, u.clientY));
+    }, nt = (u) => {
+      u.keyCode === me.ESC && K(), !(!d.value || !f.value) && (u.keyCode === me.LEFT ? be() : u.keyCode === me.RIGHT && Le());
     };
-    let de = () => {
+    let ve = () => {
     };
-    return Ee(() => {
+    return Re(() => {
       J(() => e.urls, (u) => {
-        Ct(u) && u.forEach((T, oe) => {
-          ce(oe, T);
+        St(u) && u.forEach((O, ie) => {
+          fe(ie, O);
         });
       }, {
         flush: "post",
         immediate: !0
       }), J([() => d.value, () => S.value], () => {
-        de();
-        const u = q(window, "keydown", ot, !1);
-        de = () => {
+        ve();
+        const u = V(window, "keydown", nt, !1);
+        ve = () => {
           u.remove();
         };
       }, {
         flush: "post",
         immediate: !0
       });
-    }), lt(() => {
-      de();
+    }), at(() => {
+      ve();
     }), o({
       setOpen: (u) => {
-        g(u), z.value = e.current;
+        v(u), z.value = e.current;
       }
     }), () => {
-      const u = we(`${n}-mask-zoom`), T = we(`${n}-zoom`), oe = {};
+      const u = Se(`${n}-mask-zoom`), O = Se(`${n}-zoom`), ie = {};
       for (const D in e.icons)
-        oe[D] = H(i, e.icons, D);
-      return r(s(re, null, [s(Ae, {
+        ie[D] = Z(i, e.icons, D);
+      return r(s(ue, null, [s(De, {
         to: e.getContainer || "body"
       }, {
-        default: () => [d.value && s(re, null, [s("div", {
+        default: () => [d.value && s(ue, null, [s("div", {
           class: `${n}-root ${c.value}`
-        }, [s(me, u, {
-          default: () => [he(s("div", {
+        }, [s(pe, u, {
+          default: () => [we(s("div", {
             class: `${n}-mask ${c.value}`
-          }, null), [[pe, d.value && f.value]])]
+          }, null), [[ye, d.value && g.value]])]
         }), s("div", {
           ref: R,
           tabindex: -1,
           class: [`${n}-wrap`, `${c.value}`, S.value && `${n}-moving`],
-          onClick: (D) => e.onHideOnClickModal && Ue(D)
-        }, [s(me, ae(T, {
-          onAfterLeave: () => _e()
+          onClick: (D) => e.onHideOnClickModal && _e(D)
+        }, [s(pe, le(O, {
+          onAfterLeave: () => oe()
         }), {
-          default: () => [he(s("div", {
+          default: () => [we(s("div", {
             role: "dialog",
             class: `${n} ${c.value}`
           }, [s("div", {
@@ -984,50 +997,50 @@ const ve = {
             ref: a,
             class: `${n}-img ${c.value}`,
             src: _.value,
-            onLoad: () => Ge(),
-            onError: (D) => Ve(D),
+            onLoad: () => Ue(),
+            onError: (D) => Ge(D),
             style: {
               transform: `translate3d(${l.value.x}px, ${l.value.y}px, 0) scale3d(${l.value.flipX ? "-" : ""}${l.value.scale}, ${l.value.flipY ? "-" : ""}${l.value.scale}, 1) rotate(${l.value.rotate}deg)`,
               transitionDuration: !C.value || M.value ? "0s" : void 0
             },
-            onWheel: A,
+            onWheel: T,
             onMousedown: L,
-            onDblclick: nt,
+            onDblclick: tt,
             onTouchstart: I,
-            onTouchmove: F,
+            onTouchmove: k,
             onTouchend: W,
             onTouchcancel: W
-          }, null)])])])]), [[pe, d.value && f.value]])]
+          }, null)])])])]), [[ye, d.value && g.value]])]
         })])])])]
-      }), d.value && f.value && s(Yt, {
-        open: d.value && f.value,
+      }), d.value && g.value && s(Nt, {
+        open: d.value && g.value,
         hashId: c.value,
         count: e.urls.length,
         current: z.value,
         zIndex: e.zIndex + 1,
         getContainer: e.getContainer,
         prefixCls: n,
-        icons: Xe(oe, be.map(({
+        icons: Ye(ie, $e.map(({
           type: D
         }) => D)),
-        tools: be,
+        tools: $e,
         infinite: e.infinite,
-        countRender: Ne(i, e, "countRenders"),
-        showSwitch: v.value,
+        countRender: re(i, e, "countRender"),
+        showSwitch: f.value,
         showProgress: P.value,
-        onClose: U,
-        onActive: (D) => D > 0 ? Ie() : xe()
+        onClose: K,
+        onActive: (D) => D > 0 ? Le() : be()
       }, null)]));
     };
   }
-}), ge = {
+}), he = {
   width: "100%",
   height: "100%"
-}, Gt = {
+}, Wt = {
   overflow: "hidden",
   whiteSpace: "nowrap",
   textOverflow: "ellipsis"
-}, Vt = (e) => {
+}, _t = (e) => {
   const { motionDurationSlow: t, paddingXXS: o, marginXXS: i, colorTextLightSolid: n } = e, r = ".anticon";
   return {
     position: "absolute",
@@ -1036,12 +1049,12 @@ const ve = {
     alignItems: "center",
     justifyContent: "center",
     color: n,
-    background: new yt("#000").setA(0.5).toRgbString(),
+    background: new wt("#000").setA(0.5).toRgbString(),
     cursor: "pointer",
     opacity: 0,
     transition: `opacity ${t}`,
     [`.${e.componentCls}-mask-info`]: {
-      ...Gt,
+      ...Wt,
       padding: `0 ${ee(o)}`,
       [r]: {
         marginInlineEnd: i,
@@ -1051,16 +1064,16 @@ const ve = {
       }
     }
   };
-}, qt = (e) => ({
+}, Ut = (e) => ({
   position: e || "absolute",
   inset: 0
-}), Kt = (e) => ({
+}), Gt = (e) => ({
   [e.componentCls]: {
     display: "inline-block",
     position: "relative",
     overflow: "hidden",
     [`${e.componentCls}-img`]: {
-      ...ge,
+      ...he,
       verticalAlign: "top",
       opacity: 1,
       [`&${e.componentCls}-img-preview`]: {
@@ -1068,7 +1081,7 @@ const ve = {
         cursor: "pointer"
       },
       "&-placeholder": {
-        ...ge,
+        ...he,
         backgroundColor: e.colorBgContainerDisabled,
         backgroundImage: "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=')",
         backgroundRepeat: "no-repeat",
@@ -1077,25 +1090,25 @@ const ve = {
       }
     },
     [`${e.componentCls}-error`]: {
-      ...ge,
+      ...he,
       display: "flex",
       alignItems: "center",
       justifyContent: "center"
     },
     [`${e.componentCls}-placeholder`]: {
-      ...qt()
+      ...Ut()
     },
     [`${e.componentCls}-mask`]: {
-      ...Vt(e)
+      ..._t(e)
     },
     [`${e.componentCls}-mask:hover`]: {
       opacity: 1
     }
   }
-}), Qt = (e) => typeof Element > "u" ? !1 : e instanceof Element;
-let Te = "";
-const Jt = [...We, "placeholder", "fallback"], le = /* @__PURE__ */ ye({
-  props: Ze,
+}), Vt = (e) => typeof Element > "u" ? !1 : e instanceof Element;
+let Ee = "";
+const se = /* @__PURE__ */ Ce({
+  props: je,
   name: "GImage",
   inheritAttrs: !1,
   emits: {
@@ -1109,88 +1122,92 @@ const Jt = [...We, "placeholder", "fallback"], le = /* @__PURE__ */ ye({
     emit: o,
     attrs: i
   }) {
-    const n = Q && "loading" in HTMLImageElement.prototype, r = De({
+    const n = Q && "loading" in HTMLImageElement.prototype, r = Ne({
       suffixCls: "image"
     }), {
       wrapSSR: c,
       hashId: p
-    } = St("Image", [Kt], r), g = $(), d = $(), f = $(!1), m = $(!0), C = $(!1), x = $(), a = $();
+    } = yt("Image", [Gt], r), v = $(), d = $(), g = $(!1), m = $(!0), C = $(!1), x = $(), a = $();
     let l, w;
     const h = b(() => e.loading === "eager" ? !1 : !n && e.loading === "lazy" || e.lazy), y = b(() => Q && e.fit ? {
       ...e.imageStyle,
       objectFit: e.fit
-    } : e.imageStyle), S = b(() => typeof e.preview == "object" ? e.preview : {}), L = b(() => !!e.preview), A = b(() => {
+    } : e.imageStyle), S = b(() => typeof e.preview == "object" ? e.preview : {}), L = b(() => !!e.preview), T = b(() => {
       const {
-        urls: v = [],
+        urls: f = [],
         current: P = 0
       } = S.value;
-      if (Re(P)) return v.length >= P ? P : 0;
-      const O = v.indexOf(e.src);
-      return O >= 0 ? O : 0;
-    }), M = b(() => ee(e.width)), I = b(() => ee(e.height)), F = () => {
-      Q && (m.value = !0, f.value = !1, d.value = e.src);
+      if (Pe(P)) return f.length >= P ? P : 0;
+      const E = f.indexOf(e.src);
+      return E >= 0 ? E : 0;
+    }), M = b(() => ee(e.width)), I = b(() => ee(e.height)), k = () => {
+      Q && (m.value = !0, g.value = !1, d.value = e.src);
     };
-    function W(v) {
-      f.value || (m.value = !1, f.value = !1, o("load", v));
+    function W(f) {
+      g.value || (m.value = !1, g.value = !1, o("load", f));
     }
-    function R(v) {
-      m.value = !1, f.value = !0, o("error", v);
+    function R(f) {
+      m.value = !1, g.value = !0, o("error", f);
     }
     function z() {
-      It(x.value, a.value) && (F(), _());
+      Ct(x.value, a.value) && (k(), _());
     }
-    const N = $t(z, 200, !0);
+    const N = bt(z, 200, !0);
     async function Y() {
       if (!Q) return;
-      await st();
+      await rt();
       const {
-        scrollContainer: v
+        scrollContainer: f
       } = e;
-      Qt(v) ? a.value = v : bt(v) && v !== "" ? a.value = document.querySelector(v) ?? void 0 : x.value && (a.value = Lt(x.value)), a.value && (l = $e(a, "scroll", N), setTimeout(() => z(), 100));
+      Vt(f) ? a.value = f : xt(f) && f !== "" ? a.value = document.querySelector(f) ?? void 0 : x.value && (a.value = It(x.value)), a.value && (l = ze(a, "scroll", N), setTimeout(() => z(), 100));
     }
     function _() {
       !Q || !a.value || !N || (l?.(), a.value = void 0);
     }
-    function j(v) {
-      if (v.ctrlKey) {
-        if (v.deltaY < 0)
-          return v.preventDefault(), !1;
-        if (v.deltaY > 0)
-          return v.preventDefault(), !1;
+    function j(f) {
+      if (f.ctrlKey) {
+        if (f.deltaY < 0)
+          return f.preventDefault(), !1;
+        if (f.deltaY > 0)
+          return f.preventDefault(), !1;
       }
     }
     const B = () => {
-      o("click"), !(m.value || f.value) && L.value && (w = $e("wheel", j, {
+      o("click"), !(m.value || g.value) && L.value && (w = ze("wheel", j, {
         passive: !1
-      }), Te = document.body.style.overflow, document.body.style.overflow = "hidden", C.value = !0);
-    }, E = () => {
-      w?.(), document.body.style.overflow = Te, C.value = !1;
+      }), Ee = document.body.style.overflow, document.body.style.overflow = "hidden", C.value = !0);
+    }, A = () => {
+      w?.(), document.body.style.overflow = Ee, C.value = !1;
     };
     return J(() => e.src, () => {
-      h.value ? (m.value = !0, f.value = !1, _(), Y()) : F();
-    }), rt(() => {
-      L.value && C.value ? g.value?.setOpen(!0) : g.value?.setOpen(!1);
-    }), Ee(() => {
-      h.value ? Y() : F();
+      h.value ? (m.value = !0, g.value = !1, _(), Y()) : k();
+    }), lt(() => {
+      L.value && C.value ? v.value?.setOpen(!0) : v.value?.setOpen(!1);
+    }), Re(() => {
+      h.value ? Y() : k();
     }), () => {
-      const v = Ot(Object.entries(i).filter(([U]) => /^(?:data-|on[A-Z])/i.test(U) || ["id", "style", "class"].includes(U))), P = Xe(i, Object.keys(v)), O = xt(Jt, t, e, {
+      const f = Mt(Object.entries(i).filter(([oe]) => /^(?:data-|on[A-Z])/i.test(oe) || ["id", "style", "class"].includes(oe))), P = Ye(i, Object.keys(f)), E = re(t, e, "fallback", {
         render: !0
-      }), ce = Ne(t, e, ["preview", "mask"], !0);
-      return c(s("div", ae({
+      }), fe = re(t, e, "mask", {
+        render: !0
+      }), K = re(t, e, "placeholder", {
+        render: !0
+      });
+      return c(s("div", le({
         class: {
           [`${p.value}`]: !0,
           [`${r}`]: !0
         },
         ref: x
-      }, v, {
+      }, f, {
         style: {
           width: ee(e.size) || M.value,
           height: ee(e.size) || I.value,
-          ...v.style || {}
+          ...f.style || {}
         }
-      }), [f.value ? s("div", {
+      }), [g.value ? s("div", {
         class: X(p.value, `${r}-error`)
-      }, [O.fallback]) : s(re, null, [s("img", ae(P, {
+      }, [E]) : s(ue, null, [s("img", le(P, {
         src: d.value,
         loading: e.loading,
         style: y.value,
@@ -1206,29 +1223,28 @@ const Jt = [...We, "placeholder", "fallback"], le = /* @__PURE__ */ ye({
         onError: R
       }), null), m.value && s("div", {
         class: X(`${r}-placeholder`, p.value)
-      }, [O.placeholder])]), S.value.mask && L.value && s("div", {
+      }, [K])]), S.value.mask && L.value && s("div", {
         class: X(`${r}-mask`, S.value.maskClass, p.value),
         style: {
-          display: v.style?.display === "none" ? "none" : void 0
+          display: f.style?.display === "none" ? "none" : void 0
         }
-      }, [ce || s("div", {
+      }, [fe || s("div", {
         class: X(`${r}-mask-info`, p.value)
-      }, [s(ht, null, null)])]), L.value && s(Ut, ae({
-        ref: g
-      }, S.value, Tt(O, We), {
+      }, [s(mt, null, null)])]), L.value && s(Zt, le({
+        ref: v
+      }, S.value, {
         urls: S.value.urls || [e.src],
-        current: A.value,
-        onClose: () => E()
-      }), null)]));
+        current: T.value,
+        onClose: () => A()
+      }), t)]));
     };
   }
 });
-le.isGImage = !0;
-le.install = (e) => (e.component(le.name, le), e);
+se.isGImage = !0;
+se.install = (e) => (e.component(se.name, se), e);
 export {
-  le as GImage,
-  Ut as GImagePreview,
+  se as GImage,
+  Zt as GImagePreview,
   te as baseProps,
-  le as default,
-  Ze as imageProps
+  je as imageProps
 };