@jc-times/business-ui 0.2.43

package/dist/document-viewer/PdfThumbnailRail.js

@@ -0,0 +1,116 @@
+import { Button as e } from "../Button.js";
+import { NumericInput as t } from "../NumericInput.js";
+import { usePdfCanvas as n } from "./usePdfCanvas.js";
+import { useThumbnailRailCollapsed as r } from "./PdfWorkspace.js";
+import { useEffect as i, useRef as a, useState as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/document-viewer/PdfThumbnailRail.tsx
+function u({ document: n, currentPage: r, onCurrentPageChange: i }) {
+	let a = n.numPages, o = Math.floor((r - 1) / 12) * 12 + 1, s = Array.from({ length: Math.min(12, a - o + 1) }, (e, t) => o + t);
+	return /* @__PURE__ */ l("div", {
+		className: "ui-thumbnail-rail",
+		children: [
+			/* @__PURE__ */ c(t, {
+				"aria-label": "跳转到页面",
+				value: String(r),
+				min: "1",
+				max: String(a),
+				decimalPlaces: 0,
+				onValueCommit: (e) => {
+					let t = Number(e);
+					t >= 1 && t <= a && i(t);
+				}
+			}),
+			/* @__PURE__ */ c("div", {
+				className: "ui-thumbnail-list",
+				children: s.map((e) => /* @__PURE__ */ c(d, {
+					document: n,
+					page: e,
+					active: r === e,
+					onClick: () => i(e)
+				}, e))
+			}),
+			/* @__PURE__ */ l("div", {
+				className: "ui-thumbnail-pager",
+				children: [
+					/* @__PURE__ */ l("span", { children: [
+						o,
+						"–",
+						Math.min(o + 11, a),
+						" / ",
+						a
+					] }),
+					/* @__PURE__ */ c(e, {
+						variant: "secondary",
+						size: "compact",
+						disabled: o === 1,
+						onClick: () => i(Math.max(1, o - 12)),
+						children: "上一组"
+					}),
+					/* @__PURE__ */ c(e, {
+						variant: "secondary",
+						size: "compact",
+						disabled: o + 11 >= a,
+						onClick: () => i(o + 12),
+						children: "下一组"
+					})
+				]
+			})
+		]
+	});
+}
+function d({ document: t, page: n, active: s, onClick: u }) {
+	let d = a(null), [p, m] = o(s), h = r();
+	return i(() => {
+		if (h) {
+			m(!1);
+			return;
+		}
+		let e = d.current;
+		if (!e || typeof IntersectionObserver > "u") {
+			m(!0);
+			return;
+		}
+		let t = new IntersectionObserver(([e]) => m(e.isIntersecting), {
+			root: e.closest(".ui-thumbnail-list"),
+			rootMargin: "120px 0px"
+		});
+		return t.observe(e), () => t.disconnect();
+	}, [
+		h,
+		t,
+		n
+	]), /* @__PURE__ */ l(e, {
+		variant: "ghost",
+		ref: d,
+		className: "ui-page-thumbnail",
+		"aria-current": s ? "page" : void 0,
+		onClick: u,
+		"aria-label": `第 ${n} 页`,
+		children: [!h && (s || p) ? /* @__PURE__ */ c(f, {
+			document: t,
+			page: n
+		}) : /* @__PURE__ */ c("span", {
+			className: "ui-thumbnail-placeholder",
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ l("span", { children: [
+			"第 ",
+			n,
+			" 页"
+		] })]
+	});
+}
+function f({ document: e, page: t }) {
+	let { canvasRef: r, error: i } = n({
+		kind: "thumbnail",
+		document: e,
+		page: t,
+		renderWidth: 112
+	});
+	return /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("canvas", {
+		ref: r,
+		"aria-hidden": "true"
+	}), i && /* @__PURE__ */ c("span", { children: "预览不可用" })] });
+}
+//#endregion
+export { d as PageThumbnail, u as PdfThumbnailRail };

package/dist/document-viewer/PdfToolbar.js

@@ -0,0 +1,61 @@
+import { Button as e } from "../Button.js";
+import { Maximize2 as t, Minimize2 as n, RotateCw as r, ZoomIn as i, ZoomOut as a } from "lucide-react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/document-viewer/PdfToolbar.tsx
+function c(c) {
+	return /* @__PURE__ */ s("div", {
+		className: "ui-viewer-tools",
+		"aria-label": "文档视图工具",
+		children: [
+			/* @__PURE__ */ o(e, {
+				variant: "ghost",
+				size: "compact",
+				className: "ui-viewer-tool",
+				type: "button",
+				"aria-label": "缩小文档",
+				title: "缩小",
+				disabled: c.disabled || !c.canZoomOut,
+				onClick: c.onZoomOut,
+				children: /* @__PURE__ */ o(a, { size: 16 })
+			}),
+			/* @__PURE__ */ s("span", {
+				"aria-live": "polite",
+				children: [Math.round(c.zoom * 100), "%"]
+			}),
+			/* @__PURE__ */ o(e, {
+				variant: "ghost",
+				size: "compact",
+				className: "ui-viewer-tool",
+				type: "button",
+				"aria-label": "放大文档",
+				title: "放大",
+				disabled: c.disabled || !c.canZoomIn,
+				onClick: c.onZoomIn,
+				children: /* @__PURE__ */ o(i, { size: 16 })
+			}),
+			/* @__PURE__ */ o(e, {
+				variant: "ghost",
+				size: "compact",
+				className: "ui-viewer-tool ui-viewer-tool-separated",
+				type: "button",
+				"aria-label": "顺时针旋转文档",
+				title: "顺时针旋转 90°",
+				disabled: c.disabled,
+				onClick: c.onRotate,
+				children: /* @__PURE__ */ o(r, { size: 16 })
+			}),
+			/* @__PURE__ */ o(e, {
+				variant: "ghost",
+				size: "compact",
+				className: "ui-viewer-tool",
+				type: "button",
+				"aria-label": c.fullscreen ? "退出全屏" : "全屏查看文档",
+				title: c.fullscreen ? "退出全屏" : "全屏",
+				onClick: c.onToggleFullscreen,
+				children: c.fullscreen ? /* @__PURE__ */ o(n, { size: 16 }) : /* @__PURE__ */ o(t, { size: 16 })
+			})
+		]
+	});
+}
+//#endregion
+export { c as PdfToolbar };

package/dist/document-viewer/PdfWorkspace.js

@@ -0,0 +1,42 @@
+import { Button as e } from "../Button.js";
+import { PanelLeftClose as t, PanelLeftOpen as n } from "lucide-react";
+import { createContext as r, useContext as i, useEffect as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/document-viewer/PdfWorkspace.tsx
+var l = r(!1), u = () => i(l);
+function d({ rail: r, children: i, className: u = "", ...d }) {
+	let [f, p] = o(() => typeof window < "u" && window.matchMedia("(max-width: 900px)").matches);
+	return a(() => {
+		let e = window.matchMedia("(max-width: 900px)"), t = () => p(e.matches);
+		return e.addEventListener("change", t), () => e.removeEventListener("change", t);
+	}, []), /* @__PURE__ */ c("div", {
+		...d,
+		className: `ui-pdf-workspace ${f ? "ui-rail-collapsed" : ""} ${u}`,
+		children: [
+			/* @__PURE__ */ s("aside", {
+				className: "ui-viewer-rail",
+				hidden: f,
+				"aria-label": "页面缩略图",
+				children: /* @__PURE__ */ s(l.Provider, {
+					value: f,
+					children: r
+				})
+			}),
+			/* @__PURE__ */ c(e, {
+				variant: "secondary",
+				size: "compact",
+				className: "ui-viewer-rail-toggle",
+				"aria-expanded": !f,
+				"aria-label": f ? "显示页面缩略图" : "隐藏页面缩略图",
+				onClick: () => p((e) => !e),
+				children: [s(f ? n : t, { size: 17 }), /* @__PURE__ */ s("span", { children: f ? "页面" : "收起" })]
+			}),
+			/* @__PURE__ */ s("div", {
+				className: "ui-viewer-stage",
+				children: i
+			})
+		]
+	});
+}
+//#endregion
+export { d as PdfWorkspace, u as useThumbnailRailCollapsed };

package/dist/document-viewer/pdf-render-budget.js

@@ -0,0 +1,7 @@
+import { constrainedPixelRatio as e, getPdfRenderBudget as t } from "../document-render-budget.js";
+//#region src/document-viewer/pdf-render-budget.ts
+function n() {
+	return typeof window > "u" ? t(1280, !1) : t(window.innerWidth, window.matchMedia("(hover: none) and (pointer: coarse)").matches);
+}
+//#endregion
+export { e as constrainedPixelRatio, t as getPdfRenderBudget, n as pdfRenderBudgetForWindow };

package/dist/document-viewer/usePdfCanvas.js

@@ -0,0 +1,69 @@
+import { constrainedPixelRatio as e } from "../document-render-budget.js";
+import { pdfRenderBudgetForWindow as t } from "./pdf-render-budget.js";
+import { useEffect as n, useRef as r, useState as i } from "react";
+//#region src/document-viewer/usePdfCanvas.ts
+function a(a) {
+	let s = r(null), c = r(Promise.resolve()), [l, u] = i(""), [d, f] = i(1.414), { document: p, page: m, renderWidth: h, kind: g } = a, _ = g === "page" ? a.zoom : 1, v = g === "page" ? a.rotation : 0;
+	return n(() => {
+		let n = !1;
+		u("");
+		let r, i = c.current.catch(() => void 0).then(async () => {
+			let i = await p.getPage(m);
+			if (n || !s.current) return;
+			let a = g === "page" ? (i.rotate + v) % 360 : i.rotate, c = i.getViewport({
+				scale: 1,
+				rotation: a
+			}), l = g === "page" ? Math.min(3, h * _ / c.width) : h / c.width, d = i.getViewport({
+				scale: l,
+				rotation: a
+			}), y = g === "page" ? e(d.width, d.height, window.devicePixelRatio || 1, t()) : 1;
+			for (let e = 0; e < 2 && !n; e += 1) {
+				let t = s.current;
+				if (!t) return;
+				t.width = Math.ceil(d.width * y), t.height = Math.ceil(d.height * y), t.style.width = g === "thumbnail" ? "100%" : `${d.width}px`, t.style.height = g === "thumbnail" ? "auto" : `${d.height}px`, g === "page" && f(d.height / d.width), r = i.render({
+					canvas: t,
+					canvasContext: t.getContext("2d"),
+					viewport: d,
+					transform: y === 1 ? void 0 : [
+						y,
+						0,
+						0,
+						y,
+						0,
+						0
+					]
+				});
+				try {
+					await r.promise;
+					return;
+				} catch (t) {
+					if (n || o(t)) return;
+					e === 1 && !n && u(`第 ${m} 页加载失败`);
+				} finally {
+					r = void 0;
+				}
+			}
+		});
+		return c.current = i.catch(() => {
+			n || u(`第 ${m} 页加载失败`);
+		}), () => {
+			n = !0, r?.cancel();
+		};
+	}, [
+		p,
+		m,
+		h,
+		_,
+		v,
+		g
+	]), {
+		canvasRef: s,
+		ratio: d,
+		error: l
+	};
+}
+function o(e) {
+	return e instanceof Error && e.name === "RenderingCancelledException";
+}
+//#endregion
+export { a as usePdfCanvas };

package/dist/document-viewer/usePdfViewport.js

@@ -0,0 +1,48 @@
+import { useEffect as e, useRef as t, useState as n } from "react";
+//#region src/document-viewer/usePdfViewport.ts
+var r = [
+	.5,
+	.75,
+	1,
+	1.25,
+	1.5,
+	2
+];
+function i(i) {
+	let a = t(null), [o, s] = n(1), [c, l] = n(0), [u, d] = n(!1), f = r.indexOf(o);
+	e(() => {
+		s(1), l(0);
+	}, [i]), e(() => {
+		let e = () => d(document.fullscreenElement === a.current);
+		return document.addEventListener("fullscreenchange", e), () => document.removeEventListener("fullscreenchange", e);
+	}, []), e(() => {
+		if (!u) return;
+		let e = (e) => {
+			e.key === "Escape" && (document.fullscreenElement === a.current ? document.exitFullscreen().catch(() => void 0) : d(!1));
+		};
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, [u]);
+	async function p() {
+		try {
+			document.fullscreenElement === a.current ? await document.exitFullscreen() : a.current?.requestFullscreen ? await a.current.requestFullscreen() : d((e) => !e);
+		} catch {
+			d((e) => !e);
+		}
+	}
+	return {
+		containerRef: a,
+		zoom: o,
+		setZoom: s,
+		rotation: c,
+		setRotation: l,
+		fullscreen: u,
+		canZoomOut: f > 0,
+		canZoomIn: f < r.length - 1,
+		zoomOut: () => s(r[Math.max(0, f - 1)]),
+		zoomIn: () => s(r[Math.min(r.length - 1, f + 1)]),
+		rotate: () => l((e) => (e + 90) % 360),
+		toggleFullscreen: () => void p()
+	};
+}
+//#endregion
+export { i as usePdfViewport };

package/dist/document-viewer-v2/DocumentViewerV2.js

@@ -0,0 +1,171 @@
+import { DocumentViewer as e } from "../document-viewer/DocumentViewer.js";
+import { Suspense as t, lazy as n, useCallback as r, useMemo as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/document-viewer-v2/DocumentViewerV2.tsx
+var s = n(() => import("@embedpdf/react-pdf-viewer").then((e) => ({ default: e.PDFViewer }))), c = n(() => import("./HeadlessPdfViewer.js")), l = [
+	"annotation",
+	"redaction",
+	"insert",
+	"form"
+], u = "data-business-ui-document-viewer-v2-toolbar", d = "\n[data-epdf-i=\"main-toolbar\"] {\n  min-height: 52px;\n  gap: 8px;\n  padding: 7px 12px;\n  border-bottom-color: var(--ui-border, #dde0eb);\n  background: var(--ui-surface, #fff);\n  box-shadow: 0 1px 0 color-mix(in srgb, var(--ui-text, #242837) 3%, transparent);\n}\n\n[data-epdf-i=\"main-toolbar\"] [data-epdf-i$=\"-group\"] {\n  gap: 4px;\n}\n\n[data-epdf-i=\"main-toolbar\"] button:not([role=\"tab\"]) {\n  width: 36px;\n  min-width: 36px;\n  height: 36px;\n  padding: 7px;\n  border: 1px solid transparent;\n  border-radius: var(--ui-radius, 8px);\n  color: var(--ui-muted, #70778b);\n  background: transparent;\n  box-shadow: none;\n  transition:\n    color var(--ui-motion-fast, 120ms) var(--ui-ease-standard, ease),\n    background-color var(--ui-motion-fast, 120ms) var(--ui-ease-standard, ease),\n    border-color var(--ui-motion-fast, 120ms) var(--ui-ease-standard, ease),\n    box-shadow var(--ui-motion-fast, 120ms) var(--ui-ease-standard, ease);\n}\n\n[data-epdf-i=\"main-toolbar\"] button:not([role=\"tab\"]):hover:not(:disabled) {\n  border-color: color-mix(in srgb, var(--ui-primary, #5965a8) 22%, var(--ui-border, #dde0eb));\n  color: var(--ui-primary-hover, #414a78);\n  background: var(--ui-primary-soft, #eef0fb);\n  box-shadow: none;\n}\n\n[data-epdf-i=\"main-toolbar\"] button:not([role=\"tab\"]):focus-visible {\n  border-color: var(--ui-primary, #5965a8);\n  outline: 3px solid var(--ui-focus, rgb(89 101 168 / 28%));\n  outline-offset: 1px;\n}\n\n[data-epdf-i=\"main-toolbar\"] button.bg-interactive-selected {\n  border-color: color-mix(in srgb, var(--ui-primary, #5965a8) 42%, var(--ui-border, #dde0eb));\n  color: var(--ui-primary-hover, #414a78);\n  background: var(--ui-primary-soft, #eef0fb);\n  box-shadow: 0 1px 3px color-mix(in srgb, var(--ui-primary, #5965a8) 16%, transparent);\n}\n\n[data-epdf-i=\"main-toolbar\"] button:disabled {\n  opacity: .48;\n}\n\n[data-epdf-i=\"main-toolbar\"] button:not([role=\"tab\"]) > svg {\n  width: 20px;\n  height: 20px;\n}\n\n[data-epdf-i=\"zoom-toolbar\"] > .relative > .flex {\n  height: 36px;\n  padding-left: 8px;\n  overflow: hidden;\n  border: 1px solid var(--ui-border, #dde0eb);\n  border-radius: var(--ui-radius, 8px);\n  color: var(--ui-text, #242837);\n  background: var(--ui-surface, #fff);\n}\n\n[data-epdf-i=\"zoom-toolbar\"] input[name=\"zoom\"] {\n  width: 36px;\n  color: var(--ui-text, #242837);\n  font-weight: 700;\n}\n\n[data-epdf-i=\"zoom-toolbar\"] > .relative > .flex > button {\n  width: 34px;\n  min-width: 34px;\n  height: 34px;\n  padding: 7px;\n  border: 0;\n  border-radius: 6px;\n}\n\n[data-epdf-i=\"main-toolbar\"] [aria-hidden=\"true\"] > div {\n  background: var(--ui-border, #dde0eb);\n}\n\n@container (max-width: 640px) {\n  [data-epdf-i=\"main-toolbar\"] {\n    min-height: 56px;\n    padding: 7px 8px;\n  }\n\n  [data-epdf-i=\"main-toolbar\"] button:not([role=\"tab\"]) {\n    width: 40px;\n    min-width: 40px;\n    height: 40px;\n  }\n}\n";
+function f(e) {
+	let { shadowRoot: t } = e;
+	if (!t || t.querySelector("[data-business-ui-document-viewer-v2-toolbar]")) return;
+	let n = t.ownerDocument.createElement("style");
+	n.setAttribute(u, ""), n.textContent = d, t.append(n);
+}
+var p = {
+	preference: "system",
+	light: {
+		background: {
+			app: "var(--ui-canvas, #f4f5f9)",
+			surface: "var(--ui-surface, #fff)",
+			surfaceAlt: "var(--ui-primary-soft, #eef0fb)",
+			elevated: "var(--ui-surface, #fff)",
+			overlay: "rgb(18 23 42 / 48%)",
+			input: "var(--ui-surface, #fff)"
+		},
+		foreground: {
+			primary: "var(--ui-text, #242837)",
+			secondary: "var(--ui-muted, #70778b)",
+			muted: "var(--ui-muted, #70778b)",
+			disabled: "color-mix(in srgb, var(--ui-muted, #70778b) 58%, transparent)",
+			onAccent: "#fff"
+		},
+		border: {
+			default: "var(--ui-border, #dde0eb)",
+			subtle: "color-mix(in srgb, var(--ui-border, #dde0eb) 72%, transparent)",
+			strong: "var(--ui-border-strong, #b8bfdc)"
+		},
+		accent: {
+			primary: "var(--ui-primary, #5965a8)",
+			primaryHover: "var(--ui-primary-hover, #414a78)",
+			primaryActive: "var(--ui-primary-hover, #414a78)",
+			primaryLight: "var(--ui-primary-soft, #eef0fb)",
+			primaryForeground: "#fff"
+		},
+		interactive: {
+			hover: "var(--ui-primary-soft, #eef0fb)",
+			active: "color-mix(in srgb, var(--ui-primary, #5965a8) 16%, var(--ui-surface, #fff))",
+			selected: "var(--ui-primary-soft, #eef0fb)",
+			focus: "var(--ui-primary, #5965a8)",
+			focusRing: "var(--ui-focus, rgb(89 101 168 / 28%))"
+		},
+		scrollbar: {
+			track: "transparent",
+			thumb: "var(--ui-border-strong, #b8bfdc)",
+			thumbHover: "var(--ui-muted, #70778b)"
+		}
+	}
+};
+function m(e) {
+	return {
+		...p,
+		...e,
+		light: {
+			...p.light,
+			...e?.light,
+			background: {
+				...p.light?.background,
+				...e?.light?.background
+			},
+			foreground: {
+				...p.light?.foreground,
+				...e?.light?.foreground
+			},
+			border: {
+				...p.light?.border,
+				...e?.light?.border
+			},
+			accent: {
+				...p.light?.accent,
+				...e?.light?.accent
+			},
+			interactive: {
+				...p.light?.interactive,
+				...e?.light?.interactive
+			}
+		}
+	};
+}
+function h(e, t = {}) {
+	let { documentManager: n, disabledCategories: r, fonts: i, i18n: a, theme: o, ...s } = t, { id: c, kind: u, ...d } = e;
+	return {
+		worker: !0,
+		tabBar: "never",
+		fontFallback: null,
+		...s,
+		disabledCategories: r ?? [...l],
+		fonts: {
+			ui: null,
+			signature: null,
+			...i
+		},
+		i18n: {
+			defaultLocale: "zh-CN",
+			...a
+		},
+		theme: m(o),
+		documentManager: {
+			maxDocuments: 1,
+			...n,
+			initialDocuments: [{
+				...d,
+				documentId: c,
+				autoActivate: !0
+			}]
+		}
+	};
+}
+function g(n) {
+	return n.renderer === "headless" ? /* @__PURE__ */ a(t, {
+		fallback: /* @__PURE__ */ a("div", {
+			role: "status",
+			children: "正在加载 PDF 查看器…"
+		}),
+		children: /* @__PURE__ */ a(c, { ...n }, `${n.source.kind}:${n.source.id}`)
+	}) : _(n) ? /* @__PURE__ */ a(v, { ...n }) : /* @__PURE__ */ a(e, {
+		...n,
+		className: ["ui-document-viewer-v2-compat", n.className].filter(Boolean).join(" ")
+	});
+}
+function _(e) {
+	return e.source.kind === "url" || e.source.kind === "buffer";
+}
+function v({ source: e, config: n, className: c, style: l, ariaLabel: u = "PDF 文档查看器", onInit: d, onReady: p, title: m, toolbar: g, footer: _ }) {
+	let v = i(() => h(e, n), [e, n]), y = r((e) => {
+		f(e), d?.(e);
+	}, [d]);
+	return /* @__PURE__ */ o("section", {
+		className: ["ui-document-viewer-v2", c].filter(Boolean).join(" "),
+		style: l,
+		"aria-label": u,
+		children: [
+			(m !== void 0 || g !== void 0) && /* @__PURE__ */ o("div", {
+				className: "ui-viewer-toolbar",
+				children: [m !== void 0 && /* @__PURE__ */ a("div", {
+					className: "ui-viewer-title",
+					children: m
+				}), g]
+			}),
+			/* @__PURE__ */ a(t, {
+				fallback: /* @__PURE__ */ a("div", {
+					role: "status",
+					children: "正在加载 PDF 查看器…"
+				}),
+				children: /* @__PURE__ */ a(s, {
+					className: "ui-document-viewer-v2-engine",
+					config: v,
+					onInit: y,
+					onReady: p
+				}, e.id)
+			}),
+			_ !== void 0 && /* @__PURE__ */ a("div", {
+				className: "ui-viewer-footer",
+				children: _
+			})
+		]
+	});
+}
+//#endregion
+export { l as DOCUMENT_VIEWER_V2_DISABLED_CATEGORIES, u as DOCUMENT_VIEWER_V2_TOOLBAR_STYLE_ATTRIBUTE, g as DocumentViewerV2, f as applyDocumentViewerV2ToolbarStyles, h as createDocumentViewerV2Config };