@schukai/monster 4.143.0 → 4.143.1

package/package.json

@@ -1 +1 @@
-{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"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.143.0"}
+{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"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.143.1"}

package/source/components/datatable/pagination.mjs

@@ -145,6 +145,8 @@ class Pagination extends CustomElement {
 	 * @property {number} currentPage Current page
 	 * @property {number} pages Pages
 	 * @property {number} objectsPerPage Objects per page
+	 * @property {Object} layout Layout configuration
+	 * @property {"auto"|"compact"} layout.mode Layout mode. Use `"compact"` to always show the small arrow pagination.
 	 * @property {Object} mapping Mapping
 	 * @property {string} mapping.pages Pages mapping
 	 * @property {string} mapping.objectsPerPage Objects per page mapping
@@ -175,6 +177,10 @@ class Pagination extends CustomElement {
 				objectsPerPage: 20,
 				currentPage: null,
 
+				layout: {
+					mode: "auto",
+				},
+
 				mapping: {
 					pages: "sys.pagination.pages",
 					objectsPerPage: "sys.pagination.objectsPerPage",
@@ -250,6 +256,11 @@ class Pagination extends CustomElement {
 	}
 
 	refreshLayout({ schedule = false } = {}) {
+		if (isForcedCompactPagination.call(this)) {
+			applyForcedCompactPaginationLayout.call(this);
+			return this;
+		}
+
 		if (schedule === true) {
 			if (isAdaptivePagination.call(this)) {
 				schedulePaginationLayoutUpdate.call(this);
@@ -363,7 +374,15 @@ class Pagination extends CustomElement {
 				});
 			});
 
-			if (isAdaptivePagination.call(this)) {
+			if (isForcedCompactPagination.call(this)) {
+				this[sizeDataSymbol] = {
+					last: {
+						parentWidth: 0,
+					},
+					showNumbers: false,
+				};
+				applyForcedCompactPaginationLayout.call(this);
+			} else if (isAdaptivePagination.call(this)) {
 				this[sizeDataSymbol] = {
 					last: {
 						parentWidth: 0,
@@ -877,6 +896,11 @@ function syncPaginationStateToDom(pagination) {
  * @private
  */
 function schedulePaginationLayoutUpdate() {
+	if (isForcedCompactPagination.call(this)) {
+		applyForcedCompactPaginationLayout.call(this);
+		return;
+	}
+
 	if (!isAdaptivePagination.call(this)) {
 		return;
 	}
@@ -895,6 +919,11 @@ function schedulePaginationLayoutUpdate() {
  * @private
  */
 function applyPaginationLayout() {
+	if (isForcedCompactPagination.call(this)) {
+		applyForcedCompactPaginationLayout.call(this);
+		return;
+	}
+
 	if (!this.isConnected || !this.shadowRoot) {
 		return;
 	}
@@ -974,6 +1003,51 @@ function applyPaginationLayout() {
 	}
 }
 
+/**
+ * @private
+ */
+function applyForcedCompactPaginationLayout() {
+	if (!this.isConnected || !this.shadowRoot) {
+		return;
+	}
+
+	if (this[layoutApplySymbol]) {
+		return;
+	}
+
+	this[layoutApplySymbol] = true;
+	try {
+		ensureLabelState.call(this);
+
+		const list = this.shadowRoot.querySelector(".pagination-list");
+		if (!list) {
+			return;
+		}
+
+		const prevLink = this.shadowRoot.querySelector(
+			"a[data-monster-role=pagination-prev]",
+		);
+		const nextLink = this.shadowRoot.querySelector(
+			"a[data-monster-role=pagination-next]",
+		);
+
+		setClassEnabled(list, "pagination-no-wrap", true);
+		applyPaginationMode.call(this, list, prevLink, nextLink, "compact");
+		setAttributeValue(list, "data-monster-adaptive-ready", "true");
+		this[layoutModeSymbol] = "compact";
+	} finally {
+		this[layoutApplySymbol] = false;
+	}
+}
+
+/**
+ * @private
+ * @return {boolean}
+ */
+function isForcedCompactPagination() {
+	return this.getOption("layout.mode") === "compact";
+}
+
 /**
  * @private
  * @param {number} parentWidth

package/source/components/form/select.mjs

@@ -5769,7 +5769,8 @@ function getTemplate() {
                 <div part="options" data-monster-role="options" data-monster-insert="options path:options"
                      tabindex="-1"></div>
             </div>
-            <monster-pagination data-monster-role="pagination" part="pagination"></monster-pagination>
+            <monster-pagination data-monster-role="pagination" part="pagination"
+                                data-monster-option-layout-mode="compact"></monster-pagination>
             <div part="remote-info"
                  data-monster-role="remote-info"
                  data-monster-attributes="class path:classes.remoteInfo"

package/test/cases/components/form/select.mjs

@@ -156,6 +156,38 @@ describe('Select', function () {
         expect(cssText.replace(/\s+/g, '')).to.contain('z-index:var(--monster-z-index-popover)');
     });
 
+    it('should render select pagination in the compact arrow mode immediately', async function () {
+        const mocks = document.getElementById('mocks');
+        const select = document.createElement('monster-select');
+
+        mocks.appendChild(select);
+
+        await waitForCondition(() => {
+            return select.shadowRoot?.querySelector('[data-monster-role="pagination"]');
+        });
+
+        const pagination = select.shadowRoot.querySelector('[data-monster-role="pagination"]');
+        expect(pagination.getOption('layout.mode')).to.equal('compact');
+
+        pagination.style.display = 'block';
+        pagination.setPaginationState({currentPage: 2, totalPages: 5});
+
+        await waitForCondition(() => {
+            const list = pagination.shadowRoot?.querySelector('.pagination-list');
+            const previous = pagination.shadowRoot?.querySelector(
+                'a[data-monster-role="pagination-prev"]'
+            );
+            const next = pagination.shadowRoot?.querySelector(
+                'a[data-monster-role="pagination-next"]'
+            );
+
+            return list?.classList.contains('pagination-compact') &&
+                list.getAttribute('data-monster-adaptive-ready') === 'true' &&
+                previous?.querySelector('svg') &&
+                next?.querySelector('svg');
+        });
+    });
+
     it('should deduplicate floating layout queue jobs by popper element', async function () {
         const popper = document.createElement('div');
         const reasons = [];