@canvas-components/list-table 0.3.24 → 0.3.25

package/README.md

@@ -247,6 +247,7 @@ table.mount();
 | `theme`            | `Partial<ListTableTheme>`                                                              | 主题覆盖                         |
 | `striped`          | `boolean`                                                                              | 是否开启斑马纹                   |
 | `highlightMode`    | `"cell" \| "row" \| "column" \| "cross"`                                               | 点击高亮模式                     |
+| `keyboardNavigation` | `{ tabWrap?: boolean; verticalWrap?: boolean }` | 键盘边界导航；两项默认均为 `true` |
 | `contextMenu`      | `false \| ListTableContextMenuOptions`                                                 | 右键菜单配置                     |
 | `grouping`         | `ListTableGroupingOptions`                                                             | 分组栏、初始分组列与变化回调     |
 | `rowHeight`        | `number \| "auto"`                                                                     | 行高                             |
@@ -268,6 +269,8 @@ table.mount();
 | `rowDrag`          | `ListTableRowDragOptions`                                                              | 行拖拽配置                       |
 | `debug`            | `ListTableDebugOptions`                                                                | 调试配置                         |
 
+`keyboardNavigation.tabWrap` 控制 Tab / Shift+Tab 在行尾 / 行首是否进入相邻行；`verticalWrap` 控制 ↑ / ↓ 在列首 / 列尾是否进入相邻列。设为 `false` 时到对应边界即停止，不改变当前活动单元格。
+
 ### 分批加载与服务端汇总
 
 数据仍在异步生成或分批加载时，设置表格顶层属性 `loading: true`。此时汇总行及标题正常显示，统计结果保持空白，也不会计算首批临时数据。完整数据就绪后，将完整 `dataSource` 与 `loading: false` 一起更新，表格自动计算汇总并在完成后统一显示结果。默认值为 `false`，正常的空数据仍可汇总为零。

package/dist/index.cjs

@@ -2134,7 +2134,7 @@ function createEmptySelection() {
   };
 }
 function resolveAdjacentCellSelection(params) {
-  const { selection, rowCount, columnKeys, direction } = params;
+  const { selection, rowCount, columnKeys, direction, verticalWrap = true } = params;
   if (selection.rowIndex == null || selection.columnKey == null || selection.rowIndex < 0 || selection.rowIndex >= rowCount) {
     return null;
   }
@@ -2143,6 +2143,10 @@ function resolveAdjacentCellSelection(params) {
     return null;
   }
   if (direction === "up" || direction === "down") {
+    const nextRowIndex = selection.rowIndex + (direction === "up" ? -1 : 1);
+    if (!verticalWrap) {
+      return nextRowIndex < 0 || nextRowIndex >= rowCount ? null : { rowIndex: nextRowIndex, columnKey: selection.columnKey };
+    }
     const flatIndex = columnIndex * rowCount + selection.rowIndex;
     const nextFlatIndex = flatIndex + (direction === "up" ? -1 : 1);
     const cellCount = rowCount * columnKeys.length;
@@ -2165,7 +2169,7 @@ function resolveAdjacentCellSelection(params) {
   };
 }
 function resolveTabCellSelection(params) {
-  const { selection, rowCount, columnKeys, reverse = false } = params;
+  const { selection, rowCount, columnKeys, reverse = false, tabWrap = true } = params;
   if (selection.rowIndex == null || selection.columnKey == null || selection.rowIndex < 0 || selection.rowIndex >= rowCount || columnKeys.length === 0) {
     return null;
   }
@@ -2173,6 +2177,13 @@ function resolveTabCellSelection(params) {
   if (columnIndex < 0) {
     return null;
   }
+  if (!tabWrap) {
+    const nextColumnIndex = columnIndex + (reverse ? -1 : 1);
+    return nextColumnIndex < 0 || nextColumnIndex >= columnKeys.length ? null : {
+      rowIndex: selection.rowIndex,
+      columnKey: columnKeys[nextColumnIndex]
+    };
+  }
   const flatIndex = selection.rowIndex * columnKeys.length + columnIndex;
   const nextFlatIndex = flatIndex + (reverse ? -1 : 1);
   const cellCount = rowCount * columnKeys.length;
@@ -8711,6 +8722,7 @@ function drawHeaderCell(params, cell, clipRect) {
         rect: getHeaderSelectionRect(rect),
         columnKey: cell.node.key,
         controlType: params.rowSelection.type,
+        cursor: params.rowSelection.disabled ? "not-allowed" : "pointer",
         fixed: cell.node.fixed
       });
     }
@@ -8900,6 +8912,7 @@ function drawHeaderActions(params, rect, columnKey, visibilityState, fixed, visi
       rect: hitRect,
       columnKey,
       actionType,
+      cursor: "pointer",
       visibilityState,
       fixed
     });
@@ -11099,7 +11112,7 @@ function drawBodySelectionContent(params) {
     controlType: content.type,
     contentIndex,
     contentKey: content.key,
-    cursor: content.disabled === true ? "not-allowed" : content.cursor ?? (content.onClick ? "pointer" : void 0)
+    cursor: content.disabled === true ? "not-allowed" : content.cursor ?? (content.onClick || column.key === ROW_SELECTION_COLUMN_KEY ? "pointer" : void 0)
   });
   return controlRect.width;
 }
@@ -11115,7 +11128,14 @@ function drawSelectionControl(ctx, rect, type, checked, disabled, indeterminate
     ctx.fillStyle = fillColor;
     ctx.strokeStyle = strokeColor;
     ctx.lineWidth = 1.5;
-    roundRectPath2(ctx, rect.x, rect.y, rect.width, rect.height, 4);
+    roundRectPath2(
+      ctx,
+      rect.x + 1,
+      rect.y + 1,
+      Math.max(rect.width - 2, 0),
+      Math.max(rect.height - 2, 0),
+      4
+    );
     ctx.fill();
     ctx.stroke();
     if (indeterminate) {
@@ -19245,7 +19265,7 @@ function resolveScrollTopToRevealRow(params) {
   if (frozenRows.top.rowIndexMap?.includes(rowIndex) || frozenRows.bottom.rowIndexMap?.includes(rowIndex)) {
     return null;
   }
-  const scrollSectionIndex = frozenRows.scroll.rowIndexMap ? frozenRows.scroll.rowIndexMap.indexOf(rowIndex) : rowIndex;
+  const scrollSectionIndex = frozenRows.scroll.dataRowIndexAligned ? rowIndex : frozenRows.scroll.rowIndexMap ? frozenRows.scroll.rowIndexMap.indexOf(rowIndex) : rowIndex;
   if (scrollSectionIndex < 0) {
     return null;
   }
@@ -19488,7 +19508,7 @@ var ListTableEditingController = class {
     });
     const nextTop = resolveScrollTopToRevealRow({
       rowIndex,
-      rowCount: snapshot.visibleRows.length,
+      rowCount: snapshot.frozenRows.scroll.dataRowIndexAligned ? snapshot.dataRowCount : snapshot.visibleRows.length,
       rowHeight: snapshot.rowHeight,
       bodyHeight: snapshot.bodyLayout.scrollBodyHeight,
       scrollTop: scroll.top,
@@ -20193,6 +20213,7 @@ function drawSegmentRows(params, segment, columns, startRowIndex, endRowIndex, r
         kind: "body",
         rect,
         columnKey: cell.column.key,
+        cursor: cell.column.key === ROW_SELECTOR_COLUMN_KEY ? "pointer" : void 0,
         rowIndex: cell.sourceRowIndex,
         rowSpan: cell.rowSpan,
         fixed: cell.column.fixed,
@@ -28469,11 +28490,19 @@ var ListTableEventController = class {
         rowCount: this.host.getDisplayData().length,
         columnKeys: this.host.leafColumns.filter((column) => !isSystemColumnKey(column.key)).map((column) => column.key)
       };
-      const target = direction ? resolveAdjacentCellSelection({ ...navigationParams, direction }) : resolveTabCellSelection({
+      const target = direction ? resolveAdjacentCellSelection({
         ...navigationParams,
-        reverse: event.shiftKey
+        direction,
+        verticalWrap: this.host.options.keyboardNavigation?.verticalWrap
+      }) : resolveTabCellSelection({
+        ...navigationParams,
+        reverse: event.shiftKey,
+        tabWrap: this.host.options.keyboardNavigation?.tabWrap
       });
       if (!target) {
+        if (event.key === "Tab" && this.host.options.keyboardNavigation?.tabWrap === false) {
+          event.preventDefault();
+        }
         return;
       }
       event.preventDefault();