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

package/dist/image.js

@@ -1,12 +1,12 @@
-import Z from "ant-design-vue/es/_util/vue-types";
-import { ref as M, reactive as re, onMounted as De, defineComponent as Me, createVNode as r, Teleport as Ue, Transition as Se, withDirectives as he, Fragment as Ie, cloneVNode as Je, vShow as pe, shallowRef as V, computed as y, watch as j, onUnmounted as et, mergeProps as ze, watchEffect as tt, createTextVNode as nt, nextTick as ot } from "vue";
+import { 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 { CloseOutlined as it, LeftOutlined as at, RightOutlined as lt, RotateLeftOutlined as rt, RotateRightOutlined as st, ZoomInOutlined as ct, ZoomOutOutlined as ut, SwapOutlined as xe } from "@ant-design/icons-vue";
-import { classNames as ae, getPrefixCls as _e, isNumber as Ee, getSlotVNode as L, isArray as Fe, getSlot as dt, isServer as le, isInContainer as ft, isString as vt, getScrollContainer as gt } from "@gx-design-vue/pro-utils";
-import { useState as Le, onMountedOrActivated as mt } from "@gx-design-vue/pro-hooks";
-import { Keyframe as ue, useStyle as wt, mergeToken as St, unit as ht, getTransitionProps as Ce, useProStyle as It } from "@gx-design-vue/pro-provider";
-import { TinyColor as K } from "@ctrl/tinycolor";
-import { useThrottleFn as pt, useEventListener as Te } from "@vueuse/core";
-const U = {
+import { classNames as oe, getPrefixCls as Ue, isNumber as Ie, getSlotVNode as $, isArray as _e, getSlot as dt, isServer as ie, isInContainer as ft, getSlotsProps as vt, isString as mt, getScrollContainer as gt } from "@gx-design-vue/pro-utils";
+import { useState as Le, onMountedOrActivated as wt } from "@gx-design-vue/pro-hooks";
+import { Keyframe as re, useStyle as St, mergeToken as ht, unit as pt, getTransitionProps as Ee, useProStyle as It } from "@gx-design-vue/pro-provider";
+import { TinyColor as Y } from "@ctrl/tinycolor";
+import { omit as Et, pick as Ct } from "lodash-es";
+import { useThrottleFn as yt, useEventListener as be } from "@vueuse/core";
+const V = {
   infinite: {
     type: Boolean,
     default: !0
@@ -22,12 +22,16 @@ const U = {
   getContainer: {
     type: String
   }
-}, se = {
-  previewTeleported: {
-    type: Boolean,
-    default: !0
+}, Fe = {
+  preview: {
+    type: Object,
+    default: () => ({
+      current: 0,
+      infinite: !0,
+      onHideOnClickModal: !0
+    })
   },
-  hideOnClickModal: {
+  showPreview: {
     type: Boolean,
     default: !0
   },
@@ -43,7 +47,7 @@ const U = {
     type: String,
     default: "contain"
   },
-  lazy: Z.bool,
+  lazy: Boolean,
   scrollContainer: {
     type: [String, Object]
   },
@@ -66,57 +70,47 @@ const U = {
   onClick: {
     type: Function
   },
+  imageClassName: String,
+  imageStyle: Object,
+  width: Number,
+  height: Number,
+  zIndex: V.zIndex,
+  getContainer: V.getContainer
+}, j = {
   previewUrls: {
     type: Array,
     default: () => []
   },
-  imageClassName: Z.string,
-  imageStyle: Z.style,
-  width: Z.number,
-  height: Z.number,
-  zIndex: U.zIndex,
-  infinite: U.infinite,
-  getContainer: U.getContainer,
-  current: {
-    ...U.current,
-    default: () => {
-    }
-  }
-}, Y = {
-  previewUrls: {
-    type: Array,
-    default: () => []
-  },
-  teleported: se.previewTeleported,
-  zIndex: U.zIndex,
-  current: U.current,
-  infinite: U.infinite,
-  getContainer: se.getContainer,
-  onHideOnClickModal: se.hideOnClickModal,
+  disabled: Boolean,
+  zIndex: V.zIndex,
+  current: V.current,
+  infinite: V.infinite,
+  getContainer: Fe.getContainer,
+  onHideOnClickModal: Boolean,
   countRender: [Function, Array, Object],
   icons: {
     type: Object,
     default: () => ({})
   }
 };
-function Et(e, t) {
+function Nt(e, t) {
   process.env.NODE_ENV !== "production" && !e && console !== void 0 && console.error(`Warning: ${t}`);
 }
-const Ct = new ue("viewFadeIn", {
+const Mt = new re("viewFadeIn", {
   "0%": {
     opacity: 0
   },
   "100%": {
     opacity: 1
   }
-}), yt = new ue("viewFadeOut", {
+}), Ot = new re("viewFadeOut", {
   "0%": {
     opacity: 1
   },
   "100%": {
     opacity: 0
   }
-}), Mt = new ue("viewZoomBadgeIn", {
+}), At = new re("viewZoomBadgeIn", {
   "0%": {
     transform: "scale(0.2)",
     opacity: 0
@@ -125,7 +119,7 @@ const Ct = new ue("viewFadeIn", {
     transform: "scale(1)",
     opacity: 1
   }
-}), Nt = new ue("viewZoomBadgeOut", {
+}), xt = new re("viewZoomBadgeOut", {
   "0%": {
     transform: "scale(1)"
   },
@@ -133,11 +127,11 @@ const Ct = new ue("viewFadeIn", {
     transform: "scale(0.2)",
     opacity: 0
   }
-}), be = (e) => ({
+}), Te = (e) => ({
   position: e || "absolute",
   inset: 0
 });
-function me(e) {
+function ve(e) {
   return {
     position: e,
     top: 0,
@@ -146,8 +140,8 @@ function me(e) {
     insetInlineStart: 0
   };
 }
-const Ot = (e) => {
-  const { previewCls: t, modalMaskBg: i, paddingSM: l, marginXL: o, margin: f, paddingLG: c, previewOperationColorDisabled: d, previewOperationHoverColor: p, motionDurationSlow: m, iconCls: h, colorTextLightSolid: C } = e, v = new K(i).setAlpha(0.1), u = v.clone().setAlpha(0.2);
+const Lt = (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);
   return {
     [`${t}-footer`]: {
       position: "fixed",
@@ -180,7 +174,7 @@ const Ot = (e) => {
       outline: 0,
       border: 0,
       cursor: "pointer",
-      transition: `all ${m}`,
+      transition: `all ${g}`,
       "&:hover": {
         backgroundColor: u.toRgbString()
       },
@@ -191,17 +185,17 @@ const Ot = (e) => {
     [`${t}-operations`]: {
       display: "flex",
       alignItems: "center",
-      padding: `0 ${ht(c)}`,
+      padding: `0 ${pt(c)}`,
       backgroundColor: v.toRgbString(),
       borderRadius: 100,
       "&-operation": {
         marginInlineStart: l,
         padding: l,
         cursor: "pointer",
-        transition: `all ${m}`,
+        transition: `all ${g}`,
         userSelect: "none",
         [`&:not(${t}-operations-operation-disabled):hover > ${h}`]: {
-          color: p
+          color: E
         },
         "&-disabled": {
           color: d,
@@ -216,8 +210,8 @@ const Ot = (e) => {
       }
     }
   };
-}, At = (e) => {
-  const { modalMaskBg: t, iconCls: i, previewOperationColorDisabled: l, previewCls: o, zIndexPopup: f, motionDurationSlow: c } = e, d = new K(t).setAlpha(0.1), p = d.clone().setAlpha(0.2);
+}, bt = (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);
   return {
     [`${o}-switch-left, ${o}-switch-right`]: {
       position: "fixed",
@@ -237,7 +231,7 @@ const Ot = (e) => {
       transition: `all ${c}`,
       userSelect: "none",
       "&:hover": {
-        background: p.toRgbString()
+        background: E.toRgbString()
       },
       "&-disabled": {
         "&, &:hover": {
@@ -260,33 +254,33 @@ const Ot = (e) => {
       insetInlineEnd: e.marginSM
     }
   };
-}, xt = (e) => ({
+}, Tt = (e) => ({
   [e.componentCls]: {
     height: "100%",
     textAlign: "center",
     pointerEvents: "none",
     "&-root": {
-      ...me("fixed"),
+      ...ve("fixed"),
       zIndex: e.zIndexPopup,
       overflow: "auto",
       outline: 0,
       WebkitOverflowScrolling: "touch"
     },
     "&-wrap": {
-      ...me("fixed"),
+      ...ve("fixed"),
       zIndex: e.zIndexPopup,
       overflow: "auto",
       outline: 0,
       WebkitOverflowScrolling: "touch"
     },
     "&-mask": {
-      ...me("fixed"),
+      ...ve("fixed"),
       zIndex: e.zIndexPopupBase,
       height: "100%",
       backgroundColor: e.colorBgMask
     },
     "&-body": {
-      ...be(),
+      ...Te(),
       overflow: "hidden"
     },
     "&-img": {
@@ -299,7 +293,7 @@ const Ot = (e) => {
       userSelect: "none",
       pointerEvents: "auto",
       "&-wrapper": {
-        ...be(),
+        ...Te(),
         display: "flex",
         justifyContent: "center",
         alignItems: "center",
@@ -314,17 +308,17 @@ const Ot = (e) => {
       }
     },
     "&-fade-appear, &-fade-enter": {
-      animationName: Ct,
+      animationName: Mt,
       animationDuration: e.motionDurationSlow,
       animationTimingFunction: "linear"
     },
     "&-fade-leave": {
-      animationName: yt,
+      animationName: Ot,
       animationDuration: e.motionDurationSlow,
       animationTimingFunction: "linear"
     },
     "&-zoom-appear, &-zoom-enter": {
-      animationName: Mt,
+      animationName: At,
       opacity: 0,
       animationTimingFunction: e.motionEaseOutCirc,
       animationFillMode: "both",
@@ -336,7 +330,7 @@ const Ot = (e) => {
       animationPlayState: "running"
     },
     "&-zoom-leave": {
-      animationName: Nt,
+      animationName: xt,
       animationDuration: e.motionDurationSlow,
       animationTimingFunction: e.motionEaseOutBack,
       animationFillMode: "both"
@@ -354,34 +348,34 @@ const Ot = (e) => {
     zIndex: e.zIndexPopup + 1,
     width: "100%"
   },
-  "&": [Ot(e), At(e)]
+  "&": [Lt(e), bt(e)]
 });
-function Lt(e) {
-  return wt("ImageViewer", (t) => {
-    const i = St(t, {
+function Pt(e) {
+  return St("ImageViewer", (t) => {
+    const i = ht(t, {
       zIndexPopup: t.zIndexPopupBase + 80,
-      previewOperationColorDisabled: new K(t.colorTextLightSolid).setAlpha(0.25).toRgbString(),
-      previewOperationHoverColor: new K(t.colorTextLightSolid).setAlpha(0.85).toRgbString(),
-      modalMaskBg: new K("#000").setAlpha(0.45).toRgbString(),
+      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(),
       // FIXME: Shared Token
-      previewOperationColor: new K(t.colorTextLightSolid).toRgbString(),
+      previewOperationColor: new Y(t.colorTextLightSolid).toRgbString(),
       previewOperationSize: t.fontSizeIcon * 1.5,
       // FIXME: fontSizeIconLG
       imagePreviewSwitchSize: t.controlHeightLG,
       iconCls: "anticon",
       previewCls: t.componentCls
     });
-    return [xt(i)];
+    return [Tt(i)];
   }, e);
 }
-function Tt(e) {
+function Rt(e) {
   const t = e.getBoundingClientRect(), i = document.documentElement;
   return {
     left: t.left + (window.scrollX || i.scrollLeft) - (i.clientLeft || document.body.clientLeft || 0),
     top: t.top + (window.scrollY || i.scrollTop) - (i.clientTop || document.body.clientTop || 0)
   };
 }
-function bt() {
+function $t() {
   const e = document.documentElement.clientWidth, t = window.innerHeight || document.documentElement.clientHeight;
   return {
     width: e,
@@ -405,8 +399,8 @@ function Pe(e, t, i, l) {
     };
   return {};
 }
-function Pt(e, t, i, l) {
-  const { width: o, height: f } = bt();
+function Dt(e, t, i, l) {
+  const { width: o, height: f } = $t();
   let c = null;
   return e <= o && t <= f ? c = {
     x: 0,
@@ -426,7 +420,7 @@ try {
   window.addEventListener("testPassive", null, e), window.removeEventListener("testPassive", null, e);
 } catch {
 }
-function B(e, t, i, l) {
+function F(e, t, i, l) {
   if (e && e.addEventListener) {
     let o = l;
     o === void 0 && Be && (t === "touchstart" || t === "touchmove" || t === "wheel") && (o = { passive: !1 }), e.addEventListener(t, i, o);
@@ -958,7 +952,7 @@ const Ne = /* @__PURE__ */ new Map();
 function Ye(e) {
   Ne.delete(e);
 }
-function ye(e, t = 1) {
+function Ce(e, t = 1) {
   Re += 1;
   const i = Re;
   function l(o) {
@@ -973,13 +967,13 @@ function ye(e, t = 1) {
   }
   return l(t), i;
 }
-ye.cancel = (e) => {
+Ce.cancel = (e) => {
   const t = Ne.get(e);
   return Ye(t), je(t);
 };
-function Rt(e) {
-  const t = M(null), i = re({ ...e }), l = M([]), o = (f) => {
-    t.value === null && (l.value = [], t.value = ye(() => {
+function zt(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 };
@@ -987,10 +981,10 @@ function Rt(e) {
     })), l.value.push(f);
   };
   return De(() => {
-    t.value && ye.cancel(t.value);
+    t.value && Ce.cancel(t.value);
   }), [i, o];
 }
-const $t = /* @__PURE__ */ Me({
+const Ut = /* @__PURE__ */ ye({
   name: "Operations",
   inheritAttrs: !1,
   props: {
@@ -1007,11 +1001,11 @@ const $t = /* @__PURE__ */ Me({
     showProgress: Boolean,
     prefixCls: String,
     hashId: String,
-    zIndex: Y.zIndex,
-    icons: Y.icons,
-    infinite: Y.infinite,
-    getContainer: Y.getContainer,
-    countRender: Y.countRender,
+    zIndex: j.zIndex,
+    icons: j.icons,
+    infinite: j.infinite,
+    getContainer: j.getContainer,
+    countRender: j.countRender,
     tools: Array,
     onClose: Function,
     onActive: Function
@@ -1026,28 +1020,28 @@ const $t = /* @__PURE__ */ Me({
         prefixCls: i,
         hashId: l,
         tools: o
-      } = e, f = Ce(`${e.prefixCls}-fade`), c = `${i}-operations-operation`, d = `${i}-operations-icon`;
-      return r(Ue, {
+      } = e, f = Ee(`${e.prefixCls}-fade`), c = `${i}-operations-operation`, d = `${i}-operations-icon`;
+      return r(ze, {
         to: e.getContainer || "body"
       }, {
-        default: () => [r(Se, f, {
+        default: () => [r(ge, f, {
           default: () => {
-            var p, m, h, C;
-            return [he(r("div", {
-              class: ae(`${i}-operations-wrapper`, l),
+            var E, g, h, C;
+            return [we(r("div", {
+              class: oe(`${i}-operations-wrapper`, l),
               style: {
                 zIndex: e.zIndex
               }
-            }, [((p = e.icons) == null ? void 0 : p.close) === null ? null : r("button", {
+            }, [((E = e.icons) == null ? void 0 : E.close) === null ? null : r("button", {
               class: `${i}-close ${l}`,
               onClick: e.onClose
-            }, [((m = e.icons) == null ? void 0 : m.close) || r(it, null, null)]), e.showSwitch && r(Ie, null, [r("div", {
-              class: ae(`${i}-switch-left ${l}`, {
+            }, [((g = e.icons) == null ? void 0 : g.close) || r(it, 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
               }),
               onClick: (v) => t(v, -1)
             }, [((h = e.icons) == null ? void 0 : h.left) || r(at, null, null)]), r("div", {
-              className: ae(`${i}-switch-right ${l}`, {
+              className: oe(`${i}-switch-right ${l}`, {
                 [`${i}-switch-right-disabled`]: e.infinite ? !1 : e.current === e.count - 1
               }),
               onClick: (v) => t(v, 1)
@@ -1060,17 +1054,17 @@ const $t = /* @__PURE__ */ Me({
             }, [o == null ? void 0 : o.map(({
               icon: v,
               onClick: u,
-              type: N,
+              type: M,
               disabled: w
             }) => r("div", {
-              class: ae(c, {
+              class: oe(c, {
                 [`${e.prefixCls}-operations-operation-disabled`]: w && (w == null ? void 0 : w.value)
               }),
               onClick: u,
-              key: N
+              key: M
             }, [Je(v, {
               class: d
-            })]))])])]), [[pe, e.open]])];
+            })]))])])]), [[he, e.open]])];
           }
         })]
       });
@@ -1079,7 +1073,7 @@ const $t = /* @__PURE__ */ Me({
 }), D = {
   x: 0,
   y: 0
-}, H = {
+}, B = {
   rotateLeft: r(rt, null, null),
   rotateRight: r(st, null, null),
   zoomIn: r(ct, null, null),
@@ -1088,200 +1082,200 @@ const $t = /* @__PURE__ */ Me({
   flipY: r(xe, {
     rotate: 90
   }, null)
-}, Dt = /* @__PURE__ */ Me({
+}, Ke = ["close", "left", "right", "rotateRight", "rotateRight", "zoomOut", "flipX", "flipY", "rotateLeft"], _t = /* @__PURE__ */ ye({
   name: "GImageViewer",
-  props: Y,
+  props: j,
   inheritAttrs: !1,
   emits: ["close", "switch", "afterClose"],
+  emit: Object,
   setup: (e, {
     emit: t,
     expose: i,
     slots: l
   }) => {
-    const o = _e({
+    const o = Ue({
       suffixCls: "image-view"
     }), {
       wrapSSR: f,
       hashId: c
-    } = Lt(o), [d, p] = Le(!1), [m, h] = Le(!1), C = M(null), v = M(e.current), u = V(1), N = V(0), w = V(!1), O = re({
+    } = Pt(o), [d, E] = Le(!1), [g, h] = Le(!1), C = N(null), v = N(e.current), u = Z(1), M = Z(0), w = Z(!1), O = ae({
       x: 1,
       y: 1
-    }), [I, T] = Rt(D), W = V({
+    }), [p, L] = zt(D), K = Z({
       wheelDirection: 0
-    }), R = V(), A = re({
+    }), P = Z(), A = ae({
       originX: 0,
       originY: 0,
       deltaX: 0,
       deltaY: 0
-    }), $ = re(/* @__PURE__ */ new Map()), z = y(() => new Map(Array.from($).map(([n, {
-      url: g
-    }]) => [n, g]))), Q = y(() => z.value.get(v.value)), _ = y(() => z.value.size), G = y(() => Array.from(z.value.keys())), b = y(() => G.value.indexOf(v.value)), k = y(() => _.value > 1), X = y(() => _.value >= 1);
-    j(d, (n) => {
-      n && (m.value = !0);
+    }), 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);
     });
     const s = (n) => {
       v.value = n;
     };
-    j(() => e.current, (n) => {
-      Ee(n) && s(n);
+    H(() => e.current, (n) => {
+      Ie(n) && s(n);
     });
-    function S(n, g) {
-      $.set(n, {
-        url: g,
+    function S(n, m) {
+      R.set(n, {
+        url: m,
         loading: !0,
         canPreview: !1
       });
     }
     const x = () => {
       h(!1), v.value = e.current;
-    }, F = () => {
-      u.value = 1, N.value = 0, O.x = 1, O.y = 1, T(D), t("close");
-    }, de = (n) => {
+    }, 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();
-    }, fe = () => {
-      const n = $.get(v.value);
+    }, ue = () => {
+      const n = R.get(v.value);
       n && (n.loading = !1, n.canPreview = !0);
     }, q = (n) => {
-      const g = $.get(v.value);
-      g && (g.loading = !1, g.canPreview = !1), n.target.alt = "加载失败";
+      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(G.value[n]);
+        s(W.value[n]);
       }
     }, ee = () => {
-      if (b.value < _.value - 1 || e.infinite) {
+      if (b.value < U.value - 1 || e.infinite) {
         const n = b.value + 1 > e.previewUrls.length - 1 ? 0 : b.value + 1;
-        s(G.value[n]);
+        s(W.value[n]);
       }
-    }, te = (n) => {
-      n ? u.value += 0.5 : u.value++, T(D);
-    }, ne = (n) => {
-      u.value > 1 && (n ? u.value -= 0.5 : u.value--), T(D);
-    }, ve = () => {
-      N.value += 90;
-    }, Ke = () => {
-      N.value -= 90;
+    }, _ = (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;
     }, We = () => {
-      O.x = -O.x;
+      M.value -= 90;
     }, Ge = () => {
+      O.x = -O.x;
+    }, Xe = () => {
       O.y = -O.y;
-    }, Xe = [{
-      icon: L(l, e.icons, "zoomIn") || H.zoomIn,
-      onClick: () => te(),
+    }, Me = [{
+      icon: $(l, e.icons, "zoomIn") || B.zoomIn,
+      onClick: () => _(),
       type: "zoomIn"
     }, {
-      icon: L(l, e.icons, "zoomOut") || H.zoomOut,
-      onClick: () => ne(),
+      icon: $(l, e.icons, "zoomOut") || B.zoomOut,
+      onClick: () => X(),
       type: "zoomOut",
       disabled: y(() => u.value === 1)
     }, {
-      icon: L(l, e.icons, "rotateRight") || H.rotateRight,
-      onClick: ve,
+      icon: $(l, e.icons, "rotateRight") || B.rotateRight,
+      onClick: de,
       type: "rotateRight"
     }, {
-      icon: L(l, e.icons, "rotateLeft") || H.rotateLeft,
-      onClick: Ke,
+      icon: $(l, e.icons, "rotateLeft") || B.rotateLeft,
+      onClick: We,
       type: "rotateLeft"
     }, {
-      icon: L(l, e.icons, "flipX") || H.flipX,
-      onClick: We,
+      icon: $(l, e.icons, "flipX") || B.flipX,
+      onClick: Ge,
       type: "flipX"
     }, {
-      icon: L(l, e.icons, "flipY") || H.flipY,
-      onClick: Ge,
+      icon: $(l, e.icons, "flipY") || B.flipY,
+      onClick: Xe,
       type: "flipY"
     }], Oe = () => {
-      if (d.value && w.value && R.value) {
-        const n = R.value.offsetWidth * u.value, g = R.value.offsetHeight * u.value, {
-          left: P,
-          top: E
-        } = Tt(R.value), oe = N.value % 180 !== 0;
+      if (d.value && w.value && P.value) {
+        const n = P.value.offsetWidth * u.value, m = P.value.offsetHeight * u.value, {
+          left: T,
+          top: I
+        } = Rt(P.value), te = M.value % 180 !== 0;
         w.value = !1;
-        const ie = Pt(oe ? g : n, oe ? n : g, P, E);
-        ie && T({
-          ...ie
+        const ne = Dt(te ? m : n, te ? n : m, T, I);
+        ne && L({
+          ...ne
         });
       }
     }, Ze = (n) => {
-      n.button === 0 && (n.preventDefault(), n.stopPropagation(), A.deltaX = n.pageX - I.x, A.deltaY = n.pageY - I.y, A.originX = I.x, A.originY = I.y, w.value = !0);
+      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 && T({
+      d.value && w.value && L({
         x: n.pageX - A.deltaX,
         y: n.pageY - A.deltaY
       });
     }, Ve = (n) => {
       if (!d.value) return;
       n.preventDefault();
-      const g = n.deltaY;
-      W.value = {
-        wheelDirection: g
+      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), (I.x !== D.x || I.y !== D.y) && T(D));
+      d.value && (u.value !== 1 && (u.value = 1), (p.x !== D.x || p.y !== D.y) && L(D));
     };
-    let ge = () => {
+    let fe = () => {
     };
     return De(() => {
-      j(() => e.previewUrls, (n) => {
-        Fe(n) && n.forEach((g, P) => {
-          S(P, g);
+      H(() => e.previewUrls, (n) => {
+        _e(n) && n.forEach((m, T) => {
+          S(T, m);
         });
       }, {
         flush: "post",
         immediate: !0
-      }), j([() => d.value, w], () => {
-        ge();
-        let n, g;
-        const P = B(window, "mouseup", Oe, !1), E = B(window, "mousemove", Ae, !1), oe = B(window, "wheel", Ve, {
+      }), 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
-        }), ie = B(window, "keydown", Qe, !1);
+        }), ne = F(window, "keydown", Qe, !1);
         try {
-          window.top !== window.self && (n = B(window.top, "mouseup", Oe, !1), g = B(window.top, "mousemove", Ae, !1));
+          window.top !== window.self && (n = F(window.top, "mouseup", Oe, !1), m = F(window.top, "mousemove", Ae, !1));
         } catch (qe) {
-          Et(!1, `[vc-image] ${qe}`);
+          Nt(!1, `[vc-image] ${qe}`);
         }
-        ge = () => {
-          P.remove(), E.remove(), oe.remove(), ie.remove(), n && n.remove(), g && g.remove();
+        fe = () => {
+          T.remove(), I.remove(), te.remove(), ne.remove(), n && n.remove(), m && m.remove();
         };
       }, {
         flush: "post",
         immediate: !0
-      }), j([W], () => {
+      }), H([K], () => {
         const {
           wheelDirection: n
-        } = W.value;
-        n > 0 ? ne(!0) : n < 0 && te(!0);
+        } = K.value;
+        n > 0 ? X(!0) : n < 0 && _(!0);
       });
     }), et(() => {
-      ge();
+      fe();
     }), i({
-      setOpen: p
+      setOpen: E
     }), () => {
-      const n = Ce(`${o}-fade`), g = Ce(`${o}-zoom`), P = {};
-      for (const E in e.icons)
-        P[E] = L(l, e.icons, E);
-      return f(r(Ie, null, [r(Ue, {
-        to: e.getContainer || "body",
-        disabled: !e.teleported
+      const n = Ee(`${o}-fade`), m = Ee(`${o}-zoom`), T = {};
+      for (const I in e.icons)
+        T[I] = $(l, e.icons, I);
+      return f(r(Se, null, [r(ze, {
+        to: e.getContainer || "body"
       }, {
-        default: () => [d.value && r(Ie, null, [r("div", {
+        default: () => [d.value && r(Se, null, [r("div", {
           class: `${o}-root ${c.value}`
-        }, [r(Se, n, {
-          default: () => [he(r("div", {
+        }, [r(ge, n, {
+          default: () => [we(r("div", {
             class: `${o}-mask ${c.value}`
-          }, null), [[pe, d.value && m.value]])]
+          }, null), [[he, d.value && g.value]])]
         }), r("div", {
           ref: C,
           tabindex: -1,
           class: [`${o}-wrap`, `${c.value}`],
-          onClick: (E) => e.onHideOnClickModal && de(E)
-        }, [r(Se, ze(g, {
-          onAfterLeave: () => F()
+          onClick: (I) => e.onHideOnClickModal && ce(I)
+        }, [r(ge, pe(m, {
+          onAfterLeave: () => se()
         }), {
-          default: () => [he(r("div", {
+          default: () => [we(r("div", {
             role: "dialog",
             class: `${o} ${c.value}`
           }, [r("div", {
@@ -1291,44 +1285,46 @@ const $t = /* @__PURE__ */ Me({
           }, [r("div", {
             class: `${o}-img-wrapper ${c.value}`,
             style: {
-              transform: `translate3d(${I.x}px, ${I.y}px, 0)`
+              transform: `translate3d(${p.x}px, ${p.y}px, 0)`
             }
           }, [r("img", {
             onMousedown: Ze,
             onDblclick: ke,
-            ref: R,
+            ref: P,
             class: `${o}-img ${c.value}`,
             src: Q.value,
-            onLoad: () => fe(),
-            onError: (E) => q(E),
+            onLoad: () => ue(),
+            onError: (I) => q(I),
             style: {
-              transform: `scale3d(${O.x * u.value}, ${O.y * u.value}, 1) rotate(${N.value}deg)`
+              transform: `scale3d(${O.x * u.value}, ${O.y * u.value}, 1) rotate(${M.value}deg)`
             }
-          }, null)])])])]), [[pe, d.value && m.value]])]
+          }, null)])])])]), [[he, d.value && g.value]])]
         })])])])]
-      }), d.value && m.value && r($t, {
-        open: d.value && m.value,
+      }), d.value && g.value && r(Ut, {
+        open: d.value && g.value,
         hashId: c.value,
         count: e.previewUrls.length,
         current: v.value,
         zIndex: e.zIndex + 1,
         getContainer: e.getContainer,
         prefixCls: o,
-        icons: P,
-        tools: Xe,
+        icons: Et(T, Me.map(({
+          type: I
+        }) => I)),
+        tools: Me,
         infinite: e.infinite,
         countRender: dt(l, e, "countRenders"),
         showSwitch: k.value,
-        showProgress: X.value,
+        showProgress: G.value,
         onClose: x,
-        onActive: (E) => E > 0 ? ee() : J()
+        onActive: (I) => I > 0 ? ee() : J()
       }, null)]));
     };
   }
-}), we = {
+}), me = {
   width: "100%",
   height: "100%"
-}, Ut = () => ({
+}, Ft = () => ({
   position: "absolute",
   inset: 0,
   display: "flex",
@@ -1336,13 +1332,13 @@ const $t = /* @__PURE__ */ Me({
   justifyContent: "center",
   cursor: "pointer",
   opacity: 0
-}), zt = (e) => ({
+}), Bt = (e) => ({
   [e.componentCls]: {
     display: "inline-block",
     position: "relative",
     overflow: "hidden",
     "&-inner": {
-      ...we,
+      ...me,
       verticalAlign: "top",
       opacity: 1,
       [`&${e.componentCls}-inner-preview`]: {
@@ -1350,7 +1346,7 @@ const $t = /* @__PURE__ */ Me({
       }
     },
     "&-placeholder": {
-      ...we,
+      ...me,
       backgroundColor: e.colorBgContainerDisabled,
       backgroundImage: "url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=')",
       backgroundRepeat: "no-repeat",
@@ -1358,19 +1354,19 @@ const $t = /* @__PURE__ */ Me({
       backgroundSize: "30%"
     },
     "&-error": {
-      ...we,
+      ...me,
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
       color: e.colorText,
       backgroundColor: e.colorBgContainerDisabled
     },
-    "&-preview": Ut()
+    "&-preview": Ft()
   }
-}), _t = (e) => e && e.nodeType === Node.ELEMENT_NODE;
+}), Ht = (e) => e && e.nodeType === Node.ELEMENT_NODE;
 let $e = "";
-const ce = /* @__PURE__ */ Me({
-  props: se,
+const jt = [...Ke, "fallback", "placeholder"], le = /* @__PURE__ */ ye({
+  props: Fe,
   name: "GImage",
   emits: ["error", "click", "load"],
   slots: Object,
@@ -1379,51 +1375,55 @@ const ce = /* @__PURE__ */ Me({
     emit: i,
     attrs: l
   }) {
-    const o = _e({
+    const o = Ue({
       suffixCls: "image"
     }), {
       wrapSSR: f,
       hashId: c
-    } = It("Image", [zt], o), d = M(), p = M(""), m = M(!1), h = M(!0), C = M(!1), v = M(null), u = M();
-    let N, w;
-    const O = y(() => !le && e.fit ? {
+    } = It("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
-    } : {}), I = y(() => Fe(e.previewUrls) && e.previewUrls.length > 0), T = y(() => {
+    } : {}), p = y(() => {
       const {
-        src: s,
-        previewUrls: S,
-        current: x
-      } = e;
-      if (Ee(x)) return S.length >= x ? x : 0;
-      const F = S.indexOf(s);
-      return F >= 0 ? F : 0;
-    }), W = (s) => {
-      p.value = e.src, h.value = !1, m.value = !1, i("load", s);
-    }, R = (s) => {
-      h.value = !1, m.value = !0, i("error", s);
+        previewUrls: s
+      } = e.preview;
+      return _e(s) && s.length > 0 || e.showPreview;
+    }), L = y(() => {
+      const {
+        previewUrls: s = [],
+        current: S = 0
+      } = e.preview;
+      if (Ie(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 (le) return;
-      h.value = !0, m.value = !1;
+      if (ie) return;
+      h.value = !0, g.value = !1;
       const s = new Image();
-      s.onload = (S) => W(S), s.onerror = R, Object.keys(l || {}).forEach((S) => {
+      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;
-    }, $ = pt(Q, 200), z = () => {
-      le || !u.value || !$ || (N(), u.value = void 0);
+    }, R = yt(Q, 200), z = () => {
+      ie || !u.value || !R || (M(), u.value = void 0);
     };
     function Q() {
       ft(v.value, u.value) && (A(), z());
     }
-    const _ = async () => {
-      if (le) return;
+    const U = async () => {
+      if (ie) return;
       await ot();
       const {
         scrollContainer: s
       } = e;
-      _t(s) ? u.value = s : vt(s) && s !== "" ? u.value = document.querySelector(s) ?? void 0 : v.value && (u.value = gt(v.value)), u.value && (N = Te(u, "scroll", $), setTimeout(() => Q(), 200));
-    }, G = (s) => {
+      Ht(s) ? u.value = s : mt(s) && s !== "" ? u.value = document.querySelector(s) ?? void 0 : v.value && (u.value = gt(v.value)), u.value && (M = be(u, "scroll", R), setTimeout(() => Q(), 200));
+    }, W = (s) => {
       if (s.ctrlKey) {
         if (s.deltaY < 0)
           return s.preventDefault(), !1;
@@ -1431,94 +1431,95 @@ const ce = /* @__PURE__ */ Me({
           return s.preventDefault(), !1;
       }
     }, b = () => {
-      I.value && (w = Te("wheel", G, {
+      p.value && (w = be("wheel", W, {
         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;
     };
-    j(() => e.src, () => {
-      e.lazy ? (h.value = !0, m.value = !1, z(), _()) : A();
+    H(() => e.src, () => {
+      e.lazy ? (h.value = !0, g.value = !1, z(), U()) : A();
     }), tt(() => {
       var s, S;
-      I.value && C.value ? (s = d.value) == null || s.setOpen(!0) : (S = d.value) == null || S.setOpen(!1);
+      p.value && C.value ? (s = d.value) == null || s.setOpen(!0) : (S = d.value) == null || S.setOpen(!1);
     });
-    const X = (s) => Ee(s) ? s + "px" : s;
-    return mt(() => {
-      e.lazy ? _() : A();
+    const G = (s) => Ie(s) ? s + "px" : s;
+    return wt(() => {
+      e.lazy ? U() : A();
     }), () => {
+      var X;
       const {
         crossorigin: s,
         decoding: S,
         alt: x,
-        sizes: F,
-        srcset: de,
-        usemap: fe,
+        sizes: se,
+        srcset: ce,
+        usemap: ue,
         class: q,
         style: J = {}
       } = l, ee = {
         crossorigin: s,
         decoding: S,
         alt: x,
-        sizes: F,
-        srcset: de,
-        usemap: fe,
+        sizes: se,
+        srcset: ce,
+        usemap: ue,
         style: {
           ...O.value,
-          height: e.height ? X(e.height) : void 0
+          height: e.height ? G(e.height) : void 0
         }
-      }, te = L(t, e, "fallback"), ne = L(t, e, "placeholder");
+      }, _ = vt(jt, t, e, {
+        render: !0
+      });
       return f(r("div", {
         class: {
           [`${c.value}`]: !0,
           [`${o}`]: !0,
           [`${q}`]: !!q
         },
-        ref: (ve) => v.value = ve,
+        ref: (de) => v.value = de,
         style: {
-          width: e.width ? X(e.width) : void 0,
-          height: e.height ? X(e.height) : void 0,
+          width: e.width ? G(e.width) : void 0,
+          height: e.height ? G(e.height) : void 0,
           display: e.lazy ? "block" : void 0,
           ...J
         },
         onClick: () => {
           i("click");
         }
-      }, [h.value ? ne || r("div", {
+      }, [h.value ? _.placeholder || r("div", {
         class: `${o}-placeholder ${c.value}`
-      }, null) : m.value ? te || r("div", {
+      }, null) : g.value ? _.fallback || r("div", {
         class: `${o}-error ${c.value}`
-      }, [nt("加载失败")]) : p.value && r("img", ze(ee, {
+      }, [nt("加载失败")]) : E.value && r("img", pe(ee, {
         class: {
           [`${c.value}`]: !0,
           [`${e.imageClassName}`]: !!e.imageClassName,
           [`${o}-inner`]: !0,
-          [`${o}-inner-preview`]: I.value
+          [`${o}-inner-preview`]: p.value
         },
         alt: e.alt,
-        src: p.value
-      }), null), I.value && r("div", {
+        src: E.value
+      }), null), p.value && r("div", {
         class: `${o}-preview ${c.value}`,
         onClick: () => b()
-      }, null), r(Dt, {
-        ref: d,
-        zIndex: e.zIndex,
-        infinite: e.infinite,
-        current: T.value,
-        previewUrls: e.previewUrls,
-        getContainer: e.getContainer,
+      }, null), p.value && r(_t, pe({
+        ref: d
+      }, e.preview, Ct(_, Ke), {
+        previewUrls: ((X = e.preview) == null ? void 0 : X.previewUrls) || [e.src],
+        current: L.value,
         onClose: () => k()
-      }, null)]));
+      }), null)]));
     };
   }
 });
-ce.isGImage = !0;
-ce.install = (e) => (e.component(ce.name, ce), e);
+le.isGImage = !0;
+le.install = (e) => (e.component(le.name, le), e);
 export {
-  ce as GImage,
-  Dt as ImagePreview,
-  U as baseProps,
-  ce as default,
-  se as imagePorps,
-  Y as imagePreviewProps
+  le as GImage,
+  _t as ImagePreview,
+  V as baseProps,
+  le as default,
+  Fe as imagePorps,
+  j as imagePreviewProps
 };