@sdata/web-vue 3.9.0 → 3.11.0

package/es/components.d.ts

@@ -23,6 +23,7 @@ declare module 'vue' {
         SdCard: SDVue['Card'];
         SdCardMeta: SDVue['CardMeta'];
         SdCardGrid: SDVue['CardGrid'];
+        SdSelectableCard: SDVue['SelectableCard'];
         SdCarousel: SDVue['Carousel'];
         SdCarouselItem: SDVue['CarouselItem'];
         SdCascader: SDVue['Cascader'];

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

@@ -1,8 +1,12 @@
 import type { PropType } from 'vue';
-import type { FilePreviewerContentSlotProps, FilePreviewerImageProps, FilePreviewerMediaProps, FilePreviewerPdfProps, FilePreviewerType } from './types';
+import type { FilePreviewerContentSlotProps, FilePreviewerImageProps, FilePreviewerImageSlotProps, FilePreviewerMediaProps, FilePreviewerMediaSlotProps, FilePreviewerPdfProps, FilePreviewerPdfSlotProps, FilePreviewerType } from './types';
 type __VLS_Slots = {
     title?: () => unknown;
     content?: (_props: FilePreviewerContentSlotProps) => unknown;
+    image?: (_props: FilePreviewerImageSlotProps) => unknown;
+    video?: (_props: FilePreviewerMediaSlotProps) => unknown;
+    audio?: (_props: FilePreviewerMediaSlotProps) => unknown;
+    pdf?: (_props: FilePreviewerPdfSlotProps) => unknown;
 };
 declare function close(): void;
 declare function onPreviewLoad(): void;

package/es/file-previewer/file-previewer.vue_vue_type_script_setup_true_lang.js

@@ -9,7 +9,8 @@ import usePopupManager from "../_hooks/use-popup-manager.js";
 import usePopupContainer from "../_hooks/use-popup-container.js";
 import usePopupOverflowHidden from "../_hooks/use-popup-overflow-hidden.js";
 import Image from "../image/index.js";
-import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, openBlock, reactive, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toRefs, unref, useSlots, watch, withCtx } from "vue";
+import { usePdfJs } from "./use-pdf-js.js";
+import { Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onBeforeUnmount, openBlock, reactive, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toRefs, unref, useSlots, watch, withCtx } from "vue";
 //#region components/file-previewer/file-previewer.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["tabindex"];
 var _hoisted_2 = [
@@ -17,6 +18,8 @@ var _hoisted_2 = [
 	"aria-modal",
 	"aria-label"
 ];
+var _hoisted_3 = ["disabled"];
+var _hoisted_4 = ["disabled"];
 var file_previewer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "FilePreviewer" }), {}, {
 	__name: "file-previewer",
 	props: {
@@ -138,7 +141,7 @@ var file_previewer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 			return (_visible$value = visible === null || visible === void 0 ? void 0 : visible.value) !== null && _visible$value !== void 0 ? _visible$value : localVisible.value;
 		});
 		const shouldRender = computed(() => !fullscreen.value || mergedVisible.value);
-		const useImagePreview = computed(() => type.value === "image" && fullscreen.value && !slots.content);
+		const useImagePreview = computed(() => type.value === "image" && fullscreen.value && !slots.content && !slots.image);
 		const container = usePopupContainer(document.body, reactive({ popupContainer }));
 		const popupVisible = computed(() => fullscreen.value && mergedVisible.value);
 		const { zIndex } = usePopupManager("dialog", { visible: popupVisible });
@@ -246,25 +249,87 @@ var file_previewer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 				}
 			});
 		});
-		const mergedPdfProps = computed(() => {
-			var _pdfProps$value;
-			const userProps = (_pdfProps$value = pdfProps === null || pdfProps === void 0 ? void 0 : pdfProps.value) !== null && _pdfProps$value !== void 0 ? _pdfProps$value : {};
-			return _objectSpread2(_objectSpread2({ title: "PDF preview" }, userProps), {}, {
-				src: currentSrc.value,
-				onLoad: (event) => {
-					callEventHandler(userProps.onLoad, event);
-					onPreviewLoad();
-				},
-				onError: (event) => {
-					callEventHandler(userProps.onError, event);
-					onLoadError();
-				}
-			});
+		const { doc: pdfDoc, numPages: pdfNumPages, page: pdfCurrentPage, goto: pdfGoto, prev: pdfPrev, next: pdfNext, render: pdfRender, load: loadPdf, destroy: destroyPdf } = usePdfJs({
+			src: () => currentSrc.value,
+			pdfProps: () => pdfProps === null || pdfProps === void 0 ? void 0 : pdfProps.value,
+			onStatus: (next) => {
+				status.value = next;
+			}
+		});
+		const pdfCanvasRef = shallowRef();
+		const hasTypeSlot = computed(() => {
+			switch (type.value) {
+				case "image": return !!slots.image;
+				case "video": return !!slots.video;
+				case "audio": return !!slots.audio;
+				case "pdf": return !!slots.pdf;
+				default: return false;
+			}
 		});
+		const pdfSlotProps = computed(() => ({
+			src: currentSrc.value,
+			status: status.value,
+			loading: isLoading.value,
+			loaded: isLoaded.value,
+			error: isError.value,
+			doc: pdfDoc.value,
+			page: pdfCurrentPage.value,
+			numPages: pdfNumPages.value,
+			goto: pdfGoto,
+			prev: pdfPrev,
+			next: pdfNext,
+			render: pdfRender,
+			close,
+			onLoad: onPreviewLoad,
+			onError: onLoadError
+		}));
+		const mediaSlotProps = computed(() => ({
+			src: currentSrc.value,
+			status: status.value,
+			loading: isLoading.value,
+			loaded: isLoaded.value,
+			error: isError.value,
+			skin: mediaSkin.value,
+			useVideoJs: useVideoJsMediaSkin.value,
+			playerProps: mediaPlayerProps.value,
+			skinProps: mediaSkinProps.value,
+			close,
+			onLoad: onPreviewLoad,
+			onError: onLoadError
+		}));
+		const imageSlotProps = computed(() => ({
+			src: currentSrc.value,
+			status: status.value,
+			loading: isLoading.value,
+			loaded: isLoaded.value,
+			error: isError.value,
+			imageProps: mergedImageProps.value,
+			close,
+			onLoad: onPreviewLoad,
+			onError: onLoadError
+		}));
 		usePopupOverflowHidden(reactive({
 			container,
 			hidden: popupVisible
 		}));
+		watch([
+			pdfDoc,
+			pdfCurrentPage,
+			() => {
+				var _pdfProps$value;
+				return pdfProps === null || pdfProps === void 0 || (_pdfProps$value = pdfProps.value) === null || _pdfProps$value === void 0 ? void 0 : _pdfProps$value.scale;
+			},
+			() => {
+				var _pdfProps$value2;
+				return pdfProps === null || pdfProps === void 0 || (_pdfProps$value2 = pdfProps.value) === null || _pdfProps$value2 === void 0 ? void 0 : _pdfProps$value2.rotation;
+			}
+		], () => {
+			if (!pdfDoc.value || !pdfCanvasRef.value) return;
+			pdfRender(pdfCanvasRef.value, pdfCurrentPage.value);
+		}, { flush: "post" });
+		onBeforeUnmount(() => {
+			destroyPdf();
+		});
 		function resetPreviewState() {
 			status.value = "beforeLoad";
 		}
@@ -359,15 +424,23 @@ var file_previewer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 				return;
 			}
 			const currentRequestId = requestId.value;
+			if (type.value === "pdf") {
+				loadPdf();
+				return;
+			}
 			if (type.value === "video" || type.value === "audio") {
 				if (useVideoJsMediaSkin.value) {
 					prepareMedia(currentRequestId);
 					return;
 				}
+				if (hasTypeSlot.value) {
+					status.value = "loaded";
+					return;
+				}
 				status.value = "loading";
 				return;
 			}
-			if (type.value === "pdf") {
+			if (hasTypeSlot.value) {
 				status.value = "loaded";
 				return;
 			}
@@ -412,22 +485,45 @@ var file_previewer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 				}, [unref(title) || _ctx.$slots.title ? (openBlock(), createElementBlock("header", {
 					key: 0,
 					class: normalizeClass(`${unref(prefixCls)}-header`)
-				}, [renderSlot(_ctx.$slots, "title", {}, () => [createElementVNode("span", { class: normalizeClass(`${unref(prefixCls)}-title`) }, toDisplayString(unref(title)), 3)])], 2)) : createCommentVNode("", true), createElementVNode("div", { class: normalizeClass(`${unref(prefixCls)}-body`) }, [renderSlot(_ctx.$slots, "content", normalizeProps(guardReactiveProps(contentSlotProps.value)), () => [unref(type) === "image" ? (openBlock(), createBlock(unref(Image), mergeProps({ key: currentSrc.value + "image" }, mergedImageProps.value, { class: `${unref(prefixCls)}-image` }), null, 16, ["class"])) : unref(type) === "video" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [useVideoJsMediaSkin.value ? (openBlock(), createBlock(resolveDynamicComponent(mediaPlayerTag.value), mergeProps({ key: 0 }, mediaPlayerProps.value, { class: `${unref(prefixCls)}-video-player` }), {
+				}, [renderSlot(_ctx.$slots, "title", {}, () => [createElementVNode("span", { class: normalizeClass(`${unref(prefixCls)}-title`) }, toDisplayString(unref(title)), 3)])], 2)) : createCommentVNode("", true), createElementVNode("div", { class: normalizeClass(`${unref(prefixCls)}-body`) }, [renderSlot(_ctx.$slots, "content", normalizeProps(guardReactiveProps(contentSlotProps.value)), () => [unref(type) === "image" ? renderSlot(_ctx.$slots, "image", normalizeProps(mergeProps({ key: 0 }, imageSlotProps.value)), () => [(openBlock(), createBlock(unref(Image), mergeProps({ key: currentSrc.value + "image" }, mergedImageProps.value, { class: `${unref(prefixCls)}-image` }), null, 16, ["class"]))]) : unref(type) === "video" ? renderSlot(_ctx.$slots, "video", normalizeProps(mergeProps({ key: 1 }, mediaSlotProps.value)), () => [useVideoJsMediaSkin.value ? (openBlock(), createBlock(resolveDynamicComponent(mediaPlayerTag.value), mergeProps({ key: 0 }, mediaPlayerProps.value, { class: `${unref(prefixCls)}-video-player` }), {
 					default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(mediaSkinTag.value), mergeProps(mediaSkinProps.value, { class: mediaSkinClassNames.value }), {
 						default: withCtx(() => [(openBlock(), createElementBlock("video", mergeProps({ key: currentSrc.value + "video" }, mergedMediaProps.value, { class: `${unref(prefixCls)}-video` }), null, 16))]),
 						_: 1
 					}, 16, ["class"]))]),
 					_: 1
-				}, 16, ["class"])) : (openBlock(), createElementBlock("video", mergeProps({ key: currentSrc.value }, mergedMediaProps.value, { class: `${unref(prefixCls)}-video` }), null, 16))], 64)) : unref(type) === "audio" ? (openBlock(), createElementBlock("div", {
+				}, 16, ["class"])) : (openBlock(), createElementBlock("video", mergeProps({ key: currentSrc.value }, mergedMediaProps.value, { class: `${unref(prefixCls)}-video` }), null, 16))]) : unref(type) === "audio" ? (openBlock(), createElementBlock("div", {
 					key: 2,
 					class: normalizeClass(`${unref(prefixCls)}-audio-panel`)
-				}, [useVideoJsMediaSkin.value ? (openBlock(), createBlock(resolveDynamicComponent(mediaPlayerTag.value), mergeProps({ key: 0 }, mediaPlayerProps.value, { class: `${unref(prefixCls)}-audio-player` }), {
+				}, [renderSlot(_ctx.$slots, "audio", normalizeProps(guardReactiveProps(mediaSlotProps.value)), () => [useVideoJsMediaSkin.value ? (openBlock(), createBlock(resolveDynamicComponent(mediaPlayerTag.value), mergeProps({ key: 0 }, mediaPlayerProps.value, { class: `${unref(prefixCls)}-audio-player` }), {
 					default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(mediaSkinTag.value), mergeProps(mediaSkinProps.value, { class: mediaSkinClassNames.value }), {
 						default: withCtx(() => [(openBlock(), createElementBlock("audio", mergeProps({ key: currentSrc.value + "audio" }, mergedMediaProps.value, { class: `${unref(prefixCls)}-audio` }), null, 16))]),
 						_: 1
 					}, 16, ["class"]))]),
 					_: 1
-				}, 16, ["class"])) : (openBlock(), createElementBlock("audio", mergeProps({ key: currentSrc.value + "audio" }, mergedMediaProps.value, { class: `${unref(prefixCls)}-audio` }), null, 16))], 2)) : unref(type) === "pdf" ? (openBlock(), createElementBlock("iframe", mergeProps({ key: currentSrc.value + "pdf" }, mergedPdfProps.value, { class: `${unref(prefixCls)}-pdf` }), null, 16)) : createCommentVNode("", true)])], 2)], 10, _hoisted_2),
+				}, 16, ["class"])) : (openBlock(), createElementBlock("audio", mergeProps({ key: currentSrc.value + "audio" }, mergedMediaProps.value, { class: `${unref(prefixCls)}-audio` }), null, 16))])], 2)) : unref(type) === "pdf" ? renderSlot(_ctx.$slots, "pdf", normalizeProps(mergeProps({ key: 3 }, pdfSlotProps.value)), () => [createElementVNode("div", { class: normalizeClass(`${unref(prefixCls)}-pdf`) }, [createElementVNode("div", { class: normalizeClass(`${unref(prefixCls)}-pdf-canvas-wrap`) }, [createElementVNode("canvas", {
+					ref_key: "pdfCanvasRef",
+					ref: pdfCanvasRef,
+					class: normalizeClass(`${unref(prefixCls)}-pdf-canvas`)
+				}, null, 2)], 2), unref(pdfNumPages) > 1 ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(`${unref(prefixCls)}-pdf-toolbar`)
+				}, [
+					createElementVNode("button", {
+						type: "button",
+						class: normalizeClass(`${unref(prefixCls)}-pdf-btn`),
+						disabled: unref(pdfCurrentPage) <= 1,
+						"aria-label": "上一页",
+						onClick: _cache[0] || (_cache[0] = (...args) => unref(pdfPrev) && unref(pdfPrev)(...args))
+					}, " ‹ ", 10, _hoisted_3),
+					createElementVNode("span", { class: normalizeClass(`${unref(prefixCls)}-pdf-page`) }, toDisplayString(unref(pdfCurrentPage)) + " / " + toDisplayString(unref(pdfNumPages)), 3),
+					createElementVNode("button", {
+						type: "button",
+						class: normalizeClass(`${unref(prefixCls)}-pdf-btn`),
+						disabled: unref(pdfCurrentPage) >= unref(pdfNumPages),
+						"aria-label": "下一页",
+						onClick: _cache[1] || (_cache[1] = (...args) => unref(pdfNext) && unref(pdfNext)(...args))
+					}, " › ", 10, _hoisted_4)
+				], 2)) : createCommentVNode("", true)], 2)]) : createCommentVNode("", true)])], 2)], 10, _hoisted_2),
 				unref(fullscreen) && unref(closable) ? (openBlock(), createElementBlock("button", {
 					key: 1,
 					type: "button",

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

@@ -80,7 +80,20 @@ declare const FilePreviewer: {
             }>;
         };
         pdfProps: {
-            type: import("vue").PropType<import("./types").FilePreviewerPdfProps>;
+            type: import("vue").PropType<{
+                [x: string]: unknown;
+                [x: number]: unknown;
+                [x: symbol]: unknown;
+                worker?: boolean | undefined;
+                workerSrc?: string | undefined;
+                workerPort?: Worker | undefined;
+                scale?: number | undefined;
+                rotation?: import("./types").FilePreviewerPdfRotation | undefined;
+                page?: number | undefined;
+                documentParams?: import("type-fest").UnknownRecord | undefined;
+                renderParams?: import("type-fest").UnknownRecord | undefined;
+                onDocumentLoad?: ((doc: import("pdfjs-dist").PDFDocumentProxy) => void) | undefined;
+            }>;
         };
     }>> & Readonly<{
         onClose?: (() => any) | undefined;
@@ -191,7 +204,20 @@ declare const FilePreviewer: {
             }>;
         };
         pdfProps: {
-            type: import("vue").PropType<import("./types").FilePreviewerPdfProps>;
+            type: import("vue").PropType<{
+                [x: string]: unknown;
+                [x: number]: unknown;
+                [x: symbol]: unknown;
+                worker?: boolean | undefined;
+                workerSrc?: string | undefined;
+                workerPort?: Worker | undefined;
+                scale?: number | undefined;
+                rotation?: import("./types").FilePreviewerPdfRotation | undefined;
+                page?: number | undefined;
+                documentParams?: import("type-fest").UnknownRecord | undefined;
+                renderParams?: import("type-fest").UnknownRecord | undefined;
+                onDocumentLoad?: ((doc: import("pdfjs-dist").PDFDocumentProxy) => void) | undefined;
+            }>;
         };
     }>> & Readonly<{
         onClose?: (() => any) | undefined;
@@ -296,10 +322,14 @@ declare const FilePreviewer: {
     $slots: {
         title?: () => unknown;
         content?: (_props: import("./types").FilePreviewerContentSlotProps) => unknown;
+        image?: (_props: import("./types").FilePreviewerImageSlotProps) => unknown;
+        video?: (_props: import("./types").FilePreviewerMediaSlotProps) => unknown;
+        audio?: (_props: import("./types").FilePreviewerMediaSlotProps) => unknown;
+        pdf?: (_props: import("./types").FilePreviewerPdfSlotProps) => unknown;
     };
 }) & {
     install: (app: App, options?: SDOptions) => void;
 };
 export type FilePreviewerInstance = InstanceType<typeof _FilePreviewer>;
-export type { FilePreviewerContentSlotProps, FilePreviewerImageProps, FilePreviewerMediaProps, FilePreviewerMediaSkin, FilePreviewerPdfProps, FilePreviewerProps, FilePreviewerStatus, FilePreviewerType, } from './types';
+export type { FilePreviewerContentSlotProps, FilePreviewerImageProps, FilePreviewerImageSlotProps, FilePreviewerMediaProps, FilePreviewerMediaSkin, FilePreviewerMediaSlotProps, FilePreviewerPdfProps, FilePreviewerPdfRotation, FilePreviewerPdfSlotProps, FilePreviewerProps, FilePreviewerStatus, FilePreviewerType, } from './types';
 export default FilePreviewer;

package/es/file-previewer/pdfjs-worker-url.d.ts

@@ -0,0 +1,2 @@
+declare const _default: string;
+export default _default;

package/es/file-previewer/pdfjs-worker-url.js

@@ -0,0 +1,4 @@
+//#region components/file-previewer/pdfjs-worker-url.ts
+var pdfjs_worker_url_default = new URL("./pdfjs-worker.min.mjs", import.meta.url).href;
+//#endregion
+export { pdfjs_worker_url_default as default };