@schukai/monster 4.2.0 → 4.3.0

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 
 
+## [4.3.0] - 2025-05-12
+
+### Add Features
+
+- Add support for array-list filter serialization in Datatable
+### Changes
+
+- Enhance documentation for login component properties
+
+
+
 ## [4.2.0] - 2025-05-12
 
 ### Add Features

package/package.json

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

package/source/components/datatable/filter.mjs

@@ -1231,6 +1231,25 @@ function collectSearchQueries() {
 									.join(",")
 							);
 						},
+						"array-list": (value, key) => {
+							if (isString(value)) {
+								value = value.split(",");
+							}
+
+							if (!isArray(value)) {
+								return "";
+							}
+
+							return (
+								key +
+								"=" +
+								value
+									.map((v) => {
+										return `"${encodeURIComponent(v)}"`;
+									})
+									.join(",")
+							);
+						},
 						"date-range": (value, key) => {
 							const query = parseDateInput(value, key);
 							if (!query || query === "false") {

package/source/components/form/login.mjs

@@ -166,56 +166,88 @@ class Login extends CustomElement {
 	 * The individual configuration values can be found in the table.
 	 *
 	 * @property {Object} templates Template definitions
-	 * @property {string} templates.main Main template
-	 * @property {Object} labels Label definitions
-	 * @property {Object} classes Class definitions
-	 * @property {string} classes.usernameInvalid Class for invalid
-	 * @property {string} classes.passwordInvalid Class for invalid
-	 * @property {string} classes.emailInvalid Class for invalid
-	 * @property {boolean} disabled Disabled
-	 * @property {Object} features Feature definitions
-	 * @property {boolean} features.forgotPassword Forgot Password enabled
-	 * @property {boolean} features.redirectToFirstSuccessUrl Redirect to first success URL
-	 * @property {Object} actions Action definitions
-	 * @property {number} digits Digits
-	 * @property {Object[]} successUrls Success URLs
-	 * @property {string} successUrls.label Label
-	 * @property {string} successUrls.url URL
-	 * @property {number} timeoutForMessage Timeout for message
-	 * @property {number} timeoutForSuccess Timeout for success
-	 * @property {Object} accessKeys Access keys
-	 * @property {string} accessKeys.loginLink Login link
-	 * @property {string} accessKeys.username Username
-	 * @property {string} accessKeys.password Password
-	 * @property {Object} fetch Fetch definitions
-	 * @property {Object} fetch.login Login fetch
-	 * @property {string} fetch.login.url URL
-	 * @property {string} fetch.login.method Method
-	 * @property {string} fetch.login.mode Mode
-	 * @property {Object} fetch.login.headers Headers
-	 * @property {string} fetch.login.headers.accept Accept
-	 * @property {string} fetch.login.credentials Credentials
-	 * @property {Object} fetch.forgotPassword Forgot Password fetch
-	 * @property {string} fetch.forgotPassword.url URL
-	 * @property {string} fetch.forgotPassword.method Method
-	 * @property {string} fetch.forgotPassword.mode Mode
+	 * @property {string} templates.main The main HTML template used for rendering the login form
+	 * @property {Object} labels Label definitions used for localization and form messages
+	 * @property {string} labels.username Label for the username or email field
+	 * @property {string} labels.password Label for the password field
+	 * @property {string} labels.login Label for the login button
+	 * @property {string} labels.forgotPasswordLink Text for the "forgot password" link
+	 * @property {string} labels.mailAddress Label for the email input in password reset flow
+	 * @property {string} labels.requestLink Label for the button that sends a password reset code
+	 * @property {string} labels.digits Label for the digits input field
+	 * @property {string} labels.loginLink Label for the back-to-login link
+	 * @property {string} labels.secondFactor Label for the second factor authentication input
+	 * @property {string} labels.sendDigits Label for the button that submits the digits input
+	 * @property {string} labels.sendSecondFactorDigits Label for the button that submits the second factor code
+	 * @property {string} labels.resetLoginProcess Label for the link to return to the login form
+	 * @property {string} labels.messageEmptyUserName Message shown when username is empty
+	 * @property {string} labels.messageEmptyPassword Message shown when password is empty
+	 * @property {string} labels.messageEmptyBoth Message shown when both username and password are empty
+	 * @property {string} labels.messageEmptyEmail Message shown when email field is empty
+	 * @property {string} labels.messageInvalidEmail Message shown when an invalid email address is entered
+	 * @property {string} labels.digitsEmpty Message shown when digits field is empty
+	 * @property {string} labels.digitsInvalid Message shown when digits input is invalid
+	 * @property {string} labels.messageLoginFailed Message shown on failed login attempt
+	 * @property {string} labels.messageForbidden Message shown on successful login with insufficient permissions
+	 * @property {string} labels.messageSomethingWentWrong Fallback error message
+	 * @property {string} labels.messageThisFormIsNotConfigured Message shown if no backend URL is configured
+	 * @property {string} labels.messagePasswordResetDisabled Message shown if password reset is disabled due to 2FA
+	 * @property {Object} classes Class definitions for visual styling
+	 * @property {string} classes.usernameInvalid CSS class applied when username is invalid
+	 * @property {string} classes.passwordInvalid CSS class applied when password is invalid
+	 * @property {string} classes.emailInvalid CSS class applied when email input is invalid
+	 * @property {string} classes.button CSS class applied to all form buttons
+	 * @property {boolean} disabled If true, disables interaction with the component
+	 * @property {Object} features Feature flags to toggle optional behavior
+	 * @property {boolean} features.forgotPassword Enables the forgot password flow
+	 * @property {boolean} features.redirectToFirstSuccessUrl If true, redirects to the first success URL after login
+	 * @property {Object} actions Action definitions for custom event handling
+	 * @property {Function} actions.click Callback function for generic click actions within the login component
+	 * @property {Object} callbacks Optional callback hooks for modifying internal behavior
+	 * @property {Function} callbacks.username A function that receives and can transform the entered username before submission
+	 * @property {number} digits Number of digits required for second factor or password reset code input
+	 * @property {Object[]} successUrls List of URLs shown after successful login (e.g., home or logout)
+	 * @property {string} successUrls.label Label for the success URL (displayed)
+	 * @property {string} successUrls.url Actual target URL
+	 * @property {number} timeoutForMessage Duration in milliseconds to show error messages
+	 * @property {number} timeoutForSuccess Duration in milliseconds before triggering the post-login success state
+	 * @property {Object} accessKeys Keyboard access keys for accessibility and shortcuts
+	 * @property {string} accessKeys.loginLink Access key for switching to login form
+	 * @property {string} accessKeys.username Access key for focusing the username field
+	 * @property {string} accessKeys.password Access key for focusing the password field
+	 * @property {Object} fetch Definitions for backend requests to support login workflows
+	 * @property {Object} fetch.login Fetch config for login request
+	 * @property {string} fetch.login.url Endpoint to post login credentials to
+	 * @property {string} fetch.login.method HTTP method for login (e.g., "POST")
+	 * @property {string} fetch.login.mode Fetch mode (e.g., "same-origin")
+	 * @property {Object} fetch.login.headers HTTP headers to be sent with the login request
+	 * @property {string} fetch.login.headers.accept Accept header value
+	 * @property {string} fetch.login.headers.Content-Type Content-Type header value
+	 * @property {string} fetch.login.credentials Credential mode (e.g., "same-origin")
+	 * @property {Object} fetch.forgotPassword Fetch config for password reset code request
+	 * @property {string} fetch.forgotPassword.url Endpoint to request a reset link/code
+	 * @property {string} fetch.forgotPassword.method HTTP method
+	 * @property {string} fetch.forgotPassword.mode Fetch mode
 	 * @property {Object} fetch.forgotPassword.headers Headers
-	 * @property {string} fetch.forgotPassword.headers.accept Accept
-	 * @property {string} fetch.forgotPassword.credentials Credentials
-	 * @property {Object} fetch.digits Digits fetch
-	 * @property {string} fetch.digits.url URL
-	 * @property {string} fetch.digits.method Method
-	 * @property {string} fetch.digits.mode Mode
+	 * @property {string} fetch.forgotPassword.headers.accept Accept header
+	 * @property {string} fetch.forgotPassword.headers.Content-Type Content-Type header
+	 * @property {string} fetch.forgotPassword.credentials Credential mode
+	 * @property {Object} fetch.digits Fetch config for submitting password reset code
+	 * @property {string} fetch.digits.url Endpoint for validating the code
+	 * @property {string} fetch.digits.method HTTP method
+	 * @property {string} fetch.digits.mode Fetch mode
 	 * @property {Object} fetch.digits.headers Headers
-	 * @property {string} fetch.digits.headers.accept Accept
-	 * @property {string} fetch.digits.credentials Credentials
-	 * @property {Object} fetch.secondFactor Second Factor fetch
-	 * @property {string} fetch.secondFactor.url URL
-	 * @property {string} fetch.secondFactor.method Method
-	 * @property {string} fetch.secondFactor.mode Mode
+	 * @property {string} fetch.digits.headers.accept Accept header
+	 * @property {string} fetch.digits.headers.Content-Type Content-Type header
+	 * @property {string} fetch.digits.credentials Credential mode
+	 * @property {Object} fetch.secondFactor Fetch config for submitting second factor code
+	 * @property {string} fetch.secondFactor.url Endpoint to validate second factor code
+	 * @property {string} fetch.secondFactor.method HTTP method
+	 * @property {string} fetch.secondFactor.mode Fetch mode
 	 * @property {Object} fetch.secondFactor.headers Headers
-	 * @property {string} fetch.secondFactor.headers.accept Accept
-	 * @property {string} fetch.secondFactor.credentials Credentials
+	 * @property {string} fetch.secondFactor.headers.accept Accept header
+	 * @property {string} fetch.secondFactor.headers.Content-Type Content-Type header
+	 * @property {string} fetch.secondFactor.credentials Credential mode
 	 */
 	get defaults() {
 		return Object.assign({}, super.defaults, {