@canvas-components/list-table 0.3.9 → 0.3.10

package/dist/index.cjs

@@ -2848,8 +2848,8 @@ function resolveContentTextDecoration(content) {
 function resolveContentTextIndent(content) {
   return content.style?.textIndent ?? 0;
 }
-function resolveContentTextAlign(content) {
-  return content.style?.textAlign ?? "left";
+function resolveContentTextAlign(content, fallback = "left") {
+  return content.style?.textAlign ?? fallback;
 }
 function resolveContentLayoutWidth(content, intrinsicWidth) {
   return Math.max(content.style?.width ?? intrinsicWidth, intrinsicWidth);
@@ -5882,7 +5882,7 @@ function drawBodyTagContent(params) {
     fontFamily: resolveContentFontFamily(content, theme)
   });
   ctx.textAlign = "left";
-  ctx.textBaseline = "middle";
+  ctx.textBaseline = "alphabetic";
   const bounds = measureTextBounds(ctx, content.text);
   const textBoxWidth = Math.max(width - paddingInline * 2, 0);
   const textX = resolveAlignedTextX({
@@ -5890,9 +5890,14 @@ function drawBodyTagContent(params) {
     boxWidth: textBoxWidth,
     textWidth: bounds.width,
     textIndent,
-    textAlign: resolveContentTextAlign(content)
+    textAlign: resolveContentTextAlign(content, "center")
   });
   const centerY = rect.y + rect.height / 2;
+  const textY = resolveCenteredTextBaselineY({
+    centerY,
+    ascent: bounds.ascent,
+    descent: bounds.descent
+  });
   drawSelectableTextSelectionBackground({
     ctx,
     text: content.text,
@@ -5902,11 +5907,11 @@ function drawBodyTagContent(params) {
     fragmentKey,
     textSelection,
     textOriginX: textX,
-    textTop: centerY - bounds.ascent,
+    textTop: textY - bounds.ascent,
     textHeight: bounds.height,
     color: theme.textSelectionBackgroundColor ?? "#99c2ff"
   });
-  ctx.fillText(content.text, textX, centerY);
+  ctx.fillText(content.text, textX, textY);
   const textFont = ctx.font;
   drawTextDecoration({
     ctx,
@@ -5928,7 +5933,7 @@ function drawBodyTagContent(params) {
     contentIndex,
     fragmentKey,
     textOriginX: textX,
-    textTop: centerY - bounds.ascent,
+    textTop: textY - bounds.ascent,
     textWidth: bounds.width,
     textHeight: bounds.height,
     fixed: column.fixed,
@@ -5971,7 +5976,7 @@ function applyTagTextStyle(ctx, content, theme) {
     fontFamily: resolveContentFontFamily(content, theme)
   });
   ctx.textAlign = "left";
-  ctx.textBaseline = "middle";
+  ctx.textBaseline = "alphabetic";
 }
 function resolveTagPalette(content) {
   if (content.style?.backgroundColor || content.style?.color || content.backgroundColor || content.borderColor || content.textColor) {
@@ -6791,7 +6796,7 @@ function drawBodyCellContents(params) {
       rect: lineRect,
       visibleRect: lineVisibleRect,
       lineWidth: line.width,
-      align: column.align
+      align: resolveBodyContentLineAlign(line, column.align)
     });
     line.items.forEach((item, itemIndex) => {
       if (itemIndex > 0) {
@@ -7918,6 +7923,12 @@ function resolveLineStartX(rect, lineWidth, align) {
   }
   return rect.x;
 }
+function resolveBodyContentLineAlign(line, columnAlign) {
+  if (columnAlign != null) {
+    return columnAlign;
+  }
+  return line.items.length > 0 && line.items.every((item) => item.content.type === "tag") ? "center" : columnAlign;
+}
 function resolveStickyLineStartX(params) {
   const { rect, visibleRect, lineWidth, align } = params;
   const preferredX = resolveLineStartX(rect, lineWidth, align);
@@ -18375,8 +18386,9 @@ async function getColumnConfig(key) {
 // src/services/column-config-service.ts
 function applyStoredColumnConfig(columns, storedColumns) {
   if (!storedColumns) {
-    return;
+    return false;
   }
+  let columnWidthsChanged = false;
   const applyToColumns = (cols) => {
     for (const col of cols) {
       if (!col.key) {
@@ -18384,6 +18396,9 @@ function applyStoredColumnConfig(columns, storedColumns) {
       }
       const stored = storedColumns[col.key];
       if (stored) {
+        if ((col.width ?? 160) !== stored.width) {
+          columnWidthsChanged = true;
+        }
         col.width = stored.width;
         col.hidden = !!stored.hidden;
         if ("align" in stored) {
@@ -18428,6 +18443,7 @@ function applyStoredColumnConfig(columns, storedColumns) {
     }
   };
   applyToColumns(columns);
+  return columnWidthsChanged;
 }
 function buildStoredColumnConfig(columns, sortState, filterState, zoom, summaryRowHeight, density) {
   const result = {};
@@ -18547,7 +18563,7 @@ async function loadListTableStoredConfig(params) {
   if (!stored) {
     return null;
   }
-  applyStoredColumnConfig(columns, stored.columns);
+  const columnWidthsChanged = applyStoredColumnConfig(columns, stored.columns);
   return {
     sortState: stored.sort?.key ? {
       key: stored.sort.key,
@@ -18556,7 +18572,8 @@ async function loadListTableStoredConfig(params) {
     filterState: stored.filters ? stored.filters : null,
     zoom: typeof stored.zoom === "number" && Number.isFinite(stored.zoom) && stored.zoom > 0 ? stored.zoom : null,
     summaryRowHeight: typeof stored.summaryRowHeight === "number" && Number.isFinite(stored.summaryRowHeight) && stored.summaryRowHeight >= 0 ? stored.summaryRowHeight : null,
-    density: stored.density === 26 || stored.density === 32 || stored.density === 48 || stored.density === 56 || stored.density === "auto" ? stored.density : null
+    density: stored.density === 26 || stored.density === 32 || stored.density === 48 || stored.density === 56 || stored.density === "auto" ? stored.density : null,
+    columnWidthsChanged
   };
 }
 
@@ -18589,6 +18606,12 @@ var ListTablePersistenceController = class {
       this.options.canvasHost.setContentZoom(nextZoom);
     }
     let currentOptions = this.options.getOptions();
+    if (stored.columnWidthsChanged && currentOptions.stretchColumns !== false) {
+      currentOptions = {
+        ...currentOptions,
+        stretchColumns: false
+      };
+    }
     if (stored.density != null) {
       const densitySizes = resolveDensitySizes(
         stored.density === "auto" ? "auto" : stored.density === 26 ? "ultra-compact" : stored.density === 32 ? "compact" : stored.density === 56 ? "comfortable" : "middle"