All files / src Pagination.vue

88% Statements 22/25
75% Branches 18/24
80% Functions 8/10
88.24% Lines 15/17
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 1313x     3x     3x 3x         27x 27x       20x     48x               237x     237x       3x   3x 3x 79x   3x                                                                                                                                                                                  
<template>
  <div
    v-show="carousel.pageCount > 1"
    class="VueCarousel-pagination"
    v-bind:class="{ [`VueCarousel-pagination--${paginationPositionModifierName}`]: paginationPositionModifierName }"
  >
    <div class="VueCarousel-dot-container" role="tablist" :style="`margin-top: ${carousel.paginationPadding * 2}px;`">
      <button
        v-for="(page, index) in paginationCount"
        :key="`${page}_${index}`"
        class="VueCarousel-dot"
        aria-hidden="false"
        role="tab"
      E  :title="getDotTitle(index)"
        :value="getDotTitle(index)"
        :aria-label="getDotTitle(index)"
        :aria-selected="isCurrentDot(index) ? 'true' : 'false'"
        v-bind:class="{ 'VueCarousel-dot--active': isCurrentDot(index) }"
        v-on:click="goToPage(index)"
        :style="`
          margin-${paginationPropertyBasedOnPosition}: ${carousel.paginationPadding * 2}px;
          padding: ${carousel.paginationPadding}px;
          width: ${carousel.paginationSize}px;
          height: ${carousel.paginationSize}px;
          background-color: ${isCurrentDot(index) ? carousel.paginationActiveColor : carousel.paginationColor};
        `"
      ></button>
    </div>
  </div>
</template>
 
<script>
export default {
  name: "pagination",
  inject: ["carousel"],
  computed: {
    paginationPositionModifierName() {
E      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
        : this.carousel.slideCount && this.carousel.currentPerPage
          ? this.carousel.slideCount - this.carousel.currentPerPage + 1
          : 0;
    }
  },
  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.carousel.currentPage;
    },
 
    /**
     * Generate dot title
     * @param {number} index - dot index
     * @return {string}
     */
    getDotTitle(index) {
      return this.carousel.$children[index].title
        ? this.carousel.$children[index].title
        : `Item ${index}`;
    }
  }
};
</script>
 
<style scoped>
.VueCarousel-pagination {
  width: 100%;
  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;
  padding: 0;
}
 
.VueCarousel-dot {
  display: inline-block;
  cursor: pointer;
  appearance: none;
  border: none;
  background-clip: content-box;
  box-sizing: content-box;
  padding: 0;
  border-radius: 100%;
  outline: none;
}
 
.VueCarousel-dot:focus {
  outline: 1px solid lightblue;
}
</style>