@ibiz-template/vue3-components 0.7.40-alpha.9 → 0.7.40

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

@@ -1,7 +1,7 @@
-import { NOOP, listenJSEvent, eventPath } from '@ibiz-template/core';
-import { Srfuf, GridRowState, ControlVO } from '@ibiz-template/runtime';
+import { NOOP, eventPath, listenJSEvent, recursiveIterate } from '@ibiz-template/core';
+import { Srfuf, ControlVO, GridRowState } from '@ibiz-template/runtime';
 import { orderBy, chunk } from 'lodash-es';
-import { ref, watch, nextTick, computed, watchEffect, onUnmounted } from 'vue';
+import { ref, computed, watch, nextTick, watchEffect, onUnmounted } from 'vue';
 import '../../../util/index.mjs';
 import { useFocusByEnter } from '../../../util/keydown-util/keydown-util.mjs';
 
@@ -30,21 +30,9 @@ function useITableEvent(c) {
   const tableRef = ref();
   let forbidChange = false;
   let isGridUISort = false;
-  let isCtrlDown = false;
-  let cleanKeyDown = NOOP;
-  let cleanKeyUp = NOOP;
   let cleanClick = NOOP;
   let cleanEnter = NOOP;
-  cleanKeyDown = listenJSEvent(window, "keydown", (e) => {
-    if (e.code === "ControlLeft" && !c.state.singleSelect) {
-      isCtrlDown = true;
-    }
-  });
-  cleanKeyUp = listenJSEvent(window, "keyup", (e) => {
-    if (e.code === "ControlLeft" && !c.state.singleSelect) {
-      isCtrlDown = false;
-    }
-  });
+  let cleanTab = NOOP;
   if (c.state.isAutoGrid) {
     if (c.editShowMode === "row") {
       cleanClick = listenJSEvent(window, "click", async (event) => {
@@ -98,7 +86,118 @@ function useITableEvent(c) {
       }
     }
   });
-  async function onRowClickDynamic(data, _column, _event) {
+  const editColumn = computed(() => {
+    const columns = [];
+    recursiveIterate({ children: c.state.columnStates }, (columnState) => {
+      if (!columnState.uaColumn && !columnState.hidden) {
+        const model = c.columns[columnState.key].model;
+        if (model.enableRowEdit)
+          columns.push(model);
+      }
+    });
+    return columns;
+  });
+  const tabListener = (event) => {
+    var _a, _b;
+    const tableEl = tableRef.value.$el;
+    const currentElement = document.activeElement;
+    if (event.key === "Tab" && tableEl.contains(currentElement)) {
+      event.preventDefault();
+      const classList = [];
+      eventPath(event).forEach((e) => {
+        if (e && e.classList) {
+          classList.push(...e.classList);
+        }
+      });
+      const key = (_a = classList.filter((className) => className.startsWith("id-"))[0]) == null ? void 0 : _a.substring(3);
+      const columnName = (_b = classList.filter((className) => className.startsWith("defgridcolumn-"))[0]) == null ? void 0 : _b.substring(14);
+      const columnIndex = editColumn.value.findIndex(
+        (column) => column.id.toLowerCase() === (columnName == null ? void 0 : columnName.toLowerCase())
+      );
+      const rowIndex = c.state.rows.findIndex(
+        (item) => key && item.data.srfkey === key
+      );
+      const row = rowIndex !== -1 ? c.state.rows[rowIndex] : void 0;
+      const nextRow = rowIndex !== -1 ? c.state.rows[rowIndex + 1] : c.state.rows.find((_row) => _row.data.srfuf === Srfuf.UPDATE);
+      if (row) {
+        if (nextRow || columnIndex < editColumn.value.length - 1) {
+          Object.keys(row.editColStates).forEach((fieldName) => {
+            row.editColStates[fieldName].editable = false;
+          });
+        }
+        if (columnIndex < editColumn.value.length - 1) {
+          row.editColStates[editColumn.value[columnIndex + 1].id.toLowerCase()].editable = true;
+        } else if (nextRow) {
+          nextRow.editColStates[editColumn.value[0].id.toLowerCase()].editable = true;
+        }
+      } else {
+        const focusableElements = Array.from(
+          tableEl.querySelectorAll(
+            'tbody select, tbody textarea, tbody input:not([type="checkbox"])'
+          )
+        );
+        const currentIndex = focusableElements.indexOf(currentElement);
+        const nextElement = focusableElements[currentIndex + 1];
+        if (nextElement) {
+          nextElement.focus();
+        } else if (nextRow) {
+          nextRow.editColStates[editColumn.value[0].id.toLowerCase()].editable = true;
+        }
+      }
+    }
+  };
+  watch(
+    () => tableRef.value,
+    (table) => {
+      const { enableRowEdit } = c.model;
+      if (table && enableRowEdit && c.editShowMode === "cell") {
+        cleanTab = listenJSEvent(window, "keydown", tabListener, {
+          capture: true
+        });
+      }
+    }
+  );
+  function handleCtrlSelect(data) {
+    const selection = [...c.state.selectedData];
+    const index = selection.findIndex((x) => x.srfkey === data.srfkey);
+    if (index !== -1) {
+      selection.splice(index, 1);
+      c.setSelection(selection);
+    } else {
+      c.setSelection([...selection, data]);
+    }
+  }
+  let lastSelectedIndex = null;
+  function handleShiftSelect(data) {
+    var _a;
+    (_a = window.getSelection()) == null ? void 0 : _a.removeAllRanges();
+    const index = c.findRowStateIndex(data);
+    const selection = [...c.state.selectedData];
+    const isSelected = selection.includes(data);
+    if (lastSelectedIndex !== null) {
+      const start = Math.min(lastSelectedIndex, index);
+      const end = Math.max(lastSelectedIndex, index);
+      if (isSelected) {
+        for (let i = start; i <= end; i++) {
+          const itemIndex = selection.indexOf(c.state.items[i]);
+          if (itemIndex !== -1) {
+            selection.splice(itemIndex, 1);
+          }
+        }
+      } else {
+        for (let i = start; i <= end; i++) {
+          if (!selection.includes(c.state.items[i])) {
+            selection.push(c.state.items[i]);
+          }
+        }
+      }
+      c.setSelection(selection);
+    } else {
+      c.setSelection([data]);
+    }
+    lastSelectedIndex = index;
+  }
+  async function onRowClickDynamic(data, _column, event) {
     if (data.srfuf === Srfuf.CREATE) {
       if (c.editShowMode === "row") {
         const row = c.findRowState(data);
@@ -107,46 +206,37 @@ function useITableEvent(c) {
       }
       return;
     }
-    if (isCtrlDown) {
-      const selection = [...c.state.selectedData];
-      const index = selection.findIndex((x) => x.srfkey === data.srfkey);
-      if (index !== -1) {
-        selection.splice(index, 1);
-        c.setSelection(selection);
-      } else {
-        c.setSelection([...selection, data]);
-      }
-      return;
-    }
+    if (event.ctrlKey && !c.state.singleSelect)
+      return handleCtrlSelect(data);
+    if (event.shiftKey && !c.state.singleSelect)
+      return handleShiftSelect(data);
     if (c.editShowMode === "row" && c.allowRowEdit) {
       const row = c.findRowState(data);
       if (row) {
         await c.switchRowEdit(row);
       }
     } else {
-      c.onRowClick(data);
+      await c.onRowClick(data);
     }
   }
-  async function onRowClick(data, _column, _event) {
-    if (c.state.isAutoGrid) {
-      await onRowClickDynamic(data, _column, _event);
-      return;
+  let forbidClick = false;
+  async function onRowClick(data, _column, event) {
+    if (!event.shiftKey) {
+      const index = c.findRowStateIndex(data);
+      const isSelected = c.state.selectedData.includes(data);
+      lastSelectedIndex = isSelected ? null : index;
     }
-    if (data.srfuf === Srfuf.CREATE) {
+    if (c.state.isAutoGrid) {
+      await onRowClickDynamic(data, _column, event);
       return;
     }
-    if (isCtrlDown) {
-      const selection = [...c.state.selectedData];
-      const index = selection.findIndex((x) => x.srfkey === data.srfkey);
-      if (index !== -1) {
-        selection.splice(index, 1);
-        c.setSelection(selection);
-      } else {
-        c.setSelection([...selection, data]);
-      }
+    if (data.srfuf === Srfuf.CREATE || forbidClick)
       return;
-    }
-    const target = _event.target;
+    if (event.ctrlKey && !c.state.singleSelect)
+      return handleCtrlSelect(data);
+    if (event.shiftKey && !c.state.singleSelect)
+      return handleShiftSelect(data);
+    const target = event.target;
     const { classList } = target.parentElement || {};
     if (classList && classList.contains("el-table-column--selection")) {
       tableRef.value.toggleRowSelection(data);
@@ -158,8 +248,12 @@ function useITableEvent(c) {
         await c.switchRowEdit(row, true);
       }
     } else {
-      c.onRowClick(data);
+      await c.onRowClick(data);
     }
+    forbidClick = true;
+    setTimeout(() => {
+      forbidClick = false;
+    }, 200);
   }
   function onDbRowClick(data) {
     if (data.srfuf === Srfuf.CREATE) {
@@ -168,9 +262,8 @@ function useITableEvent(c) {
     c.onDbRowClick(data);
   }
   function onSelectionChange(selection) {
-    if (!forbidChange) {
+    if (!forbidChange && !c.state.isLoading)
       c.setSelection(selection);
-    }
   }
   watch(
     [
@@ -179,9 +272,8 @@ function useITableEvent(c) {
       () => c.state.selectedData
     ],
     ([table, isLoaded, newVal]) => {
-      if (!isLoaded || !table) {
+      if (!isLoaded || !table)
         return;
-      }
       if (c.state.singleSelect) {
         if (newVal[0]) {
           tableRef.value.setCurrentRow(newVal[0], true);
@@ -191,8 +283,12 @@ function useITableEvent(c) {
       } else {
         forbidChange = true;
         tableRef.value.clearSelection();
-        newVal.forEach((item) => tableRef.value.toggleRowSelection(item, true));
-        forbidChange = false;
+        setTimeout(() => {
+          newVal.forEach(
+            (item) => tableRef.value.toggleRowSelection(item, true)
+          );
+          forbidChange = false;
+        });
       }
     }
   );
@@ -310,10 +406,9 @@ function useITableEvent(c) {
     onSortChange,
     handleRowClassName,
     handleHeaderCellClassName,
-    cleanKeyDown,
-    cleanKeyUp,
     cleanClick,
-    cleanEnter
+    cleanEnter,
+    cleanTab
   };
 }
 function useAppGridPagination(c) {
@@ -637,27 +732,33 @@ function useGridDraggable(tableRef, ns, c) {
     cleanups.push(cleanDragOver);
     cleanups.push(cleanDragEnd);
   };
+  const cleanup = () => {
+    cleanups.forEach((cleanupF) => {
+      cleanupF();
+    });
+  };
+  const setDragEvent = () => {
+    cleanup();
+    const grid = tableRef.value.$el;
+    if (grid) {
+      const rows = grid.getElementsByClassName("el-table__row");
+      rows.forEach((item) => {
+        setRowDragEvent(item);
+      });
+    }
+  };
   watch(
     [() => tableRef.value, () => c.state.isLoaded],
     (table, isLoaded) => {
       if (!isLoaded || !table) {
         return;
       }
-      const grid = tableRef.value.$el;
-      if (grid) {
-        const rows = grid.getElementsByClassName("el-table__row");
-        rows.forEach((item) => {
-          setRowDragEvent(item);
-        });
-      }
+      setDragEvent();
     }
   );
   return {
-    cleanup: () => {
-      cleanups.forEach((cleanup) => {
-        cleanup();
-      });
-    }
+    cleanup,
+    setDragEvent
   };
 }
 

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:var(--ibiz-spacing-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:calc(var(--ibiz-spacing-base-tight) / 2) var(--ibiz-spacing-base-tight);--ibiz-control-grid-header-height:auto;--ibiz-control-grid-header-min-height:54px;--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 .el-table__body-wrapper tr td.el-table-fixed-column--left.is-first-column::before,.ibiz-control-grid .el-table__body-wrapper tr td.el-table-fixed-column--left.is-last-column::before,.ibiz-control-grid .el-table__body-wrapper tr td.el-table-fixed-column--right.is-first-column::before,.ibiz-control-grid .el-table__body-wrapper tr td.el-table-fixed-column--right.is-last-column::before{bottom:0}.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.is-dynamic-grid .el-table__empty-block{height:calc(100% - 48px)!important;min-height:248px}.ibiz-control-grid__add{width:calc(100% - var(--ibiz-spacing-extra-tight));margin:var(--ibiz-spacing-tight) var(--ibiz-spacing-extra-tight);color:var(--ibiz-color-primary);background-color:transparent;border:1px dashed var(--ibiz-color-border)}.ibiz-control-grid__add ion-icon{margin-right:var(--ibiz-spacing-extra-tight)}.ibiz-control-grid__add:focus{color:var(--ibiz-color-primary-hover);background-color:transparent;border:1px dashed var(--ibiz-color-primary-hover)}.ibiz-control-grid__add:hover{color:var(--ibiz-color-primary-hover);background-color:transparent;border:1px dashed var(--ibiz-color-primary-hover)}.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.uagridcolumn{background-color:var(--ibiz-control-grid-row-hover-color)}.ibiz-control-grid__table.el-table .el-table__body-wrapper tr.editing-row td:not(.uagridcolumn){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);min-height:var(--ibiz-control-grid-header-min-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 .el-table__cell .cell{display:flex;align-items:center;justify-content:var(--ibiz-grid-column-justify-content)}.ibiz-control-grid__table .el-table__header-wrapper .el-table-fixed-column--left .cell,.ibiz-control-grid__table .el-table__header-wrapper .el-table-fixed-column--right .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-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:var(--ibiz-spacing-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:calc(var(--ibiz-spacing-base-tight) / 2) var(--ibiz-spacing-base-tight);--ibiz-control-grid-header-height:auto;--ibiz-control-grid-header-min-height:54px;--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 .el-table__body-wrapper tr td.el-table-fixed-column--left.is-first-column::before,.ibiz-control-grid .el-table__body-wrapper tr td.el-table-fixed-column--left.is-last-column::before,.ibiz-control-grid .el-table__body-wrapper tr td.el-table-fixed-column--right.is-first-column::before,.ibiz-control-grid .el-table__body-wrapper tr td.el-table-fixed-column--right.is-last-column::before{bottom:0}.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.is-dynamic-grid .el-table__empty-block{height:calc(100% - 48px)!important;min-height:248px}.ibiz-control-grid__add{width:calc(100% - var(--ibiz-spacing-extra-tight));margin:var(--ibiz-spacing-tight) var(--ibiz-spacing-extra-tight);color:var(--ibiz-color-primary);background-color:transparent;border:1px dashed var(--ibiz-color-border)}.ibiz-control-grid__add ion-icon{margin-right:var(--ibiz-spacing-extra-tight)}.ibiz-control-grid__add:focus{color:var(--ibiz-color-primary-hover);background-color:transparent;border:1px dashed var(--ibiz-color-primary-hover)}.ibiz-control-grid__add:hover{color:var(--ibiz-color-primary-hover);background-color:transparent;border:1px dashed var(--ibiz-color-primary-hover)}.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.uagridcolumn{background-color:var(--ibiz-control-grid-row-hover-color)}.ibiz-control-grid__table.el-table .el-table__body-wrapper tr.editing-row td:not(.uagridcolumn){background-color:var(--ibiz-control-grid-row-edit-bg-color)}.ibiz-control-grid__table.el-table .el-table__body-wrapper tr.editing-row td .el-date-editor,.ibiz-control-grid__table.el-table .el-table__body-wrapper tr.editing-row td .el-input__wrapper,.ibiz-control-grid__table.el-table .el-table__body-wrapper tr.editing-row td .el-textarea__inner{--el-input-bg-color:var(--ibiz-color-white)}.ibiz-control-grid__table .el-table__header-wrapper .cell{height:var(--ibiz-control-grid-header-height);min-height:var(--ibiz-control-grid-header-min-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 .el-table__cell .cell{display:flex;align-items:center;justify-content:var(--ibiz-grid-column-justify-content)}.ibiz-control-grid__table .el-table__header-wrapper .el-table-fixed-column--left .cell,.ibiz-control-grid__table .el-table__header-wrapper .el-table-fixed-column--right .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-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

@@ -1,50 +1,70 @@
-import { PropType, VNode } from 'vue';
+import { VNode, PropType } from 'vue';
 import { IDEGrid, IDEGridColumn } from '@ibiz/model-core';
-import { GridController, GridFieldColumnController, GridRowState, IControlProvider } from '@ibiz-template/runtime';
+import { GridRowState, GridController, IControlProvider, GridFieldColumnController } from '@ibiz-template/runtime';
 import './grid.scss';
 export declare function renderFieldColumn(c: GridFieldColumnController, row: GridRowState): JSX.Element;
 export declare function renderColumn(c: GridController, model: IDEGridColumn, renderColumns: IDEGridColumn[], index: number): VNode | null;
 export declare function renderChildColumn(c: GridController, model: IDEGridColumn, renderColumns: IDEGridColumn[], index: number): VNode | null;
 export declare const GridControl: import("vue").DefineComponent<{
+    /**
+     * @description 表格模型数据
+     */
     modelData: {
         type: PropType<IDEGrid>;
         required: true;
     };
+    /**
+     * @description 应用上下文对象
+     */
     context: {
         type: PropType<import("@ibiz-template/core").IApiContext>;
         required: true;
     };
+    /**
+     * @description 视图参数对象
+     * @default {}
+     */
     params: {
         type: PropType<import("@ibiz-template/core").IApiParams>;
         default: () => {};
     };
+    /**
+     * @description 部件适配器
+     */
     provider: {
         type: PropType<IControlProvider>;
     };
     /**
-     * 部件行数据默认激活模式
-     * - 0 不激活
-     * - 1 单击激活
-     * - 2 双击激活(默认值)
-     *
-     * @type {(number | 0 | 1 | 2)}
+     * @description 部件行数据默认激活模式，值为0:不激活，值为1：单击激活，值为2：双击激活
      */
     mdctrlActiveMode: {
         type: NumberConstructor;
         default: undefined;
     };
+    /**
+     * @description 是否单选
+     */
     singleSelect: {
         type: BooleanConstructor;
         default: undefined;
     };
+    /**
+     * @description 是否启用行编辑
+     */
     rowEditOpen: {
         type: BooleanConstructor;
         default: undefined;
     };
+    /**
+     * @description 是否是简单模式，即直接传入数据，不加载数据
+     */
     isSimple: {
         type: BooleanConstructor;
         required: false;
     };
+    /**
+     * @description 简单模式下传入的数据
+     */
     data: {
         type: {
             (arrayLength: number): import("@ibiz-template/core").IApiData[];
@@ -62,6 +82,10 @@ export declare const GridControl: import("vue").DefineComponent<{
         };
         required: false;
     };
+    /**
+     * @description 是否默认加载数据
+     * @default true
+     */
     loadDefault: {
         type: BooleanConstructor;
         default: boolean;
@@ -69,91 +93,112 @@ export declare const GridControl: import("vue").DefineComponent<{
 }, {
     c: GridController<IDEGrid, import("@ibiz-template/runtime").IGridState, import("@ibiz-template/runtime").IGridEvent>;
     ns: import("@ibiz-template/core").Namespace;
-    sysCssName: string | undefined;
     tableRef: import("vue").Ref<import("@ibiz-template/core").IApiData | undefined>;
     tableData: import("vue").Ref<import("@ibiz-template/core").IApiData>;
+    sysCssName: string | undefined;
+    defaultSort: import("vue").Ref<import("@ibiz-template/core").IApiData>;
     renderColumns: import("vue").Ref<IDEGridColumn[]>;
-    renderTableColumn: (model: IDEGridColumn, index: number) => VNode | null;
-    onDbRowClick: (data: import("@ibiz-template/runtime").ControlVO) => void;
+    headerCssVars: import("@ibiz-template/core").IApiData;
+    infiniteScroll: import("vue").Ref<import("@ibiz-template/core").IApiData | undefined>;
+    infiniteScrollKey: import("vue").Ref<string>;
+    isLodeMoreDisabled: import("vue").ComputedRef<boolean>;
     onRowClick: (data: import("@ibiz-template/runtime").ControlVO, _column: import("@ibiz-template/core").IApiData, event: MouseEvent) => Promise<void>;
-    onSelectionChange: (selection: import("@ibiz-template/runtime").ControlVO[]) => void;
+    spanMethod: ({ row, column, rowIndex, columnIndex, }: {
+        row: import("@ibiz-template/core").IApiData;
+        column: import("@ibiz-template/core").IApiData;
+        rowIndex: number;
+        columnIndex: number;
+    }) => void | import("@ibiz-template/core").IApiData;
     onSortChange: (opts: {
         _column: import("@ibiz-template/core").IApiData;
         prop: string;
         order: "ascending" | "descending";
     }) => void;
+    onDbRowClick: (data: import("@ibiz-template/runtime").ControlVO) => void;
     onPageChange: (page: number) => void;
-    onPageSizeChange: (size: number) => void;
+    renderNoData: () => VNode | null;
+    summaryMethod: ({ columns, }: {
+        columns: import("element-plus/es/components/table/src/table-column/defaults").TableColumnCtx<import("@ibiz-template/core").IApiData>[];
+        data: import("@ibiz-template/core").IApiData[];
+    }) => string[];
+    headerDragend: (newWidth: number, oldWidth: number, column: import("@ibiz-template/core").IApiData) => void;
+    renderPopover: () => JSX.Element[];
     onPageRefresh: () => void;
+    renderRowDetail: () => JSX.Element | undefined;
+    onPageSizeChange: (size: number) => void;
+    renderTableColumn: (model: IDEGridColumn, index: number) => VNode | null;
+    onSelectionChange: (selection: import("@ibiz-template/runtime").ControlVO[]) => void;
     handleRowClassName: ({ row }: {
         row: import("@ibiz-template/core").IApiData;
     }) => string;
+    renderBatchToolBar: () => VNode | undefined;
+    renderDragIconColumn: () => JSX.Element;
     handleHeaderCellClassName: ({ _row, column, _rowIndex, _columnIndex, }: {
         _row: import("@ibiz-template/core").IApiData;
         column: import("@ibiz-template/core").IApiData;
         _rowIndex: number;
         _columnIndex: number;
     }) => string;
-    renderNoData: () => VNode | null;
-    summaryMethod: ({ columns, }: {
-        columns: import("element-plus/es/components/table/src/table-column/defaults").TableColumnCtx<import("@ibiz-template/core").IApiData>[];
-        data: import("@ibiz-template/core").IApiData[];
-    }) => string[];
-    spanMethod: ({ row, column, rowIndex, columnIndex, }: {
-        row: import("@ibiz-template/core").IApiData;
-        column: import("@ibiz-template/core").IApiData;
-        rowIndex: number;
-        columnIndex: number;
-    }) => void | import("@ibiz-template/core").IApiData;
-    headerDragend: (newWidth: number, oldWidth: number, column: import("@ibiz-template/core").IApiData) => void;
-    renderPopover: () => JSX.Element[];
-    defaultSort: import("vue").Ref<import("@ibiz-template/core").IApiData>;
-    renderBatchToolBar: () => VNode | undefined;
-    headerCssVars: import("@ibiz-template/core").IApiData;
-    renderDragIconColumn: () => JSX.Element;
-    isLodeMoreDisabled: import("vue").ComputedRef<boolean>;
-    infiniteScroll: import("vue").Ref<import("@ibiz-template/core").IApiData | undefined>;
-    infiniteScrollKey: import("vue").Ref<string>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * @description 表格模型数据
+     */
     modelData: {
         type: PropType<IDEGrid>;
         required: true;
     };
+    /**
+     * @description 应用上下文对象
+     */
     context: {
         type: PropType<import("@ibiz-template/core").IApiContext>;
         required: true;
     };
+    /**
+     * @description 视图参数对象
+     * @default {}
+     */
     params: {
         type: PropType<import("@ibiz-template/core").IApiParams>;
         default: () => {};
     };
+    /**
+     * @description 部件适配器
+     */
     provider: {
         type: PropType<IControlProvider>;
     };
     /**
-     * 部件行数据默认激活模式
-     * - 0 不激活
-     * - 1 单击激活
-     * - 2 双击激活(默认值)
-     *
-     * @type {(number | 0 | 1 | 2)}
+     * @description 部件行数据默认激活模式，值为0:不激活，值为1：单击激活，值为2：双击激活
      */
     mdctrlActiveMode: {
         type: NumberConstructor;
         default: undefined;
     };
+    /**
+     * @description 是否单选
+     */
     singleSelect: {
         type: BooleanConstructor;
         default: undefined;
     };
+    /**
+     * @description 是否启用行编辑
+     */
     rowEditOpen: {
         type: BooleanConstructor;
         default: undefined;
     };
+    /**
+     * @description 是否是简单模式，即直接传入数据，不加载数据
+     */
     isSimple: {
         type: BooleanConstructor;
         required: false;
     };
+    /**
+     * @description 简单模式下传入的数据
+     */
     data: {
         type: {
             (arrayLength: number): import("@ibiz-template/core").IApiData[];
@@ -171,6 +216,10 @@ export declare const GridControl: import("vue").DefineComponent<{
         };
         required: false;
     };
+    /**
+     * @description 是否默认加载数据
+     * @default true
+     */
     loadDefault: {
         type: BooleanConstructor;
         default: boolean;