@sdata/web-vue 3.9.0 → 3.11.0

package/es/file-previewer/style/index.css

@@ -79,7 +79,7 @@
   min-width: 0;
   min-height: 0;
 }
-.sd-file-previewer-image, .sd-file-previewer-video-player, .sd-file-previewer-audio-player, .sd-file-previewer-video, .sd-file-previewer-pdf {
+.sd-file-previewer-image, .sd-file-previewer-video-player, .sd-file-previewer-audio-player, .sd-file-previewer-video {
   display: block;
   width: 100%;
   height: 100%;
@@ -122,12 +122,60 @@
   width: 100%;
 }
 .sd-file-previewer-pdf {
-  background: var(--sd-color-bg-2);
-  border: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 100%;
+  height: 100%;
+}
+.sd-file-previewer-pdf-canvas-wrap {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  background: var(--sd-color-bg-1);
+  border-radius: var(--sd-border-radius-medium);
+}
+.sd-file-previewer-pdf-canvas {
+  display: block;
+}
+.sd-file-previewer-pdf-toolbar {
+  display: flex;
+  flex-shrink: 0;
+  gap: 6px;
+  align-items: center;
+  justify-content: center;
+  padding: 4px;
+  color: var(--sd-color-white);
+  background: rgba(0, 0, 0, 0.5);
   border-radius: var(--sd-border-radius-medium);
 }
-.sd-file-previewer-inline .sd-file-previewer-pdf {
-  border-radius: 0;
+.sd-file-previewer-pdf-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  height: 28px;
+  padding: 0 6px;
+  color: inherit;
+  font-size: 16px;
+  line-height: 1;
+  background: transparent;
+  border: 0;
+  border-radius: var(--sd-border-radius-small);
+  cursor: pointer;
+}
+.sd-file-previewer-pdf-btn:disabled {
+  color: var(--sd-color-fill-3);
+  cursor: not-allowed;
+}
+.sd-file-previewer-pdf-page {
+  min-width: 64px;
+  font-size: 14px;
+  text-align: center;
 }
 .sd-file-previewer-close-btn {
   position: absolute;

package/es/file-previewer/style/index.scss

@@ -93,8 +93,7 @@ $image-prefix-cls: string.unquote('#{theme.$prefix}-image');
   &-image,
   &-video-player,
   &-audio-player,
-  &-video,
-  &-pdf {
+  &-video {
     display: block;
     width: 100%;
     height: 100%;
@@ -149,13 +148,66 @@ $image-prefix-cls: string.unquote('#{theme.$prefix}-image');
   }
 
   &-pdf {
-    background: $file-previewer-color-content-bg;
+    display: flex;
+    flex-direction: column;
+    gap: $file-previewer-spacing-pdf-gap;
+    width: 100%;
+    height: 100%;
+  }
+
+  &-pdf-canvas-wrap {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    min-width: 0;
+    min-height: 0;
+    overflow: auto;
+    background: $file-previewer-color-pdf-canvas-bg;
+    border-radius: $file-previewer-radius-pdf-canvas;
+  }
+
+  &-pdf-canvas {
+    display: block;
+  }
+
+  &-pdf-toolbar {
+    display: flex;
+    flex-shrink: 0;
+    gap: $file-previewer-spacing-pdf-toolbar-gap;
+    align-items: center;
+    justify-content: center;
+    padding: $file-previewer-spacing-pdf-toolbar-padding;
+    color: $file-previewer-color-pdf-toolbar-text;
+    background: $file-previewer-color-pdf-toolbar-bg;
+    border-radius: $file-previewer-radius-pdf-canvas;
+  }
+
+  &-pdf-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: $file-previewer-size-pdf-btn-min-width;
+    height: $file-previewer-size-pdf-btn;
+    padding: 0 $file-previewer-spacing-pdf-toolbar-gap;
+    color: inherit;
+    font-size: $file-previewer-font-size-pdf-btn;
+    line-height: 1;
+    background: transparent;
     border: 0;
-    border-radius: $file-previewer-radius-panel;
+    border-radius: $file-previewer-radius-pdf-btn;
+    cursor: pointer;
+
+    &:disabled {
+      color: $file-previewer-color-pdf-btn-disabled;
+      cursor: not-allowed;
+    }
   }
 
-  &-inline &-pdf {
-    border-radius: 0;
+  &-pdf-page {
+    min-width: 64px;
+    font-size: $file-previewer-font-size-pdf-page;
+    text-align: center;
   }
 
   &-close-btn {

package/es/file-previewer/style/token.scss

@@ -29,3 +29,16 @@ $file-previewer-font-size-title: $font-size-title-1;
 $file-previewer-size-audio-width: 560px;
 $file-previewer-size-media-width: 1180px;
 $file-previewer-size-media-height: 78vh;
+$file-previewer-color-pdf-canvas-bg: var(string.unquote('#{$sd-cssvars-prefix}-color-bg-1'));
+$file-previewer-color-pdf-toolbar-bg: rgb(0 0 0 / 50%);
+$file-previewer-color-pdf-toolbar-text: var(string.unquote('#{$sd-cssvars-prefix}-color-white'));
+$file-previewer-color-pdf-btn-disabled: var(string.unquote('#{$sd-cssvars-prefix}-color-fill-3'));
+$file-previewer-spacing-pdf-gap: $spacing-3;
+$file-previewer-spacing-pdf-toolbar-padding: $spacing-2;
+$file-previewer-spacing-pdf-toolbar-gap: $spacing-3;
+$file-previewer-radius-pdf-canvas: $radius-medium;
+$file-previewer-radius-pdf-btn: $radius-small;
+$file-previewer-size-pdf-btn: 28px;
+$file-previewer-size-pdf-btn-min-width: 28px;
+$file-previewer-font-size-pdf-btn: 16px;
+$file-previewer-font-size-pdf-page: $font-size-body-3;

package/es/file-previewer/types.d.ts

@@ -1,3 +1,4 @@
+import type { PDFDocumentProxy } from 'pdfjs-dist';
 import type { Except, Simplify, UnknownRecord } from 'type-fest';
 import type { ImageProps } from '../image/interface';
 export type FilePreviewerType = 'image' | 'video' | 'audio' | 'pdf';
@@ -12,7 +13,18 @@ export type FilePreviewerMediaProps = Simplify<UnknownRecord & {
     playerProps?: UnknownRecord;
     skinProps?: UnknownRecord;
 }>;
-export type FilePreviewerPdfProps = UnknownRecord;
+export type FilePreviewerPdfRotation = 0 | 90 | 180 | 270;
+export type FilePreviewerPdfProps = Simplify<UnknownRecord & {
+    worker?: boolean;
+    workerSrc?: string;
+    workerPort?: Worker;
+    scale?: number;
+    rotation?: FilePreviewerPdfRotation;
+    page?: number;
+    documentParams?: UnknownRecord;
+    renderParams?: UnknownRecord;
+    onDocumentLoad?: (doc: PDFDocumentProxy) => void;
+}>;
 export interface FilePreviewerContentSlotProps {
     src: string;
     type: FilePreviewerType;
@@ -27,6 +39,48 @@ export interface FilePreviewerContentSlotProps {
     onLoad: () => void;
     onError: () => void;
 }
+export interface FilePreviewerPdfSlotProps {
+    src: string;
+    status: FilePreviewerStatus;
+    loading: boolean;
+    loaded: boolean;
+    error: boolean;
+    doc: PDFDocumentProxy | null;
+    page: number;
+    numPages: number;
+    goto: (page: number) => void;
+    prev: () => void;
+    next: () => void;
+    render: (canvas: HTMLCanvasElement, page?: number) => Promise<void>;
+    close: () => void;
+    onLoad: () => void;
+    onError: (error?: unknown) => void;
+}
+export interface FilePreviewerMediaSlotProps {
+    src: string;
+    status: FilePreviewerStatus;
+    loading: boolean;
+    loaded: boolean;
+    error: boolean;
+    skin: FilePreviewerMediaSkin;
+    useVideoJs: boolean;
+    playerProps: UnknownRecord;
+    skinProps: UnknownRecord;
+    close: () => void;
+    onLoad: () => void;
+    onError: (error?: unknown) => void;
+}
+export interface FilePreviewerImageSlotProps {
+    src: string;
+    status: FilePreviewerStatus;
+    loading: boolean;
+    loaded: boolean;
+    error: boolean;
+    imageProps: FilePreviewerImageProps;
+    close: () => void;
+    onLoad: () => void;
+    onError: (error?: unknown) => void;
+}
 export interface FilePreviewerProps {
     src?: string;
     type?: FilePreviewerType;

package/es/file-previewer/use-pdf-js.d.ts

@@ -0,0 +1,20 @@
+import type { PDFDocumentProxy } from 'pdfjs-dist';
+import type { ShallowRef } from 'vue';
+import type { FilePreviewerPdfProps, FilePreviewerStatus } from './types';
+export interface UsePdfJsContext {
+    src: () => string;
+    pdfProps: () => FilePreviewerPdfProps | undefined;
+    onStatus: (status: FilePreviewerStatus) => void;
+}
+export interface UsePdfJsReturn {
+    doc: ShallowRef<PDFDocumentProxy | null>;
+    numPages: ShallowRef<number>;
+    page: ShallowRef<number>;
+    goto: (page: number) => void;
+    prev: () => void;
+    next: () => void;
+    render: (canvas: HTMLCanvasElement, page?: number) => Promise<void>;
+    load: () => Promise<void>;
+    destroy: () => Promise<void>;
+}
+export declare function usePdfJs(context: UsePdfJsContext): UsePdfJsReturn;

package/es/file-previewer/use-pdf-js.js

@@ -0,0 +1,197 @@
+import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
+import { isServerRendering } from "../_utils/dom.js";
+import { _asyncToGenerator } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/asyncToGenerator.js";
+import { shallowRef } from "vue";
+//#region components/file-previewer/use-pdf-js.ts
+var pdfModulePromise;
+function loadPdfModule() {
+	if (!pdfModulePromise) pdfModulePromise = import("pdfjs-dist");
+	return pdfModulePromise;
+}
+var mainThreadWorkerPromise;
+function ensureMainThreadWorker() {
+	if (!mainThreadWorkerPromise) mainThreadWorkerPromise = import("pdfjs-dist/build/pdf.worker.min.mjs").then(() => void 0);
+	return mainThreadWorkerPromise;
+}
+var bundledWorkerSrcPromise;
+function defaultWorkerSrc() {
+	if (!bundledWorkerSrcPromise) bundledWorkerSrcPromise = import("./pdfjs-worker-url.js").then((module) => module.default);
+	return bundledWorkerSrcPromise;
+}
+function resolveWorker(_x, _x2) {
+	return _resolveWorker.apply(this, arguments);
+}
+function _resolveWorker() {
+	_resolveWorker = _asyncToGenerator(function* (props, pdfjs) {
+		if (props.worker === false) {
+			yield ensureMainThreadWorker();
+			return;
+		}
+		if (props.workerPort) {
+			pdfjs.GlobalWorkerOptions.workerPort = props.workerPort;
+			return;
+		}
+		if (props.workerSrc) {
+			pdfjs.GlobalWorkerOptions.workerSrc = props.workerSrc;
+			return;
+		}
+		pdfjs.GlobalWorkerOptions.workerSrc = yield defaultWorkerSrc();
+	});
+	return _resolveWorker.apply(this, arguments);
+}
+function isCancelledError(error) {
+	return error !== null && typeof error === "object" && "name" in error && error.name === "RenderingCancelledException";
+}
+/**
+* @zh 管理 pdf.js 文档加载、分页与画布渲染的生命周期，内部按请求 id 防竞态。
+* @en Manages the pdf.js document loading, pagination and canvas rendering lifecycle, with internal request-id based race protection.
+*/
+function usePdfJs(context) {
+	const doc = shallowRef(null);
+	const numPages = shallowRef(0);
+	const page = shallowRef(1);
+	let loadingTask = null;
+	let renderTask = null;
+	let activePage = null;
+	let loadId = 0;
+	function load() {
+		return _load.apply(this, arguments);
+	}
+	function _load() {
+		_load = _asyncToGenerator(function* () {
+			const url = context.src();
+			if (!url || isServerRendering) return;
+			const currentId = ++loadId;
+			context.onStatus("loading");
+			try {
+				var _context$pdfProps, _props$page, _props$onDocumentLoad;
+				const pdfjs = yield loadPdfModule();
+				if (currentId !== loadId) return;
+				const props = (_context$pdfProps = context.pdfProps()) !== null && _context$pdfProps !== void 0 ? _context$pdfProps : {};
+				yield resolveWorker(props, pdfjs);
+				yield destroy();
+				if (currentId !== loadId) return;
+				loadingTask = pdfjs.getDocument(_objectSpread2({ url }, props.documentParams));
+				const pdfDoc = yield loadingTask.promise;
+				if (currentId !== loadId) {
+					loadingTask = null;
+					return;
+				}
+				doc.value = pdfDoc;
+				numPages.value = pdfDoc.numPages;
+				page.value = Math.min(Math.max((_props$page = props.page) !== null && _props$page !== void 0 ? _props$page : 1, 1), pdfDoc.numPages);
+				context.onStatus("loaded");
+				(_props$onDocumentLoad = props.onDocumentLoad) === null || _props$onDocumentLoad === void 0 || _props$onDocumentLoad.call(props, pdfDoc);
+			} catch (_unused) {
+				if (currentId !== loadId) return;
+				context.onStatus("error");
+			}
+		});
+		return _load.apply(this, arguments);
+	}
+	function render(_x3) {
+		return _render.apply(this, arguments);
+	}
+	function _render() {
+		_render = _asyncToGenerator(function* (canvas, pageNumber = page.value) {
+			var _context$pdfProps2, _props$scale, _props$rotation;
+			const pdfDoc = doc.value;
+			if (!pdfDoc) return;
+			const props = (_context$pdfProps2 = context.pdfProps()) !== null && _context$pdfProps2 !== void 0 ? _context$pdfProps2 : {};
+			const scale = (_props$scale = props.scale) !== null && _props$scale !== void 0 ? _props$scale : 1;
+			const rotation = (_props$rotation = props.rotation) !== null && _props$rotation !== void 0 ? _props$rotation : 0;
+			const target = Math.min(Math.max(pageNumber, 1), numPages.value || 1);
+			if (target !== page.value) page.value = target;
+			if (renderTask) try {
+				renderTask.cancel();
+			} catch (_unused2) {}
+			if (activePage) try {
+				activePage.cleanup();
+			} catch (_unused3) {}
+			const pdfPage = yield pdfDoc.getPage(target);
+			activePage = pdfPage;
+			const viewport = pdfPage.getViewport({
+				scale,
+				rotation
+			});
+			if (!canvas.getContext("2d")) return;
+			const dpr = window.devicePixelRatio || 1;
+			canvas.width = Math.floor(viewport.width * dpr);
+			canvas.height = Math.floor(viewport.height * dpr);
+			canvas.style.width = `${Math.floor(viewport.width)}px`;
+			canvas.style.height = `${Math.floor(viewport.height)}px`;
+			const renderParams = _objectSpread2(_objectSpread2({
+				canvas,
+				viewport
+			}, dpr !== 1 ? { transform: [
+				dpr,
+				0,
+				0,
+				dpr,
+				0,
+				0
+			] } : {}), props.renderParams);
+			const task = pdfPage.render(renderParams);
+			renderTask = task;
+			try {
+				yield task.promise;
+			} catch (error) {
+				if (!isCancelledError(error)) throw error;
+			} finally {
+				if (renderTask === task) renderTask = null;
+			}
+		});
+		return _render.apply(this, arguments);
+	}
+	function goto(next) {
+		if (!doc.value || numPages.value === 0) return;
+		page.value = Math.min(Math.max(next, 1), numPages.value);
+	}
+	function prev() {
+		goto(page.value - 1);
+	}
+	function next() {
+		goto(page.value + 1);
+	}
+	function destroy() {
+		return _destroy.apply(this, arguments);
+	}
+	function _destroy() {
+		_destroy = _asyncToGenerator(function* () {
+			if (renderTask) {
+				try {
+					renderTask.cancel();
+				} catch (_unused4) {}
+				renderTask = null;
+			}
+			if (activePage) {
+				try {
+					activePage.cleanup();
+				} catch (_unused5) {}
+				activePage = null;
+			}
+			const task = loadingTask;
+			loadingTask = null;
+			doc.value = null;
+			numPages.value = 0;
+			page.value = 1;
+			if (task) try {
+				yield task.destroy();
+			} catch (_unused6) {}
+		});
+		return _destroy.apply(this, arguments);
+	}
+	return {
+		doc,
+		numPages,
+		page,
+		goto,
+		prev,
+		next,
+		render,
+		load,
+		destroy
+	};
+}
+//#endregion
+export { usePdfJs };