@schukai/monster 3.64.1 → 3.65.0

package/CHANGELOG.md

@@ -1,4 +1,22 @@
 
+## [3.65.0] - 2024-04-15
+
+### Add Features
+
+- new toc control finished [#189](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/189)
+- new toc component [#189](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/189)
+- new toc component [#189](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/189)
+- new toc component [#188](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/188)
+- new component field-set [#186](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/186)
+### Changes
+
+- documetation script
+- wip showroom
+- update build scripts [#186](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/186)
+### Code Refactoring
+
+- move popper to layout namespace [#190](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/190) [#189](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/189)
+
 ## [3.64.1] - 2024-04-07
 
 ### Bug Fixes
@@ -6,6 +24,7 @@
 - monster.mjs
 ### Changes
 
+- release and publish to npm new version 3.64.1
 - update license text
 - fix import statements
 - add showroot files

package/example/components/form/button.mjs

@@ -1,4 +1,4 @@
-import {Button} from '@schukai/component-form/source/button.js';
+import {Button} from '@schukai/monster/source/components/form/button.js';
 
 const button = document.createElement('monster-button');
 // set label

package/example/components/form/field-set.mjs

@@ -0,0 +1,4 @@
+import "@schukai/monster/source/components/form/field-set.mjs";
+const element = document.createElement('monster-field-set');
+element.setOption('disable', 'false')
+document.body.appendChild(element);

package/example/components/form/select.mjs

@@ -1,4 +1,4 @@
-import {Select} from '@schukai/component-form/source/select.js';
+import '@schukai/component-form/source/select.js';
 
 const select = document.createElement('monster-select');
 select.setOption('mapping.labelTemplate', '${name} (${alpha-2})')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schukai/monster",
-  "version": "3.64.1",
+  "version": "3.65.0",
   "description": "Monster is a simple library for creating fast, robust and lightweight websites.",
   "keywords": [
     "framework",
@@ -42,6 +42,7 @@
   "dependencies": {
     "@floating-ui/dom": "^1.6.3",
     "@popperjs/core": "^2.11.8",
+    "estraverse": "^5.3.0",
     "vite-plugin-directory-index": "^3.0.1"
   }
 }

package/source/components/datatable/datatable/header.mjs

@@ -1,24 +1,31 @@
 /**
- * Copyright 2023 schukai GmbH
- * SPDX-License-Identifier: AGPL-3.0
+ * Copyright © schukai GmbH and all contributing authors, {{copyRightYear}}. All rights reserved.
+ * Node module: @schukai/monster
+ *
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
+ *
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
+ * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
+ * For more information about purchasing a commercial license, please contact schukai GmbH.
  */
 
-import { Base } from "../../../types/base.mjs";
-import { equipWithInternal } from "../../../types/internal.mjs";
-import { instanceSymbol } from "../../../constants.mjs";
-import { Observer } from "../../../types/observer.mjs";
-import { ATTRIBUTE_DATATABLE_SORTABLE } from "../../constants.mjs";
+import {Base} from "../../../types/base.mjs";
+import {equipWithInternal} from "../../../types/internal.mjs";
+import {instanceSymbol} from "../../../constants.mjs";
+import {Observer} from "../../../types/observer.mjs";
+import {ATTRIBUTE_DATATABLE_SORTABLE} from "../../constants.mjs";
 import {
-	validateIterable,
-	validateInstance,
+    validateIterable,
+    validateInstance,
 } from "../../../types/validate.mjs";
 
 export {
-	Header,
-	DIRECTION_ASC,
-	DIRECTION_DESC,
-	DIRECTION_NONE,
-	createOrderStatement,
+    Header,
+    DIRECTION_ASC,
+    DIRECTION_DESC,
+    DIRECTION_NONE,
+    createOrderStatement,
 };
 
 /**
@@ -36,7 +43,7 @@ const DIRECTION_ASC = "asc";
 const DIRECTION_DESC = "desc";
 
 /**
- * no direction and no order  statement
+ * no direction and no order statement
  *
  * @private
  * @type {string}
@@ -51,178 +58,178 @@ const DIRECTION_NONE = "";
  * @summary A datatable
  */
 class Header extends Base {
-	constructor() {
-		super();
-
-		/**
-		 * - attachInternalObserver
-		 * - detachInternalObserver
-		 * - containsInternalObserver
-		 * - setInternal
-		 * - setInternals
-		 * - getInternal
-		 */
-		equipWithInternal.call(this);
-
-		this.attachInternalObserver(
-			new Observer(() => {
-				updateStruct.call(this);
-			}),
-		);
-	}
-
-	/**
-	 * This method is called by the `instanceof` operator.
-	 * @returns {symbol}
-	 */
-	static get [instanceSymbol]() {
-		return Symbol.for("@schukai/monster/components/datatable/header");
-	}
-
-	/**
-	 *
-	 * @returns {object}
-	 */
-	get internalDefaults() {
-		return {
-			field: undefined,
-			html: undefined,
-			order: undefined,
-			direction: undefined,
-			label: undefined,
-			labelKey: undefined,
-			classes: undefined,
-			index: undefined,
-			mode: undefined,
-			grid: undefined,
-		};
-	}
-
-	changeDirection() {
-		let direction = this.getInternal("direction");
-		if (direction === DIRECTION_ASC) {
-			direction = DIRECTION_DESC;
-		} else if (direction === DIRECTION_DESC) {
-			direction = DIRECTION_NONE;
-		} else {
-			direction = DIRECTION_ASC;
-		}
-		this.setInternal("direction", direction);
-	}
-
-	/**
-	 *
-	 * @param direction
-	 */
-	setDirection(direction) {
-		this.setInternal("direction", direction);
-	}
-
-	/**
-	 * @param {string} field
-	 */
-	set field(field) {
-		this.setInternal("field", String(field));
-	}
-
-	/**
-	 * @param {string} direction
-	 */
-	set direction(direction) {
-		this.setInternal("direction", String(direction));
-	}
-
-	set labelKey(labelKey) {
-		this.setInternal("labelKey", String(labelKey));
-	}
-
-	/**
-	 * @param {string} label
-	 */
-	set label(label) {
-		this.setInternal("label", String(label));
-	}
-
-	/**
-	 * @param {string} classes
-	 */
-	set classes(classes) {
-		this.setInternal("classes", String(classes));
-	}
-
-	/**
-	 * @param {number} index
-	 */
-	set index(index) {
-		this.setInternal("index", String(index));
-	}
-
-	/**
-	 * @param {string} grid
-	 */
-	get grid() {
-		return this.getInternal("grid");
-	}
-
-	/**
-	 * @returns {string}
-	 */
-	get labelKey() {
-		return this.getInternal("labelKey");
-	}
-
-	/**
-	 * @returns {string}
-	 */
-	get html() {
-		return this.getInternal("html");
-	}
-
-	get order() {
-		return this.getInternal("order");
-	}
-
-	/**
-	 * @returns {string}
-	 */
-	get field() {
-		return this.getInternal("field");
-	}
-
-	/**
-	 * @returns {string}
-	 */
-	get index() {
-		return this.getInternal("index");
-	}
-
-	/**
-	 * @returns {string}
-	 */
-	get classes() {
-		return this.getInternal("classes");
-	}
-
-	/**
-	 * @returns {string}
-	 */
-	get label() {
-		return this.getInternal("label");
-	}
-
-	/**
-	 * @returns {string}
-	 */
-	get direction() {
-		return this.getInternal("direction");
-	}
-
-	/**
-	 * @returns {string}
-	 */
-	get mode() {
-		return this.getInternal("mode");
-	}
+    constructor() {
+        super();
+
+        /**
+         * - attachInternalObserver
+         * - detachInternalObserver
+         * - containsInternalObserver
+         * - setInternal
+         * - setInternals
+         * - getInternal
+         */
+        equipWithInternal.call(this);
+
+        this.attachInternalObserver(
+            new Observer(() => {
+                updateStruct.call(this);
+            }),
+        );
+    }
+
+    /**
+     * This method is called by the `instanceof` operator.
+     * @returns {symbol}
+     */
+    static get [instanceSymbol]() {
+        return Symbol.for("@schukai/monster/components/datatable/header@@instance");
+    }
+
+    /**
+     *
+     * @returns {object}
+     */
+    get internalDefaults() {
+        return {
+            field: undefined,
+            html: undefined,
+            order: undefined,
+            direction: undefined,
+            label: undefined,
+            labelKey: undefined,
+            classes: undefined,
+            index: undefined,
+            mode: undefined,
+            grid: undefined,
+        };
+    }
+
+    changeDirection() {
+        let direction = this.getInternal("direction");
+        if (direction === DIRECTION_ASC) {
+            direction = DIRECTION_DESC;
+        } else if (direction === DIRECTION_DESC) {
+            direction = DIRECTION_NONE;
+        } else {
+            direction = DIRECTION_ASC;
+        }
+        this.setInternal("direction", direction);
+    }
+
+    /**
+     *
+     * @param direction
+     */
+    setDirection(direction) {
+        this.setInternal("direction", direction);
+    }
+
+    /**
+     * @param {string} field
+     */
+    set field(field) {
+        this.setInternal("field", String(field));
+    }
+
+    /**
+     * @param {string} direction
+     */
+    set direction(direction) {
+        this.setInternal("direction", String(direction));
+    }
+
+    set labelKey(labelKey) {
+        this.setInternal("labelKey", String(labelKey));
+    }
+
+    /**
+     * @param {string} label
+     */
+    set label(label) {
+        this.setInternal("label", String(label));
+    }
+
+    /**
+     * @param {string} classes
+     */
+    set classes(classes) {
+        this.setInternal("classes", String(classes));
+    }
+
+    /**
+     * @param {number} index
+     */
+    set index(index) {
+        this.setInternal("index", String(index));
+    }
+
+    /**
+     * @param {string} grid
+     */
+    get grid() {
+        return this.getInternal("grid");
+    }
+
+    /**
+     * @returns {string}
+     */
+    get labelKey() {
+        return this.getInternal("labelKey");
+    }
+
+    /**
+     * @returns {string}
+     */
+    get html() {
+        return this.getInternal("html");
+    }
+
+    get order() {
+        return this.getInternal("order");
+    }
+
+    /**
+     * @returns {string}
+     */
+    get field() {
+        return this.getInternal("field");
+    }
+
+    /**
+     * @returns {string}
+     */
+    get index() {
+        return this.getInternal("index");
+    }
+
+    /**
+     * @returns {string}
+     */
+    get classes() {
+        return this.getInternal("classes");
+    }
+
+    /**
+     * @returns {string}
+     */
+    get label() {
+        return this.getInternal("label");
+    }
+
+    /**
+     * @returns {string}
+     */
+    get direction() {
+        return this.getInternal("direction");
+    }
+
+    /**
+     * @returns {string}
+     */
+    get mode() {
+        return this.getInternal("mode");
+    }
 }
 
 /**
@@ -231,44 +238,44 @@ class Header extends Base {
  * @returns {string}
  */
 function createOrderStatement(headers) {
-	validateIterable(headers);
-
-	const oderStatement = [];
-	for (const header of headers) {
-		validateInstance(header, Header);
-		const order = header.getInternal("order");
-
-		if (!order) {
-			continue;
-		}
-		oderStatement.push(order);
-	}
-	return oderStatement.join(",");
+    validateIterable(headers);
+
+    const oderStatement = [];
+    for (const header of headers) {
+        validateInstance(header, Header);
+        const order = header.getInternal("order");
+
+        if (!order) {
+            continue;
+        }
+        oderStatement.push(order);
+    }
+    return oderStatement.join(",");
 }
 
 /**
  * @private
  */
 function updateStruct() {
-	const label = this.getInternal("label");
-	const direction = this.getInternal("direction");
-	const field = this.getInternal("field");
-
-	let order = "";
-
-	if (!field) {
-		this.setInternal("order", order);
-		this.setInternal("html", label);
-		return;
-	}
-
-	if (direction) {
-		order = `${field} ${direction}`.trim();
-	}
-
-	this.setInternal("order", order);
-	this.setInternal(
-		"html",
-		`<a href="#" ${ATTRIBUTE_DATATABLE_SORTABLE}="${order}">${label}</a>`,
-	);
+    const label = this.getInternal("label");
+    const direction = this.getInternal("direction");
+    const field = this.getInternal("field");
+
+    let order = "";
+
+    if (!field) {
+        this.setInternal("order", order);
+        this.setInternal("html", label);
+        return;
+    }
+
+    if (direction) {
+        order = `${field} ${direction}`.trim();
+    }
+
+    this.setInternal("order", order);
+    this.setInternal(
+        "html",
+        `<a href="#" ${ATTRIBUTE_DATATABLE_SORTABLE}="${order}">${label}</a>`,
+    );
 }

package/source/components/datatable/style/dataset.pcss

@@ -10,5 +10,6 @@
 @import "../../style/badge.pcss";
 @import "../../style/icons.pcss";
 @import "../../style/link.pcss";
+@import "../../style/skeleton.pcss";
 
 

package/source/components/datatable/style/datatable.pcss

@@ -15,6 +15,7 @@
 @import "../../style/mixin/hover.pcss";
 @import "../../style/mixin/media.pcss";
 @import "../../style/theme.pcss";
+@import "../../style/skeleton.pcss";
 
 [data-monster-role="control"] {
     display: flex;