@ticatec/uniface-element 0.3.23 → 5.0.0

package/dist/attachment-files/AttachmentFilesField.svelte

@@ -1,143 +0,0 @@
-<script lang="ts">
-
-    import {onMount} from "svelte";
-    import {DisplayMode} from "../common/DisplayMode";
-    import ModalPopover from "../common/ModalPopover.svelte";
-    import FileUploadPanel from "./FileUploadPanel.svelte";
-    import FileRender from "./FileRender.svelte";
-    import type AttachmentFile from "./AttachmentFile";
-    import {getFileType, type RemoveConfirm} from "./AttachmentFile";
-    import type UploadFile from "./UploadFile";
-    import type {FileUpload} from "./FileUpload";
-
-    export let variant: '' | 'plain' | 'outlined' | 'filled' = '';
-    export let disabled: boolean = false;
-    export let readonly: boolean = false;
-    export let files: Array<AttachmentFile> = [];
-    export let style: string = '';
-    export let displayMode: DisplayMode = DisplayMode.Edit;
-    export let removeFileConfirm: RemoveConfirm = null as unknown as RemoveConfirm;
-    export let uploadFile: FileUpload;
-    export let compact: boolean = false;
-    export let onfocus: (() => void) | null = null;
-    export let onblur: (() => void) | null = null;
-    export let onchange: ((files: Array<AttachmentFile>) => void) | null = null;
-
-    export let text: string | null = null;
-
-    export const setFocus = () => {
-        setTimeout(() => {
-            if (containerElement) {
-                containerElement.focus();
-            }
-        }, 50);
-    }
-
-    let showUpload: boolean = false;
-    let containerElement: HTMLDivElement;
-    let oldFiles = files;
-    let isUserChange: boolean = false;
-    let hasFocus: boolean = false;
-
-    onMount(() => {
-
-    })
-
-    // 处理focus/blur事件
-    const handleFocus = () => {
-        if (!hasFocus) {
-            hasFocus = true;
-            onfocus?.();
-        }
-    }
-
-    const handleBlur = () => {
-        if (hasFocus && !showUpload) {
-            hasFocus = false;
-            onblur?.();
-        }
-    }
-
-    const handleContainerFocus = (e: FocusEvent) => {
-        handleFocus();
-    }
-
-    const handleContainerBlur = (e: FocusEvent) => {
-        setTimeout(() => {
-            if (!showUpload && !containerElement?.contains(document.activeElement)) {
-                handleBlur();
-            }
-        }, 50);
-    }
-
-    const showDialog = () => {
-        handleFocus();
-        showUpload = true;
-    }
-
-    const appendNewFile = (file: UploadFile) => {
-        isUserChange = true;
-        files = [...files, {
-            name: file.file.name,
-            uri: file.url ?? '',
-            type: getFileType(file.file.name)
-        }]
-    }
-
-    const removeFile = async (file: AttachmentFile) => {
-        let confirmed = removeFileConfirm == null ? true : await removeFileConfirm(file);
-        if (confirmed) {
-            isUserChange = true;
-            let pos = files.findIndex(item => item == file);
-            if (pos > -1) {
-                files.splice(pos, 1);
-                files = [...files];
-            }
-        }
-    }
-
-    // 监听upload面板关闭
-    $: if (!showUpload && hasFocus) {
-        setTimeout(() => {
-            if (document.activeElement !== containerElement) {
-                handleBlur();
-            }
-        }, 50);
-    }
-
-    $: text = '<div>' + files.map(item => (item.name)).join("</div><div>") + '</div>'
-
-    // 处理onchange事件
-    $: if (oldFiles !== files) {
-        if (isUserChange) {
-            onchange?.(files);
-            isUserChange = false;
-        }
-        oldFiles = files;
-    }
-
-</script>
-
-{#if displayMode === DisplayMode.View}
-    <div class="uniface-attachment-display uniface-display-field">
-        {@html text ?? ''}
-    </div>
-{:else }
-    <div class="uniface-attachment-field" {style}>
-        <div bind:this={containerElement} class="uniface-common-editor {variant}" class:compact class:disabled 
-             tabindex={disabled ? -1 : 0} on:focus={handleContainerFocus} on:blur={handleContainerBlur}>
-            <div class="files-field">
-                {#each files as file}
-                    <FileRender {file} {readonly} onRemove={removeFile}/>
-                {/each}
-            </div>
-            {#if !disabled && !readonly}
-                <div class="editor-action-icon">
-                    <i class="icon_google_file_upload" aria-hidden="true" on:click={showDialog}></i>
-                </div>
-            {/if}
-        </div>
-    </div>
-
-    <FileUploadPanel bind:visible={showUpload} maxFiles={10} onFileUploaded={appendNewFile} {uploadFile}/>
-{/if}

package/dist/attachment-files/AttachmentFilesField.svelte.d.ts

@@ -1,39 +0,0 @@
-import { DisplayMode } from "../common/DisplayMode";
-import type AttachmentFile from "./AttachmentFile";
-import { type RemoveConfirm } from "./AttachmentFile";
-import type { FileUpload } from "./FileUpload";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const AttachmentFilesField: $$__sveltets_2_IsomorphicComponent<{
-    variant?: "" | "plain" | "outlined" | "filled";
-    disabled?: boolean;
-    readonly?: boolean;
-    files?: Array<AttachmentFile>;
-    style?: string;
-    displayMode?: DisplayMode;
-    removeFileConfirm?: RemoveConfirm;
-    uploadFile: FileUpload;
-    compact?: boolean;
-    onfocus?: (() => void) | null;
-    onblur?: (() => void) | null;
-    onchange?: ((files: Array<AttachmentFile>) => void) | null;
-    text?: string | null;
-    setFocus?: () => void;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {
-    setFocus: () => void;
-}, string>;
-type AttachmentFilesField = InstanceType<typeof AttachmentFilesField>;
-export default AttachmentFilesField;

package/dist/attachment-files/FileRender.svelte

@@ -1,65 +0,0 @@
-<script lang="ts">
-    import iconSound from "./sound.svg";
-    import iconVideo from "./video.svg";
-    import iconPDF from "./pdf.svg";
-    import iconPPT from "./ppt.svg";
-    import iconWord from "./word.svg";
-    import iconExcel from "./excel.svg";
-    import iconImg from "./image.svg";
-    import iconFile from "./file.svg";
-    import type AttachmentFile from "./AttachmentFile";
-    import {FileType} from "./AttachmentFile";
-
-
-    export let file: AttachmentFile;
-    export let readonly: boolean = false;
-    export let onRemove: (file: AttachmentFile)=> Promise<void>;
-
-    let icon;
-
-    const getIcon = (type: FileType) => {
-        switch (type) {
-            case FileType.AUDIO:
-                return iconSound;
-            case FileType.VIDEO:
-                return iconVideo;
-            case FileType.PPT:
-                return iconPPT;
-            case FileType.PDF:
-                return iconPDF;
-            case FileType.XLS:
-                return iconExcel;
-            case FileType.IMAGE:
-                return iconImg;
-            case FileType.DOC:
-                return iconWord;
-            default:
-                return iconFile;
-        }
-    }
-
-    const removeFile = () => {
-        onRemove?.(file);
-    }
-
-    $: icon = getIcon(file.type);
-
-</script>
-
-<div style="width: 80px; height: 100%; box-sizing: border-box; padding: 6px 8px;">
-    <div class="file-icon">
-        <img src={icon} alt="icon" width="64px" height="64px"/>
-        <div class="action-icon" style="top: 15px;">
-            <i class="icon_google_file_download" ></i>
-        </div>
-        {#if !readonly}
-            <div class="action-icon" style="top: 35px;">
-                <i class="icon_google_clear" aria-hidden="true" on:click={removeFile}></i>
-            </div>
-    {/if}
-    </div>
-    <div style="overflow: hidden; text-overflow: ellipsis">
-        <span>{file.name}</span>
-    </div>
-
-</div>

package/dist/attachment-files/FileRender.svelte.d.ts

@@ -1,23 +0,0 @@
-import type AttachmentFile from "./AttachmentFile";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FileRender: $$__sveltets_2_IsomorphicComponent<{
-    file: AttachmentFile;
-    readonly?: boolean;
-    onRemove: (file: AttachmentFile) => Promise<void>;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FileRender = InstanceType<typeof FileRender>;
-export default FileRender;

package/dist/attachment-files/FileUploadBar.svelte

@@ -1,67 +0,0 @@
-<script lang="ts">
-
-    import ProgressBar from "../progress-bar";
-    import {TextButton} from "../button";
-    import {ProgressStatus} from "../progress-bar/ProgressStatus";
-    import {onMount} from "svelte";
-    import type UploadFile from "./UploadFile";
-    import i18nRes from "../i18nRes";
-
-
-    export let file: UploadFile;
-    export let removeFile: (file: any) => void;
-
-    let status: ProgressStatus;
-    let progress: number = 0;
-
-    let cancelLabel: string = i18nRes.common.btnCancel;
-    let retryLabel: string = i18nRes.upload.btnRetry;
-    let removeLabel: string = i18nRes.upload.btnRemove;
-
-    const cancelUpload = async () => {
-        if (await file.cancel()) {
-            status = file.status;
-        }
-    }
-
-    const retryUpload = async () => {
-        file.restart();
-    }
-
-    const removeUploadFile = async () => {
-        removeFile?.(file);
-    }
-
-
-    onMount(async () => {
-
-    });
-
-    $: 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="liner"/>
-    </div>
-    <div style="flex: 0 0 120px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
-        {#if status === ProgressStatus.progressing}
-            <TextButton size="mini" type="secondary" label={cancelLabel} onClick={cancelUpload}/>
-        {/if}
-        {#if status === ProgressStatus.canceled || status === ProgressStatus.failure}
-            <TextButton size="mini" type="primary" label={retryLabel} onClick={retryUpload}/>
-            <TextButton size="mini" label={removeLabel} onClick={removeUploadFile}/>
-        {/if}
-    </div>
-</div>

package/dist/attachment-files/FileUploadBar.svelte.d.ts

@@ -1,22 +0,0 @@
-import type UploadFile from "./UploadFile";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FileUploadBar: $$__sveltets_2_IsomorphicComponent<{
-    file: UploadFile;
-    removeFile: (file: any) => void;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FileUploadBar = InstanceType<typeof FileUploadBar>;
-export default FileUploadBar;

package/dist/attachment-files/FileUploadPanel.svelte

@@ -1,130 +0,0 @@
-<script lang="ts">
-
-    import Button from "../button";
-    import FileUploadBar from "./FileUploadBar.svelte";
-    import UploadFile from "./UploadFile";
-    import {ProgressStatus} from "../progress-bar/ProgressStatus";
-    import {onDestroy, onMount} from "svelte";
-    import type {FileUpload} from "./FileUpload";
-    import utils from "../common/utils";
-    import ModalPopover from "../common/ModalPopover.svelte";
-    import i18nRes from "../i18nRes";
-
-    export let accept: string = "*/*";
-    export let maxSize: number = 1024 * 1024 * 10;
-    export let maxFiles: number = 1;
-    export let onFileUploaded: (file: UploadFile) => void;
-    export let uploadFile: FileUpload;
-
-    export let canClose: boolean = false;
-    export let visible: boolean = false;
-
-    let btnPickup: string = i18nRes.upload.btnPickup;
-
-    let files: Array<UploadFile> = [];
-    let dropZone: any;
-    let fileInput: any;
-    let interval: any;
-    let busy: boolean = false;
-
-    onMount(async () => {
-        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);
-    })
-
-    onDestroy(async () => {
-        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) {
-            let list = utils.filterFiles(Array.from(uploadFiles), accept);
-            list.forEach(file => {
-                if (file.size <= maxSize && files.length < maxFiles) {
-                    let uf = new UploadFile(file, uploadFile, ()=> {
-                        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];
-        }
-    }
-
-
-    $: canClose = files.length == 0;
-
-
-</script>
-<ModalPopover {canClose} bind:visible>
-    <div class="uniface-file-upload-panel" bind:this={dropZone} on:dragover={handleDragOver} on:dragleave={handleDragLeave}
-         on:drop={handleDrop} on:click={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} on:change={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>

package/dist/attachment-files/FileUploadPanel.svelte.d.ts

@@ -1,28 +0,0 @@
-import UploadFile from "./UploadFile";
-import type { FileUpload } from "./FileUpload";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const FileUploadPanel: $$__sveltets_2_IsomorphicComponent<{
-    accept?: string;
-    maxSize?: number;
-    maxFiles?: number;
-    onFileUploaded: (file: UploadFile) => void;
-    uploadFile: FileUpload;
-    canClose?: boolean;
-    visible?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FileUploadPanel = InstanceType<typeof FileUploadPanel>;
-export default FileUploadPanel;

package/dist/attachment-files/README.md

@@ -1,169 +0,0 @@
-# AttachmentFilesField
-
-A comprehensive file attachment component for managing file uploads and displays. Features file type detection, upload progress tracking, file preview, and removal confirmation.
-
-## Features
-
-- **File Upload**: Upload files with custom handlers and progress tracking
-- **File Type Detection**: Automatic detection of images, PDFs, Office documents, audio, video
-- **File Preview**: Display uploaded files with type-specific icons
-- **Removal Confirmation**: Optional confirmation dialog before removing files
-- **Display Modes**: Edit and View modes
-- **Compact Layout**: Space-saving compact mode
-- **Focus Management**: Built-in focus/blur event handling
-
-## Installation
-
-```bash
-npm install @ticatec/uniface-element
-```
-
-```typescript
-import AttachmentFilesField from '@ticatec/uniface-element/AttachmentFilesField';
-```
-
-## Basic Usage
-
-```svelte
-<script>
-  import AttachmentFilesField from '@ticatec/uniface-element/AttachmentFilesField';
-
-  let files = [];
-
-  const uploadFile = async (file, progressUpdate, onUploaded, errorHandler) => {
-    try {
-      const formData = new FormData();
-      formData.append('file', file);
-
-      const response = await fetch('/api/upload', {
-        method: 'POST',
-        body: formData
-      });
-
-      const result = await response.json();
-      onUploaded(result.url, result.thumbnail);
-
-      return { cancel: async () => true };
-    } catch (error) {
-      errorHandler(error);
-      throw error;
-    }
-  };
-</script>
-
-<AttachmentFilesField bind:files {uploadFile} />
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `files` | `Array<AttachmentFile>` | `[]` | Array of attachment files |
-| `uploadFile` | `FileUpload` | Required | File upload handler |
-| `variant` | `'' \| 'plain' \| 'outlined' \| 'filled'` | `''` | Visual variant |
-| `disabled` | `boolean` | `false` | Disable the field |
-| `readonly` | `boolean` | `false` | Read-only mode |
-| `compact` | `boolean` | `false` | Compact layout |
-| `displayMode` | `DisplayMode` | `DisplayMode.Edit` | Display mode |
-| `removeFileConfirm` | `RemoveConfirm \| null` | `null` | Removal confirmation |
-| `style` | `string` | `''` | Custom styles |
-| `onfocus` | `() => void \| null` | `null` | Focus callback |
-| `onblur` | `() => void \| null` | `null` | Blur callback |
-| `onchange` | `(files: Array<AttachmentFile>) => void \| null` | `null` | Change callback |
-
-## Type Definitions
-
-```typescript
-interface AttachmentFile {
-  name: string;      // File name
-  type: FileType;    // File type enum
-  uri: string;       // File URI/path
-}
-
-enum FileType {
-  IMAGE = 'img',     // Images (jpg, png, gif, etc.)
-  PDF = 'pdf',       // PDF documents
-  DOC = 'doc',       // Word (doc, docx)
-  XLS = 'xml',       // Excel (xls, xlsx, csv)
-  PPT = 'ppt',       // PowerPoint (ppt, pptx)
-  AUDIO = 'wav',     // Audio (mp3, wav, aac, etc.)
-  VIDEO = 'mov',     // Video (mp4, avi, mkv, etc.)
-  OTHER = 'dat'      // Other files
-}
-```
-
-## Examples
-
-### Basic Upload
-
-```svelte
-<script>
-  import AttachmentFilesField from '@ticatec/uniface-element/AttachmentFilesField';
-
-  let files = [];
-
-  const uploadFile = async (file, progressUpdate, onUploaded) => {
-    // Your upload logic
-    onUploaded(`/uploads/${file.name}`);
-    return { cancel: async () => true };
-  };
-</script>
-
-<AttachmentFilesField bind:files {uploadFile} />
-```
-
-### Read-only Mode
-
-```svelte
-<script>
-  import AttachmentFilesField from '@ticatec/uniface-element/AttachmentFilesField';
-
-  let files = [
-    { name: 'report.pdf', uri: '/files/report.pdf', type: 'pdf' }
-  ];
-</script>
-
-<AttachmentFilesField bind:files readonly />
-```
-
-### With Removal Confirmation
-
-```svelte
-<script>
-  import AttachmentFilesField from '@ticatec/uniface-element/AttachmentFilesField';
-
-  let files = [];
-
-  const uploadFile = async (file, progressUpdate, onUploaded) => {
-    onUploaded(`/uploads/${file.name}`);
-    return { cancel: async () => true };
-  };
-
-  const removeFileConfirm = async (file) => {
-    return confirm(`Remove ${file.name}?`);
-  };
-</script>
-
-<AttachmentFilesField bind:files {uploadFile} {removeFileConfirm} />
-```
-
-## Best Practices
-
-1. **Server Validation**: Always validate files on the server
-2. **File Size Limits**: Enforce size limits to prevent issues
-3. **Error Handling**: Implement proper error handling
-4. **Progress Updates**: Show upload progress to users
-5. **Security**: Validate file types on the server
-6. **Cleanup**: Properly cancel uploads when needed
-
-## Browser Support
-
-- Modern browsers with File API support
-- Touch-friendly interface
-- Requires server-side upload implementation
-
-## Notes
-
-- Maximum 10 files can be uploaded at once
-- File types are detected by extension
-- Component automatically detects and displays file type icons