@gx-design-vue/image 0.0.9 → 0.1.0

package/dist/Image.d.ts

@@ -1,7 +1,7 @@
 import type { ExtractPropTypes } from 'vue';
 import { gImagePorps } from './props';
 import './style.less';
-export declare type GImageProps = Partial<ExtractPropTypes<typeof gImagePorps>>;
+export type GImageProps = Partial<ExtractPropTypes<typeof gImagePorps>>;
 declare const GImage: import("vue").DefineComponent<{
     appendToBody: {
         type: import("vue").PropType<boolean>;

package/dist/components/ImageViewer.d.ts

@@ -1,7 +1,7 @@
 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 type AnyFunction<T> = (...args: any[]) => T;
+export 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<{

package/dist/image.mjs

@@ -1,6 +1,6 @@
 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 { 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";
@@ -126,16 +126,16 @@ function q(e) {
     }));
   };
 }
-const fe = Z({
+const fe = /* @__PURE__ */ Z({
   props: ze,
   emits: ["close", "switch"],
   setup: function(e, {
     emit: a
   }) {
     let d = null, w = null, p = null;
-    const o = K({
+    const i = K({
       suffixCls: "image-viewer"
-    }), f = g(!0), h = g(e.initialIndex), k = g(null), x = g(null), O = g(V.CONTAIN), r = g({
+    }), 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,
@@ -151,13 +151,13 @@ const fe = Z({
         scale: n,
         deg: y,
         offsetX: t,
-        offsetY: i,
+        offsetY: r,
         enableTransition: c
-      } = r.value, m = {
+      } = o.value, m = {
         transform: `scale(${n}) rotate(${y}deg)`,
         transition: c ? "transform .3s" : "",
         marginLeft: `${t}px`,
-        marginTop: `${i}px`
+        marginTop: `${r}px`
       };
       return O.value.name === V.CONTAIN.name && (m.maxWidth = m.maxHeight = "100%"), m;
     }), z = () => {
@@ -200,25 +200,25 @@ const fe = Z({
     }, E = () => {
       f.value = !1;
     }, D = (n) => {
-      f.value = !1, n.target.alt = "\u52A0\u8F7D\u5931\u8D25";
+      f.value = !1, n.target.alt = "加载失败";
     }, H = (n) => {
       if (f.value || n.button !== 0)
         return;
       const {
         offsetX: y,
         offsetY: t
-      } = r.value, i = n.pageX, c = n.pageY;
+      } = o.value, r = n.pageX, c = n.pageY;
       p = q((m) => {
-        r.value = {
-          ...r.value,
-          offsetX: y + m.pageX - i,
+        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 = () => {
-      r.value = {
+      o.value = {
         scale: 1,
         deg: 0,
         offsetX: 0,
@@ -245,7 +245,7 @@ const fe = Z({
         return;
       const {
         zoomRate: t,
-        rotateDeg: i,
+        rotateDeg: r,
         enableTransition: c
       } = {
         zoomRate: 0.2,
@@ -255,19 +255,19 @@ const fe = Z({
       };
       switch (n) {
         case "zoomOut":
-          r.value.scale > 0.2 && (r.value.scale = parseFloat((r.value.scale - t).toFixed(3)));
+          o.value.scale > 0.2 && (o.value.scale = parseFloat((o.value.scale - t).toFixed(3)));
           break;
         case "zoomIn":
-          r.value.scale = parseFloat((r.value.scale + t).toFixed(3));
+          o.value.scale = parseFloat((o.value.scale + t).toFixed(3));
           break;
         case "clocelise":
-          r.value.deg += i;
+          o.value.deg += r;
           break;
         case "anticlocelise":
-          r.value.deg -= i;
+          o.value.deg -= r;
           break;
       }
-      r.value.enableTransition = c;
+      o.value.enableTransition = c;
     };
     return U(I, () => {
       oe(() => {
@@ -281,50 +281,50 @@ const fe = Z({
     }), () => l("div", {
       ref: (n) => k.value = n,
       tabindex: 1,
-      class: [`${o}-wrapper`, `${L.value}`],
+      class: [`${i}-wrapper`, `${L.value}`],
       style: {
         zIndex: e.zIndex
       }
     }, [l("div", {
-      class: `${o}-mask`,
+      class: `${i}-mask`,
       onClick: () => e.onHideOnClickModal && z()
     }, null), l("span", {
-      class: [`${o}-btn`, `${o}-close`],
+      class: [`${i}-btn`, `${i}-close`],
       onClick: () => z()
     }, [l(be, null, null)]), !u.value && l(re, null, [l("span", {
       class: {
-        [`${o}-btn`]: !0,
-        [`${o}-prev`]: !0,
+        [`${i}-btn`]: !0,
+        [`${i}-prev`]: !0,
         ["is-disabled"]: !e.infinite && s.value
       },
       onClick: () => R()
     }, [l(pe, null, null)]), l("span", {
       class: {
-        [`${o}-btn`]: !0,
-        [`${o}-next`]: !0,
+        [`${i}-btn`]: !0,
+        [`${i}-next`]: !0,
         ["is-disabled"]: !e.infinite && s.value
       },
       onClick: () => j()
     }, [l(Oe, null, null)])]), l("div", {
-      class: [`${o}-btn`, `${o}-actions`]
+      class: [`${i}-btn`, `${i}-actions`]
     }, [l("div", {
-      class: `${o}-actions-inner`
+      class: `${i}-actions-inner`
     }, [l(Ce, {
       onClick: () => C("zoomOut")
     }, null), l(Ie, {
       onClick: () => C("zoomIn")
     }, null), l("i", {
-      class: `${o}-actions-divider`
+      class: `${i}-actions-divider`
     }, null), l("i", {
       onClick: () => M()
     }, [O.value.icon]), l("i", {
-      class: `${o}-actions-divider`
+      class: `${i}-actions-divider`
     }, null), l(ke, {
       onClick: () => C("anticlocelise")
     }, null), l(xe, {
       onClick: () => C("clocelise")
     }, null)])]), f.value && l("div", {
-      class: `${o}-canvas`
+      class: `${i}-canvas`
     }, [l(ue("a-spin"), {
       indicator: l(Le, {
         style: {
@@ -333,10 +333,10 @@ const fe = Z({
         }
       }, null)
     }, null)]), l("div", {
-      class: `${o}-canvas`
+      class: `${i}-canvas`
     }, [e.urlList.map((n, y) => l("img", {
       ref: (t) => x.value = t,
-      class: `${o}-img`,
+      class: `${i}-img`,
       key: n,
       style: {
         ...A.value,
@@ -353,7 +353,7 @@ function Fe(e) {
   return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !me(e);
 }
 let le = "";
-const Ge = Z({
+const Ge = /* @__PURE__ */ Z({
   props: {
     hideOnClickModal: P.hideOnClickModal
   },
@@ -362,16 +362,16 @@ const Ge = Z({
   }) {
     const d = K({
       suffixCls: "image-viewer-group"
-    }), w = g(!1), p = g(""), o = b(() => {
+    }), 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(() => 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 = () => {
+    }), 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);
-    }, r = () => {
+    }, o = () => {
       document.body.style.overflow = le, w.value = !1;
     };
     return () => {
@@ -380,7 +380,7 @@ const Ge = Z({
         class: `${d}`
       }, [l(ue("a-space"), {
         size: 15
-      }, Fe(u = o.value.map((s, v) => k(s) ? l("div", {
+      }, Fe(u = i.value.map((s, v) => k(s) ? l("div", {
         key: v,
         class: `${d}-item`,
         onClick: () => {
@@ -398,7 +398,7 @@ const Ge = Z({
           initialIndex: x(),
           urlList: f.value,
           onHideOnClickModal: e.hideOnClickModal,
-          onClose: () => r()
+          onClose: () => o()
         }, null)]
       })]);
     };
@@ -411,7 +411,7 @@ const N = {
   COVER: "cover",
   FILL: "fill",
   SCALE_DOWN: "scale-down"
-}, G = Z({
+}, G = /* @__PURE__ */ Z({
   props: P,
   name: "GImage",
   inheritAttrs: !1,
@@ -423,7 +423,7 @@ const N = {
   }) {
     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();
+    }), 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,
@@ -452,23 +452,23 @@ const N = {
     }), z = b(() => {
       const {
         src: t,
-        previewSrcList: i
+        previewSrcList: r
       } = e;
       let c = 0;
-      const m = i.indexOf(t);
+      const m = r.indexOf(t);
       return m >= 0 && (c = m), c;
     }), S = b(() => w), W = (t) => {
-      const i = e.width || h.value, c = e.height || k.value;
+      const r = 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)
+      if (!r || !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) {
+      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",
@@ -493,35 +493,34 @@ const N = {
       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) => {
+      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];
-        i.setAttribute(c, m);
-      }), i.src = e.src;
+        r.setAttribute(c, m);
+      }), r.src = e.src;
     };
     function D() {
-      Se(O.value, r.value) && (E(), M());
+      Se(O.value, o.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));
+      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 || !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;
+      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, o.value = !0, d("error", t);
+      f.value = !1, i.value = !0, d("error", t);
     }, C = (t) => {
-      if (!!t.ctrlKey) {
+      if (t.ctrlKey) {
         if (t.deltaY < 0)
           return t.preventDefault(), !1;
         if (t.deltaY > 0)
@@ -535,11 +534,11 @@ const N = {
       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();
+      e.lazy ? (f.value = !0, i.value = !1, M(), F()) : E();
     }), se(() => {
       e.lazy ? F() : E();
     }), () => {
-      const t = ee(a, e, "fallback"), i = ee(a, e, "placeholder");
+      const t = ee(a, e, "fallback"), r = ee(a, e, "placeholder");
       return l(re, null, [l("div", {
         class: {
           [`${p}`]: !0,
@@ -553,11 +552,11 @@ const N = {
         onClick: () => {
           d("click");
         }
-      }, [f.value ? i || l("div", {
+      }, [f.value ? r || l("div", {
         class: `${p}-placeholder`
-      }, null) : o.value ? t || l("div", {
+      }, null) : i.value ? t || l("div", {
         class: `${p}-error`
-      }, [ge("\u52A0\u8F7D\u5931\u8D25")]) : l("img", he({
+      }, [ge("加载失败")]) : l("img", he({
         class: {
           [`${p}-inner`]: !0,
           [`${p}-inner-center`]: L.value,

package/dist/image.umd.js

@@ -1 +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"}})});
+(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 o=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),r=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:i,enableTransition:s}=r.value,g={transform:`scale(${a}) rotate(${y}deg)`,transition:s?"transform .3s":"",marginLeft:`${n}px`,marginTop:`${i}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="加载失败"},P=a=>{if(f.value||a.button!==0)return;const{offsetX:y,offsetY:n}=r.value,i=a.pageX,s=a.pageY;b=B(g=>{r.value={...r.value,offsetX:y+g.pageX-i,offsetY:n+g.pageY-s}}),R(document,"mousemove",b),R(document,"mouseup",()=>{q(document,"mousemove",b)}),a.preventDefault()},M=()=>{r.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:i,enableTransition:s}={zoomRate:.2,rotateDeg:90,enableTransition:!0,...y};switch(a){case"zoomOut":r.value.scale>.2&&(r.value.scale=parseFloat((r.value.scale-n).toFixed(3)));break;case"zoomIn":r.value.scale=parseFloat((r.value.scale+n).toFixed(3));break;case"clocelise":r.value.deg+=i;break;case"anticlocelise":r.value.deg-=i;break}r.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:[`${o}-wrapper`,`${S.value}`],style:{zIndex:t.zIndex}},[e.createVNode("div",{class:`${o}-mask`,onClick:()=>t.onHideOnClickModal&&z()},null),e.createVNode("span",{class:[`${o}-btn`,`${o}-close`],onClick:()=>z()},[e.createVNode(O.CloseOutlined,null,null)]),!c.value&&e.createVNode(e.Fragment,null,[e.createVNode("span",{class:{[`${o}-btn`]:!0,[`${o}-prev`]:!0,["is-disabled"]:!t.infinite&&d.value},onClick:()=>G()},[e.createVNode(O.LeftOutlined,null,null)]),e.createVNode("span",{class:{[`${o}-btn`]:!0,[`${o}-next`]:!0,["is-disabled"]:!t.infinite&&d.value},onClick:()=>Y()},[e.createVNode(O.RightOutlined,null,null)])]),e.createVNode("div",{class:[`${o}-btn`,`${o}-actions`]},[e.createVNode("div",{class:`${o}-actions-inner`},[e.createVNode(O.ZoomOutOutlined,{onClick:()=>C("zoomOut")},null),e.createVNode(O.ZoomInOutlined,{onClick:()=>C("zoomIn")},null),e.createVNode("i",{class:`${o}-actions-divider`},null),e.createVNode("i",{onClick:()=>D()},[p.value.icon]),e.createVNode("i",{class:`${o}-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:`${o}-canvas`},[e.createVNode(e.resolveComponent("a-spin"),{indicator:e.createVNode(O.LoadingOutlined,{style:{color:"#fff",fontSize:"40px"}},null)},null)]),e.createVNode("div",{class:`${o}-canvas`},[t.urlList.map((a,y)=>e.createVNode("img",{ref:n=>x.value=n,class:`${o}-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(""),o=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(()=>o.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)},r=()=>{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=o.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:()=>r()},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"}),o=e.ref(!1),f=e.ref(!0),h=e.ref(0),I=e.ref(0),x=e.ref(!1),p=e.ref(null),r=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:i}=t;let s=0;const g=i.indexOf(n);return g>=0&&(s=g),s}),L=e.computed(()=>N),Z=n=>{const i=t.width||h.value,s=t.height||I.value;if(!p.value)return{};const{clientWidth:g,clientHeight:K}=p.value;if(!i||!s||!g||!K)return{};const ae=i/s,le=g/K;switch(n===V.SCALE_DOWN&&(n=i<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,o.value=!1;const i=new Image;i.onload=s=>G(s,i),i.onerror=Y,Object.keys(n).forEach(s=>{if(s.toLowerCase()==="onload")return;const g=n[s];i.setAttribute(s,g)}),i.src=t.src};function _(){w.isInContainer(p.value,r.value)&&(F(),D())}const P=W.useThrottleFn(_,200),M=async()=>{if(w.isServer)return;await e.nextTick();const{scrollContainer:n}=t;se(n)?r.value=n:w.isString(n)&&n!==""?r.value=document.querySelector(n)??void 0:p.value&&(r.value=w.getScrollContainer(p.value)),r.value&&(c=W.useEventListener(r,"scroll",P),setTimeout(()=>_(),200))},D=()=>{w.isServer||!r.value||!P||(c(),r.value=void 0)},G=(n,i)=>{h.value=i.width,I.value=i.height,f.value=!1,o.value=!1},Y=n=>{f.value=!1,o.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,o.value=!1,D(),M()):F()}),J.onMountedOrActivated(()=>{t.lazy?M():F()}),()=>{const n=w.getSlotVNode(l,t,"fallback"),i=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?i||e.createVNode("div",{class:`${b}-placeholder`},null):o.value?n||e.createVNode("div",{class:`${b}-error`},[e.createTextVNode("加载失败")]):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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gx-design-vue/image",
-  "version": "0.0.9",
+  "version": "0.1.0",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -26,8 +26,8 @@
   },
   "dependencies": {
     "@vueuse/core": "^9.10.0",
-    "@gx-design-vue/pro-utils": "^0.0.34",
-    "@gx-design-vue/pro-hooks": "^0.0.12",
+    "@gx-design-vue/pro-utils": "^0.1.1",
+    "@gx-design-vue/pro-hooks": "^0.1.1",
     "ant-design-vue": "^3.2.15",
     "vue": "^3.2.45",
     "vue-types": "^4.1.1"
@@ -43,7 +43,6 @@
     "@vitejs/plugin-vue-jsx": "^3.0.0",
     "@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",