docs updated

docs/.vuepress/config.js

@@ -65,12 +65,12 @@ export default defineUserConfig({
             '/examples/basic/text_layer.md',
             '/examples/basic/annotation_layer.md',
             '/examples/basic/xfa_layer.md',
-            '/examples/basic/watermark.md',
           ],
         },
         {
           text: 'Advanced usages',
           children: [
+            '/examples/advanced/watermark.md',
             '/examples/advanced/fit_parent.md',
             '/examples/advanced/annotation_filter.md',
             '/examples/advanced/multiple_pdf.md',

docs/.vuepress/styles/index.scss

@@ -12,6 +12,19 @@
   background-color: var(--c-brand-light);
 }
 
+.input-example {
+  appearance: none;
+  padding: 7px 15px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  outline: none;
+
+}
+.input-example:focus{
+  cursor: auto;
+  border-color: var(--search-accent-color);
+}
+
 .select-example {
   background-color: var(--c-brand);
   color: white;

docs/components/MultiplePDF.vue

@@ -1,39 +1,34 @@
 <script setup>
-import { VuePDF, usePDF } from '@tato30/vue-pdf';
-import { withBase } from '@vuepress/client';
-import { ref, watch } from 'vue';
+import { VuePDF, usePDF } from '@tato30/vue-pdf'
+import { withBase } from '@vuepress/client'
+import { ref } from 'vue'
 
-const currentPdfIndex = ref(0)
 const pdfSources = [
   withBase('/example_014.pdf'),
   withBase('/example_036.pdf'),
   withBase('/example_041.pdf'),
   withBase('/example_045.pdf'),
   'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf',
 ]
+const pdfSourceIdx = ref(0)
+const pdfSource = ref(pdfSources[0])
 
 // Setting the first (or default) PDF
-const { pdf } = usePDF(pdfSources[currentPdfIndex.value])
+const { pdf } = usePDF(pdfSource)
 
 function nextPdf() {
-  let sourceIndex = currentPdfIndex.value + 1
-  if (sourceIndex >= pdfSources.length)
-    sourceIndex = 0
-
-  const { pdf: newPDFToLoad } = usePDF(pdfSources[sourceIndex]) // Loads the new pdf
-  watch(newPDFToLoad, () => {
-    // How usePDF returns a promised values, we must wait (watch) for a resolved value before reassign the main pdf ref
-    pdf.value = newPDFToLoad.value
-    currentPdfIndex.value = sourceIndex
-  })
+  pdfSourceIdx.value += 1
+  if (pdfSourceIdx.value >= pdfSources.length)
+    pdfSourceIdx.value = 0
+  pdfSource.value = pdfSources[pdfSourceIdx.value]
 }
 </script>
 
 <template>
   <div class="container">
     <div>
       <button class="button-example" @click="nextPdf">
-        Next PDF
+        Next PDF (Current index: {{ pdfSourceIdx }})
       </button>
     </div>
     <VuePDF :pdf="pdf" />

docs/components/Watermark.vue

@@ -1,13 +1,62 @@
 <script setup>
 import { VuePDF, usePDF } from '@tato30/vue-pdf'
+import { ref } from 'vue'
 
 const { pdf } = usePDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')
+
+const pdfRef = ref(null)
+const watermarkText = ref('sample')
+const watermarkOptions = ref({
+  columns: 4,
+  rows: 4,
+  color: 'rgba(211, 210, 211, 0.4)',
+  rotation: 45,
+  fontSize: 18,
+})
+
+function reload() {
+  pdfRef.value.reload()
+}
 </script>
 
 <template>
   <div class="container">
+    <table>
+      <tr>
+        <td colspan="2">
+          Text
+        </td>
+        <td colspan="2">
+          <input v-model="watermarkText" class="input-example">
+        </td>
+      </tr>
+      <tr>
+        <td colspan="2">
+          Color
+        </td>
+        <td colspan="2">
+          <input v-model="watermarkOptions.color" class="input-example">
+        </td>
+      </tr>
+      <tr>
+        <td>Columns</td>
+        <td><input v-model="watermarkOptions.columns" class="input-example"></td>
+        <td>Rows</td>
+        <td><input v-model="watermarkOptions.rows" class="input-example"></td>
+      </tr>
+      <tr>
+        <td>Rotation</td>
+        <td><input v-model="watermarkOptions.rotation" class="input-example"></td>
+        <td>FontSize</td>
+        <td><input v-model="watermarkOptions.fontSize" class="input-example"></td>
+      </tr>
+    </table>
+
     <div>
-      <VuePDF :pdf="pdf" watermark-text="Sample" />
+      <button class="button-example" @click="reload">
+        Reload
+      </button>
     </div>
+    <VuePDF ref="pdfRef" :pdf="pdf" :watermark-text="watermarkText" :watermark-options="watermarkOptions" />
   </div>
 </template>

docs/examples/advanced/multiple_pdf.md

@@ -2,40 +2,35 @@
 
 ```vue
 <script setup>
-import { ref, watch } from 'vue'
 import { VuePDF, usePDF } from '@tato30/vue-pdf'
+import { ref } from 'vue'
 
-const currentPdfIndex = ref(0)
 const pdfSources = [
   '/example_014.pdf',
   '/example_036.pdf',
   '/example_041.pdf',
   '/example_045.pdf',
-  'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'
+  'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf',
 ]
-
 // Setting the first (or default) PDF
-const { pdf } = usePDF(pdfSources[currentPdfIndex.value])
+const pdfSource = ref(pdfSources[0])
+const pdfSourceIdx = ref(0)
 
-function nextPdf() {
-  let sourceIndex = currentPdfIndex.value + 1
-  if (sourceIndex >= pdfSources.length)
-    sourceIndex = 0
+const { pdf } = usePDF(pdfSource)
 
-  const { pdf: newPDFToLoad } = usePDF(pdfSources[sourceIndex]) // Loads the new pdf
-  watch(newPDFToLoad, () => {
-    // How usePDF returns a promised values, we must wait (watch) for a resolved value before reassign the main pdf ref
-    pdf.value = newPDFToLoad.value
-    currentPdfIndex.value = sourceIndex
-  })
+function nextPdf() {
+  pdfSourceIdx.value += 1
+  if (pdfSourceIdx.value >= pdfSources.length)
+    pdfSourceIdx.value = 0
+  pdfSource.value = pdfSources[pdfSourceIdx.value]
 }
 </script>
 
 <template>
   <div>
     <div>
       <button @click="nextPdf">
-        Next PDF
+        Next PDF (Current index: {{ pdfSourceIdx }})
       </button>
     </div>
     <VuePDF :pdf="pdf" />

docs/examples/advanced/watermark.md

@@ -0,0 +1,41 @@
+# Watermark Text
+
+```vue
+<script setup>
+import { VuePDF, usePDF } from '@tato30/vue-pdf'
+import { ref } from 'vue'
+
+const { pdf } = usePDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')
+
+const pdfRef = ref(null)
+const watermarkText = ref('sample')
+const watermarkOptions = ref({
+  columns: 4,
+  rows: 4,
+  color: 'rgba(211, 210, 211, 0.8)',
+  rotation: 45,
+  fontSize: 18,
+})
+
+function reload() {
+  pdfRef.value.reload()
+}
+</script>
+
+<template>
+  <div>
+    <div>
+      <input v-model="watermarkText">
+      <input v-model="watermarkOptions.color">
+      <input v-model="watermarkOptions.columns">
+      <input v-model="watermarkOptions.rows">
+      <input v-model="watermarkOptions.rotation">
+      <input v-model="watermarkOptions.fontSize">
+    </div>
+    <VuePDF ref="pdfRef" :pdf="pdf" :watermark-text="watermarkText" :watermark-options="watermarkOptions" />
+  </div>
+</template>
+```
+<ClientOnly>
+  <Watermark />
+</ClientOnly>

docs/guide/props.md

@@ -83,7 +83,7 @@ Enable document annotations like links, popups, widgets, etc.
 <VuePDF :pdf="pdf" annotation-layer />
 ```
 
-## watermark-text <badge type="tip" text="v1.7" vertical="middle" />
+## watermark-text 
 
 Type: `string` <br />
 Required: `false` <br />
@@ -95,7 +95,38 @@ Prints a watermark pattern over canvas.
 <VuePDF :pdf="pdf" watermark-text="Sample" />
 ```
 
-## image-resources-path <badge type="tip" text="v1.6" vertical="middle" />
+## watermark-options <badge type="tip" text="v1.8" vertical="middle" />
+
+Type: `object` <br />
+Required: `false` <br />
+Default: 
+```
+{
+  columns: 4,
+  rows: 4,
+  rotation: 45,
+  fontSize: 18,
+  color: 'rgba(211, 210, 211, 0.4)',
+}
+```
+
+Customize how watermark is printed over canvas.
+
+```vue
+<script setup>
+const watermarkOptions = ref({
+  columns: 1,
+  rows: 1,
+  color: '#23FFFF',
+  rotation: 45,
+  fontSize: 20,
+})
+</script>
+
+<VuePDF :pdf="pdf" watermark-text="Sample" :watermark-options="watermarkOptions" />
+```
+
+## image-resources-path 
 
 Type: `string` <br />
 Required: `false` <br />
@@ -107,7 +138,7 @@ Path to image resources needed to render some graphics when required.
 <VuePDF :pdf="pdf" image-resources-path="https://unpkg.com/pdfjs-dist@latest/web/images/" />
 ```
 
-## hide-forms <badge type="tip" text="v1.6" vertical="middle" />
+## hide-forms 
 
 Type: `boolean` <br />
 Required: `false` <br />
@@ -161,7 +192,7 @@ const filter = ref(['Link', 'Text', 'Widget'])
 <VuePDF :pdf="pdf" annotation-layer :annotations-filter="filter" />
 ```
 
-## annotations-map <badge type="tip" text="v1.6" vertical="middle" />
+## annotations-map 
 
 Type: `object` <br />
 Required: `false` <br />

docs/package.json

@@ -15,6 +15,6 @@
     "vuepress": "2.0.0-beta.62"
   },
   "dependencies": {
-    "@tato30/vue-pdf": "1.7.1"
+    "@tato30/vue-pdf": "1.8.1"
   }
 }

docs/yarn.lock

@@ -229,10 +229,10 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@tato30/vue-pdf@1.7.1":
-  version "1.7.1"
-  resolved "https://registry.yarnpkg.com/@tato30/vue-pdf/-/vue-pdf-1.7.1.tgz#de18ddd3427c66d5aa84d4328f01b8eecb44e977"
-  integrity sha512-XuYW516SHLKJhj2ReKV+dMvZl5K1z919abnSGbleKFiu8GNtOCmQZieyZoyrlqTeAjksARpSQIr3cbH0FgRF5w==
+"@tato30/vue-pdf@1.8.1":
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/@tato30/vue-pdf/-/vue-pdf-1.8.1.tgz#8640613aa7ad4b1abd9d913066a58273bc341371"
+  integrity sha512-EC2fZVQjYQ21kFVDUYaQEJfu5oz6W/qpfk7RNJ8LIM65u17sWyjYRzK5AjoqLYVzynHBE2suDgKEmCiOUzNyeA==
   dependencies:
     pdfjs-dist "3.7.107"
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tato30/vue-pdf",
-  "version": "1.7.4",
+  "version": "1.8.1",
   "description": "PDF viewer for Vue 3",
   "author": {
     "name": "Aldo Hernandez",

src/components/VuePDF.vue

@@ -226,7 +226,7 @@ watch(() => props.pdf, (pdf) => {
     initDoc(pdf)
 })
 
-watch(() => [props.scale, props.rotation, props.page, props.hideForms, props.watermarkText, props.watermarkOptions], () => {
+watch(() => [props.scale, props.rotation, props.page, props.hideForms], () => {
   renderPage(props.page)
 })