Plain HTML form attributes (method, action, enctype, target, ...) support.

Form controls refactoring.

4 files changed, 49 insertions, 58 deletions

diff --git a/src/main/kotlin/pl/treksoft/kvision/form/check/CheckBox.kt b/src/main/kotlin/pl/treksoft/kvision/form/check/CheckBox.kt
index 58033d3a..3afca46e 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/check/CheckBox.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/check/CheckBox.kt
@@ -48,11 +48,12 @@ enum class CheckBoxStyle(internal val className: String) {
  *
  * @constructor
  * @param value selection state
+ * @param name the name of the input element
  * @param label label text bound to the input element
  * @param rich determines if [label] can contain HTML code
  */
 open class CheckBox(
-    value: Boolean = false, label: String? = null,
+    value: Boolean = false, name: String? = null, label: String? = null,
     rich: Boolean = false
 ) : SimplePanel(setOf("checkbox")), BoolFormControl {
 
@@ -76,19 +77,6 @@ open class CheckBox(
             input.startValue = value
         }
     /**
-     * The name attribute of the generated HTML input element.
-     */
-    var name
-        get() = input.name
-        set(value) {
-            input.name = value
-        }
-    override var disabled
-        get() = input.disabled
-        set(value) {
-            input.disabled = value
-        }
-    /**
      * The label text bound to the input element.
      */
     var label
@@ -116,20 +104,15 @@ open class CheckBox(
      * Determines if the checkbox is rendered inline.
      */
     var inline by refreshOnUpdate(false)
-    /**
-     * The size of the input.
-     */
-    override var size
-        get() = input.size
-        set(value) {
-            input.size = value
-        }
 
     private val idc = "kv_form_checkbox_$counter"
     final override val input: CheckInput = CheckInput(
         CheckInputType.CHECKBOX, value,
         setOf("styled")
-    ).apply { id = idc }
+    ).apply {
+        this.id = idc
+        this.name = name
+    }
     final override val flabel: FieldLabel = FieldLabel(idc, label, rich, classes = setOf())
     final override val validationInfo: HelpBlock = HelpBlock().apply { visible = false }
 
@@ -204,10 +187,10 @@ open class CheckBox(
          * It takes the same parameters as the constructor of the built component.
          */
         fun Container.checkBox(
-            value: Boolean = false, label: String? = null,
+            value: Boolean = false, name: String? = null, label: String? = null,
             rich: Boolean = false, init: (CheckBox.() -> Unit)? = null
         ): CheckBox {
-            val checkBox = CheckBox(value, label, rich).apply { init?.invoke(this) }
+            val checkBox = CheckBox(value, name, label, rich).apply { init?.invoke(this) }
             this.add(checkBox)
             return checkBox
         }
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/check/CheckInput.kt b/src/main/kotlin/pl/treksoft/kvision/form/check/CheckInput.kt
index 0ed85e44..f79c1b48 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/check/CheckInput.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/check/CheckInput.kt
@@ -27,6 +27,7 @@ import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.StringBoolPair
 import pl.treksoft.kvision.core.StringPair
 import pl.treksoft.kvision.core.Widget
+import pl.treksoft.kvision.form.FormInput
 import pl.treksoft.kvision.form.InputSize
 
 /**
@@ -48,7 +49,7 @@ enum class CheckInputType(internal val type: String) {
 open class CheckInput(
     type: CheckInputType = CheckInputType.CHECKBOX, value: Boolean = false,
     classes: Set<String> = setOf()
-) : Widget(classes) {
+) : Widget(classes), FormInput {
 
     init {
         this.setInternalEventListener<CheckInput> {
@@ -81,11 +82,11 @@ open class CheckInput(
     /**
      * The name attribute of the generated HTML input element.
      */
-    var name: String? by refreshOnUpdate()
+    override var name: String? by refreshOnUpdate()
     /**
      * Determines if the field is disabled.
      */
-    var disabled by refreshOnUpdate(false)
+    override var disabled by refreshOnUpdate(false)
     /**
      * The additional String value used for the radio button group.
      */
@@ -93,7 +94,7 @@ open class CheckInput(
     /**
      * The size of the input.
      */
-    var size: InputSize? by refreshOnUpdate()
+    override var size: InputSize? by refreshOnUpdate()
 
     override fun render(): VNode {
         return render("input")
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/check/Radio.kt b/src/main/kotlin/pl/treksoft/kvision/form/check/Radio.kt
index 6e26fa5b..181d9665 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/check/Radio.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/check/Radio.kt
@@ -86,19 +86,6 @@ open class Radio(
             input.extraValue = value
         }
     /**
-     * The name attribute of the generated HTML input element.
-     */
-    var name
-        get() = input.name
-        set(value) {
-            input.name = value
-        }
-    override var disabled
-        get() = input.disabled
-        set(value) {
-            input.disabled = value
-        }
-    /**
      * The label text bound to the input element.
      */
     var label
@@ -126,14 +113,6 @@ open class Radio(
      * Determines if the radio button is rendered inline.
      */
     var inline by refreshOnUpdate(false)
-    /**
-     * The size of the input.
-     */
-    override var size
-        get() = input.size
-        set(value) {
-            input.size = value
-        }
 
     private val idc = "kv_form_radio_$counter"
     final override val input: CheckInput = CheckInput(CheckInputType.RADIO, value).apply {
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/check/RadioGroup.kt b/src/main/kotlin/pl/treksoft/kvision/form/check/RadioGroup.kt
index 84e3d89f..8900437b 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/check/RadioGroup.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/check/RadioGroup.kt
@@ -24,7 +24,6 @@ package pl.treksoft.kvision.form.check
 import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.StringBoolPair
 import pl.treksoft.kvision.core.StringPair
-import pl.treksoft.kvision.core.Widget
 import pl.treksoft.kvision.form.FieldLabel
 import pl.treksoft.kvision.form.HelpBlock
 import pl.treksoft.kvision.form.InputSize
@@ -41,12 +40,13 @@ import pl.treksoft.kvision.panel.SimplePanel
  * @constructor
  * @param options an optional list of options (label to value pairs) for the group
  * @param value selected option
+ * @param name the name attribute of the generated HTML input element
  * @param inline determines if the options are rendered inline
  * @param label label text of the options group
  * @param rich determines if [label] can contain HTML code
  */
 open class RadioGroup(
-    options: List<StringPair>? = null, value: String? = null, inline: Boolean = false,
+    options: List<StringPair>? = null, value: String? = null, name: String? = null, inline: Boolean = false,
     label: String? = null,
     rich: Boolean = false
 ) : SimplePanel(setOf("form-group")), StringFormControl {
@@ -87,16 +87,26 @@ open class RadioGroup(
         set(value) {
             flabel.rich = value
         }
-    override var size: InputSize? = null
+    override var name
+        get() = getNameFromChildren()
+        set(value) {
+            setNameToChildren(value)
+        }
+    override var size
+        get() = getSizeFromChildren()
+        set(value) {
+            setSizeToChildren(value)
+        }
 
     private val idc = "kv_form_radiogroup_" + Select.counter
-    final override val input = Widget()
+    final override val input = CheckInput()
     final override val flabel: FieldLabel = FieldLabel(idc, label, rich)
     final override val validationInfo: HelpBlock = HelpBlock().apply { visible = false }
 
     init {
         setChildrenFromOptions()
         setValueToChildren(value)
+        setNameToChildren(name)
         counter++
     }
 
@@ -129,16 +139,34 @@ open class RadioGroup(
         getChildren().filterIsInstance<Radio>().forEach { it.disabled = disabled }
     }
 
+    private fun getNameFromChildren(): String? {
+        return getChildren().filterIsInstance<Radio>().firstOrNull()?.name ?: this.idc
+    }
+
+    private fun setNameToChildren(name: String?) {
+        val tname = name ?: this.idc
+        getChildren().filterIsInstance<Radio>().forEach { it.name = tname }
+    }
+
+    private fun getSizeFromChildren(): InputSize? {
+        return getChildren().filterIsInstance<Radio>().firstOrNull()?.size
+    }
+
+    private fun setSizeToChildren(size: InputSize?) {
+        getChildren().filterIsInstance<Radio>().forEach { it.size = size }
+    }
+
     private fun setChildrenFromOptions() {
+        val currentName = this.name
         super.removeAll()
         this.addInternal(flabel)
         options?.let {
-            val tidc = this.idc
+            val tname = currentName ?: this.idc
             val tinline = this.inline
             val c = it.map {
                 Radio(false, extraValue = it.first, label = it.second).apply {
                     inline = tinline
-                    name = tidc
+                    name = tname
                     eventTarget = this@RadioGroup
                     setEventListener<Radio> {
                         change = {
@@ -169,10 +197,10 @@ open class RadioGroup(
          * It takes the same parameters as the constructor of the built component.
          */
         fun Container.radioGroup(
-            options: List<StringPair>? = null, value: String? = null, inline: Boolean = false,
+            options: List<StringPair>? = null, value: String? = null, name: String? = null, inline: Boolean = false,
             label: String? = null, rich: Boolean = false, init: (RadioGroup.() -> Unit)? = null
         ): RadioGroup {
-            val radioGroup = RadioGroup(options, value, inline, label, rich).apply { init?.invoke(this) }
+            val radioGroup = RadioGroup(options, value, name, inline, label, rich).apply { init?.invoke(this) }
             this.add(radioGroup)
             return radioGroup
         }