@gx-design-vue/image 0.2.0-beta.26 → 0.2.0-beta.27

package/dist/image.js

@@ -1,54 +1,268 @@
-import { ref as N, reactive as ae, onMounted as De, defineComponent as ye, createVNode as r, Teleport as ze, Transition as ge, withDirectives as we, Fragment as Se, cloneVNode as Je, vShow as he, shallowRef as Z, computed as y, watch as H, onUnmounted as et, mergeProps as pe, watchEffect as tt, createTextVNode as nt, nextTick as ot } from "vue";
-import { useState as xe, onMountedOrActivated as it } from "@gx-design-vue/pro-hooks";
-import { getTransitionProps as Ie, Keyframe as re, useStyle as at, mergeToken as lt, unit as rt, useProStyle as st } from "@gx-design-vue/pro-provider";
-import { classNames as oe, getPrefixCls as Ue, isNumber as Ee, getSlotVNode as $, isArray as _e, getSlot as ct, isServer as ie, isInContainer as ut, getSlotsProps as dt, isString as ft, getScrollContainer as vt } from "@gx-design-vue/pro-utils";
-import { useThrottleFn as mt, useEventListener as Le } from "@vueuse/core";
-import { omit as gt, pick as wt } from "lodash-es";
-import { CloseOutlined as St, LeftOutlined as ht, RightOutlined as pt, RotateLeftOutlined as It, RotateRightOutlined as Et, ZoomInOutlined as Ct, ZoomOutOutlined as yt, SwapOutlined as be } from "@ant-design/icons-vue";
-import { TinyColor as Y } from "@ctrl/tinycolor";
-function Nt(e, t) {
-  process.env.NODE_ENV !== "production" && !e && console !== void 0 && console.error(`Warning: ${t}`);
+import { ref as L, defineComponent as pe, createVNode as u, Teleport as Ee, Transition as ge, withDirectives as me, Fragment as re, cloneVNode as ot, vShow as he, toRef as F, reactive as it, computed as b, watch as K, onMounted as Te, onUnmounted as at, mergeProps as ae, watchEffect as lt, createTextVNode as rt, nextTick as st } from "vue";
+import { getTransitionProps as we, Keyframe as ue, useStyle as ut, mergeToken as ct, useProStyle as dt, unit as be } from "@gx-design-vue/pro-provider";
+import { classNames as Q, getPrefixCls as De, isNumber as Re, getSlotVNode as H, isArray as ft, getSlot as vt, getSlotsProps as gt, isInContainer as mt, isString as ht, getScrollContainer as wt } from "@gx-design-vue/pro-utils";
+import { useWindowSize as Ne, isClient as q, useThrottleFn as pt, useEventListener as $e } from "@vueuse/core";
+import { isEqual as yt, cloneDeep as St, omit as Pe, fromPairs as Ct, pick as xt } from "lodash-es";
+import { CloseOutlined as It, LeftOutlined as bt, RightOutlined as $t, SwapOutlined as ze, ZoomOutOutlined as zt, ZoomInOutlined as Lt, RotateRightOutlined as Mt, RotateLeftOutlined as Ot } from "@ant-design/icons-vue";
+import { useState as ee, useEffect as ye, useMergedState as At } from "@gx-design-vue/pro-hooks";
+import { TinyColor as Z } from "@ctrl/tinycolor";
+let Xe = (e) => setTimeout(e, 16), Ye = (e) => clearTimeout(e);
+typeof window < "u" && "requestAnimationFrame" in window && (Xe = (e) => window.requestAnimationFrame(e), Ye = (e) => window.cancelAnimationFrame(e));
+let Le = 0;
+const Se = /* @__PURE__ */ new Map();
+function je(e) {
+  Se.delete(e);
 }
-let Fe = (e) => setTimeout(e, 16), Be = (e) => clearTimeout(e);
-typeof window < "u" && "requestAnimationFrame" in window && (Fe = (e) => window.requestAnimationFrame(e), Be = (e) => window.cancelAnimationFrame(e));
-let Te = 0;
-const Ne = /* @__PURE__ */ new Map();
-function He(e) {
-  Ne.delete(e);
-}
-function Ce(e, t = 1) {
-  Te += 1;
-  const i = Te;
-  function l(o) {
-    if (o === 0)
-      He(i), e();
+function Be(e, n = 1) {
+  Le += 1;
+  const o = Le;
+  function l(t) {
+    if (t === 0)
+      je(o), e();
     else {
-      const f = Fe(() => {
-        l(o - 1);
+      const s = Xe(() => {
+        l(t - 1);
       });
-      Ne.set(i, f);
+      Se.set(o, s);
     }
   }
-  return l(t), i;
+  return l(n), o;
 }
-Ce.cancel = (e) => {
-  const t = Ne.get(e);
-  return He(t), Be(t);
+Be.cancel = (e) => {
+  const n = Se.get(e);
+  return je(n), Ye(n);
+};
+const oe = {
+  x: 0,
+  y: 0,
+  rotate: 0,
+  scale: 1,
+  flipX: !1,
+  flipY: !1
 };
-function Mt(e) {
-  const t = N(null), i = ae({ ...e }), l = N([]), o = (f) => {
-    t.value === null && (l.value = [], t.value = Ce(() => {
-      let c;
-      l.value.forEach((d) => {
-        c = { ...c, ...d };
-      }), Object.assign(i, c), t.value = null;
-    })), l.value.push(f);
+function Et(e, n, o, l) {
+  const t = L(null), s = L([]), [c, h] = ee(oe), y = (m) => {
+    h(oe), yt(oe, c.value) || l == null || l({ transform: oe, action: m });
+  }, d = (m, w) => {
+    t.value === null && (s.value = [], t.value = Be(() => {
+      let C = St(c.value);
+      s.value.forEach((a) => {
+        C = { ...C, ...a };
+      }), t.value = null, l == null || l({ transform: C, action: w }), h(C);
+    })), s.value.push({
+      ...c.value,
+      ...m
+    });
+  };
+  return {
+    transform: c,
+    resetTransform: y,
+    updateTransform: d,
+    dispatchZoomChange: (m, w, C, a, i) => {
+      const { width: p, height: f, offsetWidth: S, offsetHeight: x, offsetLeft: $, offsetTop: T } = e.value;
+      let M = m, I = c.value.scale * m;
+      I > o.value ? (I = o.value, M = o.value / c.value.scale) : I < n.value && (I = i ? I : n.value, M = I / c.value.scale);
+      const B = C ?? innerWidth / 2, k = a ?? innerHeight / 2, N = M - 1, O = N * p * 0.5, P = N * f * 0.5, X = N * (B - c.value.x - $), W = N * (k - c.value.y - T);
+      let Y = c.value.x - (X - O), j = c.value.y - (W - P);
+      if (m < 1 && I === 1) {
+        const D = S * I, v = x * I, { width: A, height: E } = Ne();
+        D <= A.value && v <= E.value && (Y = 0, j = 0);
+      }
+      d({
+        x: Y,
+        y: j,
+        scale: I
+      }, w);
+    }
   };
-  return De(() => {
-    t.value && Ce.cancel(t.value);
-  }), [i, o];
 }
-const V = {
+function Tt(e, n) {
+  process.env.NODE_ENV !== "production" && console !== void 0 && console.error(`Warning: ${n}`);
+}
+let Fe = !1;
+try {
+  const e = Object.defineProperty({}, "passive", {
+    get() {
+      Fe = !0;
+    }
+  });
+  window.addEventListener("testPassive", null, e), window.removeEventListener("testPassive", null, e);
+} catch {
+}
+function V(e, n, o, l) {
+  if (e && e.addEventListener) {
+    let t = l;
+    t === void 0 && Fe && (n === "touchstart" || n === "touchmove" || n === "wheel") && (t = { passive: !1 }), e.addEventListener(n, o, t);
+  }
+  return {
+    remove: () => {
+      e && e.removeEventListener && e.removeEventListener(n, o);
+    }
+  };
+}
+const U = 1, Dt = 1;
+function Me(e, n, o, l) {
+  const t = n + o, s = (o - l) / 2;
+  if (o > l) {
+    if (n > 0)
+      return {
+        [e]: s
+      };
+    if (n < 0 && t < l)
+      return {
+        [e]: -s
+      };
+  } else if (n < 0 || t > l)
+    return {
+      [e]: n < 0 ? s : -s
+    };
+  return {};
+}
+function He(e, n, o, l) {
+  const { width: t, height: s } = Ne();
+  let c = null;
+  return e <= t.value && n <= s.value ? c = {
+    x: 0,
+    y: 0
+  } : (e > t.value || n > s.value) && (c = {
+    ...Me("x", o, e, t.value),
+    ...Me("y", l, n, s.value)
+  }), c;
+}
+function Rt(e, n, o, l, t, s, c) {
+  const [h, y] = ee(!1), d = L({
+    diffX: 0,
+    diffY: 0,
+    transformX: 0,
+    transformY: 0
+  }), g = (a) => {
+    !n || a.button !== 0 || (a.preventDefault(), a.stopPropagation(), d.value = {
+      diffX: a.pageX - t.value.x,
+      diffY: a.pageY - t.value.y,
+      transformX: t.value.x,
+      transformY: t.value.y
+    }, y(!0));
+  }, m = (a) => {
+    o && h.value && s({
+      x: a.pageX - d.value.diffX,
+      y: a.pageY - d.value.diffY
+    }, "move");
+  }, w = () => {
+    if (o && h.value) {
+      y(!1);
+      const { transformX: a, transformY: i } = d.value;
+      if (!(t.value.x !== a && t.value.y !== i))
+        return;
+      const f = e.value.offsetWidth * t.value.scale, S = e.value.offsetHeight * t.value.scale, { left: x, top: $ } = e.value.getBoundingClientRect(), T = t.value.rotate % 180 !== 0, M = He(T ? S : f, T ? f : S, x, $);
+      M && s({ ...M }, "dragRebound");
+    }
+  }, C = (a) => {
+    if (!o || a.deltaY === 0)
+      return;
+    const i = Math.abs(a.deltaY / 100), p = Math.min(i, Dt);
+    let f = U + p * l.value;
+    a.deltaY > 0 && (f = U / f), c(f, "wheel", a.clientX, a.clientY);
+  };
+  return ye(() => {
+    let a, i, p, f;
+    if (n) {
+      p = V(window, "mouseup", w, !1), f = V(window, "mousemove", m, !1);
+      try {
+        window.top !== window.self && (a = V(window.top, "mouseup", w, !1), i = V(window.top, "mousemove", m, !1));
+      } catch (S) {
+        Tt(!1, `[rc-image] ${S}`);
+      }
+    }
+    return () => {
+      p == null || p.remove(), f == null || f.remove(), a == null || a.remove(), i == null || i.remove();
+    };
+  }, [o, h, () => t.value.x, () => t.value.y, () => t.value.rotate, n]), {
+    isMoving: h,
+    onMouseDown: g,
+    onMouseMove: m,
+    onMouseUp: w,
+    onWheel: C
+  };
+}
+function se(e, n) {
+  const o = e.x - n.x, l = e.y - n.y;
+  return Math.hypot(o, l);
+}
+function Nt(e, n, o, l) {
+  const t = se(e, o), s = se(n, l);
+  if (t === 0 && s === 0)
+    return [e.x, e.y];
+  const c = t / (t + s), h = e.x + c * (n.x - e.x), y = e.y + c * (n.y - e.y);
+  return [h, y];
+}
+function Pt(e, n, o, l, t, s, c) {
+  const [h, y] = ee(!1), d = L({
+    point1: { x: 0, y: 0 },
+    point2: { x: 0, y: 0 },
+    eventType: "none"
+  }), g = (a) => {
+    d.value = {
+      ...d.value,
+      ...a
+    };
+  }, m = (a) => {
+    if (!n.value)
+      return;
+    a.stopPropagation(), y(!0);
+    const { touches: i = [] } = a;
+    i.length > 1 ? g({
+      point1: { x: i[0].clientX, y: i[0].clientY },
+      point2: { x: i[1].clientX, y: i[1].clientY },
+      eventType: "touchZoom"
+    }) : g({
+      point1: {
+        x: i[0].clientX - t.value.x,
+        y: i[0].clientY - t.value.y
+      },
+      eventType: "move"
+    });
+  }, w = (a) => {
+    const { touches: i = [] } = a, { point1: p, point2: f, eventType: S } = d.value;
+    if (i.length > 1 && S === "touchZoom") {
+      const x = {
+        x: i[0].clientX,
+        y: i[0].clientY
+      }, $ = {
+        x: i[1].clientX,
+        y: i[1].clientY
+      }, [T, M] = Nt(p, f, x, $), I = se(x, $) / se(p, f);
+      c(I, "touchZoom", T, M, !0), g({
+        point1: x,
+        point2: $,
+        eventType: "touchZoom"
+      });
+    } else S === "move" && (s({
+      x: i[0].clientX - p.x,
+      y: i[0].clientY - p.y
+    }, "move"), g({ eventType: "move" }));
+  }, C = () => {
+    if (!o.value)
+      return;
+    if (h && y(!1), g({ eventType: "none" }), l.value > t.value.scale)
+      return s({ x: 0, y: 0, scale: l.value }, "touchZoom");
+    const a = e.value.offsetWidth * t.value.scale, i = e.value.offsetHeight * t.value.scale, { left: p, top: f } = e.value.getBoundingClientRect(), S = t.value.rotate % 180 !== 0, x = He(S ? i : a, S ? a : i, p, f);
+    x && s({ ...x }, "dragRebound");
+  };
+  return ye(() => {
+    let a;
+    return o.value && n.value && (a = V(window, "touchmove", (i) => i.preventDefault(), {
+      passive: !1
+    })), () => {
+      a == null || a.remove();
+    };
+  }, [o, n]), {
+    isTouching: h,
+    onTouchStart: m,
+    onTouchMove: w,
+    onTouchEnd: C
+  };
+}
+const J = {
   infinite: {
     type: Boolean,
     default: !0
@@ -64,17 +278,9 @@ const V = {
   getContainer: {
     type: String
   }
-}, je = {
+}, Ze = {
   preview: {
-    type: Object,
-    default: () => ({
-      current: 0,
-      infinite: !0,
-      onHideOnClickModal: !0
-    })
-  },
-  showPreview: {
-    type: Boolean,
+    type: [Object, Boolean],
     default: !0
   },
   src: {
@@ -85,16 +291,22 @@ const V = {
     type: String,
     default: ""
   },
+  loading: {
+    type: String
+  },
   fit: {
     type: String,
     default: "contain"
   },
+  crossorigin: {
+    type: String
+  },
   lazy: Boolean,
   scrollContainer: {
     type: [String, Object]
   },
   placeholder: {
-    type: [Function, Object],
+    type: [Function, Object, Boolean],
     default: () => {
     }
   },
@@ -112,22 +324,45 @@ const V = {
   onClick: {
     type: Function
   },
-  imageClassName: String,
-  imageStyle: Object,
+  wrapperStyle: {
+    type: Object,
+    default: () => ({})
+  },
+  wrapperClass: String,
   width: Number,
   height: Number,
-  zIndex: V.zIndex,
-  getContainer: V.getContainer
-}, j = {
-  previewUrls: {
+  zIndex: J.zIndex,
+  getContainer: J.getContainer
+}, G = {
+  urls: {
     type: Array,
     default: () => []
   },
+  open: {
+    type: Boolean,
+    default: !1
+  },
+  scaleStep: {
+    type: Number,
+    default: 0.5
+  },
+  minScale: {
+    type: Number,
+    default: 0.32
+  },
+  maxScale: {
+    type: Number,
+    default: 32
+  },
+  movable: {
+    type: Boolean,
+    default: !0
+  },
   disabled: Boolean,
-  zIndex: V.zIndex,
-  current: V.current,
-  infinite: V.infinite,
-  getContainer: je.getContainer,
+  zIndex: J.zIndex,
+  current: J.current,
+  infinite: J.infinite,
+  getContainer: Ze.getContainer,
   onHideOnClickModal: {
     type: Boolean,
     default: !0
@@ -136,8 +371,11 @@ const V = {
   icons: {
     type: Object,
     default: () => ({})
-  }
-}, Ot = /* @__PURE__ */ ye({
+  },
+  onTransform: Function,
+  onOpenChange: Function,
+  "onUpdate:open": Function
+}, Xt = /* @__PURE__ */ pe({
   name: "Operations",
   inheritAttrs: !1,
   props: {
@@ -154,111 +392,111 @@ const V = {
     showProgress: Boolean,
     prefixCls: String,
     hashId: String,
-    zIndex: j.zIndex,
-    icons: j.icons,
-    infinite: j.infinite,
-    getContainer: j.getContainer,
-    countRender: j.countRender,
+    zIndex: G.zIndex,
+    icons: G.icons,
+    infinite: G.infinite,
+    getContainer: G.getContainer,
+    countRender: G.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);
+    const n = (o, l) => {
+      var t;
+      o.preventDefault(), o.stopPropagation(), (t = e.onActive) == null || t.call(e, l);
     };
     return () => {
       const {
-        prefixCls: i,
+        prefixCls: o,
         hashId: l,
-        tools: o
-      } = e, f = Ie(`${e.prefixCls}-fade`), c = `${i}-operations-operation`, d = `${i}-operations-icon`;
-      return r(ze, {
+        tools: t
+      } = e, s = we(`${e.prefixCls}-fade`), c = `${o}-operations-operation`, h = `${o}-operations-icon`;
+      return u(Ee, {
         to: e.getContainer || "body"
       }, {
-        default: () => [r(ge, f, {
+        default: () => [u(ge, s, {
           default: () => {
-            var E, g, h, C;
-            return [we(r("div", {
-              class: oe(`${i}-operations-wrapper`, l),
+            var y, d, g, m;
+            return [me(u("div", {
+              class: Q(`${o}-operations-wrapper`, l),
               style: {
                 zIndex: e.zIndex
               }
-            }, [((E = e.icons) == null ? void 0 : E.close) === null ? null : r("button", {
-              class: `${i}-close ${l}`,
+            }, [((y = e.icons) == null ? void 0 : y.close) === null ? null : u("button", {
+              class: `${o}-close ${l}`,
               onClick: e.onClose
-            }, [((g = e.icons) == null ? void 0 : g.close) || r(St, null, null)]), e.showSwitch && r(Se, null, [r("div", {
-              class: oe(`${i}-switch-left ${l}`, {
-                [`${i}-switch-left-disabled`]: e.infinite ? !1 : e.current === 0
+            }, [((d = e.icons) == null ? void 0 : d.close) || u(It, null, null)]), e.showSwitch && u(re, null, [u("div", {
+              class: Q(`${o}-switch-left ${l}`, {
+                [`${o}-switch-left-disabled`]: e.infinite ? !1 : e.current === 0
               }),
-              onClick: (v) => t(v, -1)
-            }, [((h = e.icons) == null ? void 0 : h.left) || r(ht, null, null)]), r("div", {
-              class: oe(`${i}-switch-right ${l}`, {
-                [`${i}-switch-right-disabled`]: e.infinite ? !1 : e.current === e.count - 1
+              onClick: (w) => n(w, -1)
+            }, [((g = e.icons) == null ? void 0 : g.left) || u(bt, null, null)]), u("div", {
+              class: Q(`${o}-switch-right ${l}`, {
+                [`${o}-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(pt, 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", {
+              onClick: (w) => n(w, 1)
+            }, [((m = e.icons) == null ? void 0 : m.right) || u($t, null, null)])]), u("div", {
+              class: `${o}-footer ${l}`
+            }, [e.showProgress && u("div", {
+              class: `${o}-progress`
+            }, [e.countRender ? e.countRender(e.current + 1, e.count) : `${e.current + 1} / ${e.count}`]), u("div", {
               class: `${e.prefixCls}-operations`
-            }, [o == null ? void 0 : o.map(({
-              icon: v,
-              onClick: u,
-              type: M,
-              disabled: w
-            }) => r("div", {
-              class: oe(c, {
-                [`${e.prefixCls}-operations-operation-disabled`]: w && (w == null ? void 0 : w.value)
+            }, [t == null ? void 0 : t.map(({
+              icon: w,
+              onClick: C,
+              type: a,
+              disabled: i
+            }) => u("div", {
+              class: Q(c, {
+                [`${e.prefixCls}-operations-operation-disabled`]: i && (i == null ? void 0 : i.value)
               }),
-              onClick: u,
-              key: M
-            }, [Je(v, {
-              class: d
+              onClick: C,
+              key: a
+            }, [ot(w, {
+              class: h
             })]))])])]), [[he, e.open]])];
           }
         })]
       });
     };
   }
-}), At = new re("viewFadeIn", {
+}), Yt = new ue("viewFadeIn", {
   "0%": {
     opacity: 0
   },
   "100%": {
     opacity: 1
   }
-}), xt = new re("viewFadeOut", {
+}), jt = new ue("viewFadeOut", {
   "0%": {
     opacity: 1
   },
   "100%": {
     opacity: 0
   }
-}), Lt = new re("viewZoomBadgeIn", {
+}), Bt = new ue("viewZoomBadgeIn", {
   "0%": {
-    transform: "scale(0.2)",
+    transform: "scale(0)",
     opacity: 0
   },
   "100%": {
     transform: "scale(1)",
     opacity: 1
   }
-}), bt = new re("viewZoomBadgeOut", {
+}), Ft = new ue("viewZoomBadgeOut", {
   "0%": {
     transform: "scale(1)"
   },
   "100%": {
-    transform: "scale(0.2)",
+    transform: "scale(0)",
     opacity: 0
   }
-}), Pe = (e) => ({
+}), Oe = (e) => ({
   position: e || "absolute",
   inset: 0
 });
-function ve(e) {
+function fe(e) {
   return {
     position: e,
     top: 0,
@@ -267,12 +505,12 @@ function ve(e) {
     insetInlineStart: 0
   };
 }
-const Tt = (e) => {
-  const { previewCls: t, modalMaskBg: i, paddingSM: l, marginXL: o, margin: f, paddingLG: c, previewOperationColorDisabled: d, previewOperationHoverColor: E, motionDurationSlow: g, iconCls: h, colorTextLightSolid: C } = e, v = new Y(i).setAlpha(0.1), u = v.clone().setAlpha(0.2);
+const Ht = (e) => {
+  const { previewCls: n, modalMaskBg: o, marginXL: l, margin: t, colorTextLightSolid: s, previewOperationColorDisabled: c, previewOperationHoverColor: h, motionDurationSlow: y, iconCls: d } = e, g = new Z(o).setAlpha(0.1), m = g.clone().setAlpha(0.2), w = new Z(o).setAlpha(0.06);
   return {
-    [`${t}-footer`]: {
+    [`${n}-footer`]: {
       position: "fixed",
-      bottom: o,
+      bottom: l,
       left: {
         _skip_check_: !0,
         value: "50%"
@@ -283,1050 +521,513 @@ const Tt = (e) => {
       color: e.previewOperationColor,
       transform: "translateX(-50%)"
     },
-    [`${t}-progress`]: {
-      marginBottom: f
+    [`${n}-progress`]: {
+      marginBottom: t
     },
-    [`${t}-close`]: {
+    [`${n}-close`]: {
       position: "fixed",
-      top: o,
+      top: l,
       right: {
         _skip_check_: !0,
-        value: o
+        value: l
       },
       display: "flex",
-      color: C,
-      backgroundColor: v.toRgbString(),
-      borderRadius: "50%",
-      padding: l,
+      alignItems: "center",
+      justifyContent: "center",
+      color: s,
+      backgroundColor: g.toRgbString(),
+      borderRadius: e.borderRadiusLG,
+      backdropFilter: "saturate(180%) blur(10px)",
+      width: e.sizeXL,
+      height: e.sizeXL,
       outline: 0,
       border: 0,
       cursor: "pointer",
-      transition: `all ${g}`,
+      transition: `all ${y}`,
       "&:hover": {
-        backgroundColor: u.toRgbString()
+        backgroundColor: m.toRgbString()
       },
-      [`& > ${h}`]: {
+      [`& > ${d}`]: {
         fontSize: e.previewOperationSize
       }
     },
-    [`${t}-operations`]: {
+    [`${n}-operations`]: {
       display: "flex",
       alignItems: "center",
-      padding: `0 ${rt(c)}`,
-      backgroundColor: v.toRgbString(),
-      borderRadius: 100,
+      gap: e.sizeXXS,
+      padding: e.paddingXXS,
+      backgroundColor: g.toRgbString(),
+      borderRadius: e.borderRadiusLG,
+      backdropFilter: "saturate(180%) blur(10px)",
       "&-operation": {
-        marginInlineStart: l,
-        padding: l,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: e.sizeXL + 4,
+        height: e.sizeXL + 4,
         cursor: "pointer",
-        transition: `all ${g}`,
+        color: s,
+        borderRadius: e.borderRadiusSM,
+        transition: `all ${y}`,
         userSelect: "none",
-        [`&:not(${t}-operations-operation-disabled):hover > ${h}`]: {
-          color: E
+        [`&:not(${n}-operations-operation-disabled):hover > ${d}`]: {
+          color: h
+        },
+        "&:hover": {
+          backgroundColor: w.toRgbString()
         },
         "&-disabled": {
-          color: d,
+          color: c,
           cursor: "not-allowed"
         },
         "&:first-of-type": {
           marginInlineStart: 0
         },
-        [`& > ${h}`]: {
+        [`& > ${d}`]: {
           fontSize: e.previewOperationSize
         }
       }
     }
   };
-}, Pt = (e) => {
-  const { modalMaskBg: t, iconCls: i, previewOperationColorDisabled: l, previewCls: o, zIndexPopup: f, motionDurationSlow: c } = e, d = new Y(t).setAlpha(0.1), E = d.clone().setAlpha(0.2);
+}, Zt = (e) => {
+  const { modalMaskBg: n, iconCls: o, previewOperationColorDisabled: l, previewCls: t, zIndexPopup: s, motionDurationSlow: c, colorTextLightSolid: h } = e, y = new Z(n).setAlpha(0.1), d = y.clone().setAlpha(0.2);
   return {
-    [`${o}-switch-left, ${o}-switch-right`]: {
+    [`${t}-switch-left, ${t}-switch-right`]: {
       position: "fixed",
       insetBlockStart: "50%",
-      zIndex: e.calc(f).add(1).equal(),
+      zIndex: e.calc(s).add(1).equal(),
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
+      borderRadius: e.borderRadius,
+      backdropFilter: "saturate(180%) blur(10px)",
       width: e.imagePreviewSwitchSize,
       height: e.imagePreviewSwitchSize,
       marginTop: e.calc(e.imagePreviewSwitchSize).mul(-1).div(2).equal(),
-      color: e.previewOperationColor,
-      background: d.toRgbString(),
-      borderRadius: "50%",
+      color: h,
+      background: y.toRgbString(),
       transform: "translateY(-50%)",
       cursor: "pointer",
       transition: `all ${c}`,
       userSelect: "none",
       "&:hover": {
-        background: E.toRgbString()
+        background: d.toRgbString()
       },
       "&-disabled": {
         "&, &:hover": {
           color: l,
           background: "transparent",
           cursor: "not-allowed",
-          [`> ${i}`]: {
+          [`> ${o}`]: {
             cursor: "not-allowed"
           }
         }
       },
-      [`> ${i}`]: {
+      [`> ${o}`]: {
         fontSize: e.previewOperationSize
       }
     },
-    [`${o}-switch-left`]: {
+    [`${t}-switch-left`]: {
       insetInlineStart: e.marginSM
     },
-    [`${o}-switch-right`]: {
+    [`${t}-switch-right`]: {
       insetInlineEnd: e.marginSM
     }
   };
-}, Rt = (e) => ({
-  [e.componentCls]: {
-    height: "100%",
-    textAlign: "center",
-    pointerEvents: "none",
-    "&-root": {
-      ...ve("fixed"),
-      zIndex: e.zIndexPopup,
-      overflow: "auto",
-      outline: 0,
-      WebkitOverflowScrolling: "touch"
-    },
-    "&-wrap": {
-      ...ve("fixed"),
-      zIndex: e.zIndexPopup,
-      overflow: "auto",
-      outline: 0,
-      WebkitOverflowScrolling: "touch"
-    },
-    "&-mask": {
-      ...ve("fixed"),
-      zIndex: e.zIndexPopupBase,
+}, kt = (e) => {
+  const { motionEaseOut: n, motionDurationSlow: o } = e;
+  return {
+    [e.componentCls]: {
       height: "100%",
-      backgroundColor: e.colorBgMask
-    },
-    "&-body": {
-      ...Pe(),
-      overflow: "hidden"
-    },
-    "&-img": {
-      maxWidth: "100%",
-      maxHeight: "100%",
-      verticalAlign: "middle",
-      transform: "scale3d(1, 1, 1)",
-      cursor: "grab",
-      transition: `transform ${e.motionDurationSlow} ${e.motionEaseOut} 0s`,
-      userSelect: "none",
-      pointerEvents: "auto",
-      "&-wrapper": {
-        ...Pe(),
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        transition: `transform ${e.motionDurationSlow} ${e.motionEaseOut} 0s`,
-        "&::before": {
-          display: "inline-block",
-          width: 1,
-          height: "50%",
-          marginInlineEnd: -1,
-          content: '""'
+      textAlign: "center",
+      pointerEvents: "none",
+      "&-root": {
+        ...fe("fixed"),
+        zIndex: e.zIndexPopup,
+        overflow: "auto",
+        outline: 0,
+        WebkitOverflowScrolling: "touch"
+      },
+      "&-wrap": {
+        ...fe("fixed"),
+        zIndex: e.zIndexPopup,
+        overflow: "auto",
+        outline: 0,
+        WebkitOverflowScrolling: "touch"
+      },
+      "&-mask": {
+        ...fe("fixed"),
+        zIndex: e.zIndexPopupBase,
+        height: "100%",
+        backgroundColor: e.colorBgMask,
+        backdropFilter: "blur(2px)"
+      },
+      "&-body": {
+        ...Oe(),
+        overflow: "hidden"
+      },
+      "&-img": {
+        maxWidth: "100%",
+        maxHeight: "70%",
+        verticalAlign: "middle",
+        transform: "scale3d(1, 1, 1)",
+        cursor: "grab",
+        transition: `transform ${o} ${n} 0s`,
+        userSelect: "none",
+        "&-wrapper": {
+          ...Oe(),
+          transition: `transform ${o} ${n} 0s`,
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          "& > *": {
+            pointerEvents: "auto"
+          },
+          "&::before": {
+            display: "inline-block",
+            width: 1,
+            height: "50%",
+            marginInlineEnd: -1,
+            content: '""'
+          }
         }
+      },
+      "&-moving": {
+        [`${e.componentCls}-view-img`]: {
+          cursor: "grabbing",
+          "&-wrapper": {
+            transitionDuration: "0s"
+          }
+        }
+      },
+      "&-mask-zoom-appear, &-mask-zoom-enter": {
+        animationName: Yt,
+        animationDuration: e.motionDurationSlow,
+        animationTimingFunction: "linear",
+        userSelect: "none"
+      },
+      "&-mask-zoom-leave": {
+        animationName: jt,
+        animationDuration: e.motionDurationSlow,
+        animationTimingFunction: "linear",
+        pointerEvents: "none"
+      },
+      "&-zoom-appear, &-zoom-enter": {
+        animationName: Bt,
+        opacity: 0,
+        animationTimingFunction: e.motionEaseOutCirc,
+        animationFillMode: "both",
+        transform: "none",
+        animationDuration: e.motionDurationMid,
+        userSelect: "none"
+      },
+      "&-zoom-enter-active": {
+        animationPlayState: "running"
+      },
+      "&-zoom-leave": {
+        animationName: Ft,
+        animationDuration: e.motionDurationSlow,
+        animationTimingFunction: e.motionEaseInOutCirc,
+        animationFillMode: "both"
       }
     },
-    "&-fade-appear, &-fade-enter": {
-      animationName: At,
-      animationDuration: e.motionDurationSlow,
-      animationTimingFunction: "linear"
-    },
-    "&-fade-leave": {
-      animationName: xt,
-      animationDuration: e.motionDurationSlow,
-      animationTimingFunction: "linear"
-    },
-    "&-zoom-appear, &-zoom-enter": {
-      animationName: Lt,
-      opacity: 0,
-      animationTimingFunction: e.motionEaseOutCirc,
-      animationFillMode: "both",
-      transform: "none",
-      animationDuration: e.motionDurationSlow,
-      userSelect: "none"
+    [`${e.componentCls}-root`]: {
+      [`${e.componentCls}-wrapper`]: {
+        zIndex: e.zIndexPopup
+      }
     },
-    "&-zoom-enter-active": {
-      animationPlayState: "running"
+    [`${e.componentCls}-operations-wrapper`]: {
+      position: "fixed",
+      insetBlockStart: 0,
+      insetInlineEnd: 0,
+      zIndex: e.calc(e.zIndexPopup).add(1).equal(),
+      width: "100%"
     },
-    "&-zoom-leave": {
-      animationName: bt,
-      animationDuration: e.motionDurationSlow,
-      animationTimingFunction: e.motionEaseOutBack,
-      animationFillMode: "both"
-    }
-  },
-  [`${e.componentCls}-root`]: {
-    [`${e.componentCls}-wrapper`]: {
-      zIndex: e.zIndexPopup
-    }
-  },
-  [`${e.componentCls}-operations-wrapper`]: {
-    position: "fixed",
-    insetBlockStart: 0,
-    insetInlineEnd: 0,
-    zIndex: e.zIndexPopup + 1,
-    width: "100%"
-  },
-  "&": [Tt(e), Pt(e)]
-});
-function $t(e) {
-  return at("ImageViewer", (t) => {
-    const i = lt(t, {
-      zIndexPopup: t.zIndexPopupBase + 80,
-      previewOperationColorDisabled: new Y(t.colorTextLightSolid).setAlpha(0.25).toRgbString(),
-      previewOperationHoverColor: new Y(t.colorTextLightSolid).setAlpha(0.85).toRgbString(),
-      modalMaskBg: new Y("#000").setAlpha(0.45).toRgbString(),
+    "&": [Ht(e), Zt(e)]
+  };
+};
+function Wt(e) {
+  return ut("ImageViewer", (n) => {
+    const o = ct(n, {
+      zIndexPopup: n.zIndexPopupBase + 80,
+      previewOperationColor: new Z(n.colorTextLightSolid).setAlpha(0.65).toRgbString(),
+      previewOperationHoverColor: new Z(n.colorTextLightSolid).setAlpha(0.85).toRgbString(),
+      previewOperationColorDisabled: new Z(n.colorTextLightSolid).setAlpha(0.25).toRgbString(),
+      imagePreviewSwitchSize: n.sizeXL,
+      modalMaskBg: new Z("#000").setAlpha(0.45).toRgbString(),
       // FIXME: Shared Token
-      previewOperationColor: new Y(t.colorTextLightSolid).toRgbString(),
-      previewOperationSize: t.fontSizeIcon * 1.5,
+      previewOperationSize: n.fontSizeIcon * 1.5,
       // FIXME: fontSizeIconLG
-      imagePreviewSwitchSize: t.controlHeightLG,
-      iconCls: "anticon",
-      previewCls: t.componentCls
+      iconCls: ".anticon",
+      previewCls: n.componentCls
     });
-    return [Rt(i)];
+    return [kt(o)];
   }, e);
 }
-let Ye = !1;
-try {
-  const e = Object.defineProperty({}, "passive", {
-    get() {
-      Ye = !0;
-    }
-  });
-  window.addEventListener("testPassive", null, e), window.removeEventListener("testPassive", null, e);
-} catch {
-}
-function F(e, t, i, l) {
-  if (e && e.addEventListener) {
-    let o = l;
-    o === void 0 && Ye && (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,
+const ve = {
   /**
    * 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;
-    }
-  },
-  /**
-   * 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;
-    }
-  }
-};
-function Dt(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 zt() {
-  const e = document.documentElement.clientWidth, t = window.innerHeight || document.documentElement.clientHeight;
-  return {
-    width: e,
-    height: t
-  };
-}
-function Re(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 Ut(e, t, i, l) {
-  const { width: o, height: f } = zt();
-  let c = null;
-  return e <= o && t <= f ? c = {
-    x: 0,
-    y: 0
-  } : (e > o || t > f) && (c = {
-    ...Re("x", i, e, o),
-    ...Re("y", l, t, f)
-  }), c;
-}
-const D = {
-  x: 0,
-  y: 0
-}, B = {
-  rotateLeft: r(It, null, null),
-  rotateRight: r(Et, null, null),
-  zoomIn: r(Ct, null, null),
-  zoomOut: r(yt, null, null),
-  flipX: r(be, null, null),
-  flipY: r(be, {
+  RIGHT: 39
+}, _ = {
+  rotateLeft: u(Ot, null, null),
+  rotateRight: u(Mt, null, null),
+  zoomIn: u(Lt, null, null),
+  zoomOut: u(zt, null, null),
+  flipX: u(ze, null, null),
+  flipY: u(ze, {
     rotate: 90
   }, null)
-}, Ke = ["close", "left", "right", "rotateRight", "rotateRight", "zoomOut", "flipX", "flipY", "rotateLeft"], _t = /* @__PURE__ */ ye({
+}, ke = ["close", "left", "right", "rotateRight", "rotateRight", "zoomOut", "flipX", "flipY", "rotateLeft"], _t = /* @__PURE__ */ pe({
   name: "GImagePreview",
-  props: j,
+  props: G,
   inheritAttrs: !1,
-  emits: ["close", "switch", "afterClose"],
-  emit: Object,
+  slots: Object,
+  emits: {
+    close: () => !0,
+    transform: (e) => !0,
+    "update:open": (e) => !0
+  },
   setup: (e, {
-    emit: t,
-    expose: i,
+    emit: n,
+    expose: o,
     slots: l
   }) => {
-    const o = Ue({
+    const t = De({
       suffixCls: "image-view"
     }), {
-      wrapSSR: f,
+      wrapSSR: s,
       hashId: c
-    } = $t(o), [d, E] = xe(!1), [g, h] = xe(!1), C = N(null), v = N(e.current), u = Z(1), M = Z(0), w = Z(!1), O = ae({
-      x: 1,
-      y: 1
-    }), [p, L] = Mt(D), K = Z({
-      wheelDirection: 0
-    }), P = Z(), A = ae({
-      originX: 0,
-      originY: 0,
-      deltaX: 0,
-      deltaY: 0
-    }), R = ae(/* @__PURE__ */ new Map()), z = y(() => new Map(Array.from(R).map(([n, {
-      url: m
-    }]) => [n, m]))), Q = y(() => z.value.get(v.value)), U = y(() => z.value.size), W = y(() => Array.from(z.value.keys())), b = y(() => W.value.indexOf(v.value)), k = y(() => U.value > 1), G = y(() => U.value >= 1);
-    H(d, (n) => {
-      n && (g.value = !0);
+    } = Wt(t), [h, y, d] = At(e.open, {
+      value: F(e, "open"),
+      onChange: (r) => {
+        var z;
+        (z = e.onOpenChange) == null || z.call(e, r), n("update:open", r);
+      }
+    }), [g, m] = ee(!1), [w, C] = ee(!0), a = L(), {
+      transform: i,
+      resetTransform: p,
+      updateTransform: f,
+      dispatchZoomChange: S
+    } = Et(a, F(e, "minScale"), F(e, "maxScale"), e.onTransform), {
+      isMoving: x,
+      onMouseDown: $,
+      onWheel: T
+    } = Rt(a, F(e, "movable"), d, F(e, "scaleStep"), i, f, S), {
+      isTouching: M,
+      onTouchStart: I,
+      onTouchMove: B,
+      onTouchEnd: k
+    } = Pt(a, F(e, "movable"), d, F(e, "minScale"), i, f, S);
+    ye(() => {
+      w.value || C(!0);
+    }, [w]);
+    const N = L(null), O = L(e.current), P = it(/* @__PURE__ */ new Map()), X = b(() => new Map(Array.from(P).map(([r, {
+      url: z
+    }]) => [r, z]))), W = b(() => X.value.get(O.value)), Y = b(() => X.value.size), j = b(() => Array.from(X.value.keys())), D = b(() => j.value.indexOf(O.value)), v = b(() => Y.value > 1), A = b(() => Y.value >= 1);
+    K(d, (r) => {
+      r && (g.value = !0);
     });
-    const s = (n) => {
-      v.value = n;
+    const E = (r) => {
+      O.value = r;
     };
-    H(() => e.current, (n) => {
-      Ee(n) && s(n);
+    K(() => e.current, (r) => {
+      Re(r) && E(r);
     });
-    function S(n, m) {
-      R.set(n, {
-        url: m,
+    function te(r, z) {
+      P.set(r, {
+        url: z,
         loading: !0,
         canPreview: !1
       });
     }
-    const x = () => {
-      h(!1), v.value = e.current;
-    }, se = () => {
-      u.value = 1, M.value = 0, O.x = 1, O.y = 1, L(D), t("close");
-    }, ce = (n) => {
-      w.value || C.value === (n == null ? void 0 : n.target) && x();
-    }, ue = () => {
-      const n = R.get(v.value);
-      n && (n.loading = !1, n.canPreview = !0);
-    }, q = (n) => {
-      const m = R.get(v.value);
-      m && (m.loading = !1, m.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(W.value[n]);
-      }
-    }, ee = () => {
-      if (b.value < U.value - 1 || e.infinite) {
-        const n = b.value + 1 > e.previewUrls.length - 1 ? 0 : b.value + 1;
-        s(W.value[n]);
-      }
-    }, _ = (n) => {
-      n ? u.value += 0.5 : u.value++, L(D);
-    }, X = (n) => {
-      u.value > 1 && (n ? u.value -= 0.5 : u.value--), L(D);
-    }, de = () => {
-      M.value += 90;
+    const ce = () => {
+      m(!1);
     }, We = () => {
-      M.value -= 90;
+      p("close"), n("close");
+    }, _e = (r) => {
+      x.value || N.value === (r == null ? void 0 : r.target) && ce();
     }, Ge = () => {
-      O.x = -O.x;
-    }, Xe = () => {
-      O.y = -O.y;
-    }, Me = [{
-      icon: $(l, e.icons, "zoomIn") || B.zoomIn,
-      onClick: () => _(),
-      type: "zoomIn"
-    }, {
-      icon: $(l, e.icons, "zoomOut") || B.zoomOut,
-      onClick: () => X(),
-      type: "zoomOut",
-      disabled: y(() => u.value === 1)
+      const r = P.get(O.value);
+      r && (r.loading = !1, r.canPreview = !0);
+    }, Ve = (r) => {
+      const z = P.get(O.value);
+      z && (z.loading = !1, z.canPreview = !1), r.target.alt = "加载失败";
+    }, Ce = () => {
+      if (D.value > 0 || e.infinite) {
+        const r = D.value - 1 < 0 ? e.urls.length - 1 : D.value - 1;
+        E(j.value[r]), p("prev");
+      }
+    }, xe = () => {
+      if (D.value < Y.value - 1 || e.infinite) {
+        const r = D.value + 1 > e.urls.length - 1 ? 0 : D.value + 1;
+        E(j.value[r]), p("next");
+      }
+    }, Ue = () => {
+      S(U + e.scaleStep, "zoomIn");
+    }, qe = () => {
+      S(U / (U + e.scaleStep), "zoomOut");
+    }, Ke = () => {
+      f({
+        rotate: i.value.rotate + 90
+      }, "rotateRight");
+    }, Qe = () => {
+      f({
+        rotate: i.value.rotate - 90
+      }, "rotateLeft");
+    }, Je = () => {
+      f({
+        flipX: !i.value.flipX
+      }, "flipX");
+    }, et = () => {
+      f({
+        flipY: !i.value.flipY
+      }, "flipY");
+    }, Ie = [{
+      icon: H(l, e.icons, "flipY") || _.flipY,
+      onClick: et,
+      type: "flipY"
     }, {
-      icon: $(l, e.icons, "rotateRight") || B.rotateRight,
-      onClick: de,
-      type: "rotateRight"
+      icon: H(l, e.icons, "flipX") || _.flipX,
+      onClick: Je,
+      type: "flipX"
     }, {
-      icon: $(l, e.icons, "rotateLeft") || B.rotateLeft,
-      onClick: We,
+      icon: H(l, e.icons, "rotateLeft") || _.rotateLeft,
+      onClick: Qe,
       type: "rotateLeft"
     }, {
-      icon: $(l, e.icons, "flipX") || B.flipX,
-      onClick: Ge,
-      type: "flipX"
+      icon: H(l, e.icons, "rotateRight") || _.rotateRight,
+      onClick: Ke,
+      type: "rotateRight"
     }, {
-      icon: $(l, e.icons, "flipY") || B.flipY,
-      onClick: Xe,
-      type: "flipY"
-    }], Oe = () => {
-      if (d.value && w.value && P.value) {
-        const n = P.value.offsetWidth * u.value, m = P.value.offsetHeight * u.value, {
-          left: T,
-          top: I
-        } = Dt(P.value), te = M.value % 180 !== 0;
-        w.value = !1;
-        const ne = Ut(te ? m : n, te ? n : m, T, I);
-        ne && L({
-          ...ne
-        });
-      }
-    }, Ze = (n) => {
-      n.button === 0 && (n.preventDefault(), n.stopPropagation(), A.deltaX = n.pageX - p.x, A.deltaY = n.pageY - p.y, A.originX = p.x, A.originY = p.y, w.value = !0);
-    }, Ae = (n) => {
-      d.value && w.value && L({
-        x: n.pageX - A.deltaX,
-        y: n.pageY - A.deltaY
-      });
-    }, Ve = (n) => {
-      if (!d.value) return;
-      n.preventDefault();
-      const m = n.deltaY;
-      K.value = {
-        wheelDirection: m
-      };
-    }, 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), (p.x !== D.x || p.y !== D.y) && L(D));
+      icon: H(l, e.icons, "zoomOut") || _.zoomOut,
+      onClick: () => qe(),
+      type: "zoomOut",
+      disabled: b(() => i.value.scale <= e.minScale)
+    }, {
+      icon: H(l, e.icons, "zoomIn") || _.zoomIn,
+      onClick: () => Ue(),
+      type: "zoomIn",
+      disabled: b(() => i.value.scale === e.maxScale)
+    }], tt = (r) => {
+      d.value && (i.value.scale !== 1 ? f({
+        x: 0,
+        y: 0,
+        scale: 1
+      }, "doubleClick") : S(U + e.scaleStep, "doubleClick", r.clientX, r.clientY));
+    }, nt = (r) => {
+      r.keyCode === ve.ESC && ce(), !(!d.value || !v.value) && (r.keyCode === ve.LEFT ? Ce() : r.keyCode === ve.RIGHT && xe());
     };
-    let fe = () => {
+    let de = () => {
     };
-    return De(() => {
-      H(() => e.previewUrls, (n) => {
-        _e(n) && n.forEach((m, T) => {
-          S(T, m);
+    return Te(() => {
+      K(() => e.urls, (r) => {
+        ft(r) && r.forEach((z, ne) => {
+          te(ne, z);
         });
       }, {
         flush: "post",
         immediate: !0
-      }), H([() => d.value, w], () => {
-        fe();
-        let n, m;
-        const T = F(window, "mouseup", Oe, !1), I = F(window, "mousemove", Ae, !1), te = F(window, "wheel", Ve, {
-          passive: !1
-        }), ne = F(window, "keydown", Qe, !1);
-        try {
-          window.top !== window.self && (n = F(window.top, "mouseup", Oe, !1), m = F(window.top, "mousemove", Ae, !1));
-        } catch (qe) {
-          Nt(!1, `[vc-image] ${qe}`);
-        }
-        fe = () => {
-          T.remove(), I.remove(), te.remove(), ne.remove(), n && n.remove(), m && m.remove();
+      }), K([() => d.value, () => x.value], () => {
+        de();
+        const r = V(window, "keydown", nt, !1);
+        de = () => {
+          r.remove();
         };
       }, {
         flush: "post",
         immediate: !0
-      }), H([K], () => {
-        const {
-          wheelDirection: n
-        } = K.value;
-        n > 0 ? X(!0) : n < 0 && _(!0);
       });
-    }), et(() => {
-      fe();
-    }), i({
-      setOpen: E
+    }), at(() => {
+      de();
+    }), o({
+      setOpen: (r) => {
+        y(r), O.value = e.current;
+      }
     }), () => {
-      const n = Ie(`${o}-fade`), m = Ie(`${o}-zoom`), T = {};
-      for (const I in e.icons)
-        T[I] = $(l, e.icons, I);
-      return f(r(Se, null, [r(ze, {
+      const r = we(`${t}-mask-zoom`), z = we(`${t}-zoom`), ne = {};
+      for (const R in e.icons)
+        ne[R] = H(l, e.icons, R);
+      return s(u(re, null, [u(Ee, {
         to: e.getContainer || "body"
       }, {
-        default: () => [d.value && r(Se, null, [r("div", {
-          class: `${o}-root ${c.value}`
-        }, [r(ge, n, {
-          default: () => [we(r("div", {
-            class: `${o}-mask ${c.value}`
+        default: () => [d.value && u(re, null, [u("div", {
+          class: `${t}-root ${c.value}`
+        }, [u(ge, r, {
+          default: () => [me(u("div", {
+            class: `${t}-mask ${c.value}`
           }, null), [[he, d.value && g.value]])]
-        }), r("div", {
-          ref: C,
+        }), u("div", {
+          ref: N,
           tabindex: -1,
-          class: [`${o}-wrap`, `${c.value}`],
-          onClick: (I) => e.onHideOnClickModal && ce(I)
-        }, [r(ge, pe(m, {
-          onAfterLeave: () => se()
+          class: [`${t}-wrap`, `${c.value}`, x.value && `${t}-moving`],
+          onClick: (R) => e.onHideOnClickModal && _e(R)
+        }, [u(ge, ae(z, {
+          onAfterLeave: () => We()
         }), {
-          default: () => [we(r("div", {
+          default: () => [me(u("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(${p.x}px, ${p.y}px, 0)`
-            }
-          }, [r("img", {
-            onMousedown: Ze,
-            onDblclick: ke,
-            ref: P,
-            class: `${o}-img ${c.value}`,
-            src: Q.value,
-            onLoad: () => ue(),
-            onError: (I) => q(I),
+            class: `${t} ${c.value}`
+          }, [u("div", {
+            class: `${t}-content ${c.value}`
+          }, [u("div", {
+            class: `${t}-body ${c.value}`
+          }, [u("div", {
+            class: `${t}-img-wrapper ${c.value}`
+          }, [u("img", {
+            ref: a,
+            class: `${t}-img ${c.value}`,
+            src: W.value,
+            onLoad: () => Ge(),
+            onError: (R) => Ve(R),
             style: {
-              transform: `scale3d(${O.x * u.value}, ${O.y * u.value}, 1) rotate(${M.value}deg)`
-            }
+              transform: `translate3d(${i.value.x}px, ${i.value.y}px, 0) scale3d(${i.value.flipX ? "-" : ""}${i.value.scale}, ${i.value.flipY ? "-" : ""}${i.value.scale}, 1) rotate(${i.value.rotate}deg)`,
+              transitionDuration: !w.value || M.value ? "0s" : void 0
+            },
+            onWheel: T,
+            onMousedown: $,
+            onDblclick: tt,
+            onTouchstart: I,
+            onTouchmove: B,
+            onTouchend: k,
+            onTouchcancel: k
           }, null)])])])]), [[he, d.value && g.value]])]
         })])])])]
-      }), d.value && g.value && r(Ot, {
+      }), d.value && g.value && u(Xt, {
         open: d.value && g.value,
         hashId: c.value,
-        count: e.previewUrls.length,
-        current: v.value,
+        count: e.urls.length,
+        current: O.value,
         zIndex: e.zIndex + 1,
         getContainer: e.getContainer,
-        prefixCls: o,
-        icons: gt(T, Me.map(({
-          type: I
-        }) => I)),
-        tools: Me,
+        prefixCls: t,
+        icons: Pe(ne, Ie.map(({
+          type: R
+        }) => R)),
+        tools: Ie,
         infinite: e.infinite,
-        countRender: ct(l, e, "countRenders"),
-        showSwitch: k.value,
-        showProgress: G.value,
-        onClose: x,
-        onActive: (I) => I > 0 ? ee() : J()
+        countRender: vt(l, e, "countRenders"),
+        showSwitch: v.value,
+        showProgress: A.value,
+        onClose: ce,
+        onActive: (R) => R > 0 ? xe() : Ce()
       }, null)]));
     };
   }
-}), me = {
+}), ie = {
   width: "100%",
   height: "100%"
-}, Ft = () => ({
+}, Gt = () => ({
   position: "absolute",
   inset: 0,
   display: "flex",
@@ -1334,21 +1035,29 @@ const D = {
   justifyContent: "center",
   cursor: "pointer",
   opacity: 0
-}), Bt = (e) => ({
+}), Vt = (e) => ({
+  position: e || "absolute",
+  inset: 0
+}), Ut = (e) => ({
   [e.componentCls]: {
     display: "inline-block",
     position: "relative",
     overflow: "hidden",
     "&-inner": {
-      ...me,
+      ...ie,
       verticalAlign: "top",
       opacity: 1,
       [`&${e.componentCls}-inner-preview`]: {
-        userSelect: "none"
+        userSelect: "none",
+        cursor: "pointer"
       }
     },
+    "&-wrapper": {
+      ...ie,
+      ...Vt()
+    },
     "&-placeholder": {
-      ...me,
+      ...ie,
       backgroundColor: e.colorBgContainerDisabled,
       backgroundImage: "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=')",
       backgroundRepeat: "no-repeat",
@@ -1356,161 +1065,136 @@ const D = {
       backgroundSize: "30%"
     },
     "&-error": {
-      ...me,
+      ...ie,
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
       color: e.colorText,
       backgroundColor: e.colorBgContainerDisabled
     },
-    "&-preview": Ft()
+    "&-preview": Gt()
   }
-}), Ht = (e) => e && e.nodeType === Node.ELEMENT_NODE;
-let $e = "";
-const jt = [...Ke, "fallback", "placeholder"], le = /* @__PURE__ */ ye({
-  props: je,
+}), qt = (e) => typeof Element > "u" ? !1 : e instanceof Element;
+let Ae = "";
+const Kt = [...ke, "fallback", "placeholder"], le = /* @__PURE__ */ pe({
+  props: Ze,
   name: "GImage",
-  emits: ["error", "click", "load"],
+  inheritAttrs: !1,
+  emits: {
+    click: () => !0,
+    load: (e) => !0,
+    error: (e) => !0
+  },
   slots: Object,
   setup(e, {
-    slots: t,
-    emit: i,
+    slots: n,
+    emit: o,
     attrs: l
   }) {
-    const o = Ue({
+    const t = q && "loading" in HTMLImageElement.prototype, s = De({
       suffixCls: "image"
     }), {
-      wrapSSR: f,
-      hashId: c
-    } = st("Image", [Bt], o), d = N(), E = N(""), g = N(!1), h = N(!0), C = N(!1), v = N(null), u = N();
-    let M, w;
-    const O = y(() => !ie && e.fit ? {
-      "object-fit": e.fit
-    } : {}), p = y(() => {
+      wrapSSR: c,
+      hashId: h
+    } = dt("Image", [Ut], s), y = L(), d = L(), g = L(!1), m = L(!0), w = L(!1), C = L(), a = L();
+    let i, p;
+    const f = b(() => e.loading === "eager" ? !1 : !t && e.loading === "lazy" || e.lazy), S = b(() => q && e.fit ? {
+      objectFit: e.fit
+    } : {}), x = b(() => typeof e.preview == "object" ? e.preview : {}), $ = b(() => !!e.preview), T = b(() => {
       const {
-        previewUrls: s
-      } = e.preview;
-      return _e(s) && s.length > 0 || e.showPreview;
-    }), L = y(() => {
-      const {
-        previewUrls: s = [],
-        current: S = 0
-      } = e.preview;
-      if (Ee(S)) return s.length >= S ? S : 0;
-      const x = s.indexOf(e.src);
-      return x >= 0 ? x : 0;
-    }), K = (s) => {
-      E.value = e.src, h.value = !1, g.value = !1, i("load", s);
-    }, P = (s) => {
-      h.value = !1, g.value = !0, i("error", s);
-    }, A = () => {
-      if (ie) return;
-      h.value = !0, g.value = !1;
-      const s = new Image();
-      s.onload = (S) => K(S), s.onerror = P, Object.keys(l || {}).forEach((S) => {
-        if (S.toLowerCase() === "onload") return;
-        const x = (l || {})[S];
-        s.setAttribute(S, x);
-      }), s.src = e.src;
-    }, R = mt(Q, 200), z = () => {
-      ie || !u.value || !R || (M(), u.value = void 0);
+        urls: v = [],
+        current: A = 0
+      } = x.value;
+      if (Re(A)) return v.length >= A ? A : 0;
+      const E = v.indexOf(e.src);
+      return E >= 0 ? E : 0;
+    }), M = b(() => be(e.width)), I = b(() => be(e.height)), B = () => {
+      q && (m.value = !0, g.value = !1, d.value = e.src);
     };
-    function Q() {
-      ut(v.value, u.value) && (A(), z());
+    function k(v) {
+      m.value = !1, g.value = !1, o("load", v);
+    }
+    function N(v) {
+      m.value = !1, g.value = !0, o("error", v);
     }
-    const U = async () => {
-      if (ie) return;
-      await ot();
+    function O() {
+      mt(C.value, a.value) && (B(), W());
+    }
+    const P = pt(O, 200, !0);
+    async function X() {
+      if (!q) return;
+      await st();
       const {
-        scrollContainer: s
+        scrollContainer: v
       } = e;
-      Ht(s) ? u.value = s : ft(s) && s !== "" ? u.value = document.querySelector(s) ?? void 0 : v.value && (u.value = vt(v.value)), u.value && (M = Le(u, "scroll", R), setTimeout(() => Q(), 200));
-    }, W = (s) => {
-      if (s.ctrlKey) {
-        if (s.deltaY < 0)
-          return s.preventDefault(), !1;
-        if (s.deltaY > 0)
-          return s.preventDefault(), !1;
+      qt(v) ? a.value = v : ht(v) && v !== "" ? a.value = document.querySelector(v) ?? void 0 : C.value && (a.value = wt(C.value)), a.value && (i = $e(a, "scroll", P), setTimeout(() => O(), 100));
+    }
+    function W() {
+      !q || !a.value || !P || (i == null || i(), a.value = void 0);
+    }
+    function Y(v) {
+      if (v.ctrlKey) {
+        if (v.deltaY < 0)
+          return v.preventDefault(), !1;
+        if (v.deltaY > 0)
+          return v.preventDefault(), !1;
       }
-    }, b = () => {
-      p.value && (w = Le("wheel", W, {
+    }
+    const j = () => {
+      o("click"), !(m.value || g.value) && $.value && (p = $e("wheel", Y, {
         passive: !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;
+      }), Ae = document.body.style.overflow, document.body.style.overflow = "hidden", w.value = !0);
+    }, D = () => {
+      p == null || p(), document.body.style.overflow = Ae, w.value = !1;
     };
-    H(() => e.src, () => {
-      e.lazy ? (h.value = !0, g.value = !1, z(), U()) : A();
-    }), tt(() => {
-      var s, S;
-      p.value && C.value ? (s = d.value) == null || s.setOpen(!0) : (S = d.value) == null || S.setOpen(!1);
-    });
-    const G = (s) => Ee(s) ? s + "px" : s;
-    return it(() => {
-      e.lazy ? U() : A();
+    return K(() => e.src, () => {
+      f.value ? (m.value = !0, g.value = !1, W(), X()) : B();
+    }), lt(() => {
+      var v, A;
+      $.value && w.value ? (v = y.value) == null || v.setOpen(!0) : (A = y.value) == null || A.setOpen(!1);
+    }), Te(() => {
+      f.value ? X() : B();
     }), () => {
-      var X;
-      const {
-        crossorigin: s,
-        decoding: S,
-        alt: x,
-        sizes: se,
-        srcset: ce,
-        usemap: ue,
-        class: q,
-        style: J = {}
-      } = l, ee = {
-        crossorigin: s,
-        decoding: S,
-        alt: x,
-        sizes: se,
-        srcset: ce,
-        usemap: ue,
-        style: {
-          ...O.value,
-          height: e.height ? G(e.height) : void 0
-        }
-      }, _ = dt(jt, t, e, {
+      const v = Ct(Object.entries(l).filter(([te]) => /^(?:data-|on[A-Z])/i.test(te) || ["id", "style"].includes(te))), A = Pe(l, Object.keys(v)), E = gt(Kt, n, e, {
         render: !0
       });
-      return f(r("div", {
+      return c(u("div", ae({
         class: {
-          [`${c.value}`]: !0,
-          [`${o}`]: !0,
-          [`${q}`]: !!q
-        },
-        ref: (de) => v.value = de,
-        style: {
-          width: e.width ? G(e.width) : void 0,
-          height: e.height ? G(e.height) : void 0,
-          display: e.lazy ? "block" : void 0,
-          ...J
+          [`${h.value}`]: !0,
+          [`${s}`]: !0,
+          [`${l.class}`]: !!l.class
         },
-        onClick: () => {
-          i("click");
-        }
-      }, [h.value ? _.placeholder || r("div", {
-        class: `${o}-placeholder ${c.value}`
-      }, null) : g.value ? _.fallback || r("div", {
-        class: `${o}-error ${c.value}`
-      }, [nt("加载失败")]) : E.value && r("img", pe(ee, {
+        ref: C
+      }, v), [g.value ? E.fallback || u("div", {
+        "aria-hidden": "true",
+        class: `${s}-error ${h.value}`
+      }, [rt("加载失败")]) : u(re, null, [d.value !== void 0 && u("img", ae(A, {
+        src: d.value,
+        loading: e.loading,
+        style: S.value,
         class: {
-          [`${c.value}`]: !0,
-          [`${e.imageClassName}`]: !!e.imageClassName,
-          [`${o}-inner`]: !0,
-          [`${o}-inner-preview`]: p.value
+          [`${h.value}`]: !0,
+          [`${s}-placeholder`]: m.value,
+          [`${s}-inner`]: !0,
+          [`${s}-inner-preview`]: $.value
         },
-        alt: e.alt,
-        src: E.value
-      }), null), p.value && r("div", {
-        class: `${o}-preview ${c.value}`,
-        onClick: () => b()
-      }, null), p.value && r(_t, pe({
-        ref: d
-      }, e.preview, wt(_, Ke), {
-        previewUrls: ((X = e.preview) == null ? void 0 : X.previewUrls) || [e.src],
-        current: L.value,
-        onClose: () => k()
+        crossorigin: e.crossorigin,
+        width: M.value,
+        height: I.value,
+        onClick: j,
+        onLoad: k,
+        onError: N
+      }), null), m.value && u("div", {
+        class: Q(`${s}-wrapper`, h.value)
+      }, [E.placeholder || u("div", {
+        "aria-hidden": "true",
+        class: `${s}-placeholder ${h.value}`
+      }, null)])]), $.value && u(_t, ae({
+        ref: y
+      }, x.value, xt(E, ke), {
+        urls: x.value.urls || [e.src],
+        current: T.value,
+        onClose: () => D()
       }), null)]));
     };
   }
@@ -1520,7 +1204,7 @@ le.install = (e) => (e.component(le.name, le), e);
 export {
   le as GImage,
   _t as GImagePreview,
-  V as baseProps,
+  J as baseProps,
   le as default,
-  je as imageProps
+  Ze as imageProps
 };