FleetCart/Themes/Storefront/resources/assets/public/js/components/VPagination.vue

<template>
    <ul class="pagination">
        <li class="page-item" :class="{ disabled: hasFirst }">
            <button class="page-link" :disabled="hasFirst" @click="prev">
                <i class="las la-angle-left"></i>
            </button>
        </li>

        <li v-show="rangeFirstPage !== 1" class="page-item">
            <button class="page-link" @click="goto(1)">1</button>
        </li>

        <li v-show="rangeFirstPage === 3" class="page-item">
            <button class="page-link" @click="goto(2)">2</button>
        </li>

        <li
            v-show="
                rangeFirstPage !== 1 &&
                rangeFirstPage !== 2 &&
                rangeFirstPage !== 3
            "
            class="page-item disabled"
        >
            <span class="page-link">...</span>
        </li>

        <li
            v-for="page in range"
            :key="page"
            class="page-item"
            :class="{ active: hasActive(page) }"
        >
            <button class="page-link" @click="goto(page)">
                {{ page }}
            </button>
        </li>

        <li
            v-show="
                rangeLastPage !== totalPage &&
                rangeLastPage !== totalPage - 1 &&
                rangeLastPage !== totalPage - 2
            "
            class="page-item disabled"
        >
            <span class="page-link">...</span>
        </li>

        <li v-show="rangeLastPage === totalPage - 2" class="page-item">
            <button class="page-link" @click="goto(totalPage - 1)">
                {{ totalPage - 1 }}
            </button>
        </li>

        <li v-if="rangeLastPage !== totalPage" class="page-item">
            <button class="page-link" @click="goto(totalPage)">
                {{ totalPage }}
            </button>
        </li>

        <li class="page-item" :class="{ disabled: hasLast }">
            <button
                class="page-link"
                :class="{ disabled: hasLast }"
                @click="next"
            >
                <i class="las la-angle-right"></i>
            </button>
        </li>
    </ul>
</template>

<script>
export default {
    props: {
        totalPage: Number,
        currentPage: Number,
        rangeMax: {
            type: Number,
            default: 3,
        },
    },

    mounted() {
        if (this.currentPage > this.totalPage) {
            this.$emit("page-changed", this.totalPage);
        }
    },

    computed: {
        rangeFirstPage() {
            if (this.currentPage === 1) {
                return 1;
            }

            if (this.currentPage === this.totalPage) {
                if (this.totalPage - this.rangeMax < 0) {
                    return 1;
                }

                return this.totalPage - this.rangeMax + 1;
            }

            return this.currentPage - 1;
        },

        rangeLastPage() {
            return Math.min(
                this.rangeFirstPage + this.rangeMax - 1,
                this.totalPage
            );
        },

        range() {
            let rangeList = [];

            for (
                let page = this.rangeFirstPage;
                page <= this.rangeLastPage;
                page += 1
            ) {
                rangeList.push(page);
            }

            return rangeList;
        },

        hasFirst() {
            return this.currentPage === 1;
        },

        hasLast() {
            return this.currentPage === this.totalPage;
        },
    },

    methods: {
        prev() {
            this.$emit("page-changed", this.currentPage - 1);
        },

        next() {
            this.$emit("page-changed", this.currentPage + 1);
        },

        goto(page) {
            if (this.currentPage !== page) {
                this.$emit("page-changed", page);
            }
        },

        hasActive(page) {
            return page === this.currentPage;
        },
    },
};
</script>