bitboss-ui 2.1.130 → 2.1.131

package/dist/ai/BbTable.md

@@ -31,11 +31,7 @@
 				<col
 					v-for="track in columnTracks"
 					:key="track.key"
-					:style="{
-						width: track.width,
-						minWidth: track.locked ? track.width : undefined,
-						maxWidth: track.locked ? track.width : undefined,
-					}"
+					:style="{ width: track.width }"
 				/>
 			</colgroup>
 			<thead>
@@ -570,29 +566,6 @@ const toLength = (width: number | string) => {
 	return /^-?\d*\.?\d+$/.test(trimmed) ? `${trimmed}px` : trimmed;
 };
 
-/**
- * Resolves a CSS length to px in the context of `host`.
- * Returns `null` when the value cannot be resolved reliably.
- */
-const resolveLengthToPx = (
-	width: number | string,
-	host: HTMLElement
-): number | null => {
-	const length = toLength(width);
-	if (/^-?\d*\.?\d+px$/.test(length)) return parseFloat(length);
-
-	const probe = document.createElement('div');
-	probe.style.position = 'absolute';
-	probe.style.visibility = 'hidden';
-	probe.style.pointerEvents = 'none';
-	probe.style.width = length;
-	host.appendChild(probe);
-	const px = probe.getBoundingClientRect().width;
-	host.removeChild(probe);
-
-	return Number.isFinite(px) && px > 0 ? px : null;
-};
-
 /** Number of data columns the parent renders (numeric track keys). */
 const parentDataColumns = computed(() => {
 	const tracks = parentNode.value?.tracks;
@@ -803,10 +776,10 @@ const columnTracks = computed(() => {
 		fixedLayout.value && structuralFit[key]
 			? (structuralFit[key] as string)
 			: sync(key);
-	const tracks: { key: string; width: string; locked?: boolean }[] = [];
+	const tracks: { key: string; width: string }[] = [];
 
 	if (props.selectable) {
-		tracks.push({ key: 'select', width: structural('select'), locked: false });
+		tracks.push({ key: 'select', width: structural('select') });
 	}
 
 	const lastIndex = props.columns.length - 1;
@@ -820,7 +793,7 @@ const columnTracks = computed(() => {
 		// track plus the folded edge region plus any deficit. Skipped when the
 		// table overflows: there is no leftover then, and it must content-size.
 		if (index === fillColumnIndex.value && !overflowsParent.value) {
-			tracks.push({ key, width: 'auto', locked: false });
+			tracks.push({ key, width: 'auto' });
 			return;
 		}
 
@@ -855,11 +828,11 @@ const columnTracks = computed(() => {
 			? `calc(${[...offsets, span ?? '0px'].join(' + ')})`
 			: (span ?? 'auto');
 
-		tracks.push({ key, width, locked: frozen != null });
+		tracks.push({ key, width });
 	});
 
 	if (props.actions) {
-		tracks.push({ key: 'actions', width: structural('actions'), locked: false });
+		tracks.push({ key: 'actions', width: structural('actions') });
 	}
 
 	return tracks;
@@ -931,19 +904,27 @@ const measureStructuralFit = () => {
 	const fit = (selector: string) => {
 		let max = 0;
 		table.querySelectorAll<HTMLElement>(selector).forEach((cell) => {
-			// Combined horizontal extent of the children, not the widest one: an
-			// actions cell holds several side-by-side controls whose total width is
-			// what the column must fit. Measured from edges so it stays correct even
-			// when the cell is narrower than its content (controls overflow on
-			// `nowrap`), which keeps the pin-to-content convergence stable.
-			let left = Infinity;
-			let right = -Infinity;
+			// Sum each child's own intrinsic width (plus horizontal margins) — an
+			// actions cell holds several side-by-side controls and the column must
+			// fit them all. Crucially this is *not* their shared extent: the extent
+			// depends on how the cell spreads them across its width, which feeds the
+			// column width back into its own measurement and runs away into the
+			// thousands. A child's own width does not depend on the cell, so this
+			// converges. Out-of-flow children (e.g. an `sr-only` label parked far
+			// off-screen) are skipped so they cannot inflate the result.
+			let content = 0;
 			cell.querySelectorAll<HTMLElement>(':scope > *').forEach((child) => {
-				const rect = child.getBoundingClientRect();
-				left = Math.min(left, rect.left);
-				right = Math.max(right, rect.right);
+				const childStyle = getComputedStyle(child);
+				if (
+					childStyle.position === 'absolute' ||
+					childStyle.position === 'fixed'
+				)
+					return;
+				const margin =
+					parseFloat(childStyle.marginLeft) +
+					parseFloat(childStyle.marginRight);
+				content += child.getBoundingClientRect().width + (margin || 0);
 			});
-			const content = right > left ? right - left : 0;
 			const style = getComputedStyle(cell);
 			const padding =
 				parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
@@ -1016,19 +997,6 @@ const fillValue = ref(0);
  */
 const naturalTotalWidth = ref<string | null>(null);
 
-/**
- * Width budget for probe distribution. Prefer the immediate parent's visible
- * width (the scroll viewport) over this table's own offset width so a
- * max-content growth loop in ancestors cannot recursively inflate probe output.
- */
-const probeViewportWidth = (container: HTMLElement): number => {
-	const parentWidth = container.parentElement?.clientWidth ?? 0;
-	const selfWidth = container.clientWidth || container.getBoundingClientRect().width;
-	const fallback = container.offsetWidth;
-	const width = parentWidth || selfWidth || fallback;
-	return Number.isFinite(width) && width > 0 ? width : 0;
-};
-
 const runNaturalWidthProbe = () => {
 	const container = containerRef.value;
 	if (!container || !fixedLayout.value) return;
@@ -1041,8 +1009,7 @@ const runNaturalWidthProbe = () => {
 	)
 		return;
 
-	const containerWidth = probeViewportWidth(container);
-	if (containerWidth <= 0) return;
+	const containerWidth = container.offsetWidth;
 	const dataOffset = props.selectable ? 1 : 0;
 
 	// ── Real-table measurements ────────────────────────────────────────────
@@ -1054,21 +1021,17 @@ const runNaturalWidthProbe = () => {
 		? parseFloat(structuralFit.actions)
 		: 0;
 
-	// Live rendered widths from the fixed-layout table. Frozen columns use their
-	// declared width (resolved to px) so an explicit width like `200` remains a
-	// true floor in the probe math even when the live render is under pressure.
-	// `frozenTotal` (declared widths) feeds the stable min-width floor;
-	// `nonFlexTotal` (frozen + inherited) is what the flex columns share.
+	// Live rendered widths from the fixed-layout table. `frozenTotal` (declared
+	// widths) feeds the stable min-width floor; `nonFlexTotal` (frozen + inherited)
+	// is what the flex columns share the remainder of. The inherited part is only
+	// used for that `available` figure — never fed back into min-width, since those
+	// widths stretch with the table and would otherwise lock min-width above
+	// max-content and force a spurious uniform stretch on every column.
 	const realThs = headerCells();
 	let frozenTotal = 0;
 	let nonFlexTotal = 0;
 	props.columns.forEach((col, i) => {
-		const renderedWidth =
-			realThs[dataOffset + i]?.getBoundingClientRect().width ?? 0;
-		const declaredFrozenWidth =
-			col.width != null ? resolveLengthToPx(col.width, container) : null;
-		const width = declaredFrozenWidth ?? renderedWidth;
-
+		const width = realThs[dataOffset + i]?.getBoundingClientRect().width ?? 0;
 		if (col.width != null) frozenTotal += width;
 		if (!isFlexColumn(i)) nonFlexTotal += width;
 	});
@@ -2171,22 +2134,10 @@ export type BbTableSlots<Item = any> = {
 			width: 100%;
 
 			thead {
-				th {
-					box-sizing: border-box;
-					min-width: 0;
-				}
-
 				.bb-table-header--actions {
 					width: auto;
 				}
 			}
-
-			tbody {
-				td {
-					box-sizing: border-box;
-					min-width: 0;
-				}
-			}
 		}
 	}