@ticatec/uniface-element 5.0.4 → 5.1.0

package/dist/form/attachment_files/FileUploadBar.svelte

@@ -1,66 +0,0 @@
-<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();
-
-    // The upload object owns subsequent status updates. This value is only the
-    // initial snapshot before the effect installs its update callback.
-    const getInitialStatus = () => file?.status ?? ProgressStatus.progressing;
-    let status: ProgressStatus = $state(getInitialStatus());
-    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

@@ -1,8 +0,0 @@
-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

@@ -1,161 +0,0 @@
-<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 fileInput: any;
-    let interval: any;
-    let busy: boolean = $state(false);
-    let dragActive = $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;
-        dragActive = true;
-    }
-
-    const handleDragLeave = (e: DragEvent) => {
-        e.preventDefault();
-        busy = false;
-        dragActive = false;
-    }
-
-    const handleDrop = (e: DragEvent) => {
-        e.preventDefault();
-        dragActive = false;
-        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>
-    <!-- onclick only stops propagation to the modal's outside-click handler; the
-         real controls (Button, file input) inside carry their own semantics. -->
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-    <div class="uniface-file-upload-panel" class:highlight={dragActive} ondragover={handleDragOver} ondragleave={handleDragLeave}
-         ondrop={handleDrop} onclick={handleMouseClick} role="group" aria-label={btnPickup}>
-        <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);
-}</style>

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

@@ -1,14 +0,0 @@
-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;

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

@@ -1,43 +0,0 @@
-import { ProgressStatus } from "../../feedback/progress-bar";
-import type { FileUpload } from "./FileUpload";
-export type OnCompleted = (file: File, url: string, thumbnail?: string) => void;
-export type UpdateStatus = () => void;
-export default class UploadFile {
-    /**
-     * 待上传的文件
-     */
-    readonly file: File;
-    /**
-     * 上传后的文件地址
-     */
-    private _url;
-    /**
-     * 上传的缩率图
-     * @private
-     */
-    private _thumbnail;
-    /**
-     * 状态
-     */
-    private _status;
-    /**
-     * 已经上传的字节数
-     */
-    private _uploadedBytes;
-    /**
-     * 上传的实例
-     */
-    private loader?;
-    private readonly onCompleted;
-    private readonly uploadFile;
-    private updateStatus;
-    constructor(file: File, uploadFile: FileUpload, onCompleted: OnCompleted);
-    private startUploading;
-    restart(): void;
-    get url(): string | null;
-    get thumbnail(): string | undefined | null;
-    get status(): ProgressStatus;
-    get progress(): number;
-    cancel(): Promise<boolean>;
-    setUpdateStatus(value: UpdateStatus): void;
-}

package/dist/form/attachment_files/UploadFile.js

@@ -1,80 +0,0 @@
-import { ProgressStatus } from "../../feedback/progress-bar";
-export default class UploadFile {
-    /**
-     * 待上传的文件
-     */
-    file;
-    /**
-     * 上传后的文件地址
-     */
-    _url = null;
-    /**
-     * 上传的缩率图
-     * @private
-     */
-    _thumbnail = null;
-    /**
-     * 状态
-     */
-    _status = ProgressStatus.progressing;
-    /**
-     * 已经上传的字节数
-     */
-    _uploadedBytes = 0;
-    /**
-     * 上传的实例
-     */
-    loader;
-    onCompleted;
-    uploadFile;
-    updateStatus = null;
-    constructor(file, uploadFile, onCompleted) {
-        this.file = file;
-        this.uploadFile = uploadFile;
-        this.onCompleted = onCompleted;
-        this.loader = this.startUploading();
-    }
-    startUploading() {
-        return this.uploadFile(this.file, (bytes) => {
-            this._uploadedBytes = bytes;
-            this.updateStatus?.();
-        }, (url, thumbnail) => {
-            this._url = url;
-            this._thumbnail = thumbnail;
-            this._status = ProgressStatus.successful;
-            this.onCompleted(this.file, url);
-            this.updateStatus?.();
-        }, (e) => {
-            this._status = ProgressStatus.failure;
-            this.updateStatus?.();
-        });
-    }
-    restart() {
-        this._status = ProgressStatus.progressing;
-        this.loader = this.startUploading();
-        this.updateStatus?.();
-    }
-    get url() {
-        return this._url;
-    }
-    get thumbnail() {
-        return this._thumbnail;
-    }
-    get status() {
-        return this._status;
-    }
-    get progress() {
-        return Math.round(this._uploadedBytes * 100 / this.file.size);
-    }
-    async cancel() {
-        let result = this.loader != null ? await this.loader.cancel() : true;
-        if (result) {
-            this._status = ProgressStatus.canceled;
-            this.updateStatus?.();
-        }
-        return result;
-    }
-    setUpdateStatus(value) {
-        this.updateStatus = value;
-    }
-}

package/dist/form/cascade_options_select/CascadePanel.svelte

@@ -1,52 +0,0 @@
-<script lang="ts">
-    import iconLoading from "../assets/loading.gif";
-    import OptionsBox from "./OptionsBox.svelte";
-    import type {OnSelectHandler} from "../../types";
-
-
-    export let nodes: Array<Array<any>>;
-    export let keyField: string;
-    export let textField: string;
-    export let box$style: string;
-    export let onSelect: OnSelectHandler<any>;
-
-    export let selectedItems:Array<any> = [];
-    let busy: boolean = false;
-
-    const selectOption = (level: number) => (item: any) => {
-        if (level == 0) {
-            selectedItems = [item];
-            nodes = [nodes[0]];
-        } else if (level == selectedItems.length - 1) {
-            selectedItems.pop();
-            selectedItems = [...selectedItems, item];
-        } else if (level < selectedItems.length) {
-            selectedItems.splice(level);
-            nodes.splice(level+1);
-            selectedItems = [...selectedItems, item];
-        } else if (level == selectedItems.length) {
-            selectedItems = [...selectedItems, item];
-        }
-        onSelect?.(item);
-    }
-
-
-</script>
-<div style="width: 100%; height: 100%; position: relative">
-    <div style="width: 100%; height: 100%; display: flex; flex-direction: row; overflow: auto">
-        {#each nodes as node, idx}
-            <OptionsBox options={node} {keyField} {textField} {box$style} onSelect={selectOption(idx)}
-                        selectedItem={selectedItems[idx]}/>
-        {/each}
-    </div>
-    {#if busy}
-    <div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #e1e1e110;">
-        <div style="position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center">
-            <div style="width: 100px; margin: 0 auto; text-align: center; background-color: #f0f0f0; border-radius: 4px; padding: 8px 12px; box-sizing: border-box;">
-                <img src={iconLoading} alt="loading" width="32" height="32"/>
-            </div>
-        </div>
-    </div>
-    {/if}
-
-</div>

package/dist/form/cascade_options_select/CascadePanel.svelte.d.ts

@@ -1,26 +0,0 @@
-import type { OnSelectHandler } from "../../types";
-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 CascadePanel: $$__sveltets_2_IsomorphicComponent<{
-    nodes: Array<Array<any>>;
-    keyField: string;
-    textField: string;
-    box$style: string;
-    onSelect: OnSelectHandler<any>;
-    selectedItems?: Array<any>;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type CascadePanel = InstanceType<typeof CascadePanel>;
-export default CascadePanel;

package/dist/form/cascade_options_select/isLeafDetermine.d.ts

@@ -1,4 +0,0 @@
-/**
- * 判断当前节点是否为末端节点
- */
-export type IsLeafDetermine = (item: any) => boolean;

package/dist/form/common_editor/EditorEvents.d.ts

@@ -1,14 +0,0 @@
-export interface InputEvents {
-    oninput?: (event: InputEvent) => void;
-}
-export interface KeyboardEvents {
-    onkeydown?: (event: KeyboardEvent) => void;
-    onkeyup?: (event: KeyboardEvent) => void;
-    onkeypress?: (event: KeyboardEvent) => void;
-}
-export declare const keyboardAttrs: string[];
-export declare const InputAttrs: string[];
-export default interface BaseMouseEvents {
-    onclick?: (event: MouseEvent) => void;
-    ondblclick?: (event: MouseEvent) => void;
-}

package/dist/form/common_editor/EditorEvents.js

@@ -1,2 +0,0 @@
-export const keyboardAttrs = ['onkeypress', 'onkeyup', 'onKeypress'];
-export const InputAttrs = ['oninput'];

package/dist/form/image-files/ImageFile.d.ts

@@ -1,12 +0,0 @@
-export default interface ImageFile {
-    /**
-     * 附件名
-     */
-    name: string;
-    /**
-     * oss保存的文件路径
-     */
-    uri: string;
-    thumbnail?: string | undefined | null;
-}
-export type RemoveConfirm = (file: ImageFile) => Promise<boolean>;

package/dist/form/image-files/ImageFilesField.svelte

@@ -1,128 +0,0 @@
-<script lang="ts">
-    import type ImageFile from "./ImageFile";
-    import type {RemoveConfirm} from "./ImageFile";
-    import type UploadFile from "../attachment_files/UploadFile";
-    import type {FileUpload} from "../attachment_files/FileUpload";
-    import FileUploadPanel from "../attachment_files/FileUploadPanel.svelte";
-    import ImageRender from "./ImageRender.svelte";
-    import ImagePreview from "./ImagePreview.svelte";
-    import FormEditor from "../FormEditor.svelte";
-    import {getEditorVariant} from "../../unifaceContext";
-    import type {EditorVariant} from "../types";
-
-    let {
-        variant = getEditorVariant(),
-        disabled = false,
-        readonly = false,
-        files = $bindable([] as ImageFile[]),
-        style = "",
-        removeFileConfirm,
-        uploadFile,
-        maxFiles = 1,
-        text = null as string | null
-    }: {
-        variant?: EditorVariant;
-        disabled?: boolean;
-        readonly?: boolean;
-        files: ImageFile[];
-        style?: string;
-        removeFileConfirm?: RemoveConfirm;
-        uploadFile: FileUpload;
-        maxFiles?: number;
-        text?: string | null;
-    } = $props();
-
-    let showUpload = $state(false);
-    let showPreview = $state(false);
-    let previewImgSrc = $state("");
-
-    const showDialog = () => {
-        showUpload = true;
-    }
-
-    const appendNewFile = (file: UploadFile) => {
-        files = [...files, {
-            name: file.file.name,
-            uri: file.url ?? '',
-            thumbnail: file.thumbnail
-        }];
-    }
-
-    const removeFile = async (file: ImageFile) => {
-        let confirmed = removeFileConfirm == null ? true : await removeFileConfirm(file);
-        if (confirmed) {
-            let pos = files.findIndex(item => item == file);
-            if (pos > -1) {
-                files.splice(pos, 1);
-                files = [...files];
-            }
-        }
-    }
-
-    $effect(() => {
-        text = '<div>' + files.map(item => (item.name)).join("</div><div>") + '</div>';
-    });
-
-    const handleUploadKeyDown = (e: KeyboardEvent) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            showDialog();
-        }
-    };
-</script>
-
-<div class="uniface-images-field" {style}>
-    <FormEditor {variant} {readonly} {disabled}>
-        <div class="files-field">
-            {#each files as file}
-                <ImageRender {file} {readonly} onRemove={removeFile}
-                             onPreview={(file: ImageFile) => {showPreview = true; previewImgSrc = file.uri}}/>
-            {/each}
-            {#if !disabled && !readonly}
-                <div class="editor-action-icon">
-                    <i class="icon_google_file_upload" role="button" tabindex="0" aria-label="Upload image"
-                       onclick={showDialog} onkeydown={handleUploadKeyDown}></i>
-                </div>
-            {/if}
-        </div>
-    </FormEditor>
-    {#if showUpload}
-        <FileUploadPanel bind:visible={showUpload} accept="image/*" {maxFiles} onFileUploaded={appendNewFile} {uploadFile}/>
-    {/if}
-    <ImagePreview bind:visible={showPreview} src={previewImgSrc}/>
-</div>
-
-<style>
-    .uniface-images-field {
-        width: 100%;
-    }
-
-    .files-field {
-        display: flex;
-        align-items: center;
-        width: 100%;
-        height: 52px;
-        min-width: 0;
-        overflow-x: auto;
-        overflow-y: hidden;
-        box-sizing: border-box;
-    }
-
-    .editor-action-icon {
-        flex: 0 0 auto;
-        cursor: pointer;
-        padding: 4px;
-        border-radius: 4px;
-        display: flex;
-        align-items: center;
-        color: inherit;
-    }
-
-    .editor-action-icon:hover {
-        background-color: rgba(0, 0, 0, 0.05);
-    }
-
-    .editor-action-icon i {
-        font-size: 22px;
-    }
-</style>

package/dist/form/image-files/ImageFilesField.svelte.d.ts

@@ -1,18 +0,0 @@
-import type ImageFile from "./ImageFile";
-import type { RemoveConfirm } from "./ImageFile";
-import type { FileUpload } from "../attachment_files/FileUpload";
-import type { EditorVariant } from "../types";
-type $$ComponentProps = {
-    variant?: EditorVariant;
-    disabled?: boolean;
-    readonly?: boolean;
-    files: ImageFile[];
-    style?: string;
-    removeFileConfirm?: RemoveConfirm;
-    uploadFile: FileUpload;
-    maxFiles?: number;
-    text?: string | null;
-};
-declare const ImageFilesField: import("svelte").Component<$$ComponentProps, {}, "files">;
-type ImageFilesField = ReturnType<typeof ImageFilesField>;
-export default ImageFilesField;