From aa22ebc3b9c34879687047a28d22c4487c6ac380 Mon Sep 17 00:00:00 2001
From: Robert Jaros <rjaros@finn.pl>
Date: Fri, 31 Jan 2020 15:54:55 +0100
Subject: Support for fieldset HTML element both as a standalone container and
within FormPanel (#129)
---
.../kotlin/pl/treksoft/kvision/form/FormPanel.kt | 35 +++++++--
src/main/kotlin/pl/treksoft/kvision/html/Tag.kt | 3 +
.../pl/treksoft/kvision/panel/FieldsetPanel.kt | 83 ++++++++++++++++++++++
src/main/resources/css/style.css | 33 +++++++++
4 files changed, 148 insertions(+), 6 deletions(-)
create mode 100644 src/main/kotlin/pl/treksoft/kvision/panel/FieldsetPanel.kt
(limited to 'src')
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;
+}
--
cgit