@ibiz-template/vue3-components 0.7.41-alpha.4 → 0.7.41-alpha.41

package/lib/control/tree/tree.cjs

@@ -5,10 +5,9 @@ var vue3Util = require('@ibiz-template/vue3-util');
 var qxUtil = require('qx-util');
 var lodashEs = require('lodash-es');
 var runtime = require('@ibiz-template/runtime');
-require('./tree.css');
 var core = require('@ibiz-template/core');
-var ramda = require('ramda');
 var elTreeUtil = require('./el-tree-util.cjs');
+require('./tree.css');
 
 "use strict";
 function _isSlot(s) {
@@ -108,15 +107,8 @@ const TreeControl = /* @__PURE__ */ vue.defineComponent({
     const c = vue3Util.useControlController((...args) => new runtime.TreeController(...args));
     elTreeUtil.useAppTreeBase(c, props);
     const cascadeSelect = vue.ref(false);
-    const counterData = vue.ref({});
     const menuShowMode = vue.ref("default");
-    const fn = (counter) => {
-      counterData.value = counter;
-    };
     c.evt.on("onCreated", () => {
-      if (c.counter) {
-        c.counter.onChange(fn, true);
-      }
       if (c.controlParams.cascadeselect) {
         cascadeSelect.value = true;
       }
@@ -184,6 +176,16 @@ const TreeControl = /* @__PURE__ */ vue.defineComponent({
         newVal.$el.getElementsByTagName("input")[0].focus();
       }
     });
+    c.evt.on("onSelectionChange", async () => {
+      var _a;
+      if (!treeRef.value)
+        return;
+      if (c.state.singleSelect) {
+        treeRef.value.setCurrentKey((_a = c.state.selectedData[0]) == null ? void 0 : _a._id);
+      } else {
+        treeRef.value.setCheckedKeys(c.state.selectedData.map((item) => item._id));
+      }
+    });
     const editCurrentNodeText = () => {
       var _a;
       const currentkey = (_a = treeRef.value) == null ? void 0 : _a.getCurrentKey();
@@ -307,6 +309,9 @@ const TreeControl = /* @__PURE__ */ vue.defineComponent({
       updateUI,
       triggerNodeExpand
     } = elTreeUtil.useElTreeUtil(treeRef, c);
+    const {
+      addLoadMoreNode
+    } = elTreeUtil.useLoadMoreUtil(treeRef, c);
     const toElNodes = (nodes) => {
       return nodes.map((node) => ({
         _id: node._id,
@@ -325,6 +330,9 @@ const TreeControl = /* @__PURE__ */ vue.defineComponent({
         const elNodes = toElNodes(children);
         treeRef.value.updateKeyChildren(parentNode._id, elNodes);
         updateUI();
+        vue.nextTick(() => {
+          addLoadMoreNode(parentNode._id, parentNode);
+        });
       }
     });
     c.evt.on("onAfterNodeDrop", (event) => {
@@ -332,6 +340,9 @@ const TreeControl = /* @__PURE__ */ vue.defineComponent({
         treeRefreshKey.value = qxUtil.createUUID();
       }
     });
+    c.evt.on("onUpdateUI", () => {
+      updateUI();
+    });
     const treeData = vue.computed(() => {
       if (!c.state.isLoaded) {
         return [];
@@ -388,25 +399,11 @@ const TreeControl = /* @__PURE__ */ vue.defineComponent({
       ibiz.log.debug("\u7ED9\u6811\u8FD4\u56DE\u503C", nodes);
       callback(toElNodes(nodes));
       updateUI();
+      vue.nextTick(() => {
+        var _a, _b, _c;
+        addLoadMoreNode(item.level === 0 ? (_b = (_a = c.state.rootNodes) == null ? void 0 : _a[0]) == null ? void 0 : _b._id : (_c = item.data) == null ? void 0 : _c._id, item);
+      });
     };
-    let selectionWait = false;
-    c.evt.on("onLoadSuccess", () => {
-      selectionWait = true;
-      setTimeout(() => {
-        selectionWait = false;
-      }, 200);
-    });
-    c.evt.on("onSelectionChange", async () => {
-      var _a;
-      if (selectionWait) {
-        await vue.nextTick();
-      }
-      if (c.state.singleSelect) {
-        treeRef.value.setCurrentKey(((_a = c.state.selectedData[0]) == null ? void 0 : _a._id) || void 0);
-      } else {
-        treeRef.value.setCheckedKeys(c.state.selectedData.map((item) => item._id));
-      }
-    });
     const onCheck = (nodeData, opts) => {
       const {
         checkedNodes
@@ -425,9 +422,7 @@ const TreeControl = /* @__PURE__ */ vue.defineComponent({
       if (((_a = treeRef.value) == null ? void 0 : _a.getCurrentKey()) === nodeData._id && !readonly.value) {
         editCurrentNodeText();
       }
-      if (!c.state.singleSelect) {
-        (_b = treeRef.value) == null ? void 0 : _b.setCurrentKey(nodeData._id);
-      }
+      (_b = treeRef.value) == null ? void 0 : _b.setCurrentKey(nodeData._id);
       if (c.state.navigational) {
         const nodeModel = c.getNodeModel(nodeData._nodeId);
         if (!(nodeModel == null ? void 0 : nodeModel.navAppViewId)) {
@@ -436,7 +431,7 @@ const TreeControl = /* @__PURE__ */ vue.defineComponent({
         }
       }
       if (props.isSimple) {
-        treeRef.value.setCurrentKey((data == null ? void 0 : data._id) || void 0);
+        treeRef.value.setCurrentKey(data == null ? void 0 : data._id);
       } else {
         c.onTreeNodeClick(nodeData, evt);
       }
@@ -580,7 +575,10 @@ const TreeControl = /* @__PURE__ */ vue.defineComponent({
       if (!contextMenuC.model.detoolbarItems) {
         return;
       }
-      await contextMenuC.calcButtonState(nodeData._deData || (nodeData.srfkey ? nodeData : void 0), nodeModel.appDataEntityId);
+      await contextMenuC.calcButtonState(nodeData._deData || (nodeData.srfkey ? nodeData : void 0), nodeModel.appDataEntityId, {
+        view: c.view,
+        ctrl: c
+      });
       const menuState = contextMenuC.state.buttonsState;
       const menus = calcContextMenuItems(contextMenuC.model.detoolbarItems, nodeData, evt, menuState);
       if (!menus.length) {
@@ -635,12 +633,20 @@ const TreeControl = /* @__PURE__ */ vue.defineComponent({
       debounceSearch();
     };
     const allowDrop = (draggingNode, dropNode, type) => {
+      var _a;
+      if ((_a = dropNode.data) == null ? void 0 : _a._load_more) {
+        return false;
+      }
       const draggingNodeData = elTreeUtil.findNodeData(draggingNode.data._uuid, c);
       const dropNodeData = elTreeUtil.findNodeData(dropNode.data._uuid, c);
       const result = c.calcAllowDrop(draggingNodeData, dropNodeData, type);
       return result;
     };
     const allowDrag = (draggingNode) => {
+      var _a;
+      if ((_a = draggingNode.data) == null ? void 0 : _a._load_more) {
+        return false;
+      }
       const nodeData = elTreeUtil.findNodeData(draggingNode.data._uuid, c);
       return c.calcAllowDrag(nodeData);
     };
@@ -673,16 +679,11 @@ const TreeControl = /* @__PURE__ */ vue.defineComponent({
     });
     const renderCounter = (nodeModel) => {
       if (nodeModel.counterId) {
-        const value = counterData.value[nodeModel.counterId];
-        if (ramda.isNil(value)) {
-          return null;
-        }
-        if (nodeModel.counterMode === 1 && value === 0) {
-          return null;
-        }
+        const value = c.state.counterData[nodeModel.counterId];
         return vue.createVNode(vue.resolveComponent("iBizBadge"), {
+          "value": value,
           "class": ns.e("counter"),
-          "value": value
+          "counterMode": nodeModel.counterMode
         }, null);
       }
     };
@@ -726,6 +727,28 @@ const TreeControl = /* @__PURE__ */ vue.defineComponent({
         }
       }, null)]);
     };
+    const handleLoadMore = async (e, item) => {
+      var _a, _b;
+      e.stopPropagation();
+      if (!item) {
+        return;
+      }
+      if (item.level === 0) {
+        await c.loadNodes(void 0, true);
+        return;
+      }
+      const nodeData = elTreeUtil.findNodeData((_a = item.data) == null ? void 0 : _a._uuid, c);
+      if (!nodeData) {
+        return;
+      }
+      await c.loadNodes(nodeData, true);
+      const elNodes = toElNodes(nodeData._children || []);
+      (_b = treeRef.value) == null ? void 0 : _b.updateKeyChildren(nodeData._id, elNodes);
+      updateUI();
+      vue.nextTick(() => {
+        addLoadMoreNode(nodeData._id, nodeData);
+      });
+    };
     return {
       c,
       ns,
@@ -754,7 +777,8 @@ const TreeControl = /* @__PURE__ */ vue.defineComponent({
       handleDrop,
       onNodeTextEditBlur,
       renderNewNode,
-      handleEditKeyDown
+      handleEditKeyDown,
+      handleLoadMore
     };
   },
   render() {
@@ -796,7 +820,13 @@ const TreeControl = /* @__PURE__ */ vue.defineComponent({
             label: "_text",
             children: "_children",
             isLeaf: "_leaf",
-            disabled: "_disableSelect"
+            disabled: "_disableSelect",
+            class: (data) => {
+              if (data == null ? void 0 : data._load_more) {
+                return this.ns.is("load-more", true);
+              }
+              return "";
+            }
           },
           "lazy": true,
           "load": this.loadData,
@@ -813,9 +843,18 @@ const TreeControl = /* @__PURE__ */ vue.defineComponent({
           "onNodeDrop": this.handleDrop
         }, this.$attrs), {
           default: ({
-            data
+            data,
+            node
           }) => {
             var _a, _b;
+            if (data._load_more) {
+              return vue.createVNode("div", {
+                "class": this.ns.b("node"),
+                "onClick": (e) => {
+                  this.handleLoadMore(e, node == null ? void 0 : node.parent);
+                }
+              }, [data._text]);
+            }
             if (this.newNodeKey === data._id)
               return this.renderNewNode();
             const nodeData = this.findNodeData(data._uuid, this.c);
@@ -860,10 +899,11 @@ const TreeControl = /* @__PURE__ */ vue.defineComponent({
               }, [nodeData._text])];
             }
             return vue.createVNode("div", {
+              "class": [this.ns.b("node"), nodeData._disableSelect ? this.ns.bm("node", "disabled") : "", (_b = nodeModel.sysCss) == null ? void 0 : _b.cssName],
+              "title": nodeData._text,
               "onDblclick": (evt) => this.onNodeDbClick(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]
+              "onContextmenu": (evt) => this.onNodeContextmenu(nodeData, evt)
             }, [content, this.renderCounter(nodeModel), this.renderContextMenu(nodeModel, nodeData)]);
           }
         }), !this.newNodeData && this.renderNewNode(), this.c.state.enableNavView && this.c.state.showNavIcon ? !this.c.state.showNavView ? vue.createVNode("ion-icon", {

package/lib/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-width-icon-medium);--ibiz-control-treeview-node-icon-width:var(--ibiz-width-icon-medium);--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{position:absolute;top:14px;right:10px;color:var(--ibiz-color-primary);cursor:pointer}.ibiz-control-treeview-node{display:flex;flex-grow:1;flex-shrink:1;align-items:center;min-width:1px;height:100%}.ibiz-control-treeview-node .ibiz-context-menu{display:flex;flex-shrink:0}.ibiz-control-treeview-node .ibiz-context-menu__item--level-200{display:none}.ibiz-control-treeview-node:hover .ibiz-context-menu__item--level-200{display:block}.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-node__buttons--hover .ibiz-context-menu__item{display:none}.ibiz-control-treeview-node:hover .ibiz-control-treeview-node__buttons--hover .ibiz-context-menu__item{display:block}.ibiz-control-treeview-new-node{display:flex;align-items:center;justify-content:center;padding-right:var(--ibiz-spacing-base);padding-left:calc(1em + 12px);font-size:var(--ibiz-control-treeview-font-size)}.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);cursor:pointer}.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-node__content:has(.ibiz-control-treeview-new-node) .ibiz-control-treeview-new-node{width:100%;padding-right:0;padding-left:0}.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-editing-node{--el-input-height:var(--ibiz-control-treeview-node-height)}
+.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-width-icon-medium);--ibiz-control-treeview-node-icon-width:var(--ibiz-width-icon-medium);--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{position:absolute;top:14px;right:10px;color:var(--ibiz-color-primary);cursor:pointer}.ibiz-control-treeview .el-tree-node.is-load-more{pointer-events:none}.ibiz-control-treeview .el-tree-node.is-load-more .el-checkbox,.ibiz-control-treeview .el-tree-node.is-load-more .el-icon{display:none}.ibiz-control-treeview .el-tree-node.is-load-more .ibiz-control-treeview-node{justify-content:center;color:var(--ibiz-color-primary);pointer-events:all}.ibiz-control-treeview-node{display:flex;flex-grow:1;flex-shrink:1;align-items:center;min-width:1px;height:100%}.ibiz-control-treeview-node .ibiz-context-menu{display:flex;flex-shrink:0}.ibiz-control-treeview-node .ibiz-context-menu__item--level-200{display:none}.ibiz-control-treeview-node:hover .ibiz-context-menu__item--level-200{display:block}.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-node__buttons--hover .ibiz-context-menu__item{display:none}.ibiz-control-treeview-node:hover .ibiz-control-treeview-node__buttons--hover .ibiz-context-menu__item{display:block}.ibiz-control-treeview-new-node{display:flex;align-items:center;justify-content:center;padding-right:var(--ibiz-spacing-base);padding-left:calc(1em + 12px);font-size:var(--ibiz-control-treeview-font-size)}.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);cursor:pointer}.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)}.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{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:has(.ibiz-control-treeview-new-node) .ibiz-control-treeview-new-node{width:100%;padding-right:0;padding-left:0}.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-editing-node{--el-input-height:var(--ibiz-control-treeview-node-height)}

package/lib/control/tree-grid/tree-grid.cjs

@@ -2,6 +2,7 @@
 
 var vue = require('vue');
 var vue3Util = require('@ibiz-template/vue3-util');
+var core = require('@ibiz-template/core');
 var runtime = require('@ibiz-template/runtime');
 var useRowEditPopover = require('../grid/row-edit-popover/use-row-edit-popover.cjs');
 require('../grid/grid/index.cjs');
@@ -12,6 +13,18 @@ var gridControl_util = require('../grid/grid/grid-control.util.cjs');
 function _isSlot(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
 }
+function renderAttrs(model, params) {
+  var _a;
+  const attrs = {};
+  (_a = model.controlAttributes) == null ? void 0 : _a.forEach((item) => {
+    if (item.attrName && item.attrValue) {
+      attrs[item.attrName] = runtime.ScriptFactory.execSingleLine(item.attrValue, {
+        ...params
+      });
+    }
+  });
+  return attrs;
+}
 const TreeGridControl = /* @__PURE__ */ vue.defineComponent({
   name: "IBizTreeGridControl",
   props: {
@@ -91,15 +104,17 @@ const TreeGridControl = /* @__PURE__ */ vue.defineComponent({
     slots
   }) {
     const c = vue3Util.useControlController((...args) => new runtime.TreeGridController(...args));
+    vue3Util.useControlPopoverzIndex(c);
     const ns = vue3Util.useNamespace("control-grid");
     const ns2 = vue3Util.useNamespace("control-".concat(c.model.controlType.toLowerCase()));
     const {
       tableRef,
       onRowClick,
       onDbRowClick,
-      onSelectionChange,
       onSortChange,
-      handleRowClassName
+      onSelectionChange,
+      handleRowClassName,
+      handleHeaderCellClassName
     } = gridControl_util.useITableEvent(c);
     const {
       onPageChange,
@@ -108,8 +123,8 @@ const TreeGridControl = /* @__PURE__ */ vue.defineComponent({
     } = gridControl_util.useAppGridPagination(c);
     const {
       tableData,
-      renderColumns,
       defaultSort,
+      renderColumns,
       summaryMethod,
       headerDragend
     } = gridControl_util.useAppGridBase(c, props, tableRef);
@@ -151,11 +166,56 @@ const TreeGridControl = /* @__PURE__ */ vue.defineComponent({
       }
       return null;
     };
+    const handleDefaultSelect = () => {
+      const {
+        expandRowKeys,
+        selectedData,
+        singleSelect
+      } = c.state;
+      const table = tableRef.value;
+      if (!table || !selectedData.length)
+        return;
+      const treeData = table.store.states.treeData.value;
+      const expandKeys = Object.keys(treeData).filter((key) => treeData[key].loaded);
+      if (expandRowKeys.length === expandKeys.length && expandRowKeys.sort().every((item, index) => item === expandKeys.sort()[index])) {
+        const selection = [];
+        const selectKeys = selectedData.map((selected) => selected.srfkey);
+        core.recursiveIterate({
+          children: table.store.states.data.value
+        }, (item) => {
+          if (selectKeys.includes(item.srfkey))
+            selection.push(item);
+        });
+        vue.nextTick(() => {
+          if (singleSelect) {
+            table.setCurrentRow(selection[0]);
+          } else {
+            table.store.states.selection.value = selection;
+          }
+        });
+      }
+    };
+    const handleDefaultExpand = (nodes) => {
+      if (!tableRef.value || !c.state.expandRowKeys.length)
+        return;
+      c.state.expandRowKeys.forEach((key) => {
+        const node = nodes.find((item) => item.srfkey === key);
+        if (node)
+          vue.nextTick(() => {
+            tableRef.value.store.loadOrToggle(node);
+          });
+      });
+      handleDefaultSelect();
+    };
+    vue.watch(() => tableRef.value, () => {
+      handleDefaultExpand(c.state.treeGirdData);
+    });
     const loadData = async (item, _row, callback) => {
       const treeGirdItems = c.state.items.map((data) => c.getTreeGridDataItem(data));
       const items = treeGirdItems.filter((data) => item[c.treeGridValueField] === data[c.treeGridParentField]);
       item.children = items;
       callback(items);
+      handleDefaultExpand(items);
     };
     const renderBatchToolBar = () => {
       var _a;
@@ -166,7 +226,7 @@ const TreeGridControl = /* @__PURE__ */ vue.defineComponent({
         return;
       }
       return vue.createVNode("div", {
-        "class": [ns.b("batch-toolbar"), ns.is("show", c.state.selectedData.length > 0)]
+        "class": [ns.b("batch-toolbar"), ns.is("show", c.showBatchToolbar)]
       }, [vue.createVNode("div", {
         "class": ns.b("batch-toolbar-content")
       }, [vue.createVNode("div", {
@@ -197,24 +257,25 @@ const TreeGridControl = /* @__PURE__ */ vue.defineComponent({
       ns2,
       tableRef,
       tableData,
+      defaultSort,
       renderColumns,
+      headerCssVars,
+      loadData,
+      onRowClick,
       renderColumn,
-      defaultSort,
       onDbRowClick,
-      onRowClick,
-      onSelectionChange,
       onSortChange,
       onPageChange,
-      onPageSizeChange,
-      onPageRefresh,
-      handleRowClassName,
       renderNoData,
-      loadData,
+      onPageRefresh,
       summaryMethod,
       headerDragend,
       renderPopover,
+      onPageSizeChange,
+      onSelectionChange,
+      handleRowClassName,
       renderBatchToolBar,
-      headerCssVars
+      handleHeaderCellClassName
     };
   },
   render() {
@@ -223,63 +284,77 @@ const TreeGridControl = /* @__PURE__ */ vue.defineComponent({
       hideHeader,
       enablePagingBar
     } = this.c.model;
-    return vue.createVNode(vue.resolveComponent("iBizControlBase"), {
-      "class": [this.ns.b(), this.ns2.b(), this.ns.is("show-header", !hideHeader), this.ns.is("enable-page", enablePagingBar), this.ns.is("enable-group", this.c.model.enableGroup), this.ns.is("enable-customized", this.c.model.enableCustomized)],
-      "controller": this.c,
-      "style": this.headerCssVars
+    return vue.createVNode(vue.resolveComponent("iBizControlNavigation"), {
+      "controller": this.c
     }, {
-      default: () => [this.c.state.isLoaded && vue.createVNode(vue.resolveComponent("el-table"), {
-        "ref": "tableRef",
-        "class": this.ns.e("table"),
-        "default-sort": this.defaultSort,
-        "border": true,
-        "show-header": !hideHeader,
-        "show-summary": this.c.enableAgg,
-        "summary-method": this.summaryMethod,
-        "highlight-current-row": state.singleSelect,
-        "row-class-name": this.handleRowClassName,
-        "row-key": "srfkey",
-        "data": this.c.state.showTreeGrid ? state.treeGirdData : this.tableData,
-        "onRowClick": this.onRowClick,
-        "onRowDblclick": this.onDbRowClick,
-        "onSelectionChange": this.onSelectionChange,
-        "onSortChange": this.onSortChange,
-        "onHeaderDragend": this.headerDragend,
-        "tooltip-effect": "light",
-        "tree-props": {
-          children: "children",
-          hasChildren: "hasChildren"
-        },
-        "load": this.loadData,
-        "lazy": true
+      default: () => [vue.createVNode(vue.resolveComponent("iBizControlBase"), {
+        "class": [this.ns.b(), this.ns2.b(), this.ns.is("show-header", !hideHeader), this.ns.is("enable-page", enablePagingBar), this.ns.is("enable-group", this.c.model.enableGroup), this.ns.is("enable-customized", this.c.model.enableCustomized)],
+        "controller": this.c,
+        "style": this.headerCssVars
       }, {
-        empty: this.renderNoData,
         default: () => {
-          return [!state.singleSelect && vue.createVNode(vue.resolveComponent("el-table-column"), {
-            "class-name": this.ns.e("selection"),
-            "type": "selection",
-            "width": "55"
-          }, null), state.isCreated && this.renderColumns.map((model, index) => {
-            return this.renderColumn(model, index);
-          })];
-        },
-        append: () => {
-          return this.renderPopover();
+          var _a;
+          return [this.c.state.isLoaded && vue.createVNode(vue.resolveComponent("el-table"), vue.mergeProps({
+            "lazy": true,
+            "border": true,
+            "ref": "tableRef",
+            "row-key": "srfkey",
+            "load": this.loadData,
+            "tooltip-effect": "light",
+            "show-header": !hideHeader,
+            "class": this.ns.e("table"),
+            "key": this.c.state.tableKey,
+            "onRowClick": this.onRowClick,
+            "default-sort": this.defaultSort,
+            "show-summary": this.c.enableAgg,
+            "onSortChange": this.onSortChange,
+            "onRowDblclick": this.onDbRowClick,
+            "summary-method": this.summaryMethod,
+            "onHeaderDragend": this.headerDragend,
+            "row-class-name": this.handleRowClassName,
+            "onSelectionChange": this.onSelectionChange,
+            "highlight-current-row": state.singleSelect,
+            "onExpandChange": (row, expanded) => this.c.expandChange(row, expanded),
+            "header-cell-class-name": this.handleHeaderCellClassName,
+            "tree-props": {
+              children: "children",
+              hasChildren: "hasChildren"
+            },
+            "data": this.c.state.showTreeGrid ? state.treeGirdData : this.tableData
+          }, this.$attrs, renderAttrs(this.c.model, {
+            ...this.c.getEventArgs()
+          })), {
+            empty: this.renderNoData,
+            default: () => {
+              return [!state.singleSelect && vue.createVNode(vue.resolveComponent("el-table-column"), {
+                "width": "55",
+                "type": "selection",
+                "reserve-selection": true,
+                "class-name": this.ns.e("selection")
+              }, null), state.isCreated && this.renderColumns.map((model, index) => {
+                return this.renderColumn(model, index);
+              })];
+            },
+            append: () => {
+              return this.renderPopover();
+            }
+          }), enablePagingBar && vue.createVNode(vue.resolveComponent("iBizPagination"), {
+            "total": state.total,
+            "curPage": state.curPage,
+            "size": state.size,
+            "totalPages": state.totalPages,
+            "onChange": this.onPageChange,
+            "onPageSizeChange": this.onPageSizeChange,
+            "onPageRefresh": this.onPageRefresh,
+            "popperClass": "".concat(((_a = this.c.model.sysCss) == null ? void 0 : _a.cssName) || "default", "--popper")
+          }, null), this.c.model.enableCustomized && !hideHeader && vue.createVNode("div", {
+            "class": this.ns.b("setting-box")
+          }, [vue.createVNode(vue.resolveComponent("iBizGridSetting"), {
+            "columnStates": state.columnStates,
+            "controller": this.c
+          }, null)]), this.renderBatchToolBar()];
         }
-      }), enablePagingBar && vue.createVNode(vue.resolveComponent("iBizPagination"), {
-        "total": state.total,
-        "curPage": state.curPage,
-        "size": state.size,
-        "totalPages": state.totalPages,
-        "onChange": this.onPageChange,
-        "onPageSizeChange": this.onPageSizeChange,
-        "onPageRefresh": this.onPageRefresh
-      }, null), this.c.model.enableCustomized && !hideHeader && vue.createVNode("div", {
-        "class": this.ns.b("setting-box")
-      }, [vue.createVNode(vue.resolveComponent("iBizGridSetting"), {
-        "columnStates": state.columnStates,
-        "controller": this.c
-      }, null)]), this.renderBatchToolBar()]
+      })]
     });
   }
 });

package/lib/control/tree-grid-ex/tree-grid-ex-column/tree-grid-ex-edit-column/all-edit.cjs

@@ -22,7 +22,9 @@ function useAllEdit(props, _componentRef) {
     return editable.value;
   });
   const onBlur = () => {
-    c.treeGrid.save(props.row.data);
+    if (c.treeGrid.editSaveMode === "cell-blur") {
+      c.treeGrid.save(props.row.data);
+    }
   };
   const gridEditItemProps = vue.reactive({
     stopPropagation

package/lib/control/tree-grid-ex/tree-grid-ex-column/tree-grid-ex-field-column/tree-grid-ex-field-column.cjs

@@ -24,6 +24,7 @@ const TreeGridExFieldColumn = /* @__PURE__ */ vue.defineComponent({
   },
   setup(props) {
     const ns = vue3Util.useNamespace("tree-grid-ex-field-column");
+    const zIndex = props.controller.treeGrid.state.zIndex;
     const fieldValue = vue.computed(() => {
       if (props.row.data._nodeType !== "DE" && props.controller.isFirstShowColumn) {
         return props.row.data._text;
@@ -78,14 +79,15 @@ const TreeGridExFieldColumn = /* @__PURE__ */ vue.defineComponent({
     };
     return {
       ns,
-      nodeColumn,
-      fieldValue,
+      zIndex,
+      tooltip,
       showText,
       clickable,
-      tooltip,
-      onInfoTextChange,
+      nodeColumn,
+      fieldValue,
       onTextClick,
-      onActionClick
+      onActionClick,
+      onInfoTextChange
     };
   },
   render() {
@@ -118,6 +120,7 @@ const TreeGridExFieldColumn = /* @__PURE__ */ vue.defineComponent({
       actions = this.$slots.actions();
     } else if (this.row.columnActionsStates[this.controller.name]) {
       actions = vue.createVNode(vue.resolveComponent("iBizActionToolbar"), {
+        "zIndex": this.zIndex,
         "class": this.ns.e("toolbar"),
         "action-details": (_c = this.nodeColumn) == null ? void 0 : _c.nodeColumn.deuiactionGroup.uiactionGroupDetails,
         "actions-state": this.row.columnActionsStates[this.controller.name],

package/lib/control/tree-grid-ex/tree-grid-ex-column/tree-grid-ex-field-column/tree-grid-ex-field-column.css

@@ -1 +1 @@
-.ibiz-tree-grid-ex-field-column{--ibiz-tree-grid-ex-field-column-cell-padding:var(--ibiz-spacing-tight);--ibiz-tree-grid-ex-field-column-color:var(--ibiz-color-text-2);--ibiz-tree-grid-ex-field-column-clickable-text-color:var(--ibiz-color-primary);--ibiz-tree-grid-ex-field-column-clickable-hover-text-color:var(--ibiz-color-primary-hover);display:inline-flex;align-items:center;justify-content:var(--ibiz-grid-column-justify-content);width:100%;height:100%;padding:var(--ibiz-tree-grid-ex-field-column-cell-padding)}.ibiz-tree-grid-ex-field-column__text{font-size:var(--ibiz-font-size-regular);font-weight:var(--ibiz-font-weight-regular);color:var(--ibiz-tree-grid-ex-field-column-color)}.ibiz-tree-grid-ex-field-column--clickable{cursor:pointer}.ibiz-tree-grid-ex-field-column--clickable .ibiz-tree-grid-ex-field-column__text{color:var(--ibiz-tree-grid-ex-field-column-clickable-text-color)}.ibiz-tree-grid-ex-field-column--clickable .ibiz-tree-grid-ex-field-column__text:hover{color:var(--ibiz-tree-grid-ex-field-column-clickable-hover-text-color)}.ibiz-tree-grid-ex-field-column--ellipsis span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-tree-grid-ex-field-column--wrap{word-break:break-word;white-space:pre-wrap}.ibiz-tree-grid-ex-field-column.is-has-action{justify-content:space-between}.ibiz-tree-grid-ex-field-column-text-container{display:inline-flex;flex-grow:1;align-items:center;justify-content:var(--ibiz-grid-column-justify-content);height:100%}.ibiz-tree-grid-ex-field-column-toolbar-container .ibiz-action-toolbar__item:not(.ibiz-action-toolbar__item--level-250){opacity:0}.ibiz-tree-grid-ex-field-column-toolbar-container .ibiz-action-toolbar__separator{opacity:0}.el-table .el-table__body-wrapper tr:hover .ibiz-tree-grid-ex-field-column-toolbar-container{opacity:1}
+.ibiz-tree-grid-ex-field-column{--ibiz-tree-grid-ex-field-column-cell-padding:var(--ibiz-spacing-tight);--ibiz-tree-grid-ex-field-column-color:var(--ibiz-color-text-2);--ibiz-tree-grid-ex-field-column-clickable-text-color:var(--ibiz-color-primary);--ibiz-tree-grid-ex-field-column-clickable-hover-text-color:var(--ibiz-color-primary-hover);display:inline-flex;align-items:center;justify-content:var(--ibiz-grid-column-justify-content);width:100%;height:100%;padding:var(--ibiz-tree-grid-ex-field-column-cell-padding)}.ibiz-tree-grid-ex-field-column__text{font-size:var(--ibiz-font-size-regular);font-weight:var(--ibiz-font-weight-regular);color:var(--ibiz-tree-grid-ex-field-column-color)}.ibiz-tree-grid-ex-field-column--clickable .ibiz-tree-grid-ex-field-column__text{color:var(--ibiz-tree-grid-ex-field-column-clickable-text-color)}.ibiz-tree-grid-ex-field-column--clickable .ibiz-tree-grid-ex-field-column__text:hover{color:var(--ibiz-tree-grid-ex-field-column-clickable-hover-text-color)}.ibiz-tree-grid-ex-field-column--clickable{cursor:pointer}.ibiz-tree-grid-ex-field-column--ellipsis span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ibiz-tree-grid-ex-field-column--wrap{word-break:break-word;white-space:pre-wrap}.ibiz-tree-grid-ex-field-column.is-has-action{justify-content:space-between}.ibiz-tree-grid-ex-field-column-text-container{display:inline-flex;flex-grow:1;align-items:center;justify-content:var(--ibiz-grid-column-justify-content);height:100%}.ibiz-tree-grid-ex-field-column-toolbar-container .ibiz-action-toolbar__item:not(.ibiz-action-toolbar__item--level-250){opacity:0}.ibiz-tree-grid-ex-field-column-toolbar-container .ibiz-action-toolbar__separator{opacity:0}

package/lib/control/tree-grid-ex/tree-grid-ex-column/tree-grid-ex-ua-column/tree-grid-ex-ua-column.css

@@ -1 +1 @@
-.ibiz-tree-grid-ex-ua-column{--ibiz-tree-grid-ex-ua-column-cell-padding:var(--ibiz-spacing-tight);--ibiz-tree-grid-ex-ua-column-btn-bg-color:transparent;--ibiz-tree-grid-ex-ua-column-btn-hover-color:var(--ibiz-color-primary-hover);--ibiz-tree-grid-ex-ua-column-btn-color:var(--ibiz-color-primary);--ibiz-tree-grid-ex-ua-column-font-size:var(--ibiz-font-size-regular);--ibiz-tree-grid-ex-ua-column-font-weight:var(--ibiz-font-weight-regular);display:flex;align-items:center;justify-content:var(--ibiz-tree-grid-ex-column-text-align);width:100%;height:100%;padding:var(--ibiz-tree-grid-ex-ua-column-cell-padding)}.ibiz-tree-grid-ex-ua-column .el-button{font-size:var(--ibiz-tree-grid-ex-ua-column-font-size);font-weight:var(--ibiz-tree-grid-ex-ua-column-font-weight);color:var(--ibiz-tree-grid-ex-ua-column-btn-color);background-color:var(--ibiz-tree-grid-ex-ua-column-btn-bg-color);box-shadow:none}.ibiz-tree-grid-ex-ua-column .el-button:hover{color:var(--ibiz-tree-grid-ex-ua-column-btn-hover-color)}.ibiz-tree-grid-ex-ua-column .el-button.is-text:not(.is-disabled):hover{background-color:var(--ibiz-tree-grid-ex-ua-column-btn-bg-color)}
+.ibiz-tree-grid-ex-ua-column{--ibiz-tree-grid-ex-ua-column-cell-padding:var(--ibiz-spacing-tight);--ibiz-tree-grid-ex-ua-column-btn-bg-color:transparent;--ibiz-tree-grid-ex-ua-column-btn-hover-color:var(--ibiz-color-primary-hover);--ibiz-tree-grid-ex-ua-column-btn-color:var(--ibiz-color-primary);--ibiz-tree-grid-ex-ua-column-font-size:var(--ibiz-font-size-regular);--ibiz-tree-grid-ex-ua-column-font-weight:var(--ibiz-font-weight-regular);display:flex;align-items:center;justify-content:var(--ibiz-grid-column-text-align);width:100%;height:100%;padding:var(--ibiz-tree-grid-ex-ua-column-cell-padding)}.ibiz-tree-grid-ex-ua-column .el-button{font-size:var(--ibiz-tree-grid-ex-ua-column-font-size);font-weight:var(--ibiz-tree-grid-ex-ua-column-font-weight);color:var(--ibiz-tree-grid-ex-ua-column-btn-color);background-color:var(--ibiz-tree-grid-ex-ua-column-btn-bg-color);box-shadow:none}.ibiz-tree-grid-ex-ua-column .el-button:hover{color:var(--ibiz-tree-grid-ex-ua-column-btn-hover-color)}.ibiz-tree-grid-ex-ua-column .el-button.is-text:not(.is-disabled):hover{background-color:var(--ibiz-tree-grid-ex-ua-column-btn-bg-color)}