@ticatec/uniface-element 0.3.15 → 0.3.17

package/dist/ticatec-uniface-web.css

@@ -2054,17 +2054,41 @@
 
 .uniface-tree-view {
   position: relative;
+  display: flex;
+  flex-direction: column;
   background-color: var(--uniface-default-page-content-bg, #ffffff);
   color: var(--uniface-default-text-color, #374151);
   box-sizing: border-box;
   overflow: hidden;
-}
-.uniface-tree-view > div {
-  width: 100%;
   height: 100%;
-  box-sizing: border-box;
-  padding-right: 8px;
+}
+.uniface-tree-view .tree-view-title {
+  flex: 0 0 auto;
+  padding: 12px 16px;
+  background-color: var(--uniface-default-page-content-bg, #ffffff);
+  border-bottom: 1px solid var(--uniface-default-border-color, #e5e7eb);
+  cursor: pointer;
+  user-select: none;
+  z-index: 10;
+  overflow: hidden;
+}
+.uniface-tree-view .tree-view-title .title-text {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--uniface-default-text-color, #374151);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+  max-width: 100%;
+}
+.uniface-tree-view .tree-view-title:hover {
+  background-color: var(--uniface-treeview-item-bg, #EEF4FF);
+}
+.uniface-tree-view .tree-view-content {
+  flex: 1;
   overflow: auto;
+  padding-right: 8px;
   user-select: none;
 }
 .uniface-tree-view .tree-node {

package/dist/tree-view/README.md

@@ -12,7 +12,7 @@ npm install @ticatec/uniface-element
 
 ```typescript
 import TreeView, { type LazyLoader, type NodeVisibleFun, type OnNodeSelectionChange } from "@ticatec/uniface-element/TreeView";
-import TreeNodes, { type TreeNode } from "@ticatec/uniface-element/TreeNodes";
+import TreeNodes, { TreeNode, NodeViewOptions } from "@ticatec/uniface-element/TreeNodes";
 ```
 
 ## Basic Usage
@@ -68,6 +68,7 @@ import TreeNodes, { type TreeNode } from "@ticatec/uniface-element/TreeNodes";
 | `textField` | `string \| GetText<any>` | Required | Field name or function to get node text |
 | `activeNode` | `any` | `null` | Currently selected/active node |
 | `style` | `string` | `""` | Additional CSS styles |
+| `title` | `string` | `undefined` | Optional title displayed at the top of the tree (fixed position, doesn't scroll) |
 | `lazyLoader` | `LazyLoader \| null` | `null` | Lazy loading configuration |
 | `isVisible` | `NodeVisibleFun` | `null` | Function to determine node visibility |
 | `onchange` | `OnNodeSelectionChange` | `null` | Callback when node selection changes |
@@ -75,17 +76,45 @@ import TreeNodes, { type TreeNode } from "@ticatec/uniface-element/TreeNodes";
 | `onblur` | `((event: FocusEvent) => void) \| null` | `null` | Callback when tree loses focus |
 | `onContextMenu` | `OnContextMenu` | `null` | Right-click context menu handler |
 | `checkIsDirectory` | `CheckIsDirectory<any>` | Required | Function to check if node is a directory |
+| `version` | `number \| undefined` | `undefined` | Version number to trigger reactive updates (from TreeNodes object) |
 | `class` | `string` | `""` | CSS class name |
 
 ## Type Definitions
 
 ### TreeNode<T>
 ```typescript
-interface TreeNode<T> {
-  item: T;              // The actual data item
-  children?: Array<TreeNode<T>>;  // Child nodes
-  expand?: boolean;     // Whether node is expanded
-  parent?: TreeNode<T>; // Parent node reference
+class TreeNode<T> {
+  readonly item: T;              // The actual data item
+  readonly children: ReadonlyArray<TreeNode<T>>;  // Child nodes (read-only)
+  expand: boolean;               // Whether node is expanded
+  loading: boolean;              // Whether node is loading (for lazy loading)
+  parent: TreeNode<T> | null;    // Parent node reference
+
+  // Methods
+  append(childItem: T): void;           // Add a child node
+  detach(): void;                       // Remove this node from parent
+  moveTo(newParent: TreeNode<T>): void; // Move to different parent
+  replace(newItem: T): void;            // Replace node data
+  removeChild(childId: any): void;      // Remove specific child
+  removeChildren(): void;               // Remove all children
+}
+```
+
+### NodeViewOptions<T>
+```typescript
+class NodeViewOptions<T> {
+  keyField: keyof T;
+  textField: keyof T | ((data: T) => string);
+  iconField?: keyof T | ((data: T) => string);
+  cssClassField?: keyof T | ((data: T) => string);
+  styleField?: keyof T | ((data: T) => Record<string, string>);
+
+  // Methods
+  getText(data: T): string;
+  getIcon(data: T): string | undefined;
+  getCssClass(data: T): string | undefined;
+  getStyle(data: T): Record<string, string> | undefined;
+  getKey(data: T): any;
 }
 ```
 
@@ -119,14 +148,14 @@ type NodeVisibleFun = (node: TreeNode<any>) => boolean;
   let activeNode = null;
   
   const fileSystemData = [
-    { id: 1, name: "=� Documents", type: "folder", parent: null },
-    { id: 2, name: "=� Pictures", type: "folder", parent: null },
-    { id: 3, name: "=� Work", type: "folder", parent: 1 },
-    { id: 4, name: "=� Personal", type: "folder", parent: 1 },
-    { id: 5, name: "=� resume.pdf", type: "file", parent: 3 },
-    { id: 6, name: "=� cover-letter.doc", type: "file", parent: 3 },
-    { id: 7, name: "=� vacation.jpg", type: "file", parent: 2 },
-    { id: 8, name: "=� family.png", type: "file", parent: 2 }
+    { id: 1, name: "=� Documents", type: "folder", parent: null },
+    { id: 2, name: "=� Pictures", type: "folder", parent: null },
+    { id: 3, name: "=� Work", type: "folder", parent: 1 },
+    { id: 4, name: "=� Personal", type: "folder", parent: 1 },
+    { id: 5, name: "=� resume.pdf", type: "file", parent: 3 },
+    { id: 6, name: "=� cover-letter.doc", type: "file", parent: 3 },
+    { id: 7, name: "=� vacation.jpg", type: "file", parent: 2 },
+    { id: 8, name: "=� family.png", type: "file", parent: 2 }
   ];
   
   const fileTree = new TreeNodes({
@@ -645,10 +674,10 @@ type NodeVisibleFun = (node: TreeNode<any>) => boolean;
     switch (type) {
       case 'country': return '<
       case 'province':
-      case 'state': return '<�';
+      case 'state': return '<�';
       case 'district':
-      case 'city': return '<�';
-      default: return '=�';
+      case 'city': return '<�';
+      default: return '=�';
     }
   }
   
@@ -729,6 +758,101 @@ const treeNodes = new TreeNodes({
 treeNodes.setData(flatData); // Convert flat data to tree structure
 ```
 
+### Using TreeNode Methods
+
+TreeNode is now a class with built-in methods for data manipulation:
+
+```typescript
+// Get a node and manipulate it directly
+const node = treeNodes.nodes[0];
+
+// Add a child node
+node.append({
+  id: 'new-child',
+  name: 'New Child',
+  parent: node.item.id
+});
+
+// Remove the node from tree
+node.detach();
+
+// Move node to different parent
+const newParent = treeNodes.nodes[1];
+node.moveTo(newParent);
+
+// Replace node data
+node.replace({
+  id: node.item.id,
+  name: 'Updated Name',
+  parent: node.item.parent
+});
+
+// Remove specific child
+node.removeChild('child-id');
+
+// Remove all children
+node.removeChildren();
+
+// Access properties (read-only)
+console.log(node.item);      // Node data
+console.log(node.children);  // Read-only child array
+console.log(node.expand);    // Expanded state
+console.log(node.parent);    // Parent node
+```
+
+### Using NodeViewOptions
+
+NodeViewOptions allows you to configure how nodes are displayed:
+
+```typescript
+const viewOptions = new NodeViewOptions({
+  keyField: 'code',
+  textField: 'name',
+  // Or use a function for dynamic text
+  textField: (data) => `${data.code} - ${data.name}`,
+
+  // Optional: icon field
+  iconField: 'icon',
+  // Or use a function
+  iconField: (data) => data.type === 'folder' ? 'folder-icon' : 'file-icon',
+
+  // Optional: CSS class
+  cssClassField: 'status',
+  // Or use a function
+  cssClassField: (data) => data.active ? 'active-node' : 'inactive-node',
+
+  // Optional: dynamic styles
+  styleField: (data) => ({
+    color: data.color,
+    fontWeight: data.important ? 'bold' : 'normal'
+  })
+});
+
+// Use in TreeView
+<TreeView
+  nodes={treeNodes.nodes}
+  nodeViewOptions={viewOptions}
+/>
+```
+
+### Working with Tree Title
+
+The title prop adds a fixed header to the tree view:
+
+```typescript
+<TreeView
+  nodes={zones.nodes}
+  title="China"  // Displays "中国" at the top, doesn't scroll
+  // Clicking the title clears the activeNode selection
+/>
+```
+
+The title is useful for:
+- Displaying the root entity name (e.g., "China" for provinces)
+- Providing a way to clear selection by clicking
+- Adding context to hierarchical data
+- Organization charts showing company name
+
 ## Accessibility
 
 - Keyboard navigation with arrow keys and Enter
@@ -757,5 +881,7 @@ treeNodes.setData(flatData); // Convert flat data to tree structure
 ## Related Components
 
 - `TreeNodes` - Tree data structure utility
+- `TreeNode` - Tree node class with data manipulation methods
+- `NodeViewOptions` - View configuration for tree nodes
 - `ContextMenu` - Right-click context menu component
 - `LazyLoader` - Async data loading interface

package/dist/tree-view/README_CN.md

@@ -51,8 +51,9 @@ import TreeNodes, { type TreeNode } from "@ticatec/uniface-element/TreeNodes";
   }
 </script>
 
-<TreeView 
+<TreeView
   nodes={treeNodes.nodes}
+  version={treeNodes.version}
   textField="name"
   bind:activeNode
   onchange={handleSelectionChange}
@@ -75,6 +76,7 @@ import TreeNodes, { type TreeNode } from "@ticatec/uniface-element/TreeNodes";
 | `onblur` | `((event: FocusEvent) => void) \| null` | `null` | 树失去焦点时的回调函数 |
 | `onContextMenu` | `OnContextMenu` | `null` | 右键上下文菜单处理程序 |
 | `checkIsDirectory` | `CheckIsDirectory<any>` | 必需 | 判断节点是否为目录的函数 |
+| `version` | `number \| undefined` | `undefined` | 用于触发响应式更新的版本号（从 TreeNodes 对象传入） |
 | `class` | `string` | `""` | CSS 类名 |
 
 ## 类型定义
@@ -727,8 +729,146 @@ const treeNodes = new TreeNodes({
 });
 
 treeNodes.setData(flatData); // 将扁平数据转换为树结构
+
+// 动态添加节点
+treeNodes.append(newItem);
+
+// 移除节点
+treeNodes.removeItem(oldItem);
+
+// 移动节点
+treeNodes.moveTo(itemToMove, newParentId);
+```
+
+## 动态更新数据
+
+TreeView 的每个节点都提供了便捷的方法来操作树结构：
+
+### 节点方法
+
+所有从 TreeNodes 获取的节点都包含以下方法：
+
+- `node.append(childItem)` - 添加子节点到当前节点
+- `node.remove()` - 删除当前节点（从父节点中移除）
+- `node.replace(newItem)` - 替换当前节点的数据
+- `node.moveTo(newParentId)` - 将当前节点移动到另一个父节点下
+
+### 使用示例
+
+```svelte
+<script>
+  import TreeView from "@ticatec/uniface-element/TreeView";
+  import TreeNodes from "@ticatec/uniface-element/TreeNodes";
+
+  let activeNode = null;
+  let zones;
+
+  const treeNodes = new TreeNodes({
+    keyField: 'id',
+    textField: 'name',
+    parentKeyField: 'parent',
+    checkIsRoot: (item) => item.parent === null,
+    checkIsDirectory: (node) => node.children != null
+  });
+
+  treeNodes.setData(initialData);
+  zones = treeNodes;
+
+  // 添加子节点到选中的节点
+  function addNode() {
+    if (!activeNode) return;
+
+    const newItem = {
+      id: Date.now(),
+      name: "新节点",
+      parent: activeNode.item.id
+    };
+
+    // 方式1：直接在节点上调用 append 方法
+    activeNode.append(newItem);
+
+    // 方式2：使用 TreeNodes 的 append 方法（会自动找到父节点）
+    // treeNodes.append(newItem);
+
+    // version 会自动更新，TreeView 会重新渲染
+  }
+
+  // 删除选中的节点
+  function deleteNode() {
+    if (activeNode) {
+      // 直接在节点上调用 remove 方法
+      activeNode.remove();
+      activeNode = null;
+    }
+  }
+
+  // 替换节点的数据
+  function renameNode() {
+    if (activeNode) {
+      const newItem = {
+        ...activeNode.item,
+        name: "重命名后的节点"
+      };
+      activeNode.replace(newItem);
+    }
+  }
+
+  // 移动节点到另一个父节点
+  function moveNode() {
+    if (activeNode) {
+      const newParentId = prompt("输入新的父节点 ID:");
+      if (newParentId) {
+        activeNode.moveTo(newParentId);
+      }
+    }
+  }
+</script>
+
+<div>
+  <button on:click={addNode} disabled={!activeNode}>添加子节点</button>
+  <button on:click={deleteNode} disabled={!activeNode}>删除节点</button>
+  <button on:click={renameNode} disabled={!activeNode}>重命名</button>
+  <button on:click={moveNode} disabled={!activeNode}>移动节点</button>
+
+  <TreeView
+    nodes={treeNodes.nodes}
+    version={treeNodes.version}
+    textField="name"
+    bind:activeNode
+    checkIsDirectory={node => node.children != null}
+  />
+</div>
+```
+
+### TreeNodes 类方法
+
+如果你只有一个数据项，可以使用 `TreeNodes` 类的方法：
+
+```typescript
+// 添加新节点（会自动根据 parentKeyField 找到父节点）
+treeNodes.append(newItem);
+
+// 注意：删除、替换、移动操作建议直接在节点上调用方法
+// 因为这些操作通常针对特定的节点实例
+```
+
+### Lazy 节点注意事项
+
+对于使用 lazyLoader 的节点（尚未展开加载的节点），直接添加子节点会给出警告：
+
+```javascript
+// 如果父节点是 lazy 节点且尚未加载
+if (parentNode.children == null) {
+  console.warn('Cannot add child: parent is a lazy-loaded node');
+  // 节点会被添加到 nodeMap，但不会添加到 parent.children
+  // 这样不会干扰后续的 lazyLoader 行为
+}
 ```
 
+建议在使用前先展开节点，触发 lazyLoader 加载子节点。
+
+**重要提示**：必须将 `treeNodes.version` 传递给 `TreeView` 的 `version` 属性，以确保在数据变化时组件能够正确重新渲染。
+
 ## 可访问性
 
 - 支持使用箭头键和回车键进行键盘导航

package/dist/tree-view/TreeNodeView.svelte

@@ -1,20 +1,20 @@
 <script lang="ts">
 
-    import type {LazyLoader, NodeVisibleFun, OnNodeSelectionChange} from "./Types";
+    import type {TreeLazyLoader, NodeVisibleFun, OnNodeSelectionChange} from "./Types";
     import iconLoading from "../assets/loading.gif"
     import utils from "../common/utils";
     import type {OnContextMenu} from "../context-menu/ContextMenuItem";
-    import type {CheckIsDirectory, GetText, TreeNode} from "../lib/TreeNodes";
+    import type {CheckIsDirectory, GetText, ITreeNode} from "../lib/TreeNodes";
 
-    export let node: TreeNode<any>;
+    export let node: ITreeNode<any>;
     export let textField: string | GetText<any>;
-    export let lazyLoader: LazyLoader | null;
+    export let lazyLoader: TreeLazyLoader | null;
     export let activeNode: any;
     export let isVisible: NodeVisibleFun;
     export let onContextMenu: OnContextMenu;
     export let onNodeSelectionChange: OnNodeSelectionChange;
 
-    export let checkIsDirectory: CheckIsDirectory<TreeNode<any>>;
+    export let checkIsDirectory: CheckIsDirectory<ITreeNode<any>>;
 
     let loading: boolean = false;
 
@@ -26,7 +26,14 @@
         if (node.children == null && lazyLoader != null) {
             try {
                 loading = true;
-                node.children = await lazyLoader.load(node);
+                const loadedChildren = await lazyLoader.load(node);
+                // 通过 append 方法添加子节点
+                for (const child of loadedChildren) {
+                    node.append({
+                        ...child,
+                        expand: child.expand ?? false
+                    });
+                }
             } finally {
                 loading = false;
             }
@@ -39,11 +46,18 @@
         if (respond) {
             respond = false;
             if (isDirectory()) {
-                if (!node.children) {
-                    node.expand = false;
+                // 如果是懒加载模式且没有子节点，先加载子节点
+                if (lazyLoader != null && !node.children) {
                     await loadChildren();
+                    // 加载完成后，如果有子节点则展开
+                    const children = node.children;
+                    if (children && children.length > 0) {
+                        node.expand = true;
+                    }
+                } else {
+                    // 非懒加载模式或已有子节点，直接切换展开状态
+                    node.expand = !node.expand;
                 }
-                node.expand = !node.expand;
             }
             await utils.sleep(0.2);
             respond = true;

package/dist/tree-view/TreeNodeView.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { LazyLoader, NodeVisibleFun, OnNodeSelectionChange } from "./Types";
+import type { TreeLazyLoader, NodeVisibleFun, OnNodeSelectionChange } from "./Types";
 import type { OnContextMenu } from "../context-menu/ContextMenuItem";
-import type { CheckIsDirectory, GetText, TreeNode } from "../lib/TreeNodes";
+import type { CheckIsDirectory, GetText, ITreeNode } from "../lib/TreeNodes";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -15,14 +15,14 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const TreeNodeView: $$__sveltets_2_IsomorphicComponent<{
-    node: TreeNode<any>;
+    node: ITreeNode<any>;
     textField: string | GetText<any>;
-    lazyLoader: LazyLoader | null;
+    lazyLoader: TreeLazyLoader | null;
     activeNode: any;
     isVisible: NodeVisibleFun;
     onContextMenu: OnContextMenu;
     onNodeSelectionChange: OnNodeSelectionChange;
-    checkIsDirectory: CheckIsDirectory<TreeNode<any>>;
+    checkIsDirectory: CheckIsDirectory<ITreeNode<any>>;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/tree-view/TreeView.svelte

@@ -4,10 +4,10 @@
     import type {LazyLoader, NodeVisibleFun, OnNodeSelectionChange} from "./Types";
     import TreeNodeView from "./TreeNodeView.svelte";
     import type {OnContextMenu} from "../context-menu/ContextMenuItem";
-    import type {CheckIsDirectory, GetText, TreeNode} from "../lib/TreeNodes";
+    import type {CheckIsDirectory, GetText, ITreeNode} from "../lib/TreeNodes";
 
 
-    export let nodes: Array<TreeNode<any>>;
+    export let nodes: Array<ITreeNode<any>>;
     export let textField: string | GetText<any>;
     export let style: string = "";
     export let lazyLoader: LazyLoader | null = null;
@@ -19,9 +19,11 @@
     export let onblur: ((event: FocusEvent) => void) | null = null;
     export let onContextMenu: OnContextMenu = null as unknown as OnContextMenu;
     export let checkIsDirectory: CheckIsDirectory<any>;
+    export let version: number | undefined = undefined;
+    export let title: string | undefined = undefined;
     let className: string = "";
 
-    const onNodeSelectionChange = async (node: TreeNode<any>): Promise<boolean> => {
+    const onNodeSelectionChange = async (node: ITreeNode<any>): Promise<boolean> => {
         let accept: boolean = (await onchange?.(node));
         accept = accept == null ? true : accept;
         if (accept == null || accept == true) {
@@ -30,10 +32,48 @@
         return accept;
     }
 
+    const handleTitleClick = async () => {
+        let accept: boolean = (await onchange?.(null));
+        accept = accept == null ? true : accept;
+        if (accept == null || accept == true) {
+            activeNode = null;
+        }
+    }
+
+    // 通过 version 触发响应式更新：当 version 变化时，重新读取 nodes
+    // 这样可以确保在节点数据变化时，TreeView 能够正确重新渲染
+    $: reactiveNodes = version !== undefined ? nodes : nodes;
+
+    // 当 activeNode 变化时，如果是 lazy 节点且未加载，自动触发加载
+    $: if (activeNode && lazyLoader && activeNode.children == null) {
+        const loadLazyNode = async () => {
+            if (activeNode.children == null && lazyLoader != null) {
+                try {
+                    const loadedChildren = await lazyLoader.load(activeNode);
+                    // 通过 append 方法添加子节点
+                    for (const child of loadedChildren) {
+                        activeNode.append({
+                            ...child,
+                            expand: child.expand ?? false
+                        });
+                    }
+                } catch (error) {
+                    console.error('Failed to load lazy node:', error);
+                }
+            }
+        };
+        loadLazyNode();
+    }
+
 </script>
 <div class="uniface-tree-view {className}" {style} on:focus={onfocus} on:blur={onblur} tabindex="0">
-    <div>
-        {#each nodes as node}
+    {#if title}
+        <div class="tree-view-title" on:click={handleTitleClick}>
+            <span class="title-text">{title}</span>
+        </div>
+    {/if}
+    <div class="tree-view-content">
+        {#each reactiveNodes as node}
             <TreeNodeView {activeNode} {node} {textField} {lazyLoader} {onNodeSelectionChange} {isVisible} {checkIsDirectory} {onContextMenu}/>
         {/each}
     </div>

package/dist/tree-view/TreeView.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { LazyLoader, NodeVisibleFun, OnNodeSelectionChange } from "./Types";
 import type { OnContextMenu } from "../context-menu/ContextMenuItem";
-import type { CheckIsDirectory, GetText, TreeNode } from "../lib/TreeNodes";
+import type { CheckIsDirectory, GetText, ITreeNode } from "../lib/TreeNodes";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -15,7 +15,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const TreeView: $$__sveltets_2_IsomorphicComponent<{
-    nodes: Array<TreeNode<any>>;
+    nodes: Array<ITreeNode<any>>;
     textField: string | GetText<any>;
     style?: string;
     lazyLoader?: LazyLoader | null;
@@ -27,6 +27,8 @@ declare const TreeView: $$__sveltets_2_IsomorphicComponent<{
     onblur?: ((event: FocusEvent) => void) | null;
     onContextMenu?: OnContextMenu;
     checkIsDirectory: CheckIsDirectory<any>;
+    version?: number | undefined;
+    title?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {

package/dist/tree-view/Types.d.ts

@@ -1,23 +1,27 @@
-import type { CheckIsDirectory, TreeNode } from "../lib/TreeNodes";
-export type OnNodeSelectionChange = (node: TreeNode<any>) => Promise<boolean>;
+import type { CheckIsDirectory, ITreeNode } from "../lib/TreeNodes";
+export type OnNodeSelectionChange = (node: ITreeNode<any>) => Promise<boolean>;
 /**
  * 节点是否显示
  */
-export type NodeVisibleFun = (node: TreeNode<any>) => boolean;
+export type NodeVisibleFun = (node: ITreeNode<any>) => boolean;
 /**
  * 加载子节点
  */
-export type LoadChildrenFun = (item: TreeNode<any>) => Promise<Array<TreeNode<any>>>;
+export type LoadChildrenFun = (item: ITreeNode<any>) => Promise<Array<ITreeNode<any>>>;
 /**
- * 按需数据加载器
+ * 按需加载树节点的子节点
  */
-export interface LazyLoader {
+export interface TreeLazyLoader {
     /**
-     * 检查是否是枝节点
+     * 检查是否是枝节点（可能包含子节点）
      */
     isBranch: CheckIsDirectory<any>;
     /**
-     * 数据加载器
+     * 加载子节点数据
      */
     load: LoadChildrenFun;
 }
+/**
+ * @deprecated 使用 TreeLazyLoader 代替。LazyLoader 已弃用，将在未来版本中移除。
+ */
+export type LazyLoader = TreeLazyLoader;

package/dist/tree-view/index.d.ts

@@ -1,4 +1,5 @@
 import TreeView from "./TreeView.svelte";
-import type { LazyLoader, NodeVisibleFun, OnNodeSelectionChange, LoadChildrenFun } from "./Types";
+import type { TreeLazyLoader, LazyLoader, NodeVisibleFun, OnNodeSelectionChange, LoadChildrenFun } from "./Types";
+export type { ITreeNode, NodeViewOptions } from "../lib/TreeNodes";
 export default TreeView;
-export type { LazyLoader, NodeVisibleFun, OnNodeSelectionChange, LoadChildrenFun };
+export type { TreeLazyLoader, LazyLoader, NodeVisibleFun, OnNodeSelectionChange, LoadChildrenFun };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ticatec/uniface-element",
-  "version": "0.3.15",
+  "version": "0.3.17",
   "description": "A comprehensive UI component library for Svelte applications with rich form controls, data tables, layouts and interactive elements",
   "keywords": [
     "svelte",