Release: v0.6.10 (SSENSE#159)

* remove using $parents methods in navigation

* add jsdoc for navigation.vue

* Add jsdoc comment for handleNavigation method

* Update snapshots, add some semantics for navigaton and pagination, add some jsdoc

* Remove scoped styles

* Return scoped styles in pagination and navigation

* Add vendor specific style prefixes (fixes IE10 support)

* fixed pageChange event to work when swiped (SSENSE#152)

* fixed pageChange event

* fixed submodule bug

* Fix backward advancePage w/ padding (SSENSE#110)

* Fix backward advancePage w/ padding

If you use a padding on the carousel items, the currentPage variable becomes a float number which goes < 0. This made impossibile to go back to the first item (it was in stuck with the 2nd slide). Using Math.ceil on the page number fixed the issue.

* docs(standard): Update README.md

- add table with configuration options (property, type, default, description)
- add some properties in demo HTML markup to show how configuration is done

* Update README.md

Changed CamelCase to kebab-case in sample in ReadMe.md (because its not working).
https://vuejs.org/v2/guide/components.html#camelCase-vs-kebab-case

* unused duplicated methods

* remove unusded comment

postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    'autoprefixer': {}
+  }
+}

src/Carousel.vue

@@ -1,11 +1,14 @@
 <template>
-  <div class="VueCarousel">
+  <section class="VueCarousel" >
     <div class="VueCarousel-wrapper" ref="VueCarousel-wrapper">
       <div
         class="VueCarousel-inner"
+        role="listbox"
         v-bind:style="`
           transform: translate3d(${currentOffset}px, 0, 0);
           transition: ${!dragging ? transitionStyle : 'none'};
+          ms-flex-preferred-size: ${slideWidth}px;
+          webkit-flex-basis: ${slideWidth}px;
           flex-basis: ${slideWidth}px;
           visibility: ${slideWidth ? 'visible' : 'hidden'};
           padding-left: ${padding}px;
@@ -26,7 +29,7 @@
       :prevLabel="navigationPrevLabel"
       @navigationclick="handleNavigation"
     ></navigation>
-  </div>
+  </section>
 </template>
 
 <script>
@@ -220,6 +223,9 @@ export default {
   watch: {
     navigateTo(val) {
       if (val !== this.currentPage) this.goToPage(val);
+    },
+    currentPage(val) {
+      this.$emit("pageChange", val);
     }
   },
 
@@ -367,7 +373,7 @@ export default {
       }
     },
     handleNavigation(direction) {
-      this.$emit("navigationclick", direction);
+      this.advancePage(direction);
     },
     /**
      * Stop listening to mutation changes
@@ -418,7 +424,6 @@ export default {
           this.maxOffset
         );
         this.currentPage = page;
-        this.$emit("pageChange", this.currentPage);
       }
     },
     /**
@@ -448,7 +453,7 @@ export default {
      * Trigger actions when mouse is released
      * @param  {Object} e The event object
      */
-
+     
     onEnd(e) {
       // compute the momemtum speed
       const eventPosX = this.isTouch ? e.changedTouches[0].clientX : e.clientX;

src/Navigation.vue

@@ -1,17 +1,23 @@
 <template>
   <div class="VueCarousel-navigation">
-    <a href="#"
+    <button
+      type="button"
+      aria-label="Previous page"
+      role="button"
       class="VueCarousel-navigation-button VueCarousel-navigation-prev"
       v-on:click.prevent="triggerPageAdvance('backward')"
       v-bind:class="{ 'VueCarousel-navigation--disabled': !canAdvanceBackward }"
       v-bind:style="`padding: ${clickTargetSize}px; margin-right: -${clickTargetSize}px;`"
-      v-html="prevLabel"></a>
-    <a href="#"
+      v-html="prevLabel"></button>
+    <button
+      type="button"
+      aria-label="Next page"
+      role="button"
       class="VueCarousel-navigation-button VueCarousel-navigation-next"
       v-on:click.prevent="triggerPageAdvance()"
       v-bind:class="{ 'VueCarousel-navigation--disabled': !canAdvanceForward }"
       v-bind:style="`padding: ${clickTargetSize}px; margin-left: -${clickTargetSize}px;`"
-      v-html="nextLabel"></a>
+      v-html="nextLabel"></button>
   </div>
 </template>
 
@@ -20,6 +26,9 @@ export default {
   name: "navigation",
   data() {
     return {
+      /**
+       * link on Carousel
+       */
       parentContainer: this.$parent
     };
   },
@@ -47,20 +56,31 @@ export default {
     }
   },
   computed: {
+    /**
+     * @return {Boolean} Can the slider move forward?
+     */
     canAdvanceForward() {
       return this.parentContainer.canAdvanceForward || false;
     },
+    /**
+     * @return {Boolean} Can the slider move backward?
+     */
     canAdvanceBackward() {
       return this.parentContainer.canAdvanceBackward || false;
     }
   },
   methods: {
+    /**
+     * Trigger page change on +/- 1 depending on the direction
+     * @param {"backward"} [direction]
+     * @return {void}
+     */
     triggerPageAdvance(direction) {
-      if (direction) {
-        this.$parent.advancePage(direction);
-      } else {
-        this.$parent.advancePage();
-      }
+      /**
+       * @event paginationclick
+       * @type {string}
+       */
+      this.$emit("navigationclick", direction);
     }
   }
 };
@@ -73,6 +93,12 @@ export default {
   box-sizing: border-box;
   color: #000;
   text-decoration: none;
+  appearance: none;
+  border: none;
+  background-color: transparent;
+  padding: 0;
+  cursor: pointer;
+  outline: none;
 }
 
 .VueCarousel-navigation-next {

src/Pagination.vue

@@ -1,26 +1,33 @@
 <template>
   <div v-show="parentContainer.pageCount > 1" class="VueCarousel-pagination">
-    <div class="VueCarousel-dot-container">
-      <div
+    <ul class="VueCarousel-dot-container" role="tablist">
+      <li
         class="VueCarousel-dot"
-        v-bind:class="{ 'VueCarousel-dot--active': (index === parentContainer.currentPage) }"
+        aria-hidden="false"
+        role="presentation"
+        :aria-selected="isCurrentDot(index) ? 'true' : 'false'"
+        v-bind:class="{ 'VueCarousel-dot--active': isCurrentDot(index) }"
         v-for="(page, index) in parentContainer.pageCount"
+        :key="index"
         v-on:click="goToPage(index)"
         :style="`
           margin-top: ${parentContainer.paginationPadding * 2}px;
           padding: ${parentContainer.paginationPadding}px;
         `"
       >
-        <div
-          class="VueCarousel-dot-inner"
+        <button
+          type="button"
+          role="button"
+          class="VueCarousel-dot-button"
+          :tabindex="index"
           :style="`
             width: ${parentContainer.paginationSize}px;
             height: ${parentContainer.paginationSize}px;
-            background: ${(index === parentContainer.currentPage) ? parentContainer.paginationActiveColor : parentContainer.paginationColor};
+            background: ${isCurrentDot(index) ? parentContainer.paginationActiveColor : parentContainer.paginationColor};
           `"
-        ></div>
-      </div>
-    </div>
+        ></button>
+      </li>
+    </ul>
   </div>
 </template>
 
@@ -29,12 +36,33 @@ export default {
   name: "pagination",
   data() {
     return {
+      /**
+       * link on Carousel
+       */
       parentContainer: this.$parent
     };
   },
   methods: {
+    /**
+     * Change page by index
+     * @param {number} index
+     * return {void}
+     */
     goToPage(index) {
+      /**
+       * @event paginationclick
+       * @type {number}
+       */
       this.$emit("paginationclick", index);
+    },
+
+    /**
+     * Check on current dot
+     * @param {number} index - dot index
+     * @return {boolean}
+     */
+    isCurrentDot(index) {
+      return index === this.parentContainer.currentPage;
     }
   }
 };
@@ -43,21 +71,31 @@ export default {
 <style scoped>
 .VueCarousel-pagination {
   width: 100%;
-  float: left;
   text-align: center;
 }
 
 .VueCarousel-dot-container {
   display: inline-block;
   margin: 0 auto;
+  padding: 0;
 }
 
 .VueCarousel-dot {
-  float: left;
+  display: inline-block;
   cursor: pointer;
 }
 
-.VueCarousel-dot-inner {
+.VueCarousel-dot-button {
+  appearance: none;
+  border: none;
+  background-color: transparent;
+  padding: 0;
   border-radius: 100%;
+  outline: none;
+  cursor: pointer;
+}
+
+.VueCarousel-dot-button:focus {
+  outline: 1px solid lightblue;
 }
 </style>

src/Slide.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="VueCarousel-slide">
+  <div class="VueCarousel-slide" tabindex="-1">
     <slot></slot>
   </div>
 </template>
@@ -28,5 +28,6 @@ export default {
   user-select: none;
   backface-visibility: hidden;
   -webkit-touch-callout: none;
+  outline: none;
 }
 </style>