@gx-design-vue/image 0.2.0-beta.14 → 0.2.0-beta.16

package/dist/image.js

@@ -1,11 +1,11 @@
 import { createTypes as Ze } from "vue-types";
-import { createVNode as c, defineComponent as Ve, shallowRef as Te, ref as A, reactive as Xe, computed as N, watch as q, nextTick as Ye, Teleport as _e, Transition as ke, withDirectives as ze, vShow as Oe, mergeProps as We, cloneVNode as qe, watchEffect as Qe, Fragment as Je, createTextVNode as Ke } from "vue";
-import { ExpandOutlined as et, OneToOneOutlined as tt, CloseOutlined as nt, ZoomInOutlined as at, ZoomOutOutlined as it, RotateRightOutlined as rt, RotateLeftOutlined as ot, LeftOutlined as st, RightOutlined as lt } from "@ant-design/icons-vue";
-import { isServer as Q, getPrefixCls as Ge, getSlotVNode as Le, isInContainer as ut, isString as ct, getScrollContainer as ft, isNumber as dt } from "@gx-design-vue/pro-utils";
-import { useState as Ne, onMountedOrActivated as ht } from "@gx-design-vue/pro-hooks";
-import { Keyframe as ce, useStyle as gt, mergeToken as vt, getTransitionProps as $e, useProStyle as mt } from "@gx-design-vue/pro-provider";
-import { useThrottleFn as pt, useEventListener as Ee } from "@vueuse/core";
-const H = Ze({
+import { createVNode as f, defineComponent as Ve, shallowRef as Te, ref as C, reactive as Xe, computed as L, watch as _, nextTick as Ye, Teleport as _e, Transition as ke, withDirectives as ze, vShow as Oe, mergeProps as We, cloneVNode as qe, watchEffect as Qe, createTextVNode as Je } from "vue";
+import { ExpandOutlined as Ke, OneToOneOutlined as et, CloseOutlined as tt, ZoomInOutlined as nt, ZoomOutOutlined as at, RotateRightOutlined as it, RotateLeftOutlined as rt, LeftOutlined as ot, RightOutlined as st } from "@ant-design/icons-vue";
+import { isServer as q, getPrefixCls as Ge, isInContainer as lt, getSlotVNode as Le, isString as ut, getScrollContainer as ct, isNumber as ft } from "@gx-design-vue/pro-utils";
+import { useState as Ne, onMountedOrActivated as dt } from "@gx-design-vue/pro-hooks";
+import { Keyframe as fe, useStyle as ht, mergeToken as gt, getTransitionProps as $e, useProStyle as vt } from "@gx-design-vue/pro-provider";
+import { useThrottleFn as mt, useEventListener as Ee } from "@vueuse/core";
+const R = Ze({
   func: void 0,
   bool: void 0,
   string: void 0,
@@ -14,7 +14,7 @@ const H = Ze({
   object: void 0,
   integer: void 0
 });
-H.extend([{
+R.extend([{
   name: "looseBool",
   getter: !0,
   type: Boolean,
@@ -29,7 +29,7 @@ H.extend([{
   getter: !0,
   type: null
 }]);
-const P = {
+const D = {
   infinite: {
     type: Boolean,
     default: !0
@@ -45,7 +45,7 @@ const P = {
   getContainer: {
     type: String
   }
-}, le = {
+}, ue = {
   previewTeleported: {
     type: Boolean,
     default: !0
@@ -66,7 +66,7 @@ const P = {
     type: String,
     default: "contain"
   },
-  lazy: H.bool,
+  lazy: R.bool,
   scrollContainer: {
     type: [String, Object]
   },
@@ -89,48 +89,48 @@ const P = {
   onClick: {
     type: Function
   },
-  disablePreview: H.bool,
+  disablePreview: R.bool,
   previewSrcList: {
     type: Array,
     default: () => []
   },
-  imageClassName: H.string,
-  imageStyle: H.style,
-  width: H.number,
-  height: H.number,
-  zIndex: P.zIndex,
-  infinite: P.infinite,
-  getContainer: P.getContainer,
+  imageClassName: R.string,
+  imageStyle: R.style,
+  width: R.number,
+  height: R.number,
+  zIndex: D.zIndex,
+  infinite: D.infinite,
+  getContainer: D.getContainer,
   initialIndex: {
-    ...P.initialIndex,
+    ...D.initialIndex,
     default: () => {
     }
   }
-}, bt = {
+}, pt = {
   urlList: {
     type: Array,
     default: () => []
   },
-  teleported: le.previewTeleported,
-  zIndex: P.zIndex,
-  initialIndex: P.initialIndex,
-  infinite: P.infinite,
-  getContainer: le.getContainer,
-  onHideOnClickModal: le.hideOnClickModal,
+  teleported: ue.previewTeleported,
+  zIndex: D.zIndex,
+  initialIndex: D.initialIndex,
+  infinite: D.infinite,
+  getContainer: ue.getContainer,
+  onHideOnClickModal: ue.hideOnClickModal,
   icons: {
     type: Object,
     default: () => ({})
   }
 };
 function v(e, t) {
-  wt(e) && (e = "100%");
+  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 re(e) {
+function oe(e) {
   return Math.min(1, Math.max(0, e));
 }
-function wt(e) {
+function bt(e) {
   return typeof e == "string" && e.indexOf(".") !== -1 && parseFloat(e) === 1;
 }
 function yt(e) {
@@ -139,13 +139,13 @@ function yt(e) {
 function Ue(e) {
   return e = parseFloat(e), (isNaN(e) || e < 0 || e > 1) && (e = 1), e;
 }
-function oe(e) {
+function se(e) {
   return e <= 1 ? "".concat(Number(e) * 100, "%") : e;
 }
-function F(e) {
+function H(e) {
   return e.length === 1 ? "0" + e : String(e);
 }
-function St(e, t, n) {
+function wt(e, t, n) {
   return {
     r: v(e, 255) * 255,
     g: v(t, 255) * 255,
@@ -158,16 +158,16 @@ function Re(e, t, n) {
   if (a === i)
     o = 0, r = 0;
   else {
-    var f = a - i;
-    switch (o = l > 0.5 ? f / (2 - a - i) : f / (a + i), a) {
+    var c = a - i;
+    switch (o = l > 0.5 ? c / (2 - a - i) : c / (a + i), a) {
       case e:
-        r = (t - n) / f + (t < n ? 6 : 0);
+        r = (t - n) / c + (t < n ? 6 : 0);
         break;
       case t:
-        r = (n - e) / f + 2;
+        r = (n - e) / c + 2;
         break;
       case n:
-        r = (e - t) / f + 4;
+        r = (e - t) / c + 4;
         break;
     }
     r /= 6;
@@ -177,7 +177,7 @@ function Re(e, t, n) {
 function be(e, t, n) {
   return n < 0 && (n += 1), n > 1 && (n -= 1), n < 1 / 6 ? e + (t - e) * (6 * n) : n < 1 / 2 ? t : n < 2 / 3 ? e + (t - e) * (2 / 3 - n) * 6 : e;
 }
-function xt(e, t, n) {
+function St(e, t, n) {
   var a, i, r;
   if (e = v(e, 360), t = v(t, 100), n = v(n, 100), t === 0)
     i = n, r = n, a = n;
@@ -189,7 +189,7 @@ function xt(e, t, n) {
 }
 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, f = a === 0 ? 0 : l / a;
+  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 {
@@ -206,40 +206,40 @@ function De(e, t, n) {
     }
     r /= 6;
   }
-  return { h: r, s: f, v: o };
+  return { h: r, s: c, v: o };
 }
-function Mt(e, t, n) {
+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), f = a % 6, S = [n, o, r, r, l, n][f], m = [l, n, n, o, r, r][f], E = [r, r, l, n, n, o][f];
-  return { r: S * 255, g: m * 255, b: E * 255 };
+  var a = Math.floor(e), i = e - a, r = n * (1 - t), o = n * (1 - i * t), l = n * (1 - (1 - i) * t), c = a % 6, S = [n, o, r, r, l, n][c], p = [l, n, n, o, r, r][c], $ = [r, r, l, n, n, o][c];
+  return { r: S * 255, g: p * 255, b: $ * 255 };
 }
 function He(e, t, n, a) {
   var i = [
-    F(Math.round(e).toString(16)),
-    F(Math.round(t).toString(16)),
-    F(Math.round(n).toString(16))
+    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 It(e, t, n, a, i) {
+function Mt(e, t, n, a, i) {
   var r = [
-    F(Math.round(e).toString(16)),
-    F(Math.round(t).toString(16)),
-    F(Math.round(n).toString(16)),
-    F(At(a))
+    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 At(e) {
+function It(e) {
   return Math.round(parseFloat(e) * 255).toString(16);
 }
 function Pe(e) {
-  return y(e) / 255;
+  return w(e) / 255;
 }
-function y(e) {
+function w(e) {
   return parseInt(e, 16);
 }
-function Ct(e) {
+function At(e) {
   return {
     r: e >> 16,
     g: (e & 65280) >> 8,
@@ -396,9 +396,9 @@ var Ae = {
   yellow: "#ffff00",
   yellowgreen: "#9acd32"
 };
-function Tt(e) {
+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 = Ot(e)), typeof e == "object" && (L(e.r) && L(e.g) && L(e.b) ? (t = St(e.r, e.g, e.b), o = !0, l = String(e.r).substr(-1) === "%" ? "prgb" : "rgb") : L(e.h) && L(e.s) && L(e.v) ? (a = oe(e.s), i = oe(e.v), t = Mt(e.h, a, i), o = !0, l = "hsv") : L(e.h) && L(e.s) && L(e.l) && (a = oe(e.s), r = oe(e.l), t = xt(e.h, a, r), o = !0, l = "hsl"), Object.prototype.hasOwnProperty.call(e, "a") && (n = e.a)), n = Ue(n), {
+  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)),
@@ -407,20 +407,20 @@ function Tt(e) {
     a: n
   };
 }
-var kt = "[-\\+]?\\d+%?", zt = "[-\\+]?\\d*\\.\\d+%?", $ = "(?:".concat(zt, ")|(?:").concat(kt, ")"), we = "[\\s|\\(]+(".concat($, ")[,|\\s]+(").concat($, ")[,|\\s]+(").concat($, ")\\s*\\)?"), ye = "[\\s|\\(]+(".concat($, ")[,|\\s]+(").concat($, ")[,|\\s]+(").concat($, ")[,|\\s]+(").concat($, ")\\s*\\)?"), C = {
-  CSS_UNIT: new RegExp($),
-  rgb: new RegExp("rgb" + we),
-  rgba: new RegExp("rgba" + ye),
-  hsl: new RegExp("hsl" + we),
-  hsla: new RegExp("hsla" + ye),
-  hsv: new RegExp("hsv" + we),
-  hsva: new RegExp("hsva" + ye),
+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 Ot(e) {
+function zt(e) {
   if (e = e.trim().toLowerCase(), e.length === 0)
     return !1;
   var t = !1;
@@ -428,35 +428,35 @@ function Ot(e) {
     e = Ae[e], t = !0;
   else if (e === "transparent")
     return { r: 0, g: 0, b: 0, a: 0, format: "name" };
-  var n = C.rgb.exec(e);
-  return n ? { r: n[1], g: n[2], b: n[3] } : (n = C.rgba.exec(e), n ? { r: n[1], g: n[2], b: n[3], a: n[4] } : (n = C.hsl.exec(e), n ? { h: n[1], s: n[2], l: n[3] } : (n = C.hsla.exec(e), n ? { h: n[1], s: n[2], l: n[3], a: n[4] } : (n = C.hsv.exec(e), n ? { h: n[1], s: n[2], v: n[3] } : (n = C.hsva.exec(e), n ? { h: n[1], s: n[2], v: n[3], a: n[4] } : (n = C.hex8.exec(e), n ? {
-    r: y(n[1]),
-    g: y(n[2]),
-    b: y(n[3]),
+  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 = C.hex6.exec(e), n ? {
-    r: y(n[1]),
-    g: y(n[2]),
-    b: y(n[3]),
+  } : (n = T.hex6.exec(e), n ? {
+    r: w(n[1]),
+    g: w(n[2]),
+    b: w(n[3]),
     format: t ? "name" : "hex"
-  } : (n = C.hex4.exec(e), n ? {
-    r: y(n[1] + n[1]),
-    g: y(n[2] + n[2]),
-    b: y(n[3] + n[3]),
+  } : (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 = C.hex3.exec(e), n ? {
-    r: y(n[1] + n[1]),
-    g: y(n[2] + n[2]),
-    b: y(n[3] + n[3]),
+  } : (n = T.hex3.exec(e), n ? {
+    r: w(n[1] + n[1]),
+    g: w(n[2] + n[2]),
+    b: w(n[3] + n[3]),
     format: t ? "name" : "hex"
   } : !1)))))))));
 }
-function L(e) {
-  return !!C.CSS_UNIT.exec(String(e));
+function O(e) {
+  return !!T.CSS_UNIT.exec(String(e));
 }
-var J = (
+var Q = (
   /** @class */
   function() {
     function e(t, n) {
@@ -464,8 +464,8 @@ var J = (
       var a;
       if (t instanceof e)
         return t;
-      typeof t == "number" && (t = Ct(t)), this.originalInput = t;
-      var i = Tt(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() {
@@ -502,9 +502,11 @@ var J = (
     }, 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), It(this.r, this.g, this.b, this.a, t);
+      return t === void 0 && (t = !1), Mt(this.r, this.g, this.b, this.a, t);
     }, e.prototype.toHex8String = function(t) {
       return t === void 0 && (t = !1), "#" + this.toHex8(t);
+    }, e.prototype.toHexShortString = function(t) {
+      return t === void 0 && (t = !1), this.a === 1 ? this.toHexString(t) : this.toHex8String(t);
     }, e.prototype.toRgb = function() {
       return {
         r: Math.round(this.r),
@@ -553,7 +555,7 @@ var J = (
     }, e.prototype.lighten = function(t) {
       t === void 0 && (t = 10);
       var n = this.toHsl();
-      return n.l += t / 100, n.l = re(n.l), new e(n);
+      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();
@@ -561,7 +563,7 @@ var J = (
     }, e.prototype.darken = function(t) {
       t === void 0 && (t = 10);
       var n = this.toHsl();
-      return n.l -= t / 100, n.l = re(n.l), new e(n);
+      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) {
@@ -569,11 +571,11 @@ var J = (
     }, e.prototype.desaturate = function(t) {
       t === void 0 && (t = 10);
       var n = this.toHsl();
-      return n.s -= t / 100, n.s = re(n.s), new e(n);
+      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 = re(n.s), new e(n);
+      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) {
@@ -610,11 +612,12 @@ var J = (
         new e({ h: (n + 216) % 360, s: t.s, l: t.l })
       ];
     }, e.prototype.onBackground = function(t) {
-      var n = this.toRgb(), a = new e(t).toRgb();
+      var n = this.toRgb(), a = new e(t).toRgb(), i = n.a + a.a * (1 - n.a);
       return new e({
-        r: a.r + (n.r - a.r) * n.a,
-        g: a.g + (n.g - a.g) * n.a,
-        b: a.b + (n.b - a.b) * n.a
+        r: (n.r * n.a + a.r * a.a * (1 - n.a)) / i,
+        g: (n.g * n.a + a.g * a.a * (1 - n.a)) / i,
+        b: (n.b * n.a + a.b * a.a * (1 - n.a)) / i,
+        a: i
       });
     }, e.prototype.triad = function() {
       return this.polyad(3);
@@ -629,21 +632,21 @@ var J = (
     }, e;
   }()
 );
-const Lt = new ce("viewFadeIn", {
+const Ot = new fe("viewFadeIn", {
   "0%": {
     opacity: 0
   },
   "100%": {
     opacity: 1
   }
-}), Nt = new ce("viewFadeOut", {
+}), Lt = new fe("viewFadeOut", {
   "0%": {
     opacity: 1
   },
   "100%": {
     opacity: 0
   }
-}), $t = new ce("viewZoomBadgeIn", {
+}), Nt = new fe("viewZoomBadgeIn", {
   "0%": {
     transform: "scale(0.2)",
     opacity: 0
@@ -652,7 +655,7 @@ const Lt = new ce("viewFadeIn", {
     transform: "scale(1)",
     opacity: 1
   }
-}), Et = new ce("viewZoomBadgeOut", {
+}), $t = new fe("viewZoomBadgeOut", {
   "0%": {
     transform: "scale(1)"
   },
@@ -673,7 +676,7 @@ function Se(e) {
     insetInlineStart: 0
   };
 }
-const Rt = (e) => ({
+const Et = (e) => ({
   boxSizing: "border-box",
   margin: 0,
   padding: 0,
@@ -682,11 +685,11 @@ const Rt = (e) => ({
   lineHeight: e.lineHeight,
   listStyle: "none",
   fontFamily: e.fontFamily
-}), Dt = (e) => {
-  const { componentCls: t, modalMaskBg: n, paddingSM: a, previewOperationColorDisabled: i, motionDurationSlow: r } = e, o = new J(n).setAlpha(0.1), l = o.clone().setAlpha(0.2);
+}), Rt = (e) => {
+  const { componentCls: t, modalMaskBg: n, paddingSM: a, previewOperationColorDisabled: i, motionDurationSlow: r } = e, o = new Q(n).setAlpha(0.1), l = o.clone().setAlpha(0.2);
   return {
     [`${t}-operations`]: {
-      ...Rt(e),
+      ...Et(e),
       display: "flex",
       flexDirection: "row-reverse",
       alignItems: "center",
@@ -721,8 +724,8 @@ const Rt = (e) => ({
       }
     }
   };
-}, Ht = (e) => {
-  const { modalMaskBg: t, previewOperationColorDisabled: n, zIndexPopup: a, motionDurationSlow: i } = e, r = new J(t).setAlpha(0.1), o = r.clone().setAlpha(0.2);
+}, Dt = (e) => {
+  const { modalMaskBg: t, previewOperationColorDisabled: n, zIndexPopup: a, motionDurationSlow: i } = e, r = new Q(t).setAlpha(0.1), o = r.clone().setAlpha(0.2);
   return {
     [`${e.componentCls}-switch-left, ${e.componentCls}-switch-right`]: {
       position: "fixed",
@@ -766,7 +769,7 @@ const Rt = (e) => ({
       insetInlineEnd: e.marginSM
     }
   };
-}, Pt = (e) => ({
+}, Ht = (e) => ({
   [e.componentCls]: {
     "&-root": {
       ...Se("fixed"),
@@ -821,17 +824,17 @@ const Rt = (e) => ({
       pointerEvents: "auto"
     },
     "&-fade-appear, &-fade-enter": {
-      animationName: Lt,
+      animationName: Ot,
       animationDuration: e.motionDurationSlow,
       animationTimingFunction: "linear"
     },
     "&-fade-leave": {
-      animationName: Nt,
+      animationName: Lt,
       animationDuration: e.motionDurationSlow,
       animationTimingFunction: "linear"
     },
     "&-zoom-appear, &-zoom-enter": {
-      animationName: $t,
+      animationName: Nt,
       opacity: 0,
       animationTimingFunction: e.motionEaseOutCirc,
       animationFillMode: "both",
@@ -843,7 +846,7 @@ const Rt = (e) => ({
       animationPlayState: "running"
     },
     "&-zoom-leave": {
-      animationName: Et,
+      animationName: $t,
       animationDuration: e.motionDurationSlow,
       animationTimingFunction: e.motionEaseOutBack,
       animationFillMode: "both"
@@ -861,22 +864,22 @@ const Rt = (e) => ({
     zIndex: e.zIndexPopup + 1,
     width: "100%"
   },
-  "&": [Dt(e), Ht(e)]
+  "&": [Rt(e), Dt(e)]
 });
-function Ft(e) {
-  return gt("ImageView", (t) => {
-    const n = vt(t, {
+function Pt(e) {
+  return ht("ImageView", (t) => {
+    const n = gt(t, {
       zIndexPopup: t.zIndexPopupBase + 80,
-      previewOperationColorDisabled: new J(t.colorTextLightSolid).setAlpha(0.25).toRgbString(),
-      modalMaskBg: new J("#000").setAlpha(0.45).toRgbString(),
+      previewOperationColorDisabled: new Q(t.colorTextLightSolid).setAlpha(0.25).toRgbString(),
+      modalMaskBg: new Q("#000").setAlpha(0.45).toRgbString(),
       // FIXME: Shared Token
-      previewOperationColor: new J(t.colorTextLightSolid).toRgbString(),
+      previewOperationColor: new Q(t.colorTextLightSolid).toRgbString(),
       previewOperationSize: t.fontSizeIcon * 1.5,
       // FIXME: fontSizeIconLG
       imagePreviewSwitchSize: t.controlHeightLG,
       iconCls: "anticon"
     });
-    return [Pt(n)];
+    return [Ht(n)];
   }, e);
 }
 const Y = {
@@ -894,22 +897,22 @@ const Y = {
   esc: "Escape",
   delete: "Delete",
   backspace: "Backspace"
-}, se = function(e, t, n, a = !1) {
+}, 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: c(et, null, null)
+    icon: f(Ke, null, null)
   },
   ORIGINAL: {
     name: "original",
-    icon: c(tt, null, null)
+    icon: f(et, null, null)
   }
-}, jt = function() {
-  return !Q && !!window.navigator.userAgent.match(/firefox/i);
-}, je = jt() ? "DOMMouseScroll" : "mousewheel";
+}, Ft = function() {
+  return !q && !!window.navigator.userAgent.match(/firefox/i);
+}, je = Ft() ? "DOMMouseScroll" : "mousewheel";
 function Me(e) {
   let t = !1;
   return function(...n) {
@@ -918,21 +921,21 @@ function Me(e) {
     }));
   };
 }
-const Bt = /* @__PURE__ */ Ve({
-  props: bt,
+const jt = /* @__PURE__ */ Ve({
+  props: pt,
   emits: ["close", "switch"],
-  setup: function(e, {
+  setup: (e, {
     emit: t,
     expose: n
-  }) {
-    var ae, ie, D, X, Ce;
+  }) => {
+    var ie, re, E, Z, Ce;
     let a = null, i = null, r = null;
     const o = Ge({
       suffixCls: "image-viewer"
     }), {
       wrapSSR: l,
-      hashId: f
-    } = Ft(o), S = Te(!1), [m, E] = Ne(!1), [z, x] = Ne(!1), O = A(!0), g = A(e.initialIndex), j = A(null), B = A(null), W = A(_.CONTAIN), d = Xe({
+      hashId: c
+    } = Pt(o), S = Te(!1), [p, $] = Ne(!1), [k, x] = Ne(!1), z = C(!0), h = C(e.initialIndex), P = C(null), F = C(null), W = C(X.CONTAIN), m = Xe({
       transform: {
         scale: 1,
         deg: 0,
@@ -940,22 +943,24 @@ const Bt = /* @__PURE__ */ Ve({
         offsetY: 0,
         enableTransition: !1
       }
-    }), G = N(() => e.urlList.length > 1), K = N(() => g.value === 0), ee = N(() => g.value === e.urlList.length - 1), te = N(() => e.urlList[g.value]), fe = 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: M,
-        offsetX: h,
-        offsetY: w,
-        enableTransition: p
-      } = d.transform, I = {
-        transform: `scale(${s}) rotate(${M}deg)`,
-        transition: p ? "transform .3s" : "",
-        marginLeft: `${h}px`,
-        marginTop: `${w}px`
+        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 === _.CONTAIN.name && (I.maxWidth = I.maxHeight = "100%"), I;
-    }), de = () => {
-      ve(), t("close"), d.transform = {
+      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,
@@ -963,222 +968,215 @@ const Bt = /* @__PURE__ */ Ve({
         enableTransition: !1
       };
     }, he = (s) => {
-      S.value ? S.value = !1 : j.value === (s == null ? void 0 : s.target) && (x(!1), g.value = e.initialIndex);
-    }, ge = () => {
+      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;
+      }
+      m.transform.enableTransition = b;
+    }, B = () => {
       a = Me((s) => {
         switch (s.code) {
           case Y.esc:
             x(!1);
             break;
           case Y.space:
-            V();
+            M();
             break;
           case Y.left:
-            ne();
+            j();
             break;
           case Y.up:
-            k("zoomIn");
+            g("zoomIn");
             break;
           case Y.right:
-            Z();
+            u();
             break;
           case Y.down:
-            k("zoomOut");
+            g("zoomOut");
             break;
         }
       }), i = Me((s) => {
-        (s.wheelDelta ? s.wheelDelta : -s.detail) > 0 ? k("zoomIn", {
+        (s.wheelDelta ? s.wheelDelta : -s.detail) > 0 ? g("zoomIn", {
           zoomRate: 0.015,
           enableTransition: !1
-        }) : k("zoomOut", {
+        }) : g("zoomOut", {
           zoomRate: 0.015,
           enableTransition: !1
         });
-      }), se(document, "keydown", a), se(document, je, i);
-    }, ve = () => {
-      xe(document, "keydown", a), xe(document, je, i), a = null, i = null;
-    }, U = () => {
-      O.value = !1;
-    }, u = (s) => {
-      O.value = !1, s.target.alt = "加载失败";
-    }, b = Te(), T = (s) => {
-      if (O.value || s.button !== 0)
-        return;
-      s.preventDefault(), s.stopPropagation(), clearTimeout(b.value), S.value = !0;
+      }), 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: M,
-        offsetY: h
-      } = d.transform, w = s.pageX, p = s.pageY;
-      r = Me((I) => {
-        d.transform = {
-          ...d.transform,
-          offsetX: M + I.pageX - w,
-          offsetY: h + I.pageY - p
+        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
         };
-      }), se(document, "mousemove", r), se(document, "mouseup", () => {
-        xe(document, "mousemove", r), m.value && z.value && (b.value = setTimeout(() => {
+      }), le(document, "mousemove", r), le(document, "mouseup", () => {
+        xe(document, "mousemove", r), p.value && k.value && (U.value = setTimeout(() => {
           S.value = !1;
         }));
       });
-    }, R = () => {
-      d.transform = {
-        scale: 1,
-        deg: 0,
-        offsetX: 0,
-        offsetY: 0,
-        enableTransition: !1
-      };
-    }, V = () => {
-      if (O.value)
-        return;
-      const s = Object.keys(_), M = Object.values(_), h = W.value.name, p = (M.findIndex((I) => I.name === h) + 1) % s.length;
-      W.value = _[s[p]], R();
-    }, ne = () => {
-      if (K.value && !e.infinite)
-        return;
-      const s = e.urlList.length;
-      g.value = (g.value - 1 + s) % s;
-    }, Z = () => {
-      if (ee.value && !e.infinite)
-        return;
-      const s = e.urlList.length;
-      g.value = (g.value + 1) % s;
-    }, k = (s, M = {}) => {
-      if (O.value)
-        return;
-      const {
-        zoomRate: h,
-        rotateDeg: w,
-        enableTransition: p
-      } = {
-        zoomRate: 0.2,
-        rotateDeg: 90,
-        enableTransition: !0,
-        ...M
-      };
-      switch (s) {
-        case "zoomOut":
-          d.transform.scale > 0.2 && (d.transform.scale = parseFloat((d.transform.scale - h).toFixed(3)));
-          break;
-        case "zoomIn":
-          d.transform.scale = parseFloat((d.transform.scale + h).toFixed(3));
-          break;
-        case "clocelise":
-          d.transform.deg += w;
-          break;
-        case "anticlocelise":
-          d.transform.deg -= w;
-          break;
-      }
-      d.transform.enableTransition = p;
     }, me = [{
-      icon: ((ae = e.icons) == null ? void 0 : ae.close) || c(nt, null, null),
+      icon: ((ie = e.icons) == null ? void 0 : ie.close) || f(tt, null, null),
       onClick: (s) => {
         s.stopPropagation(), x(!1);
       },
       type: "close"
     }, {
-      icon: ((ie = e.icons) == null ? void 0 : ie.zoomIn) || c(at, null, null),
+      icon: ((re = e.icons) == null ? void 0 : re.zoomIn) || f(nt, null, null),
       onClick: (s) => {
-        s.stopPropagation(), k("zoomIn");
+        s.stopPropagation(), g("zoomIn");
       },
       type: "zoomIn"
     }, {
-      icon: ((D = e.icons) == null ? void 0 : D.zoomOut) || c(it, null, null),
+      icon: ((E = e.icons) == null ? void 0 : E.zoomOut) || f(at, null, null),
       onClick: (s) => {
-        s.stopPropagation(), k("zoomOut");
+        s.stopPropagation(), g("zoomOut");
       },
       type: "zoomOut"
     }, {
-      icon: ((X = e.icons) == null ? void 0 : X.rotateRight) || c(rt, null, null),
+      icon: ((Z = e.icons) == null ? void 0 : Z.rotateRight) || f(it, null, null),
       onClick: (s) => {
-        s.stopPropagation(), k("anticlocelise");
+        s.stopPropagation(), g("anticlocelise");
       },
       type: "rotateRight"
     }, {
-      icon: ((Ce = e.icons) == null ? void 0 : Ce.rotateLeft) || c(ot, null, null),
+      icon: ((Ce = e.icons) == null ? void 0 : Ce.rotateLeft) || f(rt, null, null),
       onClick: (s) => {
-        s.stopPropagation(), k("clocelise");
+        s.stopPropagation(), g("clocelise");
       },
       type: "rotateLeft"
     }];
-    return q(te, () => {
+    return _(ee, () => {
       Ye(() => {
-        B.value.complete || (O.value = !0);
+        F.value.complete || (z.value = !0);
       });
-    }), q(g, (s) => {
-      R(), t("switch", s);
-    }), q(m, (s) => {
-      s && (z.value = s);
-    }), q([() => m.value, () => j.value], ([s, M]) => {
-      var h, w;
-      s && M && (ge(), (w = (h = j.value) == null ? void 0 : h.focus) == null || w.call(h));
+    }), _(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
+      setOpen: $
     }), () => {
-      const s = $e(`${o}-fade`), M = $e(`${o}-zoom`);
-      return l(c(_e, {
+      const s = $e(`${o}-fade`), I = $e(`${o}-zoom`);
+      return l(f(_e, {
         to: e.getContainer || "body",
         disabled: !e.teleported
       }, {
-        default: () => [m.value && c("div", {
-          class: `${o}-root ${f.value}`
-        }, [c(ke, s, {
-          default: () => [ze(c("div", {
-            class: `${o}-mask ${f.value}`
-          }, null), [[Oe, m.value && z.value]])]
-        }), c("div", {
-          ref: j,
+        default: () => [p.value && f("div", {
+          class: `${o}-root ${c.value}`
+        }, [f(ke, s, {
+          default: () => [ze(f("div", {
+            class: `${o}-mask ${c.value}`
+          }, null), [[Oe, p.value && k.value]])]
+        }), f("div", {
+          ref: P,
           tabindex: -1,
-          class: [`${o}-wrapper`, `${f.value}`],
-          onClick: (h) => e.onHideOnClickModal && he(h)
-        }, [c(ke, We(M, {
+          class: [`${o}-wrapper`, `${c.value}`],
+          onClick: (d) => e.onHideOnClickModal && he(d)
+        }, [f(ke, We(I, {
           onAfterLeave: () => de()
         }), {
           default: () => {
-            var h, w;
-            return [ze(c("div", {
-              class: `${o}-block ${f.value}`
-            }, [c("div", {
-              class: `${o}-content ${f.value}`
-            }, [c("div", {
-              class: `${o}-body ${f.value}`
-            }, [c("div", {
-              class: `${o}-operations-wrapper ${f.value}`,
-              onClick: (p) => p.stopPropagation()
-            }, [c("ul", {
-              class: `${o}-operations ${f.value}`
+            var d, y;
+            return [ze(f("div", {
+              class: `${o}-block ${c.value}`
+            }, [f("div", {
+              class: `${o}-content ${c.value}`
+            }, [f("div", {
+              class: `${o}-body ${c.value}`
+            }, [f("div", {
+              class: `${o}-operations-wrapper ${c.value}`,
+              onClick: (b) => b.stopPropagation()
+            }, [f("ul", {
+              class: `${o}-operations ${c.value}`
             }, [me.map(({
-              icon: p,
-              onClick: I,
+              icon: b,
+              onClick: A,
               type: pe
-            }) => c("li", {
-              class: `${o}-operations-operation ${f.value}`,
-              onClick: I,
+            }) => f("li", {
+              class: `${o}-operations-operation ${c.value}`,
+              onClick: A,
               key: pe
-            }, [qe(p, {
-              class: `${o}-operations-icon ${f.value}`
-            })]))])]), c("div", {
-              class: `${o}-canvas ${f.value}`
-            }, [e.urlList.map((p, I) => c("img", {
-              ref: B,
-              class: `${o}-img ${f.value}`,
+            }, [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: {
-                ...fe.value,
-                display: I === g.value ? "block" : "none"
+                ...te.value,
+                display: A === h.value ? "block" : "none"
               },
-              key: p,
-              src: p,
-              onLoad: () => U(),
-              onError: (pe) => u(pe),
-              onMousedown: T
-            }, null))]), G.value && c("div", {
-              class: [`${o}-switch-left`, g.value === 0 && !e.infinite ? `${o}-switch-left-disabled` : "", `${f.value}`],
-              onClick: ne
-            }, [((h = e.icons) == null ? void 0 : h.left) || c(st, null, null)]), G.value && c("div", {
-              class: [`${o}-switch-right`, g.value === e.urlList.length - 1 && !e.infinite ? `${o}-switch-right-disabled` : "", `${f.value}`],
-              onClick: Z
-            }, [((w = e.icons) == null ? void 0 : w.right) || c(lt, null, null)])])])]), [[Oe, m.value && z.value]])];
+              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]])];
           }
         })])])]
       }));
@@ -1187,7 +1185,7 @@ const Bt = /* @__PURE__ */ Ve({
 }), Ie = {
   width: "100%",
   height: "100%"
-}, Vt = (e) => ({
+}, Bt = (e) => ({
   [e.componentCls]: {
     display: "inline-block",
     position: "relative",
@@ -1217,10 +1215,10 @@ const Bt = /* @__PURE__ */ Ve({
       cursor: "pointer"
     }
   }
-}), Yt = (e) => e && e.nodeType === Node.ELEMENT_NODE;
+}), Vt = (e) => e && e.nodeType === Node.ELEMENT_NODE;
 let Be = "";
-const ue = /* @__PURE__ */ Ve({
-  props: le,
+const ce = /* @__PURE__ */ Ve({
+  props: ue,
   name: "GImage",
   emits: ["error", "click", "load"],
   setup(e, {
@@ -1233,131 +1231,127 @@ const ue = /* @__PURE__ */ Ve({
     }), {
       wrapSSR: r,
       hashId: o
-    } = mt("Image", [Vt], i), l = A(), f = A(""), S = A(!1), m = A(!0), E = A(!1), z = A(null), x = A();
-    let O, g;
-    const j = N(() => !Q && e.fit ? {
+    } = vt("Image", [Bt], i), l = C(), c = C(""), S = C(!1), p = C(!0), $ = C(!1), k = C(null), x = C();
+    let z, h;
+    const P = L(() => !q && e.fit ? {
       "object-fit": e.fit
-    } : {}), B = N(() => {
+    } : {}), F = L(() => {
       const {
         previewSrcList: u
       } = e;
       return Array.isArray(u) && u.length > 0;
-    }), W = N(() => {
+    }), W = L(() => {
       const {
         src: u,
-        previewSrcList: b,
-        initialIndex: T
+        previewSrcList: M,
+        initialIndex: g
       } = e;
-      if (T || T === 0)
-        return b.length >= T ? T : 0;
-      let R = 0;
-      const V = b.indexOf(u);
-      return V >= 0 && (R = V), R;
-    }), d = () => {
-      if (Q)
-        return;
-      m.value = !0, S.value = !1;
+      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 = (b) => fe(b), u.onerror = de, Object.keys(a || {}).forEach((b) => {
-        if (b.toLowerCase() === "onload")
-          return;
-        const T = (a || {})[b];
-        u.setAttribute(b, T);
+      u.onload = (M) => m(M), u.onerror = J, Object.keys(a || {}).forEach((M) => {
+        if (M.toLowerCase() === "onload") return;
+        const g = (a || {})[M];
+        u.setAttribute(M, g);
       }), u.src = e.src;
+    }, K = mt(te, 200), ee = () => {
+      q || !x.value || !K || (z(), x.value = void 0);
     };
-    function G() {
-      ut(z.value, x.value) && (d(), te());
+    function te() {
+      lt(k.value, x.value) && (G(), ee());
     }
-    const K = pt(G, 200), ee = async () => {
-      if (Q)
-        return;
+    const ne = async () => {
+      if (q) return;
       await Ye();
       const {
         scrollContainer: u
       } = e;
-      Yt(u) ? x.value = u : ct(u) && u !== "" ? x.value = document.querySelector(u) ?? void 0 : z.value && (x.value = ft(z.value)), x.value && (O = Ee(x, "scroll", K), setTimeout(() => G(), 200));
-    }, te = () => {
-      Q || !x.value || !K || (O(), x.value = void 0);
-    }, fe = (u) => {
-      f.value = e.src, m.value = !1, S.value = !1, n("load", u);
+      Vt(u) ? x.value = u : ut(u) && u !== "" ? x.value = document.querySelector(u) ?? void 0 : k.value && (x.value = ct(k.value)), x.value && (z = Ee(x, "scroll", K), setTimeout(() => te(), 200));
     }, de = (u) => {
-      m.value = !1, S.value = !0, n("error", u);
-    }, he = (u) => {
       if (u.ctrlKey) {
         if (u.deltaY < 0)
           return u.preventDefault(), !1;
         if (u.deltaY > 0)
           return u.preventDefault(), !1;
       }
-    }, ge = () => {
-      !B.value || e.disablePreview || (g = Ee("wheel", he, {
+    }, he = () => {
+      !F.value || e.disablePreview || (h = Ee("wheel", de, {
         passive: !1
-      }), Be = document.body.style.overflow, document.body.style.overflow = "hidden", E.value = !0);
-    }, ve = () => {
-      g == null || g(), document.body.style.overflow = Be, E.value = !1;
+      }), Be = document.body.style.overflow, document.body.style.overflow = "hidden", $.value = !0);
+    }, ae = () => {
+      h == null || h(), document.body.style.overflow = Be, $.value = !1;
     };
-    q(() => e.src, () => {
-      e.lazy ? (m.value = !0, S.value = !1, te(), ee()) : d();
+    _(() => e.src, () => {
+      e.lazy ? (p.value = !0, S.value = !1, ee(), ne()) : G();
     });
-    const U = (u) => dt(u) ? u + "px" : u;
-    return ht(() => {
-      e.lazy ? ee() : d();
+    const j = (u) => ft(u) ? u + "px" : u;
+    return dt(() => {
+      e.lazy ? ne() : G();
     }), () => {
       const {
         crossorigin: u,
-        decoding: b,
-        alt: T,
-        sizes: R,
+        decoding: M,
+        alt: g,
+        sizes: B,
         srcset: V,
-        usemap: ne,
-        class: Z,
-        style: k = {}
+        usemap: ge,
+        class: U,
+        style: ve = {}
       } = a, me = {
         crossorigin: u,
-        decoding: b,
-        alt: T,
-        sizes: R,
+        decoding: M,
+        alt: g,
+        sizes: B,
         srcset: V,
-        usemap: ne,
+        usemap: ge,
         style: {
-          ...j.value,
-          height: e.height ? U(e.height) : void 0
+          ...P.value,
+          height: e.height ? j(e.height) : void 0
         }
-      }, ae = Le(t, e, "fallback"), ie = Le(t, e, "placeholder");
+      }, ie = Le(t, e, "fallback"), re = Le(t, e, "placeholder");
       return Qe(() => {
-        var D, X;
-        B.value && E.value ? (D = l.value) == null || D.setOpen(!0) : (X = l.value) == null || X.setOpen(!1);
-      }), r(c(Je, null, [c("div", {
+        var E, Z;
+        F.value && $.value ? (E = l.value) == null || E.setOpen(!0) : (Z = l.value) == null || Z.setOpen(!1);
+      }), r(f("div", {
         class: {
           [`${o.value}`]: !0,
           [`${i}`]: !0,
-          [`${Z}`]: !!Z
+          [`${U}`]: !!U
         },
-        ref: (D) => z.value = D,
+        ref: (E) => k.value = E,
         style: {
-          width: e.width ? U(e.width) : void 0,
-          height: e.height ? U(e.height) : void 0,
+          width: e.width ? j(e.width) : void 0,
+          height: e.height ? j(e.height) : void 0,
           display: e.lazy ? "block" : void 0,
-          ...k
+          ...ve
         },
         onClick: () => {
           n("click");
         }
-      }, [m.value ? ie || c("div", {
+      }, [p.value ? re || f("div", {
         class: `${i}-placeholder ${o.value}`
-      }, null) : S.value ? ae || c("div", {
+      }, null) : S.value ? ie || f("div", {
         class: `${i}-error ${o.value}`
-      }, [Ke("加载失败")]) : f.value && c("img", We(me, {
+      }, [Je("加载失败")]) : c.value && f("img", We(me, {
         class: {
           [`${o.value}`]: !0,
           [`${e.imageClassName}`]: !!e.imageClassName,
           [`${i}-inner`]: !0,
-          [`${i}-preview`]: B.value
+          [`${i}-preview`]: F.value
         },
         alt: e.alt,
-        src: f.value,
-        onClick: () => ge()
-      }), null), c(Bt, {
+        src: c.value,
+        onClick: () => he()
+      }), null), f(jt, {
         ref: l,
         zIndex: e.zIndex,
         infinite: e.infinite,
@@ -1365,17 +1359,17 @@ const ue = /* @__PURE__ */ Ve({
         urlList: e.previewSrcList,
         getContainer: e.getContainer,
         onHideOnClickModal: e.hideOnClickModal,
-        onClose: () => ve()
-      }, null)])]));
+        onClose: () => ae()
+      }, null)]));
     };
   }
 });
-ue.isWImage = !0;
-ue.install = (e) => (e.component(ue.name, ue), e);
+ce.isWImage = !0;
+ce.install = (e) => (e.component(ce.name, ce), e);
 export {
-  ue as GImage,
-  Bt as ImageViewer,
-  ue as default,
-  le as gImagePorps,
-  bt as gImageViewProps
+  ce as GImage,
+  jt as ImageViewer,
+  ce as default,
+  ue as gImagePorps,
+  pt as gImageViewProps
 };