Merge pull request #17 from privy-open-source/feat/expose-pdf-context

Feat/expose pdf context

Author: radyakaze

demo/src/App.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { reactive } from 'vue'
+import { reactive, ref } from 'vue'
 import PdfViewer from '@/components/pdf-viewers/PdfViewer.vue'
 import PdfObject from '@/components/pdf-object/PdfObject.vue'
-import type { PdfObject as IPdfObject } from '@/types/ref'
+import type { PdfObject as IPdfObject, PdfViewerContext } from '@/types/ref'
 
 const object = reactive<IPdfObject>({
   page: undefined,
@@ -11,11 +11,15 @@ const object = reactive<IPdfObject>({
   width: undefined,
   height: undefined
 })
+
+const pdf = ref<PdfViewerContext>()
 </script>
 
 <template>
   <div class="pdf-example">
+    {{ pdf  }}
     <pdf-viewer
+      ref="pdf"
       src="https://privy-open-source.github.io/design-system/assets/Calibrator-v3.e869f66c.pdf"
     >
       <pdf-object
@@ -32,12 +36,13 @@ const object = reactive<IPdfObject>({
         />
       </pdf-object>
 
-      <!-- <template #navigation="{ zoomIn, zoomOut, page, totalPage, next, prev }">
+      <!-- <template #navigation="{ zoomIn, zoomOut, page, totalPage, next, prev, scale }">
         <button @click="zoomOut">Zoom Out</button>
         <button @click="zoomIn">Zoom In</button>
         <div>
           Page <span>{{ page }}</span> / {{ totalPage }}
         </div>
+        <div>Scale {{ scale }}</div>
         <button @click="prev">Prev</button>
         <button @click="next">Next</button>
       </template> -->

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@privyid/pdf-ajaib",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "private": false,
   "license": "MIT",
   "repository": {

src/components/pdf-viewers/PdfViewer.vue

@@ -2,7 +2,7 @@
 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 { templateRef, useToNumber, useVModel, watchDebounced, syncRef, useToggle } from '@vueuse/core'
 import type { LayoutVariant } from './main'
 import { PDF_VIEWER_CONTEXT } from './main'
 import { useSticky } from './utils/use-sticky'
@@ -49,17 +49,23 @@ export default defineComponent({
     offsetTop: {
       type: [Number, String],
       default: 0
+    },
+    noNavigation: {
+      type: Boolean,
+      default: false,
     }
   },
   emits: ['ready', 'loaded', 'error', 'error-password', 'update:page', 'update:scale'],
-  setup(props, { emit }) {
+  setup(props, { emit, expose }) {
     const root = templateRef<HTMLDivElement>('root')
     const container = templateRef<HTMLDivElement>('container')
     const viewer = templateRef<HTMLDivElement>('viewer')
     const idle = useIdle(container)
 
     const vPage = useVModel(props, 'page')
     const vScale = useVModel(props, 'scale')
+    const [isReady, toggleReady] = useToggle()
+    const [isLoaded, toggleLoaded] = useToggle()
 
     const offsetTop = useToNumber(toRef(props, 'offsetTop'), {
       nanToZero: true
@@ -112,6 +118,7 @@ export default defineComponent({
     })
 
     onLoaded((doc) => {
+      toggleLoaded(true)
       emit('loaded', doc)
     })
 
@@ -121,6 +128,7 @@ export default defineComponent({
     })
 
     onReady((pdfViewer) => {
+      toggleReady(true)
       emit('ready', pdfViewer)
     })
 
@@ -149,7 +157,25 @@ export default defineComponent({
       pdfPage.value--
     }
 
+    const calculatedScale = computed<number>(() => {
+      return Number((pdfScale.value * 100).toFixed(0))
+    })
+
+    expose({
+      idle,
+      page: pdfPage,
+      scale: calculatedScale,
+      totalPage,
+      zoomIn: pdfZoomIn,
+      zoomOut: pdfZoomOut,
+      next: pdfNextPage,
+      prev: pdfPrevPage,
+      isReady,
+      isLoaded,
+    })
+
     return {
+      calculatedScale,
       pdfPage,
       pdfScale,
       classNames,
@@ -164,7 +190,7 @@ export default defineComponent({
       pdfZoomIn,
       pdfZoomOut,
       pdfNextPage,
-      pdfPrevPage
+      pdfPrevPage,
     }
   }
 })
@@ -201,12 +227,12 @@ export default defineComponent({
       />
 
       <transition name="slide-up">
-        <div class="pdf__navigation">
+        <div v-if="!noNavigation" class="pdf__navigation">
           <slot
             name="navigation"
             :idle="idle"
             :page="pdfPage"
-            :scale="scale"
+            :scale="calculatedScale"
             :totalPage="totalPage"
             :zoom-in="pdfZoomIn"
             :zoom-out="pdfZoomOut"

src/main.ts

@@ -1,4 +1,4 @@
 export { default as PdfViewer } from './components/pdf-viewers/PdfViewer.vue'
 export { default as PdfObject } from './components/pdf-object/PdfObject.vue'
 export { default as PdfObjectAddon } from './components/pdf-object/PdfObjectAddon.vue'
-export type { PdfObject as PdfObjectRef } from './types/ref'
+export type { PdfObject as PdfObjectRef, PdfViewerContext } from './types/ref'

src/types/ref.ts

@@ -1,7 +1,22 @@
+import type { Ref } from 'vue'
+
 export interface PdfObject {
   page?: number
   x?: number
   y?: number
   width?: number
   height?: number
 }
+
+export interface PdfViewerContext {
+  idle: Ref<boolean>
+  page: Ref<number>
+  scale: Ref<number>
+  totalPage: Ref<number>
+  zoomIn: () => void
+  zoomOut: () => void
+  next: () => void
+  prev: () => void
+  isReady: Ref<boolean>
+  isLoaded: Ref<boolean>
+}