Merge branch 'v0.17.0' into feat-fix-aria

Author: quinnlangille

.lintstagedrc

@@ -0,0 +1,8 @@
+{
+  "linters": {
+    "src/**/?(*.js|*.vue)": [
+      "prettier-eslint --write",
+      "git add"
+    ]
+  }
+}

README.md

@@ -80,6 +80,7 @@ export default {
 | navigationPrevLabel         | String  | ◀       | Text content of the navigation prev button.                                                                                                                                                                                                                                           |
 | paginationActiveColor       | String  | #000000 | The fill color of the active pagination dot. Any valid CSS color is accepted.                                                                                                                                                                                                         |
 | paginationColor             | String  | #efefef | The fill color of pagination dots. Any valid CSS color is accepted.                                                                                                                                                                                                                   |
+| paginationPosition          | String  | bottom  | The position of pagination dots. Possible values are `bottom`, `bottom-overlay`, `top` and `top-overlay`. The overlay values place the pagination component over the images.                                                                                                          |
 | paginationEnabled           | Boolean | true    | Flag to render pagination component.                                                                                                                                                                                                                                                  |
 | paginationPadding           | Number  | 10      | The padding inside each pagination dot. Pixel values are accepted.                                                                                                                                                                                                                    |
 | paginationSize              | Number  | 10      | The size of each pagination dot. Pixel values are accepted.                                                                                                                                                                                                                           |

dist/vue-carousel.min.js

@@ -221,6 +221,13 @@ The fill color of pagination dots. Any valid CSS color is accepted.
 * **Type**: `String`
 * **Default**: `#efefef`
 
+### paginationPosition
+
+The position of pagination dots. Possible values are `bottom`, `bottom-overlay`, `top` and `top-overlay`. The overlay values place the pagination component over the images.
+
+* **Type**: `String`
+* **Default**: `bottom`
+
 ### paginationPadding
 
 The padding inside each pagination dot. Pixel values are accepted.

docs/source/api/index.md

@@ -1,6 +1,6 @@
 {
   "name": "vue-carousel",
-  "version": "0.16.1",
+  "version": "0.16.2",
   "description": "A flexible, responsive, touch-friendly carousel for Vue.js",
   "main": "dist/vue-carousel.min.js",
   "scripts": {
@@ -10,10 +10,10 @@
     "dev:build": "vue-play build",
     "docs:build": "npm run build && rm -rf ./docs/public && mkdir ./docs/public/ && cd ./docs/public/ && git init && git remote add origin [email protected]:SSENSE/vue-carousel.git && git fetch && git checkout -f gh-pages && cd .. && npm install && ./node_modules/.bin/hexo clean && ./node_modules/.bin/hexo generate",
     "lint": "prettier-eslint --write \"src/**/?(*.js|*.vue)\" || exit 1",
-    "precommit": "npm run lint && npm run test",
+    "precommit": "lint-staged && npm run test",
     "test": "npm run test:client",
-    "test:client": "jest --config tests/client.jest.json --forceExit",
-    "test:client:coverage": "jest --config tests/client.jest.json --coverage --forceExit",
+    "test:client": "jest --config tests/client.jest.json",
+    "test:client:coverage": "jest --config tests/client.jest.json --coverage",
     "test-coverage": "npm run test:client:coverage",
     "updateDocAssets": "cp ./dist/vue-carousel.min.js ./docs/themes/vue/source/js/"
   },
@@ -43,8 +43,8 @@
     "@babel/core": "^7.0.0",
     "@babel/polyfill": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
+    "@vue/test-utils": "^1.0.0-beta.26",
     "babel-loader": "^8.0.1",
-    "chai": "^3.5.0",
     "coveralls": "^3.0.1",
     "css-loader": "^1.0.0",
     "eslint": "^3.19.0",
@@ -62,13 +62,11 @@
     "isparta": "^4.0.0",
     "isparta-loader": "^2.0.0",
     "jest": "^23.5.0",
-    "mocha": "^5.2.0",
+    "lint-staged": "^8.1.0",
     "prettier": "^1.10.2",
     "prettier-eslint": "^8.8.1",
     "prettier-eslint-cli": "^4.7.0",
     "shelljs": "^0.7.5",
-    "sinon": "^1.17.6",
-    "sinon-chai": "^2.8.0",
     "uglifyjs-webpack-plugin": "^1.3.0",
     "vue-loader": "^15.3.0",
     "vue-play-cli": "^1.1.1",

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

@@ -102,6 +102,35 @@ play("Carousel", module)
       h, containerWidth, [h(Carousel, { props: { autoplay: true, autoplayHoverPause: true } }, generateSlideImages(h))]
     )
   )
+  .add("Autoplay, Pause/Resume", {
+    template:
+      `<div style="width: 100%; display: flex; justify-content: center; margin-top: 40px;">
+        <carousel style="width: 500px;" :autoplay="autoplay" :loop="true">
+          <slide v-for="slide in slideCount" :key="slide">
+            <img style="width: 100%;" src="https://res.cloudinary.com/ssenseweb/image/upload/b_white,c_lpad,g_south,h_1086,w_724/c_scale,h_560/v588/171924M176006_1.jpg" />
+          </slide>
+        </carousel>
+        <div style="float: left">
+          <pre>Autoplay Status: {{ autoplay }}</pre>
+          <button v-on:click="toggleAutoplay()">Toggle Autoplay</button>
+        </div>
+      </div>`,
+    components: {
+      Carousel,
+      Slide
+    },
+    data() {
+      return {
+        autoplay: true,
+        slideCount: 8
+      }
+    },
+    methods: {
+      toggleAutoplay() {
+        this.autoplay = !this.autoplay;
+      },
+    }
+  })
   .add("Dynamic, add or remove slides", {
     template:
       `<div style="width: 100%; display: flex; justify-content: center; margin-top: 40px;">
@@ -374,3 +403,12 @@ play("Carousel", module)
       }
     }
   })
+  .add("Pagination position top", h => createContainer(
+    h, containerWidth, [h(Carousel, { props: { paginationPosition: 'top' } }, generateSlideImages(h))]
+  ))
+  .add("Pagination position top-overlay", h => createContainer(
+    h, containerWidth, [h(Carousel, { props: { paginationPosition: 'top-overlay' } }, generateSlideImages(h))]
+  ))
+  .add("Pagination position bottom-overlay", h => createContainer(
+    h, containerWidth, [h(Carousel, { props: { paginationPosition: 'bottom-overlay' } }, generateSlideImages(h))]
+  ))

package.json

@@ -1,5 +1,8 @@
 <template>
-  <section class="VueCarousel">
+  <section
+    class="VueCarousel"
+    v-bind:class="{ 'VueCarousel--reverse': paginationPosition === 'top' }"
+  >
     <div
       class="VueCarousel-wrapper"
       ref="VueCarousel-wrapper"
@@ -163,7 +166,7 @@ export default {
       type: Boolean,
       default: true
     },
-    /*
+    /**
      * Flag to toggle touch dragging
      */
     touchDrag: {
@@ -237,6 +240,14 @@ export default {
       type: Number,
       default: 10
     },
+    /**
+     * Configure the position for the pagination component.
+     * The possible values are: 'bottom', 'top', 'bottom-overlay' and 'top-overlay'
+     */
+    paginationPosition: {
+      type: String,
+      default: "bottom"
+    },
     /**
      * The size of each pagination dot
      * Pixel values are accepted
@@ -340,6 +351,13 @@ export default {
     currentPage(val) {
       this.$emit("pageChange", val);
       this.$emit("input", val);
+    },
+    autoplay(val) {
+      if (val === false) {
+        this.pauseAutoplay();
+      } else {
+        this.restartAutoplay();
+      }
     }
   },
   computed: {
@@ -880,9 +898,15 @@ export default {
 </script>
 <style>
 .VueCarousel {
+  display: flex;
+  flex-direction: column;
   position: relative;
 }
 
+.VueCarousel--reverse {
+  flex-direction: column-reverse;
+}
+
 .VueCarousel-wrapper {
   width: 100%;
   position: relative;

play/index.js

@@ -29,6 +29,17 @@ export default {
   name: "pagination",
   inject: ["carousel"],
   computed: {
+    paginationPositionModifierName() {
+      const { paginationPosition } = this.carousel;
+      // guard to add only required class modifiers
+      if (paginationPosition.indexOf("overlay") < 0) return;
+      return paginationPosition;
+    },
+    paginationPropertyBasedOnPosition() {
+      return this.carousel.paginationPosition.indexOf("top") >= 0
+        ? "bottom"
+        : "top";
+    },
     paginationCount() {
       return this.carousel && this.carousel.scrollPerPage
         ? this.carousel.pageCount
@@ -69,6 +80,16 @@ export default {
   text-align: center;
 }
 
+.VueCarousel-pagination--top-overlay {
+  position: absolute;
+  top: 0;
+}
+
+.VueCarousel-pagination--bottom-overlay {
+  position: absolute;
+  bottom: 0;
+}
+
 .VueCarousel-dot-container {
   display: inline-block;
   margin: 0 auto;

src/Carousel.vue

@@ -1,7 +1,8 @@
 {
   "verbose": true,
+  "rootDir": "../",
   "transform": {
-    ".*\\.(js|vue)$": "<rootDir>/preprocessor.js"
+    ".*\\.(js|vue)$": "<rootDir>/tests/preprocessor.js"
   },
   "testPathIgnorePatterns": [
     "/node_modules/",