@ticatec/uniface-element 5.0.5 → 5.1.0

package/dist/form/attachment_files/AttachmentTile.svelte

@@ -0,0 +1,296 @@
+<script lang="ts">
+    import ProgressBar from "../../feedback/progress-bar";
+    import i18nRes from "../../i18nRes";
+    import type {UploadedFile, FileType} from "./AttachmentFile";
+    import {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);
+    const hasDownload = $derived(file != null && (ondownload != null || !!file.uri));
+    const hasPreview = $derived(file != null && onPreview != null);
+    const hasActions = $derived(file != null && (hasPreview || hasDownload || !readonly));
+    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-tile {status}" class:readonly role="listitem" title={task?.status === 'error' ? (task.error ?? failedText) : name}>
+    <div class="tile-body" class:has-thumbnail={showThumbnail}>
+        {#if showThumbnail}
+            <img class="thumbnail" src={thumbnail} alt="" onerror={() => thumbnailFailed = true}/>
+        {:else}
+            <i class="type-icon {icon}" aria-hidden="true"></i>
+        {/if}
+        {#if task}
+            {#if task.status === 'uploading'}
+                <!-- 两层重叠：底层进度环，上层居中的取消按钮（默认显示百分比，悬停/聚焦时变成 ✕） -->
+                <div class="tile-overlay progress">
+                    <ProgressBar diameter={44} thickness={4} progress={task.progress} showText={false}/>
+                    <button type="button" class="ring-button" aria-label={cancelText} title={cancelText} onclick={() => oncancel?.(task)}>
+                        <span class="pct">{task.progress}%</span>
+                        <i class="icon_google_clear" aria-hidden="true"></i>
+                    </button>
+                </div>
+            {:else}
+                <div class="tile-overlay error">
+                    <i class="error-icon icon_google_error_outline" aria-hidden="true"></i>
+                    <div class="overlay-actions">
+                        <button type="button" class="tile-action" aria-label={retryText} title={retryText} onclick={() => onretry?.(task)}>
+                            <i class="icon_google_replay" aria-hidden="true"></i>
+                        </button>
+                        <button type="button" class="tile-action" aria-label={removeText} title={removeText} onclick={() => oncancel?.(task)}>
+                            <i class="icon_google_delete" aria-hidden="true"></i>
+                        </button>
+                    </div>
+                </div>
+            {/if}
+        {:else if file && hasActions}
+            <div class="tile-overlay actions">
+                {#if onPreview}
+                    <button type="button" class="tile-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="tile-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="tile-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="tile-action" aria-label={removeText} title={removeText} onclick={() => onremove?.(file)}>
+                        <i class="icon_google_delete" aria-hidden="true"></i>
+                    </button>
+                {/if}
+            </div>
+        {/if}
+    </div>
+    <div class="tile-name" class:error={status === 'error'}>
+        {status === 'error' ? (task?.error ?? failedText) : name}
+    </div>
+</div>
+
+<style>
+    .uniface-attachment-tile {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 4px;
+        width: var(--uniface-attachment-tile-size, 88px);
+        flex: 0 0 auto;
+    }
+
+    .tile-body {
+        position: relative;
+        width: var(--uniface-attachment-tile-size, 88px);
+        height: var(--uniface-attachment-tile-size, 88px);
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid var(--uniface-attachment-tile-border-color, var(--uniface-editor-color-border, #e5e7eb));
+        border-radius: var(--uniface-radius-md, 6px);
+        background-color: var(--uniface-attachment-tile-bg, rgba(128, 128, 128, 0.06));
+        overflow: hidden;
+        transition: border-color 0.15s;
+    }
+
+    .uniface-attachment-tile:hover .tile-body,
+    .uniface-attachment-tile:focus-within .tile-body {
+        border-color: var(--uniface-attachment-tile-hover-border-color, #d1d5db);
+    }
+
+    .type-icon {
+        font-size: calc(var(--uniface-attachment-tile-size, 88px) * 0.42);
+        color: var(--uniface-attachment-icon-color, #6b7280);
+    }
+
+    .thumbnail {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .uploading .type-icon,
+    .error .type-icon,
+    .done:hover .type-icon,
+    .done:focus-within .type-icon {
+        opacity: 0.25;
+    }
+
+    .uploading .thumbnail,
+    .error .thumbnail {
+        opacity: 0.5;
+    }
+
+    .tile-overlay {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    /* 已上传：悬停 / 聚焦时显示操作层 */
+    .tile-overlay.actions {
+        gap: 4px;
+        background-color: var(--uniface-attachment-overlay-bg, rgba(17, 24, 39, 0.6));
+        opacity: 0;
+        transition: opacity 0.15s;
+    }
+
+    .uniface-attachment-tile:hover .tile-overlay.actions,
+    .uniface-attachment-tile:focus-within .tile-overlay.actions {
+        opacity: 1;
+    }
+
+    .tile-action {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 28px;
+        height: 28px;
+        padding: 0;
+        border: none;
+        border-radius: var(--uniface-radius, 4px);
+        background: transparent;
+        color: #ffffff;
+        font-size: 18px;
+        cursor: pointer;
+        text-decoration: none;
+    }
+
+    .tile-action:hover {
+        background-color: rgba(255, 255, 255, 0.2);
+    }
+
+    /* 上传中：进度环 + 居中的取消按钮 */
+    .tile-overlay.progress {
+        background-color: var(--uniface-attachment-progress-overlay-bg, rgba(255, 255, 255, 0.6));
+    }
+
+    .ring-button {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        width: 36px;
+        height: 36px;
+        margin: -18px 0 0 -18px;
+        padding: 0;
+        border: none;
+        border-radius: 50%;
+        background: transparent;
+        color: var(--uniface-attachment-progress-text-color, #374151);
+        font-size: 11px;
+        font-variant-numeric: tabular-nums;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .ring-button i {
+        display: none;
+        font-size: 18px;
+    }
+
+    .tile-overlay.progress:hover .ring-button .pct,
+    .ring-button:focus-visible .pct {
+        display: none;
+    }
+
+    .tile-overlay.progress:hover .ring-button i,
+    .ring-button:focus-visible i {
+        display: inline;
+        color: var(--uniface-attachment-error-color, #ef4444);
+    }
+
+    /* 失败：错误图标，悬停时显示重试 / 移除 */
+    .tile-overlay.error {
+        flex-direction: column;
+        gap: 2px;
+        background-color: var(--uniface-attachment-error-overlay-bg, rgba(239, 68, 68, 0.08));
+    }
+
+    .error-icon {
+        font-size: 24px;
+        color: var(--uniface-attachment-error-color, #ef4444);
+    }
+
+    .tile-overlay.error .overlay-actions {
+        display: flex;
+        gap: 2px;
+    }
+
+    .tile-overlay.error .tile-action {
+        width: 24px;
+        height: 24px;
+        color: var(--uniface-attachment-error-color, #ef4444);
+    }
+
+    .tile-overlay.error .tile-action:hover {
+        background-color: rgba(239, 68, 68, 0.15);
+    }
+
+    .tile-name {
+        width: 100%;
+        font-size: 12px;
+        line-height: 1.3;
+        text-align: center;
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
+        -webkit-box-orient: vertical;
+        word-break: break-all;
+    }
+
+    .tile-name.error {
+        color: var(--uniface-attachment-error-color, #ef4444);
+    }
+</style>

package/dist/form/attachment_files/AttachmentTile.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 AttachmentTile: import("svelte").Component<Props, {}, "">;
+type AttachmentTile = ReturnType<typeof AttachmentTile>;
+export default AttachmentTile;

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

@@ -9,7 +9,7 @@ export type OnUploaded = (url: string, thumbnail?: string) => void;
 /**
  *
  */
-export type ErrorHandler = (e: Error) => void;
+export type OnError = (e: Error) => void;
 /**
  * 返回可以取消的接口
  */
@@ -19,4 +19,4 @@ export interface UploadProgress {
 /**
  * 上传文件的方法
  */
-export type FileUpload = (file: File, progressUpdate: ProgressUpdate, onUploaded: OnUploaded, errorHandler: ErrorHandler) => UploadProgress;
+export type FileUpload = (file: File, progressUpdate: ProgressUpdate, onUploaded: OnUploaded, errorHandler: OnError) => UploadProgress;