@schukai/monster 3.98.2 → 3.99.0

package/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 
 
+## [3.99.0] - 2025-01-07
+
+### Add Features
+
+- new error functions addErrorAttribute and removeErrorAttribute; small database changes
+### Bug Fixes
+
+- update tests
+### Changes
+
+- update webtest
+
+
+
+## [3.98.3] - 2025-01-07
+
+### Bug Fixes
+
+- update doc
+
+
+
 ## [3.98.2] - 2025-01-07
 
 ### Bug Fixes

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.12","@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":"3.98.2"}
+{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.13","@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":"3.99.0"}

package/source/components/datatable/columnbar.mjs

@@ -22,7 +22,7 @@ import { findTargetElementFromEvent } from "../../dom/events.mjs";
 import { clone } from "../../util/clone.mjs";
 import { ColumnBarStyleSheet } from "./stylesheet/column-bar.mjs";
 import { createPopper } from "@popperjs/core";
-import {getLocaleOfDocument} from "../../dom/locale.mjs";
+import { getLocaleOfDocument } from "../../dom/locale.mjs";
 
 export { ColumnBar };
 
@@ -133,47 +133,46 @@ class ColumnBar extends CustomElement {
 function getTranslations() {
 	const locale = getLocaleOfDocument();
 	switch (locale.language) {
-		case 'de':
+		case "de":
 			return {
-				settings: "Einstellungen"
+				settings: "Einstellungen",
 			};
-		case 'fr':
+		case "fr":
 			return {
-				settings: "Paramètres"
+				settings: "Paramètres",
 			};
-		case 'sp':
+		case "sp":
 			return {
-				settings: "Configuración"
+				settings: "Configuración",
 			};
-		case 'it':
+		case "it":
 			return {
-				settings: "Impostazioni"
+				settings: "Impostazioni",
 			};
-		case 'pl':
+		case "pl":
 			return {
-				settings: "Ustawienia"
+				settings: "Ustawienia",
 			};
-		case 'no':
+		case "no":
 			return {
-				settings: "Innstillinger"
+				settings: "Innstillinger",
 			};
-		case 'dk':
+		case "dk":
 			return {
-				settings: "Indstillinger"
+				settings: "Indstillinger",
 			};
-		case 'sw':
+		case "sw":
 			return {
-				settings: "Inställningar"
+				settings: "Inställningar",
 			};
 		default:
-		case 'en':
+		case "en":
 			return {
-				settings: "Settings"
+				settings: "Settings",
 			};
 	}
 }
 
-
 /**
  * @private
  * @return {ColumnBar}

package/source/components/datatable/datatable.mjs

@@ -71,8 +71,7 @@ import {
     getDocument,
     getWindow,
 } from "../../dom/util.mjs";
-import {addAttributeToken} from "../../dom/attributes.mjs";
-import {ATTRIBUTE_ERRORMESSAGE} from "../../dom/constants.mjs";
+
 import {getDocumentTranslations} from "../../i18n/translations.mjs";
 import "../state/state.mjs";
 import "../host/collapse.mjs";
@@ -83,7 +82,7 @@ import "./datasource/rest.mjs";
 
 import "../form/context-help.mjs";
 import {getLocaleOfDocument} from "../../dom/locale.mjs";
-
+import {addErrorAttribute} from "../../dom/error.mjs";
 
 export {DataTable};
 
@@ -251,7 +250,7 @@ class DataTable extends CustomElement {
     /**
      *
      * @param {string} selector
-     * @return {NodeListOf<*>}
+     * @return {NodeList}
      */
     getGridElements(selector) {
         return this[gridElementSymbol].querySelectorAll(selector);
@@ -299,7 +298,9 @@ class DataTable extends CustomElement {
         const selectedRows = [];
         rows.forEach((row) => {
             if (row.checked) {
-                const key = row.parentNode.getAttribute("data-monster-insert-reference");
+                const key = row.parentNode.getAttribute(
+                    "data-monster-insert-reference",
+                );
                 const index = key.split("-").pop();
                 selectedRows.push(parseInt(index, 10));
             }
@@ -336,28 +337,6 @@ class DataTable extends CustomElement {
         initControlReferences.call(this);
         initEventHandler.call(this);
 
-        const selector = this.getOption("datasource.selector");
-
-        if (isString(selector)) {
-            const element = findElementWithSelectorUpwards(this, selector);
-            if (element === null) {
-                throw new Error("the selector must match exactly one element");
-            }
-
-            if (!isInstance(element, Datasource)) {
-                throw new TypeError("the element must be a datasource");
-            }
-
-            this[datasourceLinkedElementSymbol] = element;
-
-            queueMicrotask(() => {
-                handleDataSourceChanges.call(this);
-                element.datasource.attachObserver(
-                    new Observer(handleDataSourceChanges.bind(this)),
-                );
-            });
-        }
-
         getHostConfig
             .call(this, getColumnVisibilityConfigKey)
             .then((config) => {
@@ -380,30 +359,54 @@ class DataTable extends CustomElement {
                         try {
                             initGridAndStructs.call(this, config, headerOrderMap);
                         } catch (error) {
-                            addAttributeToken(
+                            addErrorAttribute(
                                 this,
-                                ATTRIBUTE_ERRORMESSAGE,
-                                error?.message || error.toString(),
+                                error
                             );
                         }
 
                         updateColumnBar.call(this);
                     })
                     .catch((error) => {
-                        addAttributeToken(
-                            this,
-                            ATTRIBUTE_ERRORMESSAGE,
-                            error?.message || error.toString(),
+                        addErrorAttribute(
+                            this, error,
                         );
                     });
             })
             .catch((error) => {
-                addAttributeToken(
+                addErrorAttribute(
                     this,
-                    ATTRIBUTE_ERRORMESSAGE,
-                    error?.message || error.toString(),
+                    error
                 );
+            })
+            .finally(() => {
+
+                const selector = this.getOption("datasource.selector");
+
+                if (isString(selector)) {
+                    const element = findElementWithSelectorUpwards(this, selector);
+                    if (element === null) {
+                        throw new Error("the selector must match exactly one element");
+                    }
+
+                    if (!isInstance(element, Datasource)) {
+                        throw new TypeError("the element must be a datasource");
+                    }
+
+                    this[datasourceLinkedElementSymbol] = element;
+
+                    getWindow().requestAnimationFrame(() => {
+
+                        handleDataSourceChanges.call(this);
+                        if (element && "datasource" in element) {
+                            element.datasource.attachObserver(
+                                new Observer(handleDataSourceChanges.bind(this)),
+                            );
+                        }
+                    });
+                }
             });
+
     }
 
     /**
@@ -588,14 +591,13 @@ function getHostConfig(callback) {
     const host = findElementWithSelectorUpwards(this, "monster-host");
 
     if (!host) {
-        addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, "no host found");
+        addErrorAttribute(this, "no host found");
         return Promise.resolve({});
     }
 
     if (!this.id) {
-        addAttributeToken(
+        addErrorAttribute(
             this,
-            ATTRIBUTE_ERRORMESSAGE,
             "no id found; id is required for config",
         );
         return Promise.resolve({});
@@ -700,7 +702,7 @@ function updateConfigColumnBar() {
     try {
         host.setConfig(configKey, map);
     } catch (error) {
-        addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, String(error));
+        addErrorAttribute(this, error);
     }
 }
 
@@ -874,9 +876,15 @@ function initEventHandler() {
     }
 
     const selectRowCallback = (event) => {
-        const element = findTargetElementFromEvent(event, "data-monster-role", "select-row");
+        const element = findTargetElementFromEvent(
+            event,
+            "data-monster-role",
+            "select-row",
+        );
         if (element) {
-            const key = element.parentNode.getAttribute("data-monster-insert-reference");
+            const key = element.parentNode.getAttribute(
+                "data-monster-insert-reference",
+            );
             const row = self.getGridElements(
                 `[data-monster-insert-reference="${key}"]`,
             );
@@ -889,37 +897,40 @@ function initEventHandler() {
                 });
 
                 fireCustomEvent(self, "monster-datatable-row-selected", {
-                    index: index
-                })
-
+                    index: index,
+                });
             } else {
                 row.forEach((col) => {
                     col.classList.remove("selected");
                 });
 
                 fireCustomEvent(self, "monster-datatable-row-deselected", {
-                    index: index
-                })
+                    index: index,
+                });
             }
 
-            fireCustomEvent(this, "monster-datatable-selection-changed", {})
+            fireCustomEvent(this, "monster-datatable-selection-changed", {});
         }
 
         const rows = self.getGridElements(`[data-monster-role="select-row"]`);
         const allSelected = Array.from(rows).every((row) => row.checked);
-        const selectAll = this[gridHeadersElementSymbol].querySelector(`[data-monster-role="select-all"]`);
+        const selectAll = this[gridHeadersElementSymbol].querySelector(
+            `[data-monster-role="select-all"]`,
+        );
         selectAll.checked = allSelected;
-
-
-    }
+    };
 
     this[gridElementSymbol].addEventListener("click", selectRowCallback);
     this[gridElementSymbol].addEventListener("touch", selectRowCallback);
 
     const selectAllCallback = (event) => {
-        const element = findTargetElementFromEvent(event, "data-monster-role", "select-all");
+        const element = findTargetElementFromEvent(
+            event,
+            "data-monster-role",
+            "select-all",
+        );
         if (element) {
-            const mode = element.checked
+            const mode = element.checked;
 
             const rows = this.getGridElements(`[data-monster-role="select-row"]`);
             rows.forEach((row) => {
@@ -927,20 +938,17 @@ function initEventHandler() {
             });
 
             if (mode) {
-                fireCustomEvent(this, "monster-datatable-all-rows-selected", {})
+                fireCustomEvent(this, "monster-datatable-all-rows-selected", {});
             } else {
-                fireCustomEvent(this, "monster-datatable-all-rows-deselected", {})
+                fireCustomEvent(this, "monster-datatable-all-rows-deselected", {});
             }
 
-            fireCustomEvent(this, "monster-datatable-selection-changed", {})
-
+            fireCustomEvent(this, "monster-datatable-selection-changed", {});
         }
-    }
-
-    this[gridHeadersElementSymbol].addEventListener("click", selectAllCallback)
-    this[gridHeadersElementSymbol].addEventListener("touch", selectAllCallback)
-
+    };
 
+    this[gridHeadersElementSymbol].addEventListener("click", selectAllCallback);
+    this[gridHeadersElementSymbol].addEventListener("touch", selectAllCallback);
 }
 
 /**
@@ -950,19 +958,23 @@ function initGridAndStructs(hostConfig, headerOrderMap) {
     const rowID = this.getOption("templateMapping.row-key");
 
     if (!this[gridElementSymbol]) {
-        throw new Error("no grid element is defined");
+        addErrorAttribute(this, "no grid element found");
+        return;
     }
 
     let template;
     getSlottedElements.call(this).forEach((e) => {
-
         if (e instanceof HTMLTemplateElement && e.id === rowID) {
             template = e;
         }
     });
 
     if (!template) {
-        throw new Error("no template is defined");
+        addErrorAttribute(
+            this,
+            "no template found, please add a template",
+        );
+        return;
     }
 
     const rowCount = template.content.children.length;
@@ -1055,9 +1067,13 @@ function initGridAndStructs(hostConfig, headerOrderMap) {
         }
 
         const features = [];
+
         if (row.hasAttribute(ATTRIBUTE_DATATABLE_FEATURES)) {
-            const features = row.getAttribute(ATTRIBUTE_DATATABLE_FEATURES).split(" ");
-            features.forEach((feature) => {
+            const fl = row
+                .getAttribute(ATTRIBUTE_DATATABLE_FEATURES)
+                .split(" ");
+
+            fl.forEach((feature) => {
                 features.push(feature.trim());
 
                 if (feature === "select") {
@@ -1072,7 +1088,6 @@ function initGridAndStructs(hostConfig, headerOrderMap) {
                     checkbox.setAttribute("data-monster-role", "select-row");
                     row.appendChild(checkbox);
                 }
-
             });
         }
 
@@ -1105,7 +1120,7 @@ function initGridAndStructs(hostConfig, headerOrderMap) {
 function getTranslations() {
     const locale = getLocaleOfDocument();
     switch (locale.language) {
-        case 'de':
+        case "de":
             return {
                 theListContainsNoEntries: "Die Liste enthält keine Einträge",
                 copyAll: "Alles kopieren",
@@ -1115,7 +1130,7 @@ function getTranslations() {
                     "<p>Um eine ganze Zeile zu kopieren, halten Sie die Umschalttaste gedrückt, während Sie klicken.<br>" +
                     "Wenn Sie alle Zeilen kopieren möchten, können Sie die Schaltfläche <strong>Alles kopieren</strong> verwenden.</p>",
             };
-        case 'fr':
+        case "fr":
             return {
                 theListContainsNoEntries: "La liste ne contient aucune entrée",
                 copyAll: "Copier tout",
@@ -1125,7 +1140,7 @@ function getTranslations() {
                     "<p>Pour copier une rangée entière, maintenez la touche Maj enfoncée tout en cliquant.<br>" +
                     "Si vous souhaitez copier toutes les rangées, vous pouvez utiliser le bouton <strong>Copier tout</strong>.</p>",
             };
-        case 'sp':
+        case "sp":
             return {
                 theListContainsNoEntries: "La lista no contiene entradas",
                 copyAll: "Copiar todo",
@@ -1135,7 +1150,7 @@ function getTranslations() {
                     "<p>Para copiar una fila entera, mantén presionada la tecla Shift mientras haces clic.<br>" +
                     "Si quieres copiar todas las filas, puedes usar el botón <strong>Copiar todo</strong>.</p>",
             };
-        case 'it':
+        case "it":
             return {
                 theListContainsNoEntries: "L'elenco non contiene voci",
                 copyAll: "Copia tutto",
@@ -1145,7 +1160,7 @@ function getTranslations() {
                     "<p>Per copiare un'intera riga, tieni premuto il tasto Shift mentre clicchi.<br>" +
                     "Se vuoi copiare tutte le righe, puoi usare il pulsante <strong>Copia tutto</strong>.</p>",
             };
-        case 'pl':
+        case "pl":
             return {
                 theListContainsNoEntries: "Lista nie zawiera wpisów",
                 copyAll: "Kopiuj wszystko",
@@ -1155,7 +1170,7 @@ function getTranslations() {
                     "<p>Aby skopiować cały wiersz, przytrzymaj klawisz Shift podczas klikania.<br>" +
                     "Jeśli chcesz skopiować wszystkie wiersze, możesz użyć przycisku <strong>Kopiuj wszystko</strong>.</p>",
             };
-        case 'no':
+        case "no":
             return {
                 theListContainsNoEntries: "Listen inneholder ingen oppføringer",
                 copyAll: "Kopier alt",
@@ -1165,7 +1180,7 @@ function getTranslations() {
                     "<p>For å kopiere en hel rad, hold nede Skift-tasten mens du klikker.<br>" +
                     "Hvis du vil kopiere alle radene, kan du bruke knappen <strong>Kopier alt</strong>.</p>",
             };
-        case 'dk':
+        case "dk":
             return {
                 theListContainsNoEntries: "Listen indeholder ingen poster",
                 copyAll: "Kopiér alt",
@@ -1175,7 +1190,7 @@ function getTranslations() {
                     "<p>For at kopiere en hel række, hold Shift-tasten nede, mens du klikker.<br>" +
                     "Hvis du vil kopiere alle rækker, kan du bruge knappen <strong>Kopiér alt</strong>.</p>",
             };
-        case 'sw':
+        case "sw":
             return {
                 theListContainsNoEntries: "Listan innehåller inga poster",
                 copyAll: "Kopiera allt",
@@ -1186,8 +1201,7 @@ function getTranslations() {
                     "Om du vill kopiera alla rader kan du använda knappen <strong>Kopiera allt</strong>.</p>",
             };
 
-
-        case 'en':
+        case "en":
         default:
             return {
                 theListContainsNoEntries: "The list contains no entries",

package/source/components/datatable/filter/date-range.mjs

@@ -30,7 +30,7 @@ import {
 	removeAttributeToken,
 } from "../../../dom/attributes.mjs";
 import { findTargetElementFromEvent } from "../../../dom/events.mjs";
-import {getLocaleOfDocument} from "../../../dom/locale.mjs";
+import { getLocaleOfDocument } from "../../../dom/locale.mjs";
 
 export { DateRange };
 
@@ -305,7 +305,7 @@ class DateRange extends AbstractBase {
 function getTranslations() {
 	const locale = getLocaleOfDocument();
 	switch (locale.language) {
-		case 'de':
+		case "de":
 			return {
 				singleValue: "Wert",
 				fromValue: "Von",
@@ -318,9 +318,9 @@ function getTranslations() {
 				days: "Tage",
 				years: "Jahre",
 				weeks: "Wochen",
-				moreThanValue: "Mehr als"
+				moreThanValue: "Mehr als",
 			};
-		case 'fr':
+		case "fr":
 			return {
 				singleValue: "Valeur",
 				fromValue: "De",
@@ -333,9 +333,9 @@ function getTranslations() {
 				days: "Jours",
 				years: "Années",
 				weeks: "Semaines",
-				moreThanValue: "Plus de"
+				moreThanValue: "Plus de",
 			};
-		case 'sp':
+		case "sp":
 			return {
 				singleValue: "Valor",
 				fromValue: "Desde",
@@ -348,9 +348,9 @@ function getTranslations() {
 				days: "Días",
 				years: "Años",
 				weeks: "Semanas",
-				moreThanValue: "Más de"
+				moreThanValue: "Más de",
 			};
-		case 'it':
+		case "it":
 			return {
 				singleValue: "Valore",
 				fromValue: "Da",
@@ -363,9 +363,9 @@ function getTranslations() {
 				days: "Giorni",
 				years: "Anni",
 				weeks: "Settimane",
-				moreThanValue: "Più di"
+				moreThanValue: "Più di",
 			};
-		case 'pl':
+		case "pl":
 			return {
 				singleValue: "Wartość",
 				fromValue: "Od",
@@ -378,9 +378,9 @@ function getTranslations() {
 				days: "Dni",
 				years: "Lata",
 				weeks: "Tygodnie",
-				moreThanValue: "Więcej niż"
+				moreThanValue: "Więcej niż",
 			};
-		case 'no':
+		case "no":
 			return {
 				singleValue: "Verdi",
 				fromValue: "Fra",
@@ -393,9 +393,9 @@ function getTranslations() {
 				days: "Dager",
 				years: "År",
 				weeks: "Uker",
-				moreThanValue: "Mer enn"
+				moreThanValue: "Mer enn",
 			};
-		case 'dk':
+		case "dk":
 			return {
 				singleValue: "Værdi",
 				fromValue: "Fra",
@@ -408,9 +408,9 @@ function getTranslations() {
 				days: "Dage",
 				years: "År",
 				weeks: "Uger",
-				moreThanValue: "Mere end"
+				moreThanValue: "Mere end",
 			};
-		case 'sw':
+		case "sw":
 			return {
 				singleValue: "Värde",
 				fromValue: "Från",
@@ -423,10 +423,10 @@ function getTranslations() {
 				days: "Dagar",
 				years: "År",
 				weeks: "Veckor",
-				moreThanValue: "Mer än"
+				moreThanValue: "Mer än",
 			};
 		default:
-		case 'en':
+		case "en":
 			return {
 				singleValue: "Value",
 				fromValue: "From",
@@ -439,12 +439,11 @@ function getTranslations() {
 				days: "Days",
 				years: "Years",
 				weeks: "Weeks",
-				moreThanValue: "More than"
+				moreThanValue: "More than",
 			};
 	}
 }
 
-
 /**
  *
  * @param {HTMLElement} group