Merge branch 'master' into feat-fix-aria

Author: AdminXVII

.gitignore

@@ -51,3 +51,6 @@ jspm_packages/
 
 # vuepress build output
 .vuepress/dist
+
+# npm package lock file
+./package-lock.json

README.md

@@ -92,6 +92,7 @@ export default {
 | speed                       | Number  | 500     | Slide transition speed. Number of milliseconds accepted.                                                                                                                                                                                                                              |
 | value                       | Number  |         | Support for v-model functionality. Setting this value will change the current page to the number inputted (if between 0 and pageCount).                                                                                                                                               |
 
+
 ### Events
 | Event                     | Type    | Emitter  | Description                                                                                                                                                                                                                                                                           |
 |:--------------------------|:--------|:---------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
@@ -104,7 +105,7 @@ export default {
 Once the **Carousel** and **Slide** components are installed globally or imported, they can be used in templates in the following manner:
 
 ``` vue
-  <carousel :per-page="1" :navigate-to="someLocalProperty" mouse-drag="false">
+  <carousel :per-page="1" :navigate-to="someLocalProperty" :mouse-drag="false">
     <slide>
       Slide 1 Content
     </slide>

dist/vue-carousel.min.js

@@ -1,6 +1,6 @@
 {
   "name": "vue-carousel",
-  "version": "0.15.0",
+  "version": "0.16.1",
   "description": "A flexible, responsive, touch-friendly carousel for Vue.js",
   "main": "dist/vue-carousel.min.js",
   "scripts": {

docs/db.json

@@ -55,6 +55,10 @@ play("Carousel", module)
       h, containerWidth, [h(Carousel, {}, generateSlideImages(h))]
     )
   )
+  .add("Too few per page", h => createContainer(
+      h, containerWidth, [h(Carousel, { props: { perPage: 10, scrollPerPage: false } }, generateSlideImages(h))]
+    )
+  )
   .add("3 per page", h => createContainer(
       h, containerWidth, [h(Carousel, { props: { perPage: 3 } }, generateSlideImages(h))]
     )

docs/public/api/index.html

@@ -163,6 +163,13 @@ export default {
       type: Boolean,
       default: true
     },
+    /*
+     * Flag to toggle touch dragging
+     */
+    touchDrag: {
+      type: Boolean,
+      default: true
+    },
     /**
      * Listen for an external navigation request using this prop.
      */
@@ -405,9 +412,10 @@ export default {
      * @return {Number}
      */
     maxOffset() {
-      return (
+      return Math.max(
         this.slideWidth * (this.slideCount - this.currentPerPage) -
-        this.spacePadding * this.spacePaddingMaxOffsetFactor
+          this.spacePadding * this.spacePaddingMaxOffsetFactor,
+        0
       );
     },
     /**
@@ -417,7 +425,7 @@ export default {
     pageCount() {
       return this.scrollPerPage
         ? Math.ceil(this.slideCount / this.currentPerPage)
-        : this.slideCount - 2;
+        : this.slideCount - this.currentPerPage + 1;
     },
     /**
      * Calculate the width of each slide
@@ -762,7 +770,18 @@ export default {
       const width = this.scrollPerPage
         ? this.slideWidth * this.currentPerPage
         : this.slideWidth;
-      this.offset = width * Math.round(this.offset / width);
+
+      // lock offset to either the nearest page, or to the last slide
+      const lastFullPageOffset =
+        width * Math.floor(this.slideCount / this.currentPerPage - 1);
+      const remainderOffset =
+        lastFullPageOffset +
+        this.slideWidth * (this.slideCount % this.currentPerPage);
+      if (this.offset > (lastFullPageOffset + remainderOffset) / 2) {
+        this.offset = remainderOffset;
+      } else {
+        this.offset = width * Math.round(this.offset / width);
+      }
 
       // clamp the offset between 0 -> maxOffset
       this.offset = Math.max(0, Math.min(this.offset, this.maxOffset));
@@ -811,7 +830,7 @@ export default {
     );
 
     // setup the start event only if touch device or mousedrag activated
-    if (this.isTouch || this.mouseDrag) {
+    if ((this.isTouch && this.touchDrag) || this.mouseDrag) {
       this.$refs["VueCarousel-wrapper"].addEventListener(
         this.isTouch ? "touchstart" : "mousedown",
         this.onStart

docs/public/js/vue-carousel.min.js

@@ -32,8 +32,8 @@ export default {
     paginationCount() {
       return this.carousel && this.carousel.scrollPerPage
         ? this.carousel.pageCount
-        : this.carousel.slideCount
-          ? this.carousel.slideCount - 2
+        : this.carousel.slideCount && this.carousel.currentPerPage
+          ? this.carousel.slideCount - this.carousel.currentPerPage + 1
           : 0;
     }
   },

docs/themes/vue/source/js/vue-carousel.min.js

@@ -91,7 +91,7 @@ export default {
         this.carousel.minSwipeDistance === 0 ||
         Math.abs(deltaX) < this.carousel.minSwipeDistance
       ) {
-        this.$emit("slideClick", Object.assign({}, e.currentTarget.dataset));
+        this.$emit("slideclick", Object.assign({}, e.currentTarget.dataset));
       }
     }
   }
@@ -106,6 +106,7 @@ export default {
   user-select: none;
   backface-visibility: hidden;
   -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   outline: none;
 }