@schukai/monster 4.93.0 → 4.94.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 
 
+## [4.94.0] - 2026-01-13
+
+### Add Features
+
+- Add demo page for "column-bar dots too long" issue [#373](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/373)
+
+
+
 ## [4.93.0] - 2026-01-13
 
 ### Add Features

package/package.json

@@ -1 +1 @@
-{"author":"Volker Schukai","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.93.0"}
+{"author":"Volker Schukai","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.94.0"}

package/source/components/datatable/columnbar.mjs

@@ -65,6 +65,23 @@ const popperInstanceSymbol = Symbol("popperInstance");
  */
 const closeEventHandlerSymbol = Symbol("closeEventHandler");
 
+/**
+ * @private
+ * @type {symbol}
+ */
+const resizeObserverSymbol = Symbol("resizeObserver");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const dotsMutationObserverSymbol = Symbol("dotsMutationObserver");
+/**
+ * @private
+ * @type {symbol}
+ */
+const dotsUpdateInProgressSymbol = Symbol("dotsUpdateInProgress");
+
 /**
  * A column bar for a datatable
  *
@@ -102,6 +119,8 @@ class ColumnBar extends CustomElement {
 	 * @property {string} templates.main Main template
 	 * @property {object} labels Locale definitions
 	 * @property {string} locale.settings The text for the settings button
+	 * @property {object} dots Dots configuration
+	 * @property {number} dots.maxVisible Max dots to show (0 disables limit)
 	 */
 	get defaults() {
 		return Object.assign({}, super.defaults, {
@@ -109,6 +128,9 @@ class ColumnBar extends CustomElement {
 				main: getTemplate(),
 			},
 			labels: getTranslations(),
+			dots: {
+				maxVisible: 15,
+			},
 
 			columns: [],
 		});
@@ -144,6 +166,11 @@ class ColumnBar extends CustomElement {
 			"touch",
 			this[closeEventHandlerSymbol],
 		);
+
+		queueMicrotask(() => {
+			initDotsObservers.call(this);
+			updateDotsVisibility.call(this);
+		});
 	}
 
 	/**
@@ -155,6 +182,16 @@ class ColumnBar extends CustomElement {
 	disconnectedCallback() {
 		super.disconnectedCallback();
 
+		if (this[resizeObserverSymbol] instanceof ResizeObserver) {
+			this[resizeObserverSymbol].disconnect();
+			this[resizeObserverSymbol] = null;
+		}
+
+		if (this[dotsMutationObserverSymbol] instanceof MutationObserver) {
+			this[dotsMutationObserverSymbol].disconnect();
+			this[dotsMutationObserverSymbol] = null;
+		}
+
 		if (this[closeEventHandlerSymbol]) {
 			getGlobalObject("document").removeEventListener(
 				"click",
@@ -367,6 +404,173 @@ function initEventHandler() {
 	});
 }
 
+/**
+ * @private
+ */
+function initDotsObservers() {
+	const controlElement = this.shadowRoot?.querySelector(
+		"[data-monster-role=control]",
+	);
+	const parentElement = this.parentElement;
+
+	if (controlElement && !this[resizeObserverSymbol]) {
+		this[resizeObserverSymbol] = new ResizeObserver(() => {
+			updateDotsVisibility.call(this);
+		});
+		this[resizeObserverSymbol].observe(controlElement);
+		if (parentElement) {
+			this[resizeObserverSymbol].observe(parentElement);
+		}
+	}
+
+	if (this[dotsContainerElementSymbol] && !this[dotsMutationObserverSymbol]) {
+		this[dotsMutationObserverSymbol] = new MutationObserver(() => {
+			if (this[dotsUpdateInProgressSymbol]) {
+				return;
+			}
+			requestAnimationFrame(() => updateDotsVisibility.call(this));
+		});
+		this[dotsMutationObserverSymbol].observe(this[dotsContainerElementSymbol], {
+			childList: true,
+		});
+	}
+}
+
+/**
+ * @private
+ */
+function updateDotsVisibility() {
+	if (this[dotsUpdateInProgressSymbol]) {
+		return;
+	}
+
+	if (!this.shadowRoot || !this[dotsContainerElementSymbol]) {
+		return;
+	}
+
+	const controlElement = this.shadowRoot.querySelector(
+		"[data-monster-role=control]",
+	);
+	const settingsButton = this[settingsButtonElementSymbol];
+	const parentElement = this.parentElement;
+
+	if (!controlElement || !settingsButton) {
+		return;
+	}
+
+	const dotsContainer = this[dotsContainerElementSymbol];
+	dotsContainer.classList.remove("dots-hidden");
+
+	this[dotsUpdateInProgressSymbol] = true;
+	try {
+		const dots = Array.from(dotsContainer.querySelectorAll("li"));
+		if (dots.length === 0) {
+			return;
+		}
+
+		for (const dot of dots) {
+			dot.classList.remove("dots-overflow-hidden");
+		}
+
+		const indicator = dotsContainer.querySelector(".dots-overflow-indicator");
+		if (indicator) {
+			indicator.remove();
+		}
+
+		const controlWidth = controlElement.getBoundingClientRect().width;
+		const settingsWidth = settingsButton.getBoundingClientRect().width;
+		const availableWidth = Math.max(
+			0,
+			getAvailableWidth(parentElement, settingsWidth, this) ??
+				controlWidth - settingsWidth - 12,
+		);
+
+		const dotSlotWidth = getDotSlotWidth(dots[0]);
+		const maxDots =
+			dotSlotWidth > 0
+				? Math.floor(availableWidth / dotSlotWidth)
+				: dots.length;
+		const configuredMaxVisible = parseInt(
+			this.getOption("dots.maxVisible"),
+			10,
+		);
+		const enforceMaxVisible =
+			Number.isFinite(configuredMaxVisible) && configuredMaxVisible > 0;
+
+		if (maxDots <= 1) {
+			dotsContainer.classList.add("dots-hidden");
+			return;
+		}
+
+		if (maxDots >= dots.length) {
+			if (!enforceMaxVisible) {
+				return;
+			}
+		}
+
+		let visibleDots = Math.max(1, maxDots - 1);
+		if (enforceMaxVisible) {
+			visibleDots = Math.min(visibleDots, configuredMaxVisible);
+		}
+		for (let i = visibleDots; i < dots.length; i++) {
+			dots[i].classList.add("dots-overflow-hidden");
+		}
+
+		const hiddenCount = dots.length - visibleDots;
+		const overflowIndicator = document.createElement("li");
+		overflowIndicator.className = "dots-overflow-indicator";
+		overflowIndicator.textContent = `+${hiddenCount}`;
+		dotsContainer.appendChild(overflowIndicator);
+	} finally {
+		this[dotsUpdateInProgressSymbol] = false;
+	}
+}
+
+/**
+ * @private
+ * @param {HTMLElement} dot
+ * @return {number}
+ */
+function getDotSlotWidth(dot) {
+	if (!dot) return 0;
+	const styles = getComputedStyle(dot);
+	const marginRight = parseFloat(styles.marginRight || "0");
+	const marginLeft = parseFloat(styles.marginLeft || "0");
+	return dot.getBoundingClientRect().width + marginLeft + marginRight;
+}
+
+/**
+ * @private
+ * @param {HTMLElement|null} parent
+ * @param {number} settingsWidth
+ * @return {number|null}
+ */
+function getAvailableWidth(parent, settingsWidth, hostElement) {
+	if (!parent) return null;
+
+	const parentWidth = parent.getBoundingClientRect().width;
+	if (!parentWidth) return null;
+
+	const styles = getComputedStyle(parent);
+	const gapValue = styles.columnGap || styles.gap || "0";
+	const gap = parseFloat(gapValue) || 0;
+
+	const siblings = Array.from(parent.children).filter(
+		(el) => el !== hostElement,
+	);
+	let siblingsWidth = 0;
+	for (const sibling of siblings) {
+		const siblingStyles = getComputedStyle(sibling);
+		if (siblingStyles.display === "none") {
+			continue;
+		}
+		siblingsWidth += sibling.getBoundingClientRect().width;
+	}
+
+	const gaps = siblings.length > 0 ? siblings.length : 0;
+	return Math.max(0, parentWidth - siblingsWidth - gap * gaps - settingsWidth);
+}
+
 /**
  * @private
  * @return {string}