47 lines
1.4 KiB
Vue
47 lines
1.4 KiB
Vue
<script setup lang="ts">
|
||
import { Link } from '@inertiajs/vue3';
|
||
import { computed } from 'vue';
|
||
|
||
/** One entry of Laravel's paginator `links` array. */
|
||
export interface PaginatorLink {
|
||
url: string | null;
|
||
label: string;
|
||
active: boolean;
|
||
}
|
||
|
||
const props = defineProps<{
|
||
links: PaginatorLink[];
|
||
/** Total results, used for the "showing x of y" line. */
|
||
total?: number;
|
||
}>();
|
||
|
||
/** Laravel emits the prev/next labels as HTML entities. */
|
||
const cleaned = computed(() =>
|
||
props.links.map((link) => ({
|
||
...link,
|
||
label: link.label.replace('«', '‹').replace('»', '›'),
|
||
})),
|
||
);
|
||
</script>
|
||
|
||
<template>
|
||
<nav v-if="links.length > 3" class="mt-4 flex flex-wrap justify-end gap-1">
|
||
<component
|
||
:is="link.url ? Link : 'span'"
|
||
v-for="(link, index) in cleaned"
|
||
:key="index"
|
||
:href="link.url ?? undefined"
|
||
preserve-scroll
|
||
class="inline-flex min-w-9 items-center justify-center rounded-md border px-3 py-1.5"
|
||
:class="[
|
||
link.active
|
||
? 'border-primary-600 bg-primary-600 text-white'
|
||
: 'border-slate-200 bg-white text-slate-600',
|
||
link.url ? 'hover:border-primary-600 hover:text-primary-600' : 'cursor-default opacity-50',
|
||
]"
|
||
>
|
||
{{ link.label }}
|
||
</component>
|
||
</nav>
|
||
</template>
|