@gx-design-vue/image 0.0.1

package/README.md

@@ -0,0 +1,16 @@
+# ProTable
+
+```shell
+pnpm add @gx-design-vue/pro-table
+```
+
+```ts
+// 可全局引入，也可以单独引入
+import { GProTable } from '@gx-design-vue/pro-table'
+
+// 如果引入了ant-design-vue 相关组件的样式(table、menu、tooltip、button、input、treeSelect、select、dataPicker、dropdown等相关组件)，则执行下面
+import '@gx-design-vue/pro-table/dist/ProTable.less'
+
+// 如果没有引入了ant-design-vue 相关组件，则执行下面
+import '@gx-design-vue/pro-table/dist/style.less'
+```

package/dist/Image.d.ts

@@ -0,0 +1,130 @@
+import type { ExtractPropTypes } from 'vue';
+import { gImagePorps } from './props';
+import './style.less';
+export declare type GImageProps = Partial<ExtractPropTypes<typeof gImagePorps>>;
+declare const GImage: import("vue").DefineComponent<{
+    appendToBody: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    hideOnClickModal: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    src: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    fit: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    lazy: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    };
+    scrollContainer: {
+        type: import("vue").PropType<string | HTMLElement | undefined>;
+    };
+    placeholder: {
+        type: import("vue").PropType<import("@gx-design-vue/pro-utils").WithFalse<() => import("@gx-design-vue/pro-utils").CustomRender>>;
+        default: () => undefined;
+    };
+    fallback: {
+        type: import("vue").PropType<import("@gx-design-vue/pro-utils").WithFalse<() => import("@gx-design-vue/pro-utils").CustomRender>>;
+        default: () => undefined;
+    };
+    onError: {
+        type: import("vue").PropType<(e: Error) => void>;
+    };
+    onClick: {
+        type: import("vue").PropType<(info: any) => void>;
+    };
+    disablePreview: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    };
+    previewSrcList: {
+        type: import("vue").PropType<string[]>;
+        default: () => string[];
+    };
+    width: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    };
+    height: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    };
+    zIndex: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "error")[], "click" | "error", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    appendToBody: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    hideOnClickModal: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    src: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    fit: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    lazy: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    };
+    scrollContainer: {
+        type: import("vue").PropType<string | HTMLElement | undefined>;
+    };
+    placeholder: {
+        type: import("vue").PropType<import("@gx-design-vue/pro-utils").WithFalse<() => import("@gx-design-vue/pro-utils").CustomRender>>;
+        default: () => undefined;
+    };
+    fallback: {
+        type: import("vue").PropType<import("@gx-design-vue/pro-utils").WithFalse<() => import("@gx-design-vue/pro-utils").CustomRender>>;
+        default: () => undefined;
+    };
+    onError: {
+        type: import("vue").PropType<(e: Error) => void>;
+    };
+    onClick: {
+        type: import("vue").PropType<(info: any) => void>;
+    };
+    disablePreview: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    };
+    previewSrcList: {
+        type: import("vue").PropType<string[]>;
+        default: () => string[];
+    };
+    width: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    };
+    height: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    };
+    zIndex: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+}>> & {
+    onError?: ((...args: any[]) => any) | undefined;
+    onClick?: ((...args: any[]) => any) | undefined;
+}, {
+    zIndex: number;
+    height: number;
+    width: number;
+    appendToBody: boolean;
+    hideOnClickModal: boolean;
+    src: string;
+    fit: string;
+    lazy: boolean;
+    placeholder: import("@gx-design-vue/pro-utils").WithFalse<() => import("@gx-design-vue/pro-utils").CustomRender>;
+    fallback: import("@gx-design-vue/pro-utils").WithFalse<() => import("@gx-design-vue/pro-utils").CustomRender>;
+    disablePreview: boolean;
+    previewSrcList: string[];
+}>;
+export default GImage;

package/dist/components/ImageViewer.d.ts

@@ -0,0 +1,59 @@
+export declare const on: (element: HTMLElement | Document | Window | null, event: string, handler: EventListenerOrEventListenerObject, useCapture?: boolean) => void;
+export declare const off: (element: HTMLElement | Document | Window | null, event: string, handler: EventListenerOrEventListenerObject, useCapture?: boolean) => void;
+export declare type AnyFunction<T> = (...args: any[]) => T;
+export declare type ImageViewerAction = 'zoomIn' | 'zoomOut' | 'clocelise' | 'anticlocelise';
+export declare const isFirefox: () => boolean;
+export declare function rafThrottle<T extends AnyFunction<any>>(fn: T): AnyFunction<void>;
+declare const GImageViewer: import("vue").DefineComponent<{
+    urlList: {
+        type: import("vue").PropType<string[]>;
+        default: () => never[];
+    };
+    zIndex: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    initialIndex: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    infinite: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    onHideOnClickModal: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "switch")[], "close" | "switch", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    urlList: {
+        type: import("vue").PropType<string[]>;
+        default: () => never[];
+    };
+    zIndex: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    initialIndex: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    infinite: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    onHideOnClickModal: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+}>> & {
+    onClose?: ((...args: any[]) => any) | undefined;
+    onSwitch?: ((...args: any[]) => any) | undefined;
+}, {
+    urlList: string[];
+    zIndex: number;
+    initialIndex: number;
+    infinite: boolean;
+    onHideOnClickModal: boolean;
+}>;
+export default GImageViewer;

package/dist/components/ImageViewerGroup.d.ts

@@ -0,0 +1,14 @@
+declare const gImageViewerGroup: import("vue").DefineComponent<{
+    hideOnClickModal: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    hideOnClickModal: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+}>>, {
+    hideOnClickModal: boolean;
+}>;
+export default gImageViewerGroup;

package/dist/design/config.less

@@ -0,0 +1,2 @@
+@gx-prefix: gx;
+@gx-prefix-pro: ~'@{gx-prefix}-pro';

package/dist/image.mjs

@@ -0,0 +1,592 @@
+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 { getPrefixCls as K, isServer as T, 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 = Z({
+  props: ze,
+  emits: ["close", "switch"],
+  setup: function(e, {
+    emit: a
+  }) {
+    let d = null, w = null, p = null;
+    const o = K({
+      suffixCls: "image-viewer"
+    }), f = g(!0), h = g(e.initialIndex), k = g(null), x = g(null), O = g(V.CONTAIN), r = 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: i,
+        enableTransition: c
+      } = r.value, m = {
+        transform: `scale(${n}) rotate(${y}deg)`,
+        transition: c ? "transform .3s" : "",
+        marginLeft: `${t}px`,
+        marginTop: `${i}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 = "\u52A0\u8F7D\u5931\u8D25";
+    }, H = (n) => {
+      if (f.value || n.button !== 0)
+        return;
+      const {
+        offsetX: y,
+        offsetY: t
+      } = r.value, i = n.pageX, c = n.pageY;
+      p = q((m) => {
+        r.value = {
+          ...r.value,
+          offsetX: y + m.pageX - i,
+          offsetY: t + m.pageY - c
+        };
+      }), Y(document, "mousemove", p), Y(document, "mouseup", () => {
+        X(document, "mousemove", p);
+      }), n.preventDefault();
+    }, F = () => {
+      r.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: i,
+        enableTransition: c
+      } = {
+        zoomRate: 0.2,
+        rotateDeg: 90,
+        enableTransition: !0,
+        ...y
+      };
+      switch (n) {
+        case "zoomOut":
+          r.value.scale > 0.2 && (r.value.scale = parseFloat((r.value.scale - t).toFixed(3)));
+          break;
+        case "zoomIn":
+          r.value.scale = parseFloat((r.value.scale + t).toFixed(3));
+          break;
+        case "clocelise":
+          r.value.deg += i;
+          break;
+        case "anticlocelise":
+          r.value.deg -= i;
+          break;
+      }
+      r.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: [`${o}-wrapper`, `${L.value}`],
+      style: {
+        zIndex: e.zIndex
+      }
+    }, [l("div", {
+      class: `${o}-mask`,
+      onClick: () => e.onHideOnClickModal && z()
+    }, null), l("span", {
+      class: [`${o}-btn`, `${o}-close`],
+      onClick: () => z()
+    }, [l(be, null, null)]), !u.value && l(re, null, [l("span", {
+      class: {
+        [`${o}-btn`]: !0,
+        [`${o}-prev`]: !0,
+        ["is-disabled"]: !e.infinite && s.value
+      },
+      onClick: () => R()
+    }, [l(pe, null, null)]), l("span", {
+      class: {
+        [`${o}-btn`]: !0,
+        [`${o}-next`]: !0,
+        ["is-disabled"]: !e.infinite && s.value
+      },
+      onClick: () => j()
+    }, [l(Oe, null, null)])]), l("div", {
+      class: [`${o}-btn`, `${o}-actions`]
+    }, [l("div", {
+      class: `${o}-actions-inner`
+    }, [l(Ce, {
+      onClick: () => C("zoomOut")
+    }, null), l(Ie, {
+      onClick: () => C("zoomIn")
+    }, null), l("i", {
+      class: `${o}-actions-divider`
+    }, null), l("i", {
+      onClick: () => M()
+    }, [O.value.icon]), l("i", {
+      class: `${o}-actions-divider`
+    }, null), l(ke, {
+      onClick: () => C("anticlocelise")
+    }, null), l(xe, {
+      onClick: () => C("clocelise")
+    }, null)])]), f.value && l("div", {
+      class: `${o}-canvas`
+    }, [l(ue("a-spin"), {
+      indicator: l(Le, {
+        style: {
+          color: "#fff",
+          fontSize: "40px"
+        }
+      }, null)
+    }, null)]), l("div", {
+      class: `${o}-canvas`
+    }, [e.urlList.map((n, y) => l("img", {
+      ref: (t) => x.value = t,
+      class: `${o}-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 = Z({
+  props: {
+    hideOnClickModal: P.hideOnClickModal
+  },
+  setup(e, {
+    slots: a
+  }) {
+    const d = K({
+      suffixCls: "image-viewer-group"
+    }), w = g(!1), p = g(""), o = 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(() => o.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);
+    }, r = () => {
+      document.body.style.overflow = le, w.value = !1;
+    };
+    return () => {
+      let u;
+      return l("div", {
+        class: `${d}`
+      }, [l(ue("a-space"), {
+        size: 15
+      }, Fe(u = o.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: () => r()
+        }, 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 = Z({
+  props: P,
+  name: "GImage",
+  inheritAttrs: !1,
+  emits: ["error", "click"],
+  setup(e, {
+    slots: a,
+    emit: d,
+    attrs: w
+  }) {
+    const p = K({
+      suffixCls: "image"
+    }), o = g(!1), f = g(!0), h = g(0), k = g(0), x = g(!1), O = g(null), r = 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: i
+      } = e;
+      let c = 0;
+      const m = i.indexOf(t);
+      return m >= 0 && (c = m), c;
+    }), S = b(() => w), W = (t) => {
+      const i = e.width || h.value, c = e.height || k.value;
+      if (!O.value)
+        return {};
+      const {
+        clientWidth: m,
+        clientHeight: B
+      } = O.value;
+      if (!i || !c || !m || !B)
+        return {};
+      const J = i / c, Q = m / B;
+      switch (t === N.SCALE_DOWN && (t = i < 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, o.value = !1;
+      const i = new Image();
+      i.onload = (c) => R(c, i), i.onerror = j, Object.keys(t).forEach((c) => {
+        if (c.toLowerCase() === "onload")
+          return;
+        const m = t[c];
+        i.setAttribute(c, m);
+      }), i.src = e.src;
+    };
+    function D() {
+      Se(O.value, r.value) && (E(), M());
+    }
+    const H = Ae(D, 200), F = async () => {
+      var i;
+      if (T)
+        return;
+      await oe();
+      const {
+        scrollContainer: t
+      } = e;
+      Me(t) ? r.value = t : Ne(t) && t !== "" ? r.value = (i = document.querySelector(t)) != null ? i : void 0 : O.value && (r.value = $e(O.value)), r.value && (u = te(r, "scroll", H), setTimeout(() => D(), 200));
+    }, M = () => {
+      T || !r.value || !H || (u(), r.value = void 0);
+    }, R = (t, i) => {
+      h.value = i.width, k.value = i.height, f.value = !1, o.value = !1;
+    }, j = (t) => {
+      f.value = !1, o.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, o.value = !1, M(), F()) : E();
+    }), se(() => {
+      e.lazy ? F() : E();
+    }), () => {
+      const t = ee(a, e, "fallback"), i = 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 ? i || l("div", {
+        class: `${p}-placeholder`
+      }, null) : o.value ? t || l("div", {
+        class: `${p}-error`
+      }, [ge("\u52A0\u8F7D\u5931\u8D25")]) : 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
+};

package/dist/image.umd.js

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

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+import './design/config.less';
+import './style.less';
+export { default as ImageViewer } from './components/ImageViewer';
+export { default as ImageViewerGroup } from './components/ImageViewerGroup';
+export type { GImageProps } from './Image';
+export { default } from './Image';
+export { default as GImage } from './Image';

package/dist/props.d.ts

@@ -0,0 +1,79 @@
+import type { PropType } from 'vue';
+import type { WithFalse, CustomRender } from '@gx-design-vue/pro-utils';
+export declare const gImagePorps: {
+    appendToBody: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    hideOnClickModal: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    src: {
+        type: PropType<string>;
+        default: string;
+    };
+    fit: {
+        type: PropType<string>;
+        default: string;
+    };
+    lazy: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    };
+    scrollContainer: {
+        type: PropType<string | HTMLElement | undefined>;
+    };
+    placeholder: {
+        type: PropType<WithFalse<() => CustomRender>>;
+        default: () => undefined;
+    };
+    fallback: {
+        type: PropType<WithFalse<() => CustomRender>>;
+        default: () => undefined;
+    };
+    onError: {
+        type: PropType<(e: Error) => void>;
+    };
+    onClick: {
+        type: PropType<(info: any) => void>;
+    };
+    disablePreview: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    };
+    previewSrcList: {
+        type: PropType<string[]>;
+        default: () => string[];
+    };
+    width: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    };
+    height: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    };
+    zIndex: {
+        type: PropType<number>;
+        default: number;
+    };
+};
+export declare const gImageViewProps: {
+    urlList: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    zIndex: {
+        type: PropType<number>;
+        default: number;
+    };
+    initialIndex: {
+        type: PropType<number>;
+        default: number;
+    };
+    infinite: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    onHideOnClickModal: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+};

package/dist/style.css

@@ -0,0 +1 @@
+.gx-image{position:relative;display:inline-flex;overflow:hidden}.gx-image-inner{width:100%;height:100%;vertical-align:top}.gx-image-inner.gx-image-inner-center{position:relative;top:50%;left:50%;display:block;transform:translate(-50%,-50%)}.gx-image-placeholder{width:100%;height:100%;background:#f5f7fa}.gx-image-error{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:14px;color:#c0c4cc;vertical-align:middle;background:#f5f7fa}.gx-image-preview,.gx-image-viewer-group-item{cursor:pointer}.gx-image-viewer-wrapper{position:fixed;top:0;right:0;bottom:0;left:0}.gx-image-viewer-mask{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;opacity:.5}.gx-image-viewer-btn{position:absolute;z-index:1;box-sizing:border-box;display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;border-radius:50%;opacity:.8}.gx-image-viewer-close{top:40px;right:40px;width:40px;height:40px;font-size:40px;width:44px;height:44px;font-size:24px;color:#fff;background-color:#606266;border-color:#fff}.gx-image-viewer-canvas{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.gx-image-viewer-actions{bottom:30px;left:50%;width:282px;height:44px;padding:0 23px;background-color:#606266;border-color:#fff;border-radius:22px;transform:translate(-50%)}.gx-image-viewer-actions-inner{display:flex;align-items:center;justify-content:space-around;width:100%;height:100%;font-size:23px;color:#fff;text-align:justify;cursor:default}.gx-image-viewer-prev{top:50%;left:40px;transform:translateY(-50%);width:44px;height:44px;font-size:24px;color:#fff;background-color:#606266;border-color:#fff}.gx-image-viewer-next{top:50%;right:40px;text-indent:2px;transform:translateY(-50%);width:44px;height:44px;font-size:24px;color:#fff;background-color:#606266;border-color:#fff}.viewer-fade-enter-active{animation:viewer-fade-in .3s}.viewer-fade-leave-active{animation:viewer-fade-out .3s}@keyframes viewer-fade-in{0%{opacity:0;transform:translate3d(0,-20px,0)}to{opacity:1;transform:translateZ(0)}}@keyframes viewer-fade-out{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,-20px,0)}}

package/dist/style.less

@@ -0,0 +1,177 @@
+@import './design/config.less';
+
+.size() {
+  width: 100%;
+  height: 100%;
+}
+
+.op-icon() {
+  width: 44px;
+  height: 44px;
+  font-size: 24px;
+  color: #fff;
+  background-color: #606266;
+  border-color: #fff;
+}
+
+.@{gx-prefix}-image {
+  position: relative;
+  display: inline-flex;
+  overflow: hidden;
+
+  &-inner {
+    .size();
+    vertical-align: top;
+
+    &.gx-image-inner-center {
+      position: relative;
+      top: 50%;
+      left: 50%;
+      display: block;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  &-placeholder {
+    .size();
+    background: #f5f7fa;
+  }
+
+  &-error {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .size();
+    font-size: 14px;
+    color: #c0c4cc;
+    vertical-align: middle;
+    background: #f5f7fa;
+  }
+
+  &-preview {
+    cursor: pointer;
+  }
+}
+
+.@{gx-prefix}-image-viewer {
+  &-group-item {
+    cursor: pointer;
+  }
+
+  &-wrapper {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  &-mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #000;
+    opacity: 0.5;
+  }
+
+  &-btn {
+    position: absolute;
+    z-index: 1;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    user-select: none;
+    border-radius: 50%;
+    opacity: 0.8;
+  }
+
+  &-close {
+    top: 40px;
+    right: 40px;
+    width: 40px;
+    height: 40px;
+    font-size: 40px;
+    .op-icon();
+  }
+
+  &-canvas {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  &-actions {
+    bottom: 30px;
+    left: 50%;
+    width: 282px;
+    height: 44px;
+    padding: 0 23px;
+    background-color: #606266;
+    border-color: #fff;
+    border-radius: 22px;
+    transform: translateX(-50%);
+
+    &-inner {
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      width: 100%;
+      height: 100%;
+      font-size: 23px;
+      color: #fff;
+      text-align: justify;
+      cursor: default;
+    }
+  }
+
+  &-prev {
+    top: 50%;
+    left: 40px;
+    transform: translateY(-50%);
+    .op-icon();
+  }
+
+  &-next {
+    top: 50%;
+    right: 40px;
+    text-indent: 2px;
+    transform: translateY(-50%);
+    .op-icon();
+  }
+}
+
+.viewer-fade-enter-active {
+  animation: viewer-fade-in 0.3s;
+}
+
+.viewer-fade-leave-active {
+  animation: viewer-fade-out 0.3s;
+}
+
+@keyframes viewer-fade-in {
+  0% {
+    opacity: 0;
+    transform: translate3d(0, -20px, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes viewer-fade-out {
+  0% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+  100% {
+    opacity: 0;
+    transform: translate3d(0, -20px, 0);
+  }
+}

package/dist/utils/aria.d.ts

@@ -0,0 +1,12 @@
+export declare const EVENT_CODE: {
+    tab: string;
+    enter: string;
+    space: string;
+    left: string;
+    up: string;
+    right: string;
+    down: string;
+    esc: string;
+    delete: string;
+    backspace: string;
+};

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@gx-design-vue/image",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "types": "vue-tsc --declaration --emitDeclarationOnly",
+    "preview": "vite preview --port 5050",
+    "test:unit": "vitest --environment jsdom",
+    "typecheck": "vue-tsc --noEmit && vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
+    "lint": "TIMING=1 eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+  },
+  "files": [
+    "dist"
+  ],
+  "types": "./dist",
+  "main": "./dist/image.umd.js",
+  "module": "./dist/image.mjs",
+  "exports": {
+    ".": {
+      "import": "./dist/image.mjs",
+      "require": "./dist/image.umd.js"
+    }
+  },
+  "dependencies": {
+    "@vueuse/core": "^6.8.0",
+    "@gx-design-vue/pro-utils": "0.0.6-rc.1",
+    "@gx-design-vue/pro-hooks": "^0.0.2-rc.1",
+    "ant-design-vue": "^3.2.15",
+    "vue": "^3.0.0",
+    "vue-types": "^4.1.1"
+  },
+  "devDependencies": {
+    "@shared/vite-plugin-less-copy": "workspace:^0.0.0",
+    "@rollup/plugin-typescript": "^8.3.0",
+    "@rushstack/eslint-patch": "^1.1.0",
+    "@types/lodash-es": "^4.17.6",
+    "@types/jsdom": "^16.2.14",
+    "@types/node": "^16.11.26",
+    "@vitejs/plugin-vue": "^3.1.0",
+    "@vitejs/plugin-vue-jsx": "^2.0.1",
+    "@vue/eslint-config-prettier": "^7.0.0",
+    "@vue/eslint-config-typescript": "^10.0.0",
+    "@vue/test-utils": "^2.0.0-rc.18",
+    "@vue/tsconfig": "^0.1.3",
+    "eslint": "^8.13.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^8.6.0",
+    "jsdom": "^19.0.0",
+    "less": "^4.1.2",
+    "postcss": "^8.4.12",
+    "postcss-html": "^1.4.1",
+    "postcss-less": "^6.0.0",
+    "prettier": "^2.6.2",
+    "rollup": "^2.70.2",
+    "stylelint": "^14.7.1",
+    "stylelint-config-prettier": "^9.0.3",
+    "stylelint-config-recommended": "^7.0.0",
+    "stylelint-config-recommended-vue": "^1.4.0",
+    "stylelint-config-standard": "^25.0.0",
+    "stylelint-order": "^5.0.0",
+    "typescript": "^4.6.4",
+    "vite": "^3.1.3",
+    "vue-eslint-parser": "^9.0.3",
+    "vue-tsc": "0.39.4"
+  },
+  "description": "Gx Design"
+}