@schukai/monster 3.91.0 → 3.92.0

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 
 
+## [3.92.0] - 2024-12-18
+
+### Add Features
+
+- **tabs:** new feature flag removeBehavior [#268](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/268) , update form/template and tree-select
+### Changes
+
+- update project
+
+
+
 ## [3.91.0] - 2024-12-15
 
 ### Add Features

package/package.json

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

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

@@ -58,6 +58,9 @@ const originValuesSymbol = Symbol("originValues");
  */
 const badgeElementSymbol = Symbol("badgeElement");
 
+/**
+ *
+ */
 class SaveButton extends CustomElement {
 	/**
 	 * This method is called by the `instanceof` operator.

package/source/components/form/context-error.mjs

@@ -53,23 +53,12 @@ const popperElementSymbol = Symbol("popperElement");
  */
 const iconElementSymbol = Symbol("iconElement");
 
-/**
- * The ContextError control shows an error message in a popper.
- *
- * @fragments /fragments/components/form/context-error/
- *
- * @example /examples/components/form/context-error-simple
- *
- * @copyright schukai GmbH
- * @summary A control that can be used to display a tooltip or a popover with an error message.
- **/
-
 /**
  * A context error control.
  *
- * @fragments /fragments/components/form/select/
+ * @fragments /fragments/components/form/context-error
  *
- * @example /examples/components/form/select-simple
+ * @example /examples/components/form/context-error-simple
  *
  * @since 3.55.0
  * @copyright schukai GmbH

package/source/components/form/context-help.mjs

@@ -23,7 +23,7 @@ export { ContextHelp };
 /**
  * A context help control.
  *
- * @fragments /fragments/components/form/context-help/
+ * @fragments /fragments/components/form/context-help
  *
  * @example /examples/components/form/context-help-simple
  *

package/source/components/form/password.mjs

@@ -50,9 +50,9 @@ export const inputElementSymbol = Symbol("inputIconElement");
 /**
  * A password field
  *
- * @fragments /fragments/components/components/form/password/
+ * @fragments /fragments/components/form/password
  *
- * @example /examples/components/components/form/password-simple
+ * @example /examples/components/form/password-simple
  *
  * @since 3.89.0
  * @copyright schukai GmbH

package/source/components/form/reload.mjs

@@ -121,7 +121,7 @@ class Reload extends CustomElement {
 	 * @property {string} url=undefined
 	 * @property {string} reload=undefined currently the values defined are `onshow` and `always`. The default `onshow` removes the IntersectionObserver. This means that the content is only loaded once. reloading of the content does not occur.
 	 * @property {string} filter=undefined dom selectors to search for elements, if undefined then everything is taken
-	 * @property {Monster.Components.Form.Processor[]} processors
+	 * @property {Object[]} processors
 	 * @property {Object} fetch Fetch [see Using Fetch mozilla.org](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
 	 * @property {String} fetch.redirect=error
 	 * @property {String} fetch.method=GET

package/source/components/form/shadow-reload.mjs

@@ -50,7 +50,7 @@ class ShadowReload extends Reload {
 	 * @property {string} url=undefined
 	 * @property {string} reload=undefined currently the values defined are `onshow` and `always`. The default `onshow` removes the IntersectionObserver. This means that the content is only loaded once. reloading of the content does not occur.
 	 * @property {string} filter=undefined dom selectors to search for elements, if undefined then everything is taken
-	 * @property {Monster.Components.Form.Processor[]} processors
+	 * @property {Object[]} processors
 	 * @property {Object} fetch Fetch [see Using Fetch mozilla.org](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
 	 * @property {String} fetch.redirect=error
 	 * @property {String} fetch.method=GET

package/source/components/form/template.mjs

@@ -40,9 +40,12 @@ const intersectionObserverWasInitialized = Symbol("wasInitialized");
 /**
  * A Template control is a control that can be used to load content from a URL and display it in the ShadowRoot.
  *
- * @fragments /fragments/components/form/template/
+ * @fragments /fragments/components/form/template
  *
  * @example /examples/components/form/template-simple
+ * @example /examples/components/form/template-with-default
+ * @example /examples/components/form/template-with-processor
+ * @example /examples/components/form/template-onshow
  *
  * @since 1.11.0
  * @copyright schukai GmbH
@@ -69,7 +72,7 @@ class Template extends CustomElement {
 	 * @property {string} templates.main Main template
 	 * @property {string} url=undefined
 	 * @property {string} reload=undefined  currently the only value defined is `onshow`. Currently the only value defined is onshow. this removes the IntersectionObserver. this means that the content is only loaded once. reloading of the content does not occur.
-	 * @property {Monster.Components.Form.Processor[]} processors
+	 * @property {Object[]} processors
 	 * @property {Object} fetch Fetch [see Using Fetch mozilla.org](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
 	 * @property {String} fetch.redirect=error
 	 * @property {String} fetch.method=GET
@@ -85,8 +88,8 @@ class Template extends CustomElement {
 				templates: {
 					main: getTemplate(),
 				},
-				url: undefined,
-				reload: undefined,
+				url: null,
+				reload: null,
 				processors: [],
 				fetch: {
 					redirect: "error",
@@ -123,8 +126,6 @@ class Template extends CustomElement {
 		this[attributeObserverSymbol][ATTRIBUTE_FORM_URL] = (url) => {
 			if (this.hasAttribute(ATTRIBUTE_FORM_URL)) {
 				this.setOption("url", new URL(url, document.location).toString());
-			} else {
-				this.setOption("url", undefined);
 			}
 		};
 	}
@@ -139,7 +140,7 @@ class Template extends CustomElement {
 	 * @throws {Error} not found
 	 * @throws {Error} undefined status or type
 	 * @fires monster-fetched
-	 * @return {Monster.Components.Form.Form}
+	 * @return {void}
 	 */
 	[assembleMethodSymbol]() {
 		super[assembleMethodSymbol]();
@@ -181,13 +182,6 @@ class Template extends CustomElement {
 	}
 }
 
-/**
- * @typedef {Object} Processor
- * @property {String} destination
- * @property {String} source
- * @since 1.11.8
- */
-
 /**
  * This attribute can be used to pass a URL to this select.
  *
@@ -276,7 +270,12 @@ function loadContent() {
 		throw new Error("no shadow-root is defined");
 	}
 
-	const url = this.getOption("url", undefined);
+	let url = this.getOption("url", undefined);
+
+	if (url instanceof URL) {
+		url = url.toString();
+	}
+
 	if (!isString(url) || url === "") {
 		throw new Error("missing url");
 	}
@@ -303,6 +302,7 @@ function loadContent() {
 	loadAndAssignContent(container, url, options)
 		.then(() => {
 			defaultSlot.style.display = "none";
+			container.style.display = "block";
 			runProcessors.call(this);
 		})
 		.catch((e) => {
@@ -316,15 +316,40 @@ function loadContent() {
  */
 function runProcessors() {
 	const processors = this.getOption("processors");
-	if (!isArray(processors)) return;
+	if (!isArray(processors)) return this;
 
 	for (const [, processor] of processors.entries()) {
 		const source = processor?.source;
-		const destination = processor?.destination;
+		let destination = processor?.destination;
+
+		if (source === null) {
+			addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, "missing source");
+			continue;
+		}
+
+		if (
+			destination === null ||
+			destination === undefined ||
+			destination === ""
+		) {
+			destination = "[" + ATTRIBUTE_ROLE + "=container]";
+		}
 
 		if (isString(source) && isString(destination)) {
 			const sourceNode = this.shadowRoot.querySelector(source);
-			const destinationNode = document.querySelector(destination);
+			let destinationNode = document.querySelector(destination);
+
+			if (destinationNode === null) {
+				destinationNode = this.shadowRoot.querySelector(destination);
+				if (destinationNode === null) {
+					addAttributeToken(
+						this,
+						ATTRIBUTE_ERRORMESSAGE,
+						"destination not found",
+					);
+					continue;
+				}
+			}
 
 			if (
 				sourceNode instanceof HTMLElement &&
@@ -332,6 +357,12 @@ function runProcessors() {
 			) {
 				destinationNode.innerHTML = sourceNode.cloneNode(true).innerHTML;
 			}
+		} else {
+			addAttributeToken(
+				this,
+				ATTRIBUTE_ERRORMESSAGE,
+				"invalid source or destination",
+			);
 		}
 	}
 

package/source/components/form/tree-select.mjs

@@ -13,8 +13,12 @@
  */
 
 import { buildTree } from "../../data/buildtree.mjs";
-import { findClosestByAttribute } from "../../dom/attributes.mjs";
 import {
+	addAttributeToken,
+	findClosestByAttribute,
+} from "../../dom/attributes.mjs";
+import {
+	ATTRIBUTE_ERRORMESSAGE,
 	ATTRIBUTE_ROLE,
 	ATTRIBUTE_UPDATER_INSERT_REFERENCE,
 } from "../../dom/constants.mjs";
@@ -57,7 +61,7 @@ const keyEventHandler = Symbol("keyEventHandler");
  *
  * @fragments /fragments/components/form/tree-select
  *
- * @example /examples/components/form/tree-select
+ * @example /examples/components/form/tree-select-simple
  *
  * @since 1.9.0
  * @copyright schukai GmbH
@@ -98,8 +102,12 @@ class TreeSelect extends Select {
 			{
 				mapping: {
 					rootReferences: ["0", undefined, null],
-					idTemplate: "id",
-					parentTemplate: "parent",
+					id: "id",
+					parent: "parent",
+
+					selector: "*",
+					labelTemplate: "",
+					valueTemplate: "",
 				},
 				formatter: {
 					selection: formatHierarchicalSelection,
@@ -145,54 +153,58 @@ class TreeSelect extends Select {
 		const filter = mappingOptions?.["filter"];
 		const rootReferences = mappingOptions?.["rootReferences"];
 
-		const id = this.getOption("mapping.idTemplate", "id");
-		const parentID = this.getOption("mapping.parentTemplate", "parent");
+		const id = this.getOption("mapping.id", "id");
+		const parentID = this.getOption("mapping.parent", "parent");
 
 		const selector = mappingOptions?.["selector"];
-
-		const nodes = buildTree(data, selector, id, parentID, {
-			filter,
-			rootReferences,
-		});
-
 		const options = [];
-		for (const node of nodes) {
-			const iterator = new NodeRecursiveIterator(node);
-			for (const n of iterator) {
-				const formattedValues = formatKeyLabel.call(this, n);
-
-				const label = formattedValues.label;
-				const value = formattedValues.value;
-				const intend = n.level;
-
-				const visibility = intend > 0 ? "hidden" : "visible";
-				const state = "close";
-
-				this[internalNodesSymbol].set(value, n);
-
-				options.push({
-					value,
-					label,
-					intend,
-					state,
-					visibility,
-					["has-children"]: n.hasChildNodes(),
-				});
+
+		try {
+			const nodes = buildTree(data, selector, id, parentID, {
+				filter,
+				rootReferences,
+			});
+
+			for (const node of nodes) {
+				const iterator = new NodeRecursiveIterator(node);
+				for (const n of iterator) {
+					const formattedValues = formatKeyLabel.call(this, n);
+
+					const label = formattedValues.label;
+					const value = formattedValues.value;
+					const intend = n.level;
+
+					const visibility = intend > 0 ? "hidden" : "visible";
+					const state = "close";
+
+					this[internalNodesSymbol].set(value, n);
+
+					options.push({
+						value,
+						label,
+						intend,
+						state,
+						visibility,
+						["has-children"]: n.hasChildNodes(),
+					});
+				}
 			}
-		}
 
-		this.setOption("options", options);
+			this.setOption("options", options);
 
-		fireCustomEvent(this, "monster-options-set", {
-			options,
-		});
+			fireCustomEvent(this, "monster-options-set", {
+				options,
+			});
+		} catch (e) {
+			addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e?.message || e);
+		}
 
 		return this;
 	}
 
 	/**
 	 *
-	 * @return {Monster.Components.Form.Select}
+	 * @return {TreeSelect}
 	 */
 	[assembleMethodSymbol]() {
 		super[assembleMethodSymbol]();
@@ -251,10 +263,16 @@ function closeOrOpenCurrentOption(event, mode) {
 function formatKeyLabel(node) {
 	validateInstance(node, Node);
 
-	const label = new Formatter(node.value).format(
+	const v = node.value;
+	if (v === undefined) {
+		throw new Error("the object has no value for the specified id");
+	}
+
+	const label = new Formatter(v).format(
 		this.getOption("mapping.labelTemplate", ""),
 	);
-	const value = new Formatter(node.value).format(
+
+	const value = new Formatter(v).format(
 		this.getOption("mapping.valueTemplate", ""),
 	);
 

package/source/components/layout/tabs.mjs

@@ -146,6 +146,10 @@ const resizeObserverSymbol = Symbol("resizeObserver");
  * @fragments /fragments/components/layout/tabs/
  *
  * @example /examples/components/layout/tabs-simple
+ * @example /examples/components/layout/tabs-active
+ * @example /examples/components/layout/tabs-removable
+ *
+ * @issue https://localhost.alvine.dev:8443/development/issues/closed/268.html
  *
  * @since 3.74.0
  * @copyright schukai GmbH
@@ -172,6 +176,7 @@ class Tabs extends CustomElement {
 	 * @property {string} labels.new-tab-label="New Tab"
 	 * @property {Object} features
 	 * @property {number} features.openDelay=500 Open delay in milliseconds
+	 * @property {string} features.removeBehavior="auto" Remove behavior, auto (default), next, previous and none
 	 * @property {Object} fetch Fetch [see Using Fetch mozilla.org](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
 	 * @property {String} fetch.redirect=error
 	 * @property {String} fetch.method=GET
@@ -206,6 +211,7 @@ class Tabs extends CustomElement {
 
 			features: {
 				openDelay: null,
+				removeBehavior: "auto",
 			},
 
 			classes: {
@@ -510,7 +516,6 @@ function attachTabChangeObserver() {
  * @private
  * @return {Select}
  * @external "external:createPopper"
- * @see {@link  Plugins}
  */
 function initPopper() {
 	const self = this;
@@ -685,6 +690,10 @@ function initEventHandler() {
 				const reference = button.getAttribute(
 					`${ATTRIBUTE_PREFIX}tab-reference`,
 				);
+
+				const previous = button.previousElementSibling;
+				const next = button.nextElementSibling;
+
 				if (reference) {
 					const container = this.querySelector(`[id=${reference}]`);
 					if (container instanceof HTMLElement) {
@@ -695,6 +704,32 @@ function initEventHandler() {
 						});
 					}
 				}
+
+				switch (this.getOption("features.removeBehavior")) {
+					case "auto":
+						if (next instanceof HTMLButtonElement) {
+							next.click();
+						} else {
+							// get previous button
+							if (previous instanceof HTMLButtonElement) {
+								previous.click();
+							}
+						}
+						break;
+					case "next":
+						if (next instanceof HTMLButtonElement) {
+							next.click();
+						}
+						break;
+					case "previous":
+						if (previous instanceof HTMLButtonElement) {
+							previous.click();
+						}
+						break;
+
+					default: // and "none"
+						break;
+				}
 			}
 		}
 	};
@@ -826,7 +861,7 @@ function initTabButtons() {
 		}
 
 		if (node.hasAttribute(`${ATTRIBUTE_PREFIX}button-icon`)) {
-			label = `<span part="label">${label}</span><img part="icon" src="${node.getAttribute(
+			label = `<span part="label">${label}</span><img part="icon" alt="this is an icon" src="${node.getAttribute(
 				`${ATTRIBUTE_PREFIX}button-icon`,
 			)}">`;
 		}
@@ -1107,7 +1142,7 @@ function getTemplate() {
                  data-monster-insert="buttons path:buttons.standard">
                 <slot name="start" class="invisible"></slot>
                 <div data-monster-role="popper" part="popper" tabindex="-1"
-					 data-monster-attributes="class path:classes.popper">
+                     data-monster-attributes="class path:classes.popper">
                     <div data-popper-arrow></div>
 
 

package/source/types/version.mjs

@@ -156,7 +156,7 @@ function getMonsterVersion() {
 	}
 
 	/** don't touch, replaced by make with package.json version */
-	monsterVersion = new Version("3.90.0");
+	monsterVersion = new Version("3.91.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("3.90.0")
+        monsterVersion = new Version("3.91.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 3.90.0</h1>
-  <div id="lastupdate" style='font-size:0.7em'>last update Mo 16. Dez 00:30:57 CET 2024</div>
+  <h1 style='margin-bottom: 0.1em;'>Monster 3.91.0</h1>
+  <div id="lastupdate" style='font-size:0.7em'>last update Mi 18. Dez 01:06:46 CET 2024</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>