@schukai/monster 3.96.2 → 3.96.3

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 
 
+## [3.96.3] - 2025-01-03
+
+### Bug Fixes
+
+- optimize the filter rest api pipeline [#274](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/274) [#241](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/241)
+- update undefined handling [#275](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/275)
+- repair some small issues [#274](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/274)
+
+
+
 ## [3.96.2] - 2024-12-31
 
 ### Bug Fixes

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.12","@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.96.2"}
+{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.12","@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.96.3"}

package/source/components/datatable/datasource/rest.mjs

@@ -104,7 +104,7 @@ class Rest extends Datasource {
 	 * @property {string} templates.main Main template
 	 * @property {Object} features Feature definitions
 	 * @property {boolean} features.autoInit If true, the component is initialized automatically
-	 * @property {boolean} features.filter If true, the component is initialized automatically
+	 * @property {boolean} features.filter If true, the filter.id is used to attach a filter control
 	 * @property {Object} autoInit Auto init definitions
 	 * @property {boolean} autoInit.intersectionObserver If true, the intersection observer is initialized automatically
 	 * @property {boolean} autoInit.oneTime If true, the intersection observer is initialized only once
@@ -131,7 +131,7 @@ class Rest extends Datasource {
 
 		restOptions.read.parameters = {
 			filter: null,
-			oderBy: null,
+			orderBy: null,
 			page: "1",
 		};
 
@@ -199,7 +199,6 @@ class Rest extends Datasource {
 	[assembleMethodSymbol]() {
 		super[assembleMethodSymbol]();
 		initEventHandler.call(this);
-		initAutoInit.call(this);
 	}
 
 	/**
@@ -260,6 +259,12 @@ class Rest extends Datasource {
 		queueMicrotask(() => {
 			if (this.getOption("features.filter", false) === true) {
 				initFilter.call(this);
+
+				if (!this[filterObserverSymbol]) {
+					initAutoInit.call(this);
+				}
+			} else {
+				initAutoInit.call(this);
 			}
 		});
 	}
@@ -286,12 +291,26 @@ class Rest extends Datasource {
 		this[dataSourceSymbol].setOption("read", opt);
 
 		let url = this.getOption("read.url");
-		const formatter = new Formatter(this.getOption("read.parameters"));
-
 		if (!url) {
 			return Promise.reject(new Error("No url defined"));
 		}
 
+		const param = this.getOption("read.parameters", {});
+
+		if (param.query === null || param.query === undefined) {
+			param.query = "";
+		}
+
+		if (param.page === null || param.page === undefined) {
+			param.page = "1";
+		}
+
+		if (param.orderBy === null || param.orderBy === undefined) {
+			param.orderBy = "";
+		}
+
+		const formatter = new Formatter(param);
+
 		url = formatter.format(url);
 
 		this[dataSourceSymbol].setOption("read.url", url);
@@ -394,23 +413,28 @@ function initFilter() {
 		throw new Error("filter feature is enabled but no filter id is defined");
 
 	const filterControl = findElementWithIdUpwards(this, filterID);
-	if (!filterControl)
-		throw new Error(
+	if (!filterControl) {
+		addAttributeToken(
+			this,
+			ATTRIBUTE_ERRORMESSAGE,
 			"filter feature is enabled but no filter control with id " +
 				filterID +
 				" is found",
 		);
+		return;
+	}
 
 	this[filterObserverSymbol] = new Observer(() => {
 		const query = filterControl.getOption("query");
 		if (query === undefined) {
 			return;
 		}
+
 		this.setParameters({ query: query });
 		this.fetch()
 			.then((response) => {
 				if (!(response instanceof Response)) {
-					throw new Error("Response is not an instance of Response");
+					return Promise.reject(new Error("response is not a Response object"));
 				}
 
 				if (response?.ok === true) {
@@ -565,8 +589,7 @@ function initIntersectionObserver() {
  */
 function getTemplate() {
 	// language=HTML
-	return `
-        <slot></slot>`;
+	return `<slot></slot>`;
 }
 
 registerCustomElement(Rest);

package/source/components/datatable/filter.mjs

@@ -13,7 +13,10 @@
  */
 
 import { instanceSymbol } from "../../constants.mjs";
-import { findTargetElementFromEvent } from "../../dom/events.mjs";
+import {
+	findTargetElementFromEvent,
+	fireCustomEvent,
+} from "../../dom/events.mjs";
 import {
 	findElementWithIdUpwards,
 	findElementWithSelectorUpwards,
@@ -25,7 +28,6 @@ import {
 	registerCustomElement,
 } from "../../dom/customelement.mjs";
 import { ID } from "../../types/id.mjs";
-import { DeadMansSwitch } from "../../util/deadmansswitch.mjs";
 import { Settings } from "./filter/settings.mjs";
 import { FilterStyleSheet } from "./stylesheet/filter.mjs";
 import { getDocument, getWindow } from "../../dom/util.mjs";
@@ -54,6 +56,14 @@ import {
 
 import "./filter/select.mjs";
 
+import "../form/button.mjs";
+import "../form/select.mjs";
+import "../form/popper-button.mjs";
+import "../form/toggle-switch.mjs";
+import "../form/context-help.mjs";
+import "../form/context-error.mjs";
+import "../form/message-state-button.mjs";
+
 export { Filter };
 
 /**
@@ -130,9 +140,23 @@ const sizeDataSymbol = Symbol("sizeData");
  */
 const debounceSizeSymbol = Symbol("debounceSize");
 
+/**
+ * @private
+ * @type {symbol}
+ */
+const hashChangeSymbol = Symbol("hashChange");
+
 /**
  * The Filter component is used to show and handle the filter values.
  *
+ * @fragments /fragments/components/datatable/filter
+ *
+ * @example /examples/components/datatable/filter-simple First filter
+ * @example /examples/components/datatable/filter-advanced Advanced filter
+ * @example /examples/components/datatable/filter-store Store filter
+ *
+ * @issue https://localhost.alvine.dev:8443/development/issues/closed/272.html
+ *
  * @copyright schukai GmbH
  * @summary The Filter component is used to show and handle the filter values.
  */
@@ -143,6 +167,9 @@ class Filter extends CustomElement {
 	constructor() {
 		super();
 		this[settingsSymbol] = new Settings();
+
+		// debounce the hash change event if doSearch is called by click the search button
+		this[hashChangeSymbol] = 0;
 	}
 
 	/**
@@ -171,7 +198,7 @@ class Filter extends CustomElement {
 
 	/**
 	 *
-	 * @return {{Filter}}
+	 * @return {Filter}
 	 */
 	resetFailureMessage() {
 		this[searchButtonElementSymbol].hideMessage();
@@ -181,7 +208,7 @@ class Filter extends CustomElement {
 
 	/**
 	 *
-	 * @return {{Filter}}
+	 * @return {Filter}
 	 */
 	showSuccess() {
 		this[searchButtonElementSymbol].setState(
@@ -210,8 +237,10 @@ class Filter extends CustomElement {
 	 * @property {Object} formatter.marker Marker definitions
 	 * @property {Object} formatter.marker.open Marker open
 	 * @property {Object} formatter.marker.close Marker close
+	 * @property {Object} features Feature definitions
+	 * @property {boolean} features.storedConfig Stored configuration, this replaces the setting `storedConfig.enabled` @since 3.97.0
 	 * @property {Object} storedConfig Stored configuration
-	 * @property {boolean} storedConfig.enabled Enabled
+	 * @property {boolean} storedConfig.enabled The store has been enabled, this option will no longer have any effect. @deprecated 20250101
 	 * @property {string} storedConfig.selector Selector
 	 * @property {Object} timeouts Timeout definitions
 	 * @property {number} timeouts.message Message timeout
@@ -227,19 +256,23 @@ class Filter extends CustomElement {
 			templates: {
 				main: getTemplate(),
 			},
+
 			formatter: {
 				marker: {
 					open: null,
 					close: null,
 				},
 			},
+
 			labels: {
 				search: "Search",
 				reset: "Reset",
 				save: "Save",
 				"filter-name": "Filter name",
-				"empty-query-and-no-default": "Please select a filter",
-				"query-not-changed": "The query has not changed",
+				"empty-query-and-no-default":
+					"The query is empty and there is no default query.",
+				"query-not-changed":
+					"The search request has not changed, so no search is required.",
 			},
 
 			templateMapping: {
@@ -247,6 +280,10 @@ class Filter extends CustomElement {
 				"filter-name-label": name,
 			},
 
+			features: {
+				storedConfig: false,
+			},
+
 			storedConfig: {
 				enabled: true,
 				selector: "",
@@ -268,8 +305,8 @@ class Filter extends CustomElement {
 				},
 			},
 
-			query: undefined,
-			defaultQuery: "",
+			query: null,
+			defaultQuery: null,
 			eventProcessing: true,
 		});
 	}
@@ -284,12 +321,14 @@ class Filter extends CustomElement {
 
 	/**
 	 * @return {FilterButton}
+	 * @fires monster-filter-initialized
 	 */
 	[assembleMethodSymbol]() {
 		this.setOption(
 			"templateMapping.filter-save-label",
 			this.getOption("labels.save"),
 		);
+
 		this.setOption(
 			"templateMapping.filter-name-label",
 			this.getOption("labels.filter-name"),
@@ -302,12 +341,19 @@ class Filter extends CustomElement {
 
 		initFromConfig
 			.call(this)
-			.then(() => {
-				initFilter.call(this);
-				updateFilterTabs.call(this);
-			})
+			.then(() => {})
 			.catch((error) => {
 				addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error?.message);
+			})
+			.finally(() => {
+				initFilter.call(this);
+				updateFilterTabs.call(this);
+				doSearch
+					.call(this, { showEffect: false })
+					.then(() => {
+						fireCustomEvent(this, "monster-filter-initialized");
+					})
+					.catch(() => {});
 			});
 	}
 
@@ -316,7 +362,6 @@ class Filter extends CustomElement {
 	 */
 	connectedCallback() {
 		super.connectedCallback();
-
 		getWindow().addEventListener(
 			"hashchange",
 			this[locationChangeHandlerSymbol],
@@ -385,10 +430,13 @@ function updateFilterSelections() {
 	queueMicrotask(() => {
 		const options = this[settingsSymbol].getOptions();
 		this[filterSelectElementSymbol].setOption("options", options);
-		queueMicrotask(() => {
-			this[filterSelectElementSymbol].value =
-				this[settingsSymbol].getSelected();
-		});
+
+		setTimeout(() => {
+			window.requestAnimationFrame(() => {
+				this[filterSelectElementSymbol].value =
+					this[settingsSymbol].getSelected();
+			});
+		}, 0);
 	});
 }
 
@@ -411,7 +459,12 @@ function initFilter() {
 		.forEach((element) => {
 			const label = element.getAttribute("data-monster-label");
 			if (!label) {
-				throw new Error("no filter label is defined");
+				addAttributeToken(
+					this,
+					ATTRIBUTE_ERRORMESSAGE,
+					"no filter label is defined",
+				);
+				return;
 			}
 
 			let value = element.id;
@@ -448,6 +501,7 @@ function initFilter() {
 
 			this[settingsSymbol].set({ value, label, visible });
 		});
+
 	updateFilterSelections.call(this);
 }
 
@@ -499,6 +553,33 @@ function setSlotAttribute(element, visible) {
  */
 function initEventHandler() {
 	const self = this;
+
+	let lastHash = getGlobal().location.hash;
+	self[locationChangeHandlerSymbol] = () => {
+		if (lastHash === getGlobal().location.hash) {
+			return;
+		}
+
+		/**
+		 * debounce the hash change event if doSearch
+		 * is called by click the search button
+		 */
+		if (self[hashChangeSymbol] > 0) {
+			self[hashChangeSymbol]--;
+			return;
+		}
+
+		initFilter.call(this);
+
+		doSearch
+			.call(self)
+			.then(() => {})
+			.catch((error) => {})
+			.finally(() => {
+				lastHash = getGlobal().location.hash;
+			});
+	};
+
 	/**
 	 * Monster.Components.Form.event:monster-selection-cleared
 	 */
@@ -542,6 +623,7 @@ function initEventHandler() {
 		);
 	}
 
+	/** save the current filter */
 	if (self[filterSaveActionButtonElementSymbol]) {
 		self[filterSaveActionButtonElementSymbol].setOption(
 			"actions.click",
@@ -641,6 +723,8 @@ function initEventHandler() {
 	}
 
 	self[searchButtonElementSymbol].setOption("actions.click", () => {
+		self[hashChangeSymbol] = 1;
+
 		doSearch
 			.call(self)
 			.then(() => {})
@@ -684,7 +768,10 @@ function initEventHandler() {
 		}
 
 		if (event.keyCode === 13) {
-			doSearch.call(self, { showEffect: false });
+			doSearch
+				.call(self, { showEffect: false })
+				.then(() => {})
+				.catch((error) => {});
 		}
 	});
 
@@ -696,6 +783,7 @@ function initEventHandler() {
 }
 
 function initTabEvents() {
+	const self = this;
 	this[filterTabElementSymbol].addEventListener(
 		"monster-tab-changed",
 		(event) => {
@@ -836,7 +924,18 @@ function doSearch({ showEffect } = { showEffect: true }) {
 		.call(this)
 		.then((query) => {
 			const buildQuery = buildSearchQuery.call(this, query);
-			if (buildQuery === "" && !this.getOption("defaultQuery")) {
+			if (buildQuery === null) {
+				const msg = this.getOption("labels.empty-query-and-no-default");
+				if (showEffect) {
+					this[searchButtonElementSymbol].removeState();
+					this[searchButtonElementSymbol]
+						.setMessage(msg)
+						.showMessage(this.getOption("timeouts.message", 4000));
+				}
+				return Promise.reject(new Error(msg));
+			}
+
+			if (buildQuery === "" && this.getOption("defaultQuery") === null) {
 				const msg = this.getOption("labels.empty-query-and-no-default");
 
 				if (showEffect) {
@@ -846,7 +945,7 @@ function doSearch({ showEffect } = { showEffect: true }) {
 						.showMessage(this.getOption("timeouts.message", 4000));
 				}
 
-				throw new Error(msg);
+				return Promise.reject(new Error(msg));
 			}
 
 			if (buildQuery === this.getOption("query")) {
@@ -859,7 +958,7 @@ function doSearch({ showEffect } = { showEffect: true }) {
 						.showMessage(this.getOption("timeouts.message", 4000));
 				}
 
-				throw new Error(msg);
+				return Promise.reject(new Error(msg));
 			}
 
 			if (showEffect) {
@@ -870,6 +969,8 @@ function doSearch({ showEffect } = { showEffect: true }) {
 			}
 
 			this.setOption("query", buildSearchQuery.call(this, query));
+
+			return Promise.resolve();
 		})
 		.catch((error) => {
 			if (error instanceof Error) {
@@ -945,7 +1046,6 @@ function collectSearchQueries() {
 					return;
 				}
 
-				//const visible = window.getComputedStyle(element).display !== "none";
 				const visible = getVisibilityFromSlotAttribute(element);
 				if (!visible) {
 					return;
@@ -1136,49 +1236,50 @@ function updateConfig() {
  */
 function getTemplate() {
 	// language=HTML
-	return `<div data-monster-role="control" part="control">
-    <div data-monster-role="container">
-        <div data-monster-role="layout">
-            <div data-monster-role="filter">
-                <slot></slot>
-                <slot name="hidden"></slot>
-            </div>
-            <div data-monster-role="select-and-search">
-                <monster-message-state-button data-monster-role="search-button" class="stretched-control"
-                                              data-monster-replace="path:labels.search">
-                </monster-message-state-button>
-                <monster-select class="stretched-control"
-                                data-monster-selected-template="summary"
-                                data-monster-option-type="checkbox"
-                                data-monster-option-filter-mode="options"
-                                data-monster-option-filter-position="popper"
-                                data-monster-role="filter-select"></monster-select>
-                <monster-popper-button data-monster-role="save-button" class="stretched-control"
-                                       data-monster-attributes="data-monster-visible path:storedConfig.enabled">
-                    <div slot="button">\${filter-save-label}</div>
-                    <div class="monster-form" data-monster-role="form">
-
-                        <label for="filter-name">\${filter-name-label}
-                            <input name="filter-name"
-                                   type="search"
-                                   class="monster-margin-bottom-5"></label>
-                        <monster-message-state-button
-                                data-monster-role="save-action-button"
-                                data-monster-option-labels-button="\${filter-save-label}">
+	return `
+        <div data-monster-role="control" part="control">
+            <div data-monster-role="container">
+                <div data-monster-role="layout">
+                    <div data-monster-role="filter">
+                        <slot></slot>
+                        <slot name="hidden"></slot>
+                    </div>
+                    <div data-monster-role="select-and-search">
+                        <monster-message-state-button data-monster-role="search-button" class="stretched-control"
+                                                      data-monster-replace="path:labels.search">
                         </monster-message-state-button>
-
+                        <monster-select class="stretched-control"
+                                        data-monster-selected-template="summary"
+                                        data-monster-option-type="checkbox"
+                                        data-monster-option-filter-mode="options"
+                                        data-monster-option-filter-position="popper"
+                                        data-monster-role="filter-select"></monster-select>
+                        <monster-popper-button data-monster-role="save-button" class="stretched-control"
+                                               data-monster-attributes="data-monster-visible path:features.storedConfig">
+                            <div slot="button">\${filter-save-label}</div>
+                            <div class="monster-form" data-monster-role="form">
+
+                                <label for="filter-name">\${filter-name-label}
+                                    <input name="filter-name"
+                                           type="search"
+                                           class="monster-margin-bottom-5"></label>
+                                <monster-message-state-button
+                                        data-monster-role="save-action-button"
+                                        data-monster-option-labels-button="\${filter-save-label}">
+                                </monster-message-state-button>
+
+                            </div>
+                        </monster-popper-button>
+                        <monster-button data-monster-role="reset-button" class="stretched-control"
+                                        data-monster-replace="path:labels.reset">
+                        </monster-button>
                     </div>
-                </monster-popper-button>
-                <monster-button data-monster-role="reset-button" class="stretched-control"
-                                data-monster-replace="path:labels.reset">
-                </monster-button>
-            </div>
 
+                </div>
+                <input class="hidden" name="query" data-monster-role="query"
+                       data-monster-attributes="value path:query">
+            </div>
         </div>
-        <input class="hidden" name="query" data-monster-role="query"
-               data-monster-attributes="value path:query">
-    </div>
-</div>
     `;
 }
 

package/source/components/form/form.mjs

@@ -22,6 +22,7 @@ import {
 } from "../../dom/customelement.mjs";
 import { datasourceLinkedElementSymbol } from "../datatable/util.mjs";
 import { FormStyleSheet } from "./stylesheet/form.mjs";
+import { addAttributeToken } from "../../dom/attributes.mjs";
 
 export { Form };
 
@@ -54,7 +55,6 @@ const debounceBindSymbol = Symbol("debounceBind");
  */
 class Form extends DataSet {
 	/**
-	 *
 	 * @property {Object} templates Template definitions
 	 * @property {string} templates.main Main template
 	 * @property {Object} classes Class definitions
@@ -199,7 +199,9 @@ function initEventHandler() {
 
 				this[debounceWriteBackSymbol] = new DeadMansSwitch(200, () => {
 					setTimeout(() => {
-						this.write();
+						this.write().catch((e) => {
+							addAttributeToken(this, "error", e.message || `${e}`);
+						});
 					}, 0);
 				});
 			});

package/source/constants.mjs

@@ -12,7 +12,12 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-export { internalSymbol, internalStateSymbol, instanceSymbol };
+export {
+	internalSymbol,
+	internalStateSymbol,
+	instanceSymbol,
+	proxyInstanceMarker,
+};
 
 /**
  * @private
@@ -35,3 +40,11 @@ const internalStateSymbol = Symbol.for("@schukai/monster/state");
  * @type {symbol}
  */
 const instanceSymbol = Symbol.for("@schukai/monster/instance");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const proxyInstanceMarker = Symbol.for(
+	"@schukai/monster/proxy-instance-marker",
+);

package/source/data/extend.mjs

@@ -53,7 +53,8 @@ function extend(...args) {
 		for (const k in a) {
 			const v = a?.[k];
 
-			if (v === o?.[k]) {
+			if (k in o && v === o?.[k]) {
+				// k in o is for the case of undefined
 				continue;
 			}
 

package/source/data/transformer.mjs

@@ -265,9 +265,11 @@ function transform(value) {
 			validateString(value);
 			return value.toUpperCase();
 
+		case "to-string":
 		case "tostring":
 			return `${value}`;
 
+		case "to-integer":
 		case "tointeger":
 			const n = parseInt(value);
 			validateInteger(n);

package/source/dom/customelement.mjs

@@ -610,9 +610,13 @@ class CustomElement extends HTMLElement {
 			nodeList = elements;
 		}
 
-		this[updateCloneDataSymbol] = clone(
-			this[internalSymbol].getRealSubject()["options"],
-		);
+		try {
+			this[updateCloneDataSymbol] = clone(
+				this[internalSymbol].getRealSubject()["options"],
+			);
+		} catch (e) {
+			addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e?.messages || `${e}`);
+		}
 
 		const cfg = {};
 		if (this.getOption("eventProcessing") === true) {

package/source/dom/updater.mjs

@@ -307,7 +307,11 @@ function getControlEventHandler() {
 		}
 
 		queueMicrotask(() => {
-			retrieveAndSetValue.call(this, element);
+			try {
+				retrieveAndSetValue.call(this, element);
+			} catch (e) {
+				addAttributeToken(element, ATTRIBUTE_ERRORMESSAGE, e.message || `${e}`);
+			}
 		});
 	};