Add root panel container types from Bootstrap 4.4. Deprecate current root panel builder functions and constructors.

59 files changed, 214 insertions, 92 deletions

diff --git a/src/main/kotlin/pl/treksoft/kvision/panel/Root.kt b/src/main/kotlin/pl/treksoft/kvision/panel/Root.kt
index b1bb36a8..b6f8ad0c 100644
--- a/src/main/kotlin/pl/treksoft/kvision/panel/Root.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/panel/Root.kt
@@ -34,6 +34,19 @@ import pl.treksoft.kvision.utils.snOpt
 import kotlin.browser.document
 
 /**
+ * Root container types.
+ */
+enum class ContainerType(internal val type: String) {
+    NONE(""),
+    FIXED("container"),
+    FLUID("container-fluid"),
+    SM("container-sm"),
+    MD("container-md"),
+    LG("container-lg"),
+    XL("container-xl")
+}
+
+/**
  * Root container.
  *
  * This container is bound to the specific element in the main HTML file of the project.
@@ -43,7 +56,8 @@ import kotlin.browser.document
 @Suppress("TooManyFunctions")
 class Root : SimplePanel {
 
-    private val fixed: Boolean
+    private val containerType: ContainerType
+    private val addRow: Boolean
     private val contextMenus: MutableList<Widget> = mutableListOf()
     private var rootVnode: VNode? = null
 
@@ -54,12 +68,19 @@ class Root : SimplePanel {
     /**
      * @constructor
      * @param id ID attribute of element in the main HTML file
-     * @param fixed if false, the container is rendered with Bootstrap "container-fluid" class,
-     * otherwise it's rendered with "container" class (default is false)
+     * @param containerType Bootstrap container type
+     * @param addRow if true, a <div class="row"> element is rendered inside the root
+     *        container (default is based on container type)
      * @param init an initializer extension function
      */
-    constructor(id: String, fixed: Boolean = false, init: (Root.() -> Unit)? = null) : super() {
-        this.fixed = fixed
+    constructor(
+        id: String,
+        containerType: ContainerType = ContainerType.FLUID,
+        addRow: Boolean = containerType != ContainerType.FIXED,
+        init: (Root.() -> Unit)? = null
+    ) : super() {
+        this.containerType = containerType
+        this.addRow = addRow
         if (document.getElementById(id) != null) {
             rootVnode = KVManager.patch(id, this.renderVNode())
         }
@@ -71,18 +92,61 @@ class Root : SimplePanel {
     /**
      * @constructor
      * @param element HTML element in the DOM tree
-     * @param fixed if false, the container is rendered with Bootstrap "container-fluid" class,
-     * otherwise it's rendered with "container" class (default is false)
+     * @param containerType Bootstrap container type
+     * @param addRow if true, a <div class="row"> element is rendered inside the root
+     *        container (default is based on container type)
      * @param init an initializer extension function
      */
-    constructor(element: HTMLElement, fixed: Boolean = false, init: (Root.() -> Unit)? = null) : super() {
-        this.fixed = fixed
+    constructor(
+        element: HTMLElement,
+        containerType: ContainerType = ContainerType.FLUID,
+        addRow: Boolean = containerType != ContainerType.FIXED,
+        init: (Root.() -> Unit)? = null
+    ) : super() {
+        this.containerType = containerType
+        this.addRow = addRow
         rootVnode = KVManager.patch(element, this.renderVNode())
         this.id = "kv_root_${counter++}"
         @Suppress("LeakingThis")
         init?.invoke(this)
     }
 
+    /**
+     * @constructor
+     * @param id ID attribute of element in the main HTML file
+     * @param fixed if false, the container is rendered with Bootstrap "container-fluid" class,
+     * otherwise it's rendered with "container" class (default is false)
+     * @param containerType Bootstrap container type
+     * @param addRow if true, a <div class="row"> element is rendered inside the root container
+     * @param init an initializer extension function
+     */
+    @Deprecated("Use constructor without fixed parameter")
+    constructor(
+        id: String,
+        fixed: Boolean = false,
+        containerType: ContainerType = if (fixed) ContainerType.FIXED else ContainerType.FLUID,
+        addRow: Boolean = !fixed,
+        init: (Root.() -> Unit)? = null
+    ) : this(id, containerType, addRow, init)
+
+    /**
+     * @constructor
+     * @param element HTML element in the DOM tree
+     * @param fixed if false, the container is rendered with Bootstrap "container-fluid" class,
+     * otherwise it's rendered with "container" class (default is false)
+     * @param containerType Bootstrap container type
+     * @param addRow if true, a <div class="row"> element is rendered inside the root container
+     * @param init an initializer extension function
+     */
+    @Deprecated("Use constructor without fixed parameter")
+    constructor(
+        element: HTMLElement,
+        fixed: Boolean = false,
+        containerType: ContainerType = if (fixed) ContainerType.FIXED else ContainerType.FLUID,
+        addRow: Boolean = !fixed,
+        init: (Root.() -> Unit)? = null
+    ) : this(element, containerType, addRow, init)
+
     init {
         roots.add(this)
         if (isFirstRoot) {
@@ -91,7 +155,7 @@ class Root : SimplePanel {
     }
 
     override fun render(): VNode {
-        return if (!fixed) {
+        return if (addRow) {
             render("div#$id", arrayOf(h("div", snOpt {
                 `class` = snClasses(listOf("row" to true))
             }, stylesVNodes() + childrenVNodes() + modalsVNodes() + contextMenusVNodes())))
@@ -138,8 +202,12 @@ class Root : SimplePanel {
     }
 
     override fun getSnClass(): List<StringBoolPair> {
-        val css = if (!fixed) "container-fluid" else "container"
-        return super.getSnClass() + (css to true)
+        return if (containerType == ContainerType.NONE) {
+            super.getSnClass()
+        } else {
+            super.getSnClass() + (containerType.type to true)
+        }
+
     }
 
     internal fun reRender(): Root {
@@ -222,14 +290,59 @@ class Root : SimplePanel {
 /**
  * Create new Root container based on ID
  * @param id ID attribute of element in the main HTML file
+ * @param containerType Bootstrap container type
+ * @param addRow if true, a <div class="row"> element is rendered inside the root
+ *               container (default is based on container type)
+ * @param init an initializer extension function
+ * @return the created Root container
+ */
+fun Application.root(
+    id: String,
+    containerType: ContainerType = ContainerType.FLUID,
+    addRow: Boolean = containerType != ContainerType.FIXED,
+    init: Root.() -> Unit
+): Root {
+    return Root(id, containerType, addRow, init)
+}
+
+/**
+ * Create new Root container based on HTML element
+ * @param element HTML element in the DOM tree
+ * @param containerType Bootstrap container type
+ * @param addRow if true, a <div class="row"> element is rendered inside the root
+ *               container (default is based on container type)
+ * @param init an initializer extension function
+ * @return the created Root container
+ */
+fun Application.root(
+    element: HTMLElement,
+    containerType: ContainerType = ContainerType.FLUID,
+    addRow: Boolean = containerType != ContainerType.FIXED,
+    init: Root.() -> Unit
+): Root {
+    return Root(element, containerType, addRow, init)
+}
+
+/**
+ * Create new Root container based on ID
+ * @param id ID attribute of element in the main HTML file
  * @param fixed if false, the container is rendered with Bootstrap "container-fluid" class,
  * otherwise it's rendered with "container" class (default is false)
+ * @param containerType Bootstrap container type
+ * @param addRow if true, a <div class="row"> element is rendered inside the root container
  * @param init an initializer extension function
  * @return the created Root container
  */
-@Suppress("unused")
-fun Application.root(id: String, fixed: Boolean = false, init: Root.() -> Unit): Root {
-    return Root(id, fixed, init)
+@Suppress("DEPRECATION")
+@Deprecated("Use builder function without fixed parameter")
+fun Application.root(
+    id: String,
+    fixed: Boolean = false,
+    containerType: ContainerType = if (fixed) ContainerType.FIXED else ContainerType.FLUID,
+    addRow: Boolean = !fixed,
+    init: Root.() -> Unit
+): Root {
+    return Root(id, fixed, containerType, addRow, init)
 }
 
 /**
@@ -237,10 +350,19 @@ fun Application.root(id: String, fixed: Boolean = false, init: Root.() -> Unit):
  * @param element HTML element in the DOM tree
  * @param fixed if false, the container is rendered with Bootstrap "container-fluid" class,
  * otherwise it's rendered with "container" class (default is false)
+ * @param containerType Bootstrap container type
+ * @param addRow if true, a <div class="row"> element is rendered inside the root container
  * @param init an initializer extension function
  * @return the created Root container
  */
-@Suppress("unused")
-fun Application.root(element: HTMLElement, fixed: Boolean = false, init: Root.() -> Unit): Root {
-    return Root(element, fixed, init)
+@Suppress("DEPRECATION")
+@Deprecated("Use builder function without fixed parameter")
+fun Application.root(
+    element: HTMLElement,
+    fixed: Boolean = false,
+    containerType: ContainerType = if (fixed) ContainerType.FIXED else ContainerType.FLUID,
+    addRow: Boolean = !fixed,
+    init: Root.() -> Unit
+): Root {
+    return Root(element, fixed, containerType, addRow, init)
 }
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/TestUtil.kt b/src/test/kotlin/test/pl/treksoft/kvision/TestUtil.kt
index 9da4dfb4..b975acfe 100644
--- a/src/test/kotlin/test/pl/treksoft/kvision/TestUtil.kt
+++ b/src/test/kotlin/test/pl/treksoft/kvision/TestUtil.kt
@@ -86,7 +86,7 @@ interface WSpec : DomSpec {
 
     fun runW(code: (widget: Widget, element: Element?) -> Unit) {
         run {
-            val root = Root("test", fixed = true)
+            val root = Root("test")
             val widget = Widget()
             widget.id = "test_id"
             root.add(widget)
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/core/ContainerSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/core/ContainerSpec.kt
index 960a18b6..39f8f04c 100644
--- a/src/test/kotlin/test/pl/treksoft/kvision/core/ContainerSpec.kt
+++ b/src/test/kotlin/test/pl/treksoft/kvision/core/ContainerSpec.kt
@@ -34,7 +34,7 @@ class ContainerSpec : DomSpec {
     @Test
     fun add() {
         run {
-            val root = Root("test", fixed = true)
+            val root = Root("test", containerType = pl.treksoft.kvision.panel.ContainerType.FIXED)
             val container = SimplePanel()
             val child1 = Widget()
             child1.id = "child1"
@@ -52,7 +52,7 @@ class ContainerSpec : DomSpec {
     @Test
     fun addAll() {
         run {
-            val root = Root("test", fixed = true)
+            val root = Root("test", containerType = pl.treksoft.kvision.panel.ContainerType.FIXED)
             val container = SimplePanel()
             val child1 = Widget()
             child1.id = "child1"
@@ -69,7 +69,7 @@ class ContainerSpec : DomSpec {
     @Test
     fun remove() {
         run {
-            val root = Root("test", fixed = true)
+            val root = Root("test", containerType = pl.treksoft.kvision.panel.ContainerType.FIXED)
             val container = SimplePanel()
             val child1 = Widget()
             child1.id = "child1"
@@ -88,7 +88,7 @@ class ContainerSpec : DomSpec {
     @Test
     fun removeAll() {
         run {
-            val root = Root("test", fixed = true)
+            val root = Root("test", containerType = pl.treksoft.kvision.panel.ContainerType.FIXED)
             val container = SimplePanel()
             val child1 = Widget()
             child1.id = "child1"
@@ -107,7 +107,7 @@ class ContainerSpec : DomSpec {
     @Test
     fun getChildren() {
         run {
-            val root = Root("test", fixed = true)
+            val root = Root("test", containerType = pl.treksoft.kvision.panel.ContainerType.FIXED)
             val container = SimplePanel()
             val child1 = Widget()
             child1.id = "child1"
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/core/StyleSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/core/StyleSpec.kt
index 33e08c1e..b069d1df 100644
--- a/src/test/kotlin/test/pl/treksoft/kvision/core/StyleSpec.kt
+++ b/src/test/kotlin/test/pl/treksoft/kvision/core/StyleSpec.kt
@@ -37,7 +37,7 @@ class StyleSpec : DomSpec {
     @Test
     fun render() {
         run {
-            Root("test", fixed = true) {
+            Root("test", containerType = pl.treksoft.kvision.panel.ContainerType.FIXED) {
                 widget {
                     style {
                         margin = 2.px
@@ -59,7 +59,7 @@ class StyleSpec : DomSpec {
     @Test
     fun renderCustomClass() {
         run {
-            Root("test", fixed = true) {
+            Root("test", containerType = pl.treksoft.kvision.panel.ContainerType.FIXED) {
                 widget {
                     style("customclass") {
                         margin = 2.px
@@ -80,7 +80,7 @@ class StyleSpec : DomSpec {
     @Test
     fun renderSubclass() {
         run {
-            Root("test", fixed = true) {
+            Root("test", containerType = pl.treksoft.kvision.panel.ContainerType.FIXED) {
                 widget {
                     style("customclass") {
                         margin = 2.px
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/core/WidgetSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/core/WidgetSpec.kt
index 159df178..3eb84f4f 100644
--- a/src/test/kotlin/test/pl/treksoft/kvision/core/WidgetSpec.kt
+++ b/src/test/kotlin/test/pl/treksoft/kvision/core/WidgetSpec.kt
@@ -143,7 +143,7 @@ class WidgetSpec : WSpec {
     @Test
     fun getRoot() {
         run {
-            val root = Root("test", fixed = true)
+            val root = Root("test", containerType = pl.treksoft.kvision.panel.ContainerType.FIXED)
             val widget = Widget()
             root.add(widget)
             val r = widget.getRoot()
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/core/WidgetWrapperSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/core/WidgetWrapperSpec.kt
index 0c28c327..40ecbaa7 100644
--- a/src/test/kotlin/test/pl/treksoft/kvision/core/WidgetWrapperSpec.kt
+++ b/src/test/kotlin/test/pl/treksoft/kvision/core/WidgetWrapperSpec.kt
@@ -35,7 +35,7 @@ class WidgetWrapperSpec : DomSpec {
     @Test
     fun render() {
         run {
-            val root = Root("test", fixed = true)
+            val root = Root("test", containerType = pl.treksoft.kvision.panel.ContainerType.FIXED)
             val widget = Widget()
             val wrapper = WidgetWrapper(widget)
             wrapper.width = 100 to UNIT.em
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/form/FieldLabelSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/form/FieldLabelSpec.kt
index 5319d4bc..583fb2a3 100644
--- a/src/test/kotlin/test/pl/treksoft/kvision/form/FieldLabelSpec.kt
+++ b/src/test/kotlin/test/pl/treksoft/kvision/form/FieldLabelSpec.kt
@@ -32,7 +32,7 @@ class FieldLabelSpec : DomSpec {
     @Test
     fun render() {
         run {
-            val root = Root("test", fixed = true)
+            val root = Root("test", containerType = pl.treksoft.kvision.panel.ContainerType.FIXED)
             val fl = FieldLabel("input", "Label")
             root.add(fl)
             val element = document.getElementById("test")
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/form/HelpTextSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/form/HelpTextSpec.kt
index 785f9a2c..c89532fa 100644
--- a/src/test/kotlin/test/pl/treksoft/kvision/form/HelpTextSpec.kt
+++ b/src/test/kotlin/test/pl/treksoft/kvision/form/HelpTextSpec.kt
@@ -32,7 +32,7 @@ class HelpTextSpec : DomSpec {
     @Test
     fun render() {
         run {
-            val root = Root("test", fixed = true)
+            val root = Root("test", containerType = pl.treksoft.kvision.panel.ContainerType.FIXED)
             val fl = HelpText("Form Error")
             root.add(fl)
             val element = document.getElementById("test")
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/form/check/CheckBoxInputSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/form/check/CheckBoxInputSpec.kt
index 677a2b8e..eb24fcdc 100644
--- a/src/test/kotlin/test/pl/treksoft/kvision/form/check/CheckBoxInputSpec.kt
+++ b/src/test/kotlin/test/pl/treksoft/kvision/form/check/CheckBoxInputSpec.kt
@@ -32,7 +32,7 @@ class CheckBoxInputSpec : DomSpec {
     @Test
     fun render() {
         run {
-            val root = Root("test", fixed = true)
+            val root = Root("test", containerType = pl.treksoft.kvision.panel.ContainerType.FIXED)
             val ci = CheckBoxInput(value = true).apply {
                 name = "name"
                 id = "idti"
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/form/check/CheckBoxSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/form/check/CheckBoxSpec.kt
index 2c329ffa..35413723 100644
--- a/src/test/kotlin/test/pl/treksoft/kvision/form/check/CheckBoxSpec.kt
+++ b/src/test/kotlin/test/pl/treksoft/kvision/form/check/CheckBoxSpec.kt
@@ -33,7 +33,7 @@ class CheckBoxSpec : DomSpec {
     @Test
     fun render() {
         run {
-            val root = Root("test", fixed = true)
+            val root = Root("test", containerType = pl.treksoft.kvision.panel.ContainerType.FIXED)
             val ci = CheckBox(value = true, label = "Label").apply {
                 name = "name"
                 style = CheckBoxStyle.DANGER
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/form/check/RadioGroupInputSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/form/check/RadioGroupInputSpec.kt
index 020ad529..e97bcc54 100644
--- a/src/test/kotlin/test/pl/treksoft/kvision/form/check/RadioGroupInputSpec.kt
+++ b/src/test/kotlin/test/pl/treksoft/kvision/form/check/RadioGroupInputSpec.kt
@@ -33,7 +33,7 @@ class RadioGroupInputSpec : DomSpec {
     @Test
     fun render() {
         run {
-            val root = Root("test", fixed = true)
+            val root = Root("test", containerType = pl.treksof