@lavalogic/scoria 0.38.5 → 0.38.7

package/dist/Components/Table/Misc/TableFooter.svelte

@@ -111,17 +111,27 @@
 	$effect(() => {
 		if (tableContext.paginationRepo?.paginationState.pageIndex == null) {
 			pageButtons = [1];
-		} else {
-			const startingPage = Math.min(
-				tableContext.lastPage - 2,
-				tableContext.paginationRepo.paginationState.pageIndex - 1
-			);
-			const pageToStartWith = Math.max(1, Math.min(startingPage, tableContext.lastPage - 4));
-
-			pageButtons = new Array<number>(Math.min(tableContext.lastPage, 5))
-				.fill(pageToStartWith)
-				.map((item, index) => item + index);
+			return;
 		}
+		const current = tableContext.paginationRepo.paginationState.pageIndex + 1;
+		const last = tableContext.lastPage;
+		// `pages` accumulates the dedup'd, sorted button set. The minimum
+		// the user always sees between the Previous and Next arrows is the
+		// current page, the next page (when one exists), and the last
+		// page. On top of that we still surface a small window around the
+		// current page for visual context.
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity
+		const pages = new Set<number>();
+		const windowStart = Math.max(1, Math.min(current - 2, last - 4));
+		for (let i = windowStart; i < windowStart + 5 && i <= last; i++) {
+			pages.add(i);
+		}
+		pages.add(current);
+		if (current + 1 <= last) {
+			pages.add(current + 1);
+		}
+		pages.add(last);
+		pageButtons = [...pages].sort((a, b) => a - b);
 	});
 
 	let hasNoSelectedItems = $derived(tableContext.selectedItems.size == 0);
@@ -250,6 +260,11 @@
 					id="{tableContext.tableName}-jump-to-page"
 					value={pageValue}
 					oninput={onNumberInput}
+					onfocus={(e) => {
+						// Select the existing value so typing replaces it, instead of
+						// appending to it (typing "5" on a "4" otherwise yields "45").
+						(e.target as HTMLInputElement).select();
+					}}
 					disabled={tableContext.showSelectedOnly}
 				/>
 			</div>

package/dist/Components/Table/Misc/TableViewDropdown.svelte

@@ -32,18 +32,9 @@
 	// strings) and from `UNSAVED_OPTION`.
 	const DEFAULT_OPTION = ' default';
 
-	// Sentinel value for the *transient* "…(unsaved)" option shown while
-	// the table state is dirty. It is deliberately distinct from
-	// `DEFAULT_OPTION` and from every real saved-view id so the transient
-	// option never coincides with a selectable option: selecting any real
-	// option (Default included) from a dirty state is then always seen as
-	// a genuine change by the underlying select, so the handler fires.
-	const UNSAVED_OPTION = ' unsaved';
-
 	// The view-state slice for `kind`, read live from the context.
 	const activeView = $derived(tableContext._viewState.activeView(kind));
 	const savedViews = $derived(tableContext._viewState.savedViews(kind));
-	const isDirty = $derived(tableContext._viewState.isDirty(kind));
 
 	// Dropdown label: 'Default' / 'Custom (unsaved)' / '<name>' / '<name>
 	// (unsaved)'. Used as the displayed value of the select so it reflects
@@ -68,19 +59,18 @@
 		...savedViews.map((view) => ({ label: view.name, value: view.id })),
 	]);
 
-	// The value handed to `SingleSelect`. `SingleSelect` displays
-	// `value.label` directly (via its `selection` snippet), so when the
-	// state is dirty we feed it a transient option carrying the
-	// "…(unsaved)" `dropdownLabel` and the `UNSAVED_OPTION` sentinel
-	// value - this shows the dirty label WITHOUT having to inject it into
-	// `options`, so Default + saved views all stay selectable. When the
-	// state is clean the value is the matching real option so it
-	// highlights correctly in the list.
-	const selectedOption: SelectOption<string> = $derived(
-		isDirty
-			? { label: dropdownLabel, value: UNSAVED_OPTION }
-			: (options.find((o) => o.value === activeValue) ?? options[0])
-	);
+	// The value handed to `SingleSelect`. The `value` is always the active
+	// option's real value (the Default sentinel or a saved-view id), so it
+	// matches an entry in `options` and `SingleSelect` keeps the selection
+	// rendered. The `label` is `dropdownLabel`, which already encodes the
+	// dirty state ("…(unsaved)"); `SingleSelect` shows it verbatim via its
+	// `selection` snippet. An earlier approach fed a transient value that
+	// was absent from `options`, which made svelecte drop the selection
+	// and fall back to its placeholder.
+	const selectedOption: SelectOption<string> = $derived({
+		label: dropdownLabel,
+		value: activeValue,
+	});
 
 	/** Apply the option the user picked from the dropdown. */
 	function selectOption(option: SelectOption<string> | null): void {

package/dist/Components/Table/Types/Context/TableContext.svelte.js

@@ -37,6 +37,31 @@ const LAYOUT_PERSIST_DEBOUNCE_MS = 250;
  * auto-persist effects behave consistently.
  */
 const FILTER_PERSIST_DEBOUNCE_MS = 250;
+/**
+ * `JSON.stringify` with object keys sorted recursively, so two
+ * structurally-equal values produce an identical string regardless of
+ * key insertion order. Array element order is preserved (it is
+ * significant for `columnOrder` and pinning entries).
+ *
+ * Used for the layout / filter dirty comparison: a baseline parsed from a
+ * backend JSON column has arbitrary key order, while `_captureLayout` /
+ * `_captureFilter` build their objects in a fixed order - a plain
+ * `JSON.stringify` compare would then report a false "dirty" the moment a
+ * saved view is applied.
+ */
+function stableStringify(value) {
+    if (value === null || typeof value !== 'object') {
+        return JSON.stringify(value) ?? 'null';
+    }
+    if (Array.isArray(value)) {
+        return `[${value.map(stableStringify).join(',')}]`;
+    }
+    const record = value;
+    return `{${Object.keys(record)
+        .sort()
+        .map((key) => `${JSON.stringify(key)}:${stableStringify(record[key])}`)
+        .join(',')}}`;
+}
 /**
  * The complete set of filter-mode operator strings scoria recognises -
  * the union of every `StringFilterMode` and `NumberDateFilterMode`
@@ -412,13 +437,14 @@ export class TableContext {
                 this._layoutPersistTimer = undefined;
                 this._preferences.persistLayout(snapshot);
                 // Dirty tracking: the layout is dirty when it diverges
-                // from the active view's baseline. `_captureLayout`
-                // builds its object deterministically, so a stable
-                // `JSON.stringify` comparison is sufficient. When no
-                // baseline has been captured yet (should not happen
-                // past boot) treat the layout as clean.
+                // from the active view's baseline. The baseline can be a
+                // layout parsed from a backend JSON column (arbitrary key
+                // order), so the comparison must be key-order-insensitive
+                // - a plain `JSON.stringify` compare flagged every applied
+                // saved view as dirty. When no baseline has been captured
+                // yet (should not happen past boot) treat it as clean.
                 const differs = this._viewBaseline !== undefined &&
-                    JSON.stringify(snapshot) !== JSON.stringify(this._viewBaseline);
+                    stableStringify(snapshot) !== stableStringify(this._viewBaseline);
                 this._viewState.markDirty('layout', differs);
                 this._persistActiveView();
             }, LAYOUT_PERSIST_DEBOUNCE_MS);
@@ -449,13 +475,13 @@ export class TableContext {
                 this._filterPersistTimer = undefined;
                 this._preferences.persistFilter(snapshot);
                 // Dirty tracking: the filter is dirty when it diverges from
-                // the active filter view's baseline. `_captureFilter` builds
-                // its object deterministically (sorted entries / sorted mode
-                // keys), so a stable `JSON.stringify` comparison is
-                // sufficient. When no baseline has been captured yet (should
-                // not happen past boot) treat the filter as clean.
+                // the active filter view's baseline. The baseline can be a
+                // filter parsed from a backend JSON column (arbitrary key
+                // order), so the comparison is key-order-insensitive via
+                // `stableStringify`. When no baseline has been captured yet
+                // (should not happen past boot) treat the filter as clean.
                 const differs = this._filterBaseline !== undefined &&
-                    JSON.stringify(snapshot) !== JSON.stringify(this._filterBaseline);
+                    stableStringify(snapshot) !== stableStringify(this._filterBaseline);
                 this._viewState.markDirty('filter', differs);
                 this._persistActiveFilterView();
             }, FILTER_PERSIST_DEBOUNCE_MS);

package/dist/Components/Table/Types/DataRepository/BuiltInRemoteRepository.svelte.d.ts

@@ -68,8 +68,11 @@ export declare class BuiltInRemoteRepository<TRow extends object> extends TableD
     readonly setFilterMode: (id: string, mode: FilterMode) => void;
     readonly filterBy: (id: string, value: unknown) => void;
     readonly resetFilters: () => void;
+    /** Jumps to the given 1-based page number, clamped at >= 1. */
     readonly setPage: (page: number) => void;
+    /** Advances to the next page. */
     readonly nextPage: () => void;
+    /** Returns to the previous page, clamped at >= 1. */
     readonly prevPage: () => void;
     readonly setPageSize: (size: number | string) => void;
     readonly updateSorting: (next: SortingState | ((prev: SortingState) => SortingState)) => void;
@@ -121,8 +124,11 @@ export declare class CustomRemoteRepository<TRow extends object> extends TableDa
     readonly setFilterMode: (id: string, mode: FilterMode) => void;
     readonly filterBy: (id: string, value: unknown) => void;
     readonly resetFilters: () => void;
+    /** Jumps to the given 1-based page number, clamped at >= 1. */
     readonly setPage: (page: number) => void;
+    /** Advances to the next page. */
     readonly nextPage: () => void;
+    /** Returns to the previous page, clamped at >= 1. */
     readonly prevPage: () => void;
     readonly setPageSize: (size: number | string) => void;
     readonly updateSorting: (next: SortingState | ((prev: SortingState) => SortingState)) => void;

package/dist/Components/Table/Types/DataRepository/BuiltInRemoteRepository.svelte.js

@@ -118,15 +118,29 @@ export class BuiltInRemoteRepository extends TableDataRepository {
         this._filtering = [];
         this.scheduleReload();
     };
+    /** Jumps to the given 1-based page number, clamped at >= 1. */
     setPage = (page) => {
-        this.paginationState = { ...this.paginationState, pageIndex: page };
+        this.paginationState = {
+            ...this.paginationState,
+            pageIndex: Math.max(0, page - 1),
+        };
         this.scheduleReload({ immediate: true });
     };
+    /** Advances to the next page. */
     nextPage = () => {
-        this.setPage(this.paginationState.pageIndex + 1);
+        this.paginationState = {
+            ...this.paginationState,
+            pageIndex: this.paginationState.pageIndex + 1,
+        };
+        this.scheduleReload({ immediate: true });
     };
+    /** Returns to the previous page, clamped at >= 1. */
     prevPage = () => {
-        this.setPage(Math.max(0, this.paginationState.pageIndex - 1));
+        this.paginationState = {
+            ...this.paginationState,
+            pageIndex: Math.max(0, this.paginationState.pageIndex - 1),
+        };
+        this.scheduleReload({ immediate: true });
     };
     setPageSize = (size) => {
         const parsed = typeof size === 'number' ? size : Number.parseInt(size, 10);
@@ -379,15 +393,29 @@ export class CustomRemoteRepository extends TableDataRepository {
         this._filtering = [];
         void this.reload();
     };
+    /** Jumps to the given 1-based page number, clamped at >= 1. */
     setPage = (page) => {
-        this.paginationState = { ...this.paginationState, pageIndex: page };
+        this.paginationState = {
+            ...this.paginationState,
+            pageIndex: Math.max(0, page - 1),
+        };
         void this.reload();
     };
+    /** Advances to the next page. */
     nextPage = () => {
-        this.setPage(this.paginationState.pageIndex + 1);
+        this.paginationState = {
+            ...this.paginationState,
+            pageIndex: this.paginationState.pageIndex + 1,
+        };
+        void this.reload();
     };
+    /** Returns to the previous page, clamped at >= 1. */
     prevPage = () => {
-        this.setPage(Math.max(0, this.paginationState.pageIndex - 1));
+        this.paginationState = {
+            ...this.paginationState,
+            pageIndex: Math.max(0, this.paginationState.pageIndex - 1),
+        };
+        void this.reload();
     };
     setPageSize = (size) => {
         const parsed = typeof size === 'number' ? size : Number.parseInt(size, 10);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lavalogic/scoria",
   "description": "Svelte components used for the FloWMS Web Frontend",
-  "version": "0.38.5",
+  "version": "0.38.7",
   "publishConfig": {
     "access": "restricted"
   },