@schukai/monster 4.136.10 → 4.136.12

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.136.10"}
+{"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.136.12"}

package/source/components/form/select.mjs

@@ -1014,7 +1014,7 @@ function processAndApplyPaginationData(data) {
 	const mappingCurrentPage = this.getOption("mapping.currentPage");
 	const mappingObjectsPerPage = this.getOption("mapping.objectsPerPage");
 
-	if (!mappingTotal || !mappingCurrentPage || !mappingObjectsPerPage) {
+	if (!mappingTotal) {
 		this.setOption("total", null);
 		resetPaginationState.call(this);
 		return;
@@ -1023,8 +1023,6 @@ function processAndApplyPaginationData(data) {
 	try {
 		const pathfinder = new Pathfinder(data);
 		const total = pathfinder.getVia(mappingTotal);
-		const currentPage = pathfinder.getVia(mappingCurrentPage);
-		const objectsPerPage = pathfinder.getVia(mappingObjectsPerPage);
 
 		if (!isInteger(total)) {
 			addErrorAttribute(this, "total is not an integer");
@@ -1035,8 +1033,16 @@ function processAndApplyPaginationData(data) {
 
 		this.setOption("total", total);
 
+		if (!mappingCurrentPage || !mappingObjectsPerPage) {
+			resetPaginationState.call(this, false);
+			return;
+		}
+
+		const currentPage = pathfinder.getVia(mappingCurrentPage);
+		const objectsPerPage = pathfinder.getVia(mappingObjectsPerPage);
+
 		if (total === 0) {
-			resetPaginationState.call(this);
+			resetPaginationState.call(this, false);
 			return;
 		}
 
@@ -1120,6 +1126,52 @@ function getSelectionSyncState() {
 	return { attrValue, selection, optionsLength };
 }
 
+function hasSelectionLikeValue(candidate) {
+	if (isArray(candidate)) {
+		return candidate.some((entry) => {
+			if (isObject(entry) && Object.prototype.hasOwnProperty.call(entry, "value")) {
+				return hasSelectionLikeValue.call(this, entry.value);
+			}
+
+			return hasSelectionLikeValue.call(this, entry);
+		});
+	}
+
+	if (isObject(candidate)) {
+		for (const key of ["value", "id", "key"]) {
+			if (Object.prototype.hasOwnProperty.call(candidate, key)) {
+				return hasSelectionLikeValue.call(this, candidate[key]);
+			}
+		}
+	}
+
+	if (candidate === undefined || candidate === null) {
+		return false;
+	}
+
+	if (isValueIsEmpty.call(this, candidate)) {
+		return false;
+	}
+
+	if (isString(candidate)) {
+		return candidate.trim() !== "";
+	}
+
+	return true;
+}
+
+function hasRequestedSelectionValue() {
+	const pendingValue = this[pendingSelectionSymbol]?.value;
+	const optionValue = this.getOption("value");
+	const attrValue = this.getAttribute("value");
+
+	return (
+		hasSelectionLikeValue.call(this, pendingValue) ||
+		hasSelectionLikeValue.call(this, optionValue) ||
+		hasSelectionLikeValue.call(this, attrValue)
+	);
+}
+
 /**
  * @private
  * @param {number} version
@@ -1907,6 +1959,14 @@ function fetchIt(url, controlOptions) {
 		this[fetchRequestVersionSymbol] += 1;
 		const requestVersion = this[fetchRequestVersionSymbol];
 
+		if (getFilterMode.call(this) === FILTER_MODE_REMOTE) {
+			let classes = new TokenList(this.getOption("classes.noOptions"));
+			classes.add("d-none");
+			this.setOption("classes.noOptions", classes.toString());
+			this.setOption("messages.emptyOptions", "");
+			this.setOption("messages.total", "");
+		}
+
 		new Processing(10, () => {
 			fetchData
 				.call(this, url)
@@ -2712,7 +2772,17 @@ function setTotalText() {
 		return;
 	}
 
+	if (this[isLoadingSymbol] === true) {
+		this.setOption("messages.total", "");
+		return;
+	}
+
 	const count = this.getOption("options").length;
+	if (count === 0) {
+		this.setOption("messages.total", "");
+		return;
+	}
+
 	const total = Number.parseInt(this.getOption("total"));
 	if (Number.isNaN(total)) {
 		this.setOption("messages.total", "");
@@ -2763,7 +2833,7 @@ function setSummaryAndControlText() {
 		current === msg ||
 		current === null
 	) {
-		if (selections.length === 0) {
+		if (selections.length === 0 && hasRequestedSelectionValue.call(this) !== true) {
 			this.setOption("messages.control", msg);
 		} else {
 			this.setOption("messages.control", "");
@@ -3907,8 +3977,12 @@ function areOptionsAvailableAndInitInternal() {
 		setStatusOrRemoveBadges.call(this, "empty");
 		if (getFilterMode.call(this) === FILTER_MODE_REMOTE) {
 			if (this[isLoadingSymbol] !== true) {
-				this.setOption("total", null);
-				resetPaginationState.call(this);
+				if (isInteger(this.getOption("total"))) {
+					resetPaginationState.call(this, false);
+				} else {
+					this.setOption("total", null);
+					resetPaginationState.call(this);
+				}
 			}
 		}
 
@@ -3960,7 +4034,7 @@ function areOptionsAvailableAndInitInternal() {
 	if (
 		selections === undefined ||
 		selections === null ||
-		selections.length === 0
+		(selections.length === 0 && hasRequestedSelectionValue.call(this) !== true)
 	) {
 		this.setOption(
 			"messages.control",
@@ -4547,6 +4621,7 @@ function initTotal() {
 	}
 
 	const fetchOptions = this.getOption("fetch", {});
+	this.setOption("messages.total", "");
 
 	const remoteInfoRequest = getGlobal()
 		.fetch(url, fetchOptions)
@@ -4592,7 +4667,7 @@ function updatePagination(total, currentPage, objectsPerPage) {
 	});
 }
 
-function resetPaginationState() {
+function resetPaginationState(clearTotalMessage = true) {
 	const paginationElement = this[paginationElementSymbol];
 	if (!paginationElement) {
 		return;
@@ -4602,7 +4677,9 @@ function resetPaginationState() {
 	paginationElement.setOption("pages", null);
 	paginationElement.setOption("currentPage", null);
 	paginationElement.setOption("objectsPerPage", null);
-	this.setOption("messages.total", "");
+	if (clearTotalMessage === true) {
+		this.setOption("messages.total", "");
+	}
 }
 
 function clearOptionsOnError() {

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

@@ -900,6 +900,122 @@ describe('Select', function () {
             expect(requests.filter((url) => url === remoteInfoUrl)).to.have.length(1);
         });
 
+        it('should keep total-only remote totals for loaded options', async function () {
+            this.timeout(3000);
+
+            let mocks = document.getElementById('mocks');
+
+            global['fetch'] = function () {
+                return createJsonResponse({
+                    items: [
+                        {id: 'alpha', name: 'Alpha'}
+                    ],
+                    pagination: {
+                        total: 1
+                    }
+                });
+            };
+
+            const select = document.createElement('monster-select');
+            select.setOption('url', 'https://example.com/items?filter={filter}&page={page}');
+            select.setOption('filter.mode', 'remote');
+            select.setOption('mapping.selector', 'items.*');
+            select.setOption('mapping.labelTemplate', '${name}');
+            select.setOption('mapping.valueTemplate', '${id}');
+            select.setOption('mapping.total', 'pagination.total');
+            mocks.appendChild(select);
+
+            await waitForCondition(() => {
+                return select.shadowRoot.querySelector('[data-monster-role=container]') instanceof HTMLElement;
+            });
+
+            await select.fetch('https://example.com/items?filter=alpha&page=1');
+
+            expect(select.getOption('total')).to.equal(1);
+            expect(select.getOption('messages.total')).to.contain('No additional entries are available');
+        });
+
+        it('should avoid duplicate remote-info badges for empty remote filter results', async function () {
+            this.timeout(4000);
+
+            let mocks = document.getElementById('mocks');
+
+            global['fetch'] = function () {
+                return createJsonResponse({
+                    items: [],
+                    pagination: {
+                        total: 0
+                    }
+                });
+            };
+
+            const select = document.createElement('monster-select');
+            select.setOption('url', 'https://example.com/items?filter={filter}&page={page}');
+            select.setOption('filter.mode', 'remote');
+            select.setOption('filter.position', 'popper');
+            select.setOption('mapping.selector', 'items.*');
+            select.setOption('mapping.labelTemplate', '${name}');
+            select.setOption('mapping.valueTemplate', '${id}');
+            select.setOption('mapping.total', 'pagination.total');
+            mocks.appendChild(select);
+
+            await waitForCondition(() => {
+                return select.shadowRoot.querySelector('[data-monster-role=filter][name=\"popper-filter\"]') instanceof HTMLInputElement;
+            });
+
+            const container = select.shadowRoot.querySelector('[data-monster-role=container]');
+            const filterInput = select.shadowRoot.querySelector('[data-monster-role=filter][name="popper-filter"]');
+            filterInput.value = 'alpha';
+
+            container.click();
+
+            await waitForCondition(() => {
+                return select.getOption('total') === 0;
+            });
+
+            expect(select.getOption('total')).to.equal(0);
+            expect(select.getOption('messages.total')).to.equal('');
+            expect(select.getOption('messages.emptyOptions')).to.contain('Please consider modifying the filter');
+        });
+
+        it('should not show the select placeholder while a value sync is still pending', async function () {
+            this.timeout(3000);
+
+            let mocks = document.getElementById('mocks');
+            const savedGlobalQueueMicrotask = global.queueMicrotask;
+            const savedWindowQueueMicrotask = window.queueMicrotask;
+            const delayedQueueMicrotask = (callback) => setTimeout(callback, 50);
+
+            global.queueMicrotask = delayedQueueMicrotask;
+            window.queueMicrotask = delayedQueueMicrotask;
+
+            try {
+                const select = document.createElement('monster-select');
+                select.setOption('options', [
+                    {label: 'Alpha', value: 'a'}
+                ]);
+                select.setAttribute('value', 'a');
+                mocks.appendChild(select);
+
+                await new Promise((resolve) => setTimeout(resolve, 20));
+
+                expect(select.getOption('messages.control')).to.not.equal(
+                    select.getOption('labels.select-an-option')
+                );
+
+                await waitForCondition(() => {
+                    return Array.isArray(select.getOption('selection')) &&
+                        select.getOption('selection').length === 1;
+                });
+
+                expect(select.value).to.equal('a');
+                expect(select.getOption('messages.control')).to.equal('');
+            } finally {
+                global.queueMicrotask = savedGlobalQueueMicrotask;
+                window.queueMicrotask = savedWindowQueueMicrotask;
+            }
+        });
+
         it('should keep empty equivalent matching type-safe for numeric zero', function (done) {
             this.timeout(2000);