@schukai/monster 3.73.2 → 3.73.4

package/CHANGELOG.md

@@ -2,25 +2,38 @@
 
 
 
-## [3.73.2] - 2024-07-01
+## [3.73.4] - 2024-07-02
 
 ### Bug Fixes
 
-- id not defined
+- eventprocessing is now only active in selected controls: form, filter. [#224](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/224)
 
 
 
+## [3.73.3] - 2024-07-01
+
+### Bug Fixes
+
+- debouncing form handling
+
+## [3.73.2] - 2024-07-01
+
+### Bug Fixes
+
+- id not defined
+
 ## [3.73.1] - 2024-06-30
 
 ### Bug Fixes
 
-- update deadman switch assignment
+- update dead man switch assignment
+
 ### Changes
 
 - update issues
 - remove node debug flag
 - tidy changelog
-- new task create documentation fragments and optimize create class task
+- new task creates documentation fragments and optimizes creates a class task
 - cleanup code
 
 ## [3.73.0] - 2024-06-28

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.6","@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":"3.73.2"}
+{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.7","@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":"3.73.4"}

package/source/components/datatable/dataset.mjs

@@ -210,7 +210,12 @@ class DataSet extends CustomElement {
 					pathWithIndex = String(index);
 				}
 
-				const data = this[datasourceLinkedElementSymbol].data;
+				const data = this[datasourceLinkedElementSymbol]?.data;
+				if (!data) {
+					reject(new Error("No data"));
+					return;
+				}
+
 				const unref = JSON.stringify(data);
 				const ref = JSON.parse(unref);
 
@@ -244,24 +249,26 @@ class DataSet extends CustomElement {
 
 		initEventHandler.call(this);
 
-		const selector = this.getOption("datasource.selector");
+		if (!this[datasourceLinkedElementSymbol]) {
+			const selector = this.getOption("datasource.selector");
 
-		if (isString(selector)) {
-			const element = findElementWithSelectorUpwards(this, selector);
-			if (element === null) {
-				throw new Error("the selector must match exactly one element");
-			}
+			if (isString(selector)) {
+				const element = findElementWithSelectorUpwards(this, selector);
+				if (element === null) {
+					throw new Error("the selector must match exactly one element");
+				}
 
-			if (!(element instanceof Datasource)) {
-				throw new TypeError("the element must be a datasource");
-			}
+				if (!(element instanceof Datasource)) {
+					throw new TypeError("the element must be a datasource");
+				}
 
-			this[datasourceLinkedElementSymbol] = element;
-			element.datasource.attachObserver(
-				new Observer(handleDataSourceChanges.bind(this)),
-			);
-		} else {
-			throw new Error("the selector must be a string");
+				this[datasourceLinkedElementSymbol] = element;
+				element.datasource.attachObserver(
+					new Observer(handleDataSourceChanges.bind(this)),
+				);
+			} else {
+				throw new Error("the selector must be a string");
+			}
 		}
 
 		if (

package/source/components/datatable/filter.mjs

@@ -274,6 +274,7 @@ class Filter extends CustomElement {
 
 			query: undefined,
 			defaultQuery: "",
+			eventProcessing: true,
 		});
 	}
 

package/source/components/form/context-error.mjs

@@ -201,7 +201,6 @@ class ContextError extends Popper {
 		}
 
 		if (c === "<slot></slot>") {
-
 			const sr = this.shadowRoot;
 			if (!sr) {
 				return false;

package/source/components/form/form.mjs

@@ -12,15 +12,7 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-import { internalSymbol } from "../../constants.mjs";
-import { Pathfinder } from "../../data/pathfinder.mjs";
-import {
-	ATTRIBUTE_FORM_BIND,
-	ATTRIBUTE_FORM_BIND_TYPE,
-	ATTRIBUTE_UPDATER_BIND,
-} from "../../dom/constants.mjs";
-import { findTargetElementFromEvent } from "../../dom/events.mjs";
-import { clone } from "../../util/clone.mjs";
+import { Datasource } from "../../data/datasource.mjs";
 import { DeadMansSwitch } from "../../util/deadmansswitch.mjs";
 import { DataSet } from "../datatable/dataset.mjs";
 import {
@@ -28,9 +20,8 @@ import {
 	registerCustomElement,
 	getSlottedElements,
 } from "../../dom/customelement.mjs";
+import { datasourceLinkedElementSymbol } from "../datatable/util.mjs";
 import { FormStyleSheet } from "./stylesheet/form.mjs";
-import { diff } from "../../data/diff.mjs";
-import { isString } from "../../types/is.mjs";
 
 export { Form };
 
@@ -56,7 +47,6 @@ class Form extends DataSet {
 	 * @property {Object} writeBack Write back definitions
 	 * @property {string[]} writeBack.events Write back events
 	 * @property {Object} bind Bind definitions
-	 * @property {string[]} bind.events Bind events
 	 * @property {Object} reportValidity Report validity definitions
 	 * @property {string} reportValidity.selector Report validity selector
 	 * @property {boolean} features.mutationObserver Mutation observer feature
@@ -74,21 +64,18 @@ class Form extends DataSet {
 			},
 
 			writeBack: {
-				events: ["keyup", "click", "change", "drop", "touchend", "input"]
-			},
-
-			bind: {
-				events: ["keyup", "click", "change", "drop", "touchend", "input"]
+				events: ["keyup", "click", "change", "drop", "touchend", "input"],
 			},
 
 			reportValidity: {
 				selector: "input,select,textarea",
 			},
+
+			eventProcessing: true,
 		});
 
 		obj["features"]["mutationObserver"] = false;
 		obj["features"]["writeBack"] = true;
-		obj["features"]["bind"] = true;
 
 		return obj;
 	}
@@ -112,6 +99,12 @@ class Form extends DataSet {
 	 *
 	 */
 	[assembleMethodSymbol]() {
+		const selector = this.getOption("datasource.selector");
+
+		if (!selector) {
+			this[datasourceLinkedElementSymbol] = new Datasource(this);
+		}
+
 		super[assembleMethodSymbol]();
 
 		initControlReferences.call(this);
@@ -163,54 +156,6 @@ function initDataSourceHandler() {}
 function initEventHandler() {
 	this[debounceBindSymbol] = {};
 
-	if (this.getOption("features.bind") === true) {
-		const events = this.getOption("bind.events");
-
-		for (const event of events) {
-			this.addEventListener(event, (e) => {
-				const element = findTargetElementFromEvent(e, ATTRIBUTE_FORM_BIND);
-
-				if (!(element instanceof HTMLElement)) {
-					return;
-				}
-
-				let elementID = element.id;
-
-				if (elementID === "") {
-					elementID = element.getAttribute("name");
-				}
-
-				if (elementID === "") {
-					elementID = element.getAttribute("data-monster-attributes");
-				}
-
-				if (elementID === "") {
-					elementID = element.innerText.substring(0, 20);
-				}
-
-				elementID = elementID.replace(/\s/g, "_")
-				
-				if (this[debounceBindSymbol][elementID] instanceof DeadMansSwitch) {
-					try {
-						this[debounceBindSymbol][elementID].touch();
-						return;
-					} catch (e) {
-						if (e.message !== "has already run") {
-							throw e;
-						}
-
-						delete this[debounceBindSymbol][elementID];
-					}
-				}
-
-				this[debounceBindSymbol][elementID] = new DeadMansSwitch(200, () => {
-					delete this[debounceBindSymbol][elementID];
-					retrieveAndSetValue.call(this, element);
-				});
-			});
-		}
-	}
-
 	if (this.getOption("features.writeBack") === true) {
 		const events = this.getOption("writeBack.events");
 		for (const event of events) {
@@ -259,111 +204,6 @@ function initControlReferences() {
 	return this;
 }
 
-/**
- * @throws {Error} the bind argument must start as a value with a path
- * @param {HTMLElement} element
- * @return void
- * @memberOf Monster.DOM
- * @private
- */
-function retrieveAndSetValue(element) {
-	let path = element.getAttribute(ATTRIBUTE_FORM_BIND);
-	if (path === null)
-		throw new Error("the bind argument must start as a value with a path");
-
-	if (path.indexOf("path:") !== 0) {
-		throw new Error("the bind argument must start as a value with a path");
-	}
-
-	path = path.substring(5); // remove path: from the string
-
-	let value;
-
-	if (element instanceof HTMLInputElement) {
-		switch (element.type) {
-			case "checkbox":
-				value = element.checked ? element.value : undefined;
-				break;
-			default:
-				value = element.value;
-				break;
-		}
-	} else if (element instanceof HTMLTextAreaElement) {
-		value = element.value;
-	} else if (element instanceof HTMLSelectElement) {
-		switch (element.type) {
-			case "select-one":
-				value = element.value;
-				break;
-			case "select-multiple":
-				value = element.value;
-
-				let options = element?.selectedOptions;
-				if (options === undefined)
-					options = element.querySelectorAll(":scope option:checked");
-				value = Array.from(options).map(({ value }) => value);
-
-				break;
-		}
-
-		// values from custom elements
-	} else if (
-		(element?.constructor?.prototype &&
-			!!Object.getOwnPropertyDescriptor(
-				element.constructor.prototype,
-				"value",
-			)?.["get"]) ||
-		element.hasOwnProperty("value")
-	) {
-		value = element?.["value"];
-	} else {
-		throw new Error("unsupported object");
-	}
-
-	if (isString(value)) {
-		const type = element.getAttribute(ATTRIBUTE_FORM_BIND_TYPE);
-		switch (type) {
-			case "number":
-			case "int":
-			case "float":
-			case "integer":
-				value = Number(value);
-				if (isNaN(value)) {
-					value = 0;
-				}
-				break;
-			case "boolean":
-			case "bool":
-			case "checkbox":
-				value = value === "true" || value === "1" || value === "on";
-				break;
-			case "array":
-			case "list":
-				value = value.split(",");
-				break;
-			case "object":
-			case "json":
-				value = JSON.parse(value);
-				break;
-			default:
-				break;
-		}
-	}
-
-	const copy = clone(this[internalSymbol].getRealSubject()?.options);
-
-	const pf = new Pathfinder(copy);
-	pf.setVia(path, value);
-
-	const diffResult = diff(copy, this[internalSymbol].getRealSubject()?.options);
-
-	if (diffResult.length > 0) {
-		setTimeout(() => {
-			this.setOption(path, value);
-		}, 50);
-	}
-}
-
 /**
  * @private
  * @return {string}

package/source/dom/customelement.mjs

@@ -327,6 +327,7 @@ class CustomElement extends HTMLElement {
 	 * @property {Object} templates Specifies the templates used by the control.
 	 * @property {string} templates.main=undefined Specifies the main template used by the control.
 	 * @property {Object} templateMapping Specifies the mapping of templates.
+	 * @property {Boolean} eventProcessing=false Specifies whether the control processes events.
 	 * @since 1.8.0
 	 */
 	get defaults() {
@@ -338,6 +339,8 @@ class CustomElement extends HTMLElement {
 				main: undefined,
 			},
 			templateMapping: {},
+
+			eventProcessing: false,
 		};
 	}
 
@@ -644,11 +647,17 @@ class CustomElement extends HTMLElement {
 			this[internalSymbol].getRealSubject()["options"],
 		);
 
+		const cfg = {};
+		if (this.getOption("eventProcessing") === true) {
+			cfg.eventProcessing = true;
+		}
+
 		addObjectWithUpdaterToElement.call(
 			this,
 			nodeList,
 			customElementUpdaterLinkSymbol,
 			this[updateCloneDataSymbol],
+			cfg,
 		);
 
 		// Attach a mutation observer to observe changes to the attributes of the element

package/source/dom/updater.mjs

@@ -156,7 +156,6 @@ class Updater extends Base {
 
 		for (const type of this[internalSymbol].eventTypes) {
 			// @see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
-
 			this[internalSymbol].element.addEventListener(
 				type,
 				getControlEventHandler.call(this),
@@ -745,9 +744,7 @@ function runUpdateContent(container, parts, subject) {
 
 /**
  * @private
- * @license AGPLv3
  * @since 1.8.0
- * @param {string} path
  * @param {object} change
  * @return {void}
  */
@@ -900,6 +897,10 @@ function handleInputControlAttributeUpdate(element, name, value) {
  * @param {NodeList|HTMLElement|Set<HTMLElement>} elements
  * @param {Symbol} symbol
  * @param {object} object
+ * @param {object} config
+ *
+ * Config: enableEventProcessing {boolean} - default: false - enables the event processing
+ *
  * @return {Promise[]}
  * @license AGPLv3
  * @since 1.23.0
@@ -908,7 +909,7 @@ function handleInputControlAttributeUpdate(element, name, value) {
  * @throws {TypeError} the context of the function is not an instance of HTMLElement
  * @throws {TypeError} symbol must be an instance of Symbol
  */
-function addObjectWithUpdaterToElement(elements, symbol, object) {
+function addObjectWithUpdaterToElement(elements, symbol, object, config = {}) {
 	if (!(this instanceof HTMLElement)) {
 		throw new TypeError(
 			"the context of this function must be an instance of HTMLElement",
@@ -974,7 +975,11 @@ function addObjectWithUpdaterToElement(elements, symbol, object) {
 
 		result.push(
 			u.run().then(() => {
-				return u.enableEventProcessing();
+				if (config.eventProcessing === true) {
+					u.enableEventProcessing();
+				}
+
+				return u;
 			}),
 		);
 	});

package/source/types/version.mjs

@@ -159,7 +159,7 @@ function getMonsterVersion() {
 	}
 
 	/** don't touch, replaced by make with package.json version */
-	monsterVersion = new Version("3.65.0");
+	monsterVersion = new Version("3.73.2");
 
 	return monsterVersion;
 }

package/test/cases/monster.mjs

@@ -7,7 +7,7 @@ describe('Monster', function () {
         let monsterVersion
 
         /** don´t touch, replaced by make with package.json version */
-        monsterVersion = new Version("3.65.0")
+        monsterVersion = new Version("3.73.2")
 
         let m = getMonsterVersion();
 

package/test/web/test.html

@@ -9,8 +9,8 @@
 </head>
 <body>
 <div id="headline" style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
-  <h1 style='margin-bottom: 0.1em;'>Monster 3.65.0</h1>
-  <div id="lastupdate" style='font-size:0.7em'>last update Di 18. Jun 22:58:11 CEST 2024</div>
+  <h1 style='margin-bottom: 0.1em;'>Monster 3.73.2</h1>
+  <div id="lastupdate" style='font-size:0.7em'>last update Di 2. Jul 20:16:21 CEST 2024</div>
 </div>
 <div id="mocha-errors"
      style="color: red;font-weight: bold;display: flex;align-items: center;justify-content: center;flex-direction: column;margin:20px;"></div>