Merge pull request #15 from privy-open-source/feat/pdf-navigation-slot

Feat: pdf navigation slot

Author: radyakaze

demo/src/App.vue

@@ -31,6 +31,16 @@ const object = reactive<IPdfObject>({
           src="https://via.placeholder.com/430x230/23B242/ffffff"
         />
       </pdf-object>
+
+      <!-- <template #navigation="{ zoomIn, zoomOut, page, totalPage, next, prev }">
+        <button @click="zoomOut">Zoom Out</button>
+        <button @click="zoomIn">Zoom In</button>
+        <div>
+          Page <span>{{ page }}</span> / {{ totalPage }}
+        </div>
+        <button @click="prev">Prev</button>
+        <button @click="next">Next</button>
+      </template> -->
     </pdf-viewer>
   </div>
 </template>

demo/vite.config.ts

@@ -0,0 +1,16 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import Icons from 'unplugin-icons/vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  root: 'demo/',
+  plugins: [vue(), Icons({ compiler: 'vue3' })],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('../src', import.meta.url))
+    }
+  },
+})

package.json

@@ -8,7 +8,7 @@
     "url": "https://github.com/privy-open-source/pdf-ajaib.git"
   },
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --config=./demo/vite.config.ts",
     "build": "vite build && vue-tsc --emitDeclarationOnly",
     "preview": "vite preview",
     "test:unit": "vitest",
@@ -44,7 +44,6 @@
     "@iconify-json/carbon": "^1.1.16",
     "@interactjs/types": "^1.10.17",
     "@itsy/vite-css-inject": "^1.0.2",
-    "@nuxt/kit": "^3.3.2",
     "@rollup/plugin-typescript": "^11.0.0",
     "@rushstack/eslint-patch": "^1.2.0",
     "@types/jest": "^29.5.0",
@@ -78,7 +77,6 @@
     "vue-tsc": "^1.2.0"
   },
   "peerDependencies": {
-    "@nuxt/kit": "npm:@nuxt/kit-edge@latest",
     "@vue/compiler-sfc": "^3.2.47",
     "@vue/composition-api": "^1.4.1",
     "vue": "^2.0.0 || >=3.0.0-rc.0"

src/components/pdf-viewers/PdfNavigation.vue

@@ -91,7 +91,6 @@ export default defineComponent({
     left: 0px;
     right: 0px;
     bottom: 2.5rem;
-    z-index: 10;
     margin-left: auto;
     margin-right: auto;
     display: flex;
@@ -113,10 +112,6 @@ export default defineComponent({
         border-style: none;
         color: rgb(182, 184, 185);
         cursor: pointer;
-
-        &:hover {
-
-        }
       }
 
       .pdf-zoom-out {

src/components/pdf-viewers/PdfViewer.vue

@@ -1,9 +1,9 @@
 <script lang="ts">
-import type { PropType} from 'vue-demi';
+import type { PropType } from 'vue-demi'
 import { computed, defineComponent, onMounted, provide, toRef, watch } from 'vue-demi'
 import { pAspectRatio } from '@/directives/aspect-ratio'
 import { templateRef, useToNumber, useVModel, watchDebounced, syncRef } from '@vueuse/core'
-import type { LayoutVariant} from './main';
+import type { LayoutVariant } from './main'
 import { PDF_VIEWER_CONTEXT } from './main'
 import { useSticky } from './utils/use-sticky'
 import PdfNavigation from './PdfNavigation.vue'
@@ -133,6 +133,22 @@ export default defineComponent({
     syncRef(pdfPage, vPage)
     syncRef(pdfScale, vScale)
 
+    function pdfZoomIn() {
+      pdfScale.value = Math.round(pdfScale.value / 0.1) * 0.1 + 0.1
+    }
+
+    function pdfZoomOut() {
+      pdfScale.value = Math.round(pdfScale.value / 0.1) * 0.1 - 0.1
+    }
+
+    function pdfNextPage() {
+      pdfPage.value++
+    }
+
+    function pdfPrevPage() {
+      pdfPage.value--
+    }
+
     return {
       pdfPage,
       pdfScale,
@@ -144,7 +160,11 @@ export default defineComponent({
       pdfJS,
       idle,
       loading,
-      error
+      error,
+      pdfZoomIn,
+      pdfZoomOut,
+      pdfNextPage,
+      pdfPrevPage
     }
   }
 })
@@ -181,7 +201,22 @@ export default defineComponent({
       />
 
       <transition name="slide-up">
-        <pdf-navigation v-show="!idle" />
+        <div class="pdf__navigation">
+          <slot
+            name="navigation"
+            :idle="idle"
+            :page="pdfPage"
+            :scale="scale"
+            :totalPage="totalPage"
+            :zoom-in="pdfZoomIn"
+            :zoom-out="pdfZoomOut"
+            :next="pdfNextPage"
+            :prev="pdfPrevPage"
+            :doc="pdfDoc"
+          >
+            <pdf-navigation v-show="!idle" />
+          </slot>
+        </div>
       </transition>
 
       <slot name="body" :page="pdfPage" :scale="pdfScale" :total-page="totalPage" :doc="pdfDoc" />
@@ -240,5 +275,9 @@ export default defineComponent({
     z-index: 1;
     background-color: white;
   }
+
+  &__navigation {
+    z-index: 10;
+  }
 }
 </style>