runeforge 0.0.54 → 0.0.56

package/README.md

@@ -379,6 +379,7 @@ Every entry in an `InterfaceMetadata<T>` object is an `AttributeMetadata` — a
 | `formatter` | `(data) => (value, row) => string` | all | Custom cell text — see [Formatters](#formatters) |
 | `excludedFromList/Create/Read/Update` | `boolean` | all | Hides the field from that specific view |
 | `sortable` / `filterable` | `boolean` | all | Table column controls |
+| `filterOptions` | `SelectOption[]` | all | Static, exhaustive column filter choices, replacing the sampled-from-loaded-rows checkbox list — see [Server-side pagination, sorting & filtering](#server-side-pagination-sorting--filtering) |
 
 ### Validation
 
@@ -963,6 +964,23 @@ export const load: PageServerLoad = ({ url }) => {
 
 No other prop changes are needed — column sorting/filtering UI, the paginator, and (with `config.export.callback`) export all keep working the same way, just backed by the server instead of the in-memory array. Boolean-column filters send comma-separated values (`?active=true,false`); date-range filters send `<attribute>_from`/`<attribute>_to`.
 
+A text column's filter checkbox list is populated from values seen on the currently loaded page — a cosmetic hint in server mode, not an exhaustive list, since the full set of values lives server-side. For a column whose possible values are a known, bounded set (an enum-like field, a small lookup table), give it `filterOptions` instead so every choice always shows up, regardless of what the current page contains:
+
+```ts
+status: {
+  label: 'Status',
+  type: AttributeType.text,
+  filterable: true,
+  filterOptions: [
+    { value: 'DRAFT', label: 'Draft' },
+    { value: 'PUBLISHED', label: 'Published' },
+    { value: 'ARCHIVED', label: 'Archived' },
+  ],
+},
+```
+
+`value` is matched against the column's rendered cell text and sent server-side as-is (same as any other checkbox filter value); `label` is only what's displayed, falling back to `value`.
+
 ### PaginatedTable
 
 A standalone table component with built-in sort, filter, and pagination — the same engine `GenericCRUD` uses internally.

package/dist/components/crud/Field.svelte

@@ -93,6 +93,43 @@
 		return String(n).padStart(2, '0');
 	}
 
+	// ISO (yyyy-mm-dd) <-> display (dd/mm/yyyy) conversion and typing mask.
+	function isoDateToDisplay(iso: string): string {
+		const [year, month, day] = iso.split('-');
+		return `${day}/${month}/${year}`;
+	}
+
+	function displayToIsoDate(display: string): string | null {
+		const match = display.trim().match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);
+		if (!match) return null;
+		const [, dd, mm, yyyy] = match;
+		const day = Number(dd);
+		const month = Number(mm);
+		const year = Number(yyyy);
+		// Rejects invalid dates (e.g. 31/02).
+		const date = new Date(Date.UTC(year, month - 1, day));
+		if (
+			date.getUTCFullYear() !== year ||
+			date.getUTCMonth() !== month - 1 ||
+			date.getUTCDate() !== day
+		) {
+			return null;
+		}
+		return `${yyyy}-${mm.padStart(2, '0')}-${dd.padStart(2, '0')}`;
+	}
+
+	// Inserts "/" as digits are typed: "21" -> "21/", "211" -> "21/1".
+	function maskDateDigits(digits: string): string {
+		const day = digits.slice(0, 2);
+		const month = digits.slice(2, 4);
+		const year = digits.slice(4, 8);
+		let out = day;
+		if (digits.length >= 2) out += '/';
+		out += month;
+		if (digits.length >= 4) out += '/';
+		return out + year;
+	}
+
 	// `record[field.attribute]` may be empty, a bare "YYYY-MM-DD" (freshly
 	// picked, before any time is set) or a full ISO datetime (loaded from an
 	// existing instance) — parsed once here so the date button, the time
@@ -112,16 +149,47 @@
 	const timePart = $derived(
 		parsedDateTime ? `${pad(parsedDateTime.getHours())}:${pad(parsedDateTime.getMinutes())}` : ''
 	);
-	const formattedDatePart = $derived(
-		parsedDateTime
-			? `${pad(parsedDateTime.getDate())}/${pad(parsedDateTime.getMonth() + 1)}/${parsedDateTime.getFullYear()}`
-			: ''
-	);
 
 	function setDateTime(nextDatePart: string, nextTimePart: string) {
 		record[field.attribute] = nextDatePart ? `${nextDatePart}T${nextTimePart || '00:00'}` : '';
 	}
 
+	// Typed display text for the date part, synced from `datePart`.
+	// eslint-disable-next-line svelte/prefer-writable-derived
+	let dateTextValue = $state('');
+	$effect(() => {
+		dateTextValue = datePart ? isoDateToDisplay(datePart) : '';
+	});
+
+	function onDateTextInput(event: Event) {
+		const raw = (event.currentTarget as HTMLInputElement).value;
+		const prevDigits = dateTextValue.replace(/\D/g, '');
+		let digits = raw.replace(/\D/g, '');
+		// Drops one extra digit when backspacing over an inserted "/".
+		if (raw.length < dateTextValue.length && digits.length === prevDigits.length) {
+			digits = digits.slice(0, -1);
+		}
+		digits = digits.slice(0, 8);
+		dateTextValue = maskDateDigits(digits);
+		if (!digits) {
+			setDateTime('', timePart);
+			return;
+		}
+		const parsed = displayToIsoDate(dateTextValue);
+		if (parsed) setDateTime(parsed, timePart);
+	}
+
+	function onDateTextBlur() {
+		if (!dateTextValue.trim()) {
+			setDateTime('', timePart);
+			return;
+		}
+		if (!displayToIsoDate(dateTextValue)) {
+			// Discards invalid input.
+			dateTextValue = datePart ? isoDateToDisplay(datePart) : '';
+		}
+	}
+
 	$effect(() => {
 		if (!field.dependentOptions || isMultiValued) return;
 		const current = record[field.attribute];
@@ -226,16 +294,41 @@
 					disabled={fieldDisabled}
 				/>
 				<div class="flex gap-2">
-					<button
-						type="button"
-						class="input input-bordered w-full text-left font-normal"
-						class:opacity-40={!record[field.attribute]}
-						disabled={fieldDisabled}
-						popovertarget={datePopId}
-						style="anchor-name:{dateAnchorName}"
-					>
-						{record[field.attribute] ? formattedDatePart : (field.placeholder ?? '')}
-					</button>
+					<div class="relative flex-1" style="anchor-name:{dateAnchorName}">
+						<input
+							type="text"
+							id={field.attribute}
+							placeholder={field.placeholder ?? 'dd/mm/aaaa'}
+							value={dateTextValue}
+							oninput={onDateTextInput}
+							onblur={onDateTextBlur}
+							autocomplete="off"
+							disabled={fieldDisabled}
+							class="input input-bordered w-full pr-9"
+							class:input-error={!!error}
+						/>
+						<button
+							type="button"
+							popovertarget={datePopId}
+							aria-label={strings.chooseDate}
+							disabled={fieldDisabled}
+							class="absolute inset-y-0 right-0 flex items-center px-2.5 text-base-content/50 hover:text-base-content disabled:pointer-events-none disabled:opacity-40"
+						>
+							<svg
+								class="size-4"
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							>
+								<rect x="3" y="4" width="18" height="18" rx="2" />
+								<path d="M16 2v4M8 2v4M3 10h18" />
+							</svg>
+						</button>
+					</div>
 					<input
 						type="time"
 						class="input input-bordered w-32 shrink-0"

package/dist/components/crud/GenericCRUD.svelte

@@ -219,6 +219,7 @@
 								component: m.component,
 								sortable: m.sortable,
 								filterable: m.filterable,
+								filterOptions: m.filterOptions,
 								fields: embeddedFields,
 								itemLabel: m.itemLabel
 							};

package/dist/components/table/PaginatedTable.svelte

@@ -5,8 +5,7 @@
 	import TableHeader from './TableHeader.svelte';
 	import { SortState, FilterState, snapshotFilter } from './state.svelte.js';
 	import {
-		distinctEntries,
-		isFilterable,
+		resolveDistinctValues,
 		resolveReorderComparator
 	} from './utils.js';
 	import type {
@@ -83,37 +82,14 @@
 	const serverFilterSampleSize = 5;
 
 	// Server mode: there's no way to know every value a column can take without
-	// querying the whole (server-owned) dataset, so this is deliberately just a
-	// cosmetic hint — up to `serverFilterSampleSize` distinct values found on
-	// the current page, not an exhaustive list. Boolean is the one exception:
-	// its two states are always known, so both show up regardless of what the
-	// current page happens to contain.
+	// querying the whole (server-owned) dataset, so a plain text column's
+	// entries are deliberately just a cosmetic hint — up to
+	// `serverFilterSampleSize` distinct values found on the current page, not
+	// an exhaustive list. `boolean` columns and columns with `filterOptions`
+	// are the exceptions: their full set of choices is always known upfront,
+	// so it shows up regardless of what the current page happens to contain.
 	const distinctValues = $derived(
-		pagination
-			? {
-					...Object.fromEntries(
-						Object.entries(
-							distinctEntries(
-								data,
-								columns.filter((c) => isFilterable(c) && c.type !== 'boolean')
-							)
-						).map(([attribute, entries]) => [attribute, entries.slice(0, serverFilterSampleSize)])
-					),
-					...Object.fromEntries(
-						columns
-							.filter((c) => isFilterable(c) && c.type === 'boolean')
-							.map((c) => [
-								c.attribute,
-								[
-									// eslint-disable-next-line @typescript-eslint/no-explicit-any
-									{ key: 'true', label: c.formatter?.(true as any, {} as T), row: {} as T },
-									// eslint-disable-next-line @typescript-eslint/no-explicit-any
-									{ key: 'false', label: c.formatter?.(false as any, {} as T), row: {} as T }
-								]
-							])
-					)
-				}
-			: distinctEntries(data, columns)
+		resolveDistinctValues(data, columns, pagination ? serverFilterSampleSize : undefined)
 	);
 
 	// Server-pagination mode owns its own full row set server-side, where

package/dist/components/table/utils.d.ts

@@ -5,6 +5,15 @@ export declare function isSortable<T extends object>(col: ColumnDefinition<T>):
 export declare function isFilterable<T extends object>(col: ColumnDefinition<T>): boolean;
 export declare function compare(a: unknown, b: unknown): number;
 export declare function distinctEntries<T extends object>(data: T[], columns: ColumnDefinition<T>[]): Record<string, DistinctEntry<T>[]>;
+/** Resolves the checkbox-list entries for every filterable column: a
+ * column's own `filterOptions` wins when present (a static, exhaustive
+ * list — see its doc comment); a `boolean` column always gets its two known
+ * states; everything else falls back to values actually seen in `data`,
+ * truncated to `sampleSize` when given. Sampling off `data` is only ever a
+ * hint under server-side pagination, where `data` is just the current
+ * page — pass `sampleSize` there; omit it in client mode, where `data` is
+ * the complete, already-filtered row set. */
+export declare function resolveDistinctValues<T extends object>(data: T[], columns: ColumnDefinition<T>[], sampleSize?: number): Record<string, DistinctEntry<T>[]>;
 /** Returns a copy of `rows` with the item at `from` moved to `to` — pure
  * array surgery, handy for building custom reorder UIs on `PaginatedTable`.
  * Out-of-range indices are a no-op. */

package/dist/components/table/utils.js

@@ -42,6 +42,41 @@ export function distinctEntries(data, columns) {
     }
     return result;
 }
+/** Resolves the checkbox-list entries for every filterable column: a
+ * column's own `filterOptions` wins when present (a static, exhaustive
+ * list — see its doc comment); a `boolean` column always gets its two known
+ * states; everything else falls back to values actually seen in `data`,
+ * truncated to `sampleSize` when given. Sampling off `data` is only ever a
+ * hint under server-side pagination, where `data` is just the current
+ * page — pass `sampleSize` there; omit it in client mode, where `data` is
+ * the complete, already-filtered row set. */
+export function resolveDistinctValues(data, columns, sampleSize) {
+    const result = {};
+    for (const col of columns) {
+        if (!isFilterable(col))
+            continue;
+        if (col.filterOptions) {
+            result[col.attribute] = col.filterOptions.map((o) => ({
+                key: o.value,
+                label: o.label,
+                row: {},
+            }));
+            continue;
+        }
+        if (col.type === 'boolean') {
+            result[col.attribute] = [
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                { key: 'true', label: col.formatter?.(true, {}), row: {} },
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                { key: 'false', label: col.formatter?.(false, {}), row: {} },
+            ];
+            continue;
+        }
+        const entries = distinctEntries(data, [col])[col.attribute] ?? [];
+        result[col.attribute] = sampleSize != null ? entries.slice(0, sampleSize) : entries;
+    }
+    return result;
+}
 /** Returns a copy of `rows` with the item at `from` moved to `to` — pure
  * array surgery, handy for building custom reorder UIs on `PaginatedTable`.
  * Out-of-range indices are a no-op. */

package/dist/i18n/en.js

@@ -8,6 +8,7 @@ export const en = {
     emptyValue: '(empty)',
     previous: 'Previous',
     next: 'Next',
+    chooseDate: 'Choose date from calendar',
     selectPlaceholder: 'Select an option',
     selectSearch: 'Search...',
     selectSearching: 'Searching...',

package/dist/i18n/es.js

@@ -8,6 +8,7 @@ export const es = {
     emptyValue: '(vacío)',
     previous: 'Anterior',
     next: 'Siguiente',
+    chooseDate: 'Elegir fecha en el calendario',
     selectPlaceholder: 'Seleccioná una opción',
     selectSearch: 'Buscar...',
     selectSearching: 'Buscando...',

package/dist/i18n/types.d.ts

@@ -8,6 +8,7 @@ export interface RuneforgeStrings {
     emptyValue: string;
     previous: string;
     next: string;
+    chooseDate: string;
     selectPlaceholder: string;
     selectSearch: string;
     selectSearching: string;

package/dist/types/attribute.d.ts

@@ -75,6 +75,15 @@ export type AttributeMetadata = {
     excludedFromRead?: boolean;
     sortable?: boolean;
     filterable?: boolean;
+    /** List column filter only: a static, exhaustive set of choices shown in
+     * the column filter's checkbox list, instead of the values sampled off
+     * currently loaded rows. For a bounded, known set (e.g. an enum-like text
+     * column) that the loaded page might not fully represent — especially
+     * under [server-side pagination](#server-side-pagination-sorting--filtering),
+     * where the sample is only a handful of values off the current page. `value`
+     * is matched against the rendered cell text (and sent server-side as-is);
+     * `label` is only what's displayed, falling back to `value`. */
+    filterOptions?: SelectOption[];
     groupedAs?: string;
     min?: number;
     max?: number;

package/dist/types/crud.d.ts

@@ -12,6 +12,8 @@ export type ColumnDefinition<T extends object = Record<string, unknown>> = {
         formatter?: CellFormatter<T, T[K]>;
         sortable?: boolean;
         filterable?: boolean;
+        /** Static, exhaustive filter choices — see `AttributeMetadata.filterOptions`. */
+        filterOptions?: SelectOption[];
         /** Embedded columns only: sub-field definitions for each item, used to
          * render a default cell summary and to expand the column into one
          * sub-column per field on CSV/XLSX export. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "runeforge",
-  "version": "0.0.54",
+  "version": "0.0.56",
   "description": "SvelteKit toolkit for building metadata-driven CRUD interfaces with tables, forms, and actions",
   "license": "MIT",
   "author": "Ezequiel Puerta",