facilmap/frontend/src/lib/components/ui/pagination.vue

<script setup lang="ts">
	import { range } from "lodash-es";
	import { computed } from "vue";

	const props = defineProps<{
		pages: number;
		modelValue: number;
	}>();

	const emit = defineEmits<{
		"update:modelValue": [page: number];
	}>();

	function handleClick(page: number): void {
		emit("update:modelValue", page);
	}

	const isPrevDisabled = computed(() => props.modelValue === 0);
	const isNextDisabled = computed(() => props.modelValue === props.pages - 1);
	const pagesFrom = computed(() => Math.max(0, Math.min(props.modelValue - 2, props.pages - 3)));
	const pagesTo = computed(() => Math.min(props.pages - 1, Math.max(props.modelValue + 2, 2)));
	const pageLinks = computed(() => range(pagesFrom.value, pagesTo.value + 1));
	const showEllipsisBefore = computed(() => pagesFrom.value > 0);
	const showEllipsisAfter = computed(() => pagesTo.value < props.pages - 1);
</script>

<template>
	<ul class="pagination justify-content-center">
		<li class="page-item" :class="{ disabled: isPrevDisabled }">
			<a
				:href="isPrevDisabled ? undefined : 'javascript:'"
				class="page-link"
				aria-label="First"
				@click="handleClick(0)"
			>
				<span aria-hidden="true">«</span>
			</a>
		</li>

		<li class="page-item" :class="{ disabled: isPrevDisabled }">
			<a
				:href="isPrevDisabled ? undefined : 'javascript:'"
				class="page-link"
				aria-label="Previous"
				@click="handleClick(props.modelValue - 1)"
			>
				<span aria-hidden="true">‹</span>
			</a>
		</li>

		<li v-if="showEllipsisBefore" class="page-item">
			<span class="page-link">…</span>
		</li>

		<template v-for="page in pageLinks" :key="page">
			<li class="page-item" :class="{ active: page === props.modelValue }">
				<a href="javascript:" class="page-link" @click="handleClick(page)">{{page + 1}}</a>
			</li>
		</template>

		<li v-if="showEllipsisAfter" class="page-item">
			<span class="page-link">…</span>
		</li>

		<li class="page-item" :class="{ disabled: isNextDisabled }">
			<a
				:href="isNextDisabled ? undefined : 'javascript:'"
				class="page-link"
				aria-label="Next"
				@click="handleClick(props.modelValue + 1)"
			>
				<span aria-hidden="true">›</span>
			</a>
		</li>

		<li class="page-item" :class="{ disabled: isNextDisabled }">
			<a
				:href="isNextDisabled ? undefined : 'javascript:'"
				class="page-link"
				aria-label="Last"
				@click="handleClick(pages - 1)"
			>
				<span aria-hidden="true">»</span>
			</a>
		</li>
	</ul>
</template>