@schukai/monster 4.83.0 → 4.85.0

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 
 
+## [4.85.0] - 2026-01-08
+
+### Add Features
+
+- Improve spinner visibility control in DatasourceStatus component
+
+
+
+## [4.84.0] - 2026-01-08
+
+### Add Features
+
+- Add initial implementation for issue [#366](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/366) and [#367](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/367) with accompanying HTML and MJS files
+### Bug Fixes
+
+- Enhance message-state-button synchronization for disabled state
+
+
+
 ## [4.83.0] - 2026-01-07
 
 ### 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.83.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.85.0"}

package/source/components/datatable/datatable.mjs

@@ -122,6 +122,11 @@ const copyAllElementSymbol = Symbol("copyAllElement");
  * @type {symbol}
  */
 const resizeObserverSymbol = Symbol("resizeObserver");
+/**
+ * @private
+ * @type {symbol}
+ */
+const suppressColumnConfigSaveSymbol = Symbol("suppressColumnConfigSave");
 
 /**
  * A DataTable
@@ -696,7 +701,11 @@ function updateColumnBar() {
 		});
 	}
 
+	this[suppressColumnConfigSaveSymbol] = true;
 	this[columnBarElementSymbol].setOption("columns", columns);
+	queueMicrotask(() => {
+		this[suppressColumnConfigSaveSymbol] = false;
+	});
 }
 
 /**
@@ -870,7 +879,9 @@ function initEventHandler() {
 			new Observer(() => {
 				updateHeaderFromColumnBar.call(self);
 				updateGrid.call(self);
-				updateConfigColumnBar.call(self);
+				if (!self[suppressColumnConfigSaveSymbol]) {
+					updateConfigColumnBar.call(self);
+				}
 			}),
 		);
 	}

package/source/components/datatable/status.mjs

@@ -45,6 +45,7 @@ const errorElementSymbol = Symbol.for("errorElement");
  * @type {symbol}
  */
 const datasourceLinkedElementSymbol = Symbol("datasourceLinkedElement");
+const spinnerElementSymbol = Symbol("spinnerElement");
 
 /**
  * A simple dataset status component
@@ -105,6 +106,7 @@ class DatasourceStatus extends CustomElement {
 
 			timeouts: {
 				message: 4000,
+				spinnerMin: 200,
 			},
 
 			state: {
@@ -164,6 +166,7 @@ function initControlReferences() {
 	this[errorElementSymbol] = this.shadowRoot.querySelector(
 		"monster-context-error",
 	);
+	this[spinnerElementSymbol] = this.shadowRoot.querySelector(".monster-spinner");
 }
 
 /**
@@ -183,9 +186,44 @@ function initEventHandler() {
 			throw new TypeError("the element must be a datasource");
 		}
 
-		let fadeOutTimer = null;
+		let hideTimer = null;
+		let lastShowAt = 0;
+		let requestVersion = 0;
+
+		const setSpinnerState = (state) => {
+			self.setOption("state.spinner", state);
+			const spinner = self[spinnerElementSymbol];
+			if (spinner) {
+				spinner.setAttribute("data-monster-state-loader", state);
+			}
+		};
+		const clearHideTimer = () => {
+			if (hideTimer) {
+				clearTimeout(hideTimer);
+				hideTimer = null;
+			}
+		};
+		const getSpinnerMinTimeout = () => {
+			const value = Number(self.getOption("timeouts.spinnerMin", 0));
+			return Number.isFinite(value) ? Math.max(0, value) : 0;
+		};
+		const scheduleHide = (version) => {
+			clearHideTimer();
+			const elapsed = Date.now() - lastShowAt;
+			const delay = Math.max(0, getSpinnerMinTimeout() - elapsed);
+			hideTimer = setTimeout(() => {
+				hideTimer = null;
+				if (version !== requestVersion) {
+					return;
+				}
+				setSpinnerState("hide");
+			}, delay);
+		};
 		const hideSpinner = () => {
-			self.setOption("state.spinner", "hide");
+			setSpinnerState("hide");
+		};
+		const showSpinner = () => {
+			setSpinnerState("show");
 		};
 
 		this[datasourceLinkedElementSymbol] = element;
@@ -194,36 +232,22 @@ function initEventHandler() {
 			if (typeof self[errorElementSymbol]?.resetErrorMessage === "function") {
 				self[errorElementSymbol].resetErrorMessage();
 			}
-			if (fadeOutTimer) {
-				clearTimeout(fadeOutTimer);
-				fadeOutTimer = null;
-			}
-			fadeOutTimer = setTimeout(() => {
-				fadeOutTimer = null;
-				hideSpinner();
-			}, 800);
+			scheduleHide(requestVersion);
 		});
 
 		element.addEventListener("monster-datasource-fetch", function () {
-			if (fadeOutTimer) {
-				clearTimeout(fadeOutTimer);
-				fadeOutTimer = null;
-			}
-
+			requestVersion += 1;
+			lastShowAt = Date.now();
+			clearHideTimer();
 			if (typeof self[errorElementSymbol]?.resetErrorMessage === "function") {
 				self[errorElementSymbol].resetErrorMessage();
 			}
 
-			self.setOption("state.spinner", "show");
+			showSpinner();
 		});
 
 		element.addEventListener("monster-datasource-error", function (event) {
-			if (fadeOutTimer) {
-				clearTimeout(fadeOutTimer);
-				fadeOutTimer = null;
-			}
-
-			hideSpinner();
+			scheduleHide(requestVersion);
 
 			const timeout = self.getOption("timeouts.message", 4000);
 			let msg = "Cannot load data";

package/source/components/form/message-state-button.mjs

@@ -13,9 +13,10 @@
  */
 
 import { instanceSymbol } from "../../constants.mjs";
-import { ATTRIBUTE_ROLE } from "../../dom/constants.mjs";
+import { ATTRIBUTE_DISABLED, ATTRIBUTE_ROLE } from "../../dom/constants.mjs";
 import {
 	assembleMethodSymbol,
+	attributeObserverSymbol,
 	registerCustomElement,
 } from "../../dom/customelement.mjs";
 import { isArray, isString } from "../../types/is.mjs";
@@ -411,9 +412,31 @@ function initDisabledSync() {
 		if (self.getOption("features.disableButton", false) !== disabled) {
 			self.setOption("features.disableButton", disabled);
 		}
+
+		const button = self[buttonElementSymbol];
+		if (!button) {
+			return;
+		}
+
+		if (disabled) {
+			button.setAttribute(ATTRIBUTE_DISABLED, "");
+		} else {
+			button.removeAttribute(ATTRIBUTE_DISABLED);
+		}
+
+		if (isFunction(button.setOption)) {
+			button.setOption("disabled", disabled);
+		}
 	};
 
 	syncDisabled();
+	const existingObserver = self[attributeObserverSymbol]?.[ATTRIBUTE_DISABLED];
+	if (existingObserver) {
+		self[attributeObserverSymbol][ATTRIBUTE_DISABLED] = () => {
+			existingObserver.call(self);
+			syncDisabled();
+		};
+	}
 	self.attachObserver(new Observer(syncDisabled));
 }
 

package/source/dom/customelement.mjs

@@ -1039,7 +1039,7 @@ function initOptionObserver() {
 			for (const list of updaters) {
 				for (const updater of list) {
 					const d = clone(self[internalSymbol].getRealSubject()["options"]);
-					Object.assign(updater.getSubject(), d);
+					syncUpdaterSubject(updater.getSubject(), d);
 				}
 			}
 		}),
@@ -1068,6 +1068,39 @@ function initOptionObserver() {
 	};
 }
 
+/**
+ * @private
+ * @param {object} target
+ * @param {object} source
+ * @return {void}
+ */
+function syncUpdaterSubject(target, source) {
+	if (!isObject(source)) {
+		return;
+	}
+
+	for (const [key, value] of Object.entries(source)) {
+		if (isArray(value)) {
+			if (!isArray(target?.[key])) {
+				target[key] = [];
+			}
+			target[key].length = 0;
+			target[key].push(...clone(value));
+			continue;
+		}
+
+		if (isObject(value)) {
+			if (!isObject(target?.[key]) || isArray(target?.[key])) {
+				target[key] = {};
+			}
+			syncUpdaterSubject(target[key], value);
+			continue;
+		}
+
+		target[key] = value;
+	}
+}
+
 /**
  * @private
  * @return {object}

package/test/cases/components/form/message-state-button.mjs

@@ -0,0 +1,134 @@
+import { getGlobal } from "../../../../source/types/global.mjs";
+import * as chai from "chai";
+import { chaiDom } from "../../../util/chai-dom.mjs";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+import { ResizeObserverMock } from "../../../util/resize-observer.mjs";
+
+let expect = chai.expect;
+chai.use(chaiDom);
+
+const global = getGlobal();
+
+let html1 = `
+    <div id="test1">
+    </div>
+`;
+
+let html2 = `
+    <div id="test2">
+        <monster-message-state-button data-monster-option-labels-button="Save">
+            Save
+        </monster-message-state-button>
+    </div>
+`;
+
+let MessageStateButton;
+
+describe("MessageStateButton", function () {
+	before(function (done) {
+		initJSDOM().then(() => {
+			import("element-internals-polyfill").catch((e) => done(e));
+
+			if (!global.ResizeObserver) {
+				global.ResizeObserver = ResizeObserverMock;
+			}
+
+			import("../../../../source/components/form/message-state-button.mjs")
+				.then((m) => {
+					MessageStateButton = m["MessageStateButton"];
+					done();
+				})
+				.catch((e) => done(e));
+		});
+	});
+
+	describe("new MessageStateButton", function () {
+		beforeEach(() => {
+			let mocks = document.getElementById("mocks");
+			mocks.innerHTML = html1;
+		});
+
+		afterEach(() => {
+			let mocks = document.getElementById("mocks");
+			mocks.innerHTML = "";
+		});
+
+		describe("create from template", function () {
+			beforeEach(() => {
+				let mocks = document.getElementById("mocks");
+				mocks.innerHTML = html2;
+			});
+
+			afterEach(() => {
+				let mocks = document.getElementById("mocks");
+				mocks.innerHTML = "";
+			});
+
+			it("should contain monster-message-state-button", function () {
+				expect(document.getElementById("test2")).contain.html(
+					"<monster-message-state-button",
+				);
+			});
+		});
+
+		describe("document.createElement", function () {
+			it("should instance of message-state-button", function () {
+				expect(document.createElement("monster-message-state-button")).is
+					.instanceof(MessageStateButton);
+			});
+		});
+	});
+
+	describe("disabled toggle", function () {
+		afterEach(() => {
+			let mocks = document.getElementById("mocks");
+			mocks.innerHTML = "";
+		});
+
+		it("should sync disabled attribute to inner button", function (done) {
+			let mocks = document.getElementById("mocks");
+			const button = document.createElement("monster-message-state-button");
+			button.innerHTML = "Save";
+			mocks.appendChild(button);
+
+			setTimeout(() => {
+				try {
+					const inner = button.shadowRoot.querySelector(
+						"monster-state-button",
+					);
+					expect(inner).to.exist;
+
+					button.setAttribute("disabled", "");
+					setTimeout(() => {
+						try {
+							expect(inner.hasAttribute("disabled")).to.be.true;
+
+							button.removeAttribute("disabled");
+							setTimeout(() => {
+								try {
+									expect(inner.hasAttribute("disabled")).to.be.false;
+
+									button.setAttribute("disabled", "");
+									setTimeout(() => {
+										try {
+											expect(inner.hasAttribute("disabled")).to.be.true;
+											done();
+										} catch (e) {
+											done(e);
+										}
+									}, 0);
+								} catch (e) {
+									done(e);
+								}
+							}, 0);
+						} catch (e) {
+							done(e);
+						}
+					}, 0);
+				} catch (e) {
+					done(e);
+				}
+			}, 0);
+		});
+	});
+});

package/test/web/import.js

@@ -7,6 +7,7 @@ import "../cases/components/form/buy-box.mjs";
 import "../cases/components/form/button-bar.mjs";
 import "../cases/components/form/reload.mjs";
 import "../cases/components/form/state-button.mjs";
+import "../cases/components/form/message-state-button.mjs";
 import "../cases/components/form/select.mjs";
 import "../cases/components/form/confirm-button.mjs";
 import "../cases/components/form/form.mjs";