@ibiz-template/vue3-components 0.7.41-alpha.2 → 0.7.41-alpha.21

package/es/control/toolbar/toolbar.mjs

@@ -53,7 +53,7 @@ const ToolbarControl = /* @__PURE__ */ defineComponent({
       required: true
     },
     /**
-     * @description 绘制模式
+     * @description 绘制模式，可选值为DESIGN、RUNTIME，默认值为RUNTIME
      */
     runMode: {
       type: String,
@@ -133,121 +133,59 @@ const ToolbarControl = /* @__PURE__ */ defineComponent({
         })]);
       });
     };
-    const renderSubmenu = (item) => {
-      const detoolbarItems = item.detoolbarItems || [];
-      const curVisible = c.state.buttonsState[item.id].visible;
-      const curDisabled = c.state.buttonsState[item.id].disabled;
-      if (!curVisible) {
+    const renderEmbedGroupDetail = (item, detail) => {
+      var _a2, _b;
+      let _slot2;
+      const actionId = detail.uiactionId;
+      const visible = (_a2 = c.state.buttonsState[detail.id]) == null ? void 0 : _a2.visible;
+      const provider = c.itemProviders[detail.id];
+      if (!visible) {
         return null;
       }
-      const ploading = detoolbarItems.findIndex((item2) => {
-        var _a2;
-        return (_a2 = c.state.buttonsState[item2.id]) == null ? void 0 : _a2.loading;
-      }) !== -1;
-      const pvisible = detoolbarItems.findIndex((item2) => {
-        var _a2;
-        return ((_a2 = c.state.buttonsState[item2.id]) == null ? void 0 : _a2.visible) === true;
-      }) !== -1;
-      if (!pvisible) {
-        return null;
+      if (provider) {
+        const component = resolveComponent(provider.component);
+        return h(component, {
+          key: detail.id,
+          class: [ns.e("item")],
+          item,
+          controller: c
+        });
       }
-      const pdisabled = curDisabled || detoolbarItems.findIndex((item2) => {
-        var _a2;
-        return ((_a2 = c.state.buttonsState[item2.id]) == null ? void 0 : _a2.disabled) === false;
-      }) === -1;
-      const groupButtonStyle = item.buttonStyle || "";
-      return createVNode(resolveComponent("el-sub-menu"), {
-        "class": [ns.b("submenu"), ns.em("item", groupButtonStyle.toLowerCase()), calcCssName(item)],
-        "index": item.id,
-        "disabled": pdisabled,
-        "title": showTitle(item.tooltip),
-        "popper-class": [ns.b("submenu-popper"), ns.bm("submenu-popper", toolbarStyle), ns.em("submenu-popper", groupButtonStyle.toLowerCase()), ns.bm("submenu-popper", calcCssName(item)), calcCssName(item)]
+      const buttonType = (_b = detail.buttonStyle) == null ? void 0 : _b.toLowerCase();
+      if (actionId === "exportexcel" || actionId === "gridview_exportaction") {
+        return createVNode(IBizExportExcel, {
+          "class": [ns.e("menu-exportexcel"), ns.em("item", buttonType), calcCssName(detail)],
+          "mode": "menu",
+          "item": detail,
+          "btnContent": (barItem) => btnContent(barItem, c.state),
+          "size": btnSize.value,
+          "controller": c,
+          "onExportExcel": (e, data) => {
+            handleActionClick(detail, e, data);
+          }
+        }, null);
+      }
+      return createVNode(resolveComponent("el-menu-item"), {
+        "class": [ns.is("loading", c.state.buttonsState[detail.id].loading), ns.em("item", buttonType), calcCssName(detail)],
+        "index": "menuitem".concat(detail.id),
+        "disabled": c.state.buttonsState[detail.id].disabled,
+        "title": showTitle(detail.caption)
       }, {
-        default: () => {
-          return detoolbarItems.map((item2) => {
-            var _a2, _b;
-            const actionId = item2.uiactionId;
-            const visible = (_a2 = c.state.buttonsState[item2.id]) == null ? void 0 : _a2.visible;
-            const provider = c.itemProviders[item2.id];
-            if (!visible) {
-              return null;
-            }
-            if (provider) {
-              const component = resolveComponent(provider.component);
-              return h(component, {
-                key: item2.id,
-                class: [ns.e("item")],
-                item,
-                controller: c
-              });
-            }
-            if (item2.itemType === "SEPERATOR") {
+        default: () => [createVNode(resolveComponent("el-button"), {
+          "loading": c.state.buttonsState[detail.id].loading,
+          "onClick": (e) => {
+            if (!detail.uiactionId)
               return;
-            }
-            if (item2.itemType === "RAWITEM") {
-              return createVNode(resolveComponent("el-menu-item"), {
-                "index": "menuitem".concat(item2.id),
-                "title": showTitle(item2.tooltip)
-              }, {
-                default: () => [createVNode(resolveComponent("iBizRawItem"), {
-                  "rawItem": item2,
-                  "content": item2.rawItem.content,
-                  "class": ns.b("submenu-rawitem"),
-                  "onClick": (e) => handleClick(item2, e)
-                }, null)]
-              });
-            }
-            if (item2.itemType === "DEUIACTION") {
-              let _slot2;
-              const buttonType = (_b = item2.buttonStyle) == null ? void 0 : _b.toLowerCase();
-              if (actionId === "exportexcel" || actionId === "gridview_exportaction") {
-                return createVNode(IBizExportExcel, {
-                  "class": [ns.e("menu-exportexcel"), ns.em("item", buttonType), calcCssName(item2)],
-                  "mode": "menu",
-                  "item": item2,
-                  "btnContent": (barItem) => btnContent(barItem, c.state),
-                  "size": btnSize.value,
-                  "controller": c,
-                  "onExportExcel": (e, data) => {
-                    handleClick(item2, e, data);
-                  }
-                }, null);
-              }
-              return createVNode(resolveComponent("el-menu-item"), {
-                "class": [ns.is("loading", c.state.buttonsState[item2.id].loading), ns.em("item", buttonType), calcCssName(item2)],
-                "index": "menuitem".concat(item2.id),
-                "disabled": c.state.buttonsState[item2.id].disabled,
-                "title": showTitle(item2.tooltip),
-                "onClick": (e) => handleClick(item2, e)
-              }, {
-                default: () => [createVNode(resolveComponent("el-button"), {
-                  "loading": c.state.buttonsState[item2.id].loading
-                }, _isSlot(_slot2 = btnContent(item2, c.state)) ? _slot2 : {
-                  default: () => [_slot2]
-                })]
-              });
-            }
-            if (item2.itemType === "ITEMS") {
-              return renderSubmenu(item2);
-            }
-            return null;
-          });
-        },
-        title: () => {
-          let _slot3;
-          return createVNode(resolveComponent("el-button"), {
-            "loading": ploading,
-            "disabled": pdisabled,
-            "type": convertBtnType(groupButtonStyle)
-          }, _isSlot(_slot3 = btnContent(item, c.state)) ? _slot3 : {
-            default: () => [_slot3]
-          });
-        }
+            handleActionClick(detail, e);
+          }
+        }, _isSlot(_slot2 = btnContent(detail, c.state)) ? _slot2 : {
+          default: () => [_slot2]
+        })]
       });
     };
     const renderActionButton = (detail, type) => {
       if (c.state.buttonsState[detail.id].visible) {
-        let _slot4;
+        let _slot3;
         return createVNode(resolveComponent("el-button"), {
           "size": btnSize.value,
           "class": calcCssName(detail),
@@ -256,25 +194,25 @@ const ToolbarControl = /* @__PURE__ */ defineComponent({
           "loading": c.state.buttonsState[detail.id].loading,
           "disabled": c.state.buttonsState[detail.id].disabled,
           "onClick": (e) => handleActionClick(detail, e)
-        }, _isSlot(_slot4 = btnContent(detail, c.state)) ? _slot4 : {
-          default: () => [_slot4]
+        }, _isSlot(_slot3 = btnContent(detail, c.state)) ? _slot3 : {
+          default: () => [_slot3]
         });
       }
       return null;
     };
     const renderDropdownItem = (detail) => {
       if (c.state.buttonsState[detail.id].visible) {
-        let _slot5;
+        let _slot4;
         const disabled = c.state.buttonsState[detail.id].disabled;
         return createVNode(resolveComponent("el-dropdown-item"), {
           "class": [ns2.be("dropdown-popper", "dropdown-item"), ns2.is("disabled", disabled), ns.em("item", convertBtnType(detail.buttonStyle))]
-        }, _isSlot(_slot5 = renderActionButton(detail)) ? _slot5 : {
-          default: () => [_slot5]
+        }, _isSlot(_slot4 = renderActionButton(detail)) ? _slot4 : {
+          default: () => [_slot4]
         });
       }
       return null;
     };
-    const renderActionGroupItems = (item) => {
+    const renderActionGroupItems = (item, isEmbed) => {
       const {
         uiactionGroup
       } = item;
@@ -284,14 +222,37 @@ const ToolbarControl = /* @__PURE__ */ defineComponent({
         } = uiactionGroup;
         const enableDropdown = uiactionGroupDetails.length > 0;
         const groupButtonStyle = item.buttonStyle || "";
+        if (isEmbed) {
+          const curDisabled = c.state.buttonsState[item.id].disabled;
+          const pdisabled = curDisabled || uiactionGroupDetails.findIndex((item2) => {
+            var _a2;
+            return ((_a2 = c.state.buttonsState[item2.id]) == null ? void 0 : _a2.disabled) === false;
+          }) === -1;
+          return createVNode(resolveComponent("el-sub-menu"), {
+            "class": [ns.b("submenu"), ns.be("submenu", "groupdetails"), ns.em("item", groupButtonStyle.toLowerCase()), calcCssName(item)],
+            "index": item.id,
+            "disabled": pdisabled,
+            "title": showTitle(item.tooltip),
+            "popper-class": [ns.b("submenu-popper"), ns.em("submenu-popper", "groupdetails"), ns.bm("submenu-popper", toolbarStyle), ns.em("submenu-popper", groupButtonStyle.toLowerCase()), ns.bm("submenu-popper", calcCssName(item)), calcCssName(item)]
+          }, {
+            default: () => {
+              return uiactionGroupDetails.map((detail) => {
+                return renderEmbedGroupDetail(item, detail);
+              });
+            },
+            title: () => {
+              return renderEmbedGroupDetail(item, item);
+            }
+          });
+        }
         return createVNode(resolveComponent("el-dropdown"), {
           "popper-class": [ns2.b("dropdown-popper"), ns2.bm("dropdown-popper", toolbarStyle), ns2.em("dropdown-popper", groupButtonStyle.toLowerCase()), ns2.bm("dropdown-popper", calcCssName(item))]
         }, {
           default: () => renderActionButton(item),
           dropdown: () => {
-            let _slot6;
-            return enableDropdown && createVNode(resolveComponent("el-dropdown-menu"), null, _isSlot(_slot6 = uiactionGroupDetails.map((detail) => renderDropdownItem(detail))) ? _slot6 : {
-              default: () => [_slot6]
+            let _slot5;
+            return enableDropdown && createVNode(resolveComponent("el-dropdown-menu"), null, _isSlot(_slot5 = uiactionGroupDetails.map((detail) => renderDropdownItem(detail))) ? _slot5 : {
+              default: () => [_slot5]
             });
           }
         });
@@ -308,7 +269,7 @@ const ToolbarControl = /* @__PURE__ */ defineComponent({
       }
       return -1;
     };
-    const renderActionGroupItemx = (item) => {
+    const renderActionGroupItemx = (item, isEmbed) => {
       const {
         uiactionGroup
       } = item;
@@ -321,7 +282,26 @@ const ToolbarControl = /* @__PURE__ */ defineComponent({
           const firstItem = uiactionGroupDetails[firstIndex];
           const remainders = uiactionGroupDetails.slice(firstIndex + 1).filter((_item) => !!c.state.buttonsState[_item.id].visible);
           const enableDropdown = remainders.length > 0;
-          const groupButtonStyle = item.buttonStyle || "";
+          let groupButtonStyle = item.buttonStyle || "";
+          if (isEmbed) {
+            groupButtonStyle = firstItem.buttonStyle || "";
+            return createVNode(resolveComponent("el-sub-menu"), {
+              "class": [ns.b("submenu"), ns.be("submenu", "groupdetails"), ns.em("item", groupButtonStyle.toLowerCase()), calcCssName(firstItem)],
+              "index": firstItem.id,
+              "disabled": c.state.buttonsState[firstItem.id].disabled,
+              "title": showTitle(firstItem.tooltip),
+              "popper-class": [ns.b("submenu-popper"), ns.be("submenu-popper", "groupdetails"), ns.bm("submenu-popper", toolbarStyle), ns.em("submenu-popper", groupButtonStyle.toLowerCase()), ns.bm("submenu-popper", calcCssName(firstItem)), calcCssName(firstItem)]
+            }, {
+              default: () => {
+                return remainders.map((detail) => {
+                  return renderEmbedGroupDetail(item, detail);
+                });
+              },
+              title: () => {
+                return renderEmbedGroupDetail(item, firstItem);
+              }
+            });
+          }
           return createVNode(resolveComponent("el-dropdown"), {
             "split-button": enableDropdown,
             "type": convertBtnType(groupButtonStyle),
@@ -329,9 +309,9 @@ const ToolbarControl = /* @__PURE__ */ defineComponent({
           }, {
             default: () => renderActionButton(firstItem, convertBtnType(groupButtonStyle)),
             dropdown: () => {
-              let _slot7;
-              return enableDropdown && createVNode(resolveComponent("el-dropdown-menu"), null, _isSlot(_slot7 = remainders.map((detail) => renderDropdownItem(detail))) ? _slot7 : {
-                default: () => [_slot7]
+              let _slot6;
+              return enableDropdown && createVNode(resolveComponent("el-dropdown-menu"), null, _isSlot(_slot6 = remainders.map((detail) => renderDropdownItem(detail))) ? _slot6 : {
+                default: () => [_slot6]
               });
             }
           });
@@ -339,7 +319,7 @@ const ToolbarControl = /* @__PURE__ */ defineComponent({
       }
       return null;
     };
-    const renderActionGroupItem = (item) => {
+    const renderActionGroupItem = (item, isEmbed) => {
       const {
         uiactionGroup
       } = item;
@@ -347,25 +327,145 @@ const ToolbarControl = /* @__PURE__ */ defineComponent({
         const {
           uiactionGroupDetails
         } = uiactionGroup;
+        if (isEmbed) {
+          return uiactionGroupDetails.map((detail) => {
+            return renderEmbedGroupDetail(item, detail);
+          });
+        }
         return uiactionGroupDetails.map((detail) => createVNode("div", {
           "class": [ns2.e("item-deuiaction"), ns.em("item", convertBtnType(detail.buttonStyle))]
         }, [renderActionButton(detail)]));
       }
       return null;
     };
-    const renderActionGroup = (item) => {
+    const renderActionGroup = (item, isEmbed = false) => {
       const {
         groupExtractMode
       } = item;
       switch (groupExtractMode) {
         case "ITEMS":
-          return renderActionGroupItems(item);
+          return renderActionGroupItems(item, isEmbed);
         case "ITEMX":
-          return renderActionGroupItemx(item);
+          return renderActionGroupItemx(item, isEmbed);
         case "ITEM":
         default:
-          return renderActionGroupItem(item);
+          return renderActionGroupItem(item, isEmbed);
+      }
+    };
+    const renderSubmenu = (item) => {
+      const detoolbarItems = item.detoolbarItems || [];
+      const curVisible = c.state.buttonsState[item.id].visible;
+      const curDisabled = c.state.buttonsState[item.id].disabled;
+      if (!curVisible) {
+        return null;
+      }
+      const ploading = detoolbarItems.findIndex((item2) => {
+        var _a2;
+        return (_a2 = c.state.buttonsState[item2.id]) == null ? void 0 : _a2.loading;
+      }) !== -1;
+      const pvisible = detoolbarItems.findIndex((item2) => {
+        var _a2;
+        return ((_a2 = c.state.buttonsState[item2.id]) == null ? void 0 : _a2.visible) === true;
+      }) !== -1;
+      const pdisabled = curDisabled || detoolbarItems.findIndex((item2) => {
+        var _a2;
+        return ((_a2 = c.state.buttonsState[item2.id]) == null ? void 0 : _a2.disabled) === false;
+      }) === -1;
+      if (item.uiactionGroup && item.uiactionGroup.uiactionGroupDetails && item.uiactionGroup.uiactionGroupDetails.length > 0) {
+        return renderActionGroup(item, true);
+      }
+      if (!pvisible) {
+        return null;
       }
+      const groupButtonStyle = item.buttonStyle || "";
+      return createVNode(resolveComponent("el-sub-menu"), {
+        "class": [ns.b("submenu"), ns.em("item", groupButtonStyle.toLowerCase()), calcCssName(item)],
+        "index": item.id,
+        "disabled": pdisabled,
+        "title": showTitle(item.tooltip),
+        "popper-class": [ns.b("submenu-popper"), ns.bm("submenu-popper", toolbarStyle), ns.em("submenu-popper", groupButtonStyle.toLowerCase()), ns.bm("submenu-popper", calcCssName(item)), calcCssName(item)]
+      }, {
+        default: () => {
+          return detoolbarItems.map((item2) => {
+            var _a2, _b;
+            const actionId = item2.uiactionId;
+            const visible = (_a2 = c.state.buttonsState[item2.id]) == null ? void 0 : _a2.visible;
+            const provider = c.itemProviders[item2.id];
+            if (!visible) {
+              return null;
+            }
+            if (provider) {
+              const component = resolveComponent(provider.component);
+              return h(component, {
+                key: item2.id,
+                class: [ns.e("item")],
+                item,
+                controller: c
+              });
+            }
+            if (item2.itemType === "SEPERATOR") {
+              return;
+            }
+            if (item2.itemType === "RAWITEM") {
+              return createVNode(resolveComponent("el-menu-item"), {
+                "index": "menuitem".concat(item2.id),
+                "title": showTitle(item2.tooltip)
+              }, {
+                default: () => [createVNode(resolveComponent("iBizRawItem"), {
+                  "rawItem": item2,
+                  "content": item2.rawItem.content,
+                  "class": ns.b("submenu-rawitem"),
+                  "onClick": (e) => handleClick(item2, e)
+                }, null)]
+              });
+            }
+            if (item2.itemType === "DEUIACTION") {
+              let _slot7;
+              const buttonType = (_b = item2.buttonStyle) == null ? void 0 : _b.toLowerCase();
+              if (actionId === "exportexcel" || actionId === "gridview_exportaction") {
+                return createVNode(IBizExportExcel, {
+                  "class": [ns.e("menu-exportexcel"), ns.em("item", buttonType), calcCssName(item2)],
+                  "mode": "menu",
+                  "item": item2,
+                  "btnContent": (barItem) => btnContent(barItem, c.state),
+                  "size": btnSize.value,
+                  "controller": c,
+                  "onExportExcel": (e, data) => {
+                    handleClick(item2, e, data);
+                  }
+                }, null);
+              }
+              return createVNode(resolveComponent("el-menu-item"), {
+                "class": [ns.is("loading", c.state.buttonsState[item2.id].loading), ns.em("item", buttonType), calcCssName(item2)],
+                "index": "menuitem".concat(item2.id),
+                "disabled": c.state.buttonsState[item2.id].disabled,
+                "title": showTitle(item2.tooltip),
+                "onClick": (e) => handleClick(item2, e)
+              }, {
+                default: () => [createVNode(resolveComponent("el-button"), {
+                  "loading": c.state.buttonsState[item2.id].loading
+                }, _isSlot(_slot7 = btnContent(item2, c.state)) ? _slot7 : {
+                  default: () => [_slot7]
+                })]
+              });
+            }
+            if (item2.itemType === "ITEMS") {
+              return renderSubmenu(item2);
+            }
+            return null;
+          });
+        },
+        title: () => {
+          let _slot8;
+          return createVNode(resolveComponent("el-button"), {
+            "loading": ploading,
+            "disabled": pdisabled,
+            "type": convertBtnType(groupButtonStyle)
+          }, _isSlot(_slot8 = btnContent(item, c.state)) ? _slot8 : {
+            default: () => [_slot8]
+          });
+        }
+      });
     };
     const renderToolbarItem = (item) => {
       var _a2, _b;
@@ -404,7 +504,7 @@ const ToolbarControl = /* @__PURE__ */ defineComponent({
         }, null)]);
       }
       if (item.itemType === "DEUIACTION") {
-        let _slot8;
+        let _slot9;
         const actionId = item.uiactionId;
         const buttonStyle = item.buttonStyle;
         if (actionId === "exportexcel" || actionId === "gridview_exportaction") {
@@ -439,12 +539,12 @@ const ToolbarControl = /* @__PURE__ */ defineComponent({
           "loading": c.state.buttonsState[itemId].loading,
           "disabled": c.state.buttonsState[itemId].disabled,
           "onClick": (e) => handleClick(item, e)
-        }, _isSlot(_slot8 = btnContent(item, c.state)) ? _slot8 : {
-          default: () => [_slot8]
+        }, _isSlot(_slot9 = btnContent(item, c.state)) ? _slot9 : {
+          default: () => [_slot9]
         })]);
       }
       if (item.itemType === "ITEMS") {
-        let _slot9;
+        let _slot10;
         const groupItem = item;
         const groupButtonStyle = groupItem.buttonStyle || "";
         if (groupItem.groupExtractMode && groupItem.uiactionGroup) {
@@ -458,8 +558,8 @@ const ToolbarControl = /* @__PURE__ */ defineComponent({
           "class": [ns.e("menu"), ns.em("menu", groupButtonStyle.toLowerCase()), calcCssName(item)],
           "ellipsis": false,
           "menu-trigger": "hover"
-        }, _isSlot(_slot9 = renderSubmenu(item)) ? _slot9 : {
-          default: () => [_slot9]
+        }, _isSlot(_slot10 = renderSubmenu(item)) ? _slot10 : {
+          default: () => [_slot10]
         });
       }
       return null;

package/es/control/tree/el-tree-util.d.ts

@@ -1,5 +1,5 @@
 import { IControlProvider, ITreeController, ITreeNodeData, TreeController } from '@ibiz-template/runtime';
-import { IDETree } from '@ibiz/model-core';
+import { IControlRender, IDETree, IPanel } from '@ibiz/model-core';
 import { ElTree } from 'element-plus';
 import { NodeDropType } from 'element-plus/es/components/tree/src/tree.type';
 import { Ref } from 'vue';
@@ -956,3 +956,36 @@ export declare function useAppTreeBase(c: TreeController, props: ITreeProps): vo
  * @param {IData} curItem
  */
 export declare function findChildItems(c: TreeController, modelData: IData, curItem: IData): IData[];
+/**
+ * 获取树节点布局面板
+ *
+ * @param {{
+ *       controlRenders?: IControlRender[];
+ *     }} control
+ * @return {*}  {(IPanel | undefined)}
+ */
+export declare function getNodeControlPanel(control: {
+    controlRenders?: IControlRender[];
+}): IPanel | undefined;
+/**
+ * 获取新建树节点布局面板
+ *
+ * @param {{
+ *       controlRenders?: IControlRender[];
+ *     }} control
+ * @return {*}  {(IPanel | undefined)}
+ */
+export declare function getNewNodeControlPanel(control: {
+    controlRenders?: IControlRender[];
+}): IPanel | undefined;
+/**
+ * @description 树加载更多工具
+ * @export
+ * @param {(Ref<InstanceType<typeof ElTree> | null>)} treeRef
+ * @param {TreeController} c
+ * @returns {*}
+ */
+export declare function useLoadMoreUtil(treeRef: Ref<InstanceType<typeof ElTree> | null>, c: TreeController): {
+    toLoadMoreNode: (parentId: string) => IData;
+    addLoadMoreNode: (parentId: string, parentNode: IData) => void;
+};

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

@@ -1,4 +1,5 @@
 import { RuntimeError } from '@ibiz-template/core';
+import { getControlPanel, ScriptFactory } from '@ibiz-template/runtime';
 import { createUUID } from 'qx-util';
 import { debounce, cloneDeep } from 'lodash-es';
 import { watch } from 'vue';
@@ -141,5 +142,67 @@ function findChildItems(c, modelData, curItem) {
   });
   return children;
 }
+function getNodeControlPanel(control) {
+  if (control.controlRenders) {
+    const controlRenders = control.controlRenders.filter(
+      (item) => (item.id || "").split("_")[0] !== "newnoderender"
+    );
+    return getControlPanel({ controlRenders });
+  }
+}
+function getNewNodeControlPanel(control) {
+  if (control.controlRenders) {
+    const controlRender = control.controlRenders.find(
+      (item) => (item.id || "").split("_")[0] === "newnoderender"
+    );
+    if (!controlRender)
+      return;
+    if (controlRender.renderType === "LAYOUTPANEL_MODEL" && controlRender.layoutPanelModel) {
+      const layoutPanelModel = ScriptFactory.execScriptFn(
+        {},
+        controlRender.layoutPanelModel,
+        { isAsync: false }
+      );
+      return layoutPanelModel;
+    }
+    if (controlRender.renderType === "LAYOUTPANEL" && controlRender.layoutPanel) {
+      return controlRender.layoutPanel;
+    }
+  }
+}
+function useLoadMoreUtil(treeRef, c) {
+  const toLoadMoreNode = (parentId) => {
+    const _loadMoreNodeData = {
+      _id: "".concat(parentId, "_load_more"),
+      _text: ibiz.i18n.t("control.common.loadMore"),
+      _leaf: true,
+      _disableSelect: true,
+      _load_more: true
+    };
+    return _loadMoreNodeData;
+  };
+  const addLoadMoreNode = (parentId, parentNode) => {
+    if (!treeRef.value || !parentId || !parentNode) {
+      return;
+    }
+    const _loadMoreNodeData = toLoadMoreNode(parentId);
+    if (treeRef.value.getNode(_loadMoreNodeData)) {
+      treeRef.value.remove(_loadMoreNodeData);
+    }
+    const infoItems = c.getLoadMoreInfoItems(parentId);
+    if (infoItems) {
+      const result = infoItems.some((infoItem) => {
+        return infoItem.curPage < infoItem.totalPage - 1;
+      });
+      if (result) {
+        treeRef.value.append(_loadMoreNodeData, parentNode);
+      }
+    }
+  };
+  return {
+    toLoadMoreNode,
+    addLoadMoreNode
+  };
+}
 
-export { findChildItems, findNodeData, formatNodeDropType, useAppTreeBase, useElTreeUtil };
+export { findChildItems, findNodeData, formatNodeDropType, getNewNodeControlPanel, getNodeControlPanel, useAppTreeBase, useElTreeUtil, useLoadMoreUtil };

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

@@ -981,6 +981,7 @@ export declare const IBizTreeControl: import("@ibiz-template/vue3-util").TypeWit
     onNodeTextEditBlur: () => Promise<void>;
     renderNewNode: () => JSX.Element | null;
     handleEditKeyDown: (e: KeyboardEvent) => void;
+    handleLoadMore: (e: MouseEvent, item: import("@ibiz-template/core").IApiData) => Promise<void>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelData: {
         type: import("vue").PropType<import("@ibiz/model-core").IDETree>;

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-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);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)}