@ibiz-template/vue3-components 0.7.26-alpha.3 → 0.7.27

package/es/control/form/form-detail/form-mdctrl/form-mdctrl-repeater/repeater-grid/repeater-grid.d.ts

@@ -708,6 +708,7 @@ export declare const RepeaterGrid: import("vue").DefineComponent<{
                                         propertyIsEnumerable: (v: PropertyKey) => boolean;
                                     } | undefined;
                                     tag?: string | undefined;
+                                    uniqueTag?: string | undefined;
                                     appId: string;
                                     id?: string | undefined;
                                     name?: string | undefined;
@@ -1565,6 +1566,7 @@ export declare const RepeaterGrid: import("vue").DefineComponent<{
                                     propertyIsEnumerable: (v: PropertyKey) => boolean;
                                 } | undefined;
                                 tag?: string | undefined;
+                                uniqueTag?: string | undefined;
                                 appId: string;
                                 id?: string | undefined;
                                 name?: string | undefined;
@@ -2095,6 +2097,7 @@ export declare const RepeaterGrid: import("vue").DefineComponent<{
                             propertyIsEnumerable: (v: PropertyKey) => boolean;
                         } | undefined;
                         tag?: string | undefined;
+                        uniqueTag?: string | undefined;
                         appId: string;
                         id?: string | undefined;
                         name?: string | undefined;
@@ -2775,6 +2778,7 @@ export declare const RepeaterGrid: import("vue").DefineComponent<{
                                         propertyIsEnumerable: (v: PropertyKey) => boolean;
                                     } | undefined;
                                     tag?: string | undefined;
+                                    uniqueTag?: string | undefined;
                                     appId: string;
                                     id?: string | undefined;
                                     name?: string | undefined;
@@ -3935,6 +3939,7 @@ export declare const RepeaterGrid: import("vue").DefineComponent<{
                                     propertyIsEnumerable: (v: PropertyKey) => boolean;
                                 } | undefined;
                                 tag?: string | undefined;
+                                uniqueTag?: string | undefined;
                                 appId: string;
                                 id?: string | undefined;
                                 name?: string | undefined;
@@ -4705,6 +4710,7 @@ export declare const RepeaterGrid: import("vue").DefineComponent<{
                                         propertyIsEnumerable: (v: PropertyKey) => boolean;
                                     } | undefined;
                                     tag?: string | undefined;
+                                    uniqueTag?: string | undefined;
                                     appId: string;
                                     id?: string | undefined;
                                     name?: string | undefined;
@@ -5562,6 +5568,7 @@ export declare const RepeaterGrid: import("vue").DefineComponent<{
                                     propertyIsEnumerable: (v: PropertyKey) => boolean;
                                 } | undefined;
                                 tag?: string | undefined;
+                                uniqueTag?: string | undefined;
                                 appId: string;
                                 id?: string | undefined;
                                 name?: string | undefined;
@@ -6092,6 +6099,7 @@ export declare const RepeaterGrid: import("vue").DefineComponent<{
                             propertyIsEnumerable: (v: PropertyKey) => boolean;
                         } | undefined;
                         tag?: string | undefined;
+                        uniqueTag?: string | undefined;
                         appId: string;
                         id?: string | undefined;
                         name?: string | undefined;
@@ -6772,6 +6780,7 @@ export declare const RepeaterGrid: import("vue").DefineComponent<{
                                         propertyIsEnumerable: (v: PropertyKey) => boolean;
                                     } | undefined;
                                     tag?: string | undefined;
+                                    uniqueTag?: string | undefined;
                                     appId: string;
                                     id?: string | undefined;
                                     name?: string | undefined;
@@ -7204,6 +7213,7 @@ export declare const RepeaterGrid: import("vue").DefineComponent<{
                         propertyIsEnumerable: (v: PropertyKey) => boolean;
                     } | undefined;
                     tag?: string | undefined;
+                    uniqueTag?: string | undefined;
                     appId: string;
                     id?: string | undefined;
                     name?: string | undefined;
@@ -8191,6 +8201,7 @@ export declare const RepeaterGrid: import("vue").DefineComponent<{
                                         propertyIsEnumerable: (v: PropertyKey) => boolean;
                                     } | undefined;
                                     tag?: string | undefined;
+                                    uniqueTag?: string | undefined;
                                     appId: string;
                                     id?: string | undefined;
                                     name?: string | undefined;
@@ -8961,6 +8972,7 @@ export declare const RepeaterGrid: import("vue").DefineComponent<{
                                             propertyIsEnumerable: (v: PropertyKey) => boolean;
                                         } | undefined;
                                         tag?: string | undefined;
+                                        uniqueTag?: string | undefined;
                                         appId: string;
                                         id?: string | undefined;
                                         name?: string | undefined;
@@ -9782,6 +9794,7 @@ export declare const RepeaterGrid: import("vue").DefineComponent<{
                                         propertyIsEnumerable: (v: PropertyKey) => boolean;
                                     } | undefined;
                                     tag?: string | undefined;
+                                    uniqueTag?: string | undefined;
                                     appId: string;
                                     id?: string | undefined;
                                     name?: string | undefined;
@@ -10312,6 +10325,7 @@ export declare const RepeaterGrid: import("vue").DefineComponent<{
                                 propertyIsEnumerable: (v: PropertyKey) => boolean;
                             } | undefined;
                             tag?: string | undefined;
+                            uniqueTag?: string | undefined;
                             appId: string;
                             id?: string | undefined;
                             name?: string | undefined;
@@ -10992,6 +11006,7 @@ export declare const RepeaterGrid: import("vue").DefineComponent<{
                                             propertyIsEnumerable: (v: PropertyKey) => boolean;
                                         } | undefined;
                                         tag?: string | undefined;
+                                        uniqueTag?: string | undefined;
                                         appId: string;
                                         id?: string | undefined;
                                         name?: string | undefined;
@@ -11400,6 +11415,7 @@ export declare const RepeaterGrid: import("vue").DefineComponent<{
                             propertyIsEnumerable: (v: PropertyKey) => boolean;
                         } | undefined;
                         tag?: string | undefined;
+                        uniqueTag?: string | undefined;
                         appId: string;
                         id?: string | undefined;
                         name?: string | undefined;
@@ -11964,6 +11980,7 @@ export declare const RepeaterGrid: import("vue").DefineComponent<{
                                     propertyIsEnumerable: (v: PropertyKey) => boolean;
                                 } | undefined;
                                 tag?: string | undefined;
+                                uniqueTag?: string | undefined;
                                 appId: string;
                                 id?: string | undefined;
                                 name?: string | undefined;
@@ -12821,6 +12838,7 @@ export declare const RepeaterGrid: import("vue").DefineComponent<{
                                 propertyIsEnumerable: (v: PropertyKey) => boolean;
                             } | undefined;
                             tag?: string | undefined;
+                            uniqueTag?: string | undefined;
                             appId: string;
                             id?: string | undefined;
                             name?: string | undefined;
@@ -13351,6 +13369,7 @@ export declare const RepeaterGrid: import("vue").DefineComponent<{
                         propertyIsEnumerable: (v: PropertyKey) => boolean;
                     } | undefined;
                     tag?: string | undefined;
+                    uniqueTag?: string | undefined;
                     appId: string;
                     id?: string | undefined;
                     name?: string | undefined;
@@ -14031,6 +14050,7 @@ export declare const RepeaterGrid: import("vue").DefineComponent<{
                                     propertyIsEnumerable: (v: PropertyKey) => boolean;
                                 } | undefined;
                                 tag?: string | undefined;
+                                uniqueTag?: string | undefined;
                                 appId: string;
                                 id?: string | undefined;
                                 name?: string | undefined;
@@ -15276,6 +15296,7 @@ export declare const RepeaterGrid: import("vue").DefineComponent<{
                                 propertyIsEnumerable: (v: PropertyKey) => boolean;
                             } | undefined;
                             tag?: string | undefined;
+                            uniqueTag?: string | undefined;
                             appId: string;
                             id?: string | undefined;
                             name?: string | undefined;
@@ -16283,6 +16304,7 @@ export declare const RepeaterGrid: import("vue").DefineComponent<{
                                     propertyIsEnumerable: (v: PropertyKey) => boolean;
                                 } | undefined;
                                 tag?: string | undefined;
+                                uniqueTag?: string | undefined;
                                 appId: string;
                                 id?: string | undefined;
                                 name?: string | undefined;
@@ -17147,6 +17169,7 @@ export declare const RepeaterGrid: import("vue").DefineComponent<{
                             propertyIsEnumerable: (v: PropertyKey) => boolean;
                         } | undefined;
                         tag?: string | undefined;
+                        uniqueTag?: string | undefined;
                         appId: string;
                         id?: string | undefined;
                         name?: string | undefined;
@@ -17687,6 +17710,7 @@ export declare const RepeaterGrid: import("vue").DefineComponent<{
                     propertyIsEnumerable: (v: PropertyKey) => boolean;
                 } | undefined;
                 tag?: string | undefined;
+                uniqueTag?: string | undefined;
                 appId: string;
                 id?: string | undefined;
                 name?: string | undefined;
@@ -18367,6 +18391,7 @@ export declare const RepeaterGrid: import("vue").DefineComponent<{
                                 propertyIsEnumerable: (v: PropertyKey) => boolean;
                             } | undefined;
                             tag?: string | undefined;
+                            uniqueTag?: string | undefined;
                             appId: string;
                             id?: string | undefined;
                             name?: string | undefined;

package/es/control/grid/grid/grid-control.util.d.ts

@@ -74,6 +74,14 @@ export declare function useAppGridBase(c: GridController, props: IGridProps): {
         columns: TableColumnCtx<IData>[];
         data: IData[];
     }) => string[];
+    spanMethod: ({ row, column, rowIndex, columnIndex, }: {
+        row: IData;
+        column: IData;
+        rowIndex: number;
+        columnIndex: number;
+    }) => IData | void;
+    cellMouseEnter: (row: IData, column: IData, cell: HTMLTableCellElement, event: Event) => void;
+    cellMouseLeave: (row: IData, column: IData, cell: HTMLTableCellElement, event: Event) => void;
 };
 /**
  * 监听表格头部高度变化，计算css变量

package/es/control/grid/grid/grid-control.util.mjs

@@ -3,6 +3,26 @@ import { Srfuf, ControlVO, GridRowState } from '@ibiz-template/runtime';
 import { ref, watch, nextTick, computed, watchEffect, onUnmounted } from 'vue';
 
 "use strict";
+function sortMergeData(rowSpanKeys, items) {
+  const otherItems = [];
+  const sortedItems = items.filter((item) => {
+    const index = rowSpanKeys.findIndex((key) => !item[key]);
+    if (index !== -1) {
+      otherItems.push(item);
+    }
+    return index === -1;
+  });
+  sortedItems.sort((a, b) => {
+    for (const key of rowSpanKeys) {
+      if (a[key] !== b[key]) {
+        return a[key] > b[key] ? 1 : -1;
+      }
+    }
+    return 0;
+  });
+  sortedItems.push(...otherItems);
+  return sortedItems;
+}
 function useITableEvent(c) {
   const tableRef = ref();
   let forbidChange = false;
@@ -178,6 +198,8 @@ function useAppGridBase(c, props) {
       const row = new GridRowState(new ControlVO(item), c);
       return row;
     });
+    c.calcAggResult(c.state.items);
+    c.calcTotalData();
   };
   const defaultSort = computed(() => {
     var _a;
@@ -227,6 +249,13 @@ function useAppGridBase(c, props) {
       });
       return result;
     }
+    const { rowspankeys = [] } = c.controlParams;
+    if (rowspankeys.length > 0) {
+      return sortMergeData(
+        rowspankeys,
+        state.rows.map((row) => row.data)
+      );
+    }
     return state.rows.map((row) => row.data);
   });
   const renderColumns = computed(() => {
@@ -256,7 +285,128 @@ function useAppGridBase(c, props) {
       return c.state.aggResult[item.property];
     });
   };
-  return { tableData, renderColumns, defaultSort, summaryMethod };
+  const spanMethod = ({
+    row,
+    column,
+    rowIndex,
+    columnIndex
+  }) => {
+    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]) {
+        return {
+          rowspan: 0,
+          colspan: 0
+        };
+      }
+      let rowspan = 1;
+      for (let i = rowIndex + 1; i < tableData.value.length; i++) {
+        if (row[property] && tableData.value[i][property] === row[property]) {
+          rowspan += 1;
+        } else {
+          break;
+        }
+      }
+      return {
+        rowspan,
+        colspan: 1
+      };
+    }
+    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]) {
+        return {
+          rowspan: 0,
+          colspan: 0
+        };
+      }
+      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]) {
+          colspan += 1;
+        } else {
+          break;
+        }
+      }
+      return {
+        rowspan: 1,
+        colspan
+      };
+    }
+  };
+  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
+  };
 }
 function useGridHeaderStyle(tableRef, ns) {
   let resizeObserver = null;
@@ -298,13 +448,13 @@ function useGridHeaderStyle(tableRef, ns) {
   };
 }
 function useGridDraggable(tableRef, ns, c) {
-  if (!c.enableRowEditOrder || !c.model.orderValueAppDEFieldId) {
+  if (!c.enableRowEditOrder) {
     return {};
   }
-  let draggingDom = null;
   let dragIndex = 0;
-  let draggingKey = "";
+  let dropIndex = 0;
   let draggingData = null;
+  let dropData = null;
   const cleanups = [];
   const calcSrfKeyByClass = (classList) => {
     let result = "";
@@ -322,9 +472,9 @@ function useGridDraggable(tableRef, ns, c) {
       "dragstart",
       (event) => {
         if (event.target) {
-          draggingDom = event.target;
+          const draggingDom = event.target;
           event.dataTransfer.effectAllowed = "move";
-          draggingKey = calcSrfKeyByClass(draggingDom.classList);
+          const draggingKey = calcSrfKeyByClass(draggingDom.classList);
           dragIndex = c.state.rows.findIndex(
             (row) => row.data.srfkey === draggingKey
           );
@@ -339,15 +489,13 @@ function useGridDraggable(tableRef, ns, c) {
         event.preventDefault();
         const targetDom = event.currentTarget;
         const targetKey = calcSrfKeyByClass(targetDom.classList);
-        const targetIndex = c.state.rows.findIndex(
+        dropIndex = c.state.rows.findIndex(
           (row) => row.data.srfkey === targetKey
         );
-        if (draggingKey === targetKey || targetIndex === -1) {
+        if ((draggingData == null ? void 0 : draggingData.data.srfkey) === targetKey || dropIndex === -1) {
           return;
         }
-        c.state.rows.splice(dragIndex, 1);
-        c.state.rows.splice(targetIndex, 0, draggingData);
-        dragIndex = targetIndex;
+        dropData = c.state.rows[dropIndex];
       }
     );
     const cleanDragOver = listenJSEvent(
@@ -359,7 +507,13 @@ function useGridDraggable(tableRef, ns, c) {
     );
     const cleanDragEnd = listenJSEvent(item, "dragend", (event) => {
       event.preventDefault();
-      c.onDragChange();
+      if (draggingData && dropData) {
+        c.onDragChange(
+          draggingData,
+          dropData,
+          dropIndex > dragIndex ? "next" : "prev"
+        );
+      }
     });
     cleanups.push(cleanDragStart);
     cleanups.push(cleanDragEnter);

package/es/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-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__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}
+.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}

package/es/control/grid/grid/grid.d.ts

@@ -83,6 +83,8 @@ export declare const GridControl: import("vue").DefineComponent<{
     onPageChange: (page: number) => void;
     onPageSizeChange: (size: number) => void;
     onPageRefresh: () => void;
+    cellMouseEnter: (row: IData, column: IData, cell: HTMLTableCellElement, event: Event) => void;
+    cellMouseLeave: (row: IData, column: IData, cell: HTMLTableCellElement, event: Event) => void;
     handleRowClassName: ({ row }: {
         row: IData;
     }) => string;
@@ -97,6 +99,12 @@ export declare const GridControl: import("vue").DefineComponent<{
         columns: import("element-plus/es/components/table/src/table-column/defaults").TableColumnCtx<IData>[];
         data: IData[];
     }) => string[];
+    spanMethod: ({ row, column, rowIndex, columnIndex, }: {
+        row: IData;
+        column: IData;
+        rowIndex: number;
+        columnIndex: number;
+    }) => void | IData;
     renderPopover: () => JSX.Element[];
     defaultSort: import("vue").Ref<IData>;
     renderBatchToolBar: () => VNode | undefined;

package/es/control/grid/grid/grid.mjs

@@ -199,7 +199,10 @@ const GridControl = /* @__PURE__ */ defineComponent({
       tableData,
       renderColumns,
       defaultSort,
-      summaryMethod
+      summaryMethod,
+      spanMethod,
+      cellMouseEnter,
+      cellMouseLeave
     } = useAppGridBase(c, props);
     const {
       renderPopover
@@ -306,10 +309,13 @@ const GridControl = /* @__PURE__ */ defineComponent({
       onPageChange,
       onPageSizeChange,
       onPageRefresh,
+      cellMouseEnter,
+      cellMouseLeave,
       handleRowClassName,
       handleHeaderCellClassName,
       renderNoData,
       summaryMethod,
+      spanMethod,
       renderPopover,
       defaultSort,
       renderBatchToolBar,
@@ -343,11 +349,15 @@ const GridControl = /* @__PURE__ */ defineComponent({
         "header-cell-class-name": this.handleHeaderCellClassName,
         "row-key": "tempsrfkey",
         "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,
-        "tooltip-effect": "light"
+        "tooltip-effect": "light",
+        "scrollbar-always-on": true
       }, {
         empty: this.renderNoData,
         default: () => {

package/es/control/grid/grid/index.d.ts

@@ -72,6 +72,8 @@ export declare const IBizGridControl: import("@ibiz-template/vue3-util").TypeWit
     onPageChange: (page: number) => void;
     onPageSizeChange: (size: number) => void;
     onPageRefresh: () => void;
+    cellMouseEnter: (row: IData, column: IData, cell: HTMLTableCellElement, event: Event) => void;
+    cellMouseLeave: (row: IData, column: IData, cell: HTMLTableCellElement, event: Event) => void;
     handleRowClassName: ({ row }: {
         row: IData;
     }) => string;
@@ -88,6 +90,12 @@ export declare const IBizGridControl: import("@ibiz-template/vue3-util").TypeWit
         columns: import("element-plus/es/components/table/src/table-column/defaults").TableColumnCtx<IData>[];
         data: IData[];
     }) => string[];
+    spanMethod: ({ row, column, rowIndex, columnIndex, }: {
+        row: IData;
+        column: IData;
+        rowIndex: number;
+        columnIndex: number;
+    }) => void | IData;
     renderPopover: () => JSX.Element[];
     defaultSort: import("vue").Ref<IData>;
     renderBatchToolBar: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {

package/es/control/grid/grid-column/grid-field-column/grid-field-column.d.ts

@@ -19,6 +19,7 @@ export declare const GridFieldColumn: import("vue").DefineComponent<{
     CustomHtml: import("vue").ComputedRef<string | undefined>;
     fieldValue: import("vue").ComputedRef<any>;
     formatValue: import("vue").ComputedRef<string>;
+    percent: import("vue").ComputedRef<string>;
     codeListValue: import("vue").ComputedRef<string>;
     tooltip: import("vue").ComputedRef<string | undefined>;
     zIndex: number | undefined;

package/es/control/grid/grid-column/grid-field-column/grid-field-column.mjs

@@ -37,6 +37,25 @@ const GridFieldColumn = /* @__PURE__ */ defineComponent({
     });
     const fieldValue = computed(() => props.row.data[props.controller.fieldName]);
     const formatValue = computed(() => props.controller.formatValue(fieldValue.value));
+    const percent = computed(() => {
+      const {
+        grid
+      } = props.controller;
+      if (!grid.showPercent) {
+        return "";
+      }
+      const value = Number(fieldValue.value);
+      if (!Number.isNaN(value)) {
+        const {
+          totalResult = {}
+        } = grid.state;
+        const total = totalResult[props.controller.fieldName];
+        if (total) {
+          return ibiz.util.text.format("".concat(value / total), "0.##%");
+        }
+      }
+      return "";
+    });
     const codeListValue = computed(() => ValueExUtil.toText(props.controller.model, fieldValue.value));
     const codeListText = ref("");
     const onInfoTextChange = (text) => {
@@ -70,6 +89,7 @@ const GridFieldColumn = /* @__PURE__ */ defineComponent({
       CustomHtml,
       fieldValue,
       formatValue,
+      percent,
       codeListValue,
       tooltip,
       zIndex,
@@ -108,7 +128,7 @@ const GridFieldColumn = /* @__PURE__ */ defineComponent({
         "class": this.ns.e("text"),
         "title": this.tooltip,
         "onClick": this.onTextClick
-      }, [this.formatValue, this.fieldValue != null && c.model.unitName]);
+      }, [this.formatValue, this.fieldValue != null && c.model.unitName, this.percent && "(".concat(this.percent, ")")]);
     }
     return createVNode("div", {
       "class": [this.ns.b(), c.clickable(this.row) && this.ns.m("clickable"), this.ns.m(this.controller.grid.overflowMode), (_a = this.controller.model.cellSysCss) == null ? void 0 : _a.cssName, this.ns.is("has-action", !!c.model.deuiactionGroup)],

package/es/control/grid/grid-column/grid-field-column/index.d.ts

@@ -16,6 +16,7 @@ export declare const IBizGridFieldColumn: import("@ibiz-template/vue3-util").Typ
     CustomHtml: import("vue").ComputedRef<string | undefined>;
     fieldValue: import("vue").ComputedRef<any>;
     formatValue: import("vue").ComputedRef<string>;
+    percent: import("vue").ComputedRef<string>;
     codeListValue: import("vue").ComputedRef<string>;
     tooltip: import("vue").ComputedRef<string | undefined>;
     zIndex: number | undefined;

package/es/control/search-bar/search-bar.mjs

@@ -137,7 +137,7 @@ const SearchBarControl = /* @__PURE__ */ defineComponent({
           }, [groupItem.caption]);
         })])), this.c.model.enableGroup && this.c.isBackendSearchGroup && createVNode(resolveComponent("el-button"), {
           "class": this.ns.b("save"),
-          "title": ibiz.i18n.t("control.searchBar.saveGroup"),
+          "title": ibiz.env.enableTitle ? ibiz.i18n.t("control.searchBar.saveGroup") : void 0,
           "onClick": this.handleSave
         }, {
           default: () => [createVNode("ion-icon", {
@@ -161,7 +161,7 @@ const SearchBarControl = /* @__PURE__ */ defineComponent({
         }), this.c.enableFilter && createVNode(resolveComponent("el-button"), {
           "ref": "filterButtonRef",
           "type": "primary",
-          "title": ibiz.i18n.t("control.searchBar.filter"),
+          "title": ibiz.env.enableTitle ? ibiz.i18n.t("control.searchBar.filter") : void 0,
           "class": this.ns.b("filter"),
           "onClick": () => this.triggerFilter()
         }, {