@ibiz-template/vue3-components 0.7.41-alpha.4 → 0.7.41-alpha.41

package/es/view-engine/wf-dyna-action-view.engine.mjs

@@ -18,7 +18,6 @@ class WFDynaActionViewEngine extends WFDynaEditViewEngine {
     const processForm = this.view.context.processForm ? "wfform_".concat(this.view.context.processForm) : "form";
     return processForm;
   }
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
   async call(key, args) {
     if (key === SysUIActionTag.OK) {
       this.onOkButtonClick();

package/es/view-engine/wf-dyna-start-view.engine.mjs

@@ -18,7 +18,6 @@ class WFDynaStartViewEngine extends WFDynaEditViewEngine {
     const processForm = this.view.context.processForm ? "wfform_".concat(this.view.context.processForm) : "form";
     return processForm;
   }
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
   async call(key, args) {
     if (key === SysUIActionTag.OK) {
       this.onOkButtonClick();

package/es/web-app/App.mjs

@@ -1,5 +1,5 @@
-import { onUnmounted, resolveComponent, createVNode, defineComponent } from 'vue';
-import { ViewMode, Modal } from '@ibiz-template/runtime';
+import { defineComponent, createVNode, resolveComponent, onMounted, onBeforeUnmount, onUnmounted } from 'vue';
+import { Modal, ViewMode } from '@ibiz-template/runtime';
 import { AppHooks } from '@ibiz-template/vue3-util';
 import './App.css';
 
@@ -16,6 +16,22 @@ var App = /* @__PURE__ */ defineComponent({
       ibiz.hub.destroy();
     };
     window.addEventListener("unload", destroyAppHub);
+    let watermarkDestroy;
+    onMounted(() => {
+      AppHooks.initedApp.tapPromise(async ({
+        context
+      }) => {
+        var _a;
+        watermarkDestroy == null ? void 0 : watermarkDestroy();
+        watermarkDestroy = ibiz.util.watermark.mount(ibiz.config.watermark, void 0, {
+          ...context,
+          ...(_a = ibiz.appData) == null ? void 0 : _a.context
+        });
+      });
+    });
+    onBeforeUnmount(() => {
+      watermarkDestroy == null ? void 0 : watermarkDestroy();
+    });
     onUnmounted(() => {
       destroyAppHub();
       AppHooks.destoryApp.call(null);

package/es/web-app/components/modal-router-shell/modal-router-shell.mjs

@@ -1,4 +1,4 @@
-import { ref, toRaw, onUnmounted, createVNode, defineComponent } from 'vue';
+import { defineComponent, createVNode, ref, toRaw, onUnmounted } from 'vue';
 import { parseRouteViewData, createOverlayView, routerCallback, route2routePath } from '@ibiz-template/vue3-util';
 import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router';
 import { IBizContext } from '@ibiz-template/core';

package/es/web-app/components/router-shell/router-shell.mjs

@@ -1,7 +1,7 @@
-import { ref, toRaw, onUnmounted, watch, onActivated, onDeactivated, Fragment, resolveComponent, h, createVNode, defineComponent } from 'vue';
+import { defineComponent, createVNode, Fragment, h, resolveComponent, ref, toRaw, onUnmounted, watch, onActivated, onDeactivated } from 'vue';
 import { parseRouteViewData } from '@ibiz-template/vue3-util';
 import { useRoute, useRouter } from 'vue-router';
-import { ViewMode, Modal, RouteConst } from '@ibiz-template/runtime';
+import { RouteConst, Modal, ViewMode } from '@ibiz-template/runtime';
 import { IBizContext } from '@ibiz-template/core';
 import { mergeDeepLeft } from 'ramda';
 

package/es/web-app/create-vue-app.mjs

@@ -1,6 +1,6 @@
 import { createApp, KeepAlive } from 'vue';
 import ElementPlus from 'element-plus';
-import zhCn from '../node_modules/.pnpm/element-plus@2.4.4_vue@3.3.8/node_modules/element-plus/dist/locale/zh-cn.mjs';
+import zhCn from '../node_modules/.pnpm/element-plus@2.4.4_vue@3.5.22/node_modules/element-plus/dist/locale/zh-cn.mjs';
 import { AppHooks, piniaInstance } from '@ibiz-template/vue3-util';
 import IBizVue3 from '../ibiz-vue3.mjs';
 import { i18n } from '../locale/index.mjs';
@@ -12,8 +12,8 @@ function createVueApp(rootComponent, rootProps) {
   app.config.errorHandler = function(err) {
     ibiz.util.error.handle(err);
   };
-  const installPlugin = (_, plugin) => {
-    app.use(plugin);
+  const installPlugin = (_, plugin, extraParams) => {
+    app.use(plugin, extraParams);
   };
   AppHooks.useComponent.tap(installPlugin);
   const importBIReport = () => import('@ibiz-template-plugin/bi-report');

package/es/web-app/guard/auth-guard/auth-guard.mjs

@@ -1,4 +1,4 @@
-import { CoreConst, getAppCookie, RuntimeError, HttpError } from '@ibiz-template/core';
+import { getAppCookie, CoreConst, RuntimeError, HttpError } from '@ibiz-template/core';
 import { mergeDeepRight } from 'ramda';
 import { AppHooks } from '@ibiz-template/vue3-util';
 import { updateDevToolConfig } from '@ibiz-template/devtool';
@@ -79,7 +79,18 @@ class AuthGuard {
         if (status === 401) {
           const refreshToken = getAppCookie(CoreConst.REFRESH_TOKEN);
           if (refreshToken) {
-            await ibiz.auth.refreshToken();
+            try {
+              await ibiz.auth.refreshToken();
+            } catch (refreshTokenError) {
+              if (ibiz.env.enableAnonymous) {
+                const loginResult = await ibiz.auth.anonymousLogin();
+                if (!loginResult) {
+                  throw error;
+                }
+              } else {
+                throw error;
+              }
+            }
             await this.appInit(context);
             return;
           }
@@ -111,7 +122,7 @@ class AuthGuard {
     const viewName = urlPaths[urlPaths.length - 2];
     let viewModel;
     try {
-      if (viewName === "#" && ibiz.hub.defaultPage) {
+      if (["#", "index"].includes(viewName) && ibiz.hub.defaultPage) {
         viewModel = await ibiz.hub.getAppView(ibiz.hub.defaultPage.id);
       } else {
         viewModel = await ibiz.hub.getAppView(viewName);
@@ -128,6 +139,7 @@ class AuthGuard {
     }
     if (viewModel.accUserMode !== 3) {
       this.throw401();
+      return;
     }
     if (!authInfo) {
       const loginResult = await ibiz.auth.anonymousLogin();
@@ -159,7 +171,18 @@ class AuthGuard {
       const refreshToken = getAppCookie(CoreConst.REFRESH_TOKEN);
       if (responseStatus === 401 && remember && refreshToken != null && refreshToken !== "") {
         try {
-          await ibiz.auth.refreshToken();
+          try {
+            await ibiz.auth.refreshToken();
+          } catch (refreshTokenError) {
+            if (ibiz.env.enableAnonymous) {
+              const loginResult = await ibiz.auth.anonymousLogin();
+              if (!loginResult) {
+                throw error;
+              }
+            } else {
+              throw error;
+            }
+          }
           if (ibiz.env.isSaaSMode === true) {
             await this.loadOrgData();
           }
@@ -249,15 +272,19 @@ class AuthGuard {
         return uiTheme.themeParams && uiTheme.themeParams["icon-theme"] !== "true";
       });
       if (colorThemes.length > 0) {
-        const colorTheme = colorThemes[0];
-        await ibiz.util.theme.loadTheme(colorTheme);
+        for (let index = 0; index < colorThemes.length; index++) {
+          const colorTheme = colorThemes[index];
+          await ibiz.util.theme.loadTheme(colorTheme);
+        }
       }
       const iconThemes = uiThemes.filter((uiTheme) => {
         return uiTheme.themeParams && uiTheme.themeParams["icon-theme"] === "true";
       });
       if (iconThemes.length > 0) {
-        const iconTheme = iconThemes[0];
-        await ibiz.util.theme.loadTheme(iconTheme, "ICON");
+        for (let index = 0; index < iconThemes.length; index++) {
+          const iconTheme = iconThemes[index];
+          await ibiz.util.theme.loadTheme(iconTheme, "ICON");
+        }
       }
     }
   }

package/es/web-app/main.mjs

@@ -21,6 +21,8 @@ import { NotificationUtil } from '../util/notification-util/notification-util.mj
 import { LoadingUtil } from '../util/loading-util/loading-util.mjs';
 import { NoticeUtil } from '../util/notice-util/notice-util.mjs';
 import { OverlayController } from '../util/overlay-controller/overlay-controller.mjs';
+import { InLineAIUtil } from '../util/inline-ai-util/inline-ai-util.mjs';
+import { AIChatUtil } from '../util/ai-chat-util/ai-chat-util.mjs';
 import { FullscreenUtil } from '../util/fullscreen/fullscreen-util.mjs';
 
 "use strict";
@@ -81,6 +83,8 @@ async function runApp(plugins, opts) {
   ibiz.loading = new LoadingUtil();
   ibiz.notice = new NoticeUtil();
   ibiz.overlay = new OverlayController();
+  ibiz.inLineAIUtil = new InLineAIUtil();
+  ibiz.aiChatUtil = new AIChatUtil();
   ibiz.util.text.format = (value, code) => {
     return app.config.globalProperties.$textFormat(value, code);
   };

package/es/web-app/router/index.mjs

@@ -1,4 +1,4 @@
-import { createWebHashHistory, createRouter } from 'vue-router';
+import { createRouter, createWebHashHistory } from 'vue-router';
 import qs from 'qs';
 import { AppRedirectView } from '@ibiz-template/vue3-util';
 import { RouteConst } from '@ibiz-template/runtime';
@@ -9,8 +9,8 @@ import { ShareView } from '../../view/share-view/share-view.mjs';
 import 'nprogress/nprogress.css';
 import { LoginView } from '../../view/login-view/login-view.mjs';
 import { ErrorView } from '../../view/error-view/error-view.mjs';
-import { RouterShell } from '../components/router-shell/router-shell.mjs';
 import { ModalRouterShell } from '../components/modal-router-shell/modal-router-shell.mjs';
+import { RouterShell } from '../components/router-shell/router-shell.mjs';
 
 "use strict";
 var __defProp = Object.defineProperty;

package/es/web-app/util/unauthorized-handler/unauthorized-handler.mjs

@@ -2,7 +2,22 @@ import qs from 'qs';
 import { HttpError, RuntimeError, UrlHelper, LoginMode } from '@ibiz-template/core';
 
 "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 UnauthorizedHandler {
+  constructor() {
+    /**
+     * @description 是否存在403错误未处理
+     * @protected
+     * @type {boolean}
+     * @memberof UnauthorizedHandler
+     */
+    __publicField(this, "hasPermErrPending", false);
+  }
   match(error) {
     return error instanceof HttpError && (error.status === 401 || error.status === 403);
   }
@@ -83,10 +98,15 @@ class UnauthorizedHandler {
    */
   async handle403(error) {
     if (error.tag === "APPINIT") {
+      if (this.hasPermErrPending) {
+        return;
+      }
+      this.hasPermErrPending = true;
       const result = await ibiz.confirm.warning({
         title: ibiz.i18n.t("webApp.unauthorizedHandler.forbiddenAccess"),
         desc: ibiz.i18n.t("webApp.unauthorizedHandler.logoutAccount")
       });
+      this.hasPermErrPending = false;
       if (result) {
         const bol = await ibiz.hub.controller.logout();
         if (bol) {
@@ -108,7 +128,8 @@ class UnauthorizedHandler {
     if (error instanceof HttpError) {
       if (error.status === 401) {
         const search = qs.parse(window.location.search.replace("?", ""));
-        if (search.isAnonymous) {
+        if ((search.isAnonymous || ibiz.env.enableAnonymous) && // 匿名登录获取视图模型发生异常，走普通登录，防止循环执行
+        error.tag !== "APPINIT") {
           ibiz.auth.anonymousLogin().then((bol) => {
             if (bol) {
               window.location.reload();

package/lib/common/action-toolbar/action-toolbar.cjs

@@ -40,6 +40,10 @@ const IBizActionToolbar = /* @__PURE__ */ vue.defineComponent({
     // 二者区别在于：行为回调为同步执行（主要解决pop打开视图位置异常），action-click为异步执行（不关心执行是否完成）
     actionCallBack: {
       type: Function
+    },
+    direction: {
+      type: String,
+      default: "horizontal"
     }
   },
   setup(props, {
@@ -89,21 +93,34 @@ const IBizActionToolbar = /* @__PURE__ */ vue.defineComponent({
       });
     }
     const calcActionItemClass = (item) => {
+      var _a2;
       const {
         actionLevel
       } = item;
-      return [ns.e("item"), ns.is("disabled", false), ns.em("item", "level-".concat(actionLevel))];
+      return [ns.e("item"), (_a2 = item.sysCss) == null ? void 0 : _a2.codeName, ns.em("item", "level-".concat(actionLevel))];
     };
     const popoverIndex = props.zIndex;
+    const renderItemContent = (detail) => {
+      var _a2, _b;
+      const caption = ((_a2 = detail.refUIActionGroup) == null ? void 0 : _a2.name) || ((_b = detail.refUIActionGroup) == null ? void 0 : _b.id) || detail.caption;
+      return [vue.createVNode("div", {
+        "class": [ns.em("item", "icon"), ns.is("has-caption", detail.showCaption && !!detail.caption), ns.is("has-icon", detail.showIcon && !!detail.sysImage)]
+      }, [detail.showIcon && detail.sysImage && vue.createVNode(vue.resolveComponent("iBizIcon"), {
+        "icon": detail.sysImage
+      }, null)]), vue.createVNode("div", {
+        "class": [ns.em("item", "label"), ns.is("has-caption", detail.showCaption && !!detail.caption), ns.is("has-icon", detail.showIcon && !!detail.sysImage)]
+      }, [caption])];
+    };
     return {
       ns,
       dropdownRef,
       popoverIndex,
-      expandDetails,
       groupDetails,
+      expandDetails,
       groupButtonRef,
       popoverVisible,
       handleClick,
+      renderItemContent,
       calcActionItemClass
     };
   },
@@ -111,16 +128,67 @@ const IBizActionToolbar = /* @__PURE__ */ vue.defineComponent({
     var _a;
     const details = this.actionDetails || [];
     const renderDivider = (isExpand) => {
+      const ishorizontal = isExpand && this.direction === "horizontal";
       return vue.createVNode(vue.resolveComponent("el-divider"), {
         "class": this.ns.e("separator"),
         "border-style": "double",
-        "direction": isExpand ? "vertical" : "horizontal"
+        "direction": ishorizontal ? "vertical" : "horizontal"
       }, null);
     };
+    const renderActionGroup = (detail, isExpand = true) => {
+      var _a2;
+      const actionGroup = detail.refUIActionGroup;
+      if (!((_a2 = actionGroup == null ? void 0 : actionGroup.uiactionGroupDetails) == null ? void 0 : _a2.length))
+        return null;
+      const pvisible = actionGroup.uiactionGroupDetails.some((item) => {
+        return this.actionsState[item.id].visible;
+      });
+      if (!pvisible)
+        return null;
+      const ishorizontal = isExpand && this.direction === "horizontal";
+      return [detail.addSeparator && renderDivider(isExpand), vue.createVNode(vue.resolveComponent("el-popover"), {
+        "trigger": "click",
+        "teleported": false,
+        "popper-class": this.ns.e("popover"),
+        "placement": ishorizontal ? "bottom" : "right-start",
+        "popper-options": {
+          modifiers: [{
+            name: "offset",
+            options: {
+              offset: [0, 4]
+            }
+          }]
+        },
+        "popper-style": "z-index:".concat(this.popoverIndex + 1)
+      }, {
+        reference: () => {
+          return vue.createVNode(vue.resolveComponent("el-button"), {
+            "text": true,
+            "size": "small",
+            "class": [...this.calcActionItemClass(detail), this.ns.e("group-item")]
+          }, {
+            default: () => [vue.createVNode("div", {
+              "class": this.ns.em("group-item", "content")
+            }, [vue.createVNode("div", {
+              "class": this.ns.em("group-item", "caption")
+            }, [this.renderItemContent(detail)]), vue.createVNode("ion-icon", {
+              "class": this.ns.em("group-item", "icon"),
+              "name": ishorizontal ? "chevron-down-outline" : "chevron-forward-outline"
+            }, null)])]
+          });
+        },
+        default: () => {
+          return renderActions(actionGroup.uiactionGroupDetails || [], false);
+        }
+      })];
+    };
     const renderActions = (items, isExpand = true) => {
       return items.map((detail) => {
         var _a2;
+        if (detail.detailType === "DEUIACTIONGROUP" && detail.refUIActionGroup)
+          return renderActionGroup(detail, isExpand);
         if ((_a2 = this.actionsState[detail.id]) == null ? void 0 : _a2.visible) {
+          let _slot;
           return [detail.addSeparator && renderDivider(isExpand), vue.createVNode(vue.resolveComponent("el-button"), {
             "text": true,
             "size": "small",
@@ -128,30 +196,22 @@ const IBizActionToolbar = /* @__PURE__ */ vue.defineComponent({
             "title": core.showTitle(detail.tooltip),
             "disabled": this.actionsState[detail.id].disabled,
             "class": this.calcActionItemClass(detail)
-          }, {
-            default: () => [vue.createVNode("div", {
-              "class": [this.ns.em("item", "icon"), this.ns.is("has-caption", detail.showCaption && !!detail.caption), this.ns.is("has-icon", detail.showIcon && !!detail.sysImage)]
-            }, [detail.showIcon && detail.sysImage && vue.createVNode(vue.resolveComponent("iBizIcon"), {
-              "icon": detail.sysImage
-            }, null)]), vue.createVNode("div", {
-              "class": [this.ns.em("item", "label"), this.ns.is("has-caption", detail.showCaption && !!detail.caption), this.ns.is("has-icon", detail.showIcon && !!detail.sysImage)]
-            }, [detail.showCaption ? detail.caption : ""])]
+          }, _isSlot(_slot = this.renderItemContent(detail)) ? _slot : {
+            default: () => [_slot]
           })];
         }
         return null;
       });
     };
     const renderGroup = () => {
-      let _slot;
-      if (this.groupDetails.length === 0) {
+      let _slot2;
+      if (this.groupDetails.length === 0)
         return null;
-      }
       const pvisible = this.groupDetails.findIndex((item) => {
         return this.actionsState[item.id].visible === true;
       }) !== -1;
-      if (!pvisible) {
+      if (!pvisible)
         return null;
-      }
       const pdisabled = this.groupDetails.findIndex((item) => {
         return this.actionsState[item.id].disabled === false;
       }) === -1;
@@ -177,13 +237,12 @@ const IBizActionToolbar = /* @__PURE__ */ vue.defineComponent({
         "popper-class": this.ns.e("popover"),
         "virtual-triggering": true,
         "popper-style": "z-index:".concat(this.popoverIndex)
-      }, _isSlot(_slot = renderActions(this.groupDetails, false)) ? _slot : {
-        default: () => [_slot]
+      }, _isSlot(_slot2 = renderActions(this.groupDetails, false)) ? _slot2 : {
+        default: () => [_slot2]
       })];
     };
-    if (!((_a = this.actionsState) == null ? void 0 : _a.visible)) {
+    if (!((_a = this.actionsState) == null ? void 0 : _a.visible))
       return;
-    }
     if (this.mode === "buttons") {
       return vue.createVNode("div", {
         "class": [this.ns.b(), this.ns.m("buttons")],
@@ -206,10 +265,10 @@ const IBizActionToolbar = /* @__PURE__ */ vue.defineComponent({
         default: () => [details.length > 0 && details.map((detail) => {
           if (this.actionsState[detail.id].visible) {
             return vue.createVNode(vue.resolveComponent("el-dropdown-item"), {
-              "class": [this.ns.e("item"), this.ns.is("disabled", false)],
+              "command": detail,
               "title": core.showTitle(detail.tooltip),
-              "disabled": this.actionsState[detail.id].disabled,
-              "command": detail
+              "class": this.calcActionItemClass(detail),
+              "disabled": this.actionsState[detail.id].disabled
             }, {
               default: () => [detail.showIcon && detail.sysImage && vue.createVNode(vue.resolveComponent("iBizIcon"), {
                 "icon": detail.sysImage

package/lib/common/action-toolbar/action-toolbar.css

@@ -1 +1 @@
-@charset "UTF-8";.ibiz-action-toolbar{--ibiz-action-toolbar-item-margin:var(--ibiz-spacing-none) var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-none) var(--ibiz-spacing-none);--ibiz-action-toolbar-item-padding:var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-none);--ibiz-action-toolbar-separator-height:var(--ibiz-spacing-base-loose);--ibiz-action-toolbar-separator-width:var(--ibiz-spacing-super-tight);--ibiz-action-toolbar-separator-color:var(--ibiz-color-border);--ibiz-action-toolbar-popover-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-none);--ibiz-action-toolbar-popover-button-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);--ibiz-action-toolbar-popover-button-color:var(--ibiz-color-text-2);--ibiz-action-toolbar-popover-button-hover-bg:var(--ibiz-color-bg-0);display:flex;flex-wrap:wrap}.ibiz-action-toolbar__item{padding:var(--ibiz-action-toolbar-item-padding);margin:var(--ibiz-action-toolbar-item-margin)}.ibiz-action-toolbar__item--icon.is-has-icon{display:flex;align-items:baseline;justify-content:center;width:var(--ibiz-width-icon-medium);height:var(--ibiz-width-icon-medium);margin-right:var(--ibiz-spacing-extra-tight);margin-left:var(--ibiz-spacing-extra-tight);font-size:var(--ibiz-width-icon-medium)}.ibiz-action-toolbar__item--label.is-has-caption{margin-right:var(--ibiz-spacing-extra-tight)}.ibiz-action-toolbar__item+.ibiz-action-toolbar__item{margin:var(--ibiz-action-toolbar-item-margin)}.ibiz-action-toolbar__separator{height:auto}.ibiz-action-toolbar__popover{--ibiz-action-toolbar-item-margin:var(--ibiz-spacing-none) var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-none) var(--ibiz-spacing-none);--ibiz-action-toolbar-item-padding:var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-none);--ibiz-action-toolbar-separator-height:var(--ibiz-spacing-base-loose);--ibiz-action-toolbar-separator-width:var(--ibiz-spacing-super-tight);--ibiz-action-toolbar-separator-color:var(--ibiz-color-border);--ibiz-action-toolbar-popover-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-none);--ibiz-action-toolbar-popover-button-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);--ibiz-action-toolbar-popover-button-color:var(--ibiz-color-text-2);--ibiz-action-toolbar-popover-button-hover-bg:var(--ibiz-color-bg-0);width:auto!important;min-width:150px;--el-popover-padding:var(--ibiz-action-toolbar-popover-padding)}.ibiz-action-toolbar__popover .el-button{--el-button-size:getCssVar("height-control", "large");display:block;width:100%;padding:var(--ibiz-action-toolbar-popover-button-padding);margin:var(--ibiz-spacing-none);font-size:var(--ibiz-font-size-regular);color:var(--ibiz-action-toolbar-popover-button-color);text-align:left;border-radius:0}.ibiz-action-toolbar__popover .el-button:hover{background-color:var(--ibiz-action-toolbar-popover-button-hover-bg)}.ibiz-action-toolbar__popover .el-button .ibiz-icon{margin-right:var(--ibiz-spacing-extra-tight)}.ibiz-action-toolbar__popover .ibiz-action-toolbar__separator{margin:var(--ibiz-spacing-none)}.ibiz-action-toolbar--dropdown .ibiz-action-toolbar__caption{cursor:pointer}.ibiz-action-toolbar--dropdown .ibiz-action-toolbar__caption-icon{vertical-align:bottom}
+@charset "UTF-8";.ibiz-action-toolbar{--ibiz-action-toolbar-item-margin:var(--ibiz-spacing-none) var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-none) var(--ibiz-spacing-none);--ibiz-action-toolbar-item-padding:var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-none);--ibiz-action-toolbar-separator-height:var(--ibiz-spacing-base-loose);--ibiz-action-toolbar-separator-width:var(--ibiz-spacing-super-tight);--ibiz-action-toolbar-separator-color:var(--ibiz-color-border);--ibiz-action-toolbar-popover-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-none);--ibiz-action-toolbar-popover-button-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);--ibiz-action-toolbar-popover-button-color:var(--ibiz-color-text-2);--ibiz-action-toolbar-popover-button-hover-bg:var(--ibiz-color-bg-0);display:flex;flex-wrap:wrap}.ibiz-action-toolbar__item{padding:var(--ibiz-action-toolbar-item-padding);margin:var(--ibiz-action-toolbar-item-margin)}.ibiz-action-toolbar__item--icon.is-has-icon{display:flex;align-items:baseline;justify-content:center;width:var(--ibiz-width-icon-medium);height:var(--ibiz-width-icon-medium);margin-right:var(--ibiz-spacing-extra-tight);margin-left:var(--ibiz-spacing-extra-tight);font-size:var(--ibiz-width-icon-medium)}.ibiz-action-toolbar__item--label.is-has-caption{margin-right:var(--ibiz-spacing-extra-tight)}.ibiz-action-toolbar__item+.ibiz-action-toolbar__item{margin:var(--ibiz-action-toolbar-item-margin)}.ibiz-action-toolbar__group-item>span{width:100%}.ibiz-action-toolbar__group-item--content{display:flex;gap:var(--ibiz-spacing-extra-tight);align-items:center;justify-content:space-between;width:100%}.ibiz-action-toolbar__group-item--caption{display:flex;align-items:center;padding:var(--ibiz-action-toolbar-item-padding);margin:var(--ibiz-action-toolbar-item-margin)}.ibiz-action-toolbar__separator{height:auto}.ibiz-action-toolbar__popover{--ibiz-action-toolbar-item-margin:var(--ibiz-spacing-none) var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-none) var(--ibiz-spacing-none);--ibiz-action-toolbar-item-padding:var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-none);--ibiz-action-toolbar-separator-height:var(--ibiz-spacing-base-loose);--ibiz-action-toolbar-separator-width:var(--ibiz-spacing-super-tight);--ibiz-action-toolbar-separator-color:var(--ibiz-color-border);--ibiz-action-toolbar-popover-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-none);--ibiz-action-toolbar-popover-button-padding:var(--ibiz-spacing-tight) var(--ibiz-spacing-base-loose);--ibiz-action-toolbar-popover-button-color:var(--ibiz-color-text-2);--ibiz-action-toolbar-popover-button-hover-bg:var(--ibiz-color-bg-0);width:auto!important;min-width:150px;--el-popover-padding:var(--ibiz-action-toolbar-popover-padding)}.ibiz-action-toolbar__popover .el-button{--el-button-size:getCssVar("height-control", "large");display:block;width:100%;padding:var(--ibiz-action-toolbar-popover-button-padding);margin:var(--ibiz-spacing-none);font-size:var(--ibiz-font-size-regular);color:var(--ibiz-action-toolbar-popover-button-color);text-align:left;border-radius:0}.ibiz-action-toolbar__popover .el-button:hover{background-color:var(--ibiz-action-toolbar-popover-button-hover-bg)}.ibiz-action-toolbar__popover .el-button .ibiz-icon{margin-right:var(--ibiz-spacing-extra-tight)}.ibiz-action-toolbar__popover .ibiz-action-toolbar__separator{margin:var(--ibiz-spacing-none)}.ibiz-action-toolbar--dropdown .ibiz-action-toolbar__caption{cursor:pointer}.ibiz-action-toolbar--dropdown .ibiz-action-toolbar__caption-icon{vertical-align:bottom}

package/lib/common/button-list/button-list.cjs

@@ -8,9 +8,6 @@ require('./button-list.css');
 var buttonUtil = require('../../util/button-util/button-util.cjs');
 
 "use strict";
-function _isSlot(s) {
-  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
-}
 const IBizButtonList = /* @__PURE__ */ vue.defineComponent({
   name: "IBizButtonList",
   props: {
@@ -34,6 +31,9 @@ const IBizButtonList = /* @__PURE__ */ vue.defineComponent({
     emit
   }) {
     const ns = vue3Util.useNamespace("button-list");
+    const {
+      zIndex
+    } = vue3Util.useUIStore();
     const dropdown = vue.ref();
     const componentRef = vue.ref();
     const {
@@ -139,27 +139,79 @@ const IBizButtonList = /* @__PURE__ */ vue.defineComponent({
         (_d = (_c = dropdown.value) == null ? void 0 : _c.handleOpen) == null ? void 0 : _d.call(_c);
       }
     };
-    const renderButton = (item, type) => {
-      var _a, _b, _c, _d;
-      if (((_a = props.buttonsState[item.id]) == null ? void 0 : _a.visible) === false)
+    const renderActionGroup = (detail, isFlatten) => {
+      var _a;
+      const actionGroup = detail.refUIActionGroup;
+      if (!((_a = actionGroup == null ? void 0 : actionGroup.uiactionGroupDetails) == null ? void 0 : _a.length))
         return null;
-      return vue.createVNode(vue.resolveComponent("el-button"), {
-        "class": [ns.e("item"), ns.em("item", "".concat((_b = item.id) == null ? void 0 : _b.toLowerCase())), "".concat(((_c = item.sysCss) == null ? void 0 : _c.cssName) || "")],
-        "type": type || buttonUtil.convertBtnType(item.buttonStyle),
-        "title": item.tooltip || item.caption,
-        "disabled": ((_d = props.buttonsState[item.id]) == null ? void 0 : _d.disabled) || props.disabled,
-        "onClick": (event) => handleClick(event, item)
+      const pvisible = actionGroup.uiactionGroupDetails.findIndex((item) => {
+        return props.buttonsState[item.id].visible === true;
+      }) !== -1;
+      if (!pvisible)
+        return null;
+      return vue.createVNode(vue.resolveComponent("el-popover"), {
+        "trigger": "click",
+        "teleported": isFlatten,
+        "popper-class": ns.e("popover"),
+        "placement": isFlatten ? "bottom" : "right-start",
+        "popper-options": {
+          modifiers: [{
+            name: "offset",
+            options: {
+              offset: [0, 4]
+            }
+          }]
+        },
+        "popper-style": "z-index: ".concat(zIndex.zIndex)
       }, {
-        default: () => [vue.createVNode("div", {
-          "class": ns.e("button-content")
-        }, [item.showIcon && vue.createVNode(vue.resolveComponent("iBizIcon"), {
-          "icon": item.sysImage,
-          "class": ns.em("button-content", "icon")
-        }, null), item.showCaption && vue.createVNode("span", {
-          "class": ns.em("button-content", "caption")
-        }, [item.caption])])]
+        reference: () => {
+          var _a2, _b;
+          return vue.createVNode(vue.resolveComponent("el-button"), {
+            "class": [ns.e("item"), ns.em("item", "group"), ns.em("item", "".concat((_a2 = detail.id) == null ? void 0 : _a2.toLowerCase())), "".concat(((_b = detail.sysCss) == null ? void 0 : _b.cssName) || "")],
+            "type": buttonUtil.convertBtnType(detail.buttonStyle)
+          }, {
+            default: () => [vue.createVNode("div", {
+              "class": ns.e("button-content")
+            }, [detail.showIcon && vue.createVNode(vue.resolveComponent("iBizIcon"), {
+              "icon": detail.sysImage,
+              "class": ns.em("button-content", "icon")
+            }, null), detail.showCaption && vue.createVNode("span", {
+              "class": ns.em("button-content", "caption")
+            }, [actionGroup.name || actionGroup.id])]), vue.createVNode("ion-icon", {
+              "class": ns.em("item", "group-icon"),
+              "name": isFlatten ? "chevron-down-outline" : "chevron-forward-outline"
+            }, null)]
+          });
+        },
+        default: () => {
+          var _a2;
+          return (_a2 = actionGroup.uiactionGroupDetails) == null ? void 0 : _a2.map((item) => renderButton(item, false));
+        }
       });
     };
+    const renderButton = (item, isFlatten, type) => {
+      var _a, _b, _c, _d;
+      if (item.detailType === "DEUIACTIONGROUP" && item.refUIActionGroup)
+        return renderActionGroup(item, isFlatten);
+      if ((_a = props.buttonsState[item.id]) == null ? void 0 : _a.visible)
+        return vue.createVNode(vue.resolveComponent("el-button"), {
+          "class": [ns.e("item"), ns.em("item", "".concat((_b = item.id) == null ? void 0 : _b.toLowerCase())), "".concat(((_c = item.sysCss) == null ? void 0 : _c.cssName) || "")],
+          "text": !isFlatten,
+          "title": item.tooltip || item.caption,
+          "type": type || buttonUtil.convertBtnType(item.buttonStyle),
+          "onClick": (event) => handleClick(event, item),
+          "disabled": ((_d = props.buttonsState[item.id]) == null ? void 0 : _d.disabled) || props.disabled
+        }, {
+          default: () => [vue.createVNode("div", {
+            "class": ns.e("button-content")
+          }, [item.showIcon && vue.createVNode(vue.resolveComponent("iBizIcon"), {
+            "icon": item.sysImage,
+            "class": ns.em("button-content", "icon")
+          }, null), item.showCaption && vue.createVNode("span", {
+            "class": ns.em("button-content", "caption")
+          }, [item.caption])])]
+        });
+    };
     const renderDropdown = (items, iconName = "chevron-down-outline") => {
       const {
         id,
@@ -187,7 +239,7 @@ const IBizButtonList = /* @__PURE__ */ vue.defineComponent({
         default: () => {
           const item = items[firstIndex.value];
           return vue.createVNode(vue.resolveComponent("el-button-group"), null, {
-            default: () => [actionGroupExtractMode === "ITEMX" && item && renderButton(item, buttonUtil.convertBtnType(buttonListStyle.value)), (actionGroupExtractMode !== "ITEMX" || item) && vue.createVNode(vue.resolveComponent("el-button"), {
+            default: () => [actionGroupExtractMode === "ITEMX" && item && renderButton(item, true, buttonUtil.convertBtnType(buttonListStyle.value)), (actionGroupExtractMode !== "ITEMX" || item) && vue.createVNode(vue.resolveComponent("el-button"), {
               "disabled": props.disabled,
               "class": ns.e("more-button"),
               "title": actionGroupExtractMode !== "ITEMX" ? caption || ibiz.i18n.t("app.more") : ibiz.i18n.t("app.more"),
@@ -208,21 +260,15 @@ const IBizButtonList = /* @__PURE__ */ vue.defineComponent({
             })]
           });
         },
-        dropdown: () => {
-          let _slot2;
-          return vue.createVNode(vue.resolveComponent("el-dropdown-menu"), null, _isSlot(_slot2 = items.map((item, index) => {
-            var _a;
-            if (!(((_a = props.buttonsState[item.id]) == null ? void 0 : _a.visible) === false) && (actionGroupExtractMode !== "ITEMX" || index !== firstIndex.value)) {
-              let _slot;
-              return vue.createVNode(vue.resolveComponent("el-dropdown-item"), null, _isSlot(_slot = renderButton(item)) ? _slot : {
-                default: () => [_slot]
-              });
-            }
-            return null;
-          })) ? _slot2 : {
-            default: () => [_slot2]
-          });
-        }
+        dropdown: () => vue.createVNode("div", {
+          "class": ns.e("dropdown-popper-content")
+        }, [items.map((item, index) => {
+          var _a;
+          if (!(((_a = props.buttonsState[item.id]) == null ? void 0 : _a.visible) === false) && (actionGroupExtractMode !== "ITEMX" || index !== firstIndex.value)) {
+            return renderButton(item, false);
+          }
+          return null;
+        })])
       });
     };
     const renderActions = () => {
@@ -232,7 +278,7 @@ const IBizButtonList = /* @__PURE__ */ vue.defineComponent({
       return vue.createVNode("div", {
         "class": ns.e("content"),
         "ref": componentRef
-      }, [items.map((item) => renderButton(item)), moreItems.length ? renderDropdown(moreItems, "ellipsis-horizontal") : null]);
+      }, [items.map((item) => renderButton(item, true)), moreItems.length ? renderDropdown(moreItems, "ellipsis-horizontal") : null]);
     };
     return {
       ns,