@ticatec/topside-elements 1.0.0

package/dist/form/group_box/group-radio-box/index.d.ts

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

package/dist/form/group_box/group-radio-box/index.js

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

package/dist/form/image_editor/ImageEditor.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+    import type CommonFieldProps from "../common_editor/CommonFieldProps";
+    import type {BeforeRemove} from "../types";
+    import AttachmentEditor from "../attachment_files/AttachmentEditor.svelte";
+    import type {AttachmentLayout} from "../attachment_files/AttachmentFile";
+    import type {FileUpload} from "../attachment_files/FileUpload";
+    import type {RejectReason} from "../attachment_files/UploadTask";
+    import ImagePreview from "./ImagePreview.svelte";
+    import type ImageFile from "./ImageFile";
+
+    interface Props extends CommonFieldProps {
+        /** 已上传的图片列表（可绑定） */
+        files?: ImageFile[];
+        /** 排列方式：icon（缩略图瓦片，自动换行，默认）/ list（每行一张） */
+        layout?: AttachmentLayout;
+        /** 内容区高度；超出后内部滚动，不设则随内容自适应 */
+        height?: number | string;
+        /** 实际执行上传的函数；不传则只展示（不显示上传入口）。onUploaded 的第二个参数可传缩略图地址 */
+        uploadFile?: FileUpload;
+        /** 允许的文件类型（同 input accept） */
+        accept?: string;
+        /** 单个文件大小上限（字节） */
+        maxSize?: number;
+        /** 图片数量上限（含上传中的） */
+        maxFiles?: number;
+        /** 一次是否允许选择 / 拖入多张 */
+        multiple?: boolean;
+        /** 上传入口的文字（空态时作为拖放区提示） */
+        uploadText?: string;
+        /** 没有图片且不能上传时显示的文字 */
+        emptyText?: string;
+        /** 是否可预览：显示预览按钮，点击打开内置的大图预览 */
+        previewable?: boolean;
+        /** 自定义预览；传了则不再打开内置预览 */
+        onPreview?: (file: ImageFile) => void;
+        /** 删除图片前的否决钩子：返回 false 取消删除 */
+        beforeRemove?: BeforeRemove<ImageFile>;
+        /** 图片被删除后通知 */
+        onremove?: (file: ImageFile) => void;
+        /** 自定义下载；不传则通过 `file.uri` 直接下载 */
+        ondownload?: (file: ImageFile) => void;
+        /** 单张图片上传完成并加入 files 后通知 */
+        onFileUploaded?: (file: ImageFile, source: File) => void;
+        /** 文件因类型 / 大小 / 数量限制被拒绝时通知 */
+        onFileRejected?: (file: File, reason: RejectReason) => void;
+        /** 上传失败时通知（任务保留在列表中，可重试或移除） */
+        onUploadError?: (file: File, error: Error) => void;
+        /** files 变化后通知（上传完成或删除） */
+        onchange?: (files: ImageFile[]) => void;
+    }
+
+    let {
+        disabled = false,
+        readonly = false,
+        variant,
+        compact = false,
+        theme,
+        tooltip,
+        error,
+        style = '',
+        files = $bindable<ImageFile[]>([]),
+        layout = 'icon',
+        height,
+        uploadFile,
+        accept = "image/*",
+        maxSize = 1024 * 1024 * 10,
+        maxFiles = 10,
+        multiple = true,
+        uploadText,
+        emptyText,
+        previewable = true,
+        onPreview,
+        beforeRemove,
+        onremove,
+        ondownload,
+        onFileUploaded,
+        onFileRejected,
+        onUploadError,
+        onfocus,
+        onblur,
+        onchange
+    }: Props = $props();
+
+    let editor: {openFileDialog: () => void; focus: () => void} | undefined = $state(undefined);
+    let showPreview = $state(false);
+    let previewSrc = $state('');
+
+    const handlePreview = (file: ImageFile) => {
+        if (onPreview) {
+            onPreview(file);
+        } else {
+            previewSrc = file.uri;
+            showPreview = true;
+        }
+    };
+
+    /**
+     * 打开系统文件选择框（等同于点击上传入口）
+     */
+    export function openFileDialog() {
+        editor?.openFileDialog();
+    }
+
+    export function focus() {
+        editor?.focus();
+    }
+</script>
+
+<AttachmentEditor bind:this={editor} bind:files showThumbnail
+                  {disabled} {readonly} {variant} {compact} {theme} {tooltip} {error} {style}
+                  {layout} {height} {uploadFile} {accept} {maxSize} {maxFiles} {multiple} {uploadText} {emptyText}
+                  onPreview={previewable || onPreview ? handlePreview : undefined}
+                  {beforeRemove} {onremove} {ondownload} {onFileUploaded} {onFileRejected} {onUploadError}
+                  {onfocus} {onblur} {onchange}/>
+
+{#if showPreview}
+    <ImagePreview bind:visible={showPreview} src={previewSrc}/>
+{/if}

package/dist/form/image_editor/ImageEditor.svelte.d.ts

@@ -0,0 +1,52 @@
+import type CommonFieldProps from "../common_editor/CommonFieldProps";
+import type { BeforeRemove } from "../types";
+import type { AttachmentLayout } from "../attachment_files/AttachmentFile";
+import type { FileUpload } from "../attachment_files/FileUpload";
+import type { RejectReason } from "../attachment_files/UploadTask";
+import type ImageFile from "./ImageFile";
+interface Props extends CommonFieldProps {
+    /** 已上传的图片列表（可绑定） */
+    files?: ImageFile[];
+    /** 排列方式：icon（缩略图瓦片，自动换行，默认）/ list（每行一张） */
+    layout?: AttachmentLayout;
+    /** 内容区高度；超出后内部滚动，不设则随内容自适应 */
+    height?: number | string;
+    /** 实际执行上传的函数；不传则只展示（不显示上传入口）。onUploaded 的第二个参数可传缩略图地址 */
+    uploadFile?: FileUpload;
+    /** 允许的文件类型（同 input accept） */
+    accept?: string;
+    /** 单个文件大小上限（字节） */
+    maxSize?: number;
+    /** 图片数量上限（含上传中的） */
+    maxFiles?: number;
+    /** 一次是否允许选择 / 拖入多张 */
+    multiple?: boolean;
+    /** 上传入口的文字（空态时作为拖放区提示） */
+    uploadText?: string;
+    /** 没有图片且不能上传时显示的文字 */
+    emptyText?: string;
+    /** 是否可预览：显示预览按钮，点击打开内置的大图预览 */
+    previewable?: boolean;
+    /** 自定义预览；传了则不再打开内置预览 */
+    onPreview?: (file: ImageFile) => void;
+    /** 删除图片前的否决钩子：返回 false 取消删除 */
+    beforeRemove?: BeforeRemove<ImageFile>;
+    /** 图片被删除后通知 */
+    onremove?: (file: ImageFile) => void;
+    /** 自定义下载；不传则通过 `file.uri` 直接下载 */
+    ondownload?: (file: ImageFile) => void;
+    /** 单张图片上传完成并加入 files 后通知 */
+    onFileUploaded?: (file: ImageFile, source: File) => void;
+    /** 文件因类型 / 大小 / 数量限制被拒绝时通知 */
+    onFileRejected?: (file: File, reason: RejectReason) => void;
+    /** 上传失败时通知（任务保留在列表中，可重试或移除） */
+    onUploadError?: (file: File, error: Error) => void;
+    /** files 变化后通知（上传完成或删除） */
+    onchange?: (files: ImageFile[]) => void;
+}
+declare const ImageEditor: import("svelte").Component<Props, {
+    openFileDialog: () => void;
+    focus: () => void;
+}, "files">;
+type ImageEditor = ReturnType<typeof ImageEditor>;
+export default ImageEditor;

package/dist/form/image_editor/ImageFile.d.ts

@@ -0,0 +1,11 @@
+import type { UploadedFile } from "../attachment_files/AttachmentFile";
+/**
+ * ImageEditor 的列表项：name / uri / size? / thumbnail?
+ * 缩略图缺省时直接用 uri 显示
+ */
+export default interface ImageFile extends UploadedFile {
+    /**
+     * 缩略图地址，可选；缺省时直接用 uri 显示
+     */
+    thumbnail?: string | null;
+}

package/dist/form/image_editor/ImageFile.js

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

package/dist/form/image_editor/ImagePreview.svelte

@@ -0,0 +1,151 @@
+<script lang="ts">
+    import {IconButton} from "../../general/button";
+    import {registerEscapeHandler} from "../../overlay/common/escapeClose";
+
+    let {
+        src = "",
+        visible = $bindable(false)
+    }: {
+        src?: string;
+        visible?: boolean;
+    } = $props();
+
+    let scale = $state(1);
+    let imgWidth = $state(0);
+    let imgHeight = $state(0);
+    let containerWidth = $state(0);
+    let containerHeight = $state(0);
+    let imgPanelWidth = $state(0);
+    let imgPanelHeight = $state(0);
+
+    const updateContainerSize = () => {
+        containerWidth = window.innerWidth;
+        containerHeight = window.innerHeight;
+        updateScale();
+    }
+
+    const updateScale = () => {
+        if (!imgWidth || !imgHeight) return;
+        const widthRatio = containerWidth / imgWidth * 0.9;
+        const heightRatio = containerHeight / imgHeight * 0.9;
+        scale = Math.min(widthRatio, heightRatio, 1);
+        imgPanelWidth = imgWidth * scale;
+        imgPanelHeight = imgHeight * scale;
+    }
+
+    const handleImageLoad = (event: any) => {
+        imgWidth = event.target.naturalWidth;
+        imgHeight = event.target.naturalHeight;
+        scale = 1;
+        updateContainerSize();
+    }
+
+    const zoomIn = () => {
+        scale *= 1.2;
+    }
+
+    const zoomOut = () => {
+        scale /= 1.2;
+    }
+
+    // Escape 关闭（走共享的 escape 栈，嵌套在 Dialog 里时先关预览）
+    $effect(() => {
+        if (visible) {
+            return registerEscapeHandler(() => { visible = false; });
+        }
+    });
+
+    $effect(() => {
+        window.addEventListener("resize", updateContainerSize);
+        updateContainerSize();
+
+        return () => {
+            window.removeEventListener("resize", updateContainerSize);
+        };
+    });
+
+    let imgStyle = $derived(imgPanelHeight > containerHeight ? "" : "display: flex; justify-content: center; align-items: center;");
+</script>
+
+{#if visible}
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div class="topside-image-preview-overlay" onclick={() => visible = false}>
+        <div>
+            <div style="width: 100%; height: 100%; overflow: auto">
+                <div class="image-container"
+                     style="width: {containerWidth}px; height: {containerHeight}px; {imgStyle}">
+                    <button type="button" class="image-content" aria-label="Preview image" onclick={(e: Event) => e.stopPropagation()}>
+                        <img src={src}
+                             alt="Preview"
+                             onload={handleImageLoad}
+                             style="width: {imgPanelWidth}px; height: {imgPanelHeight}px;"
+                        />
+                    </button>
+                </div>
+            </div>
+            <!-- onclick here only stops propagation to the backdrop's close handler;
+                 the real controls are the IconButtons inside. -->
+            <!-- svelte-ignore a11y_click_events_have_key_events -->
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            <div class="toolbar" onclick={(e: Event) => e.stopPropagation()}>
+                <IconButton icon="icon_google_zoom_in" type="default" onclick={zoomIn}></IconButton>
+                <IconButton icon="icon_google_zoom_out" type="default" onclick={zoomOut}></IconButton>
+                <IconButton icon="icon_google_cancel" type="default" onclick={() => visible = false}></IconButton>
+            </div>
+        </div>
+    </div>
+{/if}
+
+<style>
+    .topside-image-preview-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        background: #07123C80;
+        z-index: 1000;
+
+        & > div {
+            width: 100%;
+            height: 100%;
+            display: block;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .toolbar {
+            position: absolute;
+            top: 10px;
+            left: 50%;
+            transform: translateX(-50%);
+            background-color: #07123C80;
+            gap: 10px;
+            padding: 8px 12px;
+            border-radius: 8px;
+            display: none;
+        }
+
+        .image-container {
+            margin: 0 auto;
+            position: relative;
+            text-align: center;
+
+            img {
+                transition: transform 0.3s ease;
+            }
+
+            .image-content {
+                display: inline-flex;
+                padding: 0;
+                border: 0;
+                background: transparent;
+            }
+        }
+
+        &:hover .toolbar {
+            display: flex;
+        }
+    }
+</style>

package/dist/form/image_editor/ImagePreview.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    src?: string;
+    visible?: boolean;
+};
+declare const ImagePreview: import("svelte").Component<$$ComponentProps, {}, "visible">;
+type ImagePreview = ReturnType<typeof ImagePreview>;
+export default ImagePreview;

package/dist/form/image_editor/README.md

@@ -0,0 +1,89 @@
+# ImageEditor
+
+An image upload field built on the same implementation as [AttachmentEditor](../attachment_files/README.md): the whole field is a drop zone, the upload entry is a "+" tile (or a dashed row in `list` layout) at the end of the content, tiles show thumbnails, uploads run inline with a progress ring and a cancel button, and a preview button opens the built-in full-size viewer.
+
+> Renamed in 5.1.0: `ImageFilesField` → `ImageEditor`, import path `@ticatec/topside-elements/ImageFiles` → `@ticatec/topside-elements/ImageEditor` (no compatibility aliases).
+
+## Features
+
+- **Thumbnail tiles** (`thumbnail ?? uri`), wrapping automatically; `layout="list"` shows one row per image with a small thumbnail.
+- **Drag & drop** anywhere in the field; `accept` defaults to `image/*`.
+- **Local preview while uploading** (object URL) under the progress ring; cancel / retry / discard.
+- **Built-in preview** — the eye button opens a full-screen viewer with zoom; replace it with `onPreview`, or turn it off with `previewable={false}`.
+- **Limits and notifications** identical to AttachmentEditor: `maxSize`, `maxFiles`, `multiple`, `onFileRejected`, `onUploadError`, `beforeRemove`, `onremove`, `onchange`.
+- **Readonly / disabled** — preview and download stay, delete and the upload entry disappear.
+
+## Import
+
+```typescript
+import ImageEditor from "@ticatec/topside-elements/ImageEditor";
+import type {ImageFile, FileUpload} from "@ticatec/topside-elements/ImageEditor";
+```
+
+## Basic usage
+
+```svelte
+<script lang="ts">
+  import ImageEditor from "@ticatec/topside-elements/ImageEditor";
+  import type {ImageFile, FileUpload} from "@ticatec/topside-elements/ImageEditor";
+
+  let files = $state<ImageFile[]>([]);
+
+  const uploadFile: FileUpload = (file, progressUpdate, onUploaded, onError) => {
+    const xhr = new XMLHttpRequest();
+    xhr.upload.onprogress = (e) => progressUpdate(e.loaded);
+    xhr.onload = () => {
+      const res = JSON.parse(xhr.responseText);      // {url, thumbnail}
+      xhr.status < 300 ? onUploaded(res.url, res.thumbnail) : onError(new Error(xhr.statusText));
+    };
+    xhr.onerror = () => onError(new Error('Network error'));
+    const body = new FormData();
+    body.append('file', file);
+    xhr.open('POST', '/api/images');
+    xhr.send(body);
+    return {cancel: async () => { xhr.abort(); return true; }};
+  };
+</script>
+
+<ImageEditor bind:files {uploadFile} maxFiles={6} height={140}/>
+```
+
+## Props
+
+Props inherited from `CommonFieldProps` (`variant`, `compact`, `disabled`, `readonly`, `theme`, `tooltip`, `error`, `style`, `onfocus`, `onblur`) are not repeated. Everything below except the first three rows behaves exactly as in AttachmentEditor.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `files` | `ImageFile[]` (bindable) | `[]` | Uploaded images: `{name, uri, thumbnail?, size?}`. |
+| `layout` | `'icon' \| 'list'` | `'icon'` | Thumbnail tiles, or one row per image. |
+| `accept` | `string` | `"image/*"` | Allowed types. |
+| `previewable` | `boolean` | `true` | Show the preview button; opens the built-in viewer unless `onPreview` is set. |
+| `onPreview` | `(file: ImageFile) => void` | — | Custom preview handler (replaces the built-in viewer). |
+| `height` | `number \| string` | — | Content height; scrolls inside. |
+| `uploadFile` | `FileUpload` | — | Upload function. `onUploaded(url, thumbnail?)` — pass the thumbnail URL as the second argument when the server generates one. |
+| `maxSize` / `maxFiles` / `multiple` | | `10 MB` / `10` / `true` | Limits. |
+| `uploadText` / `emptyText` | `string` | i18n | Upload entry text / empty text. |
+| `beforeRemove` | `BeforeRemove<ImageFile>` | — | Veto hook; `false` keeps the image. |
+| `onremove` / `ondownload` / `onFileUploaded` / `onFileRejected` / `onUploadError` / `onchange` | | — | Same as AttachmentEditor. |
+
+## Methods
+
+| Method | Description |
+|--------|-------------|
+| `openFileDialog()` | Opens the system file dialog. |
+| `focus()` | Focuses the first control inside the field. |
+
+## `ImageFile`
+
+```typescript
+interface ImageFile {
+  name: string;
+  uri: string;          // full-size image URL, also used for preview / download
+  thumbnail?: string;   // optional; falls back to uri
+  size?: number;        // bytes, optional
+}
+```
+
+## Related components
+
+- [AttachmentEditor](../attachment_files/README.md) — the general file version of this field.

package/dist/form/image_editor/README_CN.md

@@ -0,0 +1,89 @@
+# ImageEditor
+
+图片上传字段，与 [AttachmentEditor](../attachment_files/README_CN.md) 是同一套实现：整个字段都是拖放区，上传入口是内容末尾的 "+" 瓦片（`list` 方式是底部虚线行），瓦片显示缩略图，上传进度内联显示（进度环 + 取消），预览按钮打开内置的大图查看器。
+
+> 5.1.0 重命名：`ImageFilesField` → `ImageEditor`，引入路径 `@ticatec/topside-elements/ImageFiles` → `@ticatec/topside-elements/ImageEditor`（不保留兼容别名）。
+
+## 特性
+
+- **缩略图瓦片**（`thumbnail ?? uri`），自动换行；`layout="list"` 每行一张、带小缩略图。
+- **拖放上传**：字段内任意位置；`accept` 默认 `image/*`。
+- **上传中显示本地预览**（object URL）叠加进度环；可取消 / 重试 / 移除。
+- **内置预览**：眼睛按钮打开全屏查看器（可缩放）；`onPreview` 可替换为自定义预览，`previewable={false}` 关闭。
+- **限制与通知**与 AttachmentEditor 完全相同：`maxSize`、`maxFiles`、`multiple`、`onFileRejected`、`onUploadError`、`beforeRemove`、`onremove`、`onchange`。
+- **只读 / 禁用**：预览和下载保留，删除和上传入口消失。
+
+## 引入
+
+```typescript
+import ImageEditor from "@ticatec/topside-elements/ImageEditor";
+import type {ImageFile, FileUpload} from "@ticatec/topside-elements/ImageEditor";
+```
+
+## 基本用法
+
+```svelte
+<script lang="ts">
+  import ImageEditor from "@ticatec/topside-elements/ImageEditor";
+  import type {ImageFile, FileUpload} from "@ticatec/topside-elements/ImageEditor";
+
+  let files = $state<ImageFile[]>([]);
+
+  const uploadFile: FileUpload = (file, progressUpdate, onUploaded, onError) => {
+    const xhr = new XMLHttpRequest();
+    xhr.upload.onprogress = (e) => progressUpdate(e.loaded);
+    xhr.onload = () => {
+      const res = JSON.parse(xhr.responseText);      // {url, thumbnail}
+      xhr.status < 300 ? onUploaded(res.url, res.thumbnail) : onError(new Error(xhr.statusText));
+    };
+    xhr.onerror = () => onError(new Error('网络错误'));
+    const body = new FormData();
+    body.append('file', file);
+    xhr.open('POST', '/api/images');
+    xhr.send(body);
+    return {cancel: async () => { xhr.abort(); return true; }};
+  };
+</script>
+
+<ImageEditor bind:files {uploadFile} maxFiles={6} height={140}/>
+```
+
+## 属性（Props）
+
+继承自 `CommonFieldProps` 的属性（`variant`、`compact`、`disabled`、`readonly`、`theme`、`tooltip`、`error`、`style`、`onfocus`、`onblur`）不再重复。除前三行外，其余行为与 AttachmentEditor 完全一致。
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `files` | `ImageFile[]`（可绑定） | `[]` | 已上传的图片：`{name, uri, thumbnail?, size?}`。 |
+| `layout` | `'icon' \| 'list'` | `'icon'` | 缩略图瓦片，或每行一张。 |
+| `accept` | `string` | `"image/*"` | 允许的类型。 |
+| `previewable` | `boolean` | `true` | 显示预览按钮；未设置 `onPreview` 时打开内置查看器。 |
+| `onPreview` | `(file: ImageFile) => void` | — | 自定义预览（替代内置查看器）。 |
+| `height` | `number \| string` | — | 内容区高度，超出内部滚动。 |
+| `uploadFile` | `FileUpload` | — | 上传函数。`onUploaded(url, thumbnail?)`：服务端生成了缩略图时通过第二个参数传回。 |
+| `maxSize` / `maxFiles` / `multiple` | | `10 MB` / `10` / `true` | 限制。 |
+| `uploadText` / `emptyText` | `string` | i18n | 上传入口文字 / 空态文字。 |
+| `beforeRemove` | `BeforeRemove<ImageFile>` | — | 否决钩子：返回 `false` 则不删除。 |
+| `onremove` / `ondownload` / `onFileUploaded` / `onFileRejected` / `onUploadError` / `onchange` | | — | 同 AttachmentEditor。 |
+
+## 方法
+
+| 方法 | 说明 |
+|------|------|
+| `openFileDialog()` | 打开系统文件框。 |
+| `focus()` | 把焦点移到字段内第一个控件。 |
+
+## `ImageFile`
+
+```typescript
+interface ImageFile {
+  name: string;
+  uri: string;          // 原图地址，也用于预览 / 下载
+  thumbnail?: string;   // 可选；缺省用 uri
+  size?: number;        // 字节，可选
+}
+```
+
+## 相关组件
+
+- [AttachmentEditor](../attachment_files/README_CN.md)：通用文件版本。

package/dist/form/image_editor/index.d.ts

@@ -0,0 +1,11 @@
+import ImageEditor from "./ImageEditor.svelte";
+import ImagePreview from "./ImagePreview.svelte";
+import type ImageFile from "./ImageFile";
+import type { AttachmentLayout, UploadedFile } from "../attachment_files/AttachmentFile";
+import type { RejectReason, UploadStatus, UploadTask } from "../attachment_files/UploadTask";
+import type { OnError, FileUpload, OnUploaded, ProgressUpdate, UploadProgress } from "../attachment_files/FileUpload";
+export default ImageEditor;
+export { ImagePreview };
+export type { ImageFile, UploadedFile, AttachmentLayout, RejectReason, UploadStatus, UploadTask };
+export type { BeforeRemove } from "../types";
+export type { OnError, FileUpload, OnUploaded, ProgressUpdate, UploadProgress };

package/dist/form/image_editor/index.js

@@ -0,0 +1,4 @@
+import ImageEditor from "./ImageEditor.svelte";
+import ImagePreview from "./ImagePreview.svelte";
+export default ImageEditor;
+export { ImagePreview };