@schukai/monster 4.124.2 → 4.125.0

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 
 
+## [4.125.0] - 2026-03-03
+
+### Add Features
+
+- Add new issue 385 HTML and JS files with property attribute updates
+### Changes
+
+- close issue
+
+
+
 ## [4.124.2] - 2026-03-02
 
 ### Bug Fixes

package/package.json

@@ -1 +1 @@
-{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.5","@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.2"}
+{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.5","@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.125.0"}

package/source/components/datatable/filter.mjs

@@ -1311,8 +1311,14 @@ function collectSearchQueries() {
 				}
 
 				const controlValue = getControlValuesFromLabel(element);
-				if (!controlValue) {
-					if (controlValue === "" && currentHash?.[this.id]?.[id]) {
+				const hasEmptyArrayValue =
+					isArray(controlValue) && controlValue.length === 0;
+
+				if (!controlValue || hasEmptyArrayValue) {
+					if (
+						(controlValue === "" || hasEmptyArrayValue) &&
+						currentHash?.[this.id]?.[id]
+					) {
 						delete currentHash[this.id][id];
 					}
 
@@ -1324,9 +1330,13 @@ function collectSearchQueries() {
 				}
 				currentHash[this.id][id] = controlValue;
 
+				const formatterValue = isArray(controlValue)
+					? controlValue.join(",")
+					: controlValue;
+
 				const mapping = {
 					id,
-					value: controlValue,
+					value: formatterValue,
 					label,
 				};
 

package/source/components/form/toggle-switch.mjs

@@ -297,6 +297,8 @@ class ToggleSwitch extends CustomControl {
 		) {
 			if (this.getOption("value") !== normalized) {
 				this.setOption("value", normalized);
+			} else {
+				validateAndSetValue.call(this);
 			}
 			return;
 		}
@@ -350,6 +352,7 @@ function toggleOn() {
 		return;
 	}
 
+	this[switchElementSymbol].classList.remove(this.getOption("classes.error"));
 	this[switchElementSymbol].classList.remove(this.getOption("classes.off")); // change color
 	this[switchElementSymbol].classList.add(this.getOption("classes.on")); // change color
 
@@ -371,6 +374,7 @@ function toggleOff() {
 		return;
 	}
 
+	this[switchElementSymbol].classList.remove(this.getOption("classes.error"));
 	this[switchElementSymbol].classList.remove(this.getOption("classes.on")); // change color
 	this[switchElementSymbol].classList.add(this.getOption("classes.off")); // change color
 
@@ -397,6 +401,17 @@ function showError() {
 	this[switchElementSymbol].classList.add(this.getOption("classes.error"));
 }
 
+/**
+ * @private
+ */
+function clearError() {
+	if (this[switchElementSymbol]) {
+		this[switchElementSymbol].classList.remove(this.getOption("classes.error"));
+	}
+
+	this.removeAttribute(ATTRIBUTE_ERRORMESSAGE);
+}
+
 /**
  * @private
  */
@@ -407,6 +422,21 @@ function validateAndSetValue() {
 		this.setOption("value", value);
 	}
 
+	const offValue = this.getOption("values.off");
+	if (value === undefined || value === null || value === "") {
+		clearError.call(this);
+		if (this[invalidDisabledSymbol]) {
+			this.setOption("disabled", false);
+			this.formDisabledCallback(false);
+			this[invalidDisabledSymbol] = false;
+		}
+		if (this.getOption("value") !== offValue) {
+			this.setOption("value", offValue);
+		}
+		toggleOff.call(this);
+		return;
+	}
+
 	const validatedValues = [];
 	validatedValues.push(this.getOption("values.on"));
 	validatedValues.push(this.getOption("values.off"));
@@ -437,6 +467,7 @@ function validateAndSetValue() {
 		this.formDisabledCallback(false);
 		this[invalidDisabledSymbol] = false;
 	}
+	clearError.call(this);
 
 	if (value === this.getOption("values.on")) {
 		toggleOn.call(this);

package/source/dom/constants.mjs

@@ -20,6 +20,7 @@ export {
 	ATTRIBUTE_THEME_PREFIX,
 	ATTRIBUTE_THEME_NAME,
 	ATTRIBUTE_UPDATER_ATTRIBUTES,
+	ATTRIBUTE_UPDATER_PROPERTIES,
 	ATTRIBUTE_UPDATER_SELECT_THIS,
 	ATTRIBUTE_UPDATER_REPLACE,
 	ATTRIBUTE_UPDATER_INSERT,
@@ -151,6 +152,13 @@ const ATTRIBUTE_THEME_NAME = `${ATTRIBUTE_THEME_PREFIX}name`;
  */
 const ATTRIBUTE_UPDATER_ATTRIBUTES = `${ATTRIBUTE_PREFIX}attributes`;
 
+/**
+ * @type {string}
+ * @license AGPLv3
+ * @since 4.125.0
+ */
+const ATTRIBUTE_UPDATER_PROPERTIES = `${ATTRIBUTE_PREFIX}properties`;
+
 /**
  * @type {string}
  * @license AGPLv3

package/source/dom/updater.mjs

@@ -23,6 +23,7 @@ import {
 	ATTRIBUTE_UPDATER_BIND_TYPE,
 	ATTRIBUTE_UPDATER_INSERT,
 	ATTRIBUTE_UPDATER_INSERT_REFERENCE,
+	ATTRIBUTE_UPDATER_PROPERTIES,
 	ATTRIBUTE_UPDATER_REMOVE,
 	ATTRIBUTE_UPDATER_REPLACE,
 	ATTRIBUTE_UPDATER_SELECT_THIS,
@@ -190,6 +191,7 @@ class Updater extends Base {
 					for (const path of updatePaths.values()) {
 						updateContent.call(this, { path });
 						updateAttributes.call(this, { path });
+						updateProperties.call(this, { path });
 					}
 				} else {
 					for (const change of Object.values(diffResult)) {
@@ -211,6 +213,7 @@ class Updater extends Base {
 		updateContent.call(this, change);
 		await Promise.resolve();
 		updateAttributes.call(this, change);
+		updateProperties.call(this, change);
 	}
 
 	/**
@@ -855,6 +858,14 @@ function applyRecursive(node, key, path) {
 		);
 	}
 
+	if (node.hasAttribute(ATTRIBUTE_UPDATER_PROPERTIES)) {
+		const value = node.getAttribute(ATTRIBUTE_UPDATER_PROPERTIES);
+		node.setAttribute(
+			ATTRIBUTE_UPDATER_PROPERTIES,
+			value.replaceAll(`path:${key}`, `path:${path}`),
+		);
+	}
+
 	if (node.hasAttribute(ATTRIBUTE_UPDATER_BIND)) {
 		const value = node.getAttribute(ATTRIBUTE_UPDATER_BIND);
 		node.setAttribute(
@@ -984,6 +995,18 @@ function updateAttributes(change) {
 	runUpdateAttributes.call(this, this[internalSymbol].element, p, subject);
 }
 
+/**
+ * @private
+ * @since 4.125.0
+ * @param {object} change
+ * @return {void}
+ */
+function updateProperties(change) {
+	const subject = this[internalSymbol].subject.getRealSubject();
+	const p = clone(change?.["path"]);
+	runUpdateProperties.call(this, this[internalSymbol].element, p, subject);
+}
+
 /**
  * @private
  * @param {HTMLElement} container
@@ -1059,6 +1082,75 @@ function runUpdateAttributes(container, parts, subject) {
 	}
 }
 
+/**
+ * @private
+ * @param {HTMLElement} container
+ * @param {array} parts
+ * @param {object} subject
+ * @return {void}
+ * @this Updater
+ */
+function runUpdateProperties(container, parts, subject) {
+	if (!isArray(parts)) return;
+	parts = clone(parts);
+
+	const mem = new WeakSet();
+
+	while (parts.length > 0) {
+		const current = parts.join(".");
+		parts.pop();
+
+		let iterator = new Set();
+
+		const query = `[${ATTRIBUTE_UPDATER_SELECT_THIS}][${ATTRIBUTE_UPDATER_PROPERTIES}], [${ATTRIBUTE_UPDATER_PROPERTIES}*="path:${current}"], [${ATTRIBUTE_UPDATER_PROPERTIES}^="static:"], [${ATTRIBUTE_UPDATER_PROPERTIES}^="i18n:"]`;
+
+		const e = container.querySelectorAll(query);
+
+		if (e.length > 0) {
+			iterator = new Set([...e]);
+		}
+
+		if (container.matches(query)) {
+			iterator.add(container);
+		}
+
+		for (const [element] of iterator.entries()) {
+			if (mem.has(element)) return;
+			mem.add(element);
+
+			// this case occurs when the ATTRIBUTE_UPDATER_SELECT_THIS attribute is set
+			if (!element.hasAttribute(ATTRIBUTE_UPDATER_PROPERTIES)) {
+				continue;
+			}
+
+			const properties = element.getAttribute(ATTRIBUTE_UPDATER_PROPERTIES);
+
+			for (let [, def] of Object.entries(properties.split(","))) {
+				def = trimSpaces(def);
+				const i = def.indexOf(" ");
+				const name = trimSpaces(def.substr(0, i));
+				const cmd = trimSpaces(def.substr(i));
+
+				const pipe = new Pipe(cmd);
+
+				this[internalSymbol].callbacks.forEach((f, n) => {
+					pipe.setCallback(n, f, element);
+				});
+
+				let value;
+				try {
+					element.removeAttribute(ATTRIBUTE_ERRORMESSAGE);
+					value = pipe.run(subject);
+				} catch (e) {
+					addErrorAttribute(element, e);
+				}
+
+				handleInputControlPropertyUpdate.call(this, element, name, value);
+			}
+		}
+	}
+}
+
 /**
  * @private
  * @param {HTMLElement|*} element
@@ -1133,6 +1225,189 @@ function handleInputControlAttributeUpdate(element, name, value) {
 	}
 }
 
+/**
+ * @private
+ * @param {HTMLElement|*} element
+ * @param {string} name
+ * @param {*} value
+ * @return {void}
+ * @this Updater
+ */
+function handleInputControlPropertyUpdate(element, name, value) {
+	if (element instanceof HTMLSelectElement && name === "value") {
+		switch (element.type) {
+			case "select-multiple":
+				if (isArray(value)) {
+					for (const [, opt] of Object.entries(element.options)) {
+						opt.selected = value.indexOf(opt.value) !== -1;
+					}
+					return;
+				}
+				break;
+			case "select-one":
+				if (value === undefined) {
+					element.selectedIndex = -1;
+					return;
+				}
+				break;
+		}
+	}
+
+	if (element instanceof HTMLInputElement) {
+		switch (name) {
+			case "checked":
+				element.checked =
+					value === true || value === "true" || value === "1" || value === "on";
+				return;
+			case "value":
+				if (element.type === "color") {
+					if (value === undefined || value === "") {
+						return;
+					}
+				}
+				break;
+		}
+	}
+
+	if (element instanceof HTMLTextAreaElement && name === "value") {
+		element.value = value === undefined ? "" : value;
+		return;
+	}
+
+	const optionPath = getControlOptionPathFromPropertyName(name);
+	if (
+		optionPath !== null &&
+		typeof element?.setOption === "function" &&
+		typeof element?.getOption === "function"
+	) {
+		try {
+			const current = element.getOption(optionPath);
+			const normalized = normalizeValueForOptionTarget(value, current);
+			element.setOption(optionPath, normalized);
+		} catch (e) {
+			addErrorAttribute(element, e);
+		}
+		return;
+	}
+
+	if (
+		optionPath !== null &&
+		typeof element?.setOption === "function" &&
+		typeof element?.getOption !== "function"
+	) {
+		try {
+			element.setOption(optionPath, value);
+		} catch (e) {
+			addErrorAttribute(element, e);
+		}
+		return;
+	}
+
+	try {
+		element[name] = value;
+	} catch (e) {
+		addErrorAttribute(element, e);
+	}
+}
+
+/**
+ * @private
+ * @param {string} name
+ * @return {string|null}
+ */
+function getControlOptionPathFromPropertyName(name) {
+	if (!isString(name)) {
+		return null;
+	}
+
+	let path = null;
+
+	if (name.startsWith("option:")) {
+		path = name.substring(7);
+	} else if (name.startsWith("option.")) {
+		path = name.substring(7);
+	} else if (name.startsWith("options.")) {
+		path = name.substring(8);
+	}
+
+	if (!isString(path)) {
+		return null;
+	}
+
+	path = path
+		.split(".")
+		.map((part) => trimSpaces(part))
+		.filter((part) => part !== "")
+		.join(".");
+
+	if (path === "") {
+		return null;
+	}
+
+	return path;
+}
+
+/**
+ * @private
+ * @param {*} value
+ * @param {*} current
+ * @return {*}
+ */
+function normalizeValueForOptionTarget(value, current) {
+	if (current === undefined || current === null) {
+		return value;
+	}
+
+	if (typeof current === "boolean") {
+		return (
+			value === true || value === "true" || value === "1" || value === "on"
+		);
+	}
+
+	if (typeof current === "number") {
+		const numberValue = Number(value);
+		return isNaN(numberValue) ? current : numberValue;
+	}
+
+	if (typeof current === "string") {
+		return value === undefined || value === null ? "" : `${value}`;
+	}
+
+	if (isArray(current)) {
+		if (isArray(value)) {
+			return value;
+		}
+
+		if (isString(value)) {
+			if (value.trim() === "") {
+				return [];
+			}
+			return value.split("::");
+		}
+
+		if (value === undefined || value === null) {
+			return [];
+		}
+		return [value];
+	}
+
+	if (typeof current === "object") {
+		if (value !== null && typeof value === "object") {
+			return value;
+		}
+
+		if (isString(value)) {
+			try {
+				return JSON.parse(value);
+			} catch (e) {
+				return current;
+			}
+		}
+	}
+
+	return value;
+}
+
 /**
  * @param {NodeList|HTMLElement|Set<HTMLElement>} elements
  * @param {Symbol} symbol

package/test/cases/components/form/toggle-switch.mjs

@@ -397,6 +397,21 @@ describe('ToggleSwitch', function () {
 
         });
 
+        it('does not set error state for empty initial values', function (done) {
+
+            const toggleSwitch = document.createElement('monster-toggle-switch');
+            toggleSwitch.setOption('value', undefined);
+            document.getElementById('mocks').appendChild(toggleSwitch);
+
+            setTimeout(() => {
+                const switchEl = toggleSwitch.shadowRoot.querySelector('[data-monster-role="switch"]');
+                expect(toggleSwitch.getAttribute('data-monster-error')).is.equal(null);
+                expect(switchEl.classList.contains(toggleSwitch.getOption('classes.error'))).is.false;
+                expect(toggleSwitch.value).is.equal(toggleSwitch.getOption('values.off'));
+                done();
+            }, 0);
+        });
+
     });
 
 

package/test/cases/dom/updater.mjs

@@ -48,6 +48,11 @@ let html1 = `
 
             <textarea name="textarea" id="textarea" data-monster-attributes="value path:a.textarea"></textarea>
 
+            <input id="property-checkbox" type="checkbox" data-monster-properties="checked path:a.checkboxBool">
+            <input id="property-input" type="text" data-monster-properties="value path:a.checkboxBool">
+            <monster-test-property id="property-custom" data-monster-properties="active path:a.checkboxBool, payload path:a.payload"></monster-test-property>
+            <monster-test-option-control id="property-option-control" data-monster-properties="option:features.enabled path:a.checkboxBool, option:labels.count path:a.optionCount"></monster-test-option-control>
+
         </div>
     </div>
 
@@ -64,7 +69,7 @@ let html2 = `
 let html3 = `
 
     <template id="myinnerid">
-        <span data-monster-replace="path:myinnerid | tojson"></span>
+        <span data-monster-replace="path:myinnerid | tojson" data-monster-properties="title path:myinnerid.i"></span>
     </template>
 
     <template id="myid">
@@ -127,6 +132,67 @@ describe("DOM", function () {
       import("../../../source/dom/updater.mjs")
         .then((m) => {
           Updater = m.Updater;
+
+          if (!customElements.get("monster-test-property")) {
+            class MonsterTestProperty extends HTMLElement {
+              set active(value) {
+                this._active = value;
+              }
+
+              get active() {
+                return this._active;
+              }
+
+              set payload(value) {
+                this._payload = value;
+              }
+
+              get payload() {
+                return this._payload;
+              }
+            }
+
+            customElements.define("monster-test-property", MonsterTestProperty);
+          }
+
+          if (!customElements.get("monster-test-option-control")) {
+            class MonsterTestOptionControl extends HTMLElement {
+              constructor() {
+                super();
+                this._options = {
+                  features: {
+                    enabled: false,
+                  },
+                  labels: {
+                    count: 0,
+                  },
+                };
+              }
+
+              getOption(path) {
+                return path.split(".").reduce((ref, part) => ref?.[part], this._options);
+              }
+
+              setOption(path, value) {
+                const parts = path.split(".");
+                let ref = this._options;
+                while (parts.length > 1) {
+                  const part = parts.shift();
+                  if (ref[part] === undefined || ref[part] === null) {
+                    ref[part] = {};
+                  }
+                  ref = ref[part];
+                }
+                ref[parts[0]] = value;
+              }
+            }
+
+            customElements.define(
+              "monster-test-option-control",
+              MonsterTestOptionControl,
+            );
+          }
+
           done();
         })
         .catch((e) => {
@@ -714,8 +780,12 @@ describe("DOM", function () {
                 '<p data-monster-insert="myinnerid path:a.b" data-monster-insert-reference="myid-0">',
               );
               expect(element).contain.html(
-                '<span data-monster-replace="path:a.b.0 | tojson" data-monster-insert-reference="myinnerid-0">{"i":"0"}</span>',
+                'data-monster-replace="path:a.b.0 | tojson"',
+              );
+              expect(element).contain.html(
+                'data-monster-properties="title path:a.b.0.i"',
               );
+              expect(element).contain.html('title="0"');
 
               done();
             }, 100);
@@ -750,6 +820,22 @@ describe("DOM", function () {
         let textarea = document.getElementById("textarea");
         expect(textarea.value).to.be.equal("");
 
+        let propertyCheckbox = document.getElementById("property-checkbox");
+        expect(propertyCheckbox.checked).to.be.false;
+
+        let propertyInput = document.getElementById("property-input");
+        expect(propertyInput.value).to.be.equal("");
+
+        let propertyCustom = document.getElementById("property-custom");
+        expect(propertyCustom.active).to.be.equal(undefined);
+        expect(propertyCustom.payload).to.be.equal(undefined);
+
+        let propertyOptionControl = document.getElementById(
+          "property-option-control",
+        );
+        expect(propertyOptionControl.getOption("features.enabled")).to.be.false;
+        expect(propertyOptionControl.getOption("labels.count")).to.be.equal(0);
+
         let d = new Updater(element, {
           a: {
             b: "div-class",
@@ -760,6 +846,11 @@ describe("DOM", function () {
             multiselect: ["value3", "value4", "other-value5"],
             select: "value2",
             checkbox: "true",
+            checkboxBool: true,
+            optionCount: 1234,
+            payload: {
+              state: "ok",
+            },
           },
         });
 
@@ -800,6 +891,26 @@ describe("DOM", function () {
                 "multiselect control",
               ).to.be.equal(JSON.stringify(d.getSubject()["a"]["multiselect"]));
               expect(checkbox.checked, "checkbox control").to.be.true;
+              expect(propertyCheckbox.checked, "property checkbox control").to.be
+                .true;
+              expect(propertyInput.value, "property input value").to.be.equal(
+                "true",
+              );
+              expect(propertyCustom.active, "typed property boolean").to.be.true;
+              expect(propertyCustom.payload, "typed property object").to.deep.equal(
+                {
+                  state: "ok",
+                },
+              );
+              expect(propertyCustom.getAttribute("active")).to.be.equal(null);
+              expect(
+                propertyOptionControl.getOption("features.enabled"),
+                "control option boolean",
+              ).to.be.true;
+              expect(
+                propertyOptionControl.getOption("labels.count"),
+                "control option number",
+              ).to.be.equal(1234);
 
               done();
             }, 100);