@sdata/web-vue 3.1.0 → 3.2.1

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

@@ -0,0 +1,220 @@
+import type { App } from 'vue';
+import type { SDOptions } from '../_utils/types';
+import _FilePreviewer from './file-previewer.vue';
+declare const FilePreviewer: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
+        src: {
+            type: StringConstructor;
+        };
+        type: {
+            type: import("vue").PropType<import("./types").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: import("vue").PropType<HTMLElement | string>;
+        };
+        renderToBody: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>> & Readonly<{
+        onClose?: (() => any) | undefined;
+        "onUpdate:visible"?: ((_visible: boolean) => any) | undefined;
+        "onVisible-change"?: ((_visible: boolean) => any) | undefined;
+    }>, {
+        close: () => void;
+        onLoad: () => void;
+        onError: () => void;
+        onImageLoad: () => void;
+        onPdfLoad: () => void;
+        onLoadError: () => void;
+    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        close: () => any;
+        "update:visible": (_visible: boolean) => any;
+        "visible-change": (_visible: boolean) => any;
+    }, import("vue").PublicProps, {
+        type: import("./types").FilePreviewerType;
+        visible: boolean;
+        renderToBody: boolean;
+        defaultVisible: boolean;
+        closable: boolean;
+        maskClosable: boolean;
+        escToClose: boolean;
+        fullscreen: boolean;
+    }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("vue").ExtractPropTypes<{
+        src: {
+            type: StringConstructor;
+        };
+        type: {
+            type: import("vue").PropType<import("./types").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: import("vue").PropType<HTMLElement | string>;
+        };
+        renderToBody: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    }>> & Readonly<{
+        onClose?: (() => any) | undefined;
+        "onUpdate:visible"?: ((_visible: boolean) => any) | undefined;
+        "onVisible-change"?: ((_visible: boolean) => any) | undefined;
+    }>, {
+        close: () => void;
+        onLoad: () => void;
+        onError: () => void;
+        onImageLoad: () => void;
+        onPdfLoad: () => void;
+        onLoadError: () => void;
+    }, {}, {}, {}, {
+        type: import("./types").FilePreviewerType;
+        visible: boolean;
+        renderToBody: boolean;
+        defaultVisible: boolean;
+        closable: boolean;
+        maskClosable: boolean;
+        escToClose: boolean;
+        fullscreen: boolean;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    src: {
+        type: StringConstructor;
+    };
+    type: {
+        type: import("vue").PropType<import("./types").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: import("vue").PropType<HTMLElement | string>;
+    };
+    renderToBody: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onClose?: (() => any) | undefined;
+    "onUpdate:visible"?: ((_visible: boolean) => any) | undefined;
+    "onVisible-change"?: ((_visible: boolean) => any) | undefined;
+}>, {
+    close: () => void;
+    onLoad: () => void;
+    onError: () => void;
+    onImageLoad: () => void;
+    onPdfLoad: () => void;
+    onLoadError: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    "update:visible": (_visible: boolean) => any;
+    "visible-change": (_visible: boolean) => any;
+}, string, {
+    type: import("./types").FilePreviewerType;
+    visible: boolean;
+    renderToBody: boolean;
+    defaultVisible: boolean;
+    closable: boolean;
+    maskClosable: boolean;
+    escToClose: boolean;
+    fullscreen: boolean;
+}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {
+        title?: () => unknown;
+        content?: (_props: import("./types").FilePreviewerContentSlotProps) => unknown;
+    };
+}) & {
+    install: (app: App, options?: SDOptions) => void;
+};
+export type FilePreviewerInstance = InstanceType<typeof _FilePreviewer>;
+export type { FilePreviewerContentSlotProps, FilePreviewerProps, FilePreviewerStatus, FilePreviewerType, } from './types';
+export default FilePreviewer;

package/es/file-previewer/index.js

@@ -0,0 +1,10 @@
+import { getComponentPrefix, setGlobalConfig } from "../_utils/global-config.js";
+import file_previewer_default from "./file-previewer.js";
+//#region components/file-previewer/index.ts
+var FilePreviewer = Object.assign(file_previewer_default, { install: (app, options) => {
+	setGlobalConfig(app, options);
+	const componentPrefix = getComponentPrefix(options);
+	app.component(componentPrefix + file_previewer_default.name, file_previewer_default);
+} });
+//#endregion
+export { FilePreviewer as default };

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

@@ -0,0 +1,2 @@
+import "../../style/index.css";
+import "./index.css";

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

@@ -0,0 +1,164 @@
+/******** borderSize *******/
+/******** borderStyle *******/
+/******** radius *******/
+/******** shadow distance *******/
+/******** size *******/
+/******** spacing *******/
+/******** shadow *******/
+/******** opacity *******/
+/******** fontSize *******/
+/******** fontWeight ********/
+/******** Primary *******/
+/******** success *******/
+/******** warning *******/
+/******** danger *******/
+/******** link *******/
+/******** radius *******/
+/********* icon hover *********/
+.sd-file-previewer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 240px;
+}
+.sd-file-previewer-fullscreen {
+  inset: 0;
+  min-height: 0;
+}
+.sd-file-previewer-inline {
+  overflow: hidden;
+  color: var(--sd-color-text-1);
+  background: var(--sd-color-fill-1);
+  border: 1px solid var(--sd-color-border-2);
+  border-radius: var(--sd-border-radius-medium);
+}
+.sd-file-previewer-mask {
+  position: absolute;
+  inset: 0;
+  background-color: var(--sd-color-mask-bg);
+}
+.sd-file-previewer-content {
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+.sd-file-previewer-content-fullscreen {
+  position: absolute;
+  inset: 40px;
+}
+.sd-file-previewer-content-inline {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 240px;
+}
+.sd-file-previewer-fullscreen .sd-file-previewer-content-audio {
+  inset: 50% auto auto 50%;
+  width: min(560px, 100% - 40px * 2);
+  max-height: 78vh;
+  background: var(--sd-color-bg-2);
+  border-radius: var(--sd-border-radius-medium);
+  transform: translate(-50%, -50%);
+}
+.sd-file-previewer-header {
+  box-sizing: border-box;
+  padding: 12px 20px;
+  color: var(--sd-color-text-1);
+  font-size: 16px;
+}
+.sd-file-previewer-title {
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.sd-file-previewer-body {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  min-height: 0;
+}
+.sd-file-previewer-image, .sd-file-previewer-video-player, .sd-file-previewer-video, .sd-file-previewer-pdf {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.sd-file-previewer-image {
+  object-fit: contain;
+}
+.sd-file-previewer-video-player {
+  max-width: 1180px;
+  max-height: 78vh;
+}
+.sd-file-previewer-inline .sd-file-previewer-video-player {
+  max-width: 100%;
+  max-height: none;
+}
+.sd-file-previewer-video {
+  background: #000;
+}
+.sd-file-previewer-audio-panel {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 20px;
+}
+.sd-file-previewer-audio {
+  display: block;
+  width: 100%;
+}
+.sd-file-previewer-pdf {
+  background: var(--sd-color-bg-2);
+  border: 0;
+  border-radius: var(--sd-border-radius-medium);
+}
+.sd-file-previewer-inline .sd-file-previewer-pdf {
+  border-radius: 0;
+}
+.sd-file-previewer-close-btn {
+  position: absolute;
+  top: 36px;
+  right: 36px;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  color: var(--sd-color-white);
+  font-size: 14px;
+  background: rgba(0, 0, 0, 0.5);
+  border: 0;
+  border-radius: 50%;
+  cursor: pointer;
+}
+.sd-file-previewer-loading {
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 48px;
+  height: 48px;
+  color: rgb(var(--sd-primary-6));
+  background-color: #232324;
+  border-radius: var(--sd-border-radius-medium);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.sd-file-previewer-error {
+  z-index: 2;
+  color: var(--sd-color-white);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.sd-file-previewer-inline .sd-file-previewer-error {
+  color: var(--sd-color-danger-6);
+}

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

@@ -0,0 +1,2 @@
+import '../../style/index.scss';
+import './index.scss';

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

@@ -0,0 +1,2 @@
+import "../../style/index.scss";
+import "./index.scss";

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

@@ -0,0 +1,186 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+@use './token.scss' as *;
+
+$file-previewer-prefix-cls: string.unquote('#{theme.$prefix}-file-previewer');
+
+@mixin center() {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.#{$file-previewer-prefix-cls} {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: $file-previewer-size-inline-min-height;
+
+  &-fullscreen {
+    inset: 0;
+    min-height: 0;
+  }
+
+  &-inline {
+    overflow: hidden;
+    color: $file-previewer-color-content-text;
+    background: $file-previewer-color-inline-bg;
+    border: 1px solid $file-previewer-color-inline-border;
+    border-radius: $file-previewer-radius-panel;
+  }
+
+  &-mask {
+    position: absolute;
+    inset: 0;
+    background-color: $file-previewer-color-mask-bg;
+  }
+
+  &-content {
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+  }
+
+  &-content-fullscreen {
+    position: absolute;
+    inset: $file-previewer-spacing-viewport-padding;
+  }
+
+  &-content-inline {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    min-height: $file-previewer-size-inline-min-height;
+  }
+
+  &-fullscreen &-content-audio {
+    inset: 50% auto auto 50%;
+    width: min(
+      $file-previewer-size-audio-width,
+      calc(100% - #{$file-previewer-spacing-viewport-padding} * 2)
+    );
+    max-height: $file-previewer-size-media-height;
+    background: $file-previewer-color-content-bg;
+    border-radius: $file-previewer-radius-panel;
+    transform: translate(-50%, -50%);
+  }
+
+  &-header {
+    box-sizing: border-box;
+    padding: $file-previewer-spacing-header-padding-vertical
+      $file-previewer-spacing-header-padding-horizontal;
+    color: $file-previewer-color-content-text;
+    font-size: $file-previewer-font-size-title;
+  }
+
+  &-title {
+    display: block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &-body {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    min-width: 0;
+    min-height: 0;
+  }
+
+  &-image,
+  &-video-player,
+  &-video,
+  &-pdf {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  &-image {
+    object-fit: contain;
+  }
+
+  &-video-player {
+    max-width: $file-previewer-size-media-width;
+    max-height: $file-previewer-size-media-height;
+  }
+
+  &-inline &-video-player {
+    max-width: 100%;
+    max-height: none;
+  }
+
+  &-video {
+    background: #000;
+  }
+
+  &-audio-panel {
+    box-sizing: border-box;
+    width: 100%;
+    padding: $file-previewer-spacing-panel-padding;
+  }
+
+  &-audio {
+    display: block;
+    width: 100%;
+  }
+
+  &-pdf {
+    background: $file-previewer-color-content-bg;
+    border: 0;
+    border-radius: $file-previewer-radius-panel;
+  }
+
+  &-inline &-pdf {
+    border-radius: 0;
+  }
+
+  &-close-btn {
+    position: absolute;
+    top: $file-previewer-position-close-top;
+    right: $file-previewer-position-close-right;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: $file-previewer-size-close;
+    height: $file-previewer-size-close;
+    color: $file-previewer-color-close-text;
+    font-size: $file-previewer-size-close-icon;
+    background: $file-previewer-color-close-bg;
+    border: 0;
+    border-radius: 50%;
+    cursor: pointer;
+  }
+
+  &-loading {
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: $file-previewer-size-loading;
+    height: $file-previewer-size-loading;
+    color: $file-previewer-color-loading-text;
+    background-color: $file-previewer-color-loading-bg;
+    border-radius: $file-previewer-radius-panel;
+
+    @include center();
+  }
+
+  &-error {
+    z-index: 2;
+    color: $file-previewer-color-error-text;
+
+    @include center();
+  }
+
+  &-inline &-error {
+    color: $file-previewer-color-inline-error-text;
+  }
+}

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

@@ -0,0 +1,31 @@
+@use '@style/theme/index.scss' as *;
+@use 'sass:string';
+
+$file-previewer-color-mask-bg: var(string.unquote('#{$sd-cssvars-prefix}-color-mask-bg'));
+$file-previewer-color-content-bg: var(string.unquote('#{$sd-cssvars-prefix}-color-bg-2'));
+$file-previewer-color-content-text: var(string.unquote('#{$sd-cssvars-prefix}-color-text-1'));
+$file-previewer-color-inline-border: var(string.unquote('#{$sd-cssvars-prefix}-color-border-2'));
+$file-previewer-color-inline-bg: var(string.unquote('#{$sd-cssvars-prefix}-color-fill-1'));
+$file-previewer-color-close-bg: rgb(0 0 0 / 50%);
+$file-previewer-color-close-text: var(string.unquote('#{$sd-cssvars-prefix}-color-white'));
+$file-previewer-color-loading-bg: #232324;
+$file-previewer-color-loading-text: $color-primary-6;
+$file-previewer-color-error-text: var(string.unquote('#{$sd-cssvars-prefix}-color-white'));
+$file-previewer-color-inline-error-text: var(
+  string.unquote('#{$sd-cssvars-prefix}-color-danger-6')
+);
+$file-previewer-spacing-viewport-padding: $spacing-12;
+$file-previewer-spacing-panel-padding: $spacing-8;
+$file-previewer-spacing-header-padding-vertical: $spacing-6;
+$file-previewer-spacing-header-padding-horizontal: $spacing-8;
+$file-previewer-radius-panel: $radius-medium;
+$file-previewer-size-close: 32px;
+$file-previewer-size-close-icon: 14px;
+$file-previewer-size-loading: 48px;
+$file-previewer-size-inline-min-height: 240px;
+$file-previewer-position-close-top: 36px;
+$file-previewer-position-close-right: 36px;
+$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;

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

@@ -0,0 +1,29 @@
+export type FilePreviewerType = 'image' | 'video' | 'audio' | 'pdf';
+export type FilePreviewerStatus = 'beforeLoad' | 'loading' | 'loaded' | 'error';
+export interface FilePreviewerContentSlotProps {
+    src: string;
+    type: FilePreviewerType;
+    title?: string;
+    visible: boolean;
+    fullscreen: boolean;
+    status: FilePreviewerStatus;
+    loading: boolean;
+    loaded: boolean;
+    error: boolean;
+    close: () => void;
+    onLoad: () => void;
+    onError: () => void;
+}
+export interface FilePreviewerProps {
+    src?: string;
+    type?: FilePreviewerType;
+    visible?: boolean;
+    defaultVisible?: boolean;
+    fullscreen?: boolean;
+    title?: string;
+    maskClosable?: boolean;
+    closable?: boolean;
+    escToClose?: boolean;
+    popupContainer?: HTMLElement | string;
+    renderToBody?: boolean;
+}

package/es/image/hooks/use-image-drag.js

@@ -25,7 +25,7 @@ function useImageDrag(props) {
 		offEvents();
 	};
 	const onMoveStart = (e) => {
-		if (e.target !== e.currentTarget) return;
+		if (e.target !== e.currentTarget || e.button !== 0) return;
 		e.preventDefault && e.preventDefault();
 		moving.value = true;
 		startPageX = e.pageX;

package/es/image/preview.vue_vue_type_script_setup_true_lang.js

@@ -8,9 +8,9 @@ import useMergeState from "../_hooks/use-merge-state.js";
 import { KEYBOARD_KEY } from "../_utils/keyboard.js";
 import usePopupManager from "../_hooks/use-popup-manager.js";
 import { useI18n } from "../locale/index.js";
-import useImageLoadStatus from "./hooks/use-image-load-status.js";
 import usePopupContainer from "../_hooks/use-popup-container.js";
 import usePopupOverflowHidden from "../_hooks/use-popup-overflow-hidden.js";
+import useImageLoadStatus from "./hooks/use-image-load-status.js";
 import IconFullscreen from "../icon/icon-fullscreen/index.js";
 import IconOriginalSize from "../icon/icon-original-size/index.js";
 import IconRotateLeft from "../icon/icon-rotate-left/index.js";