pdfjs-vue3 0.2.1 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +126 -2
  2. package/dist/pdfjs-vue3.es.js +124 -95
  3. package/dist/pdfjs-vue3.umd.js +1 -1
  4. package/package.json +9 -10
  5. package/types/PdfHost.vue.d.ts +18 -6
package/README.md CHANGED
@@ -1,3 +1,127 @@
1
- # Pdfjs in Vue 3
1
+ # pdfjs-vue3
2
2
 
3
- This is an experiment in displaying PDFs using pdfjs as a vue 3 component.
3
+ A experimental Vue 3 component for displaying PDFs using [pdfjs](https://mozilla.github.io/pdf.js/).
4
+
5
+ ## Installation
6
+
7
+ Install the package and its peer dependencies:
8
+
9
+ ```bash
10
+ npm install pdfjs-vue3 pdfjs-dist
11
+ ```
12
+
13
+ ## Setup
14
+
15
+ ### Copy the PDF.js Worker Script
16
+
17
+ The PDF.js library requires a worker script to render PDFs. You need to copy it from
18
+ `pdfjs-dist` into your app's public/static folder so it can be served at runtime.
19
+
20
+ For example, copy it into `public/js/pdfjs/`:
21
+
22
+ ```bash
23
+ # unix/mac
24
+ cp node_modules/pdfjs-dist/build/pdf.worker.min.mjs public/js/pdfjs/
25
+
26
+ # windows
27
+ copy node_modules\pdfjs-dist\build\pdf.worker.min.mjs public\js\pdfjs\
28
+ ```
29
+
30
+ You can choose any path under your public folder — just remember the URL for the next step.
31
+
32
+ ### Import Styles
33
+
34
+ Import the component styles in your app entry or root component:
35
+
36
+ ```ts
37
+ import 'pdfjs-vue3/dist/pdfjs-vue3.css'
38
+ ```
39
+
40
+ ## Usage
41
+
42
+ ### Basic Example
43
+
44
+ ```vue
45
+ <script setup lang="ts">
46
+ import { ref } from 'vue'
47
+ import { PdfHost, ZoomType } from 'pdfjs-vue3'
48
+
49
+ const zoomType = ref(ZoomType.Auto)
50
+ const zoom = ref(1)
51
+ const files = ['/samples/my-document.pdf']
52
+ </script>
53
+
54
+ <template>
55
+ <PdfHost
56
+ worker-src="/js/pdfjs/pdf.worker.min.mjs"
57
+ :sources="files"
58
+ v-model:zoom-type="zoomType"
59
+ v-model:zoom="zoom"
60
+ style="height: 100vh;"
61
+ />
62
+ </template>
63
+ ```
64
+
65
+ ### PdfHost Props
66
+
67
+ | Prop | Type | Default | Description |
68
+ |------|------|---------|-------------|
69
+ | `workerSrc` | `string` | — | URL to the pdfjs worker script. Must be set if not configured elsewhere. |
70
+ | `sources` | `PdfSource[]` | — | Array of PDF sources to display. Each source can be a URL string, `URL`, `TypedArray`, `ArrayBuffer`, or a pdfjs `DocumentInitParameters` object. |
71
+ | `sourceKey` | `(source: PdfSource, index: number) => string \| number` | — | Optional key generator for source identity in rendering. Use this when sources may contain duplicate values. |
72
+ | `zoomType` | `ZoomType` | `ZoomType.Auto` | Type of zoom behavior. |
73
+ | `zoom` | `number` | `1` | Custom zoom percentage (1 = 100%). Used when `zoomType` is `Custom`. |
74
+ | `hideText` | `boolean` | `false` | Hides the selectable text layer. |
75
+ | `hideNumber` | `boolean` | `false` | Hides the page number display. |
76
+
77
+ ### PdfHost Events
78
+
79
+ | Event | Payload | Description |
80
+ |------|---------|-------------|
81
+ | `update:zoom` | `number` | Emitted when zoom changes. |
82
+ | `update:zoomType` | `ZoomType` | Emitted when zoom mode changes. |
83
+ | `error` | `{ source: PdfSource, error: unknown }` | Emitted when loading a source fails. |
84
+
85
+ ### ZoomType Enum
86
+
87
+ | Value | Description |
88
+ |-------|-------------|
89
+ | `Auto` | Fits width up to a certain limit. |
90
+ | `WidthFit` | Fits width of the host with no limit. |
91
+ | `PageFit` | Fits the whole page in the host. |
92
+ | `Custom` | Uses the `zoom` prop value. |
93
+
94
+ ### Exposed Methods
95
+
96
+ The `PdfHost` component exposes `zoomIn()` and `zoomOut()` methods via template ref:
97
+
98
+ ```vue
99
+ <script setup lang="ts">
100
+ import { ref } from 'vue'
101
+ import { PdfHost } from 'pdfjs-vue3'
102
+
103
+ const host = ref()
104
+ </script>
105
+
106
+ <template>
107
+ <button @click="host.zoomIn()">+</button>
108
+ <button @click="host.zoomOut()">-</button>
109
+ <PdfHost ref="host" worker-src="/js/pdfjs/pdf.worker.min.mjs" :sources="['/doc.pdf']" />
110
+ </template>
111
+ ```
112
+
113
+ ### Page Slot
114
+
115
+ Use the `#page` slot to render custom overlays on each page:
116
+
117
+ ```vue
118
+ <PdfHost worker-src="/js/pdfjs/pdf.worker.min.mjs" :sources="files">
119
+ <template #page="{ page, displaySize }">
120
+ <div>Page {{ page.pageNumber }} — {{ displaySize.width }}×{{ displaySize.height }}</div>
121
+ </template>
122
+ </PdfHost>
123
+ ```
124
+
125
+ ## License
126
+
127
+ Apache-2.0
package/dist/pdfjs-vue3.es.js CHANGED
@@ -1,4 +1,4 @@
1
- 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, readonly as h, ref as g, renderList as _, renderSlot 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";
1
+ 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";
2
2
  import { GlobalWorkerOptions as E, RenderingCancelledException as D, TextLayer as O, getDocument as k } from "pdfjs-dist";
3
3
  //#region src/types.ts
4
4
  var A = /* @__PURE__ */ function(e) {
@@ -10,7 +10,7 @@ var A = /* @__PURE__ */ function(e) {
10
10
  page: {}
11
11
  },
12
12
  setup(e) {
13
- let t = e, n = g(), r;
13
+ let t = e, n = h(), r;
14
14
  C(() => [t.viewport, t.page], () => {
15
15
  a();
16
16
  });
@@ -51,7 +51,7 @@ var A = /* @__PURE__ */ function(e) {
51
51
  },
52
52
  emits: ["update:zoom"],
53
53
  setup(e, { emit: o }) {
54
- let s = e, c = o, l = g(), u = g(), d = g(!1), h, _ = t(() => {
54
+ let s = e, c = o, l = h(), u = h(), d = h(!1), g, v = t(() => {
55
55
  let { width: e, height: t } = s.page.getViewport({ scale: I }), { width: n, height: r } = s.viewport, i = 0, a = 1;
56
56
  switch (s.zoomType) {
57
57
  case A.Auto: return i = Math.min(n, F) - 40, a = i / e, I * a;
@@ -59,8 +59,8 @@ var A = /* @__PURE__ */ function(e) {
59
59
  case A.PageFit: return n > r ? (a = r / t, I * a) : (i = n - 40, a = i / e, I * a);
60
60
  }
61
61
  return I * s.zoom;
62
- }), y = t(() => _.value * (s.devicePixelRatio || 1)), x = t(() => s.page.getViewport({ scale: _.value })), S = t(() => s.page.getViewport({ scale: y.value }));
63
- C(_, (e) => {
62
+ }), y = t(() => v.value * (s.devicePixelRatio || 1)), x = t(() => s.page.getViewport({ scale: v.value })), S = t(() => s.page.getViewport({ scale: y.value }));
63
+ C(v, (e) => {
64
64
  let t = e / I;
65
65
  Math.abs(t - s.zoom) > .05 && c("update:zoom", t);
66
66
  }, { immediate: !0 });
@@ -77,7 +77,7 @@ var A = /* @__PURE__ */ function(e) {
77
77
  w.cancel();
78
78
  return;
79
79
  }
80
- console.debug(`rendering page ${e.pageNumber} with zoom ${s.zoom} (scale ${_.value})`), w = e.render({
80
+ console.debug(`rendering page ${e.pageNumber} with zoom ${s.zoom} (scale ${v.value})`), w = e.render({
81
81
  canvas: r,
82
82
  canvasContext: a,
83
83
  viewport: S.value
@@ -94,11 +94,11 @@ var A = /* @__PURE__ */ function(e) {
94
94
  T();
95
95
  }, { immediate: !0 }), p(() => {
96
96
  let e = u.value;
97
- e && (h = new IntersectionObserver(([e]) => {
97
+ e && (g = new IntersectionObserver(([e]) => {
98
98
  d.value = e.isIntersecting;
99
- }, { rootMargin: "200px 0px" }), h.observe(e)), T();
99
+ }, { rootMargin: "200px 0px" }), g.observe(e)), T();
100
100
  }), f(() => {
101
- h?.disconnect(), h = void 0, w &&= (w.cancel(), void 0);
101
+ g?.disconnect(), g = void 0, w &&= (w.cancel(), void 0);
102
102
  }), (t, o) => (m(), i("div", {
103
103
  ref_key: "rootEl",
104
104
  ref: u,
@@ -110,7 +110,7 @@ var A = /* @__PURE__ */ function(e) {
110
110
  key: 0,
111
111
  viewport: x.value,
112
112
  page: e.page
113
- }, null, 8, ["viewport", "page"])), v(t.$slots, "default", { displaySize: x.value })])]), e.hideNumber ? r("", !0) : (m(), i("div", P, b(e.page.pageNumber), 1))], 512));
113
+ }, null, 8, ["viewport", "page"])), _(t.$slots, "default", { displaySize: x.value })])]), e.hideNumber ? r("", !0) : (m(), i("div", P, b(e.page.pageNumber), 1))], 512));
114
114
  }
115
115
  }), R = /* @__PURE__ */ new WeakMap(), z = (...e) => {
116
116
  let t = e[0], n = s()?.proxy ?? c();
@@ -118,8 +118,8 @@ var A = /* @__PURE__ */ function(e) {
118
118
  return n && R.has(n) && t in R.get(n) ? R.get(n)[t] : u(...e);
119
119
  }, B = typeof window < "u" && typeof document < "u";
120
120
  typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
121
- var V = Object.prototype.toString, H = (e) => V.call(e) === "[object Object]", U = () => {};
122
- function W(e, t) {
121
+ var ee = Object.prototype.toString, V = (e) => ee.call(e) === "[object Object]", H = () => {};
122
+ function U(e, t) {
123
123
  function n(...n) {
124
124
  return new Promise((r, i) => {
125
125
  Promise.resolve(e(() => t.apply(this, n), {
@@ -131,9 +131,9 @@ function W(e, t) {
131
131
  }
132
132
  return n;
133
133
  }
134
- function G(e, t = {}) {
135
- let n, r, i = U, a = (e) => {
136
- clearTimeout(e), i(), i = U;
134
+ function W(e, t = {}) {
135
+ let n, r, i = H, a = (e) => {
136
+ clearTimeout(e), i(), i = H;
137
137
  }, o;
138
138
  return (s) => {
139
139
  let c = x(e), l = x(t.maxWait);
@@ -146,16 +146,16 @@ function G(e, t = {}) {
146
146
  });
147
147
  };
148
148
  }
149
- function K(e) {
149
+ function G(e) {
150
150
  return e.endsWith("rem") ? Number.parseFloat(e) * 16 : Number.parseFloat(e);
151
151
  }
152
- function q(e) {
152
+ function K(e) {
153
153
  return Array.isArray(e) ? e : [e];
154
154
  }
155
- function J(e, t = 200, n = {}) {
156
- return W(G(t, n), e);
155
+ function q(e, t = 200, n = {}) {
156
+ return U(W(t, n), e);
157
157
  }
158
- function Y(e, t, n) {
158
+ function J(e, t, n) {
159
159
  return C(e, t, {
160
160
  ...n,
161
161
  immediate: !0
@@ -163,66 +163,66 @@ function Y(e, t, n) {
163
163
  }
164
164
  //#endregion
165
165
  //#region node_modules/@vueuse/core/dist/index.js
166
- var X = B ? window : void 0;
166
+ var Y = B ? window : void 0;
167
167
  B && window.document, B && window.navigator, B && window.location;
168
- function Z(e) {
168
+ function X(e) {
169
169
  let t = x(e);
170
170
  return t?.$el ?? t;
171
171
  }
172
- function Q(...e) {
172
+ function Z(...e) {
173
173
  let n = (e, t, n, r) => (e.addEventListener(t, n, r), () => e.removeEventListener(t, n, r)), r = t(() => {
174
- let t = q(x(e[0])).filter((e) => e != null);
174
+ let t = K(x(e[0])).filter((e) => e != null);
175
175
  return t.every((e) => typeof e != "string") ? t : void 0;
176
176
  });
177
- return Y(() => [
178
- r.value?.map((e) => Z(e)) ?? [X].filter((e) => e != null),
179
- q(x(r.value ? e[1] : e[0])),
180
- q(S(r.value ? e[2] : e[1])),
177
+ return J(() => [
178
+ r.value?.map((e) => X(e)) ?? [Y].filter((e) => e != null),
179
+ K(x(r.value ? e[1] : e[0])),
180
+ K(S(r.value ? e[2] : e[1])),
181
181
  x(r.value ? e[3] : e[2])
182
182
  ], ([e, t, r, i], a, o) => {
183
183
  if (!e?.length || !t?.length || !r?.length) return;
184
- let s = H(i) ? { ...i } : i, c = e.flatMap((e) => t.flatMap((t) => r.map((r) => n(e, t, r, s))));
184
+ let s = V(i) ? { ...i } : i, c = e.flatMap((e) => t.flatMap((t) => r.map((r) => n(e, t, r, s))));
185
185
  o(() => {
186
186
  c.forEach((e) => e());
187
187
  });
188
188
  }, { flush: "post" });
189
189
  }
190
- function $() {
190
+ function Q() {
191
191
  let e = y(!1), t = s();
192
192
  return t && p(() => {
193
193
  e.value = !0;
194
194
  }, t), e;
195
195
  }
196
196
  /* @__NO_SIDE_EFFECTS__ */
197
- function ee(e) {
198
- let n = $();
197
+ function te(e) {
198
+ let n = Q();
199
199
  return t(() => (n.value, !!e()));
200
200
  }
201
- var te = Symbol("vueuse-ssr-width");
201
+ var ne = Symbol("vueuse-ssr-width");
202
202
  /* @__NO_SIDE_EFFECTS__ */
203
- function ne() {
204
- let e = l() ? z(te, null) : null;
203
+ function $() {
204
+ let e = l() ? z(ne, null) : null;
205
205
  return typeof e == "number" ? e : void 0;
206
206
  }
207
207
  function re(e, n = {}) {
208
- let { window: r = X, ssrWidth: i = /* @__PURE__ */ ne() } = n, a = /* @__PURE__ */ ee(() => r && "matchMedia" in r && typeof r.matchMedia == "function"), o = y(typeof i == "number"), s = y(), c = y(!1);
208
+ 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);
209
209
  return w(() => {
210
210
  if (o.value) {
211
211
  o.value = !a.value, c.value = x(e).split(",").some((e) => {
212
212
  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);
213
- return n && a && (a = i >= K(n[1])), r && a && (a = i <= K(r[1])), t ? !a : a;
213
+ return n && a && (a = i >= G(n[1])), r && a && (a = i <= G(r[1])), t ? !a : a;
214
214
  });
215
215
  return;
216
216
  }
217
217
  a.value && (s.value = r.matchMedia(x(e)), c.value = s.value.matches);
218
- }), Q(s, "change", (e) => {
218
+ }), Z(s, "change", (e) => {
219
219
  c.value = e.matches;
220
220
  }, { passive: !0 }), t(() => c.value);
221
221
  }
222
222
  function ie(e = {}) {
223
- let { window: t = X } = e, n = y(1), r = re(() => `(resolution: ${n.value}dppx)`, e), i = U;
224
- return t && (i = Y(r, () => n.value = t.devicePixelRatio)), {
225
- pixelRatio: h(n),
223
+ let { window: t = Y } = e, n = y(1), r = re(() => `(resolution: ${n.value}dppx)`, e), i = H;
224
+ return t && (i = J(r, () => n.value = t.devicePixelRatio)), {
225
+ pixelRatio: v(n),
226
226
  stop: i
227
227
  };
228
228
  }
@@ -243,7 +243,7 @@ var ae = {
243
243
  },
244
244
  emits: ["error", "update:zoom"],
245
245
  setup(t, { emit: a }) {
246
- let o = t, s = a, { pixelRatio: c } = ie(), l = y(), u = y([]), d = g(), p = g(!1), h = g(0), x;
246
+ let o = t, s = a, { pixelRatio: c } = ie(), l = y(), u = y([]), d = h(), p = h(!1), v = h(0), x;
247
247
  async function w() {
248
248
  x &&= (await x.destroy(), void 0), u.value.forEach((e) => e.cleanup()), u.value = [];
249
249
  let e = l.value;
@@ -251,7 +251,7 @@ var ae = {
251
251
  }
252
252
  return C(() => o.src, async (e) => {
253
253
  await w(), e && (x = k(e), p.value = !0, x.onProgress = (e) => {
254
- e.total && (h.value = e.loaded / e.total);
254
+ e.total && (v.value = e.loaded / e.total);
255
255
  }, x.promise.then((e) => {
256
256
  l.value = e;
257
257
  let t = [];
@@ -269,11 +269,11 @@ var ae = {
269
269
  }), (a, f) => (m(), i("div", {
270
270
  ref_key: "rootEl",
271
271
  ref: d
272
- }, [v(a.$slots, "loading", {
272
+ }, [_(a.$slots, "loading", {
273
273
  src: o.src,
274
274
  loading: p.value,
275
- progress: h.value
276
- }, () => [p.value ? (m(), i("p", ae, "loading " + b(Math.ceil(100 * h.value)) + "%", 1)) : r("", !0)]), (m(!0), i(e, null, _(u.value, (e) => (m(), n(L, {
275
+ progress: v.value
276
+ }, () => [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, {
277
277
  key: e.pageNumber,
278
278
  page: e,
279
279
  "hide-number": t.hideNumber,
@@ -284,7 +284,7 @@ var ae = {
284
284
  viewport: t.viewport,
285
285
  "device-pixel-ratio": S(c)
286
286
  }, {
287
- default: T(({ displaySize: t }) => [v(a.$slots, "default", {
287
+ default: T(({ displaySize: t }) => [_(a.$slots, "default", {
288
288
  doc: l.value,
289
289
  page: e,
290
290
  displaySize: t
@@ -305,50 +305,76 @@ var ae = {
305
305
  props: {
306
306
  workerSrc: {},
307
307
  sources: {},
308
+ sourceKey: { type: Function },
308
309
  zoomType: {},
309
310
  zoom: {},
310
311
  hideText: { type: Boolean },
311
312
  hideNumber: { type: Boolean }
312
313
  },
313
- emits: ["update:zoom", "update:zoomType"],
314
- setup(t, { expose: r, emit: a }) {
315
- let o = t, s = a, c = g();
316
- r({
317
- zoomIn: x,
318
- zoomOut: w
319
- }), C(() => o.workerSrc, (e) => {
314
+ emits: [
315
+ "update:zoom",
316
+ "update:zoomType",
317
+ "error"
318
+ ],
319
+ setup(r, { expose: a, emit: o }) {
320
+ let s = r, c = o, l = h();
321
+ a({
322
+ zoomIn: j,
323
+ zoomOut: M
324
+ }), C(() => s.workerSrc, (e) => {
320
325
  e && (E.workerSrc = e);
321
326
  }, { immediate: !0 });
322
- function l(e) {
323
- e.ctrlKey && (e.preventDefault(), e.deltaY < 0 ? x() : w());
324
- }
325
327
  function u(e) {
326
- e.ctrlKey && (e.key === "0" || e.which == 48) && s("update:zoomType", A.Auto);
328
+ e.ctrlKey && (e.preventDefault(), e.deltaY < 0 ? j() : M());
329
+ }
330
+ function v(e) {
331
+ e.ctrlKey && (e.key === "0" || e.which == 48) && c("update:zoomType", A.Auto);
327
332
  }
328
- let h = g({
333
+ let y = h({
329
334
  width: 0,
330
335
  height: 0
331
- }), y = J(() => {
332
- let e = c.value;
333
- e && (h.value = {
336
+ }), b = /* @__PURE__ */ new WeakMap(), x = 1;
337
+ function w(e, t) {
338
+ if (typeof e == "string") return `str:${e}:${t}`;
339
+ if (e instanceof URL) return `url:${e.href}:${t}`;
340
+ if (e && typeof e == "object") {
341
+ let n = e, r = b.get(n);
342
+ if (r) return `obj:${r}:${t}`;
343
+ let i = x++;
344
+ return b.set(n, i), `obj:${i}:${t}`;
345
+ }
346
+ return `src:${t}`;
347
+ }
348
+ let D = t(() => s.sources.map((e, t) => ({
349
+ source: e,
350
+ key: s.sourceKey ? s.sourceKey(e, t) : w(e, t)
351
+ }))), O = q(() => {
352
+ let e = l.value;
353
+ e && (y.value = {
334
354
  width: e.offsetWidth,
335
355
  height: e.offsetHeight
336
356
  });
337
357
  }, 100);
338
- function b(e) {
358
+ function k(e) {
339
359
  let t = e % .25;
340
360
  return Number((e - t).toFixed(2));
341
361
  }
342
- function x() {
343
- let e = b((o.zoom || 1) + .25);
344
- s("update:zoom", Math.min(e, 2)), s("update:zoomType", A.Custom);
362
+ function j() {
363
+ let e = k((s.zoom || 1) + .25);
364
+ c("update:zoom", Math.min(e, 2)), c("update:zoomType", A.Custom);
365
+ }
366
+ function M() {
367
+ let e = k((s.zoom || 1) - .25);
368
+ c("update:zoom", Math.max(e, .25)), c("update:zoomType", A.Custom);
345
369
  }
346
- function w() {
347
- let e = b((o.zoom || 1) - .25);
348
- s("update:zoom", Math.max(e, .25)), s("update:zoomType", A.Custom);
370
+ function N(e, t) {
371
+ c("error", {
372
+ source: e,
373
+ error: t
374
+ });
349
375
  }
350
- return C(() => o.zoom, (e, t) => {
351
- let n = c.value;
376
+ return C(() => s.zoom, (e, t) => {
377
+ let n = l.value;
352
378
  if (n && e && t) {
353
379
  let r = n.scrollTop, i = n.scrollLeft, a = e / t;
354
380
  d(() => {
@@ -356,34 +382,36 @@ var ae = {
356
382
  });
357
383
  }
358
384
  }), p(() => {
359
- window.addEventListener("resize", y), y();
385
+ window.addEventListener("resize", O), O();
360
386
  }), f(() => {
361
- window.removeEventListener("resize", y);
362
- }), (r, a) => (m(), i("div", {
387
+ window.removeEventListener("resize", O);
388
+ }), (t, a) => (m(), i("div", {
363
389
  ref_key: "rootEl",
364
- ref: c,
365
- onWheel: l,
366
- onKeydown: u,
390
+ ref: l,
391
+ onWheel: u,
392
+ onKeydown: v,
367
393
  tabindex: "0",
368
394
  class: "pdf-host"
369
- }, [(m(!0), i(e, null, _(t.sources, (e) => (m(), n(oe, {
370
- viewport: h.value,
371
- src: e,
372
- "hide-number": !!t.hideNumber,
373
- "hide-text": !!t.hideText,
374
- "zoom-type": t.zoomType || S(A).Auto,
375
- zoom: t.zoom || 1,
376
- "onUpdate:zoom": a[0] ||= (e) => s("update:zoom", e)
395
+ }, [(m(!0), i(e, null, g(D.value, (e) => (m(), n(oe, {
396
+ key: e.key,
397
+ viewport: y.value,
398
+ src: e.source,
399
+ "hide-number": !!r.hideNumber,
400
+ "hide-text": !!r.hideText,
401
+ "zoom-type": r.zoomType || S(A).Auto,
402
+ zoom: r.zoom || 1,
403
+ "onUpdate:zoom": a[0] ||= (e) => c("update:zoom", e),
404
+ onError: (t) => N(e.source, t)
377
405
  }, {
378
- loading: T(({ loading: t, progress: n }) => [v(r.$slots, "loading", {
379
- source: e,
380
- loading: t,
381
- progress: n
406
+ loading: T(({ loading: n, progress: r }) => [_(t.$slots, "loading", {
407
+ source: e.source,
408
+ loading: n,
409
+ progress: r
382
410
  })]),
383
- default: T(({ doc: t, page: n, displaySize: i }) => [v(r.$slots, "page", {
384
- source: e,
385
- doc: t,
386
- page: n,
411
+ default: T(({ doc: n, page: r, displaySize: i }) => [_(t.$slots, "page", {
412
+ source: e.source,
413
+ doc: n,
414
+ page: r,
387
415
  displaySize: i
388
416
  })]),
389
417
  _: 2
@@ -393,8 +421,9 @@ var ae = {
393
421
  "hide-number",
394
422
  "hide-text",
395
423
  "zoom-type",
396
- "zoom"
397
- ]))), 256)), v(r.$slots, "default")], 544));
424
+ "zoom",
425
+ "onError"
426
+ ]))), 128)), _(t.$slots, "default")], 544));
398
427
  }
399
428
  });
400
429
  //#endregion
package/dist/pdfjs-vue3.umd.js CHANGED
@@ -1 +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().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.readonly)(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:{},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:m,zoomOut:h}),(0,t.watch)(()=>o.workerSrc,e=>{e&&(n.GlobalWorkerOptions.workerSrc=e)},{immediate:!0});function l(e){e.ctrlKey&&(e.preventDefault(),e.deltaY<0?m():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}),f=x(()=>{let e=c.value;e&&(d.value={width:e.offsetWidth,height:e.offsetHeight})},100);function p(e){let t=e%.25;return Number((e-t).toFixed(2))}function m(){let e=p((o.zoom||1)+.25);s(`update:zoom`,Math.min(e,2)),s(`update:zoomType`,r.Custom)}function h(){let e=p((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`,f),f()}),(0,t.onBeforeUnmount)(()=>{window.removeEventListener(`resize`,f)}),(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)(N,{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});
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().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 CHANGED
@@ -1,27 +1,26 @@
1
1
  {
2
2
  "name": "pdfjs-vue3",
3
- "version": "0.2.1",
3
+ "version": "0.2.2",
4
4
  "description": "Using pdfjs to display PDFs as a vue 3 component.",
5
5
  "author": "Eugene Wang",
6
6
  "license": "Apache-2.0",
7
7
  "homepage": "https://github.com/soukoku/pdfjs-vue",
8
8
  "repository": {
9
9
  "type": "git",
10
- "url": "https://github.com/soukoku/pdfjs-vue.git"
10
+ "url": "git+https://github.com/soukoku/pdfjs-vue.git"
11
11
  },
12
12
  "bugs": {
13
13
  "url": "https://github.com/soukoku/pdfjs-vue/issues"
14
14
  },
15
15
  "files": [
16
16
  "dist/pdfjs*",
17
- "dist/style*",
18
17
  "types/index*",
19
18
  "types/types*",
20
19
  "types/PdfHost*"
21
20
  ],
22
21
  "types": "./types/index.d.ts",
23
22
  "main": "./dist/pdfjs-vue3.umd.js",
24
- "style": "./dist/style.css",
23
+ "style": "./dist/pdfjs-vue3.css",
25
24
  "module": "./dist/pdfjs-vue3.es.js",
26
25
  "exports": {
27
26
  ".": {
@@ -36,17 +35,17 @@
36
35
  "preview": "vite preview"
37
36
  },
38
37
  "peerDependencies": {
39
- "@vueuse/core": "^14.2.1",
40
38
  "pdfjs-dist": "^5.6.205",
41
39
  "vue": "^3.5.32"
42
40
  },
43
41
  "devDependencies": {
44
- "@babel/types": "^7.23.0",
45
- "@types/node": "^25.5.2",
46
- "@vitejs/plugin-vue": "^6.0.5",
42
+ "@babel/types": "^7.29.0",
43
+ "@types/node": "^25.6.0",
44
+ "@vitejs/plugin-vue": "^6.0.6",
45
+ "@vueuse/core": "^14.3.0",
47
46
  "modern-normalize": "^3.0.1",
48
47
  "typescript": "^5.9.3",
49
- "vite": "^8.0.3",
50
- "vue-tsc": "^3.2.6"
48
+ "vite": "^8.0.10",
49
+ "vue-tsc": "^3.2.8"
51
50
  }
52
51
  }
package/types/PdfHost.vue.d.ts CHANGED
@@ -8,6 +8,10 @@ type __VLS_Props = {
8
8
  * Array of pdf sources to display.
9
9
  */
10
10
  sources: PdfSource[];
11
+ /**
12
+ * Optional key generator used by v-for for source identity.
13
+ */
14
+ sourceKey?: (source: PdfSource, index: number) => string | number;
11
15
  /**
12
16
  * Type of zoom used. Defaults to Auto.
13
17
  */
@@ -27,22 +31,22 @@ type __VLS_Props = {
27
31
  };
28
32
  declare function zoomIn(): void;
29
33
  declare function zoomOut(): void;
30
- declare var __VLS_10: {
34
+ declare var __VLS_11: {
31
35
  source: PdfSource;
32
36
  loading: boolean;
33
37
  progress: number;
34
- }, __VLS_13: {
38
+ }, __VLS_14: {
35
39
  source: PdfSource;
36
40
  doc: import("pdfjs-dist/types/src/display/api").PDFDocumentProxy | undefined;
37
41
  page: import("pdfjs-dist/types/src/display/api").PDFPageProxy;
38
42
  displaySize: import("pdfjs-dist/types/src/display/display_utils").PageViewport;
39
- }, __VLS_15: {};
43
+ }, __VLS_16: {};
40
44
  type __VLS_Slots = {} & {
41
- loading?: (props: typeof __VLS_10) => any;
45
+ loading?: (props: typeof __VLS_11) => any;
42
46
  } & {
43
- page?: (props: typeof __VLS_13) => any;
47
+ page?: (props: typeof __VLS_14) => any;
44
48
  } & {
45
- default?: (props: typeof __VLS_15) => any;
49
+ default?: (props: typeof __VLS_16) => any;
46
50
  };
47
51
  declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
48
52
  /**
@@ -54,9 +58,17 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
54
58
  */
55
59
  zoomOut: typeof zoomOut;
56
60
  }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
61
+ error: (payload: {
62
+ source: PdfSource;
63
+ error: unknown;
64
+ }) => any;
57
65
  "update:zoom": (zoom: number) => any;
58
66
  "update:zoomType": (zoomType: ZoomType) => any;
59
67
  }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
68
+ onError?: ((payload: {
69
+ source: PdfSource;
70
+ error: unknown;
71
+ }) => any) | undefined;
60
72
  "onUpdate:zoom"?: ((zoom: number) => any) | undefined;
61
73
  "onUpdate:zoomType"?: ((zoomType: ZoomType) => any) | undefined;
62
74
  }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;