FEAT,REFA: replaced componentChild(ren) with childContext

src/baseComponents.js

@@ -13,7 +13,7 @@ class FlexContainerComponent extends Component {
      * @param {Component|Array<Component>} innerComponent 
      * @returns {FlexContainerComponent} this component object
      */
-    componentChildren(innerComponent) {
+    childContext(innerComponent) {
         if (innerComponent instanceof Array) {
             innerComponent
                 .map(cl => {
@@ -30,7 +30,7 @@ class FlexContainerComponent extends Component {
 
                 })
         }
-        return super.componentChildren(innerComponent);
+        return super.childContext(innerComponent);
     }
 }
 
@@ -39,11 +39,10 @@ class FlexContainerComponent extends Component {
  */
 class Column extends FlexContainerComponent {
     constructor(attr = {}) {
-        super(document.createElement("div"), attr)
+        super(attr)
             .addStyleClass("column-component")
             .modifier(
                 new Modifier()
-                    .fillMaxHeight()
                     .setStyleRule("flex-direction", "column")
             );
     }
@@ -68,7 +67,7 @@ class Row extends FlexContainerComponent {
      * @param {*} innerComponent 
      * @returns {Row}
      */
-    componentChildren(innerComponent) {
+    childContext(innerComponent) {
         if (innerComponent instanceof Array) {
             innerComponent
                 .map(cl => (cl instanceof Component ? cl : cl.ensureModifier().toComponent()))
@@ -83,7 +82,7 @@ class Row extends FlexContainerComponent {
                         .join(icomp._modifier)
                 })
         }
-        return super.componentChildren(innerComponent)
+        return super.childContext(innerComponent)
     }
 
     /**

src/builder.js

@@ -203,7 +203,7 @@ const builder = {
                builder.genTag("main")
                     .alignment(Alignment.CENTER)
                     .arrangement(Arrangement.CENTER)
-                    .componentChild(innerComponents)
+                    .childContext(innerComponents)
                     .generate()
           )
           main.remove();

src/component.js

@@ -125,18 +125,30 @@ class Component {
 
 
     /**
-     * 
+     * Opens a context to create element children. 
-     * @param {Component} component 
+     * Either as one component or a list/array of components.
+     * @param {Component|Array<Component>} component 
      * @returns {Component} this component object
      */
-    componentChild(component) {
+    childContext(component) {
-        this._element.append(
+        console.log(arguments, arguments.length > 1)
-            (component instanceof Component
+        if (arguments.length > 1) {
-                ? component
+            for (let i = 0; i < arguments.length; i++) {
-                : component.toComponent()
+                this.childContext(arguments[i]);
-            )
+            }
-                .generate()
+        } else if (component instanceof Array) {
-        );
+            for (let i = 0; i < component.length; i++) {
+                this.childContext(component[i]);
+            }
+        } else {
+            this._element.append(
+                (component instanceof Component
+                    ? component
+                    : component.toComponent()
+                )
+                    .generate()
+            );
+        }
         return this;
     }
 
@@ -147,7 +159,7 @@ class Component {
      */
     componentChildren(innerComponent) {
         for (let i = 0; i < innerComponent.length; i++) {
-            this.componentChild(innerComponent[i]);
+            this.childContext(innerComponent[i]);
         }
         return this;
     }

src/modifier.js

@@ -250,10 +250,10 @@ class ChainableModifier extends Modifier {
      * @param {Component} innerComponent 
      * @returns {Component} the parent Component
      */
-    componentChild(innerComponent) {
+    childContext(innerComponent) {
         return this._component
             .modifier(this)
-            .componentChild(innerComponent);
+            .childContext(innerComponent);
     }
 
     /**
@@ -261,9 +261,9 @@ class ChainableModifier extends Modifier {
      * @param {Array<Component>} innerComponent 
      * @returns {Component} the parent Component
      */
-    componentChildren(innerComponent) {
+    childContext(innerComponent) {
         return this._component
             .modifier(this)
-            .componentChildren(innerComponent);
+            .childContext(innerComponent);
     }
 }

src/sizeSide/dimensions.js

@@ -88,18 +88,11 @@ class ChainableDimensions extends DimensionsChain {
             .toComponent();
     }
 
-    componentChild(innerComponent) {
+    childContext(innerComponent) {
         return this._modifier
             .dimensions(this)
             .toComponent()
-            .componentChild(innerComponent);
+            .childContext(innerComponent);
-    }
-
-    componentChildren(innerComponent) {
-        return this._modifier
-            .dimensions(this)
-            .toComponent()
-            .componentChildren(innerComponent);
     }
 }
 

src/sizeSide/shapes.js

@@ -102,18 +102,11 @@ class ChainableShape extends ShapeChain {
             .toComponent();
     }
 
-    componentChild(innerComponent) {
+    childContext(innerComponent) {
         return this._modifier
             .clip(this)
             .toComponent()
-            .componentChild(innerComponent);
+            .childContext(innerComponent);
-    }
-
-    componentChildren(innerComponent) {
-        return this._modifier
-            .clip(this)
-            .toComponent()
-            .componentChildren(innerComponent);
     }
 }
 

src/sizeSide/siding.js

@@ -240,18 +240,11 @@ class ChainablePadding extends PaddingChain {
             .toComponent();
     }
 
-    componentChild(innerComponent) {
+    childContext(innerComponent) {
         return this._modifier
             .padding(this)
             .toComponent()
-            .componentChild(innerComponent);
+            .childContext(innerComponent);
-    }
-
-    componentChildren(innerComponent) {
-        return this._modifier
-            .padding(this)
-            .toComponent()
-            .componentChildren(innerComponent);
     }
 }