vue-easy-lightbox
Version:
A Vue.js 3.0 image lightbox component with Zoom / Drag / Rotate / Switch
2 lines (1 loc) • 22.9 kB
JavaScript
;Object.defineProperty(exports,"__esModule",{value:!0});var e=require("vue");const t="vel",o=e.defineComponent({name:"SvgIcon",props:{type:{type:String,default:""}},setup:o=>()=>e.createVNode("svg",{class:`${t}-icon icon`,"aria-hidden":"true"},[e.createVNode("use",{"xlink:href":`#icon-${o.type}`},null)])}),l="undefined"!=typeof window,a=()=>{};let n=!1;if(l)try{const e={};Object.defineProperty(e,"passive",{get(){n=!0}}),window.addEventListener("test-passive",a,e)}catch(e){}const r=function(e,t,o){let a=arguments.length>3&&void 0!==arguments[3]&&arguments[3];l&&e.addEventListener(t,o,!!n&&{capture:!1,passive:a})},i=(e,t,o)=>{l&&e.removeEventListener(t,o)},c=e=>{e.preventDefault()},s=Object.prototype.toString,d=e=>t=>s.call(t).slice(8,-1)===e;const u=e=>!!e&&d("Object")(e),g=e=>!!e&&d("String")(e);function v(e){return null!=e}const m=e.defineComponent({name:"Toolbar",props:{zoomIn:{type:Function,default:a},zoomOut:{type:Function,default:a},rotateLeft:{type:Function,default:a},rotateRight:{type:Function,default:a},resize:{type:Function,default:a},rotateDisabled:{type:Boolean,default:!1},zoomDisabled:{type:Boolean,default:!1}},setup:l=>()=>e.createVNode("div",{class:`${t}-toolbar`},[!l.zoomDisabled&&e.createVNode(e.Fragment,null,[e.createVNode("div",{role:"button","aria-label":"zoom in button",class:"toolbar-btn toolbar-btn__zoomin",onClick:l.zoomIn},[e.createVNode(o,{type:"zoomin"},null)]),e.createVNode("div",{role:"button","aria-label":"zoom out button",class:"toolbar-btn toolbar-btn__zoomout",onClick:l.zoomOut},[e.createVNode(o,{type:"zoomout"},null)])]),e.createVNode("div",{role:"button","aria-label":"resize image button",class:"toolbar-btn toolbar-btn__resize",onClick:l.resize},[e.createVNode(o,{type:"resize"},null)]),!l.rotateDisabled&&e.createVNode(e.Fragment,null,[e.createVNode("div",{role:"button","aria-label":"image rotate left button",class:"toolbar-btn toolbar-btn__rotate",onClick:l.rotateLeft},[e.createVNode(o,{type:"rotate-left"},null)]),e.createVNode("div",{role:"button","aria-label":"image rotate right button",class:"toolbar-btn toolbar-btn__rotate",onClick:l.rotateRight},[e.createVNode(o,{type:"rotate-right"},null)])])])}),p=()=>e.createVNode("div",{class:`${t}-loading`},[e.createVNode("div",{class:"ring"},null)]),b=()=>e.createVNode("div",{class:`${t}-on-error`},[e.createVNode("div",{class:"ring"},null),e.createVNode(o,{type:"img-broken"},null)]),f=(o,l)=>{let{slots:a}=l;return e.createVNode("div",{class:`${t}-img-title`},[a.default?a.default():""])},h=e.defineComponent({name:"DefaultIcons",setup:()=>()=>e.createVNode("svg",{"aria-hidden":!0,style:"position: absolute; width: 0; height: 0; overflow: hidden; visibility: hidden;"},[e.createVNode("symbol",{id:"icon-rotate-right",viewBox:"0 0 1024 1024"},[e.createVNode("path",{d:"M275.199914 450.496179v20.031994c0.384-38.079988 12.543996-67.423979 36.479989-87.967973 22.431993-20.351994 49.215985-30.55999 80.319975-30.55999 32.06399 0 59.295981 10.175997 81.759974 30.55999 22.815993 20.543994 34.591989 49.887984 35.359989 87.967973v123.935961c-0.768 37.887988-12.543996 67.135979-35.359989 87.679973-22.431993 20.351994-49.695984 30.75199-81.759974 31.10399a120.255962 120.255962 0 0 1-72.991978-24.895992c-21.503993-15.839995-35.359989-38.751988-41.567987-68.735979h60.831981c9.247997 23.007993 27.167992 34.495989 53.759983 34.49599 37.535988-0.384 56.863982-21.407993 57.983982-63.071981v-38.751988c-28.095991 8.863997-54.303983 13.119996-78.623975 12.735996a91.263971 91.263971 0 0 1-68.447979-27.711991c-18.847994-18.303994-28.095991-47.231985-27.711991-86.847973z m62.55998 24.863992c7.103998 24.799992 25.215992 37.343988 54.271983 37.663989 27.103992-0.288 44.703986-11.327996 52.831984-33.11999 3.135999-8.383997 2.655999-29.599991-1.28-38.559988-8.607997-19.615994-25.791992-29.695991-51.551984-30.20799-28.383991 0.576-46.303986 12.639996-53.759983 36.159988a58.719982 58.719982 0 0 0-0.512 28.063991z m390.335878 115.711964v-116.895963c-1.12-41.311987-20.447994-62.335981-57.983981-63.07198-37.727988 0.768-56.959982 21.791993-57.695982 63.07198v116.895963c0.768 41.663987 19.999994 62.68798 57.695982 63.071981 37.535988-0.384 56.863982-21.407993 57.983981-63.071981z m-174.815945 3.391999v-123.935961c0.384-38.079988 12.543996-67.423979 36.479989-87.967973 22.431993-20.351994 49.215985-30.55999 80.319975-30.55999 32.06399 0 59.295981 10.175997 81.759974 30.55999 22.815993 20.543994 34.591989 49.887984 35.359989 87.967973v123.935961c-0.768 37.887988-12.543996 67.135979-35.359989 87.679973-22.431993 20.351994-49.695984 30.75199-81.759974 31.10399-31.10399-0.384-57.887982-10.751997-80.319975-31.10399-23.935993-20.543994-36.127989-49.791984-36.479989-87.679973z m282.559912-479.07185A509.887841 509.887841 0 0 0 511.99984 0.00032C229.215928 0.00032 0 229.216248 0 512.00016s229.215928 511.99984 511.99984 511.99984 511.99984-229.215928 511.99984-511.99984c0-3.743999-0.032-7.455998-0.128-11.167997-1.631999-11.295996-8.159997-27.103992-31.87199-27.103991-27.487991 0-31.67999 21.247993-32.03199 32.06399l0.032 4.127999a30.62399 30.62399 0 0 0 0.16 2.079999H959.9997c0 247.423923-200.575937 447.99986-447.99986 447.99986S63.99998 759.424083 63.99998 512.00016 264.575917 64.0003 511.99984 64.0003a446.079861 446.079861 0 0 1 277.439913 96.22397l-94.91197 91.679971c-25.439992 24.607992-17.439995 44.991986 17.887994 45.599986l188.031942 3.295999a64.31998 64.31998 0 0 0 65.055979-62.84798l3.295999-188.127942C969.407697 15.040315 949.311703 5.792318 923.871711 30.368311l-87.999972 85.023973z",fill:""},null)]),e.createVNode("symbol",{id:"icon-rotate-left",viewBox:"0 0 1024 1024"},[e.createVNode("path",{d:"M275.199914 450.496179v20.031994c0.384-38.079988 12.543996-67.423979 36.479989-87.967973 22.431993-20.351994 49.215985-30.55999 80.319975-30.55999 32.06399 0 59.295981 10.175997 81.759974 30.55999 22.815993 20.543994 34.591989 49.887984 35.359989 87.967973v123.935961c-0.768 37.887988-12.543996 67.135979-35.359989 87.679973-22.431993 20.351994-49.695984 30.75199-81.759974 31.10399a120.255962 120.255962 0 0 1-72.991978-24.895992c-21.503993-15.839995-35.359989-38.751988-41.567987-68.735979h60.831981c9.247997 23.007993 27.167992 34.495989 53.759983 34.49599 37.535988-0.384 56.863982-21.407993 57.983982-63.071981v-38.751988c-28.095991 8.863997-54.303983 13.119996-78.623975 12.735996a91.263971 91.263971 0 0 1-68.447979-27.711991c-18.847994-18.303994-28.095991-47.231985-27.711991-86.847973z m62.55998 24.863992c7.103998 24.799992 25.215992 37.343988 54.271983 37.663989 27.103992-0.288 44.703986-11.327996 52.831984-33.11999 3.135999-8.383997 2.655999-29.599991-1.28-38.559988-8.607997-19.615994-25.791992-29.695991-51.551984-30.20799-28.383991 0.576-46.303986 12.639996-53.759983 36.159988a58.719982 58.719982 0 0 0-0.512 28.063991z m390.335878 115.711964v-116.895963c-1.12-41.311987-20.447994-62.335981-57.983981-63.07198-37.727988 0.768-56.959982 21.791993-57.695982 63.07198v116.895963c0.768 41.663987 19.999994 62.68798 57.695982 63.071981 37.535988-0.384 56.863982-21.407993 57.983981-63.071981z m-174.815945 3.391999v-123.935961c0.384-38.079988 12.543996-67.423979 36.479989-87.967973 22.431993-20.351994 49.215985-30.55999 80.319975-30.55999 32.06399 0 59.295981 10.175997 81.759974 30.55999 22.815993 20.543994 34.591989 49.887984 35.359989 87.967973v123.935961c-0.768 37.887988-12.543996 67.135979-35.359989 87.679973-22.431993 20.351994-49.695984 30.75199-81.759974 31.10399-31.10399-0.384-57.887982-10.751997-80.319975-31.10399-23.935993-20.543994-36.127989-49.791984-36.479989-87.679973zM188.159941 115.392284A509.887841 509.887841 0 0 1 511.99984 0.00032c282.783912 0 511.99984 229.215928 511.99984 511.99984s-229.215928 511.99984-511.99984 511.99984S0 794.784072 0 512.00016c0-3.743999 0.032-7.455998 0.128-11.167997 1.631999-11.295996 8.159997-27.103992 31.87199-27.103991 27.487991 0 31.67999 21.247993 32.03199 32.06399L63.99998 509.920161a30.62399 30.62399 0 0 1-0.16 2.079999H63.99998c0 247.423923 200.575937 447.99986 447.99986 447.99986s447.99986-200.575937 447.99986-447.99986S759.423763 64.0003 511.99984 64.0003a446.079861 446.079861 0 0 0-277.439913 96.22397l94.91197 91.679971c25.439992 24.607992 17.439995 44.991986-17.887994 45.599986L123.551961 300.800226a64.31998 64.31998 0 0 1-65.055979-62.84798l-3.295999-188.127942C54.591983 15.040315 74.687977 5.792318 100.127969 30.368311l87.999972 85.023973z",fill:""},null)]),e.createVNode("symbol",{id:"icon-resize",viewBox:"0 0 1024 1024"},[e.createVNode("path",{d:"M456.036919 791.8108 270.553461 791.8108 460.818829 601.572038l-39.593763-39.567157L231.314785 751.915162l0.873903-183.953615c0-15.465227-12.515035-27.981285-27.981285-27.981285s-27.981285 12.515035-27.981285 27.981285l0 251.829516c0 8.3072 3.415796 14.975063 8.826016 19.564591 5.082762 5.192256 12.132318 8.416693 19.947308 8.416693l251.036453 0c15.46625 0 27.981285-12.514012 27.981285-27.981285C484.018204 804.325835 471.504192 791.8108 456.036919 791.8108zM838.945819 184.644347c-5.082762-5.191232-12.132318-8.416693-19.947308-8.416693L567.961034 176.227654c-15.46625 0-27.981285 12.515035-27.981285 27.981285 0 15.46625 12.514012 27.981285 27.981285 27.981285l185.483458 0L563.206754 422.427962l39.567157 39.567157 189.910281-189.910281-0.873903 183.953615c0 15.46625 12.514012 27.981285 27.981285 27.981285s27.981285-12.514012 27.981285-27.981285L847.772858 204.208938C847.771835 195.902762 844.356039 189.234899 838.945819 184.644347zM847.771835 64.303538 176.227142 64.303538c-61.809741 0-111.924115 50.115398-111.924115 111.924115l0 671.544693c0 61.809741 50.114374 111.924115 111.924115 111.924115l671.544693 0c61.809741 0 111.924115-50.114374 111.924115-111.924115l0-671.544693C959.69595 114.418936 909.581576 64.303538 847.771835 64.303538zM903.733381 847.772346c0 30.878265-25.056676 55.962569-55.962569 55.962569L176.227142 903.734916c-30.90487 0-55.962569-25.084305-55.962569-55.962569l0-671.544693c0-30.9325 25.056676-55.962569 55.962569-55.962569l671.544693 0c30.90487 0 55.962569 25.03007 55.962569 55.962569L903.734404 847.772346z"},null)]),e.createVNode("symbol",{id:"icon-img-broken",viewBox:"0 0 1024 1024"},[e.createVNode("path",{d:"M810.666667 128H213.333333c-46.933333 0-85.333333 38.4-85.333333 85.333333v597.333334c0 46.933333 38.4 85.333333 85.333333 85.333333h597.333334c46.933333 0 85.333333-38.4 85.333333-85.333333V213.333333c0-46.933333-38.4-85.333333-85.333333-85.333333z m0 682.666667H213.333333v-195.413334l42.24 42.24 170.666667-170.666666 170.666667 170.666666 170.666666-170.24L810.666667 530.346667V810.666667z m0-401.493334l-43.093334-43.093333-170.666666 171.093333-170.666667-170.666666-170.666667 170.666666-42.24-42.666666V213.333333h597.333334v195.84z"},null)]),e.createVNode("symbol",{id:"icon-prev",viewBox:"0 0 1024 1024"},[e.createVNode("path",{d:"M784.652701 955.6957 346.601985 517.644983c-2.822492-2.822492-2.822492-7.902977 0-11.289967l439.179713-439.179713c6.77398-6.77398 10.725469-16.370452 10.725469-25.966924L796.507166 36.692393c0-20.32194-16.370452-36.692393-36.692393-36.692393l-4.515987 0c-9.596472 0-19.192944 3.951488-25.966924 10.725469L250.072767 489.420066c-12.418964 12.418964-12.418964 32.740904 0 45.159868l477.565601 477.565601c7.338479 7.338479 17.499449 11.854465 28.224917 11.854465l0 0c22.015436 0 40.079383-18.063947 40.079383-40.079383l0 0C796.507166 973.759647 791.99118 963.598677 784.652701 955.6957z"},null)]),e.createVNode("symbol",{id:"icon-next",viewBox:"0 0 1024 1024"},[e.createVNode("path",{d:"M246.121279 955.6957l438.050717-438.050717c2.822492-2.822492 2.822492-7.902977 0-11.289967L244.992282 67.175303c-6.77398-6.77398-10.725469-16.370452-10.725469-25.966924L234.266814 36.692393C234.266814 16.370452 250.637266 0 270.959206 0l4.515987 0c9.596472 0 19.192944 3.951488 25.966924 10.725469l478.694598 478.694598c12.418964 12.418964 12.418964 32.740904 0 45.159868l-477.565601 477.565601c-7.338479 7.338479-17.499449 11.854465-28.224917 11.854465l0 0c-22.015436 0-40.079383-18.063947-40.079383-40.079383l0 0C234.266814 973.759647 238.7828 963.598677 246.121279 955.6957z"},null)]),e.createVNode("symbol",{id:"icon-zoomin",viewBox:"0 0 1024 1024"},[e.createVNode("path",{d:"M725.504 652.864c46.4-61.44 71.744-136.448 71.744-218.752C797.248 230.464 632.768 64 430.656 64S64 230.464 64 434.112C64 639.36 228.48 805.76 430.656 805.76c86.656 0 164.48-30.144 227.52-81.088L889.984 960 960 891.264l-234.496-238.4z m-294.848 67.456c-155.776 0-282.624-128.896-282.624-286.208s126.848-286.208 282.624-286.208 282.624 128.896 282.624 286.208-126.912 286.208-282.624 286.208z"},null),e.createVNode("path",{d:"M235.712 369.92h390.72v127.104H235.712z"},null),e.createVNode("path",{d:"M367.488 238.144h127.104v390.72H367.488z"},null)]),e.createVNode("symbol",{id:"icon-close",viewBox:"0 0 1024 1024"},[e.createVNode("path",{d:"M570.24 512l259.2 259.2-58.88 58.24L512 570.24l-261.12 261.12-58.24-58.24L453.76 512 194.56 252.8l58.24-58.24L512 453.76l261.12-261.12 58.24 58.24z"},null)]),e.createVNode("symbol",{id:"icon-zoomout",viewBox:"0 0 1024 1024"},[e.createVNode("path",{d:"M725.504 652.864c46.4-61.44 71.744-136.448 71.744-218.752C797.248 230.464 632.768 64 430.656 64S64 230.464 64 434.112C64 639.36 228.48 805.76 430.656 805.76c86.656 0 164.48-30.144 227.52-81.088L889.984 960 960 891.264l-234.496-238.4z m-294.848 67.456c-155.776 0-282.624-128.896-282.624-286.208s126.848-286.208 282.624-286.208 282.624 128.896 282.624 286.208-126.912 286.208-282.624 286.208z"},null),e.createVNode("path",{d:"M235.712 369.92h390.72v127.104H235.712z"},null)])])}),y=l?window:global;let N=Date.now();function V(e){const t=Date.now(),o=Math.max(0,16-(t-N)),l=setTimeout(e,o);return N=t+o,l}function z(e){return(y.requestAnimationFrame||V).call(y,e)}function x(e){(y.cancelAnimationFrame||y.clearTimeout).call(y,e)}function w(e,t){const o=e.clientX-t.clientX,l=e.clientY-t.clientY;return Math.sqrt(o*o+l*l)}function D(t){return"function"==typeof t||"[object Object]"===Object.prototype.toString.call(t)&&!e.isVNode(t)}var M=e.defineComponent({name:"VueEasyLightbox",props:{imgs:{type:[Array,String],default:()=>""},visible:{type:Boolean,default:!1},index:{type:Number,default:0},scrollDisabled:{type:Boolean,default:!0},escDisabled:{type:Boolean,default:!1},moveDisabled:{type:Boolean,default:!1},titleDisabled:{type:Boolean,default:!1},maskClosable:{type:Boolean,default:!0},teleport:{type:[String,Object],default:null},swipeTolerance:{type:Number,default:50},loop:{type:Boolean,default:!1},rtl:{type:Boolean,default:!1},zoomScale:{type:Number,default:.12},maxZoom:{type:Number,default:3},minZoom:{type:Number,default:.1},rotateDisabled:{type:Boolean,default:!1},zoomDisabled:{type:Boolean,default:!1},pinchDisabled:{type:Boolean,default:!1},dblclickDisabled:{type:Boolean,default:!1}},emits:{hide:()=>!0,"on-error":e=>!0,"on-prev":(e,t)=>!0,"on-next":(e,t)=>!0,"on-prev-click":(e,t)=>!0,"on-next-click":(e,t)=>!0,"on-index-change":(e,t)=>!0,"on-rotate":e=>!0},setup(l,a){let{emit:n,slots:s}=a;const{imgRef:y,imgState:N,setImgSize:V}=(()=>{const t=e.ref(),o=e.reactive({width:0,height:0,maxScale:1});return{imgRef:t,imgState:o,setImgSize:()=>{if(t.value){const{width:e,height:l,naturalWidth:a}=t.value;o.maxScale=a/e,o.width=e,o.height=l}}}})(),M=e.ref(l.index),S=e.ref(""),k=e.reactive({scale:1,lastScale:1,rotateDeg:0,top:0,left:0,initX:0,initY:0,lastX:0,lastY:0,touches:[]}),L=e.reactive({loadError:!1,loading:!1,dragging:!1,gesturing:!1,wheeling:!1}),C=e.computed((()=>{return e=l.imgs,d("Array")(e)?l.imgs.map((e=>"string"==typeof e?{src:e}:function(e){return u(e)&&g(e.src)}(e)?e:void 0)).filter(v):g(l.imgs)?[{src:l.imgs}]:[];var e})),Y=e.computed((()=>C.value[M.value])),B=e.computed((()=>C.value[M.value]?.src)),T=e.computed((()=>C.value[M.value]?.title)),X=e.computed((()=>C.value[M.value]?.alt)),E=e.computed((()=>({cursor:L.loadError?"default":l.moveDisabled?L.dragging?"grabbing":"grab":"move",top:`calc(50% + ${k.top}px)`,left:`calc(50% + ${k.left}px)`,transition:L.dragging||L.gesturing?"none":"",transform:`translate(-50%, -50%) scale(${k.scale}) rotate(${k.rotateDeg}deg)`}))),_=()=>{n("hide")},$=()=>{k.scale=1,k.lastScale=1,k.rotateDeg=0,k.top=0,k.left=0,L.loadError=!1,L.dragging=!1,L.loading=!0},O=(t,o)=>{const a=M.value;$(),M.value=t,C.value[M.value]===C.value[t]&&e.nextTick((()=>{L.loading=!1})),l.visible&&a!==t&&(o&&o(a,t),n("on-index-change",a,t))},I=()=>{const e=M.value,t=l.loop?(e+1)%C.value.length:e+1;!l.loop&&t>C.value.length-1||O(t,((e,t)=>{n("on-next",e,t),n("on-next-click",e,t)}))},R=()=>{const e=M.value;let t=e-1;if(0===e){if(!l.loop)return;t=C.value.length-1}O(t,((e,t)=>{n("on-prev",e,t),n("on-prev-click",e,t)}))},j=e=>{Math.abs(1-e)<.05?e=1:Math.abs(N.maxScale-e)<.05&&(e=N.maxScale),k.lastScale=k.scale,k.scale=e},F=()=>{const e=k.scale+l.zoomScale;e<N.maxScale*l.maxZoom&&j(e)},A=()=>{const e=k.scale-l.zoomScale;e>l.minZoom&&j(e)},H=()=>{const e=k.rotateDeg%360;n("on-rotate",Math.abs(e<0?e+360:e))},P=()=>{k.rotateDeg-=90,H()},Z=()=>{k.rotateDeg+=90,H()},q=()=>{k.scale=1,k.top=0,k.left=0},U=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0;return!l.moveDisabled&&0===e},{onMouseDown:W,onMouseMove:G,onMouseUp:J}=((e,t,o)=>{let l,a=!1;return{onMouseDown:o=>{e.initX=e.lastX=o.clientX,e.initY=e.lastY=o.clientY,t.dragging=!0,a=!1,o.stopPropagation()},onMouseUp:e=>{o(e.button)&&x(l),t.dragging=!1,a=!1},onMouseMove:n=>{if(t.dragging)if(o(n.button)){if(a)return;a=!0,l=z((()=>{const{top:t,left:o,lastY:l,lastX:r}=e;e.top=t-l+n.clientY,e.left=o-r+n.clientX,e.lastX=n.clientX,e.lastY=n.clientY,a=!1}))}else e.lastX=n.clientX,e.lastY=n.clientY;n.stopPropagation()}}})(k,L,U),{onTouchStart:K,onTouchMove:Q,onTouchEnd:ee}=((e,t,o,l,a)=>{let n,r=!1;return{onTouchStart:e=>{const{touches:l}=e;l.length>1&&a()?(o.gesturing=!0,t.touches=l):(t.initX=t.lastX=l[0].clientX,t.initY=t.lastY=l[0].clientY,o.dragging=!0),e.stopPropagation()},onTouchMove:i=>{if(r)return;const{touches:c}=i,{lastX:s,lastY:d,left:u,top:g,scale:v}=t;if(!o.gesturing&&o.dragging){if(!c[0])return;const{clientX:e,clientY:o}=c[0];l()?n=z((()=>{t.lastX=e,t.lastY=o,t.top=g-d+o,t.left=u-s+e,r=!1})):(t.lastX=e,t.lastY=o)}else o.gesturing&&t.touches.length>1&&c.length>1&&a()&&(n=z((()=>{const o=(w(t.touches[0],t.touches[1])-w(c[0],c[1]))/e.width;t.touches=c;const l=v-1.3*o;l>.5&&l<1.5*e.maxScale&&(t.scale=l),r=!1})))},onTouchEnd:()=>{x(n),o.dragging=!1,o.gesturing=!1,r=!1}}})(N,k,L,U,(()=>!l.pinchDisabled)),te=()=>{l.dblclickDisabled||(k.scale!==N.maxScale?(k.lastScale=k.scale,k.scale=N.maxScale):k.scale=k.lastScale)},oe=e=>{L.loadError||L.gesturing||L.loading||L.dragging||L.wheeling||!l.scrollDisabled||l.zoomDisabled||(L.wheeling=!0,setTimeout((()=>{L.wheeling=!1}),80),e.deltaY<0?F():A())},le=e=>{const t=e;l.visible&&(!l.escDisabled&&"Escape"===t.key&&l.visible&&_(),"ArrowLeft"===t.key&&(l.rtl?I():R()),"ArrowRight"===t.key&&(l.rtl?R():I()))},ae=()=>{l.maskClosable&&_()},ne=()=>{V()},re=()=>{L.loading=!1},ie=e=>{L.loading=!1,L.loadError=!0,n("on-error",e)},ce=()=>{l.visible&&V()};e.watch((()=>l.index),(e=>{e<0||e>=C.value.length||O(e)})),e.watch((()=>L.dragging),((e,t)=>{const o=!e&&t;if(!U()&&o){const e=k.lastX-k.initX,t=k.lastY-k.initY,o=l.swipeTolerance;Math.abs(e)>Math.abs(t)&&(e<-1*o?I():e>o&&R())}})),e.watch((()=>l.visible),(t=>{if(t){$();const t=C.value.length;if(0===t)return M.value=0,L.loading=!1,void e.nextTick((()=>L.loadError=!0));M.value=l.index>=t?t-1:l.index<0?0:l.index,l.scrollDisabled&&se()}else l.scrollDisabled&&de()}));const se=()=>{document&&(S.value=document.body.style.overflowY,document.body.style.overflowY="hidden")},de=()=>{document&&(document.body.style.overflowY=S.value)};e.onMounted((()=>{r(document,"keydown",le),r(window,"resize",ce)})),e.onBeforeUnmount((()=>{i(document,"keydown",le),i(window,"resize",ce),l.scrollDisabled&&de()}));const ue=()=>L.loading?s.loading?s.loading({key:"loading"}):e.createVNode(p,{key:"img-loading"},null):L.loadError?s.onerror?s.onerror({key:"onerror"}):e.createVNode(b,{key:"img-on-error"},null):e.createVNode("div",{class:`${t}-img-wrapper`,style:E.value,key:"img-wrapper"},[e.createVNode("img",{alt:X.value,ref:y,draggable:"false",class:`${t}-img`,src:B.value,onMousedown:W,onMouseup:J,onMousemove:G,onTouchstart:K,onTouchmove:Q,onTouchend:ee,onLoad:ne,onDblclick:te,onDragstart:e=>{e.preventDefault()}},null)]),ge=()=>{if(s["prev-btn"])return s["prev-btn"]({prev:R});if(C.value.length<=1)return;const t=!l.loop&&M.value<=0;return e.createVNode("div",{role:"button","aria-label":"previous image button",class:"btn__prev "+(t?"disable":""),onClick:R},[l.rtl?e.createVNode(o,{type:"next"},null):e.createVNode(o,{type:"prev"},null)])},ve=()=>{if(s["next-btn"])return s["next-btn"]({next:I});if(C.value.length<=1)return;const t=!l.loop&&M.value>=C.value.length-1;return e.createVNode("div",{role:"button","aria-label":"next image button",class:"btn__next "+(t?"disable":""),onClick:I},[l.rtl?e.createVNode(o,{type:"prev"},null):e.createVNode(o,{type:"next"},null)])},me=()=>{if(!(l.titleDisabled||L.loading||L.loadError))return s.title?s.title({currentImg:Y.value}):T.value?e.createVNode(f,null,{default:()=>[T.value]}):void 0},pe=()=>{let a;if(l.visible)return e.createVNode("div",{onTouchmove:c,class:[`${t}-modal`,l.rtl?"is-rtl":""],onClick:e.withModifiers(ae,["self"]),onWheel:oe},[e.createVNode(h,null,null),e.createVNode(e.Transition,{name:`${t}-fade`,mode:"out-in"},D(a=ue())?a:{default:()=>[a]}),e.createVNode("img",{style:"display:none;",src:B.value,onError:ie,onLoad:re},null),e.createVNode("div",{class:`${t}-btns-wrapper`},[ge(),ve(),me(),s["close-btn"]?s["close-btn"]({close:_}):e.createVNode("div",{role:"button","aria-label":"close image preview button",class:"btn__close",onClick:_},[e.createVNode(o,{type:"close"},null)]),s.toolbar?s.toolbar({toolbarMethods:{zoomIn:F,zoomOut:A,rotate:P,rotateLeft:P,rotateRight:Z,resize:q},zoomIn:F,zoomOut:A,rotate:P,rotateLeft:P,rotateRight:Z,resize:q}):e.createVNode(m,{zoomIn:F,zoomOut:A,resize:q,rotateLeft:P,rotateRight:Z,rotateDisabled:l.rotateDisabled,zoomDisabled:l.zoomDisabled},null)])])};return()=>{let o;if(l.teleport){let o;return e.createVNode(e.Teleport,{to:l.teleport},{default:()=>[e.createVNode(e.Transition,{name:`${t}-fade`},D(o=pe())?o:{default:()=>[o]})]})}return e.createVNode(e.Transition,{name:`${t}-fade`},D(o=pe())?o:{default:()=>[o]})}}});const S=Object.assign(M,{install:e=>{e.component(M.name,M)}});exports.default=S,exports.useEasyLightbox=function(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{imgs:""};const{imgs:o="",initIndex:l=0}=t,a=e.ref(o),n=e.ref(l),r=e.ref(!1),i=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:n.value;n.value=e};return{imgsRef:a,indexRef:n,visibleRef:r,show:function(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:n.value;"number"==typeof t?i(t):e.isRef(t)&&"number"==typeof t.value?i(t.value):t instanceof Event&&i(n.value),r.value=!0},onHide:()=>{r.value=!1},changeIndex:i}};