@schukai/monster 3.76.0 → 3.77.0

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 
 
+## [3.77.0] - 2024-10-03
+
+### Add Features
+
+- multipleColumns [#242](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/242)
+### Changes
+
+- doc and code tidy
+- update documentaion
+
+
+
 ## [3.76.0] - 2024-10-01
 
 ### Add Features

package/package.json

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

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

@@ -97,7 +97,7 @@ class ChangeButton extends CustomElement {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/datatable/columnbar.mjs

@@ -103,7 +103,7 @@ class ColumnBar extends CustomElement {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/datatable/dataset.mjs

@@ -100,7 +100,7 @@ class DataSet extends CustomElement {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

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

@@ -59,7 +59,7 @@ class Dom extends Datasource {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

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

@@ -100,7 +100,7 @@ class Rest extends Datasource {
 	}
 
 	/**
-     * To set the options via the html tag the attribute `data-monster-options` must be used.
+     * 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.

package/source/components/datatable/datasource.mjs

@@ -65,7 +65,7 @@ class Datasource extends CustomElement {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/datatable/datatable.mjs

@@ -153,7 +153,7 @@ class DataTable extends CustomElement {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/datatable/filter/date-range.mjs

@@ -185,7 +185,7 @@ class DateRange extends AbstractBase {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/datatable/filter/input.mjs

@@ -82,7 +82,7 @@ class Input extends AbstractBase {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/datatable/filter/range.mjs

@@ -155,7 +155,7 @@ class Range extends AbstractBase {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/datatable/filter/select.mjs

@@ -38,7 +38,7 @@ import { FilterSelectStyleSheet } from "../stylesheet/filter-select.mjs";
  */
 class FilterSelect extends Select {
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

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

@@ -70,7 +70,7 @@ class FilterButton extends ToggleButton {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/datatable/filter.mjs

@@ -207,7 +207,7 @@ class Filter extends CustomElement {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/datatable/pagination.mjs

@@ -100,7 +100,7 @@ class Pagination extends CustomElement {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

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

@@ -70,7 +70,7 @@ class SaveButton extends CustomElement {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/datatable/status.mjs

@@ -95,7 +95,7 @@ class DatasourceStatus extends CustomElement {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/form/action-button.mjs

@@ -97,7 +97,7 @@ class ActionButton extends PopperButton {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/form/api-button.mjs

@@ -108,7 +108,7 @@ class ApiButton extends ActionButton {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/form/button-bar.mjs

@@ -180,7 +180,7 @@ class ButtonBar extends CustomElement {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/form/button.mjs

@@ -179,7 +179,7 @@ class Button extends CustomControl {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/form/confirm-button.mjs

@@ -114,7 +114,7 @@ class ConfirmButton extends PopperButton {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/form/context-error.mjs

@@ -104,7 +104,7 @@ class ContextError extends Popper {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.
@@ -228,7 +228,7 @@ class ContextError extends Popper {
 	}
 
 	/**
-	 * Returns the html tag of the control.
+	 * Returns the HTML Tag of the control.
 	 *
 	 * @return {string}
 	 */

package/source/components/form/context-help.mjs

@@ -79,7 +79,7 @@ class ContextHelp extends Popper {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

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

@@ -67,39 +67,6 @@ const toggleSwitchElementSymbol = Symbol("toggleSwitchElement");
  */
 const extendedSwitchElementSymbol = Symbol("extendedSwitchElement");
 
-/**
- * This CustomControl creates a FieldSet element with a variety of options.
- *
- * <img src="./images/field-set.png">
- *
- * You can create this control either by specifying the HTML tag <monster-field-set />` directly in the HTML or using
- * Javascript via the `document.createElement('monster-field-set');` method.
- *
- * ```html
- * <monster-field-set></monster-field-set>
- * ```
- *
- * Or you can create this CustomControl directly in Javascript:
- *
- * ```js
- * import {FieldSet} from '@schukai/monster/source/components/form/field-set.mjs';
- * document.createElement('monster-field-set');
- * ```
- *
- * @externalExample ../..../example/components/form/field-set.mjs
- * @startuml field-set.png
- * skinparam monochrome true
- * skinparam shadowing false
- * HTMLElement <|-- CustomElement
- * CustomElement <|-- CustomControl
- * CustomControl <|-- FieldSet
- * @enduml
- *
- * @copyright schukai GmbH
- * @memberOf Monster.Components.Form
- * @summary A simple FieldSet
- */
-
 /**
  * A field set control that can be used to group form elements.
  *
@@ -128,11 +95,12 @@ class FieldSet extends CustomControl {
 		initControlReferences.call(this);
 		initEventHandler.call(this);
 		updateExtendedFields.call(this);
+		updateColumns.call(this);
 		return this;
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.
@@ -143,6 +111,7 @@ class FieldSet extends CustomControl {
 	 * @property {Object} actions Callbacks
 	 * @property {string} actions.click="throw Error" Callback when clicked
 	 * @property {Object} features Features
+	 * @property {boolean} features.multipleColumns=true Multiple columns
 	 * @property {Object} classes CSS classes
 	 * @property {boolean} disabled=false Disabled state
 	 */
@@ -152,14 +121,16 @@ class FieldSet extends CustomControl {
 				main: getTemplate(),
 			},
 			labels: {
-				"toggle-switch-on": "✔",
-				"toggle-switch-off": "✖",
-				"toggle-switch-label": "Expand",
+				toggleSwitchOn: "✔",
+				toggleSwitchOff: "✖",
+				toggleSwitchLabel: "Expand",
 				title: "",
 			},
 			classes: {},
 			disabled: false,
-			features: {},
+			features: {
+				multipleColumns: true,
+			},
 			actions: {
 				click: () => {
 					throw new Error("the click action is not defined");
@@ -257,7 +228,7 @@ class FieldSet extends CustomControl {
 	}
 
 	/**
-	 * Set value of the form control.
+	 * Set the value of the form control.
 	 *
 	 * ```
 	 * e = document.querySelector('monster-field-set');
@@ -277,6 +248,9 @@ class FieldSet extends CustomControl {
 	}
 }
 
+/**
+ * @private
+ */
 function updateExtendedFields() {
 	const nodes = getSlottedElements.call(this, "", "extended");
 	if (nodes.size > 0) {
@@ -286,19 +260,32 @@ function updateExtendedFields() {
 	}
 }
 
+/**
+ * @private
+ */
+function updateColumns() {
+	if (this.getOption("features.multipleColumns") !== true) {
+		this[fieldSetElementSymbol].classList.remove("multiple-columns");
+		return;
+	}
+	
+	this[fieldSetElementSymbol].classList.add("multiple-columns");
+	
+}
+
 /**
  * @private
  * @return {initEventHandler}
- * @fires Monster.Components.Form.event:monster-field-set-clicked
+ * @fires event:monster-field-set-clicked
  */
 function initEventHandler() {
 	this[toggleSwitchElementSymbol].setOption(
-		"labels.toggle-switch-on",
-		this.getOption("labels.toggle-switch-on"),
+		"labels.toggleSwitchOn",
+		this.getOption("labels.toggleSwitchOn"),
 	);
 	this[toggleSwitchElementSymbol].setOption(
-		"labels.toggle-switch-off",
-		this.getOption("labels.toggle-switch-off"),
+		"labels.toggleSwitchOff",
+		this.getOption("labels.toggleSwitchOff"),
 	);
 
 	this[toggleSwitchElementSymbol].setOption("actions.on", () => {

package/source/components/form/message-state-button.mjs

@@ -123,7 +123,7 @@ class MessageStateButton extends Popper {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/form/popper-button.mjs

@@ -154,7 +154,7 @@ class PopperButton extends Popper {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/form/reload.mjs

@@ -128,7 +128,7 @@ class Reload extends CustomElement {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/form/select.mjs

@@ -347,7 +347,7 @@ class Select extends CustomControl {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/form/shadow-reload.mjs

@@ -40,7 +40,7 @@ class ShadowReload extends Reload {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

package/source/components/form/state-button.mjs

@@ -46,7 +46,7 @@ class StateButton extends Button {
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.