@canvas-components/list-table 0.3.31 → 0.3.32

package/dist/index.cjs

@@ -30790,7 +30790,7 @@ var ListTableEventController = class {
         this.host.updateTooltip(result);
         return;
       }
-      if ((event.shiftKey || toggleColumn) && (result.area === "body" || result.area === "body-content") && typeof result.rowIndex === "number" && result.columnKey && !isSystemColumnKey(result.columnKey)) {
+      if ((event.shiftKey || toggleColumn) && (result.area === "body" || result.area === "body-content") && !(event.shiftKey && !toggleColumn && this.host.options.rowSelection?.selectRowByClick && this.host.options.rowSelection.type !== "radio") && typeof result.rowIndex === "number" && result.columnKey && !isSystemColumnKey(result.columnKey)) {
         const columnIndex = this.host.leafColumns.findIndex(
           (column) => column.key === result.columnKey
         );
@@ -30936,7 +30936,7 @@ var ListTableEventController = class {
       if ((result.area === "body-control" || result.area === "body") && result.columnKey === ROW_SELECTION_COLUMN_KEY && typeof result.rowIndex === "number") {
         const record = this.resolveBodyRecord(result.rowIndex);
         if (record) {
-          this.host.toggleRowSelection(record, result.rowIndex);
+          this.host.toggleRowSelection(record, result.rowIndex, event.shiftKey);
         }
         return;
       }
@@ -30957,9 +30957,13 @@ var ListTableEventController = class {
             }
           );
           if (canOpenEditorByDoubleClick && event.detail === 1) {
-            this.scheduleEditableCellRowSelection(record, result.rowIndex);
+            this.scheduleEditableCellRowSelection(
+              record,
+              result.rowIndex,
+              event.shiftKey
+            );
           } else if (!canOpenEditorByDoubleClick || event.detail !== 2) {
-            this.host.toggleRowSelection(record, result.rowIndex);
+            this.host.toggleRowSelection(record, result.rowIndex, event.shiftKey);
           }
         }
       }
@@ -31538,11 +31542,11 @@ var ListTableEventController = class {
     event.preventDefault();
     this.host.editingController.open(rowIndex, columnKey, event.key);
   }
-  scheduleEditableCellRowSelection(record, rowIndex) {
+  scheduleEditableCellRowSelection(record, rowIndex, shiftKey) {
     this.cancelPendingEditableCellRowSelection();
     this.pendingEditableCellRowSelectionTimer = globalThis.setTimeout(() => {
       this.pendingEditableCellRowSelectionTimer = null;
-      this.host.toggleRowSelection(record, rowIndex);
+      this.host.toggleRowSelection(record, rowIndex, shiftKey);
     }, EDITABLE_CELL_ROW_SELECTION_DELAY);
   }
   cancelPendingEditableCellRowSelection() {
@@ -33088,7 +33092,10 @@ function createListTableEventHost(core) {
     clearBodySelection: () => core.selectionController.clearBodySelection(),
     clearSelectedHeader: () => core.selectionController.clearSelectedHeader(),
     selectHeader: (columnKey, rect) => core.selectionController.selectHeader(columnKey, rect),
-    resetRangeHighlightForHeaderSelection: (shiftKey, ctrlKey) => core.selectionController.resetRangeHighlightForHeaderSelection(shiftKey, ctrlKey),
+    resetRangeHighlightForHeaderSelection: (shiftKey, ctrlKey) => core.selectionController.resetRangeHighlightForHeaderSelection(
+      shiftKey,
+      ctrlKey
+    ),
     updateRangeHighlightForBodyInteraction: (params) => core.selectionController.updateRangeHighlightForBodyInteraction(params),
     updateRangeHighlightForHeaderClick: (columnKey, shiftKey, ctrlKey) => core.selectionController.updateRangeHighlightForHeaderClick(
       columnKey,
@@ -33107,7 +33114,7 @@ function createListTableEventHost(core) {
     showCellContentPreview: (content) => core.contentActionController.showCellContentPreview(content),
     showDangerConfirmRequest: (request) => core.overlayController.showDangerConfirm(request),
     toggleSelectAllVisibleRows: () => core.rowActionController.toggleSelectAllVisibleRows(),
-    toggleRowSelection: (record, rowIndex) => core.rowActionController.toggleRowSelection(record, rowIndex),
+    toggleRowSelection: (record, rowIndex, shiftKey) => core.rowActionController.toggleRowSelection(record, rowIndex, shiftKey),
     toggleRowExpand: (rowIndex) => core.rowActionController.toggleRowExpand(rowIndex),
     expandCollapsedRange: (contentKey) => core.rowActionController.expandCollapsedRange(contentKey),
     expandCollapsedColumnRange: (contentKey) => core.rowActionController.expandCollapsedColumnRange(contentKey),
@@ -35589,7 +35596,35 @@ function emitSelectionChange(params) {
 
 // src/services/selection-action-service.ts
 function resolveToggleSingleSelectionAction(params) {
-  return toggleSingleRowSelection(params);
+  const single = toggleSingleRowSelection(params);
+  const { options, anchorKey, displayData } = params;
+  if (!single || options.rowSelection?.type === "radio" || anchorKey == null || !displayData) {
+    return single;
+  }
+  const targetKey = getRowKey(options, params.record, params.rowIndex);
+  const anchorIndex = displayData.findIndex(
+    (record, index) => getRowKey(options, record, index) === anchorKey
+  );
+  const targetIndex = displayData.findIndex(
+    (record, index) => getRowKey(options, record, index) === targetKey
+  );
+  if (anchorIndex < 0 || targetIndex < 0 || anchorIndex === targetIndex)
+    return single;
+  const keys = new Set(params.selectedRowKeys);
+  for (let index = Math.min(anchorIndex, targetIndex); index <= Math.max(anchorIndex, targetIndex); index += 1) {
+    const record = displayData[index];
+    if (options.rowSelection?.getCheckboxProps?.(record)?.disabled) continue;
+    const key = getRowKey(options, record, index);
+    if (single.selected) keys.delete(key);
+    else keys.add(key);
+  }
+  const nextKeys = [...keys];
+  return {
+    ...single,
+    nextKeys,
+    selectedRows: getSelectedRows(options, nextKeys),
+    multiple: true
+  };
 }
 function resolveToggleAllVisibleSelectionAction(params) {
   return toggleAllVisibleRowSelection(params);
@@ -35649,6 +35684,7 @@ function fromBoundaryRightX(columnKey, positions, widths) {
 var ListTableRowActionController = class {
   constructor(options) {
     __publicField(this, "options");
+    __publicField(this, "selectionAnchorKey");
     this.options = options;
   }
   freezeRow(rowIndex, position) {
@@ -35864,17 +35900,27 @@ var ListTableRowActionController = class {
     this.options.requestRender();
     return true;
   }
-  toggleRowSelection(record, rowIndex) {
+  toggleRowSelection(record, rowIndex, shiftKey = false) {
     const resolved = resolveToggleSingleSelectionAction({
       options: this.options.getOptions(),
       selectedRowKeys: this.options.getSelectedRowKeys(),
       record,
-      rowIndex
+      rowIndex,
+      anchorKey: shiftKey ? this.selectionAnchorKey : void 0,
+      displayData: shiftKey ? this.options.getDisplayData() : void 0
     });
     if (!resolved) {
       return;
     }
-    this.updateSelectedRowKeys(resolved.nextKeys, "single");
+    this.selectionAnchorKey = getRowKey(
+      this.options.getOptions(),
+      record,
+      rowIndex
+    );
+    this.updateSelectedRowKeys(
+      resolved.nextKeys,
+      "multiple" in resolved ? "multiple" : "single"
+    );
     this.options.getOptions().rowSelection?.onSelect?.(
       record,
       !resolved.selected,

package/dist/index.d.cts

@@ -1987,7 +1987,7 @@ interface ListTableRowSelectionChangeInfo {
     type: "single" | "all" | "invert" | "none" | "multiple";
 }
 /**
- * 行选择配置。
+ * 行选择配置。checkbox 模式支持 Shift 点击，按当前显示顺序批量切换两次点击之间的行。
  */
 interface ListTableRowSelectionOptions<RecordType> {
     type?: "checkbox" | "radio";

package/dist/index.d.ts

@@ -1987,7 +1987,7 @@ interface ListTableRowSelectionChangeInfo {
     type: "single" | "all" | "invert" | "none" | "multiple";
 }
 /**
- * 行选择配置。
+ * 行选择配置。checkbox 模式支持 Shift 点击，按当前显示顺序批量切换两次点击之间的行。
  */
 interface ListTableRowSelectionOptions<RecordType> {
     type?: "checkbox" | "radio";

package/dist/index.js

@@ -30768,7 +30768,7 @@ var ListTableEventController = class {
         this.host.updateTooltip(result);
         return;
       }
-      if ((event.shiftKey || toggleColumn) && (result.area === "body" || result.area === "body-content") && typeof result.rowIndex === "number" && result.columnKey && !isSystemColumnKey(result.columnKey)) {
+      if ((event.shiftKey || toggleColumn) && (result.area === "body" || result.area === "body-content") && !(event.shiftKey && !toggleColumn && this.host.options.rowSelection?.selectRowByClick && this.host.options.rowSelection.type !== "radio") && typeof result.rowIndex === "number" && result.columnKey && !isSystemColumnKey(result.columnKey)) {
         const columnIndex = this.host.leafColumns.findIndex(
           (column) => column.key === result.columnKey
         );
@@ -30914,7 +30914,7 @@ var ListTableEventController = class {
       if ((result.area === "body-control" || result.area === "body") && result.columnKey === ROW_SELECTION_COLUMN_KEY && typeof result.rowIndex === "number") {
         const record = this.resolveBodyRecord(result.rowIndex);
         if (record) {
-          this.host.toggleRowSelection(record, result.rowIndex);
+          this.host.toggleRowSelection(record, result.rowIndex, event.shiftKey);
         }
         return;
       }
@@ -30935,9 +30935,13 @@ var ListTableEventController = class {
             }
           );
           if (canOpenEditorByDoubleClick && event.detail === 1) {
-            this.scheduleEditableCellRowSelection(record, result.rowIndex);
+            this.scheduleEditableCellRowSelection(
+              record,
+              result.rowIndex,
+              event.shiftKey
+            );
           } else if (!canOpenEditorByDoubleClick || event.detail !== 2) {
-            this.host.toggleRowSelection(record, result.rowIndex);
+            this.host.toggleRowSelection(record, result.rowIndex, event.shiftKey);
           }
         }
       }
@@ -31516,11 +31520,11 @@ var ListTableEventController = class {
     event.preventDefault();
     this.host.editingController.open(rowIndex, columnKey, event.key);
   }
-  scheduleEditableCellRowSelection(record, rowIndex) {
+  scheduleEditableCellRowSelection(record, rowIndex, shiftKey) {
     this.cancelPendingEditableCellRowSelection();
     this.pendingEditableCellRowSelectionTimer = globalThis.setTimeout(() => {
       this.pendingEditableCellRowSelectionTimer = null;
-      this.host.toggleRowSelection(record, rowIndex);
+      this.host.toggleRowSelection(record, rowIndex, shiftKey);
     }, EDITABLE_CELL_ROW_SELECTION_DELAY);
   }
   cancelPendingEditableCellRowSelection() {
@@ -33066,7 +33070,10 @@ function createListTableEventHost(core) {
     clearBodySelection: () => core.selectionController.clearBodySelection(),
     clearSelectedHeader: () => core.selectionController.clearSelectedHeader(),
     selectHeader: (columnKey, rect) => core.selectionController.selectHeader(columnKey, rect),
-    resetRangeHighlightForHeaderSelection: (shiftKey, ctrlKey) => core.selectionController.resetRangeHighlightForHeaderSelection(shiftKey, ctrlKey),
+    resetRangeHighlightForHeaderSelection: (shiftKey, ctrlKey) => core.selectionController.resetRangeHighlightForHeaderSelection(
+      shiftKey,
+      ctrlKey
+    ),
     updateRangeHighlightForBodyInteraction: (params) => core.selectionController.updateRangeHighlightForBodyInteraction(params),
     updateRangeHighlightForHeaderClick: (columnKey, shiftKey, ctrlKey) => core.selectionController.updateRangeHighlightForHeaderClick(
       columnKey,
@@ -33085,7 +33092,7 @@ function createListTableEventHost(core) {
     showCellContentPreview: (content) => core.contentActionController.showCellContentPreview(content),
     showDangerConfirmRequest: (request) => core.overlayController.showDangerConfirm(request),
     toggleSelectAllVisibleRows: () => core.rowActionController.toggleSelectAllVisibleRows(),
-    toggleRowSelection: (record, rowIndex) => core.rowActionController.toggleRowSelection(record, rowIndex),
+    toggleRowSelection: (record, rowIndex, shiftKey) => core.rowActionController.toggleRowSelection(record, rowIndex, shiftKey),
     toggleRowExpand: (rowIndex) => core.rowActionController.toggleRowExpand(rowIndex),
     expandCollapsedRange: (contentKey) => core.rowActionController.expandCollapsedRange(contentKey),
     expandCollapsedColumnRange: (contentKey) => core.rowActionController.expandCollapsedColumnRange(contentKey),
@@ -35567,7 +35574,35 @@ function emitSelectionChange(params) {
 
 // src/services/selection-action-service.ts
 function resolveToggleSingleSelectionAction(params) {
-  return toggleSingleRowSelection(params);
+  const single = toggleSingleRowSelection(params);
+  const { options, anchorKey, displayData } = params;
+  if (!single || options.rowSelection?.type === "radio" || anchorKey == null || !displayData) {
+    return single;
+  }
+  const targetKey = getRowKey(options, params.record, params.rowIndex);
+  const anchorIndex = displayData.findIndex(
+    (record, index) => getRowKey(options, record, index) === anchorKey
+  );
+  const targetIndex = displayData.findIndex(
+    (record, index) => getRowKey(options, record, index) === targetKey
+  );
+  if (anchorIndex < 0 || targetIndex < 0 || anchorIndex === targetIndex)
+    return single;
+  const keys = new Set(params.selectedRowKeys);
+  for (let index = Math.min(anchorIndex, targetIndex); index <= Math.max(anchorIndex, targetIndex); index += 1) {
+    const record = displayData[index];
+    if (options.rowSelection?.getCheckboxProps?.(record)?.disabled) continue;
+    const key = getRowKey(options, record, index);
+    if (single.selected) keys.delete(key);
+    else keys.add(key);
+  }
+  const nextKeys = [...keys];
+  return {
+    ...single,
+    nextKeys,
+    selectedRows: getSelectedRows(options, nextKeys),
+    multiple: true
+  };
 }
 function resolveToggleAllVisibleSelectionAction(params) {
   return toggleAllVisibleRowSelection(params);
@@ -35627,6 +35662,7 @@ function fromBoundaryRightX(columnKey, positions, widths) {
 var ListTableRowActionController = class {
   constructor(options) {
     __publicField(this, "options");
+    __publicField(this, "selectionAnchorKey");
     this.options = options;
   }
   freezeRow(rowIndex, position) {
@@ -35842,17 +35878,27 @@ var ListTableRowActionController = class {
     this.options.requestRender();
     return true;
   }
-  toggleRowSelection(record, rowIndex) {
+  toggleRowSelection(record, rowIndex, shiftKey = false) {
     const resolved = resolveToggleSingleSelectionAction({
       options: this.options.getOptions(),
       selectedRowKeys: this.options.getSelectedRowKeys(),
       record,
-      rowIndex
+      rowIndex,
+      anchorKey: shiftKey ? this.selectionAnchorKey : void 0,
+      displayData: shiftKey ? this.options.getDisplayData() : void 0
     });
     if (!resolved) {
       return;
     }
-    this.updateSelectedRowKeys(resolved.nextKeys, "single");
+    this.selectionAnchorKey = getRowKey(
+      this.options.getOptions(),
+      record,
+      rowIndex
+    );
+    this.updateSelectedRowKeys(
+      resolved.nextKeys,
+      "multiple" in resolved ? "multiple" : "single"
+    );
     this.options.getOptions().rowSelection?.onSelect?.(
       record,
       !resolved.selected,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canvas-components/list-table",
-  "version": "0.3.31",
+  "version": "0.3.32",
   "description": "Framework-agnostic list table core engine.",
   "license": "MIT",
   "type": "module",
@@ -28,10 +28,10 @@
   "dependencies": {
     "@ant-design/icons-svg": "4.6.0",
     "@canvas-components/barcode": "0.2.2",
-    "@canvas-components/stats": "0.1.4",
-    "@canvas-components/utils": "0.2.8",
     "@canvas-components/chart": "0.3.7",
-    "@canvas-components/qrcode": "0.2.2"
+    "@canvas-components/stats": "0.1.4",
+    "@canvas-components/qrcode": "0.2.2",
+    "@canvas-components/utils": "0.2.8"
   },
   "scripts": {
     "build": "tsup --config tsup.config.ts"