MINOR,FEAT: refactored and reintroduced distributeEvenly function

src/baseComponents.js

@@ -67,15 +67,15 @@ class FlexContainerComponent extends Component {
     /**
      * @type {boolean}
      */
-    #distributeEvenglyAfterGenerate;
+    _distributeEvenglyAfterGenerate;
     /**
      * 
      * @param {Attr} attr 
      * @param {Modifier} modifier 
      */
-    constructor(attr = {}, modifier = null, baseElement="div") {
+    constructor(attr = {}, modifier = null, baseElement = "div") {
         super(document.createElement(baseElement), attr);
-        this.#distributeEvenglyAfterGenerate = false;
+        this._distributeEvenglyAfterGenerate = false;
         this.addStyleClass("flex-container-component");
         if (modifier) {
             this.modifier(modifier);
@@ -127,7 +127,7 @@ class FlexContainerComponent extends Component {
      * @returns {FlexContainerComponent}
      */
     distibuteSpacingEvenly() {
-        this.#distributeEvenglyAfterGenerate = true;
+        this._distributeEvenglyAfterGenerate = true;
         return this;
     }
 }
@@ -155,10 +155,13 @@ class Column extends FlexContainerComponent {
      * @extends Component.generate()
      */
     generate() {
-        if (this.distributeEvenglyAfterGenerate) {
-            this._element.children.forEach(child => {
-                child.style["height"] = ((100 - this._element.childElementCount) / innerComponent.length);
-            })
+        if (this._distributeEvenglyAfterGenerate) {
+            for (const child of this._children) {
+                child.modifier(
+                    new Modifier()
+                        .fillMaxHeight(((100 - this._children.length) / this._children.length) / 100)
+                );
+            }
         }
         return super.generate();
     }
@@ -179,7 +182,7 @@ class Row extends FlexContainerComponent {
     constructor(attr = {}, modifier = null) {
         super(attr, modifier);
         this.addStyleClass("row-component")
-        this.modifier(new Modifier().fillMaxWidth());
+        //this.modifier(new Modifier().fillMaxWidth());
         this.setFlexDirection(false);
     }
 
@@ -212,10 +215,13 @@ class Row extends FlexContainerComponent {
      * @extends Component.generate()
      */
     generate() {
-        if (this.distributeEvenglyAfterGenerate) {
-            this._element.children.forEach(child => {
-                child.style["width"] = ((100 - this._element.childElementCount) / innerComponent.length);
-            })
+        if (this._distributeEvenglyAfterGenerate) {
+            for (const child of this._children) {
+                child.modifier(
+                    new Modifier()
+                        .fillMaxWidth(((100 - this._children.length) / this._children.length) / 100)
+                );
+            }
         }
         return super.generate();
     }