@ticatec/uniface-element 0.1.9

package/dist/app-layout/SidebarLayout.svelte.d.ts

@@ -0,0 +1,37 @@
+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;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const SidebarLayout: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    sidebarResize?: boolean;
+    headerHeight?: string;
+    sidebarWidth?: string;
+    sidebarMaxWidth?: string | null;
+    sidebarMinWidth?: string | null;
+}, {
+    sidebar: {};
+    header: {};
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    sidebar: {};
+    header: {};
+    default: {};
+}, {}, string>;
+type SidebarLayout = InstanceType<typeof SidebarLayout>;
+export default SidebarLayout;

package/dist/app-layout/index.d.ts

@@ -0,0 +1,4 @@
+import SidebarLayout from "./SidebarLayout.svelte";
+import HeaderLayout from "./HeaderLayout.svelte";
+import ClassicLayout from "./ClassicLayout.svelte";
+export { SidebarLayout, HeaderLayout, ClassicLayout };

package/dist/app-layout/index.js

@@ -0,0 +1,4 @@
+import SidebarLayout from "./SidebarLayout.svelte";
+import HeaderLayout from "./HeaderLayout.svelte";
+import ClassicLayout from "./ClassicLayout.svelte";
+export { SidebarLayout, HeaderLayout, ClassicLayout };

package/dist/app-top-bar/AppTopBar.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    export let title: string = 'My Header';
+    export let style: string = '';
+</script>
+
+<div class="uniface-header" {style}>
+    {#if $$slots['home']}
+    <div class="bar-home" style="align-self: center">
+        <slot name="home">
+
+        </slot>
+    </div>
+    {/if}
+    <div class="title">
+        <slot>
+            <span>{title}</span>
+        </slot>
+    </div>
+    {#if $$slots['right']}
+        <div class="bar-right">
+        <slot name="right">
+        </slot>
+        </div>
+    {/if}
+</div>

package/dist/app-top-bar/AppTopBar.svelte.d.ts

@@ -0,0 +1,34 @@
+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;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const AppTopBar: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    title?: string;
+    style?: string;
+}, {
+    home: {};
+    default: {};
+    right: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    home: {};
+    default: {};
+    right: {};
+}, {}, string>;
+type AppTopBar = InstanceType<typeof AppTopBar>;
+export default AppTopBar;

package/dist/app-top-bar/index.d.ts

@@ -0,0 +1,2 @@
+import AppTopBar from "./AppTopBar.svelte";
+export default AppTopBar;

package/dist/app-top-bar/index.js

@@ -0,0 +1,2 @@
+import AppTopBar from "./AppTopBar.svelte";
+export default AppTopBar;

package/dist/assets/arrow_down.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="512px" id="Layer_1" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="512px" fill="currentColor" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M98.9,184.7l1.8,2.1l136,156.5c4.6,5.3,11.5,8.6,19.2,8.6c7.7,0,14.6-3.4,19.2-8.6L411,187.1l2.3-2.6  c1.7-2.5,2.7-5.5,2.7-8.7c0-8.7-7.4-15.8-16.6-15.8v0H112.6v0c-9.2,0-16.6,7.1-16.6,15.8C96,179.1,97.1,182.2,98.9,184.7z"/></svg>

package/dist/assets/arrow_up.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="512px" id="Layer_1" style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M413.1,327.3l-1.8-2.1l-136-156.5c-4.6-5.3-11.5-8.6-19.2-8.6c-7.7,0-14.6,3.4-19.2,8.6L101,324.9l-2.3,2.6  C97,330,96,333,96,336.2c0,8.7,7.4,15.8,16.6,15.8v0h286.8v0c9.2,0,16.6-7.1,16.6-15.8C416,332.9,414.9,329.8,413.1,327.3z"/></svg>

package/dist/assets/calendar_icon.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 32 32" height="32px" id="Layer_1" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="calendar_1_"><path d="M29.334,3H25V1c0-0.553-0.447-1-1-1s-1,0.447-1,1v2h-6V1c0-0.553-0.448-1-1-1s-1,0.447-1,1v2H9V1   c0-0.553-0.448-1-1-1S7,0.447,7,1v2H2.667C1.194,3,0,4.193,0,5.666v23.667C0,30.806,1.194,32,2.667,32h26.667   C30.807,32,32,30.806,32,29.333V5.666C32,4.193,30.807,3,29.334,3z M30,29.333C30,29.701,29.701,30,29.334,30H2.667   C2.299,30,2,29.701,2,29.333V5.666C2,5.299,2.299,5,2.667,5H7v2c0,0.553,0.448,1,1,1s1-0.447,1-1V5h6v2c0,0.553,0.448,1,1,1   s1-0.447,1-1V5h6v2c0,0.553,0.447,1,1,1s1-0.447,1-1V5h4.334C29.701,5,30,5.299,30,5.666V29.333z" fill="#333332"/><rect fill="#333332" height="3" width="4" x="7" y="12"/><rect fill="#333332" height="3" width="4" x="7" y="17"/><rect fill="#333332" height="3" width="4" x="7" y="22"/><rect fill="#333332" height="3" width="4" x="14" y="22"/><rect fill="#333332" height="3" width="4" x="14" y="17"/><rect fill="#333332" height="3" width="4" x="14" y="12"/><rect fill="#333332" height="3" width="4" x="21" y="22"/><rect fill="#333332" height="3" width="4" x="21" y="17"/><rect fill="#333332" height="3" width="4" x="21" y="12"/></g></svg>

package/dist/assets/delete_icon.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.0//EN'  'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'><svg enable-background="new 0 0 512 512" height="512px" id="Layer_1" version="1.0" viewBox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="445.2,109.2 402.8,66.8 256,213.6 109.2,66.8 66.8,109.2 213.6,256 66.8,402.8 109.2,445.2 256,298.4 402.8,445.2   445.2,402.8 298.4,256 "/></svg>

package/dist/assets/icon-dropdown.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M33.17 17.17l-9.17 9.17-9.17-9.17-2.83 2.83 12 12 12-12z"/><path d="M0 0h48v48h-48z" fill="none"/></svg>

package/dist/assets/icon_left.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg"><title/><path d="M39.3756,48.0022l30.47-25.39a6.0035,6.0035,0,0,0-7.6878-9.223L26.1563,43.3906a6.0092,6.0092,0,0,0,0,9.2231L62.1578,82.615a6.0035,6.0035,0,0,0,7.6878-9.2231Z"/></svg>

package/dist/assets/icon_right.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg"><title/><path d="M69.8437,43.3876,33.8422,13.3863a6.0035,6.0035,0,0,0-7.6878,9.223l30.47,25.39-30.47,25.39a6.0035,6.0035,0,0,0,7.6878,9.2231L69.8437,52.6106a6.0091,6.0091,0,0,0,0-9.223Z"/></svg>

package/dist/assets/pickup-options.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h48v48h-48z" fill="none"/><path d="M24 11.66l6.34 6.34 2.83-2.83-9.17-9.17-9.17 9.17 2.83 2.83 6.34-6.34zm0 24.68l-6.34-6.34-2.83 2.83 9.17 9.17 9.17-9.17-2.83-2.83-6.34 6.34z"/></svg>

package/dist/attachment-files/AttachmentFile.d.ts

@@ -0,0 +1,26 @@
+export declare const getFileType: (filename: string) => FileType;
+export declare enum FileType {
+    IMAGE = "img",
+    PDF = "pdf",
+    DOC = "doc",
+    XLS = "xml",
+    PPT = "ppt",
+    AUDIO = "wav",
+    VIDEO = "mov",
+    OTHER = "dat"
+}
+export default interface AttachmentFile {
+    /**
+     * 附件名
+     */
+    name: string;
+    /**
+     * 文件类型
+     */
+    type: FileType;
+    /**
+     * oss保存的文件路径
+     */
+    uri: string;
+}
+export type RemoveConfirm = (file: AttachmentFile) => Promise<boolean>;

package/dist/attachment-files/AttachmentFile.js

@@ -0,0 +1,59 @@
+const imageExtensions = [
+    'jpg', 'jpeg', 'png', 'gif', 'bmp', 'tiff', 'webp',
+    'svg', 'ico', 'heif', 'heic'
+];
+const wordExtensions = [
+    'doc', 'docx', 'dot', 'dotx', 'docm', 'dotm'
+];
+const spreadsheetExtensions = [
+    'xls', 'xlsx', 'xlsm', 'xlsb', 'csv', 'ods', 'xlt', 'xltx', 'xltm'
+];
+const powerPointExtensions = [
+    'ppt', 'pptx', 'pptm', 'pps', 'ppsx', 'ppsm', 'pot', 'potx', 'potm'
+];
+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'
+];
+export var FileType;
+(function (FileType) {
+    FileType["IMAGE"] = "img";
+    FileType["PDF"] = "pdf";
+    FileType["DOC"] = "doc";
+    FileType["XLS"] = "xml";
+    FileType["PPT"] = "ppt";
+    FileType["AUDIO"] = "wav";
+    FileType["VIDEO"] = "mov";
+    FileType["OTHER"] = "dat";
+})(FileType || (FileType = {}));

package/dist/attachment-files/AttachmentFilesField.svelte

@@ -0,0 +1,77 @@
+<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 text: string | null = null;
+
+    let showUpload: boolean = false;
+
+    onMount(() => {
+
+    })
+
+    const showDialog = () => {
+        showUpload = true;
+    }
+    const appendNewFile = (file: UploadFile) => {
+        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) {
+            let pos = files.findIndex(item => item == file);
+            if (pos > -1) {
+                files.splice(pos, 1);
+                files = [...files];
+            }
+        }
+    }
+
+    $: text = '<div>' + files.map(item => (item.name)).join("</div><div>") + '</div>'
+
+</script>
+
+{#if displayMode === DisplayMode.View}
+    <div class="uniface-attachment-display uniface-display-field">
+        {@html text ?? ''}
+    </div>
+{:else }
+    <div class="uniface-attachment-field" {style}>
+        <div class="uniface-common-editor {variant}" tabindex="-1">
+            <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="uniface-icon-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

@@ -0,0 +1,32 @@
+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;
+    text?: string | null;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type AttachmentFilesField = InstanceType<typeof AttachmentFilesField>;
+export default AttachmentFilesField;

package/dist/attachment-files/FileRender.svelte

@@ -0,0 +1,65 @@
+<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} width="64px" height="64px"/>
+        <div class="action-icon" style="top: 15px;">
+            <i class="uniface-icon-download" ></i>
+        </div>
+        {#if !readonly}
+            <div class="action-icon" style="top: 35px;">
+                <i class="uniface-icon-x" 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

@@ -0,0 +1,23 @@
+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/FileUpload.d.ts

@@ -0,0 +1,22 @@
+/**
+ * 上传进程更新
+ */
+export type ProgressUpdate = (uploadBytes: number) => void;
+/**
+ * 当上传完成
+ */
+export type OnUploaded = (url: string, thumbnail?: string) => void;
+/**
+ *
+ */
+export type ErrorHandler = (e: Error) => void;
+/**
+ * 返回可以取消的接口
+ */
+export interface UploadProgress {
+    cancel: () => Promise<boolean>;
+}
+/**
+ * 上传文件的方法
+ */
+export type FileUpload = (file: File, progressUpdate: ProgressUpdate, onUploaded: OnUploaded, errorHandler: ErrorHandler) => UploadProgress;

package/dist/attachment-files/FileUpload.js

@@ -0,0 +1 @@
+export {};

package/dist/attachment-files/FileUploadBar.svelte

@@ -0,0 +1,66 @@
+<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 i18n from "../i18nContext";
+
+    export let file: UploadFile;
+    export let removeFile: (file: any) => void;
+
+    let status: ProgressStatus;
+    let progress: number = 0;
+
+    let cancelLabel: string = i18n.getText('uniface.upload.btnCancel', 'Cancel');
+    let retryLabel: string = i18n.getText('uniface.upload.btnRetry', 'Retry');
+    let removeLabel: string = i18n.getText('uniface.upload.btnRemove', 'Delete');
+
+    const cancelUpload = async () => {
+        if (await file.cancel()) {
+            status = file.status;
+        }
+    }
+
+    const retryUpload = () => {
+        file.restart();
+    }
+
+    const removeUploadFile = () => {
+        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

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