primevue-mirror/components/lib/paginator/PageLinks.vue

<template>
    <span :class="cx('pages')" v-bind="ptm('pages')">
        <button
            v-for="pageLink of value"
            :key="pageLink"
            v-ripple
            :class="cx('page', { pageLink })"
            type="button"
            :aria-label="ariaPageLabel(pageLink)"
            :aria-current="pageLink - 1 === page ? 'page' : undefined"
            @click="onPageLinkClick($event, pageLink)"
            v-bind="getPTOptions(pageLink - 1, 'page')"
            :data-p-highlight="pageLink - 1 === page"
        >
            {{ pageLink }}
        </button>
    </span>
</template>

<script>
import BaseComponent from 'primevue/basecomponent';
import Ripple from 'primevue/ripple';

export default {
    name: 'PageLinks',
    hostName: 'Paginator',
    extends: BaseComponent,
    inheritAttrs: false,
    emits: ['click'],
    props: {
        value: Array,
        page: Number
    },
    methods: {
        getPTOptions(pageLink, key) {
            return this.ptm(key, {
                context: {
                    active: pageLink === this.page
                }
            });
        },
        onPageLinkClick(event, pageLink) {
            this.$emit('click', {
                originalEvent: event,
                value: pageLink
            });
        },
        ariaPageLabel(value) {
            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.pageLabel.replace(/{page}/g, value) : undefined;
        }
    },
    directives: {
        ripple: Ripple
    }
};
</script>