@schukai/monster 4.23.0 → 4.23.2

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 
 
+## [4.23.2] - 2025-06-22
+
+### Bug Fixes
+
+- Enhance SaveButton with state and message handling
+
+
+
+## [4.23.1] - 2025-06-22
+
+### Bug Fixes
+
+- Clean up imports and formatting in select component
+
+
+
 ## [4.23.0] - 2025-06-22
 
 ### Add Features

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.1","@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.23.0"}
+{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.1","@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.23.2"}

package/source/components/datatable/save-button.mjs

@@ -287,6 +287,72 @@ class SaveButton extends CustomElement {
 		);
 	}
 
+	/**
+	 * Sets the state of the button which affects its visual appearance
+	 *
+	 * @param {string} state - The state to set (e.g. 'success', 'error', 'loading')
+	 * @param {number} timeout - Optional timeout in milliseconds after which state is removed
+	 * @return {SaveButton} Returns the button instance for chaining
+	 * @throws {TypeError} When state is not a string or timeout is not a number
+	 */
+	setState(state, timeout) {
+		return this[stateButtonElementSymbol].setState(state, timeout);
+	}
+
+	/**
+	 *
+	 * @return {SaveButton}
+	 */
+	removeState() {
+		return this[stateButtonElementSymbol].removeState();
+	}
+
+	/**
+	 * @return {string}
+	 */
+	getState() {
+		return this[stateButtonElementSymbol].getState();
+	}
+
+	/**
+	 * Sets the message content to be displayed in the popup overlay
+	 *
+	 * @param {string|HTMLElement} message - The message content as string or HTML element
+	 * @param {string} title - Optional title to show above the message
+	 * @param {string} icon - Optional icon HTML to display next to the title
+	 * @return {SaveButton} Returns the button instance for chaining
+	 * @throws {TypeError} When message is empty or invalid type
+	 */
+	setMessage(message, title, icon) {
+		return this[stateButtonElementSymbol].setMessage(message, title, icon);
+	}
+
+	/**
+	 * Clears the message content displayed in the popup overlay.
+	 * @returns {*|SaveButton}
+	 */
+	clearMessage() {
+		return this[stateButtonElementSymbol].clearMessage();
+	}
+
+	/**
+	 * Displays a message on the button element for a specified duration.
+	 *
+	 * @param {number} timeout - The time, in milliseconds, for which the message should be displayed.
+	 * @return {Promise<void>} A promise that resolves when the message display action is completed.
+	 */
+	showMessage(timeout) {
+		return this[stateButtonElementSymbol].showMessage(timeout);
+	}
+
+	/**
+	 * Hides the message displayed on the button element.
+	 * @returns {*|MessageStateButton}
+	 */
+	hideMessage() {
+		return this[stateButtonElementSymbol].hideMessage();
+	}
+
 	/**
 	 *
 	 * @return [CSSStyleSheet]
@@ -434,7 +500,7 @@ function getTemplate() {
 	return `
 		<div data-monster-role="control" part="control"
 			 data-monster-attributes="disabled path:disabled | if:true">
-			<monster-state-button data-monster-role="state-button">save</monster-state-button>
+			<monster-message-state-button data-monster-role="state-button">save</monster-message-state-button>
 			<div data-monster-attributes="disabled path:disabled | if:true, class path:classes.badge"
 				 data-monster-role="badge"
 				 data-monster-replace="path:changes"></div>