@ticatec/uniface-element 0.3.16 → 0.3.18

package/dist/nav-menu/Menus.js

@@ -1,5 +1,6 @@
-import { CommonTreeNodes } from "../lib/TreeNodes";
-export default class Menus extends CommonTreeNodes {
+import {} from "../lib/TreeNodes";
+import TreeNodes from "../lib/TreeNodes";
+export default class Menus extends TreeNodes {
     /**
      * 删除所有没有子节点的目录类型节点
      */
@@ -12,8 +13,9 @@ export default class Menus extends CommonTreeNodes {
                 }
                 else {
                     if (this.checkIsDirectory?.(node)) {
-                        nodes.splice(i, 1); // 从父节点的 children 中移除
-                        this.nodeMap.delete(node.item[this.keyField]); // 从 nodeMap 中移除
+                        node.detach();
+                        //nodes.splice(i, 1); // 从父节点的 children 中移除
+                        //this.nodeMap.delete(node._item[this.keyField]); // 从 nodeMap 中移除
                     }
                 }
             }

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 |
@@ -82,11 +83,38 @@ import TreeNodes, { type TreeNode } from "@ticatec/uniface-element/TreeNodes";
 
 ### 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;
 }
 ```
 
@@ -730,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
@@ -758,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/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;
 
@@ -27,11 +27,10 @@
             try {
                 loading = true;
                 const loadedChildren = await lazyLoader.load(node);
-                // 初始化新加载的子节点，确保它们的 expand 属性为 false
-                node.children = loadedChildren.map(child => ({
-                    ...child,
-                    expand: child.expand ?? false
-                }));
+                for (const childData of loadedChildren) {
+                    node.append(childData);
+                }
+                node.expand = true;
             } finally {
                 loading = false;
             }
@@ -48,7 +47,7 @@
                 if (lazyLoader != null && !node.children) {
                     await loadChildren();
                     // 加载完成后，如果有子节点则展开
-                    const children = node.children as TreeNode<any>[] | undefined;
+                    const children = node.children;
                     if (children && children.length > 0) {
                         node.expand = 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;
@@ -20,9 +20,10 @@
     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) {
@@ -31,6 +32,14 @@
         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;
@@ -41,10 +50,11 @@
             if (activeNode.children == null && lazyLoader != null) {
                 try {
                     const loadedChildren = await lazyLoader.load(activeNode);
-                    activeNode.children = loadedChildren.map(child => ({
-                        ...child,
-                        expand: child.expand ?? false
-                    }));
+                    // 通过 append 方法添加子节点，并设置 expand
+                    for (const childData of loadedChildren) {
+                        const childNode = activeNode.append(childData);
+                        childNode.expand = childData.expand ?? false;
+                    }
                 } catch (error) {
                     console.error('Failed to load lazy node:', error);
                 }
@@ -55,7 +65,12 @@
 
 </script>
 <div class="uniface-tree-view {className}" {style} on:focus={onfocus} on:blur={onblur} tabindex="0">
-    <div>
+    {#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}

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;
@@ -28,6 +28,7 @@ declare const TreeView: $$__sveltets_2_IsomorphicComponent<{
     onContextMenu?: OnContextMenu;
     checkIsDirectory: CheckIsDirectory<any>;
     version?: number | undefined;
+    title?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {

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

@@ -1,13 +1,13 @@
-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<any>>;
 /**
  * 按需加载树节点的子节点
  */

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

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

package/package.json

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