Support for fieldset HTML element both as a standalone container and within FormPanel (#129)

4 files changed, 148 insertions, 6 deletions

diff --git a/src/main/kotlin/pl/treksoft/kvision/form/FormPanel.kt b/src/main/kotlin/pl/treksoft/kvision/form/FormPanel.kt
index aadd57cf..62f3395e 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/FormPanel.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/FormPanel.kt
@@ -30,6 +30,7 @@ import pl.treksoft.kvision.core.StringBoolPair
 import pl.treksoft.kvision.core.StringPair
 import pl.treksoft.kvision.form.FormPanel.Companion.create
 import pl.treksoft.kvision.html.Div
+import pl.treksoft.kvision.panel.FieldsetPanel
 import pl.treksoft.kvision.panel.SimplePanel
 import pl.treksoft.kvision.types.KFile
 import kotlin.js.Date
@@ -185,6 +186,8 @@ open class FormPanel<K : Any>(
         visible = false
     }
 
+    private var currentFieldset: FieldsetPanel? = null
+
     init {
         this.addInternal(validationAlert)
     }
@@ -231,6 +234,7 @@ open class FormPanel<K : Any>(
 
     protected fun <C : FormControl> addInternal(
         key: KProperty1<K, *>, control: C, required: Boolean = false, requiredMessage: String? = null,
+        legend: String? = null,
         validatorMessage: ((C) -> String?)? = null,
         validator: ((C) -> Boolean?)? = null
     ): FormPanel<K> {
@@ -240,7 +244,16 @@ open class FormPanel<K : Any>(
             else -> control.styleForVerticalFormPanel()
         }
         if (required) control.flabel.addCssClass("required-label")
-        super.add(control)
+        if (legend == null) {
+            super.add(control)
+        } else if (currentFieldset == null || currentFieldset?.legend != legend) {
+            currentFieldset = FieldsetPanel(legend) {
+                add(control)
+            }
+            super.add(currentFieldset!!)
+        } else {
+            currentFieldset?.add(control)
+        }
         form.addInternal(key, control, required, requiredMessage, validatorMessage, validator)
         return this
     }
@@ -251,16 +264,18 @@ open class FormPanel<K : Any>(
      * @param control the string form control
      * @param required determines if the control is required
      * @param requiredMessage optional required validation message
+     * @param legend put this control inside a fieldset with given legend
      * @param validatorMessage optional function returning validation message
      * @param validator optional validation function
      * @return current form panel
      */
     open fun <C : StringFormControl> add(
         key: KProperty1<K, String?>, control: C, required: Boolean = false, requiredMessage: String? = null,
+        legend: String? = null,
         validatorMessage: ((C) -> String?)? = null,
         validator: ((C) -> Boolean?)? = null
     ): FormPanel<K> {
-        return addInternal(key, control, required, requiredMessage, validatorMessage, validator)
+        return addInternal(key, control, required, requiredMessage, legend, validatorMessage, validator)
     }
 
     /**
@@ -269,16 +284,18 @@ open class FormPanel<K : Any>(
      * @param control the boolean form control
      * @param required determines if the control is required
      * @param requiredMessage optional required validation message
+     * @param legend put this control inside a fieldset with given legend
      * @param validatorMessage optional function returning validation message
      * @param validator optional validation function
      * @return current form panel
      */
     open fun <C : BoolFormControl> add(
         key: KProperty1<K, Boolean?>, control: C, required: Boolean = false, requiredMessage: String? = null,
+        legend: String? = null,
         validatorMessage: ((C) -> String?)? = null,
         validator: ((C) -> Boolean?)? = null
     ): FormPanel<K> {
-        return addInternal(key, control, required, requiredMessage, validatorMessage, validator)
+        return addInternal(key, control, required, requiredMessage, legend, validatorMessage, validator)
     }
 
     /**
@@ -287,16 +304,18 @@ open class FormPanel<K : Any>(
      * @param control the number form control
      * @param required determines if the control is required
      * @param requiredMessage optional required validation message
+     * @param legend put this control inside a fieldset with given legend
      * @param validatorMessage optional function returning validation message
      * @param validator optional validation function
      * @return current form panel
      */
     open fun <C : NumberFormControl> add(
         key: KProperty1<K, Number?>, control: C, required: Boolean = false, requiredMessage: String? = null,
+        legend: String? = null,
         validatorMessage: ((C) -> String?)? = null,
         validator: ((C) -> Boolean?)? = null
     ): FormPanel<K> {
-        return addInternal(key, control, required, requiredMessage, validatorMessage, validator)
+        return addInternal(key, control, required, requiredMessage, legend, validatorMessage, validator)
     }
 
     /**
@@ -305,16 +324,18 @@ open class FormPanel<K : Any>(
      * @param control the date form control
      * @param required determines if the control is required
      * @param requiredMessage optional required validation message
+     * @param legend put this control inside a fieldset with given legend
      * @param validatorMessage optional function returning validation message
      * @param validator optional validation function
      * @return current form panel
      */
     open fun <C : DateFormControl> add(
         key: KProperty1<K, Date?>, control: C, required: Boolean = false, requiredMessage: String? = null,
+        legend: String? = null,
         validatorMessage: ((C) -> String?)? = null,
         validator: ((C) -> Boolean?)? = null
     ): FormPanel<K> {
-        return addInternal(key, control, required, requiredMessage, validatorMessage, validator)
+        return addInternal(key, control, required, requiredMessage, legend, validatorMessage, validator)
     }
 
     /**
@@ -323,16 +344,18 @@ open class FormPanel<K : Any>(
      * @param control the files form control
      * @param required determines if the control is required
      * @param requiredMessage optional required validation message
+     * @param legend put this control inside a fieldset with given legend
      * @param validatorMessage optional function returning validation message
      * @param validator optional validation function
      * @return current form panel
      */
     open fun <C : KFilesFormControl> add(
         key: KProperty1<K, List<KFile>?>, control: C, required: Boolean = false, requiredMessage: String? = null,
+        legend: String? = null,
         validatorMessage: ((C) -> String?)? = null,
         validator: ((C) -> Boolean?)? = null
     ): FormPanel<K> {
-        return addInternal(key, control, required, requiredMessage, validatorMessage, validator)
+        return addInternal(key, control, required, requiredMessage, legend, validatorMessage, validator)
     }
 
     /**
diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Tag.kt b/src/main/kotlin/pl/treksoft/kvision/html/Tag.kt
index f3b14ec7..6075bdff 100644
--- a/src/main/kotlin/pl/treksoft/kvision/html/Tag.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/html/Tag.kt
@@ -87,6 +87,9 @@ enum class TAG(internal val tagName: String) {
     TR("tr"),
     TD("td"),
 
+    FIELDSET("fieldset"),
+    LEGEND("legend"),
+
     FORM("form"),
     INPUT("input"),
     SELECT("select"),
diff --git a/src/main/kotlin/pl/treksoft/kvision/panel/FieldsetPanel.kt b/src/main/kotlin/pl/treksoft/kvision/panel/FieldsetPanel.kt
new file mode 100644
index 00000000..14310ffc
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/panel/FieldsetPanel.kt
@@ -0,0 +1,83 @@
+/*
+ * Copyright (c) 2017-present Robert Jaros
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+package pl.treksoft.kvision.panel
+
+import com.github.snabbdom.VNode
+import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.html.TAG
+import pl.treksoft.kvision.html.Tag
+
+/**
+ * The HTML fieldset container.
+ *
+ * @constructor
+ * @param legend the legend of the fieldset
+ * @param classes a set of CSS class names
+ * @param init an initializer extension function
+ */
+open class FieldsetPanel(
+    legend: String? = null,
+    classes: Set<String> = setOf(),
+    init: (FieldsetPanel.() -> Unit)? = null
+) :
+    SimplePanel(classes = classes + "kv_fieldset") {
+
+    /**
+     * The legend of the fieldset.
+     */
+    var legend
+        get() = legendComponent.content
+        set(value) {
+            legendComponent.content = value
+        }
+
+    /**
+     * The legend component.
+     */
+    protected val legendComponent = Tag(TAG.LEGEND, legend)
+
+    init {
+        @Suppress("LeakingThis")
+        init?.invoke(this)
+    }
+
+    override fun render(): VNode {
+        val childrenVNodes = childrenVNodes()
+        childrenVNodes.asDynamic().unshift(legendComponent.renderVNode())
+        return render("fieldset", childrenVNodes)
+    }
+}
+
+/**
+ * DSL builder extension function.
+ *
+ * It takes the same parameters as the constructor of the built component.
+ */
+fun Container.fieldsetPanel(
+    legend: String? = null,
+    classes: Set<String> = setOf(),
+    init: (FieldsetPanel.() -> Unit)? = null
+): FieldsetPanel {
+    val fieldsetPanel = FieldsetPanel(legend, classes, init)
+    this.add(fieldsetPanel)
+    return fieldsetPanel
+}
diff --git a/src/main/resources/css/style.css b/src/main/resources/css/style.css
index 2ab48b5e..5fa4d72c 100644
--- a/src/main/resources/css/style.css
+++ b/src/main/resources/css/style.css
@@ -405,3 +405,36 @@ select.form-control, .tabulator-row .tabulator-cell.tabulator-editing select {
 .modal-dialog .modal-footer>button {
     margin-top: 5px;
 }
+
+.kv_fieldset {
+    border: 1px solid #dee2e6;
+	border-radius: 0.25rem;
+	padding-left: 1rem;
+	padding-right: 1rem;
+}
+
+.kv_fieldset legend {
+    border: 1px solid #dee2e6;
+	border-radius: 0.25rem;
+	margin-bottom: 0;
+	font-size: 1rem;
+	font-weight: bold;
+	padding: 3px 10px 3px 10px;
+	width: auto;
+}
+
+form fieldset.kv_fieldset {
+    padding-top: 5px;
+    margin-bottom: 8px;
+}
+
+form[class~="form-horizontal"] fieldset.kv_fieldset {
+  padding-left: 1.1rem;
+  padding-right: 2rem;
+  margin-right: -15px;
+  margin-left: -15px;
+}
+
+form[class~="form-horizontal"] div.form-group {
+    align-items: center;
+}