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

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

@@ -0,0 +1,22 @@
+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 NavBreadcrumbState extends PanelItemState {
+  constructor() {
+    super(...arguments);
+    /**
+     * @description 面包屑导航项
+     * @type {BreadcrumbMsg[]}
+     * @memberof NavBreadcrumbState
+     */
+    __publicField(this, "breadcrumbItems", []);
+  }
+}
+
+export { NavBreadcrumbState };

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

@@ -0,0 +1,39 @@
+import { IAppFunc, IAppMenuItem } from '@ibiz/model-core';
+import { Router } from 'vue-router';
+import { BreadcrumbMsg } from './nav-breadcrumb.state';
+/**
+ * @description 获取首页导航信息
+ * @export
+ * @return {*}  {BreadcrumbMsg}
+ */
+export declare function getIndexBreadcrumb(context: IContext): BreadcrumbMsg;
+/**
+ * @description 根据视图名获取应用功能
+ * @export
+ * @param {string} name
+ * @param {string} appid
+ * @return {*}  {(IAppFunc | undefined)}
+ */
+export declare function getAppFuncByViewName(name: string, appid: string): IAppFunc | undefined;
+/**
+ * @description 根据应该功能获取菜单模型
+ * @export
+ * @param {IAppFunc} func
+ * @param {IAppMenuItem[]} appMenuItems
+ * @return {*}  {IAppMenuItem[]}
+ */
+export declare function getMenuItemsByAppFunc(func: IAppFunc, appMenuItems: IAppMenuItem[]): IAppMenuItem[];
+/**
+ * @description 获取当前视图名称
+ * @export
+ * @param {Router} router
+ * @return {*}  {string}
+ */
+export declare function getCurViewName(router: Router): string;
+/**
+ * @description 从视图堆栈中查找视图信息
+ * @export
+ * @param {string} viewName
+ * @return {*}  {(IData | undefined)}
+ */
+export declare function getViewInfoByViewStack(viewName: string): IData | undefined;

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

@@ -0,0 +1,73 @@
+import { route2routePath } from '@ibiz-template/vue3-util';
+import { RouteConst } from '@ibiz-template/runtime';
+
+"use strict";
+function getIndexBreadcrumb(context) {
+  const app = ibiz.hub.getApp(context.srfappid);
+  const caption = app.model.caption;
+  return {
+    viewName: ibiz.hub.defaultAppIndexViewName,
+    fullPath: "/",
+    caption
+  };
+}
+function getAppFuncByViewName(name, appid) {
+  const app = ibiz.hub.getApp(appid);
+  const appFuncs = app.model.appFuncs || [];
+  const item = appFuncs.find((func) => {
+    const { appViewId = "" } = func;
+    const viewName = appViewId.split(".").pop();
+    return (viewName == null ? void 0 : viewName.toLowerCase()) === name.toLowerCase();
+  });
+  return item;
+}
+function getMenuItemsByAppFunc(func, appMenuItems) {
+  const result = [];
+  const findMenuItem = (menuItems) => {
+    return menuItems.find((item) => {
+      if (item.appFuncId && item.appFuncId === func.id) {
+        result.unshift(item);
+        return true;
+      }
+      if (item.appMenuItems && item.appMenuItems.length > 0) {
+        const menuItem = findMenuItem(item.appMenuItems);
+        if (menuItem) {
+          result.unshift(item);
+          return true;
+        }
+      }
+      return false;
+    });
+  };
+  findMenuItem(appMenuItems);
+  return result;
+}
+function getCurViewName(router) {
+  var _a;
+  const { currentRoute } = router;
+  const routePath = route2routePath(currentRoute.value);
+  return ((_a = routePath.pathNodes.pop()) == null ? void 0 : _a.viewName) || "";
+}
+function getViewInfoByViewStack(viewName) {
+  if (viewName === RouteConst.ROUTE_MODAL_TAG) {
+    return {
+      viewName,
+      fullPath: "",
+      isModal: true
+    };
+  }
+  const view = ibiz.util.viewStack.getViewByCodeName(viewName);
+  if (view) {
+    let isEmbed = false;
+    if (view.parentView && view.parentView.model.codeName !== ibiz.hub.defaultAppIndexViewName) {
+      isEmbed = true;
+    }
+    return {
+      viewName: view.model.codeName,
+      caption: view.model.caption,
+      isEmbed
+    };
+  }
+}
+
+export { getAppFuncByViewName, getCurViewName, getIndexBreadcrumb, getMenuItemsByAppFunc, getViewInfoByViewStack };

package/es/panel-component/nav-pos-index/nav-pos-index.controller.d.ts

@@ -3,6 +3,7 @@ import { IPanelRawItem } from '@ibiz/model-core';
 import { Router } from 'vue-router';
 import { NavTabsController } from '../nav-tabs/nav-tabs.controller';
 import { NavPosIndexState } from './nav-pos-index.state';
+import { NavBreadcrumbController } from '../nav-breadcrumb';
 /**
  * 导航占位控制器
  *
@@ -60,6 +61,13 @@ export declare class NavPosIndexController extends PanelItemController<IPanelRaw
      * @type {(NavTabsController | undefined)}
      */
     get navTabs(): NavTabsController | undefined;
+    /**
+     * @description 面包屑控制器
+     * @readonly
+     * @type {(NavBreadcrumbController | undefined)}
+     * @memberof NavPosIndexController
+     */
+    get navBreadcrumb(): NavBreadcrumbController | undefined;
     /**
      * 应用菜单控制器
      * @author lxm
@@ -77,6 +85,12 @@ export declare class NavPosIndexController extends PanelItemController<IPanelRaw
      * @memberof NavPosController
      */
     rawItemParams: IData;
+    /**
+     * @description 当前导航key
+     * @type {string}
+     * @memberof NavPosIndexController
+     */
+    currentKey: string;
     protected onInit(): Promise<void>;
     /**
      * 改变显示视图

package/es/panel-component/nav-pos-index/nav-pos-index.controller.mjs

@@ -1,4 +1,4 @@
-import { PanelItemController, ViewMode, Modal } from '@ibiz-template/runtime';
+import { PanelItemController, Modal, ViewMode } from '@ibiz-template/runtime';
 import { routerCallback } from '@ibiz-template/vue3-util';
 import { notNilEmpty } from 'qx-util';
 import { NavPosIndexState } from './nav-pos-index.state.mjs';
@@ -51,6 +51,12 @@ class NavPosIndexController extends PanelItemController {
      * @memberof NavPosController
      */
     __publicField(this, "rawItemParams", {});
+    /**
+     * @description 当前导航key
+     * @type {string}
+     * @memberof NavPosIndexController
+     */
+    __publicField(this, "currentKey", "");
   }
   createState() {
     var _a;
@@ -78,6 +84,15 @@ class NavPosIndexController extends PanelItemController {
   get navTabs() {
     return this.panel.panelItems.nav_tabs;
   }
+  /**
+   * @description 面包屑控制器
+   * @readonly
+   * @type {(NavBreadcrumbController | undefined)}
+   * @memberof NavPosIndexController
+   */
+  get navBreadcrumb() {
+    return this.panel.panelItems.nav_breadcrumb;
+  }
   /**
    * 应用菜单控制器
    * @author lxm
@@ -136,6 +151,7 @@ class NavPosIndexController extends PanelItemController {
     if (currentKey === "") {
       return;
     }
+    this.currentKey = currentKey;
     const index = this.state.operateSort.indexOf(currentKey);
     if (index !== -1) {
       this.state.operateSort.splice(index, 1);
@@ -172,14 +188,38 @@ class NavPosIndexController extends PanelItemController {
    * @param {EventBase} event
    */
   onViewCreated(event) {
+    const { view } = event;
+    const key = this.state.currentKey;
     if (this.navTabs) {
-      const { view } = event;
-      const key = this.state.currentKey;
       this.navTabs.updateViewInfo(key, { caption: view.model.caption });
       view.evt.on("onViewInfoChange", ({ caption, dataInfo }) => {
         this.navTabs.updateViewInfo(key, { caption, dataInfo });
       });
     }
+    if (this.navBreadcrumb) {
+      this.navBreadcrumb.updateViewInfo(key, {
+        viewName: view.model.codeName,
+        caption: view.model.caption
+      });
+      view.evt.on("onViewInfoChange", ({ caption, dataInfo }) => {
+        this.navBreadcrumb.updateViewInfo(key, {
+          viewName: view.model.codeName,
+          caption,
+          dataInfo
+        });
+      });
+      view.evt.on("onActivated", () => {
+        const data = view.state.srfactiveviewdata;
+        const info = {
+          viewName: view.model.codeName,
+          caption: view.model.caption
+        };
+        if (data && data.srfkey) {
+          Object.assign(info, { dataInfo: data.srfmajortext || "" });
+        }
+        this.navBreadcrumb.updateViewInfo(key, info);
+      });
+    }
   }
   /**
    * 删除单个缓存
@@ -205,7 +245,7 @@ class NavPosIndexController extends PanelItemController {
    * @date 2023-05-09 02:19:55
    */
   clearCache() {
-    this.state.cacheKeys = [];
+    this.state.cacheKeys = [this.currentKey];
     this.viewModals = {};
   }
   /**
@@ -240,6 +280,9 @@ class NavPosIndexController extends PanelItemController {
     if (this.navTabs) {
       this.navTabs.removeCache(key);
     }
+    if (this.navBreadcrumb) {
+      this.navBreadcrumb.removeCache(key);
+    }
     this.removeCache(key);
     if (this.autoGoLast) {
       this.goLast();

package/es/panel-component/nav-pos-index/nav-pos-index.mjs

@@ -1,4 +1,4 @@
-import { resolveComponent, createVNode, defineComponent } from 'vue';
+import { defineComponent, createVNode, resolveComponent } from 'vue';
 import { useNamespace, onRouteChange } from '@ibiz-template/vue3-util';
 import { useRouter, useRoute } from 'vue-router';
 import { NavPosIndexController } from './nav-pos-index.controller.mjs';

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

@@ -1,5 +1,5 @@
 import { PanelItemController } from '@ibiz-template/runtime';
-import { isNil, reject } from 'ramda';
+import { reject, isNil } from 'ramda';
 import { nextTick } from 'vue';
 import { NavTabsState } from './nav-tabs.state.mjs';
 

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

@@ -1,4 +1,4 @@
-import { isVNode, watch, resolveComponent, createVNode, defineComponent } from 'vue';
+import { isVNode, defineComponent, watch, createVNode, resolveComponent } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import './nav-tabs.css';
 import { NavTabsController } from './nav-tabs.controller.mjs';

package/es/panel-component/panel-app-header/panel-app-header.mjs

@@ -1,4 +1,4 @@
-import { isVNode, ref, computed, resolveComponent, createVNode, defineComponent } from 'vue';
+import { isVNode, defineComponent, ref, computed, createVNode, resolveComponent } from 'vue';
 import { PanelItemController } from '@ibiz-template/runtime';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import './panel-app-header.css';

package/es/panel-component/panel-app-login-view/panel-app-login-view.mjs

@@ -1,4 +1,4 @@
-import { isVNode, computed, resolveComponent, createVNode, defineComponent } from 'vue';
+import { isVNode, defineComponent, computed, createVNode, resolveComponent } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import { PanelAppLoginViewController } from './panel-app-login-view.controller.mjs';
 import './panel-app-login-view.css';

package/es/panel-component/panel-app-title/index.mjs

@@ -11,6 +11,10 @@ const IBizPanelAppTitle = withInstall(PanelAppTitle, function(v) {
     "RAWITEM_APP_APPTITLE",
     () => new PanelAppTitleProvider()
   );
+  registerPanelItemProvider(
+    "CTRLPOS_APP_APPTITLE",
+    () => new PanelAppTitleProvider()
+  );
 });
 
 export { IBizPanelAppTitle, IBizPanelAppTitle as default };

package/es/panel-component/panel-app-title/panel-app-title.controller.mjs

@@ -38,6 +38,14 @@ class PanelAppTitleController extends PanelItemController {
   async onInit() {
     await super.onInit();
     this.handleRawItemParams();
+    if (this.panel.view.model.viewType !== "APPINDEXVIEW") {
+      const viewModel = this.panel.view.model;
+      const app = ibiz.hub.getApp(viewModel.appId);
+      if (app) {
+        this.state.caption = app.model.caption || "";
+      }
+      return;
+    }
     const indexViewModel = this.panel.view.model;
     if (indexViewModel.title) {
       document.title = indexViewModel.title;

package/es/panel-component/panel-app-title/panel-app-title.css

@@ -1 +1 @@
-.ibiz-panel-app-title{--ibiz-panel-app-title-color:var(--ibiz-color-text-0);--ibiz-panel-app-title-font-size:var(--ibiz-font-size-header-3);--ibiz-panel-app-title-font-weight:var(--ibiz-font-weight-bold);--ibiz-panel-app-title-padding:0 var(--ibiz-spacing-base-tight);--ibiz-panel-app-title-collapse-padding:0 var(--ibiz-spacing-tight);display:flex;align-items:center;justify-content:center;height:100%;padding:var(--ibiz-panel-app-title-padding);cursor:pointer}.ibiz-panel-app-title__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--ibiz-panel-app-title-font-size);font-weight:700;color:var(--ibiz-panel-app-title-color)}.ibiz-panel-app-title__logo{display:flex;align-items:center;justify-content:center;height:100%;padding:0 var(--ibiz-spacing-tight);font-size:calc(var(--ibiz-font-size-header-1) + 8px)}.ibiz-panel-app-title__logo img{display:inline-block;width:auto;height:100%}.ibiz-panel-app-title__logo svg{fill:var(--ibiz-panel-app-title-color)}.ibiz-panel-app-title__logo--expand{width:66px;height:66px}.ibiz-panel-app-title__logo--expand+svg{width:calc(100% - 66px)}.ibiz-panel-app-title.is-only-img .ibiz-panel-app-title__logo{padding:0}.ibiz-panel-app-title.is-collapse{max-width:100%;padding:var(--ibiz-panel-app-title-collapse-padding)}.ibiz-panel-app-title.is-collapse .ibiz-panel-app-title__collapse-title{width:100%}.ibiz-panel-app-title.is-collapse .ibiz-panel-app-title__collpase-icon img{width:100%;height:100%}.ibiz-panel-app-title.is-collapse .ibiz-panel-app-title__caption2{overflow:hidden;font-size:var(--ibiz-font-size-header-4);font-weight:var(--ibiz-panel-app-title-font-weight);text-align:center;white-space:nowrap}.ibiz-panel-app-title.is-collapse .ibiz-panel-app-title__subCaption2{overflow:hidden;font-size:var(--ibiz-font-size-header-5);text-align:center;white-space:nowrap}
+.ibiz-panel-app-title{--ibiz-panel-app-title-color:var(--ibiz-color-text-0);--ibiz-panel-app-title-font-size:var(--ibiz-font-size-header-3);--ibiz-panel-app-title-font-weight:var(--ibiz-font-weight-bold);--ibiz-panel-app-title-padding:0 var(--ibiz-spacing-base-tight);--ibiz-panel-app-title-collapse-padding:0 var(--ibiz-spacing-tight);--ibiz-panel-app-title-not-index-height:60px;display:flex;align-items:center;justify-content:center;height:100%;padding:var(--ibiz-panel-app-title-padding);cursor:pointer}.ibiz-panel-app-title__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--ibiz-panel-app-title-font-size);font-weight:700;color:var(--ibiz-panel-app-title-color)}.ibiz-panel-app-title__logo{display:flex;align-items:center;justify-content:center;height:100%;padding:0 var(--ibiz-spacing-tight);font-size:calc(var(--ibiz-font-size-header-1) + 8px)}.ibiz-panel-app-title__logo img{display:inline-block;width:auto;height:100%}.ibiz-panel-app-title__logo svg{fill:var(--ibiz-panel-app-title-color)}.ibiz-panel-app-title__logo--expand{width:66px;height:66px}.ibiz-panel-app-title__logo--expand+svg{width:calc(100% - 66px)}.ibiz-panel-app-title.is-only-img .ibiz-panel-app-title__logo{padding:0}.ibiz-panel-app-title.is-collapse{max-width:100%;padding:var(--ibiz-panel-app-title-collapse-padding)}.ibiz-panel-app-title.is-collapse .ibiz-panel-app-title__collapse-title{width:100%}.ibiz-panel-app-title.is-collapse .ibiz-panel-app-title__collpase-icon img{width:100%;height:100%}.ibiz-panel-app-title.is-collapse .ibiz-panel-app-title__caption2{overflow:hidden;font-size:var(--ibiz-font-size-header-4);font-weight:var(--ibiz-panel-app-title-font-weight);text-align:center;white-space:nowrap}.ibiz-panel-app-title.is-collapse .ibiz-panel-app-title__subCaption2{overflow:hidden;font-size:var(--ibiz-font-size-header-5);text-align:center;white-space:nowrap}.ibiz-panel-app-title.is-only-title{height:var(--ibiz-panel-app-title-not-index-height)}

package/es/panel-component/panel-app-title/panel-app-title.mjs

@@ -1,4 +1,4 @@
-import { inject, computed, createVNode, defineComponent } from 'vue';
+import { defineComponent, inject, computed, createVNode } from 'vue';
 import { useNamespace, route2routePath, routePath2string } from '@ibiz-template/vue3-util';
 import { useRoute, useRouter } from 'vue-router';
 import { PanelAppTitleController } from './panel-app-title.controller.mjs';
@@ -71,135 +71,139 @@ const PanelAppTitle = /* @__PURE__ */ defineComponent({
       subCaption2
     } = this.c.state;
     let iconVNode = null;
+    let content = null;
     const captionNode = createVNode("span", {
       "class": this.ns.e("title")
     }, [caption]);
-    if (this.menuAlign === "LEFT") {
-      if (this.isCollapse) {
-        if (icon) {
+    if (this.c.panel.view.model.viewType !== "APPINDEXVIEW") {
+      content = captionNode;
+    } else {
+      if (this.menuAlign === "LEFT") {
+        if (this.isCollapse) {
+          if (icon) {
+            let tempIcon = null;
+            if (isSvg) {
+              tempIcon = createVNode("ion-icon", {
+                "class": this.ns.e("logo"),
+                "icon": icon
+              }, null);
+            } else {
+              tempIcon = createVNode("span", {
+                "class": this.ns.e("logo")
+              }, [createVNode("img", {
+                "src": icon
+              }, null)]);
+            }
+            iconVNode = createVNode("div", {
+              "class": this.ns.e("collpase-icon")
+            }, [tempIcon]);
+          } else {
+            iconVNode = createVNode("div", {
+              "class": this.ns.e("collapse-title")
+            }, [createVNode("div", {
+              "class": this.ns.e("caption2")
+            }, [caption2]), createVNode("div", {
+              "class": this.ns.e("subCaption2")
+            }, [subCaption2])]);
+          }
+        } else if (this.c.rawItemParams.showexpandicon === "true" && icon) {
           let tempIcon = null;
           if (isSvg) {
             tempIcon = createVNode("ion-icon", {
-              "class": this.ns.e("logo"),
+              "class": this.ns.em("logo", "expand"),
               "icon": icon
             }, null);
           } else {
             tempIcon = createVNode("span", {
-              "class": this.ns.e("logo")
+              "class": this.ns.em("logo", "expand")
             }, [createVNode("img", {
               "src": icon
             }, null)]);
           }
-          iconVNode = createVNode("div", {
-            "class": this.ns.e("collpase-icon")
-          }, [tempIcon]);
-        } else {
-          iconVNode = createVNode("div", {
-            "class": this.ns.e("collapse-title")
-          }, [createVNode("div", {
-            "class": this.ns.e("caption2")
-          }, [caption2]), createVNode("div", {
-            "class": this.ns.e("subCaption2")
-          }, [subCaption2])]);
-        }
-      } else if (this.c.rawItemParams.showexpandicon === "true" && icon) {
-        let tempIcon = null;
-        if (isSvg) {
-          tempIcon = createVNode("ion-icon", {
-            "class": this.ns.em("logo", "expand"),
-            "icon": icon
-          }, null);
-        } else {
-          tempIcon = createVNode("span", {
-            "class": this.ns.em("logo", "expand")
-          }, [createVNode("img", {
-            "src": icon
-          }, null)]);
-        }
-        iconVNode = createVNode("span", {
-          "class": this.ns.e("logo")
-        }, [tempIcon, createVNode("svg", {
-          "width": "166px",
-          "height": "90px",
-          "viewBox": "0 0 166 90",
-          "version": "1.1"
-        }, [createVNode("g", {
-          "id": "app-caption-panel",
-          "stroke": "none",
-          "stroke-width": "1",
-          "fill-rule": "evenodd"
-        }, [createVNode("text", {
-          "id": "app-caption",
-          "font-family": "Poppins-Bold, Poppins",
-          "font-size": "22",
-          "font-weight": "bold"
-        }, [createVNode("tspan", {
-          "x": "8",
-          "y": "39"
-        }, [caption])]), createVNode("text", {
-          "id": "app-subcaption",
-          "font-family": "PingFangSC-Semibold, PingFang SC",
-          "font-size": "14",
-          "font-weight": "bold"
-        }, [createVNode("tspan", {
-          "x": "8",
-          "y": "66"
-        }, [subCaption])])])])]);
-      } else {
-        iconVNode = createVNode("span", {
-          "class": this.ns.e("logo")
-        }, [createVNode("svg", {
-          "width": "256px",
-          "height": "90px",
-          "viewBox": "0 0 256 90",
-          "version": "1.1"
-        }, [createVNode("g", {
-          "id": "app-caption-panel",
-          "stroke": "none",
-          "stroke-width": "1",
-          "fill-rule": "evenodd"
-        }, [createVNode("text", {
-          "id": "app-caption",
-          "font-family": "Poppins-Bold, Poppins",
-          "font-size": "22",
-          "font-weight": "bold"
-        }, [createVNode("tspan", {
-          "x": "20.961",
-          "y": "39"
-        }, [caption])]), createVNode("text", {
-          "id": "app-subcaption",
-          "font-family": "PingFangSC-Semibold, PingFang SC",
-          "font-size": "18",
-          "font-weight": "bold"
-        }, [createVNode("tspan", {
-          "x": "96",
-          "y": "73"
-        }, [subCaption])])])])]);
-      }
-    } else if (this.menuAlign === "TOP") {
-      if (icon) {
-        if (isSvg) {
-          iconVNode = createVNode("ion-icon", {
-            "class": this.ns.e("logo"),
-            "icon": icon
-          }, null);
+          iconVNode = createVNode("span", {
+            "class": this.ns.e("logo")
+          }, [tempIcon, createVNode("svg", {
+            "width": "166px",
+            "height": "80px",
+            "viewBox": "0 0 166 90",
+            "version": "1.1"
+          }, [createVNode("g", {
+            "id": "app-caption-panel",
+            "stroke": "none",
+            "stroke-width": "1",
+            "fill-rule": "evenodd"
+          }, [createVNode("text", {
+            "id": "app-caption",
+            "font-family": "Poppins-Bold, Poppins",
+            "font-size": "22",
+            "font-weight": "bold"
+          }, [createVNode("tspan", {
+            "x": "8",
+            "y": "39"
+          }, [caption])]), createVNode("text", {
+            "id": "app-subcaption",
+            "font-family": "PingFangSC-Semibold, PingFang SC",
+            "font-size": "14",
+            "font-weight": "bold"
+          }, [createVNode("tspan", {
+            "x": "8",
+            "y": "66"
+          }, [subCaption])])])])]);
         } else {
           iconVNode = createVNode("span", {
             "class": this.ns.e("logo")
-          }, [createVNode("img", {
-            "src": icon
-          }, null)]);
+          }, [createVNode("svg", {
+            "width": "256px",
+            "height": "80px",
+            "viewBox": "0 0 256 80",
+            "version": "1.1"
+          }, [createVNode("g", {
+            "id": "app-caption-panel",
+            "stroke": "none",
+            "stroke-width": "1",
+            "fill-rule": "evenodd"
+          }, [createVNode("text", {
+            "id": "app-caption",
+            "font-family": "Poppins-Bold, Poppins",
+            "font-size": "22",
+            "font-weight": "bold"
+          }, [createVNode("tspan", {
+            "x": "20.961",
+            "y": "40"
+          }, [caption])]), createVNode("text", {
+            "id": "app-subcaption",
+            "font-family": "PingFangSC-Semibold, PingFang SC",
+            "font-size": "18",
+            "font-weight": "bold"
+          }, [createVNode("tspan", {
+            "x": "96",
+            "y": "69"
+          }, [subCaption])])])])]);
+        }
+      } else if (this.menuAlign === "TOP") {
+        if (icon) {
+          if (isSvg) {
+            iconVNode = createVNode("ion-icon", {
+              "class": this.ns.e("logo"),
+              "icon": icon
+            }, null);
+          } else {
+            iconVNode = createVNode("span", {
+              "class": this.ns.e("logo")
+            }, [createVNode("img", {
+              "src": icon
+            }, null)]);
+          }
         }
       }
-    }
-    let content = null;
-    if (this.menuAlign === "LEFT") {
-      content = iconVNode;
-    } else {
-      content = [iconVNode, captionNode];
+      if (this.menuAlign === "LEFT") {
+        content = iconVNode;
+      } else {
+        content = [iconVNode, captionNode];
+      }
     }
     return createVNode("div", {
-      "class": [this.ns.b(), this.ns.is("only-img", this.showImgOnly), this.ns.is("collapse", this.isCollapse), ...this.controller.containerClass],
+      "class": [this.ns.b(), this.ns.is("only-img", this.showImgOnly), this.ns.is("collapse", this.isCollapse), this.ns.is("only-title", this.c.panel.view.model.viewType !== "APPINDEXVIEW"), ...this.controller.containerClass],
       "onClick": this.handleClick
     }, [content]);
   }

package/es/panel-component/panel-button/panel-button.mjs

@@ -1,4 +1,4 @@
-import { ref, computed, resolveComponent, createVNode, defineComponent } from 'vue';
+import { defineComponent, ref, computed, createVNode, resolveComponent } from 'vue';
 import { useNamespace } from '@ibiz-template/vue3-util';
 import { showTitle } from '@ibiz-template/core';
 import { PanelButtonController } from './panel-button.controller.mjs';

package/es/panel-component/panel-button-list/index.d.ts

@@ -0,0 +1,24 @@
+export * from './panel-button-list.controller';
+export declare const IBizPanelButtonList: import("@ibiz-template/vue3-util").TypeWithInstall<import("vue").DefineComponent<{
+    modelData: {
+        type: import("vue").PropType<import("@ibiz/model-core").IPanelButtonList>;
+        required: true;
+    };
+    controller: {
+        type: typeof import("./panel-button-list.controller").PanelButtonListController;
+        required: true;
+    };
+}, {
+    ns: import("@ibiz-template/core").Namespace;
+    handleClick: (e: MouseEvent, actionId: string) => Promise<void>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelData: {
+        type: import("vue").PropType<import("@ibiz/model-core").IPanelButtonList>;
+        required: true;
+    };
+    controller: {
+        type: typeof import("./panel-button-list.controller").PanelButtonListController;
+        required: true;
+    };
+}>>, {}, {}>>;
+export default IBizPanelButtonList;

package/es/panel-component/panel-button-list/index.mjs

@@ -0,0 +1,19 @@
+import { registerPanelItemProvider } from '@ibiz-template/runtime';
+import { withInstall } from '@ibiz-template/vue3-util';
+import { PanelButtonList } from './panel-button-list.mjs';
+import { PanelButtonListProvider } from './panel-button-list.provider.mjs';
+export { PanelButtonListController } from './panel-button-list.controller.mjs';
+
+"use strict";
+const IBizPanelButtonList = withInstall(
+  PanelButtonList,
+  function(v) {
+    v.component(PanelButtonList.name, PanelButtonList);
+    registerPanelItemProvider(
+      "BUTTONLIST",
+      () => new PanelButtonListProvider()
+    );
+  }
+);
+
+export { IBizPanelButtonList, IBizPanelButtonList as default };