From 4b6f4006d90442fc503a8f68e1ce07671794229f Mon Sep 17 00:00:00 2001
From: chris <chris@denkblock.mas>
Date: Fri, 28 Feb 2025 21:59:39 +0100
Subject: [PATCH] MINOR,FEAT: Introduced default parameter "modifier"

---
 src/baseComponents.js |  79 ++++++++++++++-------
 src/builder.js        | 159 ++++++++++++++++++++++++++----------------
 2 files changed, 155 insertions(+), 83 deletions(-)

diff --git a/src/baseComponents.js b/src/baseComponents.js
index 6440022..4a31f06 100644
--- a/src/baseComponents.js
+++ b/src/baseComponents.js
@@ -10,9 +10,18 @@
  * @inheritdoc
  */
 class InputComponent extends Component {
-    constructor(element, attr = {}) {
-        super(element, attr)
-            .addStyleClass("el-input-comp");
+    /**
+     * 
+     * @param {string} element 
+     * @param {Attr} attr 
+     * @param {Modifier} modifier 
+     */
+    constructor(element, attr = {}, modifier = null) {
+        super(element, attr);
+        this.addStyleClass("el-input-comp");
+        if (modifier) {
+            this.modifier(modifier);
+        }
     }
 
     /**
@@ -36,9 +45,17 @@ class InputComponent extends Component {
  * @inheritdoc
  */
 class FlexContainerComponent extends Component {
-    constructor(attr = {}) {
-        super(document.createElement("div"), attr)
-            .addStyleClass("flex-container-component")
+    /**
+     * 
+     * @param {Attr} attr 
+     * @param {Modifier} modifier 
+     */
+    constructor(attr = {}, modifier = null) {
+        super(document.createElement("div"), attr);
+        this.addStyleClass("flex-container-component");
+        if (modifier) {
+            this.modifier(modifier);
+        }
     }
 
     /**
@@ -73,13 +90,18 @@ class FlexContainerComponent extends Component {
  * @inheritdoc
  */
 class Column extends FlexContainerComponent {
-    constructor(attr = {}) {
-        super(attr)
-            .addStyleClass("column-component")
-            .modifier(
-                new Modifier()
-                    .setStyleRule("flex-direction", "column")
-            );
+    /**
+     * 
+     * @param {Attr} attr 
+     * @param {Modifier} modifier 
+     */
+    constructor(attr = {}, modifier = null) {
+        super(attr, modifier);
+        this.addStyleClass("column-component");
+        this.modifier(
+            new Modifier()
+                .setStyleRule("flex-direction", "column")
+        );
     }
 }
 
@@ -89,19 +111,27 @@ class Column extends FlexContainerComponent {
  * @inheritdoc
  */
 class Row extends FlexContainerComponent {
-    constructor(attr = {}) {
-        super(attr)
-            .addStyleClass("row-component")
-            .modifier(
-                new Modifier()
-                    .fillMaxWidth()
-                    .setStyleRule("flex-direction", "row")
-            )
+    /**
+     * 
+     * @param {Attr} attr 
+     * @param {Modifier} modifier 
+     */
+    constructor(attr = {}, modifier = null) {
+        super(attr);
+        this.addStyleClass("row-component")
+        if (modifier) {
+            this.modifier(modifier);
+        }
+        this.modifier(
+            new Modifier()
+                .fillMaxWidth()
+                .setStyleRule("flex-direction", "row")
+        )
     }
 
     /**
      * 
-     * @param {*} innerComponent 
+     * @param {Component|Array<Component>} innerComponent 
      * @returns {Row}
      */
     childContext(innerComponent) {
@@ -123,12 +153,13 @@ class Row extends FlexContainerComponent {
     }
 
     /**
-     * 
+     * @todo - adapt to extStore logic 
+     * @override
      * @returns {Row}
      */
     distibuteSpacingEvenly() {
         this._element.children.forEach(child => {
-            child.style["width"] = ((100-this._element.childElementCount) / innerComponent.length);
+            child.style["width"] = ((100 - this._element.childElementCount) / innerComponent.length);
         })
         return this;
     }
diff --git a/src/builder.js b/src/builder.js
index e602ab8..9ff0962 100644
--- a/src/builder.js
+++ b/src/builder.js
@@ -25,37 +25,50 @@ const builder = {
       * 
       * @param {string} tag 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     genTag: function (tag, attr = {}) { return new Component(document.createElement(tag), attr).addStyleClass(`el-${tag}`); },
+     genTag: function (tag, attr = {}, modifier = null) {
+          let compel = new Component(document.createElement(tag), attr).addStyleClass(`el-${tag}`);
+          if (modifier) {
+               return compel.modifier(modifier);
+          }
+          return compel;
+     },
 
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     anchor: function (attr = {}) { return builder.genTag("a", attr); },
+     anchor: function (attr = {}, modifier = null) { return builder.genTag("a", attr, modifier); },
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     label: function (attr = {}) { return builder.genTag("label", attr); },
+     label: function (attr = {}, modifier = null) { return builder.genTag("label", attr, modifier); },
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     button: function (attr = {}) { return builder.genTag("button", attr); },
+     button: function (attr = {}, modifier = null) { return builder.genTag("button", attr, modifier); },
      /**
       * 
+      * @param {InputTypes|string} type 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     input: function (type, attr = {}) {
+     input: function (type, attr = {}, modifier = null) {
           return new InputComponent(
                document.createElement("input"),
-               Object.assign({ "type": type }, attr)
+               Object.assign({ "type": type }, attr),
+               modifier
           )
                .addStyleClass(`el-input`);
      },
@@ -64,111 +77,125 @@ const builder = {
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Function<Component>}
       */
      inputTags: Object.freeze({
-          button: function (attr = {}) { return builder.input("button", attr) },
-          checkbox: function (attr = {}) { return builder.input("checkbox", attr) },
-          color: function (attr = {}) { return builder.input("color", attr) },
-          date: function (attr = {}) { return builder.input("date", attr) },
-          datetime: function (attr = {}) { return builder.input("datetime", attr) },
-          datetime_local: function (attr = {}) { return builder.input("datetime-local", attr) },
-          email: function (attr = {}) { return builder.input("email", attr) },
-          file: function (attr = {}) { return builder.input("file", attr) },
-          image: function (attr = {}) { return builder.input("image", attr) },
-          month: function (attr = {}) { return builder.input("month", attr) },
-          number: function (attr = {}) { return builder.input("number", attr) },
-          password: function (attr = {}) { return builder.input("password", attr) },
-          radio: function (attr = {}) { return builder.input("radio", attr) },
-          range: function (attr = {}) { return builder.input("range", attr) },
-          reset: function (attr = {}) { return builder.input("reset", attr) },
-          search: function (attr = {}) { return builder.input("search", attr) },
-          submit: function (attr = {}) { return builder.input("submit", attr) },
-          tel: function (attr = {}) { return builder.input("tel", attr) },
-          text: function (attr = {}) { return builder.input("text", attr) },
-          time: function (attr = {}) { return builder.input("time", attr) },
-          url: function (attr = {}) { return builder.input("url", attr) },
-          week: function (attr = {}) { return builder.input("week", attr) }
+          button: function (attr = {}, modifier = null) { return builder.input("button", attr, modifier) },
+          checkbox: function (attr = {}, modifier = null) { return builder.input("checkbox", attr, modifier) },
+          color: function (attr = {}, modifier = null) { return builder.input("color", attr, modifier) },
+          date: function (attr = {}, modifier = null) { return builder.input("date", attr, modifier) },
+          datetime: function (attr = {}, modifier = null) { return builder.input("datetime", attr, modifier) },
+          datetime_local: function (attr = {}, modifier = null) { return builder.input("datetime-local", attr, modifier) },
+          email: function (attr = {}, modifier = null) { return builder.input("email", attr, modifier) },
+          file: function (attr = {}, modifier = null) { return builder.input("file", attr, modifier) },
+          image: function (attr = {}, modifier = null) { return builder.input("image", attr, modifier) },
+          month: function (attr = {}, modifier = null) { return builder.input("month", attr, modifier) },
+          number: function (attr = {}, modifier = null) { return builder.input("number", attr, modifier) },
+          password: function (attr = {}, modifier = null) { return builder.input("password", attr, modifier) },
+          radio: function (attr = {}, modifier = null) { return builder.input("radio", attr, modifier) },
+          range: function (attr = {}, modifier = null) { return builder.input("range", attr, modifier) },
+          reset: function (attr = {}, modifier = null) { return builder.input("reset", attr, modifier) },
+          search: function (attr = {}, modifier = null) { return builder.input("search", attr, modifier) },
+          submit: function (attr = {}, modifier = null) { return builder.input("submit", attr, modifier) },
+          tel: function (attr = {}, modifier = null) { return builder.input("tel", attr, modifier) },
+          text: function (attr = {}, modifier = null) { return builder.input("text", attr, modifier) },
+          time: function (attr = {}, modifier = null) { return builder.input("time", attr, modifier) },
+          url: function (attr = {}, modifier = null) { return builder.input("url", attr, modifier) },
+          week: function (attr = {}, modifier = null) { return builder.input("week", attr, modifier) }
      }),
 
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     div: function (attr = {}) { return builder.genTag("div", attr); },
+     div: function (attr = {}, modifier = null) { return builder.genTag("div", attr, modifier); },
 
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     span: function (attr = {}) { return builder.genTag("span", attr); },
+     span: function (attr = {}, modifier = null) { return builder.genTag("span", attr, modifier); },
 
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     paragraph: function (attr = {}) { return builder.genTag("p", attr); },
+     paragraph: function (attr = {}, modifier = null) { return builder.genTag("p", attr, modifier); },
 
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     header: function (sizeGroup, attr = {}) { return builder.genTag(`h${sizeGroup}`, attr); },
+     header: function (sizeGroup, attr = {}, modifier = null) { return builder.genTag(`h${sizeGroup}`, attr, modifier); },
 
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     checkbox: function (attr = {}) { return builder.input({ "type": "checkbox" }) },
+     checkbox: function (attr = {}, modifier = null) { return builder.input({ "type": "checkbox" }, modifier) },
 
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     select: function (attr = {}) { return builder.genTag("select", attr); },
+     select: function (attr = {}, modifier = null) { return builder.genTag("select", attr, modifier); },
 
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     option: function (attr = {}) { return builder.genTag("option", attr); },
+     option: function (attr = {}, modifier = null) { return builder.genTag("option", attr, modifier); },
 
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     radioBtn: function (attr = {}) { return builder.genTag("radioBtn", attr); },
+     radioBtn: function (attr = {}, modifier = null) { return builder.genTag("radioBtn", attr, modifier); },
 
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     icon: function (attr = {}) { return builder.genTag("icon", attr); },
+     icon: function (attr = {}, modifier = null) { return builder.genTag("icon", attr, modifier); },
+
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     img: function (attr = {}) { return builder.genTag("img", attr); },
+     img: function (attr = {}, modifier = null) { return builder.genTag("img", attr, modifier); },
 
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     textarea: function (attr = {}) {
+     textarea: function (attr = {}, modifier = null) {
           return new InputComponent(
                document.createElement("textarea"),
-               attr
+               attr,
+               modifier
           )
                .addStyleClass(`el-textarea`);
      },
@@ -176,10 +203,11 @@ const builder = {
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     table: function (attr = {}) {
-          return builder.genTag("table", attr)
+     table: function (attr = {}, modifier = null) {
+          return builder.genTag("table", attr, modifier)
                .chainModifier()
                .removeStyleRule("display")
                .toComponent();
@@ -188,38 +216,43 @@ const builder = {
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     tableRow: function (attr = {}) { return builder.genTag("tr", attr); },
+     tableRow: function (attr = {}, modifier = null) { return builder.genTag("tr", attr, modifier); },
 
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     tableCell: function (attr = {}) { return builder.genTag("td", attr); },
+     tableCell: function (attr = {}, modifier = null) { return builder.genTag("td", attr, modifier); },
 
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     tableCaption: function (attr = {}) { return builder.genTag("caption", attr); },
+     tableCaption: function (attr = {}, modifier = null) { return builder.genTag("caption", attr, modifier); },
 
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     tableHeadCell: function (attr = {}) { return builder.genTag("th", attr); },
+     tableHeadCell: function (attr = {}, modifier = null) { return builder.genTag("th", attr, modifier); },
 
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     tableBody: function (attr = {}) {
-          return builder.genTag("tbody", attr)
+     tableBody: function (attr = {}, modifier = null) {
+          return builder.genTag("tbody", attr, modifier)
                .chainModifier()
                .removeStyleRule("display")
                .toComponent();
@@ -228,10 +261,11 @@ const builder = {
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     tableHead: function (attr = {}) {
-          return builder.genTag("thead", attr)
+     tableHead: function (attr = {}, modifier = null) {
+          return builder.genTag("thead", attr, modifier)
                .chainModifier()
                .removeStyleRule("display")
                .toComponent();
@@ -240,10 +274,11 @@ const builder = {
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     tableFooter: function (attr = {}) {
-          return builder.genTag("tfoot", attr)
+     tableFooter: function (attr = {}, modifier = null) {
+          return builder.genTag("tfoot", attr, modifier)
                .chainModifier()
                .removeStyleRule("display")
                .toComponent();
@@ -252,17 +287,19 @@ const builder = {
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     iframe: function (attr = {}) { return builder.genTag("iframe", attr) },
+     iframe: function (attr = {}, modifier = null) { return builder.genTag("iframe", attr, modifier) },
 
      /**
       * 
       * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Component}
       */
-     form: function (attr = {}) {
-          return builder.genTag("form", attr)
+     form: function (attr = {}, modifier = null) {
+          return builder.genTag("form", attr, modifier)
                .addStyleClass("flex-container-component")
                .chainModifier()
                .setStyleRule("flex-direction", "column")
@@ -272,17 +309,21 @@ const builder = {
 
      /**
       * 
-      * @param {*} attr 
+      * 
+      * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Row}
       */
-     row: function (attr = {}) { return new Row(attr) },
+     row: function (attr = {}, modifier = null) { return new Row(attr, modifier) },
 
      /**
       * 
-      * @param {*} attr 
+      * 
+      * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
       * @returns {Column}
       */
-     column: function (attr = {}) { return new Column(attr) },
+     column: function (attr = {}, modifier = null) { return new Column(attr, modifier) },
 
      /**
       *