@schukai/monster 4.151.0 → 4.152.0

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.","files":["source","test/cases","test/util","CHANGELOG.md"],"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.151.0"}
+{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","files":["source","test/cases","test/util","CHANGELOG.md"],"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.152.0"}

package/source/components/form/select.mjs

@@ -2206,6 +2206,9 @@ function fetchIt(url, controlOptions) {
 						try {
 							importOptionsIntern.call(self, map);
 							processAndApplyPaginationData.call(self, map);
+							if (this.getOption("options", []).length > 0) {
+								removeErrorAttribute(this, "No options available.");
+							}
 						} catch (e) {
 							setStatusOrRemoveBadges.call(this, "error");
 							reject(e);

package/source/components/form/state-button.mjs

@@ -14,6 +14,7 @@
 
 import { instanceSymbol } from "../../constants.mjs";
 import { registerCustomElement } from "../../dom/customelement.mjs";
+import { fireCustomEvent } from "../../dom/events.mjs";
 import { isInteger } from "../../types/is.mjs";
 import { validateInstance, validateString } from "../../types/validate.mjs";
 import { Button } from "./button.mjs";
@@ -33,6 +34,7 @@ export { StateButton };
  * @since 1.5.0
  * @copyright Volker Schukai
  * @summary A beautiful button with icons
+ * @fires monster-state-changed - Fired when the visual state changes
  */
 class StateButton extends Button {
 	/**
@@ -111,7 +113,10 @@ class StateButton extends Button {
 			throw new Error("state not found");
 		}
 
-		this.setOption("current", validateInstance(obj, State));
+		const previousState = this.getState()?.state ?? "stateless";
+		const currentState = validateInstance(obj, State);
+		this.setOption("current", currentState);
+		dispatchStateChanged.call(this, previousState, currentState.state);
 
 		if (isInteger(timeout) && timeout > 0) {
 			this[timeoutSymbol] = setTimeout(() => {
@@ -128,7 +133,10 @@ class StateButton extends Button {
 	 * @return {StateButton}
 	 */
 	removeState() {
-		this.setOption("current", getStateInstanceFor("stateless"));
+		const previousState = this.getState()?.state ?? "stateless";
+		const currentState = getStateInstanceFor("stateless");
+		this.setOption("current", currentState);
+		dispatchStateChanged.call(this, previousState, currentState.state);
 		return this;
 	}
 
@@ -156,6 +164,23 @@ class StateButton extends Button {
 	}
 }
 
+/**
+ * @private
+ * @param {string} previousState
+ * @param {string} state
+ * @return {void}
+ */
+function dispatchStateChanged(previousState, state) {
+	if (previousState === state) {
+		return;
+	}
+
+	fireCustomEvent(this, "monster-state-changed", {
+		state,
+		previousState,
+	});
+}
+
 /**
  * @private
  * @return {string}

package/test/cases/components/form/message-state-button.mjs

@@ -131,6 +131,40 @@ describe("MessageStateButton", function () {
 		});
 	});
 
+	describe("state changes", function () {
+		afterEach(() => {
+			let mocks = document.getElementById("mocks");
+			mocks.innerHTML = "";
+		});
+
+		it("should expose inner state transitions on the public host", function (done) {
+			let mocks = document.getElementById("mocks");
+			const button = document.createElement("monster-message-state-button");
+			const events = [];
+			button.innerHTML = "Save";
+			button.addEventListener("monster-state-changed", (event) => {
+				events.push(event);
+			});
+			mocks.appendChild(button);
+
+			setTimeout(() => {
+				try {
+					button.setState("successful");
+
+					expect(events).to.have.length(1);
+					expect(events[0].target).to.equal(button);
+					expect(events[0].detail).to.deep.equal({
+						state: "successful",
+						previousState: "stateless",
+					});
+					done();
+				} catch (e) {
+					done(e);
+				}
+			}, 0);
+		});
+	});
+
 	describe("lifecycle safety", function () {
 		afterEach(() => {
 			let mocks = document.getElementById("mocks");

package/test/cases/components/form/state-button.mjs

@@ -124,7 +124,52 @@ describe('StateButton', function () {
 
 
         });
+
+        it('should emit state transitions without duplicate events', function () {
+            let mocks = document.getElementById('mocks');
+            const button = document.createElement('monster-state-button');
+            const events = [];
+            button.addEventListener('monster-state-changed', event => events.push(event));
+            mocks.appendChild(button);
+
+            button.setState('activity');
+            button.setState('activity');
+            button.setState('successful');
+            button.removeState();
+            button.removeState();
+
+            expect(events).to.have.length(3);
+            expect(events.map(event => event.detail)).to.deep.equal([
+                {state: 'activity', previousState: 'stateless'},
+                {state: 'successful', previousState: 'activity'},
+                {state: 'stateless', previousState: 'successful'},
+            ]);
+            expect(events.every(event => event.bubbles)).to.be.true;
+            expect(events.every(event => event.composed)).to.be.true;
+        });
+
+        it('should emit the automatic timeout transition', function (done) {
+            let mocks = document.getElementById('mocks');
+            const button = document.createElement('monster-state-button');
+            const details = [];
+            button.addEventListener('monster-state-changed', event => details.push(event.detail));
+            mocks.appendChild(button);
+
+            button.setState('activity', 10);
+
+            setTimeout(() => {
+                try {
+                    expect(details).to.deep.equal([
+                        {state: 'activity', previousState: 'stateless'},
+                        {state: 'stateless', previousState: 'activity'},
+                    ]);
+                    done();
+                } catch (e) {
+                    done(e);
+                }
+            }, 30);
+        });
     });
 
 
-});
+});