@schukai/monster 4.89.0 → 4.91.0

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 
 
+## [4.91.0] - 2026-01-12
+
+### Add Features
+
+- Update records and improve diff functionality [#372](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/372)
+- Add new dynamic form element with repeatable fields [#372](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/372)
+
+
+
+## [4.90.0] - 2026-01-11
+
+### Add Features
+
+- Enhance origin values management in SaveButton component
+
+
+
 ## [4.89.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.89.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.91.0"}

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

@@ -32,7 +32,7 @@ import {
 	findElementWithSelectorUpwards,
 	getDocument,
 } from "../../dom/util.mjs";
-import { isString, isArray } from "../../types/is.mjs";
+import { isString, isArray, isObject } from "../../types/is.mjs";
 import { Observer } from "../../types/observer.mjs";
 import { TokenList } from "../../types/tokenlist.mjs";
 import { clone } from "../../util/clone.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
@@ -72,6 +74,7 @@ const badgeElementSymbol = Symbol("badgeElement");
 const saveInFlightSymbol = Symbol("saveInFlight");
 const pendingResetSymbol = Symbol("pendingReset");
 const fetchInFlightSymbol = Symbol("fetchInFlight");
+const originInitializedSymbol = Symbol("originInitialized");
 
 /**
  * A save button component
@@ -133,7 +136,7 @@ class SaveButton extends CustomElement {
 				selector: null,
 			},
 
-			changes: "0",
+			changes: "",
 
 			ignoreChanges: [],
 
@@ -192,22 +195,21 @@ 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,
-						);
-						updateChangesState.call(self);
-					}
+					setOriginValues.call(
+						self,
+						clone(self[datasourceLinkedElementSymbol].data),
+					);
+					updateChangesState.call(self);
 				});
 				element.addEventListener("monster-datasource-error", () => {
 					self[fetchInFlightSymbol] = false;
@@ -219,22 +221,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 +258,55 @@ 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;
+	}
+	this[originInitializedSymbol] = true;
+}
+
+/**
+ * @private
+ * @return {void}
+ */
+function clearOriginValues() {
+	const datasource = this[datasourceLinkedElementSymbol];
+	if (datasource) {
+		datasource[originValuesSymbol] = null;
+	}
+	this[originInitializedSymbol] = false;
+}
+
 function getTranslations() {
 	const locale = getLocaleOfDocument();
 	switch (locale.language) {
@@ -321,19 +375,9 @@ function initControlReferences() {
 
 	if (this[stateButtonElementSymbol]) {
 		queueMicrotask(() => {
-			const states = {
-				changed: new State(
-					"changed",
-					'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cloud-arrow-up" viewBox="0 0 16 16">' +
-						'<path fill-rule="evenodd" d="M7.646 5.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708z"/>' +
-						'<path d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383m.653.757c-.757.653-1.153 1.44-1.153 2.056v.448l-.445.049C2.064 6.805 1 7.952 1 9.318 1 10.785 2.23 12 3.781 12h8.906C13.98 12 15 10.988 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3a4.53 4.53 0 0 0-2.941 1.1z"/>' +
-						"</svg>",
-				),
-			};
-
+			ensureChangedState.call(this);
 			this[stateButtonElementSymbol].removeState();
 			this[stateButtonElementSymbol].setOption("disabled", "disabled");
-			this[stateButtonElementSymbol].setOption("states", states);
 			this[stateButtonElementSymbol].setOption(
 				"labels.button",
 				this.getOption("labels.button"),
@@ -356,16 +400,18 @@ function initEventHandler() {
 			this[saveInFlightSymbol] = true;
 			this[stateButtonElementSymbol].setOption("disabled", true);
 
-			flushLinkedForms.call(this)
+			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);
-					this.setOption("changes", 0);
+					this.setOption("changes", "");
 					this.setOption(
 						"classes.badge",
 						new TokenList(this.getOption("classes.badge"))
@@ -381,7 +427,7 @@ function initEventHandler() {
 					this[saveInFlightSymbol] = false;
 					if (this[pendingResetSymbol]) {
 						this[pendingResetSymbol] = false;
-						this[originValuesSymbol] = null;
+						clearOriginValues.call(this);
 					}
 				});
 		});
@@ -463,17 +509,33 @@ 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);
+
+	if (
+		this[originInitializedSymbol] !== true ||
+		this[fetchInFlightSymbol] === true ||
+		originValues === null ||
+		originValues === undefined ||
+		(isObject(originValues) &&
+			Object.keys(originValues).length === 0 &&
+			isObject(currentValues) &&
+			Object.keys(currentValues).length === 0)
+	) {
+		this.setOption("changes", "");
+		this.setOption(
+			"classes.badge",
+			new TokenList(this.getOption("classes.badge")).add("hidden").toString(),
+		);
+		return;
+	}
+	let result = diff(originValues, currentValues);
 
 	if (
 		this.getOption("logLevel") === "debug" ||
 		location.search.includes("logLevel=debug")
 	) {
 		console.groupCollapsed("SaveButton");
-		console.log(
-			"originValues",
-			JSON.parse(JSON.stringify(this[originValuesSymbol])),
-		);
+		console.log("originValues", JSON.parse(JSON.stringify(originValues)));
 		console.log("currentValues", JSON.parse(JSON.stringify(currentValues)));
 		console.log("result of diff", result);
 		console.log("ignoreChanges", ignoreChanges);
@@ -521,10 +583,12 @@ function updateChangesState() {
 		}
 	}
 
-	if (isArray(result) && result.length > 0) {
+	const changeCount = countChanges(result);
+	if (changeCount > 0) {
+		ensureChangedState.call(this);
 		this[stateButtonElementSymbol].setState("changed");
 		this[stateButtonElementSymbol].setOption("disabled", false);
-		this.setOption("changes", result.length);
+		this.setOption("changes", changeCount);
 		this.setOption(
 			"classes.badge",
 			new TokenList(this.getOption("classes.badge"))
@@ -534,7 +598,7 @@ function updateChangesState() {
 	} else {
 		this[stateButtonElementSymbol].removeState();
 		this[stateButtonElementSymbol].setOption("disabled", true);
-		this.setOption("changes", 0);
+		this.setOption("changes", "");
 		this.setOption(
 			"classes.badge",
 			new TokenList(this.getOption("classes.badge")).add("hidden").toString(),
@@ -542,6 +606,117 @@ function updateChangesState() {
 	}
 }
 
+/**
+ * @private
+ * @param {Array} changes
+ * @return {number}
+ */
+function countChanges(changes) {
+	if (!isArray(changes) || changes.length === 0) {
+		return 0;
+	}
+
+	let total = 0;
+	for (const change of changes) {
+		if (change?.operator === "add") {
+			const nonEmpty = countNonEmptyLeafValues(change?.second?.value);
+			total += Math.max(1, nonEmpty);
+			continue;
+		}
+
+		if (change?.operator === "remove") {
+			const nonEmpty = countNonEmptyLeafValues(change?.first?.value);
+			total += Math.max(1, nonEmpty);
+			continue;
+		}
+
+		total += 1;
+	}
+
+	return total;
+}
+
+/**
+ * @private
+ * @param {*} value
+ * @return {number}
+ */
+function countNonEmptyLeafValues(value) {
+	if (value === null || value === undefined) {
+		return 0;
+	}
+
+	if (value instanceof Date) {
+		return 1;
+	}
+
+	if (typeof value === "string") {
+		return value.trim() === "" ? 0 : 1;
+	}
+
+	if (typeof value === "number") {
+		return Number.isFinite(value) ? 1 : 0;
+	}
+
+	if (typeof value === "boolean") {
+		return 1;
+	}
+
+	if (isArray(value)) {
+		if (value.length === 0) {
+			return 0;
+		}
+		return value.reduce((sum, item) => sum + countNonEmptyLeafValues(item), 0);
+	}
+
+	if (isObject(value)) {
+		const keys = Object.keys(value);
+		if (keys.length === 0) {
+			return 0;
+		}
+		return keys.reduce(
+			(sum, key) => sum + countNonEmptyLeafValues(value[key]),
+			0,
+		);
+	}
+
+	return 1;
+}
+
+/**
+ * @private
+ * @return {void}
+ */
+function ensureChangedState() {
+	const stateButton = this[stateButtonElementSymbol];
+	if (!stateButton || typeof stateButton.getOption !== "function") {
+		return;
+	}
+
+	if (stateButton.getOption("states.changed")) {
+		return;
+	}
+
+	const states = Object.assign({}, stateButton.getOption("states") || {}, {
+		changed: getChangedState(),
+	});
+	stateButton.setOption("states", states);
+}
+
+/**
+ * @private
+ * @return {State}
+ */
+function getChangedState() {
+	return new State(
+		"changed",
+		'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cloud-arrow-up" viewBox="0 0 16 16">' +
+			'<path fill-rule="evenodd" d="M7.646 5.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708z"/>' +
+			'<path d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383m.653.757c-.757.653-1.153 1.44-1.153 2.056v.448l-.445.049C2.064 6.805 1 7.952 1 9.318 1 10.785 2.23 12 3.781 12h8.906C13.98 12 15 10.988 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3a4.53 4.53 0 0 0-2.941 1.1z"/>' +
+			"</svg>",
+	);
+}
+
 /**
  * @param {Object} options
  * @deprecated 2024-12-31