@gx-design-vue/image 0.2.0-beta.21 → 0.2.0-beta.22

package/dist/image.js

@@ -1,35 +1,12 @@
-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 Ee, useProStyle as vt } from "@gx-design-vue/pro-provider";
-import { useThrottleFn as mt, useEventListener as $e } 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 = {
+import Z from "ant-design-vue/es/_util/vue-types";
+import { ref as M, reactive as re, onMounted as De, defineComponent as Me, createVNode as r, Teleport as Ue, Transition as Se, withDirectives as he, Fragment as Ie, cloneVNode as Je, vShow as pe, shallowRef as V, computed as y, watch as j, onUnmounted as et, mergeProps as ze, watchEffect as tt, createTextVNode as nt, nextTick as ot } from "vue";
+import { CloseOutlined as it, LeftOutlined as at, RightOutlined as lt, RotateLeftOutlined as rt, RotateRightOutlined as st, ZoomInOutlined as ct, ZoomOutOutlined as ut, SwapOutlined as xe } from "@ant-design/icons-vue";
+import { classNames as ae, getPrefixCls as _e, isNumber as Ee, getSlotVNode as L, isArray as Fe, getSlot as dt, isServer as le, isInContainer as ft, isString as vt, getScrollContainer as gt } from "@gx-design-vue/pro-utils";
+import { useState as Le, onMountedOrActivated as mt } from "@gx-design-vue/pro-hooks";
+import { Keyframe as ue, useStyle as wt, mergeToken as St, unit as ht, getTransitionProps as Ce, useProStyle as It } from "@gx-design-vue/pro-provider";
+import { TinyColor as K } from "@ctrl/tinycolor";
+import { useThrottleFn as pt, useEventListener as Te } from "@vueuse/core";
+const U = {
   infinite: {
     type: Boolean,
     default: !0
@@ -38,14 +15,14 @@ const D = {
     type: Number,
     default: 2e3
   },
-  initialIndex: {
+  current: {
     type: Number,
     default: 0
   },
   getContainer: {
     type: String
   }
-}, ue = {
+}, se = {
   previewTeleported: {
     type: Boolean,
     default: !0
@@ -66,7 +43,7 @@ const D = {
     type: String,
     default: "contain"
   },
-  lazy: R.bool,
+  lazy: Z.bool,
   scrollContainer: {
     type: [String, Object]
   },
@@ -89,564 +66,57 @@ const D = {
   onClick: {
     type: Function
   },
-  disablePreview: R.bool,
-  previewSrcList: {
+  previewUrls: {
     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,
+  imageClassName: Z.string,
+  imageStyle: Z.style,
+  width: Z.number,
+  height: Z.number,
+  zIndex: U.zIndex,
+  infinite: U.infinite,
+  getContainer: U.getContainer,
+  current: {
+    ...U.current,
     default: () => {
     }
   }
-}, pt = {
-  urlList: {
+}, Y = {
+  previewUrls: {
     type: Array,
     default: () => []
   },
-  teleported: ue.previewTeleported,
-  zIndex: D.zIndex,
-  initialIndex: D.initialIndex,
-  infinite: D.infinite,
-  getContainer: ue.getContainer,
-  onHideOnClickModal: ue.hideOnClickModal,
+  teleported: se.previewTeleported,
+  zIndex: U.zIndex,
+  current: U.current,
+  infinite: U.infinite,
+  getContainer: se.getContainer,
+  onHideOnClickModal: se.hideOnClickModal,
+  countRender: [Function, Array, Object],
   icons: {
     type: Object,
     default: () => ({})
   }
 };
-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 bt(e) {
-  return typeof e == "string" && e.indexOf(".") !== -1 && parseFloat(e) === 1;
-}
-function yt(e) {
-  return typeof e == "string" && e.indexOf("%") !== -1;
-}
-function Ue(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 wt(e, t, n) {
-  return {
-    r: v(e, 255) * 255,
-    g: v(t, 255) * 255,
-    b: v(n, 255) * 255
-  };
-}
-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 c = a - i;
-    switch (o = l > 0.5 ? c / (2 - a - i) : c / (a + i), a) {
-      case e:
-        r = (t - n) / c + (t < n ? 6 : 0);
-        break;
-      case t:
-        r = (n - e) / c + 2;
-        break;
-      case n:
-        r = (e - t) / c + 4;
-        break;
-    }
-    r /= 6;
-  }
-  return { h: r, s: o, l };
-}
-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 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 = be(l, o, e + 1 / 3), i = be(l, o, e), r = be(l, o, e - 1 / 3);
-  }
-  return { r: a * 255, g: i * 255, b: r * 255 };
-}
-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:
-        r = (t - n) / l + (t < n ? 6 : 0);
-        break;
-      case t:
-        r = (n - e) / l + 2;
-        break;
-      case n:
-        r = (e - t) / l + 4;
-        break;
-    }
-    r /= 6;
-  }
-  return { h: r, s: c, v: o };
-}
-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], E = [r, r, l, n, n, o][c];
-  return { r: S * 255, g: p * 255, b: E * 255 };
-}
-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 && 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 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(It(a))
-  ];
-  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 It(e) {
-  return Math.round(parseFloat(e) * 255).toString(16);
-}
-function Pe(e) {
-  return w(e) / 255;
-}
-function w(e) {
-  return parseInt(e, 16);
-}
-function At(e) {
-  return {
-    r: e >> 16,
-    g: (e & 65280) >> 8,
-    b: e & 255
-  };
-}
-var Ae = {
-  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 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)),
-    g: Math.min(255, Math.max(t.g, 0)),
-    b: Math.min(255, Math.max(t.b, 0)),
-    a: n
-  };
-}
-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" + 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 zt(e) {
-  if (e = e.trim().toLowerCase(), e.length === 0)
-    return !1;
-  var t = !1;
-  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 = 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 = T.hex6.exec(e), n ? {
-    r: w(n[1]),
-    g: w(n[2]),
-    b: w(n[3]),
-    format: t ? "name" : "hex"
-  } : (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 = 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 Et(e, t) {
+  process.env.NODE_ENV !== "production" && !e && console !== void 0 && console.error(`Warning: ${t}`);
 }
-function O(e) {
-  return !!T.CSS_UNIT.exec(String(e));
-}
-var Q = (
-  /** @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 = 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;
-    }, 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, 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 = 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 = 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 = 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 = 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 = 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), 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), 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),
-        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(v(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(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() {
-      if (this.a === 0)
-        return "transparent";
-      if (this.a < 1)
-        return !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 r;
-      }
-      return !1;
-    }, e.prototype.toString = function(t) {
-      var n = !!t;
-      t = t ?? this.format;
-      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() {
-      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(), 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(), 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, 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;
-      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(), i = n.a + a.a * (1 - n.a);
-      return new e({
-        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, 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 Ot = new fe("viewFadeIn", {
+const Ct = new ue("viewFadeIn", {
   "0%": {
     opacity: 0
   },
   "100%": {
     opacity: 1
   }
-}), Lt = new fe("viewFadeOut", {
+}), yt = new ue("viewFadeOut", {
   "0%": {
     opacity: 1
   },
   "100%": {
     opacity: 0
   }
-}), Nt = new fe("viewZoomBadgeIn", {
+}), Mt = new ue("viewZoomBadgeIn", {
   "0%": {
     transform: "scale(0.2)",
     opacity: 0
@@ -655,7 +125,7 @@ const Ot = new fe("viewFadeIn", {
     transform: "scale(1)",
     opacity: 1
   }
-}), Et = new fe("viewZoomBadgeOut", {
+}), Nt = new ue("viewZoomBadgeOut", {
   "0%": {
     transform: "scale(1)"
   },
@@ -663,11 +133,11 @@ const Ot = new fe("viewFadeIn", {
     transform: "scale(0.2)",
     opacity: 0
   }
-}), Fe = (e) => ({
+}), be = (e) => ({
   position: e || "absolute",
   inset: 0
 });
-function Se(e) {
+function me(e) {
   return {
     position: e,
     top: 0,
@@ -676,143 +146,149 @@ function Se(e) {
     insetInlineStart: 0
   };
 }
-const $t = (e) => ({
-  boxSizing: "border-box",
-  margin: 0,
-  padding: 0,
-  color: e.colorText,
-  fontSize: e.fontSize,
-  lineHeight: e.lineHeight,
-  listStyle: "none",
-  fontFamily: e.fontFamily
-}), 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);
+const Ot = (e) => {
+  const { previewCls: t, modalMaskBg: i, paddingSM: l, marginXL: o, margin: f, paddingLG: c, previewOperationColorDisabled: d, previewOperationHoverColor: p, motionDurationSlow: m, iconCls: h, colorTextLightSolid: C } = e, v = new K(i).setAlpha(0.1), u = v.clone().setAlpha(0.2);
   return {
-    [`${t}-operations`]: {
-      ...$t(e),
+    [`${t}-footer`]: {
+      position: "fixed",
+      bottom: o,
+      left: {
+        _skip_check_: !0,
+        value: "50%"
+      },
       display: "flex",
-      flexDirection: "row-reverse",
+      flexDirection: "column",
       alignItems: "center",
       color: e.previewOperationColor,
-      listStyle: "none",
-      background: o.toRgbString(),
-      pointerEvents: "auto",
+      transform: "translateX(-50%)"
+    },
+    [`${t}-progress`]: {
+      marginBottom: f
+    },
+    [`${t}-close`]: {
+      position: "fixed",
+      top: o,
+      right: {
+        _skip_check_: !0,
+        value: o
+      },
+      display: "flex",
+      color: C,
+      backgroundColor: v.toRgbString(),
+      borderRadius: "50%",
+      padding: l,
+      outline: 0,
+      border: 0,
+      cursor: "pointer",
+      transition: `all ${m}`,
+      "&:hover": {
+        backgroundColor: u.toRgbString()
+      },
+      [`& > ${h}`]: {
+        fontSize: e.previewOperationSize
+      }
+    },
+    [`${t}-operations`]: {
+      display: "flex",
+      alignItems: "center",
+      padding: `0 ${ht(c)}`,
+      backgroundColor: v.toRgbString(),
+      borderRadius: 100,
       "&-operation": {
-        marginInlineStart: a,
-        padding: a,
+        marginInlineStart: l,
+        padding: l,
         cursor: "pointer",
-        transition: `all ${r}`,
+        transition: `all ${m}`,
         userSelect: "none",
-        "&:hover": {
-          background: l.toRgbString()
+        [`&:not(${t}-operations-operation-disabled):hover > ${h}`]: {
+          color: p
         },
         "&-disabled": {
-          color: i,
-          pointerEvents: "none"
+          color: d,
+          cursor: "not-allowed"
         },
-        "&:last-of-type": {
+        "&:first-of-type": {
           marginInlineStart: 0
+        },
+        [`& > ${h}`]: {
+          fontSize: e.previewOperationSize
         }
-      },
-      "&-progress": {
-        position: "absolute",
-        left: { _skip_check_: !0, value: "50%" },
-        transform: "translateX(-50%)"
-      },
-      "&-icon": {
-        fontSize: e.previewOperationSize
       }
     }
   };
-}, 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);
+}, At = (e) => {
+  const { modalMaskBg: t, iconCls: i, previewOperationColorDisabled: l, previewCls: o, zIndexPopup: f, motionDurationSlow: c } = e, d = new K(t).setAlpha(0.1), p = d.clone().setAlpha(0.2);
   return {
-    [`${e.componentCls}-switch-left, ${e.componentCls}-switch-right`]: {
+    [`${o}-switch-left, ${o}-switch-right`]: {
       position: "fixed",
       insetBlockStart: "50%",
-      zIndex: a + 1,
+      zIndex: e.calc(f).add(1).equal(),
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
       width: e.imagePreviewSwitchSize,
       height: e.imagePreviewSwitchSize,
-      marginTop: -e.imagePreviewSwitchSize / 2,
+      marginTop: e.calc(e.imagePreviewSwitchSize).mul(-1).div(2).equal(),
       color: e.previewOperationColor,
-      background: r.toRgbString(),
+      background: d.toRgbString(),
       borderRadius: "50%",
       transform: "translateY(-50%)",
       cursor: "pointer",
-      transition: `all ${i}`,
-      pointerEvents: "auto",
+      transition: `all ${c}`,
       userSelect: "none",
       "&:hover": {
-        background: o.toRgbString()
+        background: p.toRgbString()
       },
       "&-disabled": {
         "&, &:hover": {
-          color: n,
+          color: l,
           background: "transparent",
           cursor: "not-allowed",
-          [`> ${e.iconCls}`]: {
+          [`> ${i}`]: {
             cursor: "not-allowed"
           }
         }
       },
-      [`> ${e.iconCls}`]: {
+      [`> ${i}`]: {
         fontSize: e.previewOperationSize
       }
     },
-    [`${e.componentCls}-switch-left`]: {
+    [`${o}-switch-left`]: {
       insetInlineStart: e.marginSM
     },
-    [`${e.componentCls}-switch-right`]: {
+    [`${o}-switch-right`]: {
       insetInlineEnd: e.marginSM
     }
   };
-}, Ht = (e) => ({
+}, xt = (e) => ({
   [e.componentCls]: {
+    height: "100%",
+    textAlign: "center",
+    pointerEvents: "none",
     "&-root": {
-      ...Se("fixed"),
+      ...me("fixed"),
       zIndex: e.zIndexPopup,
       overflow: "auto",
       outline: 0,
       WebkitOverflowScrolling: "touch"
     },
-    "&-wrapper": {
-      ...Se("fixed"),
+    "&-wrap": {
+      ...me("fixed"),
       zIndex: e.zIndexPopup,
       overflow: "auto",
       outline: 0,
       WebkitOverflowScrolling: "touch"
     },
     "&-mask": {
-      ...Se("fixed"),
+      ...me("fixed"),
       zIndex: e.zIndexPopupBase,
       height: "100%",
       backgroundColor: e.colorBgMask
     },
-    "&-block": {
-      height: "100%",
-      textAlign: "center",
-      pointerEvents: "none"
-    },
     "&-body": {
-      ...Fe(),
+      ...be(),
       overflow: "hidden"
     },
-    "&-canvas": {
-      ...Fe(),
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      "&::before": {
-        display: "inline-block",
-        width: 1,
-        height: "50%",
-        marginInlineEnd: -1,
-        content: '""'
-      }
-    },
     "&-img": {
       maxWidth: "100%",
       maxHeight: "100%",
@@ -821,20 +297,34 @@ const $t = (e) => ({
       cursor: "grab",
       transition: `transform ${e.motionDurationSlow} ${e.motionEaseOut} 0s`,
       userSelect: "none",
-      pointerEvents: "auto"
+      pointerEvents: "auto",
+      "&-wrapper": {
+        ...be(),
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        transition: `transform ${e.motionDurationSlow} ${e.motionEaseOut} 0s`,
+        "&::before": {
+          display: "inline-block",
+          width: 1,
+          height: "50%",
+          marginInlineEnd: -1,
+          content: '""'
+        }
+      }
     },
     "&-fade-appear, &-fade-enter": {
-      animationName: Ot,
+      animationName: Ct,
       animationDuration: e.motionDurationSlow,
       animationTimingFunction: "linear"
     },
     "&-fade-leave": {
-      animationName: Lt,
+      animationName: yt,
       animationDuration: e.motionDurationSlow,
       animationTimingFunction: "linear"
     },
     "&-zoom-appear, &-zoom-enter": {
-      animationName: Nt,
+      animationName: Mt,
       opacity: 0,
       animationTimingFunction: e.motionEaseOutCirc,
       animationFillMode: "both",
@@ -846,7 +336,7 @@ const $t = (e) => ({
       animationPlayState: "running"
     },
     "&-zoom-leave": {
-      animationName: Et,
+      animationName: Nt,
       animationDuration: e.motionDurationSlow,
       animationTimingFunction: e.motionEaseOutBack,
       animationFillMode: "both"
@@ -864,339 +354,1003 @@ const $t = (e) => ({
     zIndex: e.zIndexPopup + 1,
     width: "100%"
   },
-  "&": [Rt(e), Dt(e)]
+  "&": [Ot(e), At(e)]
 });
-function Pt(e) {
-  return ht("ImageView", (t) => {
-    const n = gt(t, {
+function Lt(e) {
+  return wt("ImageViewer", (t) => {
+    const i = St(t, {
       zIndexPopup: t.zIndexPopupBase + 80,
-      previewOperationColorDisabled: new Q(t.colorTextLightSolid).setAlpha(0.25).toRgbString(),
-      modalMaskBg: new Q("#000").setAlpha(0.45).toRgbString(),
+      previewOperationColorDisabled: new K(t.colorTextLightSolid).setAlpha(0.25).toRgbString(),
+      previewOperationHoverColor: new K(t.colorTextLightSolid).setAlpha(0.85).toRgbString(),
+      modalMaskBg: new K("#000").setAlpha(0.45).toRgbString(),
       // FIXME: Shared Token
-      previewOperationColor: new Q(t.colorTextLightSolid).toRgbString(),
+      previewOperationColor: new K(t.colorTextLightSolid).toRgbString(),
       previewOperationSize: t.fontSizeIcon * 1.5,
       // FIXME: fontSizeIconLG
       imagePreviewSwitchSize: t.controlHeightLG,
-      iconCls: "anticon"
+      iconCls: "anticon",
+      previewCls: t.componentCls
     });
-    return [Ht(n)];
+    return [xt(i)];
   }, 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);
-}, xe = function(e, t, n, a = !1) {
-  e && t && n && e.removeEventListener(t, n, a);
-}, X = {
-  CONTAIN: {
-    name: "contain",
-    icon: f(Ke, null, null)
+function Tt(e) {
+  const t = e.getBoundingClientRect(), i = document.documentElement;
+  return {
+    left: t.left + (window.scrollX || i.scrollLeft) - (i.clientLeft || document.body.clientLeft || 0),
+    top: t.top + (window.scrollY || i.scrollTop) - (i.clientTop || document.body.clientTop || 0)
+  };
+}
+function bt() {
+  const e = document.documentElement.clientWidth, t = window.innerHeight || document.documentElement.clientHeight;
+  return {
+    width: e,
+    height: t
+  };
+}
+function Pe(e, t, i, l) {
+  const o = t + i, f = (i - l) / 2;
+  if (i > l) {
+    if (t > 0)
+      return {
+        [e]: f
+      };
+    if (t < 0 && o < l)
+      return {
+        [e]: -f
+      };
+  } else if (t < 0 || o > l)
+    return {
+      [e]: t < 0 ? f : -f
+    };
+  return {};
+}
+function Pt(e, t, i, l) {
+  const { width: o, height: f } = bt();
+  let c = null;
+  return e <= o && t <= f ? c = {
+    x: 0,
+    y: 0
+  } : (e > o || t > f) && (c = {
+    ...Pe("x", i, e, o),
+    ...Pe("y", l, t, f)
+  }), c;
+}
+let Be = !1;
+try {
+  const e = Object.defineProperty({}, "passive", {
+    get() {
+      Be = !0;
+    }
+  });
+  window.addEventListener("testPassive", null, e), window.removeEventListener("testPassive", null, e);
+} catch {
+}
+function B(e, t, i, l) {
+  if (e && e.addEventListener) {
+    let o = l;
+    o === void 0 && Be && (t === "touchstart" || t === "touchmove" || t === "wheel") && (o = { passive: !1 }), e.addEventListener(t, i, o);
+  }
+  return {
+    remove: () => {
+      e && e.removeEventListener && e.removeEventListener(t, i);
+    }
+  };
+}
+const a = {
+  /**
+   * MAC_ENTER
+   */
+  MAC_ENTER: 3,
+  /**
+   * BACKSPACE
+   */
+  BACKSPACE: 8,
+  /**
+   * TAB
+   */
+  TAB: 9,
+  /**
+   * NUMLOCK on FF/Safari Mac
+   */
+  NUM_CENTER: 12,
+  // NUMLOCK on FF/Safari Mac
+  /**
+   * ENTER
+   */
+  ENTER: 13,
+  /**
+   * SHIFT
+   */
+  SHIFT: 16,
+  /**
+   * CTRL
+   */
+  CTRL: 17,
+  /**
+   * ALT
+   */
+  ALT: 18,
+  /**
+   * PAUSE
+   */
+  PAUSE: 19,
+  /**
+   * CAPS_LOCK
+   */
+  CAPS_LOCK: 20,
+  /**
+   * ESC
+   */
+  ESC: 27,
+  /**
+   * SPACE
+   */
+  SPACE: 32,
+  /**
+   * PAGE_UP
+   */
+  PAGE_UP: 33,
+  // also NUM_NORTH_EAST
+  /**
+   * PAGE_DOWN
+   */
+  PAGE_DOWN: 34,
+  // also NUM_SOUTH_EAST
+  /**
+   * END
+   */
+  END: 35,
+  // also NUM_SOUTH_WEST
+  /**
+   * HOME
+   */
+  HOME: 36,
+  // also NUM_NORTH_WEST
+  /**
+   * LEFT
+   */
+  LEFT: 37,
+  // also NUM_WEST
+  /**
+   * UP
+   */
+  UP: 38,
+  // also NUM_NORTH
+  /**
+   * RIGHT
+   */
+  RIGHT: 39,
+  // also NUM_EAST
+  /**
+   * DOWN
+   */
+  DOWN: 40,
+  // also NUM_SOUTH
+  /**
+   * PRINT_SCREEN
+   */
+  PRINT_SCREEN: 44,
+  /**
+   * INSERT
+   */
+  INSERT: 45,
+  // also NUM_INSERT
+  /**
+   * DELETE
+   */
+  DELETE: 46,
+  // also NUM_DELETE
+  /**
+   * ZERO
+   */
+  ZERO: 48,
+  /**
+   * ONE
+   */
+  ONE: 49,
+  /**
+   * TWO
+   */
+  TWO: 50,
+  /**
+   * THREE
+   */
+  THREE: 51,
+  /**
+   * FOUR
+   */
+  FOUR: 52,
+  /**
+   * FIVE
+   */
+  FIVE: 53,
+  /**
+   * SIX
+   */
+  SIX: 54,
+  /**
+   * SEVEN
+   */
+  SEVEN: 55,
+  /**
+   * EIGHT
+   */
+  EIGHT: 56,
+  /**
+   * NINE
+   */
+  NINE: 57,
+  /**
+   * QUESTION_MARK
+   */
+  QUESTION_MARK: 63,
+  // needs localization
+  /**
+   * A
+   */
+  A: 65,
+  /**
+   * B
+   */
+  B: 66,
+  /**
+   * C
+   */
+  C: 67,
+  /**
+   * D
+   */
+  D: 68,
+  /**
+   * E
+   */
+  E: 69,
+  /**
+   * F
+   */
+  F: 70,
+  /**
+   * G
+   */
+  G: 71,
+  /**
+   * H
+   */
+  H: 72,
+  /**
+   * I
+   */
+  I: 73,
+  /**
+   * J
+   */
+  J: 74,
+  /**
+   * K
+   */
+  K: 75,
+  /**
+   * L
+   */
+  L: 76,
+  /**
+   * M
+   */
+  M: 77,
+  /**
+   * N
+   */
+  N: 78,
+  /**
+   * O
+   */
+  O: 79,
+  /**
+   * P
+   */
+  P: 80,
+  /**
+   * Q
+   */
+  Q: 81,
+  /**
+   * R
+   */
+  R: 82,
+  /**
+   * S
+   */
+  S: 83,
+  /**
+   * T
+   */
+  T: 84,
+  /**
+   * U
+   */
+  U: 85,
+  /**
+   * V
+   */
+  V: 86,
+  /**
+   * W
+   */
+  W: 87,
+  /**
+   * X
+   */
+  X: 88,
+  /**
+   * Y
+   */
+  Y: 89,
+  /**
+   * Z
+   */
+  Z: 90,
+  /**
+   * META
+   */
+  META: 91,
+  // WIN_KEY_LEFT
+  /**
+   * WIN_KEY_RIGHT
+   */
+  WIN_KEY_RIGHT: 92,
+  /**
+   * CONTEXT_MENU
+   */
+  CONTEXT_MENU: 93,
+  /**
+   * NUM_ZERO
+   */
+  NUM_ZERO: 96,
+  /**
+   * NUM_ONE
+   */
+  NUM_ONE: 97,
+  /**
+   * NUM_TWO
+   */
+  NUM_TWO: 98,
+  /**
+   * NUM_THREE
+   */
+  NUM_THREE: 99,
+  /**
+   * NUM_FOUR
+   */
+  NUM_FOUR: 100,
+  /**
+   * NUM_FIVE
+   */
+  NUM_FIVE: 101,
+  /**
+   * NUM_SIX
+   */
+  NUM_SIX: 102,
+  /**
+   * NUM_SEVEN
+   */
+  NUM_SEVEN: 103,
+  /**
+   * NUM_EIGHT
+   */
+  NUM_EIGHT: 104,
+  /**
+   * NUM_NINE
+   */
+  NUM_NINE: 105,
+  /**
+   * NUM_MULTIPLY
+   */
+  NUM_MULTIPLY: 106,
+  /**
+   * NUM_PLUS
+   */
+  NUM_PLUS: 107,
+  /**
+   * NUM_MINUS
+   */
+  NUM_MINUS: 109,
+  /**
+   * NUM_PERIOD
+   */
+  NUM_PERIOD: 110,
+  /**
+   * NUM_DIVISION
+   */
+  NUM_DIVISION: 111,
+  /**
+   * F1
+   */
+  F1: 112,
+  /**
+   * F2
+   */
+  F2: 113,
+  /**
+   * F3
+   */
+  F3: 114,
+  /**
+   * F4
+   */
+  F4: 115,
+  /**
+   * F5
+   */
+  F5: 116,
+  /**
+   * F6
+   */
+  F6: 117,
+  /**
+   * F7
+   */
+  F7: 118,
+  /**
+   * F8
+   */
+  F8: 119,
+  /**
+   * F9
+   */
+  F9: 120,
+  /**
+   * F10
+   */
+  F10: 121,
+  /**
+   * F11
+   */
+  F11: 122,
+  /**
+   * F12
+   */
+  F12: 123,
+  /**
+   * NUMLOCK
+   */
+  NUMLOCK: 144,
+  /**
+   * SEMICOLON
+   */
+  SEMICOLON: 186,
+  // needs localization
+  /**
+   * DASH
+   */
+  DASH: 189,
+  // needs localization
+  /**
+   * EQUALS
+   */
+  EQUALS: 187,
+  // needs localization
+  /**
+   * COMMA
+   */
+  COMMA: 188,
+  // needs localization
+  /**
+   * PERIOD
+   */
+  PERIOD: 190,
+  // needs localization
+  /**
+   * SLASH
+   */
+  SLASH: 191,
+  // needs localization
+  /**
+   * APOSTROPHE
+   */
+  APOSTROPHE: 192,
+  // needs localization
+  /**
+   * SINGLE_QUOTE
+   */
+  SINGLE_QUOTE: 222,
+  // needs localization
+  /**
+   * OPEN_SQUARE_BRACKET
+   */
+  OPEN_SQUARE_BRACKET: 219,
+  // needs localization
+  /**
+   * BACKSLASH
+   */
+  BACKSLASH: 220,
+  // needs localization
+  /**
+   * CLOSE_SQUARE_BRACKET
+   */
+  CLOSE_SQUARE_BRACKET: 221,
+  // needs localization
+  /**
+   * WIN_KEY
+   */
+  WIN_KEY: 224,
+  /**
+   * MAC_FF_META
+   */
+  MAC_FF_META: 224,
+  // Firefox (Gecko) fires this for the meta key instead of 91
+  /**
+   * WIN_IME
+   */
+  WIN_IME: 229,
+  // ======================== Function ========================
+  /**
+   * whether text and modified key is entered at the same time.
+   */
+  isTextModifyingKeyEvent: function(t) {
+    const { keyCode: i } = t;
+    if (t.altKey && !t.ctrlKey || t.metaKey || // Function keys don't generate text
+    i >= a.F1 && i <= a.F12)
+      return !1;
+    switch (i) {
+      case a.ALT:
+      case a.CAPS_LOCK:
+      case a.CONTEXT_MENU:
+      case a.CTRL:
+      case a.DOWN:
+      case a.END:
+      case a.ESC:
+      case a.HOME:
+      case a.INSERT:
+      case a.LEFT:
+      case a.MAC_FF_META:
+      case a.META:
+      case a.NUMLOCK:
+      case a.NUM_CENTER:
+      case a.PAGE_DOWN:
+      case a.PAGE_UP:
+      case a.PAUSE:
+      case a.PRINT_SCREEN:
+      case a.RIGHT:
+      case a.SHIFT:
+      case a.UP:
+      case a.WIN_KEY:
+      case a.WIN_KEY_RIGHT:
+        return !1;
+      default:
+        return !0;
+    }
   },
-  ORIGINAL: {
-    name: "original",
-    icon: f(et, null, null)
+  /**
+   * whether character is entered.
+   */
+  isCharacterKey: function(t) {
+    if (t >= a.ZERO && t <= a.NINE || t >= a.NUM_ZERO && t <= a.NUM_MULTIPLY || t >= a.A && t <= a.Z || window.navigator.userAgent.includes("WebKit") && t === 0)
+      return !0;
+    switch (t) {
+      case a.SPACE:
+      case a.QUESTION_MARK:
+      case a.NUM_PLUS:
+      case a.NUM_MINUS:
+      case a.NUM_PERIOD:
+      case a.NUM_DIVISION:
+      case a.SEMICOLON:
+      case a.DASH:
+      case a.EQUALS:
+      case a.COMMA:
+      case a.PERIOD:
+      case a.SLASH:
+      case a.APOSTROPHE:
+      case a.SINGLE_QUOTE:
+      case a.OPEN_SQUARE_BRACKET:
+      case a.BACKSLASH:
+      case a.CLOSE_SQUARE_BRACKET:
+        return !0;
+      default:
+        return !1;
+    }
   }
-}, Ft = function() {
-  return !q && !!window.navigator.userAgent.match(/firefox/i);
-}, je = Ft() ? "DOMMouseScroll" : "mousewheel";
-function Me(e) {
-  let t = !1;
-  return function(...n) {
-    t || (t = !0, window.requestAnimationFrame(() => {
-      e.apply(this, n), t = !1;
-    }));
+};
+let He = (e) => setTimeout(e, 16), je = (e) => clearTimeout(e);
+typeof window < "u" && "requestAnimationFrame" in window && (He = (e) => window.requestAnimationFrame(e), je = (e) => window.cancelAnimationFrame(e));
+let Re = 0;
+const Ne = /* @__PURE__ */ new Map();
+function Ye(e) {
+  Ne.delete(e);
+}
+function ye(e, t = 1) {
+  Re += 1;
+  const i = Re;
+  function l(o) {
+    if (o === 0)
+      Ye(i), e();
+    else {
+      const f = He(() => {
+        l(o - 1);
+      });
+      Ne.set(i, f);
+    }
+  }
+  return l(t), i;
+}
+ye.cancel = (e) => {
+  const t = Ne.get(e);
+  return Ye(t), je(t);
+};
+function Rt(e) {
+  const t = M(null), i = re({ ...e }), l = M([]), o = (f) => {
+    t.value === null && (l.value = [], t.value = ye(() => {
+      let c;
+      l.value.forEach((d) => {
+        c = { ...c, ...d };
+      }), Object.assign(i, c), t.value = null;
+    })), l.value.push(f);
   };
+  return De(() => {
+    t.value && ye.cancel(t.value);
+  }), [i, o];
 }
-const jt = /* @__PURE__ */ Ve({
-  props: pt,
-  emits: ["close", "switch"],
+const $t = /* @__PURE__ */ Me({
+  name: "Operations",
+  inheritAttrs: !1,
+  props: {
+    open: Boolean,
+    count: {
+      type: Number,
+      default: 0
+    },
+    current: {
+      type: Number,
+      default: 0
+    },
+    showSwitch: Boolean,
+    showProgress: Boolean,
+    prefixCls: String,
+    hashId: String,
+    zIndex: Y.zIndex,
+    icons: Y.icons,
+    infinite: Y.infinite,
+    getContainer: Y.getContainer,
+    countRender: Y.countRender,
+    tools: Array,
+    onClose: Function,
+    onActive: Function
+  },
+  setup(e) {
+    const t = (i, l) => {
+      var o;
+      i.preventDefault(), i.stopPropagation(), (o = e.onActive) == null || o.call(e, l);
+    };
+    return () => {
+      const {
+        prefixCls: i,
+        hashId: l,
+        tools: o
+      } = e, f = Ce(`${e.prefixCls}-fade`), c = `${i}-operations-operation`, d = `${i}-operations-icon`;
+      return r(Ue, {
+        to: e.getContainer || "body"
+      }, {
+        default: () => [r(Se, f, {
+          default: () => {
+            var p, m, h, C;
+            return [he(r("div", {
+              class: ae(`${i}-operations-wrapper`, l),
+              style: {
+                zIndex: e.zIndex
+              }
+            }, [((p = e.icons) == null ? void 0 : p.close) === null ? null : r("button", {
+              class: `${i}-close ${l}`,
+              onClick: e.onClose
+            }, [((m = e.icons) == null ? void 0 : m.close) || r(it, null, null)]), e.showSwitch && r(Ie, null, [r("div", {
+              class: ae(`${i}-switch-left ${l}`, {
+                [`${i}-switch-left-disabled`]: e.infinite ? !1 : e.current === 0
+              }),
+              onClick: (v) => t(v, -1)
+            }, [((h = e.icons) == null ? void 0 : h.left) || r(at, null, null)]), r("div", {
+              className: ae(`${i}-switch-right ${l}`, {
+                [`${i}-switch-right-disabled`]: e.infinite ? !1 : e.current === e.count - 1
+              }),
+              onClick: (v) => t(v, 1)
+            }, [((C = e.icons) == null ? void 0 : C.right) || r(lt, null, null)])]), r("div", {
+              class: `${i}-footer ${l}`
+            }, [e.showProgress && r("div", {
+              class: `${i}-progress`
+            }, [e.countRender ? e.countRender(e.current + 1, e.count) : `${e.current + 1} / ${e.count}`]), r("div", {
+              class: `${e.prefixCls}-operations`
+            }, [o == null ? void 0 : o.map(({
+              icon: v,
+              onClick: u,
+              type: N,
+              disabled: w
+            }) => r("div", {
+              class: ae(c, {
+                [`${e.prefixCls}-operations-operation-disabled`]: w && (w == null ? void 0 : w.value)
+              }),
+              onClick: u,
+              key: N
+            }, [Je(v, {
+              class: d
+            })]))])])]), [[pe, e.open]])];
+          }
+        })]
+      });
+    };
+  }
+}), D = {
+  x: 0,
+  y: 0
+}, H = {
+  rotateLeft: r(rt, null, null),
+  rotateRight: r(st, null, null),
+  zoomIn: r(ct, null, null),
+  zoomOut: r(ut, null, null),
+  flipX: r(xe, null, null),
+  flipY: r(xe, {
+    rotate: 90
+  }, null)
+}, Dt = /* @__PURE__ */ Me({
+  name: "GImageViewer",
+  props: Y,
+  inheritAttrs: !1,
+  emits: ["close", "switch", "afterClose"],
   setup: (e, {
     emit: t,
-    expose: n
+    expose: i,
+    slots: l
   }) => {
-    var ie, re, $, Z, Ce;
-    let a = null, i = null, r = null;
-    const o = Ge({
-      suffixCls: "image-viewer"
+    const o = _e({
+      suffixCls: "image-view"
     }), {
-      wrapSSR: l,
+      wrapSSR: f,
       hashId: c
-    } = Pt(o), S = Te(!1), [p, E] = 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
+    } = Lt(o), [d, p] = Le(!1), [m, h] = Le(!1), C = M(null), v = M(e.current), u = V(1), N = V(0), w = V(!1), O = re({
+      x: 1,
+      y: 1
+    }), [I, T] = Rt(D), W = V({
+      wheelDirection: 0
+    }), R = V(), A = re({
+      originX: 0,
+      originY: 0,
+      deltaX: 0,
+      deltaY: 0
+    }), $ = re(/* @__PURE__ */ new Map()), z = y(() => new Map(Array.from($).map(([n, {
+      url: g
+    }]) => [n, g]))), Q = y(() => z.value.get(v.value)), _ = y(() => z.value.size), G = y(() => Array.from(z.value.keys())), b = y(() => G.value.indexOf(v.value)), k = y(() => _.value > 1), X = y(() => _.value >= 1);
+    j(d, (n) => {
+      n && (m.value = !0);
+    });
+    const s = (n) => {
+      v.value = n;
+    };
+    j(() => e.current, (n) => {
+      Ee(n) && s(n);
+    });
+    function S(n, g) {
+      $.set(n, {
+        url: g,
+        loading: !0,
+        canPreview: !1
+      });
+    }
+    const x = () => {
+      h(!1), v.value = e.current;
+    }, F = () => {
+      u.value = 1, N.value = 0, O.x = 1, O.y = 1, T(D), t("close");
+    }, de = (n) => {
+      w.value || C.value === (n == null ? void 0 : n.target) && x();
+    }, fe = () => {
+      const n = $.get(v.value);
+      n && (n.loading = !1, n.canPreview = !0);
+    }, q = (n) => {
+      const g = $.get(v.value);
+      g && (g.loading = !1, g.canPreview = !1), n.target.alt = "加载失败";
+    }, J = () => {
+      if (b.value > 0 || e.infinite) {
+        const n = b.value - 1 < 0 ? e.previewUrls.length - 1 : b.value - 1;
+        s(G.value[n]);
       }
-    }), 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: I,
-        offsetX: d,
-        offsetY: y,
-        enableTransition: b
-      } = m.transform, A = {
-        transform: `scale(${s}) rotate(${I}deg)`,
-        transition: b ? "transform .3s" : "",
-        marginLeft: `${d}px`,
-        marginTop: `${y}px`
-      };
-      return W.value.name === X.CONTAIN.name && (A.maxWidth = A.maxHeight = "100%"), A;
-    }), ne = () => {
-      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
-      };
-    }, 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,
-        offsetY: 0,
-        enableTransition: !1
-      };
-    }, j = () => {
-      if (G.value && !e.infinite) return;
-      const s = e.urlList.length;
-      h.value = (h.value - 1 + s) % s;
-    }, u = () => {
-      if (K.value && !e.infinite) return;
-      const s = e.urlList.length;
-      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: d,
-        rotateDeg: y,
-        enableTransition: b
-      } = {
-        zoomRate: 0.2,
-        rotateDeg: 90,
-        enableTransition: !0,
-        ...I
-      };
-      switch (s) {
-        case "zoomOut":
-          m.transform.scale > 0.2 && (m.transform.scale = Number.parseFloat((m.transform.scale - d).toFixed(3)));
-          break;
-        case "zoomIn":
-          m.transform.scale = Number.parseFloat((m.transform.scale + d).toFixed(3));
-          break;
-        case "clocelise":
-          m.transform.deg += y;
-          break;
-        case "anticlocelise":
-          m.transform.deg -= y;
-          break;
+    }, ee = () => {
+      if (b.value < _.value - 1 || e.infinite) {
+        const n = b.value + 1 > e.previewUrls.length - 1 ? 0 : b.value + 1;
+        s(G.value[n]);
       }
-      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: ((ie = e.icons) == null ? void 0 : ie.close) || f(tt, null, null),
-      onClick: (s) => {
-        s.stopPropagation(), x(!1);
-      },
-      type: "close"
-    }, {
-      icon: ((re = e.icons) == null ? void 0 : re.zoomIn) || f(nt, null, null),
-      onClick: (s) => {
-        s.stopPropagation(), g("zoomIn");
-      },
+    }, te = (n) => {
+      n ? u.value += 0.5 : u.value++, T(D);
+    }, ne = (n) => {
+      u.value > 1 && (n ? u.value -= 0.5 : u.value--), T(D);
+    }, ve = () => {
+      N.value += 90;
+    }, Ke = () => {
+      N.value -= 90;
+    }, We = () => {
+      O.x = -O.x;
+    }, Ge = () => {
+      O.y = -O.y;
+    }, Xe = [{
+      icon: L(l, e.icons, "zoomIn") || H.zoomIn,
+      onClick: () => te(),
       type: "zoomIn"
     }, {
-      icon: (($ = e.icons) == null ? void 0 : $.zoomOut) || f(at, null, null),
-      onClick: (s) => {
-        s.stopPropagation(), g("zoomOut");
-      },
-      type: "zoomOut"
+      icon: L(l, e.icons, "zoomOut") || H.zoomOut,
+      onClick: () => ne(),
+      type: "zoomOut",
+      disabled: y(() => u.value === 1)
     }, {
-      icon: ((Z = e.icons) == null ? void 0 : Z.rotateRight) || f(it, null, null),
-      onClick: (s) => {
-        s.stopPropagation(), g("anticlocelise");
-      },
+      icon: L(l, e.icons, "rotateRight") || H.rotateRight,
+      onClick: ve,
       type: "rotateRight"
     }, {
-      icon: ((Ce = e.icons) == null ? void 0 : Ce.rotateLeft) || f(rt, null, null),
-      onClick: (s) => {
-        s.stopPropagation(), g("clocelise");
-      },
+      icon: L(l, e.icons, "rotateLeft") || H.rotateLeft,
+      onClick: Ke,
       type: "rotateLeft"
-    }];
-    return _(ee, () => {
-      Ye(() => {
-        F.value.complete || (z.value = !0);
+    }, {
+      icon: L(l, e.icons, "flipX") || H.flipX,
+      onClick: We,
+      type: "flipX"
+    }, {
+      icon: L(l, e.icons, "flipY") || H.flipY,
+      onClick: Ge,
+      type: "flipY"
+    }], Oe = () => {
+      if (d.value && w.value && R.value) {
+        const n = R.value.offsetWidth * u.value, g = R.value.offsetHeight * u.value, {
+          left: P,
+          top: E
+        } = Tt(R.value), oe = N.value % 180 !== 0;
+        w.value = !1;
+        const ie = Pt(oe ? g : n, oe ? n : g, P, E);
+        ie && T({
+          ...ie
+        });
+      }
+    }, Ze = (n) => {
+      n.button === 0 && (n.preventDefault(), n.stopPropagation(), A.deltaX = n.pageX - I.x, A.deltaY = n.pageY - I.y, A.originX = I.x, A.originY = I.y, w.value = !0);
+    }, Ae = (n) => {
+      d.value && w.value && T({
+        x: n.pageX - A.deltaX,
+        y: n.pageY - A.deltaY
       });
-    }), _(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: E
+    }, Ve = (n) => {
+      if (!d.value) return;
+      n.preventDefault();
+      const g = n.deltaY;
+      W.value = {
+        wheelDirection: g
+      };
+    }, Qe = (n) => {
+      !d.value || !k.value || (n.keyCode === a.LEFT ? J() : n.keyCode === a.RIGHT && ee());
+    }, ke = () => {
+      d.value && (u.value !== 1 && (u.value = 1), (I.x !== D.x || I.y !== D.y) && T(D));
+    };
+    let ge = () => {
+    };
+    return De(() => {
+      j(() => e.previewUrls, (n) => {
+        Fe(n) && n.forEach((g, P) => {
+          S(P, g);
+        });
+      }, {
+        flush: "post",
+        immediate: !0
+      }), j([() => d.value, w], () => {
+        ge();
+        let n, g;
+        const P = B(window, "mouseup", Oe, !1), E = B(window, "mousemove", Ae, !1), oe = B(window, "wheel", Ve, {
+          passive: !1
+        }), ie = B(window, "keydown", Qe, !1);
+        try {
+          window.top !== window.self && (n = B(window.top, "mouseup", Oe, !1), g = B(window.top, "mousemove", Ae, !1));
+        } catch (qe) {
+          Et(!1, `[vc-image] ${qe}`);
+        }
+        ge = () => {
+          P.remove(), E.remove(), oe.remove(), ie.remove(), n && n.remove(), g && g.remove();
+        };
+      }, {
+        flush: "post",
+        immediate: !0
+      }), j([W], () => {
+        const {
+          wheelDirection: n
+        } = W.value;
+        n > 0 ? ne(!0) : n < 0 && te(!0);
+      });
+    }), et(() => {
+      ge();
+    }), i({
+      setOpen: p
     }), () => {
-      const s = Ee(`${o}-fade`), I = Ee(`${o}-zoom`);
-      return l(f(_e, {
+      const n = Ce(`${o}-fade`), g = Ce(`${o}-zoom`), P = {};
+      for (const E in e.icons)
+        P[E] = L(l, e.icons, E);
+      return f(r(Ie, null, [r(Ue, {
         to: e.getContainer || "body",
         disabled: !e.teleported
       }, {
-        default: () => [p.value && f("div", {
+        default: () => [d.value && r(Ie, null, [r("div", {
           class: `${o}-root ${c.value}`
-        }, [f(ke, s, {
-          default: () => [ze(f("div", {
+        }, [r(Se, n, {
+          default: () => [he(r("div", {
             class: `${o}-mask ${c.value}`
-          }, null), [[Oe, p.value && k.value]])]
-        }), f("div", {
-          ref: P,
+          }, null), [[pe, d.value && m.value]])]
+        }), r("div", {
+          ref: C,
           tabindex: -1,
-          class: [`${o}-wrapper`, `${c.value}`],
-          onClick: (d) => e.onHideOnClickModal && he(d)
-        }, [f(ke, We(I, {
-          onAfterLeave: () => de()
+          class: [`${o}-wrap`, `${c.value}`],
+          onClick: (E) => e.onHideOnClickModal && de(E)
+        }, [r(Se, ze(g, {
+          onAfterLeave: () => F()
         }), {
-          default: () => {
-            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()
-            }, [f("ul", {
-              class: `${o}-operations ${c.value}`
-            }, [me.map(({
-              icon: b,
-              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: {
-                ...te.value,
-                display: A === h.value ? "block" : "none"
-              },
-              key: b,
-              src: b,
-              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]])];
-          }
-        })])])]
-      }));
+          default: () => [he(r("div", {
+            role: "dialog",
+            class: `${o} ${c.value}`
+          }, [r("div", {
+            class: `${o}-content ${c.value}`
+          }, [r("div", {
+            class: `${o}-body ${c.value}`
+          }, [r("div", {
+            class: `${o}-img-wrapper ${c.value}`,
+            style: {
+              transform: `translate3d(${I.x}px, ${I.y}px, 0)`
+            }
+          }, [r("img", {
+            onMousedown: Ze,
+            onDblclick: ke,
+            ref: R,
+            class: `${o}-img ${c.value}`,
+            src: Q.value,
+            onLoad: () => fe(),
+            onError: (E) => q(E),
+            style: {
+              transform: `scale3d(${O.x * u.value}, ${O.y * u.value}, 1) rotate(${N.value}deg)`
+            }
+          }, null)])])])]), [[pe, d.value && m.value]])]
+        })])])])]
+      }), d.value && m.value && r($t, {
+        open: d.value && m.value,
+        hashId: c.value,
+        count: e.previewUrls.length,
+        current: v.value,
+        zIndex: e.zIndex + 1,
+        getContainer: e.getContainer,
+        prefixCls: o,
+        icons: P,
+        tools: Xe,
+        infinite: e.infinite,
+        countRender: dt(l, e, "countRenders"),
+        showSwitch: k.value,
+        showProgress: X.value,
+        onClose: x,
+        onActive: (E) => E > 0 ? ee() : J()
+      }, null)]));
     };
   }
-}), Ie = {
+}), we = {
   width: "100%",
   height: "100%"
-}, Bt = (e) => ({
+}, Ut = () => ({
+  position: "absolute",
+  inset: 0,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  cursor: "pointer",
+  opacity: 0
+}), zt = (e) => ({
   [e.componentCls]: {
     display: "inline-block",
     position: "relative",
     overflow: "hidden",
     "&-inner": {
-      ...Ie,
+      ...we,
       verticalAlign: "top",
-      opacity: 1
+      opacity: 1,
+      [`&${e.componentCls}-inner-preview`]: {
+        userSelect: "none"
+      }
     },
     "&-placeholder": {
-      ...Ie,
+      ...we,
       backgroundColor: e.colorBgContainerDisabled,
       backgroundImage: "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=')",
       backgroundRepeat: "no-repeat",
@@ -1204,163 +1358,156 @@ const jt = /* @__PURE__ */ Ve({
       backgroundSize: "30%"
     },
     "&-error": {
-      ...Ie,
+      ...we,
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
       color: e.colorText,
       backgroundColor: e.colorBgContainerDisabled
     },
-    "&-preview": {
-      cursor: "pointer"
-    }
+    "&-preview": Ut()
   }
-}), Vt = (e) => e && e.nodeType === Node.ELEMENT_NODE;
-let Be = "";
-const ce = /* @__PURE__ */ Ve({
-  props: ue,
+}), _t = (e) => e && e.nodeType === Node.ELEMENT_NODE;
+let $e = "";
+const ce = /* @__PURE__ */ Me({
+  props: se,
   name: "GImage",
   emits: ["error", "click", "load"],
   slots: Object,
   setup(e, {
     slots: t,
-    emit: n,
-    attrs: a
+    emit: i,
+    attrs: l
   }) {
-    const i = Ge({
+    const o = _e({
       suffixCls: "image"
     }), {
-      wrapSSR: r,
-      hashId: o
-    } = vt("Image", [Bt], i), l = C(), c = C(""), S = C(!1), p = C(!0), E = C(!1), k = C(null), x = C();
-    let z, h;
-    const P = L(() => !q && e.fit ? {
+      wrapSSR: f,
+      hashId: c
+    } = It("Image", [zt], o), d = M(), p = M(""), m = M(!1), h = M(!0), C = M(!1), v = M(null), u = M();
+    let N, w;
+    const O = y(() => !le && e.fit ? {
       "object-fit": e.fit
-    } : {}), F = L(() => {
-      const {
-        previewSrcList: u
-      } = e;
-      return Array.isArray(u) && u.length > 0;
-    }), W = L(() => {
+    } : {}), I = y(() => Fe(e.previewUrls) && e.previewUrls.length > 0), T = y(() => {
       const {
-        src: u,
-        previewSrcList: M,
-        initialIndex: g
+        src: s,
+        previewUrls: S,
+        current: x
       } = e;
-      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);
+      if (Ee(x)) return S.length >= x ? x : 0;
+      const F = S.indexOf(s);
+      return F >= 0 ? F : 0;
+    }), W = (s) => {
+      p.value = e.src, h.value = !1, m.value = !1, i("load", s);
+    }, R = (s) => {
+      h.value = !1, m.value = !0, i("error", s);
+    }, A = () => {
+      if (le) return;
+      h.value = !0, m.value = !1;
+      const s = new Image();
+      s.onload = (S) => W(S), s.onerror = R, Object.keys(l || {}).forEach((S) => {
+        if (S.toLowerCase() === "onload") return;
+        const x = (l || {})[S];
+        s.setAttribute(S, x);
+      }), s.src = e.src;
+    }, $ = pt(Q, 200), z = () => {
+      le || !u.value || !$ || (N(), u.value = void 0);
     };
-    function te() {
-      lt(k.value, x.value) && (G(), ee());
+    function Q() {
+      ft(v.value, u.value) && (A(), z());
     }
-    const ne = async () => {
-      if (q) return;
-      await Ye();
+    const _ = async () => {
+      if (le) return;
+      await ot();
       const {
-        scrollContainer: u
+        scrollContainer: s
       } = e;
-      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 = $e(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;
+      _t(s) ? u.value = s : vt(s) && s !== "" ? u.value = document.querySelector(s) ?? void 0 : v.value && (u.value = gt(v.value)), u.value && (N = Te(u, "scroll", $), setTimeout(() => Q(), 200));
+    }, G = (s) => {
+      if (s.ctrlKey) {
+        if (s.deltaY < 0)
+          return s.preventDefault(), !1;
+        if (s.deltaY > 0)
+          return s.preventDefault(), !1;
       }
-    }, he = () => {
-      !F.value || e.disablePreview || (h = $e("wheel", de, {
+    }, b = () => {
+      I.value && (w = Te("wheel", G, {
         passive: !1
-      }), Be = document.body.style.overflow, document.body.style.overflow = "hidden", E.value = !0);
-    }, ae = () => {
-      h == null || h(), document.body.style.overflow = Be, E.value = !1;
+      }), $e = document.body.style.overflow, document.body.style.overflow = "hidden", C.value = !0);
+    }, k = () => {
+      w == null || w(), document.body.style.overflow = $e, C.value = !1;
     };
-    _(() => e.src, () => {
-      e.lazy ? (p.value = !0, S.value = !1, ee(), ne()) : G();
+    j(() => e.src, () => {
+      e.lazy ? (h.value = !0, m.value = !1, z(), _()) : A();
+    }), tt(() => {
+      var s, S;
+      I.value && C.value ? (s = d.value) == null || s.setOpen(!0) : (S = d.value) == null || S.setOpen(!1);
     });
-    const j = (u) => ft(u) ? u + "px" : u;
-    return dt(() => {
-      e.lazy ? ne() : G();
+    const X = (s) => Ee(s) ? s + "px" : s;
+    return mt(() => {
+      e.lazy ? _() : A();
     }), () => {
       const {
-        crossorigin: u,
-        decoding: M,
-        alt: g,
-        sizes: B,
-        srcset: V,
-        usemap: ge,
-        class: U,
-        style: ve = {}
-      } = a, me = {
-        crossorigin: u,
-        decoding: M,
-        alt: g,
-        sizes: B,
-        srcset: V,
-        usemap: ge,
+        crossorigin: s,
+        decoding: S,
+        alt: x,
+        sizes: F,
+        srcset: de,
+        usemap: fe,
+        class: q,
+        style: J = {}
+      } = l, ee = {
+        crossorigin: s,
+        decoding: S,
+        alt: x,
+        sizes: F,
+        srcset: de,
+        usemap: fe,
         style: {
-          ...P.value,
-          height: e.height ? j(e.height) : void 0
+          ...O.value,
+          height: e.height ? X(e.height) : void 0
         }
-      }, ie = Le(t, e, "fallback"), re = Le(t, e, "placeholder");
-      return Qe(() => {
-        var $, Z;
-        F.value && E.value ? ($ = l.value) == null || $.setOpen(!0) : (Z = l.value) == null || Z.setOpen(!1);
-      }), r(f("div", {
+      }, te = L(t, e, "fallback"), ne = L(t, e, "placeholder");
+      return f(r("div", {
         class: {
-          [`${o.value}`]: !0,
-          [`${i}`]: !0,
-          [`${U}`]: !!U
+          [`${c.value}`]: !0,
+          [`${o}`]: !0,
+          [`${q}`]: !!q
         },
-        ref: ($) => k.value = $,
+        ref: (ve) => v.value = ve,
         style: {
-          width: e.width ? j(e.width) : void 0,
-          height: e.height ? j(e.height) : void 0,
+          width: e.width ? X(e.width) : void 0,
+          height: e.height ? X(e.height) : void 0,
           display: e.lazy ? "block" : void 0,
-          ...ve
+          ...J
         },
         onClick: () => {
-          n("click");
+          i("click");
         }
-      }, [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, {
+      }, [h.value ? ne || r("div", {
+        class: `${o}-placeholder ${c.value}`
+      }, null) : m.value ? te || r("div", {
+        class: `${o}-error ${c.value}`
+      }, [nt("加载失败")]) : p.value && r("img", ze(ee, {
         class: {
-          [`${o.value}`]: !0,
+          [`${c.value}`]: !0,
           [`${e.imageClassName}`]: !!e.imageClassName,
-          [`${i}-inner`]: !0,
-          [`${i}-preview`]: F.value
+          [`${o}-inner`]: !0,
+          [`${o}-inner-preview`]: I.value
         },
         alt: e.alt,
-        src: c.value,
-        onClick: () => he()
-      }), null), f(jt, {
-        ref: l,
+        src: p.value
+      }), null), I.value && r("div", {
+        class: `${o}-preview ${c.value}`,
+        onClick: () => b()
+      }, null), r(Dt, {
+        ref: d,
         zIndex: e.zIndex,
         infinite: e.infinite,
-        initialIndex: W.value,
-        urlList: e.previewSrcList,
+        current: T.value,
+        previewUrls: e.previewUrls,
         getContainer: e.getContainer,
-        onHideOnClickModal: e.hideOnClickModal,
-        onClose: () => ae()
+        onClose: () => k()
       }, null)]));
     };
   }
@@ -1369,8 +1516,9 @@ ce.isGImage = !0;
 ce.install = (e) => (e.component(ce.name, ce), e);
 export {
   ce as GImage,
-  jt as ImageViewer,
+  Dt as ImagePreview,
+  U as baseProps,
   ce as default,
-  ue as imagePorps,
-  pt as imageViewProps
+  se as imagePorps,
+  Y as imagePreviewProps
 };