diff options
Diffstat (limited to 'kvision-modules/kvision-bootstrap-spinner/src')
2 files changed, 83 insertions, 55 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 } |