@ibiz-template/vue3-components 0.7.27 → 0.7.28-alpha.1

package/lib/control/grid/grid/grid-control.util.cjs

@@ -7,12 +7,12 @@ var vue = require('vue');
 "use strict";
 function sortMergeData(rowSpanKeys, items) {
   const otherItems = [];
+  const firstKey = rowSpanKeys[0] || "";
   const sortedItems = items.filter((item) => {
-    const index = rowSpanKeys.findIndex((key) => !item[key]);
-    if (index !== -1) {
+    if (!item[firstKey]) {
       otherItems.push(item);
     }
-    return index === -1;
+    return item[firstKey];
   });
   sortedItems.sort((a, b) => {
     for (const key of rowSpanKeys) {
@@ -296,7 +296,8 @@ function useAppGridBase(c, props) {
     const { property } = column;
     const { rowspankeys = [], colspankeys = [] } = c.controlParams;
     if (rowspankeys.length > 0 && rowspankeys.includes(property)) {
-      if (rowIndex > 0 && row[property] && row[property] === tableData.value[rowIndex - 1][property]) {
+      const allow = columnIndex === 0 || row[property];
+      if (rowIndex > 0 && allow && row[property] === tableData.value[rowIndex - 1][property]) {
         return {
           rowspan: 0,
           colspan: 0
@@ -304,7 +305,7 @@ function useAppGridBase(c, props) {
       }
       let rowspan = 1;
       for (let i = rowIndex + 1; i < tableData.value.length; i++) {
-        if (row[property] && tableData.value[i][property] === row[property]) {
+        if (allow && tableData.value[i][property] === row[property]) {
           rowspan += 1;
         } else {
           break;
@@ -317,7 +318,7 @@ function useAppGridBase(c, props) {
     }
     if (colspankeys.length > 0 && colspankeys.includes(property)) {
       const preProperty = renderColumns.value[columnIndex - 1].codeName;
-      if (columnIndex > 0 && row[property] && colspankeys.includes(preProperty) && row[property] === row[preProperty]) {
+      if (columnIndex > 0 && colspankeys.includes(preProperty) && row[property] === row[preProperty]) {
         return {
           rowspan: 0,
           colspan: 0
@@ -326,7 +327,7 @@ function useAppGridBase(c, props) {
       let colspan = 1;
       for (let i = columnIndex + 1; i < renderColumns.value.length; i++) {
         const nextProperty = renderColumns.value[i].codeName;
-        if (row[property] && colspankeys.includes(nextProperty) && row[nextProperty] === row[property]) {
+        if (colspankeys.includes(nextProperty) && row[nextProperty] === row[property]) {
           colspan += 1;
         } else {
           break;
@@ -338,76 +339,12 @@ function useAppGridBase(c, props) {
       };
     }
   };
-  const cellMouseEnter = (row, column, cell) => {
-    const { rowspankeys = [] } = c.controlParams;
-    if (rowspankeys.length === 0) {
-      return;
-    }
-    let { rowSpan } = cell;
-    if (rowSpan && rowSpan > 1) {
-      let tableRow = cell.parentNode;
-      while (rowSpan > 1) {
-        if (tableRow && tableRow.nextSibling) {
-          tableRow.nextSibling.classList.add(
-            "hover-row"
-          );
-          tableRow = tableRow.nextSibling;
-        }
-        rowSpan -= 1;
-      }
-    } else {
-      const columnLenth = renderColumns.value.length;
-      let tableRow = cell.parentNode;
-      while (tableRow.children.length !== columnLenth) {
-        tableRow = tableRow.previousSibling;
-      }
-      for (let index = 0; index < tableRow.children.length; index++) {
-        const newCell = tableRow.children.item(index);
-        if (newCell.rowSpan > 1) {
-          newCell.classList.add("hover-cell");
-        }
-      }
-    }
-  };
-  const cellMouseLeave = (row, column, cell) => {
-    const { rowspankeys = [] } = c.controlParams;
-    if (rowspankeys.length === 0) {
-      return;
-    }
-    let { rowSpan } = cell;
-    if (rowSpan && rowSpan > 1) {
-      let tableRow = cell.parentNode;
-      while (rowSpan > 1) {
-        if (tableRow && tableRow.nextSibling) {
-          tableRow.nextSibling.classList.remove(
-            "hover-row"
-          );
-          tableRow = tableRow.nextSibling;
-        }
-        rowSpan -= 1;
-      }
-    } else {
-      const columnLenth = renderColumns.value.length;
-      let tableRow = cell.parentNode;
-      while (tableRow.children.length !== columnLenth) {
-        tableRow = tableRow.previousSibling;
-      }
-      for (let index = 0; index < tableRow.children.length; index++) {
-        const newCell = tableRow.children.item(index);
-        if (newCell.rowSpan > 1) {
-          newCell.classList.remove("hover-cell");
-        }
-      }
-    }
-  };
   return {
     tableData,
     renderColumns,
     defaultSort,
     summaryMethod,
-    spanMethod,
-    cellMouseEnter,
-    cellMouseLeave
+    spanMethod
   };
 }
 function useGridHeaderStyle(tableRef, ns) {

package/lib/control/grid/grid/grid.cjs

@@ -202,9 +202,7 @@ const GridControl = /* @__PURE__ */ vue.defineComponent({
       renderColumns,
       defaultSort,
       summaryMethod,
-      spanMethod,
-      cellMouseEnter,
-      cellMouseLeave
+      spanMethod
     } = gridControl_util.useAppGridBase(c, props);
     const {
       renderPopover
@@ -311,8 +309,6 @@ const GridControl = /* @__PURE__ */ vue.defineComponent({
       onPageChange,
       onPageSizeChange,
       onPageRefresh,
-      cellMouseEnter,
-      cellMouseLeave,
       handleRowClassName,
       handleHeaderCellClassName,
       renderNoData,
@@ -353,8 +349,6 @@ const GridControl = /* @__PURE__ */ vue.defineComponent({
         "data": this.tableData,
         "span-method": this.spanMethod,
         "onRowClick": this.onRowClick,
-        "onCellMouseEnter": this.cellMouseEnter,
-        "onCellMouseLeave": this.cellMouseLeave,
         "onRowDblclick": this.onDbRowClick,
         "onSelectionChange": this.onSelectionChange,
         "onSortChange": this.onSortChange,

package/lib/control/grid/grid/grid.css

@@ -1 +1 @@
-.ibiz-control-grid{--ibiz-control-grid-text-color:var(--ibiz-color-text-0);--ibiz-control-grid-bg-color:transparent;--ibiz-control-grid-padding:var(--ibiz-spacing-none);--ibiz-control-grid-cell-padding:calc(var(--ibiz-spacing-base-tight) / 2) var(--ibiz-spacing-base-tight);--ibiz-control-grid-selection-padding:var(--ibiz-spacing-base-loose);--ibiz-control-grid-row-edit-bg-color:var(--ibiz-color-fill-2);--ibiz-control-grid-row-bg-color:var(--ibiz-color-bg-1);--ibiz-control-grid-row-bg-color-2:var(--ibiz-color-bg-0);--ibiz-control-grid-row-hover-color:rgba(var(--ibiz-grey-1), 1);--ibiz-control-grid-row-select-color:var(--ibiz-color-primary-light-default);--ibiz-control-grid-row-expand-icon-margin:var(--ibiz-spacing-none) var(--ibiz-spacing-none) var(--ibiz-spacing-none) var(--ibiz-spacing-tight);--ibiz-control-grid-now-header-height:auto;--ibiz-control-grid-scrollbar-width:4px;--ibiz-control-grid-header-text-color:var(--ibiz-color-text-2);--ibiz-control-grid-header-cell-padding:var(--ibiz-control-grid-cell-padding);--ibiz-control-grid-header-height:auto;--ibiz-control-grid-header-bg-color:rgba(var(--ibiz-grey-1), 1);--ibiz-control-grid-header-font-size:var(--ibiz-font-size-regular);--ibiz-control-grid-header-font-weight:var(--ibiz-font-weight-regular);--ibiz-control-grid-content-text-color:var(--ibiz-control-grid-text-color);--ibiz-control-grid-content-row-height:48px;--ibiz-control-grid-page-text-color:var(--ibiz-color-text-2);--ibiz-control-grid-page-height:50px;--ibiz-control-grid-page-padding:var(--ibiz-spacing-none) var(--ibiz-spacing-base-tight);--ibiz-control-grid-footer-text-color:var(--ibiz-color-text-2);--ibiz-control-grid-footer-bg-color:rgba(var(--ibiz-grey-1), 1);--ibiz-control-grid-footer-font-size:var(--ibiz-font-size-regular);--ibiz-control-grid-footer-font-weight:var(--ibiz-font-weight-bold);position:relative;width:100%;height:100%;padding:var(--ibiz-control-grid-padding);background-color:var(--ibiz-control-grid-bg-color)}.ibiz-control-grid .el-table{--el-table-header-bg-color:var(--ibiz-control-grid-header-bg-color);--el-table-current-row-bg-color:var(--ibiz-control-grid-row-select-color);--el-table-border-color:transparent}.ibiz-control-grid.is-empty .el-scrollbar .el-scrollbar__view{height:100%}.ibiz-control-grid.is-empty .el-table__empty-text{display:inline-block;height:100%}.ibiz-control-grid .el-table--border .el-table__cell{border-right:none}.ibiz-control-grid .el-table-fixed-column--left,.ibiz-control-grid .el-table-fixed-column--right{--el-bg-color:transparent}.ibiz-control-grid .el-table thead.is-group th.el-table__cell{background:var(--ibiz-control-grid-header-bg-color)}.ibiz-control-grid.is-enable-page .ibiz-control-grid__table{height:calc(100% - var(--ibiz-control-grid-page-height))}.ibiz-control-grid.is-enable-group .el-table__indent{display:none}.ibiz-control-grid__table{width:100%;height:100%}.ibiz-control-grid__table .caret-wrapper{justify-content:center}.ibiz-control-grid__table .caret-wrapper>*+*{margin-top:var(--ibiz-spacing-super-tight)}.ibiz-control-grid__table .sort-caret{--el-text-color-placeholder:--ibiz-control-grid-header-text-color;position:initial;opacity:.6}.ibiz-control-grid__table.el-table .el-table__cell{padding:var(--ibiz-spacing-none)}.ibiz-control-grid__table.el-table .el-table__body-wrapper tr td{background:var(--ibiz-control-grid-row-bg-color)}.ibiz-control-grid__table.el-table .el-table__body-wrapper tr:nth-child(2n) td{background-color:var(--ibiz-control-grid-row-bg-color-2)}.ibiz-control-grid__table.el-table .el-table__body-wrapper tr:hover td{background-color:var(--ibiz-control-grid-row-hover-color)}.ibiz-control-grid__table.el-table .el-table__body-wrapper tr.current-row td{background-color:var(--el-table-current-row-bg-color)}.ibiz-control-grid__table.el-table .el-table__body-wrapper tr.editing-row td{background-color:var(--ibiz-control-grid-row-edit-bg-color)}.ibiz-control-grid__table .el-table__header-wrapper .cell{height:var(--ibiz-control-grid-header-height);padding:var(--ibiz-control-grid-header-cell-padding);font-size:var(--ibiz-control-grid-header-font-size);font-weight:var(--ibiz-control-grid-header-font-weight);color:var(--ibiz-control-grid-header-text-color);word-break:break-word;white-space:pre-wrap}.ibiz-control-grid__table .el-table__header-wrapper .el-table-column--selection .cell{padding:var(--ibiz-control-grid-selection-padding)}.ibiz-control-grid__table .el-table__header-wrapper .is-sortable.el-table__cell .cell{display:flex;align-items:center;justify-content:var(--ibiz-grid-column-justify-content)}.ibiz-control-grid__table .el-table__body-wrapper{color:var(--ibiz-control-grid-content-text-color);--ibiz-color-text-0:var(--ibiz-control-grid-content-text-color);--ibiz-color-text-1:var(--ibiz-control-grid-content-text-color);--ibiz-color-text-2:var(--ibiz-control-grid-content-text-color);--ibiz-color-text-3:var(--ibiz-control-grid-content-text-color);border-bottom:.1px solid var(--ibiz-color-border)}.ibiz-control-grid__table .el-table__body-wrapper .el-table__row{height:var(--ibiz-control-grid-content-row-height);cursor:pointer}.ibiz-control-grid__table .el-table__body-wrapper .el-table__row>td{height:0;padding:var(--ibiz-spacing-none)}.ibiz-control-grid__table .el-table__body-wrapper .el-table__row .el-table__expand-icon{margin:var(--ibiz-control-grid-row-expand-icon-margin)}@-moz-document url-prefix(){.ibiz-control-grid__table .el-table__body-wrapper .el-table__row>td{height:100%}}.ibiz-control-grid__table .el-table__body-wrapper .cell{display:flex;align-items:center;height:100%;padding:var(--ibiz-spacing-none)}.ibiz-control-grid__table .el-table__body-wrapper .el-table-column--selection .cell{padding:var(--ibiz-control-grid-selection-padding)}.ibiz-control-grid__table .el-table__cell.is-center{--ibiz-grid-column-text-align:center;--ibiz-grid-column-justify-content:center}.ibiz-control-grid__table .el-table__cell.is-left{--ibiz-grid-column-text-align:left;--ibiz-grid-column-justify-content:flex-start}.ibiz-control-grid__table .el-table__cell.is-right{--ibiz-grid-column-text-align:right;--ibiz-grid-column-justify-content:flex-end}.ibiz-control-grid__table .el-scrollbar__wrap{position:relative}.ibiz-control-grid__table .el-table__footer-wrapper tfoot td.el-table__cell{font-size:var(--ibiz-control-grid-footer-font-size);font-weight:var(--ibiz-control-grid-footer-font-weight);color:var(--ibiz-control-grid-footer-text-color);background-color:var(--ibiz-control-grid-footer-bg-color)}.ibiz-control-grid__table .el-table__footer-wrapper tfoot td.el-table__cell:first-child>div{display:inline;vertical-align:4px}.ibiz-control-grid__table .enable-order{position:relative;padding-left:var(--ibiz-spacing-base-tight);transition:transform .25s cubic-bezier(0,0,.2,1)}.ibiz-control-grid__table .enable-order .ibiz-control-grid__drag-icon{padding:var(--ibiz-spacing-none)!important}.ibiz-control-grid__table .enable-order .ibiz-control-grid__drag-icon .cell{display:none}.ibiz-control-grid__table .enable-order:hover .ibiz-control-grid__drag-icon .cell{display:flex}.ibiz-control-grid__table .el-scrollbar__bar.is-horizontal{height:var(--ibiz-control-grid-scrollbar-width)}.ibiz-control-grid__table .el-scrollbar__bar.is-vertical{width:var(--ibiz-control-grid-scrollbar-width)}.ibiz-control-grid__load-more-button{padding:var(--ibiz-control-grid-header-cell-padding);text-align:center}.ibiz-control-grid .el-table td.el-table__cell,.ibiz-control-grid .el-table th.el-table__cell.is-leaf{border-bottom:none}.ibiz-control-grid .ibiz-pagination{--ibiz-pagination-height:var(--ibiz-control-grid-page-height);--ibiz-pagination-text-color:var(--ibiz-control-grid-text-color);--ibiz-pagination-padding:var(--ibiz-control-grid-page-padding)}.ibiz-control-grid.is-single-select .el-table__header-wrapper .el-table__header thead>tr th:nth-child(1){padding-left:var(--ibiz-spacing-tight)}.ibiz-control-grid.is-single-select .el-table__body-wrapper .el-table__body tbody>tr td:nth-child(1){padding-left:var(--ibiz-spacing-tight)}.ibiz-control-grid.is-enable-customized .el-table__header-wrapper .el-table__header thead>tr th:last-child{padding-right:var(--ibiz-spacing-base-loose)}.ibiz-control-grid.is-enable-customized .ibiz-control-grid-setting-box{display:flex;align-items:center;justify-content:flex-start;position:absolute;top:0;right:0;z-index:1;height:var(--ibiz-control-grid-now-header-height);padding-right:var(--ibiz-spacing-extra-tight);background-color:var(--ibiz-control-grid-header-bg-color)}.ibiz-control-grid.is-enable-customized .ibiz-grid-setting{cursor:pointer}.ibiz-control-grid .el-table .el-table__body tr.hover-row.current-row>td.el-table__cell,.ibiz-control-grid .el-table .el-table__body tr.hover-row.el-table__row--striped.current-row>td.el-table__cell,.ibiz-control-grid .el-table .el-table__body tr.hover-row.el-table__row--striped>td.el-table__cell,.ibiz-control-grid .el-table .el-table__body tr.hover-row>td.el-table__cell{background-color:var(--el-table-row-hover-bg-color)}.ibiz-control-grid .el-table .el-table__body tr.current-row td:not([rowspan="1"]){background-color:var(--ibiz-control-grid-row-bg-color)}.ibiz-control-grid .el-table .el-table__body-wrapper .el-table__body tr.el-table__row>td.hover-cell{background-color:var(--el-table-row-hover-bg-color)}.ibiz-control-grid-quick-toolbar{justify-content:center}.ibiz-control-grid-batch-toolbar{position:absolute;top:0;left:54px;z-index:99;display:none;width:calc(100% - 54px);height:var(--ibiz-control-grid-now-header-height);font-size:var(--ibiz-font-size-regular);font-weight:var(--ibiz-font-weight-regular);background-color:var(--ibiz-control-grid-header-bg-color)}.ibiz-control-grid-batch-toolbar.is-show{display:flex;align-items:center;justify-content:flex-start}.ibiz-control-grid-batch-toolbar .ibiz-control-grid-batch-toolbar-separator{padding:0 var(--ibiz-spacing-base-tight)}.ibiz-control-grid-batch-toolbar .ibiz-control-grid-batch-toolbar-content{height:100%;display:flex;align-items:center;justify-content:flex-start}
+.ibiz-control-grid{--ibiz-control-grid-text-color:var(--ibiz-color-text-0);--ibiz-control-grid-bg-color:transparent;--ibiz-control-grid-padding:var(--ibiz-spacing-none);--ibiz-control-grid-cell-padding:calc(var(--ibiz-spacing-base-tight) / 2) var(--ibiz-spacing-base-tight);--ibiz-control-grid-selection-padding:var(--ibiz-spacing-base-loose);--ibiz-control-grid-row-edit-bg-color:var(--ibiz-color-fill-2);--ibiz-control-grid-row-bg-color:var(--ibiz-color-bg-1);--ibiz-control-grid-row-bg-color-2:var(--ibiz-color-bg-0);--ibiz-control-grid-row-hover-color:rgba(var(--ibiz-grey-1), 1);--ibiz-control-grid-row-select-color:var(--ibiz-color-primary-light-default);--ibiz-control-grid-row-expand-icon-margin:var(--ibiz-spacing-none) var(--ibiz-spacing-none) var(--ibiz-spacing-none) var(--ibiz-spacing-tight);--ibiz-control-grid-now-header-height:auto;--ibiz-control-grid-scrollbar-width:4px;--ibiz-control-grid-scrollbar-bg-color:var(--ibiz-color-fill-2);--ibiz-control-grid-scrollbar-bg-hover-opacity:0.5;--ibiz-control-grid-scrollbar-bg-hover-color:var(--ibiz-color-fill-2);--ibiz-control-grid-header-text-color:var(--ibiz-color-text-2);--ibiz-control-grid-header-cell-padding:var(--ibiz-control-grid-cell-padding);--ibiz-control-grid-header-height:auto;--ibiz-control-grid-header-bg-color:rgba(var(--ibiz-grey-1), 1);--ibiz-control-grid-header-font-size:var(--ibiz-font-size-regular);--ibiz-control-grid-header-font-weight:var(--ibiz-font-weight-regular);--ibiz-control-grid-content-text-color:var(--ibiz-control-grid-text-color);--ibiz-control-grid-content-row-height:48px;--ibiz-control-grid-page-text-color:var(--ibiz-color-text-2);--ibiz-control-grid-page-height:50px;--ibiz-control-grid-page-padding:var(--ibiz-spacing-none) var(--ibiz-spacing-base-tight);--ibiz-control-grid-footer-text-color:var(--ibiz-color-text-2);--ibiz-control-grid-footer-bg-color:rgba(var(--ibiz-grey-1), 1);--ibiz-control-grid-footer-font-size:var(--ibiz-font-size-regular);--ibiz-control-grid-footer-font-weight:var(--ibiz-font-weight-bold);position:relative;width:100%;height:100%;padding:var(--ibiz-control-grid-padding);background-color:var(--ibiz-control-grid-bg-color)}.ibiz-control-grid .el-table{--el-table-header-bg-color:var(--ibiz-control-grid-header-bg-color);--el-table-current-row-bg-color:var(--ibiz-control-grid-row-select-color);--el-table-border-color:transparent}.ibiz-control-grid.is-empty .el-scrollbar .el-scrollbar__view{height:100%}.ibiz-control-grid.is-empty .el-table__empty-text{display:inline-block;height:100%}.ibiz-control-grid .el-table--border .el-table__cell{border-right:none}.ibiz-control-grid .el-table-fixed-column--left,.ibiz-control-grid .el-table-fixed-column--right{--el-bg-color:transparent}.ibiz-control-grid .el-table thead.is-group th.el-table__cell{background:var(--ibiz-control-grid-header-bg-color)}.ibiz-control-grid.is-enable-page .ibiz-control-grid__table{height:calc(100% - var(--ibiz-control-grid-page-height))}.ibiz-control-grid.is-enable-group .el-table__indent{display:none}.ibiz-control-grid__table{width:100%;height:100%}.ibiz-control-grid__table .caret-wrapper{justify-content:center}.ibiz-control-grid__table .caret-wrapper>*+*{margin-top:var(--ibiz-spacing-super-tight)}.ibiz-control-grid__table .sort-caret{--el-text-color-placeholder:--ibiz-control-grid-header-text-color;position:initial;opacity:.6}.ibiz-control-grid__table.el-table .el-table__cell{padding:var(--ibiz-spacing-none)}.ibiz-control-grid__table.el-table .el-table__body-wrapper tr td{background:var(--ibiz-control-grid-row-bg-color)}.ibiz-control-grid__table.el-table .el-table__body-wrapper tr:nth-child(2n) td{background-color:var(--ibiz-control-grid-row-bg-color-2)}.ibiz-control-grid__table.el-table .el-table__body-wrapper tr:hover td{background-color:var(--ibiz-control-grid-row-hover-color)}.ibiz-control-grid__table.el-table .el-table__body-wrapper tr.current-row td{background-color:var(--el-table-current-row-bg-color)}.ibiz-control-grid__table.el-table .el-table__body-wrapper tr.editing-row td{background-color:var(--ibiz-control-grid-row-edit-bg-color)}.ibiz-control-grid__table .el-table__header-wrapper .cell{height:var(--ibiz-control-grid-header-height);padding:var(--ibiz-control-grid-header-cell-padding);font-size:var(--ibiz-control-grid-header-font-size);font-weight:var(--ibiz-control-grid-header-font-weight);color:var(--ibiz-control-grid-header-text-color);word-break:break-word;white-space:pre-wrap}.ibiz-control-grid__table .el-table__header-wrapper .el-table-column--selection .cell{padding:var(--ibiz-control-grid-selection-padding)}.ibiz-control-grid__table .el-table__header-wrapper .is-sortable.el-table__cell .cell{display:flex;align-items:center;justify-content:var(--ibiz-grid-column-justify-content)}.ibiz-control-grid__table .el-table__body-wrapper{color:var(--ibiz-control-grid-content-text-color);--ibiz-color-text-0:var(--ibiz-control-grid-content-text-color);--ibiz-color-text-1:var(--ibiz-control-grid-content-text-color);--ibiz-color-text-2:var(--ibiz-control-grid-content-text-color);--ibiz-color-text-3:var(--ibiz-control-grid-content-text-color);border-bottom:.1px solid var(--ibiz-color-border)}.ibiz-control-grid__table .el-table__body-wrapper .el-table__row{height:var(--ibiz-control-grid-content-row-height);cursor:pointer}.ibiz-control-grid__table .el-table__body-wrapper .el-table__row>td{height:0;padding:var(--ibiz-spacing-none)}.ibiz-control-grid__table .el-table__body-wrapper .el-table__row .el-table__expand-icon{margin:var(--ibiz-control-grid-row-expand-icon-margin)}@-moz-document url-prefix(){.ibiz-control-grid__table .el-table__body-wrapper .el-table__row>td{height:100%}}.ibiz-control-grid__table .el-table__body-wrapper .cell{display:flex;align-items:center;height:100%;padding:var(--ibiz-spacing-none)}.ibiz-control-grid__table .el-table__body-wrapper .el-table-column--selection .cell{padding:var(--ibiz-control-grid-selection-padding)}.ibiz-control-grid__table .el-table__cell.is-center{--ibiz-grid-column-text-align:center;--ibiz-grid-column-justify-content:center}.ibiz-control-grid__table .el-table__cell.is-left{--ibiz-grid-column-text-align:left;--ibiz-grid-column-justify-content:flex-start}.ibiz-control-grid__table .el-table__cell.is-right{--ibiz-grid-column-text-align:right;--ibiz-grid-column-justify-content:flex-end}.ibiz-control-grid__table .el-scrollbar__wrap{position:relative}.ibiz-control-grid__table .el-table__footer-wrapper tfoot td.el-table__cell{font-size:var(--ibiz-control-grid-footer-font-size);font-weight:var(--ibiz-control-grid-footer-font-weight);color:var(--ibiz-control-grid-footer-text-color);background-color:var(--ibiz-control-grid-footer-bg-color)}.ibiz-control-grid__table .el-table__footer-wrapper tfoot td.el-table__cell:first-child>div{display:inline;vertical-align:4px}.ibiz-control-grid__table .enable-order{position:relative;padding-left:var(--ibiz-spacing-base-tight);transition:transform .25s cubic-bezier(0,0,.2,1)}.ibiz-control-grid__table .enable-order .ibiz-control-grid__drag-icon{padding:var(--ibiz-spacing-none)!important}.ibiz-control-grid__table .enable-order .ibiz-control-grid__drag-icon .cell{display:none}.ibiz-control-grid__table .enable-order:hover .ibiz-control-grid__drag-icon .cell{display:flex}.ibiz-control-grid__table .el-scrollbar__bar.is-horizontal{height:var(--ibiz-control-grid-scrollbar-width)}.ibiz-control-grid__table .el-scrollbar__bar.is-vertical{width:var(--ibiz-control-grid-scrollbar-width)}.ibiz-control-grid__table .el-scrollbar__thumb{background-color:var(--ibiz-control-grid-scrollbar-bg-color)}.ibiz-control-grid__table .el-scrollbar__thumb:hover{background-color:var(--ibiz-control-grid-scrollbar-bg-hover-color);opacity:var(--ibiz-control-grid-scrollbar-bg-hover-opacity)}.ibiz-control-grid__load-more-button{padding:var(--ibiz-control-grid-header-cell-padding);text-align:center}.ibiz-control-grid .el-table td.el-table__cell,.ibiz-control-grid .el-table th.el-table__cell.is-leaf{border-bottom:none}.ibiz-control-grid .ibiz-pagination{--ibiz-pagination-height:var(--ibiz-control-grid-page-height);--ibiz-pagination-text-color:var(--ibiz-control-grid-text-color);--ibiz-pagination-padding:var(--ibiz-control-grid-page-padding)}.ibiz-control-grid.is-single-select .el-table__header-wrapper .el-table__header thead>tr th:nth-child(1){padding-left:var(--ibiz-spacing-tight)}.ibiz-control-grid.is-single-select .el-table__body-wrapper .el-table__body tbody>tr td:nth-child(1){padding-left:var(--ibiz-spacing-tight)}.ibiz-control-grid.is-enable-customized .el-table__header-wrapper .el-table__header thead>tr th:last-child{padding-right:var(--ibiz-spacing-base-loose)}.ibiz-control-grid.is-enable-customized .ibiz-control-grid-setting-box{display:flex;align-items:center;justify-content:flex-start;position:absolute;top:0;right:0;z-index:1;height:var(--ibiz-control-grid-now-header-height);padding-right:var(--ibiz-spacing-extra-tight);background-color:var(--ibiz-control-grid-header-bg-color)}.ibiz-control-grid.is-enable-customized .ibiz-grid-setting{cursor:pointer}.ibiz-control-grid-quick-toolbar{justify-content:center}.ibiz-control-grid-batch-toolbar{position:absolute;top:0;left:54px;z-index:99;display:none;width:calc(100% - 54px);height:var(--ibiz-control-grid-now-header-height);font-size:var(--ibiz-font-size-regular);font-weight:var(--ibiz-font-weight-regular);background-color:var(--ibiz-control-grid-header-bg-color)}.ibiz-control-grid-batch-toolbar.is-show{display:flex;align-items:center;justify-content:flex-start}.ibiz-control-grid-batch-toolbar .ibiz-control-grid-batch-toolbar-separator{padding:0 var(--ibiz-spacing-base-tight)}.ibiz-control-grid-batch-toolbar .ibiz-control-grid-batch-toolbar-content{height:100%;display:flex;align-items:center;justify-content:flex-start}

package/lib/control/grid/grid-column/grid-field-column/grid-field-column.cjs

@@ -7,6 +7,7 @@ var vue3Util = require('@ibiz-template/vue3-util');
 require('./grid-field-column.css');
 var runtime = require('@ibiz-template/runtime');
 var ramda = require('ramda');
+var core = require('@ibiz-template/core');
 
 "use strict";
 const GridFieldColumn = /* @__PURE__ */ vue.defineComponent({
@@ -125,12 +126,12 @@ const GridFieldColumn = /* @__PURE__ */ vue.defineComponent({
         "value": this.codeListValue,
         "onClick": this.onTextClick,
         "onInfoTextChange": this.onInfoTextChange,
-        "title": this.tooltip
+        "title": core.showTitle(this.tooltip)
       }, null);
     } else {
       content = vue.createVNode("span", {
         "class": this.ns.e("text"),
-        "title": this.tooltip,
+        "title": core.showTitle(this.tooltip),
         "onClick": this.onTextClick
       }, [this.formatValue, this.fieldValue != null && c.model.unitName, this.percent && "(".concat(this.percent, ")")]);
     }

package/lib/control/kanban/kanban.cjs

@@ -298,7 +298,7 @@ const KanbanControl = /* @__PURE__ */ vue.defineComponent({
       }, {
         default: () => [vue.createVNode("ion-icon", {
           "name": "add-outline",
-          "title": ibiz.i18n.t("app.newlyBuild")
+          "title": core.showTitle(ibiz.i18n.t("app.newlyBuild"))
         }, null)]
       }), showActionBar && vue.createVNode(vue.resolveComponent("el-dropdown"), {
         "class": ns.be("group", "header-actions"),

package/lib/control/list/list.cjs

@@ -6,6 +6,7 @@ var lodashEs = require('lodash-es');
 var qxUtil = require('qx-util');
 var runtime = require('@ibiz-template/runtime');
 require('./list.css');
+var core = require('@ibiz-template/core');
 require('../../util/index.cjs');
 var usePagination = require('../../util/pagination/use-pagination.cjs');
 
@@ -127,7 +128,7 @@ const ListControl = /* @__PURE__ */ vue.defineComponent({
     const renderGroup = (group) => {
       const panel = props.modelData.itemLayoutPanel;
       return vue.createVNode(vue.resolveComponent("el-collapse-item"), {
-        "title": group.caption,
+        "title": core.showTitle(group.caption),
         "class": ns.be("group-content", "item")
       }, {
         default: () => [group.children.length > 0 ? group.children.map((item) => {

package/lib/control/report-panel/report-panel.cjs

@@ -37,6 +37,10 @@ const ReportPanelControl = /* @__PURE__ */ vue.defineComponent({
     const ns = vue3Util.useNamespace("control-".concat(c.model.controlType.toLowerCase()));
     const isInit = vue.ref(false);
     vue.onMounted(() => {
+      if (window.BI_REGISTER_STATE) {
+        isInit.value = true;
+        return;
+      }
       const importBIReport = () => import('@ibiz-template-plugin/bi-report');
       importBIReport().then((value) => {
         const biReport = value.default;
@@ -44,6 +48,7 @@ const ReportPanelControl = /* @__PURE__ */ vue.defineComponent({
         vue3Util.AppHooks.createApp.tap((_, app) => {
           app.use(biReport);
         });
+        window.BI_REGISTER_STATE = true;
         isInit.value = true;
       });
     });

package/lib/control/search-bar/search-bar.cjs

@@ -4,6 +4,7 @@ var vue = require('vue');
 var vue3Util = require('@ibiz-template/vue3-util');
 require('./search-bar.css');
 var runtime = require('@ibiz-template/runtime');
+var core = require('@ibiz-template/core');
 
 "use strict";
 const SearchBarControl = /* @__PURE__ */ vue.defineComponent({
@@ -139,7 +140,7 @@ const SearchBarControl = /* @__PURE__ */ vue.defineComponent({
           }, [groupItem.caption]);
         })])), this.c.model.enableGroup && this.c.isBackendSearchGroup && vue.createVNode(vue.resolveComponent("el-button"), {
           "class": this.ns.b("save"),
-          "title": ibiz.env.enableTitle ? ibiz.i18n.t("control.searchBar.saveGroup") : void 0,
+          "title": core.showTitle(ibiz.i18n.t("control.searchBar.saveGroup")),
           "onClick": this.handleSave
         }, {
           default: () => [vue.createVNode("ion-icon", {
@@ -163,7 +164,7 @@ const SearchBarControl = /* @__PURE__ */ vue.defineComponent({
         }), this.c.enableFilter && vue.createVNode(vue.resolveComponent("el-button"), {
           "ref": "filterButtonRef",
           "type": "primary",
-          "title": ibiz.env.enableTitle ? ibiz.i18n.t("control.searchBar.filter") : void 0,
+          "title": core.showTitle(ibiz.i18n.t("control.searchBar.filter")),
           "class": this.ns.b("filter"),
           "onClick": () => this.triggerFilter()
         }, {

package/lib/control/search-bar/search-groups/search-groups.cjs

@@ -242,7 +242,7 @@ const SearchGroups = /* @__PURE__ */ vue.defineComponent({
     }), vue.createVNode(vue.resolveComponent("el-dialog"), {
       "modelValue": this.newDialogVisible,
       "onUpdate:modelValue": ($event) => this.newDialogVisible = $event,
-      "title": ibiz.i18n.t("control.searchBar.searchGroups.newGroup"),
+      "title": core.showTitle(ibiz.i18n.t("control.searchBar.searchGroups.newGroup")),
       "modal-class": this.ns.b("new-dialog")
     }, {
       default: () => {
@@ -283,7 +283,7 @@ const SearchGroups = /* @__PURE__ */ vue.defineComponent({
     }), vue.createVNode(vue.resolveComponent("el-dialog"), {
       "modelValue": this.editDialogVisible,
       "onUpdate:modelValue": ($event) => this.editDialogVisible = $event,
-      "title": ibiz.i18n.t("control.searchBar.searchGroups.editGroup"),
+      "title": core.showTitle(ibiz.i18n.t("control.searchBar.searchGroups.editGroup")),
       "modal-class": this.ns.b("edit-dialog")
     }, {
       default: () => {
@@ -324,7 +324,7 @@ const SearchGroups = /* @__PURE__ */ vue.defineComponent({
     }), vue.createVNode(vue.resolveComponent("el-dialog"), {
       "modelValue": this.manageDialogVisible,
       "onUpdate:modelValue": ($event) => this.manageDialogVisible = $event,
-      "title": ibiz.i18n.t("control.searchBar.searchGroups.groupManage"),
+      "title": core.showTitle(ibiz.i18n.t("control.searchBar.searchGroups.groupManage")),
       "modal-class": this.ns.b("manage-dialog")
     }, {
       default: () => [vue.createVNode("div", {
@@ -385,14 +385,14 @@ const SearchGroups = /* @__PURE__ */ vue.defineComponent({
           }, [vue.createVNode(vue.resolveComponent("el-link"), {
             "type": "primary",
             "disabled": !groupItem.saved || groupItem.noEdit,
-            "title": this.editLinkTitle(groupItem),
+            "title": core.showTitle(this.editLinkTitle(groupItem)),
             "onClick": () => this.editGroup(groupItem)
           }, _isSlot(_slot5 = ibiz.i18n.t("app.edit")) ? _slot5 : {
             default: () => [_slot5]
           }), vue.createVNode(vue.resolveComponent("el-link"), {
             "type": "danger",
             "disabled": !groupItem.saved,
-            "title": !groupItem.saved ? ibiz.i18n.t("control.searchBar.searchGroups.savePrompt") : "",
+            "title": core.showTitle(!groupItem.saved ? ibiz.i18n.t("control.searchBar.searchGroups.savePrompt") : ""),
             "onClick": () => this.removeGroup(groupItem)
           }, _isSlot(_slot6 = ibiz.i18n.t("app.delete")) ? _slot6 : {
             default: () => [_slot6]

package/lib/control/toolbar/export-excel/export-excel.cjs

@@ -3,6 +3,7 @@
 var vue = require('vue');
 var vue3Util = require('@ibiz-template/vue3-util');
 require('./export-excel.css');
+var core = require('@ibiz-template/core');
 
 "use strict";
 function _isSlot(s) {
@@ -64,7 +65,7 @@ const IBizExportExcel = /* @__PURE__ */ vue.defineComponent({
       title: () => {
         let _slot;
         return vue.createVNode(vue.resolveComponent("el-button"), {
-          "title": ibiz.env.enableTitle ? this.item.tooltip : void 0,
+          "title": core.showTitle(this.item.tooltip),
           "size": this.$props.size,
           "class": this.ns.b("submenu-button")
         }, _isSlot(_slot = this.btnContent(this.item)) ? _slot : {
@@ -139,7 +140,7 @@ const IBizExportExcel = /* @__PURE__ */ vue.defineComponent({
       default: () => {
         let _slot6;
         return vue.createVNode(vue.resolveComponent("el-button"), {
-          "title": ibiz.env.enableTitle ? this.item.tooltip : void 0,
+          "title": core.showTitle(this.item.tooltip),
           "size": this.$props.size,
           "class": this.ns.e("button")
         }, _isSlot(_slot6 = this.btnContent(this.item)) ? _slot6 : {

package/lib/control/toolbar/short-cut-button/short-cut-button.cjs

@@ -3,6 +3,7 @@
 var vue = require('vue');
 var vue3Util = require('@ibiz-template/vue3-util');
 require('./short-cut-button.css');
+var core = require('@ibiz-template/core');
 
 "use strict";
 const IBizShortCutButton = /* @__PURE__ */ vue.defineComponent({
@@ -51,10 +52,7 @@ const IBizShortCutButton = /* @__PURE__ */ vue.defineComponent({
     return vue.createVNode("div", {
       "class": [this.ns.b(), this.ns.is("short-cut", this.isShortCut)]
     }, [vue.createVNode(vue.resolveComponent("el-button"), {
-      "title": (
-        // eslint-disable-next-line no-nested-ternary
-        ibiz.env.enableTitle ? this.isShortCut ? "".concat(ibiz.i18n.t("app.cancel")).concat(this.item.tooltip) : this.item.tooltip : void 0
-      ),
+      "title": core.showTitle(this.isShortCut ? "".concat(ibiz.i18n.t("app.cancel")).concat(this.item.tooltip) : this.item.tooltip),
       "size": this.size,
       "text": Object.is(this.buttonType, "inverse"),
       "type": this.buttonType,

package/lib/control/toolbar/toolbar.cjs

@@ -6,6 +6,7 @@ var runtime = require('@ibiz-template/runtime');
 var exportExcel = require('./export-excel/export-excel.cjs');
 var shortCutButton = require('./short-cut-button/short-cut-button.cjs');
 require('./toolbar.css');
+var core = require('@ibiz-template/core');
 
 "use strict";
 function _isSlot(s) {
@@ -60,11 +61,20 @@ const ToolbarControl = /* @__PURE__ */ vue.defineComponent({
     var _a;
     const c = vue3Util.useControlController((...args) => new runtime.ToolbarController(...args));
     const ns = vue3Util.useNamespace("control-".concat(c.model.controlType.toLowerCase()));
+    const ns2 = vue3Util.useNamespace("control-".concat(c.model.controlType.toLowerCase(), "-actions"));
     const btnSize = vue.ref("default");
     const toolbarStyle = (_a = c.model.toolbarStyle) == null ? void 0 : _a.toLowerCase();
     const handleClick = async (item, event, params) => {
       await c.onItemClick(item, event, params);
     };
+    const handleActionClick = async (item, event, params) => {
+      const tempItem = {};
+      Object.assign(tempItem, {
+        ...item,
+        itemType: item.detailType
+      });
+      await handleClick(tempItem, event, params);
+    };
     const renderExtraButtons = (extraButtons) => {
       return extraButtons.map((button) => {
         let _slot;
@@ -72,7 +82,7 @@ const ToolbarControl = /* @__PURE__ */ vue.defineComponent({
           "key": button.id,
           "class": [ns.e("item")]
         }, [vue.createVNode(vue.resolveComponent("el-button"), {
-          "title": ibiz.env.enableTitle ? button.tooltip : void 0,
+          "title": core.showTitle(button.tooltip),
           "size": btnSize.value,
           "onClick": (e) => handleClick(button, e)
         }, _isSlot(_slot = btnContent(button)) ? _slot : {
@@ -102,7 +112,7 @@ const ToolbarControl = /* @__PURE__ */ vue.defineComponent({
         "class": [ns.b("submenu"), ns.em("item", groupButtonStyle.toLowerCase()), calcCssName(item)],
         "index": item.id,
         "disabled": pdisabled,
-        "title": item.tooltip,
+        "title": core.showTitle(item.tooltip),
         "popper-class": [ns.b("submenu-popper"), ns.bm("submenu-popper", toolbarStyle), ns.em("submenu-popper", groupButtonStyle.toLowerCase()), ns.bm("submenu-popper", calcCssName(item))]
       }, {
         default: () => {
@@ -129,7 +139,7 @@ const ToolbarControl = /* @__PURE__ */ vue.defineComponent({
             if (item2.itemType === "RAWITEM") {
               return vue.createVNode(vue.resolveComponent("el-menu-item"), {
                 "index": "menuitem".concat(item2.id),
-                "title": item2.tooltip
+                "title": core.showTitle(item2.tooltip)
               }, {
                 default: () => [vue.createVNode(vue.resolveComponent("iBizRawItem"), {
                   "rawItem": item2,
@@ -157,7 +167,7 @@ const ToolbarControl = /* @__PURE__ */ vue.defineComponent({
                 "class": [ns.is("loading", c.state.buttonsState[item2.id].loading), ns.em("item", buttonType), calcCssName(item2)],
                 "index": "menuitem".concat(item2.id),
                 "disabled": c.state.buttonsState[item2.id].disabled,
-                "title": item2.tooltip,
+                "title": core.showTitle(item2.tooltip),
                 "onClick": (e) => handleClick(item2, e)
               }, {
                 default: () => [vue.createVNode(vue.resolveComponent("el-button"), {
@@ -184,8 +194,128 @@ const ToolbarControl = /* @__PURE__ */ vue.defineComponent({
         }
       });
     };
+    const renderActionButton = (detail) => {
+      if (c.state.buttonsState[detail.id].visible) {
+        let _slot4;
+        return [vue.createVNode(vue.resolveComponent("el-button"), {
+          "title": core.showTitle(detail.caption),
+          "size": btnSize.value,
+          "class": [calcCssName(detail)],
+          "loading": c.state.buttonsState[detail.id].loading,
+          "disabled": c.state.buttonsState[detail.id].disabled,
+          "onClick": (e) => handleActionClick(detail, e)
+        }, _isSlot(_slot4 = btnContent(detail)) ? _slot4 : {
+          default: () => [_slot4]
+        })];
+      }
+      return null;
+    };
+    const renderDropdownItem = (detail) => {
+      if (c.state.buttonsState[detail.id].visible) {
+        let _slot5;
+        const disabled = c.state.buttonsState[detail.id].disabled;
+        return vue.createVNode(vue.resolveComponent("el-dropdown-item"), {
+          "class": [ns2.be("dropdown-popper", "dropdown-item"), ns2.is("disabled", disabled)]
+        }, _isSlot(_slot5 = renderActionButton(detail)) ? _slot5 : {
+          default: () => [_slot5]
+        });
+      }
+      return null;
+    };
+    const renderActionGroupItems = (item) => {
+      const {
+        uiactionGroup
+      } = item;
+      if (uiactionGroup && uiactionGroup.uiactionGroupDetails) {
+        const {
+          uiactionGroupDetails
+        } = uiactionGroup;
+        const enableDropdown = uiactionGroupDetails.length > 0;
+        const groupButtonStyle = item.buttonStyle || "";
+        return vue.createVNode(vue.resolveComponent("el-dropdown"), {
+          "popper-class": [ns2.b("dropdown-popper"), ns2.bm("dropdown-popper", toolbarStyle), ns2.em("dropdown-popper", groupButtonStyle.toLowerCase()), ns2.bm("dropdown-popper", calcCssName(item))]
+        }, {
+          default: () => renderActionButton(item),
+          dropdown: () => {
+            let _slot6;
+            return enableDropdown && vue.createVNode(vue.resolveComponent("el-dropdown-menu"), null, _isSlot(_slot6 = uiactionGroupDetails.map((detail) => renderDropdownItem(detail))) ? _slot6 : {
+              default: () => [_slot6]
+            });
+          }
+        });
+      }
+      return null;
+    };
+    const getFirstIndex = (details, index) => {
+      const firstItem = details.slice(index, 1);
+      if (firstItem[0]) {
+        if (c.state.buttonsState[firstItem[0].id].visible) {
+          return index;
+        }
+        return getFirstIndex(details, index + 1);
+      }
+      return -1;
+    };
+    const renderActionGroupItemx = (item) => {
+      const {
+        uiactionGroup
+      } = item;
+      if (uiactionGroup && uiactionGroup.uiactionGroupDetails) {
+        const {
+          uiactionGroupDetails
+        } = uiactionGroup;
+        const firstIndex = getFirstIndex(uiactionGroupDetails, 0);
+        if (firstIndex !== -1) {
+          const firstItem = uiactionGroupDetails.slice(firstIndex, 1);
+          const remainders = uiactionGroupDetails.slice(firstIndex + 1);
+          const enableDropdown = remainders.length > 0;
+          const groupButtonStyle = item.buttonStyle || "";
+          return vue.createVNode(vue.resolveComponent("el-dropdown"), {
+            "split-button": enableDropdown,
+            "popper-class": [ns2.b("dropdown-popper"), ns2.bm("dropdown-popper", toolbarStyle), ns2.em("dropdown-popper", groupButtonStyle.toLowerCase()), ns2.bm("dropdown-popper", calcCssName(item))]
+          }, {
+            default: () => renderActionButton(firstItem[0]),
+            dropdown: () => {
+              let _slot7;
+              return enableDropdown && vue.createVNode(vue.resolveComponent("el-dropdown-menu"), null, _isSlot(_slot7 = remainders.map((detail) => renderDropdownItem(detail))) ? _slot7 : {
+                default: () => [_slot7]
+              });
+            }
+          });
+        }
+      }
+      return null;
+    };
+    const renderActionGroupItem = (item) => {
+      const {
+        uiactionGroup
+      } = item;
+      if (uiactionGroup && uiactionGroup.uiactionGroupDetails) {
+        const {
+          uiactionGroupDetails
+        } = uiactionGroup;
+        return uiactionGroupDetails.map((detail) => vue.createVNode("div", {
+          "class": ns2.e("item-deuiaction")
+        }, [renderActionButton(detail)]));
+      }
+      return null;
+    };
+    const renderActionGroup = (item) => {
+      const {
+        groupExtractMode
+      } = item;
+      switch (groupExtractMode) {
+        case "ITEMS":
+          return renderActionGroupItems(item);
+        case "ITEMX":
+          return renderActionGroupItemx(item);
+        case "ITEM":
+        default:
+          return renderActionGroupItem(item);
+      }
+    };
     const renderToolbarItem = (item) => {
-      var _a2, _b;
+      var _a2, _b, _c;
       const itemId = item.id;
       const visible = (_a2 = c.state.buttonsState[itemId]) == null ? void 0 : _a2.visible;
       const provider = c.itemProviders[itemId];
@@ -216,7 +346,7 @@ const ToolbarControl = /* @__PURE__ */ vue.defineComponent({
         }, null)]);
       }
       if (item.itemType === "DEUIACTION") {
-        let _slot4;
+        let _slot8;
         const actionId = item.uiactionId;
         const buttonType = (_b = item.buttonStyle) == null ? void 0 : _b.toLowerCase();
         if (actionId === "exportexcel") {
@@ -245,27 +375,34 @@ const ToolbarControl = /* @__PURE__ */ vue.defineComponent({
           "key": itemId,
           "class": [ns.e("item"), ns.e("item-deuiaction"), ns.em("item", buttonType), calcCssName(item), ns.is("loading", c.state.buttonsState[itemId].loading)]
         }, [vue.createVNode(vue.resolveComponent("el-button"), {
-          "title": ibiz.env.enableTitle ? item.tooltip : void 0,
+          "title": core.showTitle(item.tooltip),
           "size": btnSize.value,
           "text": Object.is(buttonType, "inverse"),
           "type": buttonType,
           "loading": c.state.buttonsState[itemId].loading,
           "disabled": c.state.buttonsState[itemId].disabled,
           "onClick": (e) => handleClick(item, e)
-        }, _isSlot(_slot4 = btnContent(item)) ? _slot4 : {
-          default: () => [_slot4]
+        }, _isSlot(_slot8 = btnContent(item)) ? _slot8 : {
+          default: () => [_slot8]
         })]);
       }
       if (item.itemType === "ITEMS") {
-        let _slot5;
-        const groupButtonStyle = item.buttonStyle || "";
+        let _slot9;
+        const groupItem = item;
+        const groupButtonStyle = groupItem.buttonStyle || "";
+        if (groupItem.groupExtractMode && groupItem.uiactionGroup) {
+          const extractName = "extract-mode-".concat(((_c = groupItem.groupExtractMode) == null ? void 0 : _c.toLowerCase()) || "item");
+          return vue.createVNode("div", {
+            "class": [ns2.b(), ns2.e(extractName), ns2.em("item", groupButtonStyle.toLowerCase()), calcCssName(item)]
+          }, [renderActionGroup(item)]);
+        }
         return vue.createVNode(vue.resolveComponent("el-menu"), {
           "mode": "horizontal",
           "class": [ns.e("menu"), ns.em("menu", groupButtonStyle.toLowerCase()), calcCssName(item)],
           "ellipsis": false,
           "menu-trigger": "hover"
-        }, _isSlot(_slot5 = renderSubmenu(item)) ? _slot5 : {
-          default: () => [_slot5]
+        }, _isSlot(_slot9 = renderSubmenu(item)) ? _slot9 : {
+          default: () => [_slot9]
         });
       }
       return null;