vue-easy-lightbox
Version:
A Vue.js 3.0 image lightbox component with Zoom / Drag / Rotate / Switch
2 lines (1 loc) • 22 kB
JavaScript
import{defineComponent as e,createVNode as t,Fragment as l,ref as o,reactive as n,computed as a,watch as i,nextTick as r,onMounted as s,onBeforeUnmount as c,Teleport as u,Transition as d,isVNode as g,withModifiers as v,isRef as b}from"vue";const m="vel",p=e({name:"SvgIcon",props:{type:{type:String,default:""}},setup:e=>()=>t("svg",{class:`${m}-icon icon`,"aria-hidden":"true"},[t("use",{"xlink:href":`#icon-${e.type}`},null)])}),f="undefined"!=typeof window,h=()=>{};let y=!1;if(f)try{const e={};Object.defineProperty(e,"passive",{get(){y=!0}}),window.addEventListener("test-passive",h,e)}catch(e){}const z=function(e,t,l){let o=arguments.length>3&&void 0!==arguments[3]&&arguments[3];f&&e.addEventListener(t,l,!!y&&{capture:!1,passive:o})},w=(e,t,l)=>{f&&e.removeEventListener(t,l)},x=e=>{e.preventDefault()},D=Object.prototype.toString,M=e=>t=>D.call(t).slice(8,-1)===e;const S=e=>!!e&&M("Object")(e),k=e=>!!e&&M("String")(e);function L(e){return null!=e}const Y=e({name:"Toolbar",props:{zoomIn:{type:Function,default:h},zoomOut:{type:Function,default:h},rotateLeft:{type:Function,default:h},rotateRight:{type:Function,default:h},resize:{type:Function,default:h},rotateDisabled:{type:Boolean,default:!1},zoomDisabled:{type:Boolean,default:!1}},setup:e=>()=>t("div",{class:`${m}-toolbar`},[!e.zoomDisabled&&t(l,null,[t("div",{role:"button","aria-label":"zoom in button",class:"toolbar-btn toolbar-btn__zoomin",onClick:e.zoomIn},[t(p,{type:"zoomin"},null)]),t("div",{role:"button","aria-label":"zoom out button",class:"toolbar-btn toolbar-btn__zoomout",onClick:e.zoomOut},[t(p,{type:"zoomout"},null)])]),t("div",{role:"button","aria-label":"resize image button",class:"toolbar-btn toolbar-btn__resize",onClick:e.resize},[t(p,{type:"resize"},null)]),!e.rotateDisabled&&t(l,null,[t("div",{role:"button","aria-label":"image rotate left button",class:"toolbar-btn toolbar-btn__rotate",onClick:e.rotateLeft},[t(p,{type:"rotate-left"},null)]),t("div",{role:"button","aria-label":"image rotate right button",class:"toolbar-btn toolbar-btn__rotate",onClick:e.rotateRight},[t(p,{type:"rotate-right"},null)])])])}),C=()=>t("div",{class:`${m}-loading`},[t("div",{class:"ring"},null)]),B=()=>t("div",{class:`${m}-on-error`},[t("div",{class:"ring"},null),t(p,{type:"img-broken"},null)]),X=(e,l)=>{let{slots:o}=l;return t("div",{class:`${m}-img-title`},[o.default?o.default():""])},E=e({name:"DefaultIcons",setup:()=>()=>t("svg",{"aria-hidden":!0,style:"position: absolute; width: 0; height: 0; overflow: hidden; visibility: hidden;"},[t("symbol",{id:"icon-rotate-right",viewBox:"0 0 1024 1024"},[t("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)]),t("symbol",{id:"icon-rotate-left",viewBox:"0 0 1024 1024"},[t("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)]),t("symbol",{id:"icon-resize",viewBox:"0 0 1024 1024"},[t("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)]),t("symbol",{id:"icon-img-broken",viewBox:"0 0 1024 1024"},[t("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)]),t("symbol",{id:"icon-prev",viewBox:"0 0 1024 1024"},[t("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)]),t("symbol",{id:"icon-next",viewBox:"0 0 1024 1024"},[t("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)]),t("symbol",{id:"icon-zoomin",viewBox:"0 0 1024 1024"},[t("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),t("path",{d:"M235.712 369.92h390.72v127.104H235.712z"},null),t("path",{d:"M367.488 238.144h127.104v390.72H367.488z"},null)]),t("symbol",{id:"icon-close",viewBox:"0 0 1024 1024"},[t("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)]),t("symbol",{id:"icon-zoomout",viewBox:"0 0 1024 1024"},[t("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),t("path",{d:"M235.712 369.92h390.72v127.104H235.712z"},null)])])}),$=f?window:global;let T=Date.now();function _(e){const t=Date.now(),l=Math.max(0,16-(t-T)),o=setTimeout(e,l);return T=t+l,o}function I(e){return($.requestAnimationFrame||_).call($,e)}function O(e){($.cancelAnimationFrame||$.clearTimeout).call($,e)}function R(e,t){const l=e.clientX-t.clientX,o=e.clientY-t.clientY;return Math.sqrt(l*l+o*o)}function j(e){return"function"==typeof e||"[object Object]"===Object.prototype.toString.call(e)&&!g(e)}var A=e({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(e,l){let{emit:g,slots:b}=l;const{imgRef:f,imgState:h,setImgSize:y}=(()=>{const e=o(),t=n({width:0,height:0,maxScale:1});return{imgRef:e,imgState:t,setImgSize:()=>{if(e.value){const{width:l,height:o,naturalWidth:n}=e.value;t.maxScale=n/l,t.width=l,t.height=o}}}})(),D=o(e.index),$=o(""),T=n({scale:1,lastScale:1,rotateDeg:0,top:0,left:0,initX:0,initY:0,lastX:0,lastY:0,touches:[]}),_=n({loadError:!1,loading:!1,dragging:!1,gesturing:!1,wheeling:!1}),A=a((()=>{return t=e.imgs,M("Array")(t)?e.imgs.map((e=>"string"==typeof e?{src:e}:function(e){return S(e)&&k(e.src)}(e)?e:void 0)).filter(L):k(e.imgs)?[{src:e.imgs}]:[];var t})),H=a((()=>A.value[D.value])),F=a((()=>A.value[D.value]?.src)),N=a((()=>A.value[D.value]?.title)),P=a((()=>A.value[D.value]?.alt)),V=a((()=>({cursor:_.loadError?"default":e.moveDisabled?_.dragging?"grabbing":"grab":"move",top:`calc(50% + ${T.top}px)`,left:`calc(50% + ${T.left}px)`,transition:_.dragging||_.gesturing?"none":"",transform:`translate(-50%, -50%) scale(${T.scale}) rotate(${T.rotateDeg}deg)`}))),Z=()=>{g("hide")},q=()=>{T.scale=1,T.lastScale=1,T.rotateDeg=0,T.top=0,T.left=0,_.loadError=!1,_.dragging=!1,_.loading=!0},U=(t,l)=>{const o=D.value;q(),D.value=t,A.value[D.value]===A.value[t]&&r((()=>{_.loading=!1})),e.visible&&o!==t&&(l&&l(o,t),g("on-index-change",o,t))},W=()=>{const t=D.value,l=e.loop?(t+1)%A.value.length:t+1;!e.loop&&l>A.value.length-1||U(l,((e,t)=>{g("on-next",e,t),g("on-next-click",e,t)}))},G=()=>{const t=D.value;let l=t-1;if(0===t){if(!e.loop)return;l=A.value.length-1}U(l,((e,t)=>{g("on-prev",e,t),g("on-prev-click",e,t)}))},J=e=>{Math.abs(1-e)<.05?e=1:Math.abs(h.maxScale-e)<.05&&(e=h.maxScale),T.lastScale=T.scale,T.scale=e},K=()=>{const t=T.scale+e.zoomScale;t<h.maxScale*e.maxZoom&&J(t)},Q=()=>{const t=T.scale-e.zoomScale;t>e.minZoom&&J(t)},ee=()=>{const e=T.rotateDeg%360;g("on-rotate",Math.abs(e<0?e+360:e))},te=()=>{T.rotateDeg-=90,ee()},le=()=>{T.rotateDeg+=90,ee()},oe=()=>{T.scale=1,T.top=0,T.left=0},ne=function(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0;return!e.moveDisabled&&0===t},{onMouseDown:ae,onMouseMove:ie,onMouseUp:re}=((e,t,l)=>{let o,n=!1;return{onMouseDown:l=>{e.initX=e.lastX=l.clientX,e.initY=e.lastY=l.clientY,t.dragging=!0,n=!1,l.stopPropagation()},onMouseUp:e=>{l(e.button)&&O(o),t.dragging=!1,n=!1},onMouseMove:a=>{if(t.dragging)if(l(a.button)){if(n)return;n=!0,o=I((()=>{const{top:t,left:l,lastY:o,lastX:i}=e;e.top=t-o+a.clientY,e.left=l-i+a.clientX,e.lastX=a.clientX,e.lastY=a.clientY,n=!1}))}else e.lastX=a.clientX,e.lastY=a.clientY;a.stopPropagation()}}})(T,_,ne),{onTouchStart:se,onTouchMove:ce,onTouchEnd:ue}=((e,t,l,o,n)=>{let a,i=!1;return{onTouchStart:e=>{const{touches:o}=e;o.length>1&&n()?(l.gesturing=!0,t.touches=o):(t.initX=t.lastX=o[0].clientX,t.initY=t.lastY=o[0].clientY,l.dragging=!0),e.stopPropagation()},onTouchMove:r=>{if(i)return;const{touches:s}=r,{lastX:c,lastY:u,left:d,top:g,scale:v}=t;if(!l.gesturing&&l.dragging){if(!s[0])return;const{clientX:e,clientY:l}=s[0];o()?a=I((()=>{t.lastX=e,t.lastY=l,t.top=g-u+l,t.left=d-c+e,i=!1})):(t.lastX=e,t.lastY=l)}else l.gesturing&&t.touches.length>1&&s.length>1&&n()&&(a=I((()=>{const l=(R(t.touches[0],t.touches[1])-R(s[0],s[1]))/e.width;t.touches=s;const o=v-1.3*l;o>.5&&o<1.5*e.maxScale&&(t.scale=o),i=!1})))},onTouchEnd:()=>{O(a),l.dragging=!1,l.gesturing=!1,i=!1}}})(h,T,_,ne,(()=>!e.pinchDisabled)),de=()=>{e.dblclickDisabled||(T.scale!==h.maxScale?(T.lastScale=T.scale,T.scale=h.maxScale):T.scale=T.lastScale)},ge=t=>{_.loadError||_.gesturing||_.loading||_.dragging||_.wheeling||!e.scrollDisabled||e.zoomDisabled||(_.wheeling=!0,setTimeout((()=>{_.wheeling=!1}),80),t.deltaY<0?K():Q())},ve=t=>{const l=t;e.visible&&(!e.escDisabled&&"Escape"===l.key&&e.visible&&Z(),"ArrowLeft"===l.key&&(e.rtl?W():G()),"ArrowRight"===l.key&&(e.rtl?G():W()))},be=()=>{e.maskClosable&&Z()},me=()=>{y()},pe=()=>{_.loading=!1},fe=e=>{_.loading=!1,_.loadError=!0,g("on-error",e)},he=()=>{e.visible&&y()};i((()=>e.index),(e=>{e<0||e>=A.value.length||U(e)})),i((()=>_.dragging),((t,l)=>{const o=!t&&l;if(!ne()&&o){const t=T.lastX-T.initX,l=T.lastY-T.initY,o=e.swipeTolerance;Math.abs(t)>Math.abs(l)&&(t<-1*o?W():t>o&&G())}})),i((()=>e.visible),(t=>{if(t){q();const t=A.value.length;if(0===t)return D.value=0,_.loading=!1,void r((()=>_.loadError=!0));D.value=e.index>=t?t-1:e.index<0?0:e.index,e.scrollDisabled&&ye()}else e.scrollDisabled&&ze()}));const ye=()=>{document&&($.value=document.body.style.overflowY,document.body.style.overflowY="hidden")},ze=()=>{document&&(document.body.style.overflowY=$.value)};s((()=>{z(document,"keydown",ve),z(window,"resize",he)})),c((()=>{w(document,"keydown",ve),w(window,"resize",he),e.scrollDisabled&&ze()}));const we=()=>_.loading?b.loading?b.loading({key:"loading"}):t(C,{key:"img-loading"},null):_.loadError?b.onerror?b.onerror({key:"onerror"}):t(B,{key:"img-on-error"},null):t("div",{class:`${m}-img-wrapper`,style:V.value,key:"img-wrapper"},[t("img",{alt:P.value,ref:f,draggable:"false",class:`${m}-img`,src:F.value,onMousedown:ae,onMouseup:re,onMousemove:ie,onTouchstart:se,onTouchmove:ce,onTouchend:ue,onLoad:me,onDblclick:de,onDragstart:e=>{e.preventDefault()}},null)]),xe=()=>{if(b["prev-btn"])return b["prev-btn"]({prev:G});if(A.value.length<=1)return;const l=!e.loop&&D.value<=0;return t("div",{role:"button","aria-label":"previous image button",class:"btn__prev "+(l?"disable":""),onClick:G},[e.rtl?t(p,{type:"next"},null):t(p,{type:"prev"},null)])},De=()=>{if(b["next-btn"])return b["next-btn"]({next:W});if(A.value.length<=1)return;const l=!e.loop&&D.value>=A.value.length-1;return t("div",{role:"button","aria-label":"next image button",class:"btn__next "+(l?"disable":""),onClick:W},[e.rtl?t(p,{type:"prev"},null):t(p,{type:"next"},null)])},Me=()=>{if(!(e.titleDisabled||_.loading||_.loadError))return b.title?b.title({currentImg:H.value}):N.value?t(X,null,{default:()=>[N.value]}):void 0},Se=()=>{let l;if(e.visible)return t("div",{onTouchmove:x,class:[`${m}-modal`,e.rtl?"is-rtl":""],onClick:v(be,["self"]),onWheel:ge},[t(E,null,null),t(d,{name:`${m}-fade`,mode:"out-in"},j(l=we())?l:{default:()=>[l]}),t("img",{style:"display:none;",src:F.value,onError:fe,onLoad:pe},null),t("div",{class:`${m}-btns-wrapper`},[xe(),De(),Me(),b["close-btn"]?b["close-btn"]({close:Z}):t("div",{role:"button","aria-label":"close image preview button",class:"btn__close",onClick:Z},[t(p,{type:"close"},null)]),b.toolbar?b.toolbar({toolbarMethods:{zoomIn:K,zoomOut:Q,rotate:te,rotateLeft:te,rotateRight:le,resize:oe},zoomIn:K,zoomOut:Q,rotate:te,rotateLeft:te,rotateRight:le,resize:oe}):t(Y,{zoomIn:K,zoomOut:Q,resize:oe,rotateLeft:te,rotateRight:le,rotateDisabled:e.rotateDisabled,zoomDisabled:e.zoomDisabled},null)])])};return()=>{let l;if(e.teleport){let l;return t(u,{to:e.teleport},{default:()=>[t(d,{name:`${m}-fade`},j(l=Se())?l:{default:()=>[l]})]})}return t(d,{name:`${m}-fade`},j(l=Se())?l:{default:()=>[l]})}}});const H=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{imgs:""};const{imgs:t="",initIndex:l=0}=e,n=o(t),a=o(l),i=o(!1),r=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:a.value;a.value=e};return{imgsRef:n,indexRef:a,visibleRef:i,show:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:a.value;"number"==typeof e?r(e):b(e)&&"number"==typeof e.value?r(e.value):e instanceof Event&&r(a.value),i.value=!0},onHide:()=>{i.value=!1},changeIndex:r}},F=Object.assign(A,{install:e=>{e.component(A.name,A)}});export{F as default,H as useEasyLightbox};