/home/henzagold/site/components/ Current File: //home/henzagold/site/components/Pagination.vue
<template>
  <ul class="pagination">
    <li class="page-item page-first page-controller">
      <a class="page-link" @click="onClickFirstPage" v-if="totalPages>1">
        <svg viewBox="0 0 24 24">
          <path fill="currentColor"
                d="M5.59,7.41L7,6L13,12L7,18L5.59,16.59L10.17,12L5.59,7.41M11.59,7.41L13,6L19,12L13,18L11.59,16.59L16.17,12L11.59,7.41Z"/>
        </svg>
      </a>
    </li>
    <li class="page-item page-increment page-controller">
      <a class="page-link" @click="onClickPreviousPage" v-if="totalPages>1">
        <svg viewBox="0 0 24 24">
          <path fill="currentColor" d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"/>
        </svg>
      </a>
    </li>

    <li v-for="page in pages" :class="['page-item',isPageActive(page.name) ? 'active':null]">
      <a class="page-link" @click="onClickPage(page.name)" :disabled="page.isDisabled">{{ page.name }}</a>
    </li>

    <li class="page-item page-append page-controller">
      <a class="page-link" @click="onClickNextPage" v-if="totalPages>1">
        <svg viewBox="0 0 24 24">
          <path fill="currentColor" d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z"/>
        </svg>
      </a>
    </li>

    <li class="page-item page-last page-controller">
      <a class="page-link" @click="onClickLastPage" v-if="totalPages>1">
        <svg viewBox="0 0 24 24">
          <path fill="currentColor"
                d="M18.41,7.41L17,6L11,12L17,18L18.41,16.59L13.83,12L18.41,7.41M12.41,7.41L11,6L5,12L11,18L12.41,16.59L7.83,12L12.41,7.41Z"/>
        </svg>
      </a>
    </li>
  </ul>
</template>


<script>
export default {
  data() {
    return {}
  },
  props: {
    maxVisibleButtons: {
      type: Object,
      required: false,
       default() {
            return {
              sm: 3,
              md: 5,
              lg: 7,
            }
        }
      },
    totalPages: {
      type: Number,
      required: true
    },
    value: {
      type: Number,
      required: true,
    },
  },
  watch: {},
  computed: {
    // for responsive pages
    pageSize() {
      if (this.$store.state.windowWidth >= 1080) {
        return this.maxVisibleButtons.lg
      } else if (this.$store.state.windowWidth > 768) {
        return this.maxVisibleButtons.md
      } else {
        return this.maxVisibleButtons.sm
      }
    },
    mode() {
      if (this.pageSize % 2 === 0) {
        return (this.pageSize / 2) - 1
      } else {
        return (this.pageSize - 1) / 2
      }
    },

    startPage() {
      if (this.value === 1) {
        return 1;
      } else if (this.value === this.totalPages) {

        /* if (this.totalPages>this.pageSize)
         {
           return this.totalPages - this.pageSize + 1;
         }
         return 1;*/
        return Math.max(this.value - (this.pageSize - 1), 1)

      } else if (this.mode + this.value > this.totalPages) return Math.max(this.totalPages - (this.pageSize - 1), 1)
      return Math.max(this.value - (this.mode), 1)

    },
    endPage() {
      if (this.mode + this.value > this.totalPages) return this.totalPages
      return Math.min(this.startPage + (this.pageSize - 1), this.totalPages);
    },
    pages() {

      const range = [];

      for (let i = this.startPage; i <= this.endPage; i += 1) {
        range.push({
          name: i,
          isDisabled: i === this.value
        });

      }
      return range;
    },
    /*isInFirstPage() {
      return this.value === 1;
    },
    isInLastPage() {
      return this.value === this.totalPages;
    },*/
  },
  methods: {
    onClickFirstPage() {
      this.$emit('input', 1);
      this.$emit('pagechanged', 1);
    },
    onClickPreviousPage() {
      if (this.value > 1)
        this.$emit('input', this.value - 1);
      this.$emit('pagechanged', this.value - 1);
    },
    onClickPage(page) {
      this.$emit('input', page);
      this.$emit('pagechanged', page);
    },
    onClickNextPage() {
      if (this.value < this.totalPages) {
        this.$emit('input', this.value + 1);
        this.$emit('pagechanged', this.value + 1);
      }
    },
    onClickLastPage() {

      this.$emit('input', this.totalPages);
      this.$emit('pagechanged', this.totalPages);
    },
    isPageActive(page) {
      return this.value === page;
    },
  },
  mounted() {

  }
}
</script>

<style>
li {
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.page-item:first-child .page-link {
  margin-left: 15px !important;
}

@media (max-width: 1199.98px) {
  .page-append, .page-increment {
    display: none;
  }
}

.page-controller .page-link {
  padding: 12px;
}

.page-controller .page-link svg {
  width: 24px;
  height: 24px;
}

@media (max-width: 575px) {
  .page-controller .page-link {
    padding: 10px;
  }

  .page-controller .page-link svg {
    width: 14px;
    height: 14px;
  }
}
</style>