@l1yp/file-viewer 0.1.0 → 0.1.1

package/dist/components/PptxNavigationPane.js

@@ -0,0 +1,7 @@
+import e from "../_virtual/_plugin-vue_export-helper.js";
+import t from "./PptxNavigationPane.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                                   */
+//#region src/components/PptxNavigationPane.vue
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-1de8828c"]]);
+//#endregion
+export { n as default };

package/dist/components/PptxNavigationPane.vue.d.ts

@@ -0,0 +1,20 @@
+import type { PptxViewer } from '@aiden0z/pptx-renderer';
+import type { PptxNavigationItem } from '@/lib/pptxNavigation';
+type __VLS_Props = {
+    viewer: PptxViewer;
+    items: readonly PptxNavigationItem[];
+    activeIndex: number;
+};
+type __VLS_ModelProps = {
+    'collapsed'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    navigate: (index: number) => any;
+    "update:collapsed": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onNavigate?: ((index: number) => any) | undefined;
+    "onUpdate:collapsed"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/PptxNavigationPane.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,118 @@
+import e from "./icons/Icon.js";
+import { Fragment as t, createElementBlock as n, createElementVNode as r, createVNode as i, defineComponent as a, mergeModels as o, nextTick as s, normalizeClass as c, onBeforeUnmount as l, onMounted as u, openBlock as d, renderList as f, toDisplayString as p, useModel as m, useTemplateRef as h, watch as g } from "vue";
+//#region src/components/PptxNavigationPane.vue?vue&type=script&setup=true&lang.ts
+var _ = { class: "pn__header" }, v = { class: "pn__count" }, y = {
+	ref: "list",
+	class: "pn__list",
+	"aria-label": "幻灯片列表"
+}, b = [
+	"data-nav-slide-index",
+	"aria-current",
+	"title",
+	"onClick"
+], x = { class: "pn__number" }, S = { class: "pn__preview-wrap" }, C = ["data-slide-index"], w = { class: "pn__label" }, T = /*@__PURE__*/ a({
+	__name: "PptxNavigationPane",
+	props: /*@__PURE__*/ o({
+		viewer: {},
+		items: {},
+		activeIndex: {}
+	}, {
+		collapsed: {
+			type: Boolean,
+			default: !1
+		},
+		collapsedModifiers: {}
+	}),
+	emits: /*@__PURE__*/ o(["navigate"], ["update:collapsed"]),
+	setup(a, { emit: o }) {
+		let T = a, E = o, D = m(a, "collapsed"), O = h("list"), k = /* @__PURE__ */ new Map(), A = /* @__PURE__ */ new Map(), j = null;
+		function M() {
+			j?.disconnect(), j = null;
+			for (let e of A.values()) e.dispose();
+			A.clear();
+			for (let e of k.values()) e.innerHTML = "";
+		}
+		function N(e, t) {
+			if (A.has(e)) return;
+			let n = T.viewer.renderThumbnailToContainer(e, t, { width: 104 });
+			n && (A.set(e, n), n.ready.catch(() => {
+				A.get(e) === n && (n.dispose(), A.delete(e), t.innerHTML = "");
+			}));
+		}
+		async function P() {
+			if (M(), D.value) return;
+			await s();
+			let e = O.value;
+			if (e) {
+				if (typeof IntersectionObserver > "u") {
+					for (let [e, t] of k) N(e, t);
+					return;
+				}
+				j = new IntersectionObserver((e) => {
+					for (let t of e) {
+						if (!t.isIntersecting) continue;
+						let e = t.target, n = Number(e.dataset.slideIndex);
+						Number.isInteger(n) && N(n, e), j?.unobserve(e);
+					}
+				}, {
+					root: e,
+					rootMargin: "140px 0px"
+				});
+				for (let e of k.values()) j.observe(e);
+			}
+		}
+		function F(e, t) {
+			let n = k.get(e);
+			if (n && n !== t && j?.unobserve(n), !(t instanceof HTMLElement)) {
+				k.delete(e);
+				return;
+			}
+			k.set(e, t), j?.observe(t);
+		}
+		return g(() => T.viewer, P, { flush: "post" }), g(() => T.items, P, { flush: "post" }), g(D, P, { flush: "post" }), g(() => T.activeIndex, async (e) => {
+			await s(), O.value?.querySelector(`[data-nav-slide-index="${e}"]`)?.scrollIntoView({ block: "nearest" });
+		}), u(P), l(M), (o, s) => (d(), n("aside", {
+			class: c(["pn", { "pn--collapsed": D.value }]),
+			"aria-label": "幻灯片导航"
+		}, [D.value ? (d(), n("button", {
+			key: 0,
+			type: "button",
+			class: "pn__reopen",
+			"aria-label": "展开幻灯片导航",
+			title: "展开幻灯片导航",
+			onClick: s[0] ||= (e) => D.value = !1
+		}, [i(e, {
+			name: "chevronRight",
+			size: 15
+		})])) : (d(), n(t, { key: 1 }, [r("header", _, [r("div", null, [s[2] ||= r("strong", { class: "pn__title" }, "幻灯片", -1), r("span", v, p(a.items.length) + " 张", 1)]), r("button", {
+			type: "button",
+			class: "pn__collapse",
+			"aria-label": "收起幻灯片导航",
+			title: "收起幻灯片导航",
+			onClick: s[1] ||= (e) => D.value = !0
+		}, [i(e, {
+			name: "chevronLeft",
+			size: 15
+		})])]), r("nav", y, [(d(!0), n(t, null, f(a.items, (e) => (d(), n("button", {
+			key: e.index,
+			type: "button",
+			class: c(["pn__item", { "pn__item--active": e.index === a.activeIndex }]),
+			"data-nav-slide-index": e.index,
+			"aria-current": e.index === a.activeIndex ? "page" : void 0,
+			title: `${e.index + 1}. ${e.title}`,
+			onClick: (t) => E("navigate", e.index)
+		}, [
+			r("span", x, p(e.index + 1), 1),
+			r("span", S, [r("span", {
+				ref_for: !0,
+				ref: (t) => F(e.index, t),
+				class: "pn__preview",
+				"data-slide-index": e.index,
+				"aria-hidden": "true"
+			}, null, 8, C)]),
+			r("span", w, p(e.title), 1)
+		], 10, b))), 128))], 512)], 64))], 2));
+	}
+});
+//#endregion
+export { T as default };

package/dist/components/PptxViewer.js

@@ -2,6 +2,6 @@ import e from "../_virtual/_plugin-vue_export-helper.js";
 import t from "./PptxViewer.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                           */
 //#region src/components/PptxViewer.vue
-var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-47d76691"]]);
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-e6f736b9"]]);
 //#endregion
 export { n as default };

package/dist/components/PptxViewer.vue_vue_type_script_setup_true_lang.js

@@ -1,73 +1,99 @@
-import { createCommentVNode as e, createElementBlock as t, createElementVNode as n, defineComponent as r, onBeforeUnmount as i, onMounted as a, openBlock as o, ref as s, toDisplayString as c, watch as l } from "vue";
-import u from "pdfjs-dist/build/pdf.worker.min.mjs?url";
-import { PptxViewer as d, RECOMMENDED_ZIP_LIMITS as f } from "@aiden0z/pptx-renderer";
-import p from "pdfjs-dist/build/pdf.min.mjs?url";
+import e from "./PptxNavigationPane.js";
+import { buildPptxNavigation as t } from "../lib/pptxNavigation.js";
+import { createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, onBeforeUnmount as s, onMounted as c, openBlock as l, shallowRef as u, toDisplayString as d, watch as f } from "vue";
+import p from "pdfjs-dist/build/pdf.worker.min.mjs?url";
+import { PptxViewer as m, RECOMMENDED_ZIP_LIMITS as h } from "@aiden0z/pptx-renderer";
+import g from "pdfjs-dist/build/pdf.min.mjs?url";
 //#region src/components/PptxViewer.vue?vue&type=script&setup=true&lang.ts
-var m = { class: "pv" }, h = {
+var _ = { class: "pv" }, v = { class: "pv__stage" }, y = {
 	key: 0,
 	class: "pv__overlay"
-}, g = {
+}, b = {
 	key: 1,
 	class: "pv__overlay"
-}, _ = { class: "pv__msg pv__msg--error" }, v = /*@__PURE__*/ r({
+}, x = { class: "pv__msg pv__msg--error" }, S = /*@__PURE__*/ o({
 	__name: "PptxViewer",
 	props: {
 		url: {},
 		name: {},
 		size: {}
 	},
-	setup(r) {
-		let v = r, y = s("loading"), b = s(""), x = s(null), S = null;
-		function C() {
-			if (S) {
+	setup(o) {
+		let S = o, C = u("loading"), w = u(""), T = u(null), E = u(null), D = u([]), O = u(0), k = u(!1), A = null, j = null, M;
+		function N() {
+			if (j = null, M && clearTimeout(M), M = void 0, E.value = null, D.value = [], A) {
 				try {
-					S.destroy();
+					A.destroy();
 				} catch {}
-				S = null;
+				A = null;
 			}
 		}
-		async function w() {
-			let e = x.value;
-			if (!v.url || !e) return;
-			y.value = "loading", b.value = "", C(), e.innerHTML = "";
-			let t = v.url;
+		async function P() {
+			let e = T.value;
+			if (!S.url || !e) return;
+			C.value = "loading", w.value = "", N(), e.innerHTML = "";
+			let n = S.url;
 			try {
-				let n = await fetch(t);
-				if (!n.ok) throw Error(`HTTP ${n.status}`);
-				let r = await n.arrayBuffer();
-				if (v.url !== t || x.value !== e) return;
-				let i = await d.open(r, e, {
-					zipLimits: f,
+				let r = await fetch(n);
+				if (!r.ok) throw Error(`HTTP ${r.status}`);
+				let i = await r.arrayBuffer();
+				if (S.url !== n || T.value !== e) return;
+				let a = await m.open(i, e, {
+					zipLimits: h,
 					scrollContainer: e,
 					listOptions: { windowed: !0 },
 					pdfjs: {
-						moduleUrl: p,
-						workerUrl: u
+						moduleUrl: g,
+						workerUrl: p
+					},
+					onSlideChange: (e) => {
+						j !== null && e !== j || S.url === n && (O.value = e);
 					}
 				});
-				if (v.url !== t || x.value !== e) {
+				if (S.url !== n || T.value !== e) {
 					try {
-						i.destroy();
+						a.destroy();
 					} catch {}
 					return;
 				}
-				S = i, y.value = "ready";
+				A = a, E.value = a, D.value = a.presentationData ? t(a.presentationData) : [], O.value = a.currentSlideIndex, C.value = "ready";
 			} catch (e) {
-				b.value = e instanceof Error ? e.message : String(e), y.value = "error";
+				w.value = e instanceof Error ? e.message : String(e), C.value = "error";
 			}
 		}
-		return a(w), l(() => v.url, w), i(() => {
-			C(), x.value && (x.value.innerHTML = "");
-		}), (r, i) => (o(), t("div", m, [n("div", {
+		function F(e) {
+			j = e, O.value = e, M && clearTimeout(M), M = setTimeout(() => {
+				j = null, M = void 0;
+			}, 1e3), A?.goToSlide(e, {
+				behavior: "smooth",
+				block: "start"
+			});
+		}
+		return c(P), f(() => S.url, P), s(() => {
+			N(), T.value && (T.value.innerHTML = "");
+		}), (t, o) => (l(), i("div", _, [C.value === "ready" && E.value ? (l(), n(e, {
+			key: 0,
+			collapsed: k.value,
+			"onUpdate:collapsed": o[0] ||= (e) => k.value = e,
+			viewer: E.value,
+			items: D.value,
+			"active-index": O.value,
+			onNavigate: F
+		}, null, 8, [
+			"collapsed",
+			"viewer",
+			"items",
+			"active-index"
+		])) : r("", !0), a("div", v, [a("div", {
 			ref_key: "docEl",
-			ref: x,
+			ref: T,
 			class: "pv__doc"
-		}, null, 512), y.value === "loading" ? (o(), t("div", h, [...i[0] ||= [n("p", { class: "pv__msg" }, "正在渲染 PPT…", -1)]])) : y.value === "error" ? (o(), t("div", g, [n("div", _, [n("p", null, "渲染失败：" + c(b.value), 1), n("button", {
+		}, null, 512), C.value === "loading" ? (l(), i("div", y, [...o[1] ||= [a("p", { class: "pv__msg" }, "正在渲染 PPT…", -1)]])) : C.value === "error" ? (l(), i("div", b, [a("div", x, [a("p", null, "渲染失败：" + d(w.value), 1), a("button", {
 			type: "button",
 			class: "pv__retry",
-			onClick: w
-		}, "重试")])])) : e("", !0)]));
+			onClick: P
+		}, "重试")])])) : r("", !0)])]));
 	}
 });
 //#endregion
-export { v as default };
+export { S as default };

package/dist/components/XlsxViewer.js

@@ -2,6 +2,6 @@ import e from "../_virtual/_plugin-vue_export-helper.js";
 import t from "./XlsxViewer.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                                           */
 //#region src/components/XlsxViewer.vue
-var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-7c63a9a3"]]);
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-f4f6d50c"]]);
 //#endregion
 export { n as default };