@schukai/monster 4.47.0 → 4.48.0

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 
 
+## [4.48.0] - 2025-11-28
+
+### Add Features
+
+- Make autocomplete configurable in login form
+### Changes
+
+- nachtrag issue nummer f+r commit 18c2348b4 ist [#344](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/344)
+
+
+
+## [4.47.1] - 2025-11-25
+
+### Bug Fixes
+
+- rollback updater [#343](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/343)
+- **select:** return if selection no array
+
+
+
 ## [4.47.0] - 2025-11-25
 
 ### Add Features

package/package.json

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

package/source/components/form/login.mjs

@@ -232,6 +232,10 @@ class Login extends CustomElement {
    * @property {string} placeholder.username Placeholder for the username field
    * @property {string} placeholder.password Placeholder for the password field
    * @property {string} placeholder.email Placeholder for the email field
+   * @property {Object} autocomplete Autocomplete settings for the form fields
+   * @property {string} autocomplete.username Autocomplete value for the username field
+   * @property {string} autocomplete.password Autocomplete value for the password field
+   * @property {string} autocomplete.email Autocomplete value for the email field
    * @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")
@@ -317,6 +321,12 @@ class Login extends CustomElement {
         email: "",
       },
 
+      autocomplete: {
+        username: "off",
+        password: "off",
+        email: "off",
+      },
+
       fetch: {
         login: {
           url: "",
@@ -1740,12 +1750,12 @@ function getTemplate() {
                     <slot name="login-header"></slot>
                     <label part="login-label" data-monster-replace="path:labels.username"></label>
                     <input part="login-username"
-						   data-monster-attributes="placeholder path:placeholder.username"
-						   type="text" name="username" autofocus autocomplete="off">
+						   data-monster-attributes="placeholder path:placeholder.username, autocomplete path:autocomplete.username"
+						   type="text" name="username" autofocus>
                     <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-attributes="data-monster-option-placeholder path:placeholder.password"
+                    <monster-password
+						data-monster-attributes="data-monster-option-placeholder path:placeholder.password, data-monster-option-autocomplete path:autocomplete.password"
 						exportparts="input-group:input-group-password,
 						control:input-group-password-control,
 						input:input-group-password-input" part="login-password"
@@ -1789,8 +1799,9 @@ function getTemplate() {
                     <input type="email" name="email"
 						   part="field-set-forgot-password-email"
                            data-monster-attributes="accesskey path:accessKeys.username,
-                                                    placeholder path:placeholder.email"
-                           autocomplete="off">
+                                                    placeholder path:placeholder.email,
+                                                    autocomplete path:autocomplete.email"
+                           >
                     <div data-monster-attributes="class path:classes.emailInvalid"></div>
                     <monster-message-state-button id="requestLinkButton"
                                                   part="request-link-button"

package/source/components/form/select.mjs

@@ -3056,11 +3056,8 @@ function setSelection(selection) {
   }
 
   if (!isArray(selection)) {
-    console.warn(
-      "selection is not an array, resetting to empty array",
-      selection,
-    );
-    selection = [];
+    addErrorAttribute(this, "selection is not an array");
+    return Promise.reject(new Error("selection is not an array"));
   }
 
   let resultSelection = [];

package/source/dom/updater.mjs

@@ -72,24 +72,6 @@ const pendingDiffsSymbol = Symbol("pendingDiffs");
  */
 const processingSymbol = Symbol("processing");
 
-/**
- * @private
- * @type {symbol}
- */
-const pipeCacheSymbol = Symbol("pipeCache");
-
-/**
- * @private
- * @type {symbol}
- */
-const processingScheduledSymbol = Symbol("processingScheduled");
-
-/**
- * @private
- * Performance optimization: static Set for boolean checks
- */
-const TRUE_VALUES = new Set(["true", "1", "on"]);
-
 /**
  * The updater class connects an object with the DOM. In this way, structures and contents in the DOM can be
  * programmatically adapted via attributes.
@@ -149,9 +131,6 @@ class Updater extends Base {
 
     this[pendingDiffsSymbol] = [];
     this[processingSymbol] = false;
-    this[processingScheduledSymbol] = false;
-    this[pipeCacheSymbol] = new Map();
-    this[timerElementEventHandlerSymbol] = new WeakMap();
 
     this[internalSymbol].subject.attachObserver(
       new Observer(() => {
@@ -159,19 +138,7 @@ class Updater extends Base {
         const diffResult = diff(this[internalSymbol].last, real);
         this[internalSymbol].last = clone(real);
         this[pendingDiffsSymbol].push(diffResult);
-
-        if (!this[processingScheduledSymbol]) {
-          this[processingScheduledSymbol] = true;
-
-          return new Promise((resolve) => {
-            queueMicrotask(() => {
-              this[processingScheduledSymbol] = false;
-              this.#processQueue().finally(resolve);
-            });
-          });
-        }
-
-        return Promise.resolve();
+        return this.#processQueue();
       }),
     );
   }
@@ -227,7 +194,7 @@ class Updater extends Base {
    *
    * ```js
    * updater.run().then(() => {
-   * updater.enableEventProcessing();
+   *   updater.enableEventProcessing();
    * });
    * ```
    *
@@ -276,7 +243,7 @@ class Updater extends Base {
    *
    * ```js
    * updater.run().then(() => {
-   * updater.enableEventProcessing();
+   *   updater.enableEventProcessing();
    * });
    * ```
    *
@@ -328,20 +295,6 @@ class Updater extends Base {
     this[internalSymbol].callbacks.set(name, callback);
     return this;
   }
-
-  /**
-   * @private
-   * @param {string} cmd
-   * @returns {Pipe}
-   */
-  getPipe(cmd) {
-    let pipe = this[pipeCacheSymbol].get(cmd);
-    if (!pipe) {
-      pipe = new Pipe(cmd);
-      this[pipeCacheSymbol].set(cmd, pipe);
-    }
-    return pipe;
-  }
 }
 
 /**
@@ -355,9 +308,8 @@ function getCheckStateCallback() {
   return function (current) {
     // this is a reference to the current object (therefore no array function here)
     if (this instanceof HTMLInputElement) {
-      if (["radio", "checkbox"].includes(this.type)) {
-        if (current == null) return undefined;
-        return String(this.value) === String(current) ? "true" : undefined;
+      if (["radio", "checkbox"].indexOf(this.type) !== -1) {
+        return `${this.value}` === `${current}` ? "true" : undefined;
       }
     } else if (this instanceof HTMLOptionElement) {
       if (isArray(current) && current.indexOf(this.value) !== -1) {
@@ -397,26 +349,22 @@ function getControlEventHandler() {
       return;
     }
 
-    const switches = this[timerElementEventHandlerSymbol];
-    let dms = switches.get(element);
-
-    if (dms instanceof DeadMansSwitch) {
+    if (this[timerElementEventHandlerSymbol] instanceof DeadMansSwitch) {
       try {
-        dms.touch();
+        this[timerElementEventHandlerSymbol].touch();
         return;
       } catch (e) {
-        switches.delete(element);
+        delete this[timerElementEventHandlerSymbol];
       }
     }
 
-    dms = new DeadMansSwitch(50, () => {
+    this[timerElementEventHandlerSymbol] = new DeadMansSwitch(50, () => {
       try {
         retrieveAndSetValue.call(this, element);
       } catch (e) {
         addErrorAttribute(element, e);
       }
     });
-    switches.set(element, dms);
   };
 
   return this[symbol];
@@ -499,21 +447,18 @@ function retrieveAndSetValue(element) {
     case "int":
     case "float":
     case "integer":
-      const num = Number(value);
-      if (value === "" || value === null || value === undefined) {
-        value = undefined;
-      } else if (Number.isNaN(num)) {
-        value = undefined;
-      } else {
-        value = num;
+      value = Number(value);
+      if (isNaN(value)) {
+        value = 0;
       }
       break;
     case "boolean":
     case "bool":
     case "checkbox":
-      // Use static set (Performance fix)
-      value = TRUE_VALUES.has(String(value).toLowerCase()) || value === true;
+      value =
+        value === "true" || value === "1" || value === "on" || value === true;
       break;
+
     case "string[]":
     case "[]string":
       if (isString(value)) {
@@ -564,14 +509,11 @@ function retrieveAndSetValue(element) {
     case "object":
     case "json":
       if (isString(value)) {
-        try {
-          value = JSON.parse(value);
-        } catch (e) {
-          throw new Error("unsupported value for object");
-        }
+        value = JSON.parse(value);
       } else {
         throw new Error("unsupported value for object");
       }
+
       break;
     default:
       break;
@@ -593,11 +535,21 @@ function retrieveAndSetValue(element) {
  * @private
  */
 function parseIntArray(val) {
-  if (val === undefined || val === null) return [];
-
-  const list = isArray(val) ? val : String(val).split(",");
-
-  return list.map((v) => parseInt(v, 10)).filter((v) => !Number.isNaN(v));
+  if (isString(val)) {
+    return val.trim() === ""
+      ? []
+      : val
+          .split(",")
+          .map((v) => parseInt(v, 10))
+          .filter((v) => !isNaN(v));
+  } else if (isInteger(val)) {
+    return [val];
+  } else if (val === undefined || val === null) {
+    return [];
+  } else if (isArray(val)) {
+    return val.map((v) => parseInt(v, 10)).filter((v) => !isNaN(v));
+  }
+  throw new Error("unsupported value for int array");
 }
 
 /**
@@ -698,7 +650,7 @@ function insertElement(change) {
           throw new Error("pipes are not allowed when cloning a node.");
         }
 
-        const pipe = this.getPipe(cmd);
+        const pipe = new Pipe(cmd);
         this[internalSymbol].callbacks.forEach((f, n) => {
           pipe.setCallback(n, f);
         });
@@ -878,18 +830,25 @@ function runUpdateContent(container, parts, subject) {
 
     // Unfortunately, static data is always changed as well, since it is not possible to react to changes here.
     const query = `[${ATTRIBUTE_UPDATER_REPLACE}^="path:${current}"], [${ATTRIBUTE_UPDATER_REPLACE}^="static:"], [${ATTRIBUTE_UPDATER_REPLACE}^="i18n:"]`;
+    const e = container.querySelectorAll(`${query}`);
 
-    // Performance optimization: avoid new Set([...NodeList])
-    const elements = container.querySelectorAll(`${query}`);
+    const iterator = new Set([...e]);
 
-    const process = (element) => {
+    if (container.matches(query)) {
+      iterator.add(container);
+    }
+
+    /**
+     * @type {HTMLElement}
+     */
+    for (const [element] of iterator.entries()) {
       if (mem.has(element)) return;
       mem.add(element);
 
       const attributes = element.getAttribute(ATTRIBUTE_UPDATER_REPLACE);
       const cmd = trimSpaces(attributes);
 
-      const pipe = this.getPipe(cmd);
+      const pipe = new Pipe(cmd);
       this[internalSymbol].callbacks.forEach((f, n) => {
         pipe.setCallback(n, f);
       });
@@ -915,16 +874,6 @@ function runUpdateContent(container, parts, subject) {
       } else {
         element.innerHTML = value;
       }
-    };
-
-    // Iterate NodeList directly
-    for (const element of elements) {
-      process(element);
-    }
-
-    // Check container
-    if (container.matches(query)) {
-      process(container);
     }
   }
 }
@@ -959,18 +908,27 @@ function runUpdateAttributes(container, parts, subject) {
     const current = parts.join(".");
     parts.pop();
 
+    let iterator = new Set();
+
     const query = `[${ATTRIBUTE_UPDATER_SELECT_THIS}][${ATTRIBUTE_UPDATER_ATTRIBUTES}], [${ATTRIBUTE_UPDATER_ATTRIBUTES}*="path:${current}"], [${ATTRIBUTE_UPDATER_ATTRIBUTES}^="static:"], [${ATTRIBUTE_UPDATER_ATTRIBUTES}^="i18n:"]`;
 
-    // Performance optimization: avoid new Set([...NodeList])
-    const elements = container.querySelectorAll(query);
+    const e = container.querySelectorAll(query);
+
+    if (e.length > 0) {
+      iterator = new Set([...e]);
+    }
 
-    const process = (element) => {
+    if (container.matches(query)) {
+      iterator.add(container);
+    }
+
+    for (const [element] of iterator.entries()) {
       if (mem.has(element)) return;
       mem.add(element);
 
       // this case occurs when the ATTRIBUTE_UPDATER_SELECT_THIS attribute is set
       if (!element.hasAttribute(ATTRIBUTE_UPDATER_ATTRIBUTES)) {
-        return;
+        continue;
       }
 
       const attributes = element.getAttribute(ATTRIBUTE_UPDATER_ATTRIBUTES);
@@ -981,7 +939,7 @@ function runUpdateAttributes(container, parts, subject) {
         const name = trimSpaces(def.substr(0, i));
         const cmd = trimSpaces(def.substr(i));
 
-        const pipe = this.getPipe(cmd);
+        const pipe = new Pipe(cmd);
 
         this[internalSymbol].callbacks.forEach((f, n) => {
           pipe.setCallback(n, f, element);
@@ -995,30 +953,14 @@ function runUpdateAttributes(container, parts, subject) {
           addErrorAttribute(element, e);
         }
 
-        const shouldRemove =
-          value === undefined || value === null || Number.isNaN(value);
-
-        if (shouldRemove) {
+        if (value === undefined) {
           element.removeAttribute(name);
-        } else {
-          const strValue = String(value);
-
-          if (element.getAttribute(name) !== strValue) {
-            element.setAttribute(name, strValue);
-          }
+        } else if (element.getAttribute(name) !== value) {
+          element.setAttribute(name, value);
         }
+
         handleInputControlAttributeUpdate.call(this, element, name, value);
       }
-    };
-
-    // Iterate NodeList directly
-    for (const element of elements) {
-      process(element);
-    }
-
-    // Check container
-    if (container.matches(query)) {
-      process(container);
     }
   }
 }
@@ -1031,59 +973,52 @@ function runUpdateAttributes(container, parts, subject) {
  * @return {void}
  * @this Updater
  */
-function handleInputControlAttributeUpdate(element, name, value) {
-  // Prevent NaN warnings by normalizing invalid numbers to undefined
-  if (typeof value === "number" && isNaN(value)) {
-    value = undefined;
-  }
 
+function handleInputControlAttributeUpdate(element, name, value) {
   if (element instanceof HTMLSelectElement) {
     switch (element.type) {
       case "select-multiple":
-        // Ensure value is an array before calling indexOf to avoid errors
-        if (Array.isArray(value) || typeof value === "string") {
-          for (const [index, opt] of Object.entries(element.options)) {
-            opt.selected = value.indexOf(opt.value) !== -1;
-          }
+        for (const [index, opt] of Object.entries(element.options)) {
+          opt.selected = value.indexOf(opt.value) !== -1;
         }
+
         break;
       case "select-one":
         // Only one value may be selected
+
         for (const [index, opt] of Object.entries(element.options)) {
-          if (opt.value == value) {
-            // Loose equality to match string numbers
+          if (opt.value === value) {
             element.selectedIndex = index;
             break;
           }
         }
+
         break;
     }
   } else if (element instanceof HTMLInputElement) {
     switch (element.type) {
       case "radio":
         if (name === "checked") {
-          element.checked = value !== undefined && value !== null;
+          element.checked = value !== undefined;
         }
         break;
 
       case "checkbox":
         if (name === "checked") {
-          element.checked = value !== undefined && value !== null;
+          element.checked = value !== undefined;
         }
         break;
 
       case "text":
       default:
         if (name === "value") {
-          // Check for undefined, null, or NaN
-          element.value = value === undefined || value === null ? "" : value;
+          element.value = value === undefined ? "" : value;
         }
         break;
     }
   } else if (element instanceof HTMLTextAreaElement) {
     if (name === "value") {
-      // Check for undefined, null, or NaN
-      element.value = value === undefined || value === null ? "" : value;
+      element.value = value === undefined ? "" : value;
     }
   }
 }