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

package/dist/image.js

@@ -1,38 +1,38 @@
-import { ref as L, defineComponent as Se, createVNode as u, Teleport as Te, Transition as he, withDirectives as we, Fragment as se, cloneVNode as it, vShow as pe, toRef as k, reactive as at, computed as b, watch as J, onMounted as De, onUnmounted as lt, mergeProps as le, watchEffect as rt, nextTick as st } from "vue";
-import { CloseOutlined as ut, LeftOutlined as ct, RightOutlined as dt, SwapOutlined as ze, ZoomOutOutlined as ft, ZoomInOutlined as vt, RotateRightOutlined as gt, RotateLeftOutlined as mt, EyeOutlined as ht } from "@ant-design/icons-vue";
-import { getTransitionProps as ye, Keyframe as ce, useStyle as wt, mergeToken as pt, unit as ee, FastColor as yt, useProStyle as St } from "@gx-design-vue/pro-provider";
-import { classNames as X, getPrefixCls as Re, isNumber as Ne, getSlotVNode as H, isArray as Ct, getSlot as Pe, getSlotsProps as xt, isInContainer as It, isString as bt, getScrollContainer as $t } from "@gx-design-vue/pro-utils";
-import { useWindowSize as Xe, isClient as Q, useThrottleFn as zt, useEventListener as Le } from "@vueuse/core";
-import { isEqual as Lt, cloneDeep as Ot, omit as Ye, fromPairs as Mt, pick as At } from "lodash-es";
-import { useState as ne, useEffect as Ce, useMergedState as Et } 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 je = (e) => setTimeout(e, 16), Be = (e) => clearTimeout(e);
-typeof window < "u" && "requestAnimationFrame" in window && (je = (e) => window.requestAnimationFrame(e), Be = (e) => window.cancelAnimationFrame(e));
-let Oe = 0;
-const xe = /* @__PURE__ */ new Map();
-function Fe(e) {
-  xe.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 ke(e, n = 1) {
-  Oe += 1;
-  const o = Oe;
-  function l(t) {
-    if (t === 0)
-      Fe(o), e();
+function Fe(e, t = 1) {
+  Me += 1;
+  const o = Me;
+  function i(n) {
+    if (n === 0)
+      Be(o), e();
     else {
-      const r = je(() => {
-        l(t - 1);
+      const r = Ye(() => {
+        i(n - 1);
       });
-      xe.set(o, r);
+      Ce.set(o, r);
     }
   }
-  return l(n), o;
+  return i(t), o;
 }
-ke.cancel = (e) => {
-  const n = xe.get(e);
-  return Fe(n), Be(n);
+Fe.cancel = (e) => {
+  const t = Ce.get(e);
+  return Be(t), je(t);
 };
-const ae = {
+const ie = {
   x: 0,
   y: 0,
   rotate: 0,
@@ -40,15 +40,15 @@ const ae = {
   flipX: !1,
   flipY: !1
 };
-function Tt(e, n, o, l) {
-  const t = L(null), r = L([]), [c, h] = ne(ae), y = (m) => {
-    h(ae), Lt(ae, c.value) || l == null || l({ transform: ae, action: m });
-  }, d = (m, w) => {
-    t.value === null && (r.value = [], t.value = ke(() => {
-      let x = Ot(c.value);
+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 };
-      }), t.value = null, l == null || l({ transform: x, action: w }), h(x);
+      }), n.value = null, i?.({ transform: x, action: C }), p(x);
     })), r.value.push({
       ...c.value,
       ...m
@@ -56,209 +56,209 @@ function Tt(e, n, o, l) {
   };
   return {
     transform: c,
-    resetTransform: y,
+    resetTransform: g,
     updateTransform: d,
-    dispatchZoomChange: (m, w, x, a, i) => {
-      const { width: p, height: g, offsetWidth: S, offsetHeight: C, offsetLeft: $, offsetTop: T } = e.value;
-      let O = m, I = c.value.scale * m;
-      I > o.value ? (I = o.value, O = o.value / c.value.scale) : I < n.value && (I = i ? I : n.value, O = I / c.value.scale);
-      const F = x ?? innerWidth / 2, W = a ?? innerHeight / 2, N = O - 1, M = N * p * 0.5, P = N * g * 0.5, Y = N * (F - c.value.x - $), _ = N * (W - c.value.y - T);
-      let j = c.value.x - (Y - M), B = c.value.y - (_ - P);
+    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 < 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, f = C * I, { width: A, height: E } = Xe();
-        D <= A.value && f <= E.value && (j = 0, B = 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: j,
         y: B,
         scale: I
-      }, w);
+      }, C);
     }
   };
 }
-function Dt(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 He = !1;
+let ke = !1;
 try {
   const e = Object.defineProperty({}, "passive", {
     get() {
-      He = !0;
+      ke = !0;
     }
   });
   window.addEventListener("testPassive", null, e), window.removeEventListener("testPassive", null, e);
 } catch {
 }
-function q(e, n, o, l) {
+function q(e, t, o, i) {
   if (e && e.addEventListener) {
-    let t = l;
-    t === void 0 && He && (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 K = 1, Rt = 1;
-function Me(e, n, o, l) {
-  const t = n + o, r = (o - l) / 2;
-  if (o > l) {
-    if (n > 0)
+function ze(e, t, o, i) {
+  const n = t + o, r = (o - i) / 2;
+  if (o > i) {
+    if (t > 0)
       return {
         [e]: r
       };
-    if (n < 0 && t < l)
+    if (t < 0 && n < i)
       return {
         [e]: -r
       };
-  } else if (n < 0 || t > l)
+  } else if (t < 0 || n > i)
     return {
-      [e]: n < 0 ? r : -r
+      [e]: t < 0 ? r : -r
     };
   return {};
 }
-function Ze(e, n, o, l) {
-  const { width: t, height: r } = Xe();
+function He(e, t, o, i) {
+  const { width: n, height: r } = Pe();
   let c = null;
-  return e <= t.value && n <= r.value ? c = {
+  return e <= n.value && t <= r.value ? c = {
     x: 0,
     y: 0
-  } : (e > t.value || n > r.value) && (c = {
-    ...Me("x", o, e, t.value),
-    ...Me("y", l, n, r.value)
+  } : (e > n.value || t > r.value) && (c = {
+    ...ze("x", o, e, n.value),
+    ...ze("y", i, t, r.value)
   }), c;
 }
-function Nt(e, n, o, l, t, r, c) {
-  const [h, y] = ne(!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
-  }), v = (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 && r({
+    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 g = e.value.offsetWidth * t.value.scale, S = e.value.offsetHeight * t.value.scale, { left: C, top: $ } = e.value.getBoundingClientRect(), T = t.value.rotate % 180 !== 0, O = Ze(T ? S : g, T ? g : S, C, $);
-      O && r({ ...O }, "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");
     }
   }, x = (a) => {
     if (!o || a.deltaY === 0)
       return;
-    const i = Math.abs(a.deltaY / 100), p = Math.min(i, Rt);
-    let g = K + p * l.value;
-    a.deltaY > 0 && (g = K / g), c(g, "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 Ce(() => {
-    let a, i, p, g;
-    if (n) {
-      p = q(window, "mouseup", w, !1), g = q(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 = q(window.top, "mouseup", w, !1), i = q(window.top, "mousemove", m, !1));
-      } catch (S) {
-        Dt(!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(), g == null || g.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: v,
+  }, [o, p, () => n.value.x, () => n.value.y, () => n.value.rotate, t]), {
+    isMoving: p,
+    onMouseDown: f,
     onMouseMove: m,
-    onMouseUp: w,
+    onMouseUp: C,
     onWheel: x
   };
 }
-function ue(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 Pt(e, n, o, l) {
-  const t = ue(e, o), r = ue(n, l);
-  if (t === 0 && r === 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 + r), 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 Xt(e, n, o, l, t, r, c) {
-  const [h, y] = ne(!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"
-  }), v = (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 ? v({
-      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"
-    }) : v({
+    }) : 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: g, eventType: S } = d.value;
-    if (i.length > 1 && S === "touchZoom") {
-      const C = {
-        x: i[0].clientX,
-        y: i[0].clientY
-      }, $ = {
-        x: i[1].clientX,
-        y: i[1].clientY
-      }, [T, O] = Pt(p, g, C, $), I = ue(C, $) / ue(p, g);
-      c(I, "touchZoom", T, O, !0), v({
-        point1: C,
-        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" && (r({
-      x: i[0].clientX - p.x,
-      y: i[0].clientY - p.y
-    }, "move"), v({ eventType: "move" }));
+    } 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), v({ eventType: "none" }), l.value > t.value.scale)
-      return r({ 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: g } = e.value.getBoundingClientRect(), S = t.value.rotate % 180 !== 0, C = Ze(S ? i : a, S ? a : i, p, g);
-    C && r({ ...C }, "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 Ce(() => {
+  return Se(() => {
     let a;
-    return o.value && n.value && (a = q(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,
+    onTouchMove: C,
     onTouchEnd: x
   };
 }
@@ -278,7 +278,7 @@ const te = {
   getContainer: {
     type: String
   }
-}, We = {
+}, Ze = {
   preview: {
     type: [Object, Boolean],
     default: !0
@@ -363,7 +363,7 @@ const te = {
   zIndex: te.zIndex,
   current: te.current,
   infinite: te.infinite,
-  getContainer: We.getContainer,
+  getContainer: Ze.getContainer,
   onHideOnClickModal: {
     type: Boolean,
     default: !0
@@ -376,7 +376,7 @@ const te = {
   onTransform: Function,
   onOpenChange: Function,
   "onUpdate:open": Function
-}, Yt = /* @__PURE__ */ Se({
+}, Yt = /* @__PURE__ */ ye({
   name: "Operations",
   inheritAttrs: !1,
   props: {
@@ -403,80 +403,76 @@ const te = {
     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, r = ye(`${e.prefixCls}-fade`), c = `${o}-operations-operation`, h = `${o}-operations-icon`;
-      return u(Te, {
+        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(he, r, {
-          default: () => {
-            var y, d, v, m;
-            return [we(u("div", {
-              class: X(`${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(ut, null, null)]), e.showSwitch && u(se, null, [u("div", {
-              class: X(`${o}-switch-left ${l}`, {
-                [`${o}-switch-left-disabled`]: e.infinite ? !1 : e.current === 0
-              }),
-              onClick: (w) => n(w, -1)
-            }, [((v = e.icons) == null ? void 0 : v.left) || u(ct, null, null)]), u("div", {
-              class: X(`${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(dt, 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: x,
-              type: a,
-              disabled: i
-            }) => u("div", {
-              class: X(c, {
-                [`${e.prefixCls}-operations-operation-disabled`]: i && (i == null ? void 0 : i.value)
-              }),
-              onClick: x,
-              key: a
-            }, [it(w, {
-              class: h
-            })]))])])]), [[pe, 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]])]
         })]
       });
     };
   }
-}), jt = new ce("viewFadeIn", {
+}), jt = new ue("viewFadeIn", {
   "0%": {
     opacity: 0
   },
   "100%": {
     opacity: 1
   }
-}), Bt = new ce("viewFadeOut", {
+}), Bt = new ue("viewFadeOut", {
   "0%": {
     opacity: 1
   },
   "100%": {
     opacity: 0
   }
-}), Ft = new ce("viewZoomBadgeIn", {
+}), Ft = new ue("viewZoomBadgeIn", {
   "0%": {
     transform: "scale(0)",
     opacity: 0
@@ -485,7 +481,7 @@ const te = {
     transform: "scale(1)",
     opacity: 1
   }
-}), kt = new ce("viewZoomBadgeOut", {
+}), kt = new ue("viewZoomBadgeOut", {
   "0%": {
     transform: "scale(1)"
   },
@@ -493,11 +489,11 @@ const te = {
     transform: "scale(0)",
     opacity: 0
   }
-}), Ae = (e) => ({
+}), Oe = (e) => ({
   position: e || "absolute",
   inset: 0
 });
-function ve(e) {
+function fe(e) {
   return {
     position: e,
     top: 0,
@@ -507,11 +503,11 @@ function ve(e) {
   };
 }
 const Ht = (e) => {
-  const { previewCls: n, modalMaskBg: o, marginXL: l, margin: t, colorTextLightSolid: r, previewOperationColorDisabled: c, previewOperationHoverColor: h, motionDurationSlow: y, iconCls: d } = e, v = new Z(o).setAlpha(0.1), m = v.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%"
@@ -522,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: r,
-      backgroundColor: v.toRgbString(),
+      backgroundColor: f.toRgbString(),
       borderRadius: e.borderRadiusLG,
       backdropFilter: "saturate(180%) blur(10px)",
       width: e.sizeXL,
@@ -544,7 +540,7 @@ const Ht = (e) => {
       outline: 0,
       border: 0,
       cursor: "pointer",
-      transition: `all ${y}`,
+      transition: `all ${g}`,
       "&:hover": {
         backgroundColor: m.toRgbString()
       },
@@ -552,12 +548,12 @@ const Ht = (e) => {
         fontSize: e.previewOperationSize
       }
     },
-    [`${n}-operations`]: {
+    [`${t}-operations`]: {
       display: "flex",
       alignItems: "center",
       gap: e.sizeXXS,
       padding: e.paddingXXS,
-      backgroundColor: v.toRgbString(),
+      backgroundColor: f.toRgbString(),
       borderRadius: e.borderRadiusLG,
       backdropFilter: "saturate(180%) blur(10px)",
       "&-operation": {
@@ -569,13 +565,13 @@ const Ht = (e) => {
         cursor: "pointer",
         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,
@@ -591,9 +587,9 @@ const Ht = (e) => {
     }
   };
 }, Zt = (e) => {
-  const { modalMaskBg: n, iconCls: o, previewOperationColorDisabled: l, previewCls: t, zIndexPopup: r, 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(r).add(1).equal(),
@@ -605,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}`,
@@ -616,7 +612,7 @@ const Ht = (e) => {
       },
       "&-disabled": {
         "&, &:hover": {
-          color: l,
+          color: i,
           background: "transparent",
           cursor: "not-allowed",
           [`> ${o}`]: {
@@ -628,43 +624,43 @@ const Ht = (e) => {
         fontSize: e.previewOperationSize
       }
     },
-    [`${t}-switch-left`]: {
+    [`${n}-switch-left`]: {
       insetInlineStart: e.marginSM
     },
-    [`${t}-switch-right`]: {
+    [`${n}-switch-right`]: {
       insetInlineEnd: e.marginSM
     }
   };
 }, Wt = (e) => {
-  const { motionEaseOut: n, motionDurationSlow: o } = e;
+  const { motionEaseOut: t, motionDurationSlow: o } = e;
   return {
     [e.componentCls]: {
       height: "100%",
       textAlign: "center",
       pointerEvents: "none",
       "&-root": {
-        ...ve("fixed"),
+        ...fe("fixed"),
         zIndex: e.zIndexPopup,
         overflow: "auto",
         outline: 0,
         WebkitOverflowScrolling: "touch"
       },
       "&-wrap": {
-        ...ve("fixed"),
+        ...fe("fixed"),
         zIndex: e.zIndexPopup,
         overflow: "auto",
         outline: 0,
         WebkitOverflowScrolling: "touch"
       },
       "&-mask": {
-        ...ve("fixed"),
+        ...fe("fixed"),
         zIndex: e.zIndexPopupBase,
         height: "100%",
         backgroundColor: e.colorBgMask,
         backdropFilter: "blur(2px)"
       },
       "&-body": {
-        ...Ae(),
+        ...Oe(),
         overflow: "hidden"
       },
       "&-img": {
@@ -673,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": {
-          ...Ae(),
-          transition: `transform ${o} ${n} 0s`,
+          ...Oe(),
+          transition: `transform ${o} ${t} 0s`,
           display: "flex",
           justifyContent: "center",
           alignItems: "center",
@@ -748,24 +744,24 @@ const Ht = (e) => {
   };
 };
 function _t(e) {
-  return wt("ImageViewer", (n) => {
-    const o = pt(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,
+  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 [Wt(o)];
   }, e);
 }
-const ge = {
+const ve = {
   /**
    * ESC
    */
@@ -780,16 +776,16 @@ const ge = {
    * RIGHT
    */
   RIGHT: 39
-}, U = {
-  rotateLeft: u(mt, null, null),
-  rotateRight: u(gt, null, null),
-  zoomIn: u(vt, null, null),
-  zoomOut: u(ft, 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)
-}, _e = ["close", "left", "right", "rotateRight", "rotateRight", "zoomOut", "flipX", "flipY", "rotateLeft"], Gt = /* @__PURE__ */ Se({
+}, We = ["close", "left", "right", "rotateRight", "rotateRight", "zoomOut", "flipX", "flipY", "rotateLeft"], Ut = /* @__PURE__ */ ye({
   name: "GImagePreview",
   props: V,
   inheritAttrs: !1,
@@ -800,256 +796,255 @@ const ge = {
     "update:open": (e) => !0
   },
   setup: (e, {
-    emit: n,
+    emit: t,
     expose: o,
-    slots: l
+    slots: i
   }) => {
-    const t = Re({
+    const n = De({
       suffixCls: "image-view"
     }), {
       wrapSSR: r,
       hashId: c
-    } = _t(t), [h, y, d] = Et(e.open, {
+    } = _t(n), [p, g, d] = At(e.open, {
       value: k(e, "open"),
-      onChange: (s) => {
-        var z;
-        (z = e.onOpenChange) == null || z.call(e, s), n("update:open", s);
+      onChange: (u) => {
+        e.onOpenChange?.(u), t("update:open", u);
       }
-    }), [v, m] = ne(!1), [w, x] = ne(!0), a = L(), {
-      transform: i,
-      resetTransform: p,
-      updateTransform: g,
-      dispatchZoomChange: S
-    } = Tt(a, k(e, "minScale"), k(e, "maxScale"), e.onTransform), {
-      isMoving: C,
-      onMouseDown: $,
-      onWheel: T
-    } = Nt(a, k(e, "movable"), d, k(e, "scaleStep"), i, g, S), {
-      isTouching: O,
+    }), [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: F,
       onTouchEnd: W
-    } = Xt(a, k(e, "movable"), d, k(e, "minScale"), i, g, S);
-    Ce(() => {
-      w.value || x(!0);
-    }, [w]);
-    const N = L(null), M = L(e.current), P = at(/* @__PURE__ */ new Map()), Y = b(() => new Map(Array.from(P).map(([s, {
-      url: z
-    }]) => [s, z]))), _ = b(() => Y.value.get(M.value)), j = b(() => Y.value.size), B = b(() => Array.from(Y.value.keys())), D = b(() => B.value.indexOf(M.value)), f = b(() => j.value > 1), A = b(() => j.value >= 1);
-    J(d, (s) => {
-      s && (v.value = !0);
+    } = 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 = (s) => {
-      M.value = s;
+    const O = (u) => {
+      z.value = u;
     };
-    J(() => e.current, (s) => {
-      Ne(s) && E(s);
+    J(() => e.current, (u) => {
+      Re(u) && O(u);
     });
-    function de(s, z) {
-      P.set(s, {
-        url: z,
+    function ce(u, T) {
+      N.set(u, {
+        url: T,
         loading: !0,
         canPreview: !1
       });
     }
-    const G = () => {
+    const U = () => {
       m(!1);
-    }, oe = () => {
-      p("close"), n("close");
-    }, Ge = (s) => {
-      C.value || N.value === (s == null ? void 0 : s.target) && G();
-    }, Ue = () => {
-      const s = P.get(M.value);
-      s && (s.loading = !1, s.canPreview = !0);
-    }, Ve = (s) => {
-      const z = P.get(M.value);
-      z && (z.loading = !1, z.canPreview = !1), s.target.alt = "加载失败";
-    }, Ie = () => {
-      if (D.value > 0 || e.infinite) {
-        const s = D.value - 1 < 0 ? e.urls.length - 1 : D.value - 1;
-        E(B.value[s]), p("prev");
+    }, _e = () => {
+      w("close"), t("close");
+    }, Ue = (u) => {
+      S.value || R.value === u?.target && U();
+    }, Ge = () => {
+      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");
       }
-    }, be = () => {
-      if (D.value < j.value - 1 || e.infinite) {
-        const s = D.value + 1 > e.urls.length - 1 ? 0 : D.value + 1;
-        E(B.value[s]), p("next");
+    }, 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");
       }
     }, qe = () => {
-      S(K + e.scaleStep, "zoomIn");
+      y(K + e.scaleStep, "zoomIn");
     }, Ke = () => {
-      S(K / (K + e.scaleStep), "zoomOut");
+      y(K / (K + e.scaleStep), "zoomOut");
     }, Qe = () => {
-      g({
-        rotate: i.value.rotate + 90
+      h({
+        rotate: l.value.rotate + 90
       }, "rotateRight");
     }, Je = () => {
-      g({
-        rotate: i.value.rotate - 90
+      h({
+        rotate: l.value.rotate - 90
       }, "rotateLeft");
     }, et = () => {
-      g({
-        flipX: !i.value.flipX
+      h({
+        flipX: !l.value.flipX
       }, "flipX");
     }, tt = () => {
-      g({
-        flipY: !i.value.flipY
+      h({
+        flipY: !l.value.flipY
       }, "flipY");
-    }, $e = [{
-      icon: H(l, e.icons, "flipY") || U.flipY,
+    }, be = [{
+      icon: H(i, e.icons, "flipY") || G.flipY,
       onClick: tt,
       type: "flipY"
     }, {
-      icon: H(l, e.icons, "flipX") || U.flipX,
+      icon: H(i, e.icons, "flipX") || G.flipX,
       onClick: et,
       type: "flipX"
     }, {
-      icon: H(l, e.icons, "rotateLeft") || U.rotateLeft,
+      icon: H(i, e.icons, "rotateLeft") || G.rotateLeft,
       onClick: Je,
       type: "rotateLeft"
     }, {
-      icon: H(l, e.icons, "rotateRight") || U.rotateRight,
+      icon: H(i, e.icons, "rotateRight") || G.rotateRight,
       onClick: Qe,
       type: "rotateRight"
     }, {
-      icon: H(l, e.icons, "zoomOut") || U.zoomOut,
+      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") || U.zoomIn,
+      icon: H(i, e.icons, "zoomIn") || G.zoomIn,
       onClick: () => qe(),
       type: "zoomIn",
-      disabled: b(() => i.value.scale === e.maxScale)
-    }], nt = (s) => {
-      d.value && (i.value.scale !== 1 ? g({
+      disabled: b(() => l.value.scale === e.maxScale)
+    }], nt = (u) => {
+      d.value && (l.value.scale !== 1 ? h({
         x: 0,
         y: 0,
         scale: 1
-      }, "doubleClick") : S(K + e.scaleStep, "doubleClick", s.clientX, s.clientY));
-    }, ot = (s) => {
-      s.keyCode === ge.ESC && G(), !(!d.value || !f.value) && (s.keyCode === ge.LEFT ? Ie() : s.keyCode === ge.RIGHT && be());
+      }, "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 fe = () => {
+    let de = () => {
     };
-    return De(() => {
-      J(() => e.urls, (s) => {
-        Ct(s) && s.forEach((z, ie) => {
-          de(ie, z);
+    return Ee(() => {
+      J(() => e.urls, (u) => {
+        Ct(u) && u.forEach((T, oe) => {
+          ce(oe, T);
         });
       }, {
         flush: "post",
         immediate: !0
-      }), J([() => d.value, () => C.value], () => {
-        fe();
-        const s = q(window, "keydown", ot, !1);
-        fe = () => {
-          s.remove();
+      }), J([() => d.value, () => S.value], () => {
+        de();
+        const u = q(window, "keydown", ot, !1);
+        de = () => {
+          u.remove();
         };
       }, {
         flush: "post",
         immediate: !0
       });
     }), lt(() => {
-      fe();
+      de();
     }), o({
-      setOpen: (s) => {
-        y(s), M.value = e.current;
+      setOpen: (u) => {
+        g(u), z.value = e.current;
       }
     }), () => {
-      const s = ye(`${t}-mask-zoom`), z = ye(`${t}-zoom`), ie = {};
-      for (const R in e.icons)
-        ie[R] = H(l, e.icons, R);
-      return r(u(se, null, [u(Te, {
+      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(se, null, [u("div", {
-          class: `${t}-root ${c.value}`
-        }, [u(he, s, {
-          default: () => [we(u("div", {
-            class: `${t}-mask ${c.value}`
-          }, null), [[pe, d.value && v.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}`, C.value && `${t}-moving`],
-          onClick: (R) => e.onHideOnClickModal && Ge(R)
-        }, [u(he, le(z, {
-          onAfterLeave: () => oe()
+          class: [`${n}-wrap`, `${c.value}`, S.value && `${n}-moving`],
+          onClick: (D) => e.onHideOnClickModal && Ue(D)
+        }, [s(me, ae(T, {
+          onAfterLeave: () => _e()
         }), {
-          default: () => [we(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}`,
+            class: `${n}-img ${c.value}`,
             src: _.value,
-            onLoad: () => Ue(),
-            onError: (R) => Ve(R),
+            onLoad: () => Ge(),
+            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 || O.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: $,
+            onWheel: A,
+            onMousedown: L,
             onDblclick: nt,
             onTouchstart: I,
             onTouchmove: F,
             onTouchend: W,
             onTouchcancel: W
-          }, null)])])])]), [[pe, d.value && v.value]])]
+          }, null)])])])]), [[pe, d.value && f.value]])]
         })])])])]
-      }), d.value && v.value && u(Yt, {
-        open: d.value && v.value,
+      }), d.value && f.value && s(Yt, {
+        open: d.value && f.value,
         hashId: c.value,
         count: e.urls.length,
-        current: M.value,
+        current: z.value,
         zIndex: e.zIndex + 1,
         getContainer: e.getContainer,
-        prefixCls: t,
-        icons: Ye(ie, $e.map(({
-          type: R
-        }) => R)),
-        tools: $e,
+        prefixCls: n,
+        icons: Xe(oe, be.map(({
+          type: D
+        }) => D)),
+        tools: be,
         infinite: e.infinite,
-        countRender: Pe(l, e, "countRenders"),
-        showSwitch: f.value,
-        showProgress: A.value,
-        onClose: G,
-        onActive: (R) => R > 0 ? be() : Ie()
+        countRender: Ne(i, e, "countRenders"),
+        showSwitch: v.value,
+        showProgress: P.value,
+        onClose: U,
+        onActive: (D) => D > 0 ? Ie() : xe()
       }, null)]));
     };
   }
-}), me = {
+}), ge = {
   width: "100%",
   height: "100%"
-}, Ut = {
+}, Gt = {
   overflow: "hidden",
   whiteSpace: "nowrap",
   textOverflow: "ellipsis"
 }, Vt = (e) => {
-  const { motionDurationSlow: n, paddingXXS: o, marginXXS: l, colorTextLightSolid: t } = e, r = ".anticon";
+  const { motionDurationSlow: t, paddingXXS: o, marginXXS: i, colorTextLightSolid: n } = e, r = ".anticon";
   return {
     position: "absolute",
     inset: 0,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    color: t,
+    color: n,
     background: new yt("#000").setA(0.5).toRgbString(),
     cursor: "pointer",
     opacity: 0,
-    transition: `opacity ${n}`,
+    transition: `opacity ${t}`,
     [`.${e.componentCls}-mask-info`]: {
-      ...Ut,
+      ...Gt,
       padding: `0 ${ee(o)}`,
       [r]: {
-        marginInlineEnd: l,
+        marginInlineEnd: i,
         svg: {
           verticalAlign: "baseline"
         }
@@ -1065,7 +1060,7 @@ const ge = {
     position: "relative",
     overflow: "hidden",
     [`${e.componentCls}-img`]: {
-      ...me,
+      ...ge,
       verticalAlign: "top",
       opacity: 1,
       [`&${e.componentCls}-img-preview`]: {
@@ -1073,7 +1068,7 @@ const ge = {
         cursor: "pointer"
       },
       "&-placeholder": {
-        ...me,
+        ...ge,
         backgroundColor: e.colorBgContainerDisabled,
         backgroundImage: "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=')",
         backgroundRepeat: "no-repeat",
@@ -1082,7 +1077,7 @@ const ge = {
       }
     },
     [`${e.componentCls}-error`]: {
-      ...me,
+      ...ge,
       display: "flex",
       alignItems: "center",
       justifyContent: "center"
@@ -1098,9 +1093,9 @@ const ge = {
     }
   }
 }), Qt = (e) => typeof Element > "u" ? !1 : e instanceof Element;
-let Ee = "";
-const Jt = [..._e, "placeholder", "fallback"], re = /* @__PURE__ */ Se({
-  props: We,
+let Te = "";
+const Jt = [...We, "placeholder", "fallback"], le = /* @__PURE__ */ ye({
+  props: Ze,
   name: "GImage",
   inheritAttrs: !1,
   emits: {
@@ -1110,132 +1105,130 @@ const Jt = [..._e, "placeholder", "fallback"], re = /* @__PURE__ */ Se({
   },
   slots: Object,
   setup(e, {
-    slots: n,
+    slots: t,
     emit: o,
-    attrs: l
+    attrs: i
   }) {
-    const t = Q && "loading" in HTMLImageElement.prototype, r = Re({
+    const n = Q && "loading" in HTMLImageElement.prototype, r = De({
       suffixCls: "image"
     }), {
       wrapSSR: c,
-      hashId: h
-    } = St("Image", [Kt], r), y = L(), d = L(), v = L(!1), m = L(!0), w = L(!1), x = L(), a = L();
-    let i, p;
-    const g = 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
-    } : e.imageStyle), C = 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: f = [],
-        current: A = 0
-      } = C.value;
-      if (Ne(A)) return f.length >= A ? A : 0;
-      const E = f.indexOf(e.src);
-      return E >= 0 ? E : 0;
-    }), O = b(() => ee(e.width)), I = b(() => ee(e.height)), F = () => {
-      Q && (m.value = !0, v.value = !1, d.value = e.src);
+        urls: v = [],
+        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 W(f) {
-      v.value || (m.value = !1, v.value = !1, o("load", f));
+    function W(v) {
+      f.value || (m.value = !1, f.value = !1, o("load", v));
     }
-    function N(f) {
-      m.value = !1, v.value = !0, o("error", f);
+    function R(v) {
+      m.value = !1, f.value = !0, o("error", v);
     }
-    function M() {
+    function z() {
       It(x.value, a.value) && (F(), _());
     }
-    const P = zt(M, 200, !0);
+    const N = $t(z, 200, !0);
     async function Y() {
       if (!Q) return;
       await st();
       const {
-        scrollContainer: f
+        scrollContainer: v
       } = e;
-      Qt(f) ? a.value = f : bt(f) && f !== "" ? a.value = document.querySelector(f) ?? void 0 : x.value && (a.value = $t(x.value)), a.value && (i = Le(a, "scroll", P), setTimeout(() => M(), 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 _() {
-      !Q || !a.value || !P || (i == null || i(), a.value = void 0);
+      !Q || !a.value || !N || (l?.(), a.value = void 0);
     }
-    function j(f) {
-      if (f.ctrlKey) {
-        if (f.deltaY < 0)
-          return f.preventDefault(), !1;
-        if (f.deltaY > 0)
-          return f.preventDefault(), !1;
+    function j(v) {
+      if (v.ctrlKey) {
+        if (v.deltaY < 0)
+          return v.preventDefault(), !1;
+        if (v.deltaY > 0)
+          return v.preventDefault(), !1;
       }
     }
     const B = () => {
-      o("click"), !(m.value || v.value) && $.value && (p = Le("wheel", j, {
+      o("click"), !(m.value || f.value) && L.value && (w = $e("wheel", j, {
         passive: !1
-      }), Ee = document.body.style.overflow, document.body.style.overflow = "hidden", w.value = !0);
-    }, D = () => {
-      p == null || p(), document.body.style.overflow = Ee, 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 J(() => e.src, () => {
-      g.value ? (m.value = !0, v.value = !1, _(), Y()) : F();
+      h.value ? (m.value = !0, f.value = !1, _(), Y()) : F();
     }), rt(() => {
-      var f, A;
-      $.value && w.value ? (f = y.value) == null || f.setOpen(!0) : (A = y.value) == null || A.setOpen(!1);
-    }), De(() => {
-      g.value ? Y() : F();
+      L.value && C.value ? g.value?.setOpen(!0) : g.value?.setOpen(!1);
+    }), Ee(() => {
+      h.value ? Y() : F();
     }), () => {
-      var G;
-      const f = Mt(Object.entries(l).filter(([oe]) => /^(?:data-|on[A-Z])/i.test(oe) || ["id", "style", "class"].includes(oe))), A = Ye(l, Object.keys(f)), E = xt(Jt, 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
-      }), de = Pe(n, e, ["preview", "mask"], !0);
-      return c(u("div", le({
+      }), ce = Ne(t, e, ["preview", "mask"], !0);
+      return c(s("div", ae({
         class: {
-          [`${h.value}`]: !0,
+          [`${p.value}`]: !0,
           [`${r}`]: !0
         },
         ref: x
-      }, f, {
+      }, v, {
         style: {
-          width: ee(e.size) || O.value,
+          width: ee(e.size) || M.value,
           height: ee(e.size) || I.value,
-          ...f.style || {}
+          ...v.style || {}
         }
-      }), [v.value ? u("div", {
-        class: X(h.value, `${r}-error`)
-      }, [E.fallback]) : u(se, null, [u("img", le(A, {
+      }), [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: X(h.value, e.imageClass, `${r}-img`, {
+        style: y.value,
+        class: X(p.value, e.imageClass, `${r}-img`, {
           [`${r}-img-placeholder`]: e.placeholder === !0,
-          [`${r}-img-preview`]: $.value
+          [`${r}-img-preview`]: L.value
         }),
         crossorigin: e.crossOrigin,
-        width: O.value,
+        width: M.value,
         height: I.value,
         onClick: B,
         onLoad: W,
-        onError: N
-      }), null), m.value && u("div", {
-        class: X(`${r}-placeholder`, h.value)
-      }, [E.placeholder])]), C.value.mask && $.value && u("div", {
-        class: X(`${r}-mask`, C.value.maskClass, h.value),
+        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: ((G = f.style) == null ? void 0 : G.display) === "none" ? "none" : void 0
+          display: v.style?.display === "none" ? "none" : void 0
         }
-      }, [de || u("div", {
-        class: X(`${r}-mask-info`, h.value)
-      }, [u(ht, null, null)])]), $.value && u(Gt, le({
-        ref: y
-      }, C.value, At(E, _e), {
-        urls: C.value.urls || [e.src],
-        current: T.value,
-        onClose: () => D()
+      }, [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)]));
     };
   }
 });
-re.isGImage = !0;
-re.install = (e) => (e.component(re.name, re), e);
+le.isGImage = !0;
+le.install = (e) => (e.component(le.name, le), e);
 export {
-  re as GImage,
-  Gt as GImagePreview,
+  le as GImage,
+  Ut as GImagePreview,
   te as baseProps,
-  re as default,
-  We as imageProps
+  le as default,
+  Ze as imageProps
 };