@schukai/monster 4.104.0 → 4.106.0

package/source/components/form/form.mjs

@@ -91,6 +91,8 @@ class Form extends DataSet {
 
 			writeBack: {
 				events: ["keyup", "click", "change", "drop", "touchend", "input"],
+				transformer: null,
+				callbacks: null,
 			},
 
 			reportValidity: {

package/source/components/layout/tabs.mjs

@@ -1326,6 +1326,16 @@ function getButtonLabel(node) {
 		label = "";
 	}
 
+	if (setLabel === true) {
+		if (label.trim() === "") {
+			label = node.textContent || "";
+		}
+		label = label.replace(/\s+/g, " ").trim();
+		const words = label.split(" ").filter((word) => word !== "");
+		if (words.length > 3) {
+			label = `${words.slice(0, 3).join(" ")}…`;
+		}
+	}
 	label = label.trim();
 
 	if (label === "") {

package/source/monster.mjs

@@ -60,6 +60,7 @@ export * from "./components/form/cart-control.mjs";
 export * from "./components/form/context-hint.mjs";
 export * from "./components/form/select.mjs";
 export * from "./components/form/login.mjs";
+export * from "./components/form/credential-button.mjs";
 export * from "./components/form/confirm-button.mjs";
 export * from "./components/form/context-info.mjs";
 export * from "./components/form/context-base.mjs";

package/source/types/version.mjs

@@ -156,7 +156,7 @@ function getMonsterVersion() {
 	}
 
 	/** don't touch, replaced by make with package.json version */
-	monsterVersion = new Version("4.94.0");
+	monsterVersion = new Version("4.104.0");
 
 	return monsterVersion;
 }

package/test/cases/components/datatable/writeback-sanitizer.mjs

@@ -0,0 +1,104 @@
+import * as chai from 'chai';
+import {chaiDom} from "../../../util/chai-dom.mjs";
+import {initJSDOM} from "../../../util/jsdom.mjs";
+
+let expect = chai.expect;
+chai.use(chaiDom);
+
+let Dataset;
+
+function buildDatasource(id, payload) {
+    const ds = document.createElement('monster-datasource-dom');
+    ds.id = id;
+    ds.innerHTML = `<script type="application/json">${JSON.stringify(payload)}</script>`;
+    return ds;
+}
+
+describe('Dataset writeBack sanitizer', function () {
+
+    before(async function () {
+        await initJSDOM();
+        await import("element-internals-polyfill").catch(() => {});
+        await import("../../../../source/components/datatable/datasource/dom.mjs");
+        const mod = await import("../../../../source/components/datatable/dataset.mjs");
+        Dataset = mod['DataSet'];
+    });
+
+    beforeEach(() => {
+        const mocks = document.getElementById('mocks');
+        mocks.innerHTML = '';
+    });
+
+    afterEach(() => {
+        const mocks = document.getElementById('mocks');
+        mocks.innerHTML = '';
+    });
+
+    it('sanitizes data before write and avoids side effects', async function () {
+        const mocks = document.getElementById('mocks');
+        const ds = buildDatasource('ds-sanitize', [{}]);
+        mocks.appendChild(ds);
+
+        const dataset = document.createElement('monster-dataset');
+        expect(dataset).is.instanceof(Dataset);
+
+        dataset.setOption('datasource.selector', '#ds-sanitize');
+        dataset.setOption('mapping.data', '');
+
+        const initial = {name: '', email: 'a@b', tags: []};
+        dataset.setOption('data', initial);
+
+        dataset.setOption('writeBack.transformer', 'call:sanitize');
+        dataset.setOption('writeBack.callbacks', {
+            sanitize: (obj) => {
+                for (const [key, value] of Object.entries(obj)) {
+                    if (value === '' || value === null || value === undefined) {
+                        delete obj[key];
+                        continue;
+                    }
+                    if (Array.isArray(value) && value.length === 0) {
+                        delete obj[key];
+                    }
+                }
+                return obj;
+            },
+        });
+
+        mocks.appendChild(dataset);
+
+        await new Promise((resolve) => setTimeout(resolve, 30));
+        await dataset.write();
+
+        expect(ds.data[0]).deep.equal({email: 'a@b'});
+
+        const internal = dataset.getInternalUpdateCloneData();
+        expect(internal.data).deep.equal({name: '', email: 'a@b', tags: []});
+        expect(initial).deep.equal({name: '', email: 'a@b', tags: []});
+    });
+
+    it('uses original data when sanitizer returns undefined', async function () {
+        const mocks = document.getElementById('mocks');
+        const ds = buildDatasource('ds-undefined', [{}]);
+        mocks.appendChild(ds);
+
+        const dataset = document.createElement('monster-dataset');
+        dataset.setOption('datasource.selector', '#ds-undefined');
+        dataset.setOption('mapping.data', '');
+
+        const initial = {name: '', email: 'a@b'};
+        dataset.setOption('data', initial);
+
+        dataset.setOption('writeBack.transformer', 'call:noop');
+        dataset.setOption('writeBack.callbacks', {
+            noop: () => undefined,
+        });
+
+        mocks.appendChild(dataset);
+
+        await new Promise((resolve) => setTimeout(resolve, 30));
+        await dataset.write();
+
+        expect(ds.data[0]).deep.equal({name: '', email: 'a@b'});
+    });
+
+});

package/test/cases/components/layout/tabs.mjs

@@ -92,7 +92,30 @@ describe('Tabs', function () {
 
         });
 
+        it('should shorten label from content when no explicit label is provided', function (done) {
+
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = html1;
+
+            setTimeout(() => {
+                try {
+                    const tabs = document.getElementById('mytabs');
+                    expect(tabs).is.instanceof(Tabs);
+
+                    setTimeout(() => {
+                        const buttons = tabs.shadowRoot.querySelectorAll('button[part=button]');
+                        const labelSpan = buttons[2].querySelector('span[data-monster-replace]');
+                        expect(labelSpan).to.not.equal(null);
+                        expect(labelSpan.textContent.trim()).to.equal('Das ist tab…');
+                        done();
+                    }, 100);
+                } catch (e) {
+                    return done(e);
+                }
+            }, 0);
+        });
+
     });
 
 
-});
+});

package/test/cases/monster.mjs

@@ -7,7 +7,7 @@ describe('Monster', function () {
         let monsterVersion
 
         /** don´t touch, replaced by make with package.json version */
-        monsterVersion = new Version("4.94.0")
+        monsterVersion = new Version("4.104.0")
 
         let m = getMonsterVersion();
 

package/test/web/test.html

@@ -9,8 +9,8 @@
 </head>
 <body>
 <div id="headline" style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
-  <h1 style='margin-bottom: 0.1em;'>Monster 4.94.0</h1>
-  <div id="lastupdate" style='font-size:0.7em'>last update Di 13. Jan 13:09:31 CET 2026</div>
+  <h1 style='margin-bottom: 0.1em;'>Monster 4.104.0</h1>
+  <div id="lastupdate" style='font-size:0.7em'>last update Mi 21. Jan 21:19:58 CET 2026</div>
 </div>
 <div id="mocha-errors"
      style="color: red;font-weight: bold;display: flex;align-items: center;justify-content: center;flex-direction: column;margin:20px;"></div>