@lensui/lens-table 0.1.34 → 0.1.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/index.cjs +10 -7
  2. package/dist/index.css +3 -3
  3. package/dist/index.js +10 -7
  4. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -1049,7 +1049,7 @@ function paintGrid(options) {
1049
1049
  ctx.fillRect(x, y, cellWidth, cellHeight);
1050
1050
  }
1051
1051
  if (isColumnDropTarget) {
1052
- ctx.fillStyle = colors.columnDropTargetFill;
1052
+ ctx.fillStyle = isAxisSelected ? colors.axisSelectionFill : colors.columnDropTargetFill;
1053
1053
  ctx.fillRect(x, y, cellWidth, cellHeight);
1054
1054
  }
1055
1055
  ctx.fillStyle = colors.grid;
@@ -1061,14 +1061,14 @@ function paintGrid(options) {
1061
1061
  ctx.fillRect(x, y + cellHeight - 1, cellWidth, 1);
1062
1062
  }
1063
1063
  if (rowSpan > 1) {
1064
- const mergedFill = isColumnDropTarget ? colors.columnDropTargetFill : annotation?.type === "background" ? annotation.color : isSelectedCell || isRangeCell ? colors.selectionFill : highlightEditedCells && !insertedRowKeys.has(rowKey) && editedCellKeys.has(`${typeof rowKey}:${String(rowKey)}\0${column.key}`) ? colors.editedFill : highlightInsertedRows && insertedRowKeys.has(rowKey) ? colors.insertedFill : hoveredRowIndex === rowIndex ? colors.rowHoverFill : isAxisSelected ? colors.axisSelectionFill : cellStyle?.backgroundColor ?? rowStyle?.backgroundColor ?? (striped && rowIndex % 2 === 1 ? colors.stripe : colors.background);
1064
+ const mergedFill = isColumnDropTarget ? isAxisSelected ? colors.axisSelectionFill : colors.columnDropTargetFill : annotation?.type === "background" ? annotation.color : isSelectedCell || isRangeCell ? colors.selectionFill : highlightEditedCells && !insertedRowKeys.has(rowKey) && editedCellKeys.has(`${typeof rowKey}:${String(rowKey)}\0${column.key}`) ? colors.editedFill : highlightInsertedRows && insertedRowKeys.has(rowKey) ? colors.insertedFill : hoveredRowIndex === rowIndex ? colors.rowHoverFill : isAxisSelected ? colors.axisSelectionFill : cellStyle?.backgroundColor ?? rowStyle?.backgroundColor ?? (striped && rowIndex % 2 === 1 ? colors.stripe : colors.background);
1065
1065
  ctx.fillStyle = mergedFill;
1066
1066
  for (let offset = 1; offset < rowSpan; offset += 1) {
1067
1067
  ctx.fillRect(x, y + offset * rowHeight - 1, cellWidth, 2);
1068
1068
  }
1069
1069
  }
1070
1070
  if (colSpan > 1 && !verticalBorderless) {
1071
- const mergedFill = isColumnDropTarget ? colors.columnDropTargetFill : annotation?.type === "background" ? annotation.color : isSelectedCell || isRangeCell ? colors.selectionFill : highlightEditedCells && !insertedRowKeys.has(rowKey) && editedCellKeys.has(`${typeof rowKey}:${String(rowKey)}\0${column.key}`) ? colors.editedFill : highlightInsertedRows && insertedRowKeys.has(rowKey) ? colors.insertedFill : hoveredRowIndex === rowIndex ? colors.rowHoverFill : isAxisSelected ? colors.axisSelectionFill : cellStyle?.backgroundColor ?? rowStyle?.backgroundColor ?? (striped && rowIndex % 2 === 1 ? colors.stripe : colors.background);
1071
+ const mergedFill = isColumnDropTarget ? isAxisSelected ? colors.axisSelectionFill : colors.columnDropTargetFill : annotation?.type === "background" ? annotation.color : isSelectedCell || isRangeCell ? colors.selectionFill : highlightEditedCells && !insertedRowKeys.has(rowKey) && editedCellKeys.has(`${typeof rowKey}:${String(rowKey)}\0${column.key}`) ? colors.editedFill : highlightInsertedRows && insertedRowKeys.has(rowKey) ? colors.insertedFill : hoveredRowIndex === rowIndex ? colors.rowHoverFill : isAxisSelected ? colors.axisSelectionFill : cellStyle?.backgroundColor ?? rowStyle?.backgroundColor ?? (striped && rowIndex % 2 === 1 ? colors.stripe : colors.background);
1072
1072
  ctx.fillStyle = mergedFill;
1073
1073
  let offsetLeft = 0;
1074
1074
  for (let offset = 1; offset < colSpan; offset += 1) {
@@ -1236,10 +1236,10 @@ function paintGrid(options) {
1236
1236
  ctx.rect(leftFixedWidth, extensionTop, Math.max(0, rightFixedLeft - leftFixedWidth), extensionHeight);
1237
1237
  ctx.clip();
1238
1238
  }
1239
- ctx.fillStyle = colors.columnDropTargetFill;
1240
1239
  for (let columnIndex = columnDropTarget.startIndex; columnIndex <= columnDropTarget.endIndex; columnIndex += 1) {
1241
1240
  if (layer === "scroll" ? columns[columnIndex]?.fixed !== void 0 : columns[columnIndex]?.fixed !== layer) continue;
1242
1241
  if (layer === "scroll" && (columnIndex < range.columnStart || columnIndex >= range.columnEnd)) continue;
1242
+ ctx.fillStyle = selectedColumnKeys.has(columns[columnIndex].key) ? colors.axisSelectionFill : colors.columnDropTargetFill;
1243
1243
  ctx.fillRect(getColumnX(columnIndex), extensionTop, metrics[columnIndex].width, extensionHeight);
1244
1244
  }
1245
1245
  ctx.restore();
@@ -1274,7 +1274,7 @@ function paintGrid(options) {
1274
1274
  ctx.fillRect(x, headerY, metric.width, headerHeight);
1275
1275
  }
1276
1276
  if (isColumnDropTarget) {
1277
- ctx.fillStyle = colors.columnDropTargetFill;
1277
+ ctx.fillStyle = isAxisSelected ? colors.axisSelectionFill : colors.columnDropTargetFill;
1278
1278
  ctx.fillRect(x, headerY, metric.width, headerHeight);
1279
1279
  }
1280
1280
  ctx.fillStyle = colors.grid;
@@ -2330,6 +2330,9 @@ function TableInner({
2330
2330
  if (!context) return;
2331
2331
  const themeStyles = getComputedStyle(canvas);
2332
2332
  const bodyFontSize = readThemePixel(themeStyles, "--rvg-font-size-body", 13);
2333
+ const isSelectedColumnDropTarget = Boolean(
2334
+ columnDropTarget && columns.slice(columnDropTarget.startIndex, columnDropTarget.endIndex + 1).some((column) => selectedColumnKeySet.has(column.key))
2335
+ );
2333
2336
  const themeColors = {
2334
2337
  background: readThemeColor(themeStyles, "--rvg-color-bg", "#ffffff"),
2335
2338
  header: readThemeColor(themeStyles, "--rvg-color-header-bg", "#f5f6f7"),
@@ -2340,8 +2343,8 @@ function TableInner({
2340
2343
  borderStrong: readThemeColor(themeStyles, "--rvg-color-border-strong", "#b8bec4"),
2341
2344
  selection: readThemeColor(themeStyles, "--rvg-color-primary", "#1677ff"),
2342
2345
  selectionFill: readThemeColor(themeStyles, "--rvg-color-selection-fill", "#edf4ff"),
2343
- axisSelectionFill: columnDragPreview && selectedColumnKeySet.has(columns[columnDragPreview.sourceIndex]?.key) ? readThemeColor(themeStyles, "--rvg-color-axis-selection-drag-fill", "#d8e8f8") : readThemeColor(themeStyles, "--rvg-color-axis-selection-fill", "#e8f2ff"),
2344
- axisSelectionText: columnDragPreview && selectedColumnKeySet.has(columns[columnDragPreview.sourceIndex]?.key) ? readThemeColor(themeStyles, "--rvg-color-axis-selection-drag-text", "#325b88") : readThemeColor(themeStyles, "--rvg-color-axis-selection-text", readThemeColor(themeStyles, "--rvg-color-text", "#202124")),
2346
+ axisSelectionFill: isSelectedColumnDropTarget ? readThemeColor(themeStyles, "--rvg-color-axis-selection-drag-fill", "#d8e8f8") : readThemeColor(themeStyles, "--rvg-color-axis-selection-fill", "#e8f2ff"),
2347
+ axisSelectionText: isSelectedColumnDropTarget ? readThemeColor(themeStyles, "--rvg-color-axis-selection-drag-text", "#325b88") : readThemeColor(themeStyles, "--rvg-color-axis-selection-text", readThemeColor(themeStyles, "--rvg-color-text", "#202124")),
2345
2348
  rowHoverFill: readThemeColor(themeStyles, "--rvg-color-row-hover-fill", "#f6f9fc"),
2346
2349
  editedFill: editedCellHighlightColor ?? readThemeColor(themeStyles, "--rvg-color-edited-fill", "#fff1b8"),
2347
2350
  insertedFill: insertedRowHighlightColor ?? readThemeColor(themeStyles, "--rvg-color-inserted-fill", "#c8ead4"),
package/dist/index.css CHANGED
@@ -1520,7 +1520,7 @@
1520
1520
  border: 1px solid color-mix(in srgb, var(--rvg-color-primary) 38%, var(--rvg-color-grid));
1521
1521
  background: var(--rvg-color-bg);
1522
1522
  box-shadow: 0 6px 18px rgba(50, 91, 136, 0.18);
1523
- opacity: 0.94;
1523
+ opacity: 1;
1524
1524
  pointer-events: none;
1525
1525
  box-sizing: border-box;
1526
1526
  }
@@ -1586,8 +1586,8 @@
1586
1586
  }
1587
1587
  .rvg-column-drag-preview-header.is-axis-selected,
1588
1588
  .rvg-column-drag-preview-cell.is-axis-selected {
1589
- background: var(--rvg-color-axis-selection-drag-fill);
1590
- color: var(--rvg-color-axis-selection-drag-text);
1589
+ background: var(--rvg-color-axis-selection-fill);
1590
+ color: var(--rvg-color-axis-selection-text);
1591
1591
  }
1592
1592
  .rvg-column-drag-preview-cell.is-edited {
1593
1593
  background: var(--rvg-color-edited-fill);
package/dist/index.js CHANGED
@@ -1019,7 +1019,7 @@ function paintGrid(options) {
1019
1019
  ctx.fillRect(x, y, cellWidth, cellHeight);
1020
1020
  }
1021
1021
  if (isColumnDropTarget) {
1022
- ctx.fillStyle = colors.columnDropTargetFill;
1022
+ ctx.fillStyle = isAxisSelected ? colors.axisSelectionFill : colors.columnDropTargetFill;
1023
1023
  ctx.fillRect(x, y, cellWidth, cellHeight);
1024
1024
  }
1025
1025
  ctx.fillStyle = colors.grid;
@@ -1031,14 +1031,14 @@ function paintGrid(options) {
1031
1031
  ctx.fillRect(x, y + cellHeight - 1, cellWidth, 1);
1032
1032
  }
1033
1033
  if (rowSpan > 1) {
1034
- const mergedFill = isColumnDropTarget ? colors.columnDropTargetFill : annotation?.type === "background" ? annotation.color : isSelectedCell || isRangeCell ? colors.selectionFill : highlightEditedCells && !insertedRowKeys.has(rowKey) && editedCellKeys.has(`${typeof rowKey}:${String(rowKey)}\0${column.key}`) ? colors.editedFill : highlightInsertedRows && insertedRowKeys.has(rowKey) ? colors.insertedFill : hoveredRowIndex === rowIndex ? colors.rowHoverFill : isAxisSelected ? colors.axisSelectionFill : cellStyle?.backgroundColor ?? rowStyle?.backgroundColor ?? (striped && rowIndex % 2 === 1 ? colors.stripe : colors.background);
1034
+ const mergedFill = isColumnDropTarget ? isAxisSelected ? colors.axisSelectionFill : colors.columnDropTargetFill : annotation?.type === "background" ? annotation.color : isSelectedCell || isRangeCell ? colors.selectionFill : highlightEditedCells && !insertedRowKeys.has(rowKey) && editedCellKeys.has(`${typeof rowKey}:${String(rowKey)}\0${column.key}`) ? colors.editedFill : highlightInsertedRows && insertedRowKeys.has(rowKey) ? colors.insertedFill : hoveredRowIndex === rowIndex ? colors.rowHoverFill : isAxisSelected ? colors.axisSelectionFill : cellStyle?.backgroundColor ?? rowStyle?.backgroundColor ?? (striped && rowIndex % 2 === 1 ? colors.stripe : colors.background);
1035
1035
  ctx.fillStyle = mergedFill;
1036
1036
  for (let offset = 1; offset < rowSpan; offset += 1) {
1037
1037
  ctx.fillRect(x, y + offset * rowHeight - 1, cellWidth, 2);
1038
1038
  }
1039
1039
  }
1040
1040
  if (colSpan > 1 && !verticalBorderless) {
1041
- const mergedFill = isColumnDropTarget ? colors.columnDropTargetFill : annotation?.type === "background" ? annotation.color : isSelectedCell || isRangeCell ? colors.selectionFill : highlightEditedCells && !insertedRowKeys.has(rowKey) && editedCellKeys.has(`${typeof rowKey}:${String(rowKey)}\0${column.key}`) ? colors.editedFill : highlightInsertedRows && insertedRowKeys.has(rowKey) ? colors.insertedFill : hoveredRowIndex === rowIndex ? colors.rowHoverFill : isAxisSelected ? colors.axisSelectionFill : cellStyle?.backgroundColor ?? rowStyle?.backgroundColor ?? (striped && rowIndex % 2 === 1 ? colors.stripe : colors.background);
1041
+ const mergedFill = isColumnDropTarget ? isAxisSelected ? colors.axisSelectionFill : colors.columnDropTargetFill : annotation?.type === "background" ? annotation.color : isSelectedCell || isRangeCell ? colors.selectionFill : highlightEditedCells && !insertedRowKeys.has(rowKey) && editedCellKeys.has(`${typeof rowKey}:${String(rowKey)}\0${column.key}`) ? colors.editedFill : highlightInsertedRows && insertedRowKeys.has(rowKey) ? colors.insertedFill : hoveredRowIndex === rowIndex ? colors.rowHoverFill : isAxisSelected ? colors.axisSelectionFill : cellStyle?.backgroundColor ?? rowStyle?.backgroundColor ?? (striped && rowIndex % 2 === 1 ? colors.stripe : colors.background);
1042
1042
  ctx.fillStyle = mergedFill;
1043
1043
  let offsetLeft = 0;
1044
1044
  for (let offset = 1; offset < colSpan; offset += 1) {
@@ -1206,10 +1206,10 @@ function paintGrid(options) {
1206
1206
  ctx.rect(leftFixedWidth, extensionTop, Math.max(0, rightFixedLeft - leftFixedWidth), extensionHeight);
1207
1207
  ctx.clip();
1208
1208
  }
1209
- ctx.fillStyle = colors.columnDropTargetFill;
1210
1209
  for (let columnIndex = columnDropTarget.startIndex; columnIndex <= columnDropTarget.endIndex; columnIndex += 1) {
1211
1210
  if (layer === "scroll" ? columns[columnIndex]?.fixed !== void 0 : columns[columnIndex]?.fixed !== layer) continue;
1212
1211
  if (layer === "scroll" && (columnIndex < range.columnStart || columnIndex >= range.columnEnd)) continue;
1212
+ ctx.fillStyle = selectedColumnKeys.has(columns[columnIndex].key) ? colors.axisSelectionFill : colors.columnDropTargetFill;
1213
1213
  ctx.fillRect(getColumnX(columnIndex), extensionTop, metrics[columnIndex].width, extensionHeight);
1214
1214
  }
1215
1215
  ctx.restore();
@@ -1244,7 +1244,7 @@ function paintGrid(options) {
1244
1244
  ctx.fillRect(x, headerY, metric.width, headerHeight);
1245
1245
  }
1246
1246
  if (isColumnDropTarget) {
1247
- ctx.fillStyle = colors.columnDropTargetFill;
1247
+ ctx.fillStyle = isAxisSelected ? colors.axisSelectionFill : colors.columnDropTargetFill;
1248
1248
  ctx.fillRect(x, headerY, metric.width, headerHeight);
1249
1249
  }
1250
1250
  ctx.fillStyle = colors.grid;
@@ -2300,6 +2300,9 @@ function TableInner({
2300
2300
  if (!context) return;
2301
2301
  const themeStyles = getComputedStyle(canvas);
2302
2302
  const bodyFontSize = readThemePixel(themeStyles, "--rvg-font-size-body", 13);
2303
+ const isSelectedColumnDropTarget = Boolean(
2304
+ columnDropTarget && columns.slice(columnDropTarget.startIndex, columnDropTarget.endIndex + 1).some((column) => selectedColumnKeySet.has(column.key))
2305
+ );
2303
2306
  const themeColors = {
2304
2307
  background: readThemeColor(themeStyles, "--rvg-color-bg", "#ffffff"),
2305
2308
  header: readThemeColor(themeStyles, "--rvg-color-header-bg", "#f5f6f7"),
@@ -2310,8 +2313,8 @@ function TableInner({
2310
2313
  borderStrong: readThemeColor(themeStyles, "--rvg-color-border-strong", "#b8bec4"),
2311
2314
  selection: readThemeColor(themeStyles, "--rvg-color-primary", "#1677ff"),
2312
2315
  selectionFill: readThemeColor(themeStyles, "--rvg-color-selection-fill", "#edf4ff"),
2313
- axisSelectionFill: columnDragPreview && selectedColumnKeySet.has(columns[columnDragPreview.sourceIndex]?.key) ? readThemeColor(themeStyles, "--rvg-color-axis-selection-drag-fill", "#d8e8f8") : readThemeColor(themeStyles, "--rvg-color-axis-selection-fill", "#e8f2ff"),
2314
- axisSelectionText: columnDragPreview && selectedColumnKeySet.has(columns[columnDragPreview.sourceIndex]?.key) ? readThemeColor(themeStyles, "--rvg-color-axis-selection-drag-text", "#325b88") : readThemeColor(themeStyles, "--rvg-color-axis-selection-text", readThemeColor(themeStyles, "--rvg-color-text", "#202124")),
2316
+ axisSelectionFill: isSelectedColumnDropTarget ? readThemeColor(themeStyles, "--rvg-color-axis-selection-drag-fill", "#d8e8f8") : readThemeColor(themeStyles, "--rvg-color-axis-selection-fill", "#e8f2ff"),
2317
+ axisSelectionText: isSelectedColumnDropTarget ? readThemeColor(themeStyles, "--rvg-color-axis-selection-drag-text", "#325b88") : readThemeColor(themeStyles, "--rvg-color-axis-selection-text", readThemeColor(themeStyles, "--rvg-color-text", "#202124")),
2315
2318
  rowHoverFill: readThemeColor(themeStyles, "--rvg-color-row-hover-fill", "#f6f9fc"),
2316
2319
  editedFill: editedCellHighlightColor ?? readThemeColor(themeStyles, "--rvg-color-edited-fill", "#fff1b8"),
2317
2320
  insertedFill: insertedRowHighlightColor ?? readThemeColor(themeStyles, "--rvg-color-inserted-fill", "#c8ead4"),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lensui/lens-table",
3
- "version": "0.1.34",
3
+ "version": "0.1.36",
4
4
  "description": "A lightweight, canvas-rendered React table component for LensUI.",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",