@schukai/monster 4.150.3 → 4.150.5

package/package.json

@@ -1 +1 @@
-{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"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.150.3"}
+{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"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.150.5"}

package/source/components/datatable/style/datatable.pcss

@@ -560,9 +560,9 @@ monster-state[data-monster-role=empty-without-action]::part(action) {
             & :is(monster-button-bar, .monster-button-group) {
                 --monster-button-bar-gap: 0;
                 --monster-button-bar-item-spacing: 0;
-                --monster-control-bar-button-inline-size: 100%;
+                --monster-control-bar-button-inline-size: max-content;
                 --monster-control-bar-height: max(2.75rem, 44px);
-                --monster-control-bar-item-flex: 1 1 0;
+                --monster-control-bar-item-flex: 0 0 auto;
                 --monster-control-bar-slot-flex: 1 1 auto;
                 box-sizing: border-box;
                 display: flex;

package/source/components/datatable/stylesheet/datatable.mjs

@@ -99,7 +99,7 @@ try {
                 --monster-theme-control-bg-color,var(--monster-bg-color-primary-1)
             );border:0;border-bottom:1px solid var(--monster-theme-control-border-color);border-left:1px solid var(--monster-theme-control-border-color);border-right:1px solid var(--monster-theme-control-border-color);display:grid;gap:.35rem .75rem;grid-template-columns:minmax(5.5rem,.35fr) minmax(0,1fr);justify-content:stretch;min-height:2.75rem;overflow:visible;padding:.625rem .75rem;white-space:normal;word-break:break-word}.center:is(:is(.small[data-monster-role=control] [data-monster-role=datatable])>div),.end:is(:is(.small[data-monster-role=control] [data-monster-role=datatable])>div),.start:is(:is(.small[data-monster-role=control] [data-monster-role=datatable])>div){justify-content:stretch}[data-monster-datatable-row-start]:is(:is(.small[data-monster-role=control] [data-monster-role=datatable])>div){border-radius:var(--monster-theme-control-border-radius) var(--monster-theme-control-border-radius) 0 0;border-top:1px solid var(--monster-theme-control-border-color);margin-top:.75rem}[data-monster-datatable-row-end]:is(:is(.small[data-monster-role=control] [data-monster-role=datatable])>div){border-radius:0 0 var(--monster-theme-control-border-radius) var(--monster-theme-control-border-radius);margin-bottom:.75rem}[data-monster-datatable-row-start][data-monster-datatable-row-end]:is(:is(.small[data-monster-role=control] [data-monster-role=datatable])>div){border-radius:var(--monster-theme-control-border-radius)}[data-monster-features~=select]:is(:is(.small[data-monster-role=control] [data-monster-role=datatable])>div){align-items:center;background-color:var(
                     --monster-theme-surface-subtle,var(--monster-bg-color-primary-2)
-                );display:flex;min-height:max(2.75rem,var(--monster-control-min-block-size,44px))}:is(:is(.small[data-monster-role=control] [data-monster-role=datatable])>div):has(:is(monster-button,monster-button-bar,monster-action-button,monster-select,monster-filter-select,select[multiple])){grid-template-columns:minmax(0,1fr)}:is(:is(.small[data-monster-role=control] [data-monster-role=datatable])>div) :is(monster-select,monster-filter-select,select[multiple]){box-sizing:border-box;display:block;max-width:100%;min-width:0;width:100%}:is(:is(.small[data-monster-role=control] [data-monster-role=datatable])>div) :is(monster-button-bar,.monster-button-group){--monster-button-bar-gap:0;--monster-button-bar-item-spacing:0;--monster-control-bar-button-inline-size:100%;--monster-control-bar-height:max(2.75rem,44px);--monster-control-bar-item-flex:1 1 0;--monster-control-bar-slot-flex:1 1 auto;box-sizing:border-box;display:flex;flex-wrap:wrap;gap:0;max-width:100%;min-width:0;width:100%}:is(:is(.small[data-monster-role=control] [data-monster-role=datatable])>div) :is(monster-button,monster-action-button,button,[role=button]){box-sizing:border-box;flex:1 1 8rem;min-height:max(2.75rem,var(--monster-control-min-block-size,44px));min-width:0}:is(:is(.small[data-monster-role=control] [data-monster-role=datatable])>div)>:is(monster-button,monster-action-button){display:block;width:100%}.selected:is(:is(.small[data-monster-role=control] [data-monster-role=datatable])>div){background-color:var(
+                );display:flex;min-height:max(2.75rem,var(--monster-control-min-block-size,44px))}:is(:is(.small[data-monster-role=control] [data-monster-role=datatable])>div):has(:is(monster-button,monster-button-bar,monster-action-button,monster-select,monster-filter-select,select[multiple])){grid-template-columns:minmax(0,1fr)}:is(:is(.small[data-monster-role=control] [data-monster-role=datatable])>div) :is(monster-select,monster-filter-select,select[multiple]){box-sizing:border-box;display:block;max-width:100%;min-width:0;width:100%}:is(:is(.small[data-monster-role=control] [data-monster-role=datatable])>div) :is(monster-button-bar,.monster-button-group){--monster-button-bar-gap:0;--monster-button-bar-item-spacing:0;--monster-control-bar-button-inline-size:max-content;--monster-control-bar-height:max(2.75rem,44px);--monster-control-bar-item-flex:0 0 auto;--monster-control-bar-slot-flex:1 1 auto;box-sizing:border-box;display:flex;flex-wrap:wrap;gap:0;max-width:100%;min-width:0;width:100%}:is(:is(.small[data-monster-role=control] [data-monster-role=datatable])>div) :is(monster-button,monster-action-button,button,[role=button]){box-sizing:border-box;flex:1 1 8rem;min-height:max(2.75rem,var(--monster-control-min-block-size,44px));min-width:0}:is(:is(.small[data-monster-role=control] [data-monster-role=datatable])>div)>:is(monster-button,monster-action-button){display:block;width:100%}.selected:is(:is(.small[data-monster-role=control] [data-monster-role=datatable])>div){background-color:var(
                     --monster-theme-accent-subtle,var(--monster-bg-color-selection-2)
                 );color:var(
                     --monster-theme-accent,var(--monster-color-selection-2)

package/source/components/form/sheet.mjs

@@ -30,6 +30,7 @@ import { isArray, isObject, isString } from "../../types/is.mjs";
 import { ID } from "../../types/id.mjs";
 import { clone } from "../../util/clone.mjs";
 
+import "./button.mjs";
 import { SheetStyleSheet } from "./stylesheet/sheet.mjs";
 
 export { Sheet };
@@ -391,13 +392,17 @@ function syncToolbarState() {
 
 	this[addRowButtonSymbol].hidden = !addRow;
 	this[addColumnButtonSymbol].hidden = !addCol;
-	this[addRowButtonSymbol].disabled =
-		this.getOption("disabled", false) || !addRow;
-	this[addColumnButtonSymbol].disabled =
-		this.getOption("disabled", false) || !addCol;
+	this[addRowButtonSymbol].setOption(
+		"disabled",
+		this.getOption("disabled", false) || !addRow,
+	);
+	this[addColumnButtonSymbol].setOption(
+		"disabled",
+		this.getOption("disabled", false) || !addCol,
+	);
 
-	this[addRowButtonSymbol].className = buttonClass;
-	this[addColumnButtonSymbol].className = buttonClass;
+	this[addRowButtonSymbol].setOption("classes.button", buttonClass);
+	this[addColumnButtonSymbol].setOption("classes.button", buttonClass);
 	if (isString(labels.addRow)) {
 		this[addRowButtonSymbol].textContent = labels.addRow;
 	}
@@ -2427,8 +2432,8 @@ function getTemplate() {
 	return `
     <div data-monster-role="control" part="control">
       <div data-monster-role="toolbar" part="toolbar">
-        <button type="button" data-monster-role="add-row" part="add-row"></button>
-        <button type="button" data-monster-role="add-column" part="add-column"></button>
+        <monster-button data-monster-role="add-row" part="add-row"></monster-button>
+        <monster-button data-monster-role="add-column" part="add-column"></monster-button>
       </div>
       <div data-monster-role="grid-wrapper" part="grid-wrapper">
         <div data-monster-role="grid" part="grid"></div>

package/source/components/form/wizard.mjs

@@ -45,6 +45,7 @@ const currentPanelIndexSymbol = Symbol("currentPanelIndex");
 const optionObserverSymbol = Symbol("optionObserver");
 const idsSymbol = Symbol("ids");
 const finalRecordSymbol = Symbol("finalRecord");
+const slottedElementsSymbol = Symbol("slottedElements");
 
 /**
  * A reusable wizard container that combines content panels with `monster-wizard-navigation`.
@@ -151,6 +152,7 @@ class Wizard extends CustomElement {
 			panel: 0,
 			group: 0,
 		};
+		this[slottedElementsSymbol] = [];
 
 		initControlReferences.call(this);
 		initEventHandler.call(this);
@@ -170,6 +172,9 @@ class Wizard extends CustomElement {
 	 * @return {Wizard}
 	 */
 	refresh() {
+		this[slottedElementsSymbol] = Array.from(
+			getSlottedElements.call(this) || [],
+		);
 		const records = collectPanels.call(this);
 		const groups = buildGroups.call(this, records);
 
@@ -388,6 +393,10 @@ function initControlReferences() {
 
 function initEventHandler() {
 	this[slotElementSymbol]?.addEventListener("slotchange", () => {
+		const elements = Array.from(getSlottedElements.call(this) || []);
+		if (haveSameElements(this[slottedElementsSymbol], elements)) {
+			return;
+		}
 		this.refresh();
 	});
 
@@ -449,6 +458,13 @@ function initEventHandler() {
 	});
 }
 
+function haveSameElements(currentElements, nextElements) {
+	return (
+		currentElements.length === nextElements.length &&
+		currentElements.every((element, index) => element === nextElements[index])
+	);
+}
+
 function initOptionObserver() {
 	if (this[optionObserverSymbol]) {
 		return;

package/source/components/navigation/wizard-navigation.mjs

@@ -19,6 +19,7 @@ const currentStepIndexSymbol = Symbol("currentStepIndex");
 const stepsSymbol = Symbol("steps");
 const isTransitioningSymbol = Symbol("isTransitioning");
 const currentSubStepIndexSymbol = Symbol("currentSubStepIndex");
+const activationRequestSymbol = Symbol("activationRequest");
 
 /**
  * A WizardNavigation component to display progress and allow navigation through a series of steps,
@@ -45,6 +46,7 @@ class WizardNavigation extends CustomElement {
 		this[isTransitioningSymbol] = false;
 		this[currentStepIndexSymbol] = -1;
 		this[currentSubStepIndexSymbol] = -1;
+		this[activationRequestSymbol] = 0;
 
 		initControlReferences.call(this);
 		initEventHandler.call(this);
@@ -186,7 +188,11 @@ class WizardNavigation extends CustomElement {
 			return;
 		}
 
+		const request = ++this[activationRequestSymbol];
 		await this.goToStep(mainIndex, options);
+		if (request !== this[activationRequestSymbol]) {
+			return;
+		}
 
 		const stepsData = this[stepsSymbol];
 		if (!stepsData || !stepsData[mainIndex]) return;

package/test/cases/components/datatable/mobile-layout.mjs

@@ -80,6 +80,24 @@ describe("Datatable mobile layout", () => {
 		expect(generated).not.to.include("--monster-button-bar-gap:0.5rem");
 	});
 
+	it("measures responsive row actions at their compact width", () => {
+		expect(source).to.include(
+			"--monster-control-bar-button-inline-size: max-content",
+		);
+		expect(source).to.include(
+			"--monster-control-bar-item-flex: 0 0 auto",
+		);
+		expect(source).not.to.include(
+			"--monster-control-bar-button-inline-size: 100%",
+		);
+		expect(generated).to.include(
+			"--monster-control-bar-button-inline-size:max-content",
+		);
+		expect(generated).to.include(
+			"--monster-control-bar-item-flex:0 0 auto",
+		);
+	});
+
 	it("keeps icon-only row overflow menus compact", () => {
 		expect(source).to.include("& > monster-button-bar");
 		expect(source).to.include("--monster-action-menu-min-inline-size: auto");

package/test/cases/components/form/sheet.mjs

@@ -27,6 +27,46 @@ describe("Sheet", function () {
 		expect(document.createElement("monster-sheet")).to.be.instanceof(Sheet);
 	});
 
+	it("should use Monster controls for visible toolbar actions", async function () {
+		const sheet = document.createElement("monster-sheet");
+		sheet.setOptions({
+			classes: { button: "monster-button-outline-secondary" },
+			features: { addRows: true, addColumns: true },
+			labels: { addRow: "Append row", addColumn: "Append column" },
+		});
+		document.getElementById("mocks").appendChild(sheet);
+
+		const addRow = sheet.shadowRoot.querySelector(
+			'[data-monster-role="add-row"]',
+		);
+		const addColumn = sheet.shadowRoot.querySelector(
+			'[data-monster-role="add-column"]',
+		);
+		const menuItems = sheet.shadowRoot.querySelectorAll(
+			'[data-monster-role="context-menu"] [role="menuitem"]',
+		);
+
+		expect(addRow.tagName).to.equal("MONSTER-BUTTON");
+		expect(addColumn.tagName).to.equal("MONSTER-BUTTON");
+		expect(addRow.textContent).to.equal("Append row");
+		expect(addColumn.textContent).to.equal("Append column");
+		expect(addRow.getOption("classes.button")).to.equal(
+			"monster-button-outline-secondary",
+		);
+		expect(addRow.getOption("disabled")).to.equal(false);
+		expect(Array.from(menuItems).every((item) => item.tagName === "BUTTON")).to
+			.equal(true);
+
+		const rowCount = sheet.value.rows.length;
+		addRow.click();
+		expect(sheet.value.rows).to.have.length(rowCount + 1);
+
+		sheet.setOption("disabled", true);
+		await new Promise((resolve) => setTimeout(resolve, 0));
+		expect(addRow.getOption("disabled")).to.equal(true);
+		expect(addColumn.getOption("disabled")).to.equal(true);
+	});
+
 	it("should name editable cells from their row and column labels", function () {
 		const sheet = document.createElement("monster-sheet");
 		sheet.setOptions({

package/test/cases/components/form/wizard.mjs

@@ -98,6 +98,24 @@ describe("Wizard", function () {
 		).to.equal(true);
 	});
 
+	it("should ignore slot changes when the assigned panels are unchanged", async () => {
+		const mocks = document.getElementById("mocks");
+		mocks.innerHTML = html;
+
+		await new Promise((resolve) => setTimeout(resolve, 30));
+
+		const wizard = document.getElementById("wizard-under-test");
+		const slot = wizard.shadowRoot.querySelector("slot");
+		let refreshCount = 0;
+		wizard.addEventListener("monster-wizard-refresh", () => {
+			refreshCount++;
+		});
+
+		slot.dispatchEvent(new Event("slotchange"));
+
+		expect(refreshCount).to.equal(0);
+	});
+
 	it("should use panel-specific validation callbacks before moving forward", async function () {
 		const mocks = document.getElementById("mocks");
 		mocks.innerHTML = html;

package/test/cases/components/navigation/wizard-navigation.mjs

@@ -0,0 +1,49 @@
+import * as chai from "chai";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+
+const expect = chai.expect;
+
+describe("WizardNavigation", () => {
+	before(async () => {
+		await initJSDOM();
+		await import(
+			"../../../../source/components/navigation/wizard-navigation.mjs"
+		);
+	});
+
+	afterEach(() => {
+		document.getElementById("mocks").innerHTML = "";
+	});
+
+	it("should only dispatch the latest concurrent substep activation", async () => {
+		const mocks = document.getElementById("mocks");
+		mocks.innerHTML = `
+			<monster-wizard-navigation id="wizard-navigation-under-test">
+				<ol class="wizard-steps">
+					<li class="step">
+						<span>Account</span>
+						<ul>
+							<li>Email</li>
+							<li>Password</li>
+						</ul>
+					</li>
+				</ol>
+			</monster-wizard-navigation>
+		`;
+
+		await new Promise((resolve) => setTimeout(resolve, 20));
+
+		const navigation = document.getElementById("wizard-navigation-under-test");
+		const substeps = [];
+		navigation.addEventListener("monster-wizard-substep-changed", (event) => {
+			substeps.push(event.detail.subIndex);
+		});
+
+		await Promise.all([
+			navigation.activate(0, 0, { force: true }),
+			navigation.activate(0, 1, { force: true }),
+		]);
+
+		expect(substeps).to.deep.equal([1]);
+	});
+});