@schukai/monster 3.100.9 → 3.100.11

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 
 
+## [3.100.11] - 2025-01-19
+
+### Bug Fixes
+
+- css issues
+
+
+
+## [3.100.10] - 2025-01-19
+
+### Bug Fixes
+
+- datatable css glitches
+
+
+
 ## [3.100.9] - 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.9"}
+{"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.11"}

package/source/components/datatable/datatable.mjs

@@ -342,17 +342,21 @@ 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";
+		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)
@@ -885,7 +889,7 @@ function initEventHandler() {
 			return;
 		}
 
-		const parentNode= element.parentNode
+		const parentNode = element.parentNode;
 		if (!(parentNode instanceof HTMLDivElement)) {
 			return;
 		}
@@ -927,13 +931,15 @@ 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;
-			}
-		})
+		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;
@@ -963,12 +969,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";
-				}
-			})
-
+			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/save-button.mjs

@@ -32,6 +32,7 @@ import { Datasource } from "./datasource.mjs";
 import { Rest as RestDatasource } from "./datasource/rest.mjs";
 import { BadgeStyleSheet } from "../stylesheet/badge.mjs";
 import { SaveButtonStyleSheet } from "./stylesheet/save-button.mjs";
+import "../form/state-button.mjs";
 
 import {
 	handleDataSourceChanges,

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

@@ -61,9 +61,6 @@
 ::slotted(.monster-button-group) {
     margin: 0 !important;
     flex-grow: 2;
-}
-
-::slotted(.monster-button-group) {
     display: flex;
     flex-direction: row !important;
     align-items: center;