vue-tinybox - npm Package Compare versions

Comparing version 1.0.0-1 to 1.0.0-2

CHANGELOG.md

 # CHANGELOG
 
+## 1.0.0
+
+### 🛑 BREAKING
+
+- Node 8 is not supported anymore as it's reached the end of its support lifecycle
+- `close` event has been removed. The optimal way to use the component is now via `v-model` or `change` event (#14)
+
+### New & Improved
+
+- `v-model` support; an index of the image needs to be passed (#14)
+- ability to hide thumbnails with `no-thumbs` prop (#18)
+- previous icons have been replaced in favor of smaller [bytesize-icons](https://github.com/danklammer/bytesize-icons) (#7)
+- Tinybox will now auto-install if it detects Vue in `global` or `window` scope
+- node structure is now simpler and more optimized
+- package size went down significantly to below 3 KB
+- keyboard detection moved to `window`, no more focus hacks needed
+- source code readability improved further
+
+### Fixed
+
+- thumbnails had wrong aspect ration if they weren't square (#19)
+- flashing images on navigation due to them not loading (#22)
+- a bug on touch devices that prevented "chained" swiping (multiple swipe gestures in a row)
+- when looping around images the wrong animation was playing
+
 ## 0.3.0
@@ -9,3 +34,3 @@
 
-### Improved
+### New & Improved
 
@@ -18,3 +43,3 @@ - package size went down ~170 bytes
 
-### New
+### New & Improved
 
@@ -33,8 +58,9 @@ - slide animation when navigating through photos (#3)
 
-Initial pre-release of `vue-tinybox`
+The initial version of the package.
 
-### New
+Basic functionality includes:
 
-- ability to open and close lightbox
-- ability to pass photos as props
-- ability to loop photos
+- loading the lightbox with images and optional thumbnails
+- on-screen controls
+- ability to loop images
+

dist/tinybox.esm.js

@@ -1,1 +0,1 @@
-var t={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(t){t?window.addEventListener("keyup",this.keyup):window.removeEventListener("keyup",this.keyup)}},methods:{close:function(){this.goto(null)},prev:function(){this.goto(this.prevImage,"prev")},next:function(){this.goto(this.nextImage,"next")},goto:function(t,e){this.slide=e||(this.index<t?"next":"prev"),this.$emit("change",t)},keyup:function(t){"ArrowRight"===t.code?this.next():"ArrowLeft"===t.code?this.prev():"Escape"===t.code&&this.close()},swipeStart:function(t){this.swipeDone=!1,1===t.changedTouches.length&&(this.swipeX=t.changedTouches[0].screenX)},swipe:function(t){if(!this.swipeDone&&1===t.changedTouches.length){var e=t.changedTouches[0].screenX-this.swipeX;e>=50?(this.prev(),this.swipeDone=!0):e<=-50&&(this.next(),this.swipeDone=!0)}}}};const e="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());let n;const o={};const i=function(t,e,n,o,i,a,s,r,c,l){"boolean"!=typeof s&&(c=r,r=s,s=!1);const d="function"==typeof n?n.options:n;let p;if(t&&t.render&&(d.render=t.render,d.staticRenderFns=t.staticRenderFns,d._compiled=!0,i&&(d.functional=!0)),o&&(d._scopeId=o),a?(p=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),e&&e.call(this,c(t)),t&&t._registeredComponents&&t._registeredComponents.add(a)},d._ssrRegister=p):e&&(p=s?function(t){e.call(this,l(t,this.$root.$options.shadowRoot))}:function(t){e.call(this,r(t))}),p)if(d.functional){const t=d.render;d.render=function(e,n){return p.call(n),t(e,n)}}else{const t=d.beforeCreate;d.beforeCreate=t?[].concat(t,p):[p]}return n}({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("transition",{attrs:{name:"fade"}},[t.open?n("div",{staticClass:"tinybox",on:{click:t.close,wheel:function(t){t.preventDefault()},touchmove:function(t){t.preventDefault()}}},[n("div",{staticClass:"tinybox__content",class:{"tinybox__content--no-thumbs":t.noThumbs},on:{touchstart:t.swipeStart,touchmove:t.swipe}},[n("transition",{attrs:{name:"slide-"+t.slide}},[n("img",{key:t.images[t.index].src||t.images[t.index]||"",staticClass:"tinybox__content__image",attrs:{src:t.images[t.index].src||t.images[t.index]||"",alt:t.images[t.index].alt||""},on:{click:function(e){return e.stopPropagation(),t.next(e)}}})]),t.prevImage!==t.index?n("div",{staticClass:"tinybox__content__control tinybox__content__control--prev",on:{click:function(e){return e.stopPropagation(),t.prev(e)}}}):t._e(),t.nextImage!==t.index?n("div",{staticClass:"tinybox__content__control tinybox__content__control--next",on:{click:function(e){return e.stopPropagation(),t.next(e)}}}):t._e(),n("div",{staticClass:"tinybox__content__control tinybox__content__control--close",on:{click:function(e){return e.stopPropagation(),t.close(e)}}})],1),t.noThumbs?t._e():n("div",{staticClass:"tinybox__thumbs",on:{touchmove:function(t){t.stopPropagation()},wheel:function(t){t.stopPropagation()}}},t._l(t.images,(function(e,o){return n("img",{key:o,staticClass:"tinybox__thumbs__item",class:{"tinybox__thumbs__item--active":t.index===o},attrs:{src:e.thumbnail||e.src||e||"",alt:e.alt||""},on:{click:function(e){return e.stopPropagation(),t.goto(o)}}})})),0)]):t._e()])},staticRenderFns:[]},(function(t){t&&t("data-v-5665ccb8_0",{source:".tinybox[data-v-5665ccb8]{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-5665ccb8]{height:85%;position:relative;width:100%}.tinybox__content--no-thumbs[data-v-5665ccb8]{height:100%}.tinybox__content[data-v-5665ccb8]::before{content:'';display:inline-block;height:100%;vertical-align:middle}.tinybox__content__image[data-v-5665ccb8]{background-color:#222;cursor:pointer;display:inline-block;max-height:90%;max-width:80%;vertical-align:middle}.tinybox__content__control[data-v-5665ccb8]{background:no-repeat center/24px;cursor:pointer;opacity:.5;position:absolute;top:0;-webkit-transition:opacity .3s ease;transition:opacity .3s ease;width:4em}.tinybox__content__control[data-v-5665ccb8]:hover{opacity:1}.tinybox__content__control--prev[data-v-5665ccb8]{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-5665ccb8]{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-5665ccb8]{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-5665ccb8]{bottom:0;height:15%;left:0;line-height:0;padding:0 10px;position:absolute;right:0;overflow-x:scroll;overflow-y:hidden;white-space:nowrap}.tinybox__thumbs__item[data-v-5665ccb8]{cursor:pointer;display:inline-block;height:10vh;margin:2.5vh 5px;-o-object-fit:cover;object-fit:cover;overflow:hidden;width:10vh}.tinybox__thumbs__item--active[data-v-5665ccb8]{opacity:.3}.fade-enter-active[data-v-5665ccb8],.fade-leave-active[data-v-5665ccb8]{-webkit-transition:opacity .3s ease;transition:opacity .3s ease}.fade-enter[data-v-5665ccb8],.fade-leave-active[data-v-5665ccb8]{opacity:0}.slide-next-enter-active[data-v-5665ccb8]{-webkit-animation:.3s ease 1 normal;animation:.3s ease 1 normal;-webkit-animation-name:next-data-v-5665ccb8;animation-name:next-data-v-5665ccb8}.slide-prev-enter-active[data-v-5665ccb8]{-webkit-animation:.3s ease 1 normal;animation:.3s ease 1 normal;-webkit-animation-name:prev-data-v-5665ccb8;animation-name:prev-data-v-5665ccb8}@-webkit-keyframes prev-data-v-5665ccb8{from{opacity:0;-webkit-transform:translateX(-80px);transform:translateX(-80px)}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes prev-data-v-5665ccb8{from{opacity:0;-webkit-transform:translateX(-80px);transform:translateX(-80px)}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes next-data-v-5665ccb8{from{opacity:0;-webkit-transform:translateX(80px);transform:translateX(80px)}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes next-data-v-5665ccb8{from{opacity:0;-webkit-transform:translateX(80px);transform:translateX(80px)}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}",map:void 0,media:void 0})}),t,"data-v-5665ccb8",!1,void 0,!1,(function(t){return(t,i)=>(function(t,i){const a=e?i.media||"default":t,s=o[a]||(o[a]={ids:new Set,styles:[]});if(!s.ids.has(t)){s.ids.add(t);let e=i.source;if(i.map&&(e+="\n/*# sourceURL="+i.map.sources[0]+" */",e+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(i.map))))+" */"),s.element||(s.element=document.createElement("style"),s.element.type="text/css",i.media&&s.element.setAttribute("media",i.media),void 0===n&&(n=document.head||document.getElementsByTagName("head")[0]),n.appendChild(s.element)),"styleSheet"in s.element)s.styles.push(e),s.element.styleSheet.cssText=s.styles.filter(Boolean).join("\n");else{const t=s.ids.size-1,n=document.createTextNode(e),o=s.element.childNodes;o[t]&&s.element.removeChild(o[t]),o.length?s.element.insertBefore(n,o[t]):s.element.appendChild(n)}}})(t,i)}),void 0,void 0);var a=null;"undefined"!=typeof window?a=window.Vue:"undefined"!=typeof global&&(a=global.Vue),a&&function t(e){t.installed||(t.installed=!0,e.component(i.name,i))}(a);export default i;
+var t={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(t){t?window.addEventListener("keyup",this.keyup):window.removeEventListener("keyup",this.keyup)}},methods:{close:function(){this.goto(null)},prev:function(){this.goto(this.prevImage,"prev")},next:function(){this.goto(this.nextImage,"next")},goto:function(t,e){this.slide=e||(this.index<t?"next":"prev"),this.$emit("change",t)},keyup:function(t){"ArrowRight"===t.code?this.next():"ArrowLeft"===t.code?this.prev():"Escape"===t.code&&this.close()},swipeStart:function(t){this.swipeDone=!1,1===t.changedTouches.length&&(this.swipeX=t.changedTouches[0].screenX)},swipe:function(t){if(!this.swipeDone&&1===t.changedTouches.length){var e=t.changedTouches[0].screenX-this.swipeX;e>=50?(this.prev(),this.swipeDone=!0):e<=-50&&(this.next(),this.swipeDone=!0)}}}};const e="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());let n;const o={};const i=function(t,e,n,o,i,a,s,r,d,c){"boolean"!=typeof s&&(d=r,r=s,s=!1);const l="function"==typeof n?n.options:n;let p;if(t&&t.render&&(l.render=t.render,l.staticRenderFns=t.staticRenderFns,l._compiled=!0,i&&(l.functional=!0)),o&&(l._scopeId=o),a?(p=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),e&&e.call(this,d(t)),t&&t._registeredComponents&&t._registeredComponents.add(a)},l._ssrRegister=p):e&&(p=s?function(t){e.call(this,c(t,this.$root.$options.shadowRoot))}:function(t){e.call(this,r(t))}),p)if(l.functional){const t=l.render;l.render=function(e,n){return p.call(n),t(e,n)}}else{const t=l.beforeCreate;l.beforeCreate=t?[].concat(t,p):[p]}return n}({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("transition",{attrs:{name:"fade"}},[t.open?n("div",{staticClass:"tinybox",on:{click:t.close,wheel:function(t){t.preventDefault()},touchmove:function(t){t.preventDefault()}}},[n("div",{staticClass:"tinybox__content",class:{"tinybox__content--no-thumbs":t.noThumbs},on:{touchstart:t.swipeStart,touchmove:t.swipe}},[n("transition",{attrs:{name:t.slide}},[n("img",{key:t.images[t.index].src||t.images[t.index]||"",staticClass:"tinybox__content__image",attrs:{src:t.images[t.index].src||t.images[t.index]||"",alt:t.images[t.index].alt||""},on:{click:function(e){return e.stopPropagation(),t.next(e)}}})]),t.prevImage!==t.index?n("div",{staticClass:"tinybox__content__control tinybox__content__control--prev",on:{click:function(e){return e.stopPropagation(),t.prev(e)}}}):t._e(),t.nextImage!==t.index?n("div",{staticClass:"tinybox__content__control tinybox__content__control--next",on:{click:function(e){return e.stopPropagation(),t.next(e)}}}):t._e(),n("div",{staticClass:"tinybox__content__control tinybox__content__control--close",on:{click:function(e){return e.stopPropagation(),t.close(e)}}})],1),t.noThumbs?t._e():n("div",{staticClass:"tinybox__thumbs",on:{touchmove:function(t){t.stopPropagation()},wheel:function(t){t.stopPropagation()}}},t._l(t.images,(function(e,o){return n("img",{key:o,staticClass:"tinybox__thumbs__item",class:{"tinybox__thumbs__item--active":t.index===o},attrs:{src:e.thumbnail||e.src||e||"",alt:e.alt||""},on:{click:function(e){return e.stopPropagation(),t.goto(o)}}})})),0)]):t._e()])},staticRenderFns:[]},(function(t){t&&t("data-v-389da66a_0",{source:".tinybox[data-v-389da66a]{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-389da66a]{height:85%;position:relative;width:100%;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center}.tinybox__content--no-thumbs[data-v-389da66a]{height:100%}.tinybox__content__image[data-v-389da66a]{background-color:#222;cursor:pointer;display:inline-block;max-height:90%;max-width:80%;position:absolute}.tinybox__content__control[data-v-389da66a]{background:no-repeat center/24px;cursor:pointer;opacity:.5;position:absolute;top:0;-webkit-transition:opacity .3s ease;transition:opacity .3s ease;width:4em}.tinybox__content__control[data-v-389da66a]:hover{opacity:1}.tinybox__content__control--prev[data-v-389da66a]{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-389da66a]{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-389da66a]{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-389da66a]{bottom:0;height:15%;left:0;line-height:0;padding:0 10px;position:absolute;right:0;overflow-x:scroll;overflow-y:hidden;white-space:nowrap}.tinybox__thumbs__item[data-v-389da66a]{cursor:pointer;display:inline-block;height:10vh;margin:2.5vh 5px;-o-object-fit:cover;object-fit:cover;overflow:hidden;width:10vh}.tinybox__thumbs__item--active[data-v-389da66a]{opacity:.3}.fade-enter[data-v-389da66a],.fade-leave-active[data-v-389da66a],.next-enter[data-v-389da66a],.next-leave-active[data-v-389da66a],.prev-enter[data-v-389da66a],.prev-leave-active[data-v-389da66a]{opacity:0}.fade-enter-active[data-v-389da66a],.fade-leave-active[data-v-389da66a],.next-leave-active[data-v-389da66a],.prev-leave-active[data-v-389da66a]{-webkit-transition:opacity .3s ease;transition:opacity .3s ease}.prev-enter[data-v-389da66a]{-webkit-transform:translateX(-40px);transform:translateX(-40px)}.next-enter[data-v-389da66a]{-webkit-transform:translateX(40px);transform:translateX(40px)}.next-enter-active[data-v-389da66a],.prev-enter-active[data-v-389da66a]{-webkit-transition:opacity .3s ease,-webkit-transform .3s ease;transition:opacity .3s ease,-webkit-transform .3s ease;transition:opacity .3s ease,transform .3s ease;transition:opacity .3s ease,transform .3s ease,-webkit-transform .3s ease}",map:void 0,media:void 0})}),t,"data-v-389da66a",!1,void 0,!1,(function(t){return(t,i)=>(function(t,i){const a=e?i.media||"default":t,s=o[a]||(o[a]={ids:new Set,styles:[]});if(!s.ids.has(t)){s.ids.add(t);let e=i.source;if(i.map&&(e+="\n/*# sourceURL="+i.map.sources[0]+" */",e+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(i.map))))+" */"),s.element||(s.element=document.createElement("style"),s.element.type="text/css",i.media&&s.element.setAttribute("media",i.media),void 0===n&&(n=document.head||document.getElementsByTagName("head")[0]),n.appendChild(s.element)),"styleSheet"in s.element)s.styles.push(e),s.element.styleSheet.cssText=s.styles.filter(Boolean).join("\n");else{const t=s.ids.size-1,n=document.createTextNode(e),o=s.element.childNodes;o[t]&&s.element.removeChild(o[t]),o.length?s.element.insertBefore(n,o[t]):s.element.appendChild(n)}}})(t,i)}),void 0,void 0);var a=null;"undefined"!=typeof window?a=window.Vue:"undefined"!=typeof global&&(a=global.Vue),a&&function t(e){t.installed||(t.installed=!0,e.component(i.name,i))}(a);export default i;

dist/tinybox.umd.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).Tinybox=e()}(this,(function(){"use strict";var t={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(t){t?window.addEventListener("keyup",this.keyup):window.removeEventListener("keyup",this.keyup)}},methods:{close:function(){this.goto(null)},prev:function(){this.goto(this.prevImage,"prev")},next:function(){this.goto(this.nextImage,"next")},goto:function(t,e){this.slide=e||(this.index<t?"next":"prev"),this.$emit("change",t)},keyup:function(t){"ArrowRight"===t.code?this.next():"ArrowLeft"===t.code?this.prev():"Escape"===t.code&&this.close()},swipeStart:function(t){this.swipeDone=!1,1===t.changedTouches.length&&(this.swipeX=t.changedTouches[0].screenX)},swipe:function(t){if(!this.swipeDone&&1===t.changedTouches.length){var e=t.changedTouches[0].screenX-this.swipeX;e>=50?(this.prev(),this.swipeDone=!0):e<=-50&&(this.next(),this.swipeDone=!0)}}}};const e="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());let n;const o={};const i=function(t,e,n,o,i,a,s,r,c,l){"boolean"!=typeof s&&(c=r,r=s,s=!1);const d="function"==typeof n?n.options:n;let p;if(t&&t.render&&(d.render=t.render,d.staticRenderFns=t.staticRenderFns,d._compiled=!0,i&&(d.functional=!0)),o&&(d._scopeId=o),a?(p=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),e&&e.call(this,c(t)),t&&t._registeredComponents&&t._registeredComponents.add(a)},d._ssrRegister=p):e&&(p=s?function(t){e.call(this,l(t,this.$root.$options.shadowRoot))}:function(t){e.call(this,r(t))}),p)if(d.functional){const t=d.render;d.render=function(e,n){return p.call(n),t(e,n)}}else{const t=d.beforeCreate;d.beforeCreate=t?[].concat(t,p):[p]}return n}({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("transition",{attrs:{name:"fade"}},[t.open?n("div",{staticClass:"tinybox",on:{click:t.close,wheel:function(t){t.preventDefault()},touchmove:function(t){t.preventDefault()}}},[n("div",{staticClass:"tinybox__content",class:{"tinybox__content--no-thumbs":t.noThumbs},on:{touchstart:t.swipeStart,touchmove:t.swipe}},[n("transition",{attrs:{name:"slide-"+t.slide}},[n("img",{key:t.images[t.index].src||t.images[t.index]||"",staticClass:"tinybox__content__image",attrs:{src:t.images[t.index].src||t.images[t.index]||"",alt:t.images[t.index].alt||""},on:{click:function(e){return e.stopPropagation(),t.next(e)}}})]),t.prevImage!==t.index?n("div",{staticClass:"tinybox__content__control tinybox__content__control--prev",on:{click:function(e){return e.stopPropagation(),t.prev(e)}}}):t._e(),t.nextImage!==t.index?n("div",{staticClass:"tinybox__content__control tinybox__content__control--next",on:{click:function(e){return e.stopPropagation(),t.next(e)}}}):t._e(),n("div",{staticClass:"tinybox__content__control tinybox__content__control--close",on:{click:function(e){return e.stopPropagation(),t.close(e)}}})],1),t.noThumbs?t._e():n("div",{staticClass:"tinybox__thumbs",on:{touchmove:function(t){t.stopPropagation()},wheel:function(t){t.stopPropagation()}}},t._l(t.images,(function(e,o){return n("img",{key:o,staticClass:"tinybox__thumbs__item",class:{"tinybox__thumbs__item--active":t.index===o},attrs:{src:e.thumbnail||e.src||e||"",alt:e.alt||""},on:{click:function(e){return e.stopPropagation(),t.goto(o)}}})})),0)]):t._e()])},staticRenderFns:[]},(function(t){t&&t("data-v-5665ccb8_0",{source:".tinybox[data-v-5665ccb8]{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-5665ccb8]{height:85%;position:relative;width:100%}.tinybox__content--no-thumbs[data-v-5665ccb8]{height:100%}.tinybox__content[data-v-5665ccb8]::before{content:'';display:inline-block;height:100%;vertical-align:middle}.tinybox__content__image[data-v-5665ccb8]{background-color:#222;cursor:pointer;display:inline-block;max-height:90%;max-width:80%;vertical-align:middle}.tinybox__content__control[data-v-5665ccb8]{background:no-repeat center/24px;cursor:pointer;opacity:.5;position:absolute;top:0;-webkit-transition:opacity .3s ease;transition:opacity .3s ease;width:4em}.tinybox__content__control[data-v-5665ccb8]:hover{opacity:1}.tinybox__content__control--prev[data-v-5665ccb8]{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-5665ccb8]{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-5665ccb8]{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-5665ccb8]{bottom:0;height:15%;left:0;line-height:0;padding:0 10px;position:absolute;right:0;overflow-x:scroll;overflow-y:hidden;white-space:nowrap}.tinybox__thumbs__item[data-v-5665ccb8]{cursor:pointer;display:inline-block;height:10vh;margin:2.5vh 5px;-o-object-fit:cover;object-fit:cover;overflow:hidden;width:10vh}.tinybox__thumbs__item--active[data-v-5665ccb8]{opacity:.3}.fade-enter-active[data-v-5665ccb8],.fade-leave-active[data-v-5665ccb8]{-webkit-transition:opacity .3s ease;transition:opacity .3s ease}.fade-enter[data-v-5665ccb8],.fade-leave-active[data-v-5665ccb8]{opacity:0}.slide-next-enter-active[data-v-5665ccb8]{-webkit-animation:.3s ease 1 normal;animation:.3s ease 1 normal;-webkit-animation-name:next-data-v-5665ccb8;animation-name:next-data-v-5665ccb8}.slide-prev-enter-active[data-v-5665ccb8]{-webkit-animation:.3s ease 1 normal;animation:.3s ease 1 normal;-webkit-animation-name:prev-data-v-5665ccb8;animation-name:prev-data-v-5665ccb8}@-webkit-keyframes prev-data-v-5665ccb8{from{opacity:0;-webkit-transform:translateX(-80px);transform:translateX(-80px)}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes prev-data-v-5665ccb8{from{opacity:0;-webkit-transform:translateX(-80px);transform:translateX(-80px)}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes next-data-v-5665ccb8{from{opacity:0;-webkit-transform:translateX(80px);transform:translateX(80px)}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes next-data-v-5665ccb8{from{opacity:0;-webkit-transform:translateX(80px);transform:translateX(80px)}to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}",map:void 0,media:void 0})}),t,"data-v-5665ccb8",!1,void 0,!1,(function(t){return(t,i)=>(function(t,i){const a=e?i.media||"default":t,s=o[a]||(o[a]={ids:new Set,styles:[]});if(!s.ids.has(t)){s.ids.add(t);let e=i.source;if(i.map&&(e+="\n/*# sourceURL="+i.map.sources[0]+" */",e+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(i.map))))+" */"),s.element||(s.element=document.createElement("style"),s.element.type="text/css",i.media&&s.element.setAttribute("media",i.media),void 0===n&&(n=document.head||document.getElementsByTagName("head")[0]),n.appendChild(s.element)),"styleSheet"in s.element)s.styles.push(e),s.element.styleSheet.cssText=s.styles.filter(Boolean).join("\n");else{const t=s.ids.size-1,n=document.createTextNode(e),o=s.element.childNodes;o[t]&&s.element.removeChild(o[t]),o.length?s.element.insertBefore(n,o[t]):s.element.appendChild(n)}}})(t,i)}),void 0,void 0);var a=null;return"undefined"!=typeof window?a=window.Vue:"undefined"!=typeof global&&(a=global.Vue),a&&function t(e){t.installed||(t.installed=!0,e.component(i.name,i))}(a),i}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).Tinybox=e()}(this,(function(){"use strict";var t={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(t){t?window.addEventListener("keyup",this.keyup):window.removeEventListener("keyup",this.keyup)}},methods:{close:function(){this.goto(null)},prev:function(){this.goto(this.prevImage,"prev")},next:function(){this.goto(this.nextImage,"next")},goto:function(t,e){this.slide=e||(this.index<t?"next":"prev"),this.$emit("change",t)},keyup:function(t){"ArrowRight"===t.code?this.next():"ArrowLeft"===t.code?this.prev():"Escape"===t.code&&this.close()},swipeStart:function(t){this.swipeDone=!1,1===t.changedTouches.length&&(this.swipeX=t.changedTouches[0].screenX)},swipe:function(t){if(!this.swipeDone&&1===t.changedTouches.length){var e=t.changedTouches[0].screenX-this.swipeX;e>=50?(this.prev(),this.swipeDone=!0):e<=-50&&(this.next(),this.swipeDone=!0)}}}};const e="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());let n;const o={};const i=function(t,e,n,o,i,a,s,r,d,c){"boolean"!=typeof s&&(d=r,r=s,s=!1);const l="function"==typeof n?n.options:n;let p;if(t&&t.render&&(l.render=t.render,l.staticRenderFns=t.staticRenderFns,l._compiled=!0,i&&(l.functional=!0)),o&&(l._scopeId=o),a?(p=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),e&&e.call(this,d(t)),t&&t._registeredComponents&&t._registeredComponents.add(a)},l._ssrRegister=p):e&&(p=s?function(t){e.call(this,c(t,this.$root.$options.shadowRoot))}:function(t){e.call(this,r(t))}),p)if(l.functional){const t=l.render;l.render=function(e,n){return p.call(n),t(e,n)}}else{const t=l.beforeCreate;l.beforeCreate=t?[].concat(t,p):[p]}return n}({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("transition",{attrs:{name:"fade"}},[t.open?n("div",{staticClass:"tinybox",on:{click:t.close,wheel:function(t){t.preventDefault()},touchmove:function(t){t.preventDefault()}}},[n("div",{staticClass:"tinybox__content",class:{"tinybox__content--no-thumbs":t.noThumbs},on:{touchstart:t.swipeStart,touchmove:t.swipe}},[n("transition",{attrs:{name:t.slide}},[n("img",{key:t.images[t.index].src||t.images[t.index]||"",staticClass:"tinybox__content__image",attrs:{src:t.images[t.index].src||t.images[t.index]||"",alt:t.images[t.index].alt||""},on:{click:function(e){return e.stopPropagation(),t.next(e)}}})]),t.prevImage!==t.index?n("div",{staticClass:"tinybox__content__control tinybox__content__control--prev",on:{click:function(e){return e.stopPropagation(),t.prev(e)}}}):t._e(),t.nextImage!==t.index?n("div",{staticClass:"tinybox__content__control tinybox__content__control--next",on:{click:function(e){return e.stopPropagation(),t.next(e)}}}):t._e(),n("div",{staticClass:"tinybox__content__control tinybox__content__control--close",on:{click:function(e){return e.stopPropagation(),t.close(e)}}})],1),t.noThumbs?t._e():n("div",{staticClass:"tinybox__thumbs",on:{touchmove:function(t){t.stopPropagation()},wheel:function(t){t.stopPropagation()}}},t._l(t.images,(function(e,o){return n("img",{key:o,staticClass:"tinybox__thumbs__item",class:{"tinybox__thumbs__item--active":t.index===o},attrs:{src:e.thumbnail||e.src||e||"",alt:e.alt||""},on:{click:function(e){return e.stopPropagation(),t.goto(o)}}})})),0)]):t._e()])},staticRenderFns:[]},(function(t){t&&t("data-v-389da66a_0",{source:".tinybox[data-v-389da66a]{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-389da66a]{height:85%;position:relative;width:100%;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center}.tinybox__content--no-thumbs[data-v-389da66a]{height:100%}.tinybox__content__image[data-v-389da66a]{background-color:#222;cursor:pointer;display:inline-block;max-height:90%;max-width:80%;position:absolute}.tinybox__content__control[data-v-389da66a]{background:no-repeat center/24px;cursor:pointer;opacity:.5;position:absolute;top:0;-webkit-transition:opacity .3s ease;transition:opacity .3s ease;width:4em}.tinybox__content__control[data-v-389da66a]:hover{opacity:1}.tinybox__content__control--prev[data-v-389da66a]{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-389da66a]{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-389da66a]{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-389da66a]{bottom:0;height:15%;left:0;line-height:0;padding:0 10px;position:absolute;right:0;overflow-x:scroll;overflow-y:hidden;white-space:nowrap}.tinybox__thumbs__item[data-v-389da66a]{cursor:pointer;display:inline-block;height:10vh;margin:2.5vh 5px;-o-object-fit:cover;object-fit:cover;overflow:hidden;width:10vh}.tinybox__thumbs__item--active[data-v-389da66a]{opacity:.3}.fade-enter[data-v-389da66a],.fade-leave-active[data-v-389da66a],.next-enter[data-v-389da66a],.next-leave-active[data-v-389da66a],.prev-enter[data-v-389da66a],.prev-leave-active[data-v-389da66a]{opacity:0}.fade-enter-active[data-v-389da66a],.fade-leave-active[data-v-389da66a],.next-leave-active[data-v-389da66a],.prev-leave-active[data-v-389da66a]{-webkit-transition:opacity .3s ease;transition:opacity .3s ease}.prev-enter[data-v-389da66a]{-webkit-transform:translateX(-40px);transform:translateX(-40px)}.next-enter[data-v-389da66a]{-webkit-transform:translateX(40px);transform:translateX(40px)}.next-enter-active[data-v-389da66a],.prev-enter-active[data-v-389da66a]{-webkit-transition:opacity .3s ease,-webkit-transform .3s ease;transition:opacity .3s ease,-webkit-transform .3s ease;transition:opacity .3s ease,transform .3s ease;transition:opacity .3s ease,transform .3s ease,-webkit-transform .3s ease}",map:void 0,media:void 0})}),t,"data-v-389da66a",!1,void 0,!1,(function(t){return(t,i)=>(function(t,i){const a=e?i.media||"default":t,s=o[a]||(o[a]={ids:new Set,styles:[]});if(!s.ids.has(t)){s.ids.add(t);let e=i.source;if(i.map&&(e+="\n/*# sourceURL="+i.map.sources[0]+" */",e+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(i.map))))+" */"),s.element||(s.element=document.createElement("style"),s.element.type="text/css",i.media&&s.element.setAttribute("media",i.media),void 0===n&&(n=document.head||document.getElementsByTagName("head")[0]),n.appendChild(s.element)),"styleSheet"in s.element)s.styles.push(e),s.element.styleSheet.cssText=s.styles.filter(Boolean).join("\n");else{const t=s.ids.size-1,n=document.createTextNode(e),o=s.element.childNodes;o[t]&&s.element.removeChild(o[t]),o.length?s.element.insertBefore(n,o[t]):s.element.appendChild(n)}}})(t,i)}),void 0,void 0);var a=null;return"undefined"!=typeof window?a=window.Vue:"undefined"!=typeof global&&(a=global.Vue),a&&function t(e){t.installed||(t.installed=!0,e.component(i.name,i))}(a),i}));

package.json

 {
   "name": "vue-tinybox",
-  "version": "1.0.0-1",
-  "description": "A slick, yet tiny lightbox gallery component for Vue.js",
+  "version": "1.0.0-2",
+  "description": "A slick, yet tiny lightbox gallery for Vue.js",
   "license": "MIT",
@@ -6,0 +6,0 @@ "keywords": [

README.md

@@ -1,82 +0,116 @@
-# vue-tinybox
+<h1>
+    vue-tinybox
+    <img src="https://raw.githubusercontent.com/googlefonts/noto-emoji/master/png/128/emoji_u1f30c.png"
+         align="right"
+         alt="Milky Way emoji"
+         width="96"
+         height="96">
+</h1>
 
-A slick, yet tiny lightbox gallery component for Vue.js
+A slick, yet tiny lightbox gallery for Vue.js
 
-- **Slick.** Nothing excessive. Image, controls and thumbnails.
-- **Small.** Dependency-free and less than 3 KB minified and gzipped.
-- **Adaptive.** Works great on both desktop and mobile.
+- **Slick.** No excessive design. Pictures, thumbnails, controls.
+- **Tiny.** Dependency-free. Less than 3 KB minified and gzipped.
+- **Adaptive.** Works on computers. Works on tablets. Works on phones.
 
 ## Demo
 
-The live demo can be found at https://os.karamoff.ru/vue-tinybox
+Observe the live demo at https://os.karamoff.dev/vue-tinybox
 
+## Basic usage
+
+```html
+<Tinybox
+    v-model="index"
+    :images="images"
+    loop
+    no-thumbs
+/>
+```
+
 ## Install
 
-### Node.js
+### Browsers
 
-Install the module as you normally would via npm or yarn:
+1. Include the link to Tinybox in `<head>` alongside Vue.js:
 
-```sh
-npm install vue-tinybox
-# or
-yarn add vue-tinybox
-```
+   ```html
+   <script src="https://unpkg.com/vue"></script>
+   <script src="https://unpkg.com/vue-tinybox"></script>
+   ```
 
-### Browsers
+   You can of course use _jsDelivr_ instead of _unpkg_.
+  
+2. Tinybox will auto-install upon detecting the global Vue instance. You can use
+   it right away.
 
-Just include the link to the Tinybox in your `<head>`:
+### Node environment
 
-```html
-<script src="path/to/vue.js"></script>
-<script src="path/to/tinybox.umd.js"></script>
-```
+1. Install the Tinybox package:
 
-## Usage
+   ```sh
+   npm install vue-tinybox
+   # or
+   yarn add vue-tinybox
+   ```
 
-If you're using the Tinybox not from the browser, you'll have to import it:
+2. Register it as you usually would:
 
-```js
-import Tinybox from "vue-tinybox";
-```
+   ```js
+   import Tinybox from "vue-tinybox";
+   // or
+   const Tinybox = require('vue-tinybox');
 
-Then you include it your usual way:
 
-```js
-Vue.component('tinybox', Tinybox);
+   Vue.component('Tinybox', Tinybox);
+   //or
+   Vue.use(Tinybox);
+   //or
+   new Vue({
+       components: { Tinybox },
+       // ... 
+   });
+   ```
 
-// or
+## API
 
-Vue.use(Tinybox);
+### Image object
 
-// or, inside a Vue instance or SFC
+An `Image` object is an object with following fields:
 
-{
-    components: { Tinybox }
-}
-```
+| Field name  | Type     | Description                                                           |
+|-------------|----------|-----------------------------------------------------------------------|
+| `src`       | `String` | The image URL                                                         |
+| `alt`       | `String` | (optional) the alt text                                               |
+| `thumbnail` | `String` | (optional) The thumbnail (a smaller, square version of the image) URL |
 
-Then you can use the `Tinybox` component:
+### Props
 
-```vue
+| Prop name   | Type      | Default | Description                                                   |
+|-------------|-----------|---------|---------------------------------------------------------------|
+| `images`    | `Array`   | `[]`    | List of either image URLs or [`Image`](#image-object) objects |
+| `loop`      | `Boolean` | `false` | Indicates whether the images should loop                      |
+| `no-thumbs` | `Boolean` | `false` | When enabled, the thumbnails are hidden                       |
+
+### `v-model`
+
+You can use `v-model` on a `Number` variable, which will hold the index of the
+image currently open. If no image is open (i.e. Tinybox is closed), the value
+becomes `null`.
+
+Instead of `v-model` you can use the `index` prop and `change` event:
+
+```html
 <Tinybox
+    v-model="index"
     :images="images"
-    :index="idx"
-    @close="idx = null"
 />
-```
 
-The `Tinybox` component accepts these props:
+<!-- is equivalent to -->
 
-| Prop name | Type              | Default | Description                                                                    |
-|-----------|-------------------|---------|--------------------------------------------------------------------------------|
-| `images`  | `Array`           | `[]`    | The array of either image URLs or `Image` objects                              |
-| `index`   | `Number` / `null` | `null`  | The index of the image that has to be shown. If `null`, the lightbox is closed |
-| `loop`    | `Boolean`         | `false` | Indicates whether the images should loop                                       |
-
-The `Image` object is an object with following fields:
-
-| Field name  | Type     | Description                                                                               |
-|-------------|----------|-------------------------------------------------------------------------------------------|
-| `src`       | `String` | The URL of the image                                                                      |
-| `alt`       | `String` | (optional) The text to be set inside `alt` attribute, e.g. a caption                      |
-| `thumbnail` | `String` | (optional) The URL of the smaller version of the image to be shown in the thumbnail strip |
+<Tinybox
+    :images="images"
+    :index="index"
+    @change="(i) => {index = i}"
+/>
+```

No alert changes

Improved metrics

Total package byte prevSize

31846

increased by1.7%

Number of lines in readme file

117

increased by40.96%

Worsened metrics

Lines of code

64

decreased by-4.48%

No dependency changes