@schukai/monster 4.122.2 → 4.124.0

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 
 
+## [4.124.0] - 2026-02-20
+
+### Add Features
+
+- Enhance login component with behavior options for password reset handling
+
+
+
+## [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

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.2"}
+{"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.124.0"}

package/source/components/form/login.mjs

@@ -218,6 +218,8 @@ class Login extends CustomElement {
 	 * @property {Object} callbacks Optional callback hooks for modifying internal behavior
 	 * @property {Function} callbacks.username A function that receives and can transform the entered username before submission
 	 * @property {Function} callbacks.forgotPassword A function that receives and can transform the entered email before submission
+	 * @property {Object} behavior Behavior options for response handling
+	 * @property {number[]} behavior.passwordResetDisabledStatusCodes HTTP status codes that indicate reset is disabled
 	 * @property {number} digits Number of digits required for second factor or password reset code input
 	 * @property {Object[]} successUrls List of URLs shown after successful login (e.g., home or logout)
 	 * @property {string} successUrls.label Label for the success URL (displayed)
@@ -297,6 +299,10 @@ class Login extends CustomElement {
 				forgotPassword: null,
 			},
 
+			behavior: {
+				passwordResetDisabledStatusCodes: [401],
+			},
+
 			digits: 6,
 
 			successUrls: [
@@ -1484,35 +1490,37 @@ function initEventHandler() {
 		getWindow()
 			.fetch(url, options)
 			.then((response) => {
+				const disabledCodes =
+					this.getOption("behavior.passwordResetDisabledStatusCodes") || [401];
+				const isResetDisabled =
+					disabledCodes.includes(response.status) &&
+					response.headers.has("x-password-reset") &&
+					response.headers.get("x-password-reset").includes("disabled");
+
 				if (response.ok) {
 					const timeoutSuccess = this.getOption("timeoutForSuccess");
 					this[requestLinkButtonSymbol].setState("successful", timeoutSuccess);
 					setTimeout(() => {
 						this.openDigits();
 					}, timeoutSuccess);
+				} else if (isResetDisabled) {
+					this[requestLinkButtonSymbol].setMessage(
+						this.getOption("labels.messagePasswordResetDisabled"),
+					);
+				} else if (response.status === 403) {
+					this[requestLinkButtonSymbol].setMessage(
+						this.getOption("labels.messageForbidden"),
+					);
+				} else if (response.status === 401) {
+					this[requestLinkButtonSymbol].setMessage(
+						this.getOption("labels.messageLoginFailed"),
+					);
 				} else {
-					if (response.status === 403) {
-						this[requestLinkButtonSymbol].setMessage(
-							this.getOption("labels.messageForbidden"),
-						);
-					} else if (response.status === 401) {
-						if (
-							response.headers.has("x-password-reset") &&
-							response.headers.get("x-password-reset").includes("disabled")
-						) {
-							this[requestLinkButtonSymbol].setMessage(
-								this.getOption("labels.messagePasswordResetDisabled"),
-							);
-						} else {
-							this[requestLinkButtonSymbol].setMessage(
-								this.getOption("labels.messageLoginFailed"),
-							);
-						}
-					} else {
-						this[requestLinkButtonSymbol].setMessage(
-							this.getOption("labels.messageSomethingWentWrong"),
-						);
-					}
+					this[requestLinkButtonSymbol].setMessage(
+						this.getOption("labels.messageSomethingWentWrong"),
+					);
+				}
+				if (!response.ok) {
 					this[requestLinkButtonSymbol].showMessage(timeout);
 					this[requestLinkButtonSymbol].setState("failed", timeout);
 				}

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"]);