TaTo30 · TaTo30 · Jul 10, 2023 · Jul 6, 2023 · Jul 10, 2023 · Jul 10, 2023
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -13,8 +13,8 @@ export default defineUserConfig({
     docsDir: 'docs',
     navbar: [
       {
-        text: 'Guide',
-        link: '/guide/'
+        text: 'Docs',
+        link: '/guide/introduction.md'
       },
       {
         text: 'Examples',
@@ -39,12 +39,18 @@ export default defineUserConfig({
         {
           text: 'Guide',
           children: [
-            '/guide/README.md',
+            '/guide/introduction.md',
+            '/guide/composables.md',
+          ],
+        },
+        {
+          text: 'VuePDF Component',
+          children: [
             '/guide/props.md',
             '/guide/events.md',
             '/guide/methods.md',
             '/guide/slots.md',
-          ],
+          ]
         }
       ],
       '/examples/': [

diff --git a/docs/.vuepress/styles/index.scss b/docs/.vuepress/styles/index.scss
@@ -20,3 +20,9 @@
   border-radius: 4px;
   border: none;
 }
+
+.container {
+  display: flex; 
+  align-items:center; 
+  flex-direction: column
+}
diff --git a/docs/README.md b/docs/README.md
@@ -5,7 +5,7 @@ title: Home
 # heroImage: /images/hero.png
 actions:
   - text: Get started
-    link: /guide/
+    link: /guide/introduction
     type: primary
   - text: Examples
     link: /examples/basic/one_page
@@ -25,3 +25,22 @@ actions:
 #     details: Default bundler is Vite, while Webpack is also supported. Choose the one you like!
 # footer: MIT Licensed | Copyright © 2018-present Evan You
 ---
+
+<script setup>
+import { ref } from 'vue'
+import { VuePDF, usePDF } from '@tato30/vue-pdf';
+
+const page = ref(1)
+const { pdf, pages } = usePDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')
+</script>
+
+<div class="container">
+    <div>
+      <button class="button-example" @click="page = page > 1? page - 1 : page">PREV</button>
+      <span>{{page}}/{{pages}}</span>
+      <button class="button-example" @click="page = page < pages? page + 1 : page">NEXT</button>
+    </div>
+    <div style="width: 500px">
+      <VuePDF :pdf="pdf" :page="page" fit-parent />
+    </div>
+</div>
diff --git a/docs/examples/advanced/annotation_filter.md b/docs/examples/advanced/annotation_filter.md
@@ -17,7 +17,7 @@ function reloadPage() {
 </script>
 
 <template>
-  <div style="text-align: center">
+  <div>
     <div>
       <select v-model="selectedFilter[0]" class="select-example" @change="reloadPage">
         <option v-for="flt in filters" :key="flt" :value="flt">
@@ -45,7 +45,7 @@ function reloadPage() {
 }
 </script>
 
-<div style="text-align: center">
+<div class="container">
   <div>
     <select v-model="selectedFilter[0]" class="select-example" @change="reloadPage">
       <option v-for="flt in filters" :key="flt" :value="flt">

diff --git a/docs/examples/advanced/fit_parent.md b/docs/examples/advanced/fit_parent.md
@@ -17,17 +17,17 @@ function fitParentWidth(pxs) {
 </script>
 
 <template>
-  <div style="text-align: center">
+  <div>
     <div>
-      <button class="button-example" @click="fitParentWidth(-50)">
+      <button @click="fitParentWidth(-50)">
         Remove 50px
       </button>
       <span>Parent width: {{ parentWidth }}px</span>
-      <button class="button-example" @click="fitParentWidth(50)">
+      <button @click="fitParentWidth(50)">
         Add 50px
       </button>
     </div>
-    <div :style="`width: ${parentWidth}px; display: inline-block`">
+    <div :style="`width: ${parentWidth}px`">
       <VuePDF ref="vuePDFRef" :pdf="pdf" fit-parent />
     </div>
   </div>
@@ -48,13 +48,13 @@ function fitParentWidth(pxs) {
 }
 </script>
 
-<div style="text-align: center">
+<div class="container">
     <div>
         <button class="button-example" @click="fitParentWidth(-50)">Remove 50px</button>
         <span>Parent width: {{parentWidth}}px</span>
         <button class="button-example" @click="fitParentWidth(50)">Add 50px</button>
     </div>
-    <div :style="`width: ${parentWidth}px; display: inline-block`">
+    <div :style="`width: ${parentWidth}px`">
         <VuePDF ref="vuePDFRef" :pdf="pdf" fit-parent />
     </div>
 </div>
diff --git a/docs/examples/advanced/multiple_pdf.md b/docs/examples/advanced/multiple_pdf.md
@@ -4,7 +4,6 @@
 <script setup>
 import { ref, watch } from 'vue'
 import { VuePDF, usePDF } from '@tato30/vue-pdf'
-import { withBase } from '@vuepress/client'
 
 const currentPdfIndex = ref(0)
 const pdfSources = [
@@ -33,9 +32,9 @@ function nextPdf() {
 </script>
 
 <template>
-  <div style="text-align: center">
+  <div>
     <div>
-      <button class="button-example" @click="nextPdf">
+      <button @click="nextPdf">
         Next PDF
       </button>
     </div>
@@ -75,7 +74,7 @@ function nextPdf() {
 }
 </script>
 
-<div style='text-align: center'>
+<div class="container">
     <div>
         <button class="button-example" @click="nextPdf">Next PDF</button>
     </div>

diff --git a/docs/examples/annotation_events/annotation_attachment.md b/docs/examples/annotation_events/annotation_attachment.md
@@ -11,9 +11,11 @@ function onAnnotation(value) {
 }
 </script>
 
-<div style="text-align: center">
-  <VuePDF :pdf="pdf" annotation-layer @annotation="onAnnotation" />
-</div>
+<template>
+  <div>
+    <VuePDF :pdf="pdf" annotation-layer image-resources-path="https://unpkg.com/pdfjs-dist@latest/web/images/" @annotation="onAnnotation" />
+  </div>
+</template>
 ```
 <div class="language-json" data-ext="json">
     <pre class="language-json"><code>// "content" is a uint8Array<br/>{{ eventValue }}</code></pre>
@@ -32,6 +34,6 @@ function onAnnotation(value) {
 }
 </script>
 
-<div style="text-align: center">
-  <VuePDF :pdf="pdf" annotation-layer @annotation="onAnnotation" />
+<div class="container">
+  <VuePDF :pdf="pdf" annotation-layer @annotation="onAnnotation" image-resources-path="https://unpkg.com/pdfjs-dist@latest/web/images/" />
 </div>
diff --git a/docs/examples/annotation_events/annotation_forms.md b/docs/examples/annotation_events/annotation_forms.md
@@ -11,9 +11,11 @@ function onAnnotation(value) {
 }
 </script>
 
-<div style="text-align: center">
-  <VuePDF :pdf="pdf" annotation-layer @annotation="onAnnotation" />
-</div>
+<template>
+  <div>
+    <VuePDF :pdf="pdf" annotation-layer @annotation="onAnnotation" />
+  </div>
+</template>
 ```
 <div class="language-json" data-ext="json">
     <pre class="language-json"><code>{{ eventValue }}</code></pre>
@@ -32,6 +34,6 @@ function onAnnotation(value) {
 }
 </script>
 
-<div style="text-align: center">
+<div class="container">
   <VuePDF :pdf="pdf" annotation-layer @annotation="onAnnotation" />
 </div>
diff --git a/docs/examples/annotation_events/annotation_links.md b/docs/examples/annotation_events/annotation_links.md
@@ -11,9 +11,11 @@ function onAnnotation(value) {
 }
 </script>
 
-<div style="text-align: center">
-  <VuePDF :pdf="pdf" annotation-layer @annotation="onAnnotation" />
-</div>
+<template>
+  <div>
+    <VuePDF :pdf="pdf" annotation-layer @annotation="onAnnotation" />
+  </div>
+</template>
 ```
 <div class="language-json" data-ext="json">
     <pre class="language-json"><code>{{ eventValue }}</code></pre>
@@ -32,7 +34,7 @@ function onAnnotation(value) {
 }
 </script>
 
-<div style="text-align: center">
+<div class="container">
   <VuePDF :pdf="pdf" annotation-layer @annotation="onAnnotation" />
   <VuePDF :pdf="pdf" :page="6" annotation-layer @annotation="onAnnotation" />
 </div>
diff --git a/docs/examples/basic/all_pages.md b/docs/examples/basic/all_pages.md
@@ -19,6 +19,6 @@ import { usePDF, VuePDF } from '@tato30/vue-pdf';
 const { pdf, pages } = usePDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')
 </script>
 
-<div style="text-align: center" v-for="page in pages">
+<div class="container" v-for="page in pages">
     <VuePDF :pdf="pdf" :page="page" />
 </div>
diff --git a/docs/examples/basic/annotation_layer.md b/docs/examples/basic/annotation_layer.md
@@ -4,13 +4,14 @@
 <script setup>
 import { ref } from 'vue'
 import { VuePDF, usePDF } from '@tato30/vue-pdf'
+import '@tato30/vue-pdf/style.css'
 
 const annotation_layer = ref(false)
 const { pdf } = usePDF('example_014.pdf')
 </script>
 
 <template>
-  <div style="text-align: center">
+  <div>
     <div>
       <button @click="annotation_layer = !annotation_layer">
         Change to {{ !annotation_layer }}
@@ -29,7 +30,7 @@ const annotation_layer = ref(false)
 const { pdf } = usePDF(withBase('/example_014.pdf'))
 </script>
 
-<div style="text-align: center">
+<div class="container">
   <div>
     <button class="button-example" @click="annotation_layer = !annotation_layer">
       Change to <strong>{{ !annotation_layer }}</strong>

diff --git a/docs/examples/basic/one_page.md b/docs/examples/basic/one_page.md
@@ -10,7 +10,7 @@ const { pdf, pages } = usePDF('https://mozilla.github.io/pdf.js/web/compressed.t
 </script>
 
 <template>
-  <div style="text-align: center">
+  <div>
     <div>
       <button @click="page = page > 1 ? page - 1 : page">
         Prev
@@ -32,7 +32,7 @@ const page = ref(1)
 const { pdf, pages } = usePDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')
 </script>
 
-<div style='text-align: center'>
+<div class="container">
     <div>
       <button class="button-example" @click="page = page > 1? page - 1 : page">PREV</button>
       <span>{{page}}/{{pages}}</span>

diff --git a/docs/examples/basic/rotation.md b/docs/examples/basic/rotation.md
@@ -10,7 +10,7 @@ const { pdf } = usePDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edea
 </script>
 
 <template>
-  <div style="text-align: center">
+  <div>
     <div>
       <button @click="rotation = rotation - 90">
         -90
@@ -32,7 +32,7 @@ const rotation = ref(0)
 const { pdf } = usePDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')
 </script>
 
-<div style="text-align: center">
+<div class="container">
   <div>
     <button class="button-example" @click="rotation = rotation - 90">
       - 90°

diff --git a/docs/examples/basic/scale.md b/docs/examples/basic/scale.md
@@ -10,7 +10,7 @@ const { pdf } = usePDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edea
 </script>
 
 <template>
-  <div style="text-align: center">
+  <div>
     <div>
       <button @click="scale = scale > 0.25 ? scale - 0.25 : scale">
         -
@@ -32,7 +32,7 @@ const scale = ref(1)
 const { pdf } = usePDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')
 </script>
 
-<div style="text-align: center">
+<div class="container">
   <div>
     <button class="button-example" @click="scale = scale > 0.25 ? scale - 0.25 : scale">
       -

diff --git a/docs/examples/basic/text_layer.md b/docs/examples/basic/text_layer.md
@@ -4,13 +4,14 @@
 <script setup>
 import { ref } from 'vue'
 import { VuePDF, usePDF } from '@tato30/vue-pdf'
+import '@tato30/vue-pdf/style.css'
 
 const text_layer = ref(false)
 const { pdf } = usePDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')
 </script>
 
 <template>
-  <div style="text-align: center">
+  <div>
     <div>
       <button @click="text_layer = !text_layer">
         Change to {{ !text_layer }}
@@ -23,12 +24,13 @@ const { pdf } = usePDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edea
 <script setup>
 import { ref } from 'vue'
 import { VuePDF, usePDF } from '@tato30/vue-pdf'
+import '@tato30/vue-pdf/style.css'
 
 const text_layer = ref(false)
 const { pdf } = usePDF('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')
 </script>
 
-<div style="text-align: center">
+<div class="container">
   <div>
     <button class="button-example" @click="text_layer = !text_layer">
       Change to <strong>{{ !text_layer }}</strong>

diff --git a/docs/examples/loaded_events/loaded.md b/docs/examples/loaded_events/loaded.md
@@ -11,9 +11,11 @@ function onLoaded(value) {
 }
 </script>
 
-<div style="text-align: center">
-  <VuePDF :pdf="pdf"  @loaded="onLoaded" />
-</div>
+<template>
+  <div>
+    <VuePDF :pdf="pdf" @loaded="onLoaded" />
+  </div>
+</template>
 ```
 <div class="language-json" data-ext="json">
     <pre class="language-json"><code>{{ eventValue }}</code></pre>
@@ -32,6 +34,6 @@ function onLoaded(value) {
 }
 </script>
 
-<div style="text-align: center">
+<div class="container">
   <VuePDF :pdf="pdf" @loaded="onLoaded" />
 </div>