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

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

@@ -0,0 +1,231 @@
+import { createVNode, resolveComponent, ref, computed, defineComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { showTitle } from '@ibiz-template/core';
+import { 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,
+    position,
+    menuAlign,
+    menus,
+    menuItemsState,
+    showCascaderArrow,
+    handleMenuItemClick,
+    handleMenuItemMouseEnter,
+    handleMenuItemMouseLeave
+  } = _params;
+  return createVNode(resolveComponent("el-row"), {
+    "class": [ns.e("content"), ns.is(menuAlign, !!menuAlign), ns.is(position == null ? void 0 : position.toLowerCase(), !!position)]
+  }, {
+    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" && ["TOP", "BOTTOM"].includes(props.position));
+    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,
+      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.util.d.ts

@@ -0,0 +1,166 @@
+import { Ref, VNode } from 'vue';
+import { IAppMenuItem, ILayout } from '@ibiz/model-core';
+import { IAppMenuItemProvider } from '@ibiz-template/runtime';
+import { Namespace } from '@ibiz-template/core';
+/**
+ * @description 组件传参类型定义
+ *
+ * @export
+ * @interface IExtendMenuProps
+ */
+export interface IExtendMenuProps {
+    items: IAppMenuItem[];
+    menuItemsState: {
+        [p: string]: {
+            visible: boolean;
+            permitted: boolean;
+        };
+    };
+    providers: {
+        [key: string]: IAppMenuItemProvider;
+    };
+    position: 'LEFT' | 'RIGHT' | 'TOP' | 'BOTTOM';
+    layoutMode: 'TABLE' | 'TABLE_12COL' | 'TABLE_24COL' | 'FLEX' | 'BORDER' | 'ABSOLUTE';
+    layout: ILayout;
+}
+/**
+ * @description 菜单项绘制数据
+ *
+ * @export
+ * @interface IButtonMenuItem
+ * @extends {IAppMenuItem}
+ */
+export interface IButtonMenuItem extends IAppMenuItem {
+    /** 数据层级 */
+    level: number;
+    /** 主键 */
+    value?: string;
+    /** 主文本 */
+    label?: string;
+    /** 父主键 */
+    parentId?: string;
+    /** 子项数据集合 */
+    children?: IButtonMenuItem[];
+}
+/**
+ * @description 菜单绘制通用参数
+ *
+ * @export
+ * @interface IMenuRenderParams
+ */
+export interface IMenuRenderParams {
+    /** 菜单样式处理命名空间 */
+    ns: Namespace;
+    /** 菜单对齐 */
+    menuAlign: 'horizontal' | 'vertical';
+    /** 菜单项权限数据 */
+    menuItemsState: {
+        [p: string]: {
+            visible: boolean;
+            permitted: boolean;
+        };
+    };
+}
+/**
+ * @description 绘制单个菜单项参数
+ *
+ * @export
+ * @interface IMenuItemParams
+ * @extends {IMenuRenderParams}
+ */
+export interface IMenuItemParams extends IMenuRenderParams {
+    /** 菜单项 */
+    menu: IButtonMenuItem;
+}
+/**
+ * @description 多菜单项（子菜单内容）参数
+ *
+ * @export
+ * @interface IMenuContentParams
+ * @extends {IMenuRenderParams}
+ */
+export interface IMenuContentParams extends IMenuRenderParams {
+    /** 是否支持布局 */
+    isLayout: boolean;
+    /** 菜单方向 */
+    position: string;
+    /** 菜单项绘制数据集合 */
+    menus: IButtonMenuItem[];
+    /** 显示级联箭头 */
+    showCascaderArrow?: boolean;
+    /** 菜单项点击 */
+    handleMenuItemClick: (_menu: IButtonMenuItem, event: MouseEvent) => void;
+    /** 鼠标移入菜单项，准备弹出子菜单 */
+    handleMenuItemMouseEnter: (_menu: IButtonMenuItem, event: MouseEvent) => void;
+    /** 鼠标移出菜单项 */
+    handleMenuItemMouseLeave: (_menu: IButtonMenuItem, event: MouseEvent) => void;
+}
+/**
+ * @description 用于构建级联菜单的弹出层控制逻辑
+ *
+ * - 支持多层级菜单结构；
+ * - 根据鼠标移入/移出控制子菜单弹出与关闭；
+ * - 菜单项移入时打开对应子菜单，移出时自动延迟关闭；
+ * - 子菜单弹出方向根据配置自动计算；
+ * - 支持箭头图标旋转动画；
+ *
+ * @param props - 外部传入的菜单属性，包含菜单项、权限、适配器、布局模式等
+ * @param ns - 命名空间，用于生成 CSS BEM 类名
+ * @param menuAlign - 菜单排列方向（如 vertical）
+ * @param onMenuItemClick - 菜单项点击事件处理器
+ * @param renderCascader - 子菜单内容渲染函数（返回 VNode）
+ *
+ * @returns {
+ *   getOverlayNum: 获取打开的级联数量；
+ *   clearAllCascader: 清除所有层级弹窗和计时器；
+ *   openCascaderPopover: 打开子菜单气泡；
+ *   onMenuItemMouseEnter: 鼠标移入菜单项时的处理函数；
+ *   onMenuItemMouseLeave: 鼠标移出菜单项时的处理函数；
+ * }
+ */
+export declare function useCascaderPopover(props: IExtendMenuProps, ns: Namespace, menuAlign: Ref<string>, renderCascaderContent: (_menu: IButtonMenuItem) => VNode): {
+    getOverlayNum: () => number;
+    clearAllCascader: () => void;
+    openCascaderPopover: (menu: IButtonMenuItem, evt: MouseEvent, opts?: IData) => void;
+    handleMenuItemMouseEnter: (_menu: IButtonMenuItem, _event: MouseEvent) => void;
+    handleMenuItemMouseLeave: (_menu: IButtonMenuItem, _event: MouseEvent) => void;
+};
+/**
+ * @description 用于构建边缘布局弹出层控制逻辑
+ *
+ * - 创建 fixed 占位元素
+ * - 占位块随目标元素变化而更新
+ * - 鼠标悬停触发弹出层
+ * - 移出占位层自动关闭弹层
+ * - 组件卸载自动清理
+ *
+ * @export
+ * @param {(Ref<HTMLElement | undefined>)} menuRef 菜单元素引用
+ * @param {Namespace} ns 命名空间工具
+ * @param {('LEFT' | 'RIGHT' | 'TOP' | 'BOTTOM')} position 元素的方向
+ * @param {Ref<string>} menuAlign 菜单对齐方式
+ * @param {() => number} getOverlayNum 获取当前层级 Overlay 数量
+ * @param {() => VNode} renderBorderContent 渲染边框内容
+ * @returns {
+ *   closeBorderPopover: 关闭边框弹出层
+ * }
+ */
+export declare function useBorderLayout(menuRef: Ref<HTMLElement | undefined>, ns: Namespace, position: 'LEFT' | 'RIGHT' | 'TOP' | 'BOTTOM', menuAlign: Ref<string>, getOverlayNum: () => number, renderBorderContent: () => VNode): {
+    closeBorderPopover: () => void;
+};
+/**
+ * 递归生成菜单数据，递给 element 的 Menu 组件
+ *
+ * @param {AppMenuItemModel[]} items
+ * @return {*}  {IButtonMenuItem[]}
+ */
+export declare function getMenus(items: IAppMenuItem[], _parentItem?: IAppMenuItem, level?: number): IButtonMenuItem[];
+/**
+ * @description 查询菜单项模型
+ *
+ * @export
+ * @param {string} _id 菜单标识
+ * @param {IAppMenuItem[]} items 菜单数据集合
+ * @return {*}  {(IAppMenuItem | undefined)}
+ */
+export declare function findMenuItem(_id: string, items: IAppMenuItem[]): IAppMenuItem | undefined;