3 files changed, 36 insertions, 6 deletions
diff --git a/src/main/kotlin/pl/treksoft/kvision/panel/FlexPanel.kt b/src/main/kotlin/pl/treksoft/kvision/panel/FlexPanel.kt
index 86f1abc9..66f2d422 100644
--- a/src/main/kotlin/pl/treksoft/kvision/panel/FlexPanel.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/panel/FlexPanel.kt
@@ -1,8 +1,10 @@
 package pl.treksoft.kvision.panel
 
 import pl.treksoft.kvision.core.Component
+import pl.treksoft.kvision.core.StyledComponent
 import pl.treksoft.kvision.core.WidgetWrapper
 import pl.treksoft.kvision.snabbdom.StringPair
+import pl.treksoft.kvision.utils.px
 
 enum class FLEXDIR(val dir: String) {
     ROW("row"),
@@ -46,11 +48,12 @@ enum class FLEXALIGNCONTENT(val alignContent: String) {
 open class FlexPanel(
     direction: FLEXDIR? = null, wrap: FLEXWRAP? = null, justify: FLEXJUSTIFY? = null,
     alignItems: FLEXALIGNITEMS? = null, alignContent: FLEXALIGNCONTENT? = null,
-    classes: Set<String> = setOf()
+    spacing: Int? = null, classes: Set<String> = setOf()
 ) : SimplePanel(classes) {
     var direction = direction
         set(value) {
             field = value
+            refreshSpacing()
             refresh()
         }
     var wrap = wrap
@@ -73,16 +76,43 @@ open class FlexPanel(
             field = value
             refresh()
         }
+    var spacing = spacing
+        set(value) {
+            field = value
+            refreshSpacing()
+            refresh()
+        }
 
     @Suppress("LongParameterList")
     fun add(
         child: Component, order: Int? = null, grow: Int? = null, shrink: Int? = null,
         basis: Int? = null, alignSelf: FLEXALIGNITEMS? = null, classes: Set<String> = setOf()
     ): FlexPanel {
-        addInternal(FlexWrapper(child, order, grow, shrink, basis, alignSelf, classes))
+        val wrapper = FlexWrapper(child, order, grow, shrink, basis, alignSelf, classes)
+        addInternal(applySpacing(wrapper))
         return this
     }
 
+    private fun refreshSpacing() {
+        getChildren().filterIsInstance<StyledComponent>().map { applySpacing(it) }
+    }
+
+    private fun applySpacing(wrapper: StyledComponent): StyledComponent {
+        wrapper.marginTop = null
+        wrapper.marginRight = null
+        wrapper.marginBottom = null
+        wrapper.marginLeft = null
+        spacing?.let {
+            when (direction) {
+                FLEXDIR.COLUMN -> wrapper.marginBottom = it.px()
+                FLEXDIR.ROWREV -> wrapper.marginLeft = it.px()
+                FLEXDIR.COLUMNREV -> wrapper.marginTop = it.px()
+                else -> wrapper.marginRight = it.px()
+            }
+        }
+        return wrapper
+    }
+
     override fun add(child: Component): FlexPanel {
         return add(child, null)
     }
diff --git a/src/main/kotlin/pl/treksoft/kvision/panel/HPanel.kt b/src/main/kotlin/pl/treksoft/kvision/panel/HPanel.kt
index 93d60f1d..173ac826 100644
--- a/src/main/kotlin/pl/treksoft/kvision/panel/HPanel.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/panel/HPanel.kt
@@ -1,9 +1,9 @@
 package pl.treksoft.kvision.panel
 
 open class HPanel(
-    justify: FLEXJUSTIFY? = null, alignItems: FLEXALIGNITEMS? = null,
+    justify: FLEXJUSTIFY? = null, alignItems: FLEXALIGNITEMS? = null, spacing: Int? = null,
     classes: Set<String> = setOf()
 ) : FlexPanel(
     null,
-    null, justify, alignItems, null, classes
+    null, justify, alignItems, null, spacing, classes
 )
diff --git a/src/main/kotlin/pl/treksoft/kvision/panel/VPanel.kt b/src/main/kotlin/pl/treksoft/kvision/panel/VPanel.kt
index 883d9d75..7870b67a 100644
--- a/src/main/kotlin/pl/treksoft/kvision/panel/VPanel.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/panel/VPanel.kt
@@ -1,9 +1,9 @@
 package pl.treksoft.kvision.panel
 
 open class VPanel(
-    justify: FLEXJUSTIFY? = null, alignItems: FLEXALIGNITEMS? = null,
+    justify: FLEXJUSTIFY? = null, alignItems: FLEXALIGNITEMS? = null, spacing: Int? = null,
     classes: Set<String> = setOf()
 ) : FlexPanel(
     FLEXDIR.COLUMN,
-    null, justify, alignItems, null, classes
+    null, justify, alignItems, null, spacing, classes
 )