update docs

TaTo30 · Jul 25, 2023 · bbbf8b2 · bbbf8b2
1 parent afc4521
commit bbbf8b2
Show file tree

Hide file tree

Showing 14 changed files with 155 additions and 34 deletions.
diff --git a/README.md b/README.md
@@ -60,6 +60,8 @@ console.log(`Document info: ${info}`)
 
 ## Working With Layers
 
+### Text and Annotations
+
 This component supports text-selection and annotation-interaction by enabling them with `text-layer` and `annotation-layer` props respectively, but for this layers renders correctly is necessary setting `css` styles, it can be done by importing default styles from `@tato30/vue-pdf/style.css`.
 
 ```vue
@@ -75,16 +77,31 @@ const { pdf } = usePDF('sample.pdf')
 </template>
 ```
 
-Check the follow examples:
-
-- [Text-Layer](../examples/basic/text_layer.md)
-- [Annotation-Layer](../examples/basic/annotation_layer.md.md)
-
 You can also create your own custom styles and set them in your project, use this examples as guide:
 
 - [text-layer styles](https://github.com/mozilla/pdf.js/blob/master/web/text_layer_builder.css)
 - [annotation-layer styles](https://github.com/mozilla/pdf.js/blob/master/web/annotation_layer_builder.css)
 
+### XFA Forms <badge type="tip" text="v1.7" vertical="middle" />
+
+XFA forms also can be supported by enabling them from `usePDF`.
+
+```vue
+<script setup>
+import { VuePDF, usePDF } from '@tato30/vue-pdf'
+import '@tato30/vue-pdf/style.css'
+
+const { pdf } = usePDF({
+  url: '/example_xfa.pdf',
+  enableXfa: true,
+})
+</script>
+
+<template>
+  <VuePDF :pdf="pdf" />
+</template>
+```
+
 ## Server-Side Rendering
 
 `VuePDF` is a client-side library, so if you are working with SSR frameworks like `nuxt`, surely will throw error during building stage, if that the case, you could wrap library in some "client only" directive or component, also `usePDF` should be wrapped.

diff --git a/docs/.vuepress/client.js b/docs/.vuepress/client.js
@@ -14,16 +14,20 @@ import OnePage from '../components/OnePage.vue'
 import Rotation from '../components/Rotation.vue'
 import Scale from '../components/Scale.vue'
 import TextLayer from '../components/TextLayer.vue'
+import XFALayer from '../components/XFALayer.vue'
+import Watermark from '../components/Watermark.vue'
 
 
 export default defineClientConfig({
     enhance({app}) {
         app.component('OnePage', OnePage)
+        app.component('Watermark', Watermark)
         app.component('AllPages', AllPages)
         app.component('Scale', Scale)
         app.component('Rotation', Rotation)
         app.component('TextLayer', TextLayer)
         app.component('AnnotationLayer', AnnotationLayer)
+        app.component('XFALayer', XFALayer)
         app.component('FitParent', FitParent)
         app.component('AnnotationFilter', AnnotationFilter)
         app.component('MultiplePDF', MultiplePDF)

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -29,7 +29,7 @@ export default defineUserConfig({
             link: '/examples/advanced/fit_parent.md'
           },
           {
-            text: 'Events playground',
+            text: 'Events',
             link: '/examples/loaded_events/loaded.md'
           },
         ]
@@ -64,6 +64,8 @@ export default defineUserConfig({
             '/examples/basic/rotation.md',
             '/examples/basic/text_layer.md',
             '/examples/basic/annotation_layer.md',
+            '/examples/basic/xfa_layer.md',
+            '/examples/basic/watermark.md',
           ],
         },
         {

diff --git a/docs/.vuepress/public/example_xfa.pdf b/docs/.vuepress/public/example_xfa.pdf
diff --git a/docs/components/Watermark.vue b/docs/components/Watermark.vue
@@ -0,0 +1,13 @@
+<script setup>
+import { VuePDF, usePDF } from '@tato30/vue-pdf'
+
+const { pdf } = usePDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')
+</script>
+
+<template>
+  <div class="container">
+    <div>
+      <VuePDF :pdf="pdf" watermark-text="Sample" />
+    </div>
+  </div>
+</template>
diff --git a/docs/components/XFALayer.vue b/docs/components/XFALayer.vue
@@ -0,0 +1,16 @@
+<script setup>
+import { VuePDF, usePDF } from '@tato30/vue-pdf'
+import { withBase } from '@vuepress/client'
+import '@tato30/vue-pdf/style.css'
+
+const { pdf } = usePDF({
+  url: withBase('/example_xfa.pdf'),
+  enableXfa: true,
+})
+</script>
+
+<template>
+  <div class="container">
+    <VuePDF :pdf="pdf" />
+  </div>
+</template>
diff --git a/docs/examples/basic/annotation_layer.md b/docs/examples/basic/annotation_layer.md
@@ -1,4 +1,4 @@
-# Annotation-layer
+# Annotation Layer
 
 ```vue
 <script setup>

diff --git a/docs/examples/basic/text_layer.md b/docs/examples/basic/text_layer.md
@@ -1,4 +1,4 @@
-# Text-layer
+# Text Layer
 
 ```vue
 <script setup>

diff --git a/docs/examples/basic/watermark.md b/docs/examples/basic/watermark.md
@@ -0,0 +1,20 @@
+# Watermark Text
+
+```vue
+<script setup>
+import { VuePDF, usePDF } from '@tato30/vue-pdf'
+
+const { pdf } = usePDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')
+</script>
+
+<template>
+  <div class="container">
+    <div>
+      <VuePDF :pdf="pdf" watermark-text="Sample" />
+    </div>
+  </div>
+</template>
+```
+<ClientOnly>
+  <Watermark />
+</ClientOnly>
diff --git a/docs/examples/basic/xfa_layer.md b/docs/examples/basic/xfa_layer.md
@@ -0,0 +1,22 @@
+# XFA Forms
+
+```vue
+<script setup>
+import { VuePDF, usePDF } from '@tato30/vue-pdf'
+import '@tato30/vue-pdf/style.css'
+
+const { pdf } = usePDF({
+  url: '/example_xfa.pdf',
+  enableXfa: true,
+})
+</script>
+
+<template>
+  <div class="container">
+    <VuePDF :pdf="pdf" />
+  </div>
+</template>
+```
+<ClientOnly>
+  <XFALayer />
+</ClientOnly>
diff --git a/docs/guide/introduction.md b/docs/guide/introduction.md
@@ -30,6 +30,8 @@ const { pdf } = usePDF('sample.pdf')
 
 ## Working With Layers
 
+### Text and Annotations
+
 This component supports text-selection and annotation-interaction by enabling them with `text-layer` and `annotation-layer` props respectively, but for this layers renders correctly is necessary setting `css` styles, it can be done by importing default styles from `@tato30/vue-pdf/style.css`.
 
 ```vue
@@ -45,16 +47,40 @@ const { pdf } = usePDF('sample.pdf')
 </template>
 ```
 
-Check the follow examples:
+Check the examples:
 
-- [Text-Layer](../examples/basic/text_layer.md)
-- [Annotation-Layer](../examples/basic/annotation_layer.md.md)
+- [Text Layer](../examples/basic/text_layer.md)
+- [Annotation Layer](../examples/basic/annotation_layer.md.md)
 
 You can also create your own custom styles and set them in your project, use this examples as guide:
 
 - [text-layer styles](https://github.com/mozilla/pdf.js/blob/master/web/text_layer_builder.css)
 - [annotation-layer styles](https://github.com/mozilla/pdf.js/blob/master/web/annotation_layer_builder.css)
 
+### XFA Forms <badge type="tip" text="v1.7" vertical="middle" />
+
+XFA forms also can be supported by enabling them from `usePDF`.
+
+```vue
+<script setup>
+import { VuePDF, usePDF } from '@tato30/vue-pdf'
+import '@tato30/vue-pdf/style.css'
+
+const { pdf } = usePDF({
+  url: '/example_xfa.pdf',
+  enableXfa: true,
+})
+</script>
+
+<template>
+  <VuePDF :pdf="pdf" />
+</template>
+```
+
+Check the example:
+
+- [XFA Forms](../examples/basic/xfa_layer.md)
+
 ## Server-Side Rendering
 
 `VuePDF` is a client-side library, so if you are working with SSR frameworks like `nuxt`, surely will throw error during building stage, if that the case, you could wrap library in some "client only" directive or component, also `usePDF` should be wrapped.

diff --git a/docs/guide/props.md b/docs/guide/props.md
@@ -83,7 +83,19 @@ Enable document annotations like links, popups, widgets, etc.
 <VuePDF :pdf="pdf" annotation-layer />
 ```
 
-## image-resources-path
+## watermark-text <badge type="tip" text="v1.7" vertical="middle" />
+
+Type: `string` <br />
+Required: `false` <br />
+Default: `null`
+
+Prints a watermark pattern over canvas.
+
+```vue
+<VuePDF :pdf="pdf" watermark-text="Sample" />
+```
+
+## image-resources-path <badge type="tip" text="v1.6" vertical="middle" />
 
 Type: `string` <br />
 Required: `false` <br />
@@ -95,7 +107,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
+## hide-forms <badge type="tip" text="v1.6" vertical="middle" />
 
 Type: `boolean` <br />
 Required: `false` <br />
@@ -149,31 +161,20 @@ const filter = ref(['Link', 'Text', 'Widget'])
 <VuePDF :pdf="pdf" annotation-layer :annotations-filter="filter" />
 ```
 
-## annotations-map
+## annotations-map <badge type="tip" text="v1.6" vertical="middle" />
 
-Type: `function` <br />
+Type: `object` <br />
 Required: `false` <br />
 Default: `null` <br />
 
-Allows to map annotations, useful for edit annotations data before rendering, also can be used as a filter by returning null in map function.
+Allows to map values to annotation's storage, useful for edit annotation's data before rendering.
 
 ```vue
 <script setup>
-function annotationMap(annotation) {
-  if (annotation.id === 'ID1') {
-    annotation.fieldValue = 'Modified value'
-    return annotation // return a modified annotation
-  }
-  else if (annotations.id === 'ID2') {
-    return null // return null to discard the annotation
-  }
-  else {
-    return annotation // return annotation as is
-  }
-}
+const annotationMap = ref({ '7R': { value: 'Modified value' } })
 </script>
 
 <VuePDF :pdf="pdf" annotation-layer :annotations-map="annotationMap" />
 ```
 
-> NOTE: `annotations-filter` has more precedence than `annotations-map`, so if both used, annotations will be first filter and then mapped.
+<!-- > NOTE: `annotations-filter` has more precedence than `annotations-map`, so if both used, annotations will be first filter and then mapped. -->
diff --git a/docs/package.json b/docs/package.json
@@ -15,6 +15,6 @@
     "vuepress": "2.0.0-beta.62"
   },
   "dependencies": {
-    "@tato30/vue-pdf": "1.6.2"
+    "@tato30/vue-pdf": "1.7.0"
   }
 }
diff --git a/docs/yarn.lock b/docs/yarn.lock
@@ -229,10 +229,10 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@tato30/vue-pdf@1.6.2":
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/@tato30/vue-pdf/-/vue-pdf-1.6.2.tgz#4e459e948760a1b9f59d445ee1eb393568c1e122"
-  integrity sha512-ziB+1w5Y68MF37iDiaKoSfvX50z/C6OTG/SaDQlaiXYGeaWYkEOOLR2EcKGcICOUy0bwtU3PcVwj2Q/1iLP1xQ==
+"@tato30/vue-pdf@1.7.0":
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/@tato30/vue-pdf/-/vue-pdf-1.7.0.tgz#b7506da8575c6e6e49b3f66ce5d9f216975af52c"
+  integrity sha512-OdEqZNxEMIqsajReZ41s8ncODbuQ/4AwJ8jlccAkwee2nVrtD/fq+p5j29wTHTvzmSZHLd3/KDb6j1KjAmnU5w==
   dependencies:
     pdfjs-dist "3.7.107"