(function(n,h){typeof exports=="object"&&typeof module<"u"?module.exports=h(require("vue")):typeof define=="function"&&define.amd?define(["vue"],h):(n=typeof globalThis<"u"?globalThis:n||self,n["vue3-image-viewer"]=h(n.Vue))})(this,function(n){"use strict";const h=typeof window>"u",k=function(){return h?function(e,t,s){e&&t&&s&&e.attachEvent("on"+t,s)}:function(e,t,s){e&&t&&s&&e.addEventListener(t,s,!1)}}(),E=function(){return h?function(e,t,s){e&&t&&e.detachEvent("on"+t,s)}:function(e,t,s){e&&t&&e.removeEventListener(t,s,!1)}}(),V=function(){return!h&&!!window.navigator.userAgent.match(/firefox/i)};function C(e){let t=!1;return function(...s){t||(t=!0,window.requestAnimationFrame(o=>{e.apply(this,s),t=!1}))}}function D(e){const t=new Image;t.setAttribute("crossOrigin","anonymous"),t.onload=function(){const s=document.createElement("canvas");s.width=t.width,s.height=t.height;const o=s.getContext("2d");o==null||o.drawImage(t,0,0,t.width,t.height);const f=s.toDataURL("image/png"),b=document.createElement("a"),i=new MouseEvent("click"),g=e.split("/"),y=g[g.length-1];b.download=y||"img",b.href=f,b.dispatchEvent(i)},t.src=e}const Z="",z=n.defineComponent({name:"ImageViewer",props:{curIndex:{type:Number,default:0},images:{type:Array,default:[]},showDownload:{type:Boolean,default:!1},showThumbnail:{type:Boolean,default:!1},handlePosition:{type:String,default:"bottom"},onClose:{type:Function,default:Function},onDownload:{type:Function,default:Function},zIndex:{type:Number,default:2e3},maskBgColor:{type:String,default:"rgba(0,0,0,0.5)"},zoomRate:{type:Number,default:.2},minScale:{type:Number,default:.2},maxScale:{type:Number,default:3}},setup(e){const t={CONTAIN:{name:"contain",icon:"icon-full-screen"},ORIGINAL:{name:"original",icon:"icon-c-scale-to-original"}},s=V()?"DOMMouseScroll":"mousewheel",o=n.reactive({mode:t.CONTAIN,visible:!1,curIndex:0,isMouseEnterThumbnail:!1,thumbnailTransitionShow:!1,transform:{scale:1,deg:0,rotateY:0,offsetX:0,offsetY:0,enableTransition:!1},dragHandler:()=>{},keyDownHandler:a=>{},mouseWheelHandler:()=>{}}),f=n.ref(),b=n.computed(()=>e.handlePosition=="bottom"?{top:"10px",bottom:"auto"}:{bottom:"10px",top:"auto"}),i=n.computed(()=>e.handlePosition=="bottom"?{bottom:e.showThumbnail&&e.images&&e.images.length>1?"100px":"30px",top:"auto"}:{top:"30px",bottom:"auto"}),g=n.computed(()=>{const{scale:a,deg:l,rotateY:c,offsetX:m,offsetY:r,enableTransition:d}=o.transform,u={transform:`scale(${a}) rotate(${l}deg) rotateY(${c}deg)`,transition:d?"transform .3s":"","margin-left":`${m}px`,"margin-top":`${r}px`,maxWidth:"",maxHeight:""};return o.mode.name===t.CONTAIN.name&&(u.maxWidth=u.maxHeight="100%"),u}),y=n.computed(()=>o.curIndex===0),q=n.computed(()=>o.curIndex===e.images.length-1),P=a=>{o.isMouseEnterThumbnail=a},p=a=>{if(!e.showThumbnail)return;o.curIndex=a;let l=f.value;if(!l)return;let c=l.clientWidth,m=l.scrollLeft,r=l.children[a].offsetLeft;c-r<160?c-r<0&&m===0?l.scrollLeft=r-c+160:l.scrollLeft=m+80:r-m<80&&(l.scrollLeft=r-120)},j=a=>{if(a.button!==0)return;const{offsetX:l,offsetY:c}=o.transform,m=a.pageX,r=a.pageY;o.dragHandler=C(d=>{o.transform.offsetX=l+d.pageX-m,o.transform.offsetY=c+d.pageY-r}),k(document,"mousemove",o.dragHandler),k(document,"mouseup",()=>{E(document,"mousemove",o.dragHandler)}),a.preventDefault()},I=()=>{if(y.value)return;const a=e.images.length;o.curIndex=(o.curIndex-1+a)%a,p(o.curIndex)},S=()=>{if(q.value)return;const a=e.images.length;o.curIndex=(o.curIndex+1)%a,p(o.curIndex)},U=()=>{o.keyDownHandler=a=>{switch(a.preventDefault(),a.keyCode){case 17:w("mirror");break;case 18:w("clockwise");break;case 27:N();break;case 32:T();break;case 37:I();break;case 38:w("zoomIn");break;case 39:S();break;case 40:w("zoomOut");break}},o.mouseWheelHandler=C(a=>{const l=a.wheelDelta?a.wheelDelta:-a.detail;if(o.isMouseEnterThumbnail){let c=-1,m=1,r=0;r=l>0?c*50:m*50,f.value&&(f.value.scrollLeft=f.value.scrollLeft+r)}else l>0?w("zoomIn",{zoomRate:e.zoomRate,enableTransition:!1}):w("zoomOut",{zoomRate:e.zoomRate,enableTransition:!1})}),k(document,"keydown",o.keyDownHandler),k(document,s,o.mouseWheelHandler)},G=()=>{E(document,"keydown",o.keyDownHandler),E(document,s,o.mouseWheelHandler),o.keyDownHandler=a=>{},o.mouseWheelHandler=()=>{}},w=(a,l={})=>{const{zoomRate:c,rotateDeg:m,enableTransition:r}={zoomRate:e.zoomRate,rotateDeg:90,enableTransition:!0,...l},{transform:d}=o;switch(a){case"zoomOut":if(d.scale>e.minScale){const u=parseFloat((d.scale/c).toFixed(3));d.scale=u<e.minScale?e.minScale:u}break;case"zoomIn":if(d.scale<e.maxScale){const u=parseFloat((d.scale*c).toFixed(3));d.scale=u>e.maxScale?e.maxScale:u}break;case"clockwise":d.deg+=m;break;case"anticlockwise":d.deg-=m;break;case"mirror":d.rotateY+=180;break}d.enableTransition=r},J=()=>{o.transform={scale:1,deg:0,rotateY:0,offsetX:0,offsetY:0,enableTransition:!1}},T=()=>{const a=Object.keys(t),l=Object.values(t),m=(l.findIndex(r=>r.name==o.mode.name)+1)%a.length;o.mode=l[m],J()},K=()=>{var a;D(e.images[o.curIndex]),(a=e.onDownload)==null||a.call(e,e.images[o.curIndex])},Q=()=>{N()},N=()=>{var a;document.body.style.overflow="",(a=e.onClose)==null||a.call(e),G(),o.visible=!1,o.thumbnailTransitionShow=!1};return n.onMounted(()=>{document.body.style.overflow="hidden",o.curIndex=e.curIndex,U(),o.visible=!0,n.nextTick(()=>{o.thumbnailTransitionShow=!0})}),{...n.toRefs(o),close:N,handleTapClose:Q,pre:I,next:S,thumbnailRef:f,imgStyle:g,handleMouseDown:j,sequenceStyle:b,actionStyle:i,handleActions:w,download:K,toggleMode:T,change:p,mouseEnterThumbnail:P}}}),ee="",$=(e,t)=>{const s=e.__vccOpts||e;for(const[o,f]of t)s[o]=f;return s},B=[n.createElementVNode("i",{class:"iconfont icon-close"},null,-1)],_=[n.createElementVNode("i",{class:"iconfont icon-arrow-left"},null,-1)],M=[n.createElementVNode("i",{class:"iconfont icon-arrow-right"},null,-1)],F={class:"tmd-image-viewer__image"},H=["src"],A={class:"tmd-image-viewer_actions__inner"},L=n.createElementVNode("span",{class:"tmd-image-viewer__actions__divider"},null,-1),O=n.createElementVNode("span",{class:"tmd-image-viewer__actions__divider"},null,-1),R=n.createElementVNode("span",{class:"tmd-image-viewer__actions__divider"},null,-1),Y=["onClick"],v=["src"];function x(e,t,s,o,f,b){return n.openBlock(),n.createBlock(n.Transition,{name:"viewer-fade"},{default:n.withCtx(()=>[n.withDirectives(n.createElementVNode("div",{tabindex:"-1",class:"tmd-image-viewer__wrapper",style:n.normalizeStyle(`z-index:${e.zIndex}`)},[n.createElementVNode("div",{class:"tmd-image-viewer__mask",style:n.normalizeStyle(`background-color:${e.maskBgColor};`),onClick:t[0]||(t[0]=(...i)=>e.handleTapClose&&e.handleTapClose(...i))},null,4),n.createElementVNode("span",{class:"tmd-image-viewer__btn tmd-image-viewer__close",onClick:t[1]||(t[1]=(...i)=>e.close&&e.close(...i))},B),e.images&&e.images.length>1?(n.openBlock(),n.createElementBlock("span",{key:0,class:"tmd-image-viewer__btn tmd-image-viewer__pre",onClick:t[2]||(t[2]=(...i)=>e.pre&&e.pre(...i))},_)):n.createCommentVNode("",!0),e.images&&e.images.length>1?(n.openBlock(),n.createElementBlock("span",{key:1,class:"tmd-image-viewer__btn tmd-image-viewer__next",onClick:t[3]||(t[3]=(...i)=>e.next&&e.next(...i))},M)):n.createCommentVNode("",!0),n.createElementVNode("div",F,[n.withDirectives(n.createElementVNode("img",{src:e.images[e.curIndex],style:n.normalizeStyle(e.imgStyle),onMousedown:t[4]||(t[4]=(...i)=>e.handleMouseDown&&e.handleMouseDown(...i))},null,44,H),[[n.vShow,e.images&&e.images.length>0&&e.images[e.curIndex]]])]),n.createElementVNode("div",{class:"tmd-image-viewer__actions",style:n.normalizeStyle(e.actionStyle)},[n.createElementVNode("div",A,[n.createElementVNode("span",{class:"iconfont icon-zoom-out",onClick:t[5]||(t[5]=i=>e.handleActions("zoomOut"))}),n.createElementVNode("span",{class:"iconfont icon-zoom-in",onClick:t[6]||(t[6]=i=>e.handleActions("zoomIn"))}),L,n.createElementVNode("span",{class:"iconfont icon-refresh-left",onClick:t[7]||(t[7]=i=>e.handleActions("anticlockwise"))}),n.createElementVNode("span",{class:"iconfont icon-refresh-right",onClick:t[8]||(t[8]=i=>e.handleActions("clockwise"))}),n.createElementVNode("span",{class:"iconfont icon-mirror",onClick:t[9]||(t[9]=i=>e.handleActions("mirror"))}),O,n.createElementVNode("span",{class:n.normalizeClass(["iconfont",e.mode.icon]),onClick:t[10]||(t[10]=(...i)=>e.toggleMode&&e.toggleMode(...i))},null,2),e.showDownload?(n.openBlock(),n.createElementBlock(n.Fragment,{key:0},[R,n.createElementVNode("span",{class:"iconfont icon-download",onClick:t[11]||(t[11]=(...i)=>e.download&&e.download(...i))})],64)):n.createCommentVNode("",!0)])],4),n.createVNode(n.Transition,{name:"thumbnail-fade",onAfterEnter:t[14]||(t[14]=i=>e.change(e.curIndex))},{default:n.withCtx(()=>[n.withDirectives(n.createElementVNode("div",{class:"tmd-image-viewer__thumbnail",ref:"thumbnailRef",onMouseenter:t[12]||(t[12]=i=>e.mouseEnterThumbnail(!0)),onMouseleave:t[13]||(t[13]=i=>e.mouseEnterThumbnail(!1))},[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(e.images,(i,g)=>(n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(["tmd-image-viewer__thumbnail__inner",{current:e.curIndex===g}]),key:i+"_thumbnail_"+g,onClick:y=>e.change(g)},[n.createElementVNode("img",{src:i},null,8,v)],10,Y))),128))],544),[[n.vShow,e.thumbnailTransitionShow&&e.showThumbnail&&e.images&&e.images.length>1]])]),_:1}),n.withDirectives(n.createElementVNode("span",{class:"tmd-image-viewer__sequence",style:n.normalizeStyle(e.sequenceStyle)},n.toDisplayString(e.curIndex+1)+" / "+n.toDisplayString(e.images.length),5),[[n.vShow,!e.showThumbnail]])],4),[[n.vShow,e.visible]])]),_:1})}const W=$(z,[["render",x]]),X={curIndex:0,images:[],showDownload:!1,showThumbnail:!1,handlePosition:"bottom",onClose:Function,onDownload:Function,zIndex:2e3,maskBgColor:"rgba(0,0,0,0.5)",zoomRate:1.2,minScale:.2,maxScale:5};return e=>{const t=document.createElement("div");t.className="tmd-image-viewer-container";const s={...X,...e,onClose:e.onClose||null,onDownload:e.onDownload||null},o=n.createVNode(W,s);o&&o.props&&(o.props.onDestroy=()=>{setTimeout(()=>{n.render(null,t)},300)}),n.render(o,t),t.firstElementChild&&document.body.appendChild(t.firstElementChild)}});