@schukai/monster 3.73.3 → 3.73.4

package/CHANGELOG.md

@@ -2,33 +2,38 @@
 
 
 
-## [3.73.3] - 2024-07-01
+## [3.73.4] - 2024-07-02
 
 ### Bug Fixes
 
-- debouncing form handling
+- eventprocessing is now only active in selected controls: form, filter. [#224](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/224)
 
 
 
-## [3.73.2] - 2024-07-01
+## [3.73.3] - 2024-07-01
 
 ### Bug Fixes
 
-- id not defined
+- 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.3"}
+{"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,28 +12,18 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-import {internalSymbol} from "../../constants.mjs";
-import {Pathfinder} from "../../data/pathfinder.mjs";
+import { Datasource } from "../../data/datasource.mjs";
+import { DeadMansSwitch } from "../../util/deadmansswitch.mjs";
+import { DataSet } from "../datatable/dataset.mjs";
 import {
-    ATTRIBUTE_FORM_BIND,
-    ATTRIBUTE_FORM_BIND_TYPE,
-    ATTRIBUTE_UPDATER_BIND,
-} from "../../dom/constants.mjs";
-import {findTargetElementFromEvent} from "../../dom/events.mjs";
-import {ID} from "../../types/id.mjs";
-import {clone} from "../../util/clone.mjs";
-import {DeadMansSwitch} from "../../util/deadmansswitch.mjs";
-import {DataSet} from "../datatable/dataset.mjs";
-import {
-    assembleMethodSymbol,
-    registerCustomElement,
-    getSlottedElements,
+	assembleMethodSymbol,
+	registerCustomElement,
+	getSlottedElements,
 } from "../../dom/customelement.mjs";
-import {FormStyleSheet} from "./stylesheet/form.mjs";
-import {diff} from "../../data/diff.mjs";
-import {isString} from "../../types/is.mjs";
+import { datasourceLinkedElementSymbol } from "../datatable/util.mjs";
+import { FormStyleSheet } from "./stylesheet/form.mjs";
 
-export {Form};
+export { Form };
 
 /**
  * @private
@@ -48,198 +38,159 @@ const debounceWriteBackSymbol = Symbol("debounceWriteBack");
 const debounceBindSymbol = Symbol("debounceBind");
 
 class Form extends DataSet {
-    /**
-     *
-     * @property {Object} templates Template definitions
-     * @property {string} templates.main Main template
-     * @property {Object} classes Class definitions
-     * @property {string} classes.form Form class
-     * @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
-     * @property {boolean} features.writeBack Write back feature
-     * @property {boolean} features.bind Bind feature
-     */
-    get defaults() {
-        const obj = Object.assign({}, super.defaults, {
-            templates: {
-                main: getTemplate(),
-            },
-
-            classes: {
-                form: "",
-            },
-
-            writeBack: {
-                events: ["keyup", "click", "change", "drop", "touchend", "input"]
-            },
-
-            bind: {
-                events: ["keyup", "click", "change", "drop", "touchend", "input"]
-            },
-
-            reportValidity: {
-                selector: "input,select,textarea",
-            },
-        });
-
-        obj["features"]["mutationObserver"] = false;
-        obj["features"]["writeBack"] = true;
-        obj["features"]["bind"] = true;
-
-        return obj;
-    }
-
-    /**
-     *
-     * @return {string}
-     */
-    static getTag() {
-        return "monster-form";
-    }
-
-    /**
-     * @return {CSSStyleSheet[]}
-     */
-    static getCSSStyleSheet() {
-        return [FormStyleSheet];
-    }
-
-    /**
-     *
-     */
-    [assembleMethodSymbol]() {
-        super[assembleMethodSymbol]();
-
-        initControlReferences.call(this);
-        initEventHandler.call(this);
-        initDataSourceHandler.call(this);
-    }
-
-    /**
-     * This method is called when the component is created.
-     * @since 3.70.0
-     * @returns {DataSet}
-     */
-    refresh() {
-        this.write();
-        super.refresh();
-        return this;
-    }
-
-    /**
-     * Run reportValidation on all child html form controls.
-     *
-     * @since 2.10.0
-     * @returns {boolean}
-     */
-    reportValidity() {
-        let valid = true;
-
-        const selector = this.getOption("reportValidity.selector");
-        const nodes = getSlottedElements.call(this, selector);
-
-        nodes.forEach((node) => {
-            if (typeof node.reportValidity === "function") {
-                if (node.reportValidity() === false) {
-                    valid = false;
-                }
-            }
-        });
-
-        return valid;
-    }
+	/**
+	 *
+	 * @property {Object} templates Template definitions
+	 * @property {string} templates.main Main template
+	 * @property {Object} classes Class definitions
+	 * @property {string} classes.form Form class
+	 * @property {Object} writeBack Write back definitions
+	 * @property {string[]} writeBack.events Write back events
+	 * @property {Object} bind Bind definitions
+	 * @property {Object} reportValidity Report validity definitions
+	 * @property {string} reportValidity.selector Report validity selector
+	 * @property {boolean} features.mutationObserver Mutation observer feature
+	 * @property {boolean} features.writeBack Write back feature
+	 * @property {boolean} features.bind Bind feature
+	 */
+	get defaults() {
+		const obj = Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+
+			classes: {
+				form: "",
+			},
+
+			writeBack: {
+				events: ["keyup", "click", "change", "drop", "touchend", "input"],
+			},
+
+			reportValidity: {
+				selector: "input,select,textarea",
+			},
+
+			eventProcessing: true,
+		});
+
+		obj["features"]["mutationObserver"] = false;
+		obj["features"]["writeBack"] = true;
+
+		return obj;
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-form";
+	}
+
+	/**
+	 * @return {CSSStyleSheet[]}
+	 */
+	static getCSSStyleSheet() {
+		return [FormStyleSheet];
+	}
+
+	/**
+	 *
+	 */
+	[assembleMethodSymbol]() {
+		const selector = this.getOption("datasource.selector");
+
+		if (!selector) {
+			this[datasourceLinkedElementSymbol] = new Datasource(this);
+		}
+
+		super[assembleMethodSymbol]();
+
+		initControlReferences.call(this);
+		initEventHandler.call(this);
+		initDataSourceHandler.call(this);
+	}
+
+	/**
+	 * This method is called when the component is created.
+	 * @since 3.70.0
+	 * @returns {DataSet}
+	 */
+	refresh() {
+		this.write();
+		super.refresh();
+		return this;
+	}
+
+	/**
+	 * Run reportValidation on all child html form controls.
+	 *
+	 * @since 2.10.0
+	 * @returns {boolean}
+	 */
+	reportValidity() {
+		let valid = true;
+
+		const selector = this.getOption("reportValidity.selector");
+		const nodes = getSlottedElements.call(this, selector);
+
+		nodes.forEach((node) => {
+			if (typeof node.reportValidity === "function") {
+				if (node.reportValidity() === false) {
+					valid = false;
+				}
+			}
+		});
+
+		return valid;
+	}
 }
 
-function initDataSourceHandler() {
-}
+function initDataSourceHandler() {}
 
 /**
  * @private
  * @returns {initEventHandler}
  */
 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
-                if (!element.hasAttribute("data-monster-debounce-id")) {
-                    elementID = new ID('debounce').toString();
-                    element.setAttribute("data-monster-debounce-id", elementID);
-                } else {
-                    elementID = element.getAttribute("data-monster-debounce-id");
-                }
-				
-                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) {
-            this.addEventListener(event, (e) => {
-                if (!this.reportValidity()) {
-                    this.classList.add("invalid");
-                    setTimeout(() => {
-                        this.classList.remove("invalid");
-                    }, 1000);
-
-                    return;
-                }
-
-                if (this[debounceWriteBackSymbol] instanceof DeadMansSwitch) {
-                    try {
-                        this[debounceWriteBackSymbol].touch();
-                        return;
-                    } catch (e) {
-                        if (e.message !== "has already run") {
-                            throw e;
-                        }
-                        delete this[debounceWriteBackSymbol];
-                    }
-                }
-
-                this[debounceWriteBackSymbol] = new DeadMansSwitch(200, () => {
-                    setTimeout(() => {
-                        this.write();
-                    }, 0);
-                });
-            });
-        }
-    }
-
-    return this;
+	this[debounceBindSymbol] = {};
+
+	if (this.getOption("features.writeBack") === true) {
+		const events = this.getOption("writeBack.events");
+		for (const event of events) {
+			this.addEventListener(event, (e) => {
+				if (!this.reportValidity()) {
+					this.classList.add("invalid");
+					setTimeout(() => {
+						this.classList.remove("invalid");
+					}, 1000);
+
+					return;
+				}
+
+				if (this[debounceWriteBackSymbol] instanceof DeadMansSwitch) {
+					try {
+						this[debounceWriteBackSymbol].touch();
+						return;
+					} catch (e) {
+						if (e.message !== "has already run") {
+							throw e;
+						}
+						delete this[debounceWriteBackSymbol];
+					}
+				}
+
+				this[debounceWriteBackSymbol] = new DeadMansSwitch(200, () => {
+					setTimeout(() => {
+						this.write();
+					}, 0);
+				});
+			});
+		}
+	}
+
+	return this;
 }
 
 /**
@@ -247,115 +198,10 @@ function initEventHandler() {
  * @return {FilterButton}
  */
 function initControlReferences() {
-    if (!this.shadowRoot) {
-        throw new Error("no shadow-root is defined");
-    }
-    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);
-    }
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
+	return this;
 }
 
 /**
@@ -363,8 +209,8 @@ function retrieveAndSetValue(element) {
  * @return {string}
  */
 function getTemplate() {
-    // language=HTML
-    return `
+	// language=HTML
+	return `
         <div data-monster-role="control" part="control">
             <form data-monster-attributes="disabled path:disabled | if:true, class path:classes.form"
                   data-monster-role="form"

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