@schukai/monster 4.122.1 → 4.123.0

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 
 
+## [4.123.0] - 2026-02-17
+
+### Add Features
+
+- Optimize tree menu entry visibility handling
+- Enhance tree menu entry state management for improved performance and consistency
+
+
+
+## [4.122.2] - 2026-02-16
+
+### Bug Fixes
+
+- Improve pagination logic and add corresponding tests
+
+
+
 ## [4.122.1] - 2026-02-13
 
 ### Bug Fixes

package/package.json

@@ -1 +1 @@
-{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.4","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.122.1"}
+{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.4","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.123.0"}

package/source/components/datatable/pagination.mjs

@@ -691,8 +691,16 @@ function handleDataSourceChanges() {
  * @return  {object}
  */
 function buildPagination(current, max) {
-	current = parseInt(current, 10);
-	max = parseInt(max, 10);
+	const parsedCurrent = Number.parseInt(current, 10);
+	const parsedMax = Number.parseInt(max, 10);
+
+	max = Number.isFinite(parsedMax) && parsedMax >= 1 ? parsedMax : 1;
+	current = Number.isFinite(parsedCurrent) ? parsedCurrent : 1;
+	if (current < 1) {
+		current = 1;
+	} else if (current > max) {
+		current = max;
+	}
 
 	let prev = current === 1 ? null : current - 1;
 	let next = current === max ? null : current + 1;
@@ -1229,7 +1237,7 @@ function getTemplate() {
                             data-monster-attributes="
             class path:pagination.prevClass | prefix: previous,
             data-page-no path:pagination.prevNo,
-            href path:pagination.prevHref | prefix: #"
+            href path:pagination.prevHref"
                             data-monster-replace="path:labels.previous">Previous</a></li>
                     <li part="summary" data-monster-role="pagination-summary">
                         <span data-monster-replace="path:pagination.summary"></span>
@@ -1239,7 +1247,7 @@ function getTemplate() {
                             part="next-link"
                             data-monster-attributes="class path:pagination.nextClass | prefix: next,
             data-page-no path:pagination.nextNo,
-        href path:pagination.nextHref | prefix: #"
+        href path:pagination.nextHref"
                             data-monster-replace="path:labels.next">Next</a></li>
                 </ul>
             </nav>

package/source/components/tree-menu/html-tree-menu.mjs

@@ -124,6 +124,9 @@ class HtmlTreeMenu extends CustomElement {
 				onlazyloaded: null,
 				onlazyerror: null,
 			},
+			updater: {
+				batchUpdates: true,
+			},
 			entries: [],
 		});
 	}
@@ -687,50 +690,46 @@ function applyEntryState(index, state, event) {
 		event,
 	});
 
-	this.setOption("entries." + index + ".state", state);
-	const newVisibility = state === "open" ? "visible" : "hidden";
+	const entries = this.getOption("entries", []);
+	const nextEntries = [...entries];
+	let changed = false;
 
-	const entryNode = this.shadowRoot.querySelector(
-		"[data-monster-insert-reference=entries-" + index + "]",
-	);
+	nextEntries[index] = Object.assign({}, entry, {
+		state,
+	});
+	changed = true;
+	const newVisibility = state === "open" ? "visible" : "hidden";
+	const targetIntend = entry.intend;
+	const end = getSubtreeEndIndex(entries, index);
+	const childIntend = targetIntend + 1;
 
-	if (entryNode?.hasAttribute(ATTRIBUTE_INTEND)) {
-		const intend = entryNode.getAttribute(ATTRIBUTE_INTEND);
-		let ref = entryNode.nextElementSibling;
-		const childIntend = parseInt(intend) + 1;
+	for (let i = index + 1; i < end; i += 1) {
+		const childEntry = entries[i];
 
-		const cmp = (a, b) => {
-			if (state === "open") {
-				return a === b;
+		if (state === "open") {
+			if (childEntry.intend !== childIntend) {
+				continue;
 			}
-
-			return a >= b;
-		};
-
-		while (ref?.hasAttribute(ATTRIBUTE_INTEND)) {
-			const refIntend = ref.getAttribute(ATTRIBUTE_INTEND);
-
-			if (!cmp(Number.parseInt(refIntend), childIntend)) {
-				if (refIntend === intend) {
-					break;
-				}
-				ref = ref.nextElementSibling;
+			if (childEntry.visibility === newVisibility) {
 				continue;
 			}
-
-			const refIndex = ref
-				.getAttribute(ATTRIBUTE_UPDATER_INSERT_REFERENCE)
-				.split("-")
-				.pop();
-
-			this.setOption("entries." + refIndex + ".visibility", newVisibility);
-
-			if (state === "close") {
-				this.setOption("entries." + refIndex + ".state", "close");
+		} else {
+			if (childEntry.visibility === newVisibility) {
+				continue;
 			}
+		}
 
-			ref = ref.nextElementSibling;
+		const updates = { visibility: newVisibility };
+		if (state === "close" && childEntry["has-children"]) {
+			updates.state = "close";
 		}
+
+		nextEntries[i] = Object.assign({}, childEntry, updates);
+		changed = true;
+	}
+
+	if (changed === true) {
+		this.setOption("entries", nextEntries);
 	}
 }
 
@@ -751,16 +750,29 @@ function setEntryVisibility(value, visibility) {
 		return;
 	}
 
-	this.setOption("entries." + index + ".visibility", visibility);
-	const intend = target.intend;
-	for (let i = index + 1; i < entries.length; i += 1) {
-		if (entries[i].intend <= intend) {
-			break;
-		}
+	const nextEntries = [...entries];
+	let changed = false;
+	if (target.visibility !== visibility) {
+		nextEntries[index] = Object.assign({}, target, {
+			visibility,
+		});
+		changed = true;
+	}
+	const end = getSubtreeEndIndex(entries, index);
+	for (let i = index + 1; i < end; i += 1) {
 		if (visibility === "hidden") {
-			this.setOption("entries." + i + ".visibility", "hidden");
+			if (entries[i].visibility !== "hidden") {
+				nextEntries[i] = Object.assign({}, entries[i], {
+					visibility: "hidden",
+				});
+				changed = true;
+			}
 		}
 	}
+
+	if (changed === true) {
+		this.setOption("entries", nextEntries);
+	}
 }
 
 /**
@@ -804,6 +816,9 @@ function collapseEntry(value) {
 	if (!entry || entry["has-children"] === false) {
 		return;
 	}
+	if (entry.state === "close") {
+		return;
+	}
 
 	const doAction = getAction.call(this, ["oncollapse", "close"]);
 	if (isFunction(doAction)) {
@@ -814,15 +829,38 @@ function collapseEntry(value) {
 		index,
 	});
 
-	this.setOption("entries." + index + ".state", "close");
-
 	const entries = this.getOption("entries", []);
+	const nextEntries = [...entries];
+	let changed = false;
+	nextEntries[index] = Object.assign({}, entries[index], {
+		state: "close",
+	});
+	changed = true;
 	const end = getSubtreeEndIndex(entries, index);
 	for (let i = index + 1; i < end; i += 1) {
-		this.setOption("entries." + i + ".visibility", "hidden");
-		if (entries[i]["has-children"]) {
-			this.setOption("entries." + i + ".state", "close");
+		const childEntry = entries[i];
+		const hasChildren = childEntry["has-children"] === true;
+		if (
+			childEntry.visibility === "hidden" &&
+			(!hasChildren || childEntry.state === "close")
+		) {
+			continue;
+		}
+
+		const updates = {
+			visibility: "hidden",
+		};
+		if (hasChildren && childEntry.state !== "close") {
+			updates.state = "close";
 		}
+
+		const updatedChild = Object.assign({}, childEntry, updates);
+		nextEntries[i] = updatedChild;
+		changed = true;
+	}
+
+	if (changed === true) {
+		this.setOption("entries", nextEntries);
 	}
 }
 
@@ -990,16 +1028,37 @@ function expandEntryByIndex(index) {
 		index,
 	});
 
-	this.setOption("entries." + index + ".state", "open");
-	this.setOption("entries." + index + ".visibility", "visible");
-
 	const entries = this.getOption("entries", []);
+	const nextEntries = [...entries];
+	let changed = false;
+	nextEntries[index] = Object.assign({}, entry, {
+		state: "open",
+		visibility: "visible",
+	});
+	changed = true;
 	const end = getSubtreeEndIndex(entries, index);
 	for (let i = index + 1; i < end; i += 1) {
-		this.setOption("entries." + i + ".visibility", "visible");
-		if (entries[i]["has-children"]) {
-			this.setOption("entries." + i + ".state", "open");
+		const childEntry = entries[i];
+		const changedVisibility = childEntry.visibility !== "visible";
+		const changedState =
+			childEntry["has-children"] && childEntry.state !== "open";
+
+		if (!changedVisibility && !changedState) {
+			continue;
 		}
+
+		const updatedChild = Object.assign({}, childEntry, {
+			visibility: "visible",
+		});
+		if (childEntry["has-children"]) {
+			updatedChild.state = "open";
+		}
+		nextEntries[i] = updatedChild;
+		changed = true;
+	}
+
+	if (changed === true) {
+		this.setOption("entries", nextEntries);
 	}
 }
 

package/source/components/tree-menu/tree-menu.mjs

@@ -173,6 +173,10 @@ class TreeMenu extends CustomElement {
 				},
 			},
 
+			updater: {
+				batchUpdates: true,
+			},
+
 			data: [],
 			entries: [],
 		});
@@ -387,7 +391,14 @@ function initEventHandler() {
 			doAction.call(this, this.getOption("entries." + index), index);
 		}
 
-		this.setOption("entries." + index + ".state", newState);
+		const entries = this.getOption("entries", []);
+		const nextEntries = [...entries];
+		let changed = false;
+
+		nextEntries[index] = Object.assign({}, currentEntry, {
+			state: newState,
+		});
+		changed = true;
 		const newVisibility = newState === "open" ? "visible" : "hidden";
 
 		if (container.hasAttribute(ATTRIBUTE_INTEND)) {
@@ -418,16 +429,25 @@ function initEventHandler() {
 					.getAttribute(ATTRIBUTE_UPDATER_INSERT_REFERENCE)
 					.split("-")
 					.pop();
-
-				this.setOption("entries." + refIndex + ".visibility", newVisibility);
-
-				if (newState === "close") {
-					this.setOption("entries." + refIndex + ".state", "close");
+				const childIndex = Number.parseInt(refIndex);
+				const childEntry = entries[childIndex];
+				if (!childEntry) {
+					ref = ref.nextElementSibling;
+					continue;
 				}
 
+				nextEntries[childIndex] = Object.assign({}, childEntry, {
+					visibility: newVisibility,
+					...(newState === "close" ? { state: "close" } : {}),
+				});
+				changed = true;
 				ref = ref.nextElementSibling;
 			}
 		}
+
+		if (changed === true) {
+			this.setOption("entries", nextEntries);
+		}
 	};
 
 	const types = this.getOption("toggleEventType", ["click"]);

package/test/cases/components/datatable/pagination.mjs

@@ -0,0 +1,99 @@
+
+import * as chai from 'chai';
+import {chaiDom} from "../../../util/chai-dom.mjs";
+import {initJSDOM} from "../../../util/jsdom.mjs";
+
+let expect = chai.expect;
+chai.use(chaiDom);
+
+let Pagination;
+
+describe('Pagination', function () {
+
+    before(function (done) {
+        initJSDOM().then(() => {
+            import("../../../../source/components/datatable/pagination.mjs").then((m) => {
+                Pagination = m['Pagination'];
+                done();
+            }).catch(e => done(e));
+        });
+    });
+
+    afterEach(() => {
+        let mocks = document.getElementById('mocks');
+        mocks.innerHTML = "";
+    });
+
+    it('normalizes NaN and avoids NaN hrefs', function (done) {
+        let mocks = document.getElementById('mocks');
+        const control = document.createElement('monster-pagination');
+        mocks.appendChild(control);
+
+        setTimeout(() => {
+            try {
+                control.setPaginationState({currentPage: Number.NaN, totalPages: Number.NaN});
+
+                const pagination = control.getOption('pagination');
+
+                expect(pagination.current).to.equal(1);
+                expect(pagination.prevHref).to.equal('#');
+                expect(pagination.nextHref).to.equal('#');
+
+                const hrefs = [pagination.prevHref, pagination.nextHref, ...pagination.items.map(i => i.href)];
+                hrefs.forEach((href) => {
+                    expect(href).to.not.contain('NaN');
+                    expect(href.startsWith('##')).to.equal(false);
+                });
+            } catch (e) {
+                return done(e);
+            }
+
+            done();
+        }, 0);
+    });
+
+    it('clamps current page and does not double-prefix hash', function (done) {
+        let mocks = document.getElementById('mocks');
+        const control = document.createElement('monster-pagination');
+        mocks.appendChild(control);
+
+        setTimeout(() => {
+            try {
+                control.setPaginationState({currentPage: 10, totalPages: 3});
+
+                const pagination = control.getOption('pagination');
+                expect(pagination.current).to.equal(3);
+                expect(pagination.nextHref).to.equal('#');
+                expect(pagination.prevHref).to.equal('#page-2');
+
+                setTimeout(() => {
+                    try {
+                        const prevLink = control.shadowRoot.querySelector(
+                            'a[data-monster-role=pagination-prev]'
+                        );
+                        const nextLink = control.shadowRoot.querySelector(
+                            'a[data-monster-role=pagination-next]'
+                        );
+
+                        expect(prevLink.getAttribute('href')).to.equal('#page-2');
+                        expect(nextLink.getAttribute('href')).to.equal('#');
+                    } catch (e) {
+                        return done(e);
+                    }
+
+                    done();
+                }, 0);
+            } catch (e) {
+                return done(e);
+            }
+        }, 0);
+    });
+
+    describe('document.createElement', function () {
+        it('should instance of Pagination', function () {
+            expect(document.createElement('monster-pagination')).is.instanceof(Pagination);
+        });
+    });
+
+});
+

package/test/web/import.js

@@ -22,6 +22,7 @@ import "../cases/components/host/overlay.mjs";
 import "../cases/components/host/util.mjs";
 import "../cases/components/host/details.mjs";
 import "../cases/components/datatable/writeback-sanitizer.mjs";
+import "../cases/components/datatable/pagination.mjs";
 import "../cases/text/formatter.mjs";
 import "../cases/text/generate-range-comparison-expression.mjs";
 import "../cases/text/util.mjs";