@schukai/monster 3.51.5 → 3.52.1

package/CHANGELOG.md

@@ -1,4 +1,28 @@
 
+## [3.52.1] - 2023-11-05
+
+### Bug Fixes
+
+- only 10 tabs can be activated [#129](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/129)
+- fix some css bugs [#128](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/128)
+
+## [3.52.0] - 2023-11-03
+
+### Add Features
+
+- integrate components, test, example and code [#127](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/127)
+- integrate components in monster [#127](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/127)
+### Changes
+
+- release and publish to npm new version 3.52.0
+- documentation
+- update documentation
+- add aws doc update to tasks [#126](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/126)
+- code tidy and update web test
+- code lint
+- lint and format
+- code tidy
+
 ## [3.51.5] - 2023-11-01
 
 ### Bug Fixes
@@ -6,6 +30,7 @@
 - release process
 ### Changes
 
+- release and publish to npm new version 3.51.5
 - restore devDependencies
 - update release process
 - conversion of the repos to nix packagemanger [#125](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/125)

package/README.md

@@ -1,18 +1,21 @@
 # Monster
 
-Monster is perfectly suited for the creation of beautiful and fast  
-user interfaces and websites.
+Monster is an ideal choice for building visually appealing and high-performance web interfaces 
+and websites using modern JavaScript web development techniques.
 
-Monster relies on proven concepts mixed with many new JavaScript concepts such as 
-classes, WeakRef, WeakMaps, proxies or the MutationObserver interface, just to name a few.
+Leveraging cutting-edge JavaScript features such as classes, WeakRef, WeakMaps, proxies, 
+and the MutationObserver interface, Monster offers a blend of tried-and-true methods and 
+innovative web components.
 
-Monster integrates easily into your existing websites without taking over everything.
+Designed for seamless integration, Monster complements your existing web projects 
+without dominating the entire architecture.
 
-It is not the goal of Monster to pull in an entirely new abstraction
-with its own language, but to combine the existing techniques of HTML,  
-CSS and JavaScript in a meaningful way.
+Unlike solutions that introduce a whole new layer of abstraction and proprietary 
+languages, Monster focuses on enhancing the native capabilities of HTML, CSS, and 
+JavaScript for web development.
 
-One design target is to reach the shiny sun with as little JavaScript as possible.
+With a design objective to optimize performance and achieve stellar outcomes, 
+Monster aims to accomplish this using minimal JavaScript code.
 
 Monster was built with ES6 modules and uses [import](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/import)  
 and [export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export).
@@ -21,7 +24,7 @@ For some functions, you need additional [polyfills](#polyfill).
 
 ## Documentation
 
-To check out docs and examples, visit [monsterjs.org/en/doc/monster/](https://monsterjs.org/en/doc/monster/).
+To check out docs and examples, visit [monsterjs.org/en/doc/monster/](https://monsterjs.org/en/api/).
 
 ## Installation
 
@@ -73,7 +76,7 @@ We do try to work around some browser bugs, but on the whole we don't use polyfi
 However, many functions can be mapped via [polyfill.io](https://polyfill.io/) and thus the compatibility can be increased.
 
 ```html
-<script id="polyfill" src="https://polyfill.io/v3/polyfill.min.js?features=Array.from,Array.isArray,Array.prototype.entries,Array.prototype.fill,Array.prototype.filter,Array.prototype.forEach,Array.prototype.includes,Array.prototype.indexOf,Array.prototype.keys,Array.prototype.lastIndexOf,Array.prototype.map,Array.prototype.reduce,Array.prototype.sort,ArrayBuffer,atob,Blob,CustomEvent,DataView,document,Document,DocumentFragment,Element,Event,fetch,globalThis,HTMLDocument,HTMLTemplateElement,Intl,JSON,Map,Math.log2,MutationObserver,Number.isInteger,Object.assign,Object.defineProperty,Object.entries,Object.freeze,Object.getOwnPropertyDescriptor,Object.getOwnPropertyNames,Object.getPrototypeOf,Object.keys,Promise,Reflect,Reflect.defineProperty,Reflect.get,Reflect.getOwnPropertyDescriptor,Reflect.setPrototypeOf,Set,String.prototype.endsWith,String.prototype.includes,String.prototype.matchAll,String.prototype.padStart,String.prototype.startsWith,String.prototype.trim,Symbol,Symbol.for,Symbol.hasInstance,Symbol.iterator,Uint16Array,Uint8Array,URL,WeakMap,WeakSet"
+<script id="polyfill" src="https://polyfill.io/v3/polyfill.min.js?features=Array.from,Array.isArray,Array.prototype.entries,Array.prototype.every,Array.prototype.fill,Array.prototype.filter,Array.prototype.find,Array.prototype.forEach,Array.prototype.includes,Array.prototype.indexOf,Array.prototype.keys,Array.prototype.lastIndexOf,Array.prototype.map,Array.prototype.reduce,Array.prototype.some,Array.prototype.sort,Array.prototype.values,ArrayBuffer,atob,Blob,console,CustomEvent,DataView,Date.prototype.toISOString,document,Document,DocumentFragment,Element,Event,fetch,Function.prototype.bind,getComputedStyle,globalThis,HTMLDocument,HTMLTemplateElement,IntersectionObserver,Intl,JSON,Map,Math.log2,MutationObserver,Number.isFinite,Number.isInteger,Object.assign,Object.defineProperty,Object.entries,Object.freeze,Object.getOwnPropertyDescriptor,Object.getOwnPropertyNames,Object.getPrototypeOf,Object.keys,Promise,Reflect,Reflect.defineProperty,Reflect.get,Reflect.getOwnPropertyDescriptor,Reflect.setPrototypeOf,requestAnimationFrame,ResizeObserver,Set,String.prototype.endsWith,String.prototype.includes,String.prototype.matchAll,String.prototype.padStart,String.prototype.startsWith,String.prototype.trim,Symbol,Symbol.for,Symbol.hasInstance,Symbol.iterator,Uint16Array,Uint8Array,URL,WeakMap,WeakSet"
        crossorigin="anonymous"
        referrerpolicy="no-referrer"></script>
 ```
@@ -99,4 +102,4 @@ You can also purchase a commercial license.
 ## Changelog
 
 Detailed changes for each release are documented in
-the [CHANGELOG](https://gitlab.schukai.com/oss/libraries/javascript/monster/-/blob/master/application/CHANGELOG).
+the [CHANGELOG](https://gitlab.schukai.com/oss/libraries/javascript/monster/-/blob/master/application/CHANGELOG.md).

package/example/components/form/button.mjs

@@ -0,0 +1,10 @@
+import {Button} from '@schukai/component-form/source/button.js';
+
+const button = document.createElement('monster-button');
+// set label
+button.setOption('labels.button', 'Click')
+// add action for click
+button.setOption('actions.click', function (e) {
+    console.log(e);
+})
+document.body.appendChild(button)

package/example/components/form/select.mjs

@@ -0,0 +1,25 @@
+import {Select} from '@schukai/component-form/source/select.js';
+
+const select = document.createElement('monster-select');
+select.setOption('mapping.labelTemplate', '${name} (${alpha-2})')
+select.setOption('mapping.valueTemplate', '${country-code}')
+select.importOptions([
+    {
+        "name": "United Kingdom",
+        "alpha-2": "GB",
+        "country-code": "826",
+    },
+    {
+        "name": "Sweden",
+        "alpha-2": "SE",
+        "country-code": "752",
+
+    },
+    {
+        "name": "Germany",
+        "alpha-2": "DE",
+        "country-code": "276",
+    }
+]);
+
+document.body.appendChild(select);

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

@@ -0,0 +1,27 @@
+import {TreeSelect} from '@schukai/component-form/source/tree-select.mjs';
+
+const treeSelect = document.createElement('monster-tree-select');
+treeSelect.setOption('mapping.valueTemplate', '${name} (${alpha-2})')
+treeSelect.setOption('mapping.labelTemplate', '${country-code}')
+treeSelect.importOptions([
+    {
+        "name": "United Kingdom",
+        "alpha-2": "GB",
+        "country-code": "826",
+        "parent": undefined
+    },
+    {
+        "name": "Sweden",
+        "alpha-2": "SE",
+        "country-code": "752",
+        "parent": undefined
+    },
+    {
+        "name": "Germany",
+        "alpha-2": "DE",
+        "country-code": "276",
+        "parent": undefined
+    }
+]);
+
+document.body.appendChild(treeSelect);

package/example/components/notify/message.mjs

@@ -0,0 +1,4 @@
+import {Notify} from '@schukai/component-notify/source/message.js';
+
+const notify = document.createElement('monster-notify');
+document.body.appendChild(notify);

package/example/components/notify/notify.mjs

@@ -0,0 +1,4 @@
+import {Notify} from '@schukai/component-notify/source/notify.mjs';
+
+const notify = document.createElement('monster-notify');
+document.body.appendChild(notify);

package/example/data/datasource/server/restapi.mjs

@@ -5,7 +5,13 @@ const ds = new RestAPI({
         url: 'https://httpbin.org/get'    
     },
     read: {
-        url: 'https://httpbin.org/get'
+        url: 'https://httpbin.org/get',
+        init: {
+            method: "GET",
+            headers: {
+                "Accept": "application/json",
+            },
+        },        
     }
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schukai/monster",
-  "version": "3.51.5",
+  "version": "3.52.1",
   "description": "Monster is a simple library for creating fast, robust and lightweight websites.",
   "keywords": [
     "framework",
@@ -38,5 +38,9 @@
     "url": "https://gitlab.schukai.com/oss/libraries/javascript/monster.git"
   },
   "author": "schukai GmbH",
-  "license": "AGPL 3.0"
+  "license": "AGPL 3.0",
+  "dependencies": {
+    "@floating-ui/dom": "^1.5.3",
+    "@popperjs/core": "^2.11.8"
+  }
 }

package/source/components/constants.mjs

@@ -0,0 +1,132 @@
+/**
+ * Copyright schukai GmbH and contributors 2022. All Rights Reserved.
+ * Node module: @schukai/monster
+ * 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";
+
+/**
+ * `data-monster-intend`
+ *
+ * @memberOf Monster.Components
+ * @since 1.8.0
+ * @type {string}
+ */
+const ATTRIBUTE_INTEND = ATTRIBUTE_PREFIX + "intend";
+
+export { ATTRIBUTE_INTEND };
+
+/**
+ * @memberOf Monster.Components
+ * @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
+ * @type {string}
+ */
+const ATTRIBUTE_DATASOURCE = `${ATTRIBUTE_PREFIX}datasource`;
+
+/**
+ * @memberOf Monster.Components
+ * @type {string}
+ */
+const ATTRIBUTE_DATASOURCE_SELECTOR = `${ATTRIBUTE_DATASOURCE}-selector`;
+
+/**
+ * @memberOf Monster.Components
+ * @type {string}
+ */
+const ATTRIBUTE_DATATABLE_GRID_TEMPLATE = `${ATTRIBUTE_PREFIX}grid-template`;
+
+/**
+ * @memberOf Monster.Components
+ * @type {string}
+ */
+const ATTRIBUTE_DATATABLE_HEAD = `${ATTRIBUTE_PREFIX}head`;
+
+/**
+ * @memberOf Monster.Components
+ * @type {string}
+ */
+const ATTRIBUTE_DATATABLE_ALIGN = `${ATTRIBUTE_PREFIX}align`;
+
+/**
+ * @memberOf Monster.Components
+ * @type {string}
+ */
+const ATTRIBUTE_DATATABLE_SORTABLE = `${ATTRIBUTE_PREFIX}sortable`;
+
+/**
+ * @memberOf Monster.Components
+ * @type {string}
+ */
+const ATTRIBUTE_DATATABLE_INDEX = `${ATTRIBUTE_PREFIX}index`;
+
+/**
+ * @memberOf Monster.Components
+ * @type {string}
+ */
+const ATTRIBUTE_DATATABLE_MODE = `${ATTRIBUTE_PREFIX}mode`;
+
+/**
+ * @memberOf Monster.Components
+ * @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
+ * @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
+ * @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/columnbar.mjs

@@ -0,0 +1,310 @@
+/**
+ * Copyright 2023 schukai GmbH
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+import { instanceSymbol } from "../../constants.mjs";
+import {
+	assembleMethodSymbol,
+	CustomElement,
+	registerCustomElement,
+} from "../../dom/customelement.mjs";
+import { findTargetElementFromEvent } from "../../dom/events.mjs";
+import { clone } from "../../util/clone.mjs";
+import { ColumnBarStyleSheet } from "./stylesheet/column-bar.mjs";
+import { createPopper } from "@popperjs/core";
+
+export { ColumnBar };
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const settingsButtonElementSymbol = Symbol("settingButtonElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const settingsButtonEventHandlerSymbol = Symbol("settingsButtonEventHandler");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const settingsLayerElementSymbol = Symbol("settingsLayerElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const dotsContainerElementSymbol = Symbol("dotsContainerElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const popperInstanceSymbol = Symbol("popperInstance");
+
+/**
+ * The ColumnBar component is used to show and configure the columns of a datatable.
+ *
+ * <img src="./images/column-bar.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-column-bar />` directly in the HTML or using
+ * Javascript via the `document.createElement('monster-column-bar');` method.
+ *
+ * ```html
+ * <monster-column-bar></monster-column-bar>
+ * ```
+ *
+ * Or you can create this CustomControl directly in Javascript:
+ *
+ * ```js
+ * import '@schukai/component-datatable/source/columnbar.mjs';
+ * document.createElement('monster-column-bar');
+ * ```
+ *
+ * The Body should have a class "hidden" to ensure that the styles are applied correctly.
+ *
+ * ```css
+ * body.hidden {
+ *    visibility: hidden;
+ * }
+ * ```
+ *
+ * @startuml column-bar.png
+ * skinparam monochrome true
+ * skinparam shadowing false
+ * HTMLElement <|-- CustomElement
+ * CustomElement <|-- ColumnBar
+ * @enduml
+ *
+ * @copyright schukai GmbH
+ * @memberOf Monster.Components.Datatable
+ * @summary A data set
+ */
+class ColumnBar extends CustomElement {
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @returns {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/monster/components/column-bar");
+	}
+
+	/**
+	 * 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 {boolean} autoLoad If true, the datasource is called immediately after the control is created.
+	 */
+	get defaults() {
+		const obj = Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+			locale: {
+				settings: "Settings",
+			},
+
+			columns: [],
+		});
+
+		return obj;
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-column-bar";
+	}
+
+	/**
+	 *
+	 * @return {Monster.Components.Form.Form}
+	 */
+	[assembleMethodSymbol]() {;
+		super[assembleMethodSymbol]();
+
+		initControlReferences.call(this);
+		initEventHandler.call(this);
+	}
+
+	/**
+	 * @return {Array<ColumnBarStyleSheet>}
+	 */
+	static getCSSStyleSheet() {
+		return [ColumnBarStyleSheet];
+	}
+}
+
+/**
+ * @private
+ * @return {Monster.Components.Datatable.Form}
+ */
+function initControlReferences() {;
+
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
+
+	this[settingsButtonElementSymbol] = this.shadowRoot.querySelector(
+		"[data-monster-role=settings-button]",
+	);
+	this[settingsLayerElementSymbol] = this.shadowRoot.querySelector(
+		"[data-monster-role=settings-layer]",
+	);
+	this[dotsContainerElementSymbol] = this.shadowRoot.querySelector(
+		"[data-monster-role=dots]",
+	);
+	return this;
+}
+
+/**
+ * @private
+ */
+function initEventHandler() {
+	const self = this;
+
+	self[popperInstanceSymbol] = createPopper(
+		self[settingsButtonElementSymbol],
+		self[settingsLayerElementSymbol],
+		{
+			placement: "auto",
+
+			modifiers: [
+				{
+					name: "offset",
+					options: {
+						offset: [10, 10],
+					},
+				},
+			],
+		},
+	);
+
+	self[dotsContainerElementSymbol].addEventListener("click", function (event) {
+		const element = findTargetElementFromEvent(
+			event,
+			"data-monster-role",
+			"column",
+		);
+		if (element) {
+			const index = element.getAttribute("data-monster-index");
+			event.preventDefault();
+
+			const columns = clone(self.getOption("columns"));
+
+			const column = columns.find((col) => {
+				return parseInt(col.index) === parseInt(index);
+			});
+
+			column.visible = !column.visible;
+			self.setOption("columns", columns);
+		}
+	});
+
+	self[settingsButtonEventHandlerSymbol] = (event) => {
+		const clickTarget = event.composedPath()?.[0];
+		if (
+			self[settingsLayerElementSymbol] === clickTarget ||
+			self[settingsLayerElementSymbol].contains(clickTarget)
+		) {
+			return;
+		}
+		self[settingsLayerElementSymbol].classList.remove("visible");
+		document.body.removeEventListener(
+			"click",
+			self[settingsButtonEventHandlerSymbol],
+		);
+	};
+
+	self[settingsButtonElementSymbol].addEventListener("click", function (event) {
+		const element = findTargetElementFromEvent(
+			event,
+			"data-monster-role",
+			"settings-button",
+		);
+
+		if (element) {
+			self[settingsLayerElementSymbol].classList.toggle("visible");
+			event.preventDefault();
+
+			if (self[settingsLayerElementSymbol].classList.contains("visible")) {
+				self[popperInstanceSymbol].update();
+
+				setTimeout(() => {
+					document.body.addEventListener(
+						"click",
+						self[settingsButtonEventHandlerSymbol],
+					);
+				}, 0);
+			}
+		}
+	});
+
+	self[settingsLayerElementSymbol].addEventListener("change", function (event) {
+		const control = event.target;
+		const index = control.getAttribute("data-monster-index");
+
+		const columns = clone(self.getOption("columns"));
+
+		const column = columns.find((col) => {
+			return parseInt(col.index) === parseInt(index);
+		});
+
+		column.visible = control.checked;
+		self.setOption("columns", columns);
+	});
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+	// language=HTML
+	return `
+        <template id="column">
+            <div data-monster-role="column">
+                <label><input type="checkbox" data-monster-attributes="
+                data-monster-index path:column.index,
+                checked path:column.visible | ?:checked:"><span
+                data-monster-replace="path:column.name"
+                ></span></label>
+            </div>
+        </template>
+        <template id="dots">
+            <li data-monster-insert="">
+                <a href="#" data-monster-role="column"
+                   data-monster-attributes="
+                   class path:dots.visible | ?:is-hidden:is-visible,
+                   title path:dots.name,
+                     data-monster-index path:dots.index">
+                </a>
+            </li>
+        </template>
+
+        <div data-monster-role="control" part="control" data-monster-select-this="true" data-monster-attributes="class path:columns | has-entries | ?::hidden">
+            <ul data-monster-insert="dots path:columns" 
+                data-monster-role="dots"></ul>
+            <a href="#" data-monster-role="settings-button" data-monster-replace="path:locale.settings">Settings</a>
+            <div data-monster-role="settings-layer">
+                <div data-monster-insert="column path:columns" data-monster-role="settings-popup-list">
+                </div>
+            </div>
+        </div>
+    `;
+}
+
+registerCustomElement(ColumnBar);