All files / src Pagination.vue

93.33% Statements 14/15
62.5% Branches 5/8
80% Functions 4/5
100% Lines 8/8
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 583x     3x     3x     13x           3x 3x 31x 3x                                                                              
<template>
  <div v-show="parentContainer.pageCount > 1" class="VueCarousel-pagination">
    <div class="VueCarousel-dot-container">
      <div
        class="VueCarousel-dot"
        v-for="(page, index) in parentContainer.pageCount"
        v-on:click="parentContainer.goToPage(index)"
        :style="`
          margin-top: ${parentContainer.paginationPadding * 2}px;
          padding: ${parentContainer.paginationPadding}px;
        `"
      >
        <div
          class="VueCarousel-dot-inner"
          :style="`
E            width: ${parentContainer.paginationSize}px;
            height: ${parentContainer.paginationSize}px;
            background: ${(index === parentContainer.currentPage) ? parentContainer.paginationActiveColor : parentContainer.paginationColor};
          `"
        ></div>
      </div>
    </div>
  </div>
</template>
 
<script>
  export default {
    name: "pagination",
    data() {
      return {
        parentContainer: this.$parent,
      }
    },
  }
</script>
 
<style scoped>
  .VueCarousel-pagination {
    width: 100%;
    float: left;
    text-align: center;
  }
 
  .VueCarousel-dot-container {
    display: inline-block;
    margin: 0 auto;
  }
 
  .VueCarousel-dot {
    float: left;
    cursor: pointer;
  }
 
  .VueCarousel-dot-inner {
    border-radius: 100%;
  }
</style>