@lensui/lens-table 0.1.33 → 0.1.35
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.
- package/dist/index.cjs +14 -4
- package/dist/index.css +3 -1
- package/dist/index.js +14 -4
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -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:
|
|
2344
|
-
axisSelectionText:
|
|
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"),
|
|
@@ -5300,13 +5303,20 @@ function TableInner({
|
|
|
5300
5303
|
height: renderHeight
|
|
5301
5304
|
},
|
|
5302
5305
|
children: [
|
|
5303
|
-
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
5306
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
5307
|
+
"div",
|
|
5308
|
+
{
|
|
5309
|
+
className: `rvg-column-drag-preview-header${selectedColumnKeySet.has(columns[columnDragPreview.sourceIndex]?.key) ? " is-axis-selected" : ""}`,
|
|
5310
|
+
style: { top: headerLeafTop, height: headerLeafHeight },
|
|
5311
|
+
children: columns[columnDragPreview.sourceIndex]?.renderHeader?.(columns[columnDragPreview.sourceIndex]) ?? columns[columnDragPreview.sourceIndex]?.title
|
|
5312
|
+
}
|
|
5313
|
+
),
|
|
5304
5314
|
rows.slice(domRange.rowStart, domRange.rowEnd).map((_row, visibleRowOffset) => {
|
|
5305
5315
|
const rowIndex = domRange.rowStart + visibleRowOffset;
|
|
5306
5316
|
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
5307
5317
|
"div",
|
|
5308
5318
|
{
|
|
5309
|
-
className: `rvg-column-drag-preview-cell${hasStripedRows && rowIndex % 2 === 1 ? " is-striped" : ""}`,
|
|
5319
|
+
className: `rvg-column-drag-preview-cell${selectedColumnKeySet.has(columns[columnDragPreview.sourceIndex]?.key) ? " is-axis-selected" : ""}${hasStripedRows && rowIndex % 2 === 1 ? " is-striped" : ""}`,
|
|
5310
5320
|
style: { top: bodyTop + rowIndex * rowHeight - scrollRef.current.top, height: rowHeight },
|
|
5311
5321
|
children: getCellLabel(rowIndex, columnDragPreview.sourceIndex)
|
|
5312
5322
|
},
|
package/dist/index.css
CHANGED
|
@@ -1584,8 +1584,10 @@
|
|
|
1584
1584
|
.rvg-is-dragging * {
|
|
1585
1585
|
cursor: move !important;
|
|
1586
1586
|
}
|
|
1587
|
+
.rvg-column-drag-preview-header.is-axis-selected,
|
|
1587
1588
|
.rvg-column-drag-preview-cell.is-axis-selected {
|
|
1588
|
-
background: var(--rvg-color-axis-selection-fill);
|
|
1589
|
+
background: var(--rvg-color-axis-selection-drag-fill);
|
|
1590
|
+
color: var(--rvg-color-axis-selection-drag-text);
|
|
1589
1591
|
}
|
|
1590
1592
|
.rvg-column-drag-preview-cell.is-edited {
|
|
1591
1593
|
background: var(--rvg-color-edited-fill);
|
package/dist/index.js
CHANGED
|
@@ -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:
|
|
2314
|
-
axisSelectionText:
|
|
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"),
|
|
@@ -5270,13 +5273,20 @@ function TableInner({
|
|
|
5270
5273
|
height: renderHeight
|
|
5271
5274
|
},
|
|
5272
5275
|
children: [
|
|
5273
|
-
/* @__PURE__ */ jsx7(
|
|
5276
|
+
/* @__PURE__ */ jsx7(
|
|
5277
|
+
"div",
|
|
5278
|
+
{
|
|
5279
|
+
className: `rvg-column-drag-preview-header${selectedColumnKeySet.has(columns[columnDragPreview.sourceIndex]?.key) ? " is-axis-selected" : ""}`,
|
|
5280
|
+
style: { top: headerLeafTop, height: headerLeafHeight },
|
|
5281
|
+
children: columns[columnDragPreview.sourceIndex]?.renderHeader?.(columns[columnDragPreview.sourceIndex]) ?? columns[columnDragPreview.sourceIndex]?.title
|
|
5282
|
+
}
|
|
5283
|
+
),
|
|
5274
5284
|
rows.slice(domRange.rowStart, domRange.rowEnd).map((_row, visibleRowOffset) => {
|
|
5275
5285
|
const rowIndex = domRange.rowStart + visibleRowOffset;
|
|
5276
5286
|
return /* @__PURE__ */ jsx7(
|
|
5277
5287
|
"div",
|
|
5278
5288
|
{
|
|
5279
|
-
className: `rvg-column-drag-preview-cell${hasStripedRows && rowIndex % 2 === 1 ? " is-striped" : ""}`,
|
|
5289
|
+
className: `rvg-column-drag-preview-cell${selectedColumnKeySet.has(columns[columnDragPreview.sourceIndex]?.key) ? " is-axis-selected" : ""}${hasStripedRows && rowIndex % 2 === 1 ? " is-striped" : ""}`,
|
|
5280
5290
|
style: { top: bodyTop + rowIndex * rowHeight - scrollRef.current.top, height: rowHeight },
|
|
5281
5291
|
children: getCellLabel(rowIndex, columnDragPreview.sourceIndex)
|
|
5282
5292
|
},
|