@canvas-components/list-table 0.3.13 → 0.3.14

package/dist/index.d.cts

@@ -1,5 +1,6 @@
+import { CanvasScrollbarOptions, XlsxExportOptions } from '@canvas-components/utils';
+export { CanvasScrollbarAxisOptions as ListTableScrollbarAxisOptions } from '@canvas-components/utils';
 import { CanvasChartSparklineOption } from '@canvas-components/chart';
-import { XlsxExportOptions } from '@canvas-components/utils';
 
 /**
  * 排序状态。
@@ -1488,7 +1489,7 @@ interface ListTableContextMenuOptions {
 /**
  * 画布滚动条配置。
  */
-interface ListTableScrollbarOptions {
+interface ListTableScrollbarOptions extends CanvasScrollbarOptions {
     thickness?: number;
     horizontalLeft?: number;
     horizontalRight?: number;

package/dist/index.d.ts

@@ -1,5 +1,6 @@
+import { CanvasScrollbarOptions, XlsxExportOptions } from '@canvas-components/utils';
+export { CanvasScrollbarAxisOptions as ListTableScrollbarAxisOptions } from '@canvas-components/utils';
 import { CanvasChartSparklineOption } from '@canvas-components/chart';
-import { XlsxExportOptions } from '@canvas-components/utils';
 
 /**
  * 排序状态。
@@ -1488,7 +1489,7 @@ interface ListTableContextMenuOptions {
 /**
  * 画布滚动条配置。
  */
-interface ListTableScrollbarOptions {
+interface ListTableScrollbarOptions extends CanvasScrollbarOptions {
     thickness?: number;
     horizontalLeft?: number;
     horizontalRight?: number;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { stringifyDataIndex, getValueByDataIndex, clamp, copyTextSync, copyText, exportTableToXlsx, formatPreciseNumber, addPreciseNumbers, comparePreciseNumbers, isSameDataIndex, dividePreciseNumber, exportTableToTxt, exportTableToCsv, downloadJsonFile, mapRowsToExportRecords, copyJson, copyRows, parseNumberValue, formatNumberValue, formatPercentValue, formatScientificValue, formatChineseNumber, parseChineseNumber, normalizeDecimalPlaces, roundPreciseNumber, isDateTimeFormatPattern, formatDateTimeValue, formatCustomNumberPattern, isPointInRect as isPointInRect$1 } from '@canvas-components/utils';
+import { stringifyDataIndex, getValueByDataIndex, clamp, copyTextSync, copyText, exportTableToXlsx, resolveCanvasScrollbarAxis, formatPreciseNumber, addPreciseNumbers, comparePreciseNumbers, isSameDataIndex, dividePreciseNumber, exportTableToTxt, exportTableToCsv, downloadJsonFile, mapRowsToExportRecords, copyJson, copyRows, parseNumberValue, formatNumberValue, formatPercentValue, formatScientificValue, formatChineseNumber, parseChineseNumber, normalizeDecimalPlaces, roundPreciseNumber, isDateTimeFormatPattern, formatDateTimeValue, formatCustomNumberPattern, isPointInRect as isPointInRect$1 } from '@canvas-components/utils';
 import { drawBarcodeToCanvas } from '@canvas-components/barcode';
 import { drawCanvasChartToCanvas, getCanvasChartRenderer, resolveCanvasChartTooltipText } from '@canvas-components/chart';
 import { drawQrCodeToCanvas } from '@canvas-components/qrcode';
@@ -24026,8 +24026,6 @@ function deferQueryUntilLoadingPaint(start) {
     }, 0);
   });
 }
-
-// src/domain/layout/compute-scrollbar-layout.ts
 var DEFAULT_HORIZONTAL_LEFT = 0;
 var DEFAULT_HORIZONTAL_RIGHT = 0;
 var DEFAULT_HORIZONTAL_BOTTOM = 0;
@@ -24037,10 +24035,8 @@ var DEFAULT_VERTICAL_BOTTOM = 0;
 var MIN_SCROLLBAR_THUMB_SIZE = 36;
 function computeScrollbarLayout(params) {
   const layout = {};
-  const thickness = Math.max(
-    params.scrollbar?.thickness ?? DEFAULT_SCROLLBAR_THICKNESS,
-    6
-  );
+  const horizontal = resolveCanvasScrollbarAxis(params.scrollbar, "horizontal");
+  const vertical = resolveCanvasScrollbarAxis(params.scrollbar, "vertical");
   const horizontalLeft = Math.max(
     params.scrollbar?.horizontalLeft ?? DEFAULT_HORIZONTAL_LEFT,
     0
@@ -24066,11 +24062,12 @@ function computeScrollbarLayout(params) {
     0
   );
   const horizontalTrackWidth = Math.max(
-    params.width - horizontalLeft - horizontalRight - (params.maxScrollTop > 0 ? thickness : 0),
+    params.width - horizontalLeft - horizontalRight - (params.maxScrollTop > 0 && vertical.visible ? vertical.thickness : 0),
     0
   );
-  const horizontalTrackY = params.height - thickness - horizontalBottom;
-  if (params.maxScrollLeft > 0 && horizontalTrackWidth > 0) {
+  const horizontalTrackY = params.height - horizontal.thickness - horizontalBottom;
+  if (horizontal.visible && params.maxScrollLeft > 0 && horizontalTrackWidth > 0) {
+    const thickness = horizontal.thickness;
     const buttonSize = Math.min(thickness, horizontalTrackWidth / 3);
     const trackX = horizontalLeft + buttonSize;
     const trackWidth = Math.max(horizontalTrackWidth - buttonSize * 2, 0);
@@ -24113,9 +24110,10 @@ function computeScrollbarLayout(params) {
     params.bodyHeight - verticalTop - verticalBottom,
     0
   );
-  const verticalTrackX = params.width - thickness - verticalRight;
+  const verticalTrackX = params.width - vertical.thickness - verticalRight;
   const verticalTrackY = params.bodyTop + verticalTop;
-  if (params.maxScrollTop > 0 && verticalTrackHeight > 0) {
+  if (vertical.visible && params.maxScrollTop > 0 && verticalTrackHeight > 0) {
+    const thickness = vertical.thickness;
     const buttonSize = Math.min(thickness, verticalTrackHeight / 3);
     const trackY = verticalTrackY + buttonSize;
     const trackHeight = Math.max(verticalTrackHeight - buttonSize * 2, 0);
@@ -26030,10 +26028,15 @@ function buildListTableRenderSnapshot(params) {
     baseRowsOverride,
     displayRowsOverride
   } = params;
-  const scrollbarThickness = options.scrollbar?.visible === false ? 0 : Math.max(
-    options.scrollbar?.thickness ?? DEFAULT_SCROLLBAR_THICKNESS,
-    6
+  const verticalScrollbar = resolveCanvasScrollbarAxis(
+    options.scrollbar,
+    "vertical"
+  );
+  const horizontalScrollbar = resolveCanvasScrollbarAxis(
+    options.scrollbar,
+    "horizontal"
   );
+  const scrollbarThickness = verticalScrollbar.visible ? verticalScrollbar.thickness : 0;
   let width = Math.max(hostWidth - scrollbarThickness, 0);
   let height = hostHeight;
   const sourceNormalizedColumns = normalizeColumns(
@@ -26101,8 +26104,8 @@ function buildListTableRenderSnapshot(params) {
     (col) => col.summary != null && col.summary !== false || col.summaryTitle != null
   );
   const hasSummary = queryRows.displayRows.length > 0 && options.summaryRowHeight !== 0 && (options.summaryRowHeight != null || hasConfiguredSummary);
-  const hasHorizontalScrollbar = options.scrollbar?.visible !== false && columnMetrics.centerContentWidth - columnMetrics.availableCenterWidth > 1;
-  const horizontalScrollbarReserve = hasHorizontalScrollbar ? scrollbarThickness + Math.max(options.scrollbar?.horizontalBottom ?? 0, 0) : 0;
+  const hasHorizontalScrollbar = horizontalScrollbar.visible && columnMetrics.centerContentWidth - columnMetrics.availableCenterWidth > 1;
+  const horizontalScrollbarReserve = hasHorizontalScrollbar ? horizontalScrollbar.thickness + Math.max(options.scrollbar?.horizontalBottom ?? 0, 0) : 0;
   const contentHeight = Math.max(height - horizontalScrollbarReserve, 0);
   const initialBodyLayout = resolveBodyLayout({
     height: contentHeight,
@@ -27022,9 +27025,7 @@ function resolveListTableRenderHostSize(params) {
     height: canvasHostElement && canvasHostElement.clientHeight > 0 ? canvasHostElement.clientHeight : fallbackHeight
   };
 }
-
-// src/rendering/primitives/draw-scrollbars.ts
-function drawScrollbars(ctx, layout, descriptors, borderColor, opacity = 1, interactive = true, verticalFrame) {
+function drawScrollbars(ctx, layout, descriptors, borderColor, opacity = 1, interactive = true, verticalFrame, options) {
   const alpha = Number.isFinite(opacity) ? Math.min(Math.max(opacity, 0), 1) : 1;
   if (alpha <= 1e-3) {
     return;
@@ -27048,7 +27049,8 @@ function drawScrollbars(ctx, layout, descriptors, borderColor, opacity = 1, inte
       "horizontal",
       descriptors,
       borderColor,
-      interactive
+      interactive,
+      resolveCanvasScrollbarAxis(options, "horizontal")
     );
   }
   if (layout.vertical) {
@@ -27058,7 +27060,8 @@ function drawScrollbars(ctx, layout, descriptors, borderColor, opacity = 1, inte
       "vertical",
       descriptors,
       borderColor,
-      interactive
+      interactive,
+      resolveCanvasScrollbarAxis(options, "vertical")
     );
   }
   if (layout.horizontal) {
@@ -27102,7 +27105,7 @@ function drawHorizontalScrollbarTopBorder(ctx, horizontal, vertical, borderColor
   ctx.stroke();
   ctx.restore();
 }
-function drawAxisScrollbar(ctx, layout, axis, descriptors, borderColor, interactive) {
+function drawAxisScrollbar(ctx, layout, axis, descriptors, borderColor, interactive, style) {
   const kind = axis === "horizontal" ? "horizontal-scrollbar" : "vertical-scrollbar";
   if (interactive) {
     descriptors.push({
@@ -27130,9 +27133,21 @@ function drawAxisScrollbar(ctx, layout, axis, descriptors, borderColor, interact
       scrollbarRole: "increase-button"
     });
   }
-  drawButton(ctx, layout.decreaseButton, axis, "decrease");
-  drawButton(ctx, layout.increaseButton, axis, "increase");
-  drawThumb(ctx, layout.thumb);
+  if (style.trackColor != null) {
+    ctx.save();
+    ctx.fillStyle = style.trackColor;
+    for (const rect of [
+      layout.track,
+      layout.decreaseButton,
+      layout.increaseButton
+    ]) {
+      ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
+    }
+    ctx.restore();
+  }
+  drawButton(ctx, layout.decreaseButton, axis, "decrease", style.buttonColor);
+  drawButton(ctx, layout.increaseButton, axis, "increase", style.buttonColor);
+  drawThumb(ctx, layout.thumb, style);
   drawTrackBorder(ctx, layout.track, axis, borderColor);
 }
 function drawTrackBorder(ctx, rect, axis, borderColor) {
@@ -27195,16 +27210,23 @@ function drawVerticalScrollbarFrame(ctx, frame, borderColor) {
   }
   ctx.restore();
 }
-function drawThumb(ctx, rect) {
+function drawThumb(ctx, rect, style) {
   ctx.save();
-  ctx.fillStyle = "rgba(100, 116, 139, 0.8)";
-  roundRect2(ctx, rect.x, rect.y, rect.width, rect.height, rect.height / 2);
+  ctx.fillStyle = style.thumbColor;
+  roundRect2(
+    ctx,
+    rect.x,
+    rect.y,
+    rect.width,
+    rect.height,
+    style.thumbRadius ?? rect.height / 2
+  );
   ctx.fill();
   ctx.restore();
 }
-function drawButton(ctx, rect, axis, direction) {
+function drawButton(ctx, rect, axis, direction, color) {
   ctx.save();
-  ctx.fillStyle = "rgba(71, 85, 105, 0.88)";
+  ctx.fillStyle = color;
   ctx.beginPath();
   const centerX = rect.x + rect.width / 2;
   const centerY = rect.y + rect.height / 2;
@@ -29479,8 +29501,6 @@ function resolveActiveCellSectionClipRect(descriptor, params) {
     height: isTopFrozen ? params.topFrozenHeight : params.bottomFrozenHeight
   };
 }
-
-// src/rendering/pipeline/render-pipeline.ts
 function executeListTableRenderPipeline(params) {
   const {
     renderer,
@@ -29714,16 +29734,14 @@ function executeListTableRenderPipeline(params) {
     isScrollbarInteractive,
     {
       x: width,
-      width: options.scrollbar?.visible === false ? 0 : Math.max(
-        options.scrollbar?.thickness ?? DEFAULT_SCROLLBAR_THICKNESS,
-        6
-      ),
+      width: !resolveCanvasScrollbarAxis(options.scrollbar, "vertical").visible ? 0 : resolveCanvasScrollbarAxis(options.scrollbar, "vertical").thickness,
       top: 0,
       height,
       headerBottom: headerHeight,
       headerBackgroundColor: theme.headerBackgroundColor,
       bodyBackgroundColor: theme.backgroundColor
-    }
+    },
+    options.scrollbar
   );
   drawActiveCellOverlay({
     ctx,