@gx-design-vue/image 0.1.0 → 0.1.2

package/dist/image.mjs

@@ -1,591 +0,0 @@
-import { createVNode as l, defineComponent as Z, ref as g, computed as b, watch as U, nextTick as oe, Fragment as re, resolveComponent as ue, cloneVNode as ve, Teleport as ce, isVNode as me, createTextVNode as ge, mergeProps as he } from "vue";
-import { ExpandOutlined as ye, OneToOneOutlined as we, CloseOutlined as be, LeftOutlined as pe, RightOutlined as Oe, ZoomOutOutlined as Ce, ZoomInOutlined as Ie, RotateLeftOutlined as ke, RotateRightOutlined as xe, LoadingOutlined as Le } from "@ant-design/icons-vue";
-import { isServer as T, getPrefixCls as K, getSlotVNode as ee, isInContainer as Se, isString as Ne, getScrollContainer as $e } from "@gx-design-vue/pro-utils";
-import { onMountedOrActivated as se } from "@gx-design-vue/pro-hooks";
-import { createTypes as Te } from "vue-types";
-import { useThrottleFn as Ae, useEventListener as te } from "@vueuse/core";
-var de = Te({
-  func: void 0,
-  bool: void 0,
-  string: void 0,
-  number: void 0,
-  array: void 0,
-  object: void 0,
-  integer: void 0
-});
-de.extend([{
-  name: "looseBool",
-  getter: !0,
-  type: Boolean,
-  default: void 0
-}, {
-  name: "style",
-  getter: !0,
-  type: [String, Object],
-  default: void 0
-}, {
-  name: "VueNode",
-  getter: !0,
-  type: null
-}]);
-const _ = de, P = {
-  appendToBody: {
-    type: Boolean,
-    default: !1
-  },
-  hideOnClickModal: {
-    type: Boolean,
-    default: !0
-  },
-  src: {
-    type: String,
-    default: ""
-  },
-  fit: {
-    type: String,
-    default: ""
-  },
-  lazy: _.bool,
-  scrollContainer: {
-    type: [String, Object]
-  },
-  placeholder: {
-    type: [Function, Object],
-    default: () => {
-    }
-  },
-  fallback: {
-    type: [Function, Object],
-    default: () => {
-    }
-  },
-  onError: {
-    type: Function
-  },
-  onClick: {
-    type: Function
-  },
-  disablePreview: _.bool,
-  previewSrcList: {
-    type: Array,
-    default: () => []
-  },
-  width: _.number,
-  height: _.number,
-  zIndex: {
-    type: Number,
-    default: 2e3
-  }
-}, ze = {
-  urlList: {
-    type: Array,
-    default: () => []
-  },
-  zIndex: P.zIndex,
-  initialIndex: {
-    type: Number,
-    default: 0
-  },
-  infinite: {
-    type: Boolean,
-    default: !0
-  },
-  onHideOnClickModal: P.hideOnClickModal
-}, $ = {
-  tab: "Tab",
-  enter: "Enter",
-  space: "Space",
-  left: "ArrowLeft",
-  up: "ArrowUp",
-  right: "ArrowRight",
-  down: "ArrowDown",
-  esc: "Escape",
-  delete: "Delete",
-  backspace: "Backspace"
-}, Y = function(e, a, d, w = !1) {
-  e && a && d && e.addEventListener(a, d, w);
-}, X = function(e, a, d, w = !1) {
-  e && a && d && e.removeEventListener(a, d, w);
-}, V = {
-  CONTAIN: {
-    name: "contain",
-    icon: l(ye, null, null)
-  },
-  ORIGINAL: {
-    name: "original",
-    icon: l(we, null, null)
-  }
-}, Ee = function() {
-  return !T && !!window.navigator.userAgent.match(/firefox/i);
-}, ne = Ee() ? "DOMMouseScroll" : "mousewheel";
-function q(e) {
-  let a = !1;
-  return function(...d) {
-    a || (a = !0, window.requestAnimationFrame(() => {
-      e.apply(this, d), a = !1;
-    }));
-  };
-}
-const fe = /* @__PURE__ */ Z({
-  props: ze,
-  emits: ["close", "switch"],
-  setup: function(e, {
-    emit: a
-  }) {
-    let d = null, w = null, p = null;
-    const i = K({
-      suffixCls: "image-viewer"
-    }), f = g(!0), h = g(e.initialIndex), k = g(null), x = g(null), O = g(V.CONTAIN), o = g({
-      scale: 1,
-      deg: 0,
-      offsetX: 0,
-      offsetY: 0,
-      enableTransition: !1
-    }), u = b(() => {
-      const {
-        urlList: n
-      } = e;
-      return n.length <= 1;
-    }), s = b(() => h.value === 0), v = b(() => h.value === e.urlList.length - 1), I = b(() => e.urlList[h.value]), L = g("viewer-fade-enter-active"), A = b(() => {
-      const {
-        scale: n,
-        deg: y,
-        offsetX: t,
-        offsetY: r,
-        enableTransition: c
-      } = o.value, m = {
-        transform: `scale(${n}) rotate(${y}deg)`,
-        transition: c ? "transform .3s" : "",
-        marginLeft: `${t}px`,
-        marginTop: `${r}px`
-      };
-      return O.value.name === V.CONTAIN.name && (m.maxWidth = m.maxHeight = "100%"), m;
-    }), z = () => {
-      W(), setTimeout(() => {
-        a("close");
-      }, 200);
-    }, S = () => {
-      L.value = "viewer-fade-enter-active", d = q((n) => {
-        switch (n.code) {
-          case $.esc:
-            z();
-            break;
-          case $.space:
-            M();
-            break;
-          case $.left:
-            R();
-            break;
-          case $.up:
-            C("zoomIn");
-            break;
-          case $.right:
-            j();
-            break;
-          case $.down:
-            C("zoomOut");
-            break;
-        }
-      }), w = q((n) => {
-        (n.wheelDelta ? n.wheelDelta : -n.detail) > 0 ? C("zoomIn", {
-          zoomRate: 0.015,
-          enableTransition: !1
-        }) : C("zoomOut", {
-          zoomRate: 0.015,
-          enableTransition: !1
-        });
-      }), Y(document, "keydown", d), Y(document, ne, w);
-    }, W = () => {
-      L.value = "viewer-fade-leave-active", X(document, "keydown", d), X(document, ne, w), d = null, w = null;
-    }, E = () => {
-      f.value = !1;
-    }, D = (n) => {
-      f.value = !1, n.target.alt = "加载失败";
-    }, H = (n) => {
-      if (f.value || n.button !== 0)
-        return;
-      const {
-        offsetX: y,
-        offsetY: t
-      } = o.value, r = n.pageX, c = n.pageY;
-      p = q((m) => {
-        o.value = {
-          ...o.value,
-          offsetX: y + m.pageX - r,
-          offsetY: t + m.pageY - c
-        };
-      }), Y(document, "mousemove", p), Y(document, "mouseup", () => {
-        X(document, "mousemove", p);
-      }), n.preventDefault();
-    }, F = () => {
-      o.value = {
-        scale: 1,
-        deg: 0,
-        offsetX: 0,
-        offsetY: 0,
-        enableTransition: !1
-      };
-    }, M = () => {
-      if (f.value)
-        return;
-      const n = Object.keys(V), y = Object.values(V), t = O.value.name, c = (y.findIndex((m) => m.name === t) + 1) % n.length;
-      O.value = V[n[c]], F();
-    }, R = () => {
-      if (s.value && !e.infinite)
-        return;
-      const n = e.urlList.length;
-      h.value = (h.value - 1 + n) % n;
-    }, j = () => {
-      if (v.value && !e.infinite)
-        return;
-      const n = e.urlList.length;
-      h.value = (h.value + 1) % n;
-    }, C = (n, y = {}) => {
-      if (f.value)
-        return;
-      const {
-        zoomRate: t,
-        rotateDeg: r,
-        enableTransition: c
-      } = {
-        zoomRate: 0.2,
-        rotateDeg: 90,
-        enableTransition: !0,
-        ...y
-      };
-      switch (n) {
-        case "zoomOut":
-          o.value.scale > 0.2 && (o.value.scale = parseFloat((o.value.scale - t).toFixed(3)));
-          break;
-        case "zoomIn":
-          o.value.scale = parseFloat((o.value.scale + t).toFixed(3));
-          break;
-        case "clocelise":
-          o.value.deg += r;
-          break;
-        case "anticlocelise":
-          o.value.deg -= r;
-          break;
-      }
-      o.value.enableTransition = c;
-    };
-    return U(I, () => {
-      oe(() => {
-        x.value.complete || (f.value = !0);
-      });
-    }), U(h, (n) => {
-      F(), a("switch", n);
-    }), se(() => {
-      var n, y;
-      S(), (y = (n = k.value) == null ? void 0 : n.focus) == null || y.call(n);
-    }), () => l("div", {
-      ref: (n) => k.value = n,
-      tabindex: 1,
-      class: [`${i}-wrapper`, `${L.value}`],
-      style: {
-        zIndex: e.zIndex
-      }
-    }, [l("div", {
-      class: `${i}-mask`,
-      onClick: () => e.onHideOnClickModal && z()
-    }, null), l("span", {
-      class: [`${i}-btn`, `${i}-close`],
-      onClick: () => z()
-    }, [l(be, null, null)]), !u.value && l(re, null, [l("span", {
-      class: {
-        [`${i}-btn`]: !0,
-        [`${i}-prev`]: !0,
-        ["is-disabled"]: !e.infinite && s.value
-      },
-      onClick: () => R()
-    }, [l(pe, null, null)]), l("span", {
-      class: {
-        [`${i}-btn`]: !0,
-        [`${i}-next`]: !0,
-        ["is-disabled"]: !e.infinite && s.value
-      },
-      onClick: () => j()
-    }, [l(Oe, null, null)])]), l("div", {
-      class: [`${i}-btn`, `${i}-actions`]
-    }, [l("div", {
-      class: `${i}-actions-inner`
-    }, [l(Ce, {
-      onClick: () => C("zoomOut")
-    }, null), l(Ie, {
-      onClick: () => C("zoomIn")
-    }, null), l("i", {
-      class: `${i}-actions-divider`
-    }, null), l("i", {
-      onClick: () => M()
-    }, [O.value.icon]), l("i", {
-      class: `${i}-actions-divider`
-    }, null), l(ke, {
-      onClick: () => C("anticlocelise")
-    }, null), l(xe, {
-      onClick: () => C("clocelise")
-    }, null)])]), f.value && l("div", {
-      class: `${i}-canvas`
-    }, [l(ue("a-spin"), {
-      indicator: l(Le, {
-        style: {
-          color: "#fff",
-          fontSize: "40px"
-        }
-      }, null)
-    }, null)]), l("div", {
-      class: `${i}-canvas`
-    }, [e.urlList.map((n, y) => l("img", {
-      ref: (t) => x.value = t,
-      class: `${i}-img`,
-      key: n,
-      style: {
-        ...A.value,
-        display: y === h.value ? "block" : "none"
-      },
-      src: n,
-      onLoad: () => E(),
-      onError: (t) => D(t),
-      onMousedown: (t) => H(t)
-    }, null))])]);
-  }
-});
-function Fe(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !me(e);
-}
-let le = "";
-const Ge = /* @__PURE__ */ Z({
-  props: {
-    hideOnClickModal: P.hideOnClickModal
-  },
-  setup(e, {
-    slots: a
-  }) {
-    const d = K({
-      suffixCls: "image-viewer-group"
-    }), w = g(!1), p = g(""), i = b(() => {
-      var u, s, v, I, L;
-      return ((u = a.default) == null ? void 0 : u.call(a).length) === 1 && (String((s = a.default) == null ? void 0 : s.call(a)[0].type) === String(Symbol("Fragment")) || String((v = a.default) == null ? void 0 : v.call(a)[0].type) === String(Symbol())) ? ((I = a.default) == null ? void 0 : I.call(a)[0].children) || [] : ((L = a.default) == null ? void 0 : L.call(a)) || [];
-    }), f = b(() => i.value.filter((v) => k(v)).map((v) => v.props.src).filter((v) => v) || []), h = b(() => Array.isArray(f.value) && f.value.length > 0), k = (u) => u && u.type && (u.type.isGImage || u.type.name === "GImage"), x = () => {
-      let u = 0;
-      const s = f.value.findIndex((v) => v === p.value);
-      return s >= 0 && (u = s), u;
-    }, O = (u) => {
-      !h.value || !u || (p.value = u, le = document.body.style.overflow, document.body.style.overflow = "hidden", w.value = !0);
-    }, o = () => {
-      document.body.style.overflow = le, w.value = !1;
-    };
-    return () => {
-      let u;
-      return l("div", {
-        class: `${d}`
-      }, [l(ue("a-space"), {
-        size: 15
-      }, Fe(u = i.value.map((s, v) => k(s) ? l("div", {
-        key: v,
-        class: `${d}-item`,
-        onClick: () => {
-          var I;
-          return O(((I = s.props) == null ? void 0 : I.src) || "");
-        }
-      }, [ve(s, {
-        disablePreview: !0
-      })]) : null)) ? u : {
-        default: () => [u]
-      }), l(ce, {
-        to: "body"
-      }, {
-        default: () => [h.value && w.value && l(fe, {
-          initialIndex: x(),
-          urlList: f.value,
-          onHideOnClickModal: e.hideOnClickModal,
-          onClose: () => o()
-        }, null)]
-      })]);
-    };
-  }
-}), Me = (e) => e && e.nodeType === Node.ELEMENT_NODE, ae = () => document.documentElement.style.objectFit !== void 0;
-let ie = "";
-const N = {
-  NONE: "none",
-  CONTAIN: "contain",
-  COVER: "cover",
-  FILL: "fill",
-  SCALE_DOWN: "scale-down"
-}, G = /* @__PURE__ */ Z({
-  props: P,
-  name: "GImage",
-  inheritAttrs: !1,
-  emits: ["error", "click"],
-  setup(e, {
-    slots: a,
-    emit: d,
-    attrs: w
-  }) {
-    const p = K({
-      suffixCls: "image"
-    }), i = g(!1), f = g(!0), h = g(0), k = g(0), x = g(!1), O = g(null), o = g();
-    let u, s;
-    const v = b(() => ({
-      width: e.width ? `${e.width}px` : void 0,
-      height: e.height ? `${e.height}px` : void 0
-    })), I = b(() => {
-      const {
-        fit: t
-      } = e;
-      return !T && t ? ae() ? {
-        "object-fit": t,
-        ...v.value
-      } : {
-        ...W(t),
-        ...v.value
-      } : v.value;
-    }), L = b(() => {
-      const {
-        fit: t
-      } = e;
-      return !T && !ae() && t !== N.FILL;
-    }), A = b(() => {
-      const {
-        previewSrcList: t
-      } = e;
-      return Array.isArray(t) && t.length > 0;
-    }), z = b(() => {
-      const {
-        src: t,
-        previewSrcList: r
-      } = e;
-      let c = 0;
-      const m = r.indexOf(t);
-      return m >= 0 && (c = m), c;
-    }), S = b(() => w), W = (t) => {
-      const r = e.width || h.value, c = e.height || k.value;
-      if (!O.value)
-        return {};
-      const {
-        clientWidth: m,
-        clientHeight: B
-      } = O.value;
-      if (!r || !c || !m || !B)
-        return {};
-      const J = r / c, Q = m / B;
-      switch (t === N.SCALE_DOWN && (t = r < m && c < B ? N.NONE : N.CONTAIN), t) {
-        case N.NONE:
-          return {
-            width: "auto",
-            height: "auto"
-          };
-        case N.CONTAIN:
-          return J < Q ? {
-            width: "auto"
-          } : {
-            height: "auto"
-          };
-        case N.COVER:
-          return J < Q ? {
-            height: "auto"
-          } : {
-            width: "auto"
-          };
-        default:
-          return {};
-      }
-    }, E = () => {
-      if (T)
-        return;
-      const t = S.value;
-      f.value = !0, i.value = !1;
-      const r = new Image();
-      r.onload = (c) => R(c, r), r.onerror = j, Object.keys(t).forEach((c) => {
-        if (c.toLowerCase() === "onload")
-          return;
-        const m = t[c];
-        r.setAttribute(c, m);
-      }), r.src = e.src;
-    };
-    function D() {
-      Se(O.value, o.value) && (E(), M());
-    }
-    const H = Ae(D, 200), F = async () => {
-      if (T)
-        return;
-      await oe();
-      const {
-        scrollContainer: t
-      } = e;
-      Me(t) ? o.value = t : Ne(t) && t !== "" ? o.value = document.querySelector(t) ?? void 0 : O.value && (o.value = $e(O.value)), o.value && (u = te(o, "scroll", H), setTimeout(() => D(), 200));
-    }, M = () => {
-      T || !o.value || !H || (u(), o.value = void 0);
-    }, R = (t, r) => {
-      h.value = r.width, k.value = r.height, f.value = !1, i.value = !1;
-    }, j = (t) => {
-      f.value = !1, i.value = !0, d("error", t);
-    }, C = (t) => {
-      if (t.ctrlKey) {
-        if (t.deltaY < 0)
-          return t.preventDefault(), !1;
-        if (t.deltaY > 0)
-          return t.preventDefault(), !1;
-      }
-    }, n = () => {
-      !A.value || e.disablePreview || (s = te("wheel", C, {
-        passive: !1
-      }), ie = document.body.style.overflow, document.body.style.overflow = "hidden", x.value = !0);
-    }, y = () => {
-      s == null || s(), document.body.style.overflow = ie, x.value = !1;
-    };
-    return U(() => e.src, () => {
-      e.lazy ? (f.value = !0, i.value = !1, M(), F()) : E();
-    }), se(() => {
-      e.lazy ? F() : E();
-    }), () => {
-      const t = ee(a, e, "fallback"), r = ee(a, e, "placeholder");
-      return l(re, null, [l("div", {
-        class: {
-          [`${p}`]: !0,
-          [`${S.value.class}`]: S.value.class
-        },
-        ref: (c) => O.value = c,
-        style: {
-          ...S.value.style || {},
-          display: e.lazy ? "block" : void 0
-        },
-        onClick: () => {
-          d("click");
-        }
-      }, [f.value ? r || l("div", {
-        class: `${p}-placeholder`
-      }, null) : i.value ? t || l("div", {
-        class: `${p}-error`
-      }, [ge("加载失败")]) : l("img", he({
-        class: {
-          [`${p}-inner`]: !0,
-          [`${p}-inner-center`]: L.value,
-          [`${p}-preview`]: A.value
-        }
-      }, S.value, {
-        src: e.src,
-        style: I.value,
-        onClick: () => n()
-      }), null), l(ce, {
-        to: "body",
-        disabled: !e.appendToBody
-      }, {
-        default: () => [A.value && x.value && l(fe, {
-          zIndex: e.zIndex,
-          initialIndex: z.value,
-          urlList: e.previewSrcList,
-          onHideOnClickModal: e.hideOnClickModal,
-          onClose: () => y()
-        }, null)]
-      })])]);
-    };
-  }
-});
-G.isWImage = !0;
-G.install = (e) => (e.component(G.name, G), e);
-export {
-  G as GImage,
-  fe as ImageViewer,
-  Ge as ImageViewerGroup,
-  G as default
-};