@schukai/monster 3.73.9 → 3.75.0

package/CHANGELOG.md

@@ -2,6 +2,33 @@
 
 
 
+## [3.75.0] - 2024-09-23
+
+### Add Features
+
+- marker for select filter [#240](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/240)
+### Changes
+
+- remove unused files
+- run webtests
+- new development cert
+### Documentation
+
+- fix some small issues
+
+
+
+## [3.74.0] - 2024-09-18
+
+### Add Features
+
+- new slider [#237](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/237)
+### Bug Fixes
+
+- performance tweak [#235](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/235)
+
+
+
 ## [3.73.9] - 2024-09-15
 
 ### Bug Fixes

package/package.json

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

package/source/components/datatable/change-button.mjs

@@ -222,7 +222,7 @@ function initControlReferences() {
 	);
 
 	if (this[stateButtonElementSymbol]) {
-		setTimeout(() => {
+		queueMicrotask(() => {
 			const states = {
 				changed: new State(
 					"changed",
@@ -239,7 +239,7 @@ function initControlReferences() {
 				"labels.button",
 				this.getOption("labels.button"),
 			);
-		}, 1);
+		});
 	}
 
 	return this;
@@ -278,7 +278,7 @@ function getIndex() {
  * @private
  */
 function initEventHandler() {
-	setTimeout(() => {
+	queueMicrotask(() => {
 		this[stateButtonElementSymbol].setOption("actions.click", () => {
 			const index = getIndex.call(this);
 
@@ -287,7 +287,7 @@ function initEventHandler() {
 				this[overlayLinkedElementSymbol].open();
 			}
 		});
-	}, 1);
+	});
 }
 
 /**

package/source/components/datatable/columnbar.mjs

@@ -249,12 +249,12 @@ function initEventHandler() {
 			if (self[settingsLayerElementSymbol].classList.contains("visible")) {
 				self[popperInstanceSymbol].update();
 
-				setTimeout(() => {
+				queueMicrotask(() => {
 					document.body.addEventListener(
 						"click",
 						self[settingsButtonEventHandlerSymbol],
 					);
-				}, 0);
+				});
 			}
 		}
 	});

package/source/components/datatable/dataset.mjs

@@ -198,7 +198,7 @@ class DataSet extends CustomElement {
 				return;
 			}
 
-			setTimeout(() => {
+			queueMicrotask(() => {
 				const path = this.getOption("mapping.data");
 				const index = this.getOption("mapping.index");
 
@@ -224,7 +224,7 @@ class DataSet extends CustomElement {
 				this[datasourceLinkedElementSymbol].data = ref;
 
 				resolve();
-			}, 0);
+			});
 		});
 	}
 

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

@@ -234,7 +234,7 @@ class Rest extends Datasource {
 				datasource: this,
 			});
 
-			setTimeout(() => {
+			queueMicrotask(() => {
 				this[dataSourceSymbol]
 					.read()
 					.then((response) => {
@@ -252,7 +252,7 @@ class Rest extends Datasource {
 						addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error.toString());
 						reject(error);
 					});
-			}, 0);
+			});
 		});
 	}
 
@@ -289,11 +289,11 @@ class Rest extends Datasource {
 	connectedCallback() {
 		super.connectedCallback();
 
-		setTimeout(() => {
+		queueMicrotask(() => {
 			if (this.getOption("features.filter", false) === true) {
 				initFilter.call(this);
 			}
-		}, 0);
+		});
 	}
 
 	/**
@@ -335,7 +335,7 @@ class Rest extends Datasource {
 				datasource: this,
 			});
 
-			setTimeout(() => {
+			queueMicrotask(() => {
 				this[dataSourceSymbol]
 					.write()
 					.then((response) => {
@@ -353,7 +353,7 @@ class Rest extends Datasource {
 						addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error.toString());
 						reject(error);
 					});
-			}, 0);
+			});
 		});
 	}
 }
@@ -492,9 +492,9 @@ function initAutoInit() {
 		return;
 	}
 
-	setTimeout(() => {
+	queueMicrotask(() => {
 		this.fetch().catch(() => {});
-	}, 0);
+	});
 }
 
 function initEventHandler() {

package/source/components/datatable/datatable.mjs

@@ -290,12 +290,12 @@ class DataTable extends CustomElement {
 
 			this[datasourceLinkedElementSymbol] = element;
 
-			setTimeout(() => {
+			queueMicrotask(() => {
 				handleDataSourceChanges.call(this);
 				element.datasource.attachObserver(
 					new Observer(handleDataSourceChanges.bind(this)),
 				);
-			}, 0);
+			});
 		}
 
 		getHostConfig
@@ -658,7 +658,7 @@ function initEventHandler() {
 
 			headers[index].changeDirection();
 
-			setTimeout(function () {
+			queueMicrotask(function () {
 				/** hotfix, normally this should be done via the updater, no idea why this is not possible. */
 				element.setAttribute(
 					ATTRIBUTE_DATATABLE_SORTABLE,
@@ -666,7 +666,7 @@ function initEventHandler() {
 				);
 
 				storeOrderStatement.call(self, true);
-			}, 0);
+			});
 		}
 	});
 }
@@ -797,9 +797,9 @@ function initGridAndStructs(hostConfig, headerOrderMap) {
 	}
 
 	this.setOption("headers", headers);
-	setTimeout(() => {
+	queueMicrotask(() => {
 		storeOrderStatement.call(this, this.getOption("features.autoInit"));
-	}, 0);
+	});
 }
 
 /**

package/source/components/datatable/filter/date-range.mjs

@@ -480,9 +480,9 @@ function initEventHandler() {
 
 	// change the input value if the user change the value of the radio button
 	this[inputElementSymbol].addEventListener("change", (event) => {
-		setTimeout(() => {
+		queueMicrotask(() => {
 			updatePopperInputsFromMainValue.call(this);
-		}, 0);
+		});
 	});
 
 	// if the user change the value of on of the input fields, we should update the value of the input field
@@ -514,9 +514,9 @@ function initEventHandler() {
 		if (event.key === "Escape") {
 			hide.call(this);
 
-			setTimeout(() => {
+			queueMicrotask(() => {
 				this[inputElementSymbol].focus();
-			}, 10);
+			});
 
 			return;
 		}
@@ -600,10 +600,10 @@ function show() {
 		clearAndDisableFormGroups.call(this);
 	}
 
-	setTimeout(() => {
+	queueMicrotask(() => {
 		updatePopperInputsFromMainValue.call(this);
 		updatePopper.call(this);
-	}, 0);
+	});
 }
 
 /**

package/source/components/datatable/filter/range.mjs

@@ -412,9 +412,9 @@ function initEventHandler() {
 		// if key code esc than hide dialog
 		if (event.key === "Escape") {
 			hide.call(this);
-			setTimeout(() => {
+			queueMicrotask(() => {
 				this[inputElementSymbol].focus();
-			}, 10);
+			});
 
 			return;
 		}
@@ -438,7 +438,7 @@ function initEventHandler() {
 			if (radio) {
 				radio.checked = true;
 			}
-			setTimeout(() => {
+			queueMicrotask(() => {
 				// focus the input field
 				const input = this[formContainerElementSymbol].querySelector(
 					"input[type=radio][value=single] ~ input[name=singleValue]",
@@ -446,7 +446,7 @@ function initEventHandler() {
 				if (input) {
 					input.focus();
 				}
-			}, 10);
+			});
 		}
 	});
 

package/source/components/datatable/filter.mjs

@@ -386,14 +386,14 @@ function initControlReferences() {
 }
 
 function updateFilterSelections() {
-	setTimeout(() => {
+	queueMicrotask(() => {
 		const options = this[settingsSymbol].getOptions();
 		this[filterSelectElementSymbol].setOption("options", options);
-		setTimeout(() => {
+		queueMicrotask(() => {
 			this[filterSelectElementSymbol].value =
 				this[settingsSymbol].getSelected();
-		}, 10);
-	}, 10);
+		});
+	});
 }
 
 /**

package/source/components/datatable/save-button.mjs

@@ -260,7 +260,7 @@ function initControlReferences() {
 	);
 
 	if (this[stateButtonElementSymbol]) {
-		setTimeout(() => {
+		queueMicrotask(() => {
 			const states = {
 				changed: new State(
 					"changed",
@@ -278,7 +278,7 @@ function initControlReferences() {
 				"labels.button",
 				this.getOption("labels.button"),
 			);
-		}, 1);
+		});
 	}
 
 	return this;
@@ -288,7 +288,7 @@ function initControlReferences() {
  * @private
  */
 function initEventHandler() {
-	setTimeout(() => {
+	queueMicrotask(() => {
 		this[stateButtonElementSymbol].setOption("actions.click", () => {
 			this[datasourceLinkedElementSymbol]
 				.write()
@@ -308,7 +308,7 @@ function initEventHandler() {
 					addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error.toString());
 				});
 		});
-	}, 1);
+	});
 }
 
 /**

package/source/components/datatable/util.mjs

@@ -66,7 +66,7 @@ function handleDataSourceChanges() {
 		return;
 	}
 
-	setTimeout(() => {
+	queueMicrotask(() => {
 		this.setOption("data", data);
-	}, 0);
+	});
 }

package/source/components/form/api-button.mjs

@@ -204,7 +204,6 @@ class ApiButton extends ActionButton {
 	/**
 	 * Import buttons from a map.
 	 *
-	 * @since 0.16.0
 	 * @param {array|object|Map|Set} data
 	 * @return {Monster.Components.Form.ApiButton}
 	 * @throws {Error} map is not iterable

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

@@ -81,7 +81,6 @@ class ContextError extends Popper {
 	 * This method is called by the `instanceof` operator.
 	 *
 	 * @returns {symbol}
-	 * @since 2.1.0
 	 */
 	static get [instanceSymbol]() {
 		return Symbol.for(

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

@@ -71,7 +71,6 @@ class ContextHelp extends Popper {
 	/**
 	 * This method is called by the `instanceof` operator.
 	 * @returns {symbol}
-	 * @since 2.1.0
 	 */
 	static get [instanceSymbol]() {
 		return Symbol.for(

package/source/components/form/message-state-button.mjs

@@ -88,7 +88,6 @@ class MessageStateButton extends Popper {
 	/**
 	 * This method is called by the `instanceof` operator.
 	 * @returns {symbol}
-	 * @since 2.1.0
 	 */
 	static get [instanceSymbol]() {
 		return Symbol.for(

package/source/components/form/popper-button.mjs

@@ -331,7 +331,6 @@ class PopperButton extends Popper {
 	 * ```
 	 *
 	 * @property {string|array} value
-	 * @since 1.2.0
 	 * @throws {Error} unsupported type
 	 */
 	set value(value) {

package/source/components/form/select.mjs

@@ -277,7 +277,6 @@ const FILTER_POSITION_INLINE = "inline";
  * @example /examples/components/form/select-simple
  * @example /examples/components/form/select-with-options
  *
- * @since 1.0.0
  * @copyright schukai GmbH
  * @summary A beautiful select control that can make your life easier and also looks good.
  * @fires monster-options-set
@@ -297,7 +296,6 @@ class Select extends CustomControl {
 	/**
 	 * This method is called by the `instanceof` operator.
 	 * @returns {Symbol}
-	 * @since 2.1.0
 	 */
 	static get [instanceSymbol]() {
 		return Symbol.for("@schukai/monster/components/form/select@@instance");
@@ -336,7 +334,6 @@ class Select extends CustomControl {
 	 * ```
 	 *
 	 * @property {string|array} value
-	 * @since 1.2.0
 	 * @throws {Error} unsupported type
 	 */
 	set value(value) {
@@ -458,6 +455,10 @@ class Select extends CustomControl {
 					defaultValue: "*",
 					mode: FILTER_MODE_DISABLED,
 					position: FILTER_POSITION_INLINE,
+					marker: {
+						open: "{",
+						close: "}",
+					},
 				},
 				classes: {
 					badge: "monster-badge-primary",
@@ -721,7 +722,6 @@ class Select extends CustomControl {
 	 * Import Select Options from dataset
 	 * Not to be confused with the control defaults/options
 	 *
-	 * @since 0.16.0
 	 * @param {array|object|Map|Set} data
 	 * @return {Select}
 	 * @throws {Error} map is not iterable
@@ -1473,7 +1473,18 @@ function filterFromRemote() {
 		);
 		let url = optionUrl;
 		if (filterValue.length > 0) {
-			url = new Formatter({ filter: filterValue }).format(optionUrl);
+			const formatter = new Formatter({ filter: filterValue });
+			const openMarker = this.getOption("formatter.marker.open");
+			let closeMarker = this.getOption("formatter.marker.close");
+			if (!closeMarker) {
+				closeMarker = openMarker;
+			}
+
+			if (openMarker && closeMarker) {
+				formatter.setMarker(openMarker, closeMarker);
+			}
+
+			url = formatter.format(optionUrl);
 		}
 
 		this.fetch(url)

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

@@ -105,8 +105,6 @@ class ToggleSwitch extends CustomControl {
 	 * @property {string} actions.off=specifies the action for the off state.
 	 * @property {Object} templates
 	 * @property {string} templates.main=specifies the main template used by the control.
-	 *
-	 * @since 3.57.0
 	 */
 	get defaults() {
 		return Object.assign({}, super.defaults, {
@@ -317,7 +315,6 @@ class ToggleSwitch extends CustomControl {
 	/**
 	 * This method is called by the `instanceof` operator.
 	 * @returns {symbol}
-	 * @since 2.1.0
 	 */
 	static get [instanceSymbol]() {
 		return Symbol.for(

package/source/components/form/tree-select.mjs

@@ -133,7 +133,6 @@ class TreeSelect extends Select {
 	 * Import Select Options from dataset
 	 * Not to be confused with the control defaults/options
 	 *
-	 * @since 0.16.0
 	 * @param {array|object|Map|Set} data
 	 * @return {Select}
 	 * @throws {Error} map is not iterable