vue-tinybox - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

dist/tinybox.esm.js

@@ -1,1 +0,396 @@
-var t={name:"Tinybox",props:{images:{type:Array,default:function(){return[]}},index:{type:Number,default:null},loop:{type:Boolean,default:!1}},data:function(){return{cIndex:null}},computed:{_images:function(){for(var t=[],e=0;e<this.images.length;e++)t.push("string"==typeof this.images[e]?{src:this.images[e]}:this.images[e]);return t},current:function(){return this._images[this.cIndex]||{}},open:function(){return null!==this.index},hasPrev:function(){return this.cIndex>0||this.loop},hasNext:function(){return this.cIndex<this._images.length-1||this.loop}},watch:{index:function(t){this.resetIndex(t)}},mounted:function(){this.resetIndex(this.index)},methods:{resetIndex:function(t){this.cIndex=t},close:function(){this.$emit("close",this.cIndex)},prev:function(){if(this.hasPrev){var t=this.cIndex-1;t<0&&(t=this._images.length-1),this.cIndex=t}},next:function(){if(this.hasNext){var t=this.cIndex+1;t===this._images.length&&(t=0),this.cIndex=t}},goto:function(t){this.cIndex=t}}};var e,n=function(t,e,n,i,o,a,c,s,r,u){"boolean"!=typeof c&&(r=s,s=c,c=!1);var d,l="function"==typeof n?n.options:n;if(t&&t.render&&(l.render=t.render,l.staticRenderFns=t.staticRenderFns,l._compiled=!0,o&&(l.functional=!0)),i&&(l._scopeId=i),a?(d=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,r(t)),t&&t._registeredComponents&&t._registeredComponents.add(a)},l._ssrRegister=d):e&&(d=c?function(){e.call(this,u(this.$root.$options.shadowRoot))}:function(t){e.call(this,s(t))}),d)if(l.functional){var _=l.render;l.render=function(t,e){return d.call(e),_(t,e)}}else{var g=l.beforeCreate;l.beforeCreate=g?[].concat(g,d):[d]}return n},i="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());var o={};var a=n({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"tinybox",class:{"tinybox--open":t.open},on:{click:t.close}},[n("div",{staticClass:"tinybox__content"},[n("div",{staticClass:"tinybox__content__current"},[n("img",{staticClass:"tinybox__content__current__image",attrs:{src:t.current.src,alt:t.current.alt||""},on:{click:function(e){return e.stopPropagation(),t.next(e)}}})]),t.hasPrev?n("div",{staticClass:"tinybox__content__control tinybox__content__control--prev",on:{click:function(e){return e.stopPropagation(),t.prev(e)}}}):t._e(),t.hasNext?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)}}})]),n("div",{staticClass:"tinybox__thumbnails"},t._l(t._images,function(e,i){return n("div",{key:i,staticClass:"tinybox__thumbnails__item",class:{"tinybox__thumbnails__item--active":t.cIndex===i},on:{click:function(e){return e.stopPropagation(),t.goto(i)}}},[n("img",{staticClass:"tinybox__thumbnails__item__image",attrs:{src:e.thumbnail||e.src,alt:e.alt||""}})])}),0)])},staticRenderFns:[]},function(t){t&&t("data-v-35b93cc0_0",{source:".tinybox[data-v-35b93cc0]{background:rgba(0,0,0,.9);bottom:0;cursor:auto;height:100%;left:0;opacity:0;outline:0;overflow:auto;pointer-events:none;position:fixed;right:0;text-align:center;top:0;transition:opacity .3s ease;z-index:2000}.tinybox--open[data-v-35b93cc0]{opacity:1;pointer-events:initial}.tinybox__content[data-v-35b93cc0]{height:84vh;margin-top:2vh;overflow:hidden;position:relative}.tinybox__content__current[data-v-35b93cc0]{height:84vh;position:absolute;width:100vw}.tinybox__content__current__image[data-v-35b93cc0]{border:none;cursor:pointer;display:inline-block;float:none;height:auto;margin:0;max-width:82.3vw;max-height:84vh;position:relative;vertical-align:middle;width:auto}.tinybox__content__control[data-v-35b93cc0]{background-size:24px;background-repeat:no-repeat;background-position:center;cursor:pointer;display:block;opacity:.5;position:absolute;top:0;transition:all .3s;width:4em}.tinybox__content__control[data-v-35b93cc0]:hover{opacity:1}.tinybox__content__control--prev[data-v-35b93cc0]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjE3LjkgMjU2IDEyNy4xLTEyN2M5LjQtOS40IDkuNC0yNC42IDAtMzMuOS05LjQtOS40LTI0LjYtOS4zLTM0IDBsLTE0NCAxNDMuOWMtOS4xIDkuMS05LjMgMjMuNy0uNyAzMy4xbDE0NC42IDE0NC45YzQuNyA0LjcgMTAuOSA3IDE3IDdzMTIuMy0yLjMgMTctN2M5LjQtOS40IDkuNC0yNC42IDAtMzMuOXoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=);bottom:0;left:0}.tinybox__content__control--next[data-v-35b93cc0]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjk0LjEgMjU2LTEyNy4xLTEyN2MtOS40LTkuNC05LjQtMjQuNiAwLTMzLjlzMjQuNi05LjMgMzQgMGwxNDQgMTQzLjljOS4xIDkuMSA5LjMgMjMuNy43IDMzLjFsLTE0NC42IDE0NC45Yy00LjcgNC43LTEwLjkgNy0xNyA3cy0xMi4zLTIuMy0xNy03Yy05LjQtOS40LTkuNC0yNC42IDAtMzMuOXoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=);bottom:0;right:0}.tinybox__content__control--close[data-v-35b93cc0]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0yNzguNiAyNTYgNjguMi02OC4yYzYuMi02LjIgNi4yLTE2LjQgMC0yMi42cy0xNi40LTYuMi0yMi42IDBsLTY4LjIgNjguMi02OC4yLTY4LjJjLTYuMi02LjItMTYuNC02LjItMjIuNiAwLTMuMSAzLjEtNC43IDcuMi00LjcgMTEuM3MxLjYgOC4yIDQuNyAxMS4zbDY4LjIgNjguMi02OC4yIDY4LjJjLTMuMSAzLjEtNC43IDcuMi00LjcgMTEuM3MxLjYgOC4yIDQuNyAxMS4zYzYuMiA2LjIgMTYuNCA2LjIgMjIuNiAwbDY4LjItNjguMiA2OC4yIDY4LjJjNi4yIDYuMiAxNi40IDYuMiAyMi42IDBzNi4yLTE2LjQgMC0yMi42eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==);height:2.6em;right:0}.tinybox__thumbnails[data-v-35b93cc0]{bottom:0;left:0;line-height:0;padding:0 1vh;position:absolute;right:0;overflow-x:auto;overflow-y:hidden;white-space:nowrap}.tinybox__thumbnails__item[data-v-35b93cc0]{background:#222;box-sizing:content-box;cursor:pointer;display:inline-block;height:10vh;overflow:hidden;padding:2vh 1vh;position:relative;width:10vh}.tinybox__thumbnails__item--active[data-v-35b93cc0]{opacity:.3}.tinybox__thumbnails__item__image[data-v-35b93cc0]{border:none;display:inline-block;vertical-align:middle;width:auto;max-width:none;top:0;height:100%}",map:void 0,media:void 0})},t,"data-v-35b93cc0",!1,void 0,function(t){return function(t,n){return function(t,n){var a=i?n.media||"default":t,c=o[a]||(o[a]={ids:new Set,styles:[]});if(!c.ids.has(t)){c.ids.add(t);var s=n.source;if(n.map&&(s+="\n/*# sourceURL="+n.map.sources[0]+" */",s+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n.map))))+" */"),c.element||(c.element=document.createElement("style"),c.element.type="text/css",n.media&&c.element.setAttribute("media",n.media),void 0===e&&(e=document.head||document.getElementsByTagName("head")[0]),e.appendChild(c.element)),"styleSheet"in c.element)c.styles.push(s),c.element.styleSheet.cssText=c.styles.filter(Boolean).join("\n");else{var r=c.ids.size-1,u=document.createTextNode(s),d=c.element.childNodes;d[r]&&c.element.removeChild(d[r]),d.length?c.element.insertBefore(u,d[r]):c.element.appendChild(u)}}}(t,n)}},void 0);export default a;
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+var script = {
+  name: "Tinybox",
+  props: {
+    /**
+     * List of images to display in the lightbox
+     *
+     * Any array item can be either a string containing the image URL or an object.
+     * The object fields are the following:
+     * - `src` - the image URL
+     * - `thumbnail` - the thumbnail (a smaller version of the image) URL
+     * - `alt` - the alt text to be displayed if the image failed to load (or by screenreaders)
+     */
+    images: {
+      type: Array,
+      default: function _default() {
+        return [];
+      }
+    },
+
+    /**
+     * The index of the image to be opened in the lightbox
+     */
+    index: {
+      type: Number,
+      default: null
+    },
+
+    /**
+     * Indicates whether the images carousel should loop around itself
+     */
+    loop: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data: function data() {
+    return {
+      cIndex: null,
+      swipeFinished: false,
+      swipeX: null,
+      switchFrom: null,
+      transitionClass: ""
+    };
+  },
+  computed: {
+    _images: function _images() {
+      var result = [];
+
+      for (var i = 0; i < this.images.length; i++) {
+        result.push(typeof this.images[i] === "string" ? {
+          src: this.images[i]
+        } : this.images[i]);
+      }
+
+      return result;
+    },
+    current: function current() {
+      return this._images[this.cIndex] || {
+        src: ""
+      };
+    },
+    open: function open() {
+      return this.index !== null;
+    },
+    hasPrev: function hasPrev() {
+      return this.cIndex > 0 || this.loop;
+    },
+    hasNext: function hasNext() {
+      return this.cIndex < this._images.length - 1 || this.loop;
+    }
+  },
+  watch: {
+    index: function index(idx) {
+      this.goto(idx);
+    },
+    open: function open() {
+      this.focusContent();
+    }
+  },
+  created: function created() {
+    this.goto(this.index);
+  },
+  methods: {
+    /**
+     * @event close - the close button has been pressed. The current index is sent as payload
+     */
+    close: function close() {
+      this.$emit("close", this.cIndex);
+    },
+    prev: function prev() {
+      if (this.hasPrev) {
+        this.goto(this.cIndex - 1);
+      }
+    },
+    next: function next() {
+      if (this.hasNext) {
+        this.goto(this.cIndex + 1);
+      }
+    },
+    goto: function goto(index) {
+      this.switchFrom = this.current;
+      var transition = "";
+
+      if (index !== null) {
+        var newIndex = index;
+
+        if (newIndex >= this._images.length) {
+          newIndex = 0;
+        } else if (newIndex < 0) {
+          newIndex = this._images.length - 1;
+        }
+
+        if (this.cIndex !== null) {
+          transition = this.cIndex < newIndex ? "tinybox__content__current__image--from-right" : "tinybox__content__current__image--from-left";
+        }
+      }
+
+      this.transitionClass = transition;
+      this.cIndex = index;
+    },
+    swipeStart: function swipeStart(e) {
+      if (e.changedTouches.length === 1) {
+        this.swipeX = e.changedTouches[0].screenX;
+      }
+    },
+    swipe: function swipe(e) {
+      if (!this.swipeFinished && e.changedTouches.length === 1) {
+        var newSwipeX = e.changedTouches[0].screenX;
+
+        if (newSwipeX - this.swipeX >= 50) {
+          this.prev();
+          this.swipeFinished = true;
+        } else if (this.swipeX - newSwipeX >= 50) {
+          this.next();
+          this.swipeFinished = true;
+        }
+      }
+    },
+    swipeEnd: function swipeEnd() {
+      this.swipeX = null;
+      this.swipeFinished = false;
+    },
+    focusContent: function focusContent() {
+      if (this.open) {
+        this.$refs.content.focus();
+      } else {
+        this.$refs.content.blur();
+      }
+    }
+  }
+};
+
+function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier
+/* server only */
+, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
+  if (typeof shadowMode !== 'boolean') {
+    createInjectorSSR = createInjector;
+    createInjector = shadowMode;
+    shadowMode = false;
+  } // Vue.extend constructor export interop.
+
+
+  var options = typeof script === 'function' ? script.options : script; // render functions
+
+  if (template && template.render) {
+    options.render = template.render;
+    options.staticRenderFns = template.staticRenderFns;
+    options._compiled = true; // functional template
+
+    if (isFunctionalTemplate) {
+      options.functional = true;
+    }
+  } // scopedId
+
+
+  if (scopeId) {
+    options._scopeId = scopeId;
+  }
+
+  var hook;
+
+  if (moduleIdentifier) {
+    // server build
+    hook = function hook(context) {
+      // 2.3 injection
+      context = context || // cached call
+      this.$vnode && this.$vnode.ssrContext || // stateful
+      this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional
+      // 2.2 with runInNewContext: true
+
+      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
+        context = __VUE_SSR_CONTEXT__;
+      } // inject component styles
+
+
+      if (style) {
+        style.call(this, createInjectorSSR(context));
+      } // register component module identifier for async chunk inference
+
+
+      if (context && context._registeredComponents) {
+        context._registeredComponents.add(moduleIdentifier);
+      }
+    }; // used by ssr in case component is cached and beforeCreate
+    // never gets called
+
+
+    options._ssrRegister = hook;
+  } else if (style) {
+    hook = shadowMode ? function () {
+      style.call(this, createInjectorShadow(this.$root.$options.shadowRoot));
+    } : function (context) {
+      style.call(this, createInjector(context));
+    };
+  }
+
+  if (hook) {
+    if (options.functional) {
+      // register for functional component in vue file
+      var originalRender = options.render;
+
+      options.render = function renderWithStyleInjection(h, context) {
+        hook.call(context);
+        return originalRender(h, context);
+      };
+    } else {
+      // inject component registration as beforeCreate hook
+      var existing = options.beforeCreate;
+      options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+    }
+  }
+
+  return script;
+}
+
+var normalizeComponent_1 = normalizeComponent;
+
+var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
+function createInjector(context) {
+  return function (id, style) {
+    return addStyle(id, style);
+  };
+}
+var HEAD;
+var styles = {};
+
+function addStyle(id, css) {
+  var group = isOldIE ? css.media || 'default' : id;
+  var style = styles[group] || (styles[group] = {
+    ids: new Set(),
+    styles: []
+  });
+
+  if (!style.ids.has(id)) {
+    style.ids.add(id);
+    var code = css.source;
+
+    if (css.map) {
+      // https://developer.chrome.com/devtools/docs/javascript-debugging
+      // this makes source maps inside style tags work properly in Chrome
+      code += '\n/*# sourceURL=' + css.map.sources[0] + ' */'; // http://stackoverflow.com/a/26603875
+
+      code += '\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) + ' */';
+    }
+
+    if (!style.element) {
+      style.element = document.createElement('style');
+      style.element.type = 'text/css';
+      if (css.media) style.element.setAttribute('media', css.media);
+
+      if (HEAD === undefined) {
+        HEAD = document.head || document.getElementsByTagName('head')[0];
+      }
+
+      HEAD.appendChild(style.element);
+    }
+
+    if ('styleSheet' in style.element) {
+      style.styles.push(code);
+      style.element.styleSheet.cssText = style.styles.filter(Boolean).join('\n');
+    } else {
+      var index = style.ids.size - 1;
+      var textNode = document.createTextNode(code);
+      var nodes = style.element.childNodes;
+      if (nodes[index]) style.element.removeChild(nodes[index]);
+      if (nodes.length) style.element.insertBefore(textNode, nodes[index]);else style.element.appendChild(textNode);
+    }
+  }
+}
+
+var browser = createInjector;
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"tinybox",class:{'tinybox--open': _vm.open},on:{"click":_vm.close,"wheel":function($event){$event.preventDefault();},"touchmove":function($event){$event.preventDefault();}}},[_c('div',{ref:"content",staticClass:"tinybox__content",attrs:{"tabindex":"0"},on:{"blur":_vm.focusContent,"touchstart":_vm.swipeStart,"touchmove":_vm.swipe,"touchend":_vm.swipeEnd,"keyup":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"left",37,$event.key,["Left","ArrowLeft"])){ return null; }if('button' in $event && $event.button !== 0){ return null; }return _vm.prev($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"right",39,$event.key,["Right","ArrowRight"])){ return null; }if('button' in $event && $event.button !== 2){ return null; }return _vm.next($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }return _vm.close($event)}]}},[_c('div',{staticClass:"tinybox__content__current",style:(("background-image:url('" + (_vm.switchFrom.src) + "')"))},[_c('img',{staticClass:"tinybox__content__current__image",class:_vm.transitionClass,attrs:{"src":_vm.current.src,"alt":_vm.current.alt || ''},on:{"click":function($event){$event.stopPropagation();return _vm.next($event)},"animationend":function($event){_vm.transitionClass = '';}}})]),(_vm.hasPrev)?_c('div',{staticClass:"tinybox__content__control tinybox__content__control--prev",on:{"click":function($event){$event.stopPropagation();return _vm.prev($event)}}}):_vm._e(),(_vm.hasNext)?_c('div',{staticClass:"tinybox__content__control tinybox__content__control--next",on:{"click":function($event){$event.stopPropagation();return _vm.next($event)}}}):_vm._e(),_c('div',{staticClass:"tinybox__content__control tinybox__content__control--close",on:{"click":function($event){$event.stopPropagation();return _vm.close($event)}}})]),_c('div',{staticClass:"tinybox__thumbnails"},_vm._l((_vm._images),function(img,i){return _c('div',{key:i,staticClass:"tinybox__thumbnails__item",class:{'tinybox__thumbnails__item--active': _vm.cIndex === i},on:{"click":function($event){$event.stopPropagation();return _vm.goto(i)}}},[_c('img',{staticClass:"tinybox__thumbnails__item__image",attrs:{"src":img.thumbnail || img.src,"alt":img.alt || ''}})])}),0)])};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = function (inject) {
+    if (!inject) return
+    inject("data-v-832179e2_0", { source: ".tinybox[data-v-832179e2]{background:rgba(0,0,0,.9);height:100%;left:0;opacity:0;outline:0;pointer-events:none;position:fixed;right:0;text-align:center;top:0;transition:opacity .3s ease;z-index:2000}.tinybox--open[data-v-832179e2]{opacity:1;pointer-events:initial}.tinybox__content[data-v-832179e2]{height:84vh;position:absolute;width:100vw}.tinybox__content[data-v-832179e2]:focus{outline:0}.tinybox__content[data-v-832179e2]::before{content:\"\";display:inline-block;height:84vh;vertical-align:middle}.tinybox__content__current[data-v-832179e2]{background-size:cover;display:inline-block;vertical-align:middle}.tinybox__content__current__image[data-v-832179e2]{border:none;cursor:pointer;display:inline-block;float:none;height:auto;margin:0;max-width:82.3vw;max-height:84vh;position:relative;vertical-align:middle;width:auto;animation-duration:.3s;animation-direction:normal;animation-iteration-count:1;animation-timing-function:ease}.tinybox__content__current__image--from-left[data-v-832179e2]{animation-name:left-right-data-v-832179e2}.tinybox__content__current__image--from-right[data-v-832179e2]{animation-name:right-left-data-v-832179e2}@keyframes left-right-data-v-832179e2{from{opacity:0;transform:translateX(-80px)}to{opacity:1;transform:translateX(0)}}@keyframes right-left-data-v-832179e2{from{opacity:0;transform:translateX(80px)}to{opacity:1;transform:translateX(0)}}.tinybox__content__control[data-v-832179e2]{background-size:24px;background-repeat:no-repeat;background-position:center;cursor:pointer;opacity:.5;position:absolute;top:0;transition:opacity .3s;width:4em}.tinybox__content__control[data-v-832179e2]:hover{opacity:1}.tinybox__content__control--prev[data-v-832179e2]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjE3LjkgMjU2IDEyNy4xLTEyN2M5LjQtOS40IDkuNC0yNC42IDAtMzMuOS05LjQtOS40LTI0LjYtOS4zLTM0IDBsLTE0NCAxNDMuOWMtOS4xIDkuMS05LjMgMjMuNy0uNyAzMy4xbDE0NC42IDE0NC45YzQuNyA0LjcgMTAuOSA3IDE3IDdzMTIuMy0yLjMgMTctN2M5LjQtOS40IDkuNC0yNC42IDAtMzMuOXoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=);bottom:0;left:0}.tinybox__content__control--next[data-v-832179e2]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjk0LjEgMjU2LTEyNy4xLTEyN2MtOS40LTkuNC05LjQtMjQuNiAwLTMzLjlzMjQuNi05LjMgMzQgMGwxNDQgMTQzLjljOS4xIDkuMSA5LjMgMjMuNy43IDMzLjFsLTE0NC42IDE0NC45Yy00LjcgNC43LTEwLjkgNy0xNyA3cy0xMi4zLTIuMy0xNy03Yy05LjQtOS40LTkuNC0yNC42IDAtMzMuOXoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=);bottom:0;right:0}.tinybox__content__control--close[data-v-832179e2]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0yNzguNiAyNTYgNjguMi02OC4yYzYuMi02LjIgNi4yLTE2LjQgMC0yMi42cy0xNi40LTYuMi0yMi42IDBsLTY4LjIgNjguMi02OC4yLTY4LjJjLTYuMi02LjItMTYuNC02LjItMjIuNiAwLTMuMSAzLjEtNC43IDcuMi00LjcgMTEuM3MxLjYgOC4yIDQuNyAxMS4zbDY4LjIgNjguMi02OC4yIDY4LjJjLTMuMSAzLjEtNC43IDcuMi00LjcgMTEuM3MxLjYgOC4yIDQuNyAxMS4zYzYuMiA2LjIgMTYuNCA2LjIgMjIuNiAwbDY4LjItNjguMiA2OC4yIDY4LjJjNi4yIDYuMiAxNi40IDYuMiAyMi42IDBzNi4yLTE2LjQgMC0yMi42eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==);height:2.6em;right:0}.tinybox__thumbnails[data-v-832179e2]{bottom:0;left:0;line-height:0;padding:0 1vh;position:absolute;right:0;overflow-x:auto;overflow-y:hidden;white-space:nowrap}.tinybox__thumbnails__item[data-v-832179e2]{background-color:#222;cursor:pointer;display:inline-block;height:10vh;overflow:hidden;margin:2vh 1vh;position:relative;width:10vh}.tinybox__thumbnails__item--active .tinybox__thumbnails__item__image[data-v-832179e2]{opacity:.3}.tinybox__thumbnails__item__image[data-v-832179e2]{display:inline-block;height:100%;left:50%;position:absolute;top:0;transform:translateX(-50%);vertical-align:middle;width:auto}", map: undefined, media: undefined });
+
+  };
+  /* scoped */
+  const __vue_scope_id__ = "data-v-832179e2";
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject SSR */
+  
+
+  
+  var Tinybox = normalizeComponent_1(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    browser,
+    undefined
+  );
+
+export default Tinybox;

dist/tinybox.min.js

@@ -1,1 +0,1 @@
-var Tinybox=function(){"use strict";var t={name:"Tinybox",props:{images:{type:Array,default:function(){return[]}},index:{type:Number,default:null},loop:{type:Boolean,default:!1}},data:function(){return{cIndex:null}},computed:{_images:function(){for(var t=[],e=0;e<this.images.length;e++)t.push("string"==typeof this.images[e]?{src:this.images[e]}:this.images[e]);return t},current:function(){return this._images[this.cIndex]||{}},open:function(){return null!==this.index},hasPrev:function(){return this.cIndex>0||this.loop},hasNext:function(){return this.cIndex<this._images.length-1||this.loop}},watch:{index:function(t){this.resetIndex(t)}},mounted:function(){this.resetIndex(this.index)},methods:{resetIndex:function(t){this.cIndex=t},close:function(){this.$emit("close",this.cIndex)},prev:function(){if(this.hasPrev){var t=this.cIndex-1;t<0&&(t=this._images.length-1),this.cIndex=t}},next:function(){if(this.hasNext){var t=this.cIndex+1;t===this._images.length&&(t=0),this.cIndex=t}},goto:function(t){this.cIndex=t}}};var e,n=function(t,e,n,i,o,a,c,s,r,u){"boolean"!=typeof c&&(r=s,s=c,c=!1);var d,l="function"==typeof n?n.options:n;if(t&&t.render&&(l.render=t.render,l.staticRenderFns=t.staticRenderFns,l._compiled=!0,o&&(l.functional=!0)),i&&(l._scopeId=i),a?(d=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,r(t)),t&&t._registeredComponents&&t._registeredComponents.add(a)},l._ssrRegister=d):e&&(d=c?function(){e.call(this,u(this.$root.$options.shadowRoot))}:function(t){e.call(this,s(t))}),d)if(l.functional){var _=l.render;l.render=function(t,e){return d.call(e),_(t,e)}}else{var g=l.beforeCreate;l.beforeCreate=g?[].concat(g,d):[d]}return n},i="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());var o={};return n({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"tinybox",class:{"tinybox--open":t.open},on:{click:t.close}},[n("div",{staticClass:"tinybox__content"},[n("div",{staticClass:"tinybox__content__current"},[n("img",{staticClass:"tinybox__content__current__image",attrs:{src:t.current.src,alt:t.current.alt||""},on:{click:function(e){return e.stopPropagation(),t.next(e)}}})]),t.hasPrev?n("div",{staticClass:"tinybox__content__control tinybox__content__control--prev",on:{click:function(e){return e.stopPropagation(),t.prev(e)}}}):t._e(),t.hasNext?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)}}})]),n("div",{staticClass:"tinybox__thumbnails"},t._l(t._images,function(e,i){return n("div",{key:i,staticClass:"tinybox__thumbnails__item",class:{"tinybox__thumbnails__item--active":t.cIndex===i},on:{click:function(e){return e.stopPropagation(),t.goto(i)}}},[n("img",{staticClass:"tinybox__thumbnails__item__image",attrs:{src:e.thumbnail||e.src,alt:e.alt||""}})])}),0)])},staticRenderFns:[]},function(t){t&&t("data-v-35b93cc0_0",{source:".tinybox[data-v-35b93cc0]{background:rgba(0,0,0,.9);bottom:0;cursor:auto;height:100%;left:0;opacity:0;outline:0;overflow:auto;pointer-events:none;position:fixed;right:0;text-align:center;top:0;transition:opacity .3s ease;z-index:2000}.tinybox--open[data-v-35b93cc0]{opacity:1;pointer-events:initial}.tinybox__content[data-v-35b93cc0]{height:84vh;margin-top:2vh;overflow:hidden;position:relative}.tinybox__content__current[data-v-35b93cc0]{height:84vh;position:absolute;width:100vw}.tinybox__content__current__image[data-v-35b93cc0]{border:none;cursor:pointer;display:inline-block;float:none;height:auto;margin:0;max-width:82.3vw;max-height:84vh;position:relative;vertical-align:middle;width:auto}.tinybox__content__control[data-v-35b93cc0]{background-size:24px;background-repeat:no-repeat;background-position:center;cursor:pointer;display:block;opacity:.5;position:absolute;top:0;transition:all .3s;width:4em}.tinybox__content__control[data-v-35b93cc0]:hover{opacity:1}.tinybox__content__control--prev[data-v-35b93cc0]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjE3LjkgMjU2IDEyNy4xLTEyN2M5LjQtOS40IDkuNC0yNC42IDAtMzMuOS05LjQtOS40LTI0LjYtOS4zLTM0IDBsLTE0NCAxNDMuOWMtOS4xIDkuMS05LjMgMjMuNy0uNyAzMy4xbDE0NC42IDE0NC45YzQuNyA0LjcgMTAuOSA3IDE3IDdzMTIuMy0yLjMgMTctN2M5LjQtOS40IDkuNC0yNC42IDAtMzMuOXoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=);bottom:0;left:0}.tinybox__content__control--next[data-v-35b93cc0]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjk0LjEgMjU2LTEyNy4xLTEyN2MtOS40LTkuNC05LjQtMjQuNiAwLTMzLjlzMjQuNi05LjMgMzQgMGwxNDQgMTQzLjljOS4xIDkuMSA5LjMgMjMuNy43IDMzLjFsLTE0NC42IDE0NC45Yy00LjcgNC43LTEwLjkgNy0xNyA3cy0xMi4zLTIuMy0xNy03Yy05LjQtOS40LTkuNC0yNC42IDAtMzMuOXoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=);bottom:0;right:0}.tinybox__content__control--close[data-v-35b93cc0]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0yNzguNiAyNTYgNjguMi02OC4yYzYuMi02LjIgNi4yLTE2LjQgMC0yMi42cy0xNi40LTYuMi0yMi42IDBsLTY4LjIgNjguMi02OC4yLTY4LjJjLTYuMi02LjItMTYuNC02LjItMjIuNiAwLTMuMSAzLjEtNC43IDcuMi00LjcgMTEuM3MxLjYgOC4yIDQuNyAxMS4zbDY4LjIgNjguMi02OC4yIDY4LjJjLTMuMSAzLjEtNC43IDcuMi00LjcgMTEuM3MxLjYgOC4yIDQuNyAxMS4zYzYuMiA2LjIgMTYuNCA2LjIgMjIuNiAwbDY4LjItNjguMiA2OC4yIDY4LjJjNi4yIDYuMiAxNi40IDYuMiAyMi42IDBzNi4yLTE2LjQgMC0yMi42eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==);height:2.6em;right:0}.tinybox__thumbnails[data-v-35b93cc0]{bottom:0;left:0;line-height:0;padding:0 1vh;position:absolute;right:0;overflow-x:auto;overflow-y:hidden;white-space:nowrap}.tinybox__thumbnails__item[data-v-35b93cc0]{background:#222;box-sizing:content-box;cursor:pointer;display:inline-block;height:10vh;overflow:hidden;padding:2vh 1vh;position:relative;width:10vh}.tinybox__thumbnails__item--active[data-v-35b93cc0]{opacity:.3}.tinybox__thumbnails__item__image[data-v-35b93cc0]{border:none;display:inline-block;vertical-align:middle;width:auto;max-width:none;top:0;height:100%}",map:void 0,media:void 0})},t,"data-v-35b93cc0",!1,void 0,function(t){return function(t,n){return function(t,n){var a=i?n.media||"default":t,c=o[a]||(o[a]={ids:new Set,styles:[]});if(!c.ids.has(t)){c.ids.add(t);var s=n.source;if(n.map&&(s+="\n/*# sourceURL="+n.map.sources[0]+" */",s+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n.map))))+" */"),c.element||(c.element=document.createElement("style"),c.element.type="text/css",n.media&&c.element.setAttribute("media",n.media),void 0===e&&(e=document.head||document.getElementsByTagName("head")[0]),e.appendChild(c.element)),"styleSheet"in c.element)c.styles.push(s),c.element.styleSheet.cssText=c.styles.filter(Boolean).join("\n");else{var r=c.ids.size-1,u=document.createTextNode(s),d=c.element.childNodes;d[r]&&c.element.removeChild(d[r]),d.length?c.element.insertBefore(u,d[r]):c.element.appendChild(u)}}}(t,n)}},void 0)}();
+var Tinybox=function(){"use strict";var t={name:"Tinybox",props:{images:{type:Array,default:function(){return[]}},index:{type:Number,default:null},loop:{type:Boolean,default:!1}},data:function(){return{cIndex:null,swipeFinished:!1,swipeX:null,switchFrom:null,transitionClass:""}},computed:{_images:function(){for(var t=[],e=0;e<this.images.length;e++)t.push("string"==typeof this.images[e]?{src:this.images[e]}:this.images[e]);return t},current:function(){return this._images[this.cIndex]||{src:""}},open:function(){return null!==this.index},hasPrev:function(){return this.cIndex>0||this.loop},hasNext:function(){return this.cIndex<this._images.length-1||this.loop}},watch:{index:function(t){this.goto(t)},open:function(){this.focusContent()}},created:function(){this.goto(this.index)},methods:{close:function(){this.$emit("close",this.cIndex)},prev:function(){this.hasPrev&&this.goto(this.cIndex-1)},next:function(){this.hasNext&&this.goto(this.cIndex+1)},goto:function(t){this.switchFrom=this.current;var e="";if(null!==t){var n=t;n>=this._images.length?n=0:n<0&&(n=this._images.length-1),null!==this.cIndex&&(e=this.cIndex<n?"tinybox__content__current__image--from-right":"tinybox__content__current__image--from-left")}this.transitionClass=e,this.cIndex=t},swipeStart:function(t){1===t.changedTouches.length&&(this.swipeX=t.changedTouches[0].screenX)},swipe:function(t){if(!this.swipeFinished&&1===t.changedTouches.length){var e=t.changedTouches[0].screenX;e-this.swipeX>=50?(this.prev(),this.swipeFinished=!0):this.swipeX-e>=50&&(this.next(),this.swipeFinished=!0)}},swipeEnd:function(){this.swipeX=null,this.swipeFinished=!1},focusContent:function(){this.open?this.$refs.content.focus():this.$refs.content.blur()}}};var e,n=function(t,e,n,i,o,a,s,r,c,u){"boolean"!=typeof s&&(c=r,r=s,s=!1);var l,d="function"==typeof n?n.options:n;if(t&&t.render&&(d.render=t.render,d.staticRenderFns=t.staticRenderFns,d._compiled=!0,o&&(d.functional=!0)),i&&(d._scopeId=i),a?(l=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=l):e&&(l=s?function(){e.call(this,u(this.$root.$options.shadowRoot))}:function(t){e.call(this,r(t))}),l)if(d.functional){var _=d.render;d.render=function(t,e){return l.call(e),_(t,e)}}else{var h=d.beforeCreate;d.beforeCreate=h?[].concat(h,l):[l]}return n},i="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());var o={};return n({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"tinybox",class:{"tinybox--open":t.open},on:{click:t.close,wheel:function(t){t.preventDefault()},touchmove:function(t){t.preventDefault()}}},[n("div",{ref:"content",staticClass:"tinybox__content",attrs:{tabindex:"0"},on:{blur:t.focusContent,touchstart:t.swipeStart,touchmove:t.swipe,touchend:t.swipeEnd,keyup:[function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"left",37,e.key,["Left","ArrowLeft"])?null:"button"in e&&0!==e.button?null:t.prev(e)},function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"right",39,e.key,["Right","ArrowRight"])?null:"button"in e&&2!==e.button?null:t.next(e)},function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"esc",27,e.key,["Esc","Escape"])?null:t.close(e)}]}},[n("div",{staticClass:"tinybox__content__current",style:"background-image:url('"+t.switchFrom.src+"')"},[n("img",{staticClass:"tinybox__content__current__image",class:t.transitionClass,attrs:{src:t.current.src,alt:t.current.alt||""},on:{click:function(e){return e.stopPropagation(),t.next(e)},animationend:function(e){t.transitionClass=""}}})]),t.hasPrev?n("div",{staticClass:"tinybox__content__control tinybox__content__control--prev",on:{click:function(e){return e.stopPropagation(),t.prev(e)}}}):t._e(),t.hasNext?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)}}})]),n("div",{staticClass:"tinybox__thumbnails"},t._l(t._images,function(e,i){return n("div",{key:i,staticClass:"tinybox__thumbnails__item",class:{"tinybox__thumbnails__item--active":t.cIndex===i},on:{click:function(e){return e.stopPropagation(),t.goto(i)}}},[n("img",{staticClass:"tinybox__thumbnails__item__image",attrs:{src:e.thumbnail||e.src,alt:e.alt||""}})])}),0)])},staticRenderFns:[]},function(t){t&&t("data-v-832179e2_0",{source:'.tinybox[data-v-832179e2]{background:rgba(0,0,0,.9);height:100%;left:0;opacity:0;outline:0;pointer-events:none;position:fixed;right:0;text-align:center;top:0;transition:opacity .3s ease;z-index:2000}.tinybox--open[data-v-832179e2]{opacity:1;pointer-events:initial}.tinybox__content[data-v-832179e2]{height:84vh;position:absolute;width:100vw}.tinybox__content[data-v-832179e2]:focus{outline:0}.tinybox__content[data-v-832179e2]::before{content:"";display:inline-block;height:84vh;vertical-align:middle}.tinybox__content__current[data-v-832179e2]{background-size:cover;display:inline-block;vertical-align:middle}.tinybox__content__current__image[data-v-832179e2]{border:none;cursor:pointer;display:inline-block;float:none;height:auto;margin:0;max-width:82.3vw;max-height:84vh;position:relative;vertical-align:middle;width:auto;animation-duration:.3s;animation-direction:normal;animation-iteration-count:1;animation-timing-function:ease}.tinybox__content__current__image--from-left[data-v-832179e2]{animation-name:left-right-data-v-832179e2}.tinybox__content__current__image--from-right[data-v-832179e2]{animation-name:right-left-data-v-832179e2}@keyframes left-right-data-v-832179e2{from{opacity:0;transform:translateX(-80px)}to{opacity:1;transform:translateX(0)}}@keyframes right-left-data-v-832179e2{from{opacity:0;transform:translateX(80px)}to{opacity:1;transform:translateX(0)}}.tinybox__content__control[data-v-832179e2]{background-size:24px;background-repeat:no-repeat;background-position:center;cursor:pointer;opacity:.5;position:absolute;top:0;transition:opacity .3s;width:4em}.tinybox__content__control[data-v-832179e2]:hover{opacity:1}.tinybox__content__control--prev[data-v-832179e2]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjE3LjkgMjU2IDEyNy4xLTEyN2M5LjQtOS40IDkuNC0yNC42IDAtMzMuOS05LjQtOS40LTI0LjYtOS4zLTM0IDBsLTE0NCAxNDMuOWMtOS4xIDkuMS05LjMgMjMuNy0uNyAzMy4xbDE0NC42IDE0NC45YzQuNyA0LjcgMTAuOSA3IDE3IDdzMTIuMy0yLjMgMTctN2M5LjQtOS40IDkuNC0yNC42IDAtMzMuOXoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=);bottom:0;left:0}.tinybox__content__control--next[data-v-832179e2]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjk0LjEgMjU2LTEyNy4xLTEyN2MtOS40LTkuNC05LjQtMjQuNiAwLTMzLjlzMjQuNi05LjMgMzQgMGwxNDQgMTQzLjljOS4xIDkuMSA5LjMgMjMuNy43IDMzLjFsLTE0NC42IDE0NC45Yy00LjcgNC43LTEwLjkgNy0xNyA3cy0xMi4zLTIuMy0xNy03Yy05LjQtOS40LTkuNC0yNC42IDAtMzMuOXoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=);bottom:0;right:0}.tinybox__content__control--close[data-v-832179e2]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0yNzguNiAyNTYgNjguMi02OC4yYzYuMi02LjIgNi4yLTE2LjQgMC0yMi42cy0xNi40LTYuMi0yMi42IDBsLTY4LjIgNjguMi02OC4yLTY4LjJjLTYuMi02LjItMTYuNC02LjItMjIuNiAwLTMuMSAzLjEtNC43IDcuMi00LjcgMTEuM3MxLjYgOC4yIDQuNyAxMS4zbDY4LjIgNjguMi02OC4yIDY4LjJjLTMuMSAzLjEtNC43IDcuMi00LjcgMTEuM3MxLjYgOC4yIDQuNyAxMS4zYzYuMiA2LjIgMTYuNCA2LjIgMjIuNiAwbDY4LjItNjguMiA2OC4yIDY4LjJjNi4yIDYuMiAxNi40IDYuMiAyMi42IDBzNi4yLTE2LjQgMC0yMi42eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==);height:2.6em;right:0}.tinybox__thumbnails[data-v-832179e2]{bottom:0;left:0;line-height:0;padding:0 1vh;position:absolute;right:0;overflow-x:auto;overflow-y:hidden;white-space:nowrap}.tinybox__thumbnails__item[data-v-832179e2]{background-color:#222;cursor:pointer;display:inline-block;height:10vh;overflow:hidden;margin:2vh 1vh;position:relative;width:10vh}.tinybox__thumbnails__item--active .tinybox__thumbnails__item__image[data-v-832179e2]{opacity:.3}.tinybox__thumbnails__item__image[data-v-832179e2]{display:inline-block;height:100%;left:50%;position:absolute;top:0;transform:translateX(-50%);vertical-align:middle;width:auto}',map:void 0,media:void 0})},t,"data-v-832179e2",!1,void 0,function(t){return function(t,n){return function(t,n){var a=i?n.media||"default":t,s=o[a]||(o[a]={ids:new Set,styles:[]});if(!s.ids.has(t)){s.ids.add(t);var r=n.source;if(n.map&&(r+="\n/*# sourceURL="+n.map.sources[0]+" */",r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n.map))))+" */"),s.element||(s.element=document.createElement("style"),s.element.type="text/css",n.media&&s.element.setAttribute("media",n.media),void 0===e&&(e=document.head||document.getElementsByTagName("head")[0]),e.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,u=document.createTextNode(r),l=s.element.childNodes;l[c]&&s.element.removeChild(l[c]),l.length?s.element.insertBefore(u,l[c]):s.element.appendChild(u)}}}(t,n)}},void 0)}();

dist/tinybox.umd.js

@@ -1,1 +0,404 @@
-!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",props:{images:{type:Array,default:function(){return[]}},index:{type:Number,default:null},loop:{type:Boolean,default:!1}},data:function(){return{cIndex:null}},computed:{_images:function(){for(var t=[],e=0;e<this.images.length;e++)t.push("string"==typeof this.images[e]?{src:this.images[e]}:this.images[e]);return t},current:function(){return this._images[this.cIndex]||{}},open:function(){return null!==this.index},hasPrev:function(){return this.cIndex>0||this.loop},hasNext:function(){return this.cIndex<this._images.length-1||this.loop}},watch:{index:function(t){this.resetIndex(t)}},mounted:function(){this.resetIndex(this.index)},methods:{resetIndex:function(t){this.cIndex=t},close:function(){this.$emit("close",this.cIndex)},prev:function(){if(this.hasPrev){var t=this.cIndex-1;t<0&&(t=this._images.length-1),this.cIndex=t}},next:function(){if(this.hasNext){var t=this.cIndex+1;t===this._images.length&&(t=0),this.cIndex=t}},goto:function(t){this.cIndex=t}}};var e,n=function(t,e,n,i,o,a,c,s,r,u){"boolean"!=typeof c&&(r=s,s=c,c=!1);var d,l="function"==typeof n?n.options:n;if(t&&t.render&&(l.render=t.render,l.staticRenderFns=t.staticRenderFns,l._compiled=!0,o&&(l.functional=!0)),i&&(l._scopeId=i),a?(d=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,r(t)),t&&t._registeredComponents&&t._registeredComponents.add(a)},l._ssrRegister=d):e&&(d=c?function(){e.call(this,u(this.$root.$options.shadowRoot))}:function(t){e.call(this,s(t))}),d)if(l.functional){var _=l.render;l.render=function(t,e){return d.call(e),_(t,e)}}else{var h=l.beforeCreate;l.beforeCreate=h?[].concat(h,d):[d]}return n},i="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());var o={};return n({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"tinybox",class:{"tinybox--open":t.open},on:{click:t.close}},[n("div",{staticClass:"tinybox__content"},[n("div",{staticClass:"tinybox__content__current"},[n("img",{staticClass:"tinybox__content__current__image",attrs:{src:t.current.src,alt:t.current.alt||""},on:{click:function(e){return e.stopPropagation(),t.next(e)}}})]),t.hasPrev?n("div",{staticClass:"tinybox__content__control tinybox__content__control--prev",on:{click:function(e){return e.stopPropagation(),t.prev(e)}}}):t._e(),t.hasNext?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)}}})]),n("div",{staticClass:"tinybox__thumbnails"},t._l(t._images,function(e,i){return n("div",{key:i,staticClass:"tinybox__thumbnails__item",class:{"tinybox__thumbnails__item--active":t.cIndex===i},on:{click:function(e){return e.stopPropagation(),t.goto(i)}}},[n("img",{staticClass:"tinybox__thumbnails__item__image",attrs:{src:e.thumbnail||e.src,alt:e.alt||""}})])}),0)])},staticRenderFns:[]},function(t){t&&t("data-v-35b93cc0_0",{source:".tinybox[data-v-35b93cc0]{background:rgba(0,0,0,.9);bottom:0;cursor:auto;height:100%;left:0;opacity:0;outline:0;overflow:auto;pointer-events:none;position:fixed;right:0;text-align:center;top:0;transition:opacity .3s ease;z-index:2000}.tinybox--open[data-v-35b93cc0]{opacity:1;pointer-events:initial}.tinybox__content[data-v-35b93cc0]{height:84vh;margin-top:2vh;overflow:hidden;position:relative}.tinybox__content__current[data-v-35b93cc0]{height:84vh;position:absolute;width:100vw}.tinybox__content__current__image[data-v-35b93cc0]{border:none;cursor:pointer;display:inline-block;float:none;height:auto;margin:0;max-width:82.3vw;max-height:84vh;position:relative;vertical-align:middle;width:auto}.tinybox__content__control[data-v-35b93cc0]{background-size:24px;background-repeat:no-repeat;background-position:center;cursor:pointer;display:block;opacity:.5;position:absolute;top:0;transition:all .3s;width:4em}.tinybox__content__control[data-v-35b93cc0]:hover{opacity:1}.tinybox__content__control--prev[data-v-35b93cc0]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjE3LjkgMjU2IDEyNy4xLTEyN2M5LjQtOS40IDkuNC0yNC42IDAtMzMuOS05LjQtOS40LTI0LjYtOS4zLTM0IDBsLTE0NCAxNDMuOWMtOS4xIDkuMS05LjMgMjMuNy0uNyAzMy4xbDE0NC42IDE0NC45YzQuNyA0LjcgMTAuOSA3IDE3IDdzMTIuMy0yLjMgMTctN2M5LjQtOS40IDkuNC0yNC42IDAtMzMuOXoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=);bottom:0;left:0}.tinybox__content__control--next[data-v-35b93cc0]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjk0LjEgMjU2LTEyNy4xLTEyN2MtOS40LTkuNC05LjQtMjQuNiAwLTMzLjlzMjQuNi05LjMgMzQgMGwxNDQgMTQzLjljOS4xIDkuMSA5LjMgMjMuNy43IDMzLjFsLTE0NC42IDE0NC45Yy00LjcgNC43LTEwLjkgNy0xNyA3cy0xMi4zLTIuMy0xNy03Yy05LjQtOS40LTkuNC0yNC42IDAtMzMuOXoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=);bottom:0;right:0}.tinybox__content__control--close[data-v-35b93cc0]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0yNzguNiAyNTYgNjguMi02OC4yYzYuMi02LjIgNi4yLTE2LjQgMC0yMi42cy0xNi40LTYuMi0yMi42IDBsLTY4LjIgNjguMi02OC4yLTY4LjJjLTYuMi02LjItMTYuNC02LjItMjIuNiAwLTMuMSAzLjEtNC43IDcuMi00LjcgMTEuM3MxLjYgOC4yIDQuNyAxMS4zbDY4LjIgNjguMi02OC4yIDY4LjJjLTMuMSAzLjEtNC43IDcuMi00LjcgMTEuM3MxLjYgOC4yIDQuNyAxMS4zYzYuMiA2LjIgMTYuNCA2LjIgMjIuNiAwbDY4LjItNjguMiA2OC4yIDY4LjJjNi4yIDYuMiAxNi40IDYuMiAyMi42IDBzNi4yLTE2LjQgMC0yMi42eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==);height:2.6em;right:0}.tinybox__thumbnails[data-v-35b93cc0]{bottom:0;left:0;line-height:0;padding:0 1vh;position:absolute;right:0;overflow-x:auto;overflow-y:hidden;white-space:nowrap}.tinybox__thumbnails__item[data-v-35b93cc0]{background:#222;box-sizing:content-box;cursor:pointer;display:inline-block;height:10vh;overflow:hidden;padding:2vh 1vh;position:relative;width:10vh}.tinybox__thumbnails__item--active[data-v-35b93cc0]{opacity:.3}.tinybox__thumbnails__item__image[data-v-35b93cc0]{border:none;display:inline-block;vertical-align:middle;width:auto;max-width:none;top:0;height:100%}",map:void 0,media:void 0})},t,"data-v-35b93cc0",!1,void 0,function(t){return function(t,n){return function(t,n){var a=i?n.media||"default":t,c=o[a]||(o[a]={ids:new Set,styles:[]});if(!c.ids.has(t)){c.ids.add(t);var s=n.source;if(n.map&&(s+="\n/*# sourceURL="+n.map.sources[0]+" */",s+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n.map))))+" */"),c.element||(c.element=document.createElement("style"),c.element.type="text/css",n.media&&c.element.setAttribute("media",n.media),void 0===e&&(e=document.head||document.getElementsByTagName("head")[0]),e.appendChild(c.element)),"styleSheet"in c.element)c.styles.push(s),c.element.styleSheet.cssText=c.styles.filter(Boolean).join("\n");else{var r=c.ids.size-1,u=document.createTextNode(s),d=c.element.childNodes;d[r]&&c.element.removeChild(d[r]),d.length?c.element.insertBefore(u,d[r]):c.element.appendChild(u)}}}(t,n)}},void 0)});
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+    typeof define === 'function' && define.amd ? define(factory) :
+    (global = global || self, global.Tinybox = factory());
+}(this, function () { 'use strict';
+
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    //
+    var script = {
+      name: "Tinybox",
+      props: {
+        /**
+         * List of images to display in the lightbox
+         *
+         * Any array item can be either a string containing the image URL or an object.
+         * The object fields are the following:
+         * - `src` - the image URL
+         * - `thumbnail` - the thumbnail (a smaller version of the image) URL
+         * - `alt` - the alt text to be displayed if the image failed to load (or by screenreaders)
+         */
+        images: {
+          type: Array,
+          default: function _default() {
+            return [];
+          }
+        },
+
+        /**
+         * The index of the image to be opened in the lightbox
+         */
+        index: {
+          type: Number,
+          default: null
+        },
+
+        /**
+         * Indicates whether the images carousel should loop around itself
+         */
+        loop: {
+          type: Boolean,
+          default: false
+        }
+      },
+      data: function data() {
+        return {
+          cIndex: null,
+          swipeFinished: false,
+          swipeX: null,
+          switchFrom: null,
+          transitionClass: ""
+        };
+      },
+      computed: {
+        _images: function _images() {
+          var result = [];
+
+          for (var i = 0; i < this.images.length; i++) {
+            result.push(typeof this.images[i] === "string" ? {
+              src: this.images[i]
+            } : this.images[i]);
+          }
+
+          return result;
+        },
+        current: function current() {
+          return this._images[this.cIndex] || {
+            src: ""
+          };
+        },
+        open: function open() {
+          return this.index !== null;
+        },
+        hasPrev: function hasPrev() {
+          return this.cIndex > 0 || this.loop;
+        },
+        hasNext: function hasNext() {
+          return this.cIndex < this._images.length - 1 || this.loop;
+        }
+      },
+      watch: {
+        index: function index(idx) {
+          this.goto(idx);
+        },
+        open: function open() {
+          this.focusContent();
+        }
+      },
+      created: function created() {
+        this.goto(this.index);
+      },
+      methods: {
+        /**
+         * @event close - the close button has been pressed. The current index is sent as payload
+         */
+        close: function close() {
+          this.$emit("close", this.cIndex);
+        },
+        prev: function prev() {
+          if (this.hasPrev) {
+            this.goto(this.cIndex - 1);
+          }
+        },
+        next: function next() {
+          if (this.hasNext) {
+            this.goto(this.cIndex + 1);
+          }
+        },
+        goto: function goto(index) {
+          this.switchFrom = this.current;
+          var transition = "";
+
+          if (index !== null) {
+            var newIndex = index;
+
+            if (newIndex >= this._images.length) {
+              newIndex = 0;
+            } else if (newIndex < 0) {
+              newIndex = this._images.length - 1;
+            }
+
+            if (this.cIndex !== null) {
+              transition = this.cIndex < newIndex ? "tinybox__content__current__image--from-right" : "tinybox__content__current__image--from-left";
+            }
+          }
+
+          this.transitionClass = transition;
+          this.cIndex = index;
+        },
+        swipeStart: function swipeStart(e) {
+          if (e.changedTouches.length === 1) {
+            this.swipeX = e.changedTouches[0].screenX;
+          }
+        },
+        swipe: function swipe(e) {
+          if (!this.swipeFinished && e.changedTouches.length === 1) {
+            var newSwipeX = e.changedTouches[0].screenX;
+
+            if (newSwipeX - this.swipeX >= 50) {
+              this.prev();
+              this.swipeFinished = true;
+            } else if (this.swipeX - newSwipeX >= 50) {
+              this.next();
+              this.swipeFinished = true;
+            }
+          }
+        },
+        swipeEnd: function swipeEnd() {
+          this.swipeX = null;
+          this.swipeFinished = false;
+        },
+        focusContent: function focusContent() {
+          if (this.open) {
+            this.$refs.content.focus();
+          } else {
+            this.$refs.content.blur();
+          }
+        }
+      }
+    };
+
+    function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier
+    /* server only */
+    , shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
+      if (typeof shadowMode !== 'boolean') {
+        createInjectorSSR = createInjector;
+        createInjector = shadowMode;
+        shadowMode = false;
+      } // Vue.extend constructor export interop.
+
+
+      var options = typeof script === 'function' ? script.options : script; // render functions
+
+      if (template && template.render) {
+        options.render = template.render;
+        options.staticRenderFns = template.staticRenderFns;
+        options._compiled = true; // functional template
+
+        if (isFunctionalTemplate) {
+          options.functional = true;
+        }
+      } // scopedId
+
+
+      if (scopeId) {
+        options._scopeId = scopeId;
+      }
+
+      var hook;
+
+      if (moduleIdentifier) {
+        // server build
+        hook = function hook(context) {
+          // 2.3 injection
+          context = context || // cached call
+          this.$vnode && this.$vnode.ssrContext || // stateful
+          this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional
+          // 2.2 with runInNewContext: true
+
+          if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
+            context = __VUE_SSR_CONTEXT__;
+          } // inject component styles
+
+
+          if (style) {
+            style.call(this, createInjectorSSR(context));
+          } // register component module identifier for async chunk inference
+
+
+          if (context && context._registeredComponents) {
+            context._registeredComponents.add(moduleIdentifier);
+          }
+        }; // used by ssr in case component is cached and beforeCreate
+        // never gets called
+
+
+        options._ssrRegister = hook;
+      } else if (style) {
+        hook = shadowMode ? function () {
+          style.call(this, createInjectorShadow(this.$root.$options.shadowRoot));
+        } : function (context) {
+          style.call(this, createInjector(context));
+        };
+      }
+
+      if (hook) {
+        if (options.functional) {
+          // register for functional component in vue file
+          var originalRender = options.render;
+
+          options.render = function renderWithStyleInjection(h, context) {
+            hook.call(context);
+            return originalRender(h, context);
+          };
+        } else {
+          // inject component registration as beforeCreate hook
+          var existing = options.beforeCreate;
+          options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+        }
+      }
+
+      return script;
+    }
+
+    var normalizeComponent_1 = normalizeComponent;
+
+    var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
+    function createInjector(context) {
+      return function (id, style) {
+        return addStyle(id, style);
+      };
+    }
+    var HEAD;
+    var styles = {};
+
+    function addStyle(id, css) {
+      var group = isOldIE ? css.media || 'default' : id;
+      var style = styles[group] || (styles[group] = {
+        ids: new Set(),
+        styles: []
+      });
+
+      if (!style.ids.has(id)) {
+        style.ids.add(id);
+        var code = css.source;
+
+        if (css.map) {
+          // https://developer.chrome.com/devtools/docs/javascript-debugging
+          // this makes source maps inside style tags work properly in Chrome
+          code += '\n/*# sourceURL=' + css.map.sources[0] + ' */'; // http://stackoverflow.com/a/26603875
+
+          code += '\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) + ' */';
+        }
+
+        if (!style.element) {
+          style.element = document.createElement('style');
+          style.element.type = 'text/css';
+          if (css.media) style.element.setAttribute('media', css.media);
+
+          if (HEAD === undefined) {
+            HEAD = document.head || document.getElementsByTagName('head')[0];
+          }
+
+          HEAD.appendChild(style.element);
+        }
+
+        if ('styleSheet' in style.element) {
+          style.styles.push(code);
+          style.element.styleSheet.cssText = style.styles.filter(Boolean).join('\n');
+        } else {
+          var index = style.ids.size - 1;
+          var textNode = document.createTextNode(code);
+          var nodes = style.element.childNodes;
+          if (nodes[index]) style.element.removeChild(nodes[index]);
+          if (nodes.length) style.element.insertBefore(textNode, nodes[index]);else style.element.appendChild(textNode);
+        }
+      }
+    }
+
+    var browser = createInjector;
+
+    /* script */
+    const __vue_script__ = script;
+
+    /* template */
+    var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"tinybox",class:{'tinybox--open': _vm.open},on:{"click":_vm.close,"wheel":function($event){$event.preventDefault();},"touchmove":function($event){$event.preventDefault();}}},[_c('div',{ref:"content",staticClass:"tinybox__content",attrs:{"tabindex":"0"},on:{"blur":_vm.focusContent,"touchstart":_vm.swipeStart,"touchmove":_vm.swipe,"touchend":_vm.swipeEnd,"keyup":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"left",37,$event.key,["Left","ArrowLeft"])){ return null; }if('button' in $event && $event.button !== 0){ return null; }return _vm.prev($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"right",39,$event.key,["Right","ArrowRight"])){ return null; }if('button' in $event && $event.button !== 2){ return null; }return _vm.next($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }return _vm.close($event)}]}},[_c('div',{staticClass:"tinybox__content__current",style:(("background-image:url('" + (_vm.switchFrom.src) + "')"))},[_c('img',{staticClass:"tinybox__content__current__image",class:_vm.transitionClass,attrs:{"src":_vm.current.src,"alt":_vm.current.alt || ''},on:{"click":function($event){$event.stopPropagation();return _vm.next($event)},"animationend":function($event){_vm.transitionClass = '';}}})]),(_vm.hasPrev)?_c('div',{staticClass:"tinybox__content__control tinybox__content__control--prev",on:{"click":function($event){$event.stopPropagation();return _vm.prev($event)}}}):_vm._e(),(_vm.hasNext)?_c('div',{staticClass:"tinybox__content__control tinybox__content__control--next",on:{"click":function($event){$event.stopPropagation();return _vm.next($event)}}}):_vm._e(),_c('div',{staticClass:"tinybox__content__control tinybox__content__control--close",on:{"click":function($event){$event.stopPropagation();return _vm.close($event)}}})]),_c('div',{staticClass:"tinybox__thumbnails"},_vm._l((_vm._images),function(img,i){return _c('div',{key:i,staticClass:"tinybox__thumbnails__item",class:{'tinybox__thumbnails__item--active': _vm.cIndex === i},on:{"click":function($event){$event.stopPropagation();return _vm.goto(i)}}},[_c('img',{staticClass:"tinybox__thumbnails__item__image",attrs:{"src":img.thumbnail || img.src,"alt":img.alt || ''}})])}),0)])};
+    var __vue_staticRenderFns__ = [];
+
+      /* style */
+      const __vue_inject_styles__ = function (inject) {
+        if (!inject) return
+        inject("data-v-832179e2_0", { source: ".tinybox[data-v-832179e2]{background:rgba(0,0,0,.9);height:100%;left:0;opacity:0;outline:0;pointer-events:none;position:fixed;right:0;text-align:center;top:0;transition:opacity .3s ease;z-index:2000}.tinybox--open[data-v-832179e2]{opacity:1;pointer-events:initial}.tinybox__content[data-v-832179e2]{height:84vh;position:absolute;width:100vw}.tinybox__content[data-v-832179e2]:focus{outline:0}.tinybox__content[data-v-832179e2]::before{content:\"\";display:inline-block;height:84vh;vertical-align:middle}.tinybox__content__current[data-v-832179e2]{background-size:cover;display:inline-block;vertical-align:middle}.tinybox__content__current__image[data-v-832179e2]{border:none;cursor:pointer;display:inline-block;float:none;height:auto;margin:0;max-width:82.3vw;max-height:84vh;position:relative;vertical-align:middle;width:auto;animation-duration:.3s;animation-direction:normal;animation-iteration-count:1;animation-timing-function:ease}.tinybox__content__current__image--from-left[data-v-832179e2]{animation-name:left-right-data-v-832179e2}.tinybox__content__current__image--from-right[data-v-832179e2]{animation-name:right-left-data-v-832179e2}@keyframes left-right-data-v-832179e2{from{opacity:0;transform:translateX(-80px)}to{opacity:1;transform:translateX(0)}}@keyframes right-left-data-v-832179e2{from{opacity:0;transform:translateX(80px)}to{opacity:1;transform:translateX(0)}}.tinybox__content__control[data-v-832179e2]{background-size:24px;background-repeat:no-repeat;background-position:center;cursor:pointer;opacity:.5;position:absolute;top:0;transition:opacity .3s;width:4em}.tinybox__content__control[data-v-832179e2]:hover{opacity:1}.tinybox__content__control--prev[data-v-832179e2]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjE3LjkgMjU2IDEyNy4xLTEyN2M5LjQtOS40IDkuNC0yNC42IDAtMzMuOS05LjQtOS40LTI0LjYtOS4zLTM0IDBsLTE0NCAxNDMuOWMtOS4xIDkuMS05LjMgMjMuNy0uNyAzMy4xbDE0NC42IDE0NC45YzQuNyA0LjcgMTAuOSA3IDE3IDdzMTIuMy0yLjMgMTctN2M5LjQtOS40IDkuNC0yNC42IDAtMzMuOXoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=);bottom:0;left:0}.tinybox__content__control--next[data-v-832179e2]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjk0LjEgMjU2LTEyNy4xLTEyN2MtOS40LTkuNC05LjQtMjQuNiAwLTMzLjlzMjQuNi05LjMgMzQgMGwxNDQgMTQzLjljOS4xIDkuMSA5LjMgMjMuNy43IDMzLjFsLTE0NC42IDE0NC45Yy00LjcgNC43LTEwLjkgNy0xNyA3cy0xMi4zLTIuMy0xNy03Yy05LjQtOS40LTkuNC0yNC42IDAtMzMuOXoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=);bottom:0;right:0}.tinybox__content__control--close[data-v-832179e2]{background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0yNzguNiAyNTYgNjguMi02OC4yYzYuMi02LjIgNi4yLTE2LjQgMC0yMi42cy0xNi40LTYuMi0yMi42IDBsLTY4LjIgNjguMi02OC4yLTY4LjJjLTYuMi02LjItMTYuNC02LjItMjIuNiAwLTMuMSAzLjEtNC43IDcuMi00LjcgMTEuM3MxLjYgOC4yIDQuNyAxMS4zbDY4LjIgNjguMi02OC4yIDY4LjJjLTMuMSAzLjEtNC43IDcuMi00LjcgMTEuM3MxLjYgOC4yIDQuNyAxMS4zYzYuMiA2LjIgMTYuNCA2LjIgMjIuNiAwbDY4LjItNjguMiA2OC4yIDY4LjJjNi4yIDYuMiAxNi40IDYuMiAyMi42IDBzNi4yLTE2LjQgMC0yMi42eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==);height:2.6em;right:0}.tinybox__thumbnails[data-v-832179e2]{bottom:0;left:0;line-height:0;padding:0 1vh;position:absolute;right:0;overflow-x:auto;overflow-y:hidden;white-space:nowrap}.tinybox__thumbnails__item[data-v-832179e2]{background-color:#222;cursor:pointer;display:inline-block;height:10vh;overflow:hidden;margin:2vh 1vh;position:relative;width:10vh}.tinybox__thumbnails__item--active .tinybox__thumbnails__item__image[data-v-832179e2]{opacity:.3}.tinybox__thumbnails__item__image[data-v-832179e2]{display:inline-block;height:100%;left:50%;position:absolute;top:0;transform:translateX(-50%);vertical-align:middle;width:auto}", map: undefined, media: undefined });
+
+      };
+      /* scoped */
+      const __vue_scope_id__ = "data-v-832179e2";
+      /* module identifier */
+      const __vue_module_identifier__ = undefined;
+      /* functional template */
+      const __vue_is_functional_template__ = false;
+      /* style inject SSR */
+      
+
+      
+      var Tinybox = normalizeComponent_1(
+        { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+        __vue_inject_styles__,
+        __vue_script__,
+        __vue_scope_id__,
+        __vue_is_functional_template__,
+        __vue_module_identifier__,
+        browser,
+        undefined
+      );
+
+    return Tinybox;
+
+}));

package.json

 {
   "name": "vue-tinybox",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A slick, yet tiny lightbox gallery component for Vue.js",
@@ -43,4 +43,5 @@ "license": "MIT",
     "dev": "rollup -w --config rollup.config.dev.js",
+    "lint": "eslint ./src",
     "size": "size-limit",
-    "test": "npm run size"
+    "test": "npm run lint && npm run build && npm run size"
   },
@@ -63,5 +64,5 @@ "devDependencies": {
       "path": "dist/tinybox.umd.js",
-      "limit": "5 KB"
+      "limit": "4 KB"
     }
   ]
 }

README.md

@@ -65,2 +65,3 @@ # vue-tinybox
 The `Tinybox` component accepts these props:
+
 | Prop name | Type          | Default | Description                                                                    |
@@ -73,2 +74,3 @@ |-----------|---------------|---------|--------------------------------------------------------------------------------|
 The `Image` object is an object with following fields:
+
 | Field name  | Type   | Description                                                                                                    |
@@ -75,0 +77,0 @@ |-------------|--------|----------------------------------------------------------------------------------------------------------------|

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

59010

increased by65.07%

Number of package files

9

increased by12.5%

Lines of code

791

increased by788.76%

Number of lines in readme file

79

increased by2.6%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes