@schukai/monster 3.68.4 → 3.69.0

package/CHANGELOG.md

@@ -2,36 +2,24 @@
 
 
 
+## [3.69.0] - 2024-06-23
+
+### Add Features
+
+- new field-set control [#186](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/186)
+
 ## [3.68.4] - 2024-06-23
 
 ### Bug Fixes
 
 - if the query is empty but astring, getSlottedElements must not report an error [#208](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/208)
 
-
-
 ## [3.68.3] - 2024-06-23
 
 ### Bug Fixes
 
 - working on ci pipeline
 
-
-
-## [3.68.2] - 2024-06-23
-
-### Bug Fixes
-
-- gitlab pipeline
-
-
-
-## [3.68.1] - 2024-06-23
-
-### Bug Fixes
-
-- wip pipeline
-
 ## [3.68.0] - 2024-06-23
 
 ### Add Features

package/package.json

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

package/source/components/datatable/filter.mjs

@@ -234,11 +234,10 @@ class Filter extends CustomElement {
 			formatter: {
 				marker: {
 					open: null,
-					close: null
-				}
+					close: null,
+				},
 			},
 			labels: {
-
 				search: "Search",
 				reset: "Reset",
 				save: "Save",
@@ -1013,7 +1012,10 @@ function collectSearchQueries() {
 				});
 
 				if (self.getOption("formatter.marker.open")) {
-					formatter.setMarker(self.getOption("formatter.marker.open"),self.getOption("formatter.marker.close"));
+					formatter.setMarker(
+						self.getOption("formatter.marker.open"),
+						self.getOption("formatter.marker.close"),
+					);
 				}
 
 				let queryPart = formatter.format(template);

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

@@ -12,25 +12,24 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-import {instanceSymbol} from "../../constants.mjs";
-import {addAttributeToken} from "../../dom/attributes.mjs";
+import { instanceSymbol } from "../../constants.mjs";
+import { addAttributeToken } from "../../dom/attributes.mjs";
 import {
-    ATTRIBUTE_ERRORMESSAGE,
-    ATTRIBUTE_ROLE,
+	ATTRIBUTE_ERRORMESSAGE,
+	ATTRIBUTE_ROLE,
 } from "../../dom/constants.mjs";
-import {CustomControl} from "../../dom/customcontrol.mjs";
+import { CustomControl } from "../../dom/customcontrol.mjs";
 import {
-    assembleMethodSymbol,
-    registerCustomElement,
+	assembleMethodSymbol,
+	getSlottedElements,
+	registerCustomElement,
 } from "../../dom/customelement.mjs";
-import {findTargetElementFromEvent} from "../../dom/events.mjs";
-import {isFunction} from "../../types/is.mjs";
-import {FieldSetStyleSheet} from "./stylesheet/field-set.mjs";
-import {fireCustomEvent} from "../../dom/events.mjs";
+import { isFunction } from "../../types/is.mjs";
+import { FieldSetStyleSheet } from "./stylesheet/field-set.mjs";
 import "../layout/collapse.mjs";
-import {ToggleSwitch} from "./toggle-switch.mjs";
+import "./toggle-switch.mjs";
 
-export {FieldSet};
+export { FieldSet };
 
 /**
  * @private
@@ -44,6 +43,18 @@ const fieldSetElementSymbol = Symbol("fieldSetElement");
  */
 const collapseElementSymbol = Symbol("collapseElement");
 
+/**
+ * @private
+ * @type {symbol}
+ */
+const extendedSwitchSymbol = Symbol("extendedSwitch");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const headerElementSymbol = Symbol("headerElement");
+
 /**
  * @private
  * @type {symbol}
@@ -90,174 +101,179 @@ const extendedSwitchElementSymbol = Symbol("extendedSwitchElement");
  * @summary A simple FieldSet
  */
 class FieldSet extends CustomControl {
-    /**
-     * This method is called by the `instanceof` operator.
-     * @returns {symbol}
-     */
-    static get [instanceSymbol]() {
-        return Symbol.for("@schukai/monster/components/form/fieldset@@instance");
-    }
-
-    /**
-     *
-     * @return {Components.Form.FieldSet
-     */
-    [assembleMethodSymbol]() {
-        super[assembleMethodSymbol]();
-        initControlReferences.call(this);
-        initEventHandler.call(this);
-        updateExtendedFields.call(this);
-        return this;
-    }
-
-    /**
-     * 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} labels Label definitions
-     * @property {Object} actions Callbacks
-     * @property {string} actions.click="throw Error" Callback when clicked
-     * @property {Object} features Features
-     * @property {Object} classes CSS classes
-     * @property {boolean} disabled=false Disabled state
-     */
-    get defaults() {
-        return Object.assign({}, super.defaults, {
-            templates: {
-                main: getTemplate(),
-            },
-            labels: {},
-            classes: {},
-            disabled: false,
-            features: {},
-            actions: {
-                click: () => {
-                    throw new Error("the click action is not defined");
-                },
-            },
-            value: null,
-        });
-    }
-
-    /**
-     *
-     * @return {string}
-     */
-    static getTag() {
-        return "monster-field-set";
-    }
-
-    /**
-     *
-     * @return {CSSStyleSheet[]}
-     */
-    static getCSSStyleSheet() {
-        return [FieldSetStyleSheet];
-    }
-
-    /**
-     * The FieldSet.click() method simulates a click on the internal element.
-     *
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click}
-     */
-    click() {
-        if (this.getOption("disabled") === true) {
-            return;
-        }
-
-        if (
-            this[fieldSetElementSymbol] &&
-            isFunction(this[fieldSetElementSymbol].click)
-        ) {
-            this[fieldSetElementSymbol].click();
-        }
-    }
-
-    /**
-     * The Button.focus() method sets focus on the internal element.
-     *
-     * @param {Object} options
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus}
-     */
-    focus(options) {
-        if (this.getOption("disabled") === true) {
-            return;
-        }
-
-        if (
-            this[fieldSetElementSymbol] &&
-            isFunction(this[fieldSetElementSymbol].focus)
-        ) {
-            this[fieldSetElementSymbol].focus(options);
-        }
-    }
-
-    /**
-     * The Button.blur() method removes focus from the internal element.
-     */
-    blur() {
-        if (
-            this[fieldSetElementSymbol] &&
-            isFunction(this[fieldSetElementSymbol].blur)
-        ) {
-            this[fieldSetElementSymbol].blur();
-        }
-    }
-
-    /**
-     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals}
-     * @return {boolean}
-     */
-    static get formAssociated() {
-        return true;
-    }
-
-    /**
-     * The current value of the form control.
-     *
-     * ```js
-     * e = document.querySelector('monster-field-set');
-     * console.log(e.value)
-     * ```
-     *
-     * @property {string}
-     */
-    get value() {
-        return this.getOption("value");
-    }
-
-    /**
-     * Set value of the form control.
-     *
-     * ```
-     * e = document.querySelector('monster-field-set');
-     * e.value=1
-     * ```
-     *
-     * @property {string} value
-     * @throws {Error} unsupported type
-     */
-    set value(value) {
-        this.setOption("value", value);
-        try {
-            this?.setFormValue(this.value);
-        } catch (e) {
-            addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
-        }
-    }
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @returns {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/monster/components/form/fieldset@@instance");
+	}
+
+	/**
+	 * @return {Components.Form.FieldSet
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+		initControlReferences.call(this);
+		initEventHandler.call(this);
+		updateExtendedFields.call(this);
+		return this;
+	}
+
+	/**
+	 * 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} labels Label definitions
+	 * @property {Object} actions Callbacks
+	 * @property {string} actions.click="throw Error" Callback when clicked
+	 * @property {Object} features Features
+	 * @property {Object} classes CSS classes
+	 * @property {boolean} disabled=false Disabled state
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+			labels: {
+				"toggle-switch-on": "✔",
+				"toggle-switch-off": "✖",
+				"toggle-switch-label": "Expand",
+				title: "",
+			},
+			classes: {},
+			disabled: false,
+			features: {},
+			actions: {
+				click: () => {
+					throw new Error("the click action is not defined");
+				},
+			},
+			value: null,
+		});
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-field-set";
+	}
+
+	/**
+	 *
+	 * @return {CSSStyleSheet[]}
+	 */
+	static getCSSStyleSheet() {
+		return [FieldSetStyleSheet];
+	}
+
+	/**
+	 * The FieldSet.click() method simulates a click on the internal element.
+	 *
+	 * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click}
+	 */
+	click() {
+		if (this.getOption("disabled") === true) {
+			return;
+		}
+
+		if (
+			this[fieldSetElementSymbol] &&
+			isFunction(this[fieldSetElementSymbol].click)
+		) {
+			this[fieldSetElementSymbol].click();
+		}
+	}
+
+	/**
+	 * The Button.focus() method sets focus on the internal element.
+	 *
+	 * @param {Object} options
+	 * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus}
+	 */
+	focus(options) {
+		if (this.getOption("disabled") === true) {
+			return;
+		}
+
+		if (
+			this[fieldSetElementSymbol] &&
+			isFunction(this[fieldSetElementSymbol].focus)
+		) {
+			this[fieldSetElementSymbol].focus(options);
+		}
+	}
+
+	/**
+	 * The Button.blur() method removes focus from the internal element.
+	 */
+	blur() {
+		if (
+			this[fieldSetElementSymbol] &&
+			isFunction(this[fieldSetElementSymbol].blur)
+		) {
+			this[fieldSetElementSymbol].blur();
+		}
+	}
+
+	/**
+	 * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals}
+	 * @return {boolean}
+	 */
+	static get formAssociated() {
+		return true;
+	}
+
+	/**
+	 * The current value of the form control.
+	 *
+	 * ```js
+	 * e = document.querySelector('monster-field-set');
+	 * console.log(e.value)
+	 * ```
+	 *
+	 * @property {string}
+	 */
+	get value() {
+		return this.getOption("value");
+	}
+
+	/**
+	 * Set value of the form control.
+	 *
+	 * ```
+	 * e = document.querySelector('monster-field-set');
+	 * e.value=1
+	 * ```
+	 *
+	 * @property {string} value
+	 * @throws {Error} unsupported type
+	 */
+	set value(value) {
+		this.setOption("value", value);
+		try {
+			this?.setFormValue(this.value);
+		} catch (e) {
+			addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
+		}
+	}
 }
 
 function updateExtendedFields() {
-    //  check if slot has extended fields
-    getSlottedElements.call(this, "", "extended").forEach((node) => {
-        if (node.hasAttribute(ATTRIBUTE_EXTENDED)) {
-            this.hasExtended = true;
-        }
-    })
+	const nodes = getSlottedElements.call(this, "", "extended");
+	console.log(nodes.size);
+	if (nodes.size > 0) {
+		this[extendedSwitchSymbol].classList.remove("hidden");
+	} else {
+		this[extendedSwitchSymbol].classList.add("hidden");
+	}
 }
 
 /**
@@ -266,78 +282,53 @@ function updateExtendedFields() {
  * @fires Monster.Components.Form.event:monster-field-set-clicked
  */
 function initEventHandler() {
-    // const self = this;
-    // const element = this[fieldSetElementSymbol];
-    //
-    // const type = "click";
-
-    // element.addEventListener(type, function (event) {
-    // 	const callback = self.getOption("actions.click");
-    //
-    // 	fireCustomEvent(self, "monster-field-set-clicked", {
-    // 		element: self,
-    // 	});
-    //
-    // 	if (!isFunction(callback)) {
-    // 		return;
-    // 	}
-    //
-    // 	const element = findTargetElementFromEvent(
-    // 		event,
-    // 		ATTRIBUTE_ROLE,
-    // 		"control",
-    // 	);
-    //
-    // 	if (!(element instanceof Node && self.hasNode(element))) {
-    // 		return;
-    // 	}
-    //
-    // 	callback.call(self, event);
-    // });
-
-
-    this[toggleSwitchElementSymbol].setOption("actions.on",  () => {
-        console.log( this[collapseElementSymbol],"!!!")
-        this[collapseElementSymbol].open();
-    });
-
-    this[toggleSwitchElementSymbol].setOption("actions.off",  () => {
-        this[collapseElementSymbol].close();
-    });
-    
-    // this[extendedSwitchElementSymbol].addEventListener(type, function (event) {
-    //     const element = findTargetElementFromEvent(
-    //         event,
-    //         ATTRIBUTE_ROLE,
-    //         "extended-switch",
-    //     );
-    //
-    //
-    //
-    // })
-
-    return this;
+	this[toggleSwitchElementSymbol].setOption(
+		"labels.toggle-switch-on",
+		this.getOption("labels.toggle-switch-on"),
+	);
+	this[toggleSwitchElementSymbol].setOption(
+		"labels.toggle-switch-off",
+		this.getOption("labels.toggle-switch-off"),
+	);
+
+	this[toggleSwitchElementSymbol].setOption("actions.on", () => {
+		this[collapseElementSymbol].open();
+	});
+
+	this[toggleSwitchElementSymbol].setOption("actions.off", () => {
+		this[collapseElementSymbol].close();
+	});
+
+	return this;
 }
 
 /**
  * @private
  */
 function initControlReferences() {
-    this[fieldSetElementSymbol] = this.shadowRoot.querySelector(
-        `[${ATTRIBUTE_ROLE}="control"]`,
-    );
+	this[fieldSetElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}="control"]`,
+	);
+
+	this[extendedSwitchElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}="extended-switch"]`,
+	);
+
+	this[collapseElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}="collapse"]`,
+	);
 
-    this[extendedSwitchElementSymbol] = this.shadowRoot.querySelector(
-        `[${ATTRIBUTE_ROLE}="extended-switch"]`,
-    );
+	this[headerElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}="header"]`,
+	);
 
-    this[collapseElementSymbol] = this.shadowRoot.querySelector(
-        `[${ATTRIBUTE_ROLE}="collapse"]`,
-    );
+	this[extendedSwitchSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}="extended-switch"]`,
+	);
 
-    this[toggleSwitchElementSymbol] = this.shadowRoot.querySelector(
-        `monster-toggle-switch`,
-    );
+	this[toggleSwitchElementSymbol] = this.shadowRoot.querySelector(
+		`monster-toggle-switch`,
+	);
 }
 
 /**
@@ -345,14 +336,20 @@ function initControlReferences() {
  * @return {string}
  */
 function getTemplate() {
-    // language=HTML
-    return `
+	// language=HTML
+	return `
         <div data-monster-role="control" part="control">
             <div data-monster-role="header">
-                <monster-toggle-switch class="hidden"></monster-toggle-switch>
+                <div data-monster-replace="path:labels.title" data-monster-role="title"></div>
+                <div data-monster-role="extended-switch">
+                    <label data-monster-replace="path:labels.toggle-switch-label"></label>
+                    <monster-toggle-switch></monster-toggle-switch>
+                </div>
             </div>
             <div>
-                <slot></slot>
+                <div class="collapse-alignment">
+                    <slot></slot>
+                </div>
                 <monster-collapse data-monster-role="collapse">
                     <slot name="extended"></slot>
                 </monster-collapse>

package/source/components/form/style/field-set.pcss

@@ -1,3 +1,5 @@
+@import "../../style/color.pcss";
+@import "../../style/theme.pcss";
 @import "../../style/display.pcss";
 @import "../../style/border.pcss";
 @import "../../style/control.pcss";
@@ -9,12 +11,34 @@
 @import "../../style/floating-ui.pcss";
 
 [data-monster-role=control] {
-      
+
+   & .collapse-alignment {
+      padding: 0 1rem;
+   }
+
+
 } 
 
 
 [data-monster-role=header] {
    display: flex;
    align-items: center;
-   justify-content: flex-end;    
+   justify-content: space-between; 
+   border-bottom: var(--monster-border-width) var(--monster-border-style) var(--monster-color-primary-1);
+   margin-bottom: 1rem;
+   padding-bottom: 0.2rem;
+   
+   & label {
+      padding-right: 0.3rem;
+   }
+   
+   & [data-monster-role=extended-switch] {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+   }
+   
+   & [data-monster-role=title] {
+      font-weight: bold;
+   }
 }