@embedpdf/vue-pdf-viewer 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 CloudPDF
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,92 @@
+# @embedpdf/vue-pdf-viewer
+
+Vue 3 component for embedding PDF documents with full-featured viewing capabilities.
+
+## Installation
+
+```bash
+npm install @embedpdf/vue-pdf-viewer
+# or
+pnpm add @embedpdf/vue-pdf-viewer
+# or
+yarn add @embedpdf/vue-pdf-viewer
+```
+
+## Usage
+
+```vue
+<template>
+  <PDFViewer
+    :config="{
+      src: '/document.pdf',
+      theme: { preference: 'system' },
+    }"
+    :style="{ width: '100%', height: '100vh' }"
+    @ready="onReady"
+  />
+</template>
+
+<script setup lang="ts">
+import { PDFViewer } from '@embedpdf/vue-pdf-viewer';
+import type { PluginRegistry } from '@embedpdf/vue-pdf-viewer';
+
+function onReady(registry: PluginRegistry) {
+  console.log('PDF viewer ready', registry);
+}
+</script>
+```
+
+## Props
+
+| Prop     | Type              | Description                              |
+| -------- | ----------------- | ---------------------------------------- |
+| `config` | `PDFViewerConfig` | Full configuration object for the viewer |
+| `class`  | `string`          | CSS class name for the container         |
+| `style`  | `CSSProperties`   | Inline styles for the container          |
+
+The `config` prop accepts all configuration options from `@embedpdf/snippet`, including:
+
+- `src` - URL or path to the PDF document
+- `theme` - Theme configuration
+- `zoom` - Zoom configuration
+- `scroll` - Scroll configuration
+- `annotations` - Annotation configuration
+- And more...
+
+## Events
+
+| Event   | Payload             | Description                        |
+| ------- | ------------------- | ---------------------------------- |
+| `init`  | `EmbedPdfContainer` | Emitted when viewer is initialized |
+| `ready` | `PluginRegistry`    | Emitted when registry is ready     |
+
+## Accessing the Registry
+
+Use a template ref to access the viewer container and registry:
+
+```vue
+<template>
+  <PDFViewer
+    ref="viewerRef"
+    :config="{ src: '/document.pdf' }"
+    :style="{ width: '100%', height: '100vh' }"
+  />
+  <button @click="handleClick">Get Registry</button>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { PDFViewer, type PDFViewerExpose } from '@embedpdf/vue-pdf-viewer';
+
+const viewerRef = ref<PDFViewerExpose | null>(null);
+
+async function handleClick() {
+  const registry = await viewerRef.value?.registry;
+  // Use registry to access plugins
+}
+</script>
+```
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),t=require("@embedpdf/snippet"),r=e.defineComponent({name:"PDFViewer",props:{config:{type:Object,default:()=>({})}},emits:{init:e=>!0,ready:e=>!0},setup(r,{emit:n,expose:l,attrs:u}){const o=e.ref(null),i=e.ref(null);return l({get container(){return i.value},get registry(){var e;return(null==(e=i.value)?void 0:e.registry)??null}}),e.onMounted(()=>{if(!o.value)return;const e=t.init({type:"container",target:o.value,...r.config});e&&(i.value=e,n("init",e),e.registry.then(e=>{n("ready",e)}))}),e.onBeforeUnmount(()=>{i.value&&o.value&&(o.value.innerHTML="",i.value=null)}),()=>e.h("div",{ref:o,class:u.class,style:u.style})}});exports.PDFViewer=r,exports.default=r,Object.keys(t).forEach(e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>t[e]})});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../src/index.ts"],"sourcesContent":["import { defineComponent, ref, onMounted, onBeforeUnmount, h, type PropType } from 'vue';\nimport EmbedPDF, {\n  type EmbedPdfContainer,\n  type PDFViewerConfig,\n  type PluginRegistry,\n} from '@embedpdf/snippet';\n\n// Re-export everything from snippet for convenience\nexport * from '@embedpdf/snippet';\n\nexport interface PDFViewerExpose {\n  /** The EmbedPdfContainer element */\n  container: EmbedPdfContainer | null;\n  /** Promise that resolves to the PluginRegistry */\n  registry: Promise<PluginRegistry> | null;\n}\n\n/**\n * Vue component for embedding PDF documents\n *\n * @example\n * ```vue\n * <template>\n *   <PDFViewer\n *     :config=\"{ src: '/document.pdf', theme: { preference: 'system' } }\"\n *     :style=\"{ width: '100%', height: '100vh' }\"\n *     @ready=\"onReady\"\n *   />\n * </template>\n *\n * <script setup lang=\"ts\">\n * import { PDFViewer } from '@embedpdf/vue-pdf-viewer';\n *\n * function onReady(registry) {\n *   console.log('PDF viewer ready', registry);\n * }\n * </script>\n * ```\n */\nexport const PDFViewer = defineComponent({\n  name: 'PDFViewer',\n\n  props: {\n    /** Full configuration for the PDF viewer */\n    config: {\n      type: Object as PropType<PDFViewerConfig>,\n      default: () => ({}),\n    },\n  },\n\n  emits: {\n    /** Emitted when the viewer is initialized */\n    init: (_container: EmbedPdfContainer) => true,\n    /** Emitted when the registry is ready */\n    ready: (_registry: PluginRegistry) => true,\n  },\n\n  setup(props, { emit, expose, attrs }) {\n    const containerRef = ref<HTMLDivElement | null>(null);\n    const viewerRef = ref<EmbedPdfContainer | null>(null);\n\n    // Expose container and registry to parent\n    expose({\n      get container() {\n        return viewerRef.value;\n      },\n      get registry() {\n        return viewerRef.value?.registry ?? null;\n      },\n    } as PDFViewerExpose);\n\n    onMounted(() => {\n      if (!containerRef.value) return;\n\n      // Initialize the viewer with the config prop\n      const viewer = EmbedPDF.init({\n        type: 'container',\n        target: containerRef.value,\n        ...props.config,\n      });\n\n      if (viewer) {\n        viewerRef.value = viewer;\n        emit('init', viewer);\n\n        // Emit ready when registry is available\n        viewer.registry.then((registry) => {\n          emit('ready', registry);\n        });\n      }\n    });\n\n    onBeforeUnmount(() => {\n      // Cleanup: remove the viewer element\n      if (viewerRef.value && containerRef.value) {\n        containerRef.value.innerHTML = '';\n        viewerRef.value = null;\n      }\n    });\n\n    return () =>\n      h('div', {\n        ref: containerRef,\n        class: attrs.class,\n        style: attrs.style,\n      });\n  },\n});\n\nexport default PDFViewer;\n"],"names":["PDFViewer","defineComponent","name","props","config","type","Object","default","emits","init","_container","ready","_registry","setup","emit","expose","attrs","containerRef","ref","viewerRef","container","value","registry","_a","onMounted","viewer","EmbedPDF","target","then","onBeforeUnmount","innerHTML","h","class","style"],"mappings":"kKAuCaA,EAAYC,EAAAA,gBAAgB,CACvCC,KAAM,YAENC,MAAO,CAELC,OAAQ,CACNC,KAAMC,OACNC,QAAS,MAAO,KAIpBC,MAAO,CAELC,KAAOC,IAAkC,EAEzCC,MAAQC,IAA8B,GAGxC,KAAAC,CAAMV,GAAOW,KAAEA,EAAAC,OAAMA,EAAAC,MAAQA,IAC3B,MAAMC,EAAeC,EAAAA,IAA2B,MAC1CC,EAAYD,EAAAA,IAA8B,MAyChD,OAtCAH,EAAO,CACL,aAAIK,GACF,OAAOD,EAAUE,KACnB,EACA,YAAIC,SACF,OAAO,OAAAC,EAAAJ,EAAUE,YAAV,EAAAE,EAAiBD,WAAY,IACtC,IAGFE,EAAAA,UAAU,KACR,IAAKP,EAAaI,MAAO,OAGzB,MAAMI,EAASC,EAASjB,KAAK,CAC3BJ,KAAM,YACNsB,OAAQV,EAAaI,SAClBlB,EAAMC,SAGPqB,IACFN,EAAUE,MAAQI,EAClBX,EAAK,OAAQW,GAGbA,EAAOH,SAASM,KAAMN,IACpBR,EAAK,QAASQ,QAKpBO,EAAAA,gBAAgB,KAEVV,EAAUE,OAASJ,EAAaI,QAClCJ,EAAaI,MAAMS,UAAY,GAC/BX,EAAUE,MAAQ,QAIf,IACLU,EAAAA,EAAE,MAAO,CACPb,IAAKD,EACLe,MAAOhB,EAAMgB,MACbC,MAAOjB,EAAMiB,OAEnB"}

package/dist/index.d.ts

@@ -0,0 +1,58 @@
+import { PropType } from 'vue';
+import { EmbedPdfContainer, PDFViewerConfig, PluginRegistry } from '@embedpdf/snippet';
+export * from '@embedpdf/snippet';
+export interface PDFViewerExpose {
+    /** The EmbedPdfContainer element */
+    container: EmbedPdfContainer | null;
+    /** Promise that resolves to the PluginRegistry */
+    registry: Promise<PluginRegistry> | null;
+}
+/**
+ * Vue component for embedding PDF documents
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <PDFViewer
+ *     :config="{ src: '/document.pdf', theme: { preference: 'system' } }"
+ *     :style="{ width: '100%', height: '100vh' }"
+ *     @ready="onReady"
+ *   />
+ * </template>
+ *
+ * <script setup lang="ts">
+ * import { PDFViewer } from '@embedpdf/vue-pdf-viewer';
+ *
+ * function onReady(registry) {
+ *   console.log('PDF viewer ready', registry);
+ * }
+ * </script>
+ * ```
+ */
+export declare const PDFViewer: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /** Full configuration for the PDF viewer */
+    config: {
+        type: PropType<PDFViewerConfig>;
+        default: () => {};
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    /** Emitted when the viewer is initialized */
+    init: (_container: EmbedPdfContainer) => true;
+    /** Emitted when the registry is ready */
+    ready: (_registry: PluginRegistry) => true;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /** Full configuration for the PDF viewer */
+    config: {
+        type: PropType<PDFViewerConfig>;
+        default: () => {};
+    };
+}>> & Readonly<{
+    onInit?: ((_container: EmbedPdfContainer) => any) | undefined;
+    onReady?: ((_registry: PluginRegistry) => any) | undefined;
+}>, {
+    config: PDFViewerConfig;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default PDFViewer;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuD,KAAK,QAAQ,EAAE,MAAM,KAAK,CAAC;AACzF,OAAiB,EACf,KAAK,iBAAiB,EACtB,KAAK,eAAe,EACpB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AAG3B,cAAc,mBAAmB,CAAC;AAElC,MAAM,WAAW,eAAe;IAC9B,oCAAoC;IACpC,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACpC,kDAAkD;IAClD,QAAQ,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC;CAC1C;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,SAAS;IAIlB,4CAA4C;;cAE1B,QAAQ,CAAC,eAAe,CAAC;;;;;;IAM3C,6CAA6C;uBAC1B,iBAAiB;IACpC,yCAAyC;uBACtB,cAAc;;IAXjC,4CAA4C;;cAE1B,QAAQ,CAAC,eAAe,CAAC;;;;;;;;4EA8D7C,CAAC;AAEH,eAAe,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1,63 @@
+import { defineComponent, ref, onMounted, onBeforeUnmount, h } from "vue";
+import EmbedPDF__default from "@embedpdf/snippet";
+export * from "@embedpdf/snippet";
+const PDFViewer = defineComponent({
+  name: "PDFViewer",
+  props: {
+    /** Full configuration for the PDF viewer */
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: {
+    /** Emitted when the viewer is initialized */
+    init: (_container) => true,
+    /** Emitted when the registry is ready */
+    ready: (_registry) => true
+  },
+  setup(props, { emit, expose, attrs }) {
+    const containerRef = ref(null);
+    const viewerRef = ref(null);
+    expose({
+      get container() {
+        return viewerRef.value;
+      },
+      get registry() {
+        var _a;
+        return ((_a = viewerRef.value) == null ? void 0 : _a.registry) ?? null;
+      }
+    });
+    onMounted(() => {
+      if (!containerRef.value) return;
+      const viewer = EmbedPDF__default.init({
+        type: "container",
+        target: containerRef.value,
+        ...props.config
+      });
+      if (viewer) {
+        viewerRef.value = viewer;
+        emit("init", viewer);
+        viewer.registry.then((registry) => {
+          emit("ready", registry);
+        });
+      }
+    });
+    onBeforeUnmount(() => {
+      if (viewerRef.value && containerRef.value) {
+        containerRef.value.innerHTML = "";
+        viewerRef.value = null;
+      }
+    });
+    return () => h("div", {
+      ref: containerRef,
+      class: attrs.class,
+      style: attrs.style
+    });
+  }
+});
+export {
+  PDFViewer,
+  PDFViewer as default
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["import { defineComponent, ref, onMounted, onBeforeUnmount, h, type PropType } from 'vue';\nimport EmbedPDF, {\n  type EmbedPdfContainer,\n  type PDFViewerConfig,\n  type PluginRegistry,\n} from '@embedpdf/snippet';\n\n// Re-export everything from snippet for convenience\nexport * from '@embedpdf/snippet';\n\nexport interface PDFViewerExpose {\n  /** The EmbedPdfContainer element */\n  container: EmbedPdfContainer | null;\n  /** Promise that resolves to the PluginRegistry */\n  registry: Promise<PluginRegistry> | null;\n}\n\n/**\n * Vue component for embedding PDF documents\n *\n * @example\n * ```vue\n * <template>\n *   <PDFViewer\n *     :config=\"{ src: '/document.pdf', theme: { preference: 'system' } }\"\n *     :style=\"{ width: '100%', height: '100vh' }\"\n *     @ready=\"onReady\"\n *   />\n * </template>\n *\n * <script setup lang=\"ts\">\n * import { PDFViewer } from '@embedpdf/vue-pdf-viewer';\n *\n * function onReady(registry) {\n *   console.log('PDF viewer ready', registry);\n * }\n * </script>\n * ```\n */\nexport const PDFViewer = defineComponent({\n  name: 'PDFViewer',\n\n  props: {\n    /** Full configuration for the PDF viewer */\n    config: {\n      type: Object as PropType<PDFViewerConfig>,\n      default: () => ({}),\n    },\n  },\n\n  emits: {\n    /** Emitted when the viewer is initialized */\n    init: (_container: EmbedPdfContainer) => true,\n    /** Emitted when the registry is ready */\n    ready: (_registry: PluginRegistry) => true,\n  },\n\n  setup(props, { emit, expose, attrs }) {\n    const containerRef = ref<HTMLDivElement | null>(null);\n    const viewerRef = ref<EmbedPdfContainer | null>(null);\n\n    // Expose container and registry to parent\n    expose({\n      get container() {\n        return viewerRef.value;\n      },\n      get registry() {\n        return viewerRef.value?.registry ?? null;\n      },\n    } as PDFViewerExpose);\n\n    onMounted(() => {\n      if (!containerRef.value) return;\n\n      // Initialize the viewer with the config prop\n      const viewer = EmbedPDF.init({\n        type: 'container',\n        target: containerRef.value,\n        ...props.config,\n      });\n\n      if (viewer) {\n        viewerRef.value = viewer;\n        emit('init', viewer);\n\n        // Emit ready when registry is available\n        viewer.registry.then((registry) => {\n          emit('ready', registry);\n        });\n      }\n    });\n\n    onBeforeUnmount(() => {\n      // Cleanup: remove the viewer element\n      if (viewerRef.value && containerRef.value) {\n        containerRef.value.innerHTML = '';\n        viewerRef.value = null;\n      }\n    });\n\n    return () =>\n      h('div', {\n        ref: containerRef,\n        class: attrs.class,\n        style: attrs.style,\n      });\n  },\n});\n\nexport default PDFViewer;\n"],"names":["EmbedPDF"],"mappings":";;;AAuCO,MAAM,YAAY,gBAAgB;AAAA,EACvC,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA,IAEL,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS,OAAO,CAAA;AAAA,IAAC;AAAA,EACnB;AAAA,EAGF,OAAO;AAAA;AAAA,IAEL,MAAM,CAAC,eAAkC;AAAA;AAAA,IAEzC,OAAO,CAAC,cAA8B;AAAA,EAAA;AAAA,EAGxC,MAAM,OAAO,EAAE,MAAM,QAAQ,SAAS;AACpC,UAAM,eAAe,IAA2B,IAAI;AACpD,UAAM,YAAY,IAA8B,IAAI;AAGpD,WAAO;AAAA,MACL,IAAI,YAAY;AACd,eAAO,UAAU;AAAA,MACnB;AAAA,MACA,IAAI,WAAW;;AACb,iBAAO,eAAU,UAAV,mBAAiB,aAAY;AAAA,MACtC;AAAA,IAAA,CACkB;AAEpB,cAAU,MAAM;AACd,UAAI,CAAC,aAAa,MAAO;AAGzB,YAAM,SAASA,kBAAS,KAAK;AAAA,QAC3B,MAAM;AAAA,QACN,QAAQ,aAAa;AAAA,QACrB,GAAG,MAAM;AAAA,MAAA,CACV;AAED,UAAI,QAAQ;AACV,kBAAU,QAAQ;AAClB,aAAK,QAAQ,MAAM;AAGnB,eAAO,SAAS,KAAK,CAAC,aAAa;AACjC,eAAK,SAAS,QAAQ;AAAA,QACxB,CAAC;AAAA,MACH;AAAA,IACF,CAAC;AAED,oBAAgB,MAAM;AAEpB,UAAI,UAAU,SAAS,aAAa,OAAO;AACzC,qBAAa,MAAM,YAAY;AAC/B,kBAAU,QAAQ;AAAA,MACpB;AAAA,IACF,CAAC;AAED,WAAO,MACL,EAAE,OAAO;AAAA,MACP,KAAK;AAAA,MACL,OAAO,MAAM;AAAA,MACb,OAAO,MAAM;AAAA,IAAA,CACd;AAAA,EACL;AACF,CAAC;"}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@embedpdf/vue-pdf-viewer",
+  "version": "1.0.0",
+  "description": "Vue component for embedding PDF documents",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "dependencies": {
+    "@embedpdf/snippet": "1.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.0",
+    "rimraf": "^5.0.5",
+    "typescript": "^5.1.6",
+    "unplugin-dts": "1.0.0-beta.6",
+    "vite": "^6.3.5",
+    "vue": "^3.4.0"
+  },
+  "peerDependencies": {
+    "vue": ">=3.0.0"
+  },
+  "keywords": [
+    "vue",
+    "pdf",
+    "viewer",
+    "embed",
+    "document"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/embedpdf/embed-pdf-viewer.git",
+    "directory": "viewers/vue"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "clean": "rimraf dist",
+    "build": "pnpm run clean && vite build"
+  }
+}