@ticatec/uniface-element 5.0.4 → 5.1.0

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>;

package/dist/data_display/tree_view/TreeView.svelte

@@ -2,7 +2,7 @@
 
     import { untrack, type Snippet } from 'svelte';
     import {SvelteSet} from "svelte/reactivity";
-    import type {TreeLazyLoader, NodeVisibleFun, OnNodeSelectionChange} from "../../types";
+    import type {TreeLazyLoader, IsNodeVisible, BeforeNodeChange, OnNodeChange} from "../../types";
     import TreeNodeView from "./TreeNodeView.svelte";
     import type {OnContextMenu} from "../../overlay/context-menu/ContextMenuItem";
     import type {HierarchyTree, IHierarchyData} from "../../lib";
@@ -32,11 +32,19 @@
         lazyLoader?: TreeLazyLoader | null;
         activeNode?: any;
         class?: string;
-        isVisible?: NodeVisibleFun;
-        onchange?: OnNodeSelectionChange;
+        isVisible?: IsNodeVisible;
+        /**
+         * 切换选中节点前的否决钩子：返回 false 阻止切换；node 为 null 表示取消选中。
+         */
+        beforeChange?: BeforeNodeChange;
+        /**
+         * 选中节点变化后的通知。
+         */
+        onchange?: OnNodeChange;
         onfocus?: (event: FocusEvent) => void;
         onblur?: (event: FocusEvent) => void;
-        onContextMenu?: OnContextMenu;
+        /** 节点右键菜单回调 (event, node) */
+        oncontextmenu?: OnContextMenu;
         title?: string;
         /** 初始展开多少层（0 = 全部折叠，1 = 展开根节点，依此类推）。默认 0。 */
         defaultExpandDepth?: number;
@@ -53,10 +61,11 @@
         activeNode = $bindable<any>(null),
         class: className = '',
         isVisible,
+        beforeChange,
         onchange,
         onfocus,
         onblur,
-        onContextMenu,
+        oncontextmenu,
         title = undefined,
         defaultExpandDepth = 0
     }: Props = $props();
@@ -90,14 +99,17 @@
         return lazyLoader == null ? !node.isLeaf : lazyLoader.isBranch(node);
     };
 
-    const onNodeSelectionChange = async (node: IHierarchyData<any>): Promise<boolean> => {
-        let accept: boolean | undefined = (await onchange?.(node));
-        accept = accept == null ? true : accept;
-        if (accept == null || accept == true) {
+    // 统一的选中切换入口：先问 beforeChange（或旧语义的 onchange），通过后再更新并通知
+    const changeActive = async (node: IHierarchyData<any> | null): Promise<boolean> => {
+        const accept = beforeChange == null || (await beforeChange(node)) !== false;
+        if (accept) {
             activeNode = node;
+            onchange?.(node);
         }
         return accept;
-    }
+    };
+
+    const selectNode = async (node: IHierarchyData<any>): Promise<void> => { await changeActive(node); };
 
     const handleToggle = async (node: IHierarchyData<any>) => {
         const key = tree.getKey(node.data);
@@ -132,11 +144,7 @@
     }
 
     const handleTitleClick = async () => {
-        let accept: boolean | undefined = (await onchange?.(null as any));
-        accept = accept == null ? true : accept;
-        if (accept == null || accept == true) {
-            activeNode = null;
-        }
+        await changeActive(null);
     }
 
 </script>
@@ -158,12 +166,12 @@
                     {nodeIcon}
                     {chevronIcon}
                     {activeNode}
-                    isBranch={isBranch(node)}
-                    {onContextMenu}
-                    {onNodeSelectionChange}
+                    expandable={isBranch(node)}
+                    {oncontextmenu}
+                    onselect={selectNode}
                     expanded={expanded.has(tree.getKey(node.data))}
                     loading={loading.has(tree.getKey(node.data))}
-                    onToggle={() => handleToggle(node)}
+                    ontoggle={() => handleToggle(node)}
                 />
             {/if}
         {/each}

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

@@ -1,5 +1,5 @@
 import { type Snippet } from 'svelte';
-import type { TreeLazyLoader, NodeVisibleFun, OnNodeSelectionChange } from "../../types";
+import type { TreeLazyLoader, IsNodeVisible, BeforeNodeChange, OnNodeChange } from "../../types";
 import type { OnContextMenu } from "../../overlay/context-menu/ContextMenuItem";
 import type { HierarchyTree, IHierarchyData } from "../../lib";
 type GetText<T> = (item: T) => string;
@@ -23,11 +23,19 @@ interface Props {
     lazyLoader?: TreeLazyLoader | null;
     activeNode?: any;
     class?: string;
-    isVisible?: NodeVisibleFun;
-    onchange?: OnNodeSelectionChange;
+    isVisible?: IsNodeVisible;
+    /**
+     * 切换选中节点前的否决钩子：返回 false 阻止切换；node 为 null 表示取消选中。
+     */
+    beforeChange?: BeforeNodeChange;
+    /**
+     * 选中节点变化后的通知。
+     */
+    onchange?: OnNodeChange;
     onfocus?: (event: FocusEvent) => void;
     onblur?: (event: FocusEvent) => void;
-    onContextMenu?: OnContextMenu;
+    /** 节点右键菜单回调 (event, node) */
+    oncontextmenu?: OnContextMenu;
     title?: string;
     /** 初始展开多少层（0 = 全部折叠，1 = 展开根节点，依此类推）。默认 0。 */
     defaultExpandDepth?: number;

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

@@ -1,8 +1,7 @@
 import TreeView, { type GetIcon, type NodeIconContext, type ChevronIconContext } from "./TreeView.svelte";
-import type { TreeLazyLoader, NodeVisibleFun, OnNodeSelectionChange, LoadChildrenFun } from "../../types";
+import type { TreeLazyLoader, IsNodeVisible, BeforeNodeChange, OnNodeChange, LoadChildren } from "../../types";
 import type { IHierarchyData } from "../../lib";
 export type { IHierarchyData };
-export type LazyLoader = TreeLazyLoader;
 export default TreeView;
-export type { TreeLazyLoader, NodeVisibleFun, OnNodeSelectionChange, LoadChildrenFun };
+export type { TreeLazyLoader, IsNodeVisible, BeforeNodeChange, OnNodeChange, LoadChildren };
 export type { GetIcon, NodeIconContext, ChevronIconContext };

package/dist/data_table/DataTable.svelte

@@ -9,8 +9,9 @@
     import FixedColumnsPanel from "./parts/FixedColumnsPanel.svelte";
     import ActionPanel from "./parts/ActionsPanel.svelte";
     import { OrderDirection } from "./lib/OrderDirection";
-    import type { CompareFunction } from "./lib/CompareFunction";
+    import type { CompareFn } from "./lib/CompareFn";
     import type { GetRowFontStyle } from "../types";
+    import { computeVirtualWindow } from "./lib/virtualWindow";
 
     interface Props {
         columns: Array<DataColumn>;
@@ -23,9 +24,17 @@
         inlineRowHeight?: number;
         rowBorder?: boolean;
         colBorder?: boolean;
-        emptyIndicator?: string;
+        /** 无数据时显示的文案 */
+        emptyText?: string;
         getRowFontStyle?: GetRowFontStyle<T>;
         style?: string;
+        /**
+         * 行虚拟化(窗口化渲染):仅渲染可视区域附近的行,大数据集(数千行以上)
+         * 建议开启。要求所有行高度一致(即统一的 rowHeight),因此默认关闭。
+         */
+        virtual?: boolean;
+        /** 虚拟化时可视区上下额外渲染的行数。 */
+        overscan?: number;
     }
 
     let {
@@ -39,9 +48,11 @@
         inlineRowHeight = $bindable(80),
         rowBorder = false,
         colBorder = false,
-        emptyIndicator = undefined,
+        emptyText,
         getRowFontStyle = undefined,
         style = '',
+        virtual = false,
+        overscan = 8,
     }: Props = $props();
 
     const id: string = Math.round(new Date().getTime() + Math.random() * 1000).toString(36);
@@ -59,6 +70,23 @@
     let scrollTop = $state(0);
     let inlineComponent = $state<any>(null);
 
+    // Measured by ContentPanel (its scrollable data area); drives the virtual window.
+    let viewportHeight = $state(0);
+    let expandIndex = $derived(expandRow ? rows.indexOf(expandRow) : -1);
+    // One shared window for all three panels (frozen / content / actions), so the
+    // slices they render always cover the same absolute row indices.
+    let vwindow = $derived(virtual
+        ? computeVirtualWindow({
+            scrollTop,
+            viewportHeight,
+            rowHeight,
+            count: rows.length,
+            overscan,
+            expandIndex,
+            inlineRowHeight
+        })
+        : null);
+
     let orderColumn = $state<DataColumn | null>(null);
     let orderDirection = $state<OrderDirection>(OrderDirection.Ascending);
 
@@ -103,14 +131,14 @@
         }
     });
 
-    const handleWidthChange = () => {
+    const onWidthChange = () => {
         if (!table) return;
         tabStyle = table.generateTemplateStyle();
         tabWidth = table.width;
         frozenWidth = table.frozenWidth;
     };
 
-    const sortRows = (compareFun: CompareFunction, descending: boolean) => {
+    const sortRows = (compareFun: CompareFn, descending: boolean) => {
         if (!table) return;
         expandRow = null;
         let oList = list.sort(compareFun);
@@ -118,7 +146,7 @@
         rows = table.rows;
     };
 
-    const handleCellClick = (col: DataColumn) => {
+    const onCellClick = (col: DataColumn) => {
         if (col.compareFunction != null) {
             if (col.field === orderColumn?.field) {
                 orderDirection = orderDirection == OrderDirection.Ascending
@@ -132,7 +160,7 @@
         }
     };
 
-    const handleRowExpand = async (row: TableRow) => {
+    const onRowExpand = async (row: TableRow) => {
         if (row == expandRow) {
             expandRow = null;
             inlineComponent = null;
@@ -147,11 +175,11 @@
     {#if table && dataColumns && fixedCols}
         {#if indicatorColumn || fixedCols.length > 0}
             <FixedColumnsPanel
-                {handleRowExpand}
+                {onRowExpand}
                 bind:selectedRows
                 {orderDirection}
                 orderColumn={orderColumn as DataColumn}
-                {handleCellClick}
+                {onCellClick}
                 {indicatorColumn}
                 bind:expandRow
                 {rowHeight}
@@ -159,9 +187,10 @@
                 {fixedCols}
                 {inlineRowHeight}
                 {rows}
-                {handleWidthChange}
+                {onWidthChange}
                 width={frozenWidth}
                 bind:scrollTop
+                {vwindow}
             />
         {/if}
 
@@ -169,8 +198,8 @@
             columns={dataColumns}
             {orderDirection}
             orderColumn={orderColumn as DataColumn}
-            {handleWidthChange}
-            {handleCellClick}
+            {onWidthChange}
+            {onCellClick}
             {tabWidth}
             bind:rows
             bind:scrollTop
@@ -181,14 +210,16 @@
             {table}
             {inlineComponent}
             bind:inlineRowHeight
-            {emptyIndicator}
-            displayHorizontalScroll={actionsColumn != null || indicatorColumn != null || fixedCols.length > 0}
+            {emptyText}
+            showHorizontalScroll={actionsColumn != null || indicatorColumn != null || fixedCols.length > 0}
             showVerticalScroll={actionsColumn == null}
             {getRowFontStyle}
+            {vwindow}
+            bind:viewportHeight
         />
     {/if}
 
     {#if actionsColumn}
-        <ActionPanel {expandRow} {rowHeight} {headerHeight} {actionsColumn} {rows} {inlineRowHeight} bind:scrollTop />
+        <ActionPanel {expandRow} {rowHeight} {headerHeight} {actionsColumn} {rows} {inlineRowHeight} bind:scrollTop {vwindow} />
     {/if}
 </div>

package/dist/data_table/DataTable.svelte.d.ts

@@ -14,9 +14,17 @@ declare function $$render<T = any>(): {
         inlineRowHeight?: number;
         rowBorder?: boolean;
         colBorder?: boolean;
-        emptyIndicator?: string;
+        /** 无数据时显示的文案 */
+        emptyText?: string;
         getRowFontStyle?: GetRowFontStyle<T>;
         style?: string;
+        /**
+         * 行虚拟化(窗口化渲染):仅渲染可视区域附近的行,大数据集(数千行以上)
+         * 建议开启。要求所有行高度一致(即统一的 rowHeight),因此默认关闭。
+         */
+        virtual?: boolean;
+        /** 虚拟化时可视区上下额外渲染的行数。 */
+        overscan?: number;
     };
     exports: {};
     bindings: "inlineRowHeight" | "selectedRows";

package/dist/data_table/README.md

@@ -1,5 +1,7 @@
 # DataTable
 
+> **Renamed in 5.1.0**: this document uses the names from the [API Naming Guide](../../docs/NAMING.md); the old names `displayNo`, `emptyIndicator`, `warp` were removed in 5.1.0 (no compatibility aliases are kept).
+
 A powerful and flexible data table component featuring sorting, row selection, inline expansion, custom cell formatting, action columns, frozen columns, and row actions. Perfect for displaying large datasets with complex data structures and user interactions.
 
 ## Installation
@@ -49,7 +51,7 @@ import type { DataColumn, ActionsColumn, IndicatorColumn, RowAction } from "@tic
 | `inlineRowHeight` | `number` | `80` | Height of expanded inline rows |
 | `rowBorder` | `boolean` | `false` | Whether to show horizontal row borders |
 | `colBorder` | `boolean` | `false` | Whether to show vertical column borders |
-| `emptyIndicator` | `string \| undefined` | `undefined` | Text to show when no data is available |
+| `emptyText` | `string \| undefined` | `undefined` | Text to show when no data is available |
 | `style` | `string` | `""` | Additional CSS styles |
 
 ## Types
@@ -64,7 +66,7 @@ interface DataColumn {
   frozen?: boolean;                // Whether column is frozen/fixed
   align?: 'left' | 'center' | 'right';  // Text alignment
   minWidth?: number;               // Minimum column width
-  warp?: boolean;                  // Whether text can wrap
+  wrap?: boolean;                  // Whether text can wrap
   formatter?: FormatCell;          // Cell formatting function
   escapeHTML?: boolean;            // Whether to escape HTML in content
   href?: HrefBuilder;              // Link builder function
@@ -92,7 +94,7 @@ interface ActionsColumn {
 interface IndicatorColumn {
   width: number;                   // Column width in pixels
   selectable?: boolean;            // Whether rows are selectable
-  displayNo?: boolean;             // Whether to show row numbers
+  showRowNo?: boolean;             // Whether to show row numbers
   buildInlineComponent?: (data: any) => Promise<any>;  // Inline component builder
 }
 ```
@@ -189,7 +191,7 @@ interface RowAction {
   const indicatorColumn = {
     width: 60,
     selectable: true,
-    displayNo: true
+    showRowNo: true
   };
   
   const actionsColumn = {
@@ -334,7 +336,7 @@ interface RowAction {
   const indicatorColumn = {
     width: 50,
     selectable: false,
-    displayNo: false,
+    showRowNo: false,
     buildInlineComponent: async (orderData) => {
       // Simulate API call to fetch order details
       await new Promise(resolve => setTimeout(resolve, 1000));
@@ -372,7 +374,7 @@ interface RowAction {
   list={orders} 
   {indicatorColumn}
   inlineRowHeight={200}
-  emptyIndicator="No orders found"
+  emptyText="No orders found"
 />
 ```
 
@@ -509,7 +511,7 @@ interface RowAction {
   const indicatorColumn = {
     width: 60,
     selectable: true,
-    displayNo: true,
+    showRowNo: true,
     buildInlineComponent: async (product) => {
       // Simulate loading product details
       return ProductDetails;
@@ -607,7 +609,7 @@ interface RowAction {
       inlineRowHeight={300}
       rowBorder={true}
       colBorder={true}
-      emptyIndicator="No products found. Add some products to get started."
+      emptyText="No products found. Add some products to get started."
     />
   </div>
   

package/dist/data_table/README_CN.md

@@ -1,5 +1,7 @@
 # DataTable 数据表格组件
 
+> **5.1.0 重命名**：本文使用 [API 命名规范](../../docs/NAMING_CN.md) 中的名字；旧名 `displayNo`, `emptyIndicator`, `warp` 已在 5.1.0 移除（5.1.0 不保留兼容别名）。
+
 一个功能强大且灵活的数据表格组件，支持排序、行选择、内联扩展、自定义单元格格式、操作列、冻结列和行操作。非常适合显示大型数据集、复杂数据结构和用户交互。
 
 ## 安装
@@ -49,7 +51,7 @@ import type { DataColumn, ActionsColumn, IndicatorColumn, RowAction } from "@tic
 | `inlineRowHeight` | `number` | `80` | 扩展内联行高度（像素） |
 | `rowBorder` | `boolean` | `false` | 是否显示水平行边框 |
 | `colBorder` | `boolean` | `false` | 是否显示垂直列边框 |
-| `emptyIndicator` | `string \| undefined` | `undefined` | 无数据时显示的文本 |
+| `emptyText` | `string \| undefined` | `undefined` | 无数据时显示的文本 |
 | `style` | `string` | `""` | 附加 CSS 样式 |
 
 ## 类型
@@ -64,7 +66,7 @@ interface DataColumn {
   frozen?: boolean;                // 列是否冻结/固定
   align?: 'left' | 'center' | 'right';  // 文本对齐方式
   minWidth?: number;               // 最小列宽
-  warp?: boolean;                  // 文本是否可换行
+  wrap?: boolean;                  // 文本是否可换行
   formatter?: FormatCell;          // 单元格格式化函数
   escapeHTML?: boolean;            // 是否转义 HTML 内容
   href?: HrefBuilder;              // 链接生成函数
@@ -92,7 +94,7 @@ interface ActionsColumn {
 interface IndicatorColumn {
   width: number;                   // 列宽（像素）
   selectable?: boolean;            // 行是否可选择
-  displayNo?: boolean;             // 是否显示行号
+  showRowNo?: boolean;             // 是否显示行号
   buildInlineComponent?: (data: any) => Promise<any>;  // 内联组件生成器
 }
 ```
@@ -189,7 +191,7 @@ interface RowAction {
   const indicatorColumn = {
     width: 60,
     selectable: true,
-    displayNo: true
+    showRowNo: true
   };
   
   const actionsColumn = {
@@ -334,7 +336,7 @@ interface RowAction {
   const indicatorColumn = {
     width: 50,
     selectable: false,
-    displayNo: false,
+    showRowNo: false,
     buildInlineComponent: async (orderData) => {
       // 模拟 API 调用以获取订单详情
       await new Promise(resolve => setTimeout(resolve, 1000));
@@ -372,7 +374,7 @@ interface RowAction {
   list={orders} 
   {indicatorColumn}
   inlineRowHeight={200}
-  emptyIndicator="未找到订单"
+  emptyText="未找到订单"
 />
 ```
 
@@ -509,7 +511,7 @@ interface RowAction {
   const indicatorColumn = {
     width: 60,
     selectable: true,
-    displayNo: true,
+    showRowNo: true,
     buildInlineComponent: async (product) => {
       // 模拟加载产品详情
       return ProductDetails;
@@ -607,7 +609,7 @@ interface RowAction {
       inlineRowHeight={300}
       rowBorder={true}
       colBorder={true}
-      emptyIndicator="未找到产品，请添加一些产品以开始。"
+      emptyText="未找到产品，请添加一些产品以开始。"
     />
   </div>
   

package/dist/data_table/UniDataTable.d.ts

@@ -1,9 +1,9 @@
 import type DataColumn from "./lib/DataColumn";
 import type TableRow from "./parts/TableRow";
-export type RowEventHandler = (row: TableRow) => void;
-export type RowSelectEventHandler = (row: TableRow, value: boolean) => void;
-export type TableEventHandler = () => void;
-export type SelectionEventHandler = (value: boolean) => void;
+export type OnRowExpand = (row: TableRow) => void;
+export type OnRowSelect = (row: TableRow, value: boolean) => void;
+export type OnWidthChange = () => void;
+export type OnSelectAll = (value: boolean) => void;
 export declare enum SelectionMode {
     All = 1,
     Partial = 0,

package/dist/data_table/UniDataTable.js

@@ -48,7 +48,7 @@ export default class UniDataTable {
             if (col.visible != false) {
                 this._frozenWidth += col.width;
                 colStyle += `#tab-${this.id} .fz_col-${idx - inv} {width: ${col.width}px; text-align: ${col.align ?? 'left'}}\n`;
-                if (col.warp) {
+                if (col.wrap) {
                     colStyle += `#tab-${this.id} .fz_col-${idx - inv}>div {white-space: wrap}\n`;
                 }
             }
@@ -61,7 +61,7 @@ export default class UniDataTable {
             if (col.visible != false) {
                 this._width += col.width;
                 colStyle += `#tab-${this.id} .col-${idx - inv} { width: ${col.width}px ; text-align: ${col.align ?? 'left'} }\n`;
-                if (col.warp) {
+                if (col.wrap) {
                     colStyle += `#tab-${this.id} .col-${idx - inv}>div {white-space: wrap}\n`;
                 }
             }

package/dist/data_table/index.d.ts

@@ -1,13 +1,13 @@
 import DataTable from "./DataTable.svelte";
 import type ActionsColumn from "./lib/ActionsColumn";
-import type { FormatCell, CellHint } from "./lib/FormatCell";
+import type { FormatCellFn, CellHint } from "./lib/FormatCellFn";
 import type IndicatorColumn from "./lib/IndicatorColumn";
 import type RowAction from "./lib/RowAction";
-import type { GetRowActions, ActionFunction } from "./lib/RowAction";
+import type { GetRowActions, ActionHandler } from "./lib/RowAction";
 import type DataColumn from "./lib/DataColumn";
-import type { CellAction } from "../types";
+import type { CellAction } from "./lib/CellAction";
 import ActionCell from "./parts/ActionCell.svelte";
 export default DataTable;
 export { ActionCell };
-export type { ActionsColumn, IndicatorColumn, FormatCell, CellHint, DataColumn };
-export type { RowAction, GetRowActions, ActionFunction, CellAction };
+export type { ActionsColumn, IndicatorColumn, FormatCellFn, CellHint, DataColumn };
+export type { RowAction, GetRowActions, ActionHandler, CellAction };