@ticatec/uniface-element 5.0.5 → 5.1.0

package/dist/form/attachment_files/AttachmentEditor.svelte.d.ts

@@ -1,19 +1,75 @@
+import type { BeforeRemove } from "../types";
+import type CommonFieldProps from "../common_editor/CommonFieldProps";
 import type AttachmentFile from "./AttachmentFile";
+import { type AttachmentLayout, type UploadedFile } from "./AttachmentFile";
 import type { FileUpload } from "./FileUpload";
-import type UploadFile from "./UploadFile";
-import type CommonFieldProps from "../common_editor/CommonFieldProps";
-interface Props extends CommonFieldProps {
-    files?: AttachmentFile[];
-    uploadFile?: FileUpload;
-    onUpload?: () => void;
-    onFileUploaded?: (file: UploadFile) => void;
-    accept?: string;
-    maxSize?: number;
-    maxFiles?: number;
-    removeFileConfirm?: (file: AttachmentFile) => Promise<boolean>;
+import type { RejectReason } from "./UploadTask";
+declare function $$render<T extends UploadedFile = AttachmentFile>(): {
+    props: CommonFieldProps & {
+        /** 已上传的附件列表（可绑定） */
+        files?: T[];
+        /** 排列方式：list（每行一个）/ icon（图标瓦片，自动换行） */
+        layout?: AttachmentLayout;
+        /** 内容区高度；超出后内部滚动，不设则随内容自适应 */
+        height?: number | string;
+        /** 实际执行上传的函数；不传则组件只读展示（不显示上传入口） */
+        uploadFile?: FileUpload;
+        /** 允许的文件类型（同 input accept） */
+        accept?: string;
+        /** 单个文件大小上限（字节） */
+        maxSize?: number;
+        /** 文件数量上限（含上传中的） */
+        maxFiles?: number;
+        /** 一次是否允许选择 / 拖入多个文件 */
+        multiple?: boolean;
+        /** 上传入口的文字（空态时作为拖放区提示） */
+        uploadText?: string;
+        /** 没有文件且不能上传时显示的文字 */
+        emptyText?: string;
+        /** 图片文件显示缩略图（已上传的用 thumbnail ?? uri，上传中的用本地预览）；ImageEditor 默认开启 */
+        showThumbnail?: boolean;
+        /** 预览：有则每个文件显示预览按钮 */
+        onPreview?: (file: T) => void;
+        /** 删除附件前的否决钩子：返回 false 取消删除 */
+        beforeRemove?: BeforeRemove<T>;
+        /** 附件被删除后通知 */
+        onremove?: (file: T) => void;
+        /** 自定义下载；不传则通过 `file.uri` 直接下载 */
+        ondownload?: (file: T) => void;
+        /** 单个文件上传完成并加入 files 后通知 */
+        onFileUploaded?: (file: T, source: File) => void;
+        /** 文件因类型 / 大小 / 数量限制被拒绝时通知 */
+        onFileRejected?: (file: File, reason: RejectReason) => void;
+        /** 上传失败时通知（任务保留在列表中，可重试或移除） */
+        onUploadError?: (file: File, error: Error) => void;
+        /** files 变化后通知（上传完成或删除） */
+        onchange?: (files: T[]) => void;
+    };
+    exports: {
+        openFileDialog: () => void;
+        focus: () => void;
+    };
+    bindings: "files";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends UploadedFile = AttachmentFile> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "files";
+    exports(): {
+        openFileDialog: () => void;
+        focus: () => void;
+    };
+}
+interface $$IsomorphicComponent {
+    new <T extends UploadedFile = AttachmentFile>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends UploadedFile = AttachmentFile>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
-declare const AttachmentEditor: import("svelte").Component<Props, {
-    focus: () => void;
-}, "files">;
-type AttachmentEditor = ReturnType<typeof AttachmentEditor>;
+declare const AttachmentEditor: $$IsomorphicComponent;
+type AttachmentEditor<T extends UploadedFile = AttachmentFile> = InstanceType<typeof AttachmentEditor<T>>;
 export default AttachmentEditor;

package/dist/form/attachment_files/AttachmentFile.d.ts

@@ -1,4 +1,3 @@
-export declare const getFileType: (filename: string) => FileType;
 export declare enum FileType {
     IMAGE = "img",
     PDF = "pdf",
@@ -9,18 +8,46 @@ export declare enum FileType {
     VIDEO = "mov",
     OTHER = "dat"
 }
-export default interface AttachmentFile {
+/**
+ * 根据文件名（扩展名）推断文件类型
+ */
+export declare const getFileType: (filename: string) => FileType;
+/**
+ * 文件类型对应的图标 class
+ */
+export declare const getFileTypeIcon: (type: FileType | string) => string;
+/**
+ * 把字节数格式化为可读文本（B / KB / MB / GB）
+ */
+export declare const formatFileSize: (bytes: number) => string;
+/**
+ * 附件的排列方式：list（每行一个文件）/ icon（图标瓦片，自动换行）
+ */
+export type AttachmentLayout = 'list' | 'icon';
+/**
+ * 已上传文件的公共字段：AttachmentEditor / ImageEditor 的列表项都以它为基础
+ */
+export interface UploadedFile {
     /**
-     * 附件名
+     * 文件名
      */
     name: string;
     /**
-     * 文件类型
+     * 存储地址（oss 路径 / URL）
      */
-    type: FileType;
+    uri: string;
     /**
-     * oss保存的文件路径
+     * 文件大小（字节），可选；上传完成后由组件写入
      */
-    uri: string;
+    size?: number;
+    /**
+     * 缩略图地址，可选；有则在瓦片 / 列表里代替类型图标显示
+     */
+    thumbnail?: string | null;
+}
+export default interface AttachmentFile extends UploadedFile {
+    /**
+     * 文件类型
+     */
+    type: FileType;
 }
-export type RemoveConfirm = (file: AttachmentFile) => Promise<boolean>;

package/dist/form/attachment_files/AttachmentFile.js

@@ -14,35 +14,6 @@ const powerPointExtensions = [
 const audioExtensions = [
     'mp3', 'wav', 'aac', 'flac', 'ogg', 'wma', 'm4a', 'aiff', 'alac'
 ];
-export const getFileType = (filename) => {
-    let pos = filename.lastIndexOf('.');
-    let ext = pos > -1 ? filename.substring(pos + 1, filename.length) : '';
-    ext = (ext ?? '').toLowerCase();
-    if (imageExtensions.indexOf(ext) > -1) {
-        return FileType.IMAGE;
-    }
-    else if (wordExtensions.indexOf(ext) > -1) {
-        return FileType.DOC;
-    }
-    else if (spreadsheetExtensions.indexOf(ext) > -1) {
-        return FileType.XLS;
-    }
-    else if (powerPointExtensions.indexOf(ext) > -1) {
-        return FileType.PPT;
-    }
-    else if (audioExtensions.indexOf(ext) > -1) {
-        return FileType.AUDIO;
-    }
-    else if (videoExtensions.indexOf(ext) > -1) {
-        return FileType.VIDEO;
-    }
-    else if (ext == 'pdf') {
-        return FileType.PDF;
-    }
-    else {
-        return FileType.OTHER;
-    }
-};
 const videoExtensions = [
     'mp4', 'avi', 'mkv', 'mov', 'wmv', 'flv', 'webm', 'mpeg', 'mpg', '3gp', 'm4v', 'vob'
 ];
@@ -57,3 +28,57 @@ export var FileType;
     FileType["VIDEO"] = "mov";
     FileType["OTHER"] = "dat";
 })(FileType || (FileType = {}));
+/**
+ * 根据文件名（扩展名）推断文件类型
+ */
+export const getFileType = (filename) => {
+    const pos = filename.lastIndexOf('.');
+    const ext = (pos > -1 ? filename.substring(pos + 1) : '').toLowerCase();
+    if (imageExtensions.includes(ext))
+        return FileType.IMAGE;
+    if (wordExtensions.includes(ext))
+        return FileType.DOC;
+    if (spreadsheetExtensions.includes(ext))
+        return FileType.XLS;
+    if (powerPointExtensions.includes(ext))
+        return FileType.PPT;
+    if (audioExtensions.includes(ext))
+        return FileType.AUDIO;
+    if (videoExtensions.includes(ext))
+        return FileType.VIDEO;
+    if (ext === 'pdf')
+        return FileType.PDF;
+    return FileType.OTHER;
+};
+/**
+ * 文件类型对应的图标 class
+ */
+export const getFileTypeIcon = (type) => {
+    switch (type) {
+        case FileType.IMAGE: return 'icon_google_insert_photo';
+        case FileType.PDF: return 'icon_google_picture_as_pdf';
+        case FileType.DOC: return 'icon_google_description';
+        case FileType.XLS: return 'icon_google_table_chart';
+        case FileType.PPT: return 'icon_google_slideshow';
+        case FileType.AUDIO: return 'icon_google_audiotrack';
+        case FileType.VIDEO: return 'icon_google_movie';
+        default: return 'icon_google_insert_drive_file';
+    }
+};
+/**
+ * 把字节数格式化为可读文本（B / KB / MB / GB）
+ */
+export const formatFileSize = (bytes) => {
+    if (!Number.isFinite(bytes) || bytes < 0)
+        return '';
+    if (bytes < 1024)
+        return `${bytes} B`;
+    const units = ['KB', 'MB', 'GB', 'TB'];
+    let value = bytes / 1024;
+    let i = 0;
+    while (value >= 1024 && i < units.length - 1) {
+        value /= 1024;
+        i++;
+    }
+    return `${value < 10 ? value.toFixed(1) : Math.round(value)} ${units[i]}`;
+};

package/dist/form/attachment_files/AttachmentListItem.svelte

@@ -0,0 +1,208 @@
+<script lang="ts">
+    import ProgressBar from "../../feedback/progress-bar";
+    import i18nRes from "../../i18nRes";
+    import type {UploadedFile, FileType} from "./AttachmentFile";
+    import {formatFileSize, getFileType, getFileTypeIcon} from "./AttachmentFile";
+    import type {UploadTask} from "./UploadTask";
+
+    /** 列表项：已上传文件；没有 type 时按文件名推断 */
+    type Item = UploadedFile & {type?: FileType};
+
+    interface Props {
+        /** 已上传的附件（与 task 二选一） */
+        file?: Item;
+        /** 上传中的任务（与 file 二选一） */
+        task?: UploadTask;
+        readonly?: boolean;
+        /** 缩略图地址；有则代替类型图标显示 */
+        thumbnail?: string | null;
+        /** 预览：有则显示预览按钮 */
+        onPreview?: (file: Item) => void;
+        ondownload?: (file: Item) => void;
+        onremove?: (file: Item) => void;
+        /** 取消上传中的任务，或移除失败的任务 */
+        oncancel?: (task: UploadTask) => void;
+        onretry?: (task: UploadTask) => void;
+    }
+
+    let {
+        file,
+        task,
+        readonly = false,
+        thumbnail,
+        onPreview,
+        ondownload,
+        onremove,
+        oncancel,
+        onretry
+    }: Props = $props();
+
+    const name = $derived(task?.name ?? file?.name ?? '');
+    const icon = $derived(getFileTypeIcon(task?.type ?? file?.type ?? getFileType(file?.name ?? '')));
+    const status = $derived(task == null ? 'done' : task.status);
+    let thumbnailFailed = $state(false);
+    const showThumbnail = $derived(!!thumbnail && !thumbnailFailed);
+
+    const previewText = i18nRes.upload.btnPreview();
+    const downloadText = i18nRes.upload.btnDownload();
+    const removeText = i18nRes.upload.btnRemove();
+    const cancelText = i18nRes.common.btnCancel();
+    const retryText = i18nRes.upload.btnRetry();
+    const failedText = i18nRes.upload.failedText();
+</script>
+
+<div class="uniface-attachment-item {status}" class:readonly role="listitem">
+    {#if showThumbnail}
+        {#if file && onPreview}
+            <button type="button" class="thumbnail-button" aria-label={previewText} title={previewText} onclick={() => onPreview?.(file)}>
+                <img class="thumbnail" src={thumbnail} alt="" onerror={() => thumbnailFailed = true}/>
+            </button>
+        {:else}
+            <img class="thumbnail" src={thumbnail} alt="" onerror={() => thumbnailFailed = true}/>
+        {/if}
+    {:else}
+        <i class="type-icon {icon}" aria-hidden="true"></i>
+    {/if}
+    <div class="item-name" title={name}>{name}</div>
+    {#if task}
+        {#if task.status === 'uploading'}
+            <div class="item-progress">
+                <ProgressBar variant="linear" progress={task.progress} thickness={4} showText={false}/>
+            </div>
+            <span class="item-meta">{task.progress}%</span>
+            <button type="button" class="item-action" aria-label={cancelText} title={cancelText} onclick={() => oncancel?.(task)}>
+                <i class="icon_google_clear" aria-hidden="true"></i>
+            </button>
+        {:else}
+            <span class="item-error" title={task.error ?? failedText}>{task.error ?? failedText}</span>
+            <button type="button" class="item-action" aria-label={retryText} title={retryText} onclick={() => onretry?.(task)}>
+                <i class="icon_google_replay" aria-hidden="true"></i>
+            </button>
+            <button type="button" class="item-action danger" aria-label={removeText} title={removeText} onclick={() => oncancel?.(task)}>
+                <i class="icon_google_delete" aria-hidden="true"></i>
+            </button>
+        {/if}
+    {:else if file}
+        {#if file.size != null}
+            <span class="item-meta">{formatFileSize(file.size)}</span>
+        {/if}
+        {#if onPreview}
+            <button type="button" class="item-action" aria-label={previewText} title={previewText} onclick={() => onPreview?.(file)}>
+                <i class="icon_google_remove_red_eye" aria-hidden="true"></i>
+            </button>
+        {/if}
+        {#if ondownload}
+            <button type="button" class="item-action" aria-label={downloadText} title={downloadText} onclick={() => ondownload?.(file)}>
+                <i class="icon_google_file_download" aria-hidden="true"></i>
+            </button>
+        {:else if file.uri}
+            <a class="item-action" href={file.uri} download={file.name} target="_blank" rel="noopener noreferrer"
+               aria-label={downloadText} title={downloadText}>
+                <i class="icon_google_file_download" aria-hidden="true"></i>
+            </a>
+        {/if}
+        {#if !readonly}
+            <button type="button" class="item-action danger" aria-label={removeText} title={removeText} onclick={() => onremove?.(file)}>
+                <i class="icon_google_delete" aria-hidden="true"></i>
+            </button>
+        {/if}
+    {/if}
+</div>
+
+<style>
+    .uniface-attachment-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        height: var(--uniface-attachment-item-height, 32px);
+        padding: 0 8px;
+        border-radius: var(--uniface-radius, 4px);
+        box-sizing: border-box;
+        transition: background-color 0.15s;
+    }
+
+    .uniface-attachment-item:hover {
+        background-color: var(--uniface-attachment-item-hover-bg, rgba(128, 128, 128, 0.12));
+    }
+
+    .type-icon {
+        flex: 0 0 auto;
+        font-size: 20px;
+        color: var(--uniface-attachment-icon-color, #6b7280);
+    }
+
+    .thumbnail-button {
+        flex: 0 0 auto;
+        padding: 0;
+        border: none;
+        background: transparent;
+        cursor: pointer;
+        display: flex;
+    }
+
+    .thumbnail {
+        flex: 0 0 auto;
+        width: var(--uniface-attachment-thumbnail-size, 24px);
+        height: var(--uniface-attachment-thumbnail-size, 24px);
+        border-radius: var(--uniface-radius-sm, 2px);
+        object-fit: cover;
+        display: block;
+    }
+
+    .item-name {
+        flex: 1 1 auto;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .item-meta {
+        flex: 0 0 auto;
+        font-size: 12px;
+        color: var(--uniface-attachment-meta-color, #9ca3af);
+        font-variant-numeric: tabular-nums;
+    }
+
+    .item-progress {
+        flex: 0 0 var(--uniface-attachment-progress-width, 120px);
+    }
+
+    .item-error {
+        flex: 0 1 auto;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: 12px;
+        color: var(--uniface-attachment-error-color, #ef4444);
+    }
+
+    .item-action {
+        flex: 0 0 auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+        border: none;
+        background: transparent;
+        color: var(--uniface-attachment-action-color, #9ca3af);
+        border-radius: var(--uniface-radius, 4px);
+        cursor: pointer;
+        padding: 0;
+        text-decoration: none;
+        font-size: 18px;
+        transition: background-color 0.15s, color 0.15s;
+    }
+
+    .item-action:hover {
+        background-color: var(--uniface-attachment-action-hover-bg, rgba(128, 128, 128, 0.18));
+        color: var(--uniface-attachment-action-hover-color, #374151);
+    }
+
+    .item-action.danger:hover {
+        background-color: var(--uniface-attachment-danger-hover-bg, rgba(239, 68, 68, 0.1));
+        color: var(--uniface-attachment-error-color, #ef4444);
+    }
+</style>

package/dist/form/attachment_files/AttachmentListItem.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { UploadedFile, FileType } from "./AttachmentFile";
+import type { UploadTask } from "./UploadTask";
+/** 列表项：已上传文件；没有 type 时按文件名推断 */
+type Item = UploadedFile & {
+    type?: FileType;
+};
+interface Props {
+    /** 已上传的附件（与 task 二选一） */
+    file?: Item;
+    /** 上传中的任务（与 file 二选一） */
+    task?: UploadTask;
+    readonly?: boolean;
+    /** 缩略图地址；有则代替类型图标显示 */
+    thumbnail?: string | null;
+    /** 预览：有则显示预览按钮 */
+    onPreview?: (file: Item) => void;
+    ondownload?: (file: Item) => void;
+    onremove?: (file: Item) => void;
+    /** 取消上传中的任务，或移除失败的任务 */
+    oncancel?: (task: UploadTask) => void;
+    onretry?: (task: UploadTask) => void;
+}
+declare const AttachmentListItem: import("svelte").Component<Props, {}, "">;
+type AttachmentListItem = ReturnType<typeof AttachmentListItem>;
+export default AttachmentListItem;