@ticatec/uniface-element 0.3.22 → 5.0.0

package/dist/form/attachment_files/AttachmentEditor.svelte

@@ -0,0 +1,174 @@
+<script lang="ts">
+    import FormEditor from "../FormEditor.svelte";
+    import FileRender from "./FileRender.svelte";
+    import FileUploadPanel from "./FileUploadPanel.svelte";
+    import type AttachmentFile from "./AttachmentFile";
+    import type {FileUpload} from "./FileUpload";
+    import type UploadFile from "./UploadFile";
+    import {getFileType} from "./AttachmentFile";
+    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>;
+    }
+
+    let {
+        disabled = false,
+        readonly = false,
+        variant,
+        compact = false,
+        theme,
+        tooltip,
+        error,
+        style = '',
+        files = $bindable<AttachmentFile[]>([]),
+        uploadFile,
+        onUpload,
+        onFileUploaded,
+        accept = "*/*",
+        maxSize = 1024 * 1024 * 10,
+        maxFiles = 10,
+        removeFileConfirm,
+        onfocus,
+        onblur,
+        onchange
+    }: Props = $props();
+
+    let containerElement: HTMLDivElement | undefined = $state(undefined);
+    let hasFocus = $state(false);
+    let isUserChange = $state(false);
+    let oldFiles = $state(files);
+    let showUpload = $state(false);
+
+    const handleFocus = (event: FocusEvent) => {
+        if (!hasFocus) {
+            hasFocus = true;
+            onfocus?.(event);
+        }
+    };
+
+    const handleBlur = (event: FocusEvent) => {
+        if (hasFocus && !showUpload) {
+            hasFocus = false;
+            onblur?.(event);
+        }
+    };
+
+    // 上传触发：用户提供了 onUpload 则交给自定义上传组件；否则使用内置 FileUploadPanel 作为默认处理器
+    const triggerUpload = () => {
+        if (onUpload) {
+            onUpload();
+        } else if (uploadFile) {
+            hasFocus = true;
+            showUpload = true;
+        }
+    };
+
+    // 默认处理器：上传完成后追加到 files
+    const handleFileUploaded = (file: UploadFile) => {
+        isUserChange = true;
+        files = [...files, {
+            name: file.file.name,
+            uri: file.url ?? '',
+            type: getFileType(file.file.name)
+        }];
+        onFileUploaded?.(file);
+    };
+
+    const removeFile = async (file: AttachmentFile) => {
+        const confirmed = removeFileConfirm == null ? true : await removeFileConfirm(file);
+        if (confirmed) {
+            isUserChange = true;
+            files = files.filter(item => item !== file);
+        }
+    };
+
+    $effect(() => {
+        if (oldFiles !== files) {
+            if (isUserChange) {
+                onchange?.(files);
+                isUserChange = false;
+            }
+            oldFiles = files;
+        }
+    });
+
+    export function focus() {
+        containerElement?.focus();
+    }
+
+    const canUpload = $derived(!disabled && !readonly && (onUpload != null || uploadFile != null));
+</script>
+
+<FormEditor {variant} {theme} {tooltip} {error} {style} {readonly} {disabled} {compact}>
+    <div
+        bind:this={containerElement}
+        class="uniface-attachment-editor"
+        tabindex={disabled || readonly ? -1 : 0}
+        onfocus={handleFocus}
+        onblur={handleBlur}
+    >
+        <input tabindex="-1" style="position: relative; left: -1px; width: 1px;"/>
+        <div class="files-field">
+            {#each files as file (file)}
+                <FileRender {file} {readonly} onRemove={removeFile}/>
+            {/each}
+        </div>
+        {#if canUpload}
+            <div class="editor-action-icon" onclick={triggerUpload}>
+                <i class="icon_google_file_upload" aria-hidden="true"></i>
+            </div>
+        {/if}
+    </div>
+</FormEditor>
+
+{#if showUpload}
+    <FileUploadPanel
+        bind:visible={showUpload}
+        {accept}
+        {maxSize}
+        {maxFiles}
+        {uploadFile}
+        {theme}
+        onFileUploaded={handleFileUploaded}
+    />
+{/if}
+
+<style>
+    .uniface-attachment-editor {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        width: 100%;
+        outline: none;
+    }
+
+    .files-field {
+        flex: 1 1 auto;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        min-width: 0;
+    }
+
+    .editor-action-icon {
+        flex: 0 0 auto;
+        cursor: pointer;
+        padding: 4px;
+        margin-right: 8px;
+        border-radius: 4px;
+        display: flex;
+        align-items: center;
+    }
+
+    .editor-action-icon:hover {
+        background-color: rgba(0, 0, 0, 0.05);
+    }
+</style>

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

@@ -0,0 +1,19 @@
+import type AttachmentFile 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>;
+}
+declare const AttachmentEditor: import("svelte").Component<Props, {
+    focus: () => void;
+}, "files">;
+type AttachmentEditor = ReturnType<typeof AttachmentEditor>;
+export default AttachmentEditor;

package/dist/form/attachment_files/FileRender.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+
+    
+    import type AttachmentFile from "./AttachmentFile";
+
+    interface Props {
+        file: AttachmentFile;
+        readonly: boolean;
+        onRemove: (file: AttachmentFile) => void;
+    }
+    
+    let {
+        file,
+        readonly,
+        onRemove
+    }: Props = $props();
+    
+    const getTypeIcon = (type: string) => {
+        switch (type) {
+            case 'img': return 'icon_google_image';
+            case 'pdf': return 'icon_google_picture';
+            case 'doc': return 'icon_google_description';
+            case 'xml': return 'icon_google_table_chart';
+            case 'ppt': return 'icon_google_slideshow';
+            case 'wav': return 'icon_google_audiotrack';
+            case 'mov': return 'icon_google_movie';
+            default: return 'icon_google_attach';
+        }
+    };
+
+    const removeFile = async (event: MouseEvent) => {
+        onRemove?.(file);
+    }
+</script>
+
+<div class="uniface-file-render" class:readonly>
+    <i class="{getTypeIcon(file.type)}" aria-hidden="true"></i>
+    <div class="file-info">
+        <div class="file-name" title={file.name}>{file.name}</div>
+        {#if file.uri}
+            <a href={file.uri} target="_blank" rel="noopener noreferrer" class="file-link">
+                <span>download / open</span>
+            </a>
+        {/if}
+    </div>
+    {#if !readonly}
+        <button class="remove-btn" onclick={removeFile} aria-label="remove file">
+            <i class="icon_google_delete" aria-hidden="true"></i>
+        </button>
+    {/if}
+</div>
+
+<style>
+    .uniface-file-render {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 4px 8px;
+        border-radius: 4px;
+        background-color: rgba(0, 0, 0, 0.02);
+        border: 1px solid transparent;
+        transition: all 0.2s;
+    }
+    
+    .uniface-file-render:hover {
+        background-color: rgba(0, 0, 0, 0.05);
+        border-color: rgba(0, 0, 0, 0.1);
+    }
+    
+    .uniface-file-render.readonly {
+        cursor: default;
+    }
+    
+    .uniface-file-render.readonly:hover {
+        background-color: rgba(0, 0, 0, 0.02);
+        border-color: transparent;
+    }
+    
+    i {
+        font-size: 20px;
+        color: #6b7280;
+    }
+    
+    .file-info {
+        flex: 1;
+        min-width: 0;
+    }
+    
+    .file-name {
+        font-size: 14px;
+        color: #1f2937;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    
+    .file-link {
+        font-size: 12px;
+        color: #3b82f6;
+        text-decoration: none;
+    }
+    
+    .file-link:hover {
+        text-decoration: underline;
+    }
+    
+    .remove-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+        border: none;
+        background: transparent;
+        cursor: pointer;
+        color: #9ca3af;
+        border-radius: 4px;
+        transition: all 0.2s;
+    }
+    
+    .remove-btn:hover {
+        background-color: rgba(239, 68, 68, 0.1);
+        color: #ef4444;
+    }
+</style>

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

@@ -0,0 +1,9 @@
+import type AttachmentFile from "./AttachmentFile";
+interface Props {
+    file: AttachmentFile;
+    readonly: boolean;
+    onRemove: (file: AttachmentFile) => void;
+}
+declare const FileRender: import("svelte").Component<Props, {}, "">;
+type FileRender = ReturnType<typeof FileRender>;
+export default FileRender;

package/dist/form/attachment_files/FileUploadBar.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+    import ProgressBar, {ProgressStatus} from "../../feedback/progress-bar";
+    import {TextButton} from "../../general/button";
+    import type UploadFile from "./UploadFile";
+    import i18nRes from "../../i18nRes";
+
+    let {
+        file,
+        removeFile
+    }: {
+        file: UploadFile;
+        removeFile: (file: any) => void;
+    } = $props();
+
+    let status: ProgressStatus = $state(file?.status ?? ProgressStatus.progressing);
+    let progress: number = $state(0);
+
+    let cancelLabel: string = i18nRes.common.btnCancel.toString();
+    let retryLabel: string = i18nRes.upload.btnRetry.toString();
+    let removeLabel: string = i18nRes.upload.btnRemove.toString();
+
+    const cancelUpload = async () => {
+        if (await file.cancel()) {
+            status = file.status;
+        }
+    }
+
+    const retryUpload = async () => {
+        file.restart();
+    }
+
+    const removeUploadFile = async () => {
+        removeFile?.(file);
+    }
+
+    $effect(() => {
+        if (file) {
+            status = file.status;
+            progress = file.progress;
+            file.setUpdateStatus(()=> {
+                status = file.status;
+                progress = file.progress;
+            })
+        }
+    });
+</script>
+<div style="display: flex; flex-direction: row; align-items: center; height: 24px">
+    <div style="flex: 0 0 240px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
+        <span>{file.file.name}</span>
+    </div>
+    <div style="flex: 1 1 auto; margin-left: 8px; margin-right: 8px">
+        <ProgressBar {progress} {status} type="linear"/>
+    </div>
+    <div style="flex: 0 0 120px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
+        {#if status === ProgressStatus.progressing}
+            <TextButton size="small" type="secondary" label={cancelLabel} onclick={cancelUpload}/>
+        {/if}
+        {#if status === ProgressStatus.canceled || status === ProgressStatus.failure}
+            <TextButton size="small" type="primary" label={retryLabel} onclick={retryUpload}/>
+            <TextButton size="small" label={removeLabel} onclick={removeUploadFile}/>
+        {/if}
+    </div>
+</div>

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

@@ -0,0 +1,8 @@
+import type UploadFile from "./UploadFile";
+type $$ComponentProps = {
+    file: UploadFile;
+    removeFile: (file: any) => void;
+};
+declare const FileUploadBar: import("svelte").Component<$$ComponentProps, {}, "">;
+type FileUploadBar = ReturnType<typeof FileUploadBar>;
+export default FileUploadBar;

package/dist/form/attachment_files/FileUploadPanel.svelte

@@ -0,0 +1,223 @@
+<script lang="ts">
+    import Button from "../../general/button";
+    import FileUploadBar from "./FileUploadBar.svelte";
+    import UploadFile from "./UploadFile";
+    import {ProgressStatus} from "../../feedback/progress-bar";
+    import type {FileUpload} from "./FileUpload";
+    import utils from "../../overlay/common/utils";
+    import ModalPopover from "../../overlay/common/ModalPopover.svelte";
+    import i18nRes from "../../i18nRes";
+
+    let {
+        accept = "*/*",
+        maxSize = 1024 * 1024 * 10,
+        maxFiles = 1,
+        onFileUploaded,
+        uploadFile,
+        theme,
+        visible = $bindable(false)
+    }: {
+        accept?: string;
+        maxSize?: number;
+        maxFiles?: number;
+        onFileUploaded?: (file: UploadFile) => void;
+        uploadFile?: FileUpload;
+        theme?: string;
+        visible?: boolean;
+    } = $props();
+
+    let btnPickup = i18nRes.upload.btnPickup.toString();
+
+    let files: Array<UploadFile> = $state([]);
+    let dropZone: any;
+    let fileInput: any;
+    let interval: any;
+    let busy: boolean = $state(false);
+    let canClose: boolean = $state(false);
+
+    $effect(() => {
+        let checkAutoClose:any = null;
+        interval = setInterval(() => {
+            canClose = files.every(item => item.status != ProgressStatus.progressing);
+            if (canClose) {
+                if (files.length == maxFiles) {
+                    visible = !canClose;
+                } else if (files.length > 0 && checkAutoClose == null) {
+                    checkAutoClose = setTimeout(()=> {
+                        visible = !canClose || busy;
+                        files = [];
+                        checkAutoClose = null;
+                    }, 1000);
+                }
+            }
+        }, 100);
+
+        return () => {
+            clearInterval(interval);
+        };
+    });
+
+    const handleDragOver = (e: DragEvent) => {
+        e.preventDefault();
+        busy = true;
+        dropZone.classList.add("highlight");
+    }
+
+    const handleDragLeave = (e: DragEvent) => {
+        e.preventDefault();
+        busy = false;
+        dropZone.classList.remove("highlight");
+    }
+
+    const handleDrop = (e: DragEvent) => {
+        e.preventDefault();
+        dropZone.classList.remove("highlight");
+        handleFiles(e.dataTransfer?.files);
+    }
+
+    const handleFiles = (uploadFiles: FileList | undefined) => {
+        if (uploadFiles && uploadFiles.length > 0 && uploadFile) {
+            const uploader = uploadFile;
+            let list = utils.filterFiles(Array.from(uploadFiles), accept);
+            list.forEach(file => {
+                if (file.size <= maxSize && files.length < maxFiles) {
+                    let uf = new UploadFile(file, uploader, ()=> {
+                        onFileUploaded?.(uf);
+                    });
+                    files = [...files, uf];
+                }
+            });
+        }
+        busy = false;
+    }
+
+    const showFileDialog = () => {
+        busy = true;
+        fileInput.click();
+    }
+
+    const handleMouseClick = (e: MouseEvent) => {
+        e.stopPropagation();
+    }
+
+    const handleFilePickup = (event: any) => {
+        handleFiles(event.target.files);
+    }
+
+    const removeFile = (file: any) => {
+        let pos = files.findIndex(item => item == file);
+        if (pos > -1) {
+            files.splice(pos, 1);
+            files = [...files];
+        }
+    }
+
+    $effect(() => {
+        canClose = files.length == 0;
+    });
+</script>
+<ModalPopover {canClose} {theme} bind:visible>
+    <div class="uniface-file-upload-panel" bind:this={dropZone} ondragover={handleDragOver} ondragleave={handleDragLeave}
+         ondrop={handleDrop} onclick={handleMouseClick} aria-hidden="true">
+        <div class="file-upload-contents">
+            <div style="position: absolute; top: 0; width: 0; overflow: hidden">
+                <input bind:this={fileInput} type="file" {accept} multiple={maxFiles > 1} onchange={handleFilePickup}/>
+            </div>
+            <div style="margin-bottom: 8px; flex: 0 0 auto; text-align: center">
+                <Button type="primary" disabled={files.length >= maxFiles} icon="icon_google_file_upload" label={btnPickup}
+                        onclick={showFileDialog}></Button>
+            </div>
+            <div style="flex: 1 1 auto; overflow: auto; padding: 0 24px">
+                {#each files as file}
+                    <FileUploadBar {file} removeFile={removeFile}/>
+                {/each}
+            </div>
+        </div>
+    </div>
+</ModalPopover>
+
+<style>.uniface-file-upload-panel {
+  width: 820px;
+  padding: 24px 0;
+  background-color: var(--uniface-upload-panel-bg, #F8FAFC);
+  border: 1px solid var(--uniface-upload-panel-border-color, #E2E8F0);
+  border-radius: 8px;
+  min-height: 144px;
+}
+.uniface-file-upload-panel .file-upload-contents {
+  width: 100%;
+  height: 100%;
+  border: 1px dotted transparent;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+}
+.uniface-file-upload-panel.highlight {
+  background-color: var(--uniface-upload-panel-highlight-bg, #b3d8ff);
+}
+
+.uniface-attachment-display > div {
+  width: 100%;
+  box-sizing: border-box;
+  line-height: 1.1em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.uniface-attachment-field {
+  display: inline-block;
+  position: relative;
+  width: 100%;
+}
+.uniface-attachment-field .uniface-common-editor {
+  height: 120px;
+}
+.uniface-attachment-field > div {
+  display: flex;
+  flex-direction: row;
+  justify-items: center;
+}
+.uniface-attachment-field .files-field {
+  flex: 1 1 auto;
+  height: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: flex;
+  flex-direction: row;
+  justify-items: flex-start;
+  overflow-x: auto;
+}
+.uniface-attachment-field .files-field .file-icon {
+  position: relative;
+}
+.uniface-attachment-field .files-field .file-icon img {
+  width: 64px;
+  height: 64px;
+}
+.uniface-attachment-field .files-field .file-icon .action-icon {
+  position: absolute;
+  display: none;
+  left: 50%;
+  transform: translateX(-50%);
+  cursor: pointer;
+}
+.uniface-attachment-field .files-field .file-icon .action-icon i:active {
+  position: relative;
+  top: 1px;
+}
+.uniface-attachment-field .files-field .file-icon:hover .action-icon {
+  display: inline-block;
+}
+.uniface-attachment-field .action-dropdown {
+  box-sizing: border-box;
+  margin-top: 4px;
+  margin-right: 4px;
+  line-height: 22px;
+  margin-left: 8px;
+  color: var(--uniface-dropdown-color, #e1e1e1);
+  align-self: flex-start;
+  cursor: pointer;
+}
+.uniface-attachment-field .filled .action-dropdown {
+  color: var(--uniface-secondary-dropdown-color, #b9b9b9);
+}</style>

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

@@ -0,0 +1,14 @@
+import UploadFile from "./UploadFile";
+import type { FileUpload } from "./FileUpload";
+type $$ComponentProps = {
+    accept?: string;
+    maxSize?: number;
+    maxFiles?: number;
+    onFileUploaded?: (file: UploadFile) => void;
+    uploadFile?: FileUpload;
+    theme?: string;
+    visible?: boolean;
+};
+declare const FileUploadPanel: import("svelte").Component<$$ComponentProps, {}, "visible">;
+type FileUploadPanel = ReturnType<typeof FileUploadPanel>;
+export default FileUploadPanel;