@schukai/monster 3.73.4 → 3.73.6

package/CHANGELOG.md

@@ -2,13 +2,25 @@
 
 
 
-## [3.73.4] - 2024-07-02
+## [3.73.6] - 2024-07-31
 
 ### Bug Fixes
 
-- eventprocessing is now only active in selected controls: form, filter. [#224](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/224)
+- repair url in tests [#230](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/230)
+- improvement of the tree menu to avoid recursion. [#230](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/230)
+
+
+## [3.73.5] - 2024-07-02
+
+### Bug Fixes
 
+- originValues in the save button is now reset.
+
+## [3.73.4] - 2024-07-02
+
+### Bug Fixes
 
+- event processing is now only active in selected controls: form, filter. [#224](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/224)
 
 ## [3.73.3] - 2024-07-01
 

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.7","@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.73.4"}
+{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.7","@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.73.6"}

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

@@ -46,6 +46,12 @@ export { SaveButton };
  */
 const stateButtonElementSymbol = Symbol("stateButtonElement");
 
+/**
+ * @private
+ * @type {symbol}
+ */
+const originValuesSymbol = Symbol("originValues");
+
 /**
  * @private
  * @type {symbol}
@@ -161,18 +167,20 @@ class SaveButton extends CustomElement {
 				new Observer(handleDataSourceChanges.bind(this)),
 			);
 
-			let originValues;
+			self[originValuesSymbol] = null;
 
 			element.datasource.attachObserver(
 				new Observer(function () {
-					if (!originValues) {
-						originValues = clone(self[datasourceLinkedElementSymbol].data);
+					if (!self[originValuesSymbol]) {
+						self[originValuesSymbol] = clone(
+							self[datasourceLinkedElementSymbol].data,
+						);
 					}
 
 					const currentValues = this.getRealSubject();
 					const ignoreChanges = self.getOption("ignoreChanges");
 
-					const result = diff(originValues, currentValues);
+					const result = diff(self[originValuesSymbol], currentValues);
 					if (isArray(ignoreChanges) && ignoreChanges.length > 0) {
 						const itemsToRemove = [];
 						for (const item of result) {
@@ -285,6 +293,7 @@ function initEventHandler() {
 			this[datasourceLinkedElementSymbol]
 				.write()
 				.then(() => {
+					this[originValuesSymbol] = null;
 					this[stateButtonElementSymbol].removeState();
 					this[stateButtonElementSymbol].setOption("disabled", true);
 					this.setOption("changes", 0);

package/source/components/form/button.mjs

@@ -51,7 +51,6 @@ export const buttonElementSymbol = Symbol("buttonElement");
  * @copyright schukai GmbH
  * @summary A beautiful button that can make your life easier and also looks good.
  * @fires monster-button-clicked this event is triggered when the button is clicked. It contains the field {button} with the button instance.
- *
  */
 class Button extends CustomControl {
 	/**

package/source/components/form/select.mjs

@@ -32,7 +32,6 @@ import {
 	assembleMethodSymbol,
 	getSlottedElements,
 	registerCustomElement,
-	updaterTransformerMethodsSymbol,
 } from "../../dom/customelement.mjs";
 import {
 	findTargetElementFromEvent,
@@ -84,120 +83,120 @@ const clickToLoadOptionsMessage = "Click to load options.";
 
 /**
  * @private
- * @type {symbol}
+ * @type {Symbol}
  */
 const timerCallbackSymbol = Symbol("timerCallback");
 
 /**
  * @private
- * @type {symbol}
+ * @type {Symbol}
  */
 const keyFilterEventSymbol = Symbol("keyFilterEvent");
 
 /**
  * @private
- * @type {symbol}
+ * @type {Symbol}
  */
 const lazyLoadDoneSymbol = Symbol("lazyLoadDone");
 
 /**
  * @private
- * @type {symbol}
+ * @type {Symbol}
  */
 const isLoadingSymbol = Symbol("isLoading");
 
 /**
  * local symbol
  * @private
- * @type {symbol}
+ * @type {Symbol}
  */
 const closeEventHandler = Symbol("closeEventHandler");
 
 /**
  * local symbol
  * @private
- * @type {symbol}
+ * @type {Symbol}
  */
 const clearOptionEventHandler = Symbol("clearOptionEventHandler");
 
 /**
  * local symbol
  * @private
- * @type {symbol}
+ * @type {Symbol}
  */
 const resizeObserverSymbol = Symbol("resizeObserver");
 
 /**
  * local symbol
  * @private
- * @type {symbol}
+ * @type {Symbol}
  */
 const keyEventHandler = Symbol("keyEventHandler");
 
 /**
  * local symbol
  * @private
- * @type {symbol}
+ * @type {Symbol}
  */
 const lastFetchedDataSymbol = Symbol("lastFetchedData");
 /**
  * local symbol
  * @private
- * @type {symbol}
+ * @type {Symbol}
  */
 const inputEventHandler = Symbol("inputEventHandler");
 
 /**
  * local symbol
  * @private
- * @type {symbol}
+ * @type {Symbol}
  */
 const changeEventHandler = Symbol("changeEventHandler");
 
 /**
  * local symbol
  * @private
- * @type {symbol}
+ * @type {Symbol}
  */
 const controlElementSymbol = Symbol("controlElement");
 
 /**
  * local symbol
  * @private
- * @type {symbol}
+ * @type {Symbol}
  */
 const selectionElementSymbol = Symbol("selectionElement");
 
 /**
  * local symbol
  * @private
- * @type {symbol}
+ * @type {Symbol}
  */
 const containerElementSymbol = Symbol("containerElement");
 
 /**
  * local symbol
  * @private
- * @type {symbol}
+ * @type {Symbol}
  */
 const popperElementSymbol = Symbol("popperElement");
 
 /**
  * local symbol
  * @private
- * @type {symbol}
+ * @type {Symbol}
  */
 const inlineFilterElementSymbol = Symbol("inlineFilterElement");
 /**
  * local symbol
  * @private
- * @type {symbol}
+ * @type {Symbol}
  */
 const popperFilterElementSymbol = Symbol("popperFilterElement");
 /**
  * local symbol
  * @private
- * @type {symbol}
+ * @type {Symbol}
  */
 const popperFilterContainerElementSymbol = Symbol(
 	"popperFilterContainerElement",
@@ -206,27 +205,27 @@ const popperFilterContainerElementSymbol = Symbol(
 /**
  * local symbol
  * @private
- * @type {symbol}
+ * @type {Symbol}
  */
 const optionsElementSymbol = Symbol("optionsElement");
 
 /**
  * local symbol
  * @private
- * @type {symbol}
+ * @type {Symbol}
  */
 const noOptionsAvailableElementSymbol = Symbol("noOptionsAvailableElement");
 
 /**
  * local symbol
  * @private
- * @type {symbol}
+ * @type {Symbol}
  */
 const statusOrRemoveBadgesElementSymbol = Symbol("statusOrRemoveBadgesElement");
 
 /**
  * @private
- * @type {symbol}
+ * @type {Symbol}
  */
 const areOptionsAvailableAndInitSymbol = Symbol("@@areOptionsAvailableAndInit");
 
@@ -271,69 +270,20 @@ const FILTER_POSITION_POPPER = "popper";
 const FILTER_POSITION_INLINE = "inline";
 
 /**
- * @typedef {Object} Selection
- * @property {*} value
- * @property {String} label
- * @memberOf Monster.Components.Form
- * @since 1.2.0
- */
-
-/**
- * This CustomControl creates a select element with a variety of options.
- * It supports filtering, local and remote, multiple selection and has a
- * template system for displaying the options.
- *
- * <img src="./images/select.png">
+ * A select control that can be used to select one or more options from a list.
  *
- * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library
- * as well as [pooperjs](https://popper.js.org/docs/v2/).
+ * @fragments /fragments/components/form/select/
  *
- * You can create this control either by specifying the HTML tag `<monster-select />` directly in the HTML or using
- * Javascript via the `document.createElement('monster-select');` method.
- *
- * ```html
- * <monster-select></monster-select>
- * ```
- *
- * Or you can create this CustomControl directly in Javascript:
- *
- * ```js
- * import {Select} from '@schukai/component-form/source/select.js';
- * document.createElement('monster-select');
- * ```
- *
- * ## Events
- *
- * The event `monster-change` is sent as soon as someone has clicked on a input control.
- * `monster-changed` is sent as soon as the control has processed this input.
- * The `monster-changed` event is sent when setting a selection. If the options have been set, the `monster-options-set` event is sent.
- *
- * The CustomEvent has the property [`detail`](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail).
- *
- * ```
- * node.addEventListener('monster-change',(e)=>console.log(e.detail))
- * node.addEventListener('monster-changed',(e)=>console.log(e.detail))
- * node.addEventListener('monster-selected',(e)=>console.log(e.detail))
- * node.addEventListener('monster-options-set',(e)=>console.log(e.detail))
- * ```
- *
- * @externalExample ../../../example/components/form/select.mjs
- * @startuml select.png
- * skinparam monochrome true
- * skinparam shadowing false
- * HTMLElement <|-- CustomElement
- * CustomElement <|-- CustomControl
- * CustomControl <|-- Select
- * @enduml
+ * @example /examples/components/form/select-simple
+ * @example /examples/components/form/select-with-options
  *
  * @since 1.0.0
  * @copyright schukai GmbH
- * @memberOf Monster.Components.Form
- * @summary A highly configurable select control
- * @fires Monster.Components.Form.event:monster-options-set
- * @fires Monster.Components.Form.event:monster-selected
- * @fires Monster.Components.Form.event:monster-change
- * @fires Monster.Components.Form.event:monster-changed
+ * @summary A beautiful select control that can make your life easier and also looks good.
+ * @fires monster-options-set
+ * @fires monster-selected
+ * @fires monster-change
+ * @fires monster-changed
  */
 class Select extends CustomControl {
 	/**
@@ -346,7 +296,7 @@ class Select extends CustomControl {
 
 	/**
 	 * This method is called by the `instanceof` operator.
-	 * @returns {symbol}
+	 * @returns {Symbol}
 	 * @since 2.1.0
 	 */
 	static get [instanceSymbol]() {
@@ -540,7 +490,7 @@ class Select extends CustomControl {
 	}
 
 	/**
-	 * @return {Monster.Components.Form.Select}
+	 * @return {Select}
 	 */
 	[assembleMethodSymbol]() {
 		const self = this;

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

@@ -431,7 +431,7 @@ function initEventHandler() {
 	}
 
 	return this;
-}
+} 
 
 /**
  * @private
@@ -469,6 +469,7 @@ function importEntries() {
 		});
 	} catch (error) {
 		addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, String(error));
+		return this;
 	}
 
 	const options = [];
@@ -500,7 +501,6 @@ function importEntries() {
 	}
 
 	this.setOption("entries", options);
-
 	return this;
 }
 

package/source/data/buildtree.mjs

@@ -12,13 +12,14 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-import { isArray, isObject } from "../types/is.mjs";
-import { Node } from "../types/node.mjs";
-import { NodeList } from "../types/nodelist.mjs";
-import { assembleParts } from "./buildmap.mjs";
-import { extend } from "./extend.mjs";
+import {isArray, isObject} from "../types/is.mjs";
+import {Node} from "../types/node.mjs";
+import {NodeList} from "../types/nodelist.mjs";
+import {clone} from "../util/clone.mjs";
+import {assembleParts} from "./buildmap.mjs";
+import {extend} from "./extend.mjs";
 
-export { buildTree };
+export {buildTree};
 
 /**
  * @private
@@ -139,63 +140,69 @@ const rootSymbol = Symbol("root");
  * @since 1.26.0
  */
 function buildTree(subject, selector, idKey, parentIDKey, options) {
-	const nodes = new Map();
-
-	if (!isObject(options)) {
-		options = {};
-	}
-
-	options = extend(
-		{},
-		{
-			rootReferences: [null, undefined],
-			filter: undefined,
-		},
-		options,
-	);
-
-	const filter = options?.filter;
-	let rootReferences = options.rootReferences;
-	if (!isArray(rootReferences)) {
-		rootReferences = [rootReferences];
-	}
-
-	const childMap = assembleParts(subject, selector, filter, function (o, k, m) {
-		const key = o?.[idKey];
-		let ref = o?.[parentIDKey];
-		if (rootReferences.indexOf(ref) !== -1) ref = rootSymbol;
-
-		if (key === undefined) {
-			throw new Error("the object has no value for the specified id");
-		}
-
-		o[parentSymbol] = ref;
-
-		const node = new Node(o);
-		this.has(ref)
-			? this.get(ref).add(node)
-			: this.set(ref, new NodeList().add(node));
-		nodes.set(key, node);
-	});
-
-	nodes.forEach((node) => {
+    const nodes = new Map();
+
+    const maxDepth = 100;
+
+    if (!isObject(options)) {
+        options = {};
+    }
+
+    options = extend(
+        {},
+        {
+            rootReferences: [null, undefined],
+            filter: undefined,
+        },
+        options,
+    );
+
+    const filter = options?.filter;
+    let rootReferences = options.rootReferences;
+    if (!isArray(rootReferences)) {
+        rootReferences = [rootReferences];
+    }
+
+    const childMap = assembleParts(subject, selector, filter, function (o, k, m) {
+        const key = o?.[idKey];
+        let ref = o?.[parentIDKey];
+        if (rootReferences.indexOf(ref) !== -1) ref = rootSymbol;
+
+        if (key === undefined) {
+            throw new Error("the object has no value for the specified id");
+        }
+
+        o[parentSymbol] = ref;
+
+        const node = new Node(o);
+        this.has(ref)
+            ? this.get(ref).add(node)
+            : this.set(ref, new NodeList().add(node));
+        nodes.set(key, node);
+    });
+
+    nodes.forEach((node) => {
 		const id = node?.["value"]?.[idKey];
 
+        if (id === undefined) {
+            throw new Error("the object has no value for the specified id");
+        }
+
 		if (childMap.has(id)) {
-			node.childNodes = childMap.get(id);
-			childMap.delete(id);
+            node.childNodes = childMap.get(id);
+            childMap.delete(id);
 		}
 	});
 
-	const list = new NodeList();
+    const list = new NodeList();
 
-	childMap.forEach((s) => {
-		if (s instanceof Set) {
-			s.forEach((n) => {
-				list.add(n);
-			});
-		}
-	});
+    childMap.forEach((s) => {
+        if (s instanceof Set) {
+            s.forEach((n) => {
+                list.add(n);
+            });
+        }
+    });
 
-	return list;
+    return list;
 }