@ticatec/uniface-element 5.0.4 → 5.1.0

package/dist/data_display/card/README.md

@@ -1,8 +1,10 @@
 # Card
 
+> **Renamed in 5.1.0**: this document uses the names from the [API Naming Guide](../../../docs/NAMING.md); the old names `actionsAlign`, `contentStyle` were removed in 5.1.0 (no compatibility aliases are kept).
+
 A content container with optional title bar (or custom header snippet), body, and an action bar at the bottom.
 
-> Svelte 5 component. Custom header is passed as the `headerBar` snippet; body content is the default children.
+> Svelte 5 component. Custom header is passed as the `header` snippet; body content is the default children.
 
 ## Installation
 
@@ -23,15 +25,15 @@ npm install @ticatec/uniface-element
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `title` | `string` | `''` | Plain-text title rendered by `CardHeader`. Single-line, truncated with an ellipsis (native tooltip shows the full text) when it overflows. If empty and `headerBar` is provided, the custom snippet is used instead |
-| `headerBar` | `Snippet` | `undefined` | Custom header content (takes over when `title` is empty) |
+| `title` | `string` | `''` | Plain-text title rendered by `CardHeader`. Single-line, truncated with an ellipsis (native tooltip shows the full text) when it overflows. If empty and `header` is provided, the custom snippet is used instead |
+| `header` | `Snippet` | `undefined` | Custom header content (takes over when `title` is empty) |
 | `actions` | `CardAction[]` | `[]` | Action bar items rendered at the bottom. Empty array → no footer |
 | `data` | `any` | `null` | Passed as the argument to each action's `callback(data)` |
-| `actionsAlign` | `'distribute' \| 'center' \| 'left' \| 'right'` | `'distribute'` | How action icons are laid out — see below |
+| `actions$align` | `'distribute' \| 'center' \| 'left' \| 'right'` | `'distribute'` | How action icons are laid out — see below |
 | `actionsGap` | `string` | `undefined` | Fixed spacing between icons for `'center'`/`'left'`/`'right'` (e.g. `'16px'`); falls back to `--uniface-spacing-actionbar` |
 | `variant` | `'plain' \| '3d'` | `'plain'` | `'3d'` adds a box-shadow to lift the card |
 | `style` | `string` | `''` | Inline CSS on the root |
-| `contentStyle` | `string` | `''` | Inline CSS on the body wrapper (`.card-content`) |
+| `content$style` | `string` | `''` | Inline CSS on the body wrapper (`.card-content`) |
 | `theme` | `string` | `''` | Theme value, exposed as `data-theme` on the root for scoped CSS |
 | `children` | `Snippet` | `undefined` | Card body |
 
@@ -62,11 +64,11 @@ interface CardAction {
 ### Custom header snippet
 
 ```svelte
-<Card {headerBar}>
+<Card {header}>
   <p>Body</p>
 </Card>
 
-{#snippet headerBar()}
+{#snippet header()}
   <header style="display:flex; align-items:center; gap:8px;">
     <i class="icon_google_star"></i>
     <strong>Custom title</strong>
@@ -97,13 +99,13 @@ interface CardAction {
 
 ### Action bar layout
 
-With few actions, `justify-content: space-between` (the old, fixed behavior) pushes them to opposite edges — two icons end up one at the far left, one at the far right. `actionsAlign` controls this:
+With few actions, `justify-content: space-between` (the old, fixed behavior) pushes them to opposite edges — two icons end up one at the far left, one at the far right. `actions$align` controls this:
 
 - `'distribute'` (default) — the row is split into as many equal-width slots as there are actions, each icon centered in its own slot. Equivalent to `justify-content: space-around`; icons never get pushed all the way to the edges regardless of count.
 - `'center'` / `'left'` / `'right'` — icons keep a fixed gap (`actionsGap`, default `--uniface-spacing-actionbar`) and the whole group is aligned as a block within the footer.
 
 ```svelte
-<Card title="Item Details" {actions} data={cardData} actionsAlign="center" actionsGap="24px">
+<Card title="Item Details" {actions} data={cardData} actions$align="center" actionsGap="24px">
   ...
 </Card>
 ```

package/dist/data_display/card/README_CN.md

@@ -1,8 +1,10 @@
 # Card 卡片
 
+> **5.1.0 重命名**：本文使用 [API 命名规范](../../../docs/NAMING_CN.md) 中的名字；旧名 `actionsAlign`, `contentStyle` 已在 5.1.0 移除（5.1.0 不保留兼容别名）。
+
 内容容器，可选标题栏（或自定义 header snippet）、内容体，以及底部操作栏。
 
-> Svelte 5 组件。自定义标题通过 `headerBar` snippet 传入；内容体就是默认的 children。
+> Svelte 5 组件。自定义标题通过 `header` snippet 传入；内容体就是默认的 children。
 
 ## 安装
 
@@ -23,15 +25,15 @@ npm install @ticatec/uniface-element
 
 | 属性 | 类型 | 默认值 | 描述 |
 |------|------|--------|------|
-| `title` | `string` | `''` | 纯文本标题，由 `CardHeader` 渲染。默认单行显示，超出宽度会用省略号截断（原生 tooltip 显示完整文字）。为空且传了 `headerBar` 时改用自定义 snippet |
-| `headerBar` | `Snippet` | `undefined` | 自定义标题内容（`title` 为空时生效） |
+| `title` | `string` | `''` | 纯文本标题，由 `CardHeader` 渲染。默认单行显示，超出宽度会用省略号截断（原生 tooltip 显示完整文字）。为空且传了 `header` 时改用自定义 snippet |
+| `header` | `Snippet` | `undefined` | 自定义标题内容（`title` 为空时生效） |
 | `actions` | `CardAction[]` | `[]` | 底部操作栏。空数组 → 不渲染底栏 |
 | `data` | `any` | `null` | 作为参数传给每个 action 的 `callback(data)` |
-| `actionsAlign` | `'distribute' \| 'center' \| 'left' \| 'right'` | `'distribute'` | 操作图标的排布方式，见下文 |
+| `actions$align` | `'distribute' \| 'center' \| 'left' \| 'right'` | `'distribute'` | 操作图标的排布方式，见下文 |
 | `actionsGap` | `string` | `undefined` | `'center'`/`'left'`/`'right'` 模式下图标之间的固定间距（比如 `'16px'`），不设则回退到 `--uniface-spacing-actionbar` |
 | `variant` | `'plain' \| '3d'` | `'plain'` | `'3d'` 加盒阴影让卡片浮起来 |
 | `style` | `string` | `''` | 根节点的内联 CSS |
-| `contentStyle` | `string` | `''` | 内容区域包裹层（`.card-content`）的内联 CSS |
+| `content$style` | `string` | `''` | 内容区域包裹层（`.card-content`）的内联 CSS |
 | `theme` | `string` | `''` | 主题值，作为 `data-theme` 写到根节点上方便做作用域 CSS |
 | `children` | `Snippet` | `undefined` | 卡片内容体 |
 
@@ -62,11 +64,11 @@ interface CardAction {
 ### 自定义 header snippet
 
 ```svelte
-<Card {headerBar}>
+<Card {header}>
   <p>内容</p>
 </Card>
 
-{#snippet headerBar()}
+{#snippet header()}
   <header style="display:flex; align-items:center; gap:8px;">
     <i class="icon_google_star"></i>
     <strong>自定义标题</strong>
@@ -97,13 +99,13 @@ interface CardAction {
 
 ### 操作栏排布方式
 
-当图标数量比较少时，`justify-content: space-between`（旧的固定行为）会把它们推到两端 —— 两个图标就变成一个在最左，一个在最右。`actionsAlign` 用来控制这个行为：
+当图标数量比较少时，`justify-content: space-between`（旧的固定行为）会把它们推到两端 —— 两个图标就变成一个在最左，一个在最右。`actions$align` 用来控制这个行为：
 
 - `'distribute'`（默认）—— 把整行按图标数量平分成若干等宽格子，每个图标在自己的格子里居中。等价于 `justify-content: space-around`；不管图标数量多少，都不会被拉到两端。
 - `'center'` / `'left'` / `'right'` —— 图标之间保持固定间距（`actionsGap`，默认回退到 `--uniface-spacing-actionbar`），整组图标作为一个整体在底栏里居中 / 左对齐 / 右对齐。
 
 ```svelte
-<Card title="项目详情" {actions} data={cardData} actionsAlign="center" actionsGap="24px">
+<Card title="项目详情" {actions} data={cardData} actions$align="center" actionsGap="24px">
   ...
 </Card>
 ```

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

@@ -1,4 +1,5 @@
 import Card from "./Card.svelte";
 import type CardAction from "./CardAction";
+import type { ActionHandler, CardActionsAlign } from "./CardAction";
 export default Card;
-export type { CardAction };
+export type { CardAction, ActionHandler, CardActionsAlign };

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

@@ -6,10 +6,4 @@ export default interface Column {
     weight?: number;
     formatter?: (value: any) => string;
     renderHTML?: boolean;
-    /**
-     * @deprecated Use renderHTML instead; "escapeHTML" reads as "this escapes HTML"
-     * when it actually means the opposite — true renders raw, trusted HTML. Still
-     * honored as a fallback for existing callers.
-     */
-    escapeHTML?: boolean;
 }

package/dist/data_display/concise_data_table/ConciseListTable.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import {onMount, tick} from 'svelte';
     import DataRow from "./DataRow.svelte";
-    import {type RowClickHandler, type TableOptions} from "./TableOptions";
+    import {type OnRowClick, type TableOptions} from "./TableOptions";
     import utils from "./utils";
     import type Column from "./Column";
 
@@ -10,7 +10,8 @@
         columns: Array<Column>;
         autoScroll?: boolean;
         scrollInterval?: number;
-        rowClickHandler?: RowClickHandler | null;
+        /** 行点击回调 */
+        onRowClick?: OnRowClick | null;
         options?: TableOptions;
         style?: string;
         class?: string;
@@ -23,7 +24,7 @@
         columns,
         autoScroll = false,
         scrollInterval = 2000,
-        rowClickHandler = null,
+        onRowClick = null,
         options = {},
         style = '',
         class: className = '',
@@ -122,7 +123,7 @@
     });
 
     const handleRowClick = (row: any) => () => {
-        rowClickHandler?.(row);
+        onRowClick?.(row);
     }
 
     const handleTableFocus = (event: FocusEvent) => {
@@ -133,7 +134,7 @@
         onblur?.(event);
     }
 
-    export function setFocus() {
+    export function focus() {
         const firstRow = tableContainer?.querySelector('.table-body .table-row');
         if (firstRow) {
             setTimeout(() => {

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