@svelte-lean/table 0.2.0 → 0.3.2

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @svelte-lean/table
 
+## 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
+
+- `pageSizeSelect="custom"` draws the page-size control with the Select primitive of `@svelte-lean/primitives`: a trigger button and a listbox popup drawn from the design tokens in every engine, around the same native `<select>`, which keeps the value and works without scripts. The application imports `@svelte-lean/primitives/select/register` and `@svelte-lean/styles/select.css`. `native` (a plain `<select>`) stays the default.
+  
+  The ids that tie the control's label, trigger and listbox come from `$props.id()`, so the peer dependency is now `svelte ^5.20.0`.
+
 ## 0.2.0
 
 ### Minor Changes

package/dist/style.css

@@ -700,6 +700,13 @@
 		gap: 0.5rem;
 		white-space: nowrap;
 	}
+	/* The Select primitive as the page-size control (`pageSizeSelect="custom"`): as tall as the
+	   pager's buttons, as wide as its longest option. */
+	:where(.slean-table-page-select) {
+		--slean-control-height-sm: var(--slean-table-control-height);
+		min-inline-size: 4.75rem;
+		font-size: inherit;
+	}
 	:where(.slean-table-pager, .slean-table-pages) {
 		display: flex;
 		align-items: center;
@@ -851,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

@@ -119,6 +119,7 @@
 		progressive = false,
 		pagination = true,
 		pageSizeOptions = [10, 20, 50, 100],
+		pageSizeSelect = 'native',
 		placeholder = '',
 		rowHoverable = true,
 		dir,
@@ -136,6 +137,15 @@
 		onCellRangeChange,
 		class: className = ''
 	}: TableProps<T> = $props();
+	/** Ids of this instance's own relationships (the page-size label and listbox); SSR-stable. */
+	const uid = $props.id();
+	/**
+	 * The Select primitive's root marker, spread rather than written: @svelte-lean/vite registers
+	 * the behavior of every marker it reads in markup, and a marker here would put the select
+	 * behavior in every application that renders a table. The application that sets
+	 * `pageSizeSelect="custom"` imports `@svelte-lean/primitives/select/register` itself.
+	 */
+	const SELECT_ROOT = { 'data-slean': 'select' } as const;
 	/**
 	 * One engine. Props are handed over as getters so the engine follows every prop change.
 	 * `getSubRows` and `searchText` must stay `undefined` when absent (grouping rejects tree input;
@@ -855,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(
@@ -1053,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);
@@ -1465,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"
@@ -1475,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">
@@ -1716,17 +1735,48 @@
 	</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
-			><label class="slean-table-page-size"
-				>{m.pageSize}<select
-					class="slean-table-input"
-					value={s.pageSize}
-					onchange={(e) => table.setPageSize(Number(e.currentTarget.value))}
-					>{#each pageSizes as size (size)}<option value={size}
-							>{size === 0 ? m.allRows : size}</option
-						>{/each}</select
-				></label
-			><span class="slean-table-pager"
+				>{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">
+						<select
+							data-slean-part="native"
+							aria-labelledby="{uid}-page-size"
+							value={s.pageSize}
+							onchange={(e) => table.setPageSize(Number(e.currentTarget.value))}
+							>{#each pageSizes as size (size)}<option value={size}
+									>{size === 0 ? m.allRows : size}</option
+								>{/each}</select
+						><button
+							type="button"
+							role="combobox"
+							aria-haspopup="listbox"
+							aria-expanded="false"
+							aria-controls="{uid}-page-sizes"
+							aria-labelledby="{uid}-page-size"
+							data-slean-part="trigger"
+							><span data-slean-part="value">{s.pageSize === 0 ? m.allRows : s.pageSize}</span
+							></button
+						><span data-slean-part="toggle" aria-hidden="true"></span>
+						<div popover="manual" data-slean-part="popup">
+							<ul id="{uid}-page-sizes" role="listbox" aria-labelledby="{uid}-page-size"></ul>
+						</div>
+					</div></span
+				>{:else}<label class="slean-table-page-size"
+					>{m.pageSize}<select
+						class="slean-table-input"
+						value={s.pageSize}
+						onchange={(e) => table.setPageSize(Number(e.currentTarget.value))}
+						>{#each pageSizes as size (size)}<option value={size}
+								>{size === 0 ? m.allRows : size}</option
+							>{/each}</select
+					></label
+				>{/if}<span class="slean-table-pager"
 				><button
 					type="button"
 					class="slean-table-button"

package/dist/types.d.ts

@@ -299,6 +299,14 @@ export interface TableProps<T> {
     pagination?: boolean;
     /** Page sizes offered by the pager; the current size is always included. */
     pageSizeOptions?: number[];
+    /**
+     * The page-size control. `native` (default): a native `<select>`. `custom`: the Select primitive
+     * of `@svelte-lean/primitives` (a trigger button and a listbox popup drawn the same in every
+     * engine), around the same native `<select>`, which keeps the value and works without scripts.
+     * `custom` needs the select behavior (`import '@svelte-lean/primitives/select/register'`) and
+     * its styles (`@svelte-lean/styles/select.css`) in the application.
+     */
+    pageSizeSelect?: 'native' | 'custom';
     /** Text of an empty value (`null`, `undefined`, `''`, or `format` returning `null`/`''`). */
     placeholder?: string;
     rowHoverable?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svelte-lean/table",
-  "version": "0.2.0",
+  "version": "0.3.2",
   "description": "A Svelte-native table and data-grid engine that ships only the features you use.",
   "license": "MIT",
   "author": "Ömer Say",
@@ -58,7 +58,7 @@
     "access": "public"
   },
   "peerDependencies": {
-    "svelte": "^5.0.0"
+    "svelte": "^5.20.0"
   },
   "scripts": {
     "build": "yarn run -T svelte-kit sync && yarn run -T svelte-package && node scripts/types.mjs && yarn run -T publint && yarn run -T attw --pack . --profile esm-only --exclude-entrypoints ./style.css --format table-flipped --no-emoji",