@schukai/monster 3.55.6 → 3.56.0

package/CHANGELOG.md

@@ -1,9 +1,23 @@
 
+## [3.56.0] - 2024-02-26
+
+### Add Features
+
+- update datatable controls [#150](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/150) [#149](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/149) [#148](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/148) [#147](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/147) [#146](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/146) [#145](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/145)
+### Changes
+
+- format
+- format
+- [#144](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/144)
+
 ## [3.55.6] - 2024-01-26
 
 ### Bug Fixes
 
 - wrong font family for tab buttons [#140](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/140)
+### Changes
+
+- release and publish to npm new version 3.55.6
 
 ## [3.55.5] - 2024-01-24
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schukai/monster",
-  "version": "3.55.6",
+  "version": "3.56.0",
   "description": "Monster is a simple library for creating fast, robust and lightweight websites.",
   "keywords": [
     "framework",
@@ -40,7 +40,7 @@
   "author": "schukai GmbH",
   "license": "AGPL 3.0",
   "dependencies": {
-    "@floating-ui/dom": "^1.5.4",
+    "@floating-ui/dom": "^1.6.3",
     "@popperjs/core": "^2.11.8",
     "vite-plugin-directory-index": "^3.0.1"
   }

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

@@ -0,0 +1,265 @@
+/**
+ * Copyright 2023 schukai GmbH
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+import { instanceSymbol } from "../../constants.mjs";
+import { diff } from "../../data/diff.mjs";
+import {
+	assembleMethodSymbol,
+	CustomElement,
+	registerCustomElement,
+} from "../../dom/customelement.mjs";
+import { isString, isArray } from "../../types/is.mjs";
+import { Observer } from "../../types/observer.mjs";
+import { clone } from "../../util/clone.mjs";
+import { State } from "../form/types/state.mjs";
+import { ATTRIBUTE_DATASOURCE_SELECTOR } from "./constants.mjs";
+import { ChangeButtonStyleSheet } from "./stylesheet/change-button.mjs";
+
+export { ChangeButton };
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const stateButtonElementSymbol = Symbol("stateButtonElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const datasetLinkedElementSymbol = Symbol("datasetLinkedElement");
+/**
+ * @private
+ * @type {symbol}
+ */
+const overlayLinkedElementSymbol = Symbol("overlayLinkedElement");
+
+class ChangeButton extends CustomElement {
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @returns {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for(
+			"@schukai/monster/components/datasource/change-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: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                             class="bi bi-grid" viewBox="0 0 16 16">
+                            <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5z"/>
+                        </svg>`,
+			},
+
+			classes: {
+				bar: "monster-button-primary",
+			},
+
+			dataset: {
+				selector: null,
+			},
+
+			overlay: {
+				selector: null,
+			},
+
+			mapping: {
+				data: "dataset",
+				index: 0,
+			},
+
+			data: {},
+
+			disabled: false,
+		});
+
+		updateOptionsFromArguments.call(this, obj);
+		return obj;
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-datatable-change-button";
+	}
+
+	/**
+	 * This method is responsible for assembling the component.
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();;
+
+		initControlReferences.call(this);
+		initEventHandler.call(this);
+	}
+
+	/**
+	 *
+	 * @return [CSSStyleSheet]
+	 */
+	static getCSSStyleSheet() {
+		return [ChangeButtonStyleSheet];
+	}
+}
+
+/**
+ * @private
+ * @return {Monster.Components.Datatable.Form}
+ */
+function initControlReferences() {
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
+
+	const selector = this.getOption("dataset.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 HTMLElement)) {
+			throw new TypeError("the element must be a dataset");
+		}
+
+		this[datasetLinkedElementSymbol] = element;
+	}
+
+	const selector2 = this.getOption("overlay.selector");
+
+	if (isString(selector2)) {
+		const elements = document.querySelectorAll(selector2);
+		if (elements.length !== 1) {
+			throw new Error("the selector must match exactly one element");
+		}
+
+		const element = elements[0];
+		if (!(element instanceof HTMLElement)) {
+			throw new TypeError("the element must be a overlay");
+		}
+
+		this[overlayLinkedElementSymbol] = element;
+	}
+
+	this[stateButtonElementSymbol] = this.shadowRoot.querySelector(
+		"[data-monster-role=state-button]",
+	);
+
+	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-record-circle" viewBox="0 0 16 16">
+                                  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
+                                  <path d="M11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0"/>
+                               </svg>`,
+				),
+			};
+
+			this[stateButtonElementSymbol].removeState();
+			this[stateButtonElementSymbol].setOption("states", states);
+			this[stateButtonElementSymbol].setOption(
+				"labels.button",
+				this.getOption("labels.button"),
+			);
+		}, 1);
+	}
+
+	return this;
+}
+
+function getIndex() {
+	if (!(this instanceof HTMLElement)) {
+		return;
+	}
+
+	const row = this.closest("[data-monster-insert-reference]");
+	if (!row) {
+		return;
+	}
+
+	const ref = row.getAttribute("data-monster-insert-reference");
+	if (!ref) {
+		return;
+	}
+
+	const index = Number(ref.split("-")[3]);
+	if (isNaN(index)) {
+		return;
+	}
+
+	return index;
+}
+
+/**
+ * @private
+ */
+function initEventHandler() {
+	setTimeout(() => {
+		this[stateButtonElementSymbol].setOption("actions.click", () => {
+			const index = getIndex.call(this);
+
+			if (!isNaN(index)) {
+				this[datasetLinkedElementSymbol].setOption("mapping.index", index);
+				this[overlayLinkedElementSymbol].open();
+			}
+		});
+	}, 1);
+}
+
+/**
+ * @param {Object} options
+ */
+function updateOptionsFromArguments(options) {
+	const selector = this.getAttribute(ATTRIBUTE_DATASOURCE_SELECTOR);
+	if (selector) {
+		options.datasource.selector = selector;
+	}
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+	// 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"></monster-state-button>
+
+        </div>
+    `;
+}
+
+registerCustomElement(ChangeButton);

package/source/components/datatable/dataset.mjs

@@ -3,7 +3,10 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-import { instanceSymbol } from "../../constants.mjs";
+import { instanceSymbol, internalSymbol } from "../../constants.mjs";
+import { Pathfinder } from "../../data/pathfinder.mjs";
+import { getLinkedObjects, hasObjectLink } from "../../dom/attributes.mjs";
+import { customElementUpdaterLinkSymbol } from "../../dom/constants.mjs";
 import {
 	assembleMethodSymbol,
 	CustomElement,
@@ -12,6 +15,7 @@ import {
 } from "../../dom/customelement.mjs";
 import { isString } from "../../types/is.mjs";
 import { Observer } from "../../types/observer.mjs";
+import { clone } from "../../util/clone.mjs";
 import {
 	ATTRIBUTE_DATASOURCE_SELECTOR,
 	ATTRIBUTE_DATATABLE_INDEX,
@@ -22,6 +26,7 @@ import {
 	handleDataSourceChanges,
 	datasourceLinkedElementSymbol,
 } from "./util.mjs";
+import { FormStyleSheet } from "../stylesheet/form.mjs";
 
 export { DataSet };
 
@@ -95,6 +100,11 @@ class DataSet extends CustomElement {
 	 * @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
 	 */
 	get defaults() {
 		const obj = Object.assign({}, super.defaults, {
@@ -111,7 +121,7 @@ class DataSet extends CustomElement {
 				index: 0,
 			},
 
-			data: [],
+			data: {},
 		});
 
 		updateOptionsFromArguments.call(this, obj);
@@ -126,9 +136,70 @@ class DataSet extends CustomElement {
 		return "monster-dataset";
 	}
 
+	write() {;
+
+		return new Promise((resolve, reject) => {
+			if (!this[datasourceLinkedElementSymbol]) {
+				reject(new Error("No datasource"));
+				return;
+			}
+
+			const internalUpdateCloneData = this.getInternalUpdateCloneData();
+			if (!internalUpdateCloneData) {
+				reject(new Error("No update data"));
+				return;
+			}
+
+			const internalData = internalUpdateCloneData?.["data"];
+			if (
+				internalData === undefined ||
+				internalData === null ||
+				internalData === ""
+			) {
+				reject(new Error("No data"));
+				return;
+			}
+
+			setTimeout(() => {
+				const path = this.getOption("mapping.data");
+				const index = this.getOption("mapping.index");
+
+				let pathWithIndex;
+
+				if (isString(path) && path !== "") {
+					pathWithIndex = path + "." + index;
+				} else {
+					pathWithIndex = index;
+				}
+
+				const data = this[datasourceLinkedElementSymbol].data;
+				const unref = JSON.stringify(data);
+				const ref = JSON.parse(unref);
+
+				new Pathfinder(ref).setVia(pathWithIndex, internalData);
+
+				this[datasourceLinkedElementSymbol].data = ref;
+
+				resolve();
+			}, 0);
+		});
+	}
+
 	/**
+	 * 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.
 	 *
-	 * @return {Monster.Components.Form.Form}
+	 * 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]();
@@ -167,7 +238,7 @@ class DataSet extends CustomElement {
 	 * @return [CSSStyleSheet]
 	 */
 	static getCSSStyleSheet() {
-		return [DatasetStyleSheet];
+		return [FormStyleSheet, DatasetStyleSheet];
 	}
 }
 
@@ -185,7 +256,7 @@ function initEventHandler() {
 
 /**
  *
- * @param {Onject} options
+ * @param {Object} options
  */
 function updateOptionsFromArguments(options) {
 	const index = this.getAttribute(ATTRIBUTE_DATATABLE_INDEX);

package/source/components/datatable/datasource/dom.mjs

@@ -46,7 +46,7 @@ class Dom extends Datasource {
 	 * @returns {symbol}
 	 */
 	static get [instanceSymbol]() {
-		return Symbol.for("@schukai/monster/components/datasource/dom");
+		return Symbol.for("@schukai/monster/components/datasource/dom@@instance");
 	}
 
 	/**