@svelte-lean/table 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @svelte-lean/table
 
+## 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;

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;
@@ -1717,16 +1727,42 @@
 	{#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"
+			>{#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.0",
   "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",