MINOR,FEAT: minor improvements on FlexContainerComponent-logic

src/baseComponents.js

@@ -35,6 +35,25 @@ class InputComponent extends Component {
         }
         return this;
     }
+
+    /**
+     * Sets the value of the InputComponent
+     * @param {string} Value 
+     * @returns {InputComponent|Component}
+     */
+    value(value) {
+        this._element.value = value;
+        return this;
+    }
+
+    /**
+     * 
+     * @param {string} name 
+     * @returns {InputComponent|Component}
+     */
+    name(name) {
+        return this.setAttribute("name", name);
+    }
 }
 
 
@@ -45,19 +64,39 @@ class InputComponent extends Component {
  * @inheritdoc
  */
 class FlexContainerComponent extends Component {
+    /**
+     * @type {boolean}
+     */
+    #distributeEvenglyAfterGenerate;
     /**
      * 
      * @param {Attr} attr 
      * @param {Modifier} modifier 
      */
-    constructor(attr = {}, modifier = null) {
+    constructor(attr = {}, modifier = null, baseElement="div") {
-        super(document.createElement("div"), attr);
+        super(document.createElement(baseElement), attr);
+        this.#distributeEvenglyAfterGenerate = false;
         this.addStyleClass("flex-container-component");
         if (modifier) {
             this.modifier(modifier);
         }
     }
 
+    /**
+     * 
+     * @param {boolean} [vertical=true] 
+     * @returns {FlexContainerComponent}
+     */
+    setFlexDirection(vertical = true) {
+        return this.modifier(
+            new Modifier()
+                .setStyleRule(
+                    "flex-direction",
+                    (vertical ? "column" : "row")
+                )
+        )
+    }
+
     /**
      * 
      * @param {Component|Array<Component>} innerComponent 
@@ -88,7 +127,7 @@ class FlexContainerComponent extends Component {
      * @returns {FlexContainerComponent}
      */
     distibuteSpacingEvenly() {
-        console.log("Doing nothing Flexcontainer doesn't know how to distribute spacing evenly - ask the children (Row, Column)");
+        this.#distributeEvenglyAfterGenerate = true;
         return this;
     }
 }
@@ -107,24 +146,22 @@ class Column extends FlexContainerComponent {
     constructor(attr = {}, modifier = null) {
         super(attr, modifier);
         this.addStyleClass("column-component");
-        this.modifier(
+        this.setFlexDirection();
-            new Modifier()
-                .setStyleRule("flex-direction", "column")
-        );
     }
 
     /**
-     * @todo - adapt to extStore logic 
      * @override
-     * @returns {Column}
+     * @inheritdoc
+     * @extends Component.generate()
      */
-    distibuteSpacingEvenly() {
+    generate() {
-        this._element.children.forEach(child => {
+        if (this.distributeEvenglyAfterGenerate) {
-            child.style["height"] = ((100 - this._element.childElementCount) / innerComponent.length);
+            this._element.children.forEach(child => {
-        })
+                child.style["height"] = ((100 - this._element.childElementCount) / innerComponent.length);
-        return this;
+            })
+        }
+        return super.generate();
     }
-
 }
 
 /**
@@ -140,16 +177,10 @@ class Row extends FlexContainerComponent {
      * @param {Modifier} modifier 
      */
     constructor(attr = {}, modifier = null) {
-        super(attr);
+        super(attr, modifier);
         this.addStyleClass("row-component")
-        if (modifier) {
+        this.modifier(new Modifier().fillMaxWidth());
-            this.modifier(modifier);
+        this.setFlexDirection(false);
-        }
-        this.modifier(
-            new Modifier()
-                .fillMaxWidth()
-                .setStyleRule("flex-direction", "row")
-        )
     }
 
     /**
@@ -176,15 +207,17 @@ class Row extends FlexContainerComponent {
     }
 
     /**
-     * @todo - adapt to extStore logic 
      * @override
-     * @returns {Row}
+     * @inheritdoc
+     * @extends Component.generate()
      */
-    distibuteSpacingEvenly() {
+    generate() {
-        this._element.children.forEach(child => {
+        if (this.distributeEvenglyAfterGenerate) {
-            child.style["width"] = ((100 - this._element.childElementCount) / innerComponent.length);
+            this._element.children.forEach(child => {
-        })
+                child.style["width"] = ((100 - this._element.childElementCount) / innerComponent.length);
-        return this;
+            })
+        }
+        return super.generate();
     }
 }
 

src/builder.js

@@ -373,6 +373,14 @@ const builder = {
       */
      column: function (attr = {}, modifier = null) { return new Column(attr, modifier) },
 
+     /**
+      * 
+      * @param {Map<string,string>} attr 
+      * @param {Modifier} modifier 
+      * @returns {FlexContainerComponent}
+      */
+     section: function (attr = {}, modifier = null) { return new FlexContainerComponent(attr, modifier, "section") },
+
      /**
       * 
       * @todo upwards bubbling of js or css is not dealt with yet.