@schukai/monster 4.108.0 → 4.110.0

package/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 
 
+## [4.110.0] - 2026-01-28
+
+### Add Features
+
+- Added new table control for handling large datasets [#379](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/379)
+- new i18n-tag
+
+
+
+## [4.109.0] - 2026-01-28
+
+### Add Features
+
+- Add double-click handling to pagination navigation
+- Improve pagination visibility for zero results
+### Bug Fixes
+
+- webtests
+- update webstest
+
+
+
 ## [4.108.0] - 2026-01-26
 
 ### 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.108.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.110.0"}

package/source/components/datatable/pagination.mjs

@@ -89,6 +89,10 @@ const layoutApplySymbol = Symbol("layoutApply");
  */
 const labelStateSymbol = Symbol("labelState");
 const layoutModeSymbol = Symbol("layoutMode");
+const lastNavClickTimeSymbol = Symbol("lastNavClickTime");
+const lastNavClickTargetSymbol = Symbol("lastNavClickTarget");
+
+const minNavDoubleClickDelayMs = 200;
 
 const compactPrevIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0m3.5 7.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5z"/></svg>`;
 const compactNextIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0M4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5z"/></svg>`;
@@ -507,10 +511,22 @@ function initEventHandler() {
 	const self = this;
 
 	self[paginationElementSymbol].addEventListener("click", function (event) {
-		let element =
-			findTargetElementFromEvent(event, ATTRIBUTE_ROLE, "pagination-item") ||
-			findTargetElementFromEvent(event, ATTRIBUTE_ROLE, "pagination-next") ||
-			findTargetElementFromEvent(event, ATTRIBUTE_ROLE, "pagination-prev");
+		const prevTarget = findTargetElementFromEvent(
+			event,
+			ATTRIBUTE_ROLE,
+			"pagination-prev",
+		);
+		const nextTarget = findTargetElementFromEvent(
+			event,
+			ATTRIBUTE_ROLE,
+			"pagination-next",
+		);
+		const itemTarget = findTargetElementFromEvent(
+			event,
+			ATTRIBUTE_ROLE,
+			"pagination-item",
+		);
+		const element = itemTarget || prevTarget || nextTarget;
 
 		if (
 			!(element instanceof HTMLElement) ||
@@ -519,6 +535,14 @@ function initEventHandler() {
 			return;
 		}
 
+		if (
+			(event.detail === 1 || event.detail === 0) &&
+			(prevTarget || nextTarget)
+		) {
+			self[lastNavClickTimeSymbol] = event.timeStamp;
+			self[lastNavClickTargetSymbol] = prevTarget ? "prev" : "next";
+		}
+
 		const page = element.getAttribute("data-page-no");
 
 		if (!page || page === "…" || page === "null" || page === "undefined") {
@@ -558,6 +582,17 @@ function initEventHandler() {
 
 		event.preventDefault();
 
+		const lastTarget = self[lastNavClickTargetSymbol];
+		const lastTime = self[lastNavClickTimeSymbol];
+		const currentTarget = prevTarget ? "prev" : "next";
+		if (
+			lastTarget !== currentTarget ||
+			!Number.isFinite(lastTime) ||
+			event.timeStamp - lastTime < minNavDoubleClickDelayMs
+		) {
+			return;
+		}
+
 		const maxPage = parseInt(self.getOption("pages"), 10);
 		if (!Number.isFinite(maxPage) || maxPage <= 0) {
 			return;

package/source/components/form/select.mjs

@@ -942,6 +942,13 @@ function processAndApplyPaginationData(data) {
 
 		this.setOption("total", total);
 
+		if (total === 0) {
+			this[paginationElementSymbol].style.display = "none";
+			this[paginationElementSymbol].setOption("pages", null);
+			this[paginationElementSymbol].setOption("currentPage", null);
+			return;
+		}
+
 		if (
 			isInteger(currentPage) &&
 			currentPage > 0 &&