@schukai/monster 4.108.0 → 4.109.0

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 
 
+## [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.109.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 &&

package/source/types/version.mjs

@@ -156,7 +156,7 @@ function getMonsterVersion() {
 	}
 
 	/** don't touch, replaced by make with package.json version */
-	monsterVersion = new Version("4.107.1");
+	monsterVersion = new Version("4.108.0");
 
 	return monsterVersion;
 }

package/test/cases/components/layout/tabs.mjs

@@ -92,25 +92,32 @@ describe('Tabs', function () {
 
         });
 
-        it('should shorten label from content when no explicit label is provided', function (done) {
+		it('should shorten label from content when no explicit label is provided', function (done) {
 
             let mocks = document.getElementById('mocks');
             mocks.innerHTML = html1;
 
-            setTimeout(() => {
-                try {
-                    const tabs = document.getElementById('mytabs');
-                    expect(tabs).is.instanceof(Tabs);
-
-                    setTimeout(() => {
-                        const buttons = tabs.shadowRoot.querySelectorAll('button[part=button]');
-                        const labelSpan = buttons[2].querySelector('span[data-monster-replace]');
-                        expect(labelSpan).to.not.equal(null);
-                        expect(labelSpan.textContent.trim()).to.equal('Das ist tab…');
-                        done();
-                    }, 100);
-                } catch (e) {
-                    return done(e);
+			setTimeout(() => {
+				try {
+					const tabs = document.getElementById('mytabs');
+					expect(tabs).is.instanceof(Tabs);
+
+					setTimeout(() => {
+						const thirdTab = tabs.children[2];
+						expect(thirdTab).to.not.equal(undefined);
+						const reference = thirdTab.getAttribute('id');
+						expect(reference).to.not.equal(null);
+						const button = tabs.shadowRoot.querySelector(
+							`button[part=button][data-monster-tab-reference="${reference}"]`,
+						);
+						expect(button).to.not.equal(null);
+						const labelSpan = button.querySelector('span[data-monster-replace]');
+						expect(labelSpan).to.not.equal(null);
+						expect(labelSpan.textContent.trim()).to.equal('Das ist tab…');
+						done();
+					}, 100);
+				} catch (e) {
+					return done(e);
                 }
             }, 0);
         });

package/test/cases/monster.mjs

@@ -7,7 +7,7 @@ describe('Monster', function () {
         let monsterVersion
 
         /** don´t touch, replaced by make with package.json version */
-        monsterVersion = new Version("4.107.1")
+        monsterVersion = new Version("4.108.0")
 
         let m = getMonsterVersion();
 

package/test/web/test.html

@@ -9,8 +9,8 @@
 </head>
 <body>
 <div id="headline" style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
-  <h1 style='margin-bottom: 0.1em;'>Monster 4.107.1</h1>
-  <div id="lastupdate" style='font-size:0.7em'>last update Mo 26. Jan 01:20:17 CET 2026</div>
+  <h1 style='margin-bottom: 0.1em;'>Monster 4.108.0</h1>
+  <div id="lastupdate" style='font-size:0.7em'>last update Mi 28. Jan 02:10:31 CET 2026</div>
 </div>
 <div id="mocha-errors"
      style="color: red;font-weight: bold;display: flex;align-items: center;justify-content: center;flex-direction: column;margin:20px;"></div>