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

package/lib/control/tree/el-tree-util.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 var core = require('@ibiz-template/core');
+var runtime = require('@ibiz-template/runtime');
 var qxUtil = require('qx-util');
 var lodashEs = require('lodash-es');
 var vue = require('vue');
@@ -143,9 +144,74 @@ 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 runtime.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 = runtime.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
+  };
+}
 
 exports.findChildItems = findChildItems;
 exports.findNodeData = findNodeData;
 exports.formatNodeDropType = formatNodeDropType;
+exports.getNewNodeControlPanel = getNewNodeControlPanel;
+exports.getNodeControlPanel = getNodeControlPanel;
 exports.useAppTreeBase = useAppTreeBase;
 exports.useElTreeUtil = useElTreeUtil;
+exports.useLoadMoreUtil = useLoadMoreUtil;

package/lib/control/tree/tree.cjs

@@ -5,10 +5,10 @@ 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,10 +108,10 @@ 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.reactive({});
+    const counterData = vue.ref({});
     const menuShowMode = vue.ref("default");
     const fn = (counter) => {
-      Object.assign(counterData, counter);
+      counterData.value = counter;
     };
     c.evt.on("onCreated", () => {
       if (c.counter) {
@@ -135,21 +135,38 @@ const TreeControl = /* @__PURE__ */ vue.defineComponent({
     const treeNodeTextInputRef = vue.ref(null);
     const editingNodeKey = vue.ref(null);
     const editingNodeText = vue.ref(null);
+    const newNodePanelRef = vue.ref();
     const newTreeNodeText = vue.ref(null);
     const newNodeModel = vue.ref(null);
     const newDefaultValue = vue.ref(null);
     const newNodeKey = vue.ref("".concat(qxUtil.createUUID(), "-").concat(qxUtil.createUUID()));
     const newNodeData = vue.ref(null);
-    c.evt.on("onNewTreeNode", (args) => {
+    const newNodeDeData = vue.ref(null);
+    const newNodeControlPanel = vue.ref(null);
+    c.evt.on("onNewTreeNode", async (args) => {
+      var _a;
       const {
         nodeModel,
         defaultValue,
         parentNodeData
       } = args;
-      newNodeModel.value = nodeModel;
+      const {
+        appId,
+        appDataEntityId
+      } = nodeModel;
+      const entityModel = await ibiz.hub.getAppDataEntity(appDataEntityId, appId);
+      const layoutPanel = elTreeUtil.getNewNodeControlPanel(nodeModel);
+      if (layoutPanel) {
+        newNodeDeData.value = new runtime.AppDataEntity(entityModel, {});
+        newNodeControlPanel.value = layoutPanel || null;
+      }
       newDefaultValue.value = defaultValue;
       editingNodeKey.value = null;
       editingNodeText.value = null;
+      if (newNodeData.value) {
+        (_a = treeRef.value) == null ? void 0 : _a.remove(newNodeData.value);
+        newNodeData.value = null;
+      }
       if (parentNodeData && treeRef.value) {
         const _newNodeData = {};
         Object.assign(_newNodeData, {
@@ -160,6 +177,7 @@ const TreeControl = /* @__PURE__ */ vue.defineComponent({
         treeRef.value.append(_newNodeData, parentNodeData);
         newNodeData.value = _newNodeData;
       }
+      newNodeModel.value = nodeModel;
     });
     vue.watch(() => treeNodeTextInputRef.value, (newVal) => {
       if (newVal) {
@@ -191,7 +209,28 @@ const TreeControl = /* @__PURE__ */ vue.defineComponent({
         }
       }
       if (newNodeModel.value) {
-        if (newTreeNodeText.value) {
+        const hasNonNullValue = newNodeDeData.value && Object.values(newNodeDeData.value).some((_val) => !!_val);
+        if (newNodeControlPanel.value && hasNonNullValue) {
+          const {
+            textAppDEFieldId,
+            id
+          } = newNodeModel.value;
+          const nodeData = {
+            _nodeId: id,
+            _text: [newNodeDeData.value[textAppDEFieldId]],
+            _deData: {}
+          };
+          Object.assign(nodeData._deData, newNodeDeData.value);
+          if (newDefaultValue.value) {
+            Object.keys(newDefaultValue.value).forEach((_key) => {
+              if (!nodeData._deData[_key])
+                Object.assign(nodeData._deData, {
+                  [_key]: newDefaultValue.value[_key]
+                });
+            });
+          }
+          await c.createDeNodeData([nodeData]);
+        } else if (newTreeNodeText.value) {
           const {
             textAppDEFieldId,
             id
@@ -215,6 +254,9 @@ const TreeControl = /* @__PURE__ */ vue.defineComponent({
         newNodeModel.value = null;
         newTreeNodeText.value = null;
         newDefaultValue.value = null;
+        newNodeDeData.value = null;
+        newNodeControlPanel.value = null;
+        newNodePanelRef.value = null;
         if (newNodeData.value)
           (_a = treeRef.value) == null ? void 0 : _a.remove(newNodeData.value);
         newNodeData.value = null;
@@ -230,6 +272,9 @@ const TreeControl = /* @__PURE__ */ vue.defineComponent({
         newNodeModel.value = null;
         newTreeNodeText.value = null;
         newDefaultValue.value = null;
+        newNodeDeData.value = null;
+        newNodeControlPanel.value = null;
+        newNodePanelRef.value = null;
         if (newNodeData.value)
           (_a = treeRef.value) == null ? void 0 : _a.remove(newNodeData.value);
         newNodeData.value = null;
@@ -244,10 +289,27 @@ const TreeControl = /* @__PURE__ */ vue.defineComponent({
         onNodeTextEditEsc();
       }
     };
+    const onPanelItemEvent = (_args) => {
+      if (!_args)
+        return;
+      const {
+        panelItemEventName
+      } = _args;
+      if (panelItemEventName === runtime.PanelItemEventName.ENTER) {
+        onNodeTextEditBlur();
+      }
+    };
+    const onPanelItemKeydown = (e) => {
+      if (e.code === "Escape" || e.keyCode === 27)
+        onNodeTextEditEsc();
+    };
     const {
       updateUI,
       triggerNodeExpand
     } = elTreeUtil.useElTreeUtil(treeRef, c);
+    const {
+      addLoadMoreNode
+    } = elTreeUtil.useLoadMoreUtil(treeRef, c);
     const toElNodes = (nodes) => {
       return nodes.map((node) => ({
         _id: node._id,
@@ -266,6 +328,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) => {
@@ -329,25 +394,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
@@ -366,9 +417,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)) {
@@ -377,7 +426,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);
       }
@@ -521,7 +570,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) {
@@ -576,12 +628,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);
     };
@@ -596,17 +656,25 @@ const TreeControl = /* @__PURE__ */ vue.defineComponent({
         editCurrentNodeText();
       }
     };
+    const handleMouseup = () => {
+      var _a;
+      const isFoucs = (_a = newNodePanelRef.value) == null ? void 0 : _a.$el.querySelector(".is-focus");
+      if (newNodeControlPanel.value && !isFoucs)
+        onNodeTextEditBlur();
+    };
     vue.onMounted(() => {
       var _a;
+      document.addEventListener("mouseup", handleMouseup.bind(this));
       (_a = treeviewRef.value) == null ? void 0 : _a.$el.addEventListener("keydown", keydownHandle);
     });
     vue.onUnmounted(() => {
       var _a;
+      document.removeEventListener("mouseup", handleMouseup.bind(this));
       (_a = treeviewRef.value) == null ? void 0 : _a.$el.removeEventListener("keydown", keydownHandle);
     });
     const renderCounter = (nodeModel) => {
       if (nodeModel.counterId) {
-        const value = counterData[nodeModel.counterId];
+        const value = counterData.value[nodeModel.counterId];
         if (ramda.isNil(value)) {
           return null;
         }
@@ -620,19 +688,32 @@ const TreeControl = /* @__PURE__ */ vue.defineComponent({
       }
     };
     const renderNewNode = () => {
-      var _a, _b, _c;
+      var _a, _b, _c, _d;
       if (!newNodeModel.value) {
         return null;
       }
+      if (newNodeControlPanel.value) {
+        return vue.createVNode(vue.resolveComponent("iBizControlShell"), {
+          "class": [ns.b("new-node"), (_a = newNodeModel.value.sysCss) == null ? void 0 : _a.cssName],
+          "ref": newNodePanelRef,
+          "data": newNodeDeData.value,
+          "modelData": newNodeControlPanel.value,
+          "context": c.context,
+          "params": c.params,
+          "onMouseup": (_e) => _e.stopPropagation(),
+          "onPanelItemEvent": onPanelItemEvent,
+          "onKeydown": onPanelItemKeydown
+        }, null);
+      }
       return vue.createVNode("div", {
-        "class": [ns.b("new-node"), (_a = newNodeModel.value.sysCss) == null ? void 0 : _a.cssName],
+        "class": [ns.b("new-node"), (_b = newNodeModel.value.sysCss) == null ? void 0 : _b.cssName],
         "onClick": (_e) => {
           _e.preventDefault();
           _e.stopPropagation();
         }
-      }, [((_b = newNodeModel.value) == null ? void 0 : _b.sysImage) ? vue.createVNode(iBizIcon, {
+      }, [((_c = newNodeModel.value) == null ? void 0 : _c.sysImage) ? vue.createVNode(iBizIcon, {
         "class": ns.be("node", "icon"),
-        "icon": (_c = newNodeModel.value) == null ? void 0 : _c.sysImage
+        "icon": (_d = newNodeModel.value) == null ? void 0 : _d.sysImage
       }, null) : null, vue.createVNode(vue.resolveComponent("el-input"), {
         "modelValue": newTreeNodeText.value,
         "onUpdate:modelValue": ($event) => newTreeNodeText.value = $event,
@@ -646,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,
@@ -674,7 +777,8 @@ const TreeControl = /* @__PURE__ */ vue.defineComponent({
       handleDrop,
       onNodeTextEditBlur,
       renderNewNode,
-      handleEditKeyDown
+      handleEditKeyDown,
+      handleLoadMore
     };
   },
   render() {
@@ -716,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,
@@ -733,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);
@@ -759,7 +878,7 @@ const TreeControl = /* @__PURE__ */ vue.defineComponent({
                 }
               }, null)]);
             }
-            const layoutPanel = runtime.getControlPanel(nodeModel);
+            const layoutPanel = elTreeUtil.getNodeControlPanel(nodeModel);
             let content;
             if (layoutPanel) {
               content = vue.createVNode(vue.resolveComponent("iBizControlShell"), {

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