@schukai/monster 3.51.5 → 3.52.0

package/source/components/datatable/constants.mjs

@@ -0,0 +1,121 @@
+/**
+ * Copyright schukai GmbH and contributors 2022. All Rights Reserved.
+ * Node module: @schukai/component-form
+ * This file is licensed under the AGPLv3 License.
+ * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
+ */
+
+import { ATTRIBUTE_PREFIX } from "../../dom/constants.mjs";
+
+/**
+ * @memberOf Monster.Components.Form
+ * @since 1.0.0
+ * @type {string}
+ */
+const STYLE_DISPLAY_MODE_BLOCK = "block";
+
+/**
+ * This attribute `data-monster-datasource` can be used to pass a datasource.
+ *
+ * @memberOf Monster.Components.Datatable
+ * @type {string}
+ */
+const ATTRIBUTE_DATASOURCE = `${ATTRIBUTE_PREFIX}datasource`;
+
+/**
+ * @memberOf Monster.Components.Datatable
+ * @type {string}
+ */
+const ATTRIBUTE_DATASOURCE_SELECTOR = `${ATTRIBUTE_DATASOURCE}-selector`;
+
+/**
+ * @memberOf Monster.Components.Datatable
+ * @type {string}
+ */
+const ATTRIBUTE_DATATABLE_GRID_TEMPLATE = `${ATTRIBUTE_PREFIX}grid-template`;
+
+/**
+ * @memberOf Monster.Components.Datatable
+ * @type {string}
+ */
+const ATTRIBUTE_DATATABLE_HEAD = `${ATTRIBUTE_PREFIX}head`;
+
+/**
+ * @memberOf Monster.Components.Datatable
+ * @type {string}
+ */
+const ATTRIBUTE_DATATABLE_ALIGN = `${ATTRIBUTE_PREFIX}align`;
+
+/**
+ * @memberOf Monster.Components.Datatable
+ * @type {string}
+ */
+const ATTRIBUTE_DATATABLE_SORTABLE = `${ATTRIBUTE_PREFIX}sortable`;
+
+/**
+ * @memberOf Monster.Components.Datatable
+ * @type {string}
+ */
+const ATTRIBUTE_DATATABLE_INDEX = `${ATTRIBUTE_PREFIX}index`;
+
+/**
+ * @memberOf Monster.Components.Datatable
+ * @type {string}
+ */
+const ATTRIBUTE_DATATABLE_MODE = `${ATTRIBUTE_PREFIX}mode`;
+
+/**
+ * @memberOf Monster.Components.Datatable
+ * @type {string}
+ */
+const ATTRIBUTE_DATATABLE_RESPONSIVE_BREAKPOINT = `${ATTRIBUTE_PREFIX}responsive-breakpoint`;
+
+/**
+ * This attribute `data-monster-datasource-arguments` can be used to pass arguments.
+ *
+ * @memberOf Monster.Components.Datatable
+ * @type {string}
+ */
+const ATTRIBUTE_DATASOURCE_ARGUMENTS = `${ATTRIBUTE_DATASOURCE}-arguments`;
+
+/**
+ * Column is not hideable and visible
+ *
+ * @private
+ * @type {string}
+ */
+const ATTRIBUTE_DATATABLE_MODE_FIXED = "fixed";
+
+/**
+ * Column is hidden
+ *
+ * @private
+ * @type {string}
+ */
+const ATTRIBUTE_DATATABLE_MODE_HIDDEN = "hidden";
+
+/**
+ * Column is visible
+ *
+ * @private
+ * @memberOf Monster.Components.Datatable
+ * @type {string}
+ */
+const ATTRIBUTE_DATATABLE_MODE_VISIBLE = "visible";
+
+export {
+	ATTRIBUTE_DATASOURCE,
+	ATTRIBUTE_DATASOURCE_SELECTOR,
+	ATTRIBUTE_DATASOURCE_ARGUMENTS,
+	ATTRIBUTE_DATATABLE_GRID_TEMPLATE,
+	ATTRIBUTE_DATATABLE_HEAD,
+	ATTRIBUTE_DATATABLE_SORTABLE,
+	ATTRIBUTE_DATATABLE_MODE,
+	ATTRIBUTE_DATATABLE_INDEX,
+	ATTRIBUTE_DATATABLE_ALIGN,
+	ATTRIBUTE_DATATABLE_MODE_FIXED,
+	ATTRIBUTE_DATATABLE_RESPONSIVE_BREAKPOINT,
+	ATTRIBUTE_DATATABLE_MODE_VISIBLE,
+	ATTRIBUTE_DATATABLE_MODE_HIDDEN,
+	STYLE_DISPLAY_MODE_BLOCK,
+};

package/source/components/datatable/dataset.mjs

@@ -0,0 +1,219 @@
+/**
+ * Copyright 2023 schukai GmbH
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+import { instanceSymbol } from "../../constants.mjs";
+import {
+	assembleMethodSymbol,
+	CustomElement,
+	attributeObserverSymbol,
+	registerCustomElement,
+} from "../../dom/customelement.mjs";
+import { isString } from "../../types/is.mjs";
+import { Observer } from "../../types/observer.mjs";
+import {
+	ATTRIBUTE_DATASOURCE_SELECTOR,
+	ATTRIBUTE_DATATABLE_INDEX,
+} from "./constants.mjs";
+import { Datasource } from "./datasource.mjs";
+import { DatasetStyleSheet } from "./stylesheet/dataset.mjs";
+import {
+	handleDataSourceChanges,
+	datasourceLinkedElementSymbol,
+} from "./util.mjs";
+
+export { DataSet };
+
+/**
+ * The data set component is used to show the data of a data source.
+ *
+ * <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.
+ *
+ * ```html
+ * <monster-dataset></monster-dataset>
+ * ```
+ *
+ * Or you can create this CustomControl directly in Javascript:
+ *
+ * ```js
+ * import '@schukai/component-datatable/source/dataset.mjs';
+ * document.createElement('monster-dataset');
+ * ```
+ *
+ * The Body should have a class "hidden" to ensure that the styles are applied correctly.
+ *
+ * ```css
+ * body.hidden {
+ *    visibility: hidden;
+ * }
+ * ```
+ *
+ * @startuml dataset.png
+ * skinparam monochrome true
+ * skinparam shadowing false
+ * HTMLElement <|-- CustomElement
+ * CustomElement <|-- DataSet
+ * @enduml
+ *
+ * @copyright schukai GmbH
+ * @memberOf Monster.Components.Datatable
+ * @summary A data set
+ */
+class DataSet extends CustomElement {
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @returns {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/monster/components/dataset@@instance");
+	}
+
+	/**
+	 * This method determines which attributes are to be monitored by `attributeChangedCallback()`.
+	 *
+	 * @return {string[]}
+	 * @since 1.15.0
+	 */
+	static get observedAttributes() {
+		const attributes = super.observedAttributes;
+		attributes.push(ATTRIBUTE_DATATABLE_INDEX);
+		return attributes;
+	}
+
+	/**
+	 * 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
+	 */
+	get defaults() {
+		const obj = Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+
+			datasource: {
+				selector: null,
+			},
+
+			mapping: {
+				data: "dataset",
+				index: 0,
+			},
+
+			data: [],
+		});
+
+		updateOptionsFromArguments.call(this, obj);
+		return obj;
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-dataset";
+	}
+
+	/**
+	 *
+	 * @return {Monster.Components.Form.Form}
+	 */
+	[assembleMethodSymbol]() {;
+		super[assembleMethodSymbol]();
+
+		// initControlReferences.call(self);
+		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)),
+			);
+		}
+
+		this.attachObserver(
+			new Observer(() => {
+				handleDataSourceChanges.call(this);
+			}),
+		);
+	}
+
+	/**
+	 *
+	 * @return [CSSStyleSheet]
+	 */
+	static getCSSStyleSheet() {
+		return [DatasetStyleSheet];
+	}
+}
+
+/**
+ * @private
+ */
+function initEventHandler() {;
+
+	this[attributeObserverSymbol][ATTRIBUTE_DATATABLE_INDEX] = () => {
+		const index = this.getAttribute(ATTRIBUTE_DATATABLE_INDEX);
+		if (index) {
+			this.setOption("mapping.index", parseInt(index, 10));
+		}
+	};
+}
+
+/**
+ *
+ * @param {Onject} options
+ */
+function updateOptionsFromArguments(options) {;
+
+	const index = this.getAttribute(ATTRIBUTE_DATATABLE_INDEX);
+
+	if (index !== null && index !== undefined) {
+		options.mapping.index = parseInt(index, 10);
+	}
+
+	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">
+            <slot></slot>
+        </div>
+    `;
+}
+
+registerCustomElement(DataSet);

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

@@ -0,0 +1,186 @@
+/**
+ * Copyright 2023 schukai GmbH
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+import { Datasource, dataSourceSymbol } from "../datasource.mjs";
+import { DatasourceStyleSheet } from "../stylesheet/datasource.mjs";
+import { instanceSymbol } from "../../../constants.mjs";
+import {
+	assembleMethodSymbol,
+	registerCustomElement,
+	getSlottedElements,
+} from "../../../dom/customelement.mjs";
+import { isArray } from "../../../types/is.mjs";
+
+export { Dom };
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const dataChangeEventHandlerSymbol = Symbol("dataChangeEventHandler");
+
+/**
+ * The Datasource component is a basic class for the datatable component.
+ *
+ * <img src="./images/dom.png">
+ *
+ * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library
+ *
+ * @startuml dom.png
+ * skinparam monochrome true
+ * skinparam shadowing false
+ * HTMLElement <|-- CustomElement
+ * CustomElement <|-- Datasource
+ * Datasource <|-- Dom
+ * @enduml
+ *
+ * @copyright schukai GmbH
+ * @memberOf Monster.Components.Datatable.Datasource
+ * @summary A dom datasource
+ */
+class Dom extends Datasource {
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @returns {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/monster/components/datasource/dom");
+	}
+
+	/**
+	 * 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
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+
+			features: {
+				autoInit: true,
+			},
+		});
+	}
+
+	/**
+	 *
+	 * @return {Monster.Components.Form.Form}
+	 */
+	[assembleMethodSymbol]() {;
+		super[assembleMethodSymbol]();
+		initEventHandler.call(this);
+		updateDataSource.call(this);
+	}
+
+	/**
+	 *
+	 * @return {CSSStyleSheet[]}
+	 */
+	static getCSSStyleSheet() {
+		return [DatasourceStyleSheet];
+	}
+
+	/**
+	 * @private
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-datasource-dom";
+	}
+
+	/**
+	 * Reloads the data
+	 * @returns {Promise<never>|*}
+	 */
+	reload() {;
+	}
+
+	connectedCallback() {
+		super.connectedCallback();;
+
+		if (this.getOption("features.autoInit")) {
+			updateDataSource.call(this);
+		}
+	}
+}
+
+/**
+ * @private
+ */
+function initEventHandler() {;
+
+	/**
+	 * @param {Event} event
+	 */
+	this[dataChangeEventHandlerSymbol] = (event) => {
+		updateDataSource.call(this);
+	};
+
+	new MutationObserver(this[dataChangeEventHandlerSymbol]).observe(this, {
+		childList: true,
+		subtree: true,
+		characterData: true,
+	});
+}
+
+/**
+ * @private
+ */
+function updateDataSource() {;
+
+	let data = null;
+	getSlottedElements.call(this).forEach((element) => {
+		if (!(element instanceof HTMLScriptElement)) {
+			return;
+		}
+		if (element.type !== "application/json") {
+			return;
+		}
+
+		const d = JSON.parse(element.textContent);
+		if (data === null) {
+			if (isArray(d)) {
+				data = [];
+			} else {
+				data = {};
+			}
+		}
+
+		if (isArray(data) && !isArray(d)) {
+			throw new Error("Type mismatch");
+		}
+
+		if (!isArray(data) && isArray(d)) {
+			throw new Error("Type mismatch");
+		}
+
+		if (isArray(data)) {
+			data.push(...d);
+			return;
+		}
+
+		data = Object.assign({}, d);
+	});
+
+	this.datasource.set(data);
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+	// language=HTML
+	return `
+        <slot data-monster-role="datasource"></slot>`;
+}
+
+registerCustomElement(Dom);

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

@@ -0,0 +1,13 @@
+/**
+ * Copyright 2023 schukai GmbH
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+/**
+ * Namespace for all datatable related functions.
+ *
+ * @namespace Monster.Components.Datatable.Datasource
+ * @memberOf Monster
+ * @author schukai GmbH
+ */
+const ns = {};