@lensui/lens-table 0.1.10 → 0.1.11

package/README.md

@@ -579,6 +579,7 @@ const columns: GridColumn<Row>[] = [
     '--rvg-color-bg': '#0f172a',
     '--rvg-color-text': '#e5e7eb',
     '--rvg-color-grid': '#334155',
+    '--rvg-font-size-body': '12px',
   } as React.CSSProperties}
 />
 ```
@@ -587,6 +588,7 @@ const columns: GridColumn<Row>[] = [
 
 | 变量                                | 说明                                                                               |
 | ----------------------------------- | ---------------------------------------------------------------------------------- |
+| `--rvg-font-size-body`            | 数据正文及单元格编辑器字号，默认 `13px`；不影响表头字号。                         |
 | `--rvg-color-bg`                  | 表格背景色。                                                                       |
 | `--rvg-color-header-bg`           | 表头背景色。                                                                       |
 | `--rvg-color-text`                | 主文本颜色。                                                                       |

package/dist/index.cjs

@@ -692,18 +692,6 @@ function DateEditor({ editor, value: draft, style, locale, labels, onChange, onC
   );
 }
 
-// src/core/typography.ts
-var CELL_FONT = "13px Inter, ui-sans-serif, system-ui, sans-serif";
-function getCellBaselineOffset(context) {
-  context.save();
-  context.textBaseline = "alphabetic";
-  const metrics = context.measureText("Mg");
-  context.restore();
-  const ascent = metrics.fontBoundingBoxAscent;
-  const descent = metrics.fontBoundingBoxDescent;
-  return Number.isFinite(ascent) && Number.isFinite(descent) ? (ascent - descent) / 2 : 0;
-}
-
 // src/components/editors/TextEditor.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function TextEditor({ value, type, style, labels, onChange, onCommit, onCancel }) {
@@ -717,7 +705,7 @@ function TextEditor({ value, type, style, labels, onChange, onCommit, onCancel }
       "input",
       {
         type,
-        style: { font: CELL_FONT, textAlign: style.textAlign },
+        style: { font: "var(--rvg-font-size-body) Inter, ui-sans-serif, system-ui, sans-serif", textAlign: style.textAlign },
         value,
         autoFocus: true,
         onChange: (event) => onChange(event.target.value),
@@ -906,6 +894,18 @@ function hitTestColumn(metrics, contentX) {
   return index < metrics.length ? index : -1;
 }
 
+// src/core/typography.ts
+var createCellFont = (fontSize = 13) => `${fontSize}px Inter, ui-sans-serif, system-ui, sans-serif`;
+function getCellBaselineOffset(context) {
+  context.save();
+  context.textBaseline = "alphabetic";
+  const metrics = context.measureText("Mg");
+  context.restore();
+  const ascent = metrics.fontBoundingBoxAscent;
+  const descent = metrics.fontBoundingBoxDescent;
+  return Number.isFinite(ascent) && Number.isFinite(descent) ? (ascent - descent) / 2 : 0;
+}
+
 // src/core/render.ts
 var getCellCoordKey = (rowIndex, columnIndex) => `${rowIndex}:${columnIndex}`;
 var COLORS = {
@@ -942,7 +942,7 @@ function ellipsizeText(context, text, maxWidth) {
   return `${text.slice(0, start)}${ellipsis}`;
 }
 function paintGrid(options) {
-  const { context: ctx, width, height, pixelRatio, scrollLeft, scrollTop, rowHeight, headerHeight, fixedHeader, verticalBorderless, horizontalBorderless, striped, columnDraggable, sortState, filterValues, hoveredHeaderAction, rows, columns, metrics, range, selection, editing, hoveredRowIndex, selectionRange, selectedRowKeys, rowSelectionMode, selectedColumnKeys, highlightEditedCells, highlightInsertedRows, insertedRowKeys, editedCellKeys, cellAnnotations, getRowKey, rowDragPreview, columnDropTarget } = options;
+  const { context: ctx, width, height, pixelRatio, scrollLeft, scrollTop, rowHeight, bodyFontSize, headerHeight, fixedHeader, verticalBorderless, horizontalBorderless, striped, columnDraggable, sortState, filterValues, hoveredHeaderAction, rows, columns, metrics, range, selection, editing, hoveredRowIndex, selectionRange, selectedRowKeys, rowSelectionMode, selectedColumnKeys, highlightEditedCells, highlightInsertedRows, insertedRowKeys, editedCellKeys, cellAnnotations, getRowKey, rowDragPreview, columnDropTarget } = options;
   const headerLeafTop = options.headerLeafTop ?? 0;
   const headerLeafHeight = options.headerLeafHeight ?? headerHeight;
   const colors = { ...COLORS, ...options.colors };
@@ -959,7 +959,7 @@ function paintGrid(options) {
   ctx.clearRect(0, 0, width, height);
   ctx.fillStyle = colors.background;
   ctx.fillRect(0, 0, width, height);
-  ctx.font = CELL_FONT;
+  ctx.font = createCellFont(bodyFontSize);
   const cellBaselineOffset = getCellBaselineOffset(ctx);
   ctx.textBaseline = "middle";
   const leftFixedWidth = columns.reduce((value, column, index) => column.fixed === "left" ? value + metrics[index].width : value, 0);
@@ -1159,7 +1159,7 @@ function paintGrid(options) {
             ctx.rect(x + 2, y + 1, Math.max(0, cellWidth - 4), cellHeight - 2);
             ctx.clip();
             ctx.fillStyle = cellStyle?.color ?? colors.text;
-            ctx.font = CELL_FONT;
+            ctx.font = createCellFont(bodyFontSize);
             ctx.textBaseline = "alphabetic";
             ctx.textAlign = column.align === "right" ? "right" : column.align === "center" ? "center" : "left";
             ctx.fillText(label, textX, y + cellHeight / 2 + cellBaselineOffset);
@@ -1468,6 +1468,10 @@ var waitForPaint = () => new Promise((resolve) => {
 function readThemeColor(styles, name, fallback) {
   return styles.getPropertyValue(name).trim() || fallback;
 }
+function readThemePixel(styles, name, fallback) {
+  const value = Number.parseFloat(styles.getPropertyValue(name));
+  return Number.isFinite(value) && value > 0 ? value : fallback;
+}
 function getDefaultRowKey(row, index) {
   const id = row.id;
   return typeof id === "string" || typeof id === "number" ? id : index;
@@ -2212,6 +2216,7 @@ function TableInner({
     const context = canvas.getContext("2d");
     if (!context) return;
     const themeStyles = getComputedStyle(canvas);
+    const bodyFontSize = readThemePixel(themeStyles, "--rvg-font-size-body", 13);
     const themeColors = {
       background: readThemeColor(themeStyles, "--rvg-color-bg", "#ffffff"),
       header: readThemeColor(themeStyles, "--rvg-color-header-bg", "#f5f6f7"),
@@ -2232,7 +2237,7 @@ function TableInner({
     const scroll = scrollRef.current;
     const rowScrollTop = fixedHeader ? scroll.top : Math.max(0, scroll.top - bodyTop);
     const range = isVirtualized ? getViewportRange(scroll.left, rowScrollTop, viewport.width, bodyViewportHeight, rows.length, rowHeight, metrics, virtualOverscan) : { rowStart: 0, rowEnd: rows.length, columnStart: 0, columnEnd: columns.length };
-    paintGrid({ context, width: viewport.width, height: renderHeight, pixelRatio: ratio, scrollLeft: scroll.left, scrollTop: scroll.top, rowHeight, headerHeight, headerLeafTop, headerLeafHeight, bodyTop, suppressLastRowBottomBorder: bottomSummaryHeight > 0, suppressFrameBottomBorder: bottomSummaryHeight > 0, fixedHeader, verticalBorderless: !hasVerticalBorders, horizontalBorderless, striped: hasStripedRows, columnDraggable, sortState, filterValues, hoveredHeaderAction: hoveredHeaderActionRef.current, rows, columns, metrics, range, selection, editing, hoveredRowIndex: hoveredRowIndexRef.current, selectionRange, selectedRowKeys: selectedRowKeySet, rowSelectionMode, selectedColumnKeys: selectedColumnKeySet, cellSpans: cellSpanLookup.covered, maxRowSpan: cellSpanLookup.maxRowSpan, highlightEditedCells: highlightsEditedCells, highlightInsertedRows: highlightsInsertedRows, insertedRowKeys: insertedRowKeySet, editedCellKeys, cellAnnotations, getRowKey, rowDragPreview, columnDropTarget, colors: themeColors });
+    paintGrid({ context, width: viewport.width, height: renderHeight, pixelRatio: ratio, scrollLeft: scroll.left, scrollTop: scroll.top, rowHeight, bodyFontSize, headerHeight, headerLeafTop, headerLeafHeight, bodyTop, suppressLastRowBottomBorder: bottomSummaryHeight > 0, suppressFrameBottomBorder: bottomSummaryHeight > 0, fixedHeader, verticalBorderless: !hasVerticalBorders, horizontalBorderless, striped: hasStripedRows, columnDraggable, sortState, filterValues, hoveredHeaderAction: hoveredHeaderActionRef.current, rows, columns, metrics, range, selection, editing, hoveredRowIndex: hoveredRowIndexRef.current, selectionRange, selectedRowKeys: selectedRowKeySet, rowSelectionMode, selectedColumnKeys: selectedColumnKeySet, cellSpans: cellSpanLookup.covered, maxRowSpan: cellSpanLookup.maxRowSpan, highlightEditedCells: highlightsEditedCells, highlightInsertedRows: highlightsInsertedRows, insertedRowKeys: insertedRowKeySet, editedCellKeys, cellAnnotations, getRowKey, rowDragPreview, columnDropTarget, colors: themeColors });
   }, [bodyTop, bodyViewportHeight, bottomSummaryHeight, cellAnnotations, cellSpanLookup, columnDraggable, columnDropTarget, columns, editedCellHighlightColor, editedCellKeys, editing, renderHeight, filterValues, fixedHeader, getRowKey, hasStripedRows, hasVerticalBorders, headerDepth, headerHeight, headerLeafHeight, headerLeafTop, horizontalBorderless, highlightsEditedCells, highlightsInsertedRows, insertedRowHighlightColor, insertedRowKeySet, isVirtualized, metrics, rowDragPreview, rowHeight, rowSelectionMode, rows, selectedColumnKeySet, selectedRowKeySet, selection, selectionRange, sortState, stripedColor, viewport.width, virtualOverscan]);
   const scheduleDraw = (0, import_react5.useCallback)(() => {
     if (frameRef.current === null) frameRef.current = requestAnimationFrame(draw);
@@ -4547,7 +4552,10 @@ function TableInner({
                 } else {
                   const label = getCellLabel(cell.rowIndex, cell.columnIndex);
                   const context = event.currentTarget.getContext("2d");
-                  if (context) context.font = "13px Inter, ui-sans-serif, system-ui, sans-serif";
+                  if (context) {
+                    const bodyFontSize = readThemePixel(getComputedStyle(event.currentTarget), "--rvg-font-size-body", 13);
+                    context.font = `${bodyFontSize}px Inter, ui-sans-serif, system-ui, sans-serif`;
+                  }
                   const truncated = Boolean(label && context && context.measureText(label).width + 20 > metrics[cell.columnIndex].width);
                   if (!label || !tooltipConfig.cell && !truncated) {
                     showCellTooltipAfterDelay(null);

package/dist/index.css

@@ -1,5 +1,6 @@
 /* src/style.css */
 :root {
+  --rvg-font-size-body: 13px;
   --rvg-color-bg: #fff;
   --rvg-color-header-bg: #f5f6f7;
   --rvg-color-grid: #e3e6e8;
@@ -205,11 +206,12 @@
   padding: 0 10px;
   overflow: hidden;
   color: var(--rvg-color-text);
-  font:
-    13px Inter,
+  font-family:
+    Inter,
     ui-sans-serif,
     system-ui,
     sans-serif;
+  font-size: 13px;
   white-space: nowrap;
   user-select: text;
   pointer-events: auto;
@@ -220,6 +222,7 @@
   cursor: default;
 }
 .rvg-cell-text {
+  font-size: var(--rvg-font-size-body);
   transition: transform 140ms ease, opacity 100ms ease;
 }
 .rvg-row-drop-settling .rvg-cell-text {
@@ -251,11 +254,12 @@
   align-items: center;
   overflow: hidden;
   color: var(--rvg-color-text);
-  font:
-    13px Inter,
+  font-family:
+    Inter,
     ui-sans-serif,
     system-ui,
     sans-serif;
+  font-size: var(--rvg-font-size-body);
   white-space: nowrap;
   pointer-events: none;
   box-sizing: border-box;
@@ -1587,7 +1591,7 @@
   background: var(--rvg-color-bg);
   color: var(--rvg-color-text);
   font:
-    13px Inter,
+    var(--rvg-font-size-body) Inter,
     ui-sans-serif,
     system-ui,
     sans-serif;
@@ -1635,7 +1639,7 @@
   background: transparent;
   color: var(--rvg-color-text);
   font:
-    13px Inter,
+    var(--rvg-font-size-body) Inter,
     ui-sans-serif,
     system-ui,
     sans-serif;
@@ -1670,7 +1674,7 @@
   background: transparent;
   color: var(--rvg-color-text);
   font:
-    13px Inter,
+    var(--rvg-font-size-body) Inter,
     ui-sans-serif,
     system-ui,
     sans-serif;
@@ -1903,7 +1907,7 @@
   background: var(--rvg-color-bg);
   color: var(--rvg-color-text);
   font:
-    13px Inter,
+    var(--rvg-font-size-body) Inter,
     ui-sans-serif,
     system-ui,
     sans-serif;

package/dist/index.js

@@ -662,18 +662,6 @@ function DateEditor({ editor, value: draft, style, locale, labels, onChange, onC
   );
 }
 
-// src/core/typography.ts
-var CELL_FONT = "13px Inter, ui-sans-serif, system-ui, sans-serif";
-function getCellBaselineOffset(context) {
-  context.save();
-  context.textBaseline = "alphabetic";
-  const metrics = context.measureText("Mg");
-  context.restore();
-  const ascent = metrics.fontBoundingBoxAscent;
-  const descent = metrics.fontBoundingBoxDescent;
-  return Number.isFinite(ascent) && Number.isFinite(descent) ? (ascent - descent) / 2 : 0;
-}
-
 // src/components/editors/TextEditor.tsx
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function TextEditor({ value, type, style, labels, onChange, onCommit, onCancel }) {
@@ -687,7 +675,7 @@ function TextEditor({ value, type, style, labels, onChange, onCommit, onCancel }
       "input",
       {
         type,
-        style: { font: CELL_FONT, textAlign: style.textAlign },
+        style: { font: "var(--rvg-font-size-body) Inter, ui-sans-serif, system-ui, sans-serif", textAlign: style.textAlign },
         value,
         autoFocus: true,
         onChange: (event) => onChange(event.target.value),
@@ -876,6 +864,18 @@ function hitTestColumn(metrics, contentX) {
   return index < metrics.length ? index : -1;
 }
 
+// src/core/typography.ts
+var createCellFont = (fontSize = 13) => `${fontSize}px Inter, ui-sans-serif, system-ui, sans-serif`;
+function getCellBaselineOffset(context) {
+  context.save();
+  context.textBaseline = "alphabetic";
+  const metrics = context.measureText("Mg");
+  context.restore();
+  const ascent = metrics.fontBoundingBoxAscent;
+  const descent = metrics.fontBoundingBoxDescent;
+  return Number.isFinite(ascent) && Number.isFinite(descent) ? (ascent - descent) / 2 : 0;
+}
+
 // src/core/render.ts
 var getCellCoordKey = (rowIndex, columnIndex) => `${rowIndex}:${columnIndex}`;
 var COLORS = {
@@ -912,7 +912,7 @@ function ellipsizeText(context, text, maxWidth) {
   return `${text.slice(0, start)}${ellipsis}`;
 }
 function paintGrid(options) {
-  const { context: ctx, width, height, pixelRatio, scrollLeft, scrollTop, rowHeight, headerHeight, fixedHeader, verticalBorderless, horizontalBorderless, striped, columnDraggable, sortState, filterValues, hoveredHeaderAction, rows, columns, metrics, range, selection, editing, hoveredRowIndex, selectionRange, selectedRowKeys, rowSelectionMode, selectedColumnKeys, highlightEditedCells, highlightInsertedRows, insertedRowKeys, editedCellKeys, cellAnnotations, getRowKey, rowDragPreview, columnDropTarget } = options;
+  const { context: ctx, width, height, pixelRatio, scrollLeft, scrollTop, rowHeight, bodyFontSize, headerHeight, fixedHeader, verticalBorderless, horizontalBorderless, striped, columnDraggable, sortState, filterValues, hoveredHeaderAction, rows, columns, metrics, range, selection, editing, hoveredRowIndex, selectionRange, selectedRowKeys, rowSelectionMode, selectedColumnKeys, highlightEditedCells, highlightInsertedRows, insertedRowKeys, editedCellKeys, cellAnnotations, getRowKey, rowDragPreview, columnDropTarget } = options;
   const headerLeafTop = options.headerLeafTop ?? 0;
   const headerLeafHeight = options.headerLeafHeight ?? headerHeight;
   const colors = { ...COLORS, ...options.colors };
@@ -929,7 +929,7 @@ function paintGrid(options) {
   ctx.clearRect(0, 0, width, height);
   ctx.fillStyle = colors.background;
   ctx.fillRect(0, 0, width, height);
-  ctx.font = CELL_FONT;
+  ctx.font = createCellFont(bodyFontSize);
   const cellBaselineOffset = getCellBaselineOffset(ctx);
   ctx.textBaseline = "middle";
   const leftFixedWidth = columns.reduce((value, column, index) => column.fixed === "left" ? value + metrics[index].width : value, 0);
@@ -1129,7 +1129,7 @@ function paintGrid(options) {
             ctx.rect(x + 2, y + 1, Math.max(0, cellWidth - 4), cellHeight - 2);
             ctx.clip();
             ctx.fillStyle = cellStyle?.color ?? colors.text;
-            ctx.font = CELL_FONT;
+            ctx.font = createCellFont(bodyFontSize);
             ctx.textBaseline = "alphabetic";
             ctx.textAlign = column.align === "right" ? "right" : column.align === "center" ? "center" : "left";
             ctx.fillText(label, textX, y + cellHeight / 2 + cellBaselineOffset);
@@ -1438,6 +1438,10 @@ var waitForPaint = () => new Promise((resolve) => {
 function readThemeColor(styles, name, fallback) {
   return styles.getPropertyValue(name).trim() || fallback;
 }
+function readThemePixel(styles, name, fallback) {
+  const value = Number.parseFloat(styles.getPropertyValue(name));
+  return Number.isFinite(value) && value > 0 ? value : fallback;
+}
 function getDefaultRowKey(row, index) {
   const id = row.id;
   return typeof id === "string" || typeof id === "number" ? id : index;
@@ -2182,6 +2186,7 @@ function TableInner({
     const context = canvas.getContext("2d");
     if (!context) return;
     const themeStyles = getComputedStyle(canvas);
+    const bodyFontSize = readThemePixel(themeStyles, "--rvg-font-size-body", 13);
     const themeColors = {
       background: readThemeColor(themeStyles, "--rvg-color-bg", "#ffffff"),
       header: readThemeColor(themeStyles, "--rvg-color-header-bg", "#f5f6f7"),
@@ -2202,7 +2207,7 @@ function TableInner({
     const scroll = scrollRef.current;
     const rowScrollTop = fixedHeader ? scroll.top : Math.max(0, scroll.top - bodyTop);
     const range = isVirtualized ? getViewportRange(scroll.left, rowScrollTop, viewport.width, bodyViewportHeight, rows.length, rowHeight, metrics, virtualOverscan) : { rowStart: 0, rowEnd: rows.length, columnStart: 0, columnEnd: columns.length };
-    paintGrid({ context, width: viewport.width, height: renderHeight, pixelRatio: ratio, scrollLeft: scroll.left, scrollTop: scroll.top, rowHeight, headerHeight, headerLeafTop, headerLeafHeight, bodyTop, suppressLastRowBottomBorder: bottomSummaryHeight > 0, suppressFrameBottomBorder: bottomSummaryHeight > 0, fixedHeader, verticalBorderless: !hasVerticalBorders, horizontalBorderless, striped: hasStripedRows, columnDraggable, sortState, filterValues, hoveredHeaderAction: hoveredHeaderActionRef.current, rows, columns, metrics, range, selection, editing, hoveredRowIndex: hoveredRowIndexRef.current, selectionRange, selectedRowKeys: selectedRowKeySet, rowSelectionMode, selectedColumnKeys: selectedColumnKeySet, cellSpans: cellSpanLookup.covered, maxRowSpan: cellSpanLookup.maxRowSpan, highlightEditedCells: highlightsEditedCells, highlightInsertedRows: highlightsInsertedRows, insertedRowKeys: insertedRowKeySet, editedCellKeys, cellAnnotations, getRowKey, rowDragPreview, columnDropTarget, colors: themeColors });
+    paintGrid({ context, width: viewport.width, height: renderHeight, pixelRatio: ratio, scrollLeft: scroll.left, scrollTop: scroll.top, rowHeight, bodyFontSize, headerHeight, headerLeafTop, headerLeafHeight, bodyTop, suppressLastRowBottomBorder: bottomSummaryHeight > 0, suppressFrameBottomBorder: bottomSummaryHeight > 0, fixedHeader, verticalBorderless: !hasVerticalBorders, horizontalBorderless, striped: hasStripedRows, columnDraggable, sortState, filterValues, hoveredHeaderAction: hoveredHeaderActionRef.current, rows, columns, metrics, range, selection, editing, hoveredRowIndex: hoveredRowIndexRef.current, selectionRange, selectedRowKeys: selectedRowKeySet, rowSelectionMode, selectedColumnKeys: selectedColumnKeySet, cellSpans: cellSpanLookup.covered, maxRowSpan: cellSpanLookup.maxRowSpan, highlightEditedCells: highlightsEditedCells, highlightInsertedRows: highlightsInsertedRows, insertedRowKeys: insertedRowKeySet, editedCellKeys, cellAnnotations, getRowKey, rowDragPreview, columnDropTarget, colors: themeColors });
   }, [bodyTop, bodyViewportHeight, bottomSummaryHeight, cellAnnotations, cellSpanLookup, columnDraggable, columnDropTarget, columns, editedCellHighlightColor, editedCellKeys, editing, renderHeight, filterValues, fixedHeader, getRowKey, hasStripedRows, hasVerticalBorders, headerDepth, headerHeight, headerLeafHeight, headerLeafTop, horizontalBorderless, highlightsEditedCells, highlightsInsertedRows, insertedRowHighlightColor, insertedRowKeySet, isVirtualized, metrics, rowDragPreview, rowHeight, rowSelectionMode, rows, selectedColumnKeySet, selectedRowKeySet, selection, selectionRange, sortState, stripedColor, viewport.width, virtualOverscan]);
   const scheduleDraw = useCallback2(() => {
     if (frameRef.current === null) frameRef.current = requestAnimationFrame(draw);
@@ -4517,7 +4522,10 @@ function TableInner({
                 } else {
                   const label = getCellLabel(cell.rowIndex, cell.columnIndex);
                   const context = event.currentTarget.getContext("2d");
-                  if (context) context.font = "13px Inter, ui-sans-serif, system-ui, sans-serif";
+                  if (context) {
+                    const bodyFontSize = readThemePixel(getComputedStyle(event.currentTarget), "--rvg-font-size-body", 13);
+                    context.font = `${bodyFontSize}px Inter, ui-sans-serif, system-ui, sans-serif`;
+                  }
                   const truncated = Boolean(label && context && context.measureText(label).width + 20 > metrics[cell.columnIndex].width);
                   if (!label || !tooltipConfig.cell && !truncated) {
                     showCellTooltipAfterDelay(null);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lensui/lens-table",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "description": "A lightweight, canvas-rendered React table component for LensUI.",
   "type": "module",
   "main": "./dist/index.cjs",