@ibiz-template/vue3-components 0.7.37-alpha.5 → 0.7.38-alpha.21

package/es/panel-component/nav-breadcrumb/nav-breadcrumb.controller.mjs

@@ -0,0 +1,307 @@
+import { PanelItemController } from '@ibiz-template/runtime';
+import { reject, isNil } from 'ramda';
+import { route2routePath, routePath2string } from '@ibiz-template/vue3-util';
+import { notNilEmpty } from 'qx-util';
+import { NavBreadcrumbState } from './nav-breadcrumb.state.mjs';
+import { NavBreadcrumbService } from './nav-breadcrumb.service.mjs';
+import { getCurViewName, getIndexBreadcrumb, getViewInfoByViewStack, getAppFuncByViewName, getMenuItemsByAppFunc } from './nav-breadcrumb.util.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 NavBreadcrumbController extends PanelItemController {
+  constructor() {
+    super(...arguments);
+    /**
+     * @description 面包屑分割符
+     * @type {string}
+     * @memberof NavBreadcrumbController
+     */
+    __publicField(this, "separator", "/");
+    /**
+     * @description 导航模式（路由、菜单、缓存）
+     * @type {('router' | 'menu' | 'store')}
+     * @memberof NavBreadcrumbController
+     */
+    __publicField(this, "navMode", "router");
+    /**
+     * @description 是否显示应用标题
+     * @type {boolean}
+     * @memberof NavBreadcrumbController
+     */
+    __publicField(this, "showHome", true);
+    /**
+     * @description 面包屑服务
+     * @type {NavBreadcrumbService}
+     * @memberof NavBreadcrumbController
+     */
+    __publicField(this, "service");
+    /**
+     * @description 自定义补充参数
+     * @type {IData}
+     * @memberof NavBreadcrumbController
+     */
+    __publicField(this, "rawItemParams", {});
+  }
+  createState() {
+    var _a;
+    return new NavBreadcrumbState((_a = this.parent) == null ? void 0 : _a.state);
+  }
+  /**
+   * @description 应用菜单控制器
+   * @readonly
+   * @type {(IAppMenuController | undefined)}
+   * @memberof NavBreadcrumbController
+   */
+  get appmenu() {
+    return this.panel.view.getController("appmenu");
+  }
+  /**
+   * @description 首页导航栏
+   * @readonly
+   * @type {(NavPosIndexController | undefined)}
+   * @memberof NavBreadcrumbController
+   */
+  get navPos() {
+    return this.panel.panelItems.nav_pos_index;
+  }
+  async onInit() {
+    await super.onInit();
+    this.handleRawItemParams();
+    this.navMode = this.rawItemParams.navmode || "router";
+    this.separator = this.rawItemParams.separator || "/";
+    this.showHome = this.rawItemParams.showhome === "true";
+    this.service = new NavBreadcrumbService(this.navMode, this.panel.context);
+  }
+  /**
+   * @description 初始化
+   * @param {Router} router
+   * @memberof NavBreadcrumbController
+   */
+  onCreated(router) {
+    if (this.navMode === "menu") {
+      this.setBreadcrumbByMenu(router);
+    }
+    if (this.navMode === "store") {
+      this.setBreadcrumbByStore(router);
+    }
+  }
+  /**
+   * @description 路由改变
+   * @param {Router} router
+   * @memberof NavBreadcrumbController
+   */
+  onRouteChange(router) {
+    if (this.navMode === "router") {
+      this.setBreadcrumbByRouter(router);
+      return;
+    }
+    if (this.navMode === "store") {
+      const { currentRoute } = router;
+      const fullPath = currentRoute.value.fullPath;
+      const viewName = getCurViewName(router);
+      const chacheItem = this.service.getItem({ fullPath, viewName });
+      if (chacheItem) {
+        if (chacheItem.viewName === ibiz.hub.defaultAppIndexViewName) {
+          this.service.setChache([
+            { ...getIndexBreadcrumb(this.panel.context), fullPath }
+          ]);
+          this.resetBreadcrumbs();
+          return;
+        }
+        this.service.removeAfter(fullPath);
+        this.resetBreadcrumbs();
+      }
+    }
+  }
+  /**
+   * @description 重置面包屑数据
+   * @memberof NavBreadcrumbController
+   */
+  resetBreadcrumbs() {
+    this.state.breadcrumbItems = this.service.getChache();
+  }
+  /**
+   * 更新视图信息
+   * @author lxm
+   * @date 2023-05-09 01:40:34
+   * @param {string} key
+   * @param {{ caption?: string; dataInfo?: string }} info
+   */
+  updateViewInfo(fullPath, info) {
+    if (this.navMode === "menu") {
+      return;
+    }
+    this.service.updateOrAdd({ fullPath, ...info });
+    this.resetBreadcrumbs();
+  }
+  /**
+   * @description 删除缓存数据
+   * @param {string} fullPath
+   * @memberof NavBreadcrumbController
+   */
+  removeCache(fullPath) {
+    this.service.remove(fullPath);
+  }
+  /**
+   * @description 根据路由计算面包屑数据
+   * @param {Router} router
+   * @memberof NavBreadcrumbController
+   */
+  setBreadcrumbByRouter(router) {
+    const { currentRoute } = router;
+    const routePath = route2routePath(currentRoute.value);
+    const items = routePath.pathNodes.map(
+      (node, index) => {
+        const { appContext, pathNodes } = routePath;
+        const fullPath = routePath2string({
+          appContext,
+          pathNodes: pathNodes.slice(0, index + 1)
+        });
+        const result = {
+          viewName: node.viewName,
+          fullPath
+        };
+        const chacheItem = this.service.getItem({ viewName: node.viewName });
+        if (chacheItem) {
+          if (!chacheItem.fullPath) {
+            chacheItem.fullPath = fullPath;
+          }
+          Object.assign(result, chacheItem);
+        }
+        const viewInfo = getViewInfoByViewStack(node.viewName);
+        if (viewInfo) {
+          Object.assign(result, reject(isNil, viewInfo));
+        }
+        return result;
+      }
+    );
+    this.service.setChache(items);
+    this.resetBreadcrumbs();
+  }
+  /**
+   * @description 根据路由设置菜单面包屑导航数据
+   * @param {Router} router
+   * @memberof NavBreadcrumbController
+   */
+  setBreadcrumbByMenu(router) {
+    const { currentRoute } = router;
+    const routePath = route2routePath(currentRoute.value);
+    let appFunc;
+    routePath.pathNodes.some((item, index) => {
+      if (index === 0) {
+        return false;
+      }
+      const { viewName } = item;
+      const func = getAppFuncByViewName(viewName, this.panel.context.srfappid);
+      if (func) {
+        appFunc = func;
+      }
+      return appFunc;
+    });
+    if (this.appmenu) {
+      if (appFunc) {
+        const menuItems = getMenuItemsByAppFunc(
+          appFunc,
+          this.appmenu.model.appMenuItems || []
+        );
+        const items = menuItems.map((item) => {
+          return {
+            caption: item.caption,
+            fullPath: "",
+            viewName: item.id
+          };
+        });
+        items.unshift(getIndexBreadcrumb(this.panel.context));
+        this.service.setChache(items);
+        this.resetBreadcrumbs();
+      } else {
+        this.service.setChache([getIndexBreadcrumb(this.panel.context)]);
+        this.resetBreadcrumbs();
+      }
+      this.appmenu.evt.on("onClick", (data) => {
+        const { event } = data;
+        const items = event.map((key) => {
+          const item = this.appmenu.allAppMenuItems.find((x) => x.id === key);
+          if (item) {
+            return {
+              caption: item.caption,
+              fullPath: "",
+              viewName: item.id
+            };
+          }
+        });
+        items.unshift(getIndexBreadcrumb(this.panel.context));
+        this.service.setChache(items);
+        this.resetBreadcrumbs();
+      });
+    }
+  }
+  /**
+   * @description 设置缓存模式面包屑数据
+   * @param {Router} router
+   * @memberof NavBreadcrumbController
+   */
+  setBreadcrumbByStore(router) {
+    const chache = this.service.getChache();
+    if (chache.length === 0) {
+      this.setBreadcrumbByRouter(router);
+    } else {
+      this.resetBreadcrumbs();
+    }
+    if (this.appmenu) {
+      this.appmenu.evt.on("onClick", async (data) => {
+        var _a;
+        const { eventArg } = data;
+        const menuItem = this.appmenu.allAppMenuItems.find(
+          (x) => x.id === eventArg
+        );
+        if (menuItem) {
+          const app = ibiz.hub.getApp(this.panel.context.srfappid);
+          const appFunc = app.getAppFunc(menuItem.appFuncId);
+          const viewName = ((_a = appFunc.appViewId) == null ? void 0 : _a.split(".").pop()) || "";
+          const viewConfig = await ibiz.hub.config.view.get(viewName);
+          if (appFunc.openMode !== "INDEXVIEWTAB" || viewConfig && viewConfig.openMode && viewConfig.openMode !== "INDEXVIEWTAB") {
+            return;
+          }
+          const chacheItem = this.service.getItem({ viewName });
+          const items = [];
+          if (chacheItem) {
+            items.push(chacheItem);
+          } else {
+            items.push({
+              viewName,
+              fullPath: ""
+            });
+          }
+          items.unshift(getIndexBreadcrumb(this.panel.context));
+          this.service.setChache(items);
+          this.resetBreadcrumbs();
+        }
+      });
+    }
+  }
+  /**
+   * @description 处理自定义补充参数
+   * @protected
+   * @memberof NavBreadcrumbController
+   */
+  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 { NavBreadcrumbController };

package/es/panel-component/nav-breadcrumb/nav-breadcrumb.css

@@ -0,0 +1 @@
+.ibiz-nav-breadcrumb{--ibiz-nav-breadcrumb-padding:var(--ibiz-spacing-base-loose);--ibiz-nav-breadcrumb-link-color:var(--ibiz-color-link);--ibiz-nav-breadcrumb-disabled-color:var(--ibiz-color-text-0);padding:var(--ibiz-nav-breadcrumb-padding);--el-text-color-primary:var(--ibiz-nav-breadcrumb-link-color)}.ibiz-nav-breadcrumb--menu{color:var(--ibiz-nav-breadcrumb-disabled-color);--el-text-color-primary:var(--ibiz-nav-breadcrumb-disabled-color)}.ibiz-nav-breadcrumb--menu .el-breadcrumb__item{cursor:text}.ibiz-nav-breadcrumb--menu .el-breadcrumb__item:last-child .el-breadcrumb__inner{color:var(--ibiz-color-primary)}.ibiz-nav-breadcrumb--menu .el-breadcrumb__inner.is-link{font-weight:400;pointer-events:none}

package/es/panel-component/nav-breadcrumb/nav-breadcrumb.d.ts

@@ -0,0 +1,31 @@
+import { PropType } from 'vue';
+import { IPanelRawItem } from '@ibiz/model-core';
+import { NavBreadcrumbController } from './nav-breadcrumb.controller';
+import './nav-breadcrumb.scss';
+export interface dropdownAction {
+    text: string;
+    value?: string;
+}
+export declare const NavBreadcrumb: import("vue").DefineComponent<{
+    modelData: {
+        type: PropType<IPanelRawItem>;
+        required: true;
+    };
+    controller: {
+        type: typeof NavBreadcrumbController;
+        required: true;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    c: NavBreadcrumbController;
+    items: import("vue").ComputedRef<import("./nav-breadcrumb.state").BreadcrumbMsg[]>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelData: {
+        type: PropType<IPanelRawItem>;
+        required: true;
+    };
+    controller: {
+        type: typeof NavBreadcrumbController;
+        required: true;
+    };
+}>>, {}, {}>;

package/es/panel-component/nav-breadcrumb/nav-breadcrumb.mjs

@@ -0,0 +1,72 @@
+import { isVNode, defineComponent, watch, computed, createVNode, resolveComponent } from 'vue';
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { useRoute, useRouter } from 'vue-router';
+import { NavBreadcrumbController } from './nav-breadcrumb.controller.mjs';
+import './nav-breadcrumb.css';
+
+"use strict";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const NavBreadcrumb = /* @__PURE__ */ defineComponent({
+  name: "IBizNavBreadcrumb",
+  props: {
+    modelData: {
+      type: Object,
+      required: true
+    },
+    controller: {
+      type: NavBreadcrumbController,
+      required: true
+    }
+  },
+  setup(props) {
+    const ns = useNamespace("nav-breadcrumb");
+    const c = props.controller;
+    const route = useRoute();
+    const router = useRouter();
+    c.onCreated(router);
+    watch(() => route.fullPath, () => {
+      c.onRouteChange(router);
+    }, {
+      immediate: true
+    });
+    const items = computed(() => {
+      const {
+        breadcrumbItems
+      } = c.state;
+      let result = breadcrumbItems.filter((x) => x.caption);
+      if (!c.showHome) {
+        result = result.filter((x) => x.viewName !== ibiz.hub.defaultAppIndexViewName);
+      }
+      return result;
+    });
+    return {
+      ns,
+      c,
+      items
+    };
+  },
+  render() {
+    let _slot;
+    return createVNode("div", {
+      "class": [this.ns.b(), ...this.controller.containerClass, this.ns.m(this.c.navMode)]
+    }, [createVNode(resolveComponent("el-breadcrumb"), {
+      "separator": this.c.separator
+    }, _isSlot(_slot = this.items.map((item) => {
+      let label = item.caption;
+      if (item.dataInfo) {
+        label += " - ".concat(item.dataInfo);
+      }
+      return createVNode(resolveComponent("el-breadcrumb-item"), {
+        "to": item.fullPath
+      }, _isSlot(label) ? label : {
+        default: () => [label]
+      });
+    })) ? _slot : {
+      default: () => [_slot]
+    })]);
+  }
+});
+
+export { NavBreadcrumb };

package/es/panel-component/nav-breadcrumb/nav-breadcrumb.provider.d.ts

@@ -0,0 +1,13 @@
+import { IPanelItemProvider, PanelController, PanelItemController } from '@ibiz-template/runtime';
+import { IPanelItem } from '@ibiz/model-core';
+import { NavBreadcrumbController } from './nav-breadcrumb.controller';
+/**
+ * @description 面包屑导航栏
+ * @export
+ * @class NavBreadcrumbProvider
+ * @implements {IPanelItemProvider}
+ */
+export declare class NavBreadcrumbProvider implements IPanelItemProvider {
+    component: string;
+    createController(panelItem: IPanelItem, panel: PanelController, parent: PanelItemController | undefined): Promise<NavBreadcrumbController>;
+}

package/es/panel-component/nav-breadcrumb/nav-breadcrumb.provider.mjs

@@ -0,0 +1,21 @@
+import { NavBreadcrumbController } from './nav-breadcrumb.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 NavBreadcrumbProvider {
+  constructor() {
+    __publicField(this, "component", "IBizNavBreadcrumb");
+  }
+  async createController(panelItem, panel, parent) {
+    const c = new NavBreadcrumbController(panelItem, panel, parent);
+    await c.init();
+    return c;
+  }
+}
+
+export { NavBreadcrumbProvider };

package/es/panel-component/nav-breadcrumb/nav-breadcrumb.service.d.ts

@@ -0,0 +1,63 @@
+import { BreadcrumbMsg } from './nav-breadcrumb.state';
+/**
+ * @description 面包屑服务
+ * @export
+ * @class NavBreadcrumbService
+ */
+export declare class NavBreadcrumbService {
+    readonly navMode: 'router' | 'menu' | 'store';
+    private context;
+    /**
+     * @description 面包屑堆栈
+     * @private
+     * @type {BreadcrumbMsg[]}
+     * @memberof NavBreadcrumbService
+     */
+    private chache;
+    constructor(navMode: 'router' | 'menu' | 'store', context: IContext);
+    /**
+     * @description 添加缓存项
+     * @param {BreadcrumbMsg} item
+     * @memberof NavBreadcrumbService
+     */
+    add(item: BreadcrumbMsg): void;
+    /**
+     * @description 删除缓存项
+     * @param {string} fullPath
+     * @return {*}  {BreadcrumbMsg[]}
+     * @memberof NavBreadcrumbService
+     */
+    remove(fullPath: string): BreadcrumbMsg[];
+    /**
+     * @description 删除当前项之后缓存数据
+     * @param {string} fullPath
+     * @return {*}  {BreadcrumbMsg[]}
+     * @memberof NavBreadcrumbService
+     */
+    removeAfter(fullPath: string): BreadcrumbMsg[];
+    /**
+     * @description 更新缓存数据
+     * @param {BreadcrumbMsg} item
+     * @memberof NavBreadcrumbService
+     */
+    updateOrAdd(item: BreadcrumbMsg): void;
+    /**
+     * @description 获取缓存数据项
+     * @param {IData} data
+     * @return {*}  {(BreadcrumbMsg | undefined)}
+     * @memberof NavBreadcrumbService
+     */
+    getItem(data: IData): BreadcrumbMsg | undefined;
+    /**
+     * @description 获取缓存数据
+     * @return {*}  {BreadcrumbMsg[]}
+     * @memberof NavBreadcrumbService
+     */
+    getChache(): BreadcrumbMsg[];
+    /**
+     * @description 设置缓存数据
+     * @param {BreadcrumbMsg[]} items
+     * @memberof NavBreadcrumbService
+     */
+    setChache(items: BreadcrumbMsg[]): void;
+}

package/es/panel-component/nav-breadcrumb/nav-breadcrumb.service.mjs

@@ -0,0 +1,143 @@
+import { clone, reject, isNil } from 'ramda';
+import { getIndexBreadcrumb } from './nav-breadcrumb.util.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 NavBreadcrumbService {
+  constructor(navMode, context) {
+    this.navMode = navMode;
+    this.context = context;
+    /**
+     * @description 面包屑堆栈
+     * @private
+     * @type {BreadcrumbMsg[]}
+     * @memberof NavBreadcrumbService
+     */
+    __publicField(this, "chache", []);
+  }
+  /**
+   * @description 添加缓存项
+   * @param {BreadcrumbMsg} item
+   * @memberof NavBreadcrumbService
+   */
+  add(item) {
+    this.chache.push(item);
+    this.chache = this.chache.filter((x) => !x.isEmbed && !x.isModal);
+    if (this.navMode === "store") {
+      localStorage.setItem("breadcrumb", JSON.stringify(this.chache));
+    }
+  }
+  /**
+   * @description 删除缓存项
+   * @param {string} fullPath
+   * @return {*}  {BreadcrumbMsg[]}
+   * @memberof NavBreadcrumbService
+   */
+  remove(fullPath) {
+    const index = this.chache.findIndex((x) => x.fullPath === fullPath);
+    if (index !== -1) {
+      this.chache.splice(index, 1);
+    }
+    return clone(this.chache);
+  }
+  /**
+   * @description 删除当前项之后缓存数据
+   * @param {string} fullPath
+   * @return {*}  {BreadcrumbMsg[]}
+   * @memberof NavBreadcrumbService
+   */
+  removeAfter(fullPath) {
+    if (this.chache.length === 0) {
+      return [];
+    }
+    const index = this.chache.findIndex((x) => x.fullPath === fullPath);
+    if (index !== -1) {
+      const result = this.chache.splice(index + 1, this.chache.length);
+      if (this.navMode === "store") {
+        localStorage.setItem("breadcrumb", JSON.stringify(this.chache));
+      }
+      return result;
+    }
+    return [];
+  }
+  /**
+   * @description 更新缓存数据
+   * @param {BreadcrumbMsg} item
+   * @memberof NavBreadcrumbService
+   */
+  updateOrAdd(item) {
+    if (!this.chache.length && this.navMode === "store") {
+      const result = localStorage.getItem("breadcrumb");
+      if (result) {
+        this.chache = JSON.parse(result);
+      }
+    }
+    const index = this.chache.findIndex(
+      (x) => x.fullPath && x.fullPath === item.fullPath || x.viewName.toLowerCase() === item.viewName.toLowerCase()
+    );
+    if (index === -1) {
+      this.add(item);
+    } else {
+      Object.assign(this.chache[index], reject(isNil, item));
+      this.chache = this.chache.filter((x) => !x.isEmbed && !x.isModal);
+      if (this.navMode === "store") {
+        localStorage.setItem("breadcrumb", JSON.stringify(this.chache));
+      }
+    }
+  }
+  /**
+   * @description 获取缓存数据项
+   * @param {IData} data
+   * @return {*}  {(BreadcrumbMsg | undefined)}
+   * @memberof NavBreadcrumbService
+   */
+  getItem(data) {
+    const { viewName = "", fullPath = "" } = data;
+    if (viewName === "index") {
+      return getIndexBreadcrumb(this.context);
+    }
+    const item = this.chache.find(
+      (x) => fullPath && x.fullPath === fullPath || viewName && x.viewName.toLowerCase() === viewName.toLowerCase()
+    );
+    if (item) {
+      return clone(item);
+    }
+  }
+  /**
+   * @description 获取缓存数据
+   * @return {*}  {BreadcrumbMsg[]}
+   * @memberof NavBreadcrumbService
+   */
+  getChache() {
+    if (this.navMode === "store") {
+      const result = localStorage.getItem("breadcrumb");
+      if (result) {
+        return JSON.parse(result);
+      }
+      return [];
+    }
+    if (this.navMode === "router") {
+      return clone(this.chache.filter((x) => !x.isEmbed));
+    }
+    return clone(this.chache);
+  }
+  /**
+   * @description 设置缓存数据
+   * @param {BreadcrumbMsg[]} items
+   * @memberof NavBreadcrumbService
+   */
+  setChache(items) {
+    this.chache = clone(items);
+    this.chache = this.chache.filter((x) => !x.isEmbed && !x.isModal);
+    if (this.navMode === "store") {
+      localStorage.setItem("breadcrumb", JSON.stringify(this.chache));
+    }
+  }
+}
+
+export { NavBreadcrumbService };

package/es/panel-component/nav-breadcrumb/nav-breadcrumb.state.d.ts

@@ -0,0 +1,26 @@
+import { PanelItemState } from '@ibiz-template/runtime';
+export interface BreadcrumbMsg {
+    viewName: string;
+    fullPath: string;
+    caption?: string;
+    dataInfo?: string;
+    isEmbed?: boolean;
+    isModal?: boolean;
+}
+/**
+ * 导航标签页占位状态
+ *
+ * @author lxm
+ * @date 2023-02-07 06:04:27
+ * @export
+ * @class NavBreadcrumbState
+ * @extends {PanelItemState}
+ */
+export declare class NavBreadcrumbState extends PanelItemState {
+    /**
+     * @description 面包屑导航项
+     * @type {BreadcrumbMsg[]}
+     * @memberof NavBreadcrumbState
+     */
+    breadcrumbItems: BreadcrumbMsg[];
+}