limit pagination

pagination.vue

<script>
import { ref, watch } from 'vue'

export default {
  props: {
    totalPages: Number,
    currentPage: Number,
  },
  setup(props) {
    let numShown = 5;
    const pageNumbers = ref([])

    watch(props, () => {
      numShown = Math.min(numShown, props.totalPages);
      if (props.totalPages <= numShown) {
        pageNumbers.value = [...Array(numShown).keys()].map(i => i + 1);
      } else {
        let first = props.currentPage - Math.floor(numShown / 2);
        first = Math.max(first, 1);
        first = Math.min(first, props.totalPages - numShown + 1);
        pageNumbers.value = [...Array(numShown)].map((k,i) => i + first);
      }
    })

    return {
      pageNumbers
    }
  }
}
</script>

<template lang="pug">
nav
  ul.pagination
    li.page 
      a.page-link(href="javascript:;" @click="$emit('goPrev')") &#60;
    li.page(v-for="page in pageNumbers")
      a.page-link(href="javascript:;" @click="$emit('handleClick', page)" :class="{active: page === currentPage}") {{ page }}
    li.page
      a.page-link(href="javascript:;" @click="$emit('goNext')") &#62;
</template>

<style lang="postcss" scoped>
nav {
  @apply mx-auto mt-20 pb-20;
}

.pagination {
  @apply flex justify-center items-center h-8;
}

.page {
  @apply mx-2 h-8 w-8 text-base rounded-sm shadow-md bg-[#f4f2f3] cursor-pointer;
}

.page-link {
  @apply flex justify-center items-center h-full w-full cursor-pointer;
  @apply hover:bg-[#94a7ae] active:bg-[#94a7ae];
}

.active {
  @apply bg-[#94a7ae];
}
</style>