@schukai/monster 3.63.1 → 3.63.2

package/CHANGELOG.md

@@ -1,9 +1,21 @@
 
+## [3.63.2] - 2024-03-28
+
+### Bug Fixes
+
+- colors and more, add igrnore change to savebutton [#181](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/181) [#180](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/180)
+### Changes
+
+- reorganize playground
+
 ## [3.63.1] - 2024-03-27
 
 ### Bug Fixes
 
 - [#179](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/179) [#176](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/176)
+### Changes
+
+- release and publish to npm new version 3.63.1
 
 ## [3.63.0] - 2024-03-25
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schukai/monster",
-  "version": "3.63.1",
+  "version": "3.63.2",
   "description": "Monster is a simple library for creating fast, robust and lightweight websites.",
   "keywords": [
     "framework",

package/source/components/datatable/dataset.mjs

@@ -35,8 +35,6 @@ export { DataSet };
  *
  * <img src="./images/dataset.png">
  *
- * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library
- *
  * You can create this control either by specifying the HTML tag <monster-dataset />` directly in the HTML or using
  * Javascript via the `document.createElement('monster-dataset');` method.
  *
@@ -233,7 +231,6 @@ class DataSet extends CustomElement {
 	}
 
 	/**
-	 *
 	 * @return [CSSStyleSheet]
 	 */
 	static getCSSStyleSheet() {

package/source/components/datatable/datatable.mjs

@@ -190,9 +190,9 @@ class DataTable extends CustomElement {
                 },
 
                 classes : {
-                    control: "monster-theme-table-container-1",
-                    container: "monster-theme-table-container-1",
-                    row: "monster-theme-table-row-1",
+                    control: "monster-theme-control-container-1",
+                    container: "monster-theme-control-container-1",
+                    row: "monster-theme-control-row-1",
                 },
 
                 features: {

package/source/components/datatable/save-button.mjs

@@ -3,30 +3,32 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-import { instanceSymbol, internalSymbol } from "../../constants.mjs";
-import { diff } from "../../data/diff.mjs";
+import {instanceSymbol, internalSymbol} from "../../constants.mjs";
+import {diff} from "../../data/diff.mjs";
+import {addAttributeToken} from "../../dom/attributes.mjs";
+import {ATTRIBUTE_ERRORMESSAGE} from "../../dom/constants.mjs";
 import {
-	assembleMethodSymbol,
-	CustomElement,
-	attributeObserverSymbol,
-	registerCustomElement,
+    assembleMethodSymbol,
+    CustomElement,
+    attributeObserverSymbol,
+    registerCustomElement,
 } from "../../dom/customelement.mjs";
-import { isString, isArray } from "../../types/is.mjs";
-import { Observer } from "../../types/observer.mjs";
-import { TokenList } from "../../types/tokenlist.mjs";
-import { clone } from "../../util/clone.mjs";
-import { State } from "../form/types/state.mjs";
-import { ATTRIBUTE_DATASOURCE_SELECTOR } from "./constants.mjs";
-import { Datasource } from "./datasource.mjs";
-import { BadgeStyleSheet } from "../stylesheet/badge.mjs";
-import { SaveButtonStyleSheet } from "./stylesheet/save-button.mjs";
+import {isString, isArray} from "../../types/is.mjs";
+import {Observer} from "../../types/observer.mjs";
+import {TokenList} from "../../types/tokenlist.mjs";
+import {clone} from "../../util/clone.mjs";
+import {State} from "../form/types/state.mjs";
+import {ATTRIBUTE_DATASOURCE_SELECTOR} from "./constants.mjs";
+import {Datasource} from "./datasource.mjs";
+import {BadgeStyleSheet} from "../stylesheet/badge.mjs";
+import {SaveButtonStyleSheet} from "./stylesheet/save-button.mjs";
 
 import {
-	handleDataSourceChanges,
-	datasourceLinkedElementSymbol,
+    handleDataSourceChanges,
+    datasourceLinkedElementSymbol,
 } from "./util.mjs";
 
-export { SaveButton };
+export {SaveButton};
 
 /**
  * @private
@@ -41,166 +43,194 @@ const stateButtonElementSymbol = Symbol("stateButtonElement");
 const badgeElementSymbol = Symbol("badgeElement");
 
 class SaveButton extends CustomElement {
-	/**
-	 * This method is called by the `instanceof` operator.
-	 * @returns {symbol}
-	 */
-	static get [instanceSymbol]() {
-		return Symbol.for(
-			"@schukai/monster/components/datasource/save-button@@instance",
-		);
-	}
-
-	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
-	 * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
-	 *
-	 * The individual configuration values can be found in the table.
-	 *
-	 * @property {Object} templates Template definitions
-	 * @property {string} templates.main Main template
-	 * @property {object} datasource The datasource
-	 * @property {string} datasource.selector The selector of the datasource
-	 * @property {object} mapping The mapping
-	 * @property {string} mapping.data The data
-	 * @property {number} mapping.index The index
-	 * @property {Array} data The data
-	 * @return {Object}
-	 */
-	get defaults() {
-		const obj = Object.assign({}, super.defaults, {
-			templates: {
-				main: getTemplate(),
-			},
-
-			labels: {
-				button: "save",
-			},
-
-			classes: {
-				bar: "monster-button-primary",
-				badge: "monster-badge-secondary hidden",
-			},
-
-			datasource: {
-				selector: null,
-			},
-
-			changes: "0",
-
-			mapping: {
-				data: "dataset",
-				index: 0,
-			},
-
-			data: {},
-
-			disabled: false,
-		});
-
-		updateOptionsFromArguments.call(this, obj);
-		return obj;
-	}
-
-	/**
-	 *
-	 * @return {string}
-	 */
-	static getTag() {
-		return "monster-datasource-save-button";
-	}
-
-	/**
-	 * This method is responsible for assembling the component.
-	 *
-	 * It calls the parent's assemble method first, then initializes control references and event handlers.
-	 * If the `datasource.selector` option is provided and is a string, it searches for the corresponding
-	 * element in the DOM using that selector.
-	 *
-	 * If the selector matches exactly one element, it checks if the element is an instance of the `Datasource` class.
-	 *
-	 * If it is, the component's `datasourceLinkedElementSymbol` property is set to the element, and the component
-	 * attaches an observer to the datasource's changes.
-	 *
-	 * The observer is a function that calls the `handleDataSourceChanges` method in the context of the component.
-	 * Additionally, the component attaches an observer to itself, which also calls the `handleDataSourceChanges`
-	 * method in the component's context.
-	 */
-	[assembleMethodSymbol]() {
-		super[assembleMethodSymbol]();
-		const self = this;
-
-		initControlReferences.call(this);
-		initEventHandler.call(this);
-
-		const selector = this.getOption("datasource.selector");
-
-		if (isString(selector)) {
-			const elements = document.querySelectorAll(selector);
-			if (elements.length !== 1) {
-				throw new Error("the selector must match exactly one element");
-			}
-
-			const element = elements[0];
-			if (!(element instanceof Datasource)) {
-				throw new TypeError("the element must be a datasource");
-			}
-
-			this[datasourceLinkedElementSymbol] = element;
-			element.datasource.attachObserver(
-				new Observer(handleDataSourceChanges.bind(this)),
-			);
-
-			let originValues;
-
-			element.datasource.attachObserver(
-				new Observer(function () {
-					if (!originValues) {
-						originValues = clone(self[datasourceLinkedElementSymbol].data);
-					}
-
-					const currentValues = this.getRealSubject();
-
-					const result = diff(originValues, currentValues);
-					if (isArray(result) && result.length > 0) {
-						self[stateButtonElementSymbol].setState("changed");
-						self[stateButtonElementSymbol].setOption("disabled", false);
-						self.setOption("changes", result.length);
-						self.setOption(
-							"classes.badge",
-							new TokenList(self.getOption("classes.badge"))
-								.remove("hidden")
-								.toString(),
-						);
-					} else {
-						self[stateButtonElementSymbol].removeState();
-						self[stateButtonElementSymbol].setOption("disabled", true);
-						self.setOption("changes", 0);
-						self.setOption(
-							"classes.badge",
-							new TokenList(self.getOption("classes.badge"))
-								.add("hidden")
-								.toString(),
-						);
-					}
-				}),
-			);
-		}
-
-		this.attachObserver(
-			new Observer(() => {
-				handleDataSourceChanges.call(this);
-			}),
-		);
-	}
-
-	/**
-	 *
-	 * @return [CSSStyleSheet]
-	 */
-	static getCSSStyleSheet() {
-		return [SaveButtonStyleSheet, BadgeStyleSheet];
-	}
+    /**
+     * This method is called by the `instanceof` operator.
+     * @returns {symbol}
+     */
+    static get [instanceSymbol]() {
+        return Symbol.for(
+            "@schukai/monster/components/datasource/save-button@@instance",
+        );
+    }
+
+    /**
+     * To set the options via the html tag the attribute `data-monster-options` must be used.
+     * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
+     *
+     * The individual configuration values can be found in the table.
+     *
+     * @property {Object} templates Template definitions
+     * @property {string} templates.main Main template
+     * @property {object} datasource The datasource
+     * @property {string} datasource.selector The selector of the datasource
+     * @property {string} labels.button The button label
+     * @property {Object} classes The classes
+     * @property {string} classes.bar The bar class
+     * @property {string} classes.badge The badge class
+     * @property {object} mapping The mapping
+     * @property {string} mapping.data The data
+     * @property {number} mapping.index The index
+     * @property {Array} ignoreChanges The ignore changes (regex)
+     * @property {Array} data The data
+     * @return {Object}
+     */
+    get defaults() {
+        const obj = Object.assign({}, super.defaults, {
+            templates: {
+                main: getTemplate(),
+            },
+
+            labels: {
+                button: "save",
+            },
+
+            classes: {
+                bar: "monster-button-primary",
+                badge: "monster-badge-secondary hidden",
+            },
+
+            datasource: {
+                selector: null,
+            },
+
+            changes: "0",
+
+            mapping: {
+                data: "dataset",
+                index: 0,
+            },
+
+            ignoreChanges: [],
+
+            data: {},
+
+            disabled: false,
+        });
+
+        updateOptionsFromArguments.call(this, obj);
+        return obj;
+    }
+
+    /**
+     *
+     * @return {string}
+     */
+    static getTag() {
+        return "monster-datasource-save-button";
+    }
+
+    /**
+     * This method is responsible for assembling the component.
+     *
+     * It calls the parent's assemble method first, then initializes control references and event handlers.
+     * If the `datasource.selector` option is provided and is a string, it searches for the corresponding
+     * element in the DOM using that selector.
+     *
+     * If the selector matches exactly one element, it checks if the element is an instance of the `Datasource` class.
+     *
+     * If it is, the component's `datasourceLinkedElementSymbol` property is set to the element, and the component
+     * attaches an observer to the datasource's changes.
+     *
+     * The observer is a function that calls the `handleDataSourceChanges` method in the context of the component.
+     * Additionally, the component attaches an observer to itself, which also calls the `handleDataSourceChanges`
+     * method in the component's context.
+     */
+    [assembleMethodSymbol]() {
+        super[assembleMethodSymbol]();
+        const self = this;
+
+        initControlReferences.call(this);
+        initEventHandler.call(this);
+
+        const selector = this.getOption("datasource.selector");
+
+        if (isString(selector)) {
+            const elements = document.querySelectorAll(selector);
+            if (elements.length !== 1) {
+                throw new Error("the selector must match exactly one element");
+            }
+
+            const element = elements[0];
+            if (!(element instanceof Datasource)) {
+                throw new TypeError("the element must be a datasource");
+            }
+
+            this[datasourceLinkedElementSymbol] = element;
+            element.datasource.attachObserver(
+                new Observer(handleDataSourceChanges.bind(this)),
+            );
+
+            let originValues;
+
+            element.datasource.attachObserver(
+                new Observer(function () {
+                    if (!originValues) {
+                        originValues = clone(self[datasourceLinkedElementSymbol].data);
+                    }
+
+                    const currentValues = this.getRealSubject();
+                    const ignoreChanges = self.getOption("ignoreChanges");
+
+                    const result = diff(originValues, currentValues);
+                    if (isArray(ignoreChanges) && ignoreChanges.length > 0) {
+                        const itemsToRemove = [];
+                        for (const item of result) {
+                            for (const ignorePattern of ignoreChanges) {
+                                const p = new RegExp(ignorePattern);
+                                if (p.test(item.path)) {
+                                    itemsToRemove.push(item);
+                                    break; 
+                                }
+                            }
+                        }
+
+                        for (const itemToRemove of itemsToRemove) {
+                            const index = result.indexOf(itemToRemove);
+                            if (index > -1) {
+                                result.splice(index, 1);
+                            }
+                        }
+                    }
+
+                    if (isArray(result) && result.length > 0) {
+                        self[stateButtonElementSymbol].setState("changed");
+                        self[stateButtonElementSymbol].setOption("disabled", false);
+                        self.setOption("changes", result.length);
+                        self.setOption(
+                            "classes.badge",
+                            new TokenList(self.getOption("classes.badge"))
+                                .remove("hidden")
+                                .toString(),
+                        );
+                    } else {
+                        self[stateButtonElementSymbol].removeState();
+                        self[stateButtonElementSymbol].setOption("disabled", true);
+                        self.setOption("changes", 0);
+                        self.setOption(
+                            "classes.badge",
+                            new TokenList(self.getOption("classes.badge"))
+                                .add("hidden")
+                                .toString(),
+                        );
+                    }
+                }),
+            );
+        }
+
+        this.attachObserver(
+            new Observer(() => {
+                handleDataSourceChanges.call(this);
+            }),
+        );
+    }
+
+    /**
+     *
+     * @return [CSSStyleSheet]
+     */
+    static getCSSStyleSheet() {
+        return [SaveButtonStyleSheet, BadgeStyleSheet];
+    }
 }
 
 /**
@@ -208,77 +238,77 @@ class SaveButton extends CustomElement {
  * @return {Monster.Components.Datatable.Form}
  */
 function initControlReferences() {
-	if (!this.shadowRoot) {
-		throw new Error("no shadow-root is defined");
-	}
-
-	this[stateButtonElementSymbol] = this.shadowRoot.querySelector(
-		"[data-monster-role=state-button]",
-	);
-
-	this[badgeElementSymbol] = this.shadowRoot.querySelector(
-		"[data-monster-role=badge]",
-	);
-
-	if (this[stateButtonElementSymbol]) {
-		setTimeout(() => {
-			const states = {
-				changed: new State(
-					"changed",
-					'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cloud-arrow-up" viewBox="0 0 16 16">\n' +
-						'  <path fill-rule="evenodd" d="M7.646 5.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708z"/>\n' +
-						'  <path d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383m.653.757c-.757.653-1.153 1.44-1.153 2.056v.448l-.445.049C2.064 6.805 1 7.952 1 9.318 1 10.785 2.23 12 3.781 12h8.906C13.98 12 15 10.988 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3a4.53 4.53 0 0 0-2.941 1.1z"/>\n' +
-						"</svg>",
-				),
-			};
-
-			this[stateButtonElementSymbol].removeState();
-			this[stateButtonElementSymbol].setOption("disabled", "disabled");
-			this[stateButtonElementSymbol].setOption("states", states);
-			this[stateButtonElementSymbol].setOption(
-				"labels.button",
-				this.getOption("labels.button"),
-			);
-		}, 1);
-	}
-
-	return this;
+    if (!this.shadowRoot) {
+        throw new Error("no shadow-root is defined");
+    }
+
+    this[stateButtonElementSymbol] = this.shadowRoot.querySelector(
+        "[data-monster-role=state-button]",
+    );
+
+    this[badgeElementSymbol] = this.shadowRoot.querySelector(
+        "[data-monster-role=badge]",
+    );
+
+    if (this[stateButtonElementSymbol]) {
+        setTimeout(() => {
+            const states = {
+                changed: new State(
+                    "changed",
+                    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cloud-arrow-up" viewBox="0 0 16 16">\n' +
+                    '  <path fill-rule="evenodd" d="M7.646 5.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708z"/>\n' +
+                    '  <path d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383m.653.757c-.757.653-1.153 1.44-1.153 2.056v.448l-.445.049C2.064 6.805 1 7.952 1 9.318 1 10.785 2.23 12 3.781 12h8.906C13.98 12 15 10.988 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3a4.53 4.53 0 0 0-2.941 1.1z"/>\n' +
+                    "</svg>",
+                ),
+            };
+
+            this[stateButtonElementSymbol].removeState();
+            this[stateButtonElementSymbol].setOption("disabled", "disabled");
+            this[stateButtonElementSymbol].setOption("states", states);
+            this[stateButtonElementSymbol].setOption(
+                "labels.button",
+                this.getOption("labels.button"),
+            );
+        }, 1);
+    }
+
+    return this;
 }
 
 /**
  * @private
  */
 function initEventHandler() {
-	setTimeout(() => {
-		this[stateButtonElementSymbol].setOption("actions.click", () => {
-			this[datasourceLinkedElementSymbol]
-				.write()
-				.then(() => {
-					this[stateButtonElementSymbol].removeState();
-					this[stateButtonElementSymbol].setOption("disabled", true);
-					this.setOption("changes", 0);
-					this.setOption(
-						"classes.badge",
-						new TokenList(this.getOption("classes.badge"))
-							.add("hidden")
-							.toString(),
-					);
-				})
-				.catch((error) => {
-					console.error(error);
-				});
-		});
-	}, 1);
+    setTimeout(() => {
+        this[stateButtonElementSymbol].setOption("actions.click", () => {
+            this[datasourceLinkedElementSymbol]
+                .write()
+                .then(() => {
+                    this[stateButtonElementSymbol].removeState();
+                    this[stateButtonElementSymbol].setOption("disabled", true);
+                    this.setOption("changes", 0);
+                    this.setOption(
+                        "classes.badge",
+                        new TokenList(this.getOption("classes.badge"))
+                            .add("hidden")
+                            .toString(),
+                    );
+                })
+                .catch((error) => {
+                    addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.toString());
+                });
+        });
+    }, 1);
 }
 
 /**
  * @param {Object} options
  */
 function updateOptionsFromArguments(options) {
-	const selector = this.getAttribute(ATTRIBUTE_DATASOURCE_SELECTOR);
-	if (selector) {
-		options.datasource.selector = selector;
-	}
+    const selector = this.getAttribute(ATTRIBUTE_DATASOURCE_SELECTOR);
+    if (selector) {
+        options.datasource.selector = selector;
+    }
 }
 
 /**
@@ -286,8 +316,8 @@ function updateOptionsFromArguments(options) {
  * @return {string}
  */
 function getTemplate() {
-	// language=HTML
-	return `
+    // language=HTML
+    return `
         <div data-monster-role="control" part="control"
              data-monster-attributes="disabled path:disabled | if:true">
             <monster-state-button data-monster-role="state-button">save</monster-state-button>

package/source/components/datatable/status.mjs

@@ -221,7 +221,7 @@ function getTemplate() {
     	     data-monster-attributes="disabled path:disabled | if:true">
             <monster-context-error
                     data-monster-option-classes-button="monster-theme-error-2 monster-theme-background-inherit"></monster-context-error>
-            <div class="monster-theme-table-elements"
+            <div class="monster-theme-control-element"
                  data-monster-attributes="data-monster-state-loader path:state.spinner"></div>
         </div>
     `;

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

@@ -69,7 +69,7 @@
         align-items: center;
         justify-content: flex-start;
         line-height: 1.2;
-        border-bottom: 1px dashed var(--monster-table-border-color);
+        border-bottom: 1px dashed var(--monster-theme-control-border-color);
         box-sizing: border-box;
 
         min-width: 0;
@@ -99,8 +99,8 @@
     @for $i from 0 to 500 {
         &:has([data-monster-insert-reference$=row-$(i)]:hover) [data-monster-insert-reference$=row-$(i)
     ] {
-        color: var(--monster-table-hover-color);
-        background-color: var(--monster-table-hover-bg-color);
+        color: var(--monster-theme-control-hover-color);
+        background-color: var(--monster-theme-control-hover-bg-color);
         box-sizing: border-box;
     }
     }