pdfjs-vue3 0.2.0 → 0.2.2

package/README.md

@@ -1,3 +1,127 @@
-# Pdfjs in Vue 3
+# pdfjs-vue3
 
-This is an experiment in displaying PDFs using pdfjs as a vue 3 component.
+A experimental Vue 3 component for displaying PDFs using [pdfjs](https://mozilla.github.io/pdf.js/).
+
+## Installation
+
+Install the package and its peer dependencies:
+
+```bash
+npm install pdfjs-vue3 pdfjs-dist
+```
+
+## Setup
+
+### Copy the PDF.js Worker Script
+
+The PDF.js library requires a worker script to render PDFs. You need to copy it from
+`pdfjs-dist` into your app's public/static folder so it can be served at runtime.
+
+For example, copy it into `public/js/pdfjs/`:
+
+```bash
+# unix/mac
+cp node_modules/pdfjs-dist/build/pdf.worker.min.mjs public/js/pdfjs/
+
+# windows
+copy node_modules\pdfjs-dist\build\pdf.worker.min.mjs public\js\pdfjs\
+```
+
+You can choose any path under your public folder — just remember the URL for the next step.
+
+### Import Styles
+
+Import the component styles in your app entry or root component:
+
+```ts
+import 'pdfjs-vue3/dist/pdfjs-vue3.css'
+```
+
+## Usage
+
+### Basic Example
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { PdfHost, ZoomType } from 'pdfjs-vue3'
+
+const zoomType = ref(ZoomType.Auto)
+const zoom = ref(1)
+const files = ['/samples/my-document.pdf']
+</script>
+
+<template>
+  <PdfHost
+    worker-src="/js/pdfjs/pdf.worker.min.mjs"
+    :sources="files"
+    v-model:zoom-type="zoomType"
+    v-model:zoom="zoom"
+    style="height: 100vh;"
+  />
+</template>
+```
+
+### PdfHost Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `workerSrc` | `string` | — | URL to the pdfjs worker script. Must be set if not configured elsewhere. |
+| `sources` | `PdfSource[]` | — | Array of PDF sources to display. Each source can be a URL string, `URL`, `TypedArray`, `ArrayBuffer`, or a pdfjs `DocumentInitParameters` object. |
+| `sourceKey` | `(source: PdfSource, index: number) => string \| number` | — | Optional key generator for source identity in rendering. Use this when sources may contain duplicate values. |
+| `zoomType` | `ZoomType` | `ZoomType.Auto` | Type of zoom behavior. |
+| `zoom` | `number` | `1` | Custom zoom percentage (1 = 100%). Used when `zoomType` is `Custom`. |
+| `hideText` | `boolean` | `false` | Hides the selectable text layer. |
+| `hideNumber` | `boolean` | `false` | Hides the page number display. |
+
+### PdfHost Events
+
+| Event | Payload | Description |
+|------|---------|-------------|
+| `update:zoom` | `number` | Emitted when zoom changes. |
+| `update:zoomType` | `ZoomType` | Emitted when zoom mode changes. |
+| `error` | `{ source: PdfSource, error: unknown }` | Emitted when loading a source fails. |
+
+### ZoomType Enum
+
+| Value | Description |
+|-------|-------------|
+| `Auto` | Fits width up to a certain limit. |
+| `WidthFit` | Fits width of the host with no limit. |
+| `PageFit` | Fits the whole page in the host. |
+| `Custom` | Uses the `zoom` prop value. |
+
+### Exposed Methods
+
+The `PdfHost` component exposes `zoomIn()` and `zoomOut()` methods via template ref:
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { PdfHost } from 'pdfjs-vue3'
+
+const host = ref()
+</script>
+
+<template>
+  <button @click="host.zoomIn()">+</button>
+  <button @click="host.zoomOut()">-</button>
+  <PdfHost ref="host" worker-src="/js/pdfjs/pdf.worker.min.mjs" :sources="['/doc.pdf']" />
+</template>
+```
+
+### Page Slot
+
+Use the `#page` slot to render custom overlays on each page:
+
+```vue
+<PdfHost worker-src="/js/pdfjs/pdf.worker.min.mjs" :sources="files">
+  <template #page="{ page, displaySize }">
+    <div>Page {{ page.pageNumber }} — {{ displaySize.width }}×{{ displaySize.height }}</div>
+  </template>
+</PdfHost>
+```
+
+## License
+
+Apache-2.0

package/dist/pdfjs-vue3.es.js

@@ -1,42 +1,44 @@
-import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, nextTick as s, onBeforeUnmount as c, onMounted as l, openBlock as u, ref as d, renderList as f, renderSlot as p, shallowRef as m, toDisplayString as h, toValue as g, unref as _, watch as v, withCtx as y } from "vue";
-import { GlobalWorkerOptions as b, TextLayer as x, getDocument as S } from "pdfjs-dist";
+import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, getCurrentInstance as s, getCurrentScope as c, hasInjectionContext as l, inject as u, nextTick as d, onBeforeUnmount as f, onMounted as p, openBlock as m, ref as h, renderList as g, renderSlot as _, shallowReadonly as v, shallowRef as y, toDisplayString as b, toValue as x, unref as S, watch as C, watchEffect as w, withCtx as T } from "vue";
+import { GlobalWorkerOptions as E, RenderingCancelledException as D, TextLayer as O, getDocument as k } from "pdfjs-dist";
 //#region src/types.ts
-var C = /* @__PURE__ */ function(e) {
+var A = /* @__PURE__ */ function(e) {
 	return e[e.Auto = 0] = "Auto", e[e.WidthFit = 1] = "WidthFit", e[e.PageFit = 2] = "PageFit", e[e.Custom = 3] = "Custom", e;
-}({}), w = /* @__PURE__ */ o({
+}({}), j = /* @__PURE__ */ o({
 	__name: "PdfPageText",
 	props: {
 		viewport: {},
 		page: {}
 	},
 	setup(e) {
-		let t = e, n = d(), r;
-		v(() => [t.viewport, t.page], () => {
+		let t = e, n = h(), r;
+		C(() => [t.viewport, t.page], () => {
 			a();
 		});
 		async function a() {
 			let e = n.value, i = t.viewport;
 			if (!(!e || !i)) {
 				for (r &&= (r.cancel(), void 0); e.firstChild;) e.removeChild(e.firstChild);
-				r = new x({
+				r = new O({
 					textContentSource: t.page.streamTextContent(),
 					container: e,
 					viewport: i
-				}), await r.render();
+				}), await r.render().catch(() => {});
 			}
 		}
-		return l(() => {
+		return p(() => {
 			a();
-		}), (e, t) => (u(), i("div", {
+		}), f(() => {
+			r &&= (r.cancel(), void 0);
+		}), (e, t) => (m(), i("div", {
 			ref_key: "rootEl",
 			ref: n,
 			class: "pdf-text-layer"
 		}, null, 512));
 	}
-}), T = { class: "pdf-page-layout" }, E = { class: "pdf-page-overlay" }, D = {
+}), M = { class: "pdf-page-layout" }, N = { class: "pdf-page-overlay" }, P = {
 	key: 0,
 	class: "pdf-page-number"
-}, O = 1100, k = 96 / 72, A = /* @__PURE__ */ o({
+}, F = 1100, I = 96 / 72, L = /* @__PURE__ */ o({
 	__name: "PdfPage",
 	props: {
 		zoom: {},
@@ -45,77 +47,191 @@ var C = /* @__PURE__ */ function(e) {
 		hideNumber: { type: Boolean },
 		viewport: {},
 		page: {},
-		observer: {}
+		devicePixelRatio: {}
 	},
 	emits: ["update:zoom"],
-	setup(e, { expose: o, emit: s }) {
-		let f = e, m = s, g = d(), _ = d(), y = d(!1);
-		o({
-			rootEl: _,
-			inViewport: y
-		});
-		let b = t(() => {
-			let { width: e, height: t } = f.page.getViewport({ scale: k }), { width: n, height: r } = f.viewport, i = 0, a = 1;
-			switch (f.zoomType) {
-				case C.Auto: return i = Math.min(n, O) - 40, a = i / e, k * a;
-				case C.WidthFit: return i = n - 40, a = i / e, k * a;
-				case C.PageFit: return n > r ? (a = r / t, k * a) : (i = n - 40, a = i / e, k * a);
+	setup(e, { emit: o }) {
+		let s = e, c = o, l = h(), u = h(), d = h(!1), g, v = t(() => {
+			let { width: e, height: t } = s.page.getViewport({ scale: I }), { width: n, height: r } = s.viewport, i = 0, a = 1;
+			switch (s.zoomType) {
+				case A.Auto: return i = Math.min(n, F) - 40, a = i / e, I * a;
+				case A.WidthFit: return i = n - 40, a = i / e, I * a;
+				case A.PageFit: return n > r ? (a = r / t, I * a) : (i = n - 40, a = i / e, I * a);
 			}
-			return k * f.zoom;
-		}), x = t(() => b.value * (window?.devicePixelRatio || 1)), S = t(() => f.page.getViewport({ scale: b.value })), A = t(() => f.page.getViewport({ scale: x.value }));
-		v(b, (e) => {
-			let t = e / k;
-			Math.abs(t - f.zoom) > .05 && m("update:zoom", t);
+			return I * s.zoom;
+		}), y = t(() => v.value * (s.devicePixelRatio || 1)), x = t(() => s.page.getViewport({ scale: v.value })), S = t(() => s.page.getViewport({ scale: y.value }));
+		C(v, (e) => {
+			let t = e / I;
+			Math.abs(t - s.zoom) > .05 && c("update:zoom", t);
 		}, { immediate: !0 });
-		let j;
-		function M() {
-			if (!f.page || !g.value) return;
-			let e = f.page, t = S.value, n = A.value, r = g.value;
+		let w;
+		function T() {
+			if (!s.page || !l.value) return;
+			let e = s.page, t = x.value, n = S.value, r = l.value;
 			r.width = Math.ceil(n.width), r.height = Math.ceil(n.height), r.style.width = Math.floor(t.width) + "px", r.style.height = Math.floor(t.height) + "px";
-			let i = _.value;
+			let i = u.value;
 			i && (i.style.width = r.style.width, i.style.height = r.style.height);
 			let a = r.getContext("2d");
-			if (!(!a || !y.value)) {
-				if (j) {
-					j.cancel();
+			if (!(!a || !d.value)) {
+				if (w) {
+					w.cancel();
 					return;
 				}
-				j = e.render({
+				console.debug(`rendering page ${e.pageNumber} with zoom ${s.zoom} (scale ${v.value})`), w = e.render({
 					canvas: r,
 					canvasContext: a,
-					viewport: A.value
-				}), j.promise.then(() => j = void 0).catch(() => {
-					j = void 0, M();
+					viewport: S.value
+				}), w.promise.then(() => w = void 0).catch((e) => {
+					w = void 0, e instanceof D && T();
 				});
 			}
 		}
-		return v(() => [
-			f.page,
-			x.value,
-			y.value
+		return C(() => [
+			s.page,
+			y.value,
+			d.value
 		], () => {
-			M();
-		}, { immediate: !0 }), l(() => {
-			M(), _.value && f.observer?.observe(_.value);
-		}), c(() => {
-			_.value && f.observer?.unobserve(_.value);
-		}), (t, o) => (u(), i("div", {
+			T();
+		}, { immediate: !0 }), p(() => {
+			let e = u.value;
+			e && (g = new IntersectionObserver(([e]) => {
+				d.value = e.isIntersecting;
+			}, { rootMargin: "200px 0px" }), g.observe(e)), T();
+		}), f(() => {
+			g?.disconnect(), g = void 0, w &&= (w.cancel(), void 0);
+		}), (t, o) => (m(), i("div", {
 			ref_key: "rootEl",
-			ref: _,
+			ref: u,
 			class: "pdf-page"
-		}, [a("div", T, [a("canvas", {
+		}, [a("div", M, [a("canvas", {
 			ref_key: "canvas",
-			ref: g
-		}, null, 512), a("div", E, [e.hideText ? r("", !0) : (u(), n(w, {
+			ref: l
+		}, null, 512), a("div", N, [e.hideText ? r("", !0) : (m(), n(j, {
 			key: 0,
-			viewport: A.value,
+			viewport: x.value,
 			page: e.page
-		}, null, 8, ["viewport", "page"])), p(t.$slots, "default", { displaySize: A.value })])]), e.hideNumber ? r("", !0) : (u(), i("div", D, h(e.page.pageNumber), 1))], 512));
+		}, null, 8, ["viewport", "page"])), _(t.$slots, "default", { displaySize: x.value })])]), e.hideNumber ? r("", !0) : (m(), i("div", P, b(e.page.pageNumber), 1))], 512));
 	}
-}), j = {
+}), R = /* @__PURE__ */ new WeakMap(), z = (...e) => {
+	let t = e[0], n = s()?.proxy ?? c();
+	if (n == null && !l()) throw Error("injectLocal must be called in setup");
+	return n && R.has(n) && t in R.get(n) ? R.get(n)[t] : u(...e);
+}, B = typeof window < "u" && typeof document < "u";
+typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
+var ee = Object.prototype.toString, V = (e) => ee.call(e) === "[object Object]", H = () => {};
+function U(e, t) {
+	function n(...n) {
+		return new Promise((r, i) => {
+			Promise.resolve(e(() => t.apply(this, n), {
+				fn: t,
+				thisArg: this,
+				args: n
+			})).then(r).catch(i);
+		});
+	}
+	return n;
+}
+function W(e, t = {}) {
+	let n, r, i = H, a = (e) => {
+		clearTimeout(e), i(), i = H;
+	}, o;
+	return (s) => {
+		let c = x(e), l = x(t.maxWait);
+		return n && a(n), c <= 0 || l !== void 0 && l <= 0 ? (r &&= (a(r), void 0), Promise.resolve(s())) : new Promise((e, u) => {
+			i = t.rejectOnCancel ? u : e, o = s, l && !r && (r = setTimeout(() => {
+				n && a(n), r = void 0, e(o());
+			}, l)), n = setTimeout(() => {
+				r && a(r), r = void 0, e(s());
+			}, c);
+		});
+	};
+}
+function G(e) {
+	return e.endsWith("rem") ? Number.parseFloat(e) * 16 : Number.parseFloat(e);
+}
+function K(e) {
+	return Array.isArray(e) ? e : [e];
+}
+function q(e, t = 200, n = {}) {
+	return U(W(t, n), e);
+}
+function J(e, t, n) {
+	return C(e, t, {
+		...n,
+		immediate: !0
+	});
+}
+//#endregion
+//#region node_modules/@vueuse/core/dist/index.js
+var Y = B ? window : void 0;
+B && window.document, B && window.navigator, B && window.location;
+function X(e) {
+	let t = x(e);
+	return t?.$el ?? t;
+}
+function Z(...e) {
+	let n = (e, t, n, r) => (e.addEventListener(t, n, r), () => e.removeEventListener(t, n, r)), r = t(() => {
+		let t = K(x(e[0])).filter((e) => e != null);
+		return t.every((e) => typeof e != "string") ? t : void 0;
+	});
+	return J(() => [
+		r.value?.map((e) => X(e)) ?? [Y].filter((e) => e != null),
+		K(x(r.value ? e[1] : e[0])),
+		K(S(r.value ? e[2] : e[1])),
+		x(r.value ? e[3] : e[2])
+	], ([e, t, r, i], a, o) => {
+		if (!e?.length || !t?.length || !r?.length) return;
+		let s = V(i) ? { ...i } : i, c = e.flatMap((e) => t.flatMap((t) => r.map((r) => n(e, t, r, s))));
+		o(() => {
+			c.forEach((e) => e());
+		});
+	}, { flush: "post" });
+}
+function Q() {
+	let e = y(!1), t = s();
+	return t && p(() => {
+		e.value = !0;
+	}, t), e;
+}
+/* @__NO_SIDE_EFFECTS__ */
+function te(e) {
+	let n = Q();
+	return t(() => (n.value, !!e()));
+}
+var ne = Symbol("vueuse-ssr-width");
+/* @__NO_SIDE_EFFECTS__ */
+function $() {
+	let e = l() ? z(ne, null) : null;
+	return typeof e == "number" ? e : void 0;
+}
+function re(e, n = {}) {
+	let { window: r = Y, ssrWidth: i = /* @__PURE__ */ $() } = n, a = /* @__PURE__ */ te(() => r && "matchMedia" in r && typeof r.matchMedia == "function"), o = y(typeof i == "number"), s = y(), c = y(!1);
+	return w(() => {
+		if (o.value) {
+			o.value = !a.value, c.value = x(e).split(",").some((e) => {
+				let t = e.includes("not all"), n = e.match(/\(\s*min-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/), r = e.match(/\(\s*max-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/), a = !!(n || r);
+				return n && a && (a = i >= G(n[1])), r && a && (a = i <= G(r[1])), t ? !a : a;
+			});
+			return;
+		}
+		a.value && (s.value = r.matchMedia(x(e)), c.value = s.value.matches);
+	}), Z(s, "change", (e) => {
+		c.value = e.matches;
+	}, { passive: !0 }), t(() => c.value);
+}
+function ie(e = {}) {
+	let { window: t = Y } = e, n = y(1), r = re(() => `(resolution: ${n.value}dppx)`, e), i = H;
+	return t && (i = J(r, () => n.value = t.devicePixelRatio)), {
+		pixelRatio: v(n),
+		stop: i
+	};
+}
+//#endregion
+//#region src/PdfDocument.vue?vue&type=script&setup=true&lang.ts
+var ae = {
 	key: 0,
 	class: "pdf-progress"
-}, M = /* @__PURE__ */ o({
+}, oe = /* @__PURE__ */ o({
 	__name: "PdfDocument",
 	props: {
 		hideText: { type: Boolean },
@@ -127,63 +243,49 @@ var C = /* @__PURE__ */ function(e) {
 	},
 	emits: ["error", "update:zoom"],
 	setup(t, { emit: a }) {
-		let o = t, s = a, g = m(), _ = m([]), b = m(), x = d(), C = [], w = d(!1), T = d(0);
-		function E(e) {
-			e && (C.push(e), C.length == 1 && (e.inViewport = !0));
-		}
-		function D() {
-			_.value.forEach((e) => e.cleanup()), _.value = [];
-			let e = g.value;
-			e && (e.destroy(), g.value = void 0), C = [];
+		let o = t, s = a, { pixelRatio: c } = ie(), l = y(), u = y([]), d = h(), p = h(!1), v = h(0), x;
+		async function w() {
+			x &&= (await x.destroy(), void 0), u.value.forEach((e) => e.cleanup()), u.value = [];
+			let e = l.value;
+			e && (e.destroy(), l.value = void 0);
 		}
-		return v(() => o.src, (e) => {
-			if (D(), !e) return;
-			let t = S(e);
-			w.value = !0, t.onProgress = (e) => {
-				e.total && (T.value = e.loaded / e.total);
-			}, t.promise.then((e) => {
-				g.value = e;
+		return C(() => o.src, async (e) => {
+			await w(), e && (x = k(e), p.value = !0, x.onProgress = (e) => {
+				e.total && (v.value = e.loaded / e.total);
+			}, x.promise.then((e) => {
+				l.value = e;
 				let t = [];
 				for (let n = 1; n <= e.numPages; n++) t.push(e.getPage(n));
 				Promise.all(t).then((t) => {
-					e === g.value && (_.value = t);
+					e === l.value && (u.value = t);
 				});
 			}).catch((e) => {
 				s("error", e);
 			}).finally(() => {
-				w.value = !1;
-			});
-		}, { immediate: !0 }), l(() => {
-			b.value = new IntersectionObserver((e) => {
-				e.forEach((e) => {
-					let t = C.find((t) => t?.rootEl === e.target);
-					t && (t.inViewport = e.isIntersecting);
-				});
-			}, { rootMargin: "0px" });
-		}), c(() => {
-			D(), b.value?.disconnect();
-		}), (a, c) => (u(), i("div", {
+				p.value = !1;
+			}));
+		}, { immediate: !0 }), f(() => {
+			w();
+		}), (a, f) => (m(), i("div", {
 			ref_key: "rootEl",
-			ref: x
-		}, [p(a.$slots, "loading", {
+			ref: d
+		}, [_(a.$slots, "loading", {
 			src: o.src,
-			loading: w.value,
-			progress: T.value
-		}, () => [w.value ? (u(), i("p", j, "loading " + h(Math.ceil(100 * T.value)) + "%", 1)) : r("", !0)]), (u(!0), i(e, null, f(_.value, (e) => (u(), n(A, {
-			ref_for: !0,
-			ref: E,
+			loading: p.value,
+			progress: v.value
+		}, () => [p.value ? (m(), i("p", ae, "loading " + b(Math.ceil(100 * v.value)) + "%", 1)) : r("", !0)]), (m(!0), i(e, null, g(u.value, (e) => (m(), n(L, {
 			key: e.pageNumber,
 			page: e,
 			"hide-number": t.hideNumber,
 			"hide-text": t.hideText,
 			"zoom-type": t.zoomType,
 			zoom: t.zoom,
-			"onUpdate:zoom": c[0] ||= (e) => s("update:zoom", e),
-			observer: b.value,
-			viewport: t.viewport
+			"onUpdate:zoom": f[0] ||= (e) => s("update:zoom", e),
+			viewport: t.viewport,
+			"device-pixel-ratio": S(c)
 		}, {
-			default: y(({ displaySize: t }) => [p(a.$slots, "default", {
-				doc: g.value,
+			default: T(({ displaySize: t }) => [_(a.$slots, "default", {
+				doc: l.value,
 				page: e,
 				displaySize: t
 			})]),
@@ -194,129 +296,122 @@ var C = /* @__PURE__ */ function(e) {
 			"hide-text",
 			"zoom-type",
 			"zoom",
-			"observer",
-			"viewport"
+			"viewport",
+			"device-pixel-ratio"
 		]))), 128))], 512));
 	}
-});
-typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
-var N = () => {};
-function P(e, t) {
-	function n(...n) {
-		return new Promise((r, i) => {
-			Promise.resolve(e(() => t.apply(this, n), {
-				fn: t,
-				thisArg: this,
-				args: n
-			})).then(r).catch(i);
-		});
-	}
-	return n;
-}
-function F(e, t = {}) {
-	let n, r, i = N, a = (e) => {
-		clearTimeout(e), i(), i = N;
-	}, o;
-	return (s) => {
-		let c = g(e), l = g(t.maxWait);
-		return n && a(n), c <= 0 || l !== void 0 && l <= 0 ? (r &&= (a(r), void 0), Promise.resolve(s())) : new Promise((e, u) => {
-			i = t.rejectOnCancel ? u : e, o = s, l && !r && (r = setTimeout(() => {
-				n && a(n), r = void 0, e(o());
-			}, l)), n = setTimeout(() => {
-				r && a(r), r = void 0, e(s());
-			}, c);
-		});
-	};
-}
-function I(e, t = 200, n = {}) {
-	return P(F(t, n), e);
-}
-//#endregion
-//#region src/PdfHost.vue
-var L = /* @__PURE__ */ o({
+}), se = /* @__PURE__ */ o({
 	__name: "PdfHost",
 	props: {
 		workerSrc: {},
 		sources: {},
+		sourceKey: { type: Function },
 		zoomType: {},
 		zoom: {},
 		hideText: { type: Boolean },
 		hideNumber: { type: Boolean }
 	},
-	emits: ["update:zoom", "update:zoomType"],
-	setup(t, { expose: r, emit: a }) {
-		let o = t, m = a, h = d();
-		r({
-			zoomIn: E,
-			zoomOut: D
-		}), v(() => o.workerSrc, (e) => {
-			e && (b.workerSrc = e);
+	emits: [
+		"update:zoom",
+		"update:zoomType",
+		"error"
+	],
+	setup(r, { expose: a, emit: o }) {
+		let s = r, c = o, l = h();
+		a({
+			zoomIn: j,
+			zoomOut: M
+		}), C(() => s.workerSrc, (e) => {
+			e && (E.workerSrc = e);
 		}, { immediate: !0 });
-		function g(e) {
-			e.ctrlKey && (e.preventDefault(), e.deltaY < 0 ? E() : D());
+		function u(e) {
+			e.ctrlKey && (e.preventDefault(), e.deltaY < 0 ? j() : M());
 		}
-		function x(e) {
-			e.ctrlKey && (e.key === "0" || e.which == 48) && m("update:zoomType", C.Auto);
+		function v(e) {
+			e.ctrlKey && (e.key === "0" || e.which == 48) && c("update:zoomType", A.Auto);
 		}
-		let S = d({
+		let y = h({
 			width: 0,
 			height: 0
-		}), w = I(() => {
-			let e = h.value;
-			e && (S.value = {
+		}), b = /* @__PURE__ */ new WeakMap(), x = 1;
+		function w(e, t) {
+			if (typeof e == "string") return `str:${e}:${t}`;
+			if (e instanceof URL) return `url:${e.href}:${t}`;
+			if (e && typeof e == "object") {
+				let n = e, r = b.get(n);
+				if (r) return `obj:${r}:${t}`;
+				let i = x++;
+				return b.set(n, i), `obj:${i}:${t}`;
+			}
+			return `src:${t}`;
+		}
+		let D = t(() => s.sources.map((e, t) => ({
+			source: e,
+			key: s.sourceKey ? s.sourceKey(e, t) : w(e, t)
+		}))), O = q(() => {
+			let e = l.value;
+			e && (y.value = {
 				width: e.offsetWidth,
 				height: e.offsetHeight
 			});
 		}, 100);
-		function T(e) {
+		function k(e) {
 			let t = e % .25;
 			return Number((e - t).toFixed(2));
 		}
-		function E() {
-			let e = T((o.zoom || 1) + .25);
-			m("update:zoom", Math.min(e, 2)), m("update:zoomType", C.Custom);
+		function j() {
+			let e = k((s.zoom || 1) + .25);
+			c("update:zoom", Math.min(e, 2)), c("update:zoomType", A.Custom);
+		}
+		function M() {
+			let e = k((s.zoom || 1) - .25);
+			c("update:zoom", Math.max(e, .25)), c("update:zoomType", A.Custom);
 		}
-		function D() {
-			let e = T((o.zoom || 1) - .25);
-			m("update:zoom", Math.max(e, .25)), m("update:zoomType", C.Custom);
+		function N(e, t) {
+			c("error", {
+				source: e,
+				error: t
+			});
 		}
-		return v(() => o.zoom, (e, t) => {
-			let n = h.value;
+		return C(() => s.zoom, (e, t) => {
+			let n = l.value;
 			if (n && e && t) {
 				let r = n.scrollTop, i = n.scrollLeft, a = e / t;
-				s(() => {
+				d(() => {
 					n.scrollTop = r * a, n.scrollLeft = i * a;
 				});
 			}
-		}), l(() => {
-			window.addEventListener("resize", w), w();
-		}), c(() => {
-			window.removeEventListener("resize", w);
-		}), (r, a) => (u(), i("div", {
+		}), p(() => {
+			window.addEventListener("resize", O), O();
+		}), f(() => {
+			window.removeEventListener("resize", O);
+		}), (t, a) => (m(), i("div", {
 			ref_key: "rootEl",
-			ref: h,
-			onWheel: g,
-			onKeydown: x,
+			ref: l,
+			onWheel: u,
+			onKeydown: v,
 			tabindex: "0",
 			class: "pdf-host"
-		}, [(u(!0), i(e, null, f(t.sources, (e) => (u(), n(M, {
-			viewport: S.value,
-			src: e,
-			"hide-number": !!t.hideNumber,
-			"hide-text": !!t.hideText,
-			"zoom-type": t.zoomType || _(C).Auto,
-			zoom: t.zoom || 1,
-			"onUpdate:zoom": a[0] ||= (e) => m("update:zoom", e)
+		}, [(m(!0), i(e, null, g(D.value, (e) => (m(), n(oe, {
+			key: e.key,
+			viewport: y.value,
+			src: e.source,
+			"hide-number": !!r.hideNumber,
+			"hide-text": !!r.hideText,
+			"zoom-type": r.zoomType || S(A).Auto,
+			zoom: r.zoom || 1,
+			"onUpdate:zoom": a[0] ||= (e) => c("update:zoom", e),
+			onError: (t) => N(e.source, t)
 		}, {
-			loading: y(({ loading: t, progress: n }) => [p(r.$slots, "loading", {
-				source: e,
-				loading: t,
-				progress: n
+			loading: T(({ loading: n, progress: r }) => [_(t.$slots, "loading", {
+				source: e.source,
+				loading: n,
+				progress: r
 			})]),
-			default: y(({ doc: t, page: n, displaySize: i }) => [p(r.$slots, "page", {
-				source: e,
-				doc: t,
-				page: n,
+			default: T(({ doc: n, page: r, displaySize: i }) => [_(t.$slots, "page", {
+				source: e.source,
+				doc: n,
+				page: r,
 				displaySize: i
 			})]),
 			_: 2
@@ -326,9 +421,10 @@ var L = /* @__PURE__ */ o({
 			"hide-number",
 			"hide-text",
 			"zoom-type",
-			"zoom"
-		]))), 256)), p(r.$slots, "default")], 544));
+			"zoom",
+			"onError"
+		]))), 128)), _(t.$slots, "default")], 544));
 	}
 });
 //#endregion
-export { L as PdfHost, C as ZoomType };
+export { se as PdfHost, A as ZoomType };

package/dist/pdfjs-vue3.umd.js

@@ -1 +1 @@
-(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`vue`),require(`pdfjs-dist`)):typeof define==`function`&&define.amd?define([`exports`,`vue`,`pdfjs-dist`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.pdfjsVue3={},e.Vue,e.pdfjsLib))})(this,function(e,t,n){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var r=function(e){return e[e.Auto=0]=`Auto`,e[e.WidthFit=1]=`WidthFit`,e[e.PageFit=2]=`PageFit`,e[e.Custom=3]=`Custom`,e}({}),i=(0,t.defineComponent)({__name:`PdfPageText`,props:{viewport:{},page:{}},setup(e){let r=e,i=(0,t.ref)(),a;(0,t.watch)(()=>[r.viewport,r.page],()=>{o()});async function o(){let e=i.value,t=r.viewport;if(!(!e||!t)){for(a&&=(a.cancel(),void 0);e.firstChild;)e.removeChild(e.firstChild);a=new n.TextLayer({textContentSource:r.page.streamTextContent(),container:e,viewport:t}),await a.render()}}return(0,t.onMounted)(()=>{o()}),(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{ref_key:`rootEl`,ref:i,class:`pdf-text-layer`},null,512))}}),a={class:`pdf-page-layout`},o={class:`pdf-page-overlay`},s={key:0,class:`pdf-page-number`},c=1100,l=96/72,u=(0,t.defineComponent)({__name:`PdfPage`,props:{zoom:{},zoomType:{},hideText:{type:Boolean},hideNumber:{type:Boolean},viewport:{},page:{},observer:{}},emits:[`update:zoom`],setup(e,{expose:n,emit:u}){let d=e,f=u,p=(0,t.ref)(),m=(0,t.ref)(),h=(0,t.ref)(!1);n({rootEl:m,inViewport:h});let g=(0,t.computed)(()=>{let{width:e,height:t}=d.page.getViewport({scale:l}),{width:n,height:i}=d.viewport,a=0,o=1;switch(d.zoomType){case r.Auto:return a=Math.min(n,c)-40,o=a/e,l*o;case r.WidthFit:return a=n-40,o=a/e,l*o;case r.PageFit:return n>i?(o=i/t,l*o):(a=n-40,o=a/e,l*o)}return l*d.zoom}),_=(0,t.computed)(()=>g.value*(window?.devicePixelRatio||1)),v=(0,t.computed)(()=>d.page.getViewport({scale:g.value})),y=(0,t.computed)(()=>d.page.getViewport({scale:_.value}));(0,t.watch)(g,e=>{let t=e/l;Math.abs(t-d.zoom)>.05&&f(`update:zoom`,t)},{immediate:!0});let b;function x(){if(!d.page||!p.value)return;let e=d.page,t=v.value,n=y.value,r=p.value;r.width=Math.ceil(n.width),r.height=Math.ceil(n.height),r.style.width=Math.floor(t.width)+`px`,r.style.height=Math.floor(t.height)+`px`;let i=m.value;i&&(i.style.width=r.style.width,i.style.height=r.style.height);let a=r.getContext(`2d`);if(!(!a||!h.value)){if(b){b.cancel();return}b=e.render({canvas:r,canvasContext:a,viewport:y.value}),b.promise.then(()=>b=void 0).catch(()=>{b=void 0,x()})}}return(0,t.watch)(()=>[d.page,_.value,h.value],()=>{x()},{immediate:!0}),(0,t.onMounted)(()=>{x(),m.value&&d.observer?.observe(m.value)}),(0,t.onBeforeUnmount)(()=>{m.value&&d.observer?.unobserve(m.value)}),(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{ref_key:`rootEl`,ref:m,class:`pdf-page`},[(0,t.createElementVNode)(`div`,a,[(0,t.createElementVNode)(`canvas`,{ref_key:`canvas`,ref:p},null,512),(0,t.createElementVNode)(`div`,o,[e.hideText?(0,t.createCommentVNode)(``,!0):((0,t.openBlock)(),(0,t.createBlock)(i,{key:0,viewport:y.value,page:e.page},null,8,[`viewport`,`page`])),(0,t.renderSlot)(n.$slots,`default`,{displaySize:y.value})])]),e.hideNumber?(0,t.createCommentVNode)(``,!0):((0,t.openBlock)(),(0,t.createElementBlock)(`div`,s,(0,t.toDisplayString)(e.page.pageNumber),1))],512))}}),d={key:0,class:`pdf-progress`},f=(0,t.defineComponent)({__name:`PdfDocument`,props:{hideText:{type:Boolean},hideNumber:{type:Boolean},zoomType:{},zoom:{},viewport:{},src:{}},emits:[`error`,`update:zoom`],setup(e,{emit:r}){let i=e,a=r,o=(0,t.shallowRef)(),s=(0,t.shallowRef)([]),c=(0,t.shallowRef)(),l=(0,t.ref)(),f=[],p=(0,t.ref)(!1),m=(0,t.ref)(0);function h(e){e&&(f.push(e),f.length==1&&(e.inViewport=!0))}function g(){s.value.forEach(e=>e.cleanup()),s.value=[];let e=o.value;e&&(e.destroy(),o.value=void 0),f=[]}return(0,t.watch)(()=>i.src,e=>{if(g(),!e)return;let t=(0,n.getDocument)(e);p.value=!0,t.onProgress=e=>{e.total&&(m.value=e.loaded/e.total)},t.promise.then(e=>{o.value=e;let t=[];for(let n=1;n<=e.numPages;n++)t.push(e.getPage(n));Promise.all(t).then(t=>{e===o.value&&(s.value=t)})}).catch(e=>{a(`error`,e)}).finally(()=>{p.value=!1})},{immediate:!0}),(0,t.onMounted)(()=>{c.value=new IntersectionObserver(e=>{e.forEach(e=>{let t=f.find(t=>t?.rootEl===e.target);t&&(t.inViewport=e.isIntersecting)})},{rootMargin:`0px`})}),(0,t.onBeforeUnmount)(()=>{g(),c.value?.disconnect()}),(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{ref_key:`rootEl`,ref:l},[(0,t.renderSlot)(n.$slots,`loading`,{src:i.src,loading:p.value,progress:m.value},()=>[p.value?((0,t.openBlock)(),(0,t.createElementBlock)(`p`,d,`loading `+(0,t.toDisplayString)(Math.ceil(100*m.value))+`%`,1)):(0,t.createCommentVNode)(``,!0)]),((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(s.value,i=>((0,t.openBlock)(),(0,t.createBlock)(u,{ref_for:!0,ref:h,key:i.pageNumber,page:i,"hide-number":e.hideNumber,"hide-text":e.hideText,"zoom-type":e.zoomType,zoom:e.zoom,"onUpdate:zoom":r[0]||=e=>a(`update:zoom`,e),observer:c.value,viewport:e.viewport},{default:(0,t.withCtx)(({displaySize:e})=>[(0,t.renderSlot)(n.$slots,`default`,{doc:o.value,page:i,displaySize:e})]),_:2},1032,[`page`,`hide-number`,`hide-text`,`zoom-type`,`zoom`,`observer`,`viewport`]))),128))],512))}});typeof WorkerGlobalScope<`u`&&globalThis instanceof WorkerGlobalScope;var p=()=>{};function m(e,t){function n(...n){return new Promise((r,i)=>{Promise.resolve(e(()=>t.apply(this,n),{fn:t,thisArg:this,args:n})).then(r).catch(i)})}return n}function h(e,n={}){let r,i,a=p,o=e=>{clearTimeout(e),a(),a=p},s;return c=>{let l=(0,t.toValue)(e),u=(0,t.toValue)(n.maxWait);return r&&o(r),l<=0||u!==void 0&&u<=0?(i&&=(o(i),void 0),Promise.resolve(c())):new Promise((e,t)=>{a=n.rejectOnCancel?t:e,s=c,u&&!i&&(i=setTimeout(()=>{r&&o(r),i=void 0,e(s())},u)),r=setTimeout(()=>{i&&o(i),i=void 0,e(c())},l)})}}function g(e,t=200,n={}){return m(h(t,n),e)}e.PdfHost=(0,t.defineComponent)({__name:`PdfHost`,props:{workerSrc:{},sources:{},zoomType:{},zoom:{},hideText:{type:Boolean},hideNumber:{type:Boolean}},emits:[`update:zoom`,`update:zoomType`],setup(e,{expose:i,emit:a}){let o=e,s=a,c=(0,t.ref)();i({zoomIn:h,zoomOut:_}),(0,t.watch)(()=>o.workerSrc,e=>{e&&(n.GlobalWorkerOptions.workerSrc=e)},{immediate:!0});function l(e){e.ctrlKey&&(e.preventDefault(),e.deltaY<0?h():_())}function u(e){e.ctrlKey&&(e.key===`0`||e.which==48)&&s(`update:zoomType`,r.Auto)}let d=(0,t.ref)({width:0,height:0}),p=g(()=>{let e=c.value;e&&(d.value={width:e.offsetWidth,height:e.offsetHeight})},100);function m(e){let t=e%.25;return Number((e-t).toFixed(2))}function h(){let e=m((o.zoom||1)+.25);s(`update:zoom`,Math.min(e,2)),s(`update:zoomType`,r.Custom)}function _(){let e=m((o.zoom||1)-.25);s(`update:zoom`,Math.max(e,.25)),s(`update:zoomType`,r.Custom)}return(0,t.watch)(()=>o.zoom,(e,n)=>{let r=c.value;if(r&&e&&n){let i=r.scrollTop,a=r.scrollLeft,o=e/n;(0,t.nextTick)(()=>{r.scrollTop=i*o,r.scrollLeft=a*o})}}),(0,t.onMounted)(()=>{window.addEventListener(`resize`,p),p()}),(0,t.onBeforeUnmount)(()=>{window.removeEventListener(`resize`,p)}),(n,i)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{ref_key:`rootEl`,ref:c,onWheel:l,onKeydown:u,tabindex:`0`,class:`pdf-host`},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e.sources,a=>((0,t.openBlock)(),(0,t.createBlock)(f,{viewport:d.value,src:a,"hide-number":!!e.hideNumber,"hide-text":!!e.hideText,"zoom-type":e.zoomType||(0,t.unref)(r).Auto,zoom:e.zoom||1,"onUpdate:zoom":i[0]||=e=>s(`update:zoom`,e)},{loading:(0,t.withCtx)(({loading:e,progress:r})=>[(0,t.renderSlot)(n.$slots,`loading`,{source:a,loading:e,progress:r})]),default:(0,t.withCtx)(({doc:e,page:r,displaySize:i})=>[(0,t.renderSlot)(n.$slots,`page`,{source:a,doc:e,page:r,displaySize:i})]),_:2},1032,[`viewport`,`src`,`hide-number`,`hide-text`,`zoom-type`,`zoom`]))),256)),(0,t.renderSlot)(n.$slots,`default`)],544))}}),e.ZoomType=r});
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`vue`),require(`pdfjs-dist`)):typeof define==`function`&&define.amd?define([`exports`,`vue`,`pdfjs-dist`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.pdfjsVue3={},e.Vue,e.pdfjsLib))})(this,function(e,t,n){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var r=function(e){return e[e.Auto=0]=`Auto`,e[e.WidthFit=1]=`WidthFit`,e[e.PageFit=2]=`PageFit`,e[e.Custom=3]=`Custom`,e}({}),i=(0,t.defineComponent)({__name:`PdfPageText`,props:{viewport:{},page:{}},setup(e){let r=e,i=(0,t.ref)(),a;(0,t.watch)(()=>[r.viewport,r.page],()=>{o()});async function o(){let e=i.value,t=r.viewport;if(!(!e||!t)){for(a&&=(a.cancel(),void 0);e.firstChild;)e.removeChild(e.firstChild);a=new n.TextLayer({textContentSource:r.page.streamTextContent(),container:e,viewport:t}),await a.render().catch(()=>{})}}return(0,t.onMounted)(()=>{o()}),(0,t.onBeforeUnmount)(()=>{a&&=(a.cancel(),void 0)}),(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{ref_key:`rootEl`,ref:i,class:`pdf-text-layer`},null,512))}}),a={class:`pdf-page-layout`},o={class:`pdf-page-overlay`},s={key:0,class:`pdf-page-number`},c=1100,l=96/72,u=(0,t.defineComponent)({__name:`PdfPage`,props:{zoom:{},zoomType:{},hideText:{type:Boolean},hideNumber:{type:Boolean},viewport:{},page:{},devicePixelRatio:{}},emits:[`update:zoom`],setup(e,{emit:u}){let d=e,f=u,p=(0,t.ref)(),m=(0,t.ref)(),h=(0,t.ref)(!1),g,_=(0,t.computed)(()=>{let{width:e,height:t}=d.page.getViewport({scale:l}),{width:n,height:i}=d.viewport,a=0,o=1;switch(d.zoomType){case r.Auto:return a=Math.min(n,c)-40,o=a/e,l*o;case r.WidthFit:return a=n-40,o=a/e,l*o;case r.PageFit:return n>i?(o=i/t,l*o):(a=n-40,o=a/e,l*o)}return l*d.zoom}),v=(0,t.computed)(()=>_.value*(d.devicePixelRatio||1)),y=(0,t.computed)(()=>d.page.getViewport({scale:_.value})),b=(0,t.computed)(()=>d.page.getViewport({scale:v.value}));(0,t.watch)(_,e=>{let t=e/l;Math.abs(t-d.zoom)>.05&&f(`update:zoom`,t)},{immediate:!0});let x;function S(){if(!d.page||!p.value)return;let e=d.page,t=y.value,r=b.value,i=p.value;i.width=Math.ceil(r.width),i.height=Math.ceil(r.height),i.style.width=Math.floor(t.width)+`px`,i.style.height=Math.floor(t.height)+`px`;let a=m.value;a&&(a.style.width=i.style.width,a.style.height=i.style.height);let o=i.getContext(`2d`);if(!(!o||!h.value)){if(x){x.cancel();return}console.debug(`rendering page ${e.pageNumber} with zoom ${d.zoom} (scale ${_.value})`),x=e.render({canvas:i,canvasContext:o,viewport:b.value}),x.promise.then(()=>x=void 0).catch(e=>{x=void 0,e instanceof n.RenderingCancelledException&&S()})}}return(0,t.watch)(()=>[d.page,v.value,h.value],()=>{S()},{immediate:!0}),(0,t.onMounted)(()=>{let e=m.value;e&&(g=new IntersectionObserver(([e])=>{h.value=e.isIntersecting},{rootMargin:`200px 0px`}),g.observe(e)),S()}),(0,t.onBeforeUnmount)(()=>{g?.disconnect(),g=void 0,x&&=(x.cancel(),void 0)}),(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{ref_key:`rootEl`,ref:m,class:`pdf-page`},[(0,t.createElementVNode)(`div`,a,[(0,t.createElementVNode)(`canvas`,{ref_key:`canvas`,ref:p},null,512),(0,t.createElementVNode)(`div`,o,[e.hideText?(0,t.createCommentVNode)(``,!0):((0,t.openBlock)(),(0,t.createBlock)(i,{key:0,viewport:y.value,page:e.page},null,8,[`viewport`,`page`])),(0,t.renderSlot)(n.$slots,`default`,{displaySize:y.value})])]),e.hideNumber?(0,t.createCommentVNode)(``,!0):((0,t.openBlock)(),(0,t.createElementBlock)(`div`,s,(0,t.toDisplayString)(e.page.pageNumber),1))],512))}}),d=new WeakMap,f=(...e)=>{let n=e[0],r=(0,t.getCurrentInstance)()?.proxy??(0,t.getCurrentScope)();if(r==null&&!(0,t.hasInjectionContext)())throw Error(`injectLocal must be called in setup`);return r&&d.has(r)&&n in d.get(r)?d.get(r)[n]:(0,t.inject)(...e)},p=typeof window<`u`&&typeof document<`u`;typeof WorkerGlobalScope<`u`&&globalThis instanceof WorkerGlobalScope;var m=Object.prototype.toString,h=e=>m.call(e)===`[object Object]`,g=()=>{};function _(e,t){function n(...n){return new Promise((r,i)=>{Promise.resolve(e(()=>t.apply(this,n),{fn:t,thisArg:this,args:n})).then(r).catch(i)})}return n}function v(e,n={}){let r,i,a=g,o=e=>{clearTimeout(e),a(),a=g},s;return c=>{let l=(0,t.toValue)(e),u=(0,t.toValue)(n.maxWait);return r&&o(r),l<=0||u!==void 0&&u<=0?(i&&=(o(i),void 0),Promise.resolve(c())):new Promise((e,t)=>{a=n.rejectOnCancel?t:e,s=c,u&&!i&&(i=setTimeout(()=>{r&&o(r),i=void 0,e(s())},u)),r=setTimeout(()=>{i&&o(i),i=void 0,e(c())},l)})}}function y(e){return e.endsWith(`rem`)?Number.parseFloat(e)*16:Number.parseFloat(e)}function b(e){return Array.isArray(e)?e:[e]}function x(e,t=200,n={}){return _(v(t,n),e)}function S(e,n,r){return(0,t.watch)(e,n,{...r,immediate:!0})}var C=p?window:void 0;p&&window.document,p&&window.navigator,p&&window.location;function w(e){let n=(0,t.toValue)(e);return n?.$el??n}function T(...e){let n=(e,t,n,r)=>(e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)),r=(0,t.computed)(()=>{let n=b((0,t.toValue)(e[0])).filter(e=>e!=null);return n.every(e=>typeof e!=`string`)?n:void 0});return S(()=>[r.value?.map(e=>w(e))??[C].filter(e=>e!=null),b((0,t.toValue)(r.value?e[1]:e[0])),b((0,t.unref)(r.value?e[2]:e[1])),(0,t.toValue)(r.value?e[3]:e[2])],([e,t,r,i],a,o)=>{if(!e?.length||!t?.length||!r?.length)return;let s=h(i)?{...i}:i,c=e.flatMap(e=>t.flatMap(t=>r.map(r=>n(e,t,r,s))));o(()=>{c.forEach(e=>e())})},{flush:`post`})}function E(){let e=(0,t.shallowRef)(!1),n=(0,t.getCurrentInstance)();return n&&(0,t.onMounted)(()=>{e.value=!0},n),e}function D(e){let n=E();return(0,t.computed)(()=>(n.value,!!e()))}var O=Symbol(`vueuse-ssr-width`);function k(){let e=(0,t.hasInjectionContext)()?f(O,null):null;return typeof e==`number`?e:void 0}function A(e,n={}){let{window:r=C,ssrWidth:i=k()}=n,a=D(()=>r&&`matchMedia`in r&&typeof r.matchMedia==`function`),o=(0,t.shallowRef)(typeof i==`number`),s=(0,t.shallowRef)(),c=(0,t.shallowRef)(!1);return(0,t.watchEffect)(()=>{if(o.value){o.value=!a.value,c.value=(0,t.toValue)(e).split(`,`).some(e=>{let t=e.includes(`not all`),n=e.match(/\(\s*min-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/),r=e.match(/\(\s*max-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/),a=!!(n||r);return n&&a&&(a=i>=y(n[1])),r&&a&&(a=i<=y(r[1])),t?!a:a});return}a.value&&(s.value=r.matchMedia((0,t.toValue)(e)),c.value=s.value.matches)}),T(s,`change`,e=>{c.value=e.matches},{passive:!0}),(0,t.computed)(()=>c.value)}function j(e={}){let{window:n=C}=e,r=(0,t.shallowRef)(1),i=A(()=>`(resolution: ${r.value}dppx)`,e),a=g;return n&&(a=S(i,()=>r.value=n.devicePixelRatio)),{pixelRatio:(0,t.shallowReadonly)(r),stop:a}}var M={key:0,class:`pdf-progress`},N=(0,t.defineComponent)({__name:`PdfDocument`,props:{hideText:{type:Boolean},hideNumber:{type:Boolean},zoomType:{},zoom:{},viewport:{},src:{}},emits:[`error`,`update:zoom`],setup(e,{emit:r}){let i=e,a=r,{pixelRatio:o}=j(),s=(0,t.shallowRef)(),c=(0,t.shallowRef)([]),l=(0,t.ref)(),d=(0,t.ref)(!1),f=(0,t.ref)(0),p;async function m(){p&&=(await p.destroy(),void 0),c.value.forEach(e=>e.cleanup()),c.value=[];let e=s.value;e&&(e.destroy(),s.value=void 0)}return(0,t.watch)(()=>i.src,async e=>{await m(),e&&(p=(0,n.getDocument)(e),d.value=!0,p.onProgress=e=>{e.total&&(f.value=e.loaded/e.total)},p.promise.then(e=>{s.value=e;let t=[];for(let n=1;n<=e.numPages;n++)t.push(e.getPage(n));Promise.all(t).then(t=>{e===s.value&&(c.value=t)})}).catch(e=>{a(`error`,e)}).finally(()=>{d.value=!1}))},{immediate:!0}),(0,t.onBeforeUnmount)(()=>{m()}),(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{ref_key:`rootEl`,ref:l},[(0,t.renderSlot)(n.$slots,`loading`,{src:i.src,loading:d.value,progress:f.value},()=>[d.value?((0,t.openBlock)(),(0,t.createElementBlock)(`p`,M,`loading `+(0,t.toDisplayString)(Math.ceil(100*f.value))+`%`,1)):(0,t.createCommentVNode)(``,!0)]),((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(c.value,i=>((0,t.openBlock)(),(0,t.createBlock)(u,{key:i.pageNumber,page:i,"hide-number":e.hideNumber,"hide-text":e.hideText,"zoom-type":e.zoomType,zoom:e.zoom,"onUpdate:zoom":r[0]||=e=>a(`update:zoom`,e),viewport:e.viewport,"device-pixel-ratio":(0,t.unref)(o)},{default:(0,t.withCtx)(({displaySize:e})=>[(0,t.renderSlot)(n.$slots,`default`,{doc:s.value,page:i,displaySize:e})]),_:2},1032,[`page`,`hide-number`,`hide-text`,`zoom-type`,`zoom`,`viewport`,`device-pixel-ratio`]))),128))],512))}});e.PdfHost=(0,t.defineComponent)({__name:`PdfHost`,props:{workerSrc:{},sources:{},sourceKey:{type:Function},zoomType:{},zoom:{},hideText:{type:Boolean},hideNumber:{type:Boolean}},emits:[`update:zoom`,`update:zoomType`,`error`],setup(e,{expose:i,emit:a}){let o=e,s=a,c=(0,t.ref)();i({zoomIn:v,zoomOut:y}),(0,t.watch)(()=>o.workerSrc,e=>{e&&(n.GlobalWorkerOptions.workerSrc=e)},{immediate:!0});function l(e){e.ctrlKey&&(e.preventDefault(),e.deltaY<0?v():y())}function u(e){e.ctrlKey&&(e.key===`0`||e.which==48)&&s(`update:zoomType`,r.Auto)}let d=(0,t.ref)({width:0,height:0}),f=new WeakMap,p=1;function m(e,t){if(typeof e==`string`)return`str:${e}:${t}`;if(e instanceof URL)return`url:${e.href}:${t}`;if(e&&typeof e==`object`){let n=e,r=f.get(n);if(r)return`obj:${r}:${t}`;let i=p++;return f.set(n,i),`obj:${i}:${t}`}return`src:${t}`}let h=(0,t.computed)(()=>o.sources.map((e,t)=>({source:e,key:o.sourceKey?o.sourceKey(e,t):m(e,t)}))),g=x(()=>{let e=c.value;e&&(d.value={width:e.offsetWidth,height:e.offsetHeight})},100);function _(e){let t=e%.25;return Number((e-t).toFixed(2))}function v(){let e=_((o.zoom||1)+.25);s(`update:zoom`,Math.min(e,2)),s(`update:zoomType`,r.Custom)}function y(){let e=_((o.zoom||1)-.25);s(`update:zoom`,Math.max(e,.25)),s(`update:zoomType`,r.Custom)}function b(e,t){s(`error`,{source:e,error:t})}return(0,t.watch)(()=>o.zoom,(e,n)=>{let r=c.value;if(r&&e&&n){let i=r.scrollTop,a=r.scrollLeft,o=e/n;(0,t.nextTick)(()=>{r.scrollTop=i*o,r.scrollLeft=a*o})}}),(0,t.onMounted)(()=>{window.addEventListener(`resize`,g),g()}),(0,t.onBeforeUnmount)(()=>{window.removeEventListener(`resize`,g)}),(n,i)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{ref_key:`rootEl`,ref:c,onWheel:l,onKeydown:u,tabindex:`0`,class:`pdf-host`},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(h.value,a=>((0,t.openBlock)(),(0,t.createBlock)(N,{key:a.key,viewport:d.value,src:a.source,"hide-number":!!e.hideNumber,"hide-text":!!e.hideText,"zoom-type":e.zoomType||(0,t.unref)(r).Auto,zoom:e.zoom||1,"onUpdate:zoom":i[0]||=e=>s(`update:zoom`,e),onError:e=>b(a.source,e)},{loading:(0,t.withCtx)(({loading:e,progress:r})=>[(0,t.renderSlot)(n.$slots,`loading`,{source:a.source,loading:e,progress:r})]),default:(0,t.withCtx)(({doc:e,page:r,displaySize:i})=>[(0,t.renderSlot)(n.$slots,`page`,{source:a.source,doc:e,page:r,displaySize:i})]),_:2},1032,[`viewport`,`src`,`hide-number`,`hide-text`,`zoom-type`,`zoom`,`onError`]))),128)),(0,t.renderSlot)(n.$slots,`default`)],544))}}),e.ZoomType=r});

package/package.json

@@ -1,27 +1,26 @@
 {
   "name": "pdfjs-vue3",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Using pdfjs to display PDFs as a vue 3 component.",
   "author": "Eugene Wang",
   "license": "Apache-2.0",
   "homepage": "https://github.com/soukoku/pdfjs-vue",
   "repository": {
     "type": "git",
-    "url": "https://github.com/soukoku/pdfjs-vue.git"
+    "url": "git+https://github.com/soukoku/pdfjs-vue.git"
   },
   "bugs": {
     "url": "https://github.com/soukoku/pdfjs-vue/issues"
   },
   "files": [
     "dist/pdfjs*",
-    "dist/style*",
     "types/index*",
     "types/types*",
     "types/PdfHost*"
   ],
   "types": "./types/index.d.ts",
   "main": "./dist/pdfjs-vue3.umd.js",
-  "style": "./dist/style.css",
+  "style": "./dist/pdfjs-vue3.css",
   "module": "./dist/pdfjs-vue3.es.js",
   "exports": {
     ".": {
@@ -40,15 +39,13 @@
     "vue": "^3.5.32"
   },
   "devDependencies": {
-    "@babel/types": "^7.23.0",
-    "@types/node": "^25.5.2",
-    "@vitejs/plugin-vue": "^6.0.5",
+    "@babel/types": "^7.29.0",
+    "@types/node": "^25.6.0",
+    "@vitejs/plugin-vue": "^6.0.6",
+    "@vueuse/core": "^14.3.0",
     "modern-normalize": "^3.0.1",
     "typescript": "^5.9.3",
-    "vite": "^8.0.3",
-    "vue-tsc": "^3.2.6"
-  },
-  "dependencies": {
-    "@vueuse/core": "^14.2.1"
+    "vite": "^8.0.10",
+    "vue-tsc": "^3.2.8"
   }
 }

package/types/PdfHost.vue.d.ts

@@ -8,6 +8,10 @@ type __VLS_Props = {
      * Array of pdf sources to display.
      */
     sources: PdfSource[];
+    /**
+     * Optional key generator used by v-for for source identity.
+     */
+    sourceKey?: (source: PdfSource, index: number) => string | number;
     /**
      * Type of zoom used. Defaults to Auto.
      */
@@ -27,22 +31,22 @@ type __VLS_Props = {
 };
 declare function zoomIn(): void;
 declare function zoomOut(): void;
-declare var __VLS_10: {
+declare var __VLS_11: {
     source: PdfSource;
     loading: boolean;
     progress: number;
-}, __VLS_13: {
+}, __VLS_14: {
     source: PdfSource;
     doc: import("pdfjs-dist/types/src/display/api").PDFDocumentProxy | undefined;
     page: import("pdfjs-dist/types/src/display/api").PDFPageProxy;
     displaySize: import("pdfjs-dist/types/src/display/display_utils").PageViewport;
-}, __VLS_15: {};
+}, __VLS_16: {};
 type __VLS_Slots = {} & {
-    loading?: (props: typeof __VLS_10) => any;
+    loading?: (props: typeof __VLS_11) => any;
 } & {
-    page?: (props: typeof __VLS_13) => any;
+    page?: (props: typeof __VLS_14) => any;
 } & {
-    default?: (props: typeof __VLS_15) => any;
+    default?: (props: typeof __VLS_16) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     /**
@@ -54,9 +58,17 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
      */
     zoomOut: typeof zoomOut;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    error: (payload: {
+        source: PdfSource;
+        error: unknown;
+    }) => any;
     "update:zoom": (zoom: number) => any;
     "update:zoomType": (zoomType: ZoomType) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onError?: ((payload: {
+        source: PdfSource;
+        error: unknown;
+    }) => any) | undefined;
     "onUpdate:zoom"?: ((zoom: number) => any) | undefined;
     "onUpdate:zoomType"?: ((zoomType: ZoomType) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;