@schukai/monster 4.38.0 → 4.38.2

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 
 
+## [4.38.2] - 2025-07-25
+
+### Bug Fixes
+
+- filter width
+
+
+
+## [4.38.1] - 2025-07-23
+
+### Bug Fixes
+
+- add event to tree-menu action, selected
+### Changes
+
+- update nix
+
+
+
 ## [4.38.0] - 2025-07-21
 
 ### Add Features

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.2","@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":"4.38.0"}
+{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.2","@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":"4.38.2"}

package/source/components/data/kpi-tile.mjs

@@ -14,8 +14,8 @@ import { instanceSymbol } from "../../constants.mjs";
 import { ATTRIBUTE_ROLE } from "../../dom/constants.mjs";
 import { CustomElement } from "../../dom/customelement.mjs";
 import {
-  assembleMethodSymbol,
-  registerCustomElement,
+	assembleMethodSymbol,
+	registerCustomElement,
 } from "../../dom/customelement.mjs";
 import { KpiTileStyleSheet } from "./stylesheet/kpi-tile.mjs";
 
@@ -34,62 +34,62 @@ export { KpiTile };
  * @summary A KPI Tile Control that displays key performance indicators in a tile format.
  */
 class KpiTile extends CustomElement {
-  static get [instanceSymbol]() {
-    return Symbol.for("@schukai/monster/components/data/kpi/tile@@instance");
-  }
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/monster/components/data/kpi/tile@@instance");
+	}
 
-  /**
-   * @returns {symbol}
-   * @summary Returns the instance symbol for the KPI Tile control.
-   */
-  [assembleMethodSymbol]() {
-    super[assembleMethodSymbol]();
-    return this;
-  }
+	/**
+	 * @returns {symbol}
+	 * @summary Returns the instance symbol for the KPI Tile control.
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+		return this;
+	}
 
-  /**
-   * To set the option via the HTML Tag use the attribute `data-monster-options-`
-   * with the name of the option.
-   *
-   * @property {Object} templates
-   * @property {string} templates.main The main template for the KPI Tile control.
-   * @property {Object} values
-   * @property {string} values.main The main value displayed in the tile.
-   * @property {string} values.small The small value displayed in the tile.
-   * @property {string} values.top The top value displayed in the tile.
-   * @property {string} values.bottom The bottom value displayed in the tile.
-   * @returns {Object}
-   * @summary Returns the default options for the KPI Tile control.
-   */
-  get defaults() {
-    return Object.assign({}, super.defaults, {
-      templates: {
-        main: getTemplate(),
-      },
-      values: {
-        main: null,
-        small: null,
-        top: null,
-        bottom: null,
-      },
-    });
-  }
+	/**
+	 * To set the option via the HTML Tag use the attribute `data-monster-options-`
+	 * with the name of the option.
+	 *
+	 * @property {Object} templates
+	 * @property {string} templates.main The main template for the KPI Tile control.
+	 * @property {Object} values
+	 * @property {string} values.main The main value displayed in the tile.
+	 * @property {string} values.small The small value displayed in the tile.
+	 * @property {string} values.top The top value displayed in the tile.
+	 * @property {string} values.bottom The bottom value displayed in the tile.
+	 * @returns {Object}
+	 * @summary Returns the default options for the KPI Tile control.
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+			values: {
+				main: null,
+				small: null,
+				top: null,
+				bottom: null,
+			},
+		});
+	}
 
-  /**
-   * @returns {string}
-   * @summary Returns the role of the control.
-   */
-  static getTag() {
-    return "monster-kpi-tile";
-  }
+	/**
+	 * @returns {string}
+	 * @summary Returns the role of the control.
+	 */
+	static getTag() {
+		return "monster-kpi-tile";
+	}
 
-  /**
-   * @returns {string}
-   * @summary Returns the role of the control.
-   */
-  static getCSSStyleSheet() {
-    return [KpiTileStyleSheet];
-  }
+	/**
+	 * @returns {string}
+	 * @summary Returns the role of the control.
+	 */
+	static getCSSStyleSheet() {
+		return [KpiTileStyleSheet];
+	}
 }
 
 /**
@@ -98,7 +98,7 @@ class KpiTile extends CustomElement {
  * @summary Returns the template for the KPI Tile control.
  */
 function getTemplate() {
-  return `
+	return `
 		<div data-monster-role="control" part="control">
 			<div class="top"                data-monster-role="top"    part="top"    data-monster-replace="path:values.top">—</div>
  			<div                            data-monster-role="main"   part="main"   data-monster-replace="path:values.main">—</div>

package/source/components/datatable/style/filter-button.pcss

@@ -5,6 +5,8 @@
 
 
 [data-monster-role="control"] {
+    width: max-content;
+
     & a {
         display: flex;
         align-items: center;

package/source/components/datatable/stylesheet/filter-button.mjs

@@ -25,7 +25,7 @@ try {
 	FilterButtonStyleSheet.insertRule(
 		`
 @layer filterbutton { 
-:host{display:flex}[data-monster-role=control] a{align-items:center;background:none;color:var(--monster-color-primary-1);display:flex}:is([data-monster-role=control] a):after{background-color:var(--monster-color-primary-1);content:\"\";display:inline-block;height:16px;margin:0 3px 0 5px;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-filter-square' viewBox='0 0 16 16'%3E%3Cpath d='M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z'/%3E%3Cpath d='M6 11.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5m-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-filter-square' viewBox='0 0 16 16'%3E%3Cpath d='M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z'/%3E%3Cpath d='M6 11.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5m-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5'/%3E%3C/svg%3E\");-webkit-mask-size:cover;mask-size:cover;width:16px} 
+:host{display:flex}[data-monster-role=control]{width:-moz-max-content;width:max-content}[data-monster-role=control] a{align-items:center;background:none;color:var(--monster-color-primary-1);display:flex}:is([data-monster-role=control] a):after{background-color:var(--monster-color-primary-1);content:\"\";display:inline-block;height:16px;margin:0 3px 0 5px;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-filter-square' viewBox='0 0 16 16'%3E%3Cpath d='M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z'/%3E%3Cpath d='M6 11.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5m-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-filter-square' viewBox='0 0 16 16'%3E%3Cpath d='M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z'/%3E%3Cpath d='M6 11.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5m-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5'/%3E%3C/svg%3E\");-webkit-mask-size:cover;mask-size:cover;width:16px} 
 }`,
 		0,
 	);

package/source/components/tree-menu/tree-menu.mjs

@@ -126,6 +126,14 @@ class TreeMenu extends CustomElement {
 	 * @property {String} mapping.idTemplate template with the id placeholders in the form ${name}, where name is the key
 	 * @property {String} mapping.parentKey the parent key
 	 * @property {String} mapping.selection the selection
+	 * @property {Function} mapping.filter a filter function to filter the entries
+	 * @property {Object} classes
+	 * @property {String} classes.control the class for the control element
+	 * @property {String} classes.label the class for the label element
+	 * @property {Object} actions
+	 * @property {Function} actions.open the action to open an entry (arguments, etnry, index, event)
+	 * @property {Function} actions.close the action to close an entry (arguments, etnry, index, event)
+	 * @property {Function} actions.select the action to select an entry (arguments, etnry, index, event)
 	 */
 	get defaults() {
 		return Object.assign({}, super.defaults, {
@@ -157,7 +165,7 @@ class TreeMenu extends CustomElement {
 				open: null,
 				close: null,
 				select: (entry) => {
-					throw new Error("no action defined for select");
+					console.warn("select action is not defined", entry);
 				},
 			},
 
@@ -361,7 +369,7 @@ function initEventHandler() {
 			container.classList.add("selected");
 
 			if (isFunction(doAction)) {
-				doAction.call(this, currentEntry, index);
+				doAction.call(this, currentEntry, index, event);
 			}
 			return;
 		}

package/source/types/version.mjs

@@ -156,7 +156,7 @@ function getMonsterVersion() {
 	}
 
 	/** don't touch, replaced by make with package.json version */
-	monsterVersion = new Version("4.37.2");
+	monsterVersion = new Version("4.38.0");
 
 	return monsterVersion;
 }

package/test/cases/monster.mjs

@@ -7,7 +7,7 @@ describe('Monster', function () {
         let monsterVersion
 
         /** don´t touch, replaced by make with package.json version */
-        monsterVersion = new Version("4.37.2")
+        monsterVersion = new Version("4.38.0")
 
         let m = getMonsterVersion();
 

package/test/web/test.html

@@ -9,8 +9,8 @@
 </head>
 <body>
 <div id="headline" style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
-  <h1 style='margin-bottom: 0.1em;'>Monster 4.37.2</h1>
-  <div id="lastupdate" style='font-size:0.7em'>last update Mo 21. Jul 18:16:57 CEST 2025</div>
+  <h1 style='margin-bottom: 0.1em;'>Monster 4.38.0</h1>
+  <div id="lastupdate" style='font-size:0.7em'>last update Mi 23. Jul 15:15:52 CEST 2025</div>
 </div>
 <div id="mocha-errors"
      style="color: red;font-weight: bold;display: flex;align-items: center;justify-content: center;flex-direction: column;margin:20px;"></div>