@lensui/lens-table 0.1.15 → 0.1.16

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 (5) hide show
  1. package/README.md +1 -0
  2. package/dist/index.cjs +9 -6
  3. package/dist/index.css +4 -0
  4. package/dist/index.js +9 -6
  5. package/package.json +1 -1
package/README.md CHANGED
@@ -600,6 +600,7 @@ const columns: GridColumn<Row>[] = [
600
600
  | `--rvg-color-primary` | 选中、按钮、焦点等强调色。 |
601
601
  | `--rvg-color-selection-fill` | 单元格选中背景。 |
602
602
  | `--rvg-color-axis-selection-fill` | 行/列选中背景。 |
603
+ | `--rvg-color-axis-selection-text` | 行/列选中后的正文和选择标记颜色，默认继承主文本色。 |
603
604
  | `--rvg-color-edited-fill` | 已编辑单元格背景。 |
604
605
  | `--rvg-color-stripe` | `striped={true}` 时的斑马纹背景。也可以直接通过 `striped="#f6faff"` 单独指定。 |
605
606
 
package/dist/index.cjs CHANGED
@@ -920,6 +920,7 @@ var COLORS = {
920
920
  selection: "#1677ff",
921
921
  selectionFill: "#edf4ff",
922
922
  axisSelectionFill: "#e8f2ff",
923
+ axisSelectionText: "#202124",
923
924
  rowHoverFill: "#f6f9fc",
924
925
  editedFill: "#fff1b8",
925
926
  insertedFill: "#c8ead4",
@@ -1018,6 +1019,7 @@ function paintGrid(options) {
1018
1019
  const colSpan = span?.colSpan ?? 1;
1019
1020
  const cellWidth = getCellWidth(columnIndex, colSpan);
1020
1021
  const cellHeight = rowHeight * rowSpan;
1022
+ const isAxisSelected = selectedRowKeys.has(rowKey) || selectedColumnKeys.has(column.key);
1021
1023
  const rangeRowStart = selectionRange ? Math.min(selectionRange.anchor.rowIndex, selectionRange.focus.rowIndex) : -1;
1022
1024
  const rangeRowEnd = selectionRange ? Math.max(selectionRange.anchor.rowIndex, selectionRange.focus.rowIndex) : -1;
1023
1025
  const rangeColumnStart = selectionRange ? Math.min(selectionRange.anchor.columnIndex, selectionRange.focus.columnIndex) : -1;
@@ -1027,7 +1029,7 @@ function paintGrid(options) {
1027
1029
  ctx.fillStyle = striped && rowIndex % 2 === 1 ? colors.stripe : colors.background;
1028
1030
  ctx.fillRect(x, y, cellWidth, cellHeight);
1029
1031
  }
1030
- if (selectedRowKeys.has(rowKey) || selectedColumnKeys.has(column.key)) {
1032
+ if (isAxisSelected) {
1031
1033
  ctx.fillStyle = colors.axisSelectionFill;
1032
1034
  ctx.fillRect(x, y, cellWidth, cellHeight);
1033
1035
  }
@@ -1072,14 +1074,14 @@ function paintGrid(options) {
1072
1074
  ctx.fillRect(x, y + cellHeight - 1, cellWidth, 1);
1073
1075
  }
1074
1076
  if (rowSpan > 1) {
1075
- const mergedFill = 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 : selectedRowKeys.has(rowKey) || selectedColumnKeys.has(column.key) ? colors.axisSelectionFill : cellStyle?.backgroundColor ?? (striped && rowIndex % 2 === 1 ? colors.stripe : colors.background);
1077
+ const mergedFill = 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 ?? (striped && rowIndex % 2 === 1 ? colors.stripe : colors.background);
1076
1078
  ctx.fillStyle = mergedFill;
1077
1079
  for (let offset = 1; offset < rowSpan; offset += 1) {
1078
1080
  ctx.fillRect(x, y + offset * rowHeight - 1, cellWidth, 2);
1079
1081
  }
1080
1082
  }
1081
1083
  if (colSpan > 1 && !verticalBorderless) {
1082
- const mergedFill = 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 : selectedRowKeys.has(rowKey) || selectedColumnKeys.has(column.key) ? colors.axisSelectionFill : cellStyle?.backgroundColor ?? (striped && rowIndex % 2 === 1 ? colors.stripe : colors.background);
1084
+ const mergedFill = 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 ?? (striped && rowIndex % 2 === 1 ? colors.stripe : colors.background);
1083
1085
  ctx.fillStyle = mergedFill;
1084
1086
  let offsetLeft = 0;
1085
1087
  for (let offset = 1; offset < colSpan; offset += 1) {
@@ -1121,7 +1123,7 @@ function paintGrid(options) {
1121
1123
  ctx.moveTo(iconLeft + 8.5, iconTop + 4);
1122
1124
  ctx.lineTo(iconLeft + 12.5, iconTop + 8);
1123
1125
  ctx.lineTo(iconLeft + 8.5, iconTop + 12);
1124
- ctx.strokeStyle = colors.selection;
1126
+ ctx.strokeStyle = colors.axisSelectionText;
1125
1127
  ctx.lineWidth = 1.75;
1126
1128
  ctx.lineCap = "round";
1127
1129
  ctx.lineJoin = "round";
@@ -1175,7 +1177,7 @@ function paintGrid(options) {
1175
1177
  ctx.beginPath();
1176
1178
  ctx.rect(x + 2, y + 1, Math.max(0, cellWidth - 4), cellHeight - 2);
1177
1179
  ctx.clip();
1178
- ctx.fillStyle = column.rowNumber && selectedRowKeys.has(rowKey) ? colors.selection : cellStyle?.color ?? colors.text;
1180
+ ctx.fillStyle = isAxisSelected && !isSelectedCell && !isRangeCell ? colors.axisSelectionText : cellStyle?.color ?? colors.text;
1179
1181
  ctx.font = createCellFont(bodyFontSize);
1180
1182
  ctx.textBaseline = "alphabetic";
1181
1183
  ctx.textAlign = column.align === "right" ? "right" : column.align === "center" ? "center" : "left";
@@ -2276,6 +2278,7 @@ function TableInner({
2276
2278
  selection: readThemeColor(themeStyles, "--rvg-color-primary", "#1677ff"),
2277
2279
  selectionFill: readThemeColor(themeStyles, "--rvg-color-selection-fill", "#edf4ff"),
2278
2280
  axisSelectionFill: readThemeColor(themeStyles, "--rvg-color-axis-selection-fill", "#e8f2ff"),
2281
+ axisSelectionText: readThemeColor(themeStyles, "--rvg-color-axis-selection-text", readThemeColor(themeStyles, "--rvg-color-text", "#202124")),
2279
2282
  rowHoverFill: readThemeColor(themeStyles, "--rvg-color-row-hover-fill", "#f6f9fc"),
2280
2283
  editedFill: editedCellHighlightColor ?? readThemeColor(themeStyles, "--rvg-color-edited-fill", "#fff1b8"),
2281
2284
  insertedFill: insertedRowHighlightColor ?? readThemeColor(themeStyles, "--rvg-color-inserted-fill", "#c8ead4"),
@@ -4149,7 +4152,7 @@ function TableInner({
4149
4152
  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
4150
4153
  "div",
4151
4154
  {
4152
- className: "rvg-cell-render",
4155
+ className: `rvg-cell-render${selectedRowKeySet.has(getRowKey(row, rowIndex)) || selectedColumnKeySet.has(column.key) ? " is-axis-selected" : ""}`,
4153
4156
  style: {
4154
4157
  left,
4155
4158
  top,
package/dist/index.css CHANGED
@@ -16,6 +16,7 @@
16
16
  --rvg-color-primary-soft: #edf4ff;
17
17
  --rvg-color-selection-fill: #edf4ff;
18
18
  --rvg-color-axis-selection-fill: #e8f2ff;
19
+ --rvg-color-axis-selection-text: var(--rvg-color-text);
19
20
  --rvg-color-column-drop-target-fill: #eeeeee;
20
21
  --rvg-color-range-fill: #e8f1ff;
21
22
  --rvg-color-row-hover-fill: #f6f9fc;
@@ -270,6 +271,9 @@
270
271
  overflow: hidden;
271
272
  text-overflow: ellipsis;
272
273
  }
274
+ .rvg-cell-render.is-axis-selected {
275
+ color: var(--rvg-color-axis-selection-text);
276
+ }
273
277
  .rvg-summary-row {
274
278
  position: absolute;
275
279
  z-index: 4;
package/dist/index.js CHANGED
@@ -890,6 +890,7 @@ var COLORS = {
890
890
  selection: "#1677ff",
891
891
  selectionFill: "#edf4ff",
892
892
  axisSelectionFill: "#e8f2ff",
893
+ axisSelectionText: "#202124",
893
894
  rowHoverFill: "#f6f9fc",
894
895
  editedFill: "#fff1b8",
895
896
  insertedFill: "#c8ead4",
@@ -988,6 +989,7 @@ function paintGrid(options) {
988
989
  const colSpan = span?.colSpan ?? 1;
989
990
  const cellWidth = getCellWidth(columnIndex, colSpan);
990
991
  const cellHeight = rowHeight * rowSpan;
992
+ const isAxisSelected = selectedRowKeys.has(rowKey) || selectedColumnKeys.has(column.key);
991
993
  const rangeRowStart = selectionRange ? Math.min(selectionRange.anchor.rowIndex, selectionRange.focus.rowIndex) : -1;
992
994
  const rangeRowEnd = selectionRange ? Math.max(selectionRange.anchor.rowIndex, selectionRange.focus.rowIndex) : -1;
993
995
  const rangeColumnStart = selectionRange ? Math.min(selectionRange.anchor.columnIndex, selectionRange.focus.columnIndex) : -1;
@@ -997,7 +999,7 @@ function paintGrid(options) {
997
999
  ctx.fillStyle = striped && rowIndex % 2 === 1 ? colors.stripe : colors.background;
998
1000
  ctx.fillRect(x, y, cellWidth, cellHeight);
999
1001
  }
1000
- if (selectedRowKeys.has(rowKey) || selectedColumnKeys.has(column.key)) {
1002
+ if (isAxisSelected) {
1001
1003
  ctx.fillStyle = colors.axisSelectionFill;
1002
1004
  ctx.fillRect(x, y, cellWidth, cellHeight);
1003
1005
  }
@@ -1042,14 +1044,14 @@ function paintGrid(options) {
1042
1044
  ctx.fillRect(x, y + cellHeight - 1, cellWidth, 1);
1043
1045
  }
1044
1046
  if (rowSpan > 1) {
1045
- const mergedFill = 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 : selectedRowKeys.has(rowKey) || selectedColumnKeys.has(column.key) ? colors.axisSelectionFill : cellStyle?.backgroundColor ?? (striped && rowIndex % 2 === 1 ? colors.stripe : colors.background);
1047
+ const mergedFill = 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 ?? (striped && rowIndex % 2 === 1 ? colors.stripe : colors.background);
1046
1048
  ctx.fillStyle = mergedFill;
1047
1049
  for (let offset = 1; offset < rowSpan; offset += 1) {
1048
1050
  ctx.fillRect(x, y + offset * rowHeight - 1, cellWidth, 2);
1049
1051
  }
1050
1052
  }
1051
1053
  if (colSpan > 1 && !verticalBorderless) {
1052
- const mergedFill = 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 : selectedRowKeys.has(rowKey) || selectedColumnKeys.has(column.key) ? colors.axisSelectionFill : cellStyle?.backgroundColor ?? (striped && rowIndex % 2 === 1 ? colors.stripe : colors.background);
1054
+ const mergedFill = 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 ?? (striped && rowIndex % 2 === 1 ? colors.stripe : colors.background);
1053
1055
  ctx.fillStyle = mergedFill;
1054
1056
  let offsetLeft = 0;
1055
1057
  for (let offset = 1; offset < colSpan; offset += 1) {
@@ -1091,7 +1093,7 @@ function paintGrid(options) {
1091
1093
  ctx.moveTo(iconLeft + 8.5, iconTop + 4);
1092
1094
  ctx.lineTo(iconLeft + 12.5, iconTop + 8);
1093
1095
  ctx.lineTo(iconLeft + 8.5, iconTop + 12);
1094
- ctx.strokeStyle = colors.selection;
1096
+ ctx.strokeStyle = colors.axisSelectionText;
1095
1097
  ctx.lineWidth = 1.75;
1096
1098
  ctx.lineCap = "round";
1097
1099
  ctx.lineJoin = "round";
@@ -1145,7 +1147,7 @@ function paintGrid(options) {
1145
1147
  ctx.beginPath();
1146
1148
  ctx.rect(x + 2, y + 1, Math.max(0, cellWidth - 4), cellHeight - 2);
1147
1149
  ctx.clip();
1148
- ctx.fillStyle = column.rowNumber && selectedRowKeys.has(rowKey) ? colors.selection : cellStyle?.color ?? colors.text;
1150
+ ctx.fillStyle = isAxisSelected && !isSelectedCell && !isRangeCell ? colors.axisSelectionText : cellStyle?.color ?? colors.text;
1149
1151
  ctx.font = createCellFont(bodyFontSize);
1150
1152
  ctx.textBaseline = "alphabetic";
1151
1153
  ctx.textAlign = column.align === "right" ? "right" : column.align === "center" ? "center" : "left";
@@ -2246,6 +2248,7 @@ function TableInner({
2246
2248
  selection: readThemeColor(themeStyles, "--rvg-color-primary", "#1677ff"),
2247
2249
  selectionFill: readThemeColor(themeStyles, "--rvg-color-selection-fill", "#edf4ff"),
2248
2250
  axisSelectionFill: readThemeColor(themeStyles, "--rvg-color-axis-selection-fill", "#e8f2ff"),
2251
+ axisSelectionText: readThemeColor(themeStyles, "--rvg-color-axis-selection-text", readThemeColor(themeStyles, "--rvg-color-text", "#202124")),
2249
2252
  rowHoverFill: readThemeColor(themeStyles, "--rvg-color-row-hover-fill", "#f6f9fc"),
2250
2253
  editedFill: editedCellHighlightColor ?? readThemeColor(themeStyles, "--rvg-color-edited-fill", "#fff1b8"),
2251
2254
  insertedFill: insertedRowHighlightColor ?? readThemeColor(themeStyles, "--rvg-color-inserted-fill", "#c8ead4"),
@@ -4119,7 +4122,7 @@ function TableInner({
4119
4122
  return /* @__PURE__ */ jsx7(
4120
4123
  "div",
4121
4124
  {
4122
- className: "rvg-cell-render",
4125
+ className: `rvg-cell-render${selectedRowKeySet.has(getRowKey(row, rowIndex)) || selectedColumnKeySet.has(column.key) ? " is-axis-selected" : ""}`,
4123
4126
  style: {
4124
4127
  left,
4125
4128
  top,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lensui/lens-table",
3
- "version": "0.1.15",
3
+ "version": "0.1.16",
4
4
  "description": "A lightweight, canvas-rendered React table component for LensUI.",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",