@gx-design-vue/image 0.0.9 → 0.1.1

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!="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.0.9",
+  "version": "0.1.1",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -26,9 +26,9 @@
   },
   "dependencies": {
     "@vueuse/core": "^9.10.0",
-    "@gx-design-vue/pro-utils": "^0.0.34",
-    "@gx-design-vue/pro-hooks": "^0.0.12",
-    "ant-design-vue": "^3.2.15",
+    "@gx-design-vue/pro-utils": "^0.1.3",
+    "@gx-design-vue/pro-hooks": "^0.1.4",
+    "ant-design-vue": "^3.2.17",
     "vue": "^3.2.45",
     "vue-types": "^4.1.1"
   },
@@ -39,11 +39,10 @@
     "@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/test-utils": "^2.0.0-rc.18",
     "@vue/tsconfig": "^0.1.3",
     "eslint": "^8.13.0",
     "eslint-plugin-prettier": "^4.0.0",
@@ -62,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"
 }

package/dist/image.mjs

@@ -1,592 +0,0 @@
-import { createVNode as l, defineComponent as Z, ref as g, computed as b, watch as U, nextTick as oe, Fragment as re, resolveComponent as ue, cloneVNode as ve, Teleport as ce, isVNode as me, createTextVNode as ge, mergeProps as he } from "vue";
-import { ExpandOutlined as ye, OneToOneOutlined as we, CloseOutlined as be, LeftOutlined as pe, RightOutlined as Oe, ZoomOutOutlined as Ce, ZoomInOutlined as Ie, RotateLeftOutlined as ke, RotateRightOutlined as xe, LoadingOutlined as Le } from "@ant-design/icons-vue";
-import { 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
-};