vue-tinybox - npm Package Compare versions

Comparing version 1.3.0 to 2.0.0-alpha.1

dist/tinybox.esm.js

@@ -1,1 +0,487 @@
-var e={name:"Tinybox",model:{prop:"index",event:"change"},props:{images:{type:Array,default:function(){return[]}},index:{type:Number,default:null},loop:{type:Boolean,default:!1},noThumbs:{type:Boolean,default:!1}},data:function(){return{slide:"next",swipeDone:!1,swipeX:null}},computed:{open:function(){return null!=this.index},prevImage:function(){return this.index>0?this.index-1:this.loop?this.images.length-1:this.index},nextImage:function(){return this.index<this.images.length-1?this.index+1:this.loop?0:this.index}},watch:{open:function(e){e?window.addEventListener("keyup",this.keyup):window.removeEventListener("keyup",this.keyup)},index:function(e){var t=this;this.noThumbs||null==e||this.$nextTick((function(){var n=t.$refs,i=n.thumbs,o=n.thumbItems[e];if(o.offsetLeft+o.clientWidth/2>window.innerWidth/2){var a=o.offsetLeft-window.innerWidth/2;a<i.scrollWidth?i.scrollLeft=a+o.clientWidth/2:i.scrollLeft=i.scrollWidth}else i.scrollLeft=0}))}},methods:{close:function(){var e=this.index;this.goto(null),this.$emit("close",e)},prev:function(){this.$emit("prev",this.prevImage),this.goto(this.prevImage,"prev")},next:function(){this.$emit("next",this.nextImage),this.goto(this.nextImage,"next")},goto:function(e,t){this.slide=t||(this.index<e?"next":"prev"),this.$emit("change",e)},keyup:function(e){"ArrowRight"===e.code||"ArrowRight"===e.key||"Right"===e.key||39===e.keyCode?this.next():"ArrowLeft"===e.code||"ArrowLeft"===e.key||"Left"===e.key||37===e.keyCode?this.prev():"Escape"!==e.code&&"Escape"!==e.key&&"Esc"!==e.key&&27!==e.keyCode||this.close()},swipeStart:function(e){this.swipeDone=!1,1===e.changedTouches.length&&(this.swipeX=e.changedTouches[0].screenX)},swipe:function(e){if(!this.swipeDone&&1===e.changedTouches.length){var t=e.changedTouches[0].screenX-this.swipeX;t>=50?(this.prev(),this.swipeDone=!0):t<=-50&&(this.next(),this.swipeDone=!0)}}}};function t(e,t,n,i,o,a,s,r,c,d){"boolean"!=typeof s&&(c=r,r=s,s=!1);var l,h="function"==typeof n?n.options:n;if(e&&e.render&&(h.render=e.render,h.staticRenderFns=e.staticRenderFns,h._compiled=!0,o&&(h.functional=!0)),i&&(h._scopeId=i),a?(l=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,c(e)),e&&e._registeredComponents&&e._registeredComponents.add(a)},h._ssrRegister=l):t&&(l=s?function(e){t.call(this,d(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,r(e))}),l)if(h.functional){var p=h.render;h.render=function(e,t){return l.call(t),p(e,t)}}else{var u=h.beforeCreate;h.beforeCreate=u?[].concat(u,l):[l]}return n}var n,i="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function o(e){return function(e,t){return function(e,t){var o=i?t.media||"default":e,s=a[o]||(a[o]={ids:new Set,styles:[]});if(!s.ids.has(e)){s.ids.add(e);var r=t.source;if(t.map&&(r+="\n/*# sourceURL="+t.map.sources[0]+" */",r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),s.element||(s.element=document.createElement("style"),s.element.type="text/css",t.media&&s.element.setAttribute("media",t.media),void 0===n&&(n=document.head||document.getElementsByTagName("head")[0]),n.appendChild(s.element)),"styleSheet"in s.element)s.styles.push(r),s.element.styleSheet.cssText=s.styles.filter(Boolean).join("\n");else{var c=s.ids.size-1,d=document.createTextNode(r),l=s.element.childNodes;l[c]&&s.element.removeChild(l[c]),l.length?s.element.insertBefore(d,l[c]):s.element.appendChild(d)}}}(e,t)}}var a={};const s=t({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("transition",{attrs:{name:"fade"}},[e.open?n("div",{staticClass:"tinybox",on:{click:e.close,wheel:function(e){e.preventDefault()},touchmove:function(e){e.preventDefault()}}},[n("div",{staticClass:"tinybox__content",class:{"tinybox__content--no-thumbs":e.noThumbs},on:{touchstart:e.swipeStart,touchmove:e.swipe}},[n("transition",{attrs:{name:e.slide}},[n("img",{key:e.images[e.index].src||e.images[e.index]||"",staticClass:"tinybox__content__image",attrs:{src:e.images[e.index].src||e.images[e.index]||"",alt:e.images[e.index].alt||e.images[e.index].caption||""},on:{click:function(t){return t.stopPropagation(),e.next(t)}}})]),e.images[e.index].caption?n("span",{staticClass:"tinybox__content__image__caption",domProps:{textContent:e._s(e.images[e.index].caption)}}):e._e(),e.prevImage!==e.index?n("div",{staticClass:"tinybox__content__control tinybox__content__control--prev",on:{click:function(t){return t.stopPropagation(),e.prev(t)}}}):e._e(),e.nextImage!==e.index?n("div",{staticClass:"tinybox__content__control tinybox__content__control--next",on:{click:function(t){return t.stopPropagation(),e.next(t)}}}):e._e(),n("div",{staticClass:"tinybox__content__control tinybox__content__control--close",on:{click:function(t){return t.stopPropagation(),e.close(t)}}})],1),e.noThumbs?e._e():n("div",{ref:"thumbs",staticClass:"tinybox__thumbs",on:{touchmove:function(e){e.stopPropagation()},wheel:function(e){e.stopPropagation()}}},e._l(e.images,(function(t,i){return n("img",{key:i,ref:"thumbItems",refInFor:!0,staticClass:"tinybox__thumbs__item",class:{"tinybox__thumbs__item--active":e.index===i},attrs:{src:t.thumbnail||t.src||t||"",alt:e.images[e.index].alt||e.images[e.index].caption||""},on:{click:function(t){return t.stopPropagation(),e.goto(i)}}})})),0)]):e._e()])},staticRenderFns:[]},(function(e){e&&e("data-v-7c98eda5_0",{source:".tinybox[data-v-7c98eda5]{background-color:rgba(0,0,0,.9);bottom:0;left:0;position:fixed;right:0;text-align:center;top:0;z-index:1000}.tinybox__content[data-v-7c98eda5]{height:85%;position:relative;width:100%;display:flex;align-items:center;justify-content:center}.tinybox__content--no-thumbs[data-v-7c98eda5]{height:100%}.tinybox__content__image[data-v-7c98eda5]{background-color:#222;cursor:pointer;display:inline-block;max-height:90%;max-width:80%;position:absolute}.tinybox__content__image__caption[data-v-7c98eda5]{position:absolute;bottom:0;padding:.5rem .75rem;border-radius:5px;color:#fff;background-color:rgba(0,0,0,.9);opacity:.75;font-family:sans-serif;font-weight:lighter;font-size:1.2rem}.tinybox__content__control[data-v-7c98eda5]{background:no-repeat center/24px;cursor:pointer;opacity:.5;position:absolute;top:0;transition:opacity .3s ease;width:4em}.tinybox__content__control[data-v-7c98eda5]:hover{opacity:1}.tinybox__content__control--prev[data-v-7c98eda5]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 -2 28 36' width='40' height='60' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'%3E%3Cpath d='M20 30 L8 16 20 2' /%3E%3C/svg%3E\");bottom:0;left:0}.tinybox__content__control--next[data-v-7c98eda5]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 -2 28 36' width='40' height='60' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'%3E%3Cpath d='M12 30 L24 16 12 2' /%3E%3C/svg%3E\");bottom:0;right:0}.tinybox__content__control--close[data-v-7c98eda5]{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 46 46' width='40' height='40' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='4'%3E%3Cpath d='M2 30 L30 2 M30 30 L2 2' /%3E%3C/svg%3E\");height:2.6em;right:0}.tinybox__thumbs[data-v-7c98eda5]{bottom:0;height:15%;left:0;line-height:0;padding:0 10px;position:absolute;right:0;overflow-x:scroll;overflow-y:hidden;scroll-behavior:smooth;white-space:nowrap}.tinybox__thumbs__item[data-v-7c98eda5]{cursor:pointer;display:inline-block;height:10vh;margin:2.5vh 5px;object-fit:cover;overflow:hidden;width:10vh}.tinybox__thumbs__item--active[data-v-7c98eda5]{opacity:.3}.fade-enter[data-v-7c98eda5],.fade-leave-active[data-v-7c98eda5],.next-enter[data-v-7c98eda5],.next-leave-active[data-v-7c98eda5],.prev-enter[data-v-7c98eda5],.prev-leave-active[data-v-7c98eda5]{opacity:0}.fade-enter-active[data-v-7c98eda5],.fade-leave-active[data-v-7c98eda5],.next-leave-active[data-v-7c98eda5],.prev-leave-active[data-v-7c98eda5]{transition:opacity .3s ease}.prev-enter[data-v-7c98eda5]{transform:translateX(-40px)}.next-enter[data-v-7c98eda5]{transform:translateX(40px)}.next-enter-active[data-v-7c98eda5],.prev-enter-active[data-v-7c98eda5]{transition:opacity .3s ease,transform .3s ease}",map:void 0,media:void 0})}),e,"data-v-7c98eda5",!1,void 0,!1,o,void 0,void 0);var r=null;"undefined"!=typeof window?r=window.Vue:"undefined"!=typeof global&&(r=global.Vue),r&&r.use({install:function e(t){e.installed||(e.installed=!0,t.component(s.name,s))}});export default s;
+(function () {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var t = document.createElement("style");
+      t.appendChild(
+        document.createTextNode(
+          `.tinybox[data-v-4cbda9cc]{background-color:#000000e6;bottom:0;left:0;position:fixed;right:0;text-align:center;top:0;z-index:1000}.tinybox__content[data-v-4cbda9cc]{height:85%;position:relative;width:100%;display:flex;align-items:center;justify-content:center}.tinybox__content--no-thumbs[data-v-4cbda9cc]{height:100%}.tinybox__content__image[data-v-4cbda9cc]{background-color:#222;cursor:pointer;display:inline-block;max-height:90%;max-width:80%;position:absolute}.tinybox__content__image__caption[data-v-4cbda9cc]{position:absolute;bottom:0;padding:.5rem .75rem;border-radius:5px;color:#fff;background-color:#000000e6;opacity:.75;font-family:sans-serif;font-weight:lighter;font-size:1.2rem}.tinybox__content__control[data-v-4cbda9cc]{background:no-repeat center/24px;cursor:pointer;opacity:.5;position:absolute;top:0;transition:opacity .3s ease;width:4em}.tinybox__content__control[data-v-4cbda9cc]:hover{opacity:1}.tinybox__content__control--prev[data-v-4cbda9cc]{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-4cbda9cc]{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-4cbda9cc]{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-4cbda9cc]{bottom:0;height:15%;left:0;line-height:0;padding:0 10px;position:absolute;right:0;overflow-x:scroll;overflow-y:hidden;scroll-behavior:smooth;white-space:nowrap}.tinybox__thumbs__item[data-v-4cbda9cc]{cursor:pointer;display:inline-block;height:10vh;margin:2.5vh 5px;object-fit:cover;overflow:hidden;width:10vh}.tinybox__thumbs__item--active[data-v-4cbda9cc]{opacity:.3}.fade-enter[data-v-4cbda9cc],.next-enter[data-v-4cbda9cc],.prev-enter[data-v-4cbda9cc],.fade-leave-active[data-v-4cbda9cc],.prev-leave-active[data-v-4cbda9cc],.next-leave-active[data-v-4cbda9cc]{opacity:0}.fade-enter-active[data-v-4cbda9cc],.fade-leave-active[data-v-4cbda9cc],.prev-leave-active[data-v-4cbda9cc],.next-leave-active[data-v-4cbda9cc]{transition:opacity .3s ease}.prev-enter[data-v-4cbda9cc]{transform:translate(-40px)}.next-enter[data-v-4cbda9cc]{transform:translate(40px)}.next-enter-active[data-v-4cbda9cc],.prev-enter-active[data-v-4cbda9cc]{transition:opacity .3s ease,transform .3s ease}`
+        )
+      ),
+        document.head.appendChild(t);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const tinybox_vue_vue_type_style_index_0_scoped_4cbda9cc_lang = "";
+function normalizeComponent(
+  scriptExports,
+  render2,
+  staticRenderFns,
+  functionalTemplate,
+  injectStyles,
+  scopeId,
+  moduleIdentifier,
+  shadowMode
+) {
+  var options =
+    typeof scriptExports === "function" ? scriptExports.options : scriptExports;
+  if (render2) {
+    options.render = render2;
+    options.staticRenderFns = staticRenderFns;
+    options._compiled = true;
+  }
+  if (functionalTemplate) {
+    options.functional = true;
+  }
+  if (scopeId) {
+    options._scopeId = "data-v-" + scopeId;
+  }
+  var hook;
+  if (moduleIdentifier) {
+    hook = function (context) {
+      context =
+        context || // cached call
+        (this.$vnode && this.$vnode.ssrContext) || // stateful
+        (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext);
+      if (!context && typeof __VUE_SSR_CONTEXT__ !== "undefined") {
+        context = __VUE_SSR_CONTEXT__;
+      }
+      if (injectStyles) {
+        injectStyles.call(this, context);
+      }
+      if (context && context._registeredComponents) {
+        context._registeredComponents.add(moduleIdentifier);
+      }
+    };
+    options._ssrRegister = hook;
+  } else if (injectStyles) {
+    hook = shadowMode
+      ? function () {
+          injectStyles.call(
+            this,
+            (options.functional ? this.parent : this).$root.$options.shadowRoot
+          );
+        }
+      : injectStyles;
+  }
+  if (hook) {
+    if (options.functional) {
+      options._injectStyles = hook;
+      var originalRender = options.render;
+      options.render = function renderWithStyleInjection(h, context) {
+        hook.call(context);
+        return originalRender(h, context);
+      };
+    } else {
+      var existing = options.beforeCreate;
+      options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+    }
+  }
+  return {
+    exports: scriptExports,
+    options,
+  };
+}
+const _sfc_main = {
+  name: "Tinybox",
+  model: {
+    prop: "index",
+    event: "change",
+  },
+  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` - image URL
+     * - `thumbnail` - thumbnail URL. If omitted, the image URL will be used
+     * - `caption` - caption text to be overlayed on the image
+     * - `alt` - alt text. If omitted, the caption will be used
+     */
+    images: {
+      type: Array,
+      default: () => [],
+    },
+    /**
+     * 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,
+    },
+    /**
+     * When enabled, the thumbnails are hidden
+     */
+    noThumbs: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      /**
+       * Transition name to be used on photo switch
+       *
+       * @type string
+       */
+      slide: "next",
+      /**
+       * Indication that the swipe action has been executed
+       *
+       * @type boolean
+       */
+      swipeDone: false,
+      /**
+       * The swipe distance or null if no swipe action is being executed
+       *
+       * @type null|number
+       */
+      swipeX: null,
+    };
+  },
+  computed: {
+    /**
+     * Indicates whether the Tinybox is open
+     *
+     * @returns {boolean} open state
+     */
+    open() {
+      return this.index != null;
+    },
+    /**
+     * Index of the image _previous_ to the one being open
+     *
+     * @returns {number} index
+     */
+    prevImage() {
+      if (this.index > 0) {
+        return this.index - 1;
+      }
+      if (this.loop) {
+        return this.images.length - 1;
+      }
+      return this.index;
+    },
+    /**
+     * Index of the image _next_ to the one being open
+     *
+     * @returns {number} index
+     */
+    nextImage() {
+      if (this.index < this.images.length - 1) {
+        return this.index + 1;
+      }
+      if (this.loop) {
+        return 0;
+      }
+      return this.index;
+    },
+  },
+  watch: {
+    open(value) {
+      if (value) {
+        window.addEventListener("keyup", this.keyup);
+      } else {
+        window.removeEventListener("keyup", this.keyup);
+      }
+    },
+    /*
+     * Center the thumbnails' scrollbar to the clicked image
+     */
+    index(newIndex) {
+      if (!this.noThumbs && newIndex != null) {
+        this.$nextTick(() => {
+          const { thumbs, thumbItems } = this.$refs;
+          const curThumb = thumbItems[newIndex];
+          if (
+            curThumb.offsetLeft + curThumb.clientWidth / 2 >
+            window.innerWidth / 2
+          ) {
+            const distance = curThumb.offsetLeft - window.innerWidth / 2;
+            if (distance < thumbs.scrollWidth) {
+              thumbs.scrollLeft = distance + curThumb.clientWidth / 2;
+            } else {
+              thumbs.scrollLeft = thumbs.scrollWidth;
+            }
+          } else {
+            thumbs.scrollLeft = 0;
+          }
+        });
+      }
+    },
+  },
+  methods: {
+    /**
+     * Closes the Tinybox
+     */
+    close() {
+      const oldIndex = this.index;
+      this.goto(null);
+      this.$emit("close", oldIndex);
+    },
+    /**
+     * Navigates to the previous image
+     */
+    prev() {
+      this.$emit("prev", this.prevImage);
+      this.goto(this.prevImage, "prev");
+    },
+    /**
+     * Navigates to the next image
+     */
+    next() {
+      this.$emit("next", this.nextImage);
+      this.goto(this.nextImage, "next");
+    },
+    /**
+     * Navigates to the image with a specific index
+     * @param {null|number} idx image index
+     * @param {string} [slide] name of the transition to be used
+     */
+    goto(idx, slide) {
+      this.slide = slide || (this.index < idx ? "next" : "prev");
+      this.$emit("change", idx);
+    },
+    /**
+     * Handles the `keyup` event
+     *
+     * @param {KeyboardEvent} e event
+     */
+    keyup(e) {
+      if (
+        e.code === "ArrowRight" ||
+        e.key === "ArrowRight" ||
+        e.key === "Right" ||
+        e.keyCode === 39
+      ) {
+        this.next();
+      } else if (
+        e.code === "ArrowLeft" ||
+        e.key === "ArrowLeft" ||
+        e.key === "Left" ||
+        e.keyCode === 37
+      ) {
+        this.prev();
+      } else if (
+        e.code === "Escape" ||
+        e.key === "Escape" ||
+        e.key === "Esc" ||
+        e.keyCode === 27
+      ) {
+        this.close();
+      }
+    },
+    /**
+     * Handles the `touchstart` event
+     *
+     * The `touchstart` event on the image indicates the beginning of the swipe action.
+     *
+     * @param {TouchEvent} e event
+     */
+    swipeStart(e) {
+      this.swipeDone = false;
+      if (e.changedTouches.length === 1) {
+        this.swipeX = e.changedTouches[0].screenX;
+      }
+    },
+    /**
+     * Handles the `touch` event
+     *
+     * The `touch` event registered after the `touchstart` event indicates the swipe being in action
+     *
+     * @param {TouchEvent} e event
+     */
+    swipe(e) {
+      if (!this.swipeDone && e.changedTouches.length === 1) {
+        const swipeDistance = e.changedTouches[0].screenX - this.swipeX;
+        if (swipeDistance >= 50) {
+          this.prev();
+          this.swipeDone = true;
+        } else if (swipeDistance <= -50) {
+          this.next();
+          this.swipeDone = true;
+        }
+      }
+    },
+  },
+};
+var _sfc_render = function render() {
+  var _vm = this,
+    _c = _vm._self._c;
+  return _c("transition", { attrs: { name: "fade" } }, [
+    _vm.open
+      ? _c(
+          "div",
+          {
+            staticClass: "tinybox",
+            on: {
+              click: _vm.close,
+              wheel: function ($event) {
+                $event.preventDefault();
+              },
+              touchmove: function ($event) {
+                $event.preventDefault();
+              },
+            },
+          },
+          [
+            _c(
+              "div",
+              {
+                staticClass: "tinybox__content",
+                class: { "tinybox__content--no-thumbs": _vm.noThumbs },
+                on: { touchstart: _vm.swipeStart, touchmove: _vm.swipe },
+              },
+              [
+                _c("transition", { attrs: { name: _vm.slide } }, [
+                  _c("img", {
+                    key:
+                      _vm.images[_vm.index].src || _vm.images[_vm.index] || "",
+                    staticClass: "tinybox__content__image",
+                    attrs: {
+                      src:
+                        _vm.images[_vm.index].src ||
+                        _vm.images[_vm.index] ||
+                        "",
+                      alt:
+                        _vm.images[_vm.index].alt ||
+                        _vm.images[_vm.index].caption ||
+                        "",
+                    },
+                    on: {
+                      click: function ($event) {
+                        $event.stopPropagation();
+                        return _vm.next.apply(null, arguments);
+                      },
+                    },
+                  }),
+                ]),
+                _vm.images[_vm.index].caption
+                  ? _c("span", {
+                      staticClass: "tinybox__content__image__caption",
+                      domProps: {
+                        textContent: _vm._s(_vm.images[_vm.index].caption),
+                      },
+                    })
+                  : _vm._e(),
+                _vm.prevImage !== _vm.index
+                  ? _c("div", {
+                      staticClass:
+                        "tinybox__content__control tinybox__content__control--prev",
+                      on: {
+                        click: function ($event) {
+                          $event.stopPropagation();
+                          return _vm.prev.apply(null, arguments);
+                        },
+                      },
+                    })
+                  : _vm._e(),
+                _vm.nextImage !== _vm.index
+                  ? _c("div", {
+                      staticClass:
+                        "tinybox__content__control tinybox__content__control--next",
+                      on: {
+                        click: function ($event) {
+                          $event.stopPropagation();
+                          return _vm.next.apply(null, arguments);
+                        },
+                      },
+                    })
+                  : _vm._e(),
+                _c("div", {
+                  staticClass:
+                    "tinybox__content__control tinybox__content__control--close",
+                  on: {
+                    click: function ($event) {
+                      $event.stopPropagation();
+                      return _vm.close.apply(null, arguments);
+                    },
+                  },
+                }),
+              ],
+              1
+            ),
+            !_vm.noThumbs
+              ? _c(
+                  "div",
+                  {
+                    ref: "thumbs",
+                    staticClass: "tinybox__thumbs",
+                    on: {
+                      touchmove: function ($event) {
+                        $event.stopPropagation();
+                      },
+                      wheel: function ($event) {
+                        $event.stopPropagation();
+                      },
+                    },
+                  },
+                  _vm._l(_vm.images, function (image, idx) {
+                    return _c("img", {
+                      key: idx,
+                      ref: "thumbItems",
+                      refInFor: true,
+                      staticClass: "tinybox__thumbs__item",
+                      class: {
+                        "tinybox__thumbs__item--active": _vm.index === idx,
+                      },
+                      attrs: {
+                        src: image.thumbnail || image.src || image || "",
+                        alt:
+                          _vm.images[_vm.index].alt ||
+                          _vm.images[_vm.index].caption ||
+                          "",
+                      },
+                      on: {
+                        click: function ($event) {
+                          $event.stopPropagation();
+                          return _vm.goto(idx);
+                        },
+                      },
+                    });
+                  }),
+                  0
+                )
+              : _vm._e(),
+          ]
+        )
+      : _vm._e(),
+  ]);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  "4cbda9cc",
+  null,
+  null
+);
+const component = __component__.exports;
+const install = (Vue) => {
+  if (install.installed) return;
+  install.installed = true;
+  Vue.component(component.name, component);
+};
+let GlobalVue = null;
+if (typeof window !== "undefined") {
+  GlobalVue = window.Vue;
+} else if (typeof global !== "undefined") {
+  GlobalVue = global.Vue;
+}
+if (GlobalVue) {
+  GlobalVue.use({ install });
+}
+export { component as default };

dist/tinybox.umd.js

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

package.json

 {
   "name": "vue-tinybox",
-  "version": "1.3.0",
+  "version": "2.0.0-alpha.1",
   "description": "A slick, yet tiny lightbox gallery for Vue.js",
@@ -26,2 +26,3 @@ "license": "MIT",
   },
+  "type": "module",
   "main": "./dist/tinybox.umd.js",
@@ -42,19 +43,8 @@ "module": "./dist/tinybox.esm.js",
   ],
-  "scripts": {
-    "build": "cross-env NODE_ENV=production rollup -c",
-    "dev:build": "rollup -c -w --no-watch.clearScreen",
-    "dev:serve": "sirv ./dev -s -D -p 8629",
-    "dev": "run-p dev:*",
-    "test:lint": "eslint .",
-    "test:size": "size-limit",
-    "pretest": "run-s build",
-    "test": "run-p --aggregate-output test:*"
-  },
   "devDependencies": {
     "@babel/core": "^7.10.3",
     "@babel/preset-env": "^7.10.3",
-    "@rollup/plugin-node-resolve": "^8.1.0",
     "@size-limit/preset-small-lib": "^4.5.2",
+    "@vitejs/plugin-vue2": "^2.2.0",
     "autoprefixer": "^9.8.4",
-    "cross-env": "^7.0.2",
     "eslint": "^7.3.1",
@@ -66,10 +56,9 @@ "eslint-config-airbnb-base": "^14.2.0",
     "postcss": "^7.0.32",
-    "rollup": "^2.18.0",
-    "rollup-plugin-babel": "^4.4.0",
-    "rollup-plugin-terser": "^6.1.0",
-    "rollup-plugin-vue": "^5.1.9",
-    "sirv-cli": "^1.0.1",
     "size-limit": "^4.5.2",
+    "terser": "^5.16.2",
+    "vite": "^4.1.1",
+    "vite-plugin-css-injected-by-js": "^2.4.0",
+    "vue": "^2",
     "vue-eslint-parser": "^7.1.0",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "^2.7.14"
   },
@@ -89,3 +78,11 @@ "size-limit": [
     "node": ">=10"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite",
+    "test:lint": "eslint .",
+    "test:size": "size-limit",
+    "pretest": "run-s build",
+    "test": "run-p --aggregate-output test:*"
   }
-}
+}

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

63167

increased by69.78%

Dev dependency count

18

decreased by-10%

Number of package files

7

increased by16.67%

Lines of code

1182

increased by1613.04%

Is type module

Yes

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

2

increased byInfinity%

No dependency changes