New grid component (old renamed to ResponsiveGridPanel). Flex, HPanel, VPanel and DockPanel components. Cache for components attributes.

19 files changed, 742 insertions, 291 deletions

diff --git a/src/main/assets/css/style.css b/src/main/assets/css/style.css
index 568f0edd..61696cb2 100644
--- a/src/main/assets/css/style.css
+++ b/src/main/assets/css/style.css
@@ -52,36 +52,3 @@
   background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAICAQAAADdTl4aAAAAIElEQVQoz2MwrTD9TxFsZ7jPcV+IIsjFQAUw6hFqegQA+xzRHT2p7pEAAAAASUVORK5CYII=') center center no-repeat #cecece;
   cursor: row-resize;
 }
-
-/* Dead Simple Grid (c) 2015 Vladimir Agafonkin */
-
-.dsgrow .dsgrow { margin:  0 -1.5em; }
-.dsgcol      { padding: 0  1.5em; }
-.dsgcolf      { padding: 0  1.5em; }
-
-.dsgrow:after {
-    content: "";
-    clear: both;
-    display: table;
-}
-
-@media only screen {
-
-.dsgcol {
-    float: left;
-    width: 100%;
-    box-sizing: border-box;
-}
-.dsgcol::before {
-   content: "\200B";
-}
-
-.dsgcolf {
-    float: left;
-    box-sizing: border-box;
-}
-.dsgcolf::before {
-   content: "\200B";
-}
-
-}
diff --git a/src/main/kotlin/pl/treksoft/kvision/Showcase.kt b/src/main/kotlin/pl/treksoft/kvision/Showcase.kt
index 04ce2615..3bc6a348 100644
--- a/src/main/kotlin/pl/treksoft/kvision/Showcase.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/Showcase.kt
@@ -12,19 +12,14 @@ import pl.treksoft.kvision.html.TAG.H1
 import pl.treksoft.kvision.modal.Alert
 import pl.treksoft.kvision.modal.Confirm
 import pl.treksoft.kvision.modal.Modal
-import pl.treksoft.kvision.panel.DIRECTION
-import pl.treksoft.kvision.panel.GRIDTYPE
-import pl.treksoft.kvision.panel.GridPanel
-import pl.treksoft.kvision.panel.HPanel
-import pl.treksoft.kvision.panel.SplitPanel
-import pl.treksoft.kvision.panel.TabPanel
-import pl.treksoft.kvision.panel.VPanel
+import pl.treksoft.kvision.panel.*
 import pl.treksoft.kvision.routing.routing
 
 class Showcase : ApplicationBase() {
 
     override fun start(state: Map<String, Any>) {
         val root = Root("showcase")
+
         val container = Container(setOf("abc", "def"))
         val h1 = Tag(H1, "To jest <i>test pisania</i> tekstu", false, ALIGN.NONE, classes = setOf("test", "test2"))
         container.add(h1)
@@ -74,7 +69,7 @@ class Showcase : ApplicationBase() {
         val tabs = TabPanel()
         tabs.addTab("Test zakładki", Label("test zakładki"), "fa-flag")
         tabs.addTab("Test zakładki2", Label("test zakładki2"))
-        tabs.addTab("Test zakładki3", tabs2, "fa-bars")
+//        tabs.addTab("Test zakładki3", tabs2, "fa-bars")
 
         val split = SplitPanel()
         split.add(tabs)
@@ -115,31 +110,66 @@ class Showcase : ApplicationBase() {
         val img = Image(Img("kotlin.png"), "Image", true, IMAGESHAPE.ROUNDED)
         root.add(img)
 
-        val grid = GridPanel(gridtype = GRIDTYPE.DSG, align = ALIGN.RIGHT)
+        val grid = ResponsiveGridPanel(align = ALIGN.RIGHT)
         grid.add(Tag(DIV, "0,0"), 0, 0)
         grid.add(Tag(DIV, "1,1"), 1, 1)
         grid.add(Tag(DIV, "2,2"), 2, 2)
-        grid.add(Tag(DIV, "3,3"), 3, 3)
         root.add(grid)
 
-        val grid2 = GridPanel(align = ALIGN.CENTER)
+        val grid2 = ResponsiveGridPanel(align = ALIGN.CENTER)
         grid2.add(Tag(DIV, "0,0"), 0, 0, 8)
         grid2.add(Tag(DIV, "0,1"), 0, 1, 4)
         grid2.add(Tag(DIV, "1,1"), 1, 1, 8, 4)
         root.add(grid2)
 
-        val hPanel = HPanel(align = ALIGN.RIGHT)
-        hPanel.add(Label("1"))
-        hPanel.add(Label("2"))
-        hPanel.add(Label("3"))
+        val flexPanel = FlexPanel(FLEXDIR.ROW)
+        flexPanel.add(Label("1"), 3, 1)
+        flexPanel.add(Label("2"), 2, 2)
+        flexPanel.add(Label("3"), 1, 1)
+        flexPanel.add(tabs2, 4, 1)
+        root.add(flexPanel)
+
+        val hPanel = HPanel(FLEXJUSTIFY.CENTER)
+        hPanel.add(Label("h1"), basis = 10)
+        hPanel.add(Label("h2"), basis = 20)
+        hPanel.add(Label("h3"), basis = 10)
         root.add(hPanel)
 
-        val vPanel = VPanel(align = ALIGN.CENTER)
-        vPanel.add(Label("1"))
-        vPanel.add(Label("2"))
-        vPanel.add(Label("3"))
+        val vPanel = VPanel(alignItems = FLEXALIGNITEMS.CENTER)
+        vPanel.add(Label("h1"), basis = 10)
+        vPanel.add(Label("h2"), basis = 20)
+        vPanel.add(Label("h3"), basis = 10)
         root.add(vPanel)
 
+        val grid3 = GridPanel(templateColumns = "1fr 1fr 1fr")
+        grid3.add(Label("hh1"))
+        grid3.add(Label("hh2"))
+        grid3.add(Label("hh3"))
+        grid3.add(Label("hh4"))
+        root.add(grid3)
+
+        val grid4 = GridPanel(justifyItems = GRIDJUSTIFY.CENTER)
+        grid4.add(Label("hh1"), 1, 1)
+        grid4.add(Label("hh2"), 2, 2)
+        grid4.add(Label("hh3"), 3, 3)
+        grid4.add(Label("hh4"), 4, 4)
+        root.add(grid4)
+
+        val dock = DockPanel()
+        dock.add(Label("left<br/>left", rich = true), SIDE.LEFT)
+        dock.add(Label("right"), SIDE.RIGHT)
+        dock.add(Label("up"), SIDE.UP)
+        dock.add(Label("down"), SIDE.DOWN)
+        dock.add(Label("center"), SIDE.CENTER)
+//        root.add(dock)
+
+        val pa = HPanel(alignItems = FLEXALIGNITEMS.FLEXEND)
+        pa.add(Label("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec fringilla turpis, vel molestie dolor. Vestibulum ut ex eget orci porta gravida eu sit amet tortor. Suspendisse vel fermentum purus, vel ornare tellus. Vivamus dictum, risus non viverra venenatis, magna mi pharetra purus, nec dignissim risus tortor a sem. Donec tincidunt dui ut eros laoreet consectetur. Nam dapibus vestibulum sem, eget accumsan ex vestibulum ac. Curabitur ac mi sit amet eros sodales dictum. Sed at felis at nunc aliquam finibus. Vestibulum lorem nulla, dictum ac libero non, mattis dictum nisl. Aenean semper lorem turpis. Praesent pellentesque ligula est, viverra molestie leo imperdiet ut. Nam vitae hendrerit justo. Nullam tincidunt et nibh ac volutpat. Aliquam vulputate mi aliquam fermentum rhoncus."),3)
+        pa.add(Image(Img("kotlin.png")),1)
+        pa.add(dock,2,alignSelf = FLEXALIGNITEMS.FLEXSTART)
+        dock.width = 400
+        root.add(pa)
+
         val modal = Modal("Test okienka")
         modal.add(Tag(TAG.H4, "ABC"))
         modal.add(Image(Img("kotlin.png")))
diff --git a/src/main/kotlin/pl/treksoft/kvision/core/Container.kt b/src/main/kotlin/pl/treksoft/kvision/core/Container.kt
index 575405c6..df854637 100644
--- a/src/main/kotlin/pl/treksoft/kvision/core/Container.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/core/Container.kt
@@ -10,7 +10,7 @@ open class Container(classes: Set<String> = setOf()) : Widget(classes) {
     }
 
     protected open fun childrenVNodes(): Array<VNode> {
-        return children.filter { it.visible }.map { it.render() }.toTypedArray()
+        return children.filter { it.visible }.map { it.renderVNode() }.toTypedArray()
     }
 
     protected fun addInternal(child: Widget): Container {
@@ -32,15 +32,10 @@ open class Container(classes: Set<String> = setOf()) : Widget(classes) {
     }
 
     open fun remove(child: Widget): Container {
-        children.remove(child)
-        child.clearParent()
-        refresh()
-        return this
-    }
-
-    open fun removeAt(index: Int): Container {
-        children.removeAt(index).clearParent()
-        refresh()
+        if (children.remove(child)) {
+            child.clearParent()
+            refresh()
+        }
         return this
     }
 
@@ -54,4 +49,9 @@ open class Container(classes: Set<String> = setOf()) : Widget(classes) {
     open fun getChildren(): List<Widget> {
         return ArrayList(children)
     }
+
+    override fun dispose() {
+        children.forEach { it.dispose() }
+        removeAll()
+    }
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/core/Root.kt b/src/main/kotlin/pl/treksoft/kvision/core/Root.kt
index 52424f0e..0c8a80f6 100644
--- a/src/main/kotlin/pl/treksoft/kvision/core/Root.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/core/Root.kt
@@ -6,10 +6,10 @@ import pl.treksoft.kvision.snabbdom.StringBoolPair
 
 class Root(id: String, private val fixed: Boolean = false) : Container() {
     private val modals: MutableList<Modal> = mutableListOf()
-    private var rootVnode: VNode = render()
+    private var rootVnode: VNode = renderVNode()
 
     init {
-        rootVnode = KVManager.patch(id, this.render())
+        rootVnode = KVManager.patch(id, this.renderVNode())
         this.id = id
         roots.add(this)
     }
@@ -25,7 +25,7 @@ class Root(id: String, private val fixed: Boolean = false) : Container() {
     }
 
     private fun modalsVNodes(): Array<VNode> {
-        return modals.filter { it.visible }.map { it.render() }.toTypedArray()
+        return modals.filter { it.visible }.map { it.renderVNode() }.toTypedArray()
     }
 
     override fun getSnClass(): List<StringBoolPair> {
@@ -33,8 +33,8 @@ class Root(id: String, private val fixed: Boolean = false) : Container() {
         return super.getSnClass() + (css to true)
     }
 
-    override fun refresh(): Widget {
-        rootVnode = KVManager.patch(rootVnode, render())
+    internal fun reRender(): Root {
+        rootVnode = KVManager.patch(rootVnode, renderVNode())
         return this
     }
 
diff --git a/src/main/kotlin/pl/treksoft/kvision/core/Widget.kt b/src/main/kotlin/pl/treksoft/kvision/core/Widget.kt
index c934aff2..e2a4f09f 100644
--- a/src/main/kotlin/pl/treksoft/kvision/core/Widget.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/core/Widget.kt
@@ -26,7 +26,7 @@ open class Widget(classes: Set<String> = setOf()) : KVObject {
     var parent: Widget? = null
         internal set
 
-    var visible: Boolean = true
+    open var visible: Boolean = true
         set(value) {
             val oldField = field
             field = value
@@ -65,7 +65,17 @@ open class Widget(classes: Set<String> = setOf()) : KVObject {
 
     private var vnode: VNode? = null
 
-    internal open fun render(): VNode {
+    private var snAttrsCache: List<StringPair>? = null
+    private var snStyleCache: List<StringPair>? = null
+    private var snClassCache: List<StringBoolPair>? = null
+    private var snOnCache: com.github.snabbdom.On? = null
+    private var snHooksCache: com.github.snabbdom.Hooks? = null
+
+    internal open fun renderVNode(): VNode {
+        return render()
+    }
+
+    protected open fun render(): VNode {
         return kvh("div")
     }
 
@@ -77,16 +87,56 @@ open class Widget(classes: Set<String> = setOf()) : KVObject {
         return h(s, getSnOpt(), children)
     }
 
-    protected open fun getSnOpt(): VNodeData {
+    private fun getSnOpt(): VNodeData {
         return snOpt {
-            attrs = snAttrs(getSnAttrs())
-            style = snStyle(getSnStyle())
-            `class` = snClasses(getSnClass())
-            on = getSnOn()
-            hook = getSnHooks()
+            attrs = snAttrs(getSnAttrsInternal())
+            style = snStyle(getSnStyleInternal())
+            `class` = snClasses(getSnClassInternal())
+            on = getSnOnInternal()
+            hook = getSnHooksInternal()
         }
     }
 
+    private fun getSnAttrsInternal(): List<StringPair> {
+        return snAttrsCache ?: {
+            val s = getSnAttrs()
+            snAttrsCache = s
+            s
+        }()
+    }
+
+    private fun getSnStyleInternal(): List<StringPair> {
+        return snStyleCache ?: {
+            val s = getSnStyle()
+            snStyleCache = s
+            s
+        }()
+    }
+
+    private fun getSnClassInternal(): List<StringBoolPair> {
+        return snClassCache ?: {
+            val s = getSnClass()
+            snClassCache = s
+            s
+        }()
+    }
+
+    private fun getSnOnInternal(): com.github.snabbdom.On? {
+        return snOnCache ?: {
+            val s = getSnOn()
+            snOnCache = s
+            s
+        }()
+    }
+
+    private fun getSnHooksInternal(): com.github.snabbdom.Hooks? {
+        return snHooksCache ?: {
+            val s = getSnHooks()
+            snHooksCache = s
+            s
+        }()
+    }
+
     protected open fun getSnStyle(): List<StringPair> {
         val snstyle = mutableListOf<StringPair>()
         if (width != null) {
@@ -206,8 +256,13 @@ open class Widget(classes: Set<String> = setOf()) : KVObject {
         return this
     }
 
-    protected open fun refresh(): Widget {
-        this.parent?.refresh()
+    protected fun refresh(): Widget {
+        snAttrsCache = null
+        snStyleCache = null
+        snClassCache = null
+        snOnCache = null
+        snHooksCache = null
+        getRoot()?.reRender()
         return this
     }
 
@@ -240,4 +295,7 @@ open class Widget(classes: Set<String> = setOf()) : KVObject {
         val event = org.w3c.dom.CustomEvent(type, eventInitDict)
         return this.getElement()?.dispatchEvent(event)
     }
+
+    open fun dispose() {
+    }
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/core/WidgetWrapper.kt b/src/main/kotlin/pl/treksoft/kvision/core/WidgetWrapper.kt
index 0aa13e64..6f6c2f57 100644
--- a/src/main/kotlin/pl/treksoft/kvision/core/WidgetWrapper.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/core/WidgetWrapper.kt
@@ -2,15 +2,28 @@ package pl.treksoft.kvision.core
 
 import com.github.snabbdom.VNode
 
-open class WidgetWrapper(private var delegate: Widget, classes: Set<String> = setOf()) : Widget(classes) {
+open class WidgetWrapper(internal var delegate: Widget?, classes: Set<String> = setOf()) : Widget(classes) {
 
-    override fun render(): VNode {
-        val children = if (delegate.visible) {
-            arrayOf(delegate.render())
-        } else {
-            arrayOf()
+    override var visible
+        get() = delegate?.visible == true
+        set(value) {
+            delegate?.visible = value
         }
-        return kvh("div", children)
+
+    init {
+        @Suppress("LeakingThis")
+        delegate?.parent = this
+    }
+
+    override fun render(): VNode {
+        return delegate?.let {
+            kvh("div", arrayOf(it.renderVNode()))
+        } ?: kvh("div")
+    }
+
+    override fun dispose() {
+        delegate?.clearParent()
+        delegate = null
     }
 
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/List.kt b/src/main/kotlin/pl/treksoft/kvision/html/List.kt
index c6298ddf..9bac3f41 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/List.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/List.kt
@@ -52,16 +52,16 @@ open class ListTag(type: LIST, elements: List<String>? = null, rich: Boolean = f
         val res = when (type) {
             LIST.UL, LIST.OL, LIST.UNSTYLED, LIST.INLINE -> childrenElements.map { v ->
                 if (v is Tag && v.type == TAG.LI) {
-                    v.render()
+                    v.renderVNode()
                 } else {
-                    h("li", arrayOf(v.render()))
+                    h("li", arrayOf(v.renderVNode()))
                 }
             }
             LIST.DL, LIST.DL_HORIZ -> childrenElements.mapIndexed { index, v ->
                 if (v is Tag && v.type == TAG.LI) {
-                    v.render()
+                    v.renderVNode()
                 } else {
-                    h(if (index % 2 == 0) "dt" else "dd", arrayOf(v.render()))
+                    h(if (index % 2 == 0) "dt" else "dd", arrayOf(v.renderVNode()))
                 }
             }
         }
diff --git a/src/main/kotlin/pl/treksoft/kvision/modal/Modal.kt b/src/main/kotlin/pl/treksoft/kvision/modal/Modal.kt
index 564a9f6f..69a83dfb 100644
--- a/src/main/kotlin/pl/treksoft/kvision/modal/Modal.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/modal/Modal.kt
@@ -107,11 +107,6 @@ open class Modal(caption: String? = null, closeButton: Boolean = true,
         return this
     }
 
-    open fun removeButtonAt(index: Int): Modal {
-        footer.removeAt(index)
-        return this
-    }
-
     open fun removeAllButtons(): Modal {
         footer.removeAll()
         return this
diff --git a/src/main/kotlin/pl/treksoft/kvision/panel/DockPanel.kt b/src/main/kotlin/pl/treksoft/kvision/panel/DockPanel.kt
new file mode 100644
index 00000000..6d86727c
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/panel/DockPanel.kt
@@ -0,0 +1,114 @@
+package pl.treksoft.kvision.panel
+
+import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.core.Widget
+
+enum class SIDE {
+    LEFT,
+    RIGHT,
+    CENTER,
+    UP,
+    DOWN
+}
+
+open class DockPanel(classes: Set<String> = setOf()) : Container(classes = classes) {
+    protected var left: Widget? = null
+    protected var center: Widget? = null
+    protected var right: Widget? = null
+    protected var up: Widget? = null
+    protected var down: Widget? = null
+
+    protected val mainContainer = FlexPanel(direction = FLEXDIR.COLUMN, justify = FLEXJUSTIFY.SPACEBETWEEN,
+            alignItems = FLEXALIGNITEMS.STRETCH)
+    protected val subContainer = FlexPanel(justify = FLEXJUSTIFY.SPACEBETWEEN, alignItems = FLEXALIGNITEMS.CENTER)
+
+    init {
+        this.addInternal(mainContainer)
+        mainContainer.add(subContainer, 2)
+    }
+
+    @Suppress("MagicNumber")
+    open fun add(widget: Widget, position: SIDE): DockPanel {
+        when (position) {
+            SIDE.UP -> {
+                up?.let { mainContainer.remove(it) }
+                up = widget
+                mainContainer.add(widget, 1, alignSelf = FLEXALIGNITEMS.CENTER)
+            }
+            SIDE.CENTER -> {
+                center?.let { subContainer.remove(it) }
+                center = widget
+                subContainer.add(widget, 2)
+            }
+            SIDE.LEFT -> {
+                left?.let { subContainer.remove(it) }
+                left = widget
+                subContainer.add(widget, 1)
+            }
+            SIDE.RIGHT -> {
+                right?.let { subContainer.remove(it) }
+                right = widget
+                subContainer.add(widget, 3)
+            }
+            SIDE.DOWN -> {
+                down?.let { mainContainer.remove(it) }
+                down = widget
+                mainContainer.add(widget, 3, alignSelf = FLEXALIGNITEMS.CENTER)
+            }
+        }
+        return this
+    }
+
+    override fun add(child: Widget): Container {
+        return this.add(child, SIDE.CENTER)
+    }
+
+    override fun addAll(children: List<Widget>): Container {
+        children.forEach { this.add(it) }
+        return this
+    }
+
+    override fun remove(child: Widget): Container {
+        if (child == left) removeAt(SIDE.LEFT)
+        if (child == center) removeAt(SIDE.CENTER)
+        if (child == right) removeAt(SIDE.RIGHT)
+        if (child == up) removeAt(SIDE.UP)
+        if (child == down) removeAt(SIDE.DOWN)
+        return this
+    }
+
+    open fun removeAt(position: SIDE): Container {
+        when (position) {
+            SIDE.UP -> {
+                up?.let { mainContainer.remove(it) }
+                up = null
+            }
+            SIDE.CENTER -> {
+                center?.let { subContainer.remove(it) }
+                center = null
+            }
+            SIDE.LEFT -> {
+                left?.let { subContainer.remove(it) }
+                left = null
+            }
+            SIDE.RIGHT -> {
+                right?.let { subContainer.remove(it) }
+                right = null
+            }
+            SIDE.DOWN -> {
+                down?.let { mainContainer.remove(it) }
+                down = null
+            }
+        }
+        return this
+    }
+
+    override fun removeAll(): Container {
+        removeAt(SIDE.LEFT)
+        removeAt(SIDE.CENTER)
+        removeAt(SIDE.RIGHT)
+        removeAt(SIDE.UP)
+        removeAt(SIDE.DOWN)
+        return this
+    }
+}
diff --git a/src/main/kotlin/pl/treksoft/kvision/panel/FlexPanel.kt b/src/main/kotlin/pl/treksoft/kvision/panel/FlexPanel.kt
new file mode 100644
index 00000000..781f8dcd
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/panel/FlexPanel.kt
@@ -0,0 +1,157 @@
+package pl.treksoft.kvision.panel
+
+import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.core.Widget
+import pl.treksoft.kvision.core.WidgetWrapper
+import pl.treksoft.kvision.snabbdom.StringPair
+
+enum class FLEXDIR(val dir: String) {
+    ROW("row"),
+    ROWREV("row-reverse"),
+    COLUMN("column"),
+    COLUMNREV("column-reverse")
+}
+
+enum class FLEXWRAP(val wrap: String) {
+    NOWRAP("nowrap"),
+    WRAP("wrap"),
+    WRAPREV("wrap-reverse")
+}
+
+enum class FLEXJUSTIFY(val justify: String) {
+    FLEXSTART("flex-start"),
+    FLEXEND("flex-end"),
+    CENTER("center"),
+    SPACEBETWEEN("space-between"),
+    SPACEAROUND("space-around"),
+    SPACEEVENLY("space-evenly")
+}
+
+enum class FLEXALIGNITEMS(val alignItems: String) {
+    FLEXSTART("flex-start"),
+    FLEXEND("flex-end"),
+    CENTER("center"),
+    BASELINE("baseline"),
+    STRETCH("stretch")
+}
+
+enum class FLEXALIGNCONTENT(val alignContent: String) {
+    FLEXSTART("flex-start"),
+    FLEXEND("flex-end"),
+    CENTER("center"),
+    SPACEBETWEEN("space-between"),
+    SPACEAROUND("space-around"),
+    STRETCH("stretch")
+}
+
+open class FlexPanel(direction: FLEXDIR? = null, wrap: FLEXWRAP? = null, justify: FLEXJUSTIFY? = null,
+                     alignItems: FLEXALIGNITEMS? = null, alignContent: FLEXALIGNCONTENT? = null,
+                     classes: Set<String> = setOf()) : Container(classes) {
+    var direction = direction
+        set(value) {
+            field = value
+            refresh()
+        }
+    var wrap = wrap
+        set(value) {
+            field = value
+            refresh()
+        }
+    var justify = justify
+        set(value) {
+            field = value
+            refresh()
+        }
+    var alignItems = alignItems
+        set(value) {
+            field = value
+            refresh()
+        }
+    var alignContent = alignContent
+        set(value) {
+            field = value
+            refresh()
+        }
+
+    @Suppress("LongParameterList")
+    fun add(child: Widget, order: Int? = null, grow: Int? = null, shrink: Int? = null,
+            basis: Int? = null, alignSelf: FLEXALIGNITEMS? = null, classes: Set<String> = setOf()): Container {
+        return addInternal(FlexWrapper(child, order, grow, shrink, basis, alignSelf, classes))
+    }
+
+    override fun add(child: Widget): Container {
+        return add(child, null)
+    }
+
+    override fun addAll(children: List<Widget>): Container {
+        children.forEach { add(it, null) }
+        return this
+    }
+
+    override fun remove(child: Widget): Container {
+        children.find { (it as FlexWrapper).delegate == child }?.let {
+            super.remove(it)
+            it.dispose()
+        }
+        return this
+    }
+
+    override fun removeAll(): Container {
+        children.map {
+            it.clearParent()
+            it.dispose()
+        }
+        children.clear()
+        refresh()
+        return this
+    }
+
+    override fun getSnStyle(): List<StringPair> {
+        val snstyle = super.getSnStyle().toMutableList()
+        snstyle.add("display" to "flex")
+        direction?.let {
+            snstyle.add("flex-direction" to it.dir)
+        }
+        wrap?.let {
+            snstyle.add("flex-wrap" to it.wrap)
+        }
+        justify?.let {
+            snstyle.add("justify-content" to it.justify)
+        }
+        alignItems?.let {
+            snstyle.add("align-items" to it.alignItems)
+        }
+        alignContent?.let {
+            snstyle.add("align-content" to it.alignContent)
+        }
+        println("abc")
+        return snstyle
+    }
+}
+
+class FlexWrapper(delegate: Widget, private val order: Int? = null, private val grow: Int? = null,
+                  private val shrink: Int? = null, private val basis: Int? = null,
+                  private val alignSelf: FLEXALIGNITEMS? = null,
+                  classes: Set<String> = setOf()) : WidgetWrapper(delegate, classes) {
+
+    override fun getSnStyle(): List<StringPair> {
+        val snstyle = super.getSnStyle().toMutableList()
+        order?.let {
+            snstyle.add("order" to "$it")
+        }
+        grow?.let {
+            snstyle.add("flex-grow" to "$it")
+        }
+        shrink?.let {
+            snstyle.add("flex-shrink" to "$it")
+        }
+        basis?.let {
+            snstyle.add("flex-basis" to "$it%")
+        }
+        alignSelf?.let {
+            snstyle.add("align-self" to it.alignItems)
+        }
+        return snstyle
+    }
+
+}
diff --git a/src/main/kotlin/pl/treksoft/kvision/panel/GridPanel.kt b/src/main/kotlin/pl/treksoft/kvision/panel/GridPanel.kt
index f7adfe8f..44ba509f 100644
--- a/src/main/kotlin/pl/treksoft/kvision/panel/GridPanel.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/panel/GridPanel.kt
@@ -1,152 +1,226 @@
 package pl.treksoft.kvision.panel
 
-import com.github.snabbdom.VNode
 import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.Widget
 import pl.treksoft.kvision.core.WidgetWrapper
-import pl.treksoft.kvision.html.ALIGN
-import pl.treksoft.kvision.html.TAG
-import pl.treksoft.kvision.html.Tag
+import pl.treksoft.kvision.snabbdom.StringPair
 
-enum class GRIDTYPE {
-    BOOTSTRAP,
-    DSG
+enum class GRIDJUSTIFY(val justify: String) {
+    START("start"),
+    END("end"),
+    CENTER("center"),
+    STRETCH("stretch")
 }
 
-enum class GRIDSIZE(val size: String) {
-    XS("xs"),
-    SM("sm"),
-    MD("md"),
-    LG("lg")
+enum class GRIDALIGN(val align: String) {
+    START("start"),
+    END("end"),
+    CENTER("center"),
+    STRETCH("stretch")
 }
 
-const val FULLPERCENT = 100
-const val MAX_COLUMNS = 12
+enum class GRIDJUSTIFYCONTENT(val justifyContent: String) {
+    START("start"),
+    END("end"),
+    CENTER("center"),
+    STRETCH("stretch"),
+    SPACEAROUND("space-around"),
+    SPACEBETWEEN("space-between"),
+    SPACEEVENLY("space-evenly")
+}
 
-internal data class WidgetParam(val widget: Widget, val size: Int, val offset: Int)
+enum class GRIDALIGNCONTENT(val alignContent: String) {
+    START("start"),
+    END("end"),
+    CENTER("center"),
+    STRETCH("stretch"),
+    SPACEAROUND("space-around"),
+    SPACEBETWEEN("space-between"),
+    SPACEEVENLY("space-evenly")
+}
 
-open class GridPanel(private val gridtype: GRIDTYPE = GRIDTYPE.BOOTSTRAP, private val gridsize: GRIDSIZE = GRIDSIZE.MD,
-                     protected var rows: Int = 0, protected var cols: Int = 0, align: ALIGN = ALIGN.NONE,
-                     classes: Set<String> = setOf()) : Container(classes) {
-    private var align = align
+enum class GRIDFLOW(val flow: String) {
+    ROW("row"),
+    COLUMN("column"),
+    ROWDENSE("row dense"),
+    COLUMNDENSE("column dense")
+}
+
+open class GridPanel(autoColumns: String? = null, autoRows: String? = null, autoFlow: GRIDFLOW? = null,
+                     templateColumns: String? = null, templateRows: String? = null, templateAreas: List<String>? = null,
+                     columnGap: Int? = null, rowGap: Int? = null, justifyItems: GRIDJUSTIFY? = null,
+                     alignItems: GRIDALIGN? = null, justifyContent: GRIDJUSTIFYCONTENT? = null,
+                     alignContent: GRIDALIGNCONTENT? = null, classes: Set<String> = setOf()) : Container(classes) {
+    var autoColumns = autoColumns
+        set(value) {
+            field = value
+            refresh()
+        }
+    var autoRows = autoRows
+        set(value) {
+            field = value
+            refresh()
+        }
+    var autoFlow = autoFlow
+        set(value) {
+            field = value
+            refresh()
+        }
+    var templateColumns = templateColumns
+        set(value) {
+            field = value
+            refresh()
+        }
+    var templateRows = templateRows
+        set(value) {
+            field = value
+            refresh()
+        }
+    var templateAreas = templateAreas
+        set(value) {
+            field = value
+            refresh()
+        }
+    var columnGap = columnGap
+        set(value) {
+            field = value
+            refresh()
+        }
+    var rowGap = rowGap
+        set(value) {
+            field = value
+            refresh()
+        }
+    var justifyItems = justifyItems
+        set(value) {
+            field = value
+            refresh()
+        }
+    var alignItems = alignItems
+        set(value) {
+            field = value
+            refresh()
+        }
+    var justifyContent = justifyContent
+        set(value) {
+            field = value
+            refresh()
+        }
+    var alignContent = alignContent
         set(value) {
             field = value
             refresh()
         }
 
-    internal val map = mutableMapOf<Int, MutableMap<Int, WidgetParam>>()
-    private var auto: Boolean = true
-
-    open fun add(child: Widget, row: Int, col: Int, size: Int = 0, offset: Int = 0): Container {