@schukai/monster 4.122.1 → 4.122.2

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 
 
+## [4.122.2] - 2026-02-16
+
+### Bug Fixes
+
+- Improve pagination logic and add corresponding tests
+
+
+
 ## [4.122.1] - 2026-02-13
 
 ### Bug Fixes

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.122.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.122.2"}

package/source/components/datatable/pagination.mjs

@@ -691,8 +691,16 @@ function handleDataSourceChanges() {
  * @return  {object}
  */
 function buildPagination(current, max) {
-	current = parseInt(current, 10);
-	max = parseInt(max, 10);
+	const parsedCurrent = Number.parseInt(current, 10);
+	const parsedMax = Number.parseInt(max, 10);
+
+	max = Number.isFinite(parsedMax) && parsedMax >= 1 ? parsedMax : 1;
+	current = Number.isFinite(parsedCurrent) ? parsedCurrent : 1;
+	if (current < 1) {
+		current = 1;
+	} else if (current > max) {
+		current = max;
+	}
 
 	let prev = current === 1 ? null : current - 1;
 	let next = current === max ? null : current + 1;
@@ -1229,7 +1237,7 @@ function getTemplate() {
                             data-monster-attributes="
             class path:pagination.prevClass | prefix: previous,
             data-page-no path:pagination.prevNo,
-            href path:pagination.prevHref | prefix: #"
+            href path:pagination.prevHref"
                             data-monster-replace="path:labels.previous">Previous</a></li>
                     <li part="summary" data-monster-role="pagination-summary">
                         <span data-monster-replace="path:pagination.summary"></span>
@@ -1239,7 +1247,7 @@ function getTemplate() {
                             part="next-link"
                             data-monster-attributes="class path:pagination.nextClass | prefix: next,
             data-page-no path:pagination.nextNo,
-        href path:pagination.nextHref | prefix: #"
+        href path:pagination.nextHref"
                             data-monster-replace="path:labels.next">Next</a></li>
                 </ul>
             </nav>

package/test/cases/components/datatable/pagination.mjs

@@ -0,0 +1,99 @@
+
+import * as chai from 'chai';
+import {chaiDom} from "../../../util/chai-dom.mjs";
+import {initJSDOM} from "../../../util/jsdom.mjs";
+
+let expect = chai.expect;
+chai.use(chaiDom);
+
+let Pagination;
+
+describe('Pagination', function () {
+
+    before(function (done) {
+        initJSDOM().then(() => {
+            import("../../../../source/components/datatable/pagination.mjs").then((m) => {
+                Pagination = m['Pagination'];
+                done();
+            }).catch(e => done(e));
+        });
+    });
+
+    afterEach(() => {
+        let mocks = document.getElementById('mocks');
+        mocks.innerHTML = "";
+    });
+
+    it('normalizes NaN and avoids NaN hrefs', function (done) {
+        let mocks = document.getElementById('mocks');
+        const control = document.createElement('monster-pagination');
+        mocks.appendChild(control);
+
+        setTimeout(() => {
+            try {
+                control.setPaginationState({currentPage: Number.NaN, totalPages: Number.NaN});
+
+                const pagination = control.getOption('pagination');
+
+                expect(pagination.current).to.equal(1);
+                expect(pagination.prevHref).to.equal('#');
+                expect(pagination.nextHref).to.equal('#');
+
+                const hrefs = [pagination.prevHref, pagination.nextHref, ...pagination.items.map(i => i.href)];
+                hrefs.forEach((href) => {
+                    expect(href).to.not.contain('NaN');
+                    expect(href.startsWith('##')).to.equal(false);
+                });
+            } catch (e) {
+                return done(e);
+            }
+
+            done();
+        }, 0);
+    });
+
+    it('clamps current page and does not double-prefix hash', function (done) {
+        let mocks = document.getElementById('mocks');
+        const control = document.createElement('monster-pagination');
+        mocks.appendChild(control);
+
+        setTimeout(() => {
+            try {
+                control.setPaginationState({currentPage: 10, totalPages: 3});
+
+                const pagination = control.getOption('pagination');
+                expect(pagination.current).to.equal(3);
+                expect(pagination.nextHref).to.equal('#');
+                expect(pagination.prevHref).to.equal('#page-2');
+
+                setTimeout(() => {
+                    try {
+                        const prevLink = control.shadowRoot.querySelector(
+                            'a[data-monster-role=pagination-prev]'
+                        );
+                        const nextLink = control.shadowRoot.querySelector(
+                            'a[data-monster-role=pagination-next]'
+                        );
+
+                        expect(prevLink.getAttribute('href')).to.equal('#page-2');
+                        expect(nextLink.getAttribute('href')).to.equal('#');
+                    } catch (e) {
+                        return done(e);
+                    }
+
+                    done();
+                }, 0);
+            } catch (e) {
+                return done(e);
+            }
+        }, 0);
+    });
+
+    describe('document.createElement', function () {
+        it('should instance of Pagination', function () {
+            expect(document.createElement('monster-pagination')).is.instanceof(Pagination);
+        });
+    });
+
+});
+

package/test/web/import.js

@@ -22,6 +22,7 @@ import "../cases/components/host/overlay.mjs";
 import "../cases/components/host/util.mjs";
 import "../cases/components/host/details.mjs";
 import "../cases/components/datatable/writeback-sanitizer.mjs";
+import "../cases/components/datatable/pagination.mjs";
 import "../cases/text/formatter.mjs";
 import "../cases/text/generate-range-comparison-expression.mjs";
 import "../cases/text/util.mjs";