@gx-design-vue/image 0.1.0 → 0.1.2

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 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"}})});
+(function(v,e){typeof exports=="object"&&typeof module!="undefined"?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!="undefined"?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";var de="",ue="",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}]);var H=Q;const 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gx-design-vue/image",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -15,10 +15,10 @@
   ],
   "types": "./dist",
   "main": "./dist/image.umd.js",
-  "module": "./dist/image.mjs",
+  "module": "./dist/image.es.js",
   "exports": {
     ".": {
-      "import": "./dist/image.mjs",
+      "import": "./dist/image.es.js",
       "require": "./dist/image.umd.js"
     },
     "./dist/style.css": "./dist/style.css",
@@ -26,9 +26,9 @@
   },
   "dependencies": {
     "@vueuse/core": "^9.10.0",
-    "@gx-design-vue/pro-utils": "^0.1.1",
-    "@gx-design-vue/pro-hooks": "^0.1.1",
-    "ant-design-vue": "^3.2.15",
+    "@gx-design-vue/pro-utils": "^0.1.4",
+    "@gx-design-vue/pro-hooks": "^0.1.5",
+    "ant-design-vue": "^3.2.17",
     "vue": "^3.2.45",
     "vue-types": "^4.1.1"
   },
@@ -39,8 +39,8 @@
     "@types/lodash-es": "^4.17.6",
     "@types/jsdom": "^16.2.14",
     "@types/node": "^16.11.26",
-    "@vitejs/plugin-vue": "^4.0.0",
-    "@vitejs/plugin-vue-jsx": "^3.0.0",
+    "@vitejs/plugin-vue": "^2.3.1",
+    "@vitejs/plugin-vue-jsx": "^1.3.10",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^10.0.0",
     "@vue/tsconfig": "^0.1.3",
@@ -61,9 +61,9 @@
     "stylelint-config-standard": "^25.0.0",
     "stylelint-order": "^5.0.0",
     "typescript": "^4.6.4",
-    "vite": "^4.0.4",
+    "vite": "^2.9.14",
     "vue-eslint-parser": "^9.0.3",
-    "vue-tsc": "0.39.4"
+    "vue-tsc": "^1.0.24"
   },
   "description": "Gx Design"
 }