@schukai/monster 4.88.0 → 4.90.0

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 
 
+## [4.90.0] - 2026-01-11
+
+### Add Features
+
+- Enhance origin values management in SaveButton component
+
+
+
+## [4.89.0] - 2026-01-11
+
+### Add Features
+
+- Enhance root node retrieval for linked forms
+
+
+
 ## [4.88.0] - 2026-01-11
 
 ### Add Features

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.88.0"}
+{"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.90.0"}

package/source/components/datatable/save-button.mjs

@@ -62,7 +62,9 @@ const stateButtonElementSymbol = Symbol("stateButtonElement");
  * @private
  * @type {symbol}
  */
-const originValuesSymbol = Symbol("originValues");
+const originValuesSymbol = Symbol.for(
+	"@schukai/monster/components/datatable/save-button@@originValues",
+);
 
 /**
  * @private
@@ -192,19 +194,20 @@ class SaveButton extends CustomElement {
 			}
 
 			if (element instanceof RestDatasource) {
-				element.addEventListener("monster-datasource-fetch", (event) => {
+				element.addEventListener("monster-datasource-fetch", () => {
 					if (self[saveInFlightSymbol]) {
 						self[pendingResetSymbol] = true;
 						return;
 					}
 					self[fetchInFlightSymbol] = true;
-					self[originValuesSymbol] = null;
+					clearOriginValues.call(self);
 				});
 				element.addEventListener("monster-datasource-fetched", () => {
 					self[fetchInFlightSymbol] = false;
-					if (!self[originValuesSymbol]) {
-						self[originValuesSymbol] = clone(
-							self[datasourceLinkedElementSymbol].data,
+					if (!getOriginValues.call(self)) {
+						setOriginValues.call(
+							self,
+							clone(self[datasourceLinkedElementSymbol].data),
 						);
 						updateChangesState.call(self);
 					}
@@ -219,22 +222,25 @@ class SaveButton extends CustomElement {
 				new Observer(handleDataSourceChanges.bind(this)),
 			);
 
-			self[originValuesSymbol] = null;
+			clearOriginValues.call(self);
 
 			element.datasource.attachObserver(
 				new Observer(function () {
 					if (self[fetchInFlightSymbol] === true) {
 						return;
 					}
-					if (!self[originValuesSymbol]) {
-						self[originValuesSymbol] = clone(
-							self[datasourceLinkedElementSymbol].data,
+					if (!getOriginValues.call(self)) {
+						setOriginValues.call(
+							self,
+							clone(self[datasourceLinkedElementSymbol].data),
 						);
 					}
 
 					updateChangesState.call(self);
 				}),
 			);
+
+			syncOriginValues.call(self);
 		}
 
 		this.attachObserver(
@@ -253,6 +259,53 @@ class SaveButton extends CustomElement {
 	}
 }
 
+/**
+ * @private
+ */
+function syncOriginValues() {
+	if (getOriginValues.call(this)) {
+		return;
+	}
+	const data = this[datasourceLinkedElementSymbol]?.data;
+	if (!data) {
+		return;
+	}
+	setOriginValues.call(this, clone(data));
+	updateChangesState.call(this);
+}
+
+/**
+ * @private
+ * @return {*}
+ */
+function getOriginValues() {
+	const datasource = this[datasourceLinkedElementSymbol];
+	return datasource ? datasource[originValuesSymbol] : null;
+}
+
+/**
+ * @private
+ * @param {*} value
+ * @return {void}
+ */
+function setOriginValues(value) {
+	const datasource = this[datasourceLinkedElementSymbol];
+	if (datasource) {
+		datasource[originValuesSymbol] = value;
+	}
+}
+
+/**
+ * @private
+ * @return {void}
+ */
+function clearOriginValues() {
+	const datasource = this[datasourceLinkedElementSymbol];
+	if (datasource) {
+		datasource[originValuesSymbol] = null;
+	}
+}
+
 function getTranslations() {
 	const locale = getLocaleOfDocument();
 	switch (locale.language) {
@@ -359,9 +412,10 @@ function initEventHandler() {
 			flushLinkedForms.call(this)
 				.then(() => this[datasourceLinkedElementSymbol].write())
 				.then(() => {
-					this[originValuesSymbol] = null;
-					this[originValuesSymbol] = clone(
-						this[datasourceLinkedElementSymbol].data,
+					clearOriginValues.call(this);
+					setOriginValues.call(
+						this,
+						clone(this[datasourceLinkedElementSymbol].data),
 					);
 					this[stateButtonElementSymbol].removeState();
 					this[stateButtonElementSymbol].setOption("disabled", true);
@@ -381,7 +435,7 @@ function initEventHandler() {
 					this[saveInFlightSymbol] = false;
 					if (this[pendingResetSymbol]) {
 						this[pendingResetSymbol] = false;
-						this[originValuesSymbol] = null;
+						clearOriginValues.call(this);
 					}
 				});
 		});
@@ -399,12 +453,22 @@ function flushLinkedForms() {
 	}
 
 	const roots = new Set();
-	const root = this.getRootNode?.();
-	if (root && typeof root.querySelectorAll === "function") {
-		roots.add(root);
+	let current = this;
+	while (current) {
+		const root = current.getRootNode?.();
+		if (root && typeof root.querySelectorAll === "function") {
+			roots.add(root);
+		}
+
+		if (root instanceof ShadowRoot) {
+			current = root.host;
+		} else {
+			break;
+		}
 	}
+
 	const doc = getDocument();
-	if (doc && (!root || root !== doc)) {
+	if (doc) {
 		roots.add(doc);
 	}
 
@@ -453,7 +517,8 @@ function flushLinkedForms() {
 function updateChangesState() {
 	const currentValues = this[datasourceLinkedElementSymbol]?.datasource?.get();
 	const ignoreChanges = this.getOption("ignoreChanges");
-	let result = diff(this[originValuesSymbol], currentValues);
+	const originValues = getOriginValues.call(this);
+	let result = diff(originValues, currentValues);
 
 	if (
 		this.getOption("logLevel") === "debug" ||
@@ -462,7 +527,7 @@ function updateChangesState() {
 		console.groupCollapsed("SaveButton");
 		console.log(
 			"originValues",
-			JSON.parse(JSON.stringify(this[originValuesSymbol])),
+			JSON.parse(JSON.stringify(originValues)),
 		);
 		console.log("currentValues", JSON.parse(JSON.stringify(currentValues)));
 		console.log("result of diff", result);