hooper 0.2.2 → 0.3.2

package/dist/hooper.js

@@ -1,5 +1,5 @@
 /**
-  * Hopper 0.2.1
+  * Hopper 0.3.2
   * (c) 2019
     * @license MIT
     */
@@ -45,6 +45,26 @@
     return target;
   }
 
+  function _toConsumableArray(arr) {
+    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
+  }
+
+  function _arrayWithoutHoles(arr) {
+    if (Array.isArray(arr)) {
+      for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
+
+      return arr2;
+    }
+  }
+
+  function _iterableToArray(iter) {
+    if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
+  }
+
+  function _nonIterableSpread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance");
+  }
+
   function getInRange(value, min, max) {
     return Math.max(Math.min(value, max), min);
   }
@@ -82,47 +102,81 @@
     return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
   }
   function normalizeSlideIndex(index, slidesCount) {
+    var realIndex;
+
     if (index < 0) {
-      return (index + slidesCount) % slidesCount;
+      realIndex = (index + slidesCount) % slidesCount;
+    } else {
+      realIndex = index % slidesCount;
+    } // Test for NaN
+
+
+    if (realIndex !== realIndex) {
+      return 0;
     }
 
-    return index % slidesCount;
+    return realIndex;
   }
+  function cloneNode(h, vNode) {
+    // use the context that the original vnode was created in.
+    var children = vNode.children || vNode.componentOptions.children || vNode.text;
+    var tag = vNode.componentOptions.Ctor;
+    return h(tag, vNode.data, children);
+  } // IE11 :)
+
+  function assignPoly(target) {
+    if (target === undefined || target === null) {
+      throw new TypeError('Cannot convert first argument to object');
+    }
 
-  function extractData(vnode, indx) {
-    var cOpts = vnode.componentOptions;
-    var data = {
-      class: vnode.data.class,
-      staticClass: vnode.data.staticClass,
-      style: vnode.data.style,
-      attrs: vnode.data.attrs,
-      props: _objectSpread({}, cOpts.propsData, {
-        isClone: true,
-        index: indx
-      }),
-      on: cOpts.listeners,
-      nativeOn: vnode.data.nativeOn,
-      directives: vnode.data.directives,
-      scopesSlots: vnode.data.scopesSlots,
-      slot: vnode.data.slot,
-      ref: vnode.data.ref,
-      key: vnode.data.key ? "".concat(indx, "-clone") : undefined
-    };
-    return data;
+    var to = Object(target);
+
+    for (var i = 1; i < arguments.length; i++) {
+      var nextSource = arguments[i];
+
+      if (nextSource === undefined || nextSource === null) {
+        continue;
+      }
+
+      nextSource = Object(nextSource);
+      var keysArray = Object.keys(Object(nextSource));
+
+      for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
+        var nextKey = keysArray[nextIndex];
+        var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
+
+        if (desc !== undefined && desc.enumerable) {
+          to[nextKey] = nextSource[nextKey];
+        }
+      }
+    }
+
+    return to;
   }
 
-  function cloneSlide(vnode, indx) {
-    // use the context that the original vnode was created in.
-    var h = vnode.context && vnode.context.$createElement;
-    var children = vnode.componentOptions.children;
-    var data = extractData(vnode, indx);
-    var tag = vnode.componentOptions.Ctor;
-    return h(tag, data, children);
+  var assign = Object.assign || assignPoly;
+
+  function signPoly(value) {
+    if (value < 0) {
+      return -1;
+    }
+
+    return value > 0 ? 1 : 0;
+  }
+
+  var sign = Math.sign || signPoly;
+  function normalizeChildren(context) {
+    var slotProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+    if (context.$scopedSlots.default) {
+      return context.$scopedSlots.default(slotProps) || [];
+    }
+
+    return context.$slots.default || [];
   }
 
-  //
   var EMITTER = new Vue();
-  var script = {
+  var Carousel = {
     name: 'Hooper',
     provide: function provide() {
       return {
@@ -241,7 +295,6 @@
         trimEnd: 1,
         currentSlide: null,
         timer: null,
-        slides: [],
         defaults: {},
         breakpoints: {},
         delta: {
@@ -344,11 +397,11 @@
         }
 
         if (this.config.mouseDrag) {
-          this.$refs.track.addEventListener('mousedown', this.onDragStart);
+          this.$refs.list.addEventListener('mousedown', this.onDragStart);
         }
 
         if (this.config.touchDrag) {
-          this.$refs.track.addEventListener('touchstart', this.onDragStart, {
+          this.$refs.list.addEventListener('touchstart', this.onDragStart, {
             passive: true
           });
         }
@@ -385,28 +438,8 @@
       },
       initDefaults: function initDefaults() {
         this.breakpoints = this.settings.breakpoints;
-        this.defaults = Object.assign({}, this.$props, this.settings);
-        this.config = Object.assign({}, this.defaults);
-      },
-      initSlides: function initSlides() {
-        var _this3 = this;
-
-        this.slides = this.filteredSlides();
-        this.slidesCount = this.slides.length;
-        this.slides.forEach(function (slide, indx) {
-          slide.componentOptions.propsData.index = indx;
-        });
-
-        if (this.config.infiniteScroll) {
-          var before = [];
-          var after = [];
-          this.slides.forEach(function (slide, indx) {
-            before.push(cloneSlide(slide, indx - _this3.slidesCount));
-            after.push(cloneSlide(slide, indx + _this3.slidesCount));
-          });
-          this.$slots['clone-before'] = before;
-          this.$slots['clone-after'] = after;
-        }
+        this.defaults = assign({}, this.$props, this.settings);
+        this.config = assign({}, this.defaults);
       },
       // updating methods
       update: function update() {
@@ -453,7 +486,7 @@
         this.slideWidth = this.containerWidth / this.config.itemsToShow;
       },
       updateConfig: function updateConfig() {
-        var _this4 = this;
+        var _this3 = this;
 
         var breakpoints = Object.keys(this.breakpoints).sort(function (a, b) {
           return b - a;
@@ -463,13 +496,13 @@
           matched = window.matchMedia("(min-width: ".concat(breakpoint, "px)")).matches;
 
           if (matched) {
-            _this4.config = Object.assign({}, _this4.config, _this4.defaults, _this4.breakpoints[breakpoint]);
+            _this3.config = assign({}, _this3.config, _this3.defaults, _this3.breakpoints[breakpoint]);
             return true;
           }
         });
 
         if (!matched) {
-          this.config = Object.assign(this.config, this.defaults);
+          this.config = assign(this.config, this.defaults);
         }
       },
       restartTimer: function restartTimer() {
@@ -478,11 +511,10 @@
         }
       },
       restart: function restart() {
-        var _this5 = this;
+        var _this4 = this;
 
-        this.initSlides();
         this.$nextTick(function () {
-          _this5.update();
+          _this4.update();
         });
       },
       // events handlers
@@ -506,7 +538,10 @@
         this.startPosition.y = this.isTouch ? event.touches[0].clientY : event.clientY;
         document.addEventListener(this.isTouch ? 'touchmove' : 'mousemove', this.onDrag);
         document.addEventListener(this.isTouch ? 'touchend' : 'mouseup', this.onDragEnd);
-        event.preventDefault();
+
+        if (event.type !== 'touchstart') {
+          event.preventDefault();
+        }
       },
       onDrag: function onDrag(event) {
         if (this.isSliding) {
@@ -517,7 +552,10 @@
         this.endPosition.y = this.isTouch ? event.touches[0].clientY : event.clientY;
         this.delta.x = this.endPosition.x - this.startPosition.x;
         this.delta.y = this.endPosition.y - this.startPosition.y;
-        event.preventDefault();
+
+        if (!this.isTouch) {
+          event.preventDefault();
+        }
       },
       onDragEnd: function onDragEnd() {
         var tolerance = this.config.shortDrag ? 0.5 : 0.15;
@@ -525,11 +563,11 @@
 
         if (this.config.vertical) {
           var draggedSlides = Math.round(Math.abs(this.delta.y / this.slideHeight) + tolerance);
-          this.slideTo(this.currentSlide - Math.sign(this.delta.y) * draggedSlides);
+          this.slideTo(this.currentSlide - sign(this.delta.y) * draggedSlides);
         }
 
         if (!this.config.vertical) {
-          var direction = (this.config.rtl ? -1 : 1) * Math.sign(this.delta.x);
+          var direction = (this.config.rtl ? -1 : 1) * sign(this.delta.x);
 
           var _draggedSlides = Math.round(Math.abs(this.delta.x / this.slideWidth) + tolerance);
 
@@ -597,7 +635,7 @@
 
         this.lastScrollTime = now();
         var value = event.wheelDelta || -event.deltaY;
-        var delta = Math.sign(value);
+        var delta = sign(value);
 
         if (delta === -1) {
           this.slideNext();
@@ -607,17 +645,8 @@
           this.slidePrev();
         }
       },
-      filteredSlides: function filteredSlides() {
-        return this.$slots.default.filter(function (el) {
-          if (!el.componentOptions || !el.componentOptions.Ctor) {
-            return false;
-          }
-
-          return el.componentOptions.Ctor.options.name === 'HooperSlide';
-        });
-      },
       addGroupListeners: function addGroupListeners() {
-        var _this6 = this;
+        var _this5 = this;
 
         if (!this.group) {
           return;
@@ -625,35 +654,26 @@
 
         this._groupSlideHandler = function (slideIndex) {
           // set the isSource to false to prevent infinite emitting loop.
-          _this6.slideTo(slideIndex, false);
+          _this5.slideTo(slideIndex, false);
         };
 
         EMITTER.$on("slideGroup:".concat(this.group), this._groupSlideHandler);
       }
     },
-    beforeUpdate: function beforeUpdate() {
-      var isForcUpdated = this.config.infiniteScroll && (!this.$slots['clone-before'] || !this.$slots['clone-after']);
-      var isSlidesUpdated = this.filteredSlides().length !== this.slidesCount;
-
-      if (isForcUpdated || isSlidesUpdated) {
-        this.initSlides();
-      }
-    },
     created: function created() {
       this.initDefaults();
-      this.initSlides();
     },
     mounted: function mounted() {
-      var _this7 = this;
+      var _this6 = this;
 
       this.initEvents();
       this.addGroupListeners();
       this.$nextTick(function () {
-        _this7.update();
+        _this6.update();
 
-        _this7.slideTo(_this7.config.initialSlide);
+        _this6.slideTo(_this6.config.initialSlide || 0);
 
-        _this7.$emit('loaded');
+        _this6.$emit('loaded');
       });
     },
     beforeDestroy: function beforeDestroy() {
@@ -666,189 +686,147 @@
       if (this.timer) {
         this.timer.stop();
       }
-    }
-  };
-
-  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
-
+    },
+    render: function render(h) {
+      var _this7 = this;
 
-        if (context && context._registeredComponents) {
-          context._registeredComponents.add(moduleIdentifier);
+      var body = renderBody.call(this, h);
+      return h('section', {
+        class: {
+          hooper: true,
+          'is-vertical': this.config.vertical,
+          'is-rtl': this.config.rtl
+        },
+        attrs: {
+          tabindex: '0'
+        },
+        on: {
+          focusin: function focusin() {
+            return _this7.isFocus = true;
+          },
+          focusout: function focusout() {
+            return _this7.isFocus = false;
+          },
+          mouseover: function mouseover() {
+            return _this7.isHover = true;
+          },
+          mouseleave: function mouseleave() {
+            return _this7.isHover = false;
+          }
         }
-      }; // 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));
-      };
+      }, body);
     }
-
-    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];
-      }
+  };
+  /**
+   * Renders additional slides for infinite slides mode.
+   * By cloning Slides VNodes before and after either edges.
+   */
+
+  function renderBufferSlides(h, slides) {
+    var before = [];
+    var after = []; // reduce prop access
+
+    var slidesCount = slides.length;
+
+    for (var i = 0; i < slidesCount; i++) {
+      var slide = slides[i];
+      var clonedBefore = cloneNode(h, slide);
+      clonedBefore.data.key = "index-".concat(i - slidesCount);
+      clonedBefore.key = clonedBefore.data.key;
+      clonedBefore.data.props = {
+        index: i - slidesCount,
+        isClone: true
+      };
+      before.push(clonedBefore);
+      var clonedAfter = cloneNode(h, slide);
+      clonedAfter.data.key = "index-".concat(i + slidesCount);
+      clonedAfter.key = clonedAfter.data.key;
+      clonedAfter.data.props = {
+        index: i + slidesCount,
+        isClone: true
+      };
+      after.push(clonedAfter);
     }
 
-    return script;
+    return [].concat(before, _toConsumableArray(slides), after);
   }
+  /**
+   * Produces the VNodes for the Slides.
+   * requires {this} to be bound to hooper.
+   * So use with .call or .bind
+   */
+
+
+  function renderSlides(h) {
+    var children = normalizeChildren(this);
+    var childrenCount = children.length;
+    var idx = 0;
+    var slides = [];
+
+    for (var i = 0; i < childrenCount; i++) {
+      var child = children[i];
+      var ctor = child.componentOptions && child.componentOptions.Ctor;
+
+      if (!ctor || ctor.options.name !== 'HooperSlide') {
+        continue;
+      } // give slide an index behind the scenes
+
+
+      child.componentOptions.propsData.index = idx;
+      child.data.key = idx;
+      child.key = idx;
+      child.data.props = _objectSpread({}, child.data.props || {}, {
+        isClone: false,
+        index: idx++
+      });
+      slides.push(child);
+    } // update hooper's information of the slide count.
 
-  var normalizeComponent_1 = normalizeComponent;
-
-  /* script */
-  var __vue_script__ = script;
-  /* template */
-
-  var __vue_render__ = function __vue_render__() {
-    var _vm = this;
 
-    var _h = _vm.$createElement;
+    this.slidesCount = slides.length;
 
-    var _c = _vm._self._c || _h;
+    if (this.config.infiniteScroll) {
+      slides = renderBufferSlides(h, slides);
+    }
 
-    return _c('section', {
-      staticClass: "hooper",
+    return h('ul', {
       class: {
-        'is-vertical': _vm.config.vertical,
-        'is-rtl': _vm.config.rtl
-      },
-      attrs: {
-        "tabindex": "0"
+        'hooper-track': true,
+        'is-dragging': this.isDragging
       },
+      style: this.trackTransform + this.trackTransition,
+      ref: 'track',
       on: {
-        "mouseover": function mouseover($event) {
-          _vm.isHover = true;
-        },
-        "mouseleave": function mouseleave($event) {
-          _vm.isHover = false;
-        },
-        "focusin": function focusin($event) {
-          _vm.isFocus = true;
-        },
-        "focusout": function focusout($event) {
-          _vm.isFocus = false;
-        }
+        transitionend: this.onTransitionend
       }
-    }, [_c('div', {
-      staticClass: "hooper-list"
-    }, [_c('ul', {
-      ref: "track",
-      staticClass: "hooper-track",
-      class: {
-        'is-dragging': _vm.isDragging
-      },
-      style: _vm.trackTransform + _vm.trackTransition,
-      on: {
-        "transitionend": _vm.onTransitionend
-      }
-    }, [_vm._t("clone-before"), _vm._v(" "), _vm._t("default"), _vm._v(" "), _vm._t("clone-after")], 2)]), _vm._v(" "), _vm._t("hooper-addons"), _vm._v(" "), _c('div', {
-      staticClass: "hooper-liveregion hooper-sr-only",
+    }, slides);
+  }
+  /**
+   * Builds the VNodes for the hooper body.
+   * Which is the slides, addons if available, and a11y stuff.
+   * REQUIRES {this} to be bound to the hooper instance.
+   * use with .call or .bind
+   */
+
+
+  function renderBody(h) {
+    var slides = renderSlides.call(this, h);
+    var addons = this.$slots['hooper-addons'] || [];
+    var a11y = h('div', {
+      class: 'hooper-liveregion hooper-sr-only',
       attrs: {
-        "aria-live": "polite",
-        "aria-atomic": "true"
+        'aria-live': 'polite',
+        'aria-atomic': 'true'
       }
-    }, [_vm._v("\n    " + _vm._s("Item " + (_vm.currentSlide + 1) + " of " + _vm.slidesCount) + "\n  ")])], 2);
-  };
+    }, "Item ".concat(this.currentSlide + 1, " of ").concat(this.slidesCount));
+    var children = [slides].concat(_toConsumableArray(addons), [a11y]);
+    return [h('div', {
+      class: 'hooper-list',
+      ref: 'list'
+    }, children)];
+  }
 
-  var __vue_staticRenderFns__ = [];
-  /* style */
-
-  var __vue_inject_styles__ = undefined;
-  /* scoped */
-
-  var __vue_scope_id__ = undefined;
-  /* module identifier */
-
-  var __vue_module_identifier__ = undefined;
-  /* functional template */
-
-  var __vue_is_functional_template__ = false;
-  /* style inject */
-
-  /* style inject SSR */
-
-  var Hooper = normalizeComponent_1({
-    render: __vue_render__,
-    staticRenderFns: __vue_staticRenderFns__
-  }, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, undefined, undefined);
-
-  //
-  //
-  //
-  //
-  //
-  //
-  //
-  //
-  //
-  //
-  //
-  //
-  //
-  //
-  //
-  //
-  //
-  var script$1 = {
+  var Slide = {
     name: 'HooperSlide',
     inject: ['$hooper'],
     props: {
@@ -903,58 +881,27 @@
       isCurrent: function isCurrent() {
         return this.index === this.$hooper.currentSlide;
       }
+    },
+    render: function render(h) {
+      var classes = {
+        'hooper-slide': true,
+        'is-clone': this.isClone,
+        'is-active': this.isActive,
+        'is-prev': this.isPrev,
+        'is-next': this.isNext,
+        'is-current': this.isCurrent
+      };
+      var children = normalizeChildren(this);
+      return h('li', {
+        class: classes,
+        style: this.style,
+        attrs: {
+          'aria-hidden': !this.isActive
+        }
+      }, children);
     }
   };
 
-  /* script */
-  var __vue_script__$1 = script$1;
-  /* template */
-
-  var __vue_render__$1 = function __vue_render__() {
-    var _vm = this;
-
-    var _h = _vm.$createElement;
-
-    var _c = _vm._self._c || _h;
-
-    return _c('li', {
-      staticClass: "hooper-slide",
-      class: {
-        'is-clone': _vm.isClone,
-        'is-active': _vm.isActive,
-        'is-prev': _vm.isPrev,
-        'is-next': _vm.isNext,
-        'is-current': _vm.isCurrent
-      },
-      style: _vm.style,
-      attrs: {
-        "aria-hidden": _vm.isActive
-      }
-    }, [_vm._t("default")], 2);
-  };
-
-  var __vue_staticRenderFns__$1 = [];
-  /* style */
-
-  var __vue_inject_styles__$1 = undefined;
-  /* scoped */
-
-  var __vue_scope_id__$1 = undefined;
-  /* module identifier */
-
-  var __vue_module_identifier__$1 = undefined;
-  /* functional template */
-
-  var __vue_is_functional_template__$1 = false;
-  /* style inject */
-
-  /* style inject SSR */
-
-  var Slide = normalizeComponent_1({
-    render: __vue_render__$1,
-    staticRenderFns: __vue_staticRenderFns__$1
-  }, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, undefined, undefined);
-
   var Mixin = {
     inject: ['$hooper']
   };
@@ -965,7 +912,7 @@
     arrowRight: 'M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z',
     arrowLeft: 'M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z'
   };
-  var Icons = {
+  var Icon = {
     name: 'HooperIcon',
     functional: true,
     inheritAttrs: true,
@@ -1005,8 +952,7 @@
     }
   };
 
-  //
-  var script$2 = {
+  var Progress = {
     inject: ['$hooper'],
     name: 'HooperProgress',
     computed: {
@@ -1017,52 +963,54 @@
         var range = this.$hooper.slidesCount - this.$hooper.trimStart - this.$hooper.trimEnd;
         return (this.currentSlide - this.$hooper.trimStart) * 100 / range;
       }
+    },
+    render: function render(h) {
+      return h('div', {
+        class: 'hooper-progress'
+      }, [h('div', {
+        class: 'hooper-progress-inner',
+        style: "width: ".concat(this.progress, "%")
+      })]);
     }
   };
 
-  /* script */
-  var __vue_script__$2 = script$2;
-  /* template */
-
-  var __vue_render__$2 = function __vue_render__() {
-    var _vm = this;
-
-    var _h = _vm.$createElement;
-
-    var _c = _vm._self._c || _h;
-
-    return _c('div', {
-      staticClass: "hooper-progress"
-    }, [_c('div', {
-      staticClass: "hooper-progress-inner",
-      style: "width: " + _vm.progress + "%"
-    })]);
-  };
-
-  var __vue_staticRenderFns__$2 = [];
-  /* style */
-
-  var __vue_inject_styles__$2 = undefined;
-  /* scoped */
+  function renderFraction(h, current, totalCount) {
+    return [h('span', current + 1), h('span', '/'), h('span', totalCount)];
+  }
 
-  var __vue_scope_id__$2 = undefined;
-  /* module identifier */
+  function renderIndicator(h, index, isCurrent, onClick) {
+    return h('li', [h('button', {
+      class: {
+        'hooper-indicator': true,
+        'is-active': isCurrent
+      },
+      on: {
+        click: onClick
+      }
+    }, [h('span', {
+      class: 'hooper-sr-only'
+    }, "item ".concat(index))])]);
+  }
 
-  var __vue_module_identifier__$2 = undefined;
-  /* functional template */
+  function renderDefault(h, current, totalCount, slideToIndex) {
+    var children = [];
 
-  var __vue_is_functional_template__$2 = false;
-  /* style inject */
+    var _loop = function _loop(i) {
+      children.push(renderIndicator(h, i, i === current, function () {
+        return slideToIndex(i);
+      }));
+    };
 
-  /* style inject SSR */
+    for (var i = 0; i < totalCount; i++) {
+      _loop(i);
+    }
 
-  var Progress = normalizeComponent_1({
-    render: __vue_render__$2,
-    staticRenderFns: __vue_staticRenderFns__$2
-  }, __vue_inject_styles__$2, __vue_script__$2, __vue_scope_id__$2, __vue_is_functional_template__$2, __vue_module_identifier__$2, undefined, undefined);
+    return [h('ol', {
+      class: 'hooper-indicators'
+    }, children)];
+  }
 
-  //
-  var script$3 = {
+  var Pagination = {
     inject: ['$hooper'],
     name: 'HooperPagination',
     props: {
@@ -1081,75 +1029,55 @@
         });
         return slides.slice(this.$hooper.trimStart, this.$hooper.slidesCount - this.$hooper.trimEnd + 1);
       }
-    }
-  };
-
-  /* script */
-  var __vue_script__$3 = script$3;
-  /* template */
-
-  var __vue_render__$3 = function __vue_render__() {
-    var _vm = this;
-
-    var _h = _vm.$createElement;
-
-    var _c = _vm._self._c || _h;
-
-    return _c('div', {
-      staticClass: "hooper-pagination",
-      class: {
-        'is-vertical': _vm.$hooper.config.vertical
-      }
-    }, [_vm.mode === 'indicator' ? _c('ol', {
-      staticClass: "hooper-indicators"
-    }, _vm._l(_vm.slides, function (index) {
-      return _c('li', {
-        key: index
-      }, [_c('button', {
-        staticClass: "hooper-indicator",
+    },
+    render: function render(h) {
+      var _this = this;
+
+      var totalCount = this.$hooper.slidesCount;
+      var children = this.mode === 'indicator' ? renderDefault(h, this.currentSlide, totalCount, function (index) {
+        return _this.$hooper.slideTo(index);
+      }) : renderFraction(h, this.currentSlide, totalCount);
+      return h('div', {
         class: {
-          'is-active': _vm.currentSlide === index
-        },
-        on: {
-          "click": function click($event) {
-            return _vm.$hooper.slideTo(index);
-          }
+          'hooper-pagination': true,
+          'is-vertical': this.$hooper.config.vertical
         }
-      }, [_c('span', {
-        staticClass: "hooper-sr-only"
-      }, [_vm._v("item " + _vm._s(index))])])]);
-    }), 0) : _vm._e(), _vm._v(" "), _vm.mode === 'fraction' ? [_c('span', [_vm._v(_vm._s(_vm.currentSlide + 1))]), _vm._v(" "), _c('span', [_vm._v("/")]), _vm._v(" "), _c('span', [_vm._v(_vm._s(_vm.$hooper.slidesCount))])] : _vm._e()], 2);
+      }, children);
+    }
   };
 
-  var __vue_staticRenderFns__$3 = [];
-  /* style */
-
-  var __vue_inject_styles__$3 = undefined;
-  /* scoped */
-
-  var __vue_scope_id__$3 = undefined;
-  /* module identifier */
-
-  var __vue_module_identifier__$3 = undefined;
-  /* functional template */
+  function iconName(isVertical, isRTL, isPrev) {
+    if (isPrev) {
+      return isVertical ? 'arrowUp' : isRTL ? 'arrowRight' : 'arrowLeft';
+    }
 
-  var __vue_is_functional_template__$3 = false;
-  /* style inject */
+    return isVertical ? 'arrowDown' : isRTL ? 'arrowLeft' : 'arrowRight';
+  }
 
-  /* style inject SSR */
+  function renderButton(h, disabled, slot, isPrev, _ref, onClick) {
+    var _class;
 
-  var Pagination = normalizeComponent_1({
-    render: __vue_render__$3,
-    staticRenderFns: __vue_staticRenderFns__$3
-  }, __vue_inject_styles__$3, __vue_script__$3, __vue_scope_id__$3, __vue_is_functional_template__$3, __vue_module_identifier__$3, undefined, undefined);
+    var isVertical = _ref.isVertical,
+        isRTL = _ref.isRTL;
+    var children = slot && slot.length ? slot : [h(Icon, {
+      props: {
+        name: iconName(isVertical, isRTL, isPrev)
+      }
+    })];
+    return h('button', {
+      class: (_class = {}, _defineProperty(_class, "hooper-".concat(isPrev ? 'prev' : 'next'), true), _defineProperty(_class, 'is-disabled', disabled), _class),
+      attrs: {
+        type: 'button'
+      },
+      on: {
+        click: onClick
+      }
+    }, children);
+  }
 
-  //
-  var script$4 = {
+  var Navigation = {
     inject: ['$hooper'],
     name: 'HooperNavigation',
-    components: {
-      Icons: Icons
-    },
     computed: {
       isPrevDisabled: function isPrevDisabled() {
         if (this.$hooper.config.infiniteScroll) {
@@ -1163,13 +1091,11 @@
           return false;
         }
 
+        if (this.$hooper.config.trimWhiteSpace) {
+          return this.$hooper.currentSlide === this.$hooper.slidesCount - Math.min(this.$hooper.config.itemsToShow, this.$hooper.slidesCount);
+        }
+
         return this.$hooper.currentSlide === this.$hooper.slidesCount - 1;
-      },
-      isRTL: function isRTL() {
-        return this.$hooper.config.rtl;
-      },
-      isVertical: function isVertical() {
-        return this.$hooper.config.vertical;
       }
     },
     methods: {
@@ -1181,89 +1107,37 @@
         this.$hooper.slidePrev();
         this.$hooper.restartTimer();
       }
-    }
-  };
-
-  /* script */
-  var __vue_script__$4 = script$4;
-  /* template */
-
-  var __vue_render__$4 = function __vue_render__() {
-    var _vm = this;
-
-    var _h = _vm.$createElement;
-
-    var _c = _vm._self._c || _h;
+    },
+    render: function render(h) {
+      var _this = this;
 
-    return _c('div', {
-      staticClass: "hooper-navigation",
-      class: {
-        'is-vertical': _vm.$hooper.config.vertical,
-        'is-rtl': _vm.$hooper.config.rtl
-      }
-    }, [_c('button', {
-      staticClass: "hooper-prev",
-      class: {
-        'is-disabled': _vm.isPrevDisabled
-      },
-      attrs: {
-        "type": "button"
-      },
-      on: {
-        "click": _vm.slidePrev
-      }
-    }, [_vm._t("hooper-prev", [_c('Icons', {
-      attrs: {
-        "name": _vm.isVertical ? 'arrowUp' : _vm.isRTL ? 'arrowRight' : 'arrowLeft'
-      }
-    })])], 2), _vm._v(" "), _c('button', {
-      staticClass: "hooper-next",
-      class: {
-        'is-disabled': _vm.isNextDisabled
-      },
-      attrs: {
-        "type": "button"
-      },
-      on: {
-        "click": _vm.slideNext
-      }
-    }, [_vm._t("hooper-next", [_c('Icons', {
-      attrs: {
-        "name": _vm.isVertical ? 'arrowDown' : _vm.isRTL ? 'arrowLeft' : 'arrowRight'
-      }
-    })])], 2)]);
+      var config = {
+        isRTL: this.$hooper.config.rtl,
+        isVertical: this.$hooper.config.vertical
+      };
+      var children = [renderButton(h, this.isPrevDisabled, this.$slots['hooper-prev'], true, config, function () {
+        return _this.slidePrev();
+      }), renderButton(h, this.isNextDisabled, this.$slots['hooper-next'], false, config, function () {
+        return _this.slideNext();
+      })];
+      return h('div', {
+        class: {
+          'hooper-navigation': true,
+          'is-vertical': this.$hooper.config.vertical,
+          'is-rtl': this.$hooper.config.rtl
+        }
+      }, children);
+    }
   };
 
-  var __vue_staticRenderFns__$4 = [];
-  /* style */
-
-  var __vue_inject_styles__$4 = undefined;
-  /* scoped */
-
-  var __vue_scope_id__$4 = undefined;
-  /* module identifier */
-
-  var __vue_module_identifier__$4 = undefined;
-  /* functional template */
-
-  var __vue_is_functional_template__$4 = false;
-  /* style inject */
-
-  /* style inject SSR */
-
-  var Navigation = normalizeComponent_1({
-    render: __vue_render__$4,
-    staticRenderFns: __vue_staticRenderFns__$4
-  }, __vue_inject_styles__$4, __vue_script__$4, __vue_scope_id__$4, __vue_is_functional_template__$4, __vue_module_identifier__$4, undefined, undefined);
-
-  exports.Hooper = Hooper;
-  exports.Icons = Icons;
+  exports.Hooper = Carousel;
+  exports.Icon = Icon;
   exports.Navigation = Navigation;
   exports.Pagination = Pagination;
   exports.Progress = Progress;
   exports.Slide = Slide;
   exports.addonMixin = Mixin;
-  exports.default = Hooper;
+  exports.default = Carousel;
 
   Object.defineProperty(exports, '__esModule', { value: true });