backend/resources/js/Components/Supervisor/Pagination.vue

<script setup>
import { filterSelectClass } from '@/Components/Supervisor/ui.js';
import { listPerPageOptions } from '@/Components/Supervisor/useListFilters.js';
import { Link } from '@inertiajs/vue3';

defineProps({
    paginator: {
        type: Object,
        required: true,
    },
    perPage: {
        type: [Number, String],
        default: 10,
    },
});

const emit = defineEmits(['update:perPage']);

const formatLabel = (label) => {
    const text = String(label)
        .replace(/&laquo;/g, '‹')
        .replace(/&raquo;/g, '›')
        .trim();

    if (/previous/i.test(text)) {
        return 'Précédent';
    }

    if (/next/i.test(text)) {
        return 'Suivant';
    }

    return text;
};

const onPerPageChange = (event) => {
    emit('update:perPage', Number(event.target.value));
};
</script>

<template>
    <div
        v-if="paginator.total > 0"
        class="flex flex-wrap items-center justify-between gap-x-6 gap-y-3 border-t border-slate-100 px-6 py-4"
    >
        <p class="shrink-0 text-sm text-slate-500">
            {{ paginator.from ?? 0 }}–{{ paginator.to ?? 0 }}
            <span class="text-slate-400">sur</span>
            {{ paginator.total }}
            <span class="text-slate-400">résultat(s)</span>
        </p>

        <div class="flex flex-wrap items-center gap-4">
            <label class="flex shrink-0 items-center gap-2 text-sm text-slate-600">
                <span class="whitespace-nowrap">Lignes par page</span>
                <select
                    :value="perPage"
                    :class="filterSelectClass"
                    @change="onPerPageChange"
                >
                    <option v-for="option in listPerPageOptions" :key="option" :value="option">
                        {{ option }}
                    </option>
                </select>
            </label>

            <nav
                v-if="paginator.last_page > 1"
                class="flex flex-wrap items-center gap-1"
            >
                <template v-for="link in paginator.links" :key="link.label">
                    <Link
                        v-if="link.url"
                        :href="link.url"
                        class="rounded-lg px-3 py-1.5 text-sm font-medium transition"
                        :class="
                            link.active
                                ? 'bg-indigo-600 text-white shadow-sm'
                                : 'text-slate-600 hover:bg-slate-100'
                        "
                        preserve-state
                    >
                        {{ formatLabel(link.label) }}
                    </Link>
                    <span
                        v-else
                        class="cursor-not-allowed rounded-lg px-3 py-1.5 text-sm font-medium text-slate-300"
                        :class="link.active ? 'bg-indigo-600 text-white shadow-sm' : ''"
                    >
                        {{ formatLabel(link.label) }}
                    </span>
                </template>
            </nav>
        </div>
    </div>
</template>