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

package/dist/image.mjs

@@ -1,25 +1,25 @@
-import { createVNode as u, defineComponent as Ve, shallowRef as Te, ref as w, computed as L, watch as le, nextTick as Ye, Teleport as _e, Transition as ke, withDirectives as ze, vShow as Oe, mergeProps as We, cloneVNode as qe, watchEffect as Qe, Fragment as Je, createTextVNode as Ke } from "vue";
+import { 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 Ue } from "@gx-design-vue/pro-hooks";
-import { Keyframe as fe, useStyle as ht, mergeToken as gt, getTransitionProps as $e, useProStyle as vt } from "@gx-design-vue/pro-provider";
+import { 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 { createTypes as pt } from "vue-types";
-import { useThrottleFn as mt, useEventListener as Ee } from "@vueuse/core";
-function g(e, t) {
-  bt(e) && (e = "100%");
-  var n = yt(e);
+import { useThrottleFn as bt, useEventListener as Ee } from "@vueuse/core";
+function v(e, t) {
+  yt(e) && (e = "100%");
+  var n = wt(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) {
   return Math.min(1, Math.max(0, e));
 }
-function bt(e) {
+function yt(e) {
   return typeof e == "string" && e.indexOf(".") !== -1 && parseFloat(e) === 1;
 }
-function yt(e) {
+function wt(e) {
   return typeof e == "string" && e.indexOf("%") !== -1;
 }
-function Ze(e) {
+function Ue(e) {
   return e = parseFloat(e), (isNaN(e) || e < 0 || e > 1) && (e = 1), e;
 }
 function oe(e) {
@@ -28,29 +28,29 @@ function oe(e) {
 function H(e) {
   return e.length === 1 ? "0" + e : String(e);
 }
-function wt(e, t, n) {
+function St(e, t, n) {
   return {
-    r: g(e, 255) * 255,
-    g: g(t, 255) * 255,
-    b: g(n, 255) * 255
+    r: v(e, 255) * 255,
+    g: v(t, 255) * 255,
+    b: v(n, 255) * 255
   };
 }
 function Re(e, t, n) {
-  e = g(e, 255), t = g(t, 255), n = g(n, 255);
+  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) {
+    var f = a - i;
+    switch (o = l > 0.5 ? f / (2 - a - i) : f / (a + i), a) {
       case e:
-        r = (t - n) / c + (t < n ? 6 : 0);
+        r = (t - n) / f + (t < n ? 6 : 0);
         break;
       case t:
-        r = (n - e) / c + 2;
+        r = (n - e) / f + 2;
         break;
       case n:
-        r = (e - t) / c + 4;
+        r = (e - t) / f + 4;
         break;
     }
     r /= 6;
@@ -60,9 +60,9 @@ 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 St(e, t, n) {
+function xt(e, t, n) {
   var a, i, r;
-  if (e = g(e, 360), t = g(t, 100), n = g(n, 100), t === 0)
+  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;
@@ -71,8 +71,8 @@ function St(e, t, n) {
   return { r: a * 255, g: i * 255, b: r * 255 };
 }
 function De(e, t, n) {
-  e = g(e, 255), t = g(t, 255), n = g(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;
+  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;
   if (a === i)
     r = 0;
   else {
@@ -89,12 +89,12 @@ function De(e, t, n) {
     }
     r /= 6;
   }
-  return { h: r, s: c, v: o };
+  return { h: r, s: f, v: o };
 }
-function xt(e, t, n) {
-  e = g(e, 360) * 6, t = g(t, 100), n = g(n, 100);
-  var a = Math.floor(e), i = e - a, r = n * (1 - t), o = n * (1 - i * t), l = n * (1 - (1 - i) * t), c = a % 6, S = [n, o, r, r, l, n][c], p = [l, n, n, o, r, r][c], $ = [r, r, l, n, n, o][c];
-  return { r: S * 255, g: p * 255, b: $ * 255 };
+function Mt(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 };
 }
 function He(e, t, n, a) {
   var i = [
@@ -104,25 +104,25 @@ function He(e, t, n, a) {
   ];
   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) {
+function It(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))
+    H(At(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) {
+function At(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 At(e) {
+function Ct(e) {
   return {
     r: e >> 16,
     g: (e & 65280) >> 8,
@@ -279,9 +279,9 @@ var Ae = {
   yellow: "#ffff00",
   yellowgreen: "#9acd32"
 };
-function Ct(e) {
+function Tt(e) {
   var t = { r: 0, g: 0, b: 0 }, n = 1, a = null, i = null, r = null, o = !1, l = !1;
-  return typeof e == "string" && (e = zt(e)), typeof e == "object" && (z(e.r) && z(e.g) && z(e.b) ? (t = wt(e.r, e.g, e.b), o = !0, l = String(e.r).substr(-1) === "%" ? "prgb" : "rgb") : z(e.h) && z(e.s) && z(e.v) ? (a = oe(e.s), i = oe(e.v), t = xt(e.h, a, i), o = !0, l = "hsv") : z(e.h) && z(e.s) && z(e.l) && (a = oe(e.s), r = oe(e.l), t = St(e.h, a, r), o = !0, l = "hsl"), Object.prototype.hasOwnProperty.call(e, "a") && (n = e.a)), n = Ze(n), {
+  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), {
     ok: o,
     format: e.format || l,
     r: Math.min(255, Math.max(t.r, 0)),
@@ -290,8 +290,8 @@ function Ct(e) {
     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*\\)?"), I = {
-  CSS_UNIT: new RegExp(N),
+var kt = "[-\\+]?\\d+%?", zt = "[-\\+]?\\d*\\.\\d+%?", $ = "(?:".concat(zt, ")|(?:").concat(kt, ")"), ye = "[\\s|\\(]+(".concat($, ")[,|\\s]+(").concat($, ")[,|\\s]+(").concat($, ")\\s*\\)?"), we = "[\\s|\\(]+(".concat($, ")[,|\\s]+(").concat($, ")[,|\\s]+(").concat($, ")[,|\\s]+(").concat($, ")\\s*\\)?"), C = {
+  CSS_UNIT: new RegExp($),
   rgb: new RegExp("rgb" + ye),
   rgba: new RegExp("rgba" + we),
   hsl: new RegExp("hsl" + ye),
@@ -303,7 +303,7 @@ var Tt = "[-\\+]?\\d+%?", kt = "[-\\+]?\\d*\\.\\d+%?", N = "(?:".concat(kt, ")|(
   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) {
+function Ot(e) {
   if (e = e.trim().toLowerCase(), e.length === 0)
     return !1;
   var t = !1;
@@ -311,35 +311,35 @@ function zt(e) {
     e = Ae[e], t = !0;
   else if (e === "transparent")
     return { r: 0, g: 0, b: 0, a: 0, format: "name" };
-  var n = I.rgb.exec(e);
-  return n ? { r: n[1], g: n[2], b: n[3] } : (n = I.rgba.exec(e), n ? { r: n[1], g: n[2], b: n[3], a: n[4] } : (n = I.hsl.exec(e), n ? { h: n[1], s: n[2], l: n[3] } : (n = I.hsla.exec(e), n ? { h: n[1], s: n[2], l: n[3], a: n[4] } : (n = I.hsv.exec(e), n ? { h: n[1], s: n[2], v: n[3] } : (n = I.hsva.exec(e), n ? { h: n[1], s: n[2], v: n[3], a: n[4] } : (n = I.hex8.exec(e), n ? {
-    r: y(n[1]),
-    g: y(n[2]),
-    b: y(n[3]),
+  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: w(n[1]),
+    g: w(n[2]),
+    b: w(n[3]),
     a: Pe(n[4]),
     format: t ? "name" : "hex8"
-  } : (n = I.hex6.exec(e), n ? {
-    r: y(n[1]),
-    g: y(n[2]),
-    b: y(n[3]),
+  } : (n = C.hex6.exec(e), n ? {
+    r: w(n[1]),
+    g: w(n[2]),
+    b: w(n[3]),
     format: t ? "name" : "hex"
-  } : (n = I.hex4.exec(e), n ? {
-    r: y(n[1] + n[1]),
-    g: y(n[2] + n[2]),
-    b: y(n[3] + n[3]),
+  } : (n = C.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 = I.hex3.exec(e), n ? {
-    r: y(n[1] + n[1]),
-    g: y(n[2] + n[2]),
-    b: y(n[3] + n[3]),
+  } : (n = C.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 z(e) {
-  return !!I.CSS_UNIT.exec(String(e));
+function L(e) {
+  return !!C.CSS_UNIT.exec(String(e));
 }
-var Q = (
+var J = (
   /** @class */
   function() {
     function e(t, n) {
@@ -347,8 +347,8 @@ var Q = (
       var a;
       if (t instanceof e)
         return t;
-      typeof t == "number" && (t = At(t)), this.originalInput = t;
-      var i = Ct(t);
+      typeof t == "number" && (t = Ct(t)), this.originalInput = t;
+      var i = Tt(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() {
@@ -364,7 +364,7 @@ var Q = (
     }, e.prototype.getAlpha = function() {
       return this.a;
     }, e.prototype.setAlpha = function(t) {
-      return this.a = Ze(t), this.roundA = Math.round(100 * this.a) / 100, this;
+      return this.a = Ue(t), this.roundA = Math.round(100 * this.a) / 100, this;
     }, e.prototype.isMonochrome = function() {
       var t = this.toHsl().s;
       return t === 0;
@@ -385,7 +385,7 @@ var Q = (
     }, 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);
+      return t === void 0 && (t = !1), It(this.r, this.g, this.b, this.a, t);
     }, e.prototype.toHex8String = function(t) {
       return t === void 0 && (t = !1), "#" + this.toHex8(t);
     }, e.prototype.toRgb = function() {
@@ -400,7 +400,7 @@ var Q = (
       return this.a === 1 ? "rgb(".concat(t, ", ").concat(n, ", ").concat(a, ")") : "rgba(".concat(t, ", ").concat(n, ", ").concat(a, ", ").concat(this.roundA, ")");
     }, e.prototype.toPercentageRgb = function() {
       var t = function(n) {
-        return "".concat(Math.round(g(n, 255) * 100), "%");
+        return "".concat(Math.round(v(n, 255) * 100), "%");
       };
       return {
         r: t(this.r),
@@ -410,7 +410,7 @@ var Q = (
       };
     }, e.prototype.toPercentageRgbString = function() {
       var t = function(n) {
-        return Math.round(g(n, 255) * 100);
+        return Math.round(v(n, 255) * 100);
       };
       return this.a === 1 ? "rgb(".concat(t(this.r), "%, ").concat(t(this.g), "%, ").concat(t(this.b), "%)") : "rgba(".concat(t(this.r), "%, ").concat(t(this.g), "%, ").concat(t(this.b), "%, ").concat(this.roundA, ")");
     }, e.prototype.toName = function() {
@@ -512,21 +512,21 @@ var Q = (
     }, e;
   }()
 );
-const Ot = new fe("viewFadeIn", {
+const Lt = new ce("viewFadeIn", {
   "0%": {
     opacity: 0
   },
   "100%": {
     opacity: 1
   }
-}), Lt = new fe("viewFadeOut", {
+}), Nt = new ce("viewFadeOut", {
   "0%": {
     opacity: 1
   },
   "100%": {
     opacity: 0
   }
-}), Nt = new fe("viewZoomBadgeIn", {
+}), $t = new ce("viewZoomBadgeIn", {
   "0%": {
     transform: "scale(0.2)",
     opacity: 0
@@ -535,7 +535,7 @@ const Ot = new fe("viewFadeIn", {
     transform: "scale(1)",
     opacity: 1
   }
-}), $t = new fe("viewZoomBadgeOut", {
+}), Et = new ce("viewZoomBadgeOut", {
   "0%": {
     transform: "scale(1)"
   },
@@ -556,7 +556,7 @@ function Se(e) {
     insetInlineStart: 0
   };
 }
-const Et = (e) => ({
+const Rt = (e) => ({
   boxSizing: "border-box",
   margin: 0,
   padding: 0,
@@ -565,11 +565,11 @@ const Et = (e) => ({
   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);
+}), 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);
   return {
     [`${t}-operations`]: {
-      ...Et(e),
+      ...Rt(e),
       display: "flex",
       flexDirection: "row-reverse",
       alignItems: "center",
@@ -604,8 +604,8 @@ const Et = (e) => ({
       }
     }
   };
-}, 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);
+}, 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);
   return {
     [`${e.componentCls}-switch-left, ${e.componentCls}-switch-right`]: {
       position: "fixed",
@@ -649,7 +649,7 @@ const Et = (e) => ({
       insetInlineEnd: e.marginSM
     }
   };
-}, Ht = (e) => ({
+}, Pt = (e) => ({
   [e.componentCls]: {
     ["&-root"]: {
       ...Se("fixed"),
@@ -704,17 +704,17 @@ const Et = (e) => ({
       pointerEvents: "auto"
     },
     ["&-fade-appear, &-fade-enter"]: {
-      animationName: Ot,
+      animationName: Lt,
       animationDuration: e.motionDurationSlow,
       animationTimingFunction: "linear"
     },
     ["&-fade-leave"]: {
-      animationName: Lt,
+      animationName: Nt,
       animationDuration: e.motionDurationSlow,
       animationTimingFunction: "linear"
     },
     ["&-zoom-appear, &-zoom-enter"]: {
-      animationName: Nt,
+      animationName: $t,
       opacity: 0,
       animationTimingFunction: e.motionEaseOutCirc,
       animationFillMode: "both",
@@ -726,7 +726,7 @@ const Et = (e) => ({
       animationPlayState: "running"
     },
     ["&-zoom-leave"]: {
-      animationName: $t,
+      animationName: Et,
       animationDuration: e.motionDurationSlow,
       animationTimingFunction: e.motionEaseOutBack,
       animationFillMode: "both"
@@ -744,23 +744,23 @@ const Et = (e) => ({
     zIndex: e.zIndexPopup + 1,
     width: "100%"
   },
-  "&": [Rt(e), Dt(e)]
+  "&": [Dt(e), Ht(e)]
 });
-function Pt(e) {
-  return ht("ImageView", (t) => {
-    const n = gt(t, {
+function Ft(e) {
+  return gt("ImageView", (t) => {
+    const n = vt(t, {
       zIndexPopup: t.zIndexPopupBase + 80,
-      previewOperationColorDisabled: new Q(t.colorTextLightSolid).setAlpha(0.25).toRgbString(),
-      modalMaskBg: new Q("#000").setAlpha(0.45).toRgbString(),
-      previewOperationColor: new Q(t.colorTextLightSolid).toRgbString(),
+      previewOperationColorDisabled: new J(t.colorTextLightSolid).setAlpha(0.25).toRgbString(),
+      modalMaskBg: new J("#000").setAlpha(0.45).toRgbString(),
+      previewOperationColor: new J(t.colorTextLightSolid).toRgbString(),
       previewOperationSize: t.fontSizeIcon * 1.5,
       imagePreviewSwitchSize: t.controlHeightLG,
       iconCls: "anticon"
     });
-    return [Ht(n)];
+    return [Pt(n)];
   }, e);
 }
-const Xe = pt({
+const Ze = pt({
   func: void 0,
   bool: void 0,
   string: void 0,
@@ -769,7 +769,7 @@ const Xe = pt({
   object: void 0,
   integer: void 0
 });
-Xe.extend([{
+Ze.extend([{
   name: "looseBool",
   getter: !0,
   type: Boolean,
@@ -784,7 +784,7 @@ Xe.extend([{
   getter: !0,
   type: null
 }]);
-const B = Xe, P = {
+const V = Ze, P = {
   infinite: {
     type: Boolean,
     default: !0
@@ -800,7 +800,7 @@ const B = Xe, P = {
   getContainer: {
     type: String
   }
-}, ue = {
+}, le = {
   previewTeleported: {
     type: Boolean,
     default: !0
@@ -821,7 +821,7 @@ const B = Xe, P = {
     type: String,
     default: "contain"
   },
-  lazy: B.bool,
+  lazy: V.bool,
   scrollContainer: {
     type: [String, Object]
   },
@@ -844,35 +844,39 @@ const B = Xe, P = {
   onClick: {
     type: Function
   },
-  disablePreview: B.bool,
+  disablePreview: V.bool,
   previewSrcList: {
     type: Array,
     default: () => []
   },
-  imageClassName: B.string,
-  imageStyle: B.style,
-  width: B.number,
-  height: B.number,
+  imageClassName: V.string,
+  imageStyle: V.style,
+  width: V.number,
+  height: V.number,
   zIndex: P.zIndex,
   infinite: P.infinite,
   getContainer: P.getContainer,
-  initialIndex: P.initialIndex
-}, Ft = {
+  initialIndex: {
+    ...P.initialIndex,
+    default: () => {
+    }
+  }
+}, jt = {
   urlList: {
     type: Array,
     default: () => []
   },
-  teleported: ue.previewTeleported,
+  teleported: le.previewTeleported,
   zIndex: P.zIndex,
   initialIndex: P.initialIndex,
   infinite: P.infinite,
-  getContainer: ue.getContainer,
-  onHideOnClickModal: ue.hideOnClickModal,
+  getContainer: le.getContainer,
+  onHideOnClickModal: le.hideOnClickModal,
   icons: {
     type: Object,
     default: () => ({})
   }
-}, V = {
+}, Y = {
   tab: "Tab",
   enter: "Enter",
   space: "Space",
@@ -890,15 +894,15 @@ const B = Xe, P = {
 }, _ = {
   CONTAIN: {
     name: "contain",
-    icon: u(et, null, null)
+    icon: c(et, null, null)
   },
   ORIGINAL: {
     name: "original",
-    icon: u(tt, null, null)
+    icon: c(tt, null, null)
   }
-}, jt = function() {
-  return !q && !!window.navigator.userAgent.match(/firefox/i);
-}, je = jt() ? "DOMMouseScroll" : "mousewheel";
+}, Bt = function() {
+  return !Q && !!window.navigator.userAgent.match(/firefox/i);
+}, je = Bt() ? "DOMMouseScroll" : "mousewheel";
 function Me(e) {
   let t = !1;
   return function(...n) {
@@ -907,8 +911,8 @@ function Me(e) {
     }));
   };
 }
-const Bt = /* @__PURE__ */ Ve({
-  props: Ft,
+const Vt = /* @__PURE__ */ Ve({
+  props: jt,
   emits: ["close", "switch"],
   setup: function(e, {
     emit: t,
@@ -920,29 +924,31 @@ const Bt = /* @__PURE__ */ Ve({
       suffixCls: "image-viewer"
     }), {
       wrapSSR: l,
-      hashId: c
-    } = Pt(o), S = Te(!1), [p, $] = Ne(!1), [T, x] = Ne(!1), k = w(!0), h = w(e.initialIndex), Y = w(null), F = w(null), W = w(_.CONTAIN), d = w({
-      scale: 1,
-      deg: 0,
-      offsetX: 0,
-      offsetY: 0,
-      enableTransition: !1
-    }), G = L(() => e.urlList.length > 1), J = L(() => h.value === 0), K = L(() => h.value === e.urlList.length - 1), ee = L(() => e.urlList[h.value]), de = L(() => {
+      hashId: f
+    } = Ft(o), S = Te(!1), [m, E] = Ne(!1), [z, x] = Ne(!1), O = A(!0), g = A(e.initialIndex), F = A(null), j = A(null), W = A(_.CONTAIN), d = Xe({
+      transform: {
+        scale: 1,
+        deg: 0,
+        offsetX: 0,
+        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(() => {
       const {
         scale: s,
-        deg: m,
-        offsetX: b,
-        offsetY: C,
-        enableTransition: v
-      } = d.value, M = {
-        transform: `scale(${s}) rotate(${m}deg)`,
-        transition: v ? "transform .3s" : "",
-        marginLeft: `${b}px`,
-        marginTop: `${C}px`
+        deg: M,
+        offsetX: h,
+        offsetY: y,
+        enableTransition: p
+      } = d.transform, I = {
+        transform: `scale(${s}) rotate(${M}deg)`,
+        transition: p ? "transform .3s" : "",
+        marginLeft: `${h}px`,
+        marginTop: `${y}px`
       };
-      return W.value.name === _.CONTAIN.name && (M.maxWidth = M.maxHeight = "100%"), M;
-    }), te = () => {
-      ve(), t("close"), d.value = {
+      return W.value.name === _.CONTAIN.name && (I.maxWidth = I.maxHeight = "100%"), I;
+    }), de = () => {
+      ve(), t("close"), d.transform = {
         scale: 1,
         deg: 0,
         offsetX: 0,
@@ -950,34 +956,34 @@ const Bt = /* @__PURE__ */ Ve({
         enableTransition: !1
       };
     }, he = (s) => {
-      S.value ? S.value = !1 : Y.value === (s == null ? void 0 : s.target) && (x(!1), h.value = e.initialIndex);
+      S.value ? S.value = !1 : F.value === (s == null ? void 0 : s.target) && (x(!1), g.value = e.initialIndex);
     }, ge = () => {
       a = Me((s) => {
         switch (s.code) {
-          case V.esc:
+          case Y.esc:
             x(!1);
             break;
-          case V.space:
-            j();
+          case Y.space:
+            B();
             break;
-          case V.left:
+          case Y.left:
             ne();
             break;
-          case V.up:
-            A("zoomIn");
+          case Y.up:
+            k("zoomIn");
             break;
-          case V.right:
+          case Y.right:
             Z();
             break;
-          case V.down:
-            A("zoomOut");
+          case Y.down:
+            k("zoomOut");
             break;
         }
       }), i = Me((s) => {
-        (s.wheelDelta ? s.wheelDelta : -s.detail) > 0 ? A("zoomIn", {
+        (s.wheelDelta ? s.wheelDelta : -s.detail) > 0 ? k("zoomIn", {
           zoomRate: 0.015,
           enableTransition: !1
-        }) : A("zoomOut", {
+        }) : k("zoomOut", {
           zoomRate: 0.015,
           enableTransition: !1
         });
@@ -985,187 +991,187 @@ const Bt = /* @__PURE__ */ Ve({
     }, ve = () => {
       xe(document, "keydown", a), xe(document, je, i), a = null, i = null;
     }, U = () => {
-      k.value = !1;
-    }, f = (s) => {
-      k.value = !1, s.target.alt = "加载失败";
-    }, E = Te(), O = (s) => {
-      if (k.value || s.button !== 0)
+      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(E.value), S.value = !0;
+      s.preventDefault(), s.stopPropagation(), clearTimeout(b.value), S.value = !0;
       const {
-        offsetX: m,
-        offsetY: b
-      } = d.value, C = s.pageX, v = s.pageY;
-      r = Me((M) => {
-        d.value = {
-          ...d.value,
-          offsetX: m + M.pageX - C,
-          offsetY: b + M.pageY - v
+        offsetX: M,
+        offsetY: h
+      } = d.transform, y = s.pageX, p = s.pageY;
+      r = Me((I) => {
+        d.transform = {
+          ...d.transform,
+          offsetX: M + I.pageX - y,
+          offsetY: h + I.pageY - p
         };
       }), se(document, "mousemove", r), se(document, "mouseup", () => {
-        xe(document, "mousemove", r), p.value && T.value && (E.value = setTimeout(() => {
+        xe(document, "mousemove", r), m.value && z.value && (b.value = setTimeout(() => {
           S.value = !1;
         }));
       });
     }, R = () => {
-      d.value = {
+      d.transform = {
         scale: 1,
         deg: 0,
         offsetX: 0,
         offsetY: 0,
         enableTransition: !1
       };
-    }, j = () => {
-      if (k.value)
+    }, B = () => {
+      if (O.value)
         return;
-      const s = Object.keys(_), m = Object.values(_), b = W.value.name, v = (m.findIndex((M) => M.name === b) + 1) % s.length;
-      W.value = _[s[v]], R();
+      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 (J.value && !e.infinite)
+      if (K.value && !e.infinite)
         return;
       const s = e.urlList.length;
-      h.value = (h.value - 1 + s) % s;
+      g.value = (g.value - 1 + s) % s;
     }, Z = () => {
-      if (K.value && !e.infinite)
+      if (ee.value && !e.infinite)
         return;
       const s = e.urlList.length;
-      h.value = (h.value + 1) % s;
-    }, A = (s, m = {}) => {
-      if (k.value)
+      g.value = (g.value + 1) % s;
+    }, k = (s, M = {}) => {
+      if (O.value)
         return;
       const {
-        zoomRate: b,
-        rotateDeg: C,
-        enableTransition: v
+        zoomRate: h,
+        rotateDeg: y,
+        enableTransition: p
       } = {
         zoomRate: 0.2,
         rotateDeg: 90,
         enableTransition: !0,
-        ...m
+        ...M
       };
       switch (s) {
         case "zoomOut":
-          d.value.scale > 0.2 && (d.value.scale = parseFloat((d.value.scale - b).toFixed(3)));
+          d.transform.scale > 0.2 && (d.transform.scale = parseFloat((d.transform.scale - h).toFixed(3)));
           break;
         case "zoomIn":
-          d.value.scale = parseFloat((d.value.scale + b).toFixed(3));
+          d.transform.scale = parseFloat((d.transform.scale + h).toFixed(3));
           break;
         case "clocelise":
-          d.value.deg += C;
+          d.transform.deg += y;
           break;
         case "anticlocelise":
-          d.value.deg -= C;
+          d.transform.deg -= y;
           break;
       }
-      d.value.enableTransition = v;
-    }, pe = [{
-      icon: ((ae = e.icons) == null ? void 0 : ae.close) || u(nt, null, null),
+      d.transform.enableTransition = p;
+    }, me = [{
+      icon: ((ae = e.icons) == null ? void 0 : ae.close) || c(nt, null, null),
       onClick: (s) => {
         s.stopPropagation(), x(!1);
       },
       type: "close"
     }, {
-      icon: ((ie = e.icons) == null ? void 0 : ie.zoomIn) || u(at, null, null),
+      icon: ((ie = e.icons) == null ? void 0 : ie.zoomIn) || c(at, null, null),
       onClick: (s) => {
-        s.stopPropagation(), A("zoomIn");
+        s.stopPropagation(), k("zoomIn");
       },
       type: "zoomIn"
     }, {
-      icon: ((D = e.icons) == null ? void 0 : D.zoomOut) || u(it, null, null),
+      icon: ((D = e.icons) == null ? void 0 : D.zoomOut) || c(it, null, null),
       onClick: (s) => {
-        s.stopPropagation(), A("zoomOut");
+        s.stopPropagation(), k("zoomOut");
       },
       type: "zoomOut"
     }, {
-      icon: ((X = e.icons) == null ? void 0 : X.rotateRight) || u(rt, null, null),
+      icon: ((X = e.icons) == null ? void 0 : X.rotateRight) || c(rt, null, null),
       onClick: (s) => {
-        s.stopPropagation(), A("anticlocelise");
+        s.stopPropagation(), k("anticlocelise");
       },
       type: "rotateRight"
     }, {
-      icon: ((Ce = e.icons) == null ? void 0 : Ce.rotateLeft) || u(ot, null, null),
+      icon: ((Ce = e.icons) == null ? void 0 : Ce.rotateLeft) || c(ot, null, null),
       onClick: (s) => {
-        s.stopPropagation(), A("clocelise");
+        s.stopPropagation(), k("clocelise");
       },
       type: "rotateLeft"
     }];
-    return le(ee, () => {
+    return q(te, () => {
       Ye(() => {
-        F.value.complete || (k.value = !0);
+        j.value.complete || (O.value = !0);
       });
-    }), le(h, (s) => {
+    }), q(g, (s) => {
       R(), t("switch", s);
-    }), le(p, (s) => {
-      s && (T.value = s);
-    }), Ue(() => {
-      var s, m;
-      ge(), (m = (s = Y.value) == null ? void 0 : s.focus) == null || m.call(s);
+    }), q(m, (s) => {
+      s && (z.value = s);
+    }), q([() => m.value, () => F.value], ([s, M]) => {
+      var h, y;
+      s && M && (ge(), (y = (h = F.value) == null ? void 0 : h.focus) == null || y.call(h));
     }), n({
-      setOpen: $
+      setOpen: E
     }), () => {
-      const s = $e(`${o}-fade`), m = $e(`${o}-zoom`);
-      return l(u(_e, {
+      const s = $e(`${o}-fade`), M = $e(`${o}-zoom`);
+      return l(c(_e, {
         to: e.getContainer || "body",
         disabled: !e.teleported
       }, {
-        default: () => [p.value && u("div", {
-          class: `${o}-root ${c.value}`
-        }, [u(ke, s, {
-          default: () => [ze(u("div", {
-            class: `${o}-mask ${c.value}`
-          }, null), [[Oe, p.value && T.value]])]
-        }), u("div", {
-          ref: Y,
+        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: F,
           tabindex: -1,
-          class: [`${o}-wrapper`, `${c.value}`],
-          onClick: (b) => e.onHideOnClickModal && he(b)
-        }, [u(ke, We(m, {
-          onAfterLeave: () => te()
+          class: [`${o}-wrapper`, `${f.value}`],
+          onClick: (h) => e.onHideOnClickModal && he(h)
+        }, [c(ke, We(M, {
+          onAfterLeave: () => de()
         }), {
           default: () => {
-            var b, C;
-            return [ze(u("div", {
-              class: `${o}-block ${c.value}`
-            }, [u("div", {
-              class: `${o}-content ${c.value}`
-            }, [u("div", {
-              class: `${o}-body ${c.value}`
-            }, [u("div", {
-              class: `${o}-operations-wrapper ${c.value}`,
-              onClick: (v) => v.stopPropagation()
-            }, [u("ul", {
-              class: `${o}-operations ${c.value}`
-            }, [pe.map(({
-              icon: v,
-              onClick: M,
-              type: me
-            }) => u("li", {
-              class: `${o}-operations-operation ${c.value}`,
-              onClick: M,
-              key: me
-            }, [qe(v, {
-              class: `${o}-operations-icon ${c.value}`
-            })]))])]), u("div", {
-              class: `${o}-canvas ${c.value}`
-            }, [e.urlList.map((v, M) => u("img", {
-              ref: F,
-              class: `${o}-img ${c.value}`,
+            var h, y;
+            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}`
+            }, [me.map(({
+              icon: p,
+              onClick: I,
+              type: pe
+            }) => c("li", {
+              class: `${o}-operations-operation ${f.value}`,
+              onClick: I,
+              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: j,
+              class: `${o}-img ${f.value}`,
               style: {
-                ...de.value,
-                display: M === h.value ? "block" : "none"
+                ...fe.value,
+                display: I === g.value ? "block" : "none"
               },
-              key: v,
-              src: v,
+              key: p,
+              src: p,
               onLoad: () => U(),
-              onError: (me) => f(me),
-              onMousedown: O
-            }, null))]), G.value && u("div", {
-              class: [`${o}-switch-left`, h.value === 0 && !e.infinite ? `${o}-switch-left-disabled` : "", `${c.value}`],
+              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
-            }, [((b = e.icons) == null ? void 0 : b.left) || u(st, null, null)]), G.value && u("div", {
-              class: [`${o}-switch-right`, h.value === e.urlList.length - 1 && !e.infinite ? `${o}-switch-right-disabled` : "", `${c.value}`],
+            }, [((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
-            }, [((C = e.icons) == null ? void 0 : C.right) || u(lt, null, null)])])])]), [[Oe, p.value && T.value]])];
+            }, [((y = e.icons) == null ? void 0 : y.right) || c(lt, null, null)])])])]), [[Oe, m.value && z.value]])];
           }
         })])])]
       }));
@@ -1174,7 +1180,7 @@ const Bt = /* @__PURE__ */ Ve({
 }), Ie = {
   width: "100%",
   height: "100%"
-}, Vt = (e) => ({
+}, Yt = (e) => ({
   [e.componentCls]: {
     display: "inline-block",
     position: "relative",
@@ -1204,10 +1210,10 @@ const Bt = /* @__PURE__ */ Ve({
       cursor: "pointer"
     }
   }
-}), Yt = (e) => e && e.nodeType === Node.ELEMENT_NODE;
+}), Wt = (e) => e && e.nodeType === Node.ELEMENT_NODE;
 let Be = "";
-const ce = /* @__PURE__ */ Ve({
-  props: ue,
+const ue = /* @__PURE__ */ Ve({
+  props: le,
   name: "GImage",
   emits: ["error", "click", "load"],
   setup(e, {
@@ -1220,124 +1226,131 @@ const ce = /* @__PURE__ */ Ve({
     }), {
       wrapSSR: r,
       hashId: o
-    } = vt("Image", [Vt], i), l = w(), c = w(""), S = w(!1), p = w(!0), $ = w(!1), T = w(null), x = w();
-    let k, h;
-    const Y = L(() => !q && e.fit ? {
+    } = mt("Image", [Yt], i), l = A(), f = A(""), S = A(!1), m = A(!0), E = A(!1), z = A(null), x = A();
+    let O, g;
+    const F = N(() => !Q && e.fit ? {
       "object-fit": e.fit
-    } : {}), F = L(() => {
+    } : {}), j = N(() => {
       const {
-        previewSrcList: f
+        previewSrcList: u
       } = e;
-      return Array.isArray(f) && f.length > 0;
-    }), W = L(() => {
+      return Array.isArray(u) && u.length > 0;
+    }), W = N(() => {
       const {
-        src: f,
-        previewSrcList: E,
-        initialIndex: O
+        src: u,
+        previewSrcList: b,
+        initialIndex: T
       } = e;
-      if (O || O === 0)
-        return E.length >= O ? O : 0;
+      if (T || T === 0)
+        return b.length >= T ? T : 0;
       let R = 0;
-      const j = E.indexOf(f);
-      return j >= 0 && (R = j), R;
+      const B = b.indexOf(u);
+      return B >= 0 && (R = B), R;
     }), d = () => {
-      q || (p.value = !0, S.value = !1, e.src ? c.value = e.src : te());
+      if (Q)
+        return;
+      m.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.src = e.src;
     };
     function G() {
-      ut(T.value, x.value) && (d(), ee());
+      ut(z.value, x.value) && (d(), te());
     }
-    const J = mt(G, 200), K = async () => {
-      if (q)
+    const K = bt(G, 200), ee = async () => {
+      if (Q)
         return;
       await Ye();
       const {
-        scrollContainer: f
+        scrollContainer: u
       } = e;
-      Yt(f) ? x.value = f : ct(f) && f !== "" ? x.value = document.querySelector(f) ?? void 0 : T.value && (x.value = ft(T.value)), x.value && (k = Ee(x, "scroll", J), setTimeout(() => G(), 200));
-    }, ee = () => {
-      q || !x.value || !J || (k(), x.value = void 0);
-    }, de = (f) => {
-      p.value = !1, S.value = !1, n("load", f);
-    }, te = (f) => {
-      p.value = !1, S.value = !0, n("error", f);
-    }, he = (f) => {
-      if (f.ctrlKey) {
-        if (f.deltaY < 0)
-          return f.preventDefault(), !1;
-        if (f.deltaY > 0)
-          return f.preventDefault(), !1;
+      Wt(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);
+    }, 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 = () => {
-      !F.value || e.disablePreview || (h = Ee("wheel", he, {
+      !j.value || e.disablePreview || (g = Ee("wheel", he, {
         passive: !1
-      }), Be = document.body.style.overflow, document.body.style.overflow = "hidden", $.value = !0);
+      }), Be = document.body.style.overflow, document.body.style.overflow = "hidden", E.value = !0);
     }, ve = () => {
-      h == null || h(), document.body.style.overflow = Be, $.value = !1;
+      g == null || g(), document.body.style.overflow = Be, E.value = !1;
     };
-    le(() => e.src, () => {
-      e.lazy ? (p.value = !0, S.value = !1, ee(), K()) : d();
+    q(() => e.src, () => {
+      e.lazy ? (m.value = !0, S.value = !1, te(), ee()) : d();
     });
-    const U = (f) => dt(f) ? f + "px" : f;
-    return Ue(() => {
-      e.lazy ? K() : d();
+    const U = (u) => dt(u) ? u + "px" : u;
+    return ht(() => {
+      e.lazy ? ee() : d();
     }), () => {
       const {
-        crossorigin: f,
-        decoding: E,
-        alt: O,
+        crossorigin: u,
+        decoding: b,
+        alt: T,
         sizes: R,
-        srcset: j,
+        srcset: B,
         usemap: ne,
         class: Z,
-        style: A = {}
-      } = a, pe = {
-        crossorigin: f,
-        decoding: E,
-        alt: O,
+        style: k = {}
+      } = a, me = {
+        crossorigin: u,
+        decoding: b,
+        alt: T,
         sizes: R,
-        srcset: j,
+        srcset: B,
         usemap: ne,
         style: {
-          ...Y.value,
+          ...F.value,
           height: e.height ? U(e.height) : void 0
         }
       }, ae = Le(t, e, "fallback"), ie = Le(t, e, "placeholder");
       return Qe(() => {
         var D, X;
-        F.value && $.value ? (D = l.value) == null || D.setOpen(!0) : (X = l.value) == null || X.setOpen(!1);
-      }), r(u(Je, null, [u("div", {
+        j.value && E.value ? (D = l.value) == null || D.setOpen(!0) : (X = l.value) == null || X.setOpen(!1);
+      }), r(c(Je, null, [c("div", {
         class: {
           [`${o.value}`]: !0,
           [`${i}`]: !0,
           [`${Z}`]: !!Z
         },
-        ref: (D) => T.value = D,
+        ref: (D) => z.value = D,
         style: {
-          ...A,
           width: e.width ? U(e.width) : void 0,
           height: e.height ? U(e.height) : void 0,
-          display: e.lazy ? "block" : void 0
+          display: e.lazy ? "block" : void 0,
+          ...k
         },
         onClick: () => {
           n("click");
         }
-      }, [p.value && (ie || u("div", {
+      }, [m.value ? ie || c("div", {
         class: `${i}-placeholder ${o.value}`
-      }, null)), S.value ? ae || u("div", {
+      }, null) : S.value ? ae || c("div", {
         class: `${i}-error ${o.value}`
-      }, [Ke("加载失败")]) : c.value && u("img", We(pe, {
+      }, [Ke("加载失败")]) : f.value && c("img", We(me, {
         class: {
           [`${o.value}`]: !0,
           [`${e.imageClassName}`]: !!e.imageClassName,
           [`${i}-inner`]: !0,
-          [`${i}-preview`]: F.value
+          [`${i}-preview`]: j.value
         },
         alt: e.alt,
-        src: c.value,
-        onLoad: de,
-        onError: te,
+        src: f.value,
         onClick: () => ge()
-      }), null), u(Bt, {
+      }), null), c(Vt, {
         ref: l,
         zIndex: e.zIndex,
         infinite: e.infinite,
@@ -1350,10 +1363,10 @@ const ce = /* @__PURE__ */ Ve({
     };
   }
 });
-ce.isWImage = !0;
-ce.install = (e) => (e.component(ce.name, ce), e);
+ue.isWImage = !0;
+ue.install = (e) => (e.component(ue.name, ue), e);
 export {
-  ce as GImage,
-  Bt as ImageViewer,
-  ce as default
+  ue as GImage,
+  Vt as ImageViewer,
+  ue as default
 };