Add new className parameter to all DSL builder functions.

55 files changed, 368 insertions, 111 deletions

diff --git a/src/main/kotlin/pl/treksoft/kvision/core/Widget.kt b/src/main/kotlin/pl/treksoft/kvision/core/Widget.kt
index 2d2fac29..d077415e 100644
--- a/src/main/kotlin/pl/treksoft/kvision/core/Widget.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/core/Widget.kt
@@ -38,6 +38,7 @@ import pl.treksoft.kvision.utils.SnOn
 import pl.treksoft.kvision.utils.emptyOn
 import pl.treksoft.kvision.utils.hooks
 import pl.treksoft.kvision.utils.on
+import pl.treksoft.kvision.utils.set
 import pl.treksoft.kvision.utils.snAttrs
 import pl.treksoft.kvision.utils.snClasses
 import pl.treksoft.kvision.utils.snOpt
@@ -121,10 +122,12 @@ open class Widget(classes: Set<String> = setOf()) : StyledComponent(), Component
      * A function called after the widget is inserted to the DOM.
      */
     var afterInsertHook: ((VNode) -> Unit)? = null
+
     /**
      * A function called after the widget is removed from the DOM.
      */
     var afterDestroyHook: (() -> Unit)? = null
+
     /**
      * A function called after the widget is disposed.
      */
@@ -756,13 +759,26 @@ open class Widget(classes: Set<String> = setOf()) : StyledComponent(), Component
      */
     protected open fun createLabelWithIcon(
         label: String, icon: String? = null,
-        image: ResString? = null
+        image: ResString? = null,
+        separator: String? = null
     ): Array<out Any> {
         val translatedLabel = translate(label)
         return if (icon != null) {
-            arrayOf(KVManager.virtualize("<i class='$icon'></i>"), " $translatedLabel")
+            if (separator == null) {
+                arrayOf(KVManager.virtualize("<i class='$icon'></i>"), " $translatedLabel")
+            } else {
+                arrayOf(KVManager.virtualize("<i class='$icon'></i>"), KVManager.virtualize(separator), translatedLabel)
+            }
         } else if (image != null) {
-            arrayOf(KVManager.virtualize("<img src='$image' alt='' />"), " $translatedLabel")
+            if (separator == null) {
+                arrayOf(KVManager.virtualize("<img src='$image' alt='' />"), " $translatedLabel")
+            } else {
+                arrayOf(
+                    KVManager.virtualize("<img src='$image' alt='' />"),
+                    KVManager.virtualize(separator),
+                    translatedLabel
+                )
+            }
         } else {
             arrayOf(translatedLabel)
         }
@@ -842,8 +858,12 @@ open class Widget(classes: Set<String> = setOf()) : StyledComponent(), Component
  *
  * It takes the same parameters as the constructor of the built component.
  */
-fun Container.widget(classes: Set<String> = setOf(), init: (Widget.() -> Unit)? = null): Widget {
-    val widget = Widget(classes).apply { init?.invoke(this) }
+fun Container.widget(
+    classes: Set<String>? = null,
+    className: String? = null,
+    init: (Widget.() -> Unit)? = null
+): Widget {
+    val widget = Widget(classes ?: className.set).apply { init?.invoke(this) }
     this.add(widget)
     return widget
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/core/WidgetWrapper.kt b/src/main/kotlin/pl/treksoft/kvision/core/WidgetWrapper.kt
index 1d5ada90..aec7c7ab 100644
--- a/src/main/kotlin/pl/treksoft/kvision/core/WidgetWrapper.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/core/WidgetWrapper.kt
@@ -23,6 +23,7 @@ package pl.treksoft.kvision.core
 
 import com.github.snabbdom.VNode
 import pl.treksoft.kvision.panel.SimplePanel
+import pl.treksoft.kvision.utils.set
 
 /**
  * This class allows to wrap a component into separately styled DIV element.
@@ -63,10 +64,11 @@ open class WidgetWrapper(internal var wrapped: Component?, classes: Set<String>
  */
 fun Container.widgetWrapper(
     wrapped: Component?,
-    classes: Set<String> = setOf(),
+    classes: Set<String>? = null,
+    className: String? = null,
     init: (WidgetWrapper.() -> Unit)? = null
 ): WidgetWrapper {
-    val widgetWrapper = WidgetWrapper(wrapped, classes).apply { init?.invoke(this) }
+    val widgetWrapper = WidgetWrapper(wrapped, classes ?: className.set).apply { init?.invoke(this) }
     this.add(widgetWrapper)
     return widgetWrapper
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/FieldLabel.kt b/src/main/kotlin/pl/treksoft/kvision/form/FieldLabel.kt
index 8413eb3c..e9be793c 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/FieldLabel.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/FieldLabel.kt
@@ -25,6 +25,7 @@ import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.StringPair
 import pl.treksoft.kvision.html.TAG
 import pl.treksoft.kvision.html.Tag
+import pl.treksoft.kvision.utils.set
 
 /**
  * Helper class for HTML label element.
@@ -37,7 +38,7 @@ import pl.treksoft.kvision.html.Tag
  */
 open class FieldLabel(
     internal val forId: String, content: String? = null, rich: Boolean = false,
-    classes: Set<String> = setOf("control-label")
+    classes: Set<String> = setOf()
 ) : Tag(
     TAG.LABEL,
     content, rich, classes = classes
@@ -55,9 +56,11 @@ open class FieldLabel(
  */
 fun Container.fieldLabel(
     forId: String, content: String? = null, rich: Boolean = false,
-    classes: Set<String> = setOf("control-label"), init: (FieldLabel.() -> Unit)? = null
+    classes: Set<String>? = null,
+    className: String? = null,
+    init: (FieldLabel.() -> Unit)? = null
 ): FieldLabel {
-    val fieldLabel = FieldLabel(forId, content, rich, classes).apply { init?.invoke(this) }
+    val fieldLabel = FieldLabel(forId, content, rich, classes ?: className.set).apply { init?.invoke(this) }
     this.add(fieldLabel)
     return fieldLabel
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/FormPanel.kt b/src/main/kotlin/pl/treksoft/kvision/form/FormPanel.kt
index 8f918a97..7353179a 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/FormPanel.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/FormPanel.kt
@@ -33,6 +33,7 @@ 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 pl.treksoft.kvision.utils.set
 import kotlin.js.Date
 import kotlin.js.Json
 import kotlin.reflect.KClass
@@ -504,11 +505,13 @@ open class FormPanel<K : Any>(
 inline fun <reified K : Any> Container.formPanel(
     method: FormMethod? = null, action: String? = null, enctype: FormEnctype? = null,
     type: FormType? = null, condensed: Boolean = false,
-    horizRatio: FormHorizontalRatio = FormHorizontalRatio.RATIO_2, classes: Set<String> = setOf(),
+    horizRatio: FormHorizontalRatio = FormHorizontalRatio.RATIO_2,
+    classes: Set<String>? = null, className: String? = null,
     customSerializers: Map<KClass<*>, KSerializer<*>>? = null,
     noinline init: (FormPanel<K>.() -> Unit)? = null
 ): FormPanel<K> {
-    val formPanel = create<K>(method, action, enctype, type, condensed, horizRatio, classes, customSerializers)
+    val formPanel =
+        create<K>(method, action, enctype, type, condensed, horizRatio, classes ?: className.set, customSerializers)
     init?.invoke(formPanel)
     this.add(formPanel)
     return formPanel
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/check/CheckBoxInput.kt b/src/main/kotlin/pl/treksoft/kvision/form/check/CheckBoxInput.kt
index ea8bf7db..5b91d635 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/check/CheckBoxInput.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/check/CheckBoxInput.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.form.check
 
 import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.utils.set
 
 /**
  * The basic input component rendered as HTML *input type="checkbox"*.
@@ -42,9 +43,11 @@ open class CheckBoxInput(
  */
 fun Container.checkBoxInput(
     value: Boolean = false,
-    classes: Set<String> = setOf(), init: (CheckInput.() -> Unit)? = null
+    classes: Set<String>? = null,
+    className: String? = null,
+    init: (CheckInput.() -> Unit)? = null
 ): CheckBoxInput {
-    val checkBoxInput = CheckBoxInput(value, classes).apply { init?.invoke(this) }
+    val checkBoxInput = CheckBoxInput(value, classes ?: className.set).apply { init?.invoke(this) }
     this.add(checkBoxInput)
     return checkBoxInput
 }
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 b162abc8..234f5327 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/check/RadioGroup.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/check/RadioGroup.kt
@@ -117,7 +117,7 @@ open class RadioGroup(
 
     private val idc = "kv_form_radiogroup_$counter"
     final override val input = RadioInput()
-    final override val flabel: FieldLabel = FieldLabel(idc, label, rich)
+    final override val flabel: FieldLabel = FieldLabel(idc, label, rich, setOf("control-label"))
     final override val invalidFeedback: InvalidFeedback = InvalidFeedback().apply { visible = false }
 
     internal val container = SimplePanel(setOf("kv-radiogroup-container"))
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/check/RadioInput.kt b/src/main/kotlin/pl/treksoft/kvision/form/check/RadioInput.kt
index 72bb4cd0..1f8a3b9d 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/check/RadioInput.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/check/RadioInput.kt
@@ -22,6 +22,7 @@
 package pl.treksoft.kvision.form.check
 
 import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.utils.set
 
 /**
  * The basic input component rendered as HTML *input type="radio"*.
@@ -42,9 +43,11 @@ open class RadioInput(
  */
 fun Container.radioInput(
     value: Boolean = false,
-    classes: Set<String> = setOf(), init: (CheckInput.() -> Unit)? = null
+    classes: Set<String>? = null,
+    className: String? = null,
+    init: (CheckInput.() -> Unit)? = null
 ): RadioInput {
-    val checkBoxInput = RadioInput(value, classes).apply { init?.invoke(this) }
+    val checkBoxInput = RadioInput(value, classes ?: className.set).apply { init?.invoke(this) }
     this.add(checkBoxInput)
     return checkBoxInput
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/range/Range.kt b/src/main/kotlin/pl/treksoft/kvision/form/range/Range.kt
index a54ccddb..dc8e57a0 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/range/Range.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/range/Range.kt
@@ -140,7 +140,7 @@ open class Range(
         this.id = idc
         this.name = name
     }
-    final override val flabel: FieldLabel = FieldLabel(idc, label, rich)
+    final override val flabel: FieldLabel = FieldLabel(idc, label, rich, setOf("control-label"))
     final override val invalidFeedback: InvalidFeedback = InvalidFeedback().apply { visible = false }
 
     init {
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/range/RangeInput.kt b/src/main/kotlin/pl/treksoft/kvision/form/range/RangeInput.kt
index dc9ad7d4..4649c654 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/range/RangeInput.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/range/RangeInput.kt
@@ -30,6 +30,7 @@ import pl.treksoft.kvision.core.Widget
 import pl.treksoft.kvision.form.FormInput
 import pl.treksoft.kvision.form.InputSize
 import pl.treksoft.kvision.form.ValidationStatus
+import pl.treksoft.kvision.utils.set
 
 internal const val DEFAULT_STEP = 1
 
@@ -52,6 +53,7 @@ open class RangeInput(
      * Range input value.
      */
     var value by refreshOnUpdate(value ?: (min as Number?)) { refreshState() }
+
     /**
      * The value attribute of the generated HTML input element.
      *
@@ -59,38 +61,47 @@ open class RangeInput(
      * bound to the range input value.
      */
     var startValue by refreshOnUpdate(value) { this.value = it; refresh() }
+
     /**
      * Minimal value.
      */
     var min by refreshOnUpdate(min)
+
     /**
      * Maximal value.
      */
     var max by refreshOnUpdate(max)
+
     /**
      * Step value.
      */
     var step by refreshOnUpdate(step)
+
     /**
      * The name attribute of the generated HTML input element.
      */
     override var name: String? by refreshOnUpdate()
+
     /**
      * Determines if the field is disabled.
      */
     override var disabled by refreshOnUpdate(false)
+
     /**
      * Determines if the range input is automatically focused.
      */
     var autofocus: Boolean? by refreshOnUpdate()
+
     /**
      * Determines if the range input is read-only.
      */
     var readonly: Boolean? by refreshOnUpdate()
+
     /**
      * The size of the input.
      */
     override var size: InputSize? by refreshOnUpdate()
+
     /**
      * The validation status of the input.
      */
@@ -221,9 +232,11 @@ open class RangeInput(
  */
 fun Container.rangeInput(
     value: Number? = null, min: Number = 0, max: Number = 100, step: Number = DEFAULT_STEP,
-    classes: Set<String> = setOf(), init: (RangeInput.() -> Unit)? = null
+    classes: Set<String>? = null,
+    className: String? = null,
+    init: (RangeInput.() -> Unit)? = null
 ): RangeInput {
-    val rangeInput = RangeInput(value, min, max, step, classes).apply { init?.invoke(this) }
+    val rangeInput = RangeInput(value, min, max, step, classes ?: className.set).apply { init?.invoke(this) }
     this.add(rangeInput)
     return rangeInput
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/select/SimpleSelect.kt b/src/main/kotlin/pl/treksoft/kvision/form/select/SimpleSelect.kt
index 4d47a239..e797e050 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/select/SimpleSelect.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/select/SimpleSelect.kt
@@ -116,7 +116,7 @@ open class SimpleSelect(
         this.id = idc
         this.name = name
     }
-    final override val flabel: FieldLabel = FieldLabel(idc, label, rich)
+    final override val flabel: FieldLabel = FieldLabel(idc, label, rich, setOf("control-label"))
     final override val invalidFeedback: InvalidFeedback = InvalidFeedback().apply { visible = false }
 
     init {
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/select/SimpleSelectInput.kt b/src/main/kotlin/pl/treksoft/kvision/form/select/SimpleSelectInput.kt
index bc99f514..63eb98b5 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/select/SimpleSelectInput.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/select/SimpleSelectInput.kt
@@ -31,6 +31,7 @@ import pl.treksoft.kvision.form.ValidationStatus
 import pl.treksoft.kvision.html.TAG
 import pl.treksoft.kvision.html.Tag
 import pl.treksoft.kvision.panel.SimplePanel
+import pl.treksoft.kvision.utils.set
 
 internal const val KVNULL = "#kvnull"
 
@@ -57,6 +58,7 @@ open class SimpleSelectInput(
      * Text input value.
      */
     var value by refreshOnUpdate(value) { refreshState() }
+
     /**
      * The value of the selected child option.
      *
@@ -64,26 +66,32 @@ open class SimpleSelectInput(
      * bound to the select component.
      */
     var startValue by refreshOnUpdate(value) { this.value = it; selectOption() }
+
     /**
      * The name attribute of the generated HTML input element.
      */
     override var name: String? by refreshOnUpdate()
+
     /**
      * Determines if the field is disabled.
      */
     override var disabled by refreshOnUpdate(false)
+
     /**
      * Determines if the text input is automatically focused.
      */
     var autofocus: Boolean? by refreshOnUpdate()
+
     /**
      * Determines if an empty option is automatically generated.
      */
     var emptyOption by refreshOnUpdate(emptyOption) { setChildrenFromOptions() }
+
     /**
      * The size of the input.
      */
     override var size: InputSize? by refreshOnUpdate()
+
     /**
      * The validation status of the input.
      */
@@ -208,9 +216,12 @@ open class SimpleSelectInput(
  */
 fun Container.simpleSelectInput(
     options: List<StringPair>? = null, value: String? = null, emptyOption: Boolean = false,
-    classes: Set<String> = setOf(), init: (SimpleSelectInput.() -> Unit)? = null
+    classes: Set<String>? = null,
+    className: String? = null,
+    init: (SimpleSelectInput.() -> Unit)? = null
 ): SimpleSelectInput {
-    val simpleSelectInput = SimpleSelectInput(options, value, emptyOption, classes).apply { init?.invoke(this) }
+    val simpleSelectInput =
+        SimpleSelectInput(options, value, emptyOption, classes ?: className.set).apply { init?.invoke(this) }
     this.add(simpleSelectInput)
     return simpleSelectInput
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/text/AbstractText.kt b/src/main/kotlin/pl/treksoft/kvision/form/text/AbstractText.kt
index d887e814..8a5acf8b 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/text/AbstractText.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/text/AbstractText.kt
@@ -113,7 +113,7 @@ abstract class AbstractText(label: String? = null, rich: Boolean = false) :
      */
     protected val idc = "kv_form_text_$counter"
     abstract override val input: AbstractTextInput
-    final override val flabel: FieldLabel = FieldLabel(idc, label, rich)
+    final override val flabel: FieldLabel = FieldLabel(idc, label, rich, setOf("control-label"))
     final override val invalidFeedback: InvalidFeedback = InvalidFeedback().apply { visible = false }
 
     init {
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/text/TextAreaInput.kt b/src/main/kotlin/pl/treksoft/kvision/form/text/TextAreaInput.kt
index acad7853..9503a0b1 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/text/TextAreaInput.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/text/TextAreaInput.kt
@@ -24,6 +24,7 @@ package pl.treksoft.kvision.form.text
 import com.github.snabbdom.VNode
 import pl.treksoft.kvision.core.Container
 import pl.treksoft.kvision.core.StringPair
+import pl.treksoft.kvision.utils.set
 
 /**
  * Basic textarea component.
@@ -41,10 +42,12 @@ open class TextAreaInput(cols: Int? = null, rows: Int? = null, value: String? =
      * Number of columns.
      */
     var cols by refreshOnUpdate(cols)
+
     /**
      * Number of rows.
      */
     var rows by refreshOnUpdate(rows)
+
     /**
      * Determines if hard wrapping is enabled for the textarea element.
      */
@@ -77,10 +80,12 @@ open class TextAreaInput(cols: Int? = null, rows: Int? = null, value: String? =
  * It takes the same parameters as the constructor of the built component.
  */
 fun Container.textAreaInput(
-    cols: Int? = null, rows: Int? = null, value: String? = null, classes: Set<String> = setOf(),
+    cols: Int? = null, rows: Int? = null, value: String? = null,
+    classes: Set<String>? = null,
+    className: String? = null,
     init: (TextAreaInput.() -> Unit)? = null
 ): TextAreaInput {
-    val textAreaInput = TextAreaInput(cols, rows, value, classes).apply { init?.invoke(this) }
+    val textAreaInput = TextAreaInput(cols, rows, value, classes ?: className.set).apply { init?.invoke(this) }
     this.add(textAreaInput)
     return textAreaInput
 }
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/text/TextInput.kt b/src/main/kotlin/pl/treksoft/kvision/form/text/TextInput.kt
index d057dcbd..e50e1b30 100644
--- a/src/main/kotlin/pl/treksoft/kvision/form/text/TextInput.kt
+++ b/src/main/kotlin/pl/treksoft/kvision/form/text/TextInput.kt
@@ -24,6 +24,7 @@ package pl.treksoft.kvision.form.text
 import com.github.snabbdom.VNode
 import pl.treksoft.kvision.core.Container