@schukai/monster 3.71.3 → 3.73.0

package/source/components/form/form.mjs

@@ -12,206 +12,222 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-import {instanceSymbol} from "../../constants.mjs";
-import {internalSymbol} from "../../constants.mjs";
-import {TokenList} from "../../types/tokenlist.mjs";
-import {DeadMansSwitch} from "../../util/deadmansswitch.mjs";
-import {DataSet} from "../datatable/dataset.mjs";
-//import { Datasource } from "../../data/datasource.mjs";
-import {RestAPI} from "../../data/datasource/server/restapi.mjs";
-import {WebConnect} from "../../data/datasource/server/webconnect.mjs";
-import {WriteError} from "../../data/datasource/server/restapi/writeerror.mjs";
-import {LocalStorage} from "../../data/datasource/storage/localstorage.mjs";
-import {SessionStorage} from "../../data/datasource/storage/sessionstorage.mjs";
+import { internalSymbol } from "../../constants.mjs";
+import { Pathfinder } from "../../data/pathfinder.mjs";
 import {
-    ATTRIBUTE_DISABLED,
-    ATTRIBUTE_ERRORMESSAGE,
-    ATTRIBUTE_PREFIX,
-    ATTRIBUTE_UPDATER_ATTRIBUTES,
-    ATTRIBUTE_UPDATER_INSERT,
-    ATTRIBUTE_UPDATER_REMOVE,
-    ATTRIBUTE_UPDATER_REPLACE,
+	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 { DeadMansSwitch } from "../../util/deadmansswitch.mjs";
+import { DataSet } from "../datatable/dataset.mjs";
 import {
-    assembleMethodSymbol,
-    CustomElement,
-    registerCustomElement,
-    getSlottedElements,
+	assembleMethodSymbol,
+	registerCustomElement,
+	getSlottedElements,
 } from "../../dom/customelement.mjs";
-import {addObjectWithUpdaterToElement} from "../../dom/updater.mjs";
-import {findElementWithSelectorUpwards} from "../../dom/util.mjs";
-import {isFunction, isString} from "../../types/is.mjs";
-import {Observer} from "../../types/observer.mjs";
-import {ProxyObserver} from "../../types/proxyobserver.mjs";
-import {Processing} from "../../util/processing.mjs";
-import {datasourceLinkedElementSymbol, handleDataSourceChanges} from "../datatable/util.mjs";
-import {MessageStateButton} from "./message-state-button.mjs";
-import {
-    ATTRIBUTE_FORM_DATASOURCE,
-    ATTRIBUTE_FORM_DATASOURCE_ARGUMENTS,
-} from "./constants.mjs";
-import {StateButton} from "./state-button.mjs";
-import {FormStyleSheet} from "./stylesheet/form.mjs";
+import { FormStyleSheet } from "./stylesheet/form.mjs";
+import { diff } from "../../data/diff.mjs";
+import { isString } from "../../types/is.mjs";
 
-export {Form};
+export { Form };
 
+/**
+ * @private
+ * @type {symbol}
+ */
+const debounceWriteBackSymbol = Symbol("debounceWriteBack");
 
 /**
  * @private
  * @type {symbol}
  */
-const debounceCallbackSymbol = Symbol("timerCallback");
+const debounceBindSymbol = Symbol("debounceBind");
 
 class Form extends DataSet {
-
-    /**
-     *
-     * @returns {{shadowMode: string, templates: {main: *}, display: string, disabled: boolean, delegatesFocus: boolean, templateMapping: {}} & {templates: {main: string}, classes: {form: string}}}
-     */
-    get defaults() {
-        const obj = Object.assign(
-            {},
-            super.defaults,
-            {
-                templates: {
-                    main: getTemplate(),
-                },
-
-                classes: {
-                    form: "",
-                },
-
-                writeBack: {
-                    events: ["change", "input", "keyup"]
-                },
-
-                reportValidity: {
-                    selector: "input,select,textarea",
-                }
-
-            }
-        );
-
-        obj['features']['mutationObserver'] = false;
-        obj['features']['writeBack'] = 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 {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: ["change", "input", "keyup"],
+			},
+
+			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;
+	}
 }
 
-function initDataSourceHandler() {
-
-}
+function initDataSourceHandler() {}
 
 /**
  * @private
  * @returns {initEventHandler}
  */
 function initEventHandler() {
-
-    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[debounceCallbackSymbol] instanceof DeadMansSwitch) {
-                    try {
-                        this[debounceCallbackSymbol].touch();
-                        return;
-                    } catch (e) {
-                        if (e.message !== "has already run") {
-                            throw e;
-                        }
-                        delete this[debounceCallbackSymbol];
-                    }
-                }
-
-                this[debounceCallbackSymbol] = new DeadMansSwitch(200, () => {
-                    setTimeout(() => {
-                        this.write();
-                    }, 0);
-                });
-
-            });
-        }
-    }
-
-    return this;
+	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 === undefined) {
+					return;
+				}
+
+				if (this[debounceBindSymbol][element] instanceof DeadMansSwitch) {
+					try {
+						this[debounceBindSymbol][element].touch();
+						return;
+					} catch (e) {
+						if (e.message !== "has already run") {
+							throw e;
+						}
+						delete this[debounceBindSymbol][element];
+					}
+				}
+
+				this[debounceBindSymbol][element] = new DeadMansSwitch(200, () => {
+					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;
 }
 
 /**
@@ -219,10 +235,118 @@ function initEventHandler() {
  * @return {FilterButton}
  */
 function initControlReferences() {
-    if (!this.shadowRoot) {
-        throw new Error("no shadow-root is defined");
-    }
-    return this;
+	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);
+		}, 100);
+		setTimeout(() => {
+			console.log(this[internalSymbol].getRealSubject().options.data);
+		}, 1000);
+	}
 }
 
 /**
@@ -230,8 +354,8 @@ function initControlReferences() {
  * @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"