From aa22ebc3b9c34879687047a28d22c4487c6ac380 Mon Sep 17 00:00:00 2001 From: Robert Jaros 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 ++++++++++++++++++++++ 3 files changed, 115 insertions(+), 6 deletions(-) create mode 100644 src/main/kotlin/pl/treksoft/kvision/panel/FieldsetPanel.kt (limited to 'src/main/kotlin/pl/treksoft/kvision') 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( visible = false } + private var currentFieldset: FieldsetPanel? = null + init { this.addInternal(validationAlert) } @@ -231,6 +234,7 @@ open class FormPanel( protected fun addInternal( key: KProperty1, control: C, required: Boolean = false, requiredMessage: String? = null, + legend: String? = null, validatorMessage: ((C) -> String?)? = null, validator: ((C) -> Boolean?)? = null ): FormPanel { @@ -240,7 +244,16 @@ open class FormPanel( 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( * @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 add( key: KProperty1, control: C, required: Boolean = false, requiredMessage: String? = null, + legend: String? = null, validatorMessage: ((C) -> String?)? = null, validator: ((C) -> Boolean?)? = null ): FormPanel { - return addInternal(key, control, required, requiredMessage, validatorMessage, validator) + return addInternal(key, control, required, requiredMessage, legend, validatorMessage, validator) } /** @@ -269,16 +284,18 @@ open class FormPanel( * @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 add( key: KProperty1, control: C, required: Boolean = false, requiredMessage: String? = null, + legend: String? = null, validatorMessage: ((C) -> String?)? = null, validator: ((C) -> Boolean?)? = null ): FormPanel { - return addInternal(key, control, required, requiredMessage, validatorMessage, validator) + return addInternal(key, control, required, requiredMessage, legend, validatorMessage, validator) } /** @@ -287,16 +304,18 @@ open class FormPanel( * @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 add( key: KProperty1, control: C, required: Boolean = false, requiredMessage: String? = null, + legend: String? = null, validatorMessage: ((C) -> String?)? = null, validator: ((C) -> Boolean?)? = null ): FormPanel { - return addInternal(key, control, required, requiredMessage, validatorMessage, validator) + return addInternal(key, control, required, requiredMessage, legend, validatorMessage, validator) } /** @@ -305,16 +324,18 @@ open class FormPanel( * @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 add( key: KProperty1, control: C, required: Boolean = false, requiredMessage: String? = null, + legend: String? = null, validatorMessage: ((C) -> String?)? = null, validator: ((C) -> Boolean?)? = null ): FormPanel { - return addInternal(key, control, required, requiredMessage, validatorMessage, validator) + return addInternal(key, control, required, requiredMessage, legend, validatorMessage, validator) } /** @@ -323,16 +344,18 @@ open class FormPanel( * @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 add( key: KProperty1?>, control: C, required: Boolean = false, requiredMessage: String? = null, + legend: String? = null, validatorMessage: ((C) -> String?)? = null, validator: ((C) -> Boolean?)? = null ): FormPanel { - 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 = 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 = setOf(), + init: (FieldsetPanel.() -> Unit)? = null +): FieldsetPanel { + val fieldsetPanel = FieldsetPanel(legend, classes, init) + this.add(fieldsetPanel) + return fieldsetPanel +} -- cgit