add pagination

src/components/canvas-scan/preview/PreviewCompare.vue

@@ -1,19 +1,28 @@
 <template>
- <SideBySidePreview>
- <template #pdf>
- <ImagePreview :image="image.blob" v-if="image" />
- </template>
- <template #scan>
- <ImagePreview :image="scanImage.blob" v-if="scanImage" />
- </template>
- </SideBySidePreview>
+ <n-space vertical>
+ <SideBySidePreview>
+ <template #pdf>
+ <ImagePreview :image="image.blob" v-if="image" />
+ </template>
+ <template #scan>
+ <ImagePreview :image="scanImage.blob" v-if="scanImage" />
+ </template>
+ </SideBySidePreview>
+ <PreviewPagination
+ v-model:page="page"
+ :numPages="numPages"
+ v-if="numPages >= 2"
+ />
+ </n-space>
 </template>
 
 <script lang="ts" setup>
 import SideBySidePreview from "./SideBySidePreview.vue";
 import ImagePreview from "./ImagePreview.vue";
 import { ref } from "vue";
 import { computedAsync } from "@vueuse/core";
+import PreviewPagination from "./PreviewPagination.vue";
+import { NSpace } from "naive-ui";
 
 const page = ref(1);
 
@@ -86,4 +95,10 @@ const scanImage = computedAsync(async () => {
  width,
  };
 });
+
+const numPages = computedAsync(async () => {
+ page.value = 1;
+ if (!props.pdfRenderer) return 1;
+ return await props.pdfRenderer.getNumPages();
+}, 1);
 </script>

src/components/canvas-scan/preview/PreviewPagination.vue

@@ -0,0 +1,27 @@
+<template>
+ <n-space justify="center">
+ <n-pagination
+ v-model:page="page"
+ :page-count="numPages"
+ v-show="numPages >= 2"
+ :page-slot="5"
+ size="small"
+ />
+ </n-space>
+</template>
+
+<script lang="ts" setup>
+import { NPagination, NSpace } from "naive-ui";
+import { useVModel } from "@vueuse/core";
+
+const props = defineProps<{
+ page: number;
+ numPages: number;
+}>();
+
+const emit = defineEmits<{
+ (e: "update:page", page: number): void;
+}>();
+
+const page = useVModel(props, "page", emit);
+</script>