@schukai/monster 4.51.3 → 4.53.0

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 
 
+## [4.53.0] - 2025-12-28
+
+### Add Features
+
+- Improve button visibility handling and optimize element width calculations
+### Bug Fixes
+
+- Preserve scroll position when updating hash for tabs
+
+
+
+## [4.52.0] - 2025-12-28
+
+### Add Features
+
+- Enhance copy functionality for data table cells
+
+
+
 ## [4.51.3] - 2025-12-28
 
 ### Bug Fixes

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.4","@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":"4.51.3"}
+{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.4","@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":"4.53.0"}

package/source/components/datatable/datatable.mjs

@@ -753,6 +753,18 @@ function updateConfigColumnBar() {
 	}
 }
 
+/**
+ * @private
+ * @param {HTMLElement} cell
+ * @return {string}
+ */
+function getCellValueForCopy(cell) {
+	if (cell.hasAttribute("data-monster-raw-value")) {
+		return cell.getAttribute("data-monster-raw-value");
+	}
+	return cell.textContent.trim();
+}
+
 /**
  * @private
  */
@@ -903,10 +915,11 @@ function initEventHandler() {
 					) {
 						continue;
 					}
-
-					if (col.textContent) {
+					
+					const cellValue = getCellValueForCopy(col);
+					if (cellValue) {
 						colTexts.push(
-							quoteOpenChar + col.textContent.trim() + quoteCloseChar,
+							quoteOpenChar + cellValue + quoteCloseChar,
 						);
 					}
 				}
@@ -920,7 +933,7 @@ function initEventHandler() {
 			) {
 				return;
 			}
-			text = headCell.textContent.trim();
+			text = getCellValueForCopy(headCell);
 		}
 
 		if (getWindow().navigator.clipboard && text) {
@@ -970,9 +983,10 @@ function initEventHandler() {
 						continue;
 					}
 
-					if (col.textContent) {
+					const cellValue = getCellValueForCopy(col);
+					if (cellValue) {
 						currentRow.push(
-							quoteOpenChar + col.textContent.trim() + quoteCloseChar,
+							quoteOpenChar + cellValue + quoteCloseChar,
 						);
 					}
 				}

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

@@ -300,6 +300,19 @@ function initDefaultsFromAttributes(obj) {
 	return obj;
 }
 
+/**
+ * @private
+ * @param {HTMLElement} element
+ * @return {boolean}
+ */
+function isElementTrulyVisible(element) {
+    if (!(element instanceof HTMLElement)) {
+        return false;
+    }
+    const computedStyle = getComputedStyle(element);
+    return computedStyle.display !== 'none' && computedStyle.visibility !== 'hidden' && computedStyle.opacity !== '0' && element.offsetWidth > 0 && element.offsetHeight > 0;
+}
+
 /**
  * @private
  */
@@ -389,16 +402,21 @@ function checkAndRearrangeButtons() {
  * @return {Object}
  */
 function rearrangeButtons() {
-	let sum = this[switchElementSymbol].offsetWidth;
+	let sum = 0;
+	// Only add the popper switch's width if it's currently visible.
+	if (isElementTrulyVisible(this[switchElementSymbol])) {
+		sum += this[switchElementSymbol].offsetWidth;
+	}
 	const space = this[dimensionsSymbol].getVia("data.space");
 
 	const buttonReferences = this[dimensionsSymbol].getVia(
 		"data.buttonReferences",
 	);
 
-	for (const ref of buttonReferences) {
-		sum += this[dimensionsSymbol].getVia(`data.button.${ref}`);
+	const visibleButtonsInMainSlot = [];
+	const buttonsToMoveToPopper = [];
 
+	for (const ref of buttonReferences) {
 		let elements = getSlottedElements.call(
 			this,
 			'[data-monster-reference="' + ref + '"]',
@@ -422,15 +440,33 @@ function rearrangeButtons() {
 			continue;
 		}
 
-		if (sum > space) {
-			element.setAttribute("slot", "popper");
+		if (isElementTrulyVisible(element)) {
+			const buttonWidth = this[dimensionsSymbol].getVia(`data.button.${ref}`);
+			if (sum + buttonWidth > space) {
+				buttonsToMoveToPopper.push(element);
+			} else {
+				sum += buttonWidth;
+				visibleButtonsInMainSlot.push(element);
+			}
 		} else {
-			element.removeAttribute("slot");
+			// If a button is not truly visible, force it into the popper slot
+			buttonsToMoveToPopper.push(element);
 		}
 	}
 
-	const inVisibleButtons = getSlottedElements.call(this, ":scope", "popper"); // null ↦ o
-	if (inVisibleButtons.size > 0) {
+	for (const button of buttonsToMoveToPopper) {
+		button.setAttribute("slot", "popper");
+	}
+
+	for (const button of visibleButtonsInMainSlot) {
+		button.removeAttribute("slot");
+	}
+
+	const trulyVisibleButtonsInPopper = Array.from(
+		getSlottedElements.call(this, ":scope", "popper"),
+	).filter(isElementTrulyVisible);
+
+	if (trulyVisibleButtonsInPopper.length > 0) {
 		this[switchElementSymbol].classList.remove("hidden");
 	} else {
 		this[switchElementSymbol].classList.add("hidden");
@@ -483,9 +519,8 @@ function calculateButtonBarDimensions() {
 		try {
 			pixel = convertToPixels(width);
 		} catch (e) {
-			addAttributeToken(
+			addErrorAttribute(
 				this,
-				ATTRIBUTE_ERRORMESSAGE,
 				e?.message || "An error occurred while calculating the dimensions",
 			);
 		}
@@ -503,9 +538,8 @@ function calculateButtonBarDimensions() {
 		try {
 			borderWidthWithoutUnit = convertToPixels(borderWidth);
 		} catch (e) {
-			addAttributeToken(
+			addErrorAttribute(
 				this,
-				ATTRIBUTE_ERRORMESSAGE,
 				e?.message || "An error occurred while calculating the dimensions",
 			);
 		}
@@ -521,34 +555,34 @@ function calculateButtonBarDimensions() {
 
 	const buttonReferences = [];
 
-	const visibleButtons = getSlottedElements.call(this, ":scope", null); // null ↦ o
-
-	for (const [, button] of visibleButtons.entries()) {
-		if (!button.hasAttribute("data-monster-reference")) {
-			button.setAttribute("data-monster-reference", new ID("vb").toString());
-		}
+	// Get all buttons, regardless of their current slot
+	const allButtons = Array.from(getSlottedElements.call(this, ":scope", null));
+	const popperButtons = Array.from(getSlottedElements.call(this, ":scope", "popper"));
 
-		const ref = button.getAttribute("data-monster-reference");
-		if (ref === null) continue;
+	const combinedButtons = [...allButtons, ...popperButtons].filter((button, index, self) => {
+		// Filter out duplicates based on data-monster-reference if present, or element itself
+		return self.findIndex(b => b.dataset.monsterReference === button.dataset.monsterReference || b === button) === index;
+	});
 
-		buttonReferences.push(ref);
-		this[dimensionsSymbol].setVia(
-			`data.button.${ref}`,
-			calcBoxWidth.call(this, button),
-		);
-	}
+	for (const button of combinedButtons) {
+		if (!(button instanceof HTMLElement)) {
+			continue;
+		}
 
-	const invisibleButtons = getSlottedElements.call(this, ":scope", "popper"); // null ↦ o
-	for (const [, button] of invisibleButtons.entries()) {
 		if (!button.hasAttribute("data-monster-reference")) {
-			button.setAttribute("data-monster-reference", new ID("ib").toString());
+			button.setAttribute("data-monster-reference", new ID("btn").toString());
 		}
 
 		const ref = button.getAttribute("data-monster-reference");
 		if (ref === null) continue;
 
-		if (ref.indexOf("ib") !== 0) {
+		// Only consider truly visible buttons for width calculation
+		if (isElementTrulyVisible(button)) {
 			buttonReferences.push(ref);
+			this[dimensionsSymbol].setVia(
+				`data.button.${ref}`,
+				calcBoxWidth.call(this, button),
+			);
 		}
 	}
 

package/source/components/form/form.mjs

@@ -17,9 +17,9 @@ import "../form/field-set.mjs";
 import { DeadMansSwitch } from "../../util/deadmansswitch.mjs";
 import { DataSet } from "../datatable/dataset.mjs";
 import {
-	assembleMethodSymbol,
-	registerCustomElement,
-	getSlottedElements,
+  assembleMethodSymbol,
+  registerCustomElement,
+  getSlottedElements,
 } from "../../dom/customelement.mjs";
 import { datasourceLinkedElementSymbol } from "../datatable/util.mjs";
 import { FormStyleSheet } from "./stylesheet/form.mjs";
@@ -60,116 +60,116 @@ const debounceBindSymbol = Symbol("debounceBind");
  * @fires monster-changed
  */
 class Form extends DataSet {
-	/**
-	 * @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 {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: ["keyup", "click", "change", "drop", "touchend", "input"],
-			},
-
-			reportValidity: {
-				selector:
-					"input,select,textarea,monster-select,monster-toggle-switch,monster-password",
-			},
-
-			eventProcessing: true,
-		});
-
-		obj["features"]["mutationObserver"] = false;
-		obj["features"]["writeBack"] = true;
-
-		return obj;
-	}
-
-	/**
-	 *
-	 * @return {string}
-	 */
-	static getTag() {
-		return "monster-form";
-	}
-
-	/**
-	 * @return {CSSStyleSheet[]}
-	 */
-	static getCSSStyleSheet() {
-		return [FormStyleSheet, InvalidStyleSheet];
-	}
-
-	/**
-	 *
-	 */
-	[assembleMethodSymbol]() {
-		const selector = this.getOption("datasource.selector");
-
-		if (!selector) {
-			this[datasourceLinkedElementSymbol] = getDocument().createElement(
-				"monster-datasource-dom",
-			);
-		}
-
-		super[assembleMethodSymbol]();
-
-		initControlReferences.call(this);
-		initEventHandler.call(this);
-		initDataSourceHandler.call(this);
-	}
-
-	/**
-	 * This method is called when the component is created.
-	 * @since 3.70.0
-	 * @return {Promise}
-	 */
-	refresh() {
-		return this.write().then(() => {
-			super.refresh();
-			return this;
-		});
-	}
-
-	/**
-	 * Run reportValidation on all child html form controls.
-	 *
-	 * @since 2.10.0
-	 * @return {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 {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: ["keyup", "click", "change", "drop", "touchend", "input"],
+      },
+
+      reportValidity: {
+        selector:
+          "input,select,textarea,monster-select,monster-toggle-switch,monster-password",
+      },
+
+      eventProcessing: true,
+    });
+
+    obj["features"]["mutationObserver"] = false;
+    obj["features"]["writeBack"] = true;
+
+    return obj;
+  }
+
+  /**
+   *
+   * @return {string}
+   */
+  static getTag() {
+    return "monster-form";
+  }
+
+  /**
+   * @return {CSSStyleSheet[]}
+   */
+  static getCSSStyleSheet() {
+    return [FormStyleSheet, InvalidStyleSheet];
+  }
+
+  /**
+   *
+   */
+  [assembleMethodSymbol]() {
+    const selector = this.getOption("datasource.selector");
+
+    if (!selector) {
+      this[datasourceLinkedElementSymbol] = getDocument().createElement(
+        "monster-datasource-dom",
+      );
+    }
+
+    super[assembleMethodSymbol]();
+
+    initControlReferences.call(this);
+    initEventHandler.call(this);
+    initDataSourceHandler.call(this);
+  }
+
+  /**
+   * This method is called when the component is created.
+   * @since 3.70.0
+   * @return {Promise}
+   */
+  refresh() {
+    return this.write().then(() => {
+      super.refresh();
+      return this;
+    });
+  }
+
+  /**
+   * Run reportValidation on all child html form controls.
+   *
+   * @since 2.10.0
+   * @return {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() {}
@@ -179,47 +179,47 @@ function initDataSourceHandler() {}
  * @return {initEventHandler}
  */
 function initEventHandler() {
-	this[debounceBindSymbol] = {};
-
-	if (this.getOption("features.writeBack") === true) {
-		setTimeout(() => {
-			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().catch((e) => {
-								addAttributeToken(this, "error", e.message || `${e}`);
-							});
-						}, 0);
-					});
-				});
-			}
-		}, 0);
-	}
-
-	return this;
+  this[debounceBindSymbol] = {};
+
+  if (this.getOption("features.writeBack") === true) {
+    setTimeout(() => {
+      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().catch((e) => {
+                addAttributeToken(this, "error", e.message || `${e}`);
+              });
+            }, 0);
+          });
+        });
+      }
+    }, 0);
+  }
+
+  return this;
 }
 
 /**
@@ -227,10 +227,10 @@ 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;
 }
 
 /**
@@ -238,8 +238,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"

package/source/components/layout/utils/attach-tabs-hash-sync.mjs

@@ -108,7 +108,10 @@ export function attachTabsHashSync(
 
 		const newHash = createBracketedKeyValueHash(hashObj);
 		if (location.hash !== newHash) {
+			const scrollX = window.scrollX;
+			const scrollY = window.scrollY;
 			history.replaceState(null, "", newHash);
+			window.scrollTo(scrollX, scrollY);
 		}
 		lastKnownActiveTabId = activeTabId;
 		lastKnownAllTabIds = allTabIds;