@ticatec/uniface-element 5.0.5 → 5.1.1

package/dist/data_display/concise_data_table/ConciseListTable.svelte.d.ts

@@ -1,11 +1,12 @@
-import { type RowClickHandler, type TableOptions } from "./TableOptions";
+import { type OnRowClick, type TableOptions } from "./TableOptions";
 import type Column from "./Column";
 interface Props {
     list: Array<any>;
     columns: Array<Column>;
     autoScroll?: boolean;
     scrollInterval?: number;
-    rowClickHandler?: RowClickHandler | null;
+    /** 行点击回调 */
+    onRowClick?: OnRowClick | null;
     options?: TableOptions;
     style?: string;
     class?: string;
@@ -13,7 +14,7 @@ interface Props {
     onblur?: (event: FocusEvent) => void;
 }
 declare const ConciseListTable: import("svelte").Component<Props, {
-    setFocus: () => void;
+    focus: () => void;
 }, "">;
 type ConciseListTable = ReturnType<typeof ConciseListTable>;
 export default ConciseListTable;

package/dist/data_display/concise_data_table/DataCell.svelte

@@ -16,7 +16,7 @@
     let text = $derived(column.formatter ? column.formatter(data[column.field]) : (data[column.field] ?? ''));
     // Safe by default: HTML rendering is opt-in only (renderHTML: true), matching the
     // semantics of the data_table component's DataColumn#renderHTML flag.
-    let renderAsHtml = $derived((column.renderHTML ?? column.escapeHTML) === true);
+    let renderAsHtml = $derived(column.renderHTML === true);
 </script>
 
 <div class="data-cell col_{idx}" role="cell">

package/dist/data_display/concise_data_table/README.md

@@ -1,5 +1,7 @@
 # ConciseListTable
 
+> **Renamed in 5.1.0**: this document uses the names from the [API Naming Guide](../../../docs/NAMING.md); the old names `RowClickHandler`, `rowClickHandler`, `setFocus` were removed in 5.1.0 (no compatibility aliases are kept).
+
 A lightweight single-purpose table for **display-only** data: fixed columns, optional marquee auto-scroll, alternating row styling. No sorting, no resizing, no selection — use the full `DataTable` when you need those.
 
 > Svelte 5 component. The table fills its parent (100% × 100%); the parent must have an explicit height.
@@ -15,7 +17,7 @@ npm install @ticatec/uniface-element
 ```svelte
 <script lang="ts">
   import ConciseListTable from '@ticatec/uniface-element/ConciseDataTable';
-  import type { Column, TableOptions, RowClickHandler } from '@ticatec/uniface-element/ConciseDataTable';
+  import type { Column, TableOptions, OnRowClick } from '@ticatec/uniface-element/ConciseDataTable';
 </script>
 ```
 
@@ -28,7 +30,7 @@ npm install @ticatec/uniface-element
 | `options` | `TableOptions` | `{}` | Visual options (heights, row colors). Defaults: `headerHeight=36`, `rowHeight=32` |
 | `autoScroll` | `boolean` | `false` | Continuous marquee scroll. When on, the list is **rendered 3 times back-to-back** and animated with a CSS `translateY` keyframe |
 | `scrollInterval` | `number` | `2000` | Milliseconds each row stays visible (total animation duration = `scrollInterval × list.length`) |
-| `rowClickHandler` | `(row: any) => void \| null` | `null` | Row click callback |
+| `onRowClick` | `(row: any) => void \| null` | `null` | Row click callback |
 | `style` | `string` | `''` | Inline CSS on the root |
 | `class` | `string` | `''` | Extra class on the root |
 | `onfocus` | `(e: FocusEvent) => void` | `undefined` | Forwarded from the root via `focusin` |
@@ -119,11 +121,11 @@ Leftover space is split 1:2 between the two weighted columns; the 100-px status
     { product: 'Mouse',   desc: 'Wireless',            status: 'out' },
   ];
 
-  const rowClickHandler = (row: any) => console.log('clicked', row);
+  const onRowClick = (row: any) => console.log('clicked', row);
 </script>
 
 <div style="height: 400px;">
-  <ConciseListTable {list: products} {columns} {options} {rowClickHandler} />
+  <ConciseListTable {list: products} {columns} {options} {onRowClick} />
 </div>
 ```
 
@@ -155,7 +157,7 @@ For one-off theming prefer passing `options` (it generates scoped CSS with a uni
 
 ## Imperative API
 
-`setFocus()` is exported from the instance — call via `bind:this`:
+`focus()` is exported from the instance — call via `bind:this`:
 
 ```svelte
 <script lang="ts">

package/dist/data_display/concise_data_table/README_CN.md

@@ -1,5 +1,7 @@
 # ConciseListTable 简洁数据表
 
+> **5.1.0 重命名**：本文使用 [API 命名规范](../../../docs/NAMING_CN.md) 中的名字；旧名 `RowClickHandler`, `rowClickHandler`, `setFocus` 已在 5.1.0 移除（5.1.0 不保留兼容别名）。
+
 **只用于展示** 的轻量表格：固定列、可选跑马灯自动滚动、交替行配色。不支持排序、调整列宽、选择 —— 那些功能请用完整的 `DataTable`。
 
 > Svelte 5 组件。表格填满父容器（100% × 100%），父容器必须给出明确高度。
@@ -15,7 +17,7 @@ npm install @ticatec/uniface-element
 ```svelte
 <script lang="ts">
   import ConciseListTable from '@ticatec/uniface-element/ConciseDataTable';
-  import type { Column, TableOptions, RowClickHandler } from '@ticatec/uniface-element/ConciseDataTable';
+  import type { Column, TableOptions, OnRowClick } from '@ticatec/uniface-element/ConciseDataTable';
 </script>
 ```
 
@@ -28,7 +30,7 @@ npm install @ticatec/uniface-element
 | `options` | `TableOptions` | `{}` | 视觉选项（行高、配色等）。缺省 `headerHeight=36`、`rowHeight=32` |
 | `autoScroll` | `boolean` | `false` | 跑马灯自动滚动。开启后会把 list **连续渲染 3 次**，用 CSS `translateY` 关键帧无缝循环 |
 | `scrollInterval` | `number` | `2000` | 每行停留的毫秒数（动画总时长 = `scrollInterval × list.length`） |
-| `rowClickHandler` | `(row: any) => void \| null` | `null` | 行点击回调 |
+| `onRowClick` | `(row: any) => void \| null` | `null` | 行点击回调 |
 | `style` | `string` | `''` | 根节点内联 CSS |
 | `class` | `string` | `''` | 根节点附加 class |
 | `onfocus` | `(e: FocusEvent) => void` | `undefined` | 通过 `focusin` 转发 |
@@ -119,11 +121,11 @@ interface TableOptions {
     { product: '鼠标',    desc: '无线',         status: 'out' },
   ];
 
-  const rowClickHandler = (row: any) => console.log('clicked', row);
+  const onRowClick = (row: any) => console.log('clicked', row);
 </script>
 
 <div style="height: 400px;">
-  <ConciseListTable list={products} {columns} {options} {rowClickHandler} />
+  <ConciseListTable list={products} {columns} {options} {onRowClick} />
 </div>
 ```
 
@@ -155,7 +157,7 @@ SCSS 中消费的 CSS 变量（在根或任意祖先覆盖）：
 
 ## 命令式 API
 
-`setFocus()` 暴露在组件实例上，通过 `bind:this` 调用：
+`focus()` 暴露在组件实例上，通过 `bind:this` 调用：
 
 ```svelte
 <script lang="ts">

package/dist/data_display/concise_data_table/TableOptions.d.ts

@@ -8,4 +8,4 @@ export interface TableOptions {
     alternativeColor?: string;
     rowHeight?: number;
 }
-export type RowClickHandler = (row: any) => void;
+export type OnRowClick = (row: any) => void;

package/dist/data_display/list_box/ListBox.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import {tick, onDestroy, untrack} from "svelte";
     import SearchBox from "../../form/search_box"
-    import type {FunFilter} from "../../types";
+    import type {FilterFn} from "../../types";
     import type {ListLazyLoader} from "../../types";
     import CheckBox from "../../form/checkbox/CheckBox.svelte";
     import loading from "../../assets/loading.gif"
@@ -12,21 +12,18 @@
 
     interface Props {
         readonly?: boolean;
-        style?: string | null;
+        style?: string;
         list?: Array<any>;
         itemRender?: any;
         selectMode?: 'none' | 'single' | 'multiple';
-        filter?: FunFilter | null;
+        filter?: FilterFn | null;
         lazyLoader?: ListLazyLoader | null;
         selectedItem?: any;
-        selectedList?: Array<any>;
+        /** 多选模式下的已选项 */
+        selectedItems?: Array<any>;
         class?: string;
         item$props?: any;
         onchange?: OnSelectChange;
-        /**
-         * @deprecated 请使用 onchange；仍受支持以兼容旧调用。
-         */
-        onSelectChange?: OnSelectChange;
         onItemDblClick?: OnItemDblClick;
         onItemClick?: OnItemClick;
         title?: string;
@@ -46,11 +43,10 @@
         filter,
         lazyLoader,
         selectedItem,
-        selectedList = $bindable([]),
+        selectedItems = $bindable([]),
         class: className,
         item$props,
         onchange,
-        onSelectChange,
         onItemDblClick,
         onItemClick,
         title,
@@ -64,7 +60,7 @@
     // External values are synchronized by the effects below. Neutral initial values
     // avoid implying that these props are intentionally captured only once.
     let localSelectedItem = $state<any>(null);
-    let localSelectedList = $state(selectedList ?? []);
+    let localSelectedList = $state<Array<any>>([]);
     let localFilterText = $state('');
 
     let hasMore = $state(false);
@@ -81,18 +77,15 @@
     });
 
     $effect(() => {
-        localSelectedList = selectedList ?? [];
+        localSelectedList = selectedItems ?? [];
     });
 
     $effect(() => {
         localFilterText = filterText ?? '';
     });
 
-    // onchange is the canonical name; onSelectChange is kept as a deprecated
-    // alias and fired alongside it for backward compatibility.
     const notifySelectChange = (item: any) => {
         onchange?.(item);
-        onSelectChange?.(item);
     };
 
     const handleItemClick = (item: any) => (e: MouseEvent) => {
@@ -241,6 +234,9 @@
             localSelectedList.splice(idx, 1);
             localSelectedList = [...localSelectedList];
         }
+        // Write the selection back through the two-way binding (regression: bind:selectedList
+        // never received updates, which left Transfer's move buttons dead).
+        selectedItems = localSelectedList;
     }
 
     // untrack: lazyLoad() reads pageNo/isBusy/localFilterText synchronously

package/dist/data_display/list_box/ListBox.svelte.d.ts

@@ -1,25 +1,22 @@
-import type { FunFilter } from "../../types";
+import type { FilterFn } from "../../types";
 import type { ListLazyLoader } from "../../types";
 type OnSelectChange = (item: any) => void;
 type OnItemDblClick = (item: any) => void;
 type OnItemClick = (item: any) => void;
 interface Props {
     readonly?: boolean;
-    style?: string | null;
+    style?: string;
     list?: Array<any>;
     itemRender?: any;
     selectMode?: 'none' | 'single' | 'multiple';
-    filter?: FunFilter | null;
+    filter?: FilterFn | null;
     lazyLoader?: ListLazyLoader | null;
     selectedItem?: any;
-    selectedList?: Array<any>;
+    /** 多选模式下的已选项 */
+    selectedItems?: Array<any>;
     class?: string;
     item$props?: any;
     onchange?: OnSelectChange;
-    /**
-     * @deprecated 请使用 onchange；仍受支持以兼容旧调用。
-     */
-    onSelectChange?: OnSelectChange;
     onItemDblClick?: OnItemDblClick;
     onItemClick?: OnItemClick;
     title?: string;
@@ -29,6 +26,6 @@ interface Props {
     footer?: any;
     loadMoreIndicator?: any;
 }
-declare const ListBox: import("svelte").Component<Props, {}, "selectedList">;
+declare const ListBox: import("svelte").Component<Props, {}, "selectedItems">;
 type ListBox = ReturnType<typeof ListBox>;
 export default ListBox;

package/dist/data_display/list_box/README.md

@@ -1,5 +1,7 @@
 # ListBox
 
+> **Renamed in 5.1.0**: this document uses the names from the [API Naming Guide](../../../docs/NAMING.md); the old names `onSelectChange`, `selectedList` were removed in 5.1.0 (no compatibility aliases are kept).
+
 A list component with optional header / footer snippets, built-in search, lazy loading, and single / multiple selection modes.
 
 > Svelte 5 component. Custom header/footer/load-more content is passed as **Snippets** (`header`, `footer`, `loadMoreIndicator`).
@@ -28,7 +30,7 @@ npm install @ticatec/uniface-element
 | `item$props` | `any` | `undefined` | Extra props spread onto every `itemRender` instance |
 | `selectMode` | `'none' \| 'single' \| 'multiple'` | `'none'` | Selection behavior. `'multiple'` renders a checkbox per row |
 | `selectedItem` | `any` | `undefined` | Currently selected item in single mode (one-way in; component mirrors into local state) |
-| `selectedList` | `Array<any>` | `[]` | Selected items in multiple mode. **Bindable** — use `bind:selectedList` |
+| `selectedItems` | `Array<any>` | `[]` | Selected items in multiple mode. **Bindable** — use `bind:selectedItems` |
 | `readonly` | `boolean` | `false` | Disables selection and hides the search box |
 | `filter` | `FunFilter \| null` | `null` | If set, a search box appears at the top |
 | `lazyLoader` | `ListLazyLoader \| null` | `null` | If set, replaces `list` with a paginated source. Search box appears and infinite-scroll is wired up |
@@ -40,7 +42,7 @@ npm install @ticatec/uniface-element
 | `header` | `Snippet` | `undefined` | Custom header content (overrides `title`) |
 | `footer` | `Snippet` | `undefined` | Custom footer content |
 | `loadMoreIndicator` | `Snippet` | `undefined` | Custom "loading more" indicator shown at the bottom while `hasMore` |
-| `onSelectChange` | `(item: any) => void` | `undefined` | Single-mode: fires when the selected item changes (also fires with `null` when filter resets selection) |
+| `onchange` | `(item: any) => void` | `undefined` | Single-mode: fires when the selected item changes (also fires with `null` when filter resets selection) |
 | `onItemDblClick` | `(item: any) => void` | `undefined` | Single-mode only |
 | `onItemClick` | `(item: any) => void` | `undefined` | Non-single modes |
 
@@ -61,8 +63,8 @@ interface LoadResult {
 ## Selection model
 
 - **`selectMode='none'`** — no selection visuals, no callbacks. `onItemClick` still fires.
-- **`selectMode='single'`** — click an item to select; `onSelectChange(item)` fires. `selectedItem` is mirrored into local state on prop change.
-- **`selectMode='multiple'`** — checkbox per row; the checked set is stored in `selectedList` (use `bind:selectedList`). Clicking the row label toggles the same checkbox.
+- **`selectMode='single'`** — click an item to select; `onchange(item)` fires. `selectedItem` is mirrored into local state on prop change.
+- **`selectMode='multiple'`** — checkbox per row; the checked set is stored in `selectedItems` (use `bind:selectedItems`). Clicking the row label toggles the same checkbox.
 
 ## Examples
 
@@ -82,7 +84,7 @@ interface LoadResult {
     item.name.toLowerCase().includes(text.toLowerCase()) ||
     item.email.toLowerCase().includes(text.toLowerCase());
 
-  const onSelectChange = (item: any) => console.log('selected', item);
+  const onchange = (item: any) => console.log('selected', item);
 </script>
 
 <ListBox
@@ -92,19 +94,19 @@ interface LoadResult {
   {filter}
   title="Users"
   round
-  onSelectChange={onSelectChange}
+  onchange={onchange}
   style="height: 400px;"
 />
 ```
 
-### Multiple-select with `bind:selectedList`
+### Multiple-select with `bind:selectedItems`
 
 ```svelte
 <script lang="ts">
   let selected: any[] = [];
 </script>
 
-<ListBox list={users} itemRender={UserItem} selectMode="multiple" bind:selectedList={selected} />
+<ListBox list={users} itemRender={UserItem} selectMode="multiple" bind:selectedItems={selected} />
 
 <button disabled={selected.length === 0} onclick={() => console.log(selected)}>OK</button>
 ```

package/dist/data_display/list_box/README_CN.md

@@ -1,5 +1,7 @@
 # ListBox 列表框
 
+> **5.1.0 重命名**：本文使用 [API 命名规范](../../../docs/NAMING_CN.md) 中的名字；旧名 `onSelectChange`, `selectedList` 已在 5.1.0 移除（5.1.0 不保留兼容别名）。
+
 列表组件，可选 header / footer snippet、内置搜索框、懒加载、单选 / 多选。
 
 > Svelte 5 组件。header / footer / 加载更多 通过 **Snippet** 传入（`header`、`footer`、`loadMoreIndicator`）。
@@ -28,7 +30,7 @@ npm install @ticatec/uniface-element
 | `item$props` | `any` | `undefined` | 额外 props，会展开传给每个 `itemRender` 实例 |
 | `selectMode` | `'none' \| 'single' \| 'multiple'` | `'none'` | 选择行为。`'multiple'` 会给每行加一个 checkbox |
 | `selectedItem` | `any` | `undefined` | 单选模式下当前选中的 item（单向输入；组件会镜像到内部状态） |
-| `selectedList` | `Array<any>` | `[]` | 多选模式下选中的 items。**可绑定** —— 用 `bind:selectedList` |
+| `selectedItems` | `Array<any>` | `[]` | 多选模式下选中的 items。**可绑定** —— 用 `bind:selectedItems` |
 | `readonly` | `boolean` | `false` | 禁用选择，隐藏搜索框 |
 | `filter` | `FunFilter \| null` | `null` | 设置后顶部会出现搜索框 |
 | `lazyLoader` | `ListLazyLoader \| null` | `null` | 设置后用分页数据源代替 `list`，自动出现搜索框 + 滚动到底加载下一页 |
@@ -40,7 +42,7 @@ npm install @ticatec/uniface-element
 | `header` | `Snippet` | `undefined` | 自定义 header（覆盖 `title`） |
 | `footer` | `Snippet` | `undefined` | 自定义 footer |
 | `loadMoreIndicator` | `Snippet` | `undefined` | 自定义"加载更多"指示器，`hasMore` 时显示在底部 |
-| `onSelectChange` | `(item: any) => void` | `undefined` | 单选模式：选中变化时触发（过滤重置时也会以 `null` 触发一次） |
+| `onchange` | `(item: any) => void` | `undefined` | 单选模式：选中变化时触发（过滤重置时也会以 `null` 触发一次） |
 | `onItemDblClick` | `(item: any) => void` | `undefined` | 仅单选模式 |
 | `onItemClick` | `(item: any) => void` | `undefined` | 仅非 single 模式 |
 
@@ -61,8 +63,8 @@ interface LoadResult {
 ## 选择模型
 
 - **`selectMode='none'`** —— 没有选择视觉，没有回调。`onItemClick` 仍会触发。
-- **`selectMode='single'`** —— 点击 item 选中，触发 `onSelectChange(item)`。`selectedItem` 变化时会镜像到内部状态。
-- **`selectMode='multiple'`** —— 每行一个 checkbox；选中集合存在 `selectedList`（用 `bind:selectedList`）。点行标签也会切换同一个 checkbox。
+- **`selectMode='single'`** —— 点击 item 选中，触发 `onchange(item)`。`selectedItem` 变化时会镜像到内部状态。
+- **`selectMode='multiple'`** —— 每行一个 checkbox；选中集合存在 `selectedItems`（用 `bind:selectedItems`）。点行标签也会切换同一个 checkbox。
 
 ## 示例
 
@@ -82,7 +84,7 @@ interface LoadResult {
     item.name.toLowerCase().includes(text.toLowerCase()) ||
     item.email.toLowerCase().includes(text.toLowerCase());
 
-  const onSelectChange = (item: any) => console.log('selected', item);
+  const onchange = (item: any) => console.log('selected', item);
 </script>
 
 <ListBox
@@ -92,19 +94,19 @@ interface LoadResult {
   {filter}
   title="Users"
   round
-  {onSelectChange}
+  {onchange}
   style="height: 400px;"
 />
 ```
 
-### 多选 + `bind:selectedList`
+### 多选 + `bind:selectedItems`
 
 ```svelte
 <script lang="ts">
   let selected: any[] = [];
 </script>
 
-<ListBox list={users} itemRender={UserItem} selectMode="multiple" bind:selectedList={selected} />
+<ListBox list={users} itemRender={UserItem} selectMode="multiple" bind:selectedItems={selected} />
 
 <button disabled={selected.length === 0} onclick={() => console.log(selected)}>OK</button>
 ```

package/dist/data_display/list_box/index.d.ts

@@ -1,5 +1,4 @@
 import ListBox from "./ListBox.svelte";
-import type { ListLazyLoader, LoadResult, FunFilter } from "../../types";
-import type { LazyLoader } from "../tree_view";
+import type { ListLazyLoader, LoadResult, FilterFn } from "../../types";
 export default ListBox;
-export type { ListLazyLoader, LazyLoader, FunFilter, LoadResult };
+export type { ListLazyLoader, FilterFn, LoadResult };

package/dist/data_display/tree_view/README.md

@@ -1,5 +1,7 @@
 # TreeView
 
+> **Renamed in 5.1.0**: this document uses the names from the [API Naming Guide](../../../docs/NAMING.md); the old names `onContextMenu` were removed in 5.1.0 (no compatibility aliases are kept).
+
 A hierarchical tree component for displaying nested or flat hierarchical data (backed by `HierarchyTree`), with support for custom icons (folder open/close, file-type badges), lazy loading, selection binding, and context menus.
 
 ## Features
@@ -9,7 +11,7 @@ A hierarchical tree component for displaying nested or flat hierarchical data (b
 - **Expansion control**: `defaultExpandDepth` sets the initial expand depth; clicking the chevron toggles a branch.
 - **Two-way selection binding**: `bind:activeNode` reactively tracks the selected node.
 - **Async lazy loading**: `lazyLoader` fetches children on demand and shows a loading icon while the fetch is in flight.
-- **Context menu integration**: `onContextMenu` opens a `ContextMenu` on right-click.
+- **Context menu integration**: `oncontextmenu` opens a `ContextMenu` on right-click.
 - **Accessibility**: the container has `role="tree"` and supports `onfocus` / `onblur`.
 
 ## Installation
@@ -43,7 +45,7 @@ import {HierarchyTree} from "@ticatec/uniface-element/TreeNodes";
 | `onchange` | `OnNodeSelectionChange` | - | Callback fired when the selection changes; return `false` to cancel the selection |
 | `onfocus` | `(event: FocusEvent) => void` | - | Callback fired when the tree container gains focus |
 | `onblur` | `(event: FocusEvent) => void` | - | Callback fired when the tree container loses focus |
-| `onContextMenu` | `OnContextMenu` | - | Callback fired on right-click, used to show a context menu |
+| `oncontextmenu` | `OnContextMenu` | - | Callback fired on right-click, used to show a context menu |
 | `title` | `string` | - | Optional title shown at the top of the tree; clicking it clears the selection (`activeNode` is set to `null`) |
 
 ## Types

package/dist/data_display/tree_view/README_CN.md

@@ -1,5 +1,7 @@
 # 树形视图组件 (TreeView)
 
+> **5.1.0 重命名**：本文使用 [API 命名规范](../../../docs/NAMING_CN.md) 中的名字；旧名 `onContextMenu` 已在 5.1.0 移除（5.1.0 不保留兼容别名）。
+
 分层树形组件，用于展示嵌套或平铺层次结构数据（基于 `HierarchyTree`），支持图标替换（如文件夹打开/关闭、文件类型徽章）、按需懒加载、选中项绑定和右键菜单。
 
 ## 特性
@@ -9,7 +11,7 @@
 - **动态展开与深层控制**：支持 `defaultExpandDepth` 初始展开深度与单击箭头切换展开。
 - **选择状态双向绑定**：支持 `bind:activeNode` 响应式绑定选中节点。
 - **异步懒加载**：支持 `lazyLoader` 按需加载子节点，加载过程中自动显示 loading 图标。
-- **右键菜单集成**：支持 `onContextMenu` 在节点上唤起 `ContextMenu` 右键菜单。
+- **右键菜单集成**：支持 `oncontextmenu` 在节点上唤起 `ContextMenu` 右键菜单。
 - **可访问性**：容器带 `role="tree"`，支持 `onfocus`/`onblur` 焦点事件。
 
 ## 安装
@@ -43,7 +45,7 @@ import {HierarchyTree} from "@ticatec/uniface-element/TreeNodes";
 | `onchange` | `OnNodeSelectionChange` | - | 节点选择变化时的回调函数（返回 `false` 可取消本次选择） |
 | `onfocus` | `(event: FocusEvent) => void` | - | 树容器获得焦点时的回调 |
 | `onblur` | `(event: FocusEvent) => void` | - | 树容器失去焦点时的回调 |
-| `onContextMenu` | `OnContextMenu` | - | 右键菜单事件的回调函数 |
+| `oncontextmenu` | `OnContextMenu` | - | 右键菜单事件的回调函数 |
 | `title` | `string` | - | 显示在树顶部的标题，点击标题会触发一次"取消选中"（`activeNode` 置为 `null`） |
 
 ## 类型定义

package/dist/data_display/tree_view/TreeNodeView.svelte

@@ -2,7 +2,6 @@
     import iconLoading from "../../assets/loading.gif";
     import type { OnContextMenu } from "../../overlay/context-menu/ContextMenuItem";
     import type { IHierarchyData } from "../../lib";
-    import type { OnNodeSelectionChange } from "../../types";
     import type { Snippet } from 'svelte';
     import type { GetIcon, NodeIconContext, ChevronIconContext } from './TreeView.svelte';
 
@@ -15,12 +14,12 @@
         nodeIcon?: Snippet<[NodeIconContext]>;
         chevronIcon?: Snippet<[ChevronIconContext]>;
         activeNode: any;
-        isBranch: boolean;
+        expandable: boolean;
         expanded: boolean;
         loading?: boolean;
-        onToggle: () => void;
-        onNodeSelectionChange: OnNodeSelectionChange;
-        onContextMenu?: OnContextMenu;
+        ontoggle: () => void;
+        onselect: (node: IHierarchyData<any>) => Promise<void>;
+        oncontextmenu?: OnContextMenu;
     }
 
     let {
@@ -30,12 +29,12 @@
         nodeIcon,
         chevronIcon,
         activeNode,
-        isBranch,
+        expandable,
         expanded,
         loading = false,
-        onToggle,
-        onNodeSelectionChange,
-        onContextMenu
+        ontoggle,
+        onselect,
+        oncontextmenu
     }: Props = $props();
 
     let nodeText = $derived(
@@ -61,11 +60,11 @@
     const handleIconClick = async (e: MouseEvent) => {
         e.stopPropagation();
         e.preventDefault();
-        await onToggle();
+        await ontoggle();
     }
 
     const handleRowClick = async () => {
-        await onNodeSelectionChange(node);
+        await onselect(node);
     }
 
     const handleRowKeyDown = async (e: KeyboardEvent) => {
@@ -79,22 +78,22 @@
         if (e.key === 'Enter' || e.key === ' ') {
             e.preventDefault();
             e.stopPropagation();
-            await onToggle();
+            await ontoggle();
         }
     }
 
     const handleContextMenu = (event: MouseEvent) => {
-        onContextMenu?.(event, node);
+        oncontextmenu?.(event, node);
     }
 </script>
 
 <div class="tree-node" class:expanded style="padding-left: {node.level * 16}px">
     <div class="node-item" class:selected={isSelected} onclick={handleRowClick} onkeydown={handleRowKeyDown}
          oncontextmenu={handleContextMenu} role="treeitem" tabindex="0" aria-selected={isSelected}
-         aria-expanded={isBranch ? expanded : undefined}>
+         aria-expanded={expandable ? expanded : undefined}>
 
         <div class="item-chevron">
-            {#if isBranch}
+            {#if expandable}
                 {#if loading}
                     <img alt="loading" class="chevron-img" src={iconLoading}/>
                 {:else if chevronIcon}
@@ -113,7 +112,7 @@
 
         {#if nodeIcon}
             <div class="node-type-icon">
-                {@render nodeIcon({ node, expanded, isBranch })}
+                {@render nodeIcon({ node, expanded, isBranch: expandable })}
             </div>
         {:else if nodeIconValue}
             <div class="node-type-icon">

package/dist/data_display/tree_view/TreeNodeView.svelte.d.ts

@@ -1,6 +1,5 @@
 import type { OnContextMenu } from "../../overlay/context-menu/ContextMenuItem";
 import type { IHierarchyData } from "../../lib";
-import type { OnNodeSelectionChange } from "../../types";
 import type { Snippet } from 'svelte';
 import type { GetIcon, NodeIconContext, ChevronIconContext } from './TreeView.svelte';
 type GetText<T> = (item: T) => string;
@@ -11,12 +10,12 @@ interface Props {
     nodeIcon?: Snippet<[NodeIconContext]>;
     chevronIcon?: Snippet<[ChevronIconContext]>;
     activeNode: any;
-    isBranch: boolean;
+    expandable: boolean;
     expanded: boolean;
     loading?: boolean;
-    onToggle: () => void;
-    onNodeSelectionChange: OnNodeSelectionChange;
-    onContextMenu?: OnContextMenu;
+    ontoggle: () => void;
+    onselect: (node: IHierarchyData<any>) => Promise<void>;
+    oncontextmenu?: OnContextMenu;
 }
 declare const TreeNodeView: import("svelte").Component<Props, {}, "">;
 type TreeNodeView = ReturnType<typeof TreeNodeView>;