@schukai/monster 4.137.4 → 4.137.6

package/package.json

@@ -1 +1 @@
-{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"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":"4.137.4"}
+{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"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":"4.137.6"}

package/source/components/datatable/pagination.mjs

@@ -89,6 +89,7 @@ const layoutApplySymbol = Symbol("layoutApply");
  */
 const labelStateSymbol = Symbol("labelState");
 const layoutModeSymbol = Symbol("layoutMode");
+const layoutMeasurementCacheSymbol = Symbol("layoutMeasurementCache");
 const lastNavClickTimeSymbol = Symbol("lastNavClickTime");
 const lastNavClickTargetSymbol = Symbol("lastNavClickTarget");
 
@@ -919,43 +920,38 @@ function applyPaginationLayout() {
 			return;
 		}
 
-		list.classList.add("pagination-no-wrap");
-		list.setAttribute("data-monster-adaptive-ready", "false");
-
 		const prevLink = this.shadowRoot.querySelector(
 			"a[data-monster-role=pagination-prev]",
 		);
 		const nextLink = this.shadowRoot.querySelector(
 			"a[data-monster-role=pagination-next]",
 		);
+		const signature = getPaginationLayoutSignature.call(this, list);
+		const cache = getPaginationLayoutCache.call(this);
 
-		const widthFull = applyPaginationMode.call(
-			this,
-			list,
-			prevLink,
-			nextLink,
-			"full",
-		);
-		const widthNoNumbers = applyPaginationMode.call(
-			this,
-			list,
-			prevLink,
-			nextLink,
-			"no-numbers",
-		);
-		const widthCompactSummary = applyPaginationMode.call(
-			this,
-			list,
-			prevLink,
-			nextLink,
-			"compact-summary",
-		);
-		const widthCompact = applyPaginationMode.call(
+		if (
+			cache.lastAppliedSignature === signature &&
+			cache.lastAvailableWidth === availableWidth &&
+			cache.lastAppliedMode === this[layoutModeSymbol] &&
+			list.getAttribute("data-monster-adaptive-ready") === "true"
+		) {
+			return;
+		}
+
+		setClassEnabled(list, "pagination-no-wrap", true);
+		setAttributeValue(list, "data-monster-adaptive-ready", "false");
+
+		const {
+			widthFull,
+			widthNoNumbers,
+			widthCompactSummary,
+			widthCompact,
+		} = measurePaginationModeWidths.call(
 			this,
 			list,
 			prevLink,
 			nextLink,
-			"compact",
+			signature,
 		);
 
 		const nextMode = choosePaginationMode.call(this, {
@@ -967,7 +963,10 @@ function applyPaginationLayout() {
 		});
 
 		applyPaginationMode.call(this, list, prevLink, nextLink, nextMode);
-		list.setAttribute("data-monster-adaptive-ready", "true");
+		setAttributeValue(list, "data-monster-adaptive-ready", "true");
+		cache.lastAppliedSignature = signature;
+		cache.lastAvailableWidth = availableWidth;
+		cache.lastAppliedMode = nextMode;
 	} finally {
 		this[layoutApplySymbol] = false;
 	}
@@ -998,7 +997,7 @@ function setNumberItemsVisible(list, visible) {
 	for (const item of numberItems) {
 		const container = item.parentElement;
 		if (!container) continue;
-		container.style.display = visible ? "" : "none";
+		setStyleValue(container, "display", visible ? "" : "none");
 	}
 }
 
@@ -1014,7 +1013,7 @@ function setSummaryVisible(list, visible) {
 	if (!summaryItem) {
 		return;
 	}
-	summaryItem.style.display = visible ? "flex" : "none";
+	setStyleValue(summaryItem, "display", visible ? "flex" : "none");
 }
 
 /**
@@ -1047,11 +1046,11 @@ function setCompactLabels(compact, prevLink, nextLink) {
 	if (!state) return;
 
 	if (compact) {
-		if (prevLink) prevLink.innerHTML = compactPrevIcon;
-		if (nextLink) nextLink.innerHTML = compactNextIcon;
+		setInnerHTML(prevLink, compactPrevIcon);
+		setInnerHTML(nextLink, compactNextIcon);
 	} else {
-		if (prevLink) prevLink.innerHTML = state.previous;
-		if (nextLink) nextLink.innerHTML = state.next;
+		setInnerHTML(prevLink, state.previous);
+		setInnerHTML(nextLink, state.next);
 	}
 }
 
@@ -1161,29 +1160,29 @@ function getEmbeddedAvailableWidth(parentNode) {
 function applyPaginationMode(list, prevLink, nextLink, mode) {
 	switch (mode) {
 		case "compact":
-			list.classList.add("pagination-numbers-hidden");
-			list.classList.add("pagination-compact");
+			setClassEnabled(list, "pagination-numbers-hidden", true);
+			setClassEnabled(list, "pagination-compact", true);
 			setNumberItemsVisible(list, false);
 			setSummaryVisible(list, true);
 			setCompactLabels.call(this, true, prevLink, nextLink);
 			break;
 		case "compact-summary":
-			list.classList.add("pagination-numbers-hidden");
-			list.classList.add("pagination-compact");
+			setClassEnabled(list, "pagination-numbers-hidden", true);
+			setClassEnabled(list, "pagination-compact", true);
 			setNumberItemsVisible(list, false);
 			setSummaryVisible(list, true);
 			setCompactLabels.call(this, true, prevLink, nextLink);
 			break;
 		case "no-numbers":
-			list.classList.add("pagination-numbers-hidden");
-			list.classList.remove("pagination-compact");
+			setClassEnabled(list, "pagination-numbers-hidden", true);
+			setClassEnabled(list, "pagination-compact", false);
 			setNumberItemsVisible(list, false);
 			setSummaryVisible(list, true);
 			setCompactLabels.call(this, false, prevLink, nextLink);
 			break;
 		default:
-			list.classList.remove("pagination-numbers-hidden");
-			list.classList.remove("pagination-compact");
+			setClassEnabled(list, "pagination-numbers-hidden", false);
+			setClassEnabled(list, "pagination-compact", false);
 			setNumberItemsVisible(list, true);
 			setSummaryVisible(list, false);
 			setCompactLabels.call(this, false, prevLink, nextLink);
@@ -1193,6 +1192,172 @@ function applyPaginationMode(list, prevLink, nextLink, mode) {
 	return list.scrollWidth;
 }
 
+/**
+ * @private
+ * @param {HTMLElement} list
+ * @param {HTMLElement|null} prevLink
+ * @param {HTMLElement|null} nextLink
+ * @param {string} signature
+ * @return {object}
+ */
+function measurePaginationModeWidths(list, prevLink, nextLink, signature) {
+	const cache = getPaginationLayoutCache.call(this);
+	if (cache.widthSignature === signature && cache.widths) {
+		return cache.widths;
+	}
+
+	const widths = {
+		widthFull: applyPaginationMode.call(
+			this,
+			list,
+			prevLink,
+			nextLink,
+			"full",
+		),
+		widthNoNumbers: applyPaginationMode.call(
+			this,
+			list,
+			prevLink,
+			nextLink,
+			"no-numbers",
+		),
+		widthCompactSummary: applyPaginationMode.call(
+			this,
+			list,
+			prevLink,
+			nextLink,
+			"compact-summary",
+		),
+		widthCompact: applyPaginationMode.call(
+			this,
+			list,
+			prevLink,
+			nextLink,
+			"compact",
+		),
+	};
+
+	cache.widthSignature = signature;
+	cache.widths = widths;
+	return widths;
+}
+
+/**
+ * @private
+ * @return {object}
+ */
+function getPaginationLayoutCache() {
+	if (!this[layoutMeasurementCacheSymbol]) {
+		this[layoutMeasurementCacheSymbol] = {
+			lastAppliedMode: null,
+			lastAppliedSignature: null,
+			lastAvailableWidth: null,
+			widthSignature: null,
+			widths: null,
+		};
+	}
+
+	return this[layoutMeasurementCacheSymbol];
+}
+
+/**
+ * @private
+ * @param {HTMLElement} list
+ * @return {string}
+ */
+function getPaginationLayoutSignature(list) {
+	const pagination = this.getOption("pagination", {});
+	const itemSignature = Array.isArray(pagination.items)
+		? pagination.items
+				.map((item) => {
+					return [
+						item?.class || "",
+						item?.href || "",
+						item?.label || "",
+						item?.no ?? "",
+					].join(":");
+				})
+				.join("|")
+		: "";
+
+	return [
+		pagination.current ?? "",
+		pagination.pages ?? "",
+		pagination.summary ?? "",
+		pagination.prevClass ?? "",
+		pagination.prevHref ?? "",
+		pagination.prevNo ?? "",
+		pagination.nextClass ?? "",
+		pagination.nextHref ?? "",
+		pagination.nextNo ?? "",
+		itemSignature,
+		list.children.length,
+	].join("::");
+}
+
+/**
+ * @private
+ * @param {HTMLElement|null} element
+ * @param {string} className
+ * @param {boolean} enabled
+ * @return {void}
+ */
+function setClassEnabled(element, className, enabled) {
+	if (!(element instanceof HTMLElement)) {
+		return;
+	}
+	if (element.classList.contains(className) !== enabled) {
+		element.classList.toggle(className, enabled);
+	}
+}
+
+/**
+ * @private
+ * @param {HTMLElement|null} element
+ * @param {string} name
+ * @param {string} value
+ * @return {void}
+ */
+function setAttributeValue(element, name, value) {
+	if (!(element instanceof HTMLElement)) {
+		return;
+	}
+	if (element.getAttribute(name) !== value) {
+		element.setAttribute(name, value);
+	}
+}
+
+/**
+ * @private
+ * @param {HTMLElement|null} element
+ * @param {string} property
+ * @param {string} value
+ * @return {void}
+ */
+function setStyleValue(element, property, value) {
+	if (!(element instanceof HTMLElement)) {
+		return;
+	}
+	if (element.style[property] !== value) {
+		element.style[property] = value;
+	}
+}
+
+/**
+ * @private
+ * @param {HTMLElement|null} element
+ * @param {string} value
+ * @return {void}
+ */
+function setInnerHTML(element, value) {
+	if (!(element instanceof HTMLElement)) {
+		return;
+	}
+	if (element.innerHTML !== value) {
+		element.innerHTML = value;
+	}
+}
+
 /**
  * @private
  * @param {object} params

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

@@ -129,6 +129,14 @@ const switchElementSymbol = Symbol("switchElement");
 const layoutStateSymbol = Symbol("layoutState");
 const layoutFrameSymbol = Symbol("layoutFrame");
 const layoutTokenSymbol = Symbol("layoutToken");
+const observedLayoutNodesSignatureSymbol = Symbol("observedLayoutNodesSignature");
+
+/**
+ * @private
+ * @type {WeakMap<HTMLElement, number>}
+ */
+const layoutNodeIds = new WeakMap();
+let layoutNodeId = 0;
 
 /**
  * @private
@@ -209,6 +217,7 @@ class ButtonBar extends CustomElement {
 			needsLayout: true,
 			needsObserve: true,
 			suppressSlotChange: false,
+			suppressMutation: false,
 		};
 
 		initControlReferences.call(this);
@@ -385,6 +394,10 @@ function initEventHandler() {
 	const self = this;
 
 	const mutationCallback = (mutationList) => {
+		if (self[layoutStateSymbol]?.suppressMutation) {
+			return;
+		}
+
 		let needsRecalc = false;
 		for (const mutation of mutationList) {
 			if (mutation.type === "attributes") {
@@ -572,7 +585,6 @@ function runLayout() {
  * @return {Object}
  */
 function rearrangeButtons() {
-	const state = this[layoutStateSymbol];
 	let space = 0;
 	try {
 		space = this[dimensionsSymbol].getVia("data.space");
@@ -660,28 +672,22 @@ function rearrangeButtons() {
 	const shouldShowSwitch =
 		layout.buttonsToMoveToPopper.length > 0 && hasButtons;
 
-	if (state) {
-		state.suppressSlotChange = true;
-	}
+	suppressLayoutFeedback.call(this);
 
 	for (const button of layout.buttonsToMoveToPopper) {
-		button.setAttribute("slot", "popper");
+		if (button.getAttribute("slot") !== "popper") {
+			button.setAttribute("slot", "popper");
+		}
 	}
 
 	for (const button of layout.visibleButtonsInMainSlot) {
-		button.removeAttribute("slot");
-	}
-
-	if (state) {
-		state.suppressSlotChange = false;
+		if (button.hasAttribute("slot")) {
+			button.removeAttribute("slot");
+		}
 	}
 
-	if (shouldShowSwitch) {
-		this[switchElementSymbol].removeAttribute("hidden");
-		this[switchElementSymbol].classList.remove("hidden");
-	} else {
-		this[switchElementSymbol].setAttribute("hidden", "");
-		this[switchElementSymbol].classList.add("hidden");
+	setSwitchVisible.call(this, shouldShowSwitch);
+	if (!shouldShowSwitch) {
 		hide.call(this);
 	}
 }
@@ -831,34 +837,123 @@ function calculateButtonBarDimensions() {
  * @private
  */
 function updateResizeObserverObservation() {
+	const observedNodes = getLayoutObservedNodes.call(this);
+	const signature = getLayoutObservedNodesSignature(observedNodes);
+	if (this[observedLayoutNodesSignatureSymbol] === signature) {
+		return;
+	}
+	this[observedLayoutNodesSignatureSymbol] = signature;
+
 	this[resizeObserverSymbol].disconnect();
 	if (this[mutationObserverSymbol]) {
 		this[mutationObserverSymbol].disconnect();
 	}
 
-	const slottedNodes = getSlottedElements.call(this);
-	slottedNodes.forEach((node) => {
+	observedNodes.forEach((node) => {
 		this[resizeObserverSymbol].observe(node);
-		if (this[mutationObserverSymbol]) {
+		if (node !== this.parentElement && this[mutationObserverSymbol]) {
 			this[mutationObserverSymbol].observe(node, {
 				attributes: true,
 				attributeFilter: ["style", "class", "hidden"],
 			});
 		}
 	});
+}
 
-	requestAnimationFrame(() => {
-		let parent = this.parentNode;
-		while (!(parent instanceof HTMLElement) && parent !== null) {
-			parent = parent.parentNode;
+/**
+ * @private
+ * @return {HTMLElement[]}
+ */
+function getLayoutObservedNodes() {
+	const observedNodes = [];
+	const slottedNodes = getSlottedElements.call(this);
+	slottedNodes.forEach((node) => {
+		if (node instanceof HTMLElement) {
+			observedNodes.push(node);
 		}
+	});
 
-		if (parent instanceof HTMLElement) {
-			this[resizeObserverSymbol].observe(parent);
-		}
+	let parent = this.parentNode;
+	while (!(parent instanceof HTMLElement) && parent !== null) {
+		parent = parent.parentNode;
+	}
+
+	if (parent instanceof HTMLElement) {
+		observedNodes.push(parent);
+	}
+
+	return observedNodes;
+}
+
+/**
+ * @private
+ * @param {HTMLElement[]} nodes
+ * @return {string}
+ */
+function getLayoutObservedNodesSignature(nodes) {
+	return nodes.map(getLayoutNodeId).join("|");
+}
+
+/**
+ * @private
+ * @param {HTMLElement} node
+ * @return {number}
+ */
+function getLayoutNodeId(node) {
+	let id = layoutNodeIds.get(node);
+	if (id === undefined) {
+		id = ++layoutNodeId;
+		layoutNodeIds.set(node, id);
+	}
+	return id;
+}
+
+/**
+ * @private
+ * @return {void}
+ */
+function suppressLayoutFeedback() {
+	const state = this[layoutStateSymbol];
+	if (!state) {
+		return;
+	}
+
+	state.suppressSlotChange = true;
+	state.suppressMutation = true;
+	queueMicrotask(() => {
+		state.suppressSlotChange = false;
+		state.suppressMutation = false;
 	});
 }
 
+/**
+ * @private
+ * @param {boolean} visible
+ * @return {void}
+ */
+function setSwitchVisible(visible) {
+	if (!(this[switchElementSymbol] instanceof HTMLElement)) {
+		return;
+	}
+
+	if (visible) {
+		if (this[switchElementSymbol].hasAttribute("hidden")) {
+			this[switchElementSymbol].removeAttribute("hidden");
+		}
+		if (this[switchElementSymbol].classList.contains("hidden")) {
+			this[switchElementSymbol].classList.remove("hidden");
+		}
+		return;
+	}
+
+	if (!this[switchElementSymbol].hasAttribute("hidden")) {
+		this[switchElementSymbol].setAttribute("hidden", "");
+	}
+	if (!this[switchElementSymbol].classList.contains("hidden")) {
+		this[switchElementSymbol].classList.add("hidden");
+	}
+}
+
 /**
  * @private
  */
@@ -866,6 +961,7 @@ function disconnectResizeObserver() {
 	if (this[resizeObserverSymbol] instanceof ResizeObserver) {
 		this[resizeObserverSymbol].disconnect();
 	}
+	this[observedLayoutNodesSignatureSymbol] = null;
 }
 
 /**

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

@@ -282,7 +282,7 @@ function getTemplate() {
                     <div data-monster-replace="path:content"></div>
                 </div>
             </div>
-			
+
         </div>
     `;
 }