@gx-design-vue/image 0.2.0-beta.31 → 0.2.0-beta.32

package/dist/image.js

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