@ibiz-template/vue3-components 0.7.37-alpha.5 → 0.7.38-alpha.21

package/es/control/tree/el-tree-util.mjs

@@ -1,5 +1,7 @@
 import { RuntimeError } from '@ibiz-template/core';
-import { debounce } from 'lodash-es';
+import { createUUID } from 'qx-util';
+import { debounce, cloneDeep } from 'lodash-es';
+import { watch } from 'vue';
 
 "use strict";
 function findNodeData(key, c) {
@@ -71,5 +73,71 @@ function formatNodeDropType(dropType) {
       );
   }
 }
+function useAppTreeBase(c, props) {
+  if (props.defaultExpandedKeys) {
+    c.state.defaultExpandedKeys = props.defaultExpandedKeys;
+  }
+  const initSimpleData = () => {
+    if (!props.data) {
+      return;
+    }
+    const root = props.data.find((item) => {
+      return item.isRoot === true;
+    });
+    if (root) {
+      c.state.rootNodes = props.data;
+      c.state.items = props.data;
+    }
+  };
+  c.evt.on("onCreated", async () => {
+    if (props.isSimple) {
+      initSimpleData();
+      c.state.isLoaded = true;
+    }
+  });
+  watch(
+    () => props.data,
+    () => {
+      if (props.isSimple) {
+        initSimpleData();
+      }
+    },
+    {
+      deep: true
+    }
+  );
+}
+function findChildItems(c, modelData, curItem) {
+  const { detreeNodeRSs } = modelData;
+  const children = [];
+  if (!detreeNodeRSs || detreeNodeRSs.length === 0) {
+    return children;
+  }
+  const rss = detreeNodeRSs.filter((_rss) => {
+    var _a;
+    const temp = c.state.items.find((_item) => {
+      return _item._uuid === curItem.data._uuid;
+    });
+    if (temp) {
+      return _rss.parentDETreeNodeId === ((_a = temp._nodeId) == null ? void 0 : _a.toLowerCase());
+    }
+    return false;
+  });
+  rss.sort((a, b) => {
+    return a.ordervalue - b.ordervalue;
+  });
+  rss.forEach((_rss) => {
+    const child = c.state.items.find((_item) => {
+      var _a;
+      return ((_a = _item._nodeId) == null ? void 0 : _a.toLowerCase()) === _rss.childDETreeNodeId;
+    });
+    if (child) {
+      const temp = cloneDeep(child);
+      temp._id = createUUID();
+      children.push(temp);
+    }
+  });
+  return children;
+}
 
-export { findNodeData, formatNodeDropType, useElTreeUtil };
+export { findChildItems, findNodeData, formatNodeDropType, useAppTreeBase, useElTreeUtil };

package/es/control/tree/index.d.ts

@@ -37,6 +37,27 @@ export declare const IBizTreeControl: import("@ibiz-template/vue3-util").TypeWit
         type: BooleanConstructor;
         default: boolean;
     };
+    isSimple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    data: {
+        type: {
+            (arrayLength: number): import("@ibiz-template/runtime").ITreeNodeData[];
+            (...items: import("@ibiz-template/runtime").ITreeNodeData[]): import("@ibiz-template/runtime").ITreeNodeData[];
+            new (arrayLength: number): import("@ibiz-template/runtime").ITreeNodeData[];
+            new (...items: import("@ibiz-template/runtime").ITreeNodeData[]): import("@ibiz-template/runtime").ITreeNodeData[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        required: false;
+    };
 }, {
     c: import("@ibiz-template/runtime").TreeController<import("@ibiz/model-core").IDETree, import("@ibiz-template/runtime").ITreeState, import("@ibiz-template/runtime").ITreeEvent>;
     ns: import("@ibiz-template/core").Namespace;
@@ -63,6 +84,7 @@ export declare const IBizTreeControl: import("@ibiz-template/vue3-util").TypeWit
             readonly props: import("element-plus/es/components/tree/src/tree.type").TreeOptionProps;
             readonly data: unknown[];
             readonly draggable: boolean;
+            readonly lazy: boolean;
             readonly renderAfterExpand: boolean;
             readonly checkStrictly: boolean;
             readonly defaultExpandAll: boolean;
@@ -71,7 +93,6 @@ export declare const IBizTreeControl: import("@ibiz-template/vue3-util").TypeWit
             readonly checkDescendants: boolean;
             readonly autoExpandParent: boolean;
             readonly showCheckbox: boolean;
-            readonly lazy: boolean;
             readonly highlightCurrent: boolean;
             readonly accordion: boolean;
             readonly indent: number;
@@ -178,7 +199,7 @@ export declare const IBizTreeControl: import("@ibiz-template/vue3-util").TypeWit
             "onNode-drag-leave"?: ((...args: any[]) => any) | undefined;
             "onNode-drag-enter"?: ((...args: any[]) => any) | undefined;
             "onNode-drag-over"?: ((...args: any[]) => any) | undefined;
-        }, "props" | "data" | "draggable" | "renderAfterExpand" | "checkStrictly" | "defaultExpandAll" | "expandOnClickNode" | "checkOnClickNode" | "checkDescendants" | "autoExpandParent" | "showCheckbox" | "lazy" | "highlightCurrent" | "accordion" | "indent">;
+        }, "props" | "data" | "draggable" | "lazy" | "renderAfterExpand" | "checkStrictly" | "defaultExpandAll" | "expandOnClickNode" | "checkOnClickNode" | "checkDescendants" | "autoExpandParent" | "showCheckbox" | "highlightCurrent" | "accordion" | "indent">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -579,7 +600,7 @@ export declare const IBizTreeControl: import("@ibiz-template/vue3-util").TypeWit
         };
         $forceUpdate: () => void;
         $nextTick: typeof import("vue").nextTick;
-        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
+        $watch<T_5 extends string | ((...args: any) => any)>(source: T_5, cb: T_5 extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
     } & Readonly<import("vue").ExtractPropTypes<{
         data: {
             type: ArrayConstructor;
@@ -944,7 +965,7 @@ export declare const IBizTreeControl: import("@ibiz-template/vue3-util").TypeWit
     onCheck: (nodeData: import("@ibiz-template/runtime").ITreeNodeData, opts: {
         checkedNodes: import("@ibiz-template/runtime").ITreeNodeData[];
     }) => void;
-    onNodeClick: (nodeData: import("@ibiz-template/runtime").ITreeNodeData, evt: MouseEvent) => void;
+    onNodeClick: (nodeData: import("@ibiz-template/runtime").ITreeNodeData, data: IData, evt: MouseEvent) => void;
     onNodeDbClick: (nodeData: import("@ibiz-template/runtime").ITreeNodeData, evt: MouseEvent) => void;
     onNodeContextmenu: (nodeData: import("@ibiz-template/runtime").ITreeNodeData, evt: MouseEvent) => Promise<void>;
     loadData: (item: IData, callback: (nodes: IData[]) => void) => Promise<void>;
@@ -955,8 +976,9 @@ export declare const IBizTreeControl: import("@ibiz-template/vue3-util").TypeWit
     allowDrop: (draggingNode: IData, dropNode: IData, type: import("element-plus/es/components/tree/src/tree.type").AllowDropType) => boolean;
     allowDrag: (draggingNode: IData) => boolean;
     handleDrop: (draggingNode: IData, dropNode: IData, dropType: import("element-plus/es/components/tree/src/tree.type").NodeDropType) => void;
+    onShowNavView: () => void;
     onNodeTextEditBlur: () => Promise<void>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "nodeClick"[], "nodeClick", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelData: {
         type: import("vue").PropType<import("@ibiz/model-core").IDETree>;
         required: true;
@@ -995,10 +1017,34 @@ export declare const IBizTreeControl: import("@ibiz-template/vue3-util").TypeWit
         type: BooleanConstructor;
         default: boolean;
     };
-}>>, {
+    isSimple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    data: {
+        type: {
+            (arrayLength: number): import("@ibiz-template/runtime").ITreeNodeData[];
+            (...items: import("@ibiz-template/runtime").ITreeNodeData[]): import("@ibiz-template/runtime").ITreeNodeData[];
+            new (arrayLength: number): import("@ibiz-template/runtime").ITreeNodeData[];
+            new (...items: import("@ibiz-template/runtime").ITreeNodeData[]): import("@ibiz-template/runtime").ITreeNodeData[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        required: false;
+    };
+}>> & {
+    onNodeClick?: ((...args: any[]) => any) | undefined;
+}, {
     params: IParams;
     mdctrlActiveMode: number;
     singleSelect: boolean;
+    isSimple: boolean;
     loadDefault: boolean;
     checkStrictly: boolean;
     navigational: boolean;

package/es/control/tree/index.mjs

@@ -1,4 +1,4 @@
-import { ControlType, registerControlProvider } from '@ibiz-template/runtime';
+import { registerControlProvider, ControlType } from '@ibiz-template/runtime';
 import { withInstall } from '@ibiz-template/vue3-util';
 import { TreeControl } from './tree.mjs';
 import { TreeProvider } from './tree.provider.mjs';

package/es/control/tree/tree.css

@@ -1 +1 @@
-.ibiz-control-treeview{--ibiz-control-treeview-text-color:var(--ibiz-color-text-0);--ibiz-control-treeview-bg-color:transparent;--ibiz-control-treeview-disabled-color:var(--ibiz-color-disabled-text);--ibiz-control-treeview-padding:var(--ibiz-spacing-tight) 0;--ibiz-control-treeview-row-hover-color:var(--ibiz-color-text-0);--ibiz-control-treeview-row-hover-bg-color:var(--ibiz-color-fill-0);--ibiz-control-treeview-row-select-color:var(--ibiz-color-text-0);--ibiz-control-treeview-row-select-bg-color:var(--ibiz-color-primary-light-default);--ibiz-control-treeview-font-size:var(--ibiz-font-size-regular);--ibiz-control-treeview-font-weight:var(--ibiz-font-weight-regular);--ibiz-control-treeview-node-icon-height:var(--ibiz-spacing-base);--ibiz-control-treeview-node-icon-width:var(--ibiz-spacing-base);--ibiz-control-treeview-node-icon-margin-right:var(--ibiz-spacing-tight);--ibiz-control-treeview-node-height:26px;--ibiz-control-treeview-context-menu-width:30px;--ibiz-control-treeview-context-menu-padding:var(--ibiz-spacing-extra-tight) 0;--ibiz-control-treeview-context-menu-item-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base);--ibiz-control-treeview-quick-search-padding:0 var(--ibiz-spacing-base) var(--ibiz-spacing-tight);--ibiz-control-treeview-tree-padding:0 var(--ibiz-spacing-base);height:100%;padding:var(--ibiz-control-treeview-padding)}.ibiz-control-treeview-node{display:flex;flex-grow:1;flex-shrink:1;align-items:center;min-width:1px;height:100%}.ibiz-control-treeview-node__icon{display:flex;align-items:center;width:var(--ibiz-control-treeview-node-icon-width);height:var(--ibiz-control-treeview-node-icon-height);margin-right:var(--ibiz-control-treeview-node-icon-margin-right)}.ibiz-control-treeview-node__icon>svg{width:100%;height:100%}.ibiz-control-treeview-node__label{flex-grow:1;flex-shrink:1;min-width:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-control-treeview-node:hover .ibiz-control-treeview-context-menu-trigger{display:inline-block}.ibiz-control-treeview-node--disabled{color:var(--ibiz-control-treeview-disabled-color);cursor:not-allowed}.ibiz-control-treeview-context-menu-trigger{display:none;flex-shrink:0;width:var(--ibiz-control-treeview-context-menu-width);text-align:center;cursor:pointer}.ibiz-control-treeview-context-menu-trigger__caption-icon{vertical-align:middle}.ibiz-control-treeview-context-menu.mx-context-menu{padding:var(--ibiz-control-treeview-context-menu-padding)}.ibiz-control-treeview-context-menu.mx-context-menu .mx-context-menu-item{padding:var(--ibiz-control-treeview-context-menu-item-padding)}.ibiz-control-treeview-quick-search{padding:var(--ibiz-control-treeview-quick-search-padding)}.ibiz-control-treeview-tree.el-tree{--el-tree-text-color:var(--ibiz-control-treeview-text-color);--el-tree-node-content-height:var(--ibiz-control-treeview-node-height);padding:var(--ibiz-control-treeview-tree-padding);background-color:var(--ibiz-control-treeview-bg-color)}.ibiz-control-treeview-tree.el-tree .el-tree-node__content:hover{color:var(--ibiz-control-treeview-row-hover-color);background-color:var(--ibiz-control-treeview-row-hover-bg-color)}.ibiz-control-treeview-tree.el-tree.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{color:var(--ibiz-control-treeview-row-select-color);background-color:var(--ibiz-control-treeview-row-select-bg-color)}
+.ibiz-control-treeview{--ibiz-control-treeview-text-color:var(--ibiz-color-text-0);--ibiz-control-treeview-bg-color:transparent;--ibiz-control-treeview-disabled-color:var(--ibiz-color-disabled-text);--ibiz-control-treeview-padding:var(--ibiz-spacing-tight) 0;--ibiz-control-treeview-row-hover-color:var(--ibiz-color-text-0);--ibiz-control-treeview-row-hover-bg-color:var(--ibiz-color-fill-0);--ibiz-control-treeview-row-select-color:var(--ibiz-color-text-0);--ibiz-control-treeview-row-select-bg-color:var(--ibiz-color-primary-light-default);--ibiz-control-treeview-font-size:var(--ibiz-font-size-regular);--ibiz-control-treeview-font-weight:var(--ibiz-font-weight-regular);--ibiz-control-treeview-node-icon-height:var(--ibiz-spacing-base);--ibiz-control-treeview-node-icon-width:var(--ibiz-spacing-base);--ibiz-control-treeview-node-icon-margin-right:var(--ibiz-spacing-tight);--ibiz-control-treeview-node-height:26px;--ibiz-control-treeview-context-menu-width:30px;--ibiz-control-treeview-context-menu-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-none);--ibiz-control-treeview-context-menu-item-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);--ibiz-control-treeview-context-menu-item-height:40px;--ibiz-control-treeview-context-menu-border-radius:var(--ibiz-spacing-none);--ibiz-control-treeview-context-menu-bg-color:var(--ibiz-color-bg-3);--ibiz-control-treeview-context-menu-hover-color:var(--ibiz-color-fill-0);--ibiz-control-treeview-context-menu-text-color:var(--ibiz-color-text-2);--ibiz-control-treeview-quick-search-padding:0 var(--ibiz-spacing-base) var(--ibiz-spacing-tight);--ibiz-control-treeview-tree-padding:0 var(--ibiz-spacing-base);position:relative;height:100%;padding:var(--ibiz-control-treeview-padding)}.ibiz-control-treeview__nav-icon{right:10px;top:14px;cursor:pointer;position:absolute;color:var(--ibiz-color-primary)}.ibiz-control-treeview-node{display:flex;flex-grow:1;flex-shrink:1;align-items:center;min-width:1px;height:100%}.ibiz-control-treeview-node__icon{display:flex;align-items:center;width:var(--ibiz-control-treeview-node-icon-width);height:var(--ibiz-control-treeview-node-icon-height);margin-right:var(--ibiz-control-treeview-node-icon-margin-right)}.ibiz-control-treeview-node__icon>svg{width:100%;height:100%}.ibiz-control-treeview-node__label{flex-grow:1;flex-shrink:1;min-width:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-control-treeview-node:hover .ibiz-control-treeview-context-menu-trigger{display:inline-block}.ibiz-control-treeview-node--disabled{color:var(--ibiz-control-treeview-disabled-color);cursor:not-allowed}.ibiz-control-treeview-context-menu-trigger{display:none;flex-shrink:0;width:var(--ibiz-control-treeview-context-menu-width);text-align:center;cursor:pointer}.ibiz-control-treeview-context-menu-trigger__caption-icon{vertical-align:middle}.ibiz-control-treeview-context-menu{--ibiz-control-treeview-context-menu-width:30px;--ibiz-control-treeview-context-menu-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-none);--ibiz-control-treeview-context-menu-item-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);--ibiz-control-treeview-context-menu-item-height:40px;--ibiz-control-treeview-context-menu-border-radius:var(--ibiz-spacing-none);--ibiz-control-treeview-context-menu-bg-color:var(--ibiz-color-bg-3);--ibiz-control-treeview-context-menu-hover-color:var(--ibiz-color-fill-0);--ibiz-control-treeview-context-menu-text-color:var(--ibiz-color-text-2)}.ibiz-control-treeview-context-menu.mx-context-menu{padding:var(--ibiz-control-treeview-context-menu-padding);background-color:var(--ibiz-control-treeview-context-menu-bg-color);border-radius:var(--ibiz-control-treeview-context-menu-border-radius);--mx-menu-text:var(--ibiz-control-treeview-context-menu-text-color)}.ibiz-control-treeview-context-menu.mx-context-menu .mx-context-menu-item{height:var(--ibiz-control-treeview-context-menu-item-height);padding:var(--ibiz-control-treeview-context-menu-item-padding)}.ibiz-control-treeview-context-menu.mx-context-menu .mx-context-menu-item:hover{color:var(--ibiz-control-treeview-context-menu-text-color);background-color:var(--ibiz-control-treeview-context-menu-hover-color)}.ibiz-control-treeview-quick-search{padding:var(--ibiz-control-treeview-quick-search-padding)}.ibiz-control-treeview-tree.el-tree{--el-tree-text-color:var(--ibiz-control-treeview-text-color);--el-tree-node-content-height:var(--ibiz-control-treeview-node-height);padding:var(--ibiz-control-treeview-tree-padding);background-color:var(--ibiz-control-treeview-bg-color)}.ibiz-control-treeview-tree.el-tree .el-tree-node__content:hover{color:var(--ibiz-control-treeview-row-hover-color);background-color:var(--ibiz-control-treeview-row-hover-bg-color)}.ibiz-control-treeview-tree.el-tree.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{color:var(--ibiz-control-treeview-row-select-color);background-color:var(--ibiz-control-treeview-row-select-bg-color)}

package/es/control/tree/tree.d.ts

@@ -58,6 +58,27 @@ export declare const TreeControl: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    isSimple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    data: {
+        type: {
+            (arrayLength: number): ITreeNodeData[];
+            (...items: ITreeNodeData[]): ITreeNodeData[];
+            new (arrayLength: number): ITreeNodeData[];
+            new (...items: ITreeNodeData[]): ITreeNodeData[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        required: false;
+    };
 }, {
     c: TreeController<IDETree, import("@ibiz-template/runtime").ITreeState, import("@ibiz-template/runtime").ITreeEvent>;
     ns: import("@ibiz-template/core").Namespace;
@@ -84,6 +105,7 @@ export declare const TreeControl: import("vue").DefineComponent<{
             readonly props: import("element-plus/es/components/tree/src/tree.type").TreeOptionProps;
             readonly data: unknown[];
             readonly draggable: boolean;
+            readonly lazy: boolean;
             readonly renderAfterExpand: boolean;
             readonly checkStrictly: boolean;
             readonly defaultExpandAll: boolean;
@@ -92,7 +114,6 @@ export declare const TreeControl: import("vue").DefineComponent<{
             readonly checkDescendants: boolean;
             readonly autoExpandParent: boolean;
             readonly showCheckbox: boolean;
-            readonly lazy: boolean;
             readonly highlightCurrent: boolean;
             readonly accordion: boolean;
             readonly indent: number;
@@ -199,7 +220,7 @@ export declare const TreeControl: import("vue").DefineComponent<{
             "onNode-drag-leave"?: ((...args: any[]) => any) | undefined;
             "onNode-drag-enter"?: ((...args: any[]) => any) | undefined;
             "onNode-drag-over"?: ((...args: any[]) => any) | undefined;
-        }, "props" | "data" | "draggable" | "renderAfterExpand" | "checkStrictly" | "defaultExpandAll" | "expandOnClickNode" | "checkOnClickNode" | "checkDescendants" | "autoExpandParent" | "showCheckbox" | "lazy" | "highlightCurrent" | "accordion" | "indent">;
+        }, "props" | "data" | "draggable" | "lazy" | "renderAfterExpand" | "checkStrictly" | "defaultExpandAll" | "expandOnClickNode" | "checkOnClickNode" | "checkDescendants" | "autoExpandParent" | "showCheckbox" | "highlightCurrent" | "accordion" | "indent">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -600,7 +621,7 @@ export declare const TreeControl: import("vue").DefineComponent<{
         };
         $forceUpdate: () => void;
         $nextTick: typeof nextTick;
-        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
+        $watch<T_5 extends string | ((...args: any) => any)>(source: T_5, cb: T_5 extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
     } & Readonly<import("vue").ExtractPropTypes<{
         data: {
             type: ArrayConstructor;
@@ -965,7 +986,7 @@ export declare const TreeControl: import("vue").DefineComponent<{
     onCheck: (nodeData: ITreeNodeData, opts: {
         checkedNodes: ITreeNodeData[];
     }) => void;
-    onNodeClick: (nodeData: ITreeNodeData, evt: MouseEvent) => void;
+    onNodeClick: (nodeData: ITreeNodeData, data: IData, evt: MouseEvent) => void;
     onNodeDbClick: (nodeData: ITreeNodeData, evt: MouseEvent) => void;
     onNodeContextmenu: (nodeData: ITreeNodeData, evt: MouseEvent) => Promise<void>;
     loadData: (item: IData, callback: (nodes: IData[]) => void) => Promise<void>;
@@ -976,8 +997,9 @@ export declare const TreeControl: import("vue").DefineComponent<{
     allowDrop: (draggingNode: IData, dropNode: IData, type: AllowDropType) => boolean;
     allowDrag: (draggingNode: IData) => boolean;
     handleDrop: (draggingNode: IData, dropNode: IData, dropType: NodeDropType) => void;
+    onShowNavView: () => void;
     onNodeTextEditBlur: () => Promise<void>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "nodeClick"[], "nodeClick", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelData: {
         type: PropType<IDETree>;
         required: true;
@@ -1031,10 +1053,34 @@ export declare const TreeControl: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-}>>, {
+    isSimple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    data: {
+        type: {
+            (arrayLength: number): ITreeNodeData[];
+            (...items: ITreeNodeData[]): ITreeNodeData[];
+            new (arrayLength: number): ITreeNodeData[];
+            new (...items: ITreeNodeData[]): ITreeNodeData[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        required: false;
+    };
+}>> & {
+    onNodeClick?: ((...args: any[]) => any) | undefined;
+}, {
     params: IParams;
     mdctrlActiveMode: number;
     singleSelect: boolean;
+    isSimple: boolean;
     loadDefault: boolean;
     checkStrictly: boolean;
     navigational: boolean;

package/es/control/tree/tree.mjs

@@ -1,12 +1,12 @@
-import { isVNode, ref, reactive, onUnmounted, watch, computed, nextTick, resolveComponent, createVNode, onMounted, resolveDirective, withDirectives, defineComponent } from 'vue';
+import { isVNode, defineComponent, ref, reactive, onUnmounted, watch, computed, nextTick, resolveComponent, createVNode, onMounted, withDirectives, resolveDirective } from 'vue';
 import { useControlController, useNamespace } from '@ibiz-template/vue3-util';
 import { createUUID } from 'qx-util';
-import { debounce } from 'lodash-es';
+import { cloneDeep, debounce } from 'lodash-es';
 import { TreeController, getControlPanel } from '@ibiz-template/runtime';
 import './tree.css';
 import { RuntimeError } from '@ibiz-template/core';
 import { isNil } from 'ramda';
-import { findNodeData, useElTreeUtil, formatNodeDropType } from './el-tree-util.mjs';
+import { useAppTreeBase, findNodeData, useElTreeUtil, findChildItems, formatNodeDropType } from './el-tree-util.mjs';
 
 "use strict";
 function _isSlot(s) {
@@ -67,10 +67,22 @@ const TreeControl = /* @__PURE__ */ defineComponent({
     checkStrictly: {
       type: Boolean,
       default: true
+    },
+    isSimple: {
+      type: Boolean,
+      default: false
+    },
+    data: {
+      type: Array,
+      required: false
     }
   },
-  setup() {
+  emits: ["nodeClick"],
+  setup(props, {
+    emit
+  }) {
     const c = useControlController((...args) => new TreeController(...args));
+    useAppTreeBase(c, props);
     const cascadeSelect = ref(false);
     const counterData = reactive({});
     const fn = (counter) => {
@@ -169,7 +181,29 @@ const TreeControl = /* @__PURE__ */ defineComponent({
         treeRefreshKey.value = createUUID();
       }
     });
+    watch(() => c.state.expandedKeys, () => {
+      updateUI();
+    }, {
+      deep: true
+    });
     const loadData = async (item, callback) => {
+      if (props.isSimple) {
+        let children = [];
+        if (item.level === 0) {
+          const tempNodes = c.state.items.find((_item) => {
+            return _item.isRoot;
+          });
+          if (tempNodes) {
+            children = [tempNodes];
+          }
+        } else {
+          children = findChildItems(c, props.modelData, item);
+        }
+        item._children = children;
+        callback(toElNodes(children));
+        updateUI();
+        return;
+      }
       let nodes;
       if (item.level === 0) {
         nodes = treeData.value;
@@ -216,9 +250,18 @@ const TreeControl = /* @__PURE__ */ defineComponent({
     const readonly = computed(() => {
       return !!(c.context.srfreadonly === true || c.context.srfreadonly === "true");
     });
-    const onNodeClick = (nodeData, evt) => {
+    const onShowNavView = () => {
+      c.state.showNavView = !c.state.showNavView;
+    };
+    const onNodeClick = (nodeData, data, evt) => {
       var _a, _b;
       evt.stopPropagation();
+      if (c.runMode === "DESIGN") {
+        emit("nodeClick", {
+          nodeData,
+          evt
+        });
+      }
       if (nodeData._disableSelect)
         return;
       if (forbidClick) {
@@ -237,7 +280,11 @@ const TreeControl = /* @__PURE__ */ defineComponent({
           c.onExpandChange(nodeData, expanded);
         }
       }
-      c.onTreeNodeClick(nodeData, evt);
+      if (props.isSimple) {
+        treeRef.value.setCurrentKey((data == null ? void 0 : data._id) || void 0);
+      } else {
+        c.onTreeNodeClick(nodeData, evt);
+      }
       forbidClick = true;
       setTimeout(() => {
         forbidClick = false;
@@ -266,7 +313,7 @@ const TreeControl = /* @__PURE__ */ defineComponent({
     const calcContextMenuItems = (toolbarItems, nodeData, evt, menuState) => {
       const result = [];
       toolbarItems.forEach((item) => {
-        var _a;
+        var _a, _b;
         if (item.itemType === "SEPERATOR") {
           result.push({
             divided: "self"
@@ -277,7 +324,7 @@ const TreeControl = /* @__PURE__ */ defineComponent({
         if (buttonState && !buttonState.visible) {
           return;
         }
-        const menuItem = {};
+        let menuItem = {};
         if (item.showCaption && item.caption) {
           menuItem.label = item.caption;
         }
@@ -307,11 +354,55 @@ const TreeControl = /* @__PURE__ */ defineComponent({
             }, null);
           }
         } else if (item.itemType === "ITEMS") {
-          if ((_a = item.detoolbarItems) == null ? void 0 : _a.length) {
-            menuItem.children = calcContextMenuItems(item.detoolbarItems, nodeData, evt, menuState);
+          const group = item;
+          if ((_a = group.detoolbarItems) == null ? void 0 : _a.length) {
+            menuItem.children = calcContextMenuItems(group.detoolbarItems, nodeData, evt, menuState);
           }
+          if (group.uiactionGroup && group.groupExtractMode) {
+            const menuItems = (_b = group.uiactionGroup.uiactionGroupDetails) == null ? void 0 : _b.filter((detail) => {
+              const detailState = menuState[detail.id];
+              return detailState.visible;
+            }).map((detail) => {
+              const detailState = menuState[detail.id];
+              const {
+                sysImage
+              } = detail;
+              return {
+                label: detail.showCaption ? detail.caption : void 0,
+                icon: detail.showIcon ? createVNode(iBizIcon, {
+                  "icon": sysImage
+                }, null) : void 0,
+                disabled: detailState.disabled,
+                clickableWhenHasChildren: true,
+                onClick: () => {
+                  ContextMenu.closeContextMenu();
+                  c.doUIAction(detail.uiactionId, nodeData, evt, detail.appId);
+                }
+              };
+            });
+            switch (group.groupExtractMode) {
+              case "ITEMS":
+                menuItem.children = menuItems;
+                break;
+              case "ITEMX":
+                if (menuItems) {
+                  menuItem = menuItems[0];
+                  menuItem.children = menuItems.slice(1);
+                }
+                break;
+              case "ITEM":
+              default:
+                menuItem = void 0;
+                if (menuItems) {
+                  result.push(...menuItems);
+                }
+                break;
+            }
+          }
+        }
+        if (menuItem) {
+          result.push(menuItem);
         }
-        result.push(menuItem);
       });
       return result;
     };
@@ -364,7 +455,13 @@ const TreeControl = /* @__PURE__ */ defineComponent({
           id: data._uuid
         }));
       }
-      c.onExpandChange(nodeData, expanded);
+      if (props.isSimple) {
+        const tempData = cloneDeep(nodeData);
+        tempData._id = data._id;
+        c.onExpandChange(tempData, expanded);
+      } else {
+        c.onExpandChange(nodeData, expanded);
+      }
     };
     const debounceSearch = debounce(() => {
       c.load();
@@ -441,6 +538,7 @@ const TreeControl = /* @__PURE__ */ defineComponent({
       allowDrop,
       allowDrag,
       handleDrop,
+      onShowNavView,
       onNodeTextEditBlur
     };
   },
@@ -468,7 +566,7 @@ const TreeControl = /* @__PURE__ */ defineComponent({
     const key = this.c.controlPanel ? "tree" : "default";
     slots[key] = () => {
       if (this.c.state.isLoaded && this.treeRefreshKey) {
-        return createVNode(resolveComponent("el-tree"), {
+        return [createVNode(resolveComponent("el-tree"), {
           "ref": "treeRef",
           "class": this.ns.b("tree"),
           "key": this.treeRefreshKey,
@@ -549,20 +647,34 @@ const TreeControl = /* @__PURE__ */ defineComponent({
             }
             return createVNode("div", {
               "onDblclick": (evt) => this.onNodeDbClick(nodeData, evt),
-              "onClick": (evt) => this.onNodeClick(nodeData, evt),
+              "onClick": (evt) => this.onNodeClick(nodeData, data, evt),
               "onContextmenu": (evt) => this.onNodeContextmenu(nodeData, evt),
               "class": [this.ns.b("node"), nodeData._disableSelect ? this.ns.bm("node", "disabled") : "", (_b = nodeModel.sysCss) == null ? void 0 : _b.cssName]
             }, [content, this.renderCounter(nodeModel), this.renderContextMenu(nodeModel, nodeData)]);
           }
-        });
+        }), this.c.state.enableNavView ? !this.c.state.showNavView ? createVNode("ion-icon", {
+          "class": this.ns.e("nav-icon"),
+          "title": ibiz.i18n.t("component.controlNavigation.showNav"),
+          "name": "eye-outline",
+          "onClick": this.onShowNavView
+        }, null) : createVNode("ion-icon", {
+          "class": this.ns.e("nav-icon"),
+          "title": ibiz.i18n.t("component.controlNavigation.hiddenNav"),
+          "name": "eye-off-outline",
+          "onClick": this.onShowNavView
+        }, null) : null];
       }
     };
-    return withDirectives(createVNode(resolveComponent("iBizControlBase"), {
-      "ref": "treeviewRef",
+    return createVNode(resolveComponent("iBizControlNavigation"), {
       "controller": this.c
-    }, _isSlot(slots) ? slots : {
-      default: () => [slots]
-    }), [[resolveDirective("loading"), this.c.state.isLoading]]);
+    }, {
+      default: () => [withDirectives(createVNode(resolveComponent("iBizControlBase"), {
+        "ref": "treeviewRef",
+        "controller": this.c
+      }, _isSlot(slots) ? slots : {
+        default: () => [slots]
+      }), [[resolveDirective("loading"), this.c.state.isLoading]])]
+    });
   }
 });
 

package/es/control/tree-grid/index.d.ts

@@ -56,7 +56,6 @@ export declare const IBizTreeGridControl: import("@ibiz-template/vue3-util").Typ
     ns: import("@ibiz-template/core").Namespace;
     ns2: import("@ibiz-template/core").Namespace;
     tableRef: import("vue").Ref<IData | undefined>;
-    treeGirdData: import("vue").ComputedRef<IData[]>;
     tableData: import("vue").Ref<IData>;
     renderColumns: import("vue").Ref<import("@ibiz/model-core").IDEGridColumn[]>;
     renderColumn: (model: import("@ibiz/model-core").IDEGridColumn, index: number) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {

package/es/control/tree-grid/index.mjs

@@ -1,4 +1,4 @@
-import { ControlType, registerControlProvider } from '@ibiz-template/runtime';
+import { registerControlProvider, ControlType } from '@ibiz-template/runtime';
 import { withInstall } from '@ibiz-template/vue3-util';
 import { TreeGridControl } from './tree-grid.mjs';
 import { TreeGridProvider } from './tree-grid.provider.mjs';

package/es/control/tree-grid/tree-grid.d.ts

@@ -1,6 +1,6 @@
 import { PropType, VNode } from 'vue';
 import { IDEGridColumn } from '@ibiz/model-core';
-import { ControlVO, IControlProvider, TreeGridController } from '@ibiz-template/runtime';
+import { IControlProvider, TreeGridController } from '@ibiz-template/runtime';
 export declare const TreeGridControl: import("vue").DefineComponent<{
     modelData: {
         type: PropType<import("@ibiz/model-core").IDEGrid>;
@@ -67,14 +67,13 @@ export declare const TreeGridControl: import("vue").DefineComponent<{
     ns: import("@ibiz-template/core").Namespace;
     ns2: import("@ibiz-template/core").Namespace;
     tableRef: import("vue").Ref<IData | undefined>;
-    treeGirdData: import("vue").ComputedRef<IData[]>;
     tableData: import("vue").Ref<IData>;
     renderColumns: import("vue").Ref<IDEGridColumn[]>;
     renderColumn: (model: IDEGridColumn, index: number) => VNode | null;
     defaultSort: import("vue").Ref<IData>;
-    onDbRowClick: (data: ControlVO) => void;
-    onRowClick: (data: ControlVO, _column: IData, event: MouseEvent) => Promise<void>;
-    onSelectionChange: (selection: ControlVO[]) => void;
+    onDbRowClick: (data: import("@ibiz-template/runtime").ControlVO) => void;
+    onRowClick: (data: import("@ibiz-template/runtime").ControlVO, _column: IData, event: MouseEvent) => Promise<void>;
+    onSelectionChange: (selection: import("@ibiz-template/runtime").ControlVO[]) => void;
     onSortChange: (opts: {
         _column: IData;
         prop: string;