@schukai/monster 4.84.0 → 4.85.1

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 
 
+## [4.85.1] - 2026-01-08
+
+### Bug Fixes
+
+- Add new issue page and enhanced message state button functionality
+
+
+
+## [4.85.0] - 2026-01-08
+
+### Add Features
+
+- Improve spinner visibility control in DatasourceStatus component
+
+
+
 ## [4.84.0] - 2026-01-08
 
 ### 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.84.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.1"}

package/source/components/datatable/status.mjs

@@ -106,6 +106,7 @@ class DatasourceStatus extends CustomElement {
 
 			timeouts: {
 				message: 4000,
+				spinnerMin: 200,
 			},
 
 			state: {
@@ -185,6 +186,10 @@ function initEventHandler() {
 			throw new TypeError("the element must be a datasource");
 		}
 
+		let hideTimer = null;
+		let lastShowAt = 0;
+		let requestVersion = 0;
+
 		const setSpinnerState = (state) => {
 			self.setOption("state.spinner", state);
 			const spinner = self[spinnerElementSymbol];
@@ -192,6 +197,28 @@ function initEventHandler() {
 				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 = () => {
 			setSpinnerState("hide");
 		};
@@ -205,10 +232,13 @@ function initEventHandler() {
 			if (typeof self[errorElementSymbol]?.resetErrorMessage === "function") {
 				self[errorElementSymbol].resetErrorMessage();
 			}
-			hideSpinner();
+			scheduleHide(requestVersion);
 		});
 
 		element.addEventListener("monster-datasource-fetch", function () {
+			requestVersion += 1;
+			lastShowAt = Date.now();
+			clearHideTimer();
 			if (typeof self[errorElementSymbol]?.resetErrorMessage === "function") {
 				self[errorElementSymbol].resetErrorMessage();
 			}
@@ -217,7 +247,7 @@ function initEventHandler() {
 		});
 
 		element.addEventListener("monster-datasource-error", function (event) {
-			hideSpinner();
+			scheduleHide(requestVersion);
 
 			const timeout = self.getOption("timeouts.message", 4000);
 			let msg = "Cannot load data";

package/source/dom/customelement.mjs

@@ -22,6 +22,7 @@ import { parseDataURL } from "../types/dataurl.mjs";
 import { getGlobalObject } from "../types/global.mjs";
 import {
 	isArray,
+	isElement,
 	isFunction,
 	isIterable,
 	isObject,
@@ -1080,6 +1081,16 @@ function syncUpdaterSubject(target, source) {
 	}
 
 	for (const [key, value] of Object.entries(source)) {
+		if (
+			isElement(value) ||
+			(typeof Document !== "undefined" && value instanceof Document) ||
+			(typeof DocumentFragment !== "undefined" &&
+				value instanceof DocumentFragment)
+		) {
+			target[key] = value;
+			continue;
+		}
+
 		if (isArray(value)) {
 			if (!isArray(target?.[key])) {
 				target[key] = [];

package/source/types/proxyobserver.mjs

@@ -13,7 +13,7 @@
  */
 
 import { Base } from "./base.mjs";
-import { isArray, isObject, isPrimitive } from "./is.mjs";
+import { isArray, isElement, isObject, isPrimitive } from "./is.mjs";
 import { Observer } from "./observer.mjs";
 import { ObserverList } from "./observerlist.mjs";
 import { validateObject } from "./validate.mjs";
@@ -165,6 +165,14 @@ function getHandler() {
 				return value;
 			}
 
+			if (isElement(value)) {
+				return value;
+			}
+
+			if (typeof Node !== "undefined" && value instanceof Node) {
+				return value;
+			}
+
 			// set value as proxy if object or array
 			if (isArray(value) || isObject(value)) {
 				if (proxy.objectMap.has(value)) {