{"_id":"@alterthego/vpdf","_rev":"5-32e014f339a65c615636d5f622cc8ba7","name":"@alterthego/vpdf","dist-tags":{"latest":"1.0.6"},"versions":{"1.0.2":{"name":"@alterthego/vpdf","version":"1.0.2","keywords":["pdf","vue","pdfjs","pdfjs-dist","viewer","tailwindcss"],"_id":"@alterthego/vpdf@1.0.2","maintainers":[{"name":"alterthego","email":"theosuaking@gmail.com"}],"homepage":"https://whykhamist.github.io/vpdf","bugs":{"url":"https://github.com/whykhamist/vpdf/issues"},"dist":{"shasum":"75e1a1a797447cf28ee4fd31de2ec0c317549647","tarball":"https://registry.npmjs.org/@alterthego/vpdf/-/vpdf-1.0.2.tgz","fileCount":101,"integrity":"sha512-B8xHa1DPU9iFZP0hvzSTTn7ya2M7+UYl3PdFhHBnkaI5SfarmeFTrNTBHPcfetQVFijDesA8mO7GOYjp5cxxLg==","signatures":[{"sig":"MEYCIQCQtBcbJAti++z8vrYLI+CVMPg28frdYoYzCnU1tqwhowIhAPK4IdRetSPJ5pSZ69gmZHtTqBWSH8vfeJ3Pa5qAMrtW","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":389345},"main":"./dist/index.umd.cjs","type":"module","types":"./dist/types/index.d.ts","module":"./dist/index","exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/index","require":"./dist/index.umd.cjs"},"./src/*":"./src/*","./style.css":"./dist/index.css"},"gitHead":"340ddd99ed1b966197ec39a0db08996e3f2eae40","scripts":{"build":"vue-tsc -b && npm run build:lib && npm run build:dts","build:dts":"vue-tsc --declaration --emitDeclarationOnly -p tsconfig.build.json","build:lib":"vite build"},"_npmUser":{"name":"alterthego","email":"theosuaking@gmail.com"},"repository":{"url":"git+https://github.com/whykhamist/vpdf.git","type":"git"},"_npmVersion":"10.9.2","description":"Custom PDF viewer for Vue. Built on top of [PDF.js](https://github.com/mozilla/pdf.js)","directories":{},"resolutions":{"prettier":"2.8.8","prettier-plugin-tailwindcss":"0.4.1"},"_nodeVersion":"22.16.0","dependencies":{"pdfjs-dist":"^4.10.38","@whykhamist/file-icons":"^1.0.2","@whykhamist/mime-types":"^1.0.3"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.85.1","vite":"^6.2.1","postcss":"^8.5.3","vue-tsc":"^2.2.8","prettier":"3.5.3","typescript":"^5.8.2","tailwindcss":"^3.4.17","autoprefixer":"^10.4.21","postcss-import":"^16.1.0","@vitejs/plugin-vue":"^5.2.1","prettier-plugin-tailwindcss":"0.6.11"},"peerDependencies":{"vue":"^3.4.31"},"_npmOperationalInternal":{"tmp":"tmp/vpdf_1.0.2_1754626306640_0.26218265217527525","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@alterthego/vpdf","version":"1.0.3","keywords":["pdf","vue","pdfjs","pdfjs-dist","viewer","tailwindcss"],"_id":"@alterthego/vpdf@1.0.3","maintainers":[{"name":"alterthego","email":"theosuaking@gmail.com"}],"homepage":"https://whykhamist.github.io/vpdf","bugs":{"url":"https://github.com/whykhamist/vpdf/issues"},"dist":{"shasum":"18fe67604d65d6d9858c70468dd0c04cc4fdc8d4","tarball":"https://registry.npmjs.org/@alterthego/vpdf/-/vpdf-1.0.3.tgz","fileCount":116,"integrity":"sha512-HFSAhKj1zetldAO9kKPdBc43aTwZdnuXmR3xuzmdGyvmnIQdWpD75FDAVIJhEuENy3sldOt4HGhwTnDK9KmMGw==","signatures":[{"sig":"MEQCIFyFI1+cyvIrksYCKhDwhZHR3182OeYPh+7mPPc8wGrwAiALdRdVyUtAbo++LxZNYp9Sh0H1mMJMHZMINpp8gmuqhw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":11145828},"main":"./dist/index.umd.cjs","type":"module","types":"./dist/types/index.d.ts","module":"./dist/index","exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/index","require":"./dist/index.umd.cjs"},"./src/*":"./src/*","./style.css":"./dist/index.css"},"gitHead":"340ddd99ed1b966197ec39a0db08996e3f2eae40","scripts":{"build":"vue-tsc -b && npm run build:lib && npm run build:dts","build:dts":"vue-tsc --declaration --emitDeclarationOnly -p tsconfig.build.json","build:lib":"vite build"},"_npmUser":{"name":"alterthego","email":"theosuaking@gmail.com"},"repository":{"url":"git+https://github.com/whykhamist/vpdf.git","type":"git"},"_npmVersion":"10.9.2","description":"Custom PDF viewer for Vue. Built on top of [PDF.js](https://github.com/mozilla/pdf.js)","directories":{},"resolutions":{"prettier":"2.8.8","prettier-plugin-tailwindcss":"0.4.1"},"_nodeVersion":"22.16.0","dependencies":{"pdfjs-dist":"^4.10.38","@whykhamist/file-icons":"^1.0.2","@whykhamist/mime-types":"^1.0.3"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.85.1","vite":"^6.2.1","postcss":"^8.5.3","vue-tsc":"^2.2.8","prettier":"3.5.3","typescript":"^5.8.2","tailwindcss":"^3.4.17","autoprefixer":"^10.4.21","postcss-import":"^16.1.0","@vitejs/plugin-vue":"^5.2.1","prettier-plugin-tailwindcss":"0.6.11"},"peerDependencies":{"vue":"^3.4.31"},"_npmOperationalInternal":{"tmp":"tmp/vpdf_1.0.3_1754631504018_0.8552373402343563","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"@alterthego/vpdf","version":"1.0.4","keywords":["pdf","vue","pdfjs","pdfjs-dist","viewer","tailwindcss"],"_id":"@alterthego/vpdf@1.0.4","maintainers":[{"name":"alterthego","email":"theosuaking@gmail.com"}],"homepage":"https://whykhamist.github.io/vpdf","bugs":{"url":"https://github.com/whykhamist/vpdf/issues"},"dist":{"shasum":"9cc973de7786d201a8c2e91d51f12b80e6ac05d2","tarball":"https://registry.npmjs.org/@alterthego/vpdf/-/vpdf-1.0.4.tgz","fileCount":116,"integrity":"sha512-GUorEl1+ynLOGrug57emZPr2UL99m+ub26URsQfWOd56OHqF+mDxeIsTpJcBF8zKHr/AJWp/dtwu0xKkCtULsQ==","signatures":[{"sig":"MEUCIQCFg/rz5aUYqa0m/VnFFr4sBP/Fdd8Kx9hB5KFqa+0nPwIgHerlT3txKmaabqj6dFMweu7aKnHmSEPig6V8kNnWZpU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":11146358},"main":"./dist/index.umd.cjs","type":"module","types":"./dist/types/index.d.ts","module":"./dist/index","exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/index","require":"./dist/index.umd.cjs"},"./src/*":"./src/*","./style.css":"./dist/index.css"},"gitHead":"340ddd99ed1b966197ec39a0db08996e3f2eae40","scripts":{"build":"vue-tsc -b && npm run build:lib && npm run build:dts","build:dts":"vue-tsc --declaration --emitDeclarationOnly -p tsconfig.build.json","build:lib":"vite build"},"_npmUser":{"name":"alterthego","email":"theosuaking@gmail.com"},"repository":{"url":"git+https://github.com/whykhamist/vpdf.git","type":"git"},"_npmVersion":"10.9.2","description":"Custom PDF viewer for Vue. Built on top of [PDF.js](https://github.com/mozilla/pdf.js)","directories":{},"resolutions":{"prettier":"2.8.8","prettier-plugin-tailwindcss":"0.4.1"},"_nodeVersion":"22.16.0","dependencies":{"pdfjs-dist":"^4.10.38","@whykhamist/file-icons":"^1.0.2","@whykhamist/mime-types":"^1.0.3"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.85.1","vite":"^6.2.1","postcss":"^8.5.3","vue-tsc":"^2.2.8","prettier":"3.5.3","typescript":"^5.8.2","tailwindcss":"^3.4.17","autoprefixer":"^10.4.21","postcss-import":"^16.1.0","@vitejs/plugin-vue":"^5.2.1","prettier-plugin-tailwindcss":"0.6.11"},"peerDependencies":{"vue":"^3.4.31"},"_npmOperationalInternal":{"tmp":"tmp/vpdf_1.0.4_1754962378384_0.9555536073672579","host":"s3://npm-registry-packages-npm-production"}},"1.0.5":{"name":"@alterthego/vpdf","version":"1.0.5","keywords":["pdf","vue","pdfjs","pdfjs-dist","viewer","tailwindcss"],"_id":"@alterthego/vpdf@1.0.5","maintainers":[{"name":"alterthego","email":"theosuaking@gmail.com"}],"homepage":"https://whykhamist.github.io/vpdf","bugs":{"url":"https://github.com/whykhamist/vpdf/issues"},"dist":{"shasum":"9fa81efd8225fa525ed50b42812b8c61414ed028","tarball":"https://registry.npmjs.org/@alterthego/vpdf/-/vpdf-1.0.5.tgz","fileCount":116,"integrity":"sha512-3Hi0G2PIhREy2eJOMfPbjC74/WpJzpM1tuSd04uLgb4xRbXwofltxKP/dR2DcpwmQLyQ3YaM4ihWU5K3DlvW8w==","signatures":[{"sig":"MEUCIQDQIz8JbkikSzxQjr2P1ROYvJjANSK/Tt6yGoulucPt+QIgceShjA6QlntepAmzpCetYJ3E5QY1hB3lSfbKbkPVYjw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":11147003},"main":"./dist/index.umd.cjs","type":"module","types":"./dist/types/index.d.ts","module":"./dist/index","exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/index","require":"./dist/index.umd.cjs"},"./src/*":"./src/*","./style.css":"./dist/index.css"},"gitHead":"8e0f3a952d9a36c00d7185e68fc970b75bbd389a","scripts":{"build":"vue-tsc -b && npm run build:lib && npm run build:dts","build:dts":"vue-tsc --declaration --emitDeclarationOnly -p tsconfig.build.json","build:lib":"vite build"},"_npmUser":{"name":"alterthego","email":"theosuaking@gmail.com"},"repository":{"url":"git+https://github.com/whykhamist/vpdf.git","type":"git"},"_npmVersion":"10.9.2","description":"Custom PDF viewer for Vue. Built on top of [PDF.js](https://github.com/mozilla/pdf.js)","directories":{},"resolutions":{"prettier":"2.8.8","prettier-plugin-tailwindcss":"0.4.1"},"_nodeVersion":"22.16.0","dependencies":{"pdfjs-dist":"^4.10.38","@whykhamist/file-icons":"^1.0.2","@whykhamist/mime-types":"^1.0.3"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.85.1","vite":"^6.2.1","postcss":"^8.5.3","vue-tsc":"^2.2.8","prettier":"3.5.3","typescript":"^5.8.2","tailwindcss":"^3.4.17","autoprefixer":"^10.4.21","postcss-import":"^16.1.0","@vitejs/plugin-vue":"^5.2.1","prettier-plugin-tailwindcss":"0.6.11"},"peerDependencies":{"vue":"^3.4.31"},"_npmOperationalInternal":{"tmp":"tmp/vpdf_1.0.5_1755073683529_0.3804590534362704","host":"s3://npm-registry-packages-npm-production"}},"1.0.6":{"name":"@alterthego/vpdf","version":"1.0.6","type":"module","main":"./dist/index.umd.cjs","module":"./dist/index","types":"./dist/types/index.d.ts","repository":{"type":"git","url":"git+https://github.com/whykhamist/vpdf.git"},"homepage":"https://whykhamist.github.io/vpdf","exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/index","require":"./dist/index.umd.cjs"},"./style.css":"./dist/index.css","./src/*":"./src/*"},"scripts":{"build":"vue-tsc -b && npm run build:lib && npm run build:dts","build:lib":"vite build","build:dts":"vue-tsc --declaration --emitDeclarationOnly -p tsconfig.build.json"},"keywords":["pdf","vue","pdfjs","pdfjs-dist","viewer","tailwindcss"],"peerDependencies":{"vue":"^3.4.31"},"dependencies":{"@whykhamist/file-icons":"^1.0.2","@whykhamist/mime-types":"^1.0.3","pdfjs-dist":"^4.10.38"},"devDependencies":{"@vitejs/plugin-vue":"^5.2.1","autoprefixer":"^10.4.21","postcss":"^8.5.3","postcss-import":"^16.1.0","prettier":"3.5.3","prettier-plugin-tailwindcss":"0.6.11","sass":"^1.85.1","tailwindcss":"^3.4.17","typescript":"^5.8.2","vite":"^6.2.1","vue-tsc":"^2.2.8"},"resolutions":{"prettier":"2.8.8","prettier-plugin-tailwindcss":"0.4.1"},"_id":"@alterthego/vpdf@1.0.6","gitHead":"49cda68113628927d4a2452ce84aff4aed58c5af","description":"Custom PDF viewer for Vue. Built on top of [PDF.js](https://github.com/mozilla/pdf.js)","bugs":{"url":"https://github.com/whykhamist/vpdf/issues"},"_nodeVersion":"22.16.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-h7d3F5mxg3NIK3WzPTDmH0Vp+hLeq3asiq8eNQDhhqiCXtDThALA7bY0OhwTuIjyLFC3qP9KTd7bmXDijmo+LA==","shasum":"ed1d4f2e9f8d9d0ea5377cc569b7fefc05531ffb","tarball":"https://registry.npmjs.org/@alterthego/vpdf/-/vpdf-1.0.6.tgz","fileCount":116,"unpackedSize":11146892,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDoQbS/lrmNDbdKRFEwOCfc+sxG6kVf2CpfMv1oqqloCQIhAPjq2xjNyzR03FUrP+e0poHdnYcGxKYDR5wH58FkcoUB"}]},"_npmUser":{"name":"alterthego","email":"theosuaking@gmail.com"},"directories":{},"maintainers":[{"name":"alterthego","email":"theosuaking@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vpdf_1.0.6_1755074642159_0.6426877262162316"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-08T04:11:46.480Z","modified":"2025-08-13T08:44:02.585Z","1.0.2":"2025-08-08T04:11:46.834Z","1.0.3":"2025-08-08T05:38:24.312Z","1.0.4":"2025-08-12T01:32:58.817Z","1.0.5":"2025-08-13T08:28:03.774Z","1.0.6":"2025-08-13T08:44:02.407Z"},"bugs":{"url":"https://github.com/whykhamist/vpdf/issues"},"homepage":"https://whykhamist.github.io/vpdf","keywords":["pdf","vue","pdfjs","pdfjs-dist","viewer","tailwindcss"],"repository":{"type":"git","url":"git+https://github.com/whykhamist/vpdf.git"},"description":"Custom PDF viewer for Vue. Built on top of [PDF.js](https://github.com/mozilla/pdf.js)","maintainers":[{"name":"alterthego","email":"theosuaking@gmail.com"}],"readme":"# Vue PDF (VPDF)\r\n\r\nCustom PDF viewer for Vue. Built on top of [PDF.js](https://github.com/mozilla/pdf.js)\r\n\r\n- [Features](#features)\r\n- [Installation](#installation)\r\n- [Setup](#setup)\r\n- [Usage](#usage)\r\n  - [Styles](#styles)\r\n- [Components](#components)\r\n  - [`VPdf`](#vpdf)\r\n  - [`VPdfViewer`](#vpdfviewer)\r\n  - [`VPdfPageRenderer`](#vpdfpagerenderer)\r\n- [Composables](#composables)\r\n  - [`usePdf`](#usepdf)\r\n  - [`usePdfViewer`](#usepdfviewer)\r\n- [Types](#types)\r\n\r\n## Features\r\n\r\n- Utilizes `virtual scrolling` to render PDFs with huge page count\r\n- Supports password protected PDFs\r\n- Textlayer support\r\n- PDF Thumbnails\r\n- PDF Bookmarks\r\n- Show/download Attachments\r\n\r\n## Installation\r\n\r\n```js\r\n$ npm i @whykhamist/vpdf\r\n```\r\n\r\n## Setup\r\n\r\n```js\r\nimport { createApp } from \"vue\";\r\nimport App from \"./app.vue\";\r\nimport VPdf from \"@whykhamist/vpdf\";\r\n\r\nimport \"@whykhamist/vpdf/style.css\";\r\n\r\nasync function init() {\r\n  const app = createApp(App);\r\n  app.use(VPdf);\r\n  app.mount(\"#app\");\r\n}\r\n\r\ninit();\r\n```\r\n\r\n## Usage\r\n\r\n```js\r\nimport { ref } from \"vue\";\r\n\r\n// acrobat_reference.pdf (651 pages): https://helpx.adobe.com/pdf/acrobat_reference.pdf\r\n\r\n// pdfreference1.7old.pdf (1310 pages)\r\nconst src = ref(\r\n  \"https://opensource.adobe.com/dc-acrobat-sdk-docs/pdfstandards/pdfreference1.7old.pdf\"\r\n);\r\nconst smoothJump = ref(false);\r\nconst textLayer = ref(false);\r\nconst theme = ref(\"\"); // blank for light, vpdf-dark for dark\r\n```\r\n\r\n```html\r\n<template>\r\n  <VPdf\r\n    :src=\"src\"\r\n    :smoothJump=\"smoothJump\"\r\n    :textLayer=\"textLayer\"\r\n    :class=\"theme\"\r\n  />\r\n</template>\r\n```\r\n\r\n### Styles\r\n\r\nColors can be customized using css variables:\r\n`Default` colors for light & dark modes\r\n\r\n```css\r\n:root {\r\n  --vpdf-foreground: 213deg 13% 14%;\r\n  --vpdf-background: 0deg 0% 100%;\r\n  --vpdf-primary: 211deg 32% 26%;\r\n  --vpdf-secondary: 211deg 46% 69%;\r\n  --vpdf-accent: 211deg 62% 44%;\r\n\r\n  --vpdf-positive: 125deg 42% 50%;\r\n  --vpdf-negative: 3deg 75% 60%;\r\n}\r\n\r\n.vpdf-dark {\r\n  --vpdf-foreground: 213deg 26% 82%;\r\n  --vpdf-background: 215deg 18% 13%;\r\n  --vpdf-primary: 211deg 32% 74%;\r\n  --vpdf-secondary: 211deg 46% 31%;\r\n  --vpdf-accent: 211deg 62% 56%;\r\n}\r\n```\r\n\r\nWe can also add our custom colors\r\n\r\n```html\r\n<style lang=\"scss\">\r\n  .vpdf-sepia {\r\n    --vpdf-foreground: 34 33% 20%;\r\n    --vpdf-background: 42 54% 88%;\r\n    --vpdf-primary: 34 20% 51%;\r\n    --vpdf-secondary: 60 19% 73%;\r\n    --vpdf-accent: 75 19% 63%;\r\n  }\r\n</style>\r\n<template>\r\n  <VPdf\r\n    :src=\"src\"\r\n    :smoothJump=\"smoothJump\"\r\n    :textLayer=\"textLayer\"\r\n    class=\"vpdf-sepia\"\r\n  />\r\n</template>\r\n```\r\n\r\n## Components\r\n\r\n### VPdf\r\n\r\n> A complete PDF viewer component with the most common features and configurations\r\n\r\n#### Features\r\n\r\n- Password prompt dialog\r\n- Collapsible Side bar for navigation and attachments\r\n  - Thumbnails\r\n  - Bookmarks\r\n  - Attachments (Download file only)\r\n- View toggle (Vertical/Horizontal page scrolling)\r\n- Rotate page\r\n- Zoom in/out buttons\r\n- `ctrl + scroll` to zoom in/out\r\n- Scale selector\r\n  - with fit to page, width and height options\r\n- Page number indicator _(Can enter page number and jump to that page)_\r\n- Next/Previous page buttons\r\n\r\n#### Properties\r\n\r\n| Property     | Type      | Default | Description                                                                                                                          |\r\n| ------------ | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |\r\n| `src`        | pdfSource | -       | PDF source                                                                                                                           |\r\n| `workerSrc`  | String    | `1.0`   | link to your custom pdf worker                                                                                                       |\r\n| `smoothJump` | Boolean   | false   | Smooth scroll into selected page                                                                                                     |\r\n| `textLayer`  | Boolean   | false   | Show text layer                                                                                                                      |\r\n| `password`   | String    | -       | Password for encrypted PDF                                                                                                           |\r\n| `onPassword` | Function  | -       | Pass a callback function to create a custom prompt for password. <br/><br/>`VPdf` already has a built-in dialog for password prompt. |\r\n|              |           |         |\r\n\r\n#### sample `onPassword`\r\n\r\n```js\r\nconst onPassword = (cb: Function, reason: Number) => {\r\n  const password = prompt(\"Please enter the password\");\r\n  cb(password);\r\n};\r\n```\r\n\r\n---\r\n\r\n### VPdfViewer\r\n\r\n> A PDF viewer component without the side & top menu bars, Use this to build/style your custom PDF viewer.\r\n\r\n> `VPdf` uses this component internally\r\n\r\n> [!NOTE]\r\n> You will need to use the [`usePdf`](#usepdf) composables to use this component\r\n\r\n> [!NOTE]\r\n> This component uses the [`usePdfViewer`](#usepdfviewer) composable internally\r\n\r\n#### Properties\r\n\r\n| Property       | Type                      | Default  | Description                                                                                                                                                                                    |\r\n| -------------- | ------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| `pdf`          | PDFDocumentLoadingTask    | --       | The loading task controls the operations required to load a PDF document (such as network requests) and provides a way to listen for completion, after which individual pages can be rendered. |\r\n| `scale`        | Number                    | 1.0      | The scale/zoom factor for the PDF viewer                                                                                                                                                       |\r\n| `gap`          | Number                    | 10       | The gap between pages in pixels                                                                                                                                                                |\r\n| `rotation`     | Number                    | 0        | The rotation angle in degrees for the PDF pages. (Must be a multiple of 90)                                                                                                                    |\r\n| `view`         | [\"vertical\",\"horizontal\"] | vertical | The view mode for the PDF viewer.                                                                                                                                                              |\r\n| `page`         | Number                    | 1        | The initial page number to display.                                                                                                                                                            |\r\n| `textLayer`    | Boolean                   | false    | Show text layer                                                                                                                                                                                |\r\n| `smoothJump`   | Boolean                   | false    | Smooth scroll into selected page                                                                                                                                                               |\r\n| `renderDelay`  | Number                    | 50       | Delay in milliseconds before rendering a page                                                                                                                                                  |\r\n| `renderOffset` | Number                    | 256      | Offset in pixels to add around the page to determine if it is visible.                                                                                                                         |\r\n| `onProgress`   | Function                  | -        | Pass a callback function to get the loading progress.                                                                                                                                          |\r\n|                |                           |          |\r\n\r\n---\r\n\r\n### VPdfPageRenderer\r\n\r\n> Renders a single PDF page\r\n\r\n#### Properties\r\n\r\n| Property    | Type                   | Default | Description                                                                                                                                               |\r\n| ----------- | ---------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| `pageInfo`  | pdfPageInfo            | -       | An object that contains all relative information to render the page <br/><br/> Use the [`usePdfViewer`](#usepdfviewer) composable to get this information |\r\n| `pdf`       | PDFDocumentLoadingTask | -       | --                                                                                                                                                        |\r\n| `textLayer` | Boolean                | false   | Show text layer                                                                                                                                           |\r\n| `render`    | Boolean                | false   | Render the page                                                                                                                                           |\r\n| `onRender`  | Function               | -       | A callback function that is called whenever the page is rendered.                                                                                         |\r\n| `onError`   | Function               | -       | A callback function that is called whenever an error occurs.                                                                                              |\r\n|             |                        |         |\r\n\r\n#### Exposed\r\n\r\n| Property  | Type                     | Default | Description        |\r\n| --------- | ------------------------ | ------- | ------------------ |\r\n| `context` | CanvasRenderingContext2D | -       | The canvas context |\r\n| `canvas`  | HTMLCanvasElement        | -       | The canvas element |\r\n|           |                          |         |                    |\r\n\r\n## Composables\r\n\r\n### usePdf\r\n\r\n> This composable is responsible for loading PDF from a source. It returns a `pdf` object that can be used to render the PDF. It also returns the number of pages, outline (bookmars), attachments, metadata, progress , and javascript of the PDF.\r\n\r\n```ts\r\nimport { usePdf } from \"@whykhamist/vpdf\";\r\n\r\nconst pdf = usePdf(pdfSource, options);\r\n\r\nconst src = ref(\r\n  \"https://opensource.adobe.com/dc-acrobat-sdk-docs/pdfstandards/pdfreference1.7old.pdf\"\r\n);\r\n\r\nconst options = ref({\r\n  workerSrc: \"YOUR_WORKER_SRC\",\r\n  password: \"PDF_PASSWORD_IF_NEEDED\",\r\n  onError: (error: any) => {},\r\n  onProgress: (data: OnProgressParameters) => {},\r\n  onPassword: (callback: Function, reason: any) => {},\r\n});\r\n\r\nconst {\r\n  pdf,\r\n  pages,\r\n  outline,\r\n  attachments,\r\n  metadata,\r\n  progress,\r\n  javascript,\r\n  loading,\r\n} = usePdf(src, options);\r\n```\r\n\r\n#### Parameters\r\n\r\n| Parameter | Type                          | Description                            |\r\n| --------- | ----------------------------- | -------------------------------------- |\r\n| `src`     | Ref\\<pdfSource\\> \\| pdfSource | (Required) The source of the PDF file. |\r\n| `options` | pdfOptions                    | (Optional) The options for the PDF.    |\r\n|           |                               |                                        |\r\n\r\n#### Returns\r\n\r\n| Property      | Type                   | Description                                                                           |\r\n| ------------- | ---------------------- | ------------------------------------------------------------------------------------- |\r\n| `pdf`         | PDFDocumentLoadingTask | The PDF object.                                                                       |\r\n| `pages`       | Number                 | The number of pages in the PDF.                                                       |\r\n| `outline`     | Array                  | The outline of the PDF. This contains information regarding the bookmarks in the PDF. |\r\n| `attachments` | Object                 | The list of files attached to the document                                            |\r\n| `metadata`    | any                    | Get the documents meta data                                                           |\r\n| `javascript`  | Array                  | A list of embedded javascripts on the document                                        |\r\n| `progress`    | Number                 | The loading progress of the PDF.                                                      |\r\n| `loading`     | Boolean                | Whether the PDF is currently loading.                                                 |\r\n|               |                        |                                                                                       |\r\n\r\n### usePdfViewer\r\n\r\n> This computes the page information that is needed to render and position pages in the viewport based on the scale, rotation, gaps and view mode. It alsoe determines when to render a page (virtual scrolling).\r\n\r\n```ts\r\nimport { usePdfViewer } from \"@whykhamist/vpdf\";\r\nconst container = ref<HTMLDivElement>();\r\nconst pdfViewer = usePdfViewer(container, options);\r\n```\r\n\r\n```html\r\n<div ref=\"container\"></div>\r\n```\r\n\r\n#### Parameters\r\n\r\n| Parameter   | Type                            | Description                                   |\r\n| ----------- | ------------------------------- | --------------------------------------------- |\r\n| `container` | Ref\\<HTMLElement \\| undefined\\> | (Required) The container to render the PDF in |\r\n| `options`   | pdfViewerOptions                | The options for the PDF.                      |\r\n|             |                                 |                                               |\r\n\r\n#### Parameter: options\r\n\r\n| Property       | Type                                | Default  | Description                                                            |\r\n| -------------- | ----------------------------------- | -------- | ---------------------------------------------------------------------- |\r\n| `pdf`          | PDFDocumentLoadingTask              | --       |                                                                        |\r\n| `page`         | Number                              | 1        | Initial page to display/focus.                                         |\r\n| `scale`        | Number                              | 1        | The scale of the PDF.                                                  |\r\n| `gap`          | Number                              | 10       | The gap (in pixels) between pages .                                    |\r\n| `rotation`     | Number                              | 0        | The rotation of the PDF. (multiple of 90)                              |\r\n| `view`         | String ['vertical' \\| 'horizontal'] | vertical | The view mode of the PDF.                                              |\r\n| `textLayer`    | Boolean                             | false    | Show text layer                                                        |\r\n| `smoothJump`   | Boolean                             | false    | Smooth scroll into pages                                               |\r\n| `renderDelay`  | Number                              | 50       | Delay in milliseconds before rendering a page                          |\r\n| `renderOffset` | Number                              | 256      | Offset in pixels to add around the page to determine if it is visible. |\r\n| `downScale`    | Number                              | 0.87     | Multiplied to the scale to reduce the size of the canvas.              |\r\n|                |                                     |          |                                                                        |\r\n\r\n#### Returns\r\n\r\n| Property          | Type                                | Description                                                    |\r\n| ----------------- | ----------------------------------- | -------------------------------------------------------------- |\r\n| `totalPage`       | Number                              | The total number of pages in the PDF                           |\r\n| `pageInfo`        | Array\\<pdfPageInfo\\>                | Array list of pdfPageInfo (All Pages)                          |\r\n| `containerBounds` | Size                                | The maximum width & height of the container                    |\r\n| `progress`        | OnProgressParameters                | The loading progress of the PDF                                |\r\n| `render`          | Boolean                             | Determines if the page should be rendered after scrolling      |\r\n| `currentPage`     | Number                              | The current page in focus                                      |\r\n| `visiblePages`    | Array<pdfPageInfo>                  | Array list of pdfPageInfo (Only visible Pages in the viewport) |\r\n| `scale`           | Number                              | The scale of the PDF                                           |\r\n| `rotation`        | Number                              | The rotation of the PDF                                        |\r\n| `viewMode`        | String ['vertical' \\| 'horizontal'] | Scroll direction of the PDF                                    |\r\n| `refresh`         | Function                            | Reloads the PDF                                                |\r\n| `nextPage`        | Function                            | Uses the `changePage` to jump to the next page.                |\r\n| `prevPage`        | Function                            | Uses the `changePage` to jump to the previous page.            |\r\n| `changePage`      | Function                            | Jumps to a specific page with optional offset.                 |\r\n| `fitWidth`        | Function                            | Fits the current page to the width of the container            |\r\n| `fitHeight`       | Function                            | Fits the current page to the height of the container           |\r\n| `fitPage`         | Function                            | Fits the current page to the size of the container             |\r\n\r\n## Types\r\n\r\n#### Types from `pdfjs`\r\n\r\n- `pdfjs-dist`\r\n  - PageViewport\r\n- `pdfjs-dist/types/src/display/api`\r\n  - OnProgressParameters\r\n  - PDFDocumentLoadingTask\r\n  - PDFDocumentProxy\r\n  - DocumentInitParameters\r\n  - TypedArray\r\n  - RenderParameters\r\n\r\n```ts\r\ntype Size = {\r\n  width: number;\r\n  height: number;\r\n};\r\n\r\ntype Point = {\r\n  x: number;\r\n  y: number;\r\n};\r\n\r\ntype Bounds = {\r\n  top: number;\r\n  bottom: number;\r\n  left: number;\r\n  right: number;\r\n};\r\n\r\ntype ScrollState = {\r\n  right: boolean;\r\n  down: boolean;\r\n  lastX: number;\r\n  lastY: number;\r\n};\r\n\r\ntype pdfSource =\r\n  | string\r\n  | URL\r\n  | TypedArray\r\n  | ArrayBuffer\r\n  | DocumentInitParameters;\r\n\r\ninterface pdfOptions {\r\n  workerSrc?: string;\r\n  password?: string;\r\n  onError?: (error: any) => void;\r\n  onProgress?: (data: OnProgressParameters) => void;\r\n  onPassword?: (callback: Function, reason: any) => void;\r\n}\r\n\r\ntype pdfOutlineDest = string | Array<any> | null;\r\n\r\ntype pdfOutline = Awaited<ReturnType<PDFDocumentProxy[\"getOutline\"]>>;\r\n\r\ntype pdfOutlinePairs = {\r\n  page: number | null;\r\n  offsetY: number;\r\n  offsetX: number;\r\n  title: string;\r\n  sub: Array<pdfOutlinePairs>;\r\n};\r\n\r\ntype pdfViewerOptions = {\r\n  pdf: PDFDocumentLoadingTask | undefined;\r\n  page: number;\r\n  scale: number;\r\n  gap: number;\r\n  rotation: number;\r\n  view: \"vertical\" | \"horizontal\";\r\n  textLayer: boolean;\r\n  smoothJump: boolean;\r\n  renderDelay: number;\r\n  renderOffset: number;\r\n  downScale?: number;\r\n};\r\n\r\ntype pdfPageInfo = {\r\n  id: string;\r\n  scale: number;\r\n  rotation: number;\r\n  page: number;\r\n  viewport: PageViewport;\r\n  pos: Point;\r\n  bounds: pdfPageBounds;\r\n};\r\n\r\ntype pdfPageBounds = {\r\n  inner: Bounds;\r\n  outer: Bounds;\r\n};\r\n\r\ntype pdfScrollState = {\r\n  rAF: number | null;\r\n  state: ScrollState;\r\n  covered: Point;\r\n  timer: ReturnType<typeof setTimeout> | null;\r\n};\r\n\r\ntype pdfattachmentFile = {\r\n  filename: string;\r\n  content: TypedArray;\r\n  rawFilename: string;\r\n};\r\n\r\ntype pdfattachment = Record<string, pdfattachmentFile>;\r\n```\r\n","readmeFilename":"README.md"}