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

package/dist/image.js

@@ -1,38 +1,38 @@
-import { ref as L, defineComponent as pe, createVNode as u, Teleport as Ee, Transition as ge, withDirectives as me, Fragment as re, cloneVNode as ot, vShow as he, toRef as F, reactive as it, computed as b, watch as K, onMounted as Te, onUnmounted as at, mergeProps as ae, watchEffect as lt, createTextVNode as rt, nextTick as st } from "vue";
-import { getTransitionProps as we, Keyframe as ue, useStyle as ut, mergeToken as ct, useProStyle as dt, unit as be } from "@gx-design-vue/pro-provider";
-import { classNames as Q, getPrefixCls as De, isNumber as Re, getSlotVNode as H, isArray as ft, getSlot as vt, getSlotsProps as gt, isInContainer as mt, isString as ht, getScrollContainer as wt } from "@gx-design-vue/pro-utils";
-import { useWindowSize as Ne, isClient as q, useThrottleFn as pt, useEventListener as $e } from "@vueuse/core";
-import { isEqual as yt, cloneDeep as St, omit as Pe, fromPairs as Ct, pick as xt } from "lodash-es";
-import { CloseOutlined as It, LeftOutlined as bt, RightOutlined as $t, SwapOutlined as ze, ZoomOutOutlined as zt, ZoomInOutlined as Lt, RotateRightOutlined as Mt, RotateLeftOutlined as Ot } from "@ant-design/icons-vue";
-import { useState as ee, useEffect as ye, useMergedState as At } from "@gx-design-vue/pro-hooks";
+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 Xe = (e) => setTimeout(e, 16), Ye = (e) => clearTimeout(e);
-typeof window < "u" && "requestAnimationFrame" in window && (Xe = (e) => window.requestAnimationFrame(e), Ye = (e) => window.cancelAnimationFrame(e));
-let Le = 0;
-const Se = /* @__PURE__ */ new Map();
-function je(e) {
-  Se.delete(e);
+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);
 }
-function Be(e, n = 1) {
-  Le += 1;
-  const o = Le;
-  function l(t) {
-    if (t === 0)
-      je(o), e();
+function Fe(e, t = 1) {
+  Me += 1;
+  const o = Me;
+  function i(n) {
+    if (n === 0)
+      Be(o), e();
     else {
-      const s = Xe(() => {
-        l(t - 1);
+      const r = Ye(() => {
+        i(n - 1);
       });
-      Se.set(o, s);
+      Ce.set(o, r);
     }
   }
-  return l(n), o;
+  return i(t), o;
 }
-Be.cancel = (e) => {
-  const n = Se.get(e);
-  return je(n), Ye(n);
+Fe.cancel = (e) => {
+  const t = Ce.get(e);
+  return Be(t), je(t);
 };
-const oe = {
+const ie = {
   x: 0,
   y: 0,
   rotate: 0,
@@ -40,229 +40,229 @@ const oe = {
   flipX: !1,
   flipY: !1
 };
-function Et(e, n, o, l) {
-  const t = L(null), s = L([]), [c, h] = ee(oe), y = (m) => {
-    h(oe), yt(oe, c.value) || l == null || l({ transform: oe, action: m });
-  }, d = (m, w) => {
-    t.value === null && (s.value = [], t.value = Be(() => {
-      let C = St(c.value);
-      s.value.forEach((a) => {
-        C = { ...C, ...a };
-      }), t.value = null, l == null || l({ transform: C, action: w }), h(C);
-    })), s.value.push({
+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 });
+  }, d = (m, C) => {
+    n.value === null && (r.value = [], n.value = Fe(() => {
+      let x = zt(c.value);
+      r.value.forEach((a) => {
+        x = { ...x, ...a };
+      }), n.value = null, i?.({ transform: x, action: C }), p(x);
+    })), r.value.push({
       ...c.value,
       ...m
     });
   };
   return {
     transform: c,
-    resetTransform: y,
+    resetTransform: g,
     updateTransform: d,
-    dispatchZoomChange: (m, w, C, a, i) => {
-      const { width: p, height: f, offsetWidth: S, offsetHeight: x, offsetLeft: $, offsetTop: T } = e.value;
+    dispatchZoomChange: (m, C, x, a, l) => {
+      const { width: w, height: h, offsetWidth: y, offsetHeight: S, offsetLeft: L, offsetTop: A } = e.value;
       let M = m, I = c.value.scale * m;
-      I > o.value ? (I = o.value, M = o.value / c.value.scale) : I < n.value && (I = i ? I : n.value, M = I / c.value.scale);
-      const B = C ?? innerWidth / 2, k = a ?? innerHeight / 2, N = M - 1, O = N * p * 0.5, P = N * f * 0.5, X = N * (B - c.value.x - $), W = N * (k - c.value.y - T);
-      let Y = c.value.x - (X - O), j = c.value.y - (W - P);
+      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);
+      let j = c.value.x - (Y - z), B = c.value.y - (_ - N);
       if (m < 1 && I === 1) {
-        const D = S * I, v = x * I, { width: A, height: E } = Ne();
-        D <= A.value && v <= E.value && (Y = 0, j = 0);
+        const E = y * I, v = S * I, { width: P, height: O } = Pe();
+        E <= P.value && v <= O.value && (j = 0, B = 0);
       }
       d({
-        x: Y,
-        y: j,
+        x: j,
+        y: B,
         scale: I
-      }, w);
+      }, C);
     }
   };
 }
-function Tt(e, n) {
-  process.env.NODE_ENV !== "production" && console !== void 0 && console.error(`Warning: ${n}`);
+function Dt(e, t) {
+  process.env.NODE_ENV !== "production" && console !== void 0 && console.error(`Warning: ${t}`);
 }
-let Fe = !1;
+let ke = !1;
 try {
   const e = Object.defineProperty({}, "passive", {
     get() {
-      Fe = !0;
+      ke = !0;
     }
   });
   window.addEventListener("testPassive", null, e), window.removeEventListener("testPassive", null, e);
 } catch {
 }
-function V(e, n, o, l) {
+function q(e, t, o, i) {
   if (e && e.addEventListener) {
-    let t = l;
-    t === void 0 && Fe && (n === "touchstart" || n === "touchmove" || n === "wheel") && (t = { passive: !1 }), e.addEventListener(n, o, t);
+    let n = i;
+    n === void 0 && ke && (t === "touchstart" || t === "touchmove" || t === "wheel") && (n = { passive: !1 }), e.addEventListener(t, o, n);
   }
   return {
     remove: () => {
-      e && e.removeEventListener && e.removeEventListener(n, o);
+      e && e.removeEventListener && e.removeEventListener(t, o);
     }
   };
 }
-const U = 1, Dt = 1;
-function Me(e, n, o, l) {
-  const t = n + o, s = (o - l) / 2;
-  if (o > l) {
-    if (n > 0)
+const K = 1, Rt = 1;
+function ze(e, t, o, i) {
+  const n = t + o, r = (o - i) / 2;
+  if (o > i) {
+    if (t > 0)
       return {
-        [e]: s
+        [e]: r
       };
-    if (n < 0 && t < l)
+    if (t < 0 && n < i)
       return {
-        [e]: -s
+        [e]: -r
       };
-  } else if (n < 0 || t > l)
+  } else if (t < 0 || n > i)
     return {
-      [e]: n < 0 ? s : -s
+      [e]: t < 0 ? r : -r
     };
   return {};
 }
-function He(e, n, o, l) {
-  const { width: t, height: s } = Ne();
+function He(e, t, o, i) {
+  const { width: n, height: r } = Pe();
   let c = null;
-  return e <= t.value && n <= s.value ? c = {
+  return e <= n.value && t <= r.value ? c = {
     x: 0,
     y: 0
-  } : (e > t.value || n > s.value) && (c = {
-    ...Me("x", o, e, t.value),
-    ...Me("y", l, n, s.value)
+  } : (e > n.value || t > r.value) && (c = {
+    ...ze("x", o, e, n.value),
+    ...ze("y", i, t, r.value)
   }), c;
 }
-function Rt(e, n, o, l, t, s, c) {
-  const [h, y] = ee(!1), d = L({
+function Nt(e, t, o, i, n, r, c) {
+  const [p, g] = ne(!1), d = $({
     diffX: 0,
     diffY: 0,
     transformX: 0,
     transformY: 0
-  }), g = (a) => {
-    !n || a.button !== 0 || (a.preventDefault(), a.stopPropagation(), d.value = {
-      diffX: a.pageX - t.value.x,
-      diffY: a.pageY - t.value.y,
-      transformX: t.value.x,
-      transformY: t.value.y
-    }, y(!0));
+  }), f = (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));
   }, m = (a) => {
-    o && h.value && s({
+    o && p.value && r({
       x: a.pageX - d.value.diffX,
       y: a.pageY - d.value.diffY
     }, "move");
-  }, w = () => {
-    if (o && h.value) {
-      y(!1);
-      const { transformX: a, transformY: i } = d.value;
-      if (!(t.value.x !== a && t.value.y !== i))
+  }, C = () => {
+    if (o && p.value) {
+      g(!1);
+      const { transformX: a, transformY: l } = d.value;
+      if (!(n.value.x !== a && n.value.y !== l))
         return;
-      const f = e.value.offsetWidth * t.value.scale, S = e.value.offsetHeight * t.value.scale, { left: x, top: $ } = e.value.getBoundingClientRect(), T = t.value.rotate % 180 !== 0, M = He(T ? S : f, T ? f : S, x, $);
-      M && s({ ...M }, "dragRebound");
+      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);
+      M && r({ ...M }, "dragRebound");
     }
-  }, C = (a) => {
+  }, x = (a) => {
     if (!o || a.deltaY === 0)
       return;
-    const i = Math.abs(a.deltaY / 100), p = Math.min(i, Dt);
-    let f = U + p * l.value;
-    a.deltaY > 0 && (f = U / f), c(f, "wheel", a.clientX, a.clientY);
+    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);
   };
-  return ye(() => {
-    let a, i, p, f;
-    if (n) {
-      p = V(window, "mouseup", w, !1), f = V(window, "mousemove", m, !1);
+  return Se(() => {
+    let a, l, w, h;
+    if (t) {
+      w = q(window, "mouseup", C, !1), h = q(window, "mousemove", m, !1);
       try {
-        window.top !== window.self && (a = V(window.top, "mouseup", w, !1), i = V(window.top, "mousemove", m, !1));
-      } catch (S) {
-        Tt(!1, `[rc-image] ${S}`);
+        window.top !== window.self && (a = q(window.top, "mouseup", C, !1), l = q(window.top, "mousemove", m, !1));
+      } catch (y) {
+        Dt(!1, `[rc-image] ${y}`);
       }
     }
     return () => {
-      p == null || p.remove(), f == null || f.remove(), a == null || a.remove(), i == null || i.remove();
+      w?.remove(), h?.remove(), a?.remove(), l?.remove();
     };
-  }, [o, h, () => t.value.x, () => t.value.y, () => t.value.rotate, n]), {
-    isMoving: h,
-    onMouseDown: g,
+  }, [o, p, () => n.value.x, () => n.value.y, () => n.value.rotate, t]), {
+    isMoving: p,
+    onMouseDown: f,
     onMouseMove: m,
-    onMouseUp: w,
-    onWheel: C
+    onMouseUp: C,
+    onWheel: x
   };
 }
-function se(e, n) {
-  const o = e.x - n.x, l = e.y - n.y;
-  return Math.hypot(o, l);
+function se(e, t) {
+  const o = e.x - t.x, i = e.y - t.y;
+  return Math.hypot(o, i);
 }
-function Nt(e, n, o, l) {
-  const t = se(e, o), s = se(n, l);
-  if (t === 0 && s === 0)
+function Pt(e, t, o, i) {
+  const n = se(e, o), r = se(t, i);
+  if (n === 0 && r === 0)
     return [e.x, e.y];
-  const c = t / (t + s), h = e.x + c * (n.x - e.x), y = e.y + c * (n.y - e.y);
-  return [h, 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];
 }
-function Pt(e, n, o, l, t, s, c) {
-  const [h, y] = ee(!1), d = L({
+function Xt(e, t, o, i, n, r, c) {
+  const [p, g] = ne(!1), d = $({
     point1: { x: 0, y: 0 },
     point2: { x: 0, y: 0 },
     eventType: "none"
-  }), g = (a) => {
+  }), f = (a) => {
     d.value = {
       ...d.value,
       ...a
     };
   }, m = (a) => {
-    if (!n.value)
+    if (!t.value)
       return;
-    a.stopPropagation(), y(!0);
-    const { touches: i = [] } = a;
-    i.length > 1 ? g({
-      point1: { x: i[0].clientX, y: i[0].clientY },
-      point2: { x: i[1].clientX, y: i[1].clientY },
+    a.stopPropagation(), g(!0);
+    const { touches: l = [] } = a;
+    l.length > 1 ? f({
+      point1: { x: l[0].clientX, y: l[0].clientY },
+      point2: { x: l[1].clientX, y: l[1].clientY },
       eventType: "touchZoom"
-    }) : g({
+    }) : f({
       point1: {
-        x: i[0].clientX - t.value.x,
-        y: i[0].clientY - t.value.y
+        x: l[0].clientX - n.value.x,
+        y: l[0].clientY - n.value.y
       },
       eventType: "move"
     });
-  }, w = (a) => {
-    const { touches: i = [] } = a, { point1: p, point2: f, eventType: S } = d.value;
-    if (i.length > 1 && S === "touchZoom") {
-      const x = {
-        x: i[0].clientX,
-        y: i[0].clientY
-      }, $ = {
-        x: i[1].clientX,
-        y: i[1].clientY
-      }, [T, M] = Nt(p, f, x, $), I = se(x, $) / se(p, f);
-      c(I, "touchZoom", T, M, !0), g({
-        point1: x,
-        point2: $,
+  }, C = (a) => {
+    const { touches: l = [] } = a, { point1: w, point2: h, eventType: y } = d.value;
+    if (l.length > 1 && y === "touchZoom") {
+      const S = {
+        x: l[0].clientX,
+        y: l[0].clientY
+      }, 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({
+        point1: S,
+        point2: L,
         eventType: "touchZoom"
       });
-    } else S === "move" && (s({
-      x: i[0].clientX - p.x,
-      y: i[0].clientY - p.y
-    }, "move"), g({ eventType: "move" }));
-  }, C = () => {
+    } else y === "move" && (r({
+      x: l[0].clientX - w.x,
+      y: l[0].clientY - w.y
+    }, "move"), f({ eventType: "move" }));
+  }, x = () => {
     if (!o.value)
       return;
-    if (h && y(!1), g({ eventType: "none" }), l.value > t.value.scale)
-      return s({ x: 0, y: 0, scale: l.value }, "touchZoom");
-    const a = e.value.offsetWidth * t.value.scale, i = e.value.offsetHeight * t.value.scale, { left: p, top: f } = e.value.getBoundingClientRect(), S = t.value.rotate % 180 !== 0, x = He(S ? i : a, S ? a : i, p, f);
-    x && s({ ...x }, "dragRebound");
+    if (p && g(!1), f({ 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);
+    S && r({ ...S }, "dragRebound");
   };
-  return ye(() => {
+  return Se(() => {
     let a;
-    return o.value && n.value && (a = V(window, "touchmove", (i) => i.preventDefault(), {
+    return o.value && t.value && (a = q(window, "touchmove", (l) => l.preventDefault(), {
       passive: !1
     })), () => {
-      a == null || a.remove();
+      a?.remove();
     };
-  }, [o, n]), {
-    isTouching: h,
+  }, [o, t]), {
+    isTouching: p,
     onTouchStart: m,
-    onTouchMove: w,
-    onTouchEnd: C
+    onTouchMove: C,
+    onTouchEnd: x
   };
 }
-const J = {
+const te = {
   infinite: {
     type: Boolean,
     default: !0
@@ -298,7 +298,7 @@ const J = {
     type: String,
     default: "contain"
   },
-  crossorigin: {
+  crossOrigin: {
     type: String
   },
   lazy: Boolean,
@@ -324,16 +324,17 @@ const J = {
   onClick: {
     type: Function
   },
-  wrapperStyle: {
+  imageStyle: {
     type: Object,
     default: () => ({})
   },
-  wrapperClass: String,
+  imageClass: String,
+  size: Number,
   width: Number,
   height: Number,
-  zIndex: J.zIndex,
-  getContainer: J.getContainer
-}, G = {
+  zIndex: te.zIndex,
+  getContainer: te.getContainer
+}, V = {
   urls: {
     type: Array,
     default: () => []
@@ -359,9 +360,9 @@ const J = {
     default: !0
   },
   disabled: Boolean,
-  zIndex: J.zIndex,
-  current: J.current,
-  infinite: J.infinite,
+  zIndex: te.zIndex,
+  current: te.current,
+  infinite: te.infinite,
   getContainer: Ze.getContainer,
   onHideOnClickModal: {
     type: Boolean,
@@ -375,7 +376,7 @@ const J = {
   onTransform: Function,
   onOpenChange: Function,
   "onUpdate:open": Function
-}, Xt = /* @__PURE__ */ pe({
+}, Yt = /* @__PURE__ */ ye({
   name: "Operations",
   inheritAttrs: !1,
   props: {
@@ -392,90 +393,86 @@ const J = {
     showProgress: Boolean,
     prefixCls: String,
     hashId: String,
-    zIndex: G.zIndex,
-    icons: G.icons,
-    infinite: G.infinite,
-    getContainer: G.getContainer,
-    countRender: G.countRender,
+    zIndex: V.zIndex,
+    icons: V.icons,
+    infinite: V.infinite,
+    getContainer: V.getContainer,
+    countRender: V.countRender,
     tools: Array,
     onClose: Function,
     onActive: Function
   },
   setup(e) {
-    const n = (o, l) => {
-      var t;
-      o.preventDefault(), o.stopPropagation(), (t = e.onActive) == null || t.call(e, l);
+    const t = (o, i) => {
+      o.preventDefault(), o.stopPropagation(), e.onActive?.(i);
     };
     return () => {
       const {
         prefixCls: o,
-        hashId: l,
-        tools: t
-      } = e, s = we(`${e.prefixCls}-fade`), c = `${o}-operations-operation`, h = `${o}-operations-icon`;
-      return u(Ee, {
+        hashId: i,
+        tools: n
+      } = e, r = we(`${e.prefixCls}-fade`), c = `${o}-operations-operation`, p = `${o}-operations-icon`;
+      return s(Ae, {
         to: e.getContainer || "body"
       }, {
-        default: () => [u(ge, s, {
-          default: () => {
-            var y, d, g, m;
-            return [me(u("div", {
-              class: Q(`${o}-operations-wrapper`, l),
-              style: {
-                zIndex: e.zIndex
-              }
-            }, [((y = e.icons) == null ? void 0 : y.close) === null ? null : u("button", {
-              class: `${o}-close ${l}`,
-              onClick: e.onClose
-            }, [((d = e.icons) == null ? void 0 : d.close) || u(It, null, null)]), e.showSwitch && u(re, null, [u("div", {
-              class: Q(`${o}-switch-left ${l}`, {
-                [`${o}-switch-left-disabled`]: e.infinite ? !1 : e.current === 0
-              }),
-              onClick: (w) => n(w, -1)
-            }, [((g = e.icons) == null ? void 0 : g.left) || u(bt, null, null)]), u("div", {
-              class: Q(`${o}-switch-right ${l}`, {
-                [`${o}-switch-right-disabled`]: e.infinite ? !1 : e.current === e.count - 1
-              }),
-              onClick: (w) => n(w, 1)
-            }, [((m = e.icons) == null ? void 0 : m.right) || u($t, null, null)])]), u("div", {
-              class: `${o}-footer ${l}`
-            }, [e.showProgress && u("div", {
-              class: `${o}-progress`
-            }, [e.countRender ? e.countRender(e.current + 1, e.count) : `${e.current + 1} / ${e.count}`]), u("div", {
-              class: `${e.prefixCls}-operations`
-            }, [t == null ? void 0 : t.map(({
-              icon: w,
-              onClick: C,
-              type: a,
-              disabled: i
-            }) => u("div", {
-              class: Q(c, {
-                [`${e.prefixCls}-operations-operation-disabled`]: i && (i == null ? void 0 : i.value)
-              }),
-              onClick: C,
-              key: a
-            }, [ot(w, {
-              class: h
-            })]))])])]), [[he, e.open]])];
-          }
+        default: () => [s(me, r, {
+          default: () => [he(s("div", {
+            class: X(`${o}-operations-wrapper`, i),
+            style: {
+              zIndex: e.zIndex
+            }
+          }, [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", {
+            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", {
+            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", {
+            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,
+            onClick: d,
+            type: f,
+            disabled: m
+          }) => s("div", {
+            class: X(c, {
+              [`${e.prefixCls}-operations-operation-disabled`]: m && m?.value
+            }),
+            onClick: d,
+            key: f
+          }, [it(g, {
+            class: p
+          })]))])])]), [[pe, e.open]])]
         })]
       });
     };
   }
-}), Yt = new ue("viewFadeIn", {
+}), jt = new ue("viewFadeIn", {
   "0%": {
     opacity: 0
   },
   "100%": {
     opacity: 1
   }
-}), jt = new ue("viewFadeOut", {
+}), Bt = new ue("viewFadeOut", {
   "0%": {
     opacity: 1
   },
   "100%": {
     opacity: 0
   }
-}), Bt = new ue("viewZoomBadgeIn", {
+}), Ft = new ue("viewZoomBadgeIn", {
   "0%": {
     transform: "scale(0)",
     opacity: 0
@@ -484,7 +481,7 @@ const J = {
     transform: "scale(1)",
     opacity: 1
   }
-}), Ft = new ue("viewZoomBadgeOut", {
+}), kt = new ue("viewZoomBadgeOut", {
   "0%": {
     transform: "scale(1)"
   },
@@ -506,11 +503,11 @@ function fe(e) {
   };
 }
 const Ht = (e) => {
-  const { previewCls: n, modalMaskBg: o, marginXL: l, margin: t, colorTextLightSolid: s, previewOperationColorDisabled: c, previewOperationHoverColor: h, motionDurationSlow: y, iconCls: d } = e, g = new Z(o).setAlpha(0.1), m = g.clone().setAlpha(0.2), w = new Z(o).setAlpha(0.06);
+  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);
   return {
-    [`${n}-footer`]: {
+    [`${t}-footer`]: {
       position: "fixed",
-      bottom: l,
+      bottom: i,
       left: {
         _skip_check_: !0,
         value: "50%"
@@ -521,21 +518,21 @@ const Ht = (e) => {
       color: e.previewOperationColor,
       transform: "translateX(-50%)"
     },
-    [`${n}-progress`]: {
-      marginBottom: t
+    [`${t}-progress`]: {
+      marginBottom: n
     },
-    [`${n}-close`]: {
+    [`${t}-close`]: {
       position: "fixed",
-      top: l,
+      top: i,
       right: {
         _skip_check_: !0,
-        value: l
+        value: i
       },
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      color: s,
-      backgroundColor: g.toRgbString(),
+      color: r,
+      backgroundColor: f.toRgbString(),
       borderRadius: e.borderRadiusLG,
       backdropFilter: "saturate(180%) blur(10px)",
       width: e.sizeXL,
@@ -543,7 +540,7 @@ const Ht = (e) => {
       outline: 0,
       border: 0,
       cursor: "pointer",
-      transition: `all ${y}`,
+      transition: `all ${g}`,
       "&:hover": {
         backgroundColor: m.toRgbString()
       },
@@ -551,12 +548,12 @@ const Ht = (e) => {
         fontSize: e.previewOperationSize
       }
     },
-    [`${n}-operations`]: {
+    [`${t}-operations`]: {
       display: "flex",
       alignItems: "center",
       gap: e.sizeXXS,
       padding: e.paddingXXS,
-      backgroundColor: g.toRgbString(),
+      backgroundColor: f.toRgbString(),
       borderRadius: e.borderRadiusLG,
       backdropFilter: "saturate(180%) blur(10px)",
       "&-operation": {
@@ -566,15 +563,15 @@ const Ht = (e) => {
         width: e.sizeXL + 4,
         height: e.sizeXL + 4,
         cursor: "pointer",
-        color: s,
+        color: r,
         borderRadius: e.borderRadiusSM,
-        transition: `all ${y}`,
+        transition: `all ${g}`,
         userSelect: "none",
-        [`&:not(${n}-operations-operation-disabled):hover > ${d}`]: {
-          color: h
+        [`&:not(${t}-operations-operation-disabled):hover > ${d}`]: {
+          color: p
         },
         "&:hover": {
-          backgroundColor: w.toRgbString()
+          backgroundColor: C.toRgbString()
         },
         "&-disabled": {
           color: c,
@@ -590,12 +587,12 @@ const Ht = (e) => {
     }
   };
 }, Zt = (e) => {
-  const { modalMaskBg: n, iconCls: o, previewOperationColorDisabled: l, previewCls: t, zIndexPopup: s, motionDurationSlow: c, colorTextLightSolid: h } = e, y = new Z(n).setAlpha(0.1), d = y.clone().setAlpha(0.2);
+  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);
   return {
-    [`${t}-switch-left, ${t}-switch-right`]: {
+    [`${n}-switch-left, ${n}-switch-right`]: {
       position: "fixed",
       insetBlockStart: "50%",
-      zIndex: e.calc(s).add(1).equal(),
+      zIndex: e.calc(r).add(1).equal(),
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
@@ -604,8 +601,8 @@ const Ht = (e) => {
       width: e.imagePreviewSwitchSize,
       height: e.imagePreviewSwitchSize,
       marginTop: e.calc(e.imagePreviewSwitchSize).mul(-1).div(2).equal(),
-      color: h,
-      background: y.toRgbString(),
+      color: p,
+      background: g.toRgbString(),
       transform: "translateY(-50%)",
       cursor: "pointer",
       transition: `all ${c}`,
@@ -615,7 +612,7 @@ const Ht = (e) => {
       },
       "&-disabled": {
         "&, &:hover": {
-          color: l,
+          color: i,
           background: "transparent",
           cursor: "not-allowed",
           [`> ${o}`]: {
@@ -627,15 +624,15 @@ const Ht = (e) => {
         fontSize: e.previewOperationSize
       }
     },
-    [`${t}-switch-left`]: {
+    [`${n}-switch-left`]: {
       insetInlineStart: e.marginSM
     },
-    [`${t}-switch-right`]: {
+    [`${n}-switch-right`]: {
       insetInlineEnd: e.marginSM
     }
   };
-}, kt = (e) => {
-  const { motionEaseOut: n, motionDurationSlow: o } = e;
+}, Wt = (e) => {
+  const { motionEaseOut: t, motionDurationSlow: o } = e;
   return {
     [e.componentCls]: {
       height: "100%",
@@ -672,11 +669,11 @@ const Ht = (e) => {
         verticalAlign: "middle",
         transform: "scale3d(1, 1, 1)",
         cursor: "grab",
-        transition: `transform ${o} ${n} 0s`,
+        transition: `transform ${o} ${t} 0s`,
         userSelect: "none",
         "&-wrapper": {
           ...Oe(),
-          transition: `transform ${o} ${n} 0s`,
+          transition: `transform ${o} ${t} 0s`,
           display: "flex",
           justifyContent: "center",
           alignItems: "center",
@@ -701,19 +698,19 @@ const Ht = (e) => {
         }
       },
       "&-mask-zoom-appear, &-mask-zoom-enter": {
-        animationName: Yt,
+        animationName: jt,
         animationDuration: e.motionDurationSlow,
         animationTimingFunction: "linear",
         userSelect: "none"
       },
       "&-mask-zoom-leave": {
-        animationName: jt,
+        animationName: Bt,
         animationDuration: e.motionDurationSlow,
         animationTimingFunction: "linear",
         pointerEvents: "none"
       },
       "&-zoom-appear, &-zoom-enter": {
-        animationName: Bt,
+        animationName: Ft,
         opacity: 0,
         animationTimingFunction: e.motionEaseOutCirc,
         animationFillMode: "both",
@@ -725,7 +722,7 @@ const Ht = (e) => {
         animationPlayState: "running"
       },
       "&-zoom-leave": {
-        animationName: Ft,
+        animationName: kt,
         animationDuration: e.motionDurationSlow,
         animationTimingFunction: e.motionEaseInOutCirc,
         animationFillMode: "both"
@@ -746,22 +743,22 @@ const Ht = (e) => {
     "&": [Ht(e), Zt(e)]
   };
 };
-function Wt(e) {
-  return ut("ImageViewer", (n) => {
-    const o = ct(n, {
-      zIndexPopup: n.zIndexPopupBase + 80,
-      previewOperationColor: new Z(n.colorTextLightSolid).setAlpha(0.65).toRgbString(),
-      previewOperationHoverColor: new Z(n.colorTextLightSolid).setAlpha(0.85).toRgbString(),
-      previewOperationColorDisabled: new Z(n.colorTextLightSolid).setAlpha(0.25).toRgbString(),
-      imagePreviewSwitchSize: n.sizeXL,
+function _t(e) {
+  return pt("ImageViewer", (t) => {
+    const o = wt(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(),
+      imagePreviewSwitchSize: t.sizeXL,
       modalMaskBg: new Z("#000").setAlpha(0.45).toRgbString(),
       // FIXME: Shared Token
-      previewOperationSize: n.fontSizeIcon * 1.5,
+      previewOperationSize: t.fontSizeIcon * 1.5,
       // FIXME: fontSizeIconLG
       iconCls: ".anticon",
-      previewCls: n.componentCls
+      previewCls: t.componentCls
     });
-    return [kt(o)];
+    return [Wt(o)];
   }, e);
 }
 const ve = {
@@ -779,18 +776,18 @@ const ve = {
    * RIGHT
    */
   RIGHT: 39
-}, _ = {
-  rotateLeft: u(Ot, null, null),
-  rotateRight: u(Mt, null, null),
-  zoomIn: u(Lt, null, null),
-  zoomOut: u(zt, null, null),
-  flipX: u(ze, null, null),
-  flipY: u(ze, {
+}, 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, {
     rotate: 90
   }, null)
-}, ke = ["close", "left", "right", "rotateRight", "rotateRight", "zoomOut", "flipX", "flipY", "rotateLeft"], _t = /* @__PURE__ */ pe({
+}, We = ["close", "left", "right", "rotateRight", "rotateRight", "zoomOut", "flipX", "flipY", "rotateLeft"], Ut = /* @__PURE__ */ ye({
   name: "GImagePreview",
-  props: G,
+  props: V,
   inheritAttrs: !1,
   slots: Object,
   emits: {
@@ -799,284 +796,305 @@ const ve = {
     "update:open": (e) => !0
   },
   setup: (e, {
-    emit: n,
+    emit: t,
     expose: o,
-    slots: l
+    slots: i
   }) => {
-    const t = De({
+    const n = De({
       suffixCls: "image-view"
     }), {
-      wrapSSR: s,
+      wrapSSR: r,
       hashId: c
-    } = Wt(t), [h, y, d] = At(e.open, {
-      value: F(e, "open"),
-      onChange: (r) => {
-        var z;
-        (z = e.onOpenChange) == null || z.call(e, r), n("update:open", r);
+    } = _t(n), [p, g, d] = At(e.open, {
+      value: k(e, "open"),
+      onChange: (u) => {
+        e.onOpenChange?.(u), t("update:open", u);
       }
-    }), [g, m] = ee(!1), [w, C] = ee(!0), a = L(), {
-      transform: i,
-      resetTransform: p,
-      updateTransform: f,
-      dispatchZoomChange: S
-    } = Et(a, F(e, "minScale"), F(e, "maxScale"), e.onTransform), {
-      isMoving: x,
-      onMouseDown: $,
-      onWheel: T
-    } = Rt(a, F(e, "movable"), d, F(e, "scaleStep"), i, f, S), {
+    }), [f, 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), {
+      isMoving: S,
+      onMouseDown: L,
+      onWheel: A
+    } = Nt(a, k(e, "movable"), d, k(e, "scaleStep"), l, h, y), {
       isTouching: M,
       onTouchStart: I,
-      onTouchMove: B,
-      onTouchEnd: k
-    } = Pt(a, F(e, "movable"), d, F(e, "minScale"), i, f, S);
-    ye(() => {
-      w.value || C(!0);
-    }, [w]);
-    const N = L(null), O = L(e.current), P = it(/* @__PURE__ */ new Map()), X = b(() => new Map(Array.from(P).map(([r, {
-      url: z
-    }]) => [r, z]))), W = b(() => X.value.get(O.value)), Y = b(() => X.value.size), j = b(() => Array.from(X.value.keys())), D = b(() => j.value.indexOf(O.value)), v = b(() => Y.value > 1), A = b(() => Y.value >= 1);
-    K(d, (r) => {
-      r && (g.value = !0);
+      onTouchMove: F,
+      onTouchEnd: W
+    } = Xt(a, k(e, "movable"), d, k(e, "minScale"), l, h, y);
+    Se(() => {
+      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);
+    J(d, (u) => {
+      u && (f.value = !0);
     });
-    const E = (r) => {
-      O.value = r;
+    const O = (u) => {
+      z.value = u;
     };
-    K(() => e.current, (r) => {
-      Re(r) && E(r);
+    J(() => e.current, (u) => {
+      Re(u) && O(u);
     });
-    function te(r, z) {
-      P.set(r, {
-        url: z,
+    function ce(u, T) {
+      N.set(u, {
+        url: T,
         loading: !0,
         canPreview: !1
       });
     }
-    const ce = () => {
+    const U = () => {
       m(!1);
-    }, We = () => {
-      p("close"), n("close");
-    }, _e = (r) => {
-      x.value || N.value === (r == null ? void 0 : r.target) && ce();
+    }, _e = () => {
+      w("close"), t("close");
+    }, Ue = (u) => {
+      S.value || R.value === u?.target && U();
     }, Ge = () => {
-      const r = P.get(O.value);
-      r && (r.loading = !1, r.canPreview = !0);
-    }, Ve = (r) => {
-      const z = P.get(O.value);
-      z && (z.loading = !1, z.canPreview = !1), r.target.alt = "加载失败";
-    }, Ce = () => {
-      if (D.value > 0 || e.infinite) {
-        const r = D.value - 1 < 0 ? e.urls.length - 1 : D.value - 1;
-        E(j.value[r]), p("prev");
-      }
+      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 (D.value < Y.value - 1 || e.infinite) {
-        const r = D.value + 1 > e.urls.length - 1 ? 0 : D.value + 1;
-        E(j.value[r]), p("next");
+      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");
+      }
+    }, 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");
       }
-    }, Ue = () => {
-      S(U + e.scaleStep, "zoomIn");
     }, qe = () => {
-      S(U / (U + e.scaleStep), "zoomOut");
+      y(K + e.scaleStep, "zoomIn");
     }, Ke = () => {
-      f({
-        rotate: i.value.rotate + 90
-      }, "rotateRight");
+      y(K / (K + e.scaleStep), "zoomOut");
     }, Qe = () => {
-      f({
-        rotate: i.value.rotate - 90
-      }, "rotateLeft");
+      h({
+        rotate: l.value.rotate + 90
+      }, "rotateRight");
     }, Je = () => {
-      f({
-        flipX: !i.value.flipX
-      }, "flipX");
+      h({
+        rotate: l.value.rotate - 90
+      }, "rotateLeft");
     }, et = () => {
-      f({
-        flipY: !i.value.flipY
+      h({
+        flipX: !l.value.flipX
+      }, "flipX");
+    }, tt = () => {
+      h({
+        flipY: !l.value.flipY
       }, "flipY");
-    }, Ie = [{
-      icon: H(l, e.icons, "flipY") || _.flipY,
-      onClick: et,
+    }, be = [{
+      icon: H(i, e.icons, "flipY") || G.flipY,
+      onClick: tt,
       type: "flipY"
     }, {
-      icon: H(l, e.icons, "flipX") || _.flipX,
-      onClick: Je,
+      icon: H(i, e.icons, "flipX") || G.flipX,
+      onClick: et,
       type: "flipX"
     }, {
-      icon: H(l, e.icons, "rotateLeft") || _.rotateLeft,
-      onClick: Qe,
+      icon: H(i, e.icons, "rotateLeft") || G.rotateLeft,
+      onClick: Je,
       type: "rotateLeft"
     }, {
-      icon: H(l, e.icons, "rotateRight") || _.rotateRight,
-      onClick: Ke,
+      icon: H(i, e.icons, "rotateRight") || G.rotateRight,
+      onClick: Qe,
       type: "rotateRight"
     }, {
-      icon: H(l, e.icons, "zoomOut") || _.zoomOut,
-      onClick: () => qe(),
+      icon: H(i, e.icons, "zoomOut") || G.zoomOut,
+      onClick: () => Ke(),
       type: "zoomOut",
-      disabled: b(() => i.value.scale <= e.minScale)
+      disabled: b(() => l.value.scale <= e.minScale)
     }, {
-      icon: H(l, e.icons, "zoomIn") || _.zoomIn,
-      onClick: () => Ue(),
+      icon: H(i, e.icons, "zoomIn") || G.zoomIn,
+      onClick: () => qe(),
       type: "zoomIn",
-      disabled: b(() => i.value.scale === e.maxScale)
-    }], tt = (r) => {
-      d.value && (i.value.scale !== 1 ? f({
+      disabled: b(() => l.value.scale === e.maxScale)
+    }], nt = (u) => {
+      d.value && (l.value.scale !== 1 ? h({
         x: 0,
         y: 0,
         scale: 1
-      }, "doubleClick") : S(U + e.scaleStep, "doubleClick", r.clientX, r.clientY));
-    }, nt = (r) => {
-      r.keyCode === ve.ESC && ce(), !(!d.value || !v.value) && (r.keyCode === ve.LEFT ? Ce() : r.keyCode === ve.RIGHT && xe());
+      }, "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());
     };
     let de = () => {
     };
-    return Te(() => {
-      K(() => e.urls, (r) => {
-        ft(r) && r.forEach((z, ne) => {
-          te(ne, z);
+    return Ee(() => {
+      J(() => e.urls, (u) => {
+        Ct(u) && u.forEach((T, oe) => {
+          ce(oe, T);
         });
       }, {
         flush: "post",
         immediate: !0
-      }), K([() => d.value, () => x.value], () => {
+      }), J([() => d.value, () => S.value], () => {
         de();
-        const r = V(window, "keydown", nt, !1);
+        const u = q(window, "keydown", ot, !1);
         de = () => {
-          r.remove();
+          u.remove();
         };
       }, {
         flush: "post",
         immediate: !0
       });
-    }), at(() => {
+    }), lt(() => {
       de();
     }), o({
-      setOpen: (r) => {
-        y(r), O.value = e.current;
+      setOpen: (u) => {
+        g(u), z.value = e.current;
       }
     }), () => {
-      const r = we(`${t}-mask-zoom`), z = we(`${t}-zoom`), ne = {};
-      for (const R in e.icons)
-        ne[R] = H(l, e.icons, R);
-      return s(u(re, null, [u(Ee, {
+      const u = we(`${n}-mask-zoom`), T = we(`${n}-zoom`), oe = {};
+      for (const D in e.icons)
+        oe[D] = H(i, e.icons, D);
+      return r(s(re, null, [s(Ae, {
         to: e.getContainer || "body"
       }, {
-        default: () => [d.value && u(re, null, [u("div", {
-          class: `${t}-root ${c.value}`
-        }, [u(ge, r, {
-          default: () => [me(u("div", {
-            class: `${t}-mask ${c.value}`
-          }, null), [[he, d.value && g.value]])]
-        }), u("div", {
-          ref: N,
+        default: () => [d.value && s(re, null, [s("div", {
+          class: `${n}-root ${c.value}`
+        }, [s(me, u, {
+          default: () => [he(s("div", {
+            class: `${n}-mask ${c.value}`
+          }, null), [[pe, d.value && f.value]])]
+        }), s("div", {
+          ref: R,
           tabindex: -1,
-          class: [`${t}-wrap`, `${c.value}`, x.value && `${t}-moving`],
-          onClick: (R) => e.onHideOnClickModal && _e(R)
-        }, [u(ge, ae(z, {
-          onAfterLeave: () => We()
+          class: [`${n}-wrap`, `${c.value}`, S.value && `${n}-moving`],
+          onClick: (D) => e.onHideOnClickModal && Ue(D)
+        }, [s(me, ae(T, {
+          onAfterLeave: () => _e()
         }), {
-          default: () => [me(u("div", {
+          default: () => [he(s("div", {
             role: "dialog",
-            class: `${t} ${c.value}`
-          }, [u("div", {
-            class: `${t}-content ${c.value}`
-          }, [u("div", {
-            class: `${t}-body ${c.value}`
-          }, [u("div", {
-            class: `${t}-img-wrapper ${c.value}`
-          }, [u("img", {
+            class: `${n} ${c.value}`
+          }, [s("div", {
+            class: `${n}-content ${c.value}`
+          }, [s("div", {
+            class: `${n}-body ${c.value}`
+          }, [s("div", {
+            class: `${n}-img-wrapper ${c.value}`
+          }, [s("img", {
             ref: a,
-            class: `${t}-img ${c.value}`,
-            src: W.value,
+            class: `${n}-img ${c.value}`,
+            src: _.value,
             onLoad: () => Ge(),
-            onError: (R) => Ve(R),
+            onError: (D) => Ve(D),
             style: {
-              transform: `translate3d(${i.value.x}px, ${i.value.y}px, 0) scale3d(${i.value.flipX ? "-" : ""}${i.value.scale}, ${i.value.flipY ? "-" : ""}${i.value.scale}, 1) rotate(${i.value.rotate}deg)`,
-              transitionDuration: !w.value || M.value ? "0s" : void 0
+              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: T,
-            onMousedown: $,
-            onDblclick: tt,
+            onWheel: A,
+            onMousedown: L,
+            onDblclick: nt,
             onTouchstart: I,
-            onTouchmove: B,
-            onTouchend: k,
-            onTouchcancel: k
-          }, null)])])])]), [[he, d.value && g.value]])]
+            onTouchmove: F,
+            onTouchend: W,
+            onTouchcancel: W
+          }, null)])])])]), [[pe, d.value && f.value]])]
         })])])])]
-      }), d.value && g.value && u(Xt, {
-        open: d.value && g.value,
+      }), d.value && f.value && s(Yt, {
+        open: d.value && f.value,
         hashId: c.value,
         count: e.urls.length,
-        current: O.value,
+        current: z.value,
         zIndex: e.zIndex + 1,
         getContainer: e.getContainer,
-        prefixCls: t,
-        icons: Pe(ne, Ie.map(({
-          type: R
-        }) => R)),
-        tools: Ie,
+        prefixCls: n,
+        icons: Xe(oe, be.map(({
+          type: D
+        }) => D)),
+        tools: be,
         infinite: e.infinite,
-        countRender: vt(l, e, "countRenders"),
+        countRender: Ne(i, e, "countRenders"),
         showSwitch: v.value,
-        showProgress: A.value,
-        onClose: ce,
-        onActive: (R) => R > 0 ? xe() : Ce()
+        showProgress: P.value,
+        onClose: U,
+        onActive: (D) => D > 0 ? Ie() : xe()
       }, null)]));
     };
   }
-}), ie = {
+}), ge = {
   width: "100%",
   height: "100%"
-}, Gt = () => ({
-  position: "absolute",
-  inset: 0,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  cursor: "pointer",
-  opacity: 0
-}), Vt = (e) => ({
+}, Gt = {
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  textOverflow: "ellipsis"
+}, Vt = (e) => {
+  const { motionDurationSlow: t, paddingXXS: o, marginXXS: i, colorTextLightSolid: n } = e, r = ".anticon";
+  return {
+    position: "absolute",
+    inset: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    color: n,
+    background: new yt("#000").setA(0.5).toRgbString(),
+    cursor: "pointer",
+    opacity: 0,
+    transition: `opacity ${t}`,
+    [`.${e.componentCls}-mask-info`]: {
+      ...Gt,
+      padding: `0 ${ee(o)}`,
+      [r]: {
+        marginInlineEnd: i,
+        svg: {
+          verticalAlign: "baseline"
+        }
+      }
+    }
+  };
+}, qt = (e) => ({
   position: e || "absolute",
   inset: 0
-}), Ut = (e) => ({
+}), Kt = (e) => ({
   [e.componentCls]: {
     display: "inline-block",
     position: "relative",
     overflow: "hidden",
-    "&-inner": {
-      ...ie,
+    [`${e.componentCls}-img`]: {
+      ...ge,
       verticalAlign: "top",
       opacity: 1,
-      [`&${e.componentCls}-inner-preview`]: {
+      [`&${e.componentCls}-img-preview`]: {
         userSelect: "none",
         cursor: "pointer"
+      },
+      "&-placeholder": {
+        ...ge,
+        backgroundColor: e.colorBgContainerDisabled,
+        backgroundImage: "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=')",
+        backgroundRepeat: "no-repeat",
+        backgroundPosition: "center center",
+        backgroundSize: "30%"
       }
     },
-    "&-wrapper": {
-      ...ie,
-      ...Vt()
-    },
-    "&-placeholder": {
-      ...ie,
-      backgroundColor: e.colorBgContainerDisabled,
-      backgroundImage: "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=')",
-      backgroundRepeat: "no-repeat",
-      backgroundPosition: "center center",
-      backgroundSize: "30%"
-    },
-    "&-error": {
-      ...ie,
+    [`${e.componentCls}-error`]: {
+      ...ge,
       display: "flex",
       alignItems: "center",
-      justifyContent: "center",
-      color: e.colorText,
-      backgroundColor: e.colorBgContainerDisabled
+      justifyContent: "center"
     },
-    "&-preview": Gt()
+    [`${e.componentCls}-placeholder`]: {
+      ...qt()
+    },
+    [`${e.componentCls}-mask`]: {
+      ...Vt(e)
+    },
+    [`${e.componentCls}-mask:hover`]: {
+      opacity: 1
+    }
   }
-}), qt = (e) => typeof Element > "u" ? !1 : e instanceof Element;
-let Ae = "";
-const Kt = [...ke, "fallback", "placeholder"], le = /* @__PURE__ */ pe({
+}), Qt = (e) => typeof Element > "u" ? !1 : e instanceof Element;
+let Te = "";
+const Jt = [...We, "placeholder", "fallback"], le = /* @__PURE__ */ ye({
   props: Ze,
   name: "GImage",
   inheritAttrs: !1,
@@ -1087,52 +1105,53 @@ const Kt = [...ke, "fallback", "placeholder"], le = /* @__PURE__ */ pe({
   },
   slots: Object,
   setup(e, {
-    slots: n,
+    slots: t,
     emit: o,
-    attrs: l
+    attrs: i
   }) {
-    const t = q && "loading" in HTMLImageElement.prototype, s = De({
+    const n = Q && "loading" in HTMLImageElement.prototype, r = De({
       suffixCls: "image"
     }), {
       wrapSSR: c,
-      hashId: h
-    } = dt("Image", [Ut], s), y = L(), d = L(), g = L(!1), m = L(!0), w = L(!1), C = L(), a = L();
-    let i, p;
-    const f = b(() => e.loading === "eager" ? !1 : !t && e.loading === "lazy" || e.lazy), S = b(() => q && e.fit ? {
+      hashId: p
+    } = St("Image", [Kt], r), g = $(), d = $(), f = $(!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
-    } : {}), x = b(() => typeof e.preview == "object" ? e.preview : {}), $ = b(() => !!e.preview), T = b(() => {
+    } : e.imageStyle), S = b(() => typeof e.preview == "object" ? e.preview : {}), L = b(() => !!e.preview), A = b(() => {
       const {
         urls: v = [],
-        current: A = 0
-      } = x.value;
-      if (Re(A)) return v.length >= A ? A : 0;
-      const E = v.indexOf(e.src);
-      return E >= 0 ? E : 0;
-    }), M = b(() => be(e.width)), I = b(() => be(e.height)), B = () => {
-      q && (m.value = !0, g.value = !1, d.value = e.src);
+        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);
     };
-    function k(v) {
-      m.value = !1, g.value = !1, o("load", v);
+    function W(v) {
+      f.value || (m.value = !1, f.value = !1, o("load", v));
     }
-    function N(v) {
-      m.value = !1, g.value = !0, o("error", v);
+    function R(v) {
+      m.value = !1, f.value = !0, o("error", v);
     }
-    function O() {
-      mt(C.value, a.value) && (B(), W());
+    function z() {
+      It(x.value, a.value) && (F(), _());
     }
-    const P = pt(O, 200, !0);
-    async function X() {
-      if (!q) return;
+    const N = $t(z, 200, !0);
+    async function Y() {
+      if (!Q) return;
       await st();
       const {
         scrollContainer: v
       } = e;
-      qt(v) ? a.value = v : ht(v) && v !== "" ? a.value = document.querySelector(v) ?? void 0 : C.value && (a.value = wt(C.value)), a.value && (i = $e(a, "scroll", P), setTimeout(() => O(), 100));
+      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));
     }
-    function W() {
-      !q || !a.value || !P || (i == null || i(), a.value = void 0);
+    function _() {
+      !Q || !a.value || !N || (l?.(), a.value = void 0);
     }
-    function Y(v) {
+    function j(v) {
       if (v.ctrlKey) {
         if (v.deltaY < 0)
           return v.preventDefault(), !1;
@@ -1140,61 +1159,66 @@ const Kt = [...ke, "fallback", "placeholder"], le = /* @__PURE__ */ pe({
           return v.preventDefault(), !1;
       }
     }
-    const j = () => {
-      o("click"), !(m.value || g.value) && $.value && (p = $e("wheel", Y, {
+    const B = () => {
+      o("click"), !(m.value || f.value) && L.value && (w = $e("wheel", j, {
         passive: !1
-      }), Ae = document.body.style.overflow, document.body.style.overflow = "hidden", w.value = !0);
-    }, D = () => {
-      p == null || p(), document.body.style.overflow = Ae, w.value = !1;
+      }), Te = document.body.style.overflow, document.body.style.overflow = "hidden", C.value = !0);
+    }, E = () => {
+      w?.(), document.body.style.overflow = Te, C.value = !1;
     };
-    return K(() => e.src, () => {
-      f.value ? (m.value = !0, g.value = !1, W(), X()) : B();
-    }), lt(() => {
-      var v, A;
-      $.value && w.value ? (v = y.value) == null || v.setOpen(!0) : (A = y.value) == null || A.setOpen(!1);
-    }), Te(() => {
-      f.value ? X() : B();
+    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();
     }), () => {
-      const v = Ct(Object.entries(l).filter(([te]) => /^(?:data-|on[A-Z])/i.test(te) || ["id", "style"].includes(te))), A = Pe(l, Object.keys(v)), E = gt(Kt, n, e, {
+      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, {
         render: !0
-      });
-      return c(u("div", ae({
+      }), ce = Ne(t, e, ["preview", "mask"], !0);
+      return c(s("div", ae({
         class: {
-          [`${h.value}`]: !0,
-          [`${s}`]: !0,
-          [`${l.class}`]: !!l.class
+          [`${p.value}`]: !0,
+          [`${r}`]: !0
         },
-        ref: C
-      }, v), [g.value ? E.fallback || u("div", {
-        "aria-hidden": "true",
-        class: `${s}-error ${h.value}`
-      }, [rt("加载失败")]) : u(re, null, [d.value !== void 0 && u("img", ae(A, {
+        ref: x
+      }, v, {
+        style: {
+          width: ee(e.size) || M.value,
+          height: ee(e.size) || I.value,
+          ...v.style || {}
+        }
+      }), [f.value ? s("div", {
+        class: X(p.value, `${r}-error`)
+      }, [O.fallback]) : s(re, null, [s("img", ae(P, {
         src: d.value,
         loading: e.loading,
-        style: S.value,
-        class: {
-          [`${h.value}`]: !0,
-          [`${s}-placeholder`]: m.value,
-          [`${s}-inner`]: !0,
-          [`${s}-inner-preview`]: $.value
-        },
-        crossorigin: e.crossorigin,
+        style: y.value,
+        class: X(p.value, e.imageClass, `${r}-img`, {
+          [`${r}-img-placeholder`]: e.placeholder === !0,
+          [`${r}-img-preview`]: L.value
+        }),
+        crossorigin: e.crossOrigin,
         width: M.value,
         height: I.value,
-        onClick: j,
-        onLoad: k,
-        onError: N
-      }), null), m.value && u("div", {
-        class: Q(`${s}-wrapper`, h.value)
-      }, [E.placeholder || u("div", {
-        "aria-hidden": "true",
-        class: `${s}-placeholder ${h.value}`
-      }, null)])]), $.value && u(_t, ae({
-        ref: y
-      }, x.value, xt(E, ke), {
-        urls: x.value.urls || [e.src],
-        current: T.value,
-        onClose: () => D()
+        onClick: B,
+        onLoad: W,
+        onError: R
+      }), null), m.value && s("div", {
+        class: X(`${r}-placeholder`, p.value)
+      }, [O.placeholder])]), 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
+        }
+      }, [ce || 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), {
+        urls: S.value.urls || [e.src],
+        current: A.value,
+        onClose: () => E()
       }), null)]));
     };
   }
@@ -1203,8 +1227,8 @@ le.isGImage = !0;
 le.install = (e) => (e.component(le.name, le), e);
 export {
   le as GImage,
-  _t as GImagePreview,
-  J as baseProps,
+  Ut as GImagePreview,
+  te as baseProps,
   le as default,
   Ze as imageProps
 };