@ticatec/uniface-element 5.0.4 → 5.1.0

package/dist/form/attachment_files/AttachmentEditor.svelte

@@ -1,22 +1,56 @@
-<script lang="ts">
+<script lang="ts" generics="T extends UploadedFile = AttachmentFile">
+    import {onDestroy} from "svelte";
+    import type {BeforeRemove} from "../types";
+    import type CommonFieldProps from "../common_editor/CommonFieldProps";
     import FormEditor from "../FormEditor.svelte";
-    import FileRender from "./FileRender.svelte";
-    import FileUploadPanel from "./FileUploadPanel.svelte";
+    import i18nRes from "../../i18nRes";
+    import utils from "../../overlay/common/utils";
     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";
+    import {FileType, getFileType, type AttachmentLayout, type UploadedFile} from "./AttachmentFile";
+    import type {FileUpload, UploadProgress} from "./FileUpload";
+    import type {RejectReason, UploadTask} from "./UploadTask";
+    import AttachmentListItem from "./AttachmentListItem.svelte";
+    import AttachmentTile from "./AttachmentTile.svelte";
 
     interface Props extends CommonFieldProps {
-        files?: AttachmentFile[];
+        /** 已上传的附件列表（可绑定） */
+        files?: T[];
+        /** 排列方式：list（每行一个）/ icon（图标瓦片，自动换行） */
+        layout?: AttachmentLayout;
+        /** 内容区高度；超出后内部滚动，不设则随内容自适应 */
+        height?: number | string;
+        /** 实际执行上传的函数；不传则组件只读展示（不显示上传入口） */
         uploadFile?: FileUpload;
-        onUpload?: () => void;
-        onFileUploaded?: (file: UploadFile) => void;
+        /** 允许的文件类型（同 input accept） */
         accept?: string;
+        /** 单个文件大小上限（字节） */
         maxSize?: number;
+        /** 文件数量上限（含上传中的） */
         maxFiles?: number;
-        removeFileConfirm?: (file: AttachmentFile) => Promise<boolean>;
+        /** 一次是否允许选择 / 拖入多个文件 */
+        multiple?: boolean;
+        /** 上传入口的文字（空态时作为拖放区提示） */
+        uploadText?: string;
+        /** 没有文件且不能上传时显示的文字 */
+        emptyText?: string;
+        /** 图片文件显示缩略图（已上传的用 thumbnail ?? uri，上传中的用本地预览）；ImageEditor 默认开启 */
+        showThumbnail?: boolean;
+        /** 预览：有则每个文件显示预览按钮 */
+        onPreview?: (file: T) => void;
+        /** 删除附件前的否决钩子：返回 false 取消删除 */
+        beforeRemove?: BeforeRemove<T>;
+        /** 附件被删除后通知 */
+        onremove?: (file: T) => void;
+        /** 自定义下载；不传则通过 `file.uri` 直接下载 */
+        ondownload?: (file: T) => void;
+        /** 单个文件上传完成并加入 files 后通知 */
+        onFileUploaded?: (file: T, source: File) => void;
+        /** 文件因类型 / 大小 / 数量限制被拒绝时通知 */
+        onFileRejected?: (file: File, reason: RejectReason) => void;
+        /** 上传失败时通知（任务保留在列表中，可重试或移除） */
+        onUploadError?: (file: File, error: Error) => void;
+        /** files 变化后通知（上传完成或删除） */
+        onchange?: (files: T[]) => void;
     }
 
     let {
@@ -28,152 +62,433 @@
         tooltip,
         error,
         style = '',
-        files = $bindable<AttachmentFile[]>([]),
+        files = $bindable<T[]>([]),
+        layout = 'list',
+        height,
         uploadFile,
-        onUpload,
-        onFileUploaded,
         accept = "*/*",
         maxSize = 1024 * 1024 * 10,
         maxFiles = 10,
-        removeFileConfirm,
+        multiple = true,
+        uploadText = i18nRes.upload.dropHint(),
+        emptyText = i18nRes.upload.emptyText(),
+        showThumbnail = false,
+        onPreview,
+        beforeRemove,
+        onremove,
+        ondownload,
+        onFileUploaded,
+        onFileRejected,
+        onUploadError,
         onfocus,
         onblur,
         onchange
     }: Props = $props();
 
     let containerElement: HTMLDivElement | undefined = $state(undefined);
+    let fileInput: HTMLInputElement | undefined = $state(undefined);
     let hasFocus = $state(false);
-    let isUserChange = $state(false);
-    let oldFiles = $state(files);
-    let showUpload = $state(false);
 
-    const handleFocus = (event: FocusEvent) => {
-        if (containerElement?.contains(event.relatedTarget as Node | null)) return;
-        if (!hasFocus) {
-            hasFocus = true;
-            onfocus?.(event);
+    /** 上传中 / 失败的任务 */
+    let tasks = $state<UploadTask[]>([]);
+    /** 任务 id → 上传句柄（非响应式） */
+    const handles = new Map<number, UploadProgress>();
+    let seq = 0;
+
+    let dragDepth = 0;
+    let dragActive = $state(false);
+
+    const editable = $derived(!disabled && !readonly);
+    const canUpload = $derived(editable && uploadFile != null);
+    const totalCount = $derived(files.length + tasks.length);
+    const canAddMore = $derived(canUpload && totalCount < maxFiles);
+    const isEmpty = $derived(files.length === 0 && tasks.length === 0);
+    const heightStyle = $derived(height == null || height === '' ? '' : `height: ${typeof height === 'number' ? `${height}px` : height};`);
+
+    const findTask = (id: number): UploadTask | undefined => tasks.find(item => item.id === id);
+
+    const isImage = (name: string) => getFileType(name) === FileType.IMAGE;
+
+    /** 列表项要显示的缩略图：优先 thumbnail；开启 showThumbnail 时图片直接用 uri */
+    const thumbnailOf = (file: T): string | undefined =>
+        file.thumbnail ?? (showThumbnail && isImage(file.name) && file.uri ? file.uri : undefined);
+
+    const createPreview = (source: File): string | undefined => {
+        if (!showThumbnail || !source.type.startsWith('image/') || typeof URL.createObjectURL !== 'function') return undefined;
+        return URL.createObjectURL(source);
+    };
+
+    const revokePreview = (task?: UploadTask) => {
+        if (task?.thumbnail && typeof URL.revokeObjectURL === 'function') URL.revokeObjectURL(task.thumbnail);
+    };
+
+    onDestroy(() => tasks.forEach(revokePreview));
+
+    const notifyChange = () => {
+        onchange?.(files);
+    };
+
+    /**
+     * 启动（或重新启动）一个上传任务
+     */
+    const startUpload = (source: File, existing?: UploadTask) => {
+        if (uploadFile == null) return;
+        const id = existing?.id ?? ++seq;
+        if (existing) {
+            existing.status = 'uploading';
+            existing.progress = 0;
+            existing.error = undefined;
+        } else {
+            tasks.push({
+                id,
+                file: source,
+                name: source.name,
+                type: getFileType(source.name),
+                size: source.size,
+                progress: 0,
+                status: 'uploading',
+                thumbnail: createPreview(source)
+            });
         }
+        const handle = uploadFile(source, (bytes: number) => {
+            const task = findTask(id);
+            if (task) {
+                task.progress = source.size > 0 ? Math.max(0, Math.min(100, Math.round(bytes * 100 / source.size))) : 100;
+            }
+        }, (url: string, thumbnail?: string) => {
+            const task = findTask(id);
+            if (task == null) return;
+            revokePreview(task);
+            handles.delete(id);
+            tasks = tasks.filter(item => item.id !== id);
+            const uploaded = {
+                name: source.name, uri: url ?? '', type: getFileType(source.name), size: source.size, thumbnail: thumbnail ?? undefined
+            } as unknown as T;
+            files = [...files, uploaded];
+            onFileUploaded?.(uploaded, source);
+            notifyChange();
+        }, (err: Error) => {
+            const task = findTask(id);
+            if (task) {
+                task.status = 'error';
+                task.error = err?.message;
+            }
+            handles.delete(id);
+            onUploadError?.(source, err);
+        });
+        // 上传函数可能同步完成，此时任务已经不在列表里，不再保留句柄
+        if (findTask(id) != null) handles.set(id, handle);
     };
 
-    const handleBlur = (event: FocusEvent) => {
-        if (containerElement?.contains(event.relatedTarget as Node | null)) return;
-        if (hasFocus && !showUpload) {
-            hasFocus = false;
-            onblur?.(event);
+    /**
+     * 过滤并加入一批待上传文件
+     */
+    const addFiles = (incoming: File[]) => {
+        if (!canAddMore || incoming.length === 0) return;
+        const accepted = utils.filterFiles(incoming, accept);
+        incoming.filter(item => !accepted.includes(item)).forEach(item => onFileRejected?.(item, 'accept'));
+        const candidates = multiple && maxFiles > 1 ? accepted : accepted.slice(0, 1);
+        let remaining = maxFiles - totalCount;
+        for (const item of candidates) {
+            if (item.size > maxSize) {
+                onFileRejected?.(item, 'size');
+            } else if (remaining <= 0) {
+                onFileRejected?.(item, 'count');
+            } else {
+                remaining--;
+                startUpload(item);
+            }
         }
     };
 
-    // 上传触发：用户提供了 onUpload 则交给自定义上传组件；否则使用内置 FileUploadPanel 作为默认处理器
-    const triggerUpload = () => {
-        if (onUpload) {
-            onUpload();
-        } else if (uploadFile) {
-            hasFocus = true;
-            showUpload = true;
+    const cancelTask = async (task: UploadTask) => {
+        const handle = handles.get(task.id);
+        if (task.status === 'uploading' && handle != null) {
+            const cancelled = await handle.cancel();
+            if (!cancelled) return;
         }
+        revokePreview(task);
+        handles.delete(task.id);
+        tasks = tasks.filter(item => item.id !== task.id);
     };
 
-    // 默认处理器：上传完成后追加到 files
-    const handleFileUploaded = (file: UploadFile) => {
-        isUserChange = true;
-        files = [...files, {
-            name: file.file.name,
-            uri: file.url ?? '',
-            type: getFileType(file.file.name)
-        }];
-        onFileUploaded?.(file);
+    const retryTask = (task: UploadTask) => {
+        startUpload(task.file, task);
     };
 
-    const removeFile = async (file: AttachmentFile) => {
-        const confirmed = removeFileConfirm == null ? true : await removeFileConfirm(file);
+    const removeFile = async (file: T) => {
+        if (!editable) return;
+        const confirmed = beforeRemove == null ? true : (await beforeRemove(file)) !== false;
         if (confirmed) {
-            isUserChange = true;
             files = files.filter(item => item !== file);
+            onremove?.(file);
+            notifyChange();
         }
     };
 
-    $effect(() => {
-        if (oldFiles !== files) {
-            if (isUserChange) {
-                onchange?.(files);
-                isUserChange = false;
-            }
-            oldFiles = files;
+    const handleFilePick = (event: Event) => {
+        const input = event.currentTarget as HTMLInputElement;
+        addFiles(Array.from(input.files ?? []));
+        input.value = '';
+    };
+
+    const hasDraggedFiles = (event: DragEvent): boolean => Array.from(event.dataTransfer?.types ?? []).includes('Files');
+
+    const handleDragEnter = (event: DragEvent) => {
+        if (!canAddMore || !hasDraggedFiles(event)) return;
+        event.preventDefault();
+        dragDepth++;
+        dragActive = true;
+    };
+
+    const handleDragOver = (event: DragEvent) => {
+        if (!canAddMore || !hasDraggedFiles(event)) return;
+        event.preventDefault();
+        if (event.dataTransfer) event.dataTransfer.dropEffect = 'copy';
+    };
+
+    const handleDragLeave = () => {
+        if (!dragActive) return;
+        dragDepth = Math.max(0, dragDepth - 1);
+        if (dragDepth === 0) dragActive = false;
+    };
+
+    const handleDrop = (event: DragEvent) => {
+        if (!dragActive && !hasDraggedFiles(event)) return;
+        event.preventDefault();
+        dragDepth = 0;
+        dragActive = false;
+        if (!canAddMore) return;
+        addFiles(Array.from(event.dataTransfer?.files ?? []));
+    };
+
+    const handleFocus = (event: FocusEvent) => {
+        if (containerElement?.contains(event.relatedTarget as Node | null)) return;
+        if (!hasFocus) {
+            hasFocus = true;
+            onfocus?.(event);
         }
-    });
+    };
+
+    const handleBlur = (event: FocusEvent) => {
+        if (containerElement?.contains(event.relatedTarget as Node | null)) return;
+        if (hasFocus) {
+            hasFocus = false;
+            onblur?.(event);
+        }
+    };
+
+    /**
+     * 打开系统文件选择框（等同于点击上传入口）
+     */
+    export function openFileDialog() {
+        if (canAddMore) fileInput?.click();
+    }
 
     export function focus() {
         containerElement
-            ?.querySelector<HTMLElement>('button, a[href], input:not([tabindex="-1"])')
+            ?.querySelector<HTMLElement>('button, a[href]')
             ?.focus();
     }
-
-    const canUpload = $derived(!disabled && !readonly && (onUpload != null || uploadFile != null));
 </script>
 
 <FormEditor {variant} {theme} {tooltip} {error} {style} {readonly} {disabled} {compact}>
+    <!-- 整个内容区都是拖放区；真正的交互控件（按钮 / 链接 / input）在内部各自承担语义 -->
     <div
         bind:this={containerElement}
-        class="uniface-attachment-editor"
+        class="uniface-attachment-editor {layout}"
+        class:compact
+        class:drag-active={dragActive}
+        style={heightStyle}
+        role="group"
+        aria-label={uploadText}
+        aria-disabled={disabled}
         onfocusin={handleFocus}
         onfocusout={handleBlur}
+        ondragenter={handleDragEnter}
+        ondragover={handleDragOver}
+        ondragleave={handleDragLeave}
+        ondrop={handleDrop}
     >
-        <div class="files-field">
-            {#each files as file (file)}
-                <FileRender {file} {readonly} onRemove={removeFile}/>
-            {/each}
-            {#if canUpload}
-                <button type="button" class="editor-action-icon" aria-label="Upload file" onclick={triggerUpload}>
-                    <i class="icon_google_file_upload" aria-hidden="true"></i>
+        {#if canUpload}
+            <input bind:this={fileInput} class="file-input" type="file" {accept} multiple={multiple && maxFiles > 1}
+                   tabindex="-1" aria-hidden="true" onchange={handleFilePick}/>
+        {/if}
+        {#if isEmpty}
+            {#if canAddMore}
+                <button type="button" class="drop-zone" onclick={openFileDialog}>
+                    <i class="icon_google_cloud_upload" aria-hidden="true"></i>
+                    <span>{uploadText}</span>
                 </button>
+            {:else}
+                <div class="empty-text">{emptyText}</div>
             {/if}
-        </div>
+        {:else}
+            <div class="items" role="list">
+                {#each files as file (file)}
+                    {#if layout === 'icon'}
+                        <AttachmentTile {file} thumbnail={thumbnailOf(file)} readonly={!editable}
+                                        onPreview={onPreview ? () => onPreview(file) : undefined}
+                                        ondownload={ondownload ? () => ondownload(file) : undefined}
+                                        onremove={() => removeFile(file)}/>
+                    {:else}
+                        <AttachmentListItem {file} thumbnail={thumbnailOf(file)} readonly={!editable}
+                                            onPreview={onPreview ? () => onPreview(file) : undefined}
+                                            ondownload={ondownload ? () => ondownload(file) : undefined}
+                                            onremove={() => removeFile(file)}/>
+                    {/if}
+                {/each}
+                {#each tasks as task (task.id)}
+                    {#if layout === 'icon'}
+                        <AttachmentTile {task} thumbnail={task.thumbnail} oncancel={cancelTask} onretry={retryTask}/>
+                    {:else}
+                        <AttachmentListItem {task} thumbnail={task.thumbnail} oncancel={cancelTask} onretry={retryTask}/>
+                    {/if}
+                {/each}
+                {#if canAddMore}
+                    <button type="button" class="add-item" onclick={openFileDialog} title={uploadText} aria-label={uploadText}>
+                        <i class="icon_google_add" aria-hidden="true"></i>
+                        {#if layout === 'list'}
+                            <span>{uploadText}</span>
+                        {/if}
+                    </button>
+                {/if}
+            </div>
+        {/if}
     </div>
 </FormEditor>
 
-{#if showUpload}
-    <FileUploadPanel
-        bind:visible={showUpload}
-        {accept}
-        {maxSize}
-        {maxFiles}
-        {uploadFile}
-        {theme}
-        onFileUploaded={handleFileUploaded}
-    />
-{/if}
-
 <style>
     .uniface-attachment-editor {
+        position: relative;
         display: flex;
+        flex-direction: column;
         width: 100%;
+        min-height: 64px;
+        box-sizing: border-box;
+        padding: 6px var(--uniface-editor-margin, 8px);
+        overflow-y: auto;
         outline: none;
+        border: 1px dashed transparent;
+        border-radius: inherit;
+        transition: border-color 0.15s, background-color 0.15s;
     }
 
-    .files-field {
+    .uniface-attachment-editor.compact {
+        --uniface-attachment-item-height: 26px;
+        --uniface-attachment-tile-size: 64px;
+        min-height: 40px;
+        padding: 4px var(--uniface-editor-margin, 8px);
+    }
+
+    .uniface-attachment-editor.drag-active {
+        border-color: var(--uniface-editor-color-active-border, #3b82f6);
+        background-color: var(--uniface-attachment-drag-bg, rgba(59, 130, 246, 0.06));
+    }
+
+    .file-input {
+        position: absolute;
+        width: 0;
+        height: 0;
+        opacity: 0;
+        overflow: hidden;
+        pointer-events: none;
+    }
+
+    .items {
         display: flex;
         flex-direction: column;
-        gap: 4px;
+        gap: 2px;
+        flex: 0 0 auto;
+    }
+
+    .icon .items {
+        flex-direction: row;
+        flex-wrap: wrap;
+        align-items: flex-start;
+        gap: 12px;
+    }
+
+    /* 列表末尾的上传入口 */
+    .add-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
         width: 100%;
-        min-width: 0;
-        height: 96px;
-        overflow-y: auto;
+        height: var(--uniface-attachment-item-height, 32px);
+        padding: 0 8px;
         box-sizing: border-box;
+        border: 1px dashed var(--uniface-attachment-add-border-color, var(--uniface-color-border-primary, #d1d5db));
+        border-radius: var(--uniface-radius, 4px);
+        background: transparent;
+        color: var(--uniface-attachment-add-color, #6b7280);
+        font: inherit;
+        cursor: pointer;
+        transition: border-color 0.15s, color 0.15s;
+    }
+
+    .add-item i {
+        font-size: 18px;
     }
 
-    .editor-action-icon {
+    .add-item:hover,
+    .add-item:focus-visible {
+        border-color: var(--uniface-editor-color-active-border, #3b82f6);
+        color: var(--uniface-editor-color-active-border, #3b82f6);
+    }
+
+    /* icon 方式：与瓦片同尺寸的 "+" */
+    .icon .add-item {
         flex: 0 0 auto;
-        cursor: pointer;
-        padding: 4px;
-        border-radius: 4px;
+        width: var(--uniface-attachment-tile-size, 88px);
+        height: var(--uniface-attachment-tile-size, 88px);
+        justify-content: center;
+        padding: 0;
+        border-radius: var(--uniface-radius-md, 6px);
+    }
+
+    .icon .add-item i {
+        font-size: 28px;
+    }
+
+    /* 空态：占满整个内容区的拖放区 */
+    .drop-zone {
+        flex: 1 1 auto;
         display: flex;
+        flex-direction: column;
         align-items: center;
-        border: 0;
+        justify-content: center;
+        gap: 4px;
+        width: 100%;
+        min-height: 52px;
+        padding: 8px;
+        box-sizing: border-box;
+        border: 1px dashed var(--uniface-attachment-add-border-color, var(--uniface-color-border-primary, #d1d5db));
+        border-radius: var(--uniface-radius, 4px);
         background: transparent;
-        color: inherit;
+        color: var(--uniface-attachment-add-color, #6b7280);
+        font: inherit;
+        cursor: pointer;
+        transition: border-color 0.15s, color 0.15s;
     }
 
-    .editor-action-icon:hover {
-        background-color: rgba(0, 0, 0, 0.05);
+    .drop-zone i {
+        font-size: 28px;
+    }
+
+    .drop-zone:hover,
+    .drop-zone:focus-visible,
+    .drag-active .drop-zone {
+        border-color: var(--uniface-editor-color-active-border, #3b82f6);
+        color: var(--uniface-editor-color-active-border, #3b82f6);
+    }
+
+    .empty-text {
+        flex: 1 1 auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 52px;
+        color: var(--uniface-editor-color-placeholder, #9ca3af);
     }
 </style>

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

@@ -1,19 +1,75 @@
+import type { BeforeRemove } from "../types";
+import type CommonFieldProps from "../common_editor/CommonFieldProps";
 import type AttachmentFile from "./AttachmentFile";
+import { type AttachmentLayout, type UploadedFile } 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>;
+import type { RejectReason } from "./UploadTask";
+declare function $$render<T extends UploadedFile = AttachmentFile>(): {
+    props: CommonFieldProps & {
+        /** 已上传的附件列表（可绑定） */
+        files?: T[];
+        /** 排列方式：list（每行一个）/ icon（图标瓦片，自动换行） */
+        layout?: AttachmentLayout;
+        /** 内容区高度；超出后内部滚动，不设则随内容自适应 */
+        height?: number | string;
+        /** 实际执行上传的函数；不传则组件只读展示（不显示上传入口） */
+        uploadFile?: FileUpload;
+        /** 允许的文件类型（同 input accept） */
+        accept?: string;
+        /** 单个文件大小上限（字节） */
+        maxSize?: number;
+        /** 文件数量上限（含上传中的） */
+        maxFiles?: number;
+        /** 一次是否允许选择 / 拖入多个文件 */
+        multiple?: boolean;
+        /** 上传入口的文字（空态时作为拖放区提示） */
+        uploadText?: string;
+        /** 没有文件且不能上传时显示的文字 */
+        emptyText?: string;
+        /** 图片文件显示缩略图（已上传的用 thumbnail ?? uri，上传中的用本地预览）；ImageEditor 默认开启 */
+        showThumbnail?: boolean;
+        /** 预览：有则每个文件显示预览按钮 */
+        onPreview?: (file: T) => void;
+        /** 删除附件前的否决钩子：返回 false 取消删除 */
+        beforeRemove?: BeforeRemove<T>;
+        /** 附件被删除后通知 */
+        onremove?: (file: T) => void;
+        /** 自定义下载；不传则通过 `file.uri` 直接下载 */
+        ondownload?: (file: T) => void;
+        /** 单个文件上传完成并加入 files 后通知 */
+        onFileUploaded?: (file: T, source: File) => void;
+        /** 文件因类型 / 大小 / 数量限制被拒绝时通知 */
+        onFileRejected?: (file: File, reason: RejectReason) => void;
+        /** 上传失败时通知（任务保留在列表中，可重试或移除） */
+        onUploadError?: (file: File, error: Error) => void;
+        /** files 变化后通知（上传完成或删除） */
+        onchange?: (files: T[]) => void;
+    };
+    exports: {
+        openFileDialog: () => void;
+        focus: () => void;
+    };
+    bindings: "files";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends UploadedFile = AttachmentFile> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "files";
+    exports(): {
+        openFileDialog: () => void;
+        focus: () => void;
+    };
+}
+interface $$IsomorphicComponent {
+    new <T extends UploadedFile = AttachmentFile>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends UploadedFile = AttachmentFile>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
-declare const AttachmentEditor: import("svelte").Component<Props, {
-    focus: () => void;
-}, "files">;
-type AttachmentEditor = ReturnType<typeof AttachmentEditor>;
+declare const AttachmentEditor: $$IsomorphicComponent;
+type AttachmentEditor<T extends UploadedFile = AttachmentFile> = InstanceType<typeof AttachmentEditor<T>>;
 export default AttachmentEditor;