@ibiz-template/vue3-components 0.7.41-alpha.6 → 0.7.41-alpha.7

package/es/panel-component/app-extend-menu/extend-menu-base/extend-menu-base.util.mjs

@@ -0,0 +1,339 @@
+import { ref, h, onMounted, onUnmounted } from 'vue';
+
+"use strict";
+function useCascaderPopover(props, ns, menuAlign, renderCascaderContent) {
+  let hoverCount = 0;
+  let closeTimer = null;
+  const overlayInstances = /* @__PURE__ */ new Map();
+  const activeMenuIdStack = ref([]);
+  const rotatedArrowElements = /* @__PURE__ */ new Map();
+  const getOverlayNum = () => {
+    return overlayInstances.size;
+  };
+  const getPopoverPlacement = (level) => {
+    switch (props.position) {
+      case "TOP":
+        return level > 0 ? "right-start" : "bottom-start";
+      case "BOTTOM":
+        return level > 0 ? "right-end" : "top-start";
+      case "RIGHT":
+        return "left-start";
+      case "LEFT":
+        return "right-start";
+      default:
+        return void 0;
+    }
+  };
+  const clearCloseTimer = () => {
+    if (closeTimer) {
+      clearTimeout(closeTimer);
+      closeTimer = null;
+    }
+  };
+  const resetArrowRotation = (ns2, key) => {
+    const arrow = rotatedArrowElements.get(key);
+    if (!arrow)
+      return;
+    arrow.classList.remove(ns2.is("rotate-arrow", true));
+    rotatedArrowElements.delete(key);
+  };
+  const rotateArrowIcon = (el, ns2, key) => {
+    if (el) {
+      el.classList.add(ns2.is("rotate-arrow", true));
+      rotatedArrowElements.set(key, el);
+    }
+  };
+  const closePopoverAtLevel = (key) => {
+    const overlay = overlayInstances.get(key);
+    if (overlay) {
+      overlay.dismiss();
+      overlayInstances.delete(key);
+      resetArrowRotation(ns, key);
+    }
+  };
+  const closeSubsequentPopovers = (currentLevel) => {
+    let level = currentLevel;
+    while (overlayInstances.get(level + 1)) {
+      level++;
+    }
+    for (let i = level; i >= currentLevel; i--) {
+      closePopoverAtLevel(i);
+    }
+  };
+  const closeAllPopovers = () => {
+    for (const key of overlayInstances.keys()) {
+      closePopoverAtLevel(key);
+    }
+    overlayInstances.clear();
+    activeMenuIdStack.value = [];
+    hoverCount = 0;
+  };
+  const scheduleDelayedClose = () => {
+    clearCloseTimer();
+    closeTimer = setTimeout(() => {
+      if (hoverCount <= 0) {
+        closeAllPopovers();
+      }
+    }, 300);
+  };
+  const clearAllCascader = () => {
+    closeAllPopovers();
+    clearCloseTimer();
+  };
+  const handleMenuItemMouseEnter = (_menu, event) => {
+    if (activeMenuIdStack.value.includes(_menu.id))
+      return;
+    activeMenuIdStack.value.push(_menu.id);
+    closeSubsequentPopovers(_menu.level);
+    if (_menu.children) {
+      openCascaderPopover(_menu, event);
+    }
+    clearCloseTimer();
+  };
+  const handleMenuItemMouseLeave = (_menu) => {
+    const index = activeMenuIdStack.value.indexOf(_menu.id);
+    if (index !== -1) {
+      activeMenuIdStack.value.splice(index, 1);
+    }
+    scheduleDelayedClose();
+  };
+  const onPopoverMouseEnter = () => {
+    hoverCount++;
+    clearCloseTimer();
+  };
+  const onPopoverMouseLeave = (_menu, _event) => {
+    hoverCount = Math.max(0, hoverCount - 1);
+    scheduleDelayedClose();
+  };
+  const openCascaderPopover = (menu, evt, opts) => {
+    var _a;
+    const overlay = ibiz.overlay.createPopover(
+      () => h(renderCascaderContent(menu), {
+        onMouseenter: onPopoverMouseEnter,
+        onMouseleave: onPopoverMouseLeave
+      }),
+      void 0,
+      {
+        width: "auto",
+        height: "auto",
+        noArrow: true,
+        placement: getPopoverPlacement(menu.level),
+        offsetOpts: 10,
+        ...opts,
+        modalClass: "".concat(ns.b("cascader-popover"), " ").concat(ns.is(
+          menuAlign.value,
+          true
+        ), " ").concat((opts == null ? void 0 : opts.modalClass) || "")
+      }
+    );
+    overlayInstances.set(menu.level, overlay);
+    overlay == null ? void 0 : overlay.present(evt.currentTarget);
+    rotateArrowIcon(
+      (_a = evt.currentTarget) == null ? void 0 : _a.parentElement,
+      ns,
+      menu.level
+    );
+  };
+  return {
+    getOverlayNum,
+    openCascaderPopover,
+    clearAllCascader,
+    handleMenuItemMouseEnter,
+    handleMenuItemMouseLeave
+  };
+}
+function useBorderLayout(menuRef, ns, position, menuAlign, getOverlayNum, renderBorderContent) {
+  let overlay;
+  const getElementAbsolutePosition = (element) => {
+    let x = 0;
+    let y = 0;
+    let current = element;
+    while (current) {
+      x += current.offsetLeft;
+      y += current.offsetTop;
+      current = current.offsetParent;
+    }
+    return {
+      x,
+      y,
+      width: element.offsetWidth,
+      height: element.offsetHeight
+    };
+  };
+  const resolvePopoverPlacement = () => {
+    switch (position) {
+      case "TOP":
+        return "bottom";
+      case "BOTTOM":
+        return "top";
+      case "RIGHT":
+        return "left";
+      case "LEFT":
+        return "right";
+      default:
+        return void 0;
+    }
+  };
+  let popoverEl;
+  const closeBorderPopover = () => {
+    overlay == null ? void 0 : overlay.dismiss();
+    overlay = null;
+    document.removeEventListener("mousemove", handleMouseTrackOut);
+    popoverEl = void 0;
+  };
+  const handleMouseTrackOut = (e) => {
+    if (!popoverEl) {
+      popoverEl = document.querySelector(
+        ".".concat(ns.b("border-popover"))
+      );
+    }
+    const pos = getElementAbsolutePosition(popoverEl);
+    const isInside = e.pageX >= pos.x && e.pageX <= pos.x + pos.width && e.pageY >= pos.y && e.pageY <= pos.y + pos.height;
+    if (!isInside && getOverlayNum() <= 0) {
+      closeBorderPopover();
+    }
+  };
+  const handlePlaceholderMouseEnter = async (evt) => {
+    var _a;
+    if (overlay)
+      return;
+    overlay = ibiz.overlay.createPopover(
+      () => h(renderBorderContent()),
+      void 0,
+      {
+        width: "auto",
+        height: "auto",
+        noArrow: true,
+        placement: resolvePopoverPlacement(),
+        offsetOpts: -1,
+        modalClass: "".concat(ns.b("border-popover"), " ").concat(ns.is(menuAlign.value, true))
+      }
+    );
+    const triggerEl = (_a = evt.currentTarget) == null ? void 0 : _a.querySelector(
+      ".".concat(ns.be("placehold", "line"))
+    );
+    await (overlay == null ? void 0 : overlay.present(triggerEl));
+    setTimeout(() => {
+      document.addEventListener("mousemove", handleMouseTrackOut);
+    }, 200);
+  };
+  let placeholderEl = null;
+  let resizeObserver = null;
+  let frameLoopId = null;
+  const minWidth = 20;
+  const minHeight = 20;
+  const computeTop = (top, height) => {
+    return position === "BOTTOM" ? top + height - minHeight : top;
+  };
+  const computeLeft = (left, width) => {
+    return position === "RIGHT" ? left + width - minWidth : left;
+  };
+  const computeWidth = (width) => {
+    return ["RIGHT", "LEFT"].includes(position) ? minWidth : width;
+  };
+  const computeHeight = (height) => {
+    return ["TOP", "BOTTOM"].includes(position) ? minHeight : height;
+  };
+  function createFixedPlaceholder(el) {
+    const container = document.createElement("div");
+    container.classList.add(ns.b("placehold"));
+    container.classList.add(ns.is(position.toLowerCase(), !!position));
+    const line = document.createElement("div");
+    line.classList.add(ns.be("placehold", "line"));
+    const arrow = document.createElement("div");
+    arrow.classList.add(ns.be("placehold", "arrow"));
+    container.appendChild(line);
+    container.appendChild(arrow);
+    document.body.appendChild(container);
+    placeholderEl = container;
+    placeholderEl.addEventListener("mouseenter", handlePlaceholderMouseEnter);
+    arrow.innerHTML = '\n      <svg xmlns="http://www.w3.org/2000/svg"\n           viewBox="0 0 1024 1024"\n           width="1em"\n           height="1em"\n           fill="currentColor">\n        <path fill="currentColor"\n              d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z">\n        </path>\n      </svg>\n    ';
+    updatePlaceholderPosition(el);
+  }
+  function updatePlaceholderPosition(el) {
+    if (!placeholderEl)
+      return;
+    const rect = el.getBoundingClientRect();
+    placeholderEl.style.top = "".concat(computeTop(rect.top, rect.height), "px");
+    placeholderEl.style.left = "".concat(computeLeft(rect.left, rect.width), "px");
+    placeholderEl.style.width = "".concat(computeWidth(rect.width), "px");
+    placeholderEl.style.height = "".concat(computeHeight(rect.height), "px");
+  }
+  function startTracking() {
+    const el = menuRef.value;
+    if (!el)
+      return;
+    createFixedPlaceholder(el);
+    resizeObserver = new ResizeObserver(() => updatePlaceholderPosition(el));
+    resizeObserver.observe(el);
+    const updateLoop = () => {
+      updatePlaceholderPosition(el);
+      frameLoopId = requestAnimationFrame(updateLoop);
+    };
+    frameLoopId = requestAnimationFrame(updateLoop);
+  }
+  function stopTrackingAndDestroy() {
+    if (resizeObserver) {
+      const el = menuRef.value;
+      if (el)
+        resizeObserver.unobserve(el);
+      resizeObserver.disconnect();
+      resizeObserver = null;
+    }
+    if (frameLoopId !== null) {
+      cancelAnimationFrame(frameLoopId);
+      frameLoopId = null;
+    }
+    if (placeholderEl && placeholderEl.parentNode) {
+      placeholderEl.removeEventListener(
+        "mouseenter",
+        handlePlaceholderMouseEnter
+      );
+      placeholderEl.parentNode.removeChild(placeholderEl);
+      placeholderEl = null;
+    }
+  }
+  onMounted(startTracking);
+  onUnmounted(stopTrackingAndDestroy);
+  return { closeBorderPopover };
+}
+function getMenus(items, _parentItem, level = 0) {
+  return items.map((item) => {
+    var _a;
+    const data = {
+      ...item,
+      value: item.id,
+      label: item.caption,
+      parentId: _parentItem == null ? void 0 : _parentItem.id,
+      level
+    };
+    if ((_a = item.appMenuItems) == null ? void 0 : _a.length) {
+      data.children = getMenus(item.appMenuItems, item, level + 1);
+    }
+    return data;
+  });
+}
+function findMenuItem(_id, items) {
+  let temp;
+  if (items) {
+    items.some((item) => {
+      if (!item.id)
+        return true;
+      if (item.id === _id) {
+        temp = item;
+        return true;
+      }
+      if (item.appMenuItems && item.appMenuItems.length > 0) {
+        temp = findMenuItem(_id, item.appMenuItems);
+        if (!temp) {
+          return false;
+        }
+        return true;
+      }
+      return false;
+    });
+  }
+  return temp;
+}
+
+export { findMenuItem, getMenus, useBorderLayout, useCascaderPopover };

package/es/panel-component/app-extend-menu/left-side-menu/left-side-menu.css

@@ -1 +1 @@
-.ibiz-left-side-menu{width:100%;height:100%}
+.ibiz-left-side-menu{width:100%;height:100%}.ibiz-col--self-align>.ibiz-left-side-menu{width:100%;height:100%}

package/es/panel-component/app-extend-menu/right-side-menu/right-side-menu.css

@@ -1 +1 @@
-.ibiz-right-side-menu{width:100%;height:100%}
+.ibiz-right-side-menu{width:100%;height:100%}.ibiz-col--self-align>.ibiz-right-side-menu{width:100%;height:100%}

package/es/panel-component/app-extend-menu/top-side-menu/top-side-menu.css

@@ -1 +1 @@
-.ibiz-top-side-menu{width:100%;height:100%}
+.ibiz-top-side-menu{width:100%;height:100%}.ibiz-col--self-align>.ibiz-top-side-menu{width:100%;height:100%}

package/es/util/fullscreen/fullscreen-util.mjs

@@ -1,6 +1,6 @@
 import { createApp } from 'vue';
 import ElementPlus from 'element-plus';
-import { defaultNamespace } from '../../node_modules/.pnpm/@ibiz-template_core@0.7.41-alpha.2_axios@1.6.8_lodash-es@4.17.21_qs@6.11.2_qx-util@0.4.8_ramda@0.29.1/node_modules/@ibiz-template/core/out/utils/namespace/namespace.mjs';
+import { defaultNamespace } from '../../node_modules/.pnpm/@ibiz-template_core@0.7.41-alpha.7_axios@1.6.8_lodash-es@4.17.21_qs@6.11.2_qx-util@0.4.8_ramda@0.29.1/node_modules/@ibiz-template/core/out/utils/namespace/namespace.mjs';
 import { IBizFullscreenToolbar } from '../../common/fullscreen-toolbar/fullscreen-toolbar.mjs';
 
 "use strict";

package/lib/common/editor-empty-text/editor-empty-text.cjs

@@ -0,0 +1,33 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./editor-empty-text.css');
+
+"use strict";
+const IBizEditorEmptyText = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizEditorEmptyText",
+  props: {
+    showPlaceholder: {
+      type: Boolean,
+      default: false
+    },
+    placeHolder: {
+      type: String,
+      default: ""
+    }
+  },
+  setup() {
+    const ns = vue3Util.useNamespace("editor-empty-text");
+    return {
+      ns
+    };
+  },
+  render() {
+    return vue.createVNode("span", {
+      "class": [this.ns.b(), this.ns.is("placeholder", this.showPlaceholder)]
+    }, [this.showPlaceholder && this.placeHolder ? this.placeHolder : ibiz.config.common.emptyText]);
+  }
+});
+
+exports.IBizEditorEmptyText = IBizEditorEmptyText;

package/lib/common/editor-empty-text/editor-empty-text.css

@@ -0,0 +1 @@
+.ibiz-editor-empty-text.is-placeholder{color:var(--ibiz-color-text-3);white-space:nowrap}

package/lib/common/index.cjs

@@ -36,10 +36,12 @@ var controlNavigation = require('./control-navigation/control-navigation.cjs');
 var ganttSetting = require('./gantt-setting/gantt-setting.cjs');
 var navSplit = require('./nav-split/nav-split.cjs');
 var cropping = require('./cropping/cropping.cjs');
+var editorEmptyText = require('./editor-empty-text/editor-empty-text.cjs');
 
 "use strict";
 const IBizCommonComponents = {
   install: (v) => {
+    v.component(editorEmptyText.IBizEditorEmptyText.name, editorEmptyText.IBizEditorEmptyText);
     v.component(cropping.IBizCropping.name, cropping.IBizCropping);
     v.component(vue3Util.IBizControlBase.name, vue3Util.IBizControlBase);
     v.component(quickEdit.IBizQuickEdit.name, quickEdit.IBizQuickEdit);

package/lib/control/drtab/drtab-control.util.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 var vue = require('vue');
-var namespace = require('../../node_modules/.pnpm/@ibiz-template_core@0.7.41-alpha.2_axios@1.6.8_lodash-es@4.17.21_qs@6.11.2_qx-util@0.4.8_ramda@0.29.1/node_modules/@ibiz-template/core/out/utils/namespace/namespace.cjs');
+var namespace = require('../../node_modules/.pnpm/@ibiz-template_core@0.7.41-alpha.7_axios@1.6.8_lodash-es@4.17.21_qs@6.11.2_qx-util@0.4.8_ramda@0.29.1/node_modules/@ibiz-template/core/out/utils/namespace/namespace.cjs');
 
 "use strict";
 function useAppDRTab(c, controlRef, counterData) {

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

@@ -172,6 +172,40 @@ function getNewNodeControlPanel(control) {
     }
   }
 }
+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;
@@ -180,3 +214,4 @@ exports.getNewNodeControlPanel = getNewNodeControlPanel;
 exports.getNodeControlPanel = getNodeControlPanel;
 exports.useAppTreeBase = useAppTreeBase;
 exports.useElTreeUtil = useElTreeUtil;
+exports.useLoadMoreUtil = useLoadMoreUtil;

package/lib/control/tree/tree.cjs

@@ -307,6 +307,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 +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) => {
@@ -388,6 +394,10 @@ 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", () => {
@@ -635,12 +645,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);
     };
@@ -726,6 +744,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 +794,8 @@ const TreeControl = /* @__PURE__ */ vue.defineComponent({
       handleDrop,
       onNodeTextEditBlur,
       renderNewNode,
-      handleEditKeyDown
+      handleEditKeyDown,
+      handleLoadMore
     };
   },
   render() {
@@ -796,7 +837,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 +860,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);

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

package/lib/control/wizard-panel/wizard-panel.cjs

@@ -107,7 +107,7 @@ const WizardPanelControl = /* @__PURE__ */ vue.defineComponent({
         dewizardSteps
       } = dewizard;
       if (this.c.model.showStepBar && dewizardSteps && dewizardSteps.length > 0) {
-        let _slot;
+        let _slot2;
         let active = this.c.steps.indexOf(this.c.stepTags["".concat(this.c.model.name, "_form_").concat((_e = this.c.state.activeFormTag) == null ? void 0 : _e.toLowerCase())]);
         if (active === -1)
           active = 0;
@@ -116,12 +116,28 @@ const WizardPanelControl = /* @__PURE__ */ vue.defineComponent({
           "align-center": true,
           "finish-status": "success",
           "active": active
-        }, _isSlot(_slot = dewizardSteps.map((step) => {
-          return vue.createVNode(vue.resolveComponent("el-step"), {
-            "title": core.showTitle(step.title)
-          }, null);
-        })) ? _slot : {
-          default: () => [_slot]
+        }, _isSlot(_slot2 = dewizardSteps.map((step) => {
+          const _slot = {
+            title: () => {
+              var _a2;
+              return vue.createVNode("span", {
+                "class": [this.ns.bm("header", "title"), (_a2 = step.titleSysCss) == null ? void 0 : _a2.cssName]
+              }, [core.showTitle(step.title)]);
+            }
+          };
+          if (step.sysImage) {
+            Object.assign(_slot, {
+              icon: () => vue.createVNode(vue3Util.IBizIcon, {
+                "class": this.ns.bm("header", "step-icon"),
+                "icon": step.sysImage
+              }, null)
+            });
+          }
+          return vue.createVNode(vue.resolveComponent("el-step"), null, _isSlot(_slot) ? _slot : {
+            default: () => [_slot]
+          });
+        })) ? _slot2 : {
+          default: () => [_slot2]
         });
       }
     }

package/lib/control/wizard-panel/wizard-panel.css

@@ -1 +1 @@
-@charset "UTF-8";.ibiz-control-wizardpanel{--ibiz-control-wizard-panel-header-height:60px;--ibiz-control-wizard-panel-footer-height:40px;height:100%}.ibiz-control-wizardpanel .ibiz-control-wizardpanel__form{height:calc(100% - var(--ibiz-control-wizard-panel-footer-height));overflow:auto}.ibiz-control-wizardpanel.is-header .ibiz-control-wizardpanel__form{height:calc(100% - var(--ibiz-control-wizard-panel-footer-height) - var(--ibiz-control-wizard-panel-header-height))}.ibiz-control-wizardpanel-header{height:var(--ibiz-control-wizard-panel-header-height)}.ibiz-control-wizardpanel-footer{display:flex;align-items:center;justify-content:flex-end;height:var(--ibiz-control-wizard-panel-footer-height);padding-right:var(--ibiz-padding)}
+@charset "UTF-8";.ibiz-control-wizardpanel{--ibiz-control-wizard-panel-header-height:60px;--ibiz-control-wizard-panel-footer-height:40px;--ibiz-control-wizard-panel-step-icon-width:22px;height:100%}.ibiz-control-wizardpanel .ibiz-control-wizardpanel__form{height:calc(100% - var(--ibiz-control-wizard-panel-footer-height));overflow:auto}.ibiz-control-wizardpanel.is-header .ibiz-control-wizardpanel__form{height:calc(100% - var(--ibiz-control-wizard-panel-footer-height) - var(--ibiz-control-wizard-panel-header-height))}.ibiz-control-wizardpanel-header{height:var(--ibiz-control-wizard-panel-header-height)}.ibiz-control-wizardpanel-header--step-icon{font-size:var(--ibiz-control-wizard-panel-step-icon-width)}.ibiz-control-wizardpanel-header .el-step__icon{--el-bg-color:var(--ibiz-color-bg-1)}.ibiz-control-wizardpanel-footer{display:flex;align-items:center;justify-content:flex-end;height:var(--ibiz-control-wizard-panel-footer-height);padding-right:var(--ibiz-padding)}