@schukai/monster 4.150.3 → 4.150.4

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.4"}

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/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({