@schukai/monster 3.73.9 → 3.74.0

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 
 
+## [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.74.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

@@ -215,6 +215,7 @@ class Rest extends Datasource {
 	 * @returns {Promise<never>|*}
 	 */
 	fetch() {
+		
 		const opt = clone(this.getOption("read"));
 		this[dataSourceSymbol].setOption("read", opt);
 
@@ -234,7 +235,7 @@ class Rest extends Datasource {
 				datasource: this,
 			});
 
-			setTimeout(() => {
+			queueMicrotask(() => {
 				this[dataSourceSymbol]
 					.read()
 					.then((response) => {
@@ -252,7 +253,7 @@ class Rest extends Datasource {
 						addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error.toString());
 						reject(error);
 					});
-			}, 0);
+			});
 		});
 	}
 
@@ -289,11 +290,11 @@ class Rest extends Datasource {
 	connectedCallback() {
 		super.connectedCallback();
 
-		setTimeout(() => {
+		queueMicrotask(() => {
 			if (this.getOption("features.filter", false) === true) {
 				initFilter.call(this);
 			}
-		}, 0);
+		});
 	}
 
 	/**
@@ -335,7 +336,7 @@ class Rest extends Datasource {
 				datasource: this,
 			});
 
-			setTimeout(() => {
+			queueMicrotask(() => {
 				this[dataSourceSymbol]
 					.write()
 					.then((response) => {
@@ -353,7 +354,7 @@ class Rest extends Datasource {
 						addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error.toString());
 						reject(error);
 					});
-			}, 0);
+			});
 		});
 	}
 }
@@ -492,9 +493,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);
+	});
 }