@schukai/monster 3.100.8 → 3.100.10

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 
 
+## [3.100.10] - 2025-01-19
+
+### Bug Fixes
+
+- datatable css glitches
+
+
+
+## [3.100.9] - 2025-01-19
+
+### Bug Fixes
+
+- **datatable:** button-bar layout
+
+
+
 ## [3.100.8] - 2025-01-19
 
 ### Bug Fixes

package/package.json

@@ -1 +1 @@
-{"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.100.8"}
+{"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.100.10"}

package/source/components/datatable/datatable.mjs

@@ -342,6 +342,20 @@ class DataTable extends CustomElement {
 		initControlReferences.call(this);
 		initEventHandler.call(this);
 
+		getSlottedElements.call(this,"[data-monster-role=row-action-button]","bar").forEach((i,e) => {
+			if (e instanceof HTMLElement) {
+				e.style.visibility = "hidden";
+				e.style.width= "max-content";
+
+				const pN = e.parentNode;
+				if (pN instanceof HTMLElement) {
+					pN.style.flexGrow = "10";
+					pN.style.display = "flex";
+					pN.style.justifyContent = "flex-start";
+				}
+			}
+		})
+
 		getHostConfig
 			.call(this, getColumnVisibilityConfigKey)
 			.then((config) => {
@@ -869,13 +883,19 @@ function initEventHandler() {
 			"select-row",
 		);
 
-		if (!element) {
+		if (!(element instanceof HTMLInputElement)) {
+			return;
+		}
+
+		const parentNode= element.parentNode
+		if (!(parentNode instanceof HTMLDivElement)) {
 			return;
 		}
 
 		const key = element.parentNode.getAttribute(
 			"data-monster-insert-reference",
 		);
+
 		const row = self.getGridElements(
 			`[data-monster-insert-reference="${key}"]`,
 		);
@@ -909,6 +929,14 @@ function initEventHandler() {
 			`[data-monster-role="select-all"]`,
 		);
 
+		getSlottedElements.call(this,"[data-monster-role=row-action-button]","bar").forEach((i,e) => {
+			const selected = self.getSelectedRows();
+			const mode = (selected.length === 0) ? "hidden" : "visible";
+			if (e instanceof HTMLElement) {
+				e.style.visibility = mode;
+			}
+		})
+
 		if (selectAll) {
 			selectAll.checked = allSelected;
 		}
@@ -937,6 +965,13 @@ function initEventHandler() {
 				fireCustomEvent(this, "monster-datatable-all-rows-deselected", {});
 			}
 
+			getSlottedElements.call(this,"[data-monster-role=row-action-button]","bar").forEach((i,e) => {
+				if (e instanceof HTMLElement) {
+					e.style.visibility = mode ? "visible" : "hidden";
+				}
+			})
+
+
 			fireCustomEvent(this, "monster-datatable-selection-changed", {});
 		}
 	};

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

@@ -61,12 +61,10 @@
 ::slotted(.monster-button-group) {
     margin: 0 !important;
     flex-grow: 2;
-}
-
-::slotted(.monster-button-group) {
     display: flex;
     flex-direction: row !important;
-    align-items: flex-end;
+    align-items: center;
+    justify-content: flex-end;
 }
 
 [data-monster-role=datatable] {