@gx-design-vue/image 0.2.0-beta.3 → 0.2.0-beta.31

package/dist/image.js

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