@ticatec/topside-elements 1.0.0

package/dist/form/attachment_files/README.md

@@ -0,0 +1,111 @@
+# AttachmentEditor
+
+A form field for uploading and managing attachments (documents, spreadsheets, PDFs, media, anything). The whole field is a drop zone; the upload entry is a placeholder that sits at the end of the content (a dashed row in `list` layout, a "+" tile in `icon` layout) and expands to fill the field while it is empty. Uploads run inline with a progress indicator and a cancel button; failed uploads can be retried or discarded.
+
+> Rewritten in 5.1.0. Names follow the [API Naming Guide](../../../docs/NAMING.md); the old `onUpload` prop and the modal `FileUploadPanel` are gone (no compatibility aliases).
+
+## Features
+
+- **Drag & drop** anywhere inside the field, or click the placeholder to open the file dialog.
+- **Two layouts** — `list` (one row per file, download + delete at the end of the row) and `icon` (tiles that wrap automatically).
+- **Fixed height** via `height`; the content scrolls inside.
+- **Inline upload progress** — list rows show a bar, percentage and a cancel button; tiles overlay a progress ring with the cancel button in the middle.
+- **Retry / discard** failed uploads.
+- **Limits** — `accept`, `maxSize`, `maxFiles`, `multiple`; rejected files are reported through `onFileRejected`.
+- **Veto hook** `beforeRemove` and notifications `onremove`, `onchange`, `onFileUploaded`, `onUploadError`.
+- **Readonly / disabled** — download stays available, delete and the upload entry disappear, drops are ignored.
+- Inherits the shared field props (`variant`, `compact`, `theme`, `tooltip`, `error`, `style`, `onfocus`, `onblur`).
+
+## Import
+
+```typescript
+import AttachmentEditor from "@ticatec/topside-elements/AttachmentEditor";
+import type {AttachmentFile, AttachmentLayout, FileUpload, RejectReason} from "@ticatec/topside-elements/AttachmentEditor";
+```
+
+## Basic usage
+
+```svelte
+<script lang="ts">
+  import AttachmentEditor from "@ticatec/topside-elements/AttachmentEditor";
+  import type {AttachmentFile, FileUpload} from "@ticatec/topside-elements/AttachmentEditor";
+
+  let files = $state<AttachmentFile[]>([]);
+
+  const uploadFile: FileUpload = (file, progressUpdate, onUploaded, onError) => {
+    const xhr = new XMLHttpRequest();
+    xhr.upload.onprogress = (e) => progressUpdate(e.loaded);
+    xhr.onload = () => xhr.status < 300 ? onUploaded(JSON.parse(xhr.responseText).url) : onError(new Error(xhr.statusText));
+    xhr.onerror = () => onError(new Error('Network error'));
+    const body = new FormData();
+    body.append('file', file);
+    xhr.open('POST', '/api/upload');
+    xhr.send(body);
+    return {cancel: async () => { xhr.abort(); return true; }};
+  };
+</script>
+
+<AttachmentEditor bind:files {uploadFile} layout="icon" height={160} maxFiles={5}
+                  onchange={(list) => console.log('files', list)}/>
+```
+
+## Props
+
+Props inherited from `CommonFieldProps` (`variant`, `compact`, `disabled`, `readonly`, `theme`, `tooltip`, `error`, `style`, `onfocus`, `onblur`) are not repeated.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `files` | `AttachmentFile[]` (bindable) | `[]` | Uploaded files. Each has `name`, `type`, `uri` and optional `size` / `thumbnail`. |
+| `layout` | `'list' \| 'icon'` | `'list'` | `list`: one row per file; `icon`: tiles that wrap. |
+| `height` | `number \| string` | — | Height of the content area (number = px). Content scrolls inside; omit for auto height. |
+| `uploadFile` | `FileUpload` | — | Upload function (see below). Without it the field only displays files and shows no upload entry. |
+| `accept` | `string` | `"*/*"` | Allowed types, same syntax as `<input accept>`. |
+| `maxSize` | `number` | `10 MB` | Per-file size limit in bytes. |
+| `maxFiles` | `number` | `10` | Maximum number of files, uploads in progress included. The upload entry disappears when reached. |
+| `multiple` | `boolean` | `true` | Allow picking / dropping several files at once. |
+| `uploadText` | `string` | i18n `upload.dropHint` | Text of the upload entry; also the empty-state hint. |
+| `emptyText` | `string` | i18n `upload.emptyText` | Shown when there are no files and uploading is not possible. |
+| `showThumbnail` | `boolean` | `false` | Show image files as thumbnails (`thumbnail ?? uri`) and a local preview while an image is uploading. A file that carries `thumbnail` is always shown as one. |
+| `onPreview` | `(file: AttachmentFile) => void` | — | When set, every file gets a preview button. |
+| `beforeRemove` | `BeforeRemove<AttachmentFile>` | — | Veto hook; return `false` (or a promise of it) to keep the file. |
+| `onremove` | `(file: AttachmentFile) => void` | — | A file was removed. |
+| `ondownload` | `(file: AttachmentFile) => void` | — | Custom download. Without it the download icon is a plain link to `file.uri`. |
+| `onFileUploaded` | `(file: AttachmentFile, source: File) => void` | — | One upload finished and was appended to `files`. |
+| `onFileRejected` | `(file: File, reason: 'accept' \| 'size' \| 'count') => void` | — | A picked / dropped file was refused. |
+| `onUploadError` | `(file: File, error: Error) => void` | — | An upload failed; the task stays in the list with retry / remove. |
+| `onchange` | `(files: AttachmentFile[]) => void` | — | `files` changed (upload completed or file removed). |
+
+## Methods
+
+| Method | Description |
+|--------|-------------|
+| `openFileDialog()` | Opens the system file dialog (same as clicking the upload entry). No-op when uploading is not possible. |
+| `focus()` | Moves focus to the first control inside the field. |
+
+## `FileUpload`
+
+```typescript
+type FileUpload = (
+  file: File,
+  progressUpdate: (uploadedBytes: number) => void,
+  onUploaded: (url: string, thumbnail?: string) => void,
+  onError: (error: Error) => void
+) => {cancel: () => Promise<boolean>};
+```
+
+Call `progressUpdate` with the number of bytes sent so far (the component converts it to a percentage), `onUploaded` with the stored URL when done, or `onError` on failure. `cancel()` resolving `false` keeps the task in the list.
+
+## Behavior notes
+
+- Files that fail `accept` / `maxSize` / the remaining `maxFiles` quota never start uploading; each is reported once through `onFileRejected`.
+- An upload that succeeds appends `{name, type, uri, size, thumbnail}` to `files` (type derived from the extension, `thumbnail` from the uploader's second `onUploaded` argument), then fires `onFileUploaded` and `onchange`.
+- `readonly` and `disabled` both hide delete and the upload entry and ignore drops; download links remain in `readonly`.
+- The drag highlight only reacts to drags that carry files.
+
+## Styling
+
+Component-level CSS variables (all have fallbacks): `--topside-attachment-item-height`, `--topside-attachment-tile-size`, `--topside-attachment-icon-color`, `--topside-attachment-add-border-color`, `--topside-attachment-add-color`, `--topside-attachment-drag-bg`, `--topside-attachment-error-color`, `--topside-attachment-overlay-bg`. `compact` switches to 26 px rows / 64 px tiles.
+
+## Related components
+
+- [ImageEditor](../image_editor/README.md) — same implementation for images: thumbnail tiles and a built-in preview.

package/dist/form/attachment_files/README_CN.md

@@ -0,0 +1,111 @@
+# AttachmentEditor
+
+附件上传字段，适用于文档、表格、PDF、音视频等任意文件。整个字段都是拖放区；上传入口是内容末尾的占位块（`list` 方式是底部的虚线行，`icon` 方式是 "+" 瓦片），没有文件时占位块撑满整个字段。上传进度内联显示并可取消；失败的上传可以重试或移除。
+
+> 5.1.0 重写。命名遵循 [API 命名规范](../../../docs/NAMING_CN.md)；旧的 `onUpload` 属性和弹窗式 `FileUploadPanel` 已移除（不保留兼容别名）。
+
+## 特性
+
+- **拖放上传**：文件拖到字段内任意位置即可，或点击占位块打开文件框。
+- **两种排列方式**：`list`（每行一个文件，行尾是下载 / 删除图标）和 `icon`（图标瓦片，自动换行）。
+- **固定高度**：通过 `height` 设置，超出后内部滚动。
+- **内联上传进度**：list 行尾显示进度条、百分比和取消按钮；icon 瓦片上叠加进度环，取消按钮位于环的中央（两层重叠）。
+- **失败重试 / 移除**。
+- **限制**：`accept`、`maxSize`、`maxFiles`、`multiple`；被拒绝的文件通过 `onFileRejected` 报告。
+- **否决钩子** `beforeRemove` 与通知 `onremove`、`onchange`、`onFileUploaded`、`onUploadError`。
+- **只读 / 禁用**：下载仍可用，删除和上传入口消失，忽略拖放。
+- 继承共享字段属性（`variant`、`compact`、`theme`、`tooltip`、`error`、`style`、`onfocus`、`onblur`）。
+
+## 引入
+
+```typescript
+import AttachmentEditor from "@ticatec/topside-elements/AttachmentEditor";
+import type {AttachmentFile, AttachmentLayout, FileUpload, RejectReason} from "@ticatec/topside-elements/AttachmentEditor";
+```
+
+## 基本用法
+
+```svelte
+<script lang="ts">
+  import AttachmentEditor from "@ticatec/topside-elements/AttachmentEditor";
+  import type {AttachmentFile, FileUpload} from "@ticatec/topside-elements/AttachmentEditor";
+
+  let files = $state<AttachmentFile[]>([]);
+
+  const uploadFile: FileUpload = (file, progressUpdate, onUploaded, onError) => {
+    const xhr = new XMLHttpRequest();
+    xhr.upload.onprogress = (e) => progressUpdate(e.loaded);
+    xhr.onload = () => xhr.status < 300 ? onUploaded(JSON.parse(xhr.responseText).url) : onError(new Error(xhr.statusText));
+    xhr.onerror = () => onError(new Error('网络错误'));
+    const body = new FormData();
+    body.append('file', file);
+    xhr.open('POST', '/api/upload');
+    xhr.send(body);
+    return {cancel: async () => { xhr.abort(); return true; }};
+  };
+</script>
+
+<AttachmentEditor bind:files {uploadFile} layout="icon" height={160} maxFiles={5}
+                  onchange={(list) => console.log('files', list)}/>
+```
+
+## 属性（Props）
+
+继承自 `CommonFieldProps` 的属性（`variant`、`compact`、`disabled`、`readonly`、`theme`、`tooltip`、`error`、`style`、`onfocus`、`onblur`）不再重复。
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `files` | `AttachmentFile[]`（可绑定） | `[]` | 已上传的附件；每项有 `name`、`type`、`uri` 和可选的 `size` / `thumbnail`。 |
+| `layout` | `'list' \| 'icon'` | `'list'` | `list`：每行一个文件；`icon`：瓦片自动换行。 |
+| `height` | `number \| string` | — | 内容区高度（数字为 px），超出后内部滚动；不设则随内容自适应。 |
+| `uploadFile` | `FileUpload` | — | 上传函数（见下）。不传则只展示文件，不显示上传入口。 |
+| `accept` | `string` | `"*/*"` | 允许的文件类型，语法同 `<input accept>`。 |
+| `maxSize` | `number` | `10 MB` | 单个文件大小上限（字节）。 |
+| `maxFiles` | `number` | `10` | 文件数量上限（含上传中的）；达到后上传入口消失。 |
+| `multiple` | `boolean` | `true` | 是否允许一次选择 / 拖入多个文件。 |
+| `uploadText` | `string` | i18n `upload.dropHint` | 上传入口文字，同时是空态提示。 |
+| `emptyText` | `string` | i18n `upload.emptyText` | 没有文件且不能上传时显示的文字。 |
+| `showThumbnail` | `boolean` | `false` | 图片文件显示缩略图（`thumbnail ?? uri`），上传中的图片显示本地预览。带 `thumbnail` 的项无论如何都显示缩略图。 |
+| `onPreview` | `(file: AttachmentFile) => void` | — | 传了则每个文件显示预览按钮。 |
+| `beforeRemove` | `BeforeRemove<AttachmentFile>` | — | 否决钩子：返回 `false`（或其 Promise）则不删除。 |
+| `onremove` | `(file: AttachmentFile) => void` | — | 附件被删除后通知。 |
+| `ondownload` | `(file: AttachmentFile) => void` | — | 自定义下载；不传时下载图标是指向 `file.uri` 的普通链接。 |
+| `onFileUploaded` | `(file: AttachmentFile, source: File) => void` | — | 单个文件上传完成并已加入 `files`。 |
+| `onFileRejected` | `(file: File, reason: 'accept' \| 'size' \| 'count') => void` | — | 选择 / 拖入的文件被拒绝。 |
+| `onUploadError` | `(file: File, error: Error) => void` | — | 上传失败；任务留在列表中，可重试或移除。 |
+| `onchange` | `(files: AttachmentFile[]) => void` | — | `files` 变化后通知（上传完成或删除）。 |
+
+## 方法
+
+| 方法 | 说明 |
+|------|------|
+| `openFileDialog()` | 打开系统文件框（等同于点击上传入口）；不能上传时不做任何事。 |
+| `focus()` | 把焦点移到字段内第一个控件。 |
+
+## `FileUpload`
+
+```typescript
+type FileUpload = (
+  file: File,
+  progressUpdate: (uploadedBytes: number) => void,
+  onUploaded: (url: string, thumbnail?: string) => void,
+  onError: (error: Error) => void
+) => {cancel: () => Promise<boolean>};
+```
+
+用已上传的字节数调用 `progressUpdate`（组件换算成百分比），完成时用存储地址调用 `onUploaded`，失败时调用 `onError`。`cancel()` 返回 `false` 表示无法取消，任务会留在列表里。
+
+## 行为说明
+
+- 不满足 `accept` / `maxSize` / 剩余 `maxFiles` 配额的文件不会开始上传，每个文件通过 `onFileRejected` 报告一次。
+- 上传成功后把 `{name, type, uri, size, thumbnail}` 追加到 `files`（类型由扩展名推断，`thumbnail` 来自上传函数 `onUploaded` 的第二个参数），然后依次触发 `onFileUploaded` 和 `onchange`。
+- `readonly` 和 `disabled` 都会隐藏删除和上传入口并忽略拖放；`readonly` 下下载链接保留。
+- 拖放高亮只对携带文件的拖拽生效。
+
+## 样式
+
+组件级 CSS 变量（都有回退值）：`--topside-attachment-item-height`、`--topside-attachment-tile-size`、`--topside-attachment-icon-color`、`--topside-attachment-add-border-color`、`--topside-attachment-add-color`、`--topside-attachment-drag-bg`、`--topside-attachment-error-color`、`--topside-attachment-overlay-bg`。`compact` 下行高 26px、瓦片 64px。
+
+## 相关组件
+
+- [ImageEditor](../image_editor/README_CN.md)：同一套实现的图片版，瓦片显示缩略图并内置大图预览。

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

@@ -0,0 +1,27 @@
+import type { FileType } from "./AttachmentFile";
+/**
+ * 上传任务状态：uploading（进行中）/ error（失败，可重试或移除）
+ */
+export type UploadStatus = 'uploading' | 'error';
+/**
+ * 组件内部维护的上传任务（渲染进度 / 取消 / 重试用）
+ */
+export interface UploadTask {
+    id: number;
+    /** 原始文件 */
+    file: File;
+    name: string;
+    type: FileType;
+    size: number;
+    /** 0 - 100 */
+    progress: number;
+    status: UploadStatus;
+    /** 失败原因 */
+    error?: string;
+    /** 上传中的本地预览（object URL），仅图片且开启 showThumbnail 时有 */
+    thumbnail?: string;
+}
+/**
+ * 文件被拒绝的原因：accept（类型不符）/ size（超过 maxSize）/ count（超过 maxFiles）
+ */
+export type RejectReason = 'accept' | 'size' | 'count';

package/dist/form/attachment_files/UploadTask.js

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

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

@@ -0,0 +1,11 @@
+import AttachmentEditor from "./AttachmentEditor.svelte";
+import AttachmentListItem from "./AttachmentListItem.svelte";
+import AttachmentTile from "./AttachmentTile.svelte";
+import type AttachmentFile from "./AttachmentFile";
+import { FileType, getFileType, getFileTypeIcon, formatFileSize } from "./AttachmentFile";
+import type { AttachmentLayout, UploadedFile } from "./AttachmentFile";
+import type { UploadTask, UploadStatus, RejectReason } from "./UploadTask";
+import type { OnError, FileUpload, OnUploaded, ProgressUpdate, UploadProgress } from "./FileUpload";
+export default AttachmentEditor;
+export { AttachmentListItem, AttachmentTile, FileType, getFileType, getFileTypeIcon, formatFileSize };
+export type { AttachmentFile, UploadedFile, AttachmentLayout, UploadTask, UploadStatus, RejectReason, OnError, FileUpload, OnUploaded, ProgressUpdate, UploadProgress };

package/dist/form/attachment_files/index.js

@@ -0,0 +1,6 @@
+import AttachmentEditor from "./AttachmentEditor.svelte";
+import AttachmentListItem from "./AttachmentListItem.svelte";
+import AttachmentTile from "./AttachmentTile.svelte";
+import { FileType, getFileType, getFileTypeIcon, formatFileSize } from "./AttachmentFile";
+export default AttachmentEditor;
+export { AttachmentListItem, AttachmentTile, FileType, getFileType, getFileTypeIcon, formatFileSize };

package/dist/form/cascade_options_select/CascadeOptionSelect.svelte

@@ -0,0 +1,170 @@
+<script lang="ts">
+    import {tick} from "svelte";
+    import iconLoading from "../../assets/loading.gif";
+    import OptionsBox from "./OptionsBox.svelte";
+    import {CommonPicker} from "../common_editor";
+    import type CommonPickerProps from "../common_editor/CommonPickerProps";
+    import type {IsLeaf} from "./IsLeaf";
+
+    import type {KeyboardEvents} from "../events";
+
+    type LoadChildren = (item: any) => Promise<Array<any>>;
+
+    interface Props extends CommonPickerProps, KeyboardEvents {
+        value: any;
+        nodes?: Array<any>;
+        keyField?: string;
+        textField?: string;
+        abbrField?: string;
+        childrenField?: string;
+        emptyText?: string;
+        checkLeaf?: IsLeaf | null;
+        menu$height?: number;
+        box$style?: string;
+        /** 按需加载叶节点的子级选项；返回空数组表示确实是叶子 */
+        loadChildren?: LoadChildren;
+    }
+
+    let {
+        variant,
+        disabled = false,
+        readonly = false,
+        compact = false,
+        clearable,
+        error,
+        tooltip,
+        theme,
+        style,
+        placeholder,
+        value = $bindable(),
+        nodes = $bindable([]),
+        keyField = "code",
+        textField = "text",
+        abbrField = "abbr",
+        childrenField = "children",
+        emptyText,
+        checkLeaf = null,
+        menu$height = 150,
+        box$style = "",
+        loadChildren,
+        onchange,
+        onfocus,
+        onblur,
+    }: Props = $props();
+
+    let isOpen = $state(false);
+    let busy = $state(false);
+    let selectedItems = $state<Array<any>>([]);
+    let list = $state<Array<Array<any>>>([nodes ?? []]);
+    let contentPanel: HTMLDivElement | undefined = $state(undefined);
+
+    let picker: CommonPicker;
+
+    export function focus() {
+        setTimeout(() => {
+            picker?.focus();
+        }, 50);
+    }
+
+    // Previously a flat "width: 400px" regardless of how many cascade levels
+    // (columns) were actually open — with box$style unset (columns had no
+    // default width of their own before this fix) or with 3+ levels open,
+    // that either squeezed columns illegibly narrow or clipped/scrolled
+    // content that didn't need to. Let the popover grow to fit however many
+    // columns are currently shown, capped so a very deep hierarchy still
+    // scrolls instead of overflowing the viewport.
+    const mh = $derived(`width: max-content; max-width: min(90vw, 700px); height: ${menu$height}px`);
+    const textValue = $derived(
+        selectedItems.length > 0
+            ? selectedItems[selectedItems.length - 1][textField]
+            : (emptyText ?? "")
+    );
+
+    // Re-seed the cascade from the top whenever the incoming top-level nodes change.
+    $effect(() => {
+        if (nodes && nodes.length > 0) {
+            list = [nodes];
+        }
+    });
+
+    const selectOption = (level: number) => async (item: any) => {
+        value = item?.[keyField];
+        const newList = list.slice(0, level + 1);
+        selectedItems = level === 0 ? [item] : [...selectedItems.slice(0, level), item];
+
+        const isLeaf = checkLeaf == null ? false : checkLeaf(item);
+        if (!isLeaf) {
+            if (item[childrenField] == null && loadChildren != null) {
+                busy = true;
+                const children = (await loadChildren(item)) ?? [];
+                busy = false;
+                item[childrenField] = children;
+                if (children.length > 0) {
+                    list = [...newList, children];
+                    await tick();
+                    if (contentPanel) contentPanel.scrollLeft = contentPanel.scrollWidth;
+                } else {
+                    isOpen = false;
+                    picker?.focus();
+                }
+            } else if (item[childrenField] && item[childrenField].length > 0) {
+                list = [...newList, item[childrenField]];
+                await tick();
+                if (contentPanel) contentPanel.scrollLeft = contentPanel.scrollWidth;
+            } else {
+                isOpen = false;
+                picker?.focus();
+            }
+        } else {
+            isOpen = false;
+            picker?.focus();
+        }
+        onchange?.(value);
+    };
+
+    const cleanData = () => {
+        value = null;
+        selectedItems = [];
+        list = [nodes ?? []];
+        onchange?.(null);
+    };
+</script>
+
+<CommonPicker
+    bind:this={picker}
+    {error} {tooltip} {variant} {style} {compact}
+    {textValue} {readonly} {placeholder} {disabled}
+    bind:expanded={isOpen}
+    {theme} {value} {clearable}
+    clear={cleanData}
+    {onfocus} {onblur}
+    autoFit={false}>
+    {#snippet popup()}
+        <div class="cascade-options-popover" style={mh}>
+            <div style="height: 100%; position: relative">
+                <div
+                    bind:this={contentPanel}
+                    style="width: 100%; height: 100%; display: flex; flex-direction: row; overflow: auto">
+                    {#each list as node, idx (idx)}
+                        <OptionsBox
+                            options={node}
+                            {keyField}
+                            textField={abbrField}
+                            {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="" width="32" height="32"/>
+                            </div>
+                        </div>
+                    </div>
+                {/if}
+            </div>
+        </div>
+    {/snippet}
+</CommonPicker>

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

@@ -0,0 +1,23 @@
+import type CommonPickerProps from "../common_editor/CommonPickerProps";
+import type { IsLeaf } from "./IsLeaf";
+import type { KeyboardEvents } from "../events";
+type LoadChildren = (item: any) => Promise<Array<any>>;
+interface Props extends CommonPickerProps, KeyboardEvents {
+    value: any;
+    nodes?: Array<any>;
+    keyField?: string;
+    textField?: string;
+    abbrField?: string;
+    childrenField?: string;
+    emptyText?: string;
+    checkLeaf?: IsLeaf | null;
+    menu$height?: number;
+    box$style?: string;
+    /** 按需加载叶节点的子级选项；返回空数组表示确实是叶子 */
+    loadChildren?: LoadChildren;
+}
+declare const CascadeOptionSelect: import("svelte").Component<Props, {
+    focus: () => void;
+}, "value" | "nodes">;
+type CascadeOptionSelect = ReturnType<typeof CascadeOptionSelect>;
+export default CascadeOptionSelect;

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

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

package/dist/form/cascade_options_select/IsLeaf.js

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

package/dist/form/cascade_options_select/OptionsBox.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+    import type { OnSelect } from "../../types";
+
+    interface Props {
+        options: Array<any>;
+        onselect: OnSelect<any>;
+        selectedItem: any;
+        keyField: string;
+        textField: string;
+        box$style: string;
+    }
+
+    let {
+        options,
+        onselect,
+        selectedItem,
+        keyField,
+        textField,
+        box$style
+    }: Props = $props();
+
+    const handleItemClick = (item: any) => (e: MouseEvent) => {
+        selectedItem = item;
+        onselect(item);
+    }
+
+    const handleItemKeyDown = (item: any) => (e: KeyboardEvent) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handleItemClick(item)(e as unknown as MouseEvent);
+        }
+    }
+</script>
+
+<div class="cascade-column" style={box$style} role="listbox">
+    {#each options as op (op[keyField])}
+        <div class="option-item" class:selected={op[keyField] === (selectedItem ?? {})[keyField]}
+             role="option" tabindex="0" aria-selected={op[keyField] === (selectedItem ?? {})[keyField]}
+             onclick={handleItemClick(op)} onkeydown={handleItemKeyDown(op)}>
+            <span>{op[textField]}</span>
+        </div>
+    {/each}
+</div>
+
+<style>
+    /* Base sizing so a column looks correct even when the consumer doesn't
+       pass box$style — previously there was no default at all, so columns
+       had no width/overflow handling and collapsed unpredictably inside the
+       popover's flex row. box$style (inline style, applied after these
+       rules) can still override any of this per column. */
+    .cascade-column {
+        flex: 0 0 auto;
+        width: 140px;
+        height: 100%;
+        box-sizing: border-box;
+        overflow-y: auto;
+        overflow-x: hidden;
+        border-right: 1px solid var(--topside-color-border-secondary);
+    }
+
+    .cascade-column:last-child {
+        border-right: none;
+    }
+
+    .option-item {
+        padding: 6px 12px;
+        cursor: pointer;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .option-item:hover {
+        background-color: var(--topside-popover-item-color-surface-hover);
+    }
+
+    .option-item.selected {
+        background-color: var(--topside-popover-item-color-surface-active);
+        color: var(--topside-popover-item-color-active);
+    }
+</style>

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

@@ -0,0 +1,12 @@
+import type { OnSelect } from "../../types";
+interface Props {
+    options: Array<any>;
+    onselect: OnSelect<any>;
+    selectedItem: any;
+    keyField: string;
+    textField: string;
+    box$style: string;
+}
+declare const OptionsBox: import("svelte").Component<Props, {}, "">;
+type OptionsBox = ReturnType<typeof OptionsBox>;
+export default OptionsBox;