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

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

@@ -0,0 +1,278 @@
+import { isVNode, createVNode, resolveComponent, ref, computed, defineComponent } from 'vue';
+import { showTitle } from '@ibiz-template/core';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { createUUID } from 'qx-util';
+import { getMenus, findMenuItem } from '../extend-menu-base.util.mjs';
+import './extend-standard-menu.css';
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const ellipsisSvg = () => {
+  return createVNode("ion-icon", {
+    "name": "ellipsis-horizontal"
+  }, null);
+};
+function renderMenuItem(_params) {
+  var _a, _b, _c, _d;
+  const {
+    isFirst,
+    menu,
+    collapse,
+    ns,
+    menuAlign,
+    menuItemsState
+  } = _params;
+  if (!menu.id || menuItemsState && !((_a = menuItemsState[menu.id]) == null ? void 0 : _a.visible)) {
+    return;
+  }
+  if (menu.itemType === "MENUITEM") {
+    let content;
+    if (!(isFirst && collapse)) {
+      content = [menu.sysImage ? createVNode(resolveComponent("iBizIcon"), {
+        "class": ns.e("icon"),
+        "icon": menu.sysImage
+      }, null) : null, createVNode("span", {
+        "class": ns.e("caption")
+      }, [menu.caption])];
+    } else {
+      content = [menu.sysImage ? createVNode(resolveComponent("iBizIcon"), {
+        "class": ns.e("icon"),
+        "icon": menu.sysImage
+      }, null) : createVNode("span", {
+        "class": ns.e("caption")
+      }, [(_b = menu.caption) == null ? void 0 : _b.slice(0, 1)])];
+    }
+    return !(isFirst && collapse) ? createVNode(resolveComponent("el-menu-item"), {
+      "class": [ns.e("item"), "".concat(((_c = menu.sysCss) == null ? void 0 : _c.cssName) || "")],
+      "index": menu.id,
+      "title": showTitle(menu.tooltip)
+    }, _isSlot(content) ? content : {
+      default: () => [content]
+    }) : createVNode(resolveComponent("el-tooltip"), {
+      "class": ns.b("tooltip"),
+      "content": menu.caption,
+      "placement": menuAlign === "horizontal" ? "bottom" : "left",
+      "theme": "light"
+    }, {
+      default: () => {
+        var _a2;
+        return [createVNode(resolveComponent("el-menu-item"), {
+          "class": [ns.e("item"), "".concat(((_a2 = menu.sysCss) == null ? void 0 : _a2.cssName) || "")],
+          "index": menu.id
+        }, _isSlot(content) ? content : {
+          default: () => [content]
+        })];
+      }
+    });
+  }
+  if (menu.itemType === "SEPERATOR") {
+    const direction = menuAlign === "horizontal" && isFirst ? "vertical" : "horizontal";
+    return createVNode(resolveComponent("el-divider"), {
+      "direction": direction,
+      "class": ns.em("separator", direction),
+      "id": menu.id
+    }, null);
+  }
+  if (menu.itemType === "RAWITEM") {
+    return createVNode(resolveComponent("el-menu-item"), {
+      "index": menu.id,
+      "title": showTitle(menu.tooltip),
+      "class": [ns.e("rawitem"), "".concat(((_d = menu.sysCss) == null ? void 0 : _d.cssName) || "")]
+    }, {
+      default: () => [createVNode(resolveComponent("iBizRawItem"), {
+        "rawItem": menu
+      }, null)]
+    });
+  }
+}
+function renderSubmenu(_params) {
+  var _a, _b;
+  const {
+    isFirst,
+    menu,
+    collapse,
+    ns,
+    menuAlign,
+    menuItemsState
+  } = _params;
+  if (!menu.id || menuItemsState && !((_a = menuItemsState[menu.id]) == null ? void 0 : _a.visible)) {
+    return;
+  }
+  return createVNode(resolveComponent("el-sub-menu"), {
+    "class": [ns.b("submenu"), "".concat(((_b = menu.sysCss) == null ? void 0 : _b.cssName) || "")],
+    "index": menu.id,
+    "teleported": true,
+    "popper-class": [ns.b("popup-container")]
+  }, {
+    default: () => menu.children && menu.children.map((item) => {
+      if (item.children && item.children) {
+        return renderSubmenu({
+          isFirst: false,
+          menu: item,
+          collapse,
+          ns,
+          menuAlign,
+          menuItemsState
+        });
+      }
+      return renderMenuItem({
+        isFirst: false,
+        menu: item,
+        collapse,
+        ns,
+        menuAlign,
+        menuItemsState
+      });
+    }),
+    title: () => {
+      var _a2;
+      if (collapse) {
+        if (menu.sysImage) {
+          return createVNode(resolveComponent("iBizIcon"), {
+            "class": ns.e("icon"),
+            "icon": menu.sysImage
+          }, null);
+        }
+        return [isFirst ? (_a2 = menu.caption) == null ? void 0 : _a2.slice(0, 1) : menu.caption, isFirst ? null : createVNode("ion-icon", {
+          "name": "chevron-forward-outline"
+        }, null)];
+      }
+      return [createVNode(resolveComponent("iBizIcon"), {
+        "class": ns.e("icon"),
+        "icon": menu.sysImage
+      }, null), createVNode("span", {
+        "class": ns.e("caption")
+      }, [menu.caption])];
+    }
+  });
+}
+function renderMenuContent(_params) {
+  const {
+    refreshKey,
+    ns,
+    collapse,
+    menuAlign,
+    position,
+    menus,
+    menuItemsState,
+    handleMenuSelect
+  } = _params;
+  return createVNode("div", {
+    "class": [ns.e("content"), ns.is("collapse", collapse), ns.is(menuAlign, !!menuAlign), ns.is(position == null ? void 0 : position.toLowerCase(), !!position)]
+  }, [createVNode(resolveComponent("el-menu"), {
+    "key": refreshKey,
+    "popper-class": [ns.b("popper")],
+    "collapse": collapse,
+    "collapse-transition": false,
+    "onSelect": handleMenuSelect,
+    "theme": "light",
+    "mode": menuAlign,
+    "ellipsis-icon": () => ellipsisSvg(),
+    "ellipsis": menuAlign === "horizontal"
+  }, {
+    default: () => {
+      return menus.map((item) => {
+        if (item.children && item.children.length > 0) {
+          return renderSubmenu({
+            isFirst: true,
+            menu: item,
+            collapse,
+            ns,
+            menuAlign,
+            menuItemsState
+          });
+        }
+        return renderMenuItem({
+          isFirst: true,
+          menu: item,
+          collapse,
+          ns,
+          menuAlign,
+          menuItemsState
+        });
+      });
+    }
+  })]);
+}
+const ExtendStandardMenu = /* @__PURE__ */ defineComponent({
+  name: "IBizExtendStandardMenu",
+  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: {
+    /**
+     * @description 项点击事件
+     */
+    menuItemClick: (_item, _event) => true
+  },
+  setup(props, {
+    emit
+  }) {
+    const ns = useNamespace("extend-standard-menu");
+    const defaultMenuRef = ref();
+    const refreshKey = ref(createUUID());
+    const collapse = ref(false);
+    const menuAlign = computed(() => ["TOP", "BOTTOM"].includes(props.position) ? "horizontal" : "vertical");
+    const menus = ref(getMenus(props.items));
+    const handleMenuSelect = async (_id, _event) => {
+      const menuItem = findMenuItem(_id, props.items);
+      if (!(menuItem == null ? void 0 : menuItem.appFuncId)) {
+        ibiz.log.warn(ibiz.i18n.t("runtime.controller.control.menu.noConfigured"));
+        return;
+      }
+      emit("menuItemClick", menuItem, _event);
+    };
+    return {
+      ns,
+      defaultMenuRef,
+      refreshKey,
+      collapse,
+      menuAlign,
+      menus,
+      handleMenuSelect
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "ref": "defaultMenuRef",
+      "class": [this.ns.b(), this.ns.b(this.layoutMode.toLowerCase()), this.ns.is(this.position.toLowerCase(), true), this.ns.is(this.menuAlign, true), this.ns.is("collapse", this.collapse)]
+    }, [renderMenuContent({
+      isLayout: false,
+      position: this.position,
+      refreshKey: this.refreshKey,
+      ns: this.ns,
+      collapse: this.collapse,
+      menuAlign: this.menuAlign,
+      menus: this.menus,
+      menuLayout: this.layout,
+      menuItemsState: this.menuItemsState,
+      handleMenuSelect: this.handleMenuSelect
+    })]);
+  }
+});
+
+export { ExtendStandardMenu };

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

@@ -0,0 +1,5 @@
+import { App } from 'vue';
+declare const _default: {
+    install(app: App): void;
+};
+export default _default;

package/es/panel-component/app-extend-menu/index.mjs

@@ -0,0 +1,18 @@
+import { CommonExtendMenu } from './extend-menu-base/common-extend-menu/common-extend-menu.mjs';
+import IBizLeftSideMenu from './left-side-menu/index.mjs';
+import IBizRightSideMenu from './right-side-menu/index.mjs';
+import IBizBottomSideMenu from './bottom-side-menu/index.mjs';
+import IBizTopSideMenu from './top-side-menu/index.mjs';
+
+"use strict";
+var IBizAppExtendMenu = {
+  install(app) {
+    app.component(CommonExtendMenu.name, CommonExtendMenu);
+    app.use(IBizLeftSideMenu);
+    app.use(IBizRightSideMenu);
+    app.use(IBizBottomSideMenu);
+    app.use(IBizTopSideMenu);
+  }
+};
+
+export { IBizAppExtendMenu as default };

package/es/panel-component/app-extend-menu/left-side-menu/index.d.ts

@@ -0,0 +1,5 @@
+import { App } from 'vue';
+declare const _default: {
+    install(app: App): void;
+};
+export default _default;

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

@@ -0,0 +1,16 @@
+import { registerPanelItemProvider } from '@ibiz-template/runtime';
+import { LeftSideMenu } from './left-side-menu.mjs';
+import { LeftSideMenuProvider } from './left-side-menu.provider.mjs';
+
+"use strict";
+var IBizLeftSideMenu = {
+  install(app) {
+    app.component(LeftSideMenu.name, LeftSideMenu);
+    registerPanelItemProvider(
+      "RAWITEM_PREDEFINE_LEFT_SIDE_MENU",
+      () => new LeftSideMenuProvider()
+    );
+  }
+};
+
+export { IBizLeftSideMenu as default };

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

@@ -0,0 +1,10 @@
+import { ExtendMenuBaseController } from '../extend-menu-base/extend-menu-base.controller';
+/**
+ * @description 左侧菜单
+ * @export
+ * @class LeftSideMenuController
+ * @extends {ExtendMenuBaseController}
+ */
+export declare class LeftSideMenuController extends ExtendMenuBaseController {
+    protected appMenuName: string;
+}

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

@@ -0,0 +1,17 @@
+import { ExtendMenuBaseController } from '../extend-menu-base/extend-menu-base.controller.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 LeftSideMenuController extends ExtendMenuBaseController {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "appMenuName", "leftsidemenu");
+  }
+}
+
+export { LeftSideMenuController };

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

@@ -0,0 +1 @@
+.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/left-side-menu/left-side-menu.d.ts

@@ -0,0 +1,45 @@
+import { PropType } from 'vue';
+import { IPanelRawItem } from '@ibiz/model-core';
+import { LeftSideMenuController } from './left-side-menu.controller';
+import './left-side-menu.scss';
+/**
+ * 左侧菜单
+ * @primary
+ * @description 首页视图扩展菜单左侧菜单
+ * @panelitemparams {name:rendermode,parameterType:'BUTTON' | 'MENU',defaultvalue:'BUTTON',description:菜单项绘制模式，其中BUTTON表示按照按钮形态绘制、MENU表示按照菜单形态绘制}
+ * @primary
+ */
+export declare const LeftSideMenu: import("vue").DefineComponent<{
+    /**
+     * @description 模型数据
+     */
+    modelData: {
+        type: PropType<IPanelRawItem>;
+        required: true;
+    };
+    /**
+     * @description 左侧菜单控制器
+     */
+    controller: {
+        type: typeof LeftSideMenuController;
+        required: true;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    state: import("../extend-menu-base/extend-menu-base.state").ExtendMenuBase;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * @description 模型数据
+     */
+    modelData: {
+        type: PropType<IPanelRawItem>;
+        required: true;
+    };
+    /**
+     * @description 左侧菜单控制器
+     */
+    controller: {
+        type: typeof LeftSideMenuController;
+        required: true;
+    };
+}>>, {}, {}>;

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

@@ -0,0 +1,56 @@
+import { resolveComponent, createVNode, defineComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { LeftSideMenuController } from './left-side-menu.controller.mjs';
+import './left-side-menu.css';
+
+"use strict";
+const LeftSideMenu = /* @__PURE__ */ defineComponent({
+  name: "IBizLeftSideMenu",
+  props: {
+    /**
+     * @description 模型数据
+     */
+    modelData: {
+      type: Object,
+      required: true
+    },
+    /**
+     * @description 左侧菜单控制器
+     */
+    controller: {
+      type: LeftSideMenuController,
+      required: true
+    }
+  },
+  setup(props) {
+    const ns = useNamespace("left-side-menu");
+    const {
+      state
+    } = props.controller;
+    return {
+      ns,
+      state
+    };
+  },
+  render() {
+    if (!this.controller.appMenu) {
+      return null;
+    }
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [createVNode(resolveComponent("iBizCommonExtendMenu"), {
+      "renderMode": this.controller.rawItemParams.rendermode,
+      "items": this.state.items,
+      "menuItemsState": this.state.menuItemsState,
+      "providers": this.controller.itemProviders,
+      "position": "LEFT",
+      "layoutMode": this.controller.appMenu.layoutMode,
+      "layout": this.controller.appMenu.layout,
+      "onMenuItemClick": (item, event) => {
+        this.controller.handleClickMenuItem(item, event);
+      }
+    }, null)]);
+  }
+});
+
+export { LeftSideMenu };

package/es/panel-component/app-extend-menu/left-side-menu/left-side-menu.provider.d.ts

@@ -0,0 +1,7 @@
+import { IPanelItem } from '@ibiz/model-core';
+import { IPanelItemProvider, PanelController, PanelItemController } from '@ibiz-template/runtime';
+import { LeftSideMenuController } from './left-side-menu.controller';
+export declare class LeftSideMenuProvider implements IPanelItemProvider {
+    component: string;
+    createController(panelItem: IPanelItem, panel: PanelController, parent: PanelItemController | undefined): Promise<LeftSideMenuController>;
+}

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

@@ -0,0 +1,21 @@
+import { LeftSideMenuController } from './left-side-menu.controller.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 LeftSideMenuProvider {
+  constructor() {
+    __publicField(this, "component", "IBizLeftSideMenu");
+  }
+  async createController(panelItem, panel, parent) {
+    const c = new LeftSideMenuController(panelItem, panel, parent);
+    await c.init();
+    return c;
+  }
+}
+
+export { LeftSideMenuProvider };

package/es/panel-component/app-extend-menu/right-side-menu/index.d.ts

@@ -0,0 +1,5 @@
+import { App } from 'vue';
+declare const _default: {
+    install(app: App): void;
+};
+export default _default;

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

@@ -0,0 +1,16 @@
+import { registerPanelItemProvider } from '@ibiz-template/runtime';
+import { RightSideMenu } from './right-side-menu.mjs';
+import { RightSideMenuProvider } from './right-side-menu.provider.mjs';
+
+"use strict";
+var IBizRightSideMenu = {
+  install(app) {
+    app.component(RightSideMenu.name, RightSideMenu);
+    registerPanelItemProvider(
+      "RAWITEM_PREDEFINE_RIGHT_SIDE_MENU",
+      () => new RightSideMenuProvider()
+    );
+  }
+};
+
+export { IBizRightSideMenu as default };

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

@@ -0,0 +1,10 @@
+import { ExtendMenuBaseController } from '../extend-menu-base/extend-menu-base.controller';
+/**
+ * @description 右侧菜单
+ * @export
+ * @class RightSideMenuController
+ * @extends {ExtendMenuBaseController}
+ */
+export declare class RightSideMenuController extends ExtendMenuBaseController {
+    protected appMenuName: string;
+}

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

@@ -0,0 +1,17 @@
+import { ExtendMenuBaseController } from '../extend-menu-base/extend-menu-base.controller.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 RightSideMenuController extends ExtendMenuBaseController {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "appMenuName", "rightsidemenu");
+  }
+}
+
+export { RightSideMenuController };

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

@@ -0,0 +1 @@
+.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/right-side-menu/right-side-menu.d.ts

@@ -0,0 +1,45 @@
+import { PropType } from 'vue';
+import { IPanelRawItem } from '@ibiz/model-core';
+import { RightSideMenuController } from './right-side-menu.controller';
+import './right-side-menu.scss';
+/**
+ * 右侧菜单
+ * @primary
+ * @description 首页视图扩展菜单右侧菜单
+ * @panelitemparams {name:rendermode,parameterType:'BUTTON' | 'MENU',defaultvalue:'BUTTON',description:菜单项绘制模式，其中BUTTON表示按照按钮形态绘制、MENU表示按照菜单形态绘制}
+ * @primary
+ */
+export declare const RightSideMenu: import("vue").DefineComponent<{
+    /**
+     * @description 模型数据
+     */
+    modelData: {
+        type: PropType<IPanelRawItem>;
+        required: true;
+    };
+    /**
+     * @description 右侧侧菜单控制器
+     */
+    controller: {
+        type: typeof RightSideMenuController;
+        required: true;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    state: import("../extend-menu-base/extend-menu-base.state").ExtendMenuBase;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * @description 模型数据
+     */
+    modelData: {
+        type: PropType<IPanelRawItem>;
+        required: true;
+    };
+    /**
+     * @description 右侧侧菜单控制器
+     */
+    controller: {
+        type: typeof RightSideMenuController;
+        required: true;
+    };
+}>>, {}, {}>;

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

@@ -0,0 +1,56 @@
+import { resolveComponent, createVNode, defineComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { RightSideMenuController } from './right-side-menu.controller.mjs';
+import './right-side-menu.css';
+
+"use strict";
+const RightSideMenu = /* @__PURE__ */ defineComponent({
+  name: "IBizRightSideMenu",
+  props: {
+    /**
+     * @description 模型数据
+     */
+    modelData: {
+      type: Object,
+      required: true
+    },
+    /**
+     * @description 右侧侧菜单控制器
+     */
+    controller: {
+      type: RightSideMenuController,
+      required: true
+    }
+  },
+  setup(props) {
+    const ns = useNamespace("right-side-menu");
+    const {
+      state
+    } = props.controller;
+    return {
+      ns,
+      state
+    };
+  },
+  render() {
+    if (!this.controller.appMenu) {
+      return null;
+    }
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [createVNode(resolveComponent("iBizCommonExtendMenu"), {
+      "renderMode": this.controller.rawItemParams.rendermode,
+      "items": this.state.items,
+      "menuItemsState": this.state.menuItemsState,
+      "providers": this.controller.itemProviders,
+      "position": "RIGHT",
+      "layoutMode": this.controller.appMenu.layoutMode,
+      "layout": this.controller.appMenu.layout,
+      "onMenuItemClick": (item, event) => {
+        this.controller.handleClickMenuItem(item, event);
+      }
+    }, null)]);
+  }
+});
+
+export { RightSideMenu };

package/es/panel-component/app-extend-menu/right-side-menu/right-side-menu.provider.d.ts

@@ -0,0 +1,7 @@
+import { IPanelItem } from '@ibiz/model-core';
+import { IPanelItemProvider, PanelController, PanelItemController } from '@ibiz-template/runtime';
+import { RightSideMenuController } from './right-side-menu.controller';
+export declare class RightSideMenuProvider implements IPanelItemProvider {
+    component: string;
+    createController(panelItem: IPanelItem, panel: PanelController, parent: PanelItemController | undefined): Promise<RightSideMenuController>;
+}