@gx-design-vue/image 0.2.0-beta.0 → 0.2.0-beta.10

package/dist/image.mjs

@@ -1,275 +1,135 @@
-import { computed as M, isRef as et, createVNode as c, defineComponent as _e, shallowRef as ze, ref as x, watch as ue, nextTick as Ue, Teleport as tt, Transition as Oe, withDirectives as Le, vShow as Ne, mergeProps as Ze, cloneVNode as nt, watchEffect as at, Fragment as rt, createTextVNode as it } from "vue";
-import { ExpandOutlined as ot, OneToOneOutlined as st, CloseOutlined as lt, ZoomInOutlined as ut, ZoomOutOutlined as ct, RotateRightOutlined as ft, RotateLeftOutlined as dt, LeftOutlined as ht, RightOutlined as gt } from "@ant-design/icons-vue";
-import { getPrefixCls as Q, isServer as q, getSlotVNode as De, isInContainer as vt, isString as pt, getScrollContainer as mt, isNumber as bt } from "@gx-design-vue/pro-utils";
-import { useState as Ee, onMountedOrActivated as Xe } from "@gx-design-vue/pro-hooks";
-import { useStyleRegister as Re, theme as yt } from "ant-design-vue";
-import { createTypes as wt } from "vue-types";
-import { useThrottleFn as St, useEventListener as He } from "@vueuse/core";
-const xt = (e, t) => {
-  const { fontFamily: n, fontSize: a } = e, r = `[class^="${t}"], [class*=" ${t}"]`;
-  return {
-    [r]: {
-      fontFamily: n,
-      fontSize: a,
-      boxSizing: "border-box",
-      "&::before, &::after": {
-        boxSizing: "border-box"
-      },
-      [r]: {
-        boxSizing: "border-box",
-        "&::before, &::after": {
-          boxSizing: "border-box"
-        }
-      }
-    }
-  };
-}, It = (e) => ({
-  a: {
-    color: e.colorLink,
-    textDecoration: e.linkDecoration,
-    backgroundColor: "transparent",
-    outline: "none",
-    cursor: "pointer",
-    transition: `color ${e.motionDurationSlow}`,
-    "-webkit-text-decoration-skip": "objects",
-    "&:hover": {
-      color: e.colorLinkHover
-    },
-    "&:active": {
-      color: e.colorLinkActive
-    },
-    [`&:active,
-  &:hover`]: {
-      textDecoration: e.linkHoverDecoration,
-      outline: 0
-    },
-    // https://github.com/ant-design/ant-design/issues/22503
-    "&:focus": {
-      textDecoration: e.linkFocusDecoration,
-      outline: 0
-    },
-    "&[disabled]": {
-      color: e.colorTextDisabled,
-      cursor: "not-allowed"
-    }
-  }
-}), qe = (
-  // @ts-ignore
-  process.env.NODE_ENV !== "production" || typeof CSSINJS_STATISTIC < "u"
-);
-let Ae = !0;
-function Te(...e) {
-  if (!qe)
-    return Object.assign({}, ...e);
-  Ae = !1;
-  const t = {};
-  return e.forEach((n) => {
-    Object.keys(n).forEach((a) => {
-      Object.defineProperty(t, a, {
-        configurable: !0,
-        enumerable: !0,
-        get: () => n[a]
-      });
-    });
-  }), Ae = !0, t;
-}
-function Mt() {
-}
-function Ct(e) {
-  let t, n = e, a = Mt;
-  return qe && (t = /* @__PURE__ */ new Set(), n = new Proxy(e, {
-    get(r, i) {
-      return Ae && t.add(i), r[i];
-    }
-  }), a = (r, i) => {
-    Array.from(t);
-  }), { token: n, keys: t, flush: a };
-}
-class de {
-  constructor(t, n) {
-    this._keyframe = !0, this.name = t, this.style = n;
-  }
-  getName(t = "") {
-    return t ? `${t}-${this.name}` : this.name;
-  }
-}
-const Fe = (e, t = {}) => e ? {
-  name: e,
-  appear: !0,
-  // type: 'animation',
-  // appearFromClass: `${transitionName}-appear ${transitionName}-appear-prepare`,
-  // appearActiveClass: `antdv-base-transtion`,
-  // appearToClass: `${transitionName}-appear ${transitionName}-appear-active`,
-  enterFromClass: `${e}-enter ${e}-enter-prepare ${e}-enter-start`,
-  enterActiveClass: `${e}-enter ${e}-enter-prepare`,
-  enterToClass: `${e}-enter ${e}-enter-active`,
-  leaveFromClass: ` ${e}-leave`,
-  leaveActiveClass: `${e}-leave ${e}-leave-active`,
-  leaveToClass: `${e}-leave ${e}-leave-active`,
-  ...t
-} : { css: !1, ...t }, { useToken: At } = yt;
-function Qe(e, t) {
-  return (n) => {
-    const a = Q({}), r = M(() => et(n) ? n == null ? void 0 : n.value : n || a), { token: i, hashId: o, theme: l } = At(), u = M(() => Q({})), p = M(() => ({
-      theme: l.value,
-      token: i.value,
-      hashId: o.value,
-      path: ["Shared", u.value]
-    }));
-    Re(p, () => [
-      {
-        "&": It(i.value)
-      }
-    ]);
-    const v = M(() => ({
-      theme: l.value,
-      token: i.value,
-      hashId: o.value,
-      path: [e, r.value]
-    }));
-    return [
-      Re(v, () => {
-        const { token: z, flush: C } = Ct(i.value), m = `.${r.value}`, A = Te(z, {
-          antCls: ".ant",
-          componentCls: m,
-          proComponentsCls: Q({
-            isPor: !0
-          })
-        }), d = t(A, {
-          hashId: o.value,
-          prefixCls: r.value
-        });
-        return C(e, {}), [xt(i.value, r.value), d];
-      }),
-      o
-    ];
-  };
-}
+import { createVNode as u, defineComponent as Ve, shallowRef as Te, ref as w, computed as L, watch as le, nextTick as Ye, Teleport as _e, Transition as ke, withDirectives as ze, vShow as Oe, mergeProps as We, cloneVNode as qe, watchEffect as Qe, Fragment as Je, createTextVNode as Ke } from "vue";
+import { ExpandOutlined as et, OneToOneOutlined as tt, CloseOutlined as nt, ZoomInOutlined as at, ZoomOutOutlined as it, RotateRightOutlined as rt, RotateLeftOutlined as ot, LeftOutlined as st, RightOutlined as lt } from "@ant-design/icons-vue";
+import { isServer as q, getPrefixCls as Ge, getSlotVNode as Le, isInContainer as ut, isString as ct, getScrollContainer as ft, isNumber as dt } from "@gx-design-vue/pro-utils";
+import { useState as Ne, onMountedOrActivated as Ue } from "@gx-design-vue/pro-hooks";
+import { Keyframe as fe, useStyle as ht, mergeToken as gt, getTransitionProps as $e, useProStyle as vt } from "@gx-design-vue/pro-provider";
+import { createTypes as pt } from "vue-types";
+import { useThrottleFn as mt, useEventListener as Ee } from "@vueuse/core";
 function g(e, t) {
-  kt(e) && (e = "100%");
-  var n = Tt(e);
+  bt(e) && (e = "100%");
+  var n = yt(e);
   return e = t === 360 ? e : Math.min(t, Math.max(0, parseFloat(e))), n && (e = parseInt(String(e * t), 10) / 100), Math.abs(e - t) < 1e-6 ? 1 : (t === 360 ? e = (e < 0 ? e % t + t : e % t) / parseFloat(String(t)) : e = e % t / parseFloat(String(t)), e);
 }
-function oe(e) {
+function re(e) {
   return Math.min(1, Math.max(0, e));
 }
-function kt(e) {
+function bt(e) {
   return typeof e == "string" && e.indexOf(".") !== -1 && parseFloat(e) === 1;
 }
-function Tt(e) {
+function yt(e) {
   return typeof e == "string" && e.indexOf("%") !== -1;
 }
-function Je(e) {
+function Ze(e) {
   return e = parseFloat(e), (isNaN(e) || e < 0 || e > 1) && (e = 1), e;
 }
-function se(e) {
+function oe(e) {
   return e <= 1 ? "".concat(Number(e) * 100, "%") : e;
 }
 function H(e) {
   return e.length === 1 ? "0" + e : String(e);
 }
-function $t(e, t, n) {
+function wt(e, t, n) {
   return {
     r: g(e, 255) * 255,
     g: g(t, 255) * 255,
     b: g(n, 255) * 255
   };
 }
-function Pe(e, t, n) {
+function Re(e, t, n) {
   e = g(e, 255), t = g(t, 255), n = g(n, 255);
-  var a = Math.max(e, t, n), r = Math.min(e, t, n), i = 0, o = 0, l = (a + r) / 2;
-  if (a === r)
-    o = 0, i = 0;
+  var a = Math.max(e, t, n), i = Math.min(e, t, n), r = 0, o = 0, l = (a + i) / 2;
+  if (a === i)
+    o = 0, r = 0;
   else {
-    var u = a - r;
-    switch (o = l > 0.5 ? u / (2 - a - r) : u / (a + r), a) {
+    var c = a - i;
+    switch (o = l > 0.5 ? c / (2 - a - i) : c / (a + i), a) {
       case e:
-        i = (t - n) / u + (t < n ? 6 : 0);
+        r = (t - n) / c + (t < n ? 6 : 0);
         break;
       case t:
-        i = (n - e) / u + 2;
+        r = (n - e) / c + 2;
         break;
       case n:
-        i = (e - t) / u + 4;
+        r = (e - t) / c + 4;
         break;
     }
-    i /= 6;
+    r /= 6;
   }
-  return { h: i, s: o, l };
+  return { h: r, s: o, l };
 }
-function ye(e, t, n) {
+function be(e, t, n) {
   return n < 0 && (n += 1), n > 1 && (n -= 1), n < 1 / 6 ? e + (t - e) * (6 * n) : n < 1 / 2 ? t : n < 2 / 3 ? e + (t - e) * (2 / 3 - n) * 6 : e;
 }
-function zt(e, t, n) {
-  var a, r, i;
+function St(e, t, n) {
+  var a, i, r;
   if (e = g(e, 360), t = g(t, 100), n = g(n, 100), t === 0)
-    r = n, i = n, a = n;
+    i = n, r = n, a = n;
   else {
     var o = n < 0.5 ? n * (1 + t) : n + t - n * t, l = 2 * n - o;
-    a = ye(l, o, e + 1 / 3), r = ye(l, o, e), i = ye(l, o, e - 1 / 3);
+    a = be(l, o, e + 1 / 3), i = be(l, o, e), r = be(l, o, e - 1 / 3);
   }
-  return { r: a * 255, g: r * 255, b: i * 255 };
+  return { r: a * 255, g: i * 255, b: r * 255 };
 }
-function je(e, t, n) {
+function De(e, t, n) {
   e = g(e, 255), t = g(t, 255), n = g(n, 255);
-  var a = Math.max(e, t, n), r = Math.min(e, t, n), i = 0, o = a, l = a - r, u = a === 0 ? 0 : l / a;
-  if (a === r)
-    i = 0;
+  var a = Math.max(e, t, n), i = Math.min(e, t, n), r = 0, o = a, l = a - i, c = a === 0 ? 0 : l / a;
+  if (a === i)
+    r = 0;
   else {
     switch (a) {
       case e:
-        i = (t - n) / l + (t < n ? 6 : 0);
+        r = (t - n) / l + (t < n ? 6 : 0);
         break;
       case t:
-        i = (n - e) / l + 2;
+        r = (n - e) / l + 2;
         break;
       case n:
-        i = (e - t) / l + 4;
+        r = (e - t) / l + 4;
         break;
     }
-    i /= 6;
+    r /= 6;
   }
-  return { h: i, s: u, v: o };
+  return { h: r, s: c, v: o };
 }
-function Ot(e, t, n) {
+function xt(e, t, n) {
   e = g(e, 360) * 6, t = g(t, 100), n = g(n, 100);
-  var a = Math.floor(e), r = e - a, i = n * (1 - t), o = n * (1 - r * t), l = n * (1 - (1 - r) * t), u = a % 6, p = [n, o, i, i, l, n][u], v = [l, n, n, o, i, i][u], z = [i, i, l, n, n, o][u];
-  return { r: p * 255, g: v * 255, b: z * 255 };
+  var a = Math.floor(e), i = e - a, r = n * (1 - t), o = n * (1 - i * t), l = n * (1 - (1 - i) * t), c = a % 6, S = [n, o, r, r, l, n][c], p = [l, n, n, o, r, r][c], $ = [r, r, l, n, n, o][c];
+  return { r: S * 255, g: p * 255, b: $ * 255 };
 }
-function Be(e, t, n, a) {
-  var r = [
+function He(e, t, n, a) {
+  var i = [
     H(Math.round(e).toString(16)),
     H(Math.round(t).toString(16)),
     H(Math.round(n).toString(16))
   ];
-  return a && r[0].startsWith(r[0].charAt(1)) && r[1].startsWith(r[1].charAt(1)) && r[2].startsWith(r[2].charAt(1)) ? r[0].charAt(0) + r[1].charAt(0) + r[2].charAt(0) : r.join("");
+  return a && i[0].startsWith(i[0].charAt(1)) && i[1].startsWith(i[1].charAt(1)) && i[2].startsWith(i[2].charAt(1)) ? i[0].charAt(0) + i[1].charAt(0) + i[2].charAt(0) : i.join("");
 }
-function Lt(e, t, n, a, r) {
-  var i = [
+function Mt(e, t, n, a, i) {
+  var r = [
     H(Math.round(e).toString(16)),
     H(Math.round(t).toString(16)),
     H(Math.round(n).toString(16)),
-    H(Nt(a))
+    H(It(a))
   ];
-  return r && i[0].startsWith(i[0].charAt(1)) && i[1].startsWith(i[1].charAt(1)) && i[2].startsWith(i[2].charAt(1)) && i[3].startsWith(i[3].charAt(1)) ? i[0].charAt(0) + i[1].charAt(0) + i[2].charAt(0) + i[3].charAt(0) : i.join("");
+  return i && r[0].startsWith(r[0].charAt(1)) && r[1].startsWith(r[1].charAt(1)) && r[2].startsWith(r[2].charAt(1)) && r[3].startsWith(r[3].charAt(1)) ? r[0].charAt(0) + r[1].charAt(0) + r[2].charAt(0) + r[3].charAt(0) : r.join("");
 }
-function Nt(e) {
+function It(e) {
   return Math.round(parseFloat(e) * 255).toString(16);
 }
-function Ve(e) {
-  return S(e) / 255;
+function Pe(e) {
+  return y(e) / 255;
 }
-function S(e) {
+function y(e) {
   return parseInt(e, 16);
 }
-function Dt(e) {
+function At(e) {
   return {
     r: e >> 16,
     g: (e & 65280) >> 8,
     b: e & 255
   };
 }
-var ke = {
+var Ae = {
   aliceblue: "#f0f8ff",
   antiquewhite: "#faebd7",
   aqua: "#00ffff",
@@ -419,9 +279,9 @@ var ke = {
   yellow: "#ffff00",
   yellowgreen: "#9acd32"
 };
-function Et(e) {
-  var t = { r: 0, g: 0, b: 0 }, n = 1, a = null, r = null, i = null, o = !1, l = !1;
-  return typeof e == "string" && (e = Ft(e)), typeof e == "object" && (O(e.r) && O(e.g) && O(e.b) ? (t = $t(e.r, e.g, e.b), o = !0, l = String(e.r).substr(-1) === "%" ? "prgb" : "rgb") : O(e.h) && O(e.s) && O(e.v) ? (a = se(e.s), r = se(e.v), t = Ot(e.h, a, r), o = !0, l = "hsv") : O(e.h) && O(e.s) && O(e.l) && (a = se(e.s), i = se(e.l), t = zt(e.h, a, i), o = !0, l = "hsl"), Object.prototype.hasOwnProperty.call(e, "a") && (n = e.a)), n = Je(n), {
+function Ct(e) {
+  var t = { r: 0, g: 0, b: 0 }, n = 1, a = null, i = null, r = null, o = !1, l = !1;
+  return typeof e == "string" && (e = zt(e)), typeof e == "object" && (z(e.r) && z(e.g) && z(e.b) ? (t = wt(e.r, e.g, e.b), o = !0, l = String(e.r).substr(-1) === "%" ? "prgb" : "rgb") : z(e.h) && z(e.s) && z(e.v) ? (a = oe(e.s), i = oe(e.v), t = xt(e.h, a, i), o = !0, l = "hsv") : z(e.h) && z(e.s) && z(e.l) && (a = oe(e.s), r = oe(e.l), t = St(e.h, a, r), o = !0, l = "hsl"), Object.prototype.hasOwnProperty.call(e, "a") && (n = e.a)), n = Ze(n), {
     ok: o,
     format: e.format || l,
     r: Math.min(255, Math.max(t.r, 0)),
@@ -430,56 +290,56 @@ function Et(e) {
     a: n
   };
 }
-var Rt = "[-\\+]?\\d+%?", Ht = "[-\\+]?\\d*\\.\\d+%?", N = "(?:".concat(Ht, ")|(?:").concat(Rt, ")"), we = "[\\s|\\(]+(".concat(N, ")[,|\\s]+(").concat(N, ")[,|\\s]+(").concat(N, ")\\s*\\)?"), Se = "[\\s|\\(]+(".concat(N, ")[,|\\s]+(").concat(N, ")[,|\\s]+(").concat(N, ")[,|\\s]+(").concat(N, ")\\s*\\)?"), k = {
+var Tt = "[-\\+]?\\d+%?", kt = "[-\\+]?\\d*\\.\\d+%?", N = "(?:".concat(kt, ")|(?:").concat(Tt, ")"), ye = "[\\s|\\(]+(".concat(N, ")[,|\\s]+(").concat(N, ")[,|\\s]+(").concat(N, ")\\s*\\)?"), we = "[\\s|\\(]+(".concat(N, ")[,|\\s]+(").concat(N, ")[,|\\s]+(").concat(N, ")[,|\\s]+(").concat(N, ")\\s*\\)?"), I = {
   CSS_UNIT: new RegExp(N),
-  rgb: new RegExp("rgb" + we),
-  rgba: new RegExp("rgba" + Se),
-  hsl: new RegExp("hsl" + we),
-  hsla: new RegExp("hsla" + Se),
-  hsv: new RegExp("hsv" + we),
-  hsva: new RegExp("hsva" + Se),
+  rgb: new RegExp("rgb" + ye),
+  rgba: new RegExp("rgba" + we),
+  hsl: new RegExp("hsl" + ye),
+  hsla: new RegExp("hsla" + we),
+  hsv: new RegExp("hsv" + ye),
+  hsva: new RegExp("hsva" + we),
   hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
   hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
   hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
   hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
 };
-function Ft(e) {
+function zt(e) {
   if (e = e.trim().toLowerCase(), e.length === 0)
     return !1;
   var t = !1;
-  if (ke[e])
-    e = ke[e], t = !0;
+  if (Ae[e])
+    e = Ae[e], t = !0;
   else if (e === "transparent")
     return { r: 0, g: 0, b: 0, a: 0, format: "name" };
-  var n = k.rgb.exec(e);
-  return n ? { r: n[1], g: n[2], b: n[3] } : (n = k.rgba.exec(e), n ? { r: n[1], g: n[2], b: n[3], a: n[4] } : (n = k.hsl.exec(e), n ? { h: n[1], s: n[2], l: n[3] } : (n = k.hsla.exec(e), n ? { h: n[1], s: n[2], l: n[3], a: n[4] } : (n = k.hsv.exec(e), n ? { h: n[1], s: n[2], v: n[3] } : (n = k.hsva.exec(e), n ? { h: n[1], s: n[2], v: n[3], a: n[4] } : (n = k.hex8.exec(e), n ? {
-    r: S(n[1]),
-    g: S(n[2]),
-    b: S(n[3]),
-    a: Ve(n[4]),
+  var n = I.rgb.exec(e);
+  return n ? { r: n[1], g: n[2], b: n[3] } : (n = I.rgba.exec(e), n ? { r: n[1], g: n[2], b: n[3], a: n[4] } : (n = I.hsl.exec(e), n ? { h: n[1], s: n[2], l: n[3] } : (n = I.hsla.exec(e), n ? { h: n[1], s: n[2], l: n[3], a: n[4] } : (n = I.hsv.exec(e), n ? { h: n[1], s: n[2], v: n[3] } : (n = I.hsva.exec(e), n ? { h: n[1], s: n[2], v: n[3], a: n[4] } : (n = I.hex8.exec(e), n ? {
+    r: y(n[1]),
+    g: y(n[2]),
+    b: y(n[3]),
+    a: Pe(n[4]),
     format: t ? "name" : "hex8"
-  } : (n = k.hex6.exec(e), n ? {
-    r: S(n[1]),
-    g: S(n[2]),
-    b: S(n[3]),
+  } : (n = I.hex6.exec(e), n ? {
+    r: y(n[1]),
+    g: y(n[2]),
+    b: y(n[3]),
     format: t ? "name" : "hex"
-  } : (n = k.hex4.exec(e), n ? {
-    r: S(n[1] + n[1]),
-    g: S(n[2] + n[2]),
-    b: S(n[3] + n[3]),
-    a: Ve(n[4] + n[4]),
+  } : (n = I.hex4.exec(e), n ? {
+    r: y(n[1] + n[1]),
+    g: y(n[2] + n[2]),
+    b: y(n[3] + n[3]),
+    a: Pe(n[4] + n[4]),
     format: t ? "name" : "hex8"
-  } : (n = k.hex3.exec(e), n ? {
-    r: S(n[1] + n[1]),
-    g: S(n[2] + n[2]),
-    b: S(n[3] + n[3]),
+  } : (n = I.hex3.exec(e), n ? {
+    r: y(n[1] + n[1]),
+    g: y(n[2] + n[2]),
+    b: y(n[3] + n[3]),
     format: t ? "name" : "hex"
   } : !1)))))))));
 }
-function O(e) {
-  return !!k.CSS_UNIT.exec(String(e));
+function z(e) {
+  return !!I.CSS_UNIT.exec(String(e));
 }
-var J = (
+var Q = (
   /** @class */
   function() {
     function e(t, n) {
@@ -487,9 +347,9 @@ var J = (
       var a;
       if (t instanceof e)
         return t;
-      typeof t == "number" && (t = Dt(t)), this.originalInput = t;
-      var r = Et(t);
-      this.originalInput = t, this.r = r.r, this.g = r.g, this.b = r.b, this.a = r.a, this.roundA = Math.round(100 * this.a) / 100, this.format = (a = n.format) !== null && a !== void 0 ? a : r.format, this.gradientType = n.gradientType, this.r < 1 && (this.r = Math.round(this.r)), this.g < 1 && (this.g = Math.round(this.g)), this.b < 1 && (this.b = Math.round(this.b)), this.isValid = r.ok;
+      typeof t == "number" && (t = At(t)), this.originalInput = t;
+      var i = Ct(t);
+      this.originalInput = t, this.r = i.r, this.g = i.g, this.b = i.b, this.a = i.a, this.roundA = Math.round(100 * this.a) / 100, this.format = (a = n.format) !== null && a !== void 0 ? a : i.format, this.gradientType = n.gradientType, this.r < 1 && (this.r = Math.round(this.r)), this.g < 1 && (this.g = Math.round(this.g)), this.b < 1 && (this.b = Math.round(this.b)), this.isValid = i.ok;
     }
     return e.prototype.isDark = function() {
       return this.getBrightness() < 128;
@@ -499,33 +359,33 @@ var J = (
       var t = this.toRgb();
       return (t.r * 299 + t.g * 587 + t.b * 114) / 1e3;
     }, e.prototype.getLuminance = function() {
-      var t = this.toRgb(), n, a, r, i = t.r / 255, o = t.g / 255, l = t.b / 255;
-      return i <= 0.03928 ? n = i / 12.92 : n = Math.pow((i + 0.055) / 1.055, 2.4), o <= 0.03928 ? a = o / 12.92 : a = Math.pow((o + 0.055) / 1.055, 2.4), l <= 0.03928 ? r = l / 12.92 : r = Math.pow((l + 0.055) / 1.055, 2.4), 0.2126 * n + 0.7152 * a + 0.0722 * r;
+      var t = this.toRgb(), n, a, i, r = t.r / 255, o = t.g / 255, l = t.b / 255;
+      return r <= 0.03928 ? n = r / 12.92 : n = Math.pow((r + 0.055) / 1.055, 2.4), o <= 0.03928 ? a = o / 12.92 : a = Math.pow((o + 0.055) / 1.055, 2.4), l <= 0.03928 ? i = l / 12.92 : i = Math.pow((l + 0.055) / 1.055, 2.4), 0.2126 * n + 0.7152 * a + 0.0722 * i;
     }, e.prototype.getAlpha = function() {
       return this.a;
     }, e.prototype.setAlpha = function(t) {
-      return this.a = Je(t), this.roundA = Math.round(100 * this.a) / 100, this;
+      return this.a = Ze(t), this.roundA = Math.round(100 * this.a) / 100, this;
     }, e.prototype.isMonochrome = function() {
       var t = this.toHsl().s;
       return t === 0;
     }, e.prototype.toHsv = function() {
-      var t = je(this.r, this.g, this.b);
+      var t = De(this.r, this.g, this.b);
       return { h: t.h * 360, s: t.s, v: t.v, a: this.a };
     }, e.prototype.toHsvString = function() {
-      var t = je(this.r, this.g, this.b), n = Math.round(t.h * 360), a = Math.round(t.s * 100), r = Math.round(t.v * 100);
-      return this.a === 1 ? "hsv(".concat(n, ", ").concat(a, "%, ").concat(r, "%)") : "hsva(".concat(n, ", ").concat(a, "%, ").concat(r, "%, ").concat(this.roundA, ")");
+      var t = De(this.r, this.g, this.b), n = Math.round(t.h * 360), a = Math.round(t.s * 100), i = Math.round(t.v * 100);
+      return this.a === 1 ? "hsv(".concat(n, ", ").concat(a, "%, ").concat(i, "%)") : "hsva(".concat(n, ", ").concat(a, "%, ").concat(i, "%, ").concat(this.roundA, ")");
     }, e.prototype.toHsl = function() {
-      var t = Pe(this.r, this.g, this.b);
+      var t = Re(this.r, this.g, this.b);
       return { h: t.h * 360, s: t.s, l: t.l, a: this.a };
     }, e.prototype.toHslString = function() {
-      var t = Pe(this.r, this.g, this.b), n = Math.round(t.h * 360), a = Math.round(t.s * 100), r = Math.round(t.l * 100);
-      return this.a === 1 ? "hsl(".concat(n, ", ").concat(a, "%, ").concat(r, "%)") : "hsla(".concat(n, ", ").concat(a, "%, ").concat(r, "%, ").concat(this.roundA, ")");
+      var t = Re(this.r, this.g, this.b), n = Math.round(t.h * 360), a = Math.round(t.s * 100), i = Math.round(t.l * 100);
+      return this.a === 1 ? "hsl(".concat(n, ", ").concat(a, "%, ").concat(i, "%)") : "hsla(".concat(n, ", ").concat(a, "%, ").concat(i, "%, ").concat(this.roundA, ")");
     }, e.prototype.toHex = function(t) {
-      return t === void 0 && (t = !1), Be(this.r, this.g, this.b, t);
+      return t === void 0 && (t = !1), He(this.r, this.g, this.b, t);
     }, e.prototype.toHexString = function(t) {
       return t === void 0 && (t = !1), "#" + this.toHex(t);
     }, e.prototype.toHex8 = function(t) {
-      return t === void 0 && (t = !1), Lt(this.r, this.g, this.b, this.a, t);
+      return t === void 0 && (t = !1), Mt(this.r, this.g, this.b, this.a, t);
     }, e.prototype.toHex8String = function(t) {
       return t === void 0 && (t = !1), "#" + this.toHex8(t);
     }, e.prototype.toRgb = function() {
@@ -558,17 +418,17 @@ var J = (
         return "transparent";
       if (this.a < 1)
         return !1;
-      for (var t = "#" + Be(this.r, this.g, this.b, !1), n = 0, a = Object.entries(ke); n < a.length; n++) {
-        var r = a[n], i = r[0], o = r[1];
+      for (var t = "#" + He(this.r, this.g, this.b, !1), n = 0, a = Object.entries(Ae); n < a.length; n++) {
+        var i = a[n], r = i[0], o = i[1];
         if (t === o)
-          return i;
+          return r;
       }
       return !1;
     }, e.prototype.toString = function(t) {
       var n = !!t;
       t = t ?? this.format;
-      var a = !1, r = this.a < 1 && this.a >= 0, i = !n && r && (t.startsWith("hex") || t === "name");
-      return i ? t === "name" && this.a === 0 ? this.toName() : this.toRgbString() : (t === "rgb" && (a = this.toRgbString()), t === "prgb" && (a = this.toPercentageRgbString()), (t === "hex" || t === "hex6") && (a = this.toHexString()), t === "hex3" && (a = this.toHexString(!0)), t === "hex4" && (a = this.toHex8String(!0)), t === "hex8" && (a = this.toHex8String()), t === "name" && (a = this.toName()), t === "hsl" && (a = this.toHslString()), t === "hsv" && (a = this.toHsvString()), a || this.toHexString());
+      var a = !1, i = this.a < 1 && this.a >= 0, r = !n && i && (t.startsWith("hex") || t === "name");
+      return r ? t === "name" && this.a === 0 ? this.toName() : this.toRgbString() : (t === "rgb" && (a = this.toRgbString()), t === "prgb" && (a = this.toPercentageRgbString()), (t === "hex" || t === "hex6") && (a = this.toHexString()), t === "hex3" && (a = this.toHexString(!0)), t === "hex4" && (a = this.toHex8String(!0)), t === "hex8" && (a = this.toHex8String()), t === "name" && (a = this.toName()), t === "hsl" && (a = this.toHslString()), t === "hsv" && (a = this.toHsvString()), a || this.toHexString());
     }, e.prototype.toNumber = function() {
       return (Math.round(this.r) << 16) + (Math.round(this.g) << 8) + Math.round(this.b);
     }, e.prototype.clone = function() {
@@ -576,7 +436,7 @@ var J = (
     }, e.prototype.lighten = function(t) {
       t === void 0 && (t = 10);
       var n = this.toHsl();
-      return n.l += t / 100, n.l = oe(n.l), new e(n);
+      return n.l += t / 100, n.l = re(n.l), new e(n);
     }, e.prototype.brighten = function(t) {
       t === void 0 && (t = 10);
       var n = this.toRgb();
@@ -584,7 +444,7 @@ var J = (
     }, e.prototype.darken = function(t) {
       t === void 0 && (t = 10);
       var n = this.toHsl();
-      return n.l -= t / 100, n.l = oe(n.l), new e(n);
+      return n.l -= t / 100, n.l = re(n.l), new e(n);
     }, e.prototype.tint = function(t) {
       return t === void 0 && (t = 10), this.mix("white", t);
     }, e.prototype.shade = function(t) {
@@ -592,11 +452,11 @@ var J = (
     }, e.prototype.desaturate = function(t) {
       t === void 0 && (t = 10);
       var n = this.toHsl();
-      return n.s -= t / 100, n.s = oe(n.s), new e(n);
+      return n.s -= t / 100, n.s = re(n.s), new e(n);
     }, e.prototype.saturate = function(t) {
       t === void 0 && (t = 10);
       var n = this.toHsl();
-      return n.s += t / 100, n.s = oe(n.s), new e(n);
+      return n.s += t / 100, n.s = re(n.s), new e(n);
     }, e.prototype.greyscale = function() {
       return this.desaturate(100);
     }, e.prototype.spin = function(t) {
@@ -604,26 +464,26 @@ var J = (
       return n.h = a < 0 ? 360 + a : a, new e(n);
     }, e.prototype.mix = function(t, n) {
       n === void 0 && (n = 50);
-      var a = this.toRgb(), r = new e(t).toRgb(), i = n / 100, o = {
-        r: (r.r - a.r) * i + a.r,
-        g: (r.g - a.g) * i + a.g,
-        b: (r.b - a.b) * i + a.b,
-        a: (r.a - a.a) * i + a.a
+      var a = this.toRgb(), i = new e(t).toRgb(), r = n / 100, o = {
+        r: (i.r - a.r) * r + a.r,
+        g: (i.g - a.g) * r + a.g,
+        b: (i.b - a.b) * r + a.b,
+        a: (i.a - a.a) * r + a.a
       };
       return new e(o);
     }, e.prototype.analogous = function(t, n) {
       t === void 0 && (t = 6), n === void 0 && (n = 30);
-      var a = this.toHsl(), r = 360 / n, i = [this];
-      for (a.h = (a.h - (r * t >> 1) + 720) % 360; --t; )
-        a.h = (a.h + r) % 360, i.push(new e(a));
-      return i;
+      var a = this.toHsl(), i = 360 / n, r = [this];
+      for (a.h = (a.h - (i * t >> 1) + 720) % 360; --t; )
+        a.h = (a.h + i) % 360, r.push(new e(a));
+      return r;
     }, e.prototype.complement = function() {
       var t = this.toHsl();
       return t.h = (t.h + 180) % 360, new e(t);
     }, e.prototype.monochromatic = function(t) {
       t === void 0 && (t = 6);
-      for (var n = this.toHsv(), a = n.h, r = n.s, i = n.v, o = [], l = 1 / t; t--; )
-        o.push(new e({ h: a, s: r, v: i })), i = (i + l) % 1;
+      for (var n = this.toHsv(), a = n.h, i = n.s, r = n.v, o = [], l = 1 / t; t--; )
+        o.push(new e({ h: a, s: i, v: r })), r = (r + l) % 1;
       return o;
     }, e.prototype.splitcomplement = function() {
       var t = this.toHsl(), n = t.h;
@@ -644,29 +504,29 @@ var J = (
     }, e.prototype.tetrad = function() {
       return this.polyad(4);
     }, e.prototype.polyad = function(t) {
-      for (var n = this.toHsl(), a = n.h, r = [this], i = 360 / t, o = 1; o < t; o++)
-        r.push(new e({ h: (a + o * i) % 360, s: n.s, l: n.l }));
-      return r;
+      for (var n = this.toHsl(), a = n.h, i = [this], r = 360 / t, o = 1; o < t; o++)
+        i.push(new e({ h: (a + o * r) % 360, s: n.s, l: n.l }));
+      return i;
     }, e.prototype.equals = function(t) {
       return this.toRgbString() === new e(t).toRgbString();
     }, e;
   }()
 );
-const Pt = new de("viewFadeIn", {
+const Ot = new fe("viewFadeIn", {
   "0%": {
     opacity: 0
   },
   "100%": {
     opacity: 1
   }
-}), jt = new de("viewFadeOut", {
+}), Lt = new fe("viewFadeOut", {
   "0%": {
     opacity: 1
   },
   "100%": {
     opacity: 0
   }
-}), Bt = new de("viewZoomBadgeIn", {
+}), Nt = new fe("viewZoomBadgeIn", {
   "0%": {
     transform: "scale(0.2)",
     opacity: 0
@@ -675,7 +535,7 @@ const Pt = new de("viewFadeIn", {
     transform: "scale(1)",
     opacity: 1
   }
-}), Vt = new de("viewZoomBadgeOut", {
+}), $t = new fe("viewZoomBadgeOut", {
   "0%": {
     transform: "scale(1)"
   },
@@ -683,11 +543,11 @@ const Pt = new de("viewFadeIn", {
     transform: "scale(0.2)",
     opacity: 0
   }
-}), Ye = (e) => ({
+}), Fe = (e) => ({
   position: e || "absolute",
   inset: 0
 });
-function xe(e) {
+function Se(e) {
   return {
     position: e,
     top: 0,
@@ -696,7 +556,7 @@ function xe(e) {
     insetInlineStart: 0
   };
 }
-const Yt = (e) => ({
+const Et = (e) => ({
   boxSizing: "border-box",
   margin: 0,
   padding: 0,
@@ -705,11 +565,11 @@ const Yt = (e) => ({
   lineHeight: e.lineHeight,
   listStyle: "none",
   fontFamily: e.fontFamily
-}), Wt = (e) => {
-  const { componentCls: t, modalMaskBg: n, paddingSM: a, previewOperationColorDisabled: r, motionDurationSlow: i } = e, o = new J(n).setAlpha(0.1), l = o.clone().setAlpha(0.2);
+}), Rt = (e) => {
+  const { componentCls: t, modalMaskBg: n, paddingSM: a, previewOperationColorDisabled: i, motionDurationSlow: r } = e, o = new Q(n).setAlpha(0.1), l = o.clone().setAlpha(0.2);
   return {
     [`${t}-operations`]: {
-      ...Yt(e),
+      ...Et(e),
       display: "flex",
       flexDirection: "row-reverse",
       alignItems: "center",
@@ -721,13 +581,13 @@ const Yt = (e) => ({
         marginInlineStart: a,
         padding: a,
         cursor: "pointer",
-        transition: `all ${i}`,
+        transition: `all ${r}`,
         userSelect: "none",
         "&:hover": {
           background: l.toRgbString()
         },
         "&-disabled": {
-          color: r,
+          color: i,
           pointerEvents: "none"
         },
         "&:last-of-type": {
@@ -744,8 +604,8 @@ const Yt = (e) => ({
       }
     }
   };
-}, Gt = (e) => {
-  const { modalMaskBg: t, previewOperationColorDisabled: n, zIndexPopup: a, motionDurationSlow: r } = e, i = new J(t).setAlpha(0.1), o = i.clone().setAlpha(0.2);
+}, Dt = (e) => {
+  const { modalMaskBg: t, previewOperationColorDisabled: n, zIndexPopup: a, motionDurationSlow: i } = e, r = new Q(t).setAlpha(0.1), o = r.clone().setAlpha(0.2);
   return {
     [`${e.componentCls}-switch-left, ${e.componentCls}-switch-right`]: {
       position: "fixed",
@@ -758,11 +618,11 @@ const Yt = (e) => ({
       height: e.imagePreviewSwitchSize,
       marginTop: -e.imagePreviewSwitchSize / 2,
       color: e.previewOperationColor,
-      background: i.toRgbString(),
+      background: r.toRgbString(),
       borderRadius: "50%",
       transform: "translateY(-50%)",
       cursor: "pointer",
-      transition: `all ${r}`,
+      transition: `all ${i}`,
       pointerEvents: "auto",
       userSelect: "none",
       "&:hover": {
@@ -789,24 +649,24 @@ const Yt = (e) => ({
       insetInlineEnd: e.marginSM
     }
   };
-}, _t = (e) => ({
+}, Ht = (e) => ({
   [e.componentCls]: {
     ["&-root"]: {
-      ...xe("fixed"),
+      ...Se("fixed"),
       zIndex: e.zIndexPopup,
       overflow: "auto",
       outline: 0,
       WebkitOverflowScrolling: "touch"
     },
     ["&-wrapper"]: {
-      ...xe("fixed"),
+      ...Se("fixed"),
       zIndex: e.zIndexPopup,
       overflow: "auto",
       outline: 0,
       WebkitOverflowScrolling: "touch"
     },
     ["&-mask"]: {
-      ...xe("fixed"),
+      ...Se("fixed"),
       zIndex: e.zIndexPopupBase,
       height: "100%",
       backgroundColor: e.colorBgMask
@@ -817,11 +677,11 @@ const Yt = (e) => ({
       pointerEvents: "none"
     },
     ["&-body"]: {
-      ...Ye(),
+      ...Fe(),
       overflow: "hidden"
     },
     ["&-canvas"]: {
-      ...Ye(),
+      ...Fe(),
       display: "flex",
       justifyContent: "center",
       alignItems: "center",
@@ -844,17 +704,17 @@ const Yt = (e) => ({
       pointerEvents: "auto"
     },
     ["&-fade-appear, &-fade-enter"]: {
-      animationName: Pt,
+      animationName: Ot,
       animationDuration: e.motionDurationSlow,
       animationTimingFunction: "linear"
     },
     ["&-fade-leave"]: {
-      animationName: jt,
+      animationName: Lt,
       animationDuration: e.motionDurationSlow,
       animationTimingFunction: "linear"
     },
     ["&-zoom-appear, &-zoom-enter"]: {
-      animationName: Bt,
+      animationName: Nt,
       opacity: 0,
       animationTimingFunction: e.motionEaseOutCirc,
       animationFillMode: "both",
@@ -866,7 +726,7 @@ const Yt = (e) => ({
       animationPlayState: "running"
     },
     ["&-zoom-leave"]: {
-      animationName: Vt,
+      animationName: $t,
       animationDuration: e.motionDurationSlow,
       animationTimingFunction: e.motionEaseOutBack,
       animationFillMode: "both"
@@ -884,19 +744,23 @@ const Yt = (e) => ({
     zIndex: e.zIndexPopup + 1,
     width: "100%"
   },
-  "&": [Wt(e), Gt(e)]
-}), Ut = Qe("ImageView", (e) => {
-  const t = Te(e, {
-    zIndexPopup: e.zIndexPopupBase + 80,
-    previewOperationColorDisabled: new J(e.colorTextLightSolid).setAlpha(0.25).toRgbString(),
-    modalMaskBg: new J("#000").setAlpha(0.45).toRgbString(),
-    previewOperationColor: new J(e.colorTextLightSolid).toRgbString(),
-    previewOperationSize: e.fontSizeIcon * 1.5,
-    imagePreviewSwitchSize: e.controlHeightLG,
-    iconCls: "anticon"
-  });
-  return [_t(t)];
-}), Ke = wt({
+  "&": [Rt(e), Dt(e)]
+});
+function Pt(e) {
+  return ht("ImageView", (t) => {
+    const n = gt(t, {
+      zIndexPopup: t.zIndexPopupBase + 80,
+      previewOperationColorDisabled: new Q(t.colorTextLightSolid).setAlpha(0.25).toRgbString(),
+      modalMaskBg: new Q("#000").setAlpha(0.45).toRgbString(),
+      previewOperationColor: new Q(t.colorTextLightSolid).toRgbString(),
+      previewOperationSize: t.fontSizeIcon * 1.5,
+      imagePreviewSwitchSize: t.controlHeightLG,
+      iconCls: "anticon"
+    });
+    return [Ht(n)];
+  }, e);
+}
+const Xe = pt({
   func: void 0,
   bool: void 0,
   string: void 0,
@@ -905,7 +769,7 @@ const Yt = (e) => ({
   object: void 0,
   integer: void 0
 });
-Ke.extend([{
+Xe.extend([{
   name: "looseBool",
   getter: !0,
   type: Boolean,
@@ -920,7 +784,7 @@ Ke.extend([{
   getter: !0,
   type: null
 }]);
-const B = Ke, F = {
+const B = Xe, P = {
   infinite: {
     type: Boolean,
     default: !0
@@ -936,7 +800,7 @@ const B = Ke, F = {
   getContainer: {
     type: String
   }
-}, ce = {
+}, ue = {
   previewTeleported: {
     type: Boolean,
     default: !0
@@ -945,8 +809,6 @@ const B = Ke, F = {
     type: Boolean,
     default: !0
   },
-  wrapperClassName: String,
-  wrapperStyle: { type: Object, default: void 0 },
   src: {
     type: String,
     default: ""
@@ -991,21 +853,21 @@ const B = Ke, F = {
   imageStyle: B.style,
   width: B.number,
   height: B.number,
-  zIndex: F.zIndex,
-  infinite: F.infinite,
-  getContainer: F.getContainer,
-  initialIndex: F.initialIndex
-}, Zt = {
+  zIndex: P.zIndex,
+  infinite: P.infinite,
+  getContainer: P.getContainer,
+  initialIndex: P.initialIndex
+}, Ft = {
   urlList: {
     type: Array,
     default: () => []
   },
-  teleported: ce.previewTeleported,
-  zIndex: F.zIndex,
-  initialIndex: F.initialIndex,
-  infinite: F.infinite,
-  getContainer: ce.getContainer,
-  onHideOnClickModal: ce.hideOnClickModal,
+  teleported: ue.previewTeleported,
+  zIndex: P.zIndex,
+  initialIndex: P.initialIndex,
+  infinite: P.infinite,
+  getContainer: ue.getContainer,
+  onHideOnClickModal: ue.hideOnClickModal,
   icons: {
     type: Object,
     default: () => ({})
@@ -1021,22 +883,22 @@ const B = Ke, F = {
   esc: "Escape",
   delete: "Delete",
   backspace: "Backspace"
-}, le = function(e, t, n, a = !1) {
+}, se = function(e, t, n, a = !1) {
   e && t && n && e.addEventListener(t, n, a);
-}, Ie = function(e, t, n, a = !1) {
+}, xe = function(e, t, n, a = !1) {
   e && t && n && e.removeEventListener(t, n, a);
-}, X = {
+}, _ = {
   CONTAIN: {
     name: "contain",
-    icon: c(ot, null, null)
+    icon: u(et, null, null)
   },
   ORIGINAL: {
     name: "original",
-    icon: c(st, null, null)
+    icon: u(tt, null, null)
   }
-}, Xt = function() {
+}, jt = function() {
   return !q && !!window.navigator.userAgent.match(/firefox/i);
-}, We = Xt() ? "DOMMouseScroll" : "mousewheel";
+}, je = jt() ? "DOMMouseScroll" : "mousewheel";
 function Me(e) {
   let t = !1;
   return function(...n) {
@@ -1045,105 +907,108 @@ function Me(e) {
     }));
   };
 }
-const qt = /* @__PURE__ */ _e({
-  props: Zt,
+const Bt = /* @__PURE__ */ Ve({
+  props: Ft,
   emits: ["close", "switch"],
   setup: function(e, {
     emit: t,
     expose: n
   }) {
-    var re, ie, R, Z, $e;
-    let a = null, r = null, i = null;
-    const o = Q({
+    var ae, ie, D, X, Ce;
+    let a = null, i = null, r = null;
+    const o = Ge({
       suffixCls: "image-viewer"
-    }), [l, u] = Ut(o), p = ze(!1), [v, z] = Ee(!1), [C, m] = Ee(!1), A = x(!0), d = x(e.initialIndex), Y = x(null), P = x(null), W = x(X.CONTAIN), h = x({
+    }), {
+      wrapSSR: l,
+      hashId: c
+    } = Pt(o), S = Te(!1), [p, $] = Ne(!1), [T, x] = Ne(!1), k = w(!0), h = w(e.initialIndex), Y = w(null), F = w(null), W = w(_.CONTAIN), d = w({
       scale: 1,
       deg: 0,
       offsetX: 0,
       offsetY: 0,
       enableTransition: !1
-    }), G = M(() => e.urlList.length > 1), K = M(() => d.value === 0), ee = M(() => d.value === e.urlList.length - 1), te = M(() => e.urlList[d.value]), he = M(() => {
+    }), G = L(() => e.urlList.length > 1), J = L(() => h.value === 0), K = L(() => h.value === e.urlList.length - 1), ee = L(() => e.urlList[h.value]), de = L(() => {
       const {
         scale: s,
-        deg: y,
-        offsetX: w,
-        offsetY: $,
-        enableTransition: b
-      } = h.value, I = {
-        transform: `scale(${s}) rotate(${y}deg)`,
-        transition: b ? "transform .3s" : "",
-        marginLeft: `${w}px`,
-        marginTop: `${$}px`
+        deg: m,
+        offsetX: b,
+        offsetY: C,
+        enableTransition: v
+      } = d.value, M = {
+        transform: `scale(${s}) rotate(${m}deg)`,
+        transition: v ? "transform .3s" : "",
+        marginLeft: `${b}px`,
+        marginTop: `${C}px`
       };
-      return W.value.name === X.CONTAIN.name && (I.maxWidth = I.maxHeight = "100%"), I;
-    }), ne = () => {
-      pe(), t("close"), h.value = {
+      return W.value.name === _.CONTAIN.name && (M.maxWidth = M.maxHeight = "100%"), M;
+    }), te = () => {
+      ve(), t("close"), d.value = {
         scale: 1,
         deg: 0,
         offsetX: 0,
         offsetY: 0,
         enableTransition: !1
       };
-    }, ge = (s) => {
-      p.value ? p.value = !1 : Y.value === (s == null ? void 0 : s.target) && (m(!1), d.value = e.initialIndex);
-    }, ve = () => {
+    }, he = (s) => {
+      S.value ? S.value = !1 : Y.value === (s == null ? void 0 : s.target) && (x(!1), h.value = e.initialIndex);
+    }, ge = () => {
       a = Me((s) => {
         switch (s.code) {
           case V.esc:
-            m(!1);
+            x(!1);
             break;
           case V.space:
             j();
             break;
           case V.left:
-            ae();
+            ne();
             break;
           case V.up:
-            T("zoomIn");
+            A("zoomIn");
             break;
           case V.right:
-            U();
+            Z();
             break;
           case V.down:
-            T("zoomOut");
+            A("zoomOut");
             break;
         }
-      }), r = Me((s) => {
-        (s.wheelDelta ? s.wheelDelta : -s.detail) > 0 ? T("zoomIn", {
+      }), i = Me((s) => {
+        (s.wheelDelta ? s.wheelDelta : -s.detail) > 0 ? A("zoomIn", {
           zoomRate: 0.015,
           enableTransition: !1
-        }) : T("zoomOut", {
+        }) : A("zoomOut", {
           zoomRate: 0.015,
           enableTransition: !1
         });
-      }), le(document, "keydown", a), le(document, We, r);
-    }, pe = () => {
-      Ie(document, "keydown", a), Ie(document, We, r), a = null, r = null;
-    }, _ = () => {
-      A.value = !1;
+      }), se(document, "keydown", a), se(document, je, i);
+    }, ve = () => {
+      xe(document, "keydown", a), xe(document, je, i), a = null, i = null;
+    }, U = () => {
+      k.value = !1;
     }, f = (s) => {
-      A.value = !1, s.target.alt = "加载失败";
-    }, D = ze(), L = (s) => {
-      if (A.value || s.button !== 0)
+      k.value = !1, s.target.alt = "加载失败";
+    }, E = Te(), O = (s) => {
+      if (k.value || s.button !== 0)
         return;
-      s.preventDefault(), s.stopPropagation(), clearTimeout(D.value), p.value = !0;
+      s.preventDefault(), s.stopPropagation(), clearTimeout(E.value), S.value = !0;
       const {
-        offsetX: y,
-        offsetY: w
-      } = h.value, $ = s.pageX, b = s.pageY;
-      i = Me((I) => {
-        h.value = {
-          ...h.value,
-          offsetX: y + I.pageX - $,
-          offsetY: w + I.pageY - b
+        offsetX: m,
+        offsetY: b
+      } = d.value, C = s.pageX, v = s.pageY;
+      r = Me((M) => {
+        d.value = {
+          ...d.value,
+          offsetX: m + M.pageX - C,
+          offsetY: b + M.pageY - v
         };
-      }), le(document, "mousemove", i), le(document, "mouseup", () => {
-        Ie(document, "mousemove", i), v.value && C.value && (D.value = setTimeout(() => {
-          p.value = !1;
+      }), se(document, "mousemove", r), se(document, "mouseup", () => {
+        xe(document, "mousemove", r), p.value && T.value && (E.value = setTimeout(() => {
+          S.value = !1;
         }));
       });
-    }, E = () => {
-      h.value = {
+    }, R = () => {
+      d.value = {
         scale: 1,
         deg: 0,
         offsetX: 0,
@@ -1151,176 +1016,176 @@ const qt = /* @__PURE__ */ _e({
         enableTransition: !1
       };
     }, j = () => {
-      if (A.value)
+      if (k.value)
         return;
-      const s = Object.keys(X), y = Object.values(X), w = W.value.name, b = (y.findIndex((I) => I.name === w) + 1) % s.length;
-      W.value = X[s[b]], E();
-    }, ae = () => {
-      if (K.value && !e.infinite)
+      const s = Object.keys(_), m = Object.values(_), b = W.value.name, v = (m.findIndex((M) => M.name === b) + 1) % s.length;
+      W.value = _[s[v]], R();
+    }, ne = () => {
+      if (J.value && !e.infinite)
         return;
       const s = e.urlList.length;
-      d.value = (d.value - 1 + s) % s;
-    }, U = () => {
-      if (ee.value && !e.infinite)
+      h.value = (h.value - 1 + s) % s;
+    }, Z = () => {
+      if (K.value && !e.infinite)
         return;
       const s = e.urlList.length;
-      d.value = (d.value + 1) % s;
-    }, T = (s, y = {}) => {
-      if (A.value)
+      h.value = (h.value + 1) % s;
+    }, A = (s, m = {}) => {
+      if (k.value)
         return;
       const {
-        zoomRate: w,
-        rotateDeg: $,
-        enableTransition: b
+        zoomRate: b,
+        rotateDeg: C,
+        enableTransition: v
       } = {
         zoomRate: 0.2,
         rotateDeg: 90,
         enableTransition: !0,
-        ...y
+        ...m
       };
       switch (s) {
         case "zoomOut":
-          h.value.scale > 0.2 && (h.value.scale = parseFloat((h.value.scale - w).toFixed(3)));
+          d.value.scale > 0.2 && (d.value.scale = parseFloat((d.value.scale - b).toFixed(3)));
           break;
         case "zoomIn":
-          h.value.scale = parseFloat((h.value.scale + w).toFixed(3));
+          d.value.scale = parseFloat((d.value.scale + b).toFixed(3));
           break;
         case "clocelise":
-          h.value.deg += $;
+          d.value.deg += C;
           break;
         case "anticlocelise":
-          h.value.deg -= $;
+          d.value.deg -= C;
           break;
       }
-      h.value.enableTransition = b;
-    }, me = [{
-      icon: ((re = e.icons) == null ? void 0 : re.close) || c(lt, null, null),
+      d.value.enableTransition = v;
+    }, pe = [{
+      icon: ((ae = e.icons) == null ? void 0 : ae.close) || u(nt, null, null),
       onClick: (s) => {
-        s.stopPropagation(), m(!1);
+        s.stopPropagation(), x(!1);
       },
       type: "close"
     }, {
-      icon: ((ie = e.icons) == null ? void 0 : ie.zoomIn) || c(ut, null, null),
+      icon: ((ie = e.icons) == null ? void 0 : ie.zoomIn) || u(at, null, null),
       onClick: (s) => {
-        s.stopPropagation(), T("zoomIn");
+        s.stopPropagation(), A("zoomIn");
       },
       type: "zoomIn"
     }, {
-      icon: ((R = e.icons) == null ? void 0 : R.zoomOut) || c(ct, null, null),
+      icon: ((D = e.icons) == null ? void 0 : D.zoomOut) || u(it, null, null),
       onClick: (s) => {
-        s.stopPropagation(), T("zoomOut");
+        s.stopPropagation(), A("zoomOut");
       },
       type: "zoomOut"
     }, {
-      icon: ((Z = e.icons) == null ? void 0 : Z.rotateRight) || c(ft, null, null),
+      icon: ((X = e.icons) == null ? void 0 : X.rotateRight) || u(rt, null, null),
       onClick: (s) => {
-        s.stopPropagation(), T("anticlocelise");
+        s.stopPropagation(), A("anticlocelise");
       },
       type: "rotateRight"
     }, {
-      icon: (($e = e.icons) == null ? void 0 : $e.rotateLeft) || c(dt, null, null),
+      icon: ((Ce = e.icons) == null ? void 0 : Ce.rotateLeft) || u(ot, null, null),
       onClick: (s) => {
-        s.stopPropagation(), T("clocelise");
+        s.stopPropagation(), A("clocelise");
       },
       type: "rotateLeft"
     }];
-    return ue(te, () => {
-      Ue(() => {
-        P.value.complete || (A.value = !0);
+    return le(ee, () => {
+      Ye(() => {
+        F.value.complete || (k.value = !0);
       });
-    }), ue(d, (s) => {
-      E(), t("switch", s);
-    }), ue(v, (s) => {
-      s && (C.value = s);
-    }), Xe(() => {
-      var s, y;
-      ve(), (y = (s = Y.value) == null ? void 0 : s.focus) == null || y.call(s);
+    }), le(h, (s) => {
+      R(), t("switch", s);
+    }), le(p, (s) => {
+      s && (T.value = s);
+    }), Ue(() => {
+      var s, m;
+      ge(), (m = (s = Y.value) == null ? void 0 : s.focus) == null || m.call(s);
     }), n({
-      setOpen: z
+      setOpen: $
     }), () => {
-      const s = Fe(`${o}-fade`), y = Fe(`${o}-zoom`);
-      return l(c(tt, {
+      const s = $e(`${o}-fade`), m = $e(`${o}-zoom`);
+      return l(u(_e, {
         to: e.getContainer || "body",
         disabled: !e.teleported
       }, {
-        default: () => [v.value && c("div", {
-          class: `${o}-root ${u.value}`
-        }, [c(Oe, s, {
-          default: () => [Le(c("div", {
-            class: `${o}-mask ${u.value}`
-          }, null), [[Ne, v.value && C.value]])]
-        }), c("div", {
+        default: () => [p.value && u("div", {
+          class: `${o}-root ${c.value}`
+        }, [u(ke, s, {
+          default: () => [ze(u("div", {
+            class: `${o}-mask ${c.value}`
+          }, null), [[Oe, p.value && T.value]])]
+        }), u("div", {
           ref: Y,
           tabindex: -1,
-          class: [`${o}-wrapper`, `${u.value}`],
-          onClick: (w) => e.onHideOnClickModal && ge(w)
-        }, [c(Oe, Ze(y, {
-          onAfterLeave: () => ne()
+          class: [`${o}-wrapper`, `${c.value}`],
+          onClick: (b) => e.onHideOnClickModal && he(b)
+        }, [u(ke, We(m, {
+          onAfterLeave: () => te()
         }), {
           default: () => {
-            var w, $;
-            return [Le(c("div", {
-              class: `${o}-block ${u.value}`
-            }, [c("div", {
-              class: `${o}-content ${u.value}`
-            }, [c("div", {
-              class: `${o}-body ${u.value}`
-            }, [c("div", {
-              class: `${o}-operations-wrapper ${u.value}`,
-              onClick: (b) => b.stopPropagation()
-            }, [c("ul", {
-              class: `${o}-operations ${u.value}`
-            }, [me.map(({
-              icon: b,
-              onClick: I,
-              type: be
-            }) => c("li", {
-              class: `${o}-operations-operation ${u.value}`,
-              onClick: I,
-              key: be
-            }, [nt(b, {
-              class: `${o}-operations-icon ${u.value}`
-            })]))])]), c("div", {
-              class: `${o}-canvas ${u.value}`
-            }, [e.urlList.map((b, I) => c("img", {
-              ref: P,
-              class: `${o}-img ${u.value}`,
+            var b, C;
+            return [ze(u("div", {
+              class: `${o}-block ${c.value}`
+            }, [u("div", {
+              class: `${o}-content ${c.value}`
+            }, [u("div", {
+              class: `${o}-body ${c.value}`
+            }, [u("div", {
+              class: `${o}-operations-wrapper ${c.value}`,
+              onClick: (v) => v.stopPropagation()
+            }, [u("ul", {
+              class: `${o}-operations ${c.value}`
+            }, [pe.map(({
+              icon: v,
+              onClick: M,
+              type: me
+            }) => u("li", {
+              class: `${o}-operations-operation ${c.value}`,
+              onClick: M,
+              key: me
+            }, [qe(v, {
+              class: `${o}-operations-icon ${c.value}`
+            })]))])]), u("div", {
+              class: `${o}-canvas ${c.value}`
+            }, [e.urlList.map((v, M) => u("img", {
+              ref: F,
+              class: `${o}-img ${c.value}`,
               style: {
-                ...he.value,
-                display: I === d.value ? "block" : "none"
+                ...de.value,
+                display: M === h.value ? "block" : "none"
               },
-              key: b,
-              src: b,
-              onLoad: () => _(),
-              onError: (be) => f(be),
-              onMousedown: L
-            }, null))]), G.value && c("div", {
-              class: [`${o}-switch-left`, d.value === 0 && !e.infinite ? `${o}-switch-left-disabled` : "", `${u.value}`],
-              onClick: ae
-            }, [((w = e.icons) == null ? void 0 : w.left) || c(ht, null, null)]), G.value && c("div", {
-              class: [`${o}-switch-right`, d.value === e.urlList.length - 1 && !e.infinite ? `${o}-switch-right-disabled` : "", `${u.value}`],
-              onClick: U
-            }, [(($ = e.icons) == null ? void 0 : $.right) || c(gt, null, null)])])])]), [[Ne, v.value && C.value]])];
+              key: v,
+              src: v,
+              onLoad: () => U(),
+              onError: (me) => f(me),
+              onMousedown: O
+            }, null))]), G.value && u("div", {
+              class: [`${o}-switch-left`, h.value === 0 && !e.infinite ? `${o}-switch-left-disabled` : "", `${c.value}`],
+              onClick: ne
+            }, [((b = e.icons) == null ? void 0 : b.left) || u(st, null, null)]), G.value && u("div", {
+              class: [`${o}-switch-right`, h.value === e.urlList.length - 1 && !e.infinite ? `${o}-switch-right-disabled` : "", `${c.value}`],
+              onClick: Z
+            }, [((C = e.icons) == null ? void 0 : C.right) || u(lt, null, null)])])])]), [[Oe, p.value && T.value]])];
           }
         })])])]
       }));
     };
   }
-}), Ce = {
+}), Ie = {
   width: "100%",
   height: "100%"
-}, Qt = (e) => ({
+}, Vt = (e) => ({
   [e.componentCls]: {
     display: "inline-block",
     position: "relative",
     overflow: "hidden",
     ["&-inner"]: {
-      ...Ce,
+      ...Ie,
       verticalAlign: "top",
       opacity: 1
     },
     ["&-placeholder"]: {
-      ...Ce,
+      ...Ie,
       backgroundColor: e.colorBgContainerDisabled,
       backgroundImage: "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=')",
       backgroundRepeat: "no-repeat",
@@ -1328,7 +1193,7 @@ const qt = /* @__PURE__ */ _e({
       backgroundSize: "30%"
     },
     ["&-error"]: {
-      ...Ce,
+      ...Ie,
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
@@ -1339,13 +1204,10 @@ const qt = /* @__PURE__ */ _e({
       cursor: "pointer"
     }
   }
-}), Jt = Qe("Image", (e) => {
-  const t = Te(e);
-  return [Qt(t)];
-}), Kt = (e) => e && e.nodeType === Node.ELEMENT_NODE;
-let Ge = "";
-const fe = /* @__PURE__ */ _e({
-  props: ce,
+}), Yt = (e) => e && e.nodeType === Node.ELEMENT_NODE;
+let Be = "";
+const ce = /* @__PURE__ */ Ve({
+  props: ue,
   name: "GImage",
   emits: ["error", "click", "load"],
   setup(e, {
@@ -1353,127 +1215,129 @@ const fe = /* @__PURE__ */ _e({
     emit: n,
     attrs: a
   }) {
-    const r = Q({
+    const i = Ge({
       suffixCls: "image"
-    }), [i, o] = Jt(r), l = x(), u = x(""), p = x(!1), v = x(!0), z = x(!1), C = x(null), m = x();
-    let A, d;
-    const Y = M(() => !q && e.fit ? {
+    }), {
+      wrapSSR: r,
+      hashId: o
+    } = vt("Image", [Vt], i), l = w(), c = w(""), S = w(!1), p = w(!0), $ = w(!1), T = w(null), x = w();
+    let k, h;
+    const Y = L(() => !q && e.fit ? {
       "object-fit": e.fit
-    } : {}), P = M(() => {
+    } : {}), F = L(() => {
       const {
         previewSrcList: f
       } = e;
       return Array.isArray(f) && f.length > 0;
-    }), W = M(() => {
+    }), W = L(() => {
       const {
         src: f,
-        previewSrcList: D,
-        initialIndex: L
+        previewSrcList: E,
+        initialIndex: O
       } = e;
-      if (L || L === 0)
-        return D.length >= L ? L : 0;
-      let E = 0;
-      const j = D.indexOf(f);
-      return j >= 0 && (E = j), E;
-    }), h = () => {
-      q || (v.value = !0, p.value = !1, e.src ? u.value = e.src : ne());
+      if (O || O === 0)
+        return E.length >= O ? O : 0;
+      let R = 0;
+      const j = E.indexOf(f);
+      return j >= 0 && (R = j), R;
+    }), d = () => {
+      q || (p.value = !0, S.value = !1, e.src ? c.value = e.src : te());
     };
     function G() {
-      vt(C.value, m.value) && (h(), te());
+      ut(T.value, x.value) && (d(), ee());
     }
-    const K = St(G, 200), ee = async () => {
+    const J = mt(G, 200), K = async () => {
       if (q)
         return;
-      await Ue();
+      await Ye();
       const {
         scrollContainer: f
       } = e;
-      Kt(f) ? m.value = f : pt(f) && f !== "" ? m.value = document.querySelector(f) ?? void 0 : C.value && (m.value = mt(C.value)), m.value && (A = He(m, "scroll", K), setTimeout(() => G(), 200));
-    }, te = () => {
-      q || !m.value || !K || (A(), m.value = void 0);
+      Yt(f) ? x.value = f : ct(f) && f !== "" ? x.value = document.querySelector(f) ?? void 0 : T.value && (x.value = ft(T.value)), x.value && (k = Ee(x, "scroll", J), setTimeout(() => G(), 200));
+    }, ee = () => {
+      q || !x.value || !J || (k(), x.value = void 0);
+    }, de = (f) => {
+      p.value = !1, S.value = !1, n("load", f);
+    }, te = (f) => {
+      p.value = !1, S.value = !0, n("error", f);
     }, he = (f) => {
-      v.value = !1, p.value = !1, n("load", f);
-    }, ne = (f) => {
-      v.value = !1, p.value = !0, n("error", f);
-    }, ge = (f) => {
       if (f.ctrlKey) {
         if (f.deltaY < 0)
           return f.preventDefault(), !1;
         if (f.deltaY > 0)
           return f.preventDefault(), !1;
       }
-    }, ve = () => {
-      !P.value || e.disablePreview || (d = He("wheel", ge, {
+    }, ge = () => {
+      !F.value || e.disablePreview || (h = Ee("wheel", he, {
         passive: !1
-      }), Ge = document.body.style.overflow, document.body.style.overflow = "hidden", z.value = !0);
-    }, pe = () => {
-      d == null || d(), document.body.style.overflow = Ge, z.value = !1;
+      }), Be = document.body.style.overflow, document.body.style.overflow = "hidden", $.value = !0);
+    }, ve = () => {
+      h == null || h(), document.body.style.overflow = Be, $.value = !1;
     };
-    ue(() => e.src, () => {
-      e.lazy ? (v.value = !0, p.value = !1, te(), ee()) : h();
+    le(() => e.src, () => {
+      e.lazy ? (p.value = !0, S.value = !1, ee(), K()) : d();
     });
-    const _ = (f) => bt(f) ? f + "px" : f;
-    return Xe(() => {
-      e.lazy ? ee() : h();
+    const U = (f) => dt(f) ? f + "px" : f;
+    return Ue(() => {
+      e.lazy ? K() : d();
     }), () => {
       const {
         crossorigin: f,
-        decoding: D,
-        alt: L,
-        sizes: E,
+        decoding: E,
+        alt: O,
+        sizes: R,
         srcset: j,
-        usemap: ae,
-        class: U,
-        style: T
-      } = a, me = {
+        usemap: ne,
+        class: Z,
+        style: A = {}
+      } = a, pe = {
         crossorigin: f,
-        decoding: D,
-        alt: L,
-        sizes: E,
+        decoding: E,
+        alt: O,
+        sizes: R,
         srcset: j,
-        usemap: ae,
+        usemap: ne,
         style: {
           ...Y.value,
-          height: e.height ? _(e.height) : void 0,
-          ...T
+          height: e.height ? U(e.height) : void 0
         }
-      }, re = De(t, e, "fallback"), ie = De(t, e, "placeholder");
-      return at(() => {
-        var R, Z;
-        P.value && z.value ? (R = l.value) == null || R.setOpen(!0) : (Z = l.value) == null || Z.setOpen(!1);
-      }), i(c(rt, null, [c("div", {
+      }, ae = Le(t, e, "fallback"), ie = Le(t, e, "placeholder");
+      return Qe(() => {
+        var D, X;
+        F.value && $.value ? (D = l.value) == null || D.setOpen(!0) : (X = l.value) == null || X.setOpen(!1);
+      }), r(u(Je, null, [u("div", {
         class: {
           [`${o.value}`]: !0,
-          [`${r}`]: !0,
-          [`${e.wrapperClassName}`]: e.wrapperClassName
+          [`${i}`]: !0,
+          [`${Z}`]: !!Z
         },
-        ref: (R) => C.value = R,
+        ref: (D) => T.value = D,
         style: {
-          ...e.wrapperStyle,
-          width: e.width ? _(e.width) : void 0,
-          height: e.height ? _(e.height) : void 0,
+          ...A,
+          width: e.width ? U(e.width) : void 0,
+          height: e.height ? U(e.height) : void 0,
           display: e.lazy ? "block" : void 0
         },
         onClick: () => {
           n("click");
         }
-      }, [v.value && (ie || c("div", {
-        class: `${r}-placeholder ${o.value}`
-      }, null)), p.value ? re || c("div", {
-        class: `${r}-error ${o.value}`
-      }, [it("加载失败")]) : u.value && c("img", Ze(me, {
+      }, [p.value && (ie || u("div", {
+        class: `${i}-placeholder ${o.value}`
+      }, null)), S.value ? ae || u("div", {
+        class: `${i}-error ${o.value}`
+      }, [Ke("加载失败")]) : c.value && u("img", We(pe, {
         class: {
           [`${o.value}`]: !0,
-          [`${r}-inner`]: !0,
-          [`${r}-preview`]: P.value,
-          [`${U}`]: !!U
+          [`${e.imageClassName}`]: !!e.imageClassName,
+          [`${i}-inner`]: !0,
+          [`${i}-preview`]: F.value
         },
         alt: e.alt,
-        src: u.value,
-        onLoad: he,
-        onError: ne,
-        onClick: () => ve()
-      }), null), c(qt, {
+        src: c.value,
+        onLoad: de,
+        onError: te,
+        onClick: () => ge()
+      }), null), u(Bt, {
         ref: l,
         zIndex: e.zIndex,
         infinite: e.infinite,
@@ -1481,15 +1345,15 @@ const fe = /* @__PURE__ */ _e({
         urlList: e.previewSrcList,
         getContainer: e.getContainer,
         onHideOnClickModal: e.hideOnClickModal,
-        onClose: () => pe()
+        onClose: () => ve()
       }, null)])]));
     };
   }
 });
-fe.isWImage = !0;
-fe.install = (e) => (e.component(fe.name, fe), e);
+ce.isWImage = !0;
+ce.install = (e) => (e.component(ce.name, ce), e);
 export {
-  fe as GImage,
-  qt as ImageViewer,
-  fe as default
+  ce as GImage,
+  Bt as ImageViewer,
+  ce as default
 };