@svelte-lean/table 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @svelte-lean/table
 
+## 0.4.0
+
+No changes in this release.
+
+## 0.3.2
+
+### Patch Changes
+
+- Grid layout: content drawn straight into a cell (a badge, a chip, a link) keeps its own width instead of stretching across the cell; the selection and expand columns center their control. A click on a disabled `data-action` control reports no `onAction`.
+
+## 0.3.1
+
+### Patch Changes
+
+- The selection count moves out of the toolbar: with a pager it ends the pager's status line (`Page 1 of 15 · 144 rows · 3 selected`), without one it stays in the toolbar; either way it shows only while rows are selected, never as "0 selected". A table with selection and nothing else in its toolbar no longer draws an empty band above its header row.
+
 ## 0.3.0
 
 ### Minor Changes

package/dist/style.css

@@ -858,12 +858,36 @@
 		align-items: center;
 		min-width: 0;
 	}
+	/* The renderer's own boxes in a cell fill it; content drawn straight into a cell (a badge, a
+	   chip, a link in a plain grid cell, a control) keeps its own width. */
 	:where(
 		.slean-table[data-layout='grid'] > .slean-table-scroll > table > * > tr > :is(th, td) > *
+	) {
+		flex: 0 1 auto;
+	}
+	:where(
+		.slean-table[data-layout='grid']
+			> .slean-table-scroll
+			> table
+			> *
+			> tr
+			> :is(th, td)
+			> :is(.slean-table-cell, .slean-table-heading, .slean-table-editor)
 	) {
 		flex: 1 1 auto;
 		min-width: 0;
 	}
+	/* The selection and expand columns center their one control. */
+	:where(
+		.slean-table[data-layout='grid']
+			> .slean-table-scroll
+			> table
+			> *
+			> tr
+			> :is(.slean-table-selection, .slean-table-expander)
+	) {
+		justify-content: center;
+	}
 	:where(
 		.slean-table[data-layout='grid'] > .slean-table-scroll > table > * > tr > .slean-table-full
 	) {

package/dist/table/data-table.svelte

@@ -865,6 +865,8 @@
 	}
 	/** The page status: a manual table without `rowCount` does not know its total. */
 	const rowsKnown = $derived(!manual || rowCount !== undefined);
+	/** Without a pager the toolbar carries the selection count, and only while something is chosen. */
+	const selectedInToolbar = $derived(Boolean(selection) && !pagination && s.selection.length > 0);
 	const headerRowCount = $derived(showHeader ? table.headers.length + (filters ? 1 : 0) : 0);
 	/** A manual page is part of a known total: `aria-rowcount` and `aria-rowindex` say where. */
 	const ariaRowCount = $derived(
@@ -1063,7 +1065,10 @@
 		const target = e.target as HTMLElement;
 		const action = target.closest<HTMLElement>('[data-action]');
 		if (action && cell.contains(action)) {
-			onAction?.(action.dataset.action ?? '', row, action, index);
+			// A disabled control reports nothing (a click can still be dispatched on one).
+			if (!action.matches(':disabled, [aria-disabled="true"]')) {
+				onAction?.(action.dataset.action ?? '', row, action, index);
+			}
 			return;
 		}
 		const control = target.closest(NOT_ROW_CLICK);
@@ -1475,7 +1480,11 @@
 	<!-- The toolbar exists only when something goes in it: an empty flex row would still paint its
 	     padding as a blank band above the header row (Svelte keeps a text node between the blocks,
 	     so `:empty` cannot hide it). -->
-	{#if searchable || toolbar || selection || columnControls}<div class="slean-table-toolbar">
+	<!-- The selection count sits in the pager's status line when there is a pager, and in the
+	     toolbar only without one; either way it shows while something is selected, never "0". -->
+	{#if searchable || toolbar || selectedInToolbar || columnControls}<div
+			class="slean-table-toolbar"
+		>
 			{#if searchable}<input
 					class="slean-table-search slean-table-input"
 					type="search"
@@ -1485,7 +1494,7 @@
 					oninput={(e) => delayed('search', e.currentTarget.value, (v) => table.setSearch(v))}
 				/>{/if}
 			{#if toolbar}{@render toolbar(model)}{/if}
-			{#if selection}<span class="slean-table-selected" aria-live="polite"
+			{#if selectedInToolbar}<span class="slean-table-selected" aria-live="polite"
 					>{m.selected(s.selection.length)}</span
 				>{/if}
 			{#if columnControls}<details class="slean-table-columns">
@@ -1658,8 +1667,7 @@
 													></button
 												>{:else if col.headerCell}{@render col.headerCell(
 													headerContext(col, sort)
-												)}{:else}{col.header}{/if}
-											{#if col.resizable !== false}<button
+												)}{:else}{col.header}{/if}{#if col.resizable !== false}<button
 													type="button"
 													class="slean-table-resize"
 													aria-label={`${m.resize}: ${col.header}`}
@@ -1726,7 +1734,12 @@
 	</div>
 	{#if pagination}<div class="slean-table-pagination">
 			<span class="slean-table-page-status" aria-live="polite"
-				>{m.page(model.pageIndex + 1, model.pageCount, rowsKnown ? model.total : undefined)}</span
+				>{m.page(
+					model.pageIndex + 1,
+					model.pageCount,
+					rowsKnown ? model.total : undefined
+				)}{#if selection && s.selection.length > 0}
+					· <span class="slean-table-selected">{m.selected(s.selection.length)}</span>{/if}</span
 			>{#if pageSizeSelect === 'custom'}<span class="slean-table-page-size"
 					><span id="{uid}-page-size">{m.pageSize}</span>
 					<div class="slean-table-page-select" {...SELECT_ROOT} data-size="sm">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svelte-lean/table",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "A Svelte-native table and data-grid engine that ships only the features you use.",
   "license": "MIT",
   "author": "Ömer Say",