Added actors pagination.

components/pagination/pagination.vue

@@ -3,17 +3,19 @@
 		<ul class="pages nolist">
 			<li>
 				<Link
-					:href="`/updates/${routeParams?.scope}/1`"
+					:href="getPath(1)"
 					:class="{ disabled: !hasPrevPage }"
 					class="page first nolink"
+					@click="(event) => go(1, event)"
 				><Icon icon="first2" /></Link>
 			</li>
 
 			<li>
 				<Link
-					:href="hasPrevPage ? `/updates/${routeParams?.scope}/${currentPage - 1}` : null"
+					:href="hasPrevPage ? getPath(currentPage - 1) : null"
 					:class="{ disabled: !hasPrevPage }"
 					class="page prev nolink"
+					@click="(event) => hasPrevPage && go(currentPage - 1, event)"
 				><Icon icon="arrow-left" /></Link>
 			</li>
 		</ul>
@@ -21,14 +23,15 @@
 		<div class="index">
 			<ul class="pages before wrap nolist">
 				<li
-					v-for="page in prevPages"
-					:key="`page-${page}`"
+					v-for="prevPage in prevPages"
+					:key="`page-${prevPage}`"
 				>
 					<Link
-						:href="`/updates/${routeParams?.scope}/${page}`"
+						:href="getPath(prevPage)"
+						:class="{ active: prevPage === currentPage }"
 						class="page nolink"
-						:class="{ active: page === currentPage }"
-					>{{ page }}</Link>
+						@click="(event) => go(prevPage, event)"
+					>{{ prevPage }}</Link>
 				</li>
 			</ul>
 
@@ -40,14 +43,15 @@
 
 			<ul class="pages after wrap nolist">
 				<li
-					v-for="page in nextPages"
-					:key="`page-${page}`"
+					v-for="nextPage in nextPages"
+					:key="`page-${nextPage}`"
 				>
 					<Link
-						:href="`/updates/${routeParams?.scope}/${page}`"
+						:href="getPath(nextPage)"
+						:class="{ active: nextPage === currentPage }"
 						class="page nolink"
-						:class="{ active: page === currentPage }"
-					>{{ page }}</Link>
+						@click="(event) => go(nextPage, event)"
+					>{{ nextPage }}</Link>
 				</li>
 			</ul>
 		</div>
@@ -55,17 +59,19 @@
 		<ul class="pages nolist">
 			<li>
 				<Link
-					:href="hasNextPage ? `/updates/${routeParams?.scope}/${currentPage + 1}` : null"
+					:href="hasNextPage ? getPath(currentPage + 1) : null"
 					:class="{ disabled: !hasNextPage }"
 					class="page next nolink"
+					@click="(event) => hasNextPage && go(currentPage + 1, event)"
 				><Icon icon="arrow-right" /></Link>
 			</li>
 
 			<li>
 				<Link
-					:href="`/updates/${routeParams?.scope}/${pageTotal}`"
+					:href="getPath(pageTotal)"
 					:class="{ disabled: !hasNextPage }"
 					class="page last nolink"
+					@click="(event) => go(pageTotal, event)"
 				><Icon icon="last2" /></Link>
 			</li>
 		</ul>
@@ -73,41 +79,87 @@
 </template>
 
 <script setup>
-import { inject } from 'vue';
+import { computed, inject } from 'vue';
+import { parse } from 'path-to-regexp';
 
-const { routeParams, pageProps } = inject('pageContext');
-const currentPage = Number(routeParams?.page);
-const limit = Number(pageProps.limit) || 30;
-const total = Number(pageProps.total);
-const pageTotal = Math.ceil(total / limit);
-const hasNextPage = currentPage + 1 <= pageTotal;
-const hasPrevPage = currentPage - 1 >= 1;
+const props = defineProps({
+	page: {
+		type: Number,
+		default: null,
+	},
+	total: {
+		type: Number,
+		default: null,
+	},
+	redirect: {
+		type: Boolean,
+		default: true,
+	},
+	includeQuery: {
+		type: Boolean,
+		default: true,
+	},
+});
 
-console.log(routeParams);
+const emit = defineEmits(['navigation']);
 
-const prevPages = Array.from({ length: 4 }, (value, index) => {
-	const page = currentPage - index - 1;
+const pageContext = inject('pageContext');
+const { routeParams, urlParsed, pageProps } = pageContext;
+
+const currentPage = computed(() => props.page || Number(routeParams?.page));
+
+const limit = computed(() => props.limit || Number(pageProps.limit) || 30);
+const total = computed(() => props.total || Number(pageProps.total));
+const pageTotal = computed(() => Math.ceil(total.value / limit.value));
+
+const hasNextPage = computed(() => currentPage.value + 1 <= pageTotal.value);
+const hasPrevPage = computed(() => currentPage.value - 1 >= 1);
+
+const prevPages = computed(() => Array.from({ length: 4 }, (value, index) => {
+	const page = currentPage.value - index - 1;
 
 	if (page < 1) {
 		return null;
 	}
 
 	return page;
-}).filter(Boolean);
+}).filter(Boolean));
 
-const nextPages = Array.from({ length: 4 }, (value, index) => {
-	const page = currentPage + index + 1;
+const nextPages = computed(() => Array.from({ length: 4 }, (value, index) => {
+	const page = currentPage.value + index + 1;
 
-	if (page > pageTotal) {
+	if (page > pageTotal.value) {
 		return null;
 	}
 
 	return page;
-}).filter(Boolean);
+}).filter(Boolean));
 
-console.log(total, limit, currentPage);
-console.log(prevPages);
-console.log(nextPages);
+function go(page, event) {
+	if (!props.redirect) {
+		event.preventDefault();
+
+		history.pushState({}, '', event.target.href); // eslint-disable-line no-restricted-globals
+		currentPage.value = page;
+	}
+
+	emit('navigation', {
+		href: event.target.href,
+		page,
+	});
+}
+
+function getPath(page) {
+	const path = parse(routeParams.path)
+		.map((segment) => (segment.name === 'page' ? String(page) : routeParams[segment.name] || segment))
+		.join('/');
+
+	if (props.includeQuery && urlParsed.searchOriginal) {
+		return `${path}${urlParsed.searchOriginal}`;
+	}
+
+	return path;
+}
 </script>
 
 <style scoped>
@@ -115,6 +167,7 @@ console.log(nextPages);
 	height: 5rem;
 	display: flex;
 	justify-content: center;
+	box-sizing: border-box;
 	padding: 1rem;
 	font-size: 0;
 	overflow: hidden;