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

package/lib/panel-component/app-extend-menu/extend-menu-base/extend-menu-base.controller.cjs

@@ -0,0 +1,260 @@
+'use strict';
+
+var qxUtil = require('qx-util');
+var runtime = require('@ibiz-template/runtime');
+var core = require('@ibiz-template/core');
+var extendMenuBase_state = require('./extend-menu-base.state.cjs');
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class ExtendMenuBaseController extends runtime.PanelItemController {
+  constructor() {
+    super(...arguments);
+    /**
+     * @description 自定义补充参数
+     * @type {IData}
+     * @memberof ExtendMenuBaseController
+     */
+    __publicField(this, "rawItemParams", { rendermode: "BUTTON" });
+    /**
+     * @description 当前菜单名称
+     * @protected
+     * @type {string}
+     * @memberof ExtendMenuBaseController
+     */
+    __publicField(this, "appMenuName", "");
+    /**
+     * @description 菜单模型
+     * @protected
+     * @type {(IAppMenu | undefined)}
+     * @memberof ExtendMenuBaseController
+     */
+    __publicField(this, "appMenu");
+    /**
+     * @description 当前应用
+     * @protected
+     * @type {IAppService}
+     * @memberof ExtendMenuBaseController
+     */
+    __publicField(this, "app");
+    /**
+     * @description 菜单项适配器集合
+     * @type {{ [key: string]: IAppMenuItemProvider }}
+     * @memberof ExtendMenuBaseController
+     */
+    __publicField(this, "itemProviders", {});
+    /**
+     * @description 所有菜单项，平铺开
+     * @type {IAppMenuItem[]}
+     * @memberof ExtendMenuBaseController
+     */
+    __publicField(this, "allAppMenuItems", []);
+  }
+  /**
+   * @description 获取当前视图
+   * @readonly
+   * @type {IViewController}
+   * @memberof ExtendMenuBaseController
+   */
+  get view() {
+    return this.panel.view;
+  }
+  /**
+   * @description 视图层级
+   * @readonly
+   * @type {(number | undefined)}
+   * @memberof ExtendMenuBaseController
+   */
+  get routeDepth() {
+    return this.view.modal.routeDepth;
+  }
+  /**
+   * @description 上下文对象
+   * @readonly
+   * @type {IContext}
+   * @memberof ExtendMenuBaseController
+   */
+  get context() {
+    return this.panel.context;
+  }
+  /**
+   * @description 视图参数
+   * @readonly
+   * @type {IParams}
+   * @memberof ExtendMenuBaseController
+   */
+  get params() {
+    return this.panel.params;
+  }
+  /**
+   * @description 创建状态对象
+   * @protected
+   * @returns {*}  {ExtendMenuBase}
+   * @memberof ExtendMenuBaseController
+   */
+  createState() {
+    var _a;
+    return new extendMenuBase_state.ExtendMenuBase((_a = this.parent) == null ? void 0 : _a.state);
+  }
+  /**
+   * @description 初始化
+   * @protected
+   * @returns {*}  {Promise<void>}
+   * @memberof ExtendMenuBaseController
+   */
+  async onInit() {
+    var _a, _b;
+    await super.onInit();
+    this.handleRawItemParams();
+    this.app = await ibiz.hub.getApp(this.context.srfappid);
+    this.appMenu = this.computeAppMenu();
+    this.state.items = this.appMenu && this.appMenu.appMenuItems ? this.appMenu.appMenuItems : [];
+    this.flattenAllItems();
+    await this.initAppMenuItemProviders();
+    (_b = (_a = this.appMenu) == null ? void 0 : _a.appMenuItems) == null ? void 0 : _b.forEach((item) => {
+      this.initMenuItemState(item);
+    });
+  }
+  /**
+   * @description 计算当前菜单模型
+   * @protected
+   * @returns {*}  {(IAppMenu | undefined)}
+   * @memberof ExtendMenuBaseController
+   */
+  computeAppMenu() {
+    return runtime.getControl(this.view.model, this.appMenuName);
+  }
+  /**
+   * @description 平铺所有菜单项
+   * @protected
+   * @returns {*}  {void}
+   * @memberof ExtendMenuBaseController
+   */
+  flattenAllItems() {
+    if (!this.appMenu)
+      return;
+    const result = [];
+    const flattenMenus = (menuItems) => {
+      menuItems.forEach((item) => {
+        result.push(item);
+        if (item.appMenuItems && item.appMenuItems.length > 0) {
+          flattenMenus(item.appMenuItems);
+        }
+      });
+    };
+    flattenMenus(this.appMenu.appMenuItems);
+    this.allAppMenuItems = result;
+  }
+  /**
+   * @description 初始化菜单项的适配器
+   * @protected
+   * @returns {*}  {Promise<void>}
+   * @memberof ExtendMenuBaseController
+   */
+  async initAppMenuItemProviders() {
+    if (this.allAppMenuItems.length === 0)
+      return;
+    await Promise.all(
+      this.allAppMenuItems.map(async (item) => {
+        const provider = await runtime.getAppMenuItemProvider(item);
+        if (provider) {
+          this.itemProviders[item.id] = provider;
+        }
+      })
+    );
+  }
+  /**
+   * @description 初始化菜单项状态
+   * @param {IAppMenuItem} menu
+   * @returns {*}  {{
+   *     visible: boolean;
+   *     permitted: boolean;
+   *   }}
+   * @memberof ExtendMenuBaseController
+   */
+  initMenuItemState(menu) {
+    var _a;
+    const result = { permitted: true, visible: true };
+    if (menu.hidden) {
+      result.visible = false;
+    } else {
+      let permitted = true;
+      if (menu.accessKey) {
+        permitted = this.app.authority.calcByResCode(menu.accessKey);
+      }
+      let visible = permitted;
+      if ((_a = menu.appMenuItems) == null ? void 0 : _a.length) {
+        const childrenState = menu.appMenuItems.map((child) => {
+          return this.initMenuItemState(child).visible;
+        });
+        visible = visible && childrenState.includes(true);
+      }
+      result.permitted = permitted;
+      result.visible = visible;
+    }
+    this.state.menuItemsState[menu.id] = result;
+    return result;
+  }
+  /**
+   * @description 处理菜单项点击，触发对应的应用功能
+   * @param {IAppMenuItem} menuItem
+   * @param {MouseEvent} event
+   * @param {boolean} [useDepth=true]
+   * @returns {*}  {Promise<void>}
+   * @memberof ExtendMenuBaseController
+   */
+  async handleClickMenuItem(menuItem, event, useDepth = true) {
+    if (!menuItem) {
+      return;
+    }
+    const provider = this.itemProviders[menuItem.id];
+    if (provider && provider.onClick) {
+      return provider.onClick(menuItem, event);
+    }
+    if (!menuItem.appFuncId) {
+      throw new core.RuntimeModelError(
+        menuItem,
+        ibiz.i18n.t("runtime.controller.control.menu.noConfigured")
+      );
+    }
+    const tempContext = this.context.clone();
+    tempContext.srfappid = menuItem.appId || ibiz.env.appId;
+    if (this.routeDepth && useDepth) {
+      Object.assign(tempContext, {
+        toRouteDepth: this.routeDepth + 1
+      });
+    }
+    const param = { ...this.params };
+    await ibiz.commands.execute(
+      runtime.AppFuncCommand.TAG,
+      menuItem.appFuncId,
+      tempContext,
+      param,
+      { view: this.view }
+    );
+  }
+  /**
+   * @description 处理自定义补充参数
+   * @protected
+   * @memberof ExtendMenuBaseController
+   */
+  handleRawItemParams() {
+    var _a;
+    let params = {};
+    const rawItemParams = (_a = this.model.rawItem) == null ? void 0 : _a.rawItemParams;
+    if (qxUtil.notNilEmpty(rawItemParams)) {
+      params = rawItemParams.reduce((param, item) => {
+        param[item.key.toLowerCase()] = item.value;
+        return param;
+      }, {});
+    }
+    Object.assign(this.rawItemParams, params);
+  }
+}
+
+exports.ExtendMenuBaseController = ExtendMenuBaseController;

package/lib/panel-component/app-extend-menu/extend-menu-base/extend-menu-base.state.cjs

@@ -0,0 +1,30 @@
+'use strict';
+
+var runtime = require('@ibiz-template/runtime');
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class ExtendMenuBase extends runtime.PanelItemState {
+  constructor() {
+    super(...arguments);
+    /**
+     * @description 所有菜单项
+     * @type {IAppMenuItem[]}
+     * @memberof ExtendMenuBase
+     */
+    __publicField(this, "items", []);
+    /**
+     * @description 菜单项状态
+     * @type {{ [p: string]: { visible: boolean; permitted: boolean } }}
+     * @memberof ExtendMenuBase
+     */
+    __publicField(this, "menuItemsState", {});
+  }
+}
+
+exports.ExtendMenuBase = ExtendMenuBase;

package/lib/panel-component/app-extend-menu/extend-menu-base/extend-menu-base.util.cjs

@@ -0,0 +1,355 @@
+'use strict';
+
+var vue = require('vue');
+
+"use strict";
+function useCascaderPopover(props, ns, menuAlign, renderCascaderContent) {
+  let hoverCount = 0;
+  let closeTimer = null;
+  const overlayInstances = /* @__PURE__ */ new Map();
+  const activeMenuIdStack = vue.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(
+      () => vue.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(
+      () => vue.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;
+    }
+  }
+  vue.onMounted(startTracking);
+  vue.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;
+}
+function getMenuLayout(layout) {
+  if ((layout == null ? void 0 : layout.layout) === "FLEX") {
+    const { align, valign } = layout;
+    return {
+      justifyContent: align,
+      alignItems: valign
+    };
+  }
+  return {};
+}
+
+exports.findMenuItem = findMenuItem;
+exports.getMenuLayout = getMenuLayout;
+exports.getMenus = getMenus;
+exports.useBorderLayout = useBorderLayout;
+exports.useCascaderPopover = useCascaderPopover;