@schukai/monster 3.101.2 → 3.102.0

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 
 
+## [3.102.0] - 2025-01-27
+
+### Add Features
+
+- new databind for int[] and string[]
+- **select:** new ignoreValues feature [#287](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/287)
+### Changes
+
+- close issue [#285](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/285) [#286](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/286)
+
+
+
+## [3.101.3] - 2025-01-27
+
+### Bug Fixes
+
+- add part attribute to field-set and remove min-with from the datatable
+- update column selection [#286](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/286) [#266](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/266)
+
+
+
 ## [3.101.2] - 2025-01-23
 
 ### 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.101.2"}
+{"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.102.0"}

package/source/components/content/copy.mjs

@@ -268,19 +268,15 @@ function attachResizeObserver() {
 	});
 
 	requestAnimationFrame(() => {
-
 		let parent = this.parentNode;
-		while(!(parent instanceof HTMLElement) && parent !== null) {
+		while (!(parent instanceof HTMLElement) && parent !== null) {
 			parent = parent.parentNode;
 		}
 
 		if (parent instanceof HTMLElement) {
 			this[resizeObserverSymbol].observe(parent);
 		}
-
-
 	});
-
 }
 
 /**

package/source/components/datatable/datatable.mjs

@@ -291,17 +291,14 @@ class DataTable extends CustomElement {
 		});
 
 		requestAnimationFrame(() => {
-
 			let parent = this.parentNode;
-			while(!(parent instanceof HTMLElement) && parent !== null) {
+			while (!(parent instanceof HTMLElement) && parent !== null) {
 				parent = parent.parentNode;
 			}
 
 			if (parent instanceof HTMLElement) {
 				this[resizeObserverSymbol].observe(parent);
 			}
-
-
 		});
 	}
 
@@ -1145,7 +1142,7 @@ function initGridAndStructs(hostConfig, headerOrderMap) {
 			index: i,
 			mode: mode,
 			grid: grid,
-			labelKey: labelKey,
+			labelKey: labelKey+ "-"+i,
 			direction: direction,
 			features: features,
 			orderTemplate: orderTemplate,
@@ -1312,9 +1309,12 @@ function updateGrid() {
 	for (let i = 0; i < headers.length; i++) {
 		const header = headers[i];
 
-		if (header.mode === ATTRIBUTE_DATATABLE_MODE_HIDDEN) {
-			styles += `[data-monster-role=datatable]>[data-monster-head="${header.labelKey}"] { display: none; }\n`;
+		if (
+			header.mode === ATTRIBUTE_DATATABLE_MODE_HIDDEN &&
+			header.mode !== ATTRIBUTE_DATATABLE_MODE_FIXED
+		) {
 			styles += `[data-monster-role=datatable-headers]>[data-monster-index="${header.index}"] { display: none; }\n`;
+			styles += `[data-monster-role=datatable] > div:nth-child(${headers.length}n+${i+1}) { display: none; }\n`;
 		} else {
 			gridTemplateColumns += `${header.grid} `;
 		}
@@ -1465,7 +1465,7 @@ function getTemplate() {
                             data-monster-attributes="class path:features.help | ?::hidden"
                             data-monster-replace="path:labels.helpText"
                     ></monster-context-help>
-                    <a href="#" data-monster-attributes="class path:features.copyAll | ?::hidden"
+                    <a href="#" data-monster-attributes="class path:features.copyAll | ?::copyAllHidden"
                        data-monster-role="copy-all" data-monster-replace="path:labels.copyAll">Copy all</a>
                     <monster-column-bar
                             data-monster-attributes="class path:features.settings | ?::hidden"></monster-column-bar>

package/source/components/datatable/filter/date-range.mjs

@@ -690,9 +690,8 @@ function attachResizeObserver() {
 	});
 
 	requestAnimationFrame(() => {
-
 		let parent = this.parentNode;
-		while(!(parent instanceof HTMLElement) && parent !== null) {
+		while (!(parent instanceof HTMLElement) && parent !== null) {
 			parent = parent.parentNode;
 		}
 
@@ -700,7 +699,6 @@ function attachResizeObserver() {
 			this[resizeObserverSymbol].observe(parent);
 		}
 	});
-
 }
 
 function disconnectResizeObserver() {

package/source/components/datatable/style/column-bar.pcss

@@ -108,7 +108,7 @@
             height: 16px;
             margin: 2px 3px 0 5px;
             padding-top: 4px;
-            background-color: var(--monster-color-primary-1); 
+            background-color: var(--monster-color-primary-1);
             mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 1.5A1.5 1.5 0 0 1 1.5 0h13A1.5 1.5 0 0 1 16 1.5v13a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 14.5v-13zM1.5 1a.5.5 0 0 0-.5.5v13a.5.5 0 0 0 .5.5H5V1H1.5zM10 15V1H6v14h4zm1 0h3.5a.5.5 0 0 0 .5-.5v-13a.5.5 0 0 0-.5-.5H11v14z' fill='%23000'/%3E%3C/svg%3E");
             mask-size: cover;
         }

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

@@ -40,7 +40,7 @@
     overflow-y: visible;
     padding: 20px;
     box-sizing: border-box;
-    min-width: fit-content;
+
     @mixin text;
 
     & .bar {
@@ -254,6 +254,10 @@
 }
 
 .hidden {
+    display: none;
+}
+
+.copyAllHidden {
     display: none !important;
 }