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

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

@@ -0,0 +1,235 @@
+import { createVNode, resolveComponent, ref, computed, defineComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { showTitle } from '@ibiz-template/core';
+import { getMenuLayout, getMenus, useCascaderPopover, useBorderLayout, findMenuItem } from '../extend-menu-base.util.mjs';
+import './extend-button-menu.css';
+
+"use strict";
+const rightArrow = () => createVNode("svg", {
+  "xmlns": "http://www.w3.org/2000/svg",
+  "viewBox": "0 0 1024 1024",
+  "width": "1em",
+  "height": "1em",
+  "fill": "currentColor"
+}, [createVNode("path", {
+  "fill": "currentColor",
+  "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"
+}, null)]);
+function renderMenuItem(params) {
+  var _a, _b, _c;
+  const {
+    ns,
+    menu,
+    menuAlign,
+    menuItemsState
+  } = params;
+  if (!menu.id || !((_a = menuItemsState[menu.id]) == null ? void 0 : _a.visible))
+    return;
+  if (menu.itemType === "MENUITEM") {
+    return createVNode(resolveComponent("el-button"), {
+      "class": [ns.e("menuitem"), "".concat(((_b = menu.sysCss) == null ? void 0 : _b.cssName) || "")],
+      "index": menu.id
+    }, {
+      default: () => [menu.sysImage && createVNode(resolveComponent("iBizIcon"), {
+        "class": ns.e("icon"),
+        "icon": menu.sysImage
+      }, null), menu.caption && createVNode("span", {
+        "class": ns.e("caption"),
+        "title": showTitle(menu.tooltip)
+      }, [menu.caption])]
+    });
+  }
+  if (menu.itemType === "SEPERATOR") {
+    const direction = menuAlign === "horizontal" ? "vertical" : "horizontal";
+    return createVNode(resolveComponent("el-divider"), {
+      "direction": direction,
+      "class": [ns.em("separator"), ns.em("separator", direction)],
+      "id": menu.id
+    }, null);
+  }
+  if (menu.itemType === "RAWITEM") {
+    return createVNode(resolveComponent("el-button"), {
+      "index": menu.id,
+      "title": showTitle(menu.tooltip),
+      "class": [ns.e("rawitem"), "".concat(((_c = menu.sysCss) == null ? void 0 : _c.cssName) || "")]
+    }, {
+      default: () => [createVNode(resolveComponent("iBizRawItem"), {
+        "rawItem": menu
+      }, null)]
+    });
+  }
+}
+function renderMenuContent(_params) {
+  const {
+    ns,
+    isLayout,
+    menuLayout,
+    position,
+    menuAlign,
+    menus,
+    menuItemsState,
+    showCascaderArrow,
+    handleMenuItemClick,
+    handleMenuItemMouseEnter,
+    handleMenuItemMouseLeave
+  } = _params;
+  const layoutStyle = isLayout ? getMenuLayout(menuLayout) : {};
+  return createVNode(resolveComponent("el-row"), {
+    "class": [ns.e("content"), ns.is(menuAlign, !!menuAlign), ns.is(position == null ? void 0 : position.toLowerCase(), !!position)],
+    "style": layoutStyle
+  }, {
+    default: () => menus.map((menu) => {
+      var _a, _b;
+      const menuItem = renderMenuItem({
+        menu,
+        ns,
+        menuAlign,
+        menuItemsState
+      });
+      if (!menuItem)
+        return;
+      const style = {};
+      if (isLayout && ((_a = menu.layoutPos) == null ? void 0 : _a.layout) === "FLEX") {
+        const pos = menu.layoutPos;
+        Object.assign(style, {
+          flexGrow: pos.grow,
+          flexShrink: pos.shrink === 1 ? void 0 : pos.shrink,
+          flexBasis: pos.basis
+        });
+      }
+      const isShowArrow = !!(showCascaderArrow && menu.children);
+      return createVNode("div", {
+        "class": [ns.em("content", "item"), ns.em("content", (_b = menu.itemType) == null ? void 0 : _b.toLowerCase()), ns.is("show-arrow", isShowArrow)],
+        "style": style
+      }, [createVNode("div", {
+        "class": ns.em("content", "item-container"),
+        "onMouseenter": (_e) => handleMenuItemMouseEnter(menu, _e),
+        "onMouseleave": (_e) => handleMenuItemMouseLeave(menu, _e),
+        "onClick": (_e) => handleMenuItemClick(menu, _e)
+      }, [menuItem]), isShowArrow && createVNode("span", {
+        "class": ns.em("content", "item-arrow")
+      }, [rightArrow()])]);
+    })
+  });
+}
+const ExtendButtonMenu = /* @__PURE__ */ defineComponent({
+  name: "IBizExtendButtonMenu",
+  props: {
+    items: {
+      type: Object,
+      required: true
+    },
+    menuItemsState: {
+      type: Object,
+      required: true
+    },
+    providers: {
+      type: Object,
+      required: true
+    },
+    position: {
+      type: String,
+      required: true
+    },
+    layoutMode: {
+      type: String,
+      required: true
+    },
+    layout: {
+      type: Object
+    }
+  },
+  emits: {
+    menuItemClick: (item, event) => true
+  },
+  setup(props, {
+    emit
+  }) {
+    const ns = useNamespace("extend-menu-button");
+    const buttonMenuRef = ref();
+    const menuAlign = computed(() => ["TOP", "BOTTOM"].includes(props.position) ? "horizontal" : "vertical");
+    const isLayout = computed(() => props.layoutMode !== "BORDER");
+    const menus = ref(getMenus(props.items));
+    const renderCascaderContent = (_menu) => {
+      return renderMenuContent({
+        ns,
+        menuAlign: "vertical",
+        position: props.position,
+        menus: _menu.children,
+        menuItemsState: props.menuItemsState,
+        handleMenuItemClick,
+        handleMenuItemMouseEnter,
+        handleMenuItemMouseLeave,
+        showCascaderArrow: true,
+        isLayout: false
+      });
+    };
+    const renderBorderContent = () => {
+      return renderMenuContent({
+        ns,
+        menuAlign: menuAlign.value,
+        position: props.position,
+        menus: menus.value,
+        menuItemsState: props.menuItemsState,
+        handleMenuItemClick,
+        handleMenuItemMouseEnter,
+        handleMenuItemMouseLeave,
+        showCascaderArrow: true,
+        isLayout: false
+      });
+    };
+    const {
+      getOverlayNum,
+      clearAllCascader,
+      handleMenuItemMouseEnter,
+      handleMenuItemMouseLeave
+    } = useCascaderPopover(props, ns, menuAlign, renderCascaderContent);
+    let closeBorderPopover;
+    if (props.layoutMode === "BORDER") {
+      const borderLayout = useBorderLayout(buttonMenuRef, ns, props.position, menuAlign, getOverlayNum, renderBorderContent);
+      closeBorderPopover = borderLayout.closeBorderPopover;
+    }
+    const handleMenuItemClick = async (_menu, _event) => {
+      if (_menu.children)
+        return;
+      clearAllCascader();
+      if (closeBorderPopover)
+        closeBorderPopover();
+      if (!_menu.appFuncId) {
+        ibiz.log.warn(ibiz.i18n.t("runtime.controller.control.menu.noConfigured"));
+        return;
+      }
+      const menuItem = findMenuItem(_menu.id, props.items);
+      emit("menuItemClick", menuItem, _event);
+    };
+    return {
+      ns,
+      menus,
+      menuAlign,
+      isLayout,
+      buttonMenuRef,
+      handleMenuItemClick,
+      handleMenuItemMouseEnter,
+      handleMenuItemMouseLeave
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "ref": "buttonMenuRef",
+      "class": [this.ns.b(), this.ns.is(this.layoutMode.toLowerCase(), !!this.layoutMode), this.ns.is(this.position.toLowerCase(), !!this.position), this.ns.is(this.menuAlign, !!this.menuAlign)]
+    }, [this.layoutMode !== "BORDER" && renderMenuContent({
+      ns: this.ns,
+      menuAlign: this.menuAlign,
+      isLayout: this.isLayout,
+      menuLayout: this.layout,
+      position: this.position,
+      menus: this.menus,
+      menuItemsState: this.menuItemsState,
+      handleMenuItemClick: this.handleMenuItemClick,
+      handleMenuItemMouseEnter: this.handleMenuItemMouseEnter,
+      handleMenuItemMouseLeave: this.handleMenuItemMouseLeave
+    })]);
+  }
+});
+
+export { ExtendButtonMenu };

package/es/panel-component/app-extend-menu/extend-menu-base/extend-menu-base.controller.d.ts

@@ -0,0 +1,149 @@
+import { IAppMenuItemProvider, IAppService, IViewController, PanelItemController } from '@ibiz-template/runtime';
+import { IAppMenu, IAppMenuItem, IPanelRawItem } from '@ibiz/model-core';
+import { ExtendMenuBase } from './extend-menu-base.state';
+/**
+ * @description 扩展菜单状态控制器基类
+ * @export
+ * @class ExtendMenuBaseController
+ * @extends {PanelItemController<IPanelRawItem>}
+ */
+export declare class ExtendMenuBaseController extends PanelItemController<IPanelRawItem> {
+    /**
+     * @description 状态对象
+     * @type {ExtendMenuBase}
+     * @memberof AppSwitchController
+     */
+    state: ExtendMenuBase;
+    /**
+     * @description 自定义补充参数
+     * @type {IData}
+     * @memberof ExtendMenuBaseController
+     */
+    rawItemParams: IData;
+    /**
+     * @description 当前菜单名称
+     * @protected
+     * @type {string}
+     * @memberof ExtendMenuBaseController
+     */
+    protected appMenuName: string;
+    /**
+     * @description 菜单模型
+     * @protected
+     * @type {(IAppMenu | undefined)}
+     * @memberof ExtendMenuBaseController
+     */
+    appMenu: IAppMenu | undefined;
+    /**
+     * @description 当前应用
+     * @protected
+     * @type {IAppService}
+     * @memberof ExtendMenuBaseController
+     */
+    protected app: IAppService;
+    /**
+     * @description 菜单项适配器集合
+     * @type {{ [key: string]: IAppMenuItemProvider }}
+     * @memberof ExtendMenuBaseController
+     */
+    itemProviders: {
+        [key: string]: IAppMenuItemProvider;
+    };
+    /**
+     * @description 所有菜单项，平铺开
+     * @type {IAppMenuItem[]}
+     * @memberof ExtendMenuBaseController
+     */
+    allAppMenuItems: IAppMenuItem[];
+    /**
+     * @description 获取当前视图
+     * @readonly
+     * @type {IViewController}
+     * @memberof ExtendMenuBaseController
+     */
+    get view(): IViewController;
+    /**
+     * @description 视图层级
+     * @readonly
+     * @type {(number | undefined)}
+     * @memberof ExtendMenuBaseController
+     */
+    get routeDepth(): number | undefined;
+    /**
+     * @description 上下文对象
+     * @readonly
+     * @type {IContext}
+     * @memberof ExtendMenuBaseController
+     */
+    get context(): IContext;
+    /**
+     * @description 视图参数
+     * @readonly
+     * @type {IParams}
+     * @memberof ExtendMenuBaseController
+     */
+    get params(): IParams;
+    /**
+     * @description 创建状态对象
+     * @protected
+     * @returns {*}  {ExtendMenuBase}
+     * @memberof ExtendMenuBaseController
+     */
+    protected createState(): ExtendMenuBase;
+    /**
+     * @description 初始化
+     * @protected
+     * @returns {*}  {Promise<void>}
+     * @memberof ExtendMenuBaseController
+     */
+    protected onInit(): Promise<void>;
+    /**
+     * @description 计算当前菜单模型
+     * @protected
+     * @returns {*}  {(IAppMenu | undefined)}
+     * @memberof ExtendMenuBaseController
+     */
+    protected computeAppMenu(): IAppMenu | undefined;
+    /**
+     * @description 平铺所有菜单项
+     * @protected
+     * @returns {*}  {void}
+     * @memberof ExtendMenuBaseController
+     */
+    protected flattenAllItems(): void;
+    /**
+     * @description 初始化菜单项的适配器
+     * @protected
+     * @returns {*}  {Promise<void>}
+     * @memberof ExtendMenuBaseController
+     */
+    protected initAppMenuItemProviders(): Promise<void>;
+    /**
+     * @description 初始化菜单项状态
+     * @param {IAppMenuItem} menu
+     * @returns {*}  {{
+     *     visible: boolean;
+     *     permitted: boolean;
+     *   }}
+     * @memberof ExtendMenuBaseController
+     */
+    initMenuItemState(menu: IAppMenuItem): {
+        visible: boolean;
+        permitted: boolean;
+    };
+    /**
+     * @description 处理菜单项点击，触发对应的应用功能
+     * @param {IAppMenuItem} menuItem
+     * @param {MouseEvent} event
+     * @param {boolean} [useDepth=true]
+     * @returns {*}  {Promise<void>}
+     * @memberof ExtendMenuBaseController
+     */
+    handleClickMenuItem(menuItem: IAppMenuItem, event: MouseEvent, useDepth?: boolean): Promise<void>;
+    /**
+     * @description 处理自定义补充参数
+     * @protected
+     * @memberof ExtendMenuBaseController
+     */
+    protected handleRawItemParams(): void;
+}

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

@@ -0,0 +1,258 @@
+import { notNilEmpty } from 'qx-util';
+import { PanelItemController, getControl, getAppMenuItemProvider, AppFuncCommand } from '@ibiz-template/runtime';
+import { RuntimeModelError } from '@ibiz-template/core';
+import { ExtendMenuBase } from './extend-menu-base.state.mjs';
+
+"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 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((_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 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 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 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(
+      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 (notNilEmpty(rawItemParams)) {
+      params = rawItemParams.reduce((param, item) => {
+        param[item.key.toLowerCase()] = item.value;
+        return param;
+      }, {});
+    }
+    Object.assign(this.rawItemParams, params);
+  }
+}
+
+export { ExtendMenuBaseController };

package/es/panel-component/app-extend-menu/extend-menu-base/extend-menu-base.state.d.ts

@@ -0,0 +1,27 @@
+import { PanelItemState } from '@ibiz-template/runtime';
+import { IAppMenuItem } from '@ibiz/model-core';
+/**
+ * @description 扩展菜单状态基类
+ * @export
+ * @class ExtendMenuBase
+ * @extends {PanelItemState}
+ */
+export declare class ExtendMenuBase extends PanelItemState {
+    /**
+     * @description 所有菜单项
+     * @type {IAppMenuItem[]}
+     * @memberof ExtendMenuBase
+     */
+    items: IAppMenuItem[];
+    /**
+     * @description 菜单项状态
+     * @type {{ [p: string]: { visible: boolean; permitted: boolean } }}
+     * @memberof ExtendMenuBase
+     */
+    menuItemsState: {
+        [p: string]: {
+            visible: boolean;
+            permitted: boolean;
+        };
+    };
+}

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

@@ -0,0 +1,28 @@
+import { PanelItemState } from '@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 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", {});
+  }
+}
+
+export { ExtendMenuBase };