@ticatec/uniface-element 0.3.14 → 0.3.16

package/dist/lib/TreeNodes.js

@@ -11,6 +11,7 @@ export class CommonTreeNodes {
     compareFun;
     expendDepth;
     _nodes = [];
+    _version = 0;
     constructor(options) {
         this.checkIsRoot = options.checkIsRoot;
         this.compareFun = options.compareFun;
@@ -21,15 +22,150 @@ export class CommonTreeNodes {
         this.expendDepth = options.expendDepth ?? 1;
         this.checkIsDirectory = options.checkIsDirectory;
     }
+    touch() {
+        this._version++;
+    }
+    /**
+     * 创建带有方法的节点
+     */
+    createNodeWithMethods(item) {
+        const node = {
+            item,
+            expand: false,
+            append: (childItem) => this.addNodeToNode(node, childItem),
+            remove: () => this.removeNode(node),
+            replace: (newItem) => this.replaceNodeItem(node, newItem),
+            moveTo: (newParentId) => this.moveNodeTo(node, newParentId),
+            removeChild: (childId) => this.removeChildNode(node, childId),
+            removeChildren: () => this.removeChildrenNodes(node)
+        };
+        return node;
+    }
+    /**
+     * 添加子节点到指定节点
+     */
+    addNodeToNode(parentNode, childItem) {
+        // 如果父节点还没有 children（可能是 lazy 节点）
+        // 自动触发 lazyLoader 加载或初始化 children 数组
+        if (parentNode.children == null) {
+            parentNode.children = [];
+        }
+        const childNode = this.createNodeWithMethods(childItem);
+        parentNode.children = [...parentNode.children, childNode];
+        if (this.compareFun) {
+            parentNode.children = parentNode.children.sort((n1, n2) => {
+                return this.compareFun(n1.item, n2.item);
+            });
+        }
+        parentNode.expand = true;
+        this.nodeMap.set(childItem[this.keyField], childNode);
+        this.touch();
+    }
+    /**
+     * 删除指定节点
+     */
+    removeNode(node) {
+        const idKey = node.item[this.keyField];
+        const parentKey = node.item[this.parentKeyField];
+        const parentNode = this.nodeMap.get(parentKey);
+        this.nodeMap.delete(idKey);
+        if (parentNode) {
+            if (parentNode.children) {
+                parentNode.children = parentNode.children.filter(el => el.item[this.keyField] != idKey);
+            }
+        }
+        else {
+            // 是根节点
+            this._nodes = this._nodes.filter(el => el.item[this.keyField] != idKey);
+        }
+        this.touch();
+    }
+    /**
+     * 替换节点的数据
+     */
+    replaceNodeItem(node, newItem) {
+        node.item = newItem;
+        // 如果排序字段改变了，需要重新排序
+        const parentKey = node.item[this.parentKeyField];
+        const parentNode = this.nodeMap.get(parentKey);
+        if (parentNode && parentNode.children && parentNode.children.length > 0) {
+            parentNode.children = parentNode.children.sort((n1, n2) => {
+                return this.compareFun?.(n1.item, n2.item);
+            });
+        }
+        else {
+            this._nodes.sort((n1, n2) => {
+                return this.compareFun?.(n1.item, n2.item);
+            });
+        }
+        this.touch();
+    }
+    /**
+     * 将节点移动到新的父节点下
+     */
+    moveNodeTo(node, newParentId) {
+        const newParent = this.nodeMap.get(newParentId);
+        const currentParentKey = node.item[this.parentKeyField];
+        const currentParent = this.nodeMap.get(currentParentKey);
+        if (!newParent || !currentParent) {
+            console.warn('Cannot move node: parent not found');
+            return;
+        }
+        // 从当前父节点移除
+        if (currentParent.children) {
+            currentParent.children = currentParent.children.filter(el => el.item[this.keyField] != node.item[this.keyField]);
+        }
+        // 如果新父节点还没有 children，初始化数组
+        if (newParent.children == null) {
+            newParent.children = [];
+        }
+        // 添加到新父节点
+        newParent.children = [...newParent.children, node];
+        if (this.compareFun) {
+            newParent.children = newParent.children.sort((n1, n2) => {
+                return this.compareFun(n1.item, n2.item);
+            });
+        }
+        // 更新节点的 parentKeyField
+        node.item[this.parentKeyField] = newParentId;
+        this.touch();
+    }
+    /**
+     * 删除指定节点的某个子节点
+     */
+    removeChildNode(parentNode, childId) {
+        if (!parentNode.children)
+            return;
+        const childNode = parentNode.children.find(child => child.item[this.keyField] == childId);
+        if (!childNode)
+            return;
+        // 从 children 数组中移除
+        parentNode.children = parentNode.children.filter(child => child.item[this.keyField] != childId);
+        // 从 nodeMap 中删除
+        this.nodeMap.delete(childId);
+        this.touch();
+    }
+    /**
+     * 删除指定节点的所有子节点
+     */
+    removeChildrenNodes(parentNode) {
+        if (!parentNode.children)
+            return;
+        // 从 nodeMap 中删除所有子节点
+        for (const child of parentNode.children) {
+            const childId = child.item[this.keyField];
+            this.nodeMap.delete(childId);
+        }
+        // 清空 children 数组
+        parentNode.children = [];
+        this.touch();
+    }
     setData(list) {
         this.nodeMap = new Map();
         this._nodes = [];
         // 初始化每个节点
         for (const item of list) {
-            const node = {
-                item,
-                expand: false
-            };
+            const node = this.createNodeWithMethods(item);
             const key = item[this.keyField];
             this.nodeMap.set(key, node);
         }
@@ -42,13 +178,22 @@ export class CommonTreeNodes {
         if (this.expendDepth > 1) {
             this.setExpandForDepth(this.nodes, 0);
         }
+        this.touch();
     }
     /**
      * 获取节点
      */
     get nodes() {
+        // 通过访问 _version 让 Svelte 检测到变化
+        void this._version;
         return this._nodes;
     }
+    /**
+     * 获取版本号，用于触发 Svelte 响应式更新
+     */
+    get version() {
+        return this._version;
+    }
     /**
      * 设置展开层级
      * @param nodes
@@ -72,9 +217,11 @@ export class CommonTreeNodes {
     appendNode(node, doSort = false) {
         let item = node.item;
         const parentKey = item[this.parentKeyField];
-        if (this.checkIsRoot(item)) { //|| !this.nodeMap.has(parentKey)
+        if (this.checkIsRoot(item)) {
             this._nodes.push(node);
-            this._nodes.sort(this.compareFun);
+            this._nodes.sort((n1, n2) => {
+                return this.compareFun?.(n1.item, n2.item);
+            });
         }
         else {
             const parentNode = this.nodeMap.get(parentKey);
@@ -82,7 +229,9 @@ export class CommonTreeNodes {
                 parentNode.expand = true;
                 parentNode.children = [...(parentNode.children ?? []), node];
                 if (doSort && this.compareFun) {
-                    parentNode.children = parentNode.children.sort(this.compareFun);
+                    parentNode.children = parentNode.children.sort((n1, n2) => {
+                        return this.compareFun(n1.item, n2.item);
+                    });
                 }
             }
             else {
@@ -99,79 +248,17 @@ export default class TreeNodes extends CommonTreeNodes {
         return this.collectExpandedNodes(this._nodes);
     }
     /**
-     * 给treeview设定数据，根据数据构建树结构
-     * @param list
-     */
-    /**
-     * 增加一个新节点
-     * @param item
+     * 增加一个新节点（便捷方法，会自动根据 parentKeyField 找到父节点）
+     * @param item 要添加的节点数据
      */
     append(item) {
-        const node = {
-            item,
-            expand: true
-        };
-        this.appendNode(node, true);
-        this.nodeMap.set(item[this.keyField], node);
-    }
-    /**
-     * 替换一个节点的数据
-     * @param item
-     */
-    replace(item) {
-        let node = this.nodeMap.get(item[this.keyField]);
-        if (node) {
-            node.item = item;
-            let parent = this.nodeMap.get(item[this.parentKeyField]);
-            if (parent && parent.children && parent.children.length > 0) {
-                parent.children = parent.children.sort(this.compareFun);
-            }
-            else {
-                this._nodes.sort(this.compareFun);
-            }
-        }
-    }
-    remove(item) {
-        let idKey = item[this.keyField];
-        let node = this.nodeMap.get(idKey);
-        if (node) {
-            let parent = this.nodeMap.get(node.item[this.parentKeyField]);
-            this.nodeMap.delete(idKey);
-            if (parent) {
-                if (parent.children) {
-                    let pos = parent.children.findIndex(el => el.item[this.keyField] == idKey);
-                    if (pos > -1) {
-                        parent.children.splice(pos, 1);
-                    }
-                }
-            }
-            else {
-                let pos = this._nodes.findIndex(el => el.item[this.keyField] == idKey);
-                if (pos > -1) {
-                    this._nodes.splice(pos, 1);
-                }
-            }
-        }
-    }
-    /**
-     * 将一个节点移动到另外一个节点下
-     * @param item
-     * @param parentId
-     */
-    moveTo(item, parentId) {
-        let newParent = this.nodeMap.get(parentId);
-        let node = this.nodeMap.get(item[this.keyField]);
-        let currentParent = this.nodeMap.get(item[this.parentKeyField]);
-        if (newParent && node && currentParent && currentParent.children) {
-            let pos = currentParent.children.findIndex(el => el.item[this.keyField] == item[this.keyField]);
-            if (pos > -1) {
-                currentParent.children.splice(pos, 1);
-            }
-            newParent.children = [...(newParent.children ?? []), node];
-            if (this.compareFun) {
-                newParent.children = newParent.children.sort(this.compareFun);
-            }
+        const parentKey = item[this.parentKeyField];
+        const parentNode = this.nodeMap.get(parentKey);
+        if (!parentNode) {
+            console.warn(`Parent node ${parentKey} not found. Cannot add node.`);
+            return;
         }
+        parentNode.append(item);
     }
     /**
      * 获取除指定节点外的其他节点

package/dist/list-box/ListBox.svelte

@@ -133,7 +133,6 @@
     }
 
     const handleSelectionChanged = (item: any) => () => {
-        console.log('选择项目', item);
         let idx = selectedList.indexOf(item);
         if (idx < 0) {
             selectedList = [...selectedList, item];

package/dist/list-box/index.d.ts

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

package/dist/list-box/types.d.ts

@@ -3,4 +3,14 @@ export interface LoadResult {
     list: Array<any>;
 }
 export type FunFilter = (item: any, text: string) => boolean;
-export type LazyLoader = (text: string, pageNo: number) => Promise<LoadResult>;
+/**
+ * 分页加载列表数据
+ * @param text 搜索文本
+ * @param pageNo 页码（从0开始）
+ * @returns 加载结果，包含数据列表和是否有更多数据的标志
+ */
+export type ListLazyLoader = (text: string, pageNo: number) => Promise<LoadResult>;
+/**
+ * @deprecated 使用 ListLazyLoader 代替。LazyLoader 已弃用，将在未来版本中移除。
+ */
+export type LazyLoader = ListLazyLoader;

package/dist/message-box/MessageBoxBoard.svelte

@@ -27,7 +27,6 @@
     }
 
     let showMessageBox = (_message: string, _buttons: Array<any> | null, _title: string, _type: string | null, _escapeHTML: boolean = true): Promise<any> => {
-        console.log('显示消息框')
         if (!visible) {
             top = 0;
             left = 0;

package/dist/search-box/SearchBox.svelte

@@ -16,7 +16,6 @@
     export let placeholder: string | null = null;
 
     export const focus = () => {
-        console.log('查询框获取焦点')
         editor.focus();
     }
 

package/dist/tabs/Tabs.svelte

@@ -43,7 +43,6 @@
 
     const checkOverflow = () => {
         if (container) {
-            console.log(currentLeft, container.clientWidth, container.scrollWidth);
             if (currentLeft + container.clientWidth >= container.scrollWidth) {
                 currentLeft = container.scrollWidth - container.clientWidth;
                 scrollX.set(currentLeft);

package/dist/tree-view/README.md

@@ -75,6 +75,7 @@ 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
@@ -119,14 +120,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 +646,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 '=�';
     }
   }
   

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

@@ -19,7 +19,6 @@
     let loading: boolean = false;
 
     const isDirectory = () => {
-        console.log('检测目录函数', checkIsDirectory);
         return lazyLoader == null ? checkIsDirectory?.(node) : lazyLoader.isBranch(node);
     }
 
@@ -27,7 +26,12 @@
         if (node.children == null && lazyLoader != null) {
             try {
                 loading = true;
-                node.children = await lazyLoader.load(node);
+                const loadedChildren = await lazyLoader.load(node);
+                // 初始化新加载的子节点，确保它们的 expand 属性为 false
+                node.children = loadedChildren.map(child => ({
+                    ...child,
+                    expand: child.expand ?? false
+                }));
             } finally {
                 loading = false;
             }
@@ -40,11 +44,18 @@
         if (respond) {
             respond = false;
             if (isDirectory()) {
-                if (!node.children) {
-                    node.expand = false;
+                // 如果是懒加载模式且没有子节点，先加载子节点
+                if (lazyLoader != null && !node.children) {
                     await loadChildren();
+                    // 加载完成后，如果有子节点则展开
+                    const children = node.children as TreeNode<any>[] | undefined;
+                    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/TreeView.svelte

@@ -19,6 +19,7 @@
     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;
     let className: string = "";
 
     const onNodeSelectionChange = async (node: TreeNode<any>): Promise<boolean> => {
@@ -30,10 +31,32 @@
         return accept;
     }
 
+    // 通过 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);
+                    activeNode.children = loadedChildren.map(child => ({
+                        ...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}
+        {#each reactiveNodes as node}
             <TreeNodeView {activeNode} {node} {textField} {lazyLoader} {onNodeSelectionChange} {isVisible} {checkIsDirectory} {onContextMenu}/>
         {/each}
     </div>

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

@@ -27,6 +27,7 @@ declare const TreeView: $$__sveltets_2_IsomorphicComponent<{
     onblur?: ((event: FocusEvent) => void) | null;
     onContextMenu?: OnContextMenu;
     checkIsDirectory: CheckIsDirectory<any>;
+    version?: number | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {

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

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