@sdata/web-vue 3.1.0 → 3.2.0

package/es/components.d.ts

@@ -53,6 +53,7 @@ declare module 'vue' {
         SdEllipsis: SDVue['Ellipsis'];
         SdPerformantEllipsis: SDVue['PerformantEllipsis'];
         SdEmpty: SDVue['Empty'];
+        SdFilePreviewer: SDVue['FilePreviewer'];
         SdForm: SDVue['Form'];
         SdFormItem: SDVue['FormItem'];
         SdJsonForm: SDVue['JsonForm'];

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

@@ -0,0 +1,5 @@
+import file_previewer_vue_vue_type_script_setup_true_lang_default from "./file-previewer.vue_vue_type_script_setup_true_lang.js";
+//#region components/file-previewer/file-previewer.vue
+var file_previewer_default = file_previewer_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { file_previewer_default as default };

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

@@ -0,0 +1,126 @@
+import type { PropType } from 'vue';
+import type { FilePreviewerContentSlotProps, FilePreviewerType } from './types';
+type __VLS_Slots = {
+    title?: () => unknown;
+    content?: (_props: FilePreviewerContentSlotProps) => unknown;
+};
+declare function close(): void;
+declare function onPreviewLoad(): void;
+declare function onLoadError(): void;
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    src: {
+        type: StringConstructor;
+    };
+    type: {
+        type: PropType<FilePreviewerType>;
+        default: string;
+    };
+    visible: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    defaultVisible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    fullscreen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    title: {
+        type: StringConstructor;
+    };
+    maskClosable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    closable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    escToClose: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    popupContainer: {
+        type: PropType<HTMLElement | string>;
+    };
+    renderToBody: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {
+    close: typeof close;
+    onLoad: typeof onPreviewLoad;
+    onError: typeof onLoadError;
+    onImageLoad: typeof onPreviewLoad;
+    onPdfLoad: typeof onPreviewLoad;
+    onLoadError: typeof onLoadError;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    "update:visible": (_visible: boolean) => any;
+    "visible-change": (_visible: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    src: {
+        type: StringConstructor;
+    };
+    type: {
+        type: PropType<FilePreviewerType>;
+        default: string;
+    };
+    visible: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    defaultVisible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    fullscreen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    title: {
+        type: StringConstructor;
+    };
+    maskClosable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    closable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    escToClose: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    popupContainer: {
+        type: PropType<HTMLElement | string>;
+    };
+    renderToBody: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onClose?: (() => any) | undefined;
+    "onUpdate:visible"?: ((_visible: boolean) => any) | undefined;
+    "onVisible-change"?: ((_visible: boolean) => any) | undefined;
+}>, {
+    type: FilePreviewerType;
+    visible: boolean;
+    renderToBody: boolean;
+    defaultVisible: boolean;
+    closable: boolean;
+    maskClosable: boolean;
+    escToClose: boolean;
+    fullscreen: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,356 @@
+import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
+import { getPrefixCls } from "../_utils/global-config.js";
+import { isServerRendering } from "../_utils/dom.js";
+import IconClose from "../icon/icon-close/index.js";
+import { _asyncToGenerator } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/asyncToGenerator.js";
+import IconLoading from "../icon/icon-loading/index.js";
+import { KEYBOARD_KEY } from "../_utils/keyboard.js";
+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 { Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, 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 = [
+	"role",
+	"aria-modal",
+	"aria-label"
+];
+var _hoisted_3 = ["src", "alt"];
+var _hoisted_4 = ["src"];
+var _hoisted_5 = ["src"];
+var _hoisted_6 = ["src"];
+var file_previewer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "FilePreviewer" }), {}, {
+	__name: "file-previewer",
+	props: {
+		/**
+		* @zh 文件地址
+		* @en File source url
+		*/
+		src: { type: String },
+		/**
+		* @zh 预览类型，由参数决定使用哪个预览器
+		* @en Preview type, decides which previewer to use
+		*/
+		type: {
+			type: String,
+			default: "image"
+		},
+		/**
+		* @zh 是否可见
+		* @en Whether the previewer is visible
+		* @vModel
+		*/
+		visible: {
+			type: Boolean,
+			default: void 0
+		},
+		/**
+		* @zh 默认是否可见，非受控
+		* @en Default visibility
+		*/
+		defaultVisible: {
+			type: Boolean,
+			default: false
+		},
+		/**
+		* @zh 是否使用全屏弹层展示
+		* @en Whether to show the previewer in fullscreen overlay
+		*/
+		fullscreen: {
+			type: Boolean,
+			default: true
+		},
+		/**
+		* @zh 标题
+		* @en Title
+		*/
+		title: { type: String },
+		/**
+		* @zh 点击遮罩是否关闭
+		* @en Whether to close when mask is clicked
+		*/
+		maskClosable: {
+			type: Boolean,
+			default: true
+		},
+		/**
+		* @zh 是否显示关闭按钮
+		* @en Whether to show close button
+		*/
+		closable: {
+			type: Boolean,
+			default: true
+		},
+		/**
+		* @zh 是否支持 ESC 键关闭
+		* @en Whether to support closing with ESC
+		*/
+		escToClose: {
+			type: Boolean,
+			default: true
+		},
+		/**
+		* @zh 设置弹出框挂载点，同 teleport 的 to
+		* @en Set the mount point, same as teleport to
+		*/
+		popupContainer: { type: [Object, String] },
+		/**
+		* @zh 是否渲染到 body
+		* @en Whether to render to body
+		*/
+		renderToBody: {
+			type: Boolean,
+			default: true
+		}
+	},
+	emits: [
+		"close",
+		"visible-change",
+		"update:visible"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const slots = useSlots();
+		const props = __props;
+		const emit = __emit;
+		const { src, type, visible, defaultVisible, fullscreen, popupContainer, renderToBody, maskClosable, closable, escToClose, title } = toRefs(props);
+		const prefixCls = getPrefixCls("file-previewer");
+		const wrapperRef = shallowRef();
+		const status = shallowRef("beforeLoad");
+		const requestId = shallowRef(0);
+		let videoJsHtmlPromise;
+		const localVisible = shallowRef(defaultVisible.value);
+		const mergedVisible = computed(() => {
+			var _visible$value;
+			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 container = usePopupContainer(document.body, reactive({ popupContainer }));
+		const popupVisible = computed(() => fullscreen.value && mergedVisible.value);
+		const { zIndex } = usePopupManager("dialog", { visible: popupVisible });
+		const isFixed = computed(() => container.value === document.body);
+		const currentSrc = computed(() => {
+			var _src$value;
+			return (_src$value = src === null || src === void 0 ? void 0 : src.value) !== null && _src$value !== void 0 ? _src$value : "";
+		});
+		const isLoading = computed(() => status.value === "loading");
+		const isLoaded = computed(() => status.value === "loaded");
+		const isError = computed(() => status.value === "error");
+		const classNames = computed(() => [
+			prefixCls,
+			`${prefixCls}-${type.value}`,
+			fullscreen.value ? `${prefixCls}-fullscreen` : `${prefixCls}-inline`
+		]);
+		const contentClassNames = computed(() => [
+			`${prefixCls}-content`,
+			`${prefixCls}-content-${type.value}`,
+			fullscreen.value ? `${prefixCls}-content-fullscreen` : `${prefixCls}-content-inline`
+		]);
+		const wrapperStyles = computed(() => {
+			if (!fullscreen.value) return void 0;
+			return isFixed.value ? {
+				zIndex: zIndex.value,
+				position: "fixed"
+			} : {
+				zIndex: "inherit",
+				position: "absolute"
+			};
+		});
+		const contentSlotProps = computed(() => ({
+			src: currentSrc.value,
+			type: type.value,
+			title: title === null || title === void 0 ? void 0 : title.value,
+			visible: shouldRender.value,
+			fullscreen: fullscreen.value,
+			status: status.value,
+			loading: isLoading.value,
+			loaded: isLoaded.value,
+			error: isError.value,
+			close,
+			onLoad: onPreviewLoad,
+			onError: onLoadError
+		}));
+		usePopupOverflowHidden(reactive({
+			container,
+			hidden: popupVisible
+		}));
+		function resetPreviewState() {
+			status.value = "beforeLoad";
+		}
+		function setVisible(nextVisible) {
+			if (nextVisible !== mergedVisible.value) {
+				emit("visible-change", nextVisible);
+				emit("update:visible", nextVisible);
+				localVisible.value = nextVisible;
+			}
+		}
+		function close() {
+			if (fullscreen.value && !mergedVisible.value) return;
+			emit("close");
+			setVisible(false);
+		}
+		function onMaskClick() {
+			if (maskClosable.value) close();
+		}
+		function onKeyDown(event) {
+			if (fullscreen.value && escToClose.value && event.key === KEYBOARD_KEY.ESC) {
+				event.stopPropagation();
+				close();
+			}
+		}
+		function onPreviewLoad() {
+			status.value = "loaded";
+		}
+		function onLoadError() {
+			status.value = "error";
+		}
+		function ensureVideoJsHtml() {
+			return _ensureVideoJsHtml.apply(this, arguments);
+		}
+		function _ensureVideoJsHtml() {
+			_ensureVideoJsHtml = _asyncToGenerator(function* () {
+				if (typeof Element === "undefined" && typeof window !== "undefined" && window.Element) Object.defineProperty(globalThis, "Element", {
+					configurable: true,
+					value: window.Element
+				});
+				if (!videoJsHtmlPromise) videoJsHtmlPromise = import("@videojs/html");
+				yield videoJsHtmlPromise;
+			});
+			return _ensureVideoJsHtml.apply(this, arguments);
+		}
+		function prepareVideo(_x) {
+			return _prepareVideo.apply(this, arguments);
+		}
+		function _prepareVideo() {
+			_prepareVideo = _asyncToGenerator(function* (currentRequestId) {
+				status.value = "loading";
+				try {
+					if (!isServerRendering) yield ensureVideoJsHtml();
+					if (currentRequestId !== requestId.value) return;
+					status.value = "loaded";
+				} catch (_unused) {
+					if (currentRequestId !== requestId.value) return;
+					status.value = "error";
+				}
+			});
+			return _prepareVideo.apply(this, arguments);
+		}
+		watch([
+			src,
+			type,
+			shouldRender
+		], () => {
+			requestId.value += 1;
+			if (!shouldRender.value) return;
+			resetPreviewState();
+			if (fullscreen.value) nextTick(() => {
+				var _wrapperRef$value;
+				return (_wrapperRef$value = wrapperRef.value) === null || _wrapperRef$value === void 0 ? void 0 : _wrapperRef$value.focus();
+			});
+			if (slots.content) {
+				status.value = "loaded";
+				return;
+			}
+			const currentRequestId = requestId.value;
+			if (type.value === "video") {
+				prepareVideo(currentRequestId);
+				return;
+			}
+			if (type.value === "audio" || type.value === "pdf") {
+				status.value = "loaded";
+				return;
+			}
+			status.value = "loading";
+		}, { immediate: true });
+		__expose({
+			close,
+			onLoad: onPreviewLoad,
+			onError: onLoadError,
+			onImageLoad: onPreviewLoad,
+			onPdfLoad: onPreviewLoad,
+			onLoadError
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(Teleport, {
+				to: unref(container),
+				disabled: !unref(fullscreen) || !unref(renderToBody)
+			}, [shouldRender.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				ref_key: "wrapperRef",
+				ref: wrapperRef,
+				class: normalizeClass(classNames.value),
+				style: normalizeStyle(wrapperStyles.value),
+				tabindex: unref(fullscreen) ? -1 : void 0,
+				onKeydown: onKeyDown
+			}, [
+				unref(fullscreen) ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(`${unref(prefixCls)}-mask`),
+					onClick: onMaskClick
+				}, null, 2)) : createCommentVNode("", true),
+				createElementVNode("section", {
+					class: normalizeClass(contentClassNames.value),
+					role: unref(fullscreen) ? "dialog" : "region",
+					"aria-modal": unref(fullscreen) ? "true" : void 0,
+					"aria-label": unref(title) || "File preview"
+				}, [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(), createElementBlock("img", {
+					key: currentSrc.value,
+					class: normalizeClass(`${unref(prefixCls)}-image`),
+					src: currentSrc.value,
+					alt: unref(title) || "",
+					onLoad: onPreviewLoad,
+					onError: onLoadError
+				}, null, 42, _hoisted_3)) : unref(type) === "video" ? (openBlock(), createBlock(resolveDynamicComponent("video-player"), {
+					key: 1,
+					class: normalizeClass(`${unref(prefixCls)}-video-player`)
+				}, {
+					default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent("video-skin"), null, {
+						default: withCtx(() => [(openBlock(), createElementBlock("video", {
+							key: currentSrc.value,
+							class: normalizeClass(`${unref(prefixCls)}-video`),
+							src: currentSrc.value,
+							controls: "",
+							playsinline: ""
+						}, null, 10, _hoisted_4))]),
+						_: 1
+					}))]),
+					_: 1
+				}, 8, ["class"])) : unref(type) === "audio" ? (openBlock(), createElementBlock("div", {
+					key: 2,
+					class: normalizeClass(`${unref(prefixCls)}-audio-panel`)
+				}, [(openBlock(), createElementBlock("audio", {
+					key: currentSrc.value,
+					class: normalizeClass(`${unref(prefixCls)}-audio`),
+					src: currentSrc.value,
+					controls: ""
+				}, null, 10, _hoisted_5))], 2)) : unref(type) === "pdf" ? (openBlock(), createElementBlock("iframe", {
+					key: currentSrc.value,
+					class: normalizeClass(`${unref(prefixCls)}-pdf`),
+					src: currentSrc.value,
+					title: "PDF preview",
+					onLoad: onPreviewLoad,
+					onError: onLoadError
+				}, null, 42, _hoisted_6)) : createCommentVNode("", true)])], 2)], 10, _hoisted_2),
+				unref(fullscreen) && unref(closable) ? (openBlock(), createElementBlock("button", {
+					key: 1,
+					type: "button",
+					class: normalizeClass(`${unref(prefixCls)}-close-btn`),
+					onClick: close
+				}, [createVNode(unref(IconClose))], 2)) : createCommentVNode("", true),
+				isLoading.value ? (openBlock(), createElementBlock("div", {
+					key: 2,
+					class: normalizeClass(`${unref(prefixCls)}-loading`)
+				}, [createVNode(unref(IconLoading))], 2)) : createCommentVNode("", true),
+				isError.value ? (openBlock(), createElementBlock("div", {
+					key: 3,
+					class: normalizeClass(`${unref(prefixCls)}-error`)
+				}, "文件预览加载失败", 2)) : createCommentVNode("", true)
+			], 46, _hoisted_1)) : createCommentVNode("", true)], 8, ["to", "disabled"]);
+		};
+	}
+}));
+//#endregion
+export { file_previewer_vue_vue_type_script_setup_true_lang_default as default };