traxxx/assets/components/pagination/pagination.vue

<template>
	<div class="pagination">
		<span
			v-show="pageNumber > 1"
			class="cursors"
		>
			<router-link
				class="pagination-button cursor"
				:to="{ params: { pageNumber: 1 } }"
			><Icon icon="first2" /></router-link>

			<router-link
				class="pagination-button cursor"
				:to="{ params: { pageNumber: pageNumber - 1 } }"
			><Icon icon="arrow-left" /></router-link>
		</span>

		<span
			v-show="pageNumber === 1"
			class="cursors"
		>
			<span class="pagination-button cursor disabled"><Icon icon="first2" /></span>
			<span class="pagination-button cursor disabled"><Icon icon="arrow-left" /></span>
		</span>

		<span class="pages">
			<router-link
				v-for="pageX in pageCount"
				:key="`page-${pageX}`"
				:to="{ params: { pageNumber: pageX } }"
				:class="{ active: pageX === pageNumber }"
				class="pagination-button page"
			> {{ pageX }} </router-link>
		</span>

		<span
			v-show="pageNumber < pageCount"
			class="cursors"
		>
			<router-link
				class="pagination-button cursor"
				:to="{ params: { pageNumber: pageNumber + 1 } }"
			><Icon icon="arrow-right" /></router-link>

			<router-link
				class="pagination-button cursor"
				:to="{ params: { pageNumber: pageCount } }"
			><Icon icon="last2" /></router-link>
		</span>

		<span
			v-show="pageNumber === pageCount"
			class="cursors"
		>
			<span class="pagination-button cursor disabled"><Icon icon="arrow-right" /></span>
			<span class="pagination-button cursor disabled"><Icon icon="last2" /></span>
		</span>
	</div>
</template>

<script>
function pageNumber() {
	return Number(this.$route.params.pageNumber) || 1;
}

function pageCount() {
	const count = Math.max(Math.ceil(this.itemsTotal / this.itemsPerPage), 1);

	return count;
}

export default {
	props: {
		itemsTotal: {
			type: Number,
			default: 0,
		},
		itemsPerPage: {
			type: Number,
			default: 10,
		},
	},
	computed: {
		pageNumber,
		pageCount,
	},
};
</script>

<style lang="scss" scoped>
.pagination {
	display: flex;
	justify-content: center;
}

.pagination-top {
	margin: 0 0 1rem 0;
}

.pagination-bottom {
	margin: .5rem 0 1rem 0;
}

.pagination-button {
	width: 2.5rem;
	height: 2rem;
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	color: var(--shadow);
	font-size: 1rem;
	font-weight: bold;
	text-decoration: none;

	.icon {
		width: .8rem;
		height: .8rem;
		margin: 0 0 .125rem 0;
		fill: var(--shadow);
	}

	&:hover:not(.active):not(.disabled) {
		color: var(--text);

		.icon {
			fill: var(--text);
		}
	}

	&.active {
		color: var(--primary);
	}

	&.disabled {
		color: var(--shadow-weak);

		.icon {
			fill: var(--shadow-weak);
		}
	}
}

.pages,
.cursors {
	flex-shrink: 0;
}

.cursors {
	margin: 0 .5rem;
	font-size: 0;
}
</style>