vue pagination component

vuePagination.vue

<template>
    <div class="row mtp-3">
        <div class="block-27">
            <ul class="pagination-ul">
                <li @click="prev" class="cursor">
                    <a>
                        <img
                            class="chevron_right_pag"
                            src="/assets/img/chevron_big_right.png"
                            alt="right"
                            width="18"
                            height="18"
                        />
                    </a>
                </li>
                <li
                    v-for="pageNumber in pages"
                    :class="{
                        active: pageNumber === currentPage,
                        cursor: true,
                    }"
                    @click="setCurrentPage(pageNumber)"
                >
                    <span>{{ pageNumber === 0 ? "..." : pageNumber }}</span>
                </li>
                <li @click="next" class="cursor">
                    <a>
                        <img
                            class="chevron_left_pag"
                            src="/assets/img/chevron_big_left.png"
                            alt="right"
                            width="18"
                            height="18"
                        />
                    </a>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
const generateArray = (from, to) => {
    return Array.from({length: to - from + 1}).map((_, i) => i + from)
}

export default {
    props: {
        currentPage: {
            default: 1,
            validator: (val) => typeof parseInt(val) === "number",
        },
        total: {
            default: 0,
            validator: (val) => typeof parseInt(val) === "number",
        },
        pageSize: {
            default: 0,
            validator: (val) => typeof parseInt(val) === "number",
        },
    },
    methods: {
        generateArray(from, to) {
            return generateArray(from, to);
        },
        next() {
            if (this.currentPage !== this.numberOfPages) {
                this.setCurrentPage(this.currentPage + 1);
            }
        },
        prev() {
            if (this.currentPage > 1) {
                this.setCurrentPage(this.currentPage - 1);
            }
        },
        setCurrentPage(page) {
            if (page !== 0) {
                this.$emit("setCurrentPage", page);
            }
        },
    },
    computed: {
        pages() {
            if (this.numberOfPages <= 5)
                return Array.from({ length: this.numberOfPages }).map(
                    (_, i) => i + 1
                );
            let arr = null;
            // if we are on the page that is before last page
            if (this.currentPage === this.numberOfPages - 1) {
                arr = this.generateArray(
                    this.currentPage - 2,
                    this.currentPage
                );
            } else if (this.currentPage === 1) {
                arr = this.generateArray(
                    this.currentPage,
                    this.currentPage + 2
                );
            } else if (this.currentPage !== this.numberOfPages) {
                // if we are not on the last page show one after and one before the currentPage
                arr = this.generateArray(
                    this.currentPage - 1,
                    this.currentPage + 1
                );
            } else {
                // if we are on the last page then show the three items before it
                arr = this.generateArray(
                    this.currentPage - 3,
                    this.currentPage - 1
                );
            }
            arr.push(0); // 0 will be replaced with the dots "..."
            arr.push(this.numberOfPages); // add the last page
            return arr;
        },

        maxNumberOfPaginationItems() {
            return 5;
        },
        numberOfPages() {
            if (this.pageSize == 0) return 0;
            return Math.ceil(this.total / this.pageSize);
        },
        // numberOfItemsToRender(){
        //     if(this.numberOfPages - this.currentPage > this.maxNumberOfPaginationItems){
        //         return 4
        //     } else {
        //         return this.numberOfPages - this.currentPage + 1
        //     }
        // },
    },
};
</script>

<style>
@media screen and (min-width: 321px) {
    .pagination-ul li {
        margin: 0.25rem;
    }
}
</style>