vue-tinybox - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

dist/tinybox.esm.js

@@ -1,1 +0,1 @@
-var e={name:"Tinybox",model:{prop:"index",event:"change"},props:{images:{type:Array,default:function(){return[]}},index:{type:Number,default:null},loop:{type:Boolean,default:!1},noThumbs:{type:Boolean,default:!1}},data:function(){return{slide:"next",swipeDone:!1,swipeX:null}},computed:{open:function(){return null!=this.index},prevImage:function(){return this.index>0?this.index-1:this.loop?this.images.length-1:this.index},nextImage:function(){return this.index<this.images.length-1?this.index+1:this.loop?0:this.index}},watch:{open:function(e){e?window.addEventListener("keyup",this.keyup):window.removeEventListener("keyup",this.keyup)},index:function(e){var t=this;this.noThumbs||null==e||this.$nextTick((function(){var n=t.$refs,o=n.thumbs,i=n.thumbItems[e];if(i.offsetLeft+i.clientWidth/2>window.innerWidth/2){var a=i.offsetLeft-window.innerWidth/2;a<o.scrollWidth?o.scrollLeft=a+i.clientWidth/2:o.scrollLeft=o.scrollWidth}else o.scrollLeft=0}))}},methods:{close:function(){this.goto(null)},prev:function(){this.goto(this.prevImage,"prev")},next:function(){this.goto(this.nextImage,"next")},goto:function(e,t){this.slide=t||(this.index<e?"next":"prev"),this.$emit("change",e)},keyup:function(e){"ArrowRight"===e.code||"ArrowRight"===e.key||"Right"===e.key||39===e.keyCode?this.next():"ArrowLeft"===e.code||"ArrowLeft"===e.key||"Left"===e.key||37===e.keyCode?this.prev():"Escape"!==e.code&&"Escape"!==e.key&&"Esc"!==e.key&&27!==e.keyCode||this.close()},swipeStart:function(e){this.swipeDone=!1,1===e.changedTouches.length&&(this.swipeX=e.changedTouches[0].screenX)},swipe:function(e){if(!this.swipeDone&&1===e.changedTouches.length){var t=e.changedTouches[0].screenX-this.swipeX;t>=50?(this.prev(),this.swipeDone=!0):t<=-50&&(this.next(),this.swipeDone=!0)}}}};function t(e,t,n,o,i,a,s,r,d,c){"boolean"!=typeof s&&(d=r,r=s,s=!1);var l,f="function"==typeof n?n.options:n;if(e&&e.render&&(f.render=e.render,f.staticRenderFns=e.staticRenderFns,f._compiled=!0,i&&(f.functional=!0)),o&&(f._scopeId=o),a?(l=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,d(e)),e&&e._registeredComponents&&e._registeredComponents.add(a)},f._ssrRegister=l):t&&(l=s?function(e){t.call(this,c(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,r(e))}),l)if(f.functional){var h=f.render;f.render=function(e,t){return l.call(t),h(e,t)}}else{var p=f.beforeCreate;f.beforeCreate=p?[].concat(p,l):[l]}return n}var n,o="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function i(e){return function(e,t){return function(e,t){var i=o?t.media||"default":e,s=a[i]||(a[i]={ids:new Set,styles:[]});if(!s.ids.has(e)){s.ids.add(e);var r=t.source;if(t.map&&(r+="\n/*# sourceURL="+t.map.sources[0]+" */",r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),s.element||(s.element=document.createElement("style"),s.element.type="text/css",t.media&&s.element.setAttribute("media",t.media),void 0===n&&(n=document.head||document.getElementsByTagName("head")[0]),n.appendChild(s.element)),"styleSheet"in s.element)s.styles.push(r),s.element.styleSheet.cssText=s.styles.filter(Boolean).join("\n");else{var d=s.ids.size-1,c=document.createTextNode(r),l=s.element.childNodes;l[d]&&s.element.removeChild(l[d]),l.length?s.element.insertBefore(c,l[d]):s.element.appendChild(c)}}}(e,t)}}var a={};const s=t({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("transition",{attrs:{name:"fade"}},[e.open?n("div",{staticClass:"tinybox",on:{click:e.close,wheel:function(e){e.preventDefault()},touchmove:function(e){e.preventDefault()}}},[n("div",{staticClass:"tinybox__content",class:{"tinybox__content--no-thumbs":e.noThumbs},on:{touchstart:e.swipeStart,touchmove:e.swipe}},[n("transition",{attrs:{name:e.slide}},[n("img",{key:e.images[e.index].src||e.images[e.index]||"",staticClass:"tinybox__content__image",attrs:{src:e.images[e.index].src||e.images[e.index]||"",alt:e.images[e.index].alt||e.images[e.index].caption||""},on:{click:function(t){return t.stopPropagation(),e.next(t)}}})]),e.images[e.index].caption?n("span",{staticClass:"tinybox__content__image__caption"},[e._v(" "+e._s(e.images[e.index].caption)+" ")]):e._e(),e.prevImage!==e.index?n("div",{staticClass:"tinybox__content__control tinybox__content__control--prev",on:{click:function(t){return t.stopPropagation(),e.prev(t)}}}):e._e(),e.nextImage!==e.index?n("div",{staticClass:"tinybox__content__control tinybox__content__control--next",on:{click:function(t){return t.stopPropagation(),e.next(t)}}}):e._e(),n("div",{staticClass:"tinybox__content__control tinybox__content__control--close",on:{click:function(t){return t.stopPropagation(),e.close(t)}}})],1),e.noThumbs?e._e():n("div",{ref:"thumbs",staticClass:"tinybox__thumbs",on:{touchmove:function(e){e.stopPropagation()},wheel:function(e){e.stopPropagation()}}},e._l(e.images,(function(t,o){return n("img",{key:o,ref:"thumbItems",refInFor:!0,staticClass:"tinybox__thumbs__item",class:{"tinybox__thumbs__item--active":e.index===o},attrs:{src:t.thumbnail||t.src||t||"",alt:e.images[e.index].alt||e.images[e.index].caption||""},on:{click:function(t){return t.stopPropagation(),e.goto(o)}}})})),0)]):e._e()])},staticRenderFns:[]},(function(e){e&&e("data-v-b0df26f4_0",{source:".tinybox[data-v-b0df26f4]{background-color:rgba(0,0,0,.9);bottom:0;left:0;position:fixed;right:0;text-align:center;top:0;z-index:1000}.tinybox__content[data-v-b0df26f4]{height:85%;position:relative;width:100%;display:flex;align-items:center;justify-content:center}.tinybox__content--no-thumbs[data-v-b0df26f4]{height:100%}.tinybox__content__image[data-v-b0df26f4]{background-color:#222;cursor:pointer;display:inline-block;max-height:90%;max-width:80%;position:absolute}.tinybox__content__image__caption[data-v-b0df26f4]{position:absolute;bottom:0;padding:.5rem .75rem;border-radius:5px;color:#fff;background-color:rgba(0,0,0,.9);opacity:.75;font-family:sans-serif;font-weight:lighter;font-size:1.2rem}.tinybox__content__control[data-v-b0df26f4]{background:no-repeat center/24px;cursor:pointer;opacity:.5;position:absolute;top:0;transition:opacity .3s ease;width:4em}.tinybox__content__control[data-v-b0df26f4]:hover{opacity:1}.tinybox__content__control--prev[data-v-b0df26f4]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 -2 28 36' width='40' height='60' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'%3E%3Cpath d='M20 30 L8 16 20 2' /%3E%3C/svg%3E\");bottom:0;left:0}.tinybox__content__control--next[data-v-b0df26f4]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 -2 28 36' width='40' height='60' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'%3E%3Cpath d='M12 30 L24 16 12 2' /%3E%3C/svg%3E\");bottom:0;right:0}.tinybox__content__control--close[data-v-b0df26f4]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 46 46' width='40' height='40' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='4'%3E%3Cpath d='M2 30 L30 2 M30 30 L2 2' /%3E%3C/svg%3E\");height:2.6em;right:0}.tinybox__thumbs[data-v-b0df26f4]{bottom:0;height:15%;left:0;line-height:0;padding:0 10px;position:absolute;right:0;overflow-x:scroll;overflow-y:hidden;scroll-behavior:smooth;white-space:nowrap}.tinybox__thumbs__item[data-v-b0df26f4]{cursor:pointer;display:inline-block;height:10vh;margin:2.5vh 5px;object-fit:cover;overflow:hidden;width:10vh}.tinybox__thumbs__item--active[data-v-b0df26f4]{opacity:.3}.fade-enter[data-v-b0df26f4],.fade-leave-active[data-v-b0df26f4],.next-enter[data-v-b0df26f4],.next-leave-active[data-v-b0df26f4],.prev-enter[data-v-b0df26f4],.prev-leave-active[data-v-b0df26f4]{opacity:0}.fade-enter-active[data-v-b0df26f4],.fade-leave-active[data-v-b0df26f4],.next-leave-active[data-v-b0df26f4],.prev-leave-active[data-v-b0df26f4]{transition:opacity .3s ease}.prev-enter[data-v-b0df26f4]{transform:translateX(-40px)}.next-enter[data-v-b0df26f4]{transform:translateX(40px)}.next-enter-active[data-v-b0df26f4],.prev-enter-active[data-v-b0df26f4]{transition:opacity .3s ease,transform .3s ease}",map:void 0,media:void 0})}),e,"data-v-b0df26f4",!1,void 0,!1,i,void 0,void 0);var r=null;"undefined"!=typeof window?r=window.Vue:"undefined"!=typeof global&&(r=global.Vue),r&&r.use({install:function e(t){e.installed||(e.installed=!0,t.component(s.name,s))}});export default s;
+var e={name:"Tinybox",model:{prop:"index",event:"change"},props:{images:{type:Array,default:function(){return[]}},index:{type:Number,default:null},loop:{type:Boolean,default:!1},noThumbs:{type:Boolean,default:!1}},data:function(){return{slide:"next",swipeDone:!1,swipeX:null}},computed:{open:function(){return null!=this.index},prevImage:function(){return this.index>0?this.index-1:this.loop?this.images.length-1:this.index},nextImage:function(){return this.index<this.images.length-1?this.index+1:this.loop?0:this.index}},watch:{open:function(e){e?window.addEventListener("keyup",this.keyup):window.removeEventListener("keyup",this.keyup)},index:function(e){var t=this;this.noThumbs||null==e||this.$nextTick((function(){var n=t.$refs,i=n.thumbs,o=n.thumbItems[e];if(o.offsetLeft+o.clientWidth/2>window.innerWidth/2){var a=o.offsetLeft-window.innerWidth/2;a<i.scrollWidth?i.scrollLeft=a+o.clientWidth/2:i.scrollLeft=i.scrollWidth}else i.scrollLeft=0}))}},methods:{close:function(){var e=this.index;this.goto(null),this.$emit("close",e)},prev:function(){this.$emit("prev",this.prevImage),this.goto(this.prevImage,"prev")},next:function(){this.$emit("next",this.nextImage),this.goto(this.nextImage,"next")},goto:function(e,t){this.slide=t||(this.index<e?"next":"prev"),this.$emit("change",e)},keyup:function(e){"ArrowRight"===e.code||"ArrowRight"===e.key||"Right"===e.key||39===e.keyCode?this.next():"ArrowLeft"===e.code||"ArrowLeft"===e.key||"Left"===e.key||37===e.keyCode?this.prev():"Escape"!==e.code&&"Escape"!==e.key&&"Esc"!==e.key&&27!==e.keyCode||this.close()},swipeStart:function(e){this.swipeDone=!1,1===e.changedTouches.length&&(this.swipeX=e.changedTouches[0].screenX)},swipe:function(e){if(!this.swipeDone&&1===e.changedTouches.length){var t=e.changedTouches[0].screenX-this.swipeX;t>=50?(this.prev(),this.swipeDone=!0):t<=-50&&(this.next(),this.swipeDone=!0)}}}};function t(e,t,n,i,o,a,s,r,c,d){"boolean"!=typeof s&&(c=r,r=s,s=!1);var l,h="function"==typeof n?n.options:n;if(e&&e.render&&(h.render=e.render,h.staticRenderFns=e.staticRenderFns,h._compiled=!0,o&&(h.functional=!0)),i&&(h._scopeId=i),a?(l=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,c(e)),e&&e._registeredComponents&&e._registeredComponents.add(a)},h._ssrRegister=l):t&&(l=s?function(e){t.call(this,d(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,r(e))}),l)if(h.functional){var p=h.render;h.render=function(e,t){return l.call(t),p(e,t)}}else{var u=h.beforeCreate;h.beforeCreate=u?[].concat(u,l):[l]}return n}var n,i="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function o(e){return function(e,t){return function(e,t){var o=i?t.media||"default":e,s=a[o]||(a[o]={ids:new Set,styles:[]});if(!s.ids.has(e)){s.ids.add(e);var r=t.source;if(t.map&&(r+="\n/*# sourceURL="+t.map.sources[0]+" */",r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),s.element||(s.element=document.createElement("style"),s.element.type="text/css",t.media&&s.element.setAttribute("media",t.media),void 0===n&&(n=document.head||document.getElementsByTagName("head")[0]),n.appendChild(s.element)),"styleSheet"in s.element)s.styles.push(r),s.element.styleSheet.cssText=s.styles.filter(Boolean).join("\n");else{var c=s.ids.size-1,d=document.createTextNode(r),l=s.element.childNodes;l[c]&&s.element.removeChild(l[c]),l.length?s.element.insertBefore(d,l[c]):s.element.appendChild(d)}}}(e,t)}}var a={};const s=t({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("transition",{attrs:{name:"fade"}},[e.open?n("div",{staticClass:"tinybox",on:{click:e.close,wheel:function(e){e.preventDefault()},touchmove:function(e){e.preventDefault()}}},[n("div",{staticClass:"tinybox__content",class:{"tinybox__content--no-thumbs":e.noThumbs},on:{touchstart:e.swipeStart,touchmove:e.swipe}},[n("transition",{attrs:{name:e.slide}},[n("img",{key:e.images[e.index].src||e.images[e.index]||"",staticClass:"tinybox__content__image",attrs:{src:e.images[e.index].src||e.images[e.index]||"",alt:e.images[e.index].alt||e.images[e.index].caption||""},on:{click:function(t){return t.stopPropagation(),e.next(t)}}})]),e.images[e.index].caption?n("span",{staticClass:"tinybox__content__image__caption",domProps:{textContent:e._s(e.images[e.index].caption)}}):e._e(),e.prevImage!==e.index?n("div",{staticClass:"tinybox__content__control tinybox__content__control--prev",on:{click:function(t){return t.stopPropagation(),e.prev(t)}}}):e._e(),e.nextImage!==e.index?n("div",{staticClass:"tinybox__content__control tinybox__content__control--next",on:{click:function(t){return t.stopPropagation(),e.next(t)}}}):e._e(),n("div",{staticClass:"tinybox__content__control tinybox__content__control--close",on:{click:function(t){return t.stopPropagation(),e.close(t)}}})],1),e.noThumbs?e._e():n("div",{ref:"thumbs",staticClass:"tinybox__thumbs",on:{touchmove:function(e){e.stopPropagation()},wheel:function(e){e.stopPropagation()}}},e._l(e.images,(function(t,i){return n("img",{key:i,ref:"thumbItems",refInFor:!0,staticClass:"tinybox__thumbs__item",class:{"tinybox__thumbs__item--active":e.index===i},attrs:{src:t.thumbnail||t.src||t||"",alt:e.images[e.index].alt||e.images[e.index].caption||""},on:{click:function(t){return t.stopPropagation(),e.goto(i)}}})})),0)]):e._e()])},staticRenderFns:[]},(function(e){e&&e("data-v-7c98eda5_0",{source:".tinybox[data-v-7c98eda5]{background-color:rgba(0,0,0,.9);bottom:0;left:0;position:fixed;right:0;text-align:center;top:0;z-index:1000}.tinybox__content[data-v-7c98eda5]{height:85%;position:relative;width:100%;display:flex;align-items:center;justify-content:center}.tinybox__content--no-thumbs[data-v-7c98eda5]{height:100%}.tinybox__content__image[data-v-7c98eda5]{background-color:#222;cursor:pointer;display:inline-block;max-height:90%;max-width:80%;position:absolute}.tinybox__content__image__caption[data-v-7c98eda5]{position:absolute;bottom:0;padding:.5rem .75rem;border-radius:5px;color:#fff;background-color:rgba(0,0,0,.9);opacity:.75;font-family:sans-serif;font-weight:lighter;font-size:1.2rem}.tinybox__content__control[data-v-7c98eda5]{background:no-repeat center/24px;cursor:pointer;opacity:.5;position:absolute;top:0;transition:opacity .3s ease;width:4em}.tinybox__content__control[data-v-7c98eda5]:hover{opacity:1}.tinybox__content__control--prev[data-v-7c98eda5]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 -2 28 36' width='40' height='60' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'%3E%3Cpath d='M20 30 L8 16 20 2' /%3E%3C/svg%3E\");bottom:0;left:0}.tinybox__content__control--next[data-v-7c98eda5]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 -2 28 36' width='40' height='60' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'%3E%3Cpath d='M12 30 L24 16 12 2' /%3E%3C/svg%3E\");bottom:0;right:0}.tinybox__content__control--close[data-v-7c98eda5]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 46 46' width='40' height='40' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='4'%3E%3Cpath d='M2 30 L30 2 M30 30 L2 2' /%3E%3C/svg%3E\");height:2.6em;right:0}.tinybox__thumbs[data-v-7c98eda5]{bottom:0;height:15%;left:0;line-height:0;padding:0 10px;position:absolute;right:0;overflow-x:scroll;overflow-y:hidden;scroll-behavior:smooth;white-space:nowrap}.tinybox__thumbs__item[data-v-7c98eda5]{cursor:pointer;display:inline-block;height:10vh;margin:2.5vh 5px;object-fit:cover;overflow:hidden;width:10vh}.tinybox__thumbs__item--active[data-v-7c98eda5]{opacity:.3}.fade-enter[data-v-7c98eda5],.fade-leave-active[data-v-7c98eda5],.next-enter[data-v-7c98eda5],.next-leave-active[data-v-7c98eda5],.prev-enter[data-v-7c98eda5],.prev-leave-active[data-v-7c98eda5]{opacity:0}.fade-enter-active[data-v-7c98eda5],.fade-leave-active[data-v-7c98eda5],.next-leave-active[data-v-7c98eda5],.prev-leave-active[data-v-7c98eda5]{transition:opacity .3s ease}.prev-enter[data-v-7c98eda5]{transform:translateX(-40px)}.next-enter[data-v-7c98eda5]{transform:translateX(40px)}.next-enter-active[data-v-7c98eda5],.prev-enter-active[data-v-7c98eda5]{transition:opacity .3s ease,transform .3s ease}",map:void 0,media:void 0})}),e,"data-v-7c98eda5",!1,void 0,!1,o,void 0,void 0);var r=null;"undefined"!=typeof window?r=window.Vue:"undefined"!=typeof global&&(r=global.Vue),r&&r.use({install:function e(t){e.installed||(e.installed=!0,t.component(s.name,s))}});export default s;

dist/tinybox.umd.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).Tinybox=t()}(this,(function(){"use strict";var e={name:"Tinybox",model:{prop:"index",event:"change"},props:{images:{type:Array,default:function(){return[]}},index:{type:Number,default:null},loop:{type:Boolean,default:!1},noThumbs:{type:Boolean,default:!1}},data:function(){return{slide:"next",swipeDone:!1,swipeX:null}},computed:{open:function(){return null!=this.index},prevImage:function(){return this.index>0?this.index-1:this.loop?this.images.length-1:this.index},nextImage:function(){return this.index<this.images.length-1?this.index+1:this.loop?0:this.index}},watch:{open:function(e){e?window.addEventListener("keyup",this.keyup):window.removeEventListener("keyup",this.keyup)},index:function(e){var t=this;this.noThumbs||null==e||this.$nextTick((function(){var n=t.$refs,o=n.thumbs,i=n.thumbItems[e];if(i.offsetLeft+i.clientWidth/2>window.innerWidth/2){var a=i.offsetLeft-window.innerWidth/2;a<o.scrollWidth?o.scrollLeft=a+i.clientWidth/2:o.scrollLeft=o.scrollWidth}else o.scrollLeft=0}))}},methods:{close:function(){this.goto(null)},prev:function(){this.goto(this.prevImage,"prev")},next:function(){this.goto(this.nextImage,"next")},goto:function(e,t){this.slide=t||(this.index<e?"next":"prev"),this.$emit("change",e)},keyup:function(e){"ArrowRight"===e.code||"ArrowRight"===e.key||"Right"===e.key||39===e.keyCode?this.next():"ArrowLeft"===e.code||"ArrowLeft"===e.key||"Left"===e.key||37===e.keyCode?this.prev():"Escape"!==e.code&&"Escape"!==e.key&&"Esc"!==e.key&&27!==e.keyCode||this.close()},swipeStart:function(e){this.swipeDone=!1,1===e.changedTouches.length&&(this.swipeX=e.changedTouches[0].screenX)},swipe:function(e){if(!this.swipeDone&&1===e.changedTouches.length){var t=e.changedTouches[0].screenX-this.swipeX;t>=50?(this.prev(),this.swipeDone=!0):t<=-50&&(this.next(),this.swipeDone=!0)}}}};function t(e,t,n,o,i,a,s,r,d,c){"boolean"!=typeof s&&(d=r,r=s,s=!1);var l,f="function"==typeof n?n.options:n;if(e&&e.render&&(f.render=e.render,f.staticRenderFns=e.staticRenderFns,f._compiled=!0,i&&(f.functional=!0)),o&&(f._scopeId=o),a?(l=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,d(e)),e&&e._registeredComponents&&e._registeredComponents.add(a)},f._ssrRegister=l):t&&(l=s?function(e){t.call(this,c(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,r(e))}),l)if(f.functional){var h=f.render;f.render=function(e,t){return l.call(t),h(e,t)}}else{var u=f.beforeCreate;f.beforeCreate=u?[].concat(u,l):[l]}return n}var n,o="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function i(e){return function(e,t){return function(e,t){var i=o?t.media||"default":e,s=a[i]||(a[i]={ids:new Set,styles:[]});if(!s.ids.has(e)){s.ids.add(e);var r=t.source;if(t.map&&(r+="\n/*# sourceURL="+t.map.sources[0]+" */",r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),s.element||(s.element=document.createElement("style"),s.element.type="text/css",t.media&&s.element.setAttribute("media",t.media),void 0===n&&(n=document.head||document.getElementsByTagName("head")[0]),n.appendChild(s.element)),"styleSheet"in s.element)s.styles.push(r),s.element.styleSheet.cssText=s.styles.filter(Boolean).join("\n");else{var d=s.ids.size-1,c=document.createTextNode(r),l=s.element.childNodes;l[d]&&s.element.removeChild(l[d]),l.length?s.element.insertBefore(c,l[d]):s.element.appendChild(c)}}}(e,t)}}var a={};const s=t({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("transition",{attrs:{name:"fade"}},[e.open?n("div",{staticClass:"tinybox",on:{click:e.close,wheel:function(e){e.preventDefault()},touchmove:function(e){e.preventDefault()}}},[n("div",{staticClass:"tinybox__content",class:{"tinybox__content--no-thumbs":e.noThumbs},on:{touchstart:e.swipeStart,touchmove:e.swipe}},[n("transition",{attrs:{name:e.slide}},[n("img",{key:e.images[e.index].src||e.images[e.index]||"",staticClass:"tinybox__content__image",attrs:{src:e.images[e.index].src||e.images[e.index]||"",alt:e.images[e.index].alt||e.images[e.index].caption||""},on:{click:function(t){return t.stopPropagation(),e.next(t)}}})]),e.images[e.index].caption?n("span",{staticClass:"tinybox__content__image__caption"},[e._v(" "+e._s(e.images[e.index].caption)+" ")]):e._e(),e.prevImage!==e.index?n("div",{staticClass:"tinybox__content__control tinybox__content__control--prev",on:{click:function(t){return t.stopPropagation(),e.prev(t)}}}):e._e(),e.nextImage!==e.index?n("div",{staticClass:"tinybox__content__control tinybox__content__control--next",on:{click:function(t){return t.stopPropagation(),e.next(t)}}}):e._e(),n("div",{staticClass:"tinybox__content__control tinybox__content__control--close",on:{click:function(t){return t.stopPropagation(),e.close(t)}}})],1),e.noThumbs?e._e():n("div",{ref:"thumbs",staticClass:"tinybox__thumbs",on:{touchmove:function(e){e.stopPropagation()},wheel:function(e){e.stopPropagation()}}},e._l(e.images,(function(t,o){return n("img",{key:o,ref:"thumbItems",refInFor:!0,staticClass:"tinybox__thumbs__item",class:{"tinybox__thumbs__item--active":e.index===o},attrs:{src:t.thumbnail||t.src||t||"",alt:e.images[e.index].alt||e.images[e.index].caption||""},on:{click:function(t){return t.stopPropagation(),e.goto(o)}}})})),0)]):e._e()])},staticRenderFns:[]},(function(e){e&&e("data-v-b0df26f4_0",{source:".tinybox[data-v-b0df26f4]{background-color:rgba(0,0,0,.9);bottom:0;left:0;position:fixed;right:0;text-align:center;top:0;z-index:1000}.tinybox__content[data-v-b0df26f4]{height:85%;position:relative;width:100%;display:flex;align-items:center;justify-content:center}.tinybox__content--no-thumbs[data-v-b0df26f4]{height:100%}.tinybox__content__image[data-v-b0df26f4]{background-color:#222;cursor:pointer;display:inline-block;max-height:90%;max-width:80%;position:absolute}.tinybox__content__image__caption[data-v-b0df26f4]{position:absolute;bottom:0;padding:.5rem .75rem;border-radius:5px;color:#fff;background-color:rgba(0,0,0,.9);opacity:.75;font-family:sans-serif;font-weight:lighter;font-size:1.2rem}.tinybox__content__control[data-v-b0df26f4]{background:no-repeat center/24px;cursor:pointer;opacity:.5;position:absolute;top:0;transition:opacity .3s ease;width:4em}.tinybox__content__control[data-v-b0df26f4]:hover{opacity:1}.tinybox__content__control--prev[data-v-b0df26f4]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 -2 28 36' width='40' height='60' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'%3E%3Cpath d='M20 30 L8 16 20 2' /%3E%3C/svg%3E\");bottom:0;left:0}.tinybox__content__control--next[data-v-b0df26f4]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 -2 28 36' width='40' height='60' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'%3E%3Cpath d='M12 30 L24 16 12 2' /%3E%3C/svg%3E\");bottom:0;right:0}.tinybox__content__control--close[data-v-b0df26f4]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 46 46' width='40' height='40' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='4'%3E%3Cpath d='M2 30 L30 2 M30 30 L2 2' /%3E%3C/svg%3E\");height:2.6em;right:0}.tinybox__thumbs[data-v-b0df26f4]{bottom:0;height:15%;left:0;line-height:0;padding:0 10px;position:absolute;right:0;overflow-x:scroll;overflow-y:hidden;scroll-behavior:smooth;white-space:nowrap}.tinybox__thumbs__item[data-v-b0df26f4]{cursor:pointer;display:inline-block;height:10vh;margin:2.5vh 5px;object-fit:cover;overflow:hidden;width:10vh}.tinybox__thumbs__item--active[data-v-b0df26f4]{opacity:.3}.fade-enter[data-v-b0df26f4],.fade-leave-active[data-v-b0df26f4],.next-enter[data-v-b0df26f4],.next-leave-active[data-v-b0df26f4],.prev-enter[data-v-b0df26f4],.prev-leave-active[data-v-b0df26f4]{opacity:0}.fade-enter-active[data-v-b0df26f4],.fade-leave-active[data-v-b0df26f4],.next-leave-active[data-v-b0df26f4],.prev-leave-active[data-v-b0df26f4]{transition:opacity .3s ease}.prev-enter[data-v-b0df26f4]{transform:translateX(-40px)}.next-enter[data-v-b0df26f4]{transform:translateX(40px)}.next-enter-active[data-v-b0df26f4],.prev-enter-active[data-v-b0df26f4]{transition:opacity .3s ease,transform .3s ease}",map:void 0,media:void 0})}),e,"data-v-b0df26f4",!1,void 0,!1,i,void 0,void 0);var r=null;return"undefined"!=typeof window?r=window.Vue:"undefined"!=typeof global&&(r=global.Vue),r&&r.use({install:function e(t){e.installed||(e.installed=!0,t.component(s.name,s))}}),s}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).Tinybox=t()}(this,(function(){"use strict";var e={name:"Tinybox",model:{prop:"index",event:"change"},props:{images:{type:Array,default:function(){return[]}},index:{type:Number,default:null},loop:{type:Boolean,default:!1},noThumbs:{type:Boolean,default:!1}},data:function(){return{slide:"next",swipeDone:!1,swipeX:null}},computed:{open:function(){return null!=this.index},prevImage:function(){return this.index>0?this.index-1:this.loop?this.images.length-1:this.index},nextImage:function(){return this.index<this.images.length-1?this.index+1:this.loop?0:this.index}},watch:{open:function(e){e?window.addEventListener("keyup",this.keyup):window.removeEventListener("keyup",this.keyup)},index:function(e){var t=this;this.noThumbs||null==e||this.$nextTick((function(){var n=t.$refs,o=n.thumbs,i=n.thumbItems[e];if(i.offsetLeft+i.clientWidth/2>window.innerWidth/2){var a=i.offsetLeft-window.innerWidth/2;a<o.scrollWidth?o.scrollLeft=a+i.clientWidth/2:o.scrollLeft=o.scrollWidth}else o.scrollLeft=0}))}},methods:{close:function(){var e=this.index;this.goto(null),this.$emit("close",e)},prev:function(){this.$emit("prev",this.prevImage),this.goto(this.prevImage,"prev")},next:function(){this.$emit("next",this.nextImage),this.goto(this.nextImage,"next")},goto:function(e,t){this.slide=t||(this.index<e?"next":"prev"),this.$emit("change",e)},keyup:function(e){"ArrowRight"===e.code||"ArrowRight"===e.key||"Right"===e.key||39===e.keyCode?this.next():"ArrowLeft"===e.code||"ArrowLeft"===e.key||"Left"===e.key||37===e.keyCode?this.prev():"Escape"!==e.code&&"Escape"!==e.key&&"Esc"!==e.key&&27!==e.keyCode||this.close()},swipeStart:function(e){this.swipeDone=!1,1===e.changedTouches.length&&(this.swipeX=e.changedTouches[0].screenX)},swipe:function(e){if(!this.swipeDone&&1===e.changedTouches.length){var t=e.changedTouches[0].screenX-this.swipeX;t>=50?(this.prev(),this.swipeDone=!0):t<=-50&&(this.next(),this.swipeDone=!0)}}}};function t(e,t,n,o,i,a,s,r,c,d){"boolean"!=typeof s&&(c=r,r=s,s=!1);var l,h="function"==typeof n?n.options:n;if(e&&e.render&&(h.render=e.render,h.staticRenderFns=e.staticRenderFns,h._compiled=!0,i&&(h.functional=!0)),o&&(h._scopeId=o),a?(l=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,c(e)),e&&e._registeredComponents&&e._registeredComponents.add(a)},h._ssrRegister=l):t&&(l=s?function(e){t.call(this,d(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,r(e))}),l)if(h.functional){var p=h.render;h.render=function(e,t){return l.call(t),p(e,t)}}else{var u=h.beforeCreate;h.beforeCreate=u?[].concat(u,l):[l]}return n}var n,o="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function i(e){return function(e,t){return function(e,t){var i=o?t.media||"default":e,s=a[i]||(a[i]={ids:new Set,styles:[]});if(!s.ids.has(e)){s.ids.add(e);var r=t.source;if(t.map&&(r+="\n/*# sourceURL="+t.map.sources[0]+" */",r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),s.element||(s.element=document.createElement("style"),s.element.type="text/css",t.media&&s.element.setAttribute("media",t.media),void 0===n&&(n=document.head||document.getElementsByTagName("head")[0]),n.appendChild(s.element)),"styleSheet"in s.element)s.styles.push(r),s.element.styleSheet.cssText=s.styles.filter(Boolean).join("\n");else{var c=s.ids.size-1,d=document.createTextNode(r),l=s.element.childNodes;l[c]&&s.element.removeChild(l[c]),l.length?s.element.insertBefore(d,l[c]):s.element.appendChild(d)}}}(e,t)}}var a={};const s=t({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("transition",{attrs:{name:"fade"}},[e.open?n("div",{staticClass:"tinybox",on:{click:e.close,wheel:function(e){e.preventDefault()},touchmove:function(e){e.preventDefault()}}},[n("div",{staticClass:"tinybox__content",class:{"tinybox__content--no-thumbs":e.noThumbs},on:{touchstart:e.swipeStart,touchmove:e.swipe}},[n("transition",{attrs:{name:e.slide}},[n("img",{key:e.images[e.index].src||e.images[e.index]||"",staticClass:"tinybox__content__image",attrs:{src:e.images[e.index].src||e.images[e.index]||"",alt:e.images[e.index].alt||e.images[e.index].caption||""},on:{click:function(t){return t.stopPropagation(),e.next(t)}}})]),e.images[e.index].caption?n("span",{staticClass:"tinybox__content__image__caption",domProps:{textContent:e._s(e.images[e.index].caption)}}):e._e(),e.prevImage!==e.index?n("div",{staticClass:"tinybox__content__control tinybox__content__control--prev",on:{click:function(t){return t.stopPropagation(),e.prev(t)}}}):e._e(),e.nextImage!==e.index?n("div",{staticClass:"tinybox__content__control tinybox__content__control--next",on:{click:function(t){return t.stopPropagation(),e.next(t)}}}):e._e(),n("div",{staticClass:"tinybox__content__control tinybox__content__control--close",on:{click:function(t){return t.stopPropagation(),e.close(t)}}})],1),e.noThumbs?e._e():n("div",{ref:"thumbs",staticClass:"tinybox__thumbs",on:{touchmove:function(e){e.stopPropagation()},wheel:function(e){e.stopPropagation()}}},e._l(e.images,(function(t,o){return n("img",{key:o,ref:"thumbItems",refInFor:!0,staticClass:"tinybox__thumbs__item",class:{"tinybox__thumbs__item--active":e.index===o},attrs:{src:t.thumbnail||t.src||t||"",alt:e.images[e.index].alt||e.images[e.index].caption||""},on:{click:function(t){return t.stopPropagation(),e.goto(o)}}})})),0)]):e._e()])},staticRenderFns:[]},(function(e){e&&e("data-v-7c98eda5_0",{source:".tinybox[data-v-7c98eda5]{background-color:rgba(0,0,0,.9);bottom:0;left:0;position:fixed;right:0;text-align:center;top:0;z-index:1000}.tinybox__content[data-v-7c98eda5]{height:85%;position:relative;width:100%;display:flex;align-items:center;justify-content:center}.tinybox__content--no-thumbs[data-v-7c98eda5]{height:100%}.tinybox__content__image[data-v-7c98eda5]{background-color:#222;cursor:pointer;display:inline-block;max-height:90%;max-width:80%;position:absolute}.tinybox__content__image__caption[data-v-7c98eda5]{position:absolute;bottom:0;padding:.5rem .75rem;border-radius:5px;color:#fff;background-color:rgba(0,0,0,.9);opacity:.75;font-family:sans-serif;font-weight:lighter;font-size:1.2rem}.tinybox__content__control[data-v-7c98eda5]{background:no-repeat center/24px;cursor:pointer;opacity:.5;position:absolute;top:0;transition:opacity .3s ease;width:4em}.tinybox__content__control[data-v-7c98eda5]:hover{opacity:1}.tinybox__content__control--prev[data-v-7c98eda5]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 -2 28 36' width='40' height='60' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'%3E%3Cpath d='M20 30 L8 16 20 2' /%3E%3C/svg%3E\");bottom:0;left:0}.tinybox__content__control--next[data-v-7c98eda5]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 -2 28 36' width='40' height='60' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'%3E%3Cpath d='M12 30 L24 16 12 2' /%3E%3C/svg%3E\");bottom:0;right:0}.tinybox__content__control--close[data-v-7c98eda5]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 46 46' width='40' height='40' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='4'%3E%3Cpath d='M2 30 L30 2 M30 30 L2 2' /%3E%3C/svg%3E\");height:2.6em;right:0}.tinybox__thumbs[data-v-7c98eda5]{bottom:0;height:15%;left:0;line-height:0;padding:0 10px;position:absolute;right:0;overflow-x:scroll;overflow-y:hidden;scroll-behavior:smooth;white-space:nowrap}.tinybox__thumbs__item[data-v-7c98eda5]{cursor:pointer;display:inline-block;height:10vh;margin:2.5vh 5px;object-fit:cover;overflow:hidden;width:10vh}.tinybox__thumbs__item--active[data-v-7c98eda5]{opacity:.3}.fade-enter[data-v-7c98eda5],.fade-leave-active[data-v-7c98eda5],.next-enter[data-v-7c98eda5],.next-leave-active[data-v-7c98eda5],.prev-enter[data-v-7c98eda5],.prev-leave-active[data-v-7c98eda5]{opacity:0}.fade-enter-active[data-v-7c98eda5],.fade-leave-active[data-v-7c98eda5],.next-leave-active[data-v-7c98eda5],.prev-leave-active[data-v-7c98eda5]{transition:opacity .3s ease}.prev-enter[data-v-7c98eda5]{transform:translateX(-40px)}.next-enter[data-v-7c98eda5]{transform:translateX(40px)}.next-enter-active[data-v-7c98eda5],.prev-enter-active[data-v-7c98eda5]{transition:opacity .3s ease,transform .3s ease}",map:void 0,media:void 0})}),e,"data-v-7c98eda5",!1,void 0,!1,i,void 0,void 0);var r=null;return"undefined"!=typeof window?r=window.Vue:"undefined"!=typeof global&&(r=global.Vue),r&&r.use({install:function e(t){e.installed||(e.installed=!0,t.component(s.name,s))}}),s}));

package.json

 {
   "name": "vue-tinybox",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "A slick, yet tiny lightbox gallery for Vue.js",
@@ -43,4 +43,4 @@ "license": "MIT",
     "build": "cross-env NODE_ENV=production rollup -c",
-    "dev:build": "rollup -c -w",
-    "dev:serve": "sirv ./dev -s -q -D",
+    "dev:build": "rollup -c -w --no-watch.clearScreen",
+    "dev:serve": "sirv ./dev -s -D -p 8629",
     "dev": "run-p dev:*",
@@ -77,3 +77,3 @@ "test:lint": "eslint .",
       "path": "dist/tinybox.umd.js",
-      "limit": "3 KB",
+      "limit": "3333 B",
       "webpack": false
@@ -83,3 +83,3 @@ },
       "path": "dist/tinybox.esm.js",
-      "limit": "3 KB"
+      "limit": "3333 B"
     }
@@ -86,0 +86,0 @@ ],

README.md

@@ -8,3 +8,3 @@ # vue-tinybox
 - **Slick.** No excessive design. Pictures, thumbnails, controls.
-- **Tiny.** Dependency-free. Less than 3 KB minified and gzipped.
+- **Tiny.** Dependency-free. 3 KB minified and gzipped.
 - **Adaptive.** Works on computers. Works on tablets. Works on phones.
@@ -113,2 +113,43 @@
 
+### Events
+
+| Event name    | Payload                                  | Description                                                                                |
+|---------------|------------------------------------------|--------------------------------------------------------------------------------------------|
+| `change`      | index of the image changed to            | Is emitted on any image change (thumbnail navigation, prev/next, close)                    |
+| `prev`/`next` | index of the image changed to            | Is emitted specifically when the user clicks "Prev"/"Next" or presses Left/Right arrow key |
+| `close`       | index of the image Tinybox was closed at | Is emitted specifically when the user clicks "Close" or presses the Esc key                |
+
+Events can come in handy for business logic cases:
+
+```html
+<Tinybox
+    :images="images"
+    v-model="index"
+    @change="onChange"
+    @prev="onPrevious"
+    @next="onNext"
+    @close="onClose"
+/>
+```
+
+```js
+export default {
+    // ...
+    methods: {
+        onChange(index) {
+            console.log("User navigated to the photo: ", index);
+        },
+        onPrevious(index) {
+            console.log("User clicked 'previous' to switch to: ", index);
+        },
+        onNext(index) {
+            console.log("User clicked 'previous' to switch to: ", index);
+        },
+        onClose(index) {
+            console.log("User closed TinyBox on this photo: ", index);
+        }
+    },
+}
+```
+
 ## Browser support
@@ -115,0 +156,0 @@

No alert changes

Improved metrics

Number of lines in readme file

164

increased by33.33%

Worsened metrics

Total package byte prevSize

37205

decreased by-0.87%

Number of package files

6

decreased by-14.29%

No dependency changes