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

package/dist/image.mjs

@@ -0,0 +1,1495 @@
+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
+    ];
+  };
+}
+function g(e, t) {
+  kt(e) && (e = "100%");
+  var n = Tt(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) {
+  return typeof e == "string" && e.indexOf(".") !== -1 && parseFloat(e) === 1;
+}
+function Tt(e) {
+  return typeof e == "string" && e.indexOf("%") !== -1;
+}
+function Je(e) {
+  return e = parseFloat(e), (isNaN(e) || e < 0 || e > 1) && (e = 1), e;
+}
+function se(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) {
+  return {
+    r: g(e, 255) * 255,
+    g: g(t, 255) * 255,
+    b: g(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;
+  else {
+    var u = a - r;
+    switch (o = l > 0.5 ? u / (2 - a - r) : u / (a + r), a) {
+      case e:
+        i = (t - n) / u + (t < n ? 6 : 0);
+        break;
+      case t:
+        i = (n - e) / u + 2;
+        break;
+      case n:
+        i = (e - t) / u + 4;
+        break;
+    }
+    i /= 6;
+  }
+  return { h: i, s: o, l };
+}
+function ye(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;
+  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);
+  }
+  return { r: a * 255, g: r * 255, b: i * 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;
+  else {
+    switch (a) {
+      case e:
+        i = (t - n) / l + (t < n ? 6 : 0);
+        break;
+      case t:
+        i = (n - e) / l + 2;
+        break;
+      case n:
+        i = (e - t) / l + 4;
+        break;
+    }
+    i /= 6;
+  }
+  return { h: i, s: u, 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 Be(e, t, n, a) {
+  var r = [
+    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("");
+}
+function Lt(e, t, n, a, r) {
+  var i = [
+    H(Math.round(e).toString(16)),
+    H(Math.round(t).toString(16)),
+    H(Math.round(n).toString(16)),
+    H(Nt(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("");
+}
+function Nt(e) {
+  return Math.round(parseFloat(e) * 255).toString(16);
+}
+function Ve(e) {
+  return S(e) / 255;
+}
+function S(e) {
+  return parseInt(e, 16);
+}
+function Dt(e) {
+  return {
+    r: e >> 16,
+    g: (e & 65280) >> 8,
+    b: e & 255
+  };
+}
+var ke = {
+  aliceblue: "#f0f8ff",
+  antiquewhite: "#faebd7",
+  aqua: "#00ffff",
+  aquamarine: "#7fffd4",
+  azure: "#f0ffff",
+  beige: "#f5f5dc",
+  bisque: "#ffe4c4",
+  black: "#000000",
+  blanchedalmond: "#ffebcd",
+  blue: "#0000ff",
+  blueviolet: "#8a2be2",
+  brown: "#a52a2a",
+  burlywood: "#deb887",
+  cadetblue: "#5f9ea0",
+  chartreuse: "#7fff00",
+  chocolate: "#d2691e",
+  coral: "#ff7f50",
+  cornflowerblue: "#6495ed",
+  cornsilk: "#fff8dc",
+  crimson: "#dc143c",
+  cyan: "#00ffff",
+  darkblue: "#00008b",
+  darkcyan: "#008b8b",
+  darkgoldenrod: "#b8860b",
+  darkgray: "#a9a9a9",
+  darkgreen: "#006400",
+  darkgrey: "#a9a9a9",
+  darkkhaki: "#bdb76b",
+  darkmagenta: "#8b008b",
+  darkolivegreen: "#556b2f",
+  darkorange: "#ff8c00",
+  darkorchid: "#9932cc",
+  darkred: "#8b0000",
+  darksalmon: "#e9967a",
+  darkseagreen: "#8fbc8f",
+  darkslateblue: "#483d8b",
+  darkslategray: "#2f4f4f",
+  darkslategrey: "#2f4f4f",
+  darkturquoise: "#00ced1",
+  darkviolet: "#9400d3",
+  deeppink: "#ff1493",
+  deepskyblue: "#00bfff",
+  dimgray: "#696969",
+  dimgrey: "#696969",
+  dodgerblue: "#1e90ff",
+  firebrick: "#b22222",
+  floralwhite: "#fffaf0",
+  forestgreen: "#228b22",
+  fuchsia: "#ff00ff",
+  gainsboro: "#dcdcdc",
+  ghostwhite: "#f8f8ff",
+  goldenrod: "#daa520",
+  gold: "#ffd700",
+  gray: "#808080",
+  green: "#008000",
+  greenyellow: "#adff2f",
+  grey: "#808080",
+  honeydew: "#f0fff0",
+  hotpink: "#ff69b4",
+  indianred: "#cd5c5c",
+  indigo: "#4b0082",
+  ivory: "#fffff0",
+  khaki: "#f0e68c",
+  lavenderblush: "#fff0f5",
+  lavender: "#e6e6fa",
+  lawngreen: "#7cfc00",
+  lemonchiffon: "#fffacd",
+  lightblue: "#add8e6",
+  lightcoral: "#f08080",
+  lightcyan: "#e0ffff",
+  lightgoldenrodyellow: "#fafad2",
+  lightgray: "#d3d3d3",
+  lightgreen: "#90ee90",
+  lightgrey: "#d3d3d3",
+  lightpink: "#ffb6c1",
+  lightsalmon: "#ffa07a",
+  lightseagreen: "#20b2aa",
+  lightskyblue: "#87cefa",
+  lightslategray: "#778899",
+  lightslategrey: "#778899",
+  lightsteelblue: "#b0c4de",
+  lightyellow: "#ffffe0",
+  lime: "#00ff00",
+  limegreen: "#32cd32",
+  linen: "#faf0e6",
+  magenta: "#ff00ff",
+  maroon: "#800000",
+  mediumaquamarine: "#66cdaa",
+  mediumblue: "#0000cd",
+  mediumorchid: "#ba55d3",
+  mediumpurple: "#9370db",
+  mediumseagreen: "#3cb371",
+  mediumslateblue: "#7b68ee",
+  mediumspringgreen: "#00fa9a",
+  mediumturquoise: "#48d1cc",
+  mediumvioletred: "#c71585",
+  midnightblue: "#191970",
+  mintcream: "#f5fffa",
+  mistyrose: "#ffe4e1",
+  moccasin: "#ffe4b5",
+  navajowhite: "#ffdead",
+  navy: "#000080",
+  oldlace: "#fdf5e6",
+  olive: "#808000",
+  olivedrab: "#6b8e23",
+  orange: "#ffa500",
+  orangered: "#ff4500",
+  orchid: "#da70d6",
+  palegoldenrod: "#eee8aa",
+  palegreen: "#98fb98",
+  paleturquoise: "#afeeee",
+  palevioletred: "#db7093",
+  papayawhip: "#ffefd5",
+  peachpuff: "#ffdab9",
+  peru: "#cd853f",
+  pink: "#ffc0cb",
+  plum: "#dda0dd",
+  powderblue: "#b0e0e6",
+  purple: "#800080",
+  rebeccapurple: "#663399",
+  red: "#ff0000",
+  rosybrown: "#bc8f8f",
+  royalblue: "#4169e1",
+  saddlebrown: "#8b4513",
+  salmon: "#fa8072",
+  sandybrown: "#f4a460",
+  seagreen: "#2e8b57",
+  seashell: "#fff5ee",
+  sienna: "#a0522d",
+  silver: "#c0c0c0",
+  skyblue: "#87ceeb",
+  slateblue: "#6a5acd",
+  slategray: "#708090",
+  slategrey: "#708090",
+  snow: "#fffafa",
+  springgreen: "#00ff7f",
+  steelblue: "#4682b4",
+  tan: "#d2b48c",
+  teal: "#008080",
+  thistle: "#d8bfd8",
+  tomato: "#ff6347",
+  turquoise: "#40e0d0",
+  violet: "#ee82ee",
+  wheat: "#f5deb3",
+  white: "#ffffff",
+  whitesmoke: "#f5f5f5",
+  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), {
+    ok: o,
+    format: e.format || l,
+    r: Math.min(255, Math.max(t.r, 0)),
+    g: Math.min(255, Math.max(t.g, 0)),
+    b: Math.min(255, Math.max(t.b, 0)),
+    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 = {
+  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),
+  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) {
+  if (e = e.trim().toLowerCase(), e.length === 0)
+    return !1;
+  var t = !1;
+  if (ke[e])
+    e = ke[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]),
+    format: t ? "name" : "hex8"
+  } : (n = k.hex6.exec(e), n ? {
+    r: S(n[1]),
+    g: S(n[2]),
+    b: S(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]),
+    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]),
+    format: t ? "name" : "hex"
+  } : !1)))))))));
+}
+function O(e) {
+  return !!k.CSS_UNIT.exec(String(e));
+}
+var J = (
+  /** @class */
+  function() {
+    function e(t, n) {
+      t === void 0 && (t = ""), n === void 0 && (n = {});
+      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;
+    }
+    return e.prototype.isDark = function() {
+      return this.getBrightness() < 128;
+    }, e.prototype.isLight = function() {
+      return !this.isDark();
+    }, e.prototype.getBrightness = function() {
+      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;
+    }, 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;
+    }, 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);
+      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, ")");
+    }, e.prototype.toHsl = function() {
+      var t = Pe(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, ")");
+    }, e.prototype.toHex = function(t) {
+      return t === void 0 && (t = !1), Be(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);
+    }, e.prototype.toHex8String = function(t) {
+      return t === void 0 && (t = !1), "#" + this.toHex8(t);
+    }, e.prototype.toRgb = function() {
+      return {
+        r: Math.round(this.r),
+        g: Math.round(this.g),
+        b: Math.round(this.b),
+        a: this.a
+      };
+    }, e.prototype.toRgbString = function() {
+      var t = Math.round(this.r), n = Math.round(this.g), a = Math.round(this.b);
+      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 {
+        r: t(this.r),
+        g: t(this.g),
+        b: t(this.b),
+        a: this.a
+      };
+    }, e.prototype.toPercentageRgbString = function() {
+      var t = function(n) {
+        return Math.round(g(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() {
+      if (this.a === 0)
+        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];
+        if (t === o)
+          return i;
+      }
+      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());
+    }, e.prototype.toNumber = function() {
+      return (Math.round(this.r) << 16) + (Math.round(this.g) << 8) + Math.round(this.b);
+    }, e.prototype.clone = function() {
+      return new e(this.toString());
+    }, 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);
+    }, e.prototype.brighten = function(t) {
+      t === void 0 && (t = 10);
+      var n = this.toRgb();
+      return n.r = Math.max(0, Math.min(255, n.r - Math.round(255 * -(t / 100)))), n.g = Math.max(0, Math.min(255, n.g - Math.round(255 * -(t / 100)))), n.b = Math.max(0, Math.min(255, n.b - Math.round(255 * -(t / 100)))), new e(n);
+    }, 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);
+    }, e.prototype.tint = function(t) {
+      return t === void 0 && (t = 10), this.mix("white", t);
+    }, e.prototype.shade = function(t) {
+      return t === void 0 && (t = 10), this.mix("black", t);
+    }, 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);
+    }, 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);
+    }, e.prototype.greyscale = function() {
+      return this.desaturate(100);
+    }, e.prototype.spin = function(t) {
+      var n = this.toHsl(), a = (n.h + t) % 360;
+      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
+      };
+      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;
+    }, 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;
+      return o;
+    }, e.prototype.splitcomplement = function() {
+      var t = this.toHsl(), n = t.h;
+      return [
+        this,
+        new e({ h: (n + 72) % 360, s: t.s, l: t.l }),
+        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();
+      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
+      });
+    }, 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;
+    }, e.prototype.equals = function(t) {
+      return this.toRgbString() === new e(t).toRgbString();
+    }, e;
+  }()
+);
+const Pt = new de("viewFadeIn", {
+  "0%": {
+    opacity: 0
+  },
+  "100%": {
+    opacity: 1
+  }
+}), jt = new de("viewFadeOut", {
+  "0%": {
+    opacity: 1
+  },
+  "100%": {
+    opacity: 0
+  }
+}), Bt = new de("viewZoomBadgeIn", {
+  "0%": {
+    transform: "scale(0.2)",
+    opacity: 0
+  },
+  "100%": {
+    transform: "scale(1)",
+    opacity: 1
+  }
+}), Vt = new de("viewZoomBadgeOut", {
+  "0%": {
+    transform: "scale(1)"
+  },
+  "100%": {
+    transform: "scale(0.2)",
+    opacity: 0
+  }
+}), Ye = (e) => ({
+  position: e || "absolute",
+  inset: 0
+});
+function xe(e) {
+  return {
+    position: e,
+    top: 0,
+    insetInlineEnd: 0,
+    bottom: 0,
+    insetInlineStart: 0
+  };
+}
+const Yt = (e) => ({
+  boxSizing: "border-box",
+  margin: 0,
+  padding: 0,
+  color: e.colorText,
+  fontSize: e.fontSize,
+  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);
+  return {
+    [`${t}-operations`]: {
+      ...Yt(e),
+      display: "flex",
+      flexDirection: "row-reverse",
+      alignItems: "center",
+      color: e.previewOperationColor,
+      listStyle: "none",
+      background: o.toRgbString(),
+      pointerEvents: "auto",
+      "&-operation": {
+        marginInlineStart: a,
+        padding: a,
+        cursor: "pointer",
+        transition: `all ${i}`,
+        userSelect: "none",
+        "&:hover": {
+          background: l.toRgbString()
+        },
+        "&-disabled": {
+          color: r,
+          pointerEvents: "none"
+        },
+        "&:last-of-type": {
+          marginInlineStart: 0
+        }
+      },
+      "&-progress": {
+        position: "absolute",
+        left: { _skip_check_: !0, value: "50%" },
+        transform: "translateX(-50%)"
+      },
+      "&-icon": {
+        fontSize: e.previewOperationSize
+      }
+    }
+  };
+}, 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);
+  return {
+    [`${e.componentCls}-switch-left, ${e.componentCls}-switch-right`]: {
+      position: "fixed",
+      insetBlockStart: "50%",
+      zIndex: a + 1,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: e.imagePreviewSwitchSize,
+      height: e.imagePreviewSwitchSize,
+      marginTop: -e.imagePreviewSwitchSize / 2,
+      color: e.previewOperationColor,
+      background: i.toRgbString(),
+      borderRadius: "50%",
+      transform: "translateY(-50%)",
+      cursor: "pointer",
+      transition: `all ${r}`,
+      pointerEvents: "auto",
+      userSelect: "none",
+      "&:hover": {
+        background: o.toRgbString()
+      },
+      ["&-disabled"]: {
+        "&, &:hover": {
+          color: n,
+          background: "transparent",
+          cursor: "not-allowed",
+          [`> ${e.iconCls}`]: {
+            cursor: "not-allowed"
+          }
+        }
+      },
+      [`> ${e.iconCls}`]: {
+        fontSize: e.previewOperationSize
+      }
+    },
+    [`${e.componentCls}-switch-left`]: {
+      insetInlineStart: e.marginSM
+    },
+    [`${e.componentCls}-switch-right`]: {
+      insetInlineEnd: e.marginSM
+    }
+  };
+}, _t = (e) => ({
+  [e.componentCls]: {
+    ["&-root"]: {
+      ...xe("fixed"),
+      zIndex: e.zIndexPopup,
+      overflow: "auto",
+      outline: 0,
+      WebkitOverflowScrolling: "touch"
+    },
+    ["&-wrapper"]: {
+      ...xe("fixed"),
+      zIndex: e.zIndexPopup,
+      overflow: "auto",
+      outline: 0,
+      WebkitOverflowScrolling: "touch"
+    },
+    ["&-mask"]: {
+      ...xe("fixed"),
+      zIndex: e.zIndexPopupBase,
+      height: "100%",
+      backgroundColor: e.colorBgMask
+    },
+    ["&-block"]: {
+      height: "100%",
+      textAlign: "center",
+      pointerEvents: "none"
+    },
+    ["&-body"]: {
+      ...Ye(),
+      overflow: "hidden"
+    },
+    ["&-canvas"]: {
+      ...Ye(),
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      "&::before": {
+        display: "inline-block",
+        width: 1,
+        height: "50%",
+        marginInlineEnd: -1,
+        content: '""'
+      }
+    },
+    ["&-img"]: {
+      maxWidth: "100%",
+      maxHeight: "100%",
+      verticalAlign: "middle",
+      transform: "scale3d(1, 1, 1)",
+      cursor: "grab",
+      transition: `transform ${e.motionDurationSlow} ${e.motionEaseOut} 0s`,
+      userSelect: "none",
+      pointerEvents: "auto"
+    },
+    ["&-fade-appear, &-fade-enter"]: {
+      animationName: Pt,
+      animationDuration: e.motionDurationSlow,
+      animationTimingFunction: "linear"
+    },
+    ["&-fade-leave"]: {
+      animationName: jt,
+      animationDuration: e.motionDurationSlow,
+      animationTimingFunction: "linear"
+    },
+    ["&-zoom-appear, &-zoom-enter"]: {
+      animationName: Bt,
+      opacity: 0,
+      animationTimingFunction: e.motionEaseOutCirc,
+      animationFillMode: "both",
+      transform: "none",
+      animationDuration: e.motionDurationSlow,
+      userSelect: "none"
+    },
+    ["&-zoom-enter-active"]: {
+      animationPlayState: "running"
+    },
+    ["&-zoom-leave"]: {
+      animationName: Vt,
+      animationDuration: e.motionDurationSlow,
+      animationTimingFunction: e.motionEaseOutBack,
+      animationFillMode: "both"
+    }
+  },
+  [`${e.componentCls}-root`]: {
+    [`${e.componentCls}-wrapper`]: {
+      zIndex: e.zIndexPopup
+    }
+  },
+  [`${e.componentCls}-operations-wrapper`]: {
+    position: "fixed",
+    insetBlockStart: 0,
+    insetInlineEnd: 0,
+    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({
+  func: void 0,
+  bool: void 0,
+  string: void 0,
+  number: void 0,
+  array: void 0,
+  object: void 0,
+  integer: void 0
+});
+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 = {
+  tab: "Tab",
+  enter: "Enter",
+  space: "Space",
+  left: "ArrowLeft",
+  up: "ArrowUp",
+  right: "ArrowRight",
+  down: "ArrowDown",
+  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) {
+  e && t && n && e.removeEventListener(t, n, a);
+}, X = {
+  CONTAIN: {
+    name: "contain",
+    icon: c(ot, null, null)
+  },
+  ORIGINAL: {
+    name: "original",
+    icon: c(st, null, null)
+  }
+}, Xt = function() {
+  return !q && !!window.navigator.userAgent.match(/firefox/i);
+}, We = Xt() ? "DOMMouseScroll" : "mousewheel";
+function Me(e) {
+  let t = !1;
+  return function(...n) {
+    t || (t = !0, window.requestAnimationFrame(() => {
+      e.apply(this, n), t = !1;
+    }));
+  };
+}
+const qt = /* @__PURE__ */ _e({
+  props: Zt,
+  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({
+      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(() => {
+      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`
+      };
+      return W.value.name === X.CONTAIN.name && (I.maxWidth = I.maxHeight = "100%"), I;
+    }), ne = () => {
+      pe(), t("close"), h.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 = () => {
+      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 = {
+        scale: 1,
+        deg: 0,
+        offsetX: 0,
+        offsetY: 0,
+        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;
+      const s = e.urlList.length;
+      d.value = (d.value - 1 + s) % s;
+    }, U = () => {
+      if (ee.value && !e.infinite)
+        return;
+      const s = e.urlList.length;
+      d.value = (d.value + 1) % s;
+    }, T = (s, y = {}) => {
+      if (A.value)
+        return;
+      const {
+        zoomRate: w,
+        rotateDeg: $,
+        enableTransition: b
+      } = {
+        zoomRate: 0.2,
+        rotateDeg: 90,
+        enableTransition: !0,
+        ...y
+      };
+      switch (s) {
+        case "zoomOut":
+          h.value.scale > 0.2 && (h.value.scale = parseFloat((h.value.scale - w).toFixed(3)));
+          break;
+        case "zoomIn":
+          h.value.scale = parseFloat((h.value.scale + w).toFixed(3));
+          break;
+        case "clocelise":
+          h.value.deg += $;
+          break;
+        case "anticlocelise":
+          h.value.deg -= $;
+          break;
+      }
+      h.value.enableTransition = b;
+    }, me = [{
+      icon: ((re = e.icons) == null ? void 0 : re.close) || c(lt, null, null),
+      onClick: (s) => {
+        s.stopPropagation(), m(!1);
+      },
+      type: "close"
+    }, {
+      icon: ((ie = e.icons) == null ? void 0 : ie.zoomIn) || c(ut, null, null),
+      onClick: (s) => {
+        s.stopPropagation(), T("zoomIn");
+      },
+      type: "zoomIn"
+    }, {
+      icon: ((R = e.icons) == null ? void 0 : R.zoomOut) || c(ct, null, null),
+      onClick: (s) => {
+        s.stopPropagation(), T("zoomOut");
+      },
+      type: "zoomOut"
+    }, {
+      icon: ((Z = e.icons) == null ? void 0 : Z.rotateRight) || c(ft, null, null),
+      onClick: (s) => {
+        s.stopPropagation(), T("anticlocelise");
+      },
+      type: "rotateRight"
+    }, {
+      icon: (($e = e.icons) == null ? void 0 : $e.rotateLeft) || c(dt, null, null),
+      onClick: (s) => {
+        s.stopPropagation(), T("clocelise");
+      },
+      type: "rotateLeft"
+    }];
+    return ue(te, () => {
+      Ue(() => {
+        P.value.complete || (A.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);
+    }), n({
+      setOpen: z
+    }), () => {
+      const s = Fe(`${o}-fade`), y = Fe(`${o}-zoom`);
+      return l(c(tt, {
+        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,
+          tabindex: -1,
+          class: [`${o}-wrapper`, `${u.value}`],
+          onClick: (w) => e.onHideOnClickModal && ge(w)
+        }, [c(Oe, Ze(y, {
+          onAfterLeave: () => ne()
+        }), {
+          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}`,
+              style: {
+                ...he.value,
+                display: I === d.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]])];
+          }
+        })])])]
+      }));
+    };
+  }
+}), Ce = {
+  width: "100%",
+  height: "100%"
+}, Qt = (e) => ({
+  [e.componentCls]: {
+    display: "inline-block",
+    position: "relative",
+    overflow: "hidden",
+    ["&-inner"]: {
+      ...Ce,
+      verticalAlign: "top",
+      opacity: 1
+    },
+    ["&-placeholder"]: {
+      ...Ce,
+      backgroundColor: e.colorBgContainerDisabled,
+      backgroundImage: "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=')",
+      backgroundRepeat: "no-repeat",
+      backgroundPosition: "center center",
+      backgroundSize: "30%"
+    },
+    ["&-error"]: {
+      ...Ce,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      color: e.colorText,
+      backgroundColor: e.colorBgContainerDisabled
+    },
+    ["&-preview"]: {
+      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,
+  name: "GImage",
+  emits: ["error", "click", "load"],
+  setup(e, {
+    slots: t,
+    emit: n,
+    attrs: a
+  }) {
+    const r = Q({
+      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 ? {
+      "object-fit": e.fit
+    } : {}), P = M(() => {
+      const {
+        previewSrcList: f
+      } = e;
+      return Array.isArray(f) && f.length > 0;
+    }), W = M(() => {
+      const {
+        src: f,
+        previewSrcList: D,
+        initialIndex: L
+      } = 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());
+    };
+    function G() {
+      vt(C.value, m.value) && (h(), te());
+    }
+    const K = St(G, 200), ee = async () => {
+      if (q)
+        return;
+      await Ue();
+      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);
+    }, 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, {
+        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;
+    };
+    ue(() => e.src, () => {
+      e.lazy ? (v.value = !0, p.value = !1, te(), ee()) : h();
+    });
+    const _ = (f) => bt(f) ? f + "px" : f;
+    return Xe(() => {
+      e.lazy ? ee() : h();
+    }), () => {
+      const {
+        crossorigin: f,
+        decoding: D,
+        alt: L,
+        sizes: E,
+        srcset: j,
+        usemap: ae,
+        class: U,
+        style: T
+      } = a, me = {
+        crossorigin: f,
+        decoding: D,
+        alt: L,
+        sizes: E,
+        srcset: j,
+        usemap: ae,
+        style: {
+          ...Y.value,
+          height: e.height ? _(e.height) : void 0,
+          ...T
+        }
+      }, 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", {
+        class: {
+          [`${o.value}`]: !0,
+          [`${r}`]: !0,
+          [`${e.wrapperClassName}`]: e.wrapperClassName
+        },
+        ref: (R) => C.value = R,
+        style: {
+          ...e.wrapperStyle,
+          width: e.width ? _(e.width) : void 0,
+          height: e.height ? _(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, {
+        class: {
+          [`${o.value}`]: !0,
+          [`${r}-inner`]: !0,
+          [`${r}-preview`]: P.value,
+          [`${U}`]: !!U
+        },
+        alt: e.alt,
+        src: u.value,
+        onLoad: he,
+        onError: ne,
+        onClick: () => ve()
+      }), null), c(qt, {
+        ref: l,
+        zIndex: e.zIndex,
+        infinite: e.infinite,
+        initialIndex: W.value,
+        urlList: e.previewSrcList,
+        getContainer: e.getContainer,
+        onHideOnClickModal: e.hideOnClickModal,
+        onClose: () => pe()
+      }, null)])]));
+    };
+  }
+});
+fe.isWImage = !0;
+fe.install = (e) => (e.component(fe.name, fe), e);
+export {
+  fe as GImage,
+  qt as ImageViewer,
+  fe as default
+};