@schukai/monster 4.2.0 → 4.3.1

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 
 
+## [4.3.1] - 2025-05-12
+
+### Bug Fixes
+
+- Improve structure and port attributes in login and password components
+
+
+
+## [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.1"}

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, {
@@ -1565,8 +1597,7 @@ function getTemplate() {
                               exportparts="control:collapse-login-control,
    										   container:collapse-login-container,
 										   deco:collapse-login-deco"
-                              part="login-collapse"
-            >
+                              part="login-collapse">
                 <monster-field-set
                         exportparts="
 						control:field-set-login-control,
@@ -1578,10 +1609,14 @@ function getTemplate() {
                         part="login-field-set">
                     <slot name="login-header"></slot>
                     <label part="login-label" data-monster-replace="path:labels.username"></label>
-                    <input type="text" name="username" autofocus autocomplete="off">
+                    <input part="login-username" type="text" name="username" autofocus autocomplete="off">
                     <div data-monster-attributes="class path:classes.usernameInvalid"></div>
                     <label part="login-password-label" data-monster-replace="path:labels.password"></label>
-                    <monster-password data-monster-bind="path:password"></monster-password>
+                    <monster-password 
+						exportparts="input-group:input-group-password,
+						control:input-group-password-control,
+						input:input-group-password-input" part="login-password"
+						data-monster-bind="path:password"></monster-password>
                     <div data-monster-attributes="class path:classes.passwordInvalid"></div>
                     <monster-message-state-button id="loginButton"
                                                   part="login-button"
@@ -1619,6 +1654,7 @@ function getTemplate() {
                     <slot name="forgot-password-header"></slot>
                     <label part="forgot-password-label" data-monster-replace="path:labels.mailAddress"></label>
                     <input type="email" name="email"
+						   part="field-set-forgot-password-email"
                            data-monster-attributes="accesskey path:accessKeys.username"
                            autocomplete="off">
                     <div data-monster-attributes="class path:classes.emailInvalid"></div>
@@ -1661,6 +1697,7 @@ function getTemplate() {
                     <label part="second-factor-label" data-monster-replace="path:labels.secondFactor"></label>
                     <div>
                         <monster-digits data-monster-attributes="data-monster-option-digits path:digits"
+										part="second-factor-digits-control"
                                         id="secondFactorControl"></monster-digits>
                     </div>
                     <!-- SECOND FACTOR COLLAPSE -->
@@ -1700,7 +1737,8 @@ function getTemplate() {
                     <slot name="digits-header"></slot>
                     <label part="digits-label" data-monster-replace="path:labels.digits"></label>
                     <div>
-                        <monster-digits data-monster-attributes="data-monster-option-digits path:digits"
+                        <monster-digits part="digits-control" 
+							data-monster-attributes="data-monster-option-digits path:digits"
                                         id="digitsControl"></monster-digits>
                     </div>
                     <monster-message-state-button id="digitsButton"

package/source/components/form/password.mjs

@@ -251,8 +251,9 @@ function getTemplate() {
 	// language=HTML
 	return `
         <div data-monster-role="control" part="control">
-            <monster-input-group>
+            <monster-input-group part="input-group">
                 <input data-monster-role="input"
+		       part="input"
                        style="border:0"
                        data-monster-attributes="
 			    type path:type,
@@ -261,9 +262,7 @@ function getTemplate() {
 			    autocomplete path:autocomplete,
 			    inputmode path:inputmode,
 			    aria-required path:aria.required,
-			    aria-placeholder path:aria.placeholder"
-                >
-
+			    aria-placeholder path:aria.placeholder">
                 <svg viewBox="0 0 16 16" data-monster-role="visible-icon" class="hidden">
                     \${visible-icon}
                 </svg>