From 626f7ac1ac8d9e2c9f187bcb0e6e79d07bca59c0 Mon Sep 17 00:00:00 2001
From: chris <chris@denkblock.mas>
Date: Fri, 4 Apr 2025 10:32:35 +0200
Subject: [PATCH] MINOR,FEAT: minor improvements on
 FlexContainerComponent-logic

---
 src/baseComponents.js | 95 +++++++++++++++++++++++++++++--------------
 src/builder.js        |  8 ++++
 2 files changed, 72 insertions(+), 31 deletions(-)

diff --git a/src/baseComponents.js b/src/baseComponents.js
index 905f9e3..db2ec47 100644
--- a/src/baseComponents.js
+++ b/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) {
-        super(document.createElement("div"), attr);
+    constructor(attr = {}, modifier = null, baseElement="div") {
+        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(
-            new Modifier()
-                .setStyleRule("flex-direction", "column")
-        );
+        this.setFlexDirection();
     }
 
     /**
-     * @todo - adapt to extStore logic 
      * @override
-     * @returns {Column}
+     * @inheritdoc
+     * @extends Component.generate()
      */
-    distibuteSpacingEvenly() {
-        this._element.children.forEach(child => {
-            child.style["height"] = ((100 - this._element.childElementCount) / innerComponent.length);
-        })
-        return this;
+    generate() {
+        if (this.distributeEvenglyAfterGenerate) {
+            this._element.children.forEach(child => {
+                child.style["height"] = ((100 - this._element.childElementCount) / innerComponent.length);
+            })
+        }
+        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(modifier);
-        }
-        this.modifier(
-            new Modifier()
-                .fillMaxWidth()
-                .setStyleRule("flex-direction", "row")
-        )
+        this.modifier(new Modifier().fillMaxWidth());
+        this.setFlexDirection(false);
     }
 
     /**
@@ -176,15 +207,17 @@ class Row extends FlexContainerComponent {
     }
 
     /**
-     * @todo - adapt to extStore logic 
      * @override
-     * @returns {Row}
+     * @inheritdoc
+     * @extends Component.generate()
      */
-    distibuteSpacingEvenly() {
-        this._element.children.forEach(child => {
-            child.style["width"] = ((100 - this._element.childElementCount) / innerComponent.length);
-        })
-        return this;
+    generate() {
+        if (this.distributeEvenglyAfterGenerate) {
+            this._element.children.forEach(child => {
+                child.style["width"] = ((100 - this._element.childElementCount) / innerComponent.length);
+            })
+        }
+        return super.generate();
     }
 }
 
diff --git a/src/builder.js b/src/builder.js
index f622068..e1ce5bd 100644
--- a/src/builder.js
+++ b/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.