@gx-design-vue/image 0.2.0-beta.2 → 0.2.0-beta.20

package/dist/{image.mjs → image.js}

@@ -1,165 +1,142 @@
-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 J, 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"
-        }
-      }
+import { createTypes as Ze } from "vue-types";
+import { createVNode as f, defineComponent as Ve, shallowRef as Te, ref as C, reactive as Xe, computed as L, watch as _, nextTick as Ye, Teleport as _e, Transition as ke, withDirectives as ze, vShow as Oe, mergeProps as We, cloneVNode as qe, watchEffect as Qe, createTextVNode as Je } from "vue";
+import { ExpandOutlined as Ke, OneToOneOutlined as et, CloseOutlined as tt, ZoomInOutlined as nt, ZoomOutOutlined as at, RotateRightOutlined as it, RotateLeftOutlined as rt, LeftOutlined as ot, RightOutlined as st } from "@ant-design/icons-vue";
+import { isServer as q, getPrefixCls as Ge, isInContainer as lt, getSlotVNode as Le, isString as ut, getScrollContainer as ct, isNumber as ft } from "@gx-design-vue/pro-utils";
+import { useState as Ne, onMountedOrActivated as dt } 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 { useThrottleFn as mt, useEventListener as Ee } from "@vueuse/core";
+const R = Ze({
+  func: void 0,
+  bool: void 0,
+  string: void 0,
+  number: void 0,
+  array: void 0,
+  object: void 0,
+  integer: void 0
+});
+R.extend([{
+  name: "looseBool",
+  getter: !0,
+  type: Boolean,
+  default: void 0
+}, {
+  name: "style",
+  getter: !0,
+  type: [String, Object],
+  default: void 0
+}, {
+  name: "VueNode",
+  getter: !0,
+  type: null
+}]);
+const D = {
+  infinite: {
+    type: Boolean,
+    default: !0
+  },
+  zIndex: {
+    type: Number,
+    default: 2e3
+  },
+  initialIndex: {
+    type: Number,
+    default: 0
+  },
+  getContainer: {
+    type: String
+  }
+}, ue = {
+  previewTeleported: {
+    type: Boolean,
+    default: !0
+  },
+  hideOnClickModal: {
+    type: Boolean,
+    default: !0
+  },
+  src: {
+    type: String,
+    default: ""
+  },
+  alt: {
+    type: String,
+    default: ""
+  },
+  fit: {
+    type: String,
+    default: "contain"
+  },
+  lazy: R.bool,
+  scrollContainer: {
+    type: [String, Object]
+  },
+  placeholder: {
+    type: [Function, Object],
+    default: () => {
     }
-  };
-}, 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"
+  },
+  fallback: {
+    type: [Function, Object],
+    default: () => {
     }
-  }
-}), 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];
+  },
+  onLoad: {
+    type: Function
+  },
+  onError: {
+    type: Function
+  },
+  onClick: {
+    type: Function
+  },
+  disablePreview: R.bool,
+  previewSrcList: {
+    type: Array,
+    default: () => []
+  },
+  imageClassName: R.string,
+  imageStyle: R.style,
+  width: R.number,
+  height: R.number,
+  zIndex: D.zIndex,
+  infinite: D.infinite,
+  getContainer: D.getContainer,
+  initialIndex: {
+    ...D.initialIndex,
+    default: () => {
     }
-  }), 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;
+}, pt = {
+  urlList: {
+    type: Array,
+    default: () => []
+  },
+  teleported: ue.previewTeleported,
+  zIndex: D.zIndex,
+  initialIndex: D.initialIndex,
+  infinite: D.infinite,
+  getContainer: ue.getContainer,
+  onHideOnClickModal: ue.hideOnClickModal,
+  icons: {
+    type: Object,
+    default: () => ({})
   }
-}
-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 Je(e, t) {
-  return (n) => {
-    const a = J({}), r = M(() => et(n) ? n == null ? void 0 : n.value : n || a), { token: i, hashId: o, theme: l } = At(), u = M(() => J({})), 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: J({
-            isPor: !0
-          })
-        }), d = t(A, {
-          hashId: o.value,
-          prefixCls: r.value
-        });
-        return C(e, {}), [xt(i.value, r.value), d];
-      }),
-      o
-    ];
-  };
-}
-function g(e, t) {
-  kt(e) && (e = "100%");
-  var n = Tt(e);
+};
+function v(e, t) {
+  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) {
   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 Qe(e) {
+function Ue(e) {
   return e = parseFloat(e), (isNaN(e) || e < 0 || e > 1) && (e = 1), e;
 }
 function se(e) {
@@ -168,108 +145,108 @@ function se(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
+    r: v(e, 255) * 255,
+    g: v(t, 255) * 255,
+    b: v(n, 255) * 255
   };
 }
-function Pe(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;
+function Re(e, t, n) {
+  e = v(e, 255), t = v(t, 255), n = v(n, 255);
+  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;
-  if (e = g(e, 360), t = g(t, 100), n = g(n, 100), t === 0)
-    r = n, i = n, a = n;
+function St(e, t, n) {
+  var a, i, r;
+  if (e = v(e, 360), t = v(t, 100), n = v(n, 100), t === 0)
+    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) {
-  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;
+function De(e, t, n) {
+  e = v(e, 255), t = v(t, 255), n = v(n, 255);
+  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) {
-  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 };
+function xt(e, t, n) {
+  e = v(e, 360) * 6, t = v(t, 100), n = v(n, 100);
+  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 w(e) / 255;
 }
-function S(e) {
+function w(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 +396,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 = Qe(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" && (O(e.r) && O(e.g) && O(e.b) ? (t = wt(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), i = se(e.v), t = xt(e.h, a, i), o = !0, l = "hsv") : O(e.h) && O(e.s) && O(e.l) && (a = se(e.s), r = se(e.l), t = St(e.h, a, r), o = !0, l = "hsl"), Object.prototype.hasOwnProperty.call(e, "a") && (n = e.a)), n = Ue(n), {
     ok: o,
     format: e.format || l,
     r: Math.min(255, Math.max(t.r, 0)),
@@ -430,54 +407,54 @@ 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*\\)?"), T = {
   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 = T.rgb.exec(e);
+  return n ? { r: n[1], g: n[2], b: n[3] } : (n = T.rgba.exec(e), n ? { r: n[1], g: n[2], b: n[3], a: n[4] } : (n = T.hsl.exec(e), n ? { h: n[1], s: n[2], l: n[3] } : (n = T.hsla.exec(e), n ? { h: n[1], s: n[2], l: n[3], a: n[4] } : (n = T.hsv.exec(e), n ? { h: n[1], s: n[2], v: n[3] } : (n = T.hsva.exec(e), n ? { h: n[1], s: n[2], v: n[3], a: n[4] } : (n = T.hex8.exec(e), n ? {
+    r: w(n[1]),
+    g: w(n[2]),
+    b: w(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 = T.hex6.exec(e), n ? {
+    r: w(n[1]),
+    g: w(n[2]),
+    b: w(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 = T.hex4.exec(e), n ? {
+    r: w(n[1] + n[1]),
+    g: w(n[2] + n[2]),
+    b: w(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 = T.hex3.exec(e), n ? {
+    r: w(n[1] + n[1]),
+    g: w(n[2] + n[2]),
+    b: w(n[3] + n[3]),
     format: t ? "name" : "hex"
   } : !1)))))))));
 }
 function O(e) {
-  return !!k.CSS_UNIT.exec(String(e));
+  return !!T.CSS_UNIT.exec(String(e));
 }
 var Q = (
   /** @class */
@@ -487,9 +464,9 @@ var Q = (
       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,35 +476,37 @@ var Q = (
       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 = Qe(t), this.roundA = Math.round(100 * this.a) / 100, this;
+      return this.a = Ue(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.toHexShortString = function(t) {
+      return t === void 0 && (t = !1), this.a === 1 ? this.toHexString(t) : this.toHex8String(t);
     }, e.prototype.toRgb = function() {
       return {
         r: Math.round(this.r),
@@ -540,7 +519,7 @@ var Q = (
       return this.a === 1 ? "rgb(".concat(t, ", ").concat(n, ", ").concat(a, ")") : "rgba(".concat(t, ", ").concat(n, ", ").concat(a, ", ").concat(this.roundA, ")");
     }, e.prototype.toPercentageRgb = function() {
       var t = function(n) {
-        return "".concat(Math.round(g(n, 255) * 100), "%");
+        return "".concat(Math.round(v(n, 255) * 100), "%");
       };
       return {
         r: t(this.r),
@@ -550,7 +529,7 @@ var Q = (
       };
     }, e.prototype.toPercentageRgbString = function() {
       var t = function(n) {
-        return Math.round(g(n, 255) * 100);
+        return Math.round(v(n, 255) * 100);
       };
       return this.a === 1 ? "rgb(".concat(t(this.r), "%, ").concat(t(this.g), "%, ").concat(t(this.b), "%)") : "rgba(".concat(t(this.r), "%, ").concat(t(this.g), "%, ").concat(t(this.b), "%, ").concat(this.roundA, ")");
     }, e.prototype.toName = function() {
@@ -558,17 +537,17 @@ var Q = (
         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() {
@@ -604,26 +583,26 @@ var Q = (
       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;
@@ -633,40 +612,41 @@ var Q = (
         new e({ h: (n + 216) % 360, s: t.s, l: t.l })
       ];
     }, e.prototype.onBackground = function(t) {
-      var n = this.toRgb(), a = new e(t).toRgb();
+      var n = this.toRgb(), a = new e(t).toRgb(), i = n.a + a.a * (1 - n.a);
       return new e({
-        r: a.r + (n.r - a.r) * n.a,
-        g: a.g + (n.g - a.g) * n.a,
-        b: a.b + (n.b - a.b) * n.a
+        r: (n.r * n.a + a.r * a.a * (1 - n.a)) / i,
+        g: (n.g * n.a + a.g * a.a * (1 - n.a)) / i,
+        b: (n.b * n.a + a.b * a.a * (1 - n.a)) / i,
+        a: i
       });
     }, e.prototype.triad = function() {
       return this.polyad(3);
     }, 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 +655,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 +663,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 +676,7 @@ function xe(e) {
     insetInlineStart: 0
   };
 }
-const Yt = (e) => ({
+const Et = (e) => ({
   boxSizing: "border-box",
   margin: 0,
   padding: 0,
@@ -705,11 +685,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 Q(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 +701,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 +724,8 @@ const Yt = (e) => ({
       }
     }
   };
-}, Gt = (e) => {
-  const { modalMaskBg: t, previewOperationColorDisabled: n, zIndexPopup: a, motionDurationSlow: r } = e, i = new Q(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,17 +738,17 @@ 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": {
         background: o.toRgbString()
       },
-      ["&-disabled"]: {
+      "&-disabled": {
         "&, &:hover": {
           color: n,
           background: "transparent",
@@ -789,39 +769,39 @@ const Yt = (e) => ({
       insetInlineEnd: e.marginSM
     }
   };
-}, _t = (e) => ({
+}, Ht = (e) => ({
   [e.componentCls]: {
-    ["&-root"]: {
-      ...xe("fixed"),
+    "&-root": {
+      ...Se("fixed"),
       zIndex: e.zIndexPopup,
       overflow: "auto",
       outline: 0,
       WebkitOverflowScrolling: "touch"
     },
-    ["&-wrapper"]: {
-      ...xe("fixed"),
+    "&-wrapper": {
+      ...Se("fixed"),
       zIndex: e.zIndexPopup,
       overflow: "auto",
       outline: 0,
       WebkitOverflowScrolling: "touch"
     },
-    ["&-mask"]: {
-      ...xe("fixed"),
+    "&-mask": {
+      ...Se("fixed"),
       zIndex: e.zIndexPopupBase,
       height: "100%",
       backgroundColor: e.colorBgMask
     },
-    ["&-block"]: {
+    "&-block": {
       height: "100%",
       textAlign: "center",
       pointerEvents: "none"
     },
-    ["&-body"]: {
-      ...Ye(),
+    "&-body": {
+      ...Fe(),
       overflow: "hidden"
     },
-    ["&-canvas"]: {
-      ...Ye(),
+    "&-canvas": {
+      ...Fe(),
       display: "flex",
       justifyContent: "center",
       alignItems: "center",
@@ -833,7 +813,7 @@ const Yt = (e) => ({
         content: '""'
       }
     },
-    ["&-img"]: {
+    "&-img": {
       maxWidth: "100%",
       maxHeight: "100%",
       verticalAlign: "middle",
@@ -843,18 +823,18 @@ const Yt = (e) => ({
       userSelect: "none",
       pointerEvents: "auto"
     },
-    ["&-fade-appear, &-fade-enter"]: {
-      animationName: Pt,
+    "&-fade-appear, &-fade-enter": {
+      animationName: Ot,
       animationDuration: e.motionDurationSlow,
       animationTimingFunction: "linear"
     },
-    ["&-fade-leave"]: {
-      animationName: jt,
+    "&-fade-leave": {
+      animationName: Lt,
       animationDuration: e.motionDurationSlow,
       animationTimingFunction: "linear"
     },
-    ["&-zoom-appear, &-zoom-enter"]: {
-      animationName: Bt,
+    "&-zoom-appear, &-zoom-enter": {
+      animationName: Nt,
       opacity: 0,
       animationTimingFunction: e.motionEaseOutCirc,
       animationFillMode: "both",
@@ -862,11 +842,11 @@ const Yt = (e) => ({
       animationDuration: e.motionDurationSlow,
       userSelect: "none"
     },
-    ["&-zoom-enter-active"]: {
+    "&-zoom-enter-active": {
       animationPlayState: "running"
     },
-    ["&-zoom-leave"]: {
-      animationName: Vt,
+    "&-zoom-leave": {
+      animationName: $t,
       animationDuration: e.motionDurationSlow,
       animationTimingFunction: e.motionEaseOutBack,
       animationFillMode: "both"
@@ -884,159 +864,55 @@ const Yt = (e) => ({
     zIndex: e.zIndexPopup + 1,
     width: "100%"
   },
-  "&": [Wt(e), Gt(e)]
-}), Ut = Je("ImageView", (e) => {
-  const t = Te(e, {
-    zIndexPopup: e.zIndexPopupBase + 80,
-    previewOperationColorDisabled: new Q(e.colorTextLightSolid).setAlpha(0.25).toRgbString(),
-    modalMaskBg: new Q("#000").setAlpha(0.45).toRgbString(),
-    previewOperationColor: new Q(e.colorTextLightSolid).toRgbString(),
-    previewOperationSize: e.fontSizeIcon * 1.5,
-    imagePreviewSwitchSize: e.controlHeightLG,
-    iconCls: "anticon"
-  });
-  return [_t(t)];
-}), Ke = wt({
-  func: void 0,
-  bool: void 0,
-  string: void 0,
-  number: void 0,
-  array: void 0,
-  object: void 0,
-  integer: void 0
+  "&": [Rt(e), Dt(e)]
 });
-Ke.extend([{
-  name: "looseBool",
-  getter: !0,
-  type: Boolean,
-  default: void 0
-}, {
-  name: "style",
-  getter: !0,
-  type: [String, Object],
-  default: void 0
-}, {
-  name: "VueNode",
-  getter: !0,
-  type: null
-}]);
-const B = Ke, F = {
-  infinite: {
-    type: Boolean,
-    default: !0
-  },
-  zIndex: {
-    type: Number,
-    default: 2e3
-  },
-  initialIndex: {
-    type: Number,
-    default: 0
-  },
-  getContainer: {
-    type: String
-  }
-}, ce = {
-  previewTeleported: {
-    type: Boolean,
-    default: !0
-  },
-  hideOnClickModal: {
-    type: Boolean,
-    default: !0
-  },
-  wrapperClassName: String,
-  wrapperStyle: { type: Object, default: void 0 },
-  src: {
-    type: String,
-    default: ""
-  },
-  alt: {
-    type: String,
-    default: ""
-  },
-  fit: {
-    type: String,
-    default: "contain"
-  },
-  lazy: B.bool,
-  scrollContainer: {
-    type: [String, Object]
-  },
-  placeholder: {
-    type: [Function, Object],
-    default: () => {
-    }
-  },
-  fallback: {
-    type: [Function, Object],
-    default: () => {
-    }
-  },
-  onLoad: {
-    type: Function
-  },
-  onError: {
-    type: Function
-  },
-  onClick: {
-    type: Function
-  },
-  disablePreview: B.bool,
-  previewSrcList: {
-    type: Array,
-    default: () => []
-  },
-  imageClassName: B.string,
-  imageStyle: B.style,
-  width: B.number,
-  height: B.number,
-  zIndex: F.zIndex,
-  infinite: F.infinite,
-  getContainer: F.getContainer,
-  initialIndex: F.initialIndex
-}, Zt = {
-  urlList: {
-    type: Array,
-    default: () => []
-  },
-  teleported: ce.previewTeleported,
-  zIndex: F.zIndex,
-  initialIndex: F.initialIndex,
-  infinite: F.infinite,
-  getContainer: ce.getContainer,
-  onHideOnClickModal: ce.hideOnClickModal,
-  icons: {
-    type: Object,
-    default: () => ({})
-  }
-}, V = {
+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(),
+      // FIXME: Shared Token
+      previewOperationColor: new Q(t.colorTextLightSolid).toRgbString(),
+      previewOperationSize: t.fontSizeIcon * 1.5,
+      // FIXME: fontSizeIconLG
+      imagePreviewSwitchSize: t.controlHeightLG,
+      iconCls: "anticon"
+    });
+    return [Ht(n)];
+  }, e);
+}
+const Y = {
   tab: "Tab",
   enter: "Enter",
   space: "Space",
   left: "ArrowLeft",
+  // 37
   up: "ArrowUp",
+  // 38
   right: "ArrowRight",
+  // 39
   down: "ArrowDown",
+  // 40
   esc: "Escape",
   delete: "Delete",
   backspace: "Backspace"
 }, le = 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: f(Ke, null, null)
   },
   ORIGINAL: {
     name: "original",
-    icon: c(st, null, null)
+    icon: f(et, null, null)
   }
-}, Xt = function() {
+}, Ft = function() {
   return !q && !!window.navigator.userAgent.match(/firefox/i);
-}, We = Xt() ? "DOMMouseScroll" : "mousewheel";
+}, je = Ft() ? "DOMMouseScroll" : "mousewheel";
 function Me(e) {
   let t = !1;
   return function(...n) {
@@ -1045,105 +921,56 @@ function Me(e) {
     }));
   };
 }
-const qt = /* @__PURE__ */ _e({
-  props: Zt,
+const jt = /* @__PURE__ */ Ve({
+  props: pt,
   emits: ["close", "switch"],
-  setup: function(e, {
+  setup: (e, {
     emit: t,
     expose: n
-  }) {
-    var re, ie, R, Z, $e;
-    let a = null, r = null, i = null;
-    const o = J({
+  }) => {
+    var ie, re, E, Z, 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({
-      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(() => {
+    }), {
+      wrapSSR: l,
+      hashId: c
+    } = Pt(o), S = Te(!1), [p, $] = Ne(!1), [k, x] = Ne(!1), z = C(!0), h = C(e.initialIndex), P = C(null), F = C(null), W = C(X.CONTAIN), m = Xe({
+      transform: {
+        scale: 1,
+        deg: 0,
+        offsetX: 0,
+        offsetY: 0,
+        enableTransition: !1
+      }
+    }), J = L(() => e.urlList.length > 1), G = L(() => h.value === 0), K = L(() => h.value === e.urlList.length - 1), ee = L(() => e.urlList[h.value]), te = L(() => {
       const {
         scale: s,
-        deg: y,
-        offsetX: w,
-        offsetY: $,
+        deg: I,
+        offsetX: d,
+        offsetY: y,
         enableTransition: b
-      } = h.value, I = {
-        transform: `scale(${s}) rotate(${y}deg)`,
+      } = m.transform, A = {
+        transform: `scale(${s}) rotate(${I}deg)`,
         transition: b ? "transform .3s" : "",
-        marginLeft: `${w}px`,
-        marginTop: `${$}px`
+        marginLeft: `${d}px`,
+        marginTop: `${y}px`
       };
-      return W.value.name === X.CONTAIN.name && (I.maxWidth = I.maxHeight = "100%"), I;
+      return W.value.name === X.CONTAIN.name && (A.maxWidth = A.maxHeight = "100%"), A;
     }), ne = () => {
-      pe(), t("close"), h.value = {
+      xe(document, "keydown", a), xe(document, je, i), a = null, i = null;
+    }, de = () => {
+      ne(), t("close"), m.transform = {
         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 = () => {
-      a = Me((s) => {
-        switch (s.code) {
-          case V.esc:
-            m(!1);
-            break;
-          case V.space:
-            j();
-            break;
-          case V.left:
-            ae();
-            break;
-          case V.up:
-            T("zoomIn");
-            break;
-          case V.right:
-            U();
-            break;
-          case V.down:
-            T("zoomOut");
-            break;
-        }
-      }), r = Me((s) => {
-        (s.wheelDelta ? s.wheelDelta : -s.detail) > 0 ? T("zoomIn", {
-          zoomRate: 0.015,
-          enableTransition: !1
-        }) : T("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;
-    }, f = (s) => {
-      A.value = !1, s.target.alt = "加载失败";
-    }, D = ze(), L = (s) => {
-      if (A.value || s.button !== 0)
-        return;
-      s.preventDefault(), s.stopPropagation(), clearTimeout(D.value), p.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
-        };
-      }), le(document, "mousemove", i), le(document, "mouseup", () => {
-        Ie(document, "mousemove", i), v.value && C.value && (D.value = setTimeout(() => {
-          p.value = !1;
-        }));
-      });
-    }, E = () => {
-      h.value = {
+    }, he = (s) => {
+      S.value ? S.value = !1 : P.value === (s == null ? void 0 : s.target) && (x(!1), h.value = e.initialIndex);
+    }, ae = () => {
+      m.transform = {
         scale: 1,
         deg: 0,
         offsetX: 0,
@@ -1151,329 +978,381 @@ const qt = /* @__PURE__ */ _e({
         enableTransition: !1
       };
     }, j = () => {
-      if (A.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)
-        return;
+      if (G.value && !e.infinite) return;
       const s = e.urlList.length;
-      d.value = (d.value - 1 + s) % s;
-    }, U = () => {
-      if (ee.value && !e.infinite)
-        return;
+      h.value = (h.value - 1 + s) % s;
+    }, u = () => {
+      if (K.value && !e.infinite) return;
       const s = e.urlList.length;
-      d.value = (d.value + 1) % s;
-    }, T = (s, y = {}) => {
-      if (A.value)
-        return;
+      h.value = (h.value + 1) % s;
+    }, M = () => {
+      if (z.value) return;
+      const s = Object.keys(X), I = Object.values(X), d = W.value.name, b = (I.findIndex((A) => A.name === d) + 1) % s.length;
+      W.value = X[s[b]], ae();
+    }, g = (s, I = {}) => {
+      if (z.value) return;
       const {
-        zoomRate: w,
-        rotateDeg: $,
+        zoomRate: d,
+        rotateDeg: y,
         enableTransition: b
       } = {
         zoomRate: 0.2,
         rotateDeg: 90,
         enableTransition: !0,
-        ...y
+        ...I
       };
       switch (s) {
         case "zoomOut":
-          h.value.scale > 0.2 && (h.value.scale = parseFloat((h.value.scale - w).toFixed(3)));
+          m.transform.scale > 0.2 && (m.transform.scale = Number.parseFloat((m.transform.scale - d).toFixed(3)));
           break;
         case "zoomIn":
-          h.value.scale = parseFloat((h.value.scale + w).toFixed(3));
+          m.transform.scale = Number.parseFloat((m.transform.scale + d).toFixed(3));
           break;
         case "clocelise":
-          h.value.deg += $;
+          m.transform.deg += y;
           break;
         case "anticlocelise":
-          h.value.deg -= $;
+          m.transform.deg -= y;
           break;
       }
-      h.value.enableTransition = b;
+      m.transform.enableTransition = b;
+    }, B = () => {
+      a = Me((s) => {
+        switch (s.code) {
+          case Y.esc:
+            x(!1);
+            break;
+          case Y.space:
+            M();
+            break;
+          case Y.left:
+            j();
+            break;
+          case Y.up:
+            g("zoomIn");
+            break;
+          case Y.right:
+            u();
+            break;
+          case Y.down:
+            g("zoomOut");
+            break;
+        }
+      }), i = Me((s) => {
+        (s.wheelDelta ? s.wheelDelta : -s.detail) > 0 ? g("zoomIn", {
+          zoomRate: 0.015,
+          enableTransition: !1
+        }) : g("zoomOut", {
+          zoomRate: 0.015,
+          enableTransition: !1
+        });
+      }), le(document, "keydown", a), le(document, je, i);
+    }, V = () => {
+      z.value = !1;
+    }, ge = (s) => {
+      z.value = !1, s.target.alt = "加载失败";
+    }, U = Te(), ve = (s) => {
+      if (z.value || s.button !== 0) return;
+      s.preventDefault(), s.stopPropagation(), clearTimeout(U.value), S.value = !0;
+      const {
+        offsetX: I,
+        offsetY: d
+      } = m.transform, y = s.pageX, b = s.pageY;
+      r = Me((A) => {
+        m.transform = {
+          ...m.transform,
+          offsetX: I + A.pageX - y,
+          offsetY: d + A.pageY - b
+        };
+      }), le(document, "mousemove", r), le(document, "mouseup", () => {
+        xe(document, "mousemove", r), p.value && k.value && (U.value = setTimeout(() => {
+          S.value = !1;
+        }));
+      });
     }, me = [{
-      icon: ((re = e.icons) == null ? void 0 : re.close) || c(lt, null, null),
+      icon: ((ie = e.icons) == null ? void 0 : ie.close) || f(tt, 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: ((re = e.icons) == null ? void 0 : re.zoomIn) || f(nt, null, null),
       onClick: (s) => {
-        s.stopPropagation(), T("zoomIn");
+        s.stopPropagation(), g("zoomIn");
       },
       type: "zoomIn"
     }, {
-      icon: ((R = e.icons) == null ? void 0 : R.zoomOut) || c(ct, null, null),
+      icon: ((E = e.icons) == null ? void 0 : E.zoomOut) || f(at, null, null),
       onClick: (s) => {
-        s.stopPropagation(), T("zoomOut");
+        s.stopPropagation(), g("zoomOut");
       },
       type: "zoomOut"
     }, {
-      icon: ((Z = e.icons) == null ? void 0 : Z.rotateRight) || c(ft, null, null),
+      icon: ((Z = e.icons) == null ? void 0 : Z.rotateRight) || f(it, null, null),
       onClick: (s) => {
-        s.stopPropagation(), T("anticlocelise");
+        s.stopPropagation(), g("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) || f(rt, null, null),
       onClick: (s) => {
-        s.stopPropagation(), T("clocelise");
+        s.stopPropagation(), g("clocelise");
       },
       type: "rotateLeft"
     }];
-    return ue(te, () => {
-      Ue(() => {
-        P.value.complete || (A.value = !0);
+    return _(ee, () => {
+      Ye(() => {
+        F.value.complete || (z.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);
+    }), _(h, (s) => {
+      ae(), t("switch", s);
+    }), _(p, (s) => {
+      s && (k.value = s);
+    }), _([() => p.value, () => P.value], ([s, I]) => {
+      var d, y;
+      s && I && (B(), (y = (d = P.value) == null ? void 0 : d.focus) == null || y.call(d));
     }), n({
-      setOpen: z
+      setOpen: $
     }), () => {
-      const s = Fe(`${o}-fade`), y = Fe(`${o}-zoom`);
-      return l(c(tt, {
+      const s = $e(`${o}-fade`), I = $e(`${o}-zoom`);
+      return l(f(_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", {
-          ref: Y,
+        default: () => [p.value && f("div", {
+          class: `${o}-root ${c.value}`
+        }, [f(ke, s, {
+          default: () => [ze(f("div", {
+            class: `${o}-mask ${c.value}`
+          }, null), [[Oe, p.value && k.value]])]
+        }), f("div", {
+          ref: P,
           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: (d) => e.onHideOnClickModal && he(d)
+        }, [f(ke, We(I, {
+          onAfterLeave: () => de()
         }), {
           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}`,
+            var d, y;
+            return [ze(f("div", {
+              class: `${o}-block ${c.value}`
+            }, [f("div", {
+              class: `${o}-content ${c.value}`
+            }, [f("div", {
+              class: `${o}-body ${c.value}`
+            }, [f("div", {
+              class: `${o}-operations-wrapper ${c.value}`,
               onClick: (b) => b.stopPropagation()
-            }, [c("ul", {
-              class: `${o}-operations ${u.value}`
+            }, [f("ul", {
+              class: `${o}-operations ${c.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}`,
+              onClick: A,
+              type: pe
+            }) => f("li", {
+              class: `${o}-operations-operation ${c.value}`,
+              onClick: A,
+              key: pe
+            }, [qe(b, {
+              class: `${o}-operations-icon ${c.value}`
+            })]))])]), f("div", {
+              class: `${o}-canvas ${c.value}`
+            }, [e.urlList.map((b, A) => f("img", {
+              ref: F,
+              class: `${o}-img ${c.value}`,
               style: {
-                ...he.value,
-                display: I === d.value ? "block" : "none"
+                ...te.value,
+                display: A === 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]])];
+              onLoad: () => V(),
+              onError: (pe) => ge(pe),
+              onMousedown: ve
+            }, null))]), J.value && f("div", {
+              class: [`${o}-switch-left`, h.value === 0 && !e.infinite ? `${o}-switch-left-disabled` : "", `${c.value}`],
+              onClick: () => j()
+            }, [((d = e.icons) == null ? void 0 : d.left) || f(ot, null, null)]), J.value && f("div", {
+              class: [`${o}-switch-right`, h.value === e.urlList.length - 1 && !e.infinite ? `${o}-switch-right-disabled` : "", `${c.value}`],
+              onClick: () => u()
+            }, [((y = e.icons) == null ? void 0 : y.right) || f(st, null, null)])])])]), [[Oe, p.value && k.value]])];
           }
         })])])]
       }));
     };
   }
-}), Ce = {
+}), Ie = {
   width: "100%",
   height: "100%"
-}, Jt = (e) => ({
+}, Bt = (e) => ({
   [e.componentCls]: {
     display: "inline-block",
     position: "relative",
     overflow: "hidden",
-    ["&-inner"]: {
-      ...Ce,
+    "&-inner": {
+      ...Ie,
       verticalAlign: "top",
       opacity: 1
     },
-    ["&-placeholder"]: {
-      ...Ce,
+    "&-placeholder": {
+      ...Ie,
       backgroundColor: e.colorBgContainerDisabled,
       backgroundImage: "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=')",
       backgroundRepeat: "no-repeat",
       backgroundPosition: "center center",
       backgroundSize: "30%"
     },
-    ["&-error"]: {
-      ...Ce,
+    "&-error": {
+      ...Ie,
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
       color: e.colorText,
       backgroundColor: e.colorBgContainerDisabled
     },
-    ["&-preview"]: {
+    "&-preview": {
       cursor: "pointer"
     }
   }
-}), Qt = Je("Image", (e) => {
-  const t = Te(e);
-  return [Jt(t)];
-}), Kt = (e) => e && e.nodeType === Node.ELEMENT_NODE;
-let Ge = "";
-const fe = /* @__PURE__ */ _e({
-  props: ce,
+}), Vt = (e) => e && e.nodeType === Node.ELEMENT_NODE;
+let Be = "";
+const ce = /* @__PURE__ */ Ve({
+  props: ue,
   name: "GImage",
   emits: ["error", "click", "load"],
+  slots: Object,
   setup(e, {
     slots: t,
     emit: n,
     attrs: a
   }) {
-    const r = J({
+    const i = Ge({
       suffixCls: "image"
-    }), [i, o] = Qt(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", [Bt], i), l = C(), c = C(""), S = C(!1), p = C(!0), $ = C(!1), k = C(null), x = C();
+    let z, h;
+    const P = L(() => !q && e.fit ? {
       "object-fit": e.fit
-    } : {}), P = M(() => {
+    } : {}), F = L(() => {
       const {
-        previewSrcList: f
+        previewSrcList: u
       } = e;
-      return Array.isArray(f) && f.length > 0;
-    }), W = M(() => {
+      return Array.isArray(u) && u.length > 0;
+    }), W = L(() => {
       const {
-        src: f,
-        previewSrcList: D,
-        initialIndex: L
+        src: u,
+        previewSrcList: M,
+        initialIndex: g
       } = 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 (g || g === 0) return M.length >= g ? g : 0;
+      let B = 0;
+      const V = M.indexOf(u);
+      return V >= 0 && (B = V), B;
+    }), m = (u) => {
+      c.value = e.src, p.value = !1, S.value = !1, n("load", u);
+    }, J = (u) => {
+      p.value = !1, S.value = !0, n("error", u);
+    }, G = () => {
+      if (q) return;
+      p.value = !0, S.value = !1;
+      const u = new Image();
+      u.onload = (M) => m(M), u.onerror = J, Object.keys(a || {}).forEach((M) => {
+        if (M.toLowerCase() === "onload") return;
+        const g = (a || {})[M];
+        u.setAttribute(M, g);
+      }), u.src = e.src;
+    }, K = mt(te, 200), ee = () => {
+      q || !x.value || !K || (z(), x.value = void 0);
     };
-    function G() {
-      vt(C.value, m.value) && (h(), te());
+    function te() {
+      lt(k.value, x.value) && (G(), ee());
     }
-    const K = St(G, 200), ee = async () => {
-      if (q)
-        return;
-      await Ue();
+    const ne = async () => {
+      if (q) return;
+      await Ye();
       const {
-        scrollContainer: f
+        scrollContainer: u
       } = 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);
-    }, 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;
+      Vt(u) ? x.value = u : ut(u) && u !== "" ? x.value = document.querySelector(u) ?? void 0 : k.value && (x.value = ct(k.value)), x.value && (z = Ee(x, "scroll", K), setTimeout(() => te(), 200));
+    }, de = (u) => {
+      if (u.ctrlKey) {
+        if (u.deltaY < 0)
+          return u.preventDefault(), !1;
+        if (u.deltaY > 0)
+          return u.preventDefault(), !1;
       }
-    }, ve = () => {
-      !P.value || e.disablePreview || (d = He("wheel", ge, {
+    }, he = () => {
+      !F.value || e.disablePreview || (h = Ee("wheel", de, {
         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);
+    }, ae = () => {
+      h == null || h(), document.body.style.overflow = Be, $.value = !1;
     };
-    ue(() => e.src, () => {
-      e.lazy ? (v.value = !0, p.value = !1, te(), ee()) : h();
+    _(() => e.src, () => {
+      e.lazy ? (p.value = !0, S.value = !1, ee(), ne()) : G();
     });
-    const _ = (f) => bt(f) ? f + "px" : f;
-    return Xe(() => {
-      e.lazy ? ee() : h();
+    const j = (u) => ft(u) ? u + "px" : u;
+    return dt(() => {
+      e.lazy ? ne() : G();
     }), () => {
       const {
-        crossorigin: f,
-        decoding: D,
-        alt: L,
-        sizes: E,
-        srcset: j,
-        usemap: ae,
+        crossorigin: u,
+        decoding: M,
+        alt: g,
+        sizes: B,
+        srcset: V,
+        usemap: ge,
         class: U,
-        style: T
+        style: ve = {}
       } = a, me = {
-        crossorigin: f,
-        decoding: D,
-        alt: L,
-        sizes: E,
-        srcset: j,
-        usemap: ae,
+        crossorigin: u,
+        decoding: M,
+        alt: g,
+        sizes: B,
+        srcset: V,
+        usemap: ge,
         style: {
-          ...Y.value,
-          height: e.height ? _(e.height) : void 0,
-          ...T
+          ...P.value,
+          height: e.height ? j(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", {
+      }, ie = Le(t, e, "fallback"), re = Le(t, e, "placeholder");
+      return Qe(() => {
+        var E, Z;
+        F.value && $.value ? (E = l.value) == null || E.setOpen(!0) : (Z = l.value) == null || Z.setOpen(!1);
+      }), r(f("div", {
         class: {
           [`${o.value}`]: !0,
-          [`${r}`]: !0,
-          [`${e.wrapperClassName}`]: e.wrapperClassName
+          [`${i}`]: !0,
+          [`${U}`]: !!U
         },
-        ref: (R) => C.value = R,
+        ref: (E) => k.value = E,
         style: {
-          ...e.wrapperStyle,
-          width: e.width ? _(e.width) : void 0,
-          height: e.height ? _(e.height) : void 0,
-          display: e.lazy ? "block" : void 0
+          width: e.width ? j(e.width) : void 0,
+          height: e.height ? j(e.height) : void 0,
+          display: e.lazy ? "block" : void 0,
+          ...ve
         },
         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 ? re || f("div", {
+        class: `${i}-placeholder ${o.value}`
+      }, null) : S.value ? ie || f("div", {
+        class: `${i}-error ${o.value}`
+      }, [Je("加载失败")]) : c.value && f("img", We(me, {
         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,
+        onClick: () => he()
+      }), null), f(jt, {
         ref: l,
         zIndex: e.zIndex,
         infinite: e.infinite,
@@ -1481,15 +1360,17 @@ const fe = /* @__PURE__ */ _e({
         urlList: e.previewSrcList,
         getContainer: e.getContainer,
         onHideOnClickModal: e.hideOnClickModal,
-        onClose: () => pe()
-      }, null)])]));
+        onClose: () => ae()
+      }, null)]));
     };
   }
 });
-fe.isWImage = !0;
-fe.install = (e) => (e.component(fe.name, fe), e);
+ce.isGImage = !0;
+ce.install = (e) => (e.component(ce.name, ce), e);
 export {
-  fe as GImage,
-  qt as ImageViewer,
-  fe as default
+  ce as GImage,
+  jt as ImageViewer,
+  ce as default,
+  ue as gImagePorps,
+  pt as gImageViewProps
 };