Allow to set position for the pagination component (#332)

* feat(config): allow to overlay pagination component

* feat(config): allow to set the pagination position

* docs(config): add pagination position

* docs(): improve paginationPosition description and add to README

Author: am

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.                                                                                                                                                                                                                           |

docs/source/api/index.md

@@ -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.

play/index.js

@@ -370,3 +370,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))]
+  ))

src/Carousel.vue

@@ -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"
@@ -164,7 +167,7 @@ export default {
       type: Boolean,
       default: true
     },
-    /*
+    /**
      * Flag to toggle touch dragging
      */
     touchDrag: {
@@ -238,6 +241,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
@@ -880,9 +891,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;

src/Pagination.vue

@@ -1,5 +1,9 @@
 <template>
-  <div v-show="carousel.pageCount > 1" class="VueCarousel-pagination">
+  <div
+    v-show="carousel.pageCount > 1"
+    class="VueCarousel-pagination"
+    v-bind:class="{ [`VueCarousel-pagination--${paginationPositionModifierName}`]: paginationPositionModifierName }"
+  >
     <ul class="VueCarousel-dot-container" role="tablist">
       <li
         class="VueCarousel-dot"
@@ -11,7 +15,7 @@
         :key="`${page}_${index}`"
         v-on:click="goToPage(index)"
         :style="`
-          margin-top: ${carousel.paginationPadding * 2}px;
+          margin-${paginationPropertyBasedOnPosition}: ${carousel.paginationPadding * 2}px;
           padding: ${carousel.paginationPadding}px;
         `"
       >
@@ -38,6 +42,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
@@ -78,6 +93,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;