Updated Spinner form control.

3 files changed, 95 insertions, 76 deletions

diff --git a/kvision-modules/kvision-bootstrap-spinner/src/main/kotlin/pl/treksoft/kvision/form/spinner/Spinner.kt b/kvision-modules/kvision-bootstrap-spinner/src/main/kotlin/pl/treksoft/kvision/form/spinner/Spinner.kt
index afe085d0..7e3048d1 100644
--- a/kvision-modules/kvision-bootstrap-spinner/src/main/kotlin/pl/treksoft/kvision/form/spinner/Spinner.kt
+++ b/kvision-modules/kvision-bootstrap-spinner/src/main/kotlin/pl/treksoft/kvision/form/spinner/Spinner.kt
@@ -27,6 +27,7 @@ import pl.treksoft.kvision.core.Widget
 import pl.treksoft.kvision.form.FieldLabel
 import pl.treksoft.kvision.form.InvalidFeedback
 import pl.treksoft.kvision.form.NumberFormControl
+import pl.treksoft.kvision.html.ButtonStyle
 import pl.treksoft.kvision.panel.SimplePanel
 import pl.treksoft.kvision.utils.SnOn
 
@@ -47,8 +48,8 @@ import pl.treksoft.kvision.utils.SnOn
  */
 open class Spinner(
     value: Number? = null, name: String? = null, min: Int? = null, max: Int? = null, step: Double = DEFAULT_STEP,
-    decimals: Int = 0, buttonsType: ButtonsType = ButtonsType.VERTICAL,
-    forceType: ForceType = ForceType.NONE, label: String? = null,
+    decimals: Int = 0, val buttonsType: ButtonsType = ButtonsType.VERTICAL,
+    forceType: ForceType = ForceType.NONE, buttonStyle: ButtonStyle? = null, label: String? = null,
     rich: Boolean = false
 ) : SimplePanel(setOf("form-group")), NumberFormControl {
 
@@ -104,14 +105,6 @@ open class Spinner(
             input.decimals = value
         }
     /**
-     * Spinner buttons type.
-     */
-    var buttonsType
-        get() = input.buttonsType
-        set(value) {
-            input.buttonsType = value
-        }
-    /**
      * Spinner force rounding type.
      */
     var forceType
@@ -120,6 +113,14 @@ open class Spinner(
             input.forceType = value
         }
     /**
+     * The style of the up/down buttons.
+     */
+    var buttonStyle
+        get() = input.buttonStyle
+        set(value) {
+            input.buttonStyle = value
+        }
+    /**
      * The placeholder for the spinner input.
      */
     var placeholder
@@ -160,12 +161,24 @@ open class Spinner(
             flabel.rich = value
         }
 
-    protected val idc = "kv_form_spinner_$counter"
-    final override val input: SpinnerInput = SpinnerInput(value, min, max, step, decimals, buttonsType, forceType)
-        .apply {
-            this.id = idc
-            this.name = name
+    override var validatorError: String?
+        get() = super.validatorError
+        set(value) {
+            super.validatorError = value
+            if (value != null) {
+                input.addSurroundingCssClass("is-invalid")
+            } else {
+                input.removeSurroundingCssClass("is-invalid")
+            }
         }
+
+    protected val idc = "kv_form_spinner_$counter"
+    final override val input: SpinnerInput =
+        SpinnerInput(value, min, max, step, decimals, buttonsType, forceType, buttonStyle)
+            .apply {
+                this.id = idc
+                this.name = name
+            }
     final override val flabel: FieldLabel = FieldLabel(idc, label, rich)
     final override val invalidFeedback: InvalidFeedback = InvalidFeedback().apply { visible = false }
 
@@ -230,6 +243,15 @@ open class Spinner(
         input.blur()
     }
 
+    override fun styleForHorizontalFormPanel() {
+        addCssClass("row")
+        flabel.addCssClass("col-sm-2")
+        flabel.addCssClass("col-form-label")
+        input.addSurroundingCssClass("col-sm-10")
+        invalidFeedback.addCssClass("offset-sm-2")
+        invalidFeedback.addCssClass("col-sm-10")
+    }
+
     companion object {
         internal var counter = 0
 
@@ -247,15 +269,17 @@ open class Spinner(
             decimals: Int = 0,
             buttonsType: ButtonsType = ButtonsType.VERTICAL,
             forceType: ForceType = ForceType.NONE,
+            buttonStyle: ButtonStyle? = null,
             label: String? = null,
             rich: Boolean = false,
             init: (Spinner.() -> Unit)? = null
         ): Spinner {
-            val spinner = Spinner(value, name, min, max, step, decimals, buttonsType, forceType, label, rich).apply {
-                init?.invoke(
-                    this
-                )
-            }
+            val spinner =
+                Spinner(value, name, min, max, step, decimals, buttonsType, forceType, buttonStyle, label, rich).apply {
+                    init?.invoke(
+                        this
+                    )
+                }
             this.add(spinner)
             return spinner
         }
diff --git a/kvision-modules/kvision-bootstrap-spinner/src/main/kotlin/pl/treksoft/kvision/form/spinner/SpinnerInput.kt b/kvision-modules/kvision-bootstrap-spinner/src/main/kotlin/pl/treksoft/kvision/form/spinner/SpinnerInput.kt
index d760f34b..c75bbfc4 100644
--- a/kvision-modules/kvision-bootstrap-spinner/src/main/kotlin/pl/treksoft/kvision/form/spinner/SpinnerInput.kt
+++ b/kvision-modules/kvision-bootstrap-spinner/src/main/kotlin/pl/treksoft/kvision/form/spinner/SpinnerInput.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.html.ButtonStyle
 import pl.treksoft.kvision.utils.obj
 
 /**
@@ -64,37 +65,17 @@ internal const val DEFAULT_STEP = 1.0
  * @param decimals number of decimal digits (default 0)
  * @param buttonsType spinner buttons type
  * @param forceType spinner force rounding type
+ * @param buttonStyle the style of the up/down buttons
  * @param classes a set of CSS class names
  */
 @Suppress("TooManyFunctions")
 open class SpinnerInput(
     value: Number? = null, min: Int? = null, max: Int? = null, step: Double = DEFAULT_STEP,
-    decimals: Int = 0, buttonsType: ButtonsType = ButtonsType.VERTICAL,
-    forceType: ForceType = ForceType.NONE,
+    decimals: Int = 0, val buttonsType: ButtonsType = ButtonsType.VERTICAL,
+    forceType: ForceType = ForceType.NONE, buttonStyle: ButtonStyle? = null,
     classes: Set<String> = setOf()
 ) : Widget(classes + "form-control"), FormInput {
 
-    init {
-        this.addSurroundingCssClass("input-group")
-        if (buttonsType == ButtonsType.NONE) {
-            this.addSurroundingCssClass("kv-spinner-btn-none")
-        } else {
-            this.removeSurroundingCssClass("kv-spinner-btn-none")
-        }
-        if (buttonsType == ButtonsType.VERTICAL) {
-            this.addSurroundingCssClass("kv-spinner-btn-vertical")
-        } else {
-            this.removeSurroundingCssClass("kv-spinner-btn-vertical")
-        }
-        this.surroundingSpan = true
-        this.refreshSpinner()
-        this.setInternalEventListener<SpinnerInput> {
-            change = {
-                self.changeValue()
-            }
-        }
-    }
-
     /**
      * Spinner value.
      */
@@ -123,14 +104,14 @@ open class SpinnerInput(
      */
     var decimals by refreshOnUpdate(decimals) { refreshSpinner() }
     /**
-     * Spinner buttons type.
-     */
-    var buttonsType by refreshOnUpdate(buttonsType) { refreshSpinner() }
-    /**
      * Spinner force rounding type.
      */
     var forceType by refreshOnUpdate(forceType) { refreshSpinner() }
     /**
+     * The style of the up/down buttons.
+     */
+    var buttonStyle by refreshOnUpdate(buttonStyle) { refreshSpinner() }
+    /**
      * The placeholder for the spinner input.
      */
     var placeholder: String? by refreshOnUpdate()
@@ -161,6 +142,22 @@ open class SpinnerInput(
 
     private var siblings: JQuery? = null
 
+    init {
+        this.addSurroundingCssClass("input-group")
+        this.addSurroundingCssClass("kv-spinner")
+        when (buttonsType) {
+            ButtonsType.NONE -> this.addSurroundingCssClass("kv-spinner-btn-none")
+            ButtonsType.VERTICAL -> this.addSurroundingCssClass("kv-spinner-btn-vertical")
+            ButtonsType.HORIZONTAL -> this.addSurroundingCssClass("kv-spinner-btn-horizontal")
+        }
+        this.surroundingSpan = true
+        this.setInternalEventListener<SpinnerInput> {
+            change = {
+                self.changeValue()
+            }
+        }
+    }
+
     override fun render(): VNode {
         return render("input")
     }
@@ -281,6 +278,7 @@ open class SpinnerInput(
 
     private fun getSettingsObj(): dynamic {
         val verticalbuttons = buttonsType == ButtonsType.VERTICAL || buttonsType == ButtonsType.NONE
+        val style = buttonStyle
         return obj {
             this.min = min
             this.max = max
@@ -288,12 +286,17 @@ open class SpinnerInput(
             this.decimals = decimals
             this.verticalbuttons = verticalbuttons
             this.forcestepdivisibility = forceType.value
+            if (style != null) {
+                this.buttonup_class = "btn ${style.className}"
+                this.buttondown_class = "btn ${style.className}"
+            } else {
+                this.buttonup_class = "btn btn-secondary"
+                this.buttondown_class = "btn btn-secondary"
+            }
             if (verticalbuttons) {
                 this.verticalup = "<i class=\"fas fa-caret-up\"></i>"
                 this.verticaldown = "<i class=\"fas fa-caret-down\"></i>"
             }
-            this.buttondown_class = "btn btn-default"
-            this.buttonup_class = "btn btn-default"
         }
     }
 
@@ -321,14 +324,15 @@ open class SpinnerInput(
         fun Container.spinnerInput(
             value: Number? = null, min: Int? = null, max: Int? = null, step: Double = DEFAULT_STEP,
             decimals: Int = 0, buttonsType: ButtonsType = ButtonsType.VERTICAL,
-            forceType: ForceType = ForceType.NONE, classes: Set<String> = setOf(),
+            forceType: ForceType = ForceType.NONE, buttonStyle: ButtonStyle? = null, classes: Set<String> = setOf(),
             init: (SpinnerInput.() -> Unit)? = null
         ): SpinnerInput {
-            val spinnerInput = SpinnerInput(value, min, max, step, decimals, buttonsType, forceType, classes).apply {
-                init?.invoke(
-                    this
-                )
-            }
+            val spinnerInput =
+                SpinnerInput(value, min, max, step, decimals, buttonsType, forceType, buttonStyle, classes).apply {
+                    init?.invoke(
+                        this
+                    )
+                }
             this.add(spinnerInput)
             return spinnerInput
         }
diff --git a/src/main/resources/css/style.css b/src/main/resources/css/style.css
index ace7da8c..fccaeb2c 100644
--- a/src/main/resources/css/style.css
+++ b/src/main/resources/css/style.css
@@ -97,37 +97,28 @@ trix-toolbar .trix-button-group {
     min-width: 200px;
 }
 
-/*.bootstrap-select.form-control {
-    border: 1px solid #ced4da !important;
+.kv-spinner-btn-none .input-group-btn-vertical {
+  display: none;
 }
 
-.bootstrap-select.form-control:focus {
-    border-color: #80bdff !important;
-}*/
-
-/*
-
-.bootstrap-touchspin .input-group-btn-vertical> .input-sm {
-  padding: 7px 10px;
-  height: 6px;
+.kv-spinner-btn-none .form-control {
+  border-radius: 4px !important;
 }
 
-.bootstrap-touchspin .input-group-btn-vertical> .input-lg {
-  height: 24px;
+.kv-spinner > span {
+    display: inline-block;
+    width: 100%;
 }
 
-.kv-spinner-btn-none .input-group-btn-vertical {
-  display: none;
+.input-group.kv-spinner {
+    padding-left: 0px;
+    padding-right: 0px;
 }
 
-.kv-spinner-btn-none .form-control {
-  border-radius: 4px !important;
+.kv-spinner.is-invalid~.invalid-feedback {
+    display: block;
 }
 
-.kv-spinner-btn-vertical .form-control {
-  border-radius: 4px 0px 0px 4px !important;
-}*/
-
 .kv-radiogroup-inline label.control-label {
   vertical-align: top;
   margin-right: .75rem;