@canvas-components/list-table 0.3.15 → 0.3.16

package/dist/index.js

@@ -69,6 +69,87 @@ var DebugManager = class {
     console.info(`[ListTable Debug] ${label}`, payload);
   }
 };
+
+// src/services/table-styles-service.ts
+function resolveStylePixels(value) {
+  if (typeof value === "string" && !/^\s*\d+(?:\.\d+)?(?:px)?\s*$/.test(value))
+    return void 0;
+  const number = typeof value === "string" ? parseFloat(value) : value;
+  return number != null && Number.isFinite(number) && number >= 0 ? number : void 0;
+}
+function resolveCanvasCellStyle(style) {
+  if (!style) return void 0;
+  const padding = typeof style.padding === "string" ? style.padding.trim().split(/\s+/) : [style.padding];
+  const result = {
+    backgroundColor: style.backgroundColor,
+    color: style.color,
+    fontSize: resolveStylePixels(style.fontSize),
+    fontWeight: style.fontWeight == null ? void 0 : String(style.fontWeight),
+    fontFamily: style.fontFamily,
+    textAlign: style.textAlign,
+    verticalAlign: style.verticalAlign,
+    paddingInline: resolveStylePixels(style.paddingInline) ?? (padding.length <= 2 ? resolveStylePixels(padding[1] ?? padding[0]) : void 0),
+    paddingBlock: resolveStylePixels(style.paddingBlock) ?? (padding.length <= 2 ? resolveStylePixels(padding[0]) : void 0),
+    borderColor: style.borderColor,
+    borderWidth: resolveStylePixels(style.borderWidth)
+  };
+  return Object.fromEntries(
+    Object.entries(result).filter(([, value]) => value !== void 0)
+  );
+}
+function resolveListTableStyleOptions(options) {
+  const styles = options.styles;
+  if (!styles) return options;
+  const cell = resolveCanvasCellStyle(styles.cell) ?? {};
+  const header = { ...cell, ...resolveCanvasCellStyle(styles.header) };
+  const body = { ...cell, ...resolveCanvasCellStyle(styles.body) };
+  const summary = { ...cell, ...resolveCanvasCellStyle(styles.summary) };
+  const mapColumns = (columns) => columns.map((column) => ({
+    ...column,
+    align: column.align ?? (column.cellStyle?.textAlign ?? body.textAlign),
+    headerAlign: column.headerAlign ?? (column.headerStyle?.textAlign ?? column.align ?? header.textAlign),
+    cellStyle: { ...body, ...column.cellStyle },
+    headerStyle: { ...header, ...column.headerStyle },
+    summaryStyle: { ...summary, ...column.summaryStyle },
+    children: column.children ? mapColumns(column.children) : void 0
+  }));
+  const scrollbar = { ...options.scrollbar };
+  for (const axis of ["vertical", "horizontal"]) {
+    const style = axis === "vertical" ? styles.scrollVertical : styles.scrollHorizontal;
+    if (!style || scrollbar[axis] === false) continue;
+    const mapped = {
+      thumbColor: style.color,
+      trackColor: style.backgroundColor,
+      thickness: resolveStylePixels(
+        axis === "vertical" ? style.width : style.height
+      ),
+      thumbRadius: resolveStylePixels(style.borderRadius)
+    };
+    scrollbar[axis] = {
+      ...scrollbar[axis],
+      ...Object.fromEntries(
+        Object.entries(mapped).filter(([, value]) => value !== void 0)
+      )
+    };
+  }
+  return {
+    ...options,
+    columns: mapColumns(options.columns),
+    scrollbar,
+    theme: {
+      ...options.theme,
+      ...cell.borderColor ? { borderColor: cell.borderColor } : {},
+      ...cell.fontSize != null ? { fontSize: cell.fontSize } : {},
+      ...cell.fontFamily ? { fontFamily: cell.fontFamily } : {},
+      ...body.color ? { textColor: body.color } : {},
+      ...header.backgroundColor ? { headerBackgroundColor: header.backgroundColor } : {},
+      ...header.color ? { headerTextColor: header.color } : {},
+      ...body.backgroundColor ? { backgroundColor: body.backgroundColor } : {},
+      activeCellStyle: resolveCanvasCellStyle(styles.activeCell),
+      activeRowStyle: resolveCanvasCellStyle(styles.activeRow)
+    }
+  };
+}
 function resolveColumnKey(column) {
   return column.key?.trim() || stringifyDataIndex(column.dataIndex);
 }
@@ -691,6 +772,7 @@ function normalizeColumn(column, depth, parentKey) {
     moneyFormat: column.moneyFormat,
     dataFormat: column.dataFormat,
     headerStyle: column.headerStyle,
+    summaryStyle: column.summaryStyle,
     summary: column.summary,
     summaryTitle: column.summaryTitle,
     meta: column.meta,
@@ -7201,10 +7283,11 @@ function roundRectPath(ctx, x, y, width, height, radius) {
 }
 
 // src/rendering/primitives/draw-grid.ts
-function drawGridRect(ctx, rect, theme, borderColor = theme.borderColor) {
+function drawGridRect(ctx, rect, theme, borderColor = theme.borderColor, borderWidth = 1) {
+  if (borderWidth <= 0) return;
   ctx.save();
   ctx.strokeStyle = borderColor;
-  ctx.lineWidth = 1;
+  ctx.lineWidth = borderWidth;
   ctx.beginPath();
   const showTop = rect.y > 0;
   const showLeft = rect.x > 0;
@@ -7236,7 +7319,8 @@ function resolveHeaderTextLayout(params) {
     allowActions,
     hasFilter,
     contentInsetStart = 0,
-    contentInsetEnd = 0
+    contentInsetEnd = 0,
+    paddingInline = HEADER_TEXT_PADDING
   } = params;
   const contentRect = {
     x: rect.x + contentInsetStart,
@@ -7258,11 +7342,11 @@ function resolveHeaderTextLayout(params) {
     contentRect,
     contentVisibleRect,
     align,
-    HEADER_TEXT_PADDING
+    paddingInline
   );
   const baseLayout = {
     align,
-    maxWidth: Math.max(contentVisibleRect.width - HEADER_TEXT_PADDING * 2, 12),
+    maxWidth: Math.max(contentVisibleRect.width - paddingInline * 2, 12),
     x: baseX
   };
   if (!allowActions || !actionVisibilityState.visible || align === "left") {
@@ -7274,10 +7358,10 @@ function resolveHeaderTextLayout(params) {
     trailingInset: contentInsetEnd
   });
   const textRight = Math.min(
-    contentVisibleRect.x + contentVisibleRect.width - HEADER_TEXT_PADDING,
-    actionLayout.startX - HEADER_TEXT_PADDING
+    contentVisibleRect.x + contentVisibleRect.width - paddingInline,
+    actionLayout.startX - paddingInline
   );
-  const textLeft = contentVisibleRect.x + HEADER_TEXT_PADDING;
+  const textLeft = contentVisibleRect.x + paddingInline;
   if (align === "center") {
     const centeredWidth = Math.max(
       Math.min(baseX - textLeft, textRight - baseX) * 2,
@@ -7412,9 +7496,15 @@ function drawHeaderCell(params, cell, clipRect) {
   const isRangeSelected = isHeaderCellInRange(params.rangeHighlight, cell);
   ctx.fillStyle = isSelected || isRangeSelected ? theme.selectionBackgroundColor : cell.node.style?.backgroundColor ?? theme.headerBackgroundColor;
   ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
-  drawGridRect(ctx, rect, theme);
+  drawGridRect(
+    ctx,
+    rect,
+    theme,
+    cell.node.style?.borderColor,
+    cell.node.style?.borderWidth
+  );
   ctx.fillStyle = cell.node.style?.color ?? theme.headerTextColor;
-  ctx.font = `${theme.headerFontWeight} ${theme.fontSize}px ${theme.fontFamily}`;
+  ctx.font = `${cell.node.style?.fontWeight ?? theme.headerFontWeight} ${cell.node.style?.fontSize ?? theme.fontSize}px ${cell.node.style?.fontFamily ?? theme.fontFamily}`;
   ctx.textBaseline = "middle";
   const visibleRect = clipRect ? intersectRects(rect, clipRect) : rect;
   if (!visibleRect) {
@@ -7446,6 +7536,7 @@ function drawHeaderCell(params, cell, clipRect) {
     allowActions: cell.node.children.length === 0,
     hasFilter: params.filterableColumnKeys.has(cell.node.key),
     contentWidth: measureHeaderContentWidth(ctx, titleContent),
+    paddingInline: cell.node.style?.paddingInline,
     contentInsetStart: resolveHeaderContentInsetStart({
       columnKey: cell.node.key,
       hasChildren: cell.node.children.length > 0,
@@ -7457,7 +7548,7 @@ function drawHeaderCell(params, cell, clipRect) {
   const textY = resolveHeaderContentCenterY(
     rect,
     titleContent,
-    theme.fontSize,
+    cell.node.style?.fontSize ?? theme.fontSize,
     cell.node.style?.paddingBlock ?? params.defaultPaddingBlock ?? resolveDensityPaddingBlock(cell.height),
     cell.node.style?.verticalAlign
   );
@@ -8119,6 +8210,11 @@ function drawSummarySegment(params, columns, clipRect, defaultTitleColumnKey) {
 function drawSummaryCell(ctx, rect, column, theme, summaryValues, selectedHeaderKey, summarySelected, rangeHighlight, clipRect, descriptors, inlineContentInset, defaultTitleColumnKey, textSelection) {
   ctx.save();
   const cellClip = clipRect ? intersectRects2(rect, clipRect) : rect;
+  const style = column.summaryStyle;
+  const fontSize = style?.fontSize ?? theme.fontSize;
+  const paddingInline = style?.paddingInline ?? 12;
+  const paddingBlock = style?.paddingBlock ?? 0;
+  const textY = style?.verticalAlign === "top" ? rect.y + paddingBlock + fontSize / 2 : style?.verticalAlign === "bottom" ? rect.y + rect.height - paddingBlock - fontSize / 2 : rect.y + rect.height / 2;
   if (!cellClip) {
     ctx.restore();
     return;
@@ -8128,9 +8224,9 @@ function drawSummaryCell(ctx, rect, column, theme, summaryValues, selectedHeader
     column.leafIndex,
     (rangeHighlight ?? EMPTY_RANGE_HIGHLIGHT2).selectedColumnRange
   );
-  ctx.fillStyle = summarySelected || isHeaderColumnSelected || isColumnRangeSelected ? theme.selectionBackgroundColor : theme.headerBackgroundColor;
+  ctx.fillStyle = summarySelected || isHeaderColumnSelected || isColumnRangeSelected ? theme.selectionBackgroundColor : style?.backgroundColor ?? theme.headerBackgroundColor;
   ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
-  drawGridRect(ctx, rect, theme);
+  drawGridRect(ctx, rect, theme, style?.borderColor, style?.borderWidth);
   const resolvedDisplayValue = resolveSummaryCellDisplayValue(
     column,
     summaryValues?.get(column.key),
@@ -8141,10 +8237,10 @@ function drawSummaryCell(ctx, rect, column, theme, summaryValues, selectedHeader
     ctx.beginPath();
     ctx.rect(cellClip.x, cellClip.y, cellClip.width, cellClip.height);
     ctx.clip();
-    ctx.fillStyle = theme.headerTextColor;
-    ctx.font = `600 ${theme.fontSize}px ${theme.fontFamily}`;
+    ctx.fillStyle = style?.color ?? theme.headerTextColor;
+    ctx.font = `${style?.fontWeight ?? "600"} ${fontSize}px ${style?.fontFamily ?? theme.fontFamily}`;
     ctx.textBaseline = "middle";
-    const align = column.align ?? "left";
+    const align = style?.textAlign ?? column.align ?? "left";
     ctx.textAlign = align;
     const contentInsetStart = column.key === inlineContentInset?.columnKey ? inlineContentInset.width : 0;
     const contentRect = {
@@ -8157,16 +8253,16 @@ function drawSummaryCell(ctx, rect, column, theme, summaryValues, selectedHeader
       rect: contentRect,
       visibleRect,
       align,
-      padding: 12
+      padding: paddingInline
     });
     const displayText = resolveSummaryDisplayText(ctx, {
       text: resolvedDisplayValue,
       visibleRect,
-      padding: 12
+      padding: paddingInline
     });
     const textWidth = ctx.measureText(displayText).width;
     const textOriginX = textX - (align === "right" ? textWidth : align === "center" ? textWidth / 2 : 0);
-    const textTop = rect.y + (rect.height - theme.fontSize) / 2;
+    const textTop = textY - fontSize / 2;
     const fragmentKey = `summary:${column.key}`;
     drawSelectableTextSelectionBackground({
       ctx,
@@ -8174,14 +8270,14 @@ function drawSummaryCell(ctx, rect, column, theme, summaryValues, selectedHeader
       textSelection,
       textOriginX,
       textTop,
-      textHeight: theme.fontSize,
+      textHeight: fontSize,
       rowIndex: Number.MAX_SAFE_INTEGER,
       columnKey: column.key,
       contentIndex: 0,
       fragmentKey,
       color: theme.textSelectionBackgroundColor ?? "#99c2ff"
     });
-    ctx.fillText(displayText, textX, rect.y + rect.height / 2);
+    ctx.fillText(displayText, textX, textY);
     textDescriptor = {
       rowIndex: Number.MAX_SAFE_INTEGER,
       contentIndex: 0,
@@ -8194,7 +8290,7 @@ function drawSummaryCell(ctx, rect, column, theme, summaryValues, selectedHeader
           x: textOriginX,
           y: textTop,
           width: textWidth,
-          height: theme.fontSize
+          height: fontSize
         },
         cellClip
       ) ?? void 0,
@@ -10955,6 +11051,25 @@ function normalizeCellContents(contents) {
   }
   return [normalizeCellContentItem(contents)];
 }
+function applyCellTextStyle(contents, column) {
+  const { color, fontSize, fontWeight, fontFamily } = column.cellStyle ?? {};
+  if (color == null && fontSize == null && fontWeight == null && fontFamily == null)
+    return contents;
+  return contents.map((content) => ({
+    ...content,
+    style: {
+      ...color != null ? { color } : {},
+      ...fontSize != null ? { fontSize } : {},
+      ...fontWeight != null ? { fontWeight } : {},
+      ...fontFamily != null ? { fontFamily } : {},
+      ..."color" in content && content.color != null ? { color: content.color } : {},
+      ..."textColor" in content && content.textColor != null ? { color: content.textColor } : {},
+      ..."fontSize" in content && content.fontSize != null ? { fontSize: content.fontSize } : {},
+      ..."fontWeight" in content && content.fontWeight != null ? { fontWeight: content.fontWeight } : {},
+      ...content.style
+    }
+  }));
+}
 function normalizeDrawableCellContents(contents) {
   return contents.filter(
     (content) => content.visible !== false && content.style?.display !== "none"
@@ -11128,7 +11243,10 @@ function drawBodyCellContents(params) {
     skipNestedTableOuterBorders,
     defaultRowHeight
   } = params;
-  const contents = normalizeDrawableCellContents(params.contents);
+  const contents = applyCellTextStyle(
+    normalizeDrawableCellContents(params.contents),
+    column
+  );
   if (contents.length === 0) {
     return void 0;
   }
@@ -11363,7 +11481,10 @@ function appendClippedContentDescriptors(descriptors, itemDescriptors, visibleRe
 }
 function measureBodyCellContentsHeight(params) {
   const { ctx, column, theme } = params;
-  const contents = normalizeDrawableCellContents(params.contents);
+  const contents = applyCellTextStyle(
+    normalizeDrawableCellContents(params.contents),
+    column
+  );
   if (contents.length === 0) {
     return 0;
   }
@@ -11393,7 +11514,10 @@ function measureBodyCellContentsHeight(params) {
 }
 function measureBodyCellContentsWidth(params) {
   const { ctx, column, theme } = params;
-  const contents = normalizeDrawableCellContents(params.contents);
+  const contents = applyCellTextStyle(
+    normalizeDrawableCellContents(params.contents),
+    column
+  );
   if (contents.length === 0) {
     return 0;
   }
@@ -20322,7 +20446,9 @@ var ListTableEventController = class {
         event.clientX,
         event.clientY
       );
-      const result = this.host.resolvePointerHit(position.x, position.y);
+      const result = this.host.resolvePointerHit(position.x, position.y, {
+        excludeKinds: ["resize-handle"]
+      });
       const rawContextResult = typeof result.hitRowIndex === "number" ? { ...result, rowIndex: result.hitRowIndex } : result;
       const bodyRows = this.resolveBodyRows();
       const contextResult = hydrateBodyContentHitResult({
@@ -24284,13 +24410,22 @@ function drawSegmentRows(params, segment, columns, startRowIndex, endRowIndex, r
         collapseConfig: params.collapseConfig
       }) : [];
       const cellDescriptorStartIndex = params.descriptors.length;
+      const activeStyle = isSelected || isSelectedCellRange ? params.theme.activeCellStyle : isRangeHighlighted ? params.theme.activeRowStyle : void 0;
+      const styledColumn = activeStyle ? {
+        ...cell.column,
+        cellStyle: { ...cell.column.cellStyle, ...activeStyle }
+      } : cell.column;
+      const cellTheme = activeStyle?.backgroundColor ? {
+        ...params.theme,
+        selectionBackgroundColor: activeStyle.backgroundColor
+      } : params.theme;
       const cellTooltip = drawBodyCell(
         ctx,
         rect,
         cell.record,
         cell.sourceRowIndex,
-        cell.column,
-        params.theme,
+        styledColumn,
+        cellTheme,
         params.rowBackgroundColor,
         params.striped === true,
         isHovered,
@@ -24337,11 +24472,12 @@ function drawSegmentRows(params, segment, columns, startRowIndex, endRowIndex, r
   }
   ctx.restore();
 }
-function drawActiveCellBorder(ctx, rect) {
-  const inset = 0.5;
+function drawActiveCellBorder(ctx, rect, borderColor = ACTIVE_CELL_BORDER_COLOR, borderWidth = 1) {
+  if (borderWidth <= 0) return;
+  const inset = borderWidth / 2;
   ctx.save();
-  ctx.strokeStyle = ACTIVE_CELL_BORDER_COLOR;
-  ctx.lineWidth = 1;
+  ctx.strokeStyle = borderColor;
+  ctx.lineWidth = borderWidth;
   ctx.strokeRect(
     rect.x + inset,
     rect.y + inset,
@@ -25009,7 +25145,13 @@ function drawBodyCell(ctx, rect, record, rowIndex, column, theme, rowBackgroundC
       validationMessage
     );
   }
-  drawGridRect(ctx, rect, theme, theme.borderColor);
+  drawGridRect(
+    ctx,
+    rect,
+    theme,
+    column.cellStyle?.borderColor ?? theme.borderColor,
+    column.cellStyle?.borderWidth
+  );
   ctx.restore();
   return validationMessage ? {
     text: validationMessage,
@@ -28522,6 +28664,7 @@ function renderListTablePagination(params) {
     return;
   }
   const paginationConfig = {
+    styles: options.styles?.pagination,
     mode: paginationOptions.mode,
     current: state.currentPage,
     total: getPaginationTotal(options, total),
@@ -29269,6 +29412,7 @@ function drawActiveCellOverlay(params) {
     return;
   }
   const { ctx, layout } = params;
+  if (params.borderWidth === 0) return;
   if (layout.rangeSegments?.length) {
     layout.rangeSegments.forEach((segment) => {
       ctx.save();
@@ -29280,8 +29424,8 @@ function drawActiveCellOverlay(params) {
         segment.clipRect.height
       );
       ctx.clip();
-      ctx.strokeStyle = "#1677ff";
-      ctx.lineWidth = 1;
+      ctx.strokeStyle = params.borderColor ?? "#1677ff";
+      ctx.lineWidth = params.borderWidth ?? 1;
       ctx.beginPath();
       ctx.moveTo(segment.startX, segment.startY);
       if (segment.controlX != null && segment.controlY != null) {
@@ -29303,7 +29447,13 @@ function drawActiveCellOverlay(params) {
       ctx.beginPath();
       ctx.rect(clipRect.x, clipRect.y, clipRect.width, clipRect.height);
       ctx.clip();
-      drawRangeHighlightBorder(ctx, rect, { omitLeft, omitRight });
+      drawRangeHighlightBorder(
+        ctx,
+        rect,
+        { omitLeft, omitRight },
+        params.borderColor,
+        params.borderWidth
+      );
       ctx.restore();
     });
   }
@@ -29317,7 +29467,12 @@ function drawActiveCellOverlay(params) {
       layout.clipRect.height
     );
     ctx.clip();
-    drawActiveCellBorder(ctx, layout.rect);
+    drawActiveCellBorder(
+      ctx,
+      layout.rect,
+      params.borderColor,
+      params.borderWidth
+    );
     ctx.restore();
   }
 }
@@ -29415,10 +29570,7 @@ function removeRangeSegmentsAtSharedLayerBoundaries(segments, ranges) {
         return;
       }
       const top = Math.max(left.y, right.y);
-      const bottom = Math.min(
-        left.y + left.height,
-        right.y + right.height
-      );
+      const bottom = Math.min(left.y + left.height, right.y + right.height);
       if (bottom > top) {
         sharedBoundaries.push({ x: boundary, top, bottom });
       }
@@ -29608,10 +29760,10 @@ function subtractCoveredIntervals(start, end, coveredIntervals) {
     ([currentStart, currentEnd]) => currentEnd > currentStart
   );
 }
-function drawRangeHighlightBorder(ctx, rect, edges = {}) {
+function drawRangeHighlightBorder(ctx, rect, edges = {}, borderColor = "#1677ff", borderWidth = 1) {
   ctx.save();
-  ctx.strokeStyle = "#1677ff";
-  ctx.lineWidth = 1;
+  ctx.strokeStyle = borderColor;
+  ctx.lineWidth = borderWidth;
   const left = rect.x + 0.5;
   const top = rect.y + 0.5;
   const right = rect.x + Math.max(rect.width - 0.5, 0);
@@ -29907,6 +30059,8 @@ function executeListTableRenderPipeline(params) {
   );
   drawActiveCellOverlay({
     ctx,
+    borderColor: theme.activeCellStyle?.borderColor,
+    borderWidth: theme.activeCellStyle?.borderWidth,
     layout: resolveActiveCellOverlayLayout({
       descriptors,
       selection,
@@ -30661,6 +30815,7 @@ function resolvePaginationSignature(params) {
     paginationConfig ? "enabled" : "disabled",
     paginationConfig?.mode ?? "",
     paginationConfig?.total ?? params.total,
+    JSON.stringify(params.options.styles?.pagination ?? null),
     params.total > 0 ? "nonempty" : "empty",
     params.currentPage,
     params.pageSize,
@@ -32566,6 +32721,7 @@ var ListTableCore = class {
     /** 由 assembleListTableCoreControllers 在构造阶段挂载。 */
     __publicField(this, "renderController");
     __publicField(this, "debugManager");
+    options = resolveListTableStyleOptions(options);
     this.container = container;
     this.options = options;
     applyInitialColumnVisibility(options.columns);
@@ -32620,6 +32776,7 @@ var ListTableCore = class {
    * @param options 新配置。
    */
   updateOptions(options) {
+    options = resolveListTableStyleOptions(options);
     this.animationController.stopCarouselScroll();
     const host = this.asAssemblyHost();
     const shouldResetColumnConfig = shouldPersistIncomingColumnConfig(