Add new SimpleSelect form control.

5 files changed, 555 insertions, 0 deletions

diff --git a/kvision-modules/kvision-bootstrap/src/main/resources/css/style.css b/kvision-modules/kvision-bootstrap/src/main/resources/css/style.css
index ddbd5d28..eac7ddb9 100644
--- a/kvision-modules/kvision-bootstrap/src/main/resources/css/style.css
+++ b/kvision-modules/kvision-bootstrap/src/main/resources/css/style.css
@@ -177,3 +177,32 @@ ul.tabs-top > li {
     filter: alpha(opacity=50);
     opacity: 0.5;
 }
+
+select.form-control, .tabulator-row .tabulator-cell.tabulator-editing select {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background: transparent none no-repeat;
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAKCAYAAABblxXYAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4wUKFyIn4IjqJgAAAENJREFUKM/l0LERACEQQlGsiTa2px1aokGugNNAx8wfMy8AeLoBALYjaTqoKkga2+gKPgF/2Q7JkEx359oftu+C7/UBCUIcVQz0PvcAAAAASUVORK5CYII=');
+    background-position: right center;
+    cursor: pointer;
+}
+
+select.form-control:hover {
+    background-color: #e6e6e6;
+}
+
+select.form-control option {
+    background-color: white;
+}
+
+.tabulator-row .tabulator-cell.tabulator-editing input, .tabulator-row .tabulator-cell.tabulator-editing select {
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}
+
+.tabulator-row .tabulator-cell.tabulator-editing input:focus, .tabulator-row .tabulator-cell.tabulator-editing select:focus {
+    border-color: #66afe9;
+    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
+}
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/select/SimpleSelect.kt b/src/main/kotlin/pl/treksoft/kvision/form/select/SimpleSelect.kt
new file mode 100644
index 00000000..4d278ad2
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/form/select/SimpleSelect.kt
@@ -0,0 +1,209 @@
+/*
+ * 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.form.select
+
+import pl.treksoft.kvision.core.Component
+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.StringFormControl
+import pl.treksoft.kvision.panel.SimplePanel
+import pl.treksoft.kvision.utils.SnOn
+
+/**
+ * The form field component for SimpleSelect control.
+ *
+ * @constructor
+ * @param options an optional list of options (value to label pairs) for the select control
+ * @param value selected value
+ * @param emptyOption determines if an empty option is automatically generated
+ * @param name the name attribute of the generated HTML input element
+ * @param label label text bound to the input element
+ * @param rich determines if [label] can contain HTML code
+ */
+@Suppress("TooManyFunctions")
+open class SimpleSelect(
+    options: List<StringPair>? = null, value: String? = null, emptyOption: Boolean = false,
+    name: String? = null, label: String? = null, rich: Boolean = false
+) : SimplePanel(setOf("form-group")), StringFormControl {
+
+    /**
+     * A list of options (value to label pairs) for the select control.
+     */
+    var options
+        get() = input.options
+        set(value) {
+            input.options = value
+        }
+    /**
+     * A value of the selected option.
+     */
+    override var value
+        get() = input.value
+        set(value) {
+            input.value = value
+        }
+    /**
+     * The value of the selected child option.
+     *
+     * This value is placed directly in the generated HTML code, while the [value] property is dynamically
+     * bound to the select component.
+     */
+    var startValue
+        get() = input.startValue
+        set(value) {
+            input.startValue = value
+        }
+    /**
+     * Determines if an empty option is automatically generated.
+     */
+    var emptyOption
+        get() = input.emptyOption
+        set(value) {
+            input.emptyOption = value
+        }
+    /**
+     * Determines if the select is automatically focused.
+     */
+    var autofocus
+        get() = input.autofocus
+        set(value) {
+            input.autofocus = value
+        }
+    /**
+     * The label text bound to the select element.
+     */
+    var label
+        get() = flabel.content
+        set(value) {
+            flabel.content = value
+        }
+    /**
+     * Determines if [label] can contain HTML code.
+     */
+    var rich
+        get() = flabel.rich
+        set(value) {
+            flabel.rich = value
+        }
+
+    private val idc = "kv_form_simpleselect_$counter"
+    final override val input: SimpleSelectInput = SimpleSelectInput(
+        options, value, emptyOption, setOf("form-control")
+    ).apply {
+        this.id = idc
+        this.name = name
+    }
+    final override val flabel: FieldLabel = FieldLabel(idc, label, rich)
+    final override val validationInfo: HelpBlock = HelpBlock().apply { visible = false }
+
+    init {
+        @Suppress("LeakingThis")
+        input.eventTarget = this
+        this.addInternal(flabel)
+        this.addInternal(input)
+        this.addInternal(validationInfo)
+        counter++
+    }
+
+    override fun getSnClass(): List<StringBoolPair> {
+        val cl = super.getSnClass().toMutableList()
+        if (validatorError != null) {
+            cl.add("has-error" to true)
+        }
+        return cl
+    }
+
+    @Suppress("UNCHECKED_CAST")
+    override fun <T : Widget> setEventListener(block: SnOn<T>.() -> Unit): Widget {
+        input.setEventListener(block)
+        return this
+    }
+
+    override fun setEventListener(block: SnOn<Widget>.() -> Unit): Widget {
+        input.setEventListener(block)
+        return this
+    }
+
+    override fun removeEventListeners(): Widget {
+        input.removeEventListeners()
+        return this
+    }
+
+    override fun add(child: Component): SimplePanel {
+        input.add(child)
+        return this
+    }
+
+    override fun addAll(children: List<Component>): SimplePanel {
+        input.addAll(children)
+        return this
+    }
+
+    override fun remove(child: Component): SimplePanel {
+        input.remove(child)
+        return this
+    }
+
+    override fun removeAll(): SimplePanel {
+        input.removeAll()
+        return this
+    }
+
+    override fun getChildren(): List<Component> {
+        return input.getChildren()
+    }
+
+    override fun focus() {
+        input.focus()
+    }
+
+    override fun blur() {
+        input.blur()
+    }
+
+    companion object {
+        internal var counter = 0
+
+        /**
+         * DSL builder extension function.
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.simpleSelect(
+            options: List<StringPair>? = null,
+            value: String? = null,
+            emptyOption: Boolean = false,
+            name: String? = null,
+            label: String? = null,
+            rich: Boolean = false,
+            init: (SimpleSelect.() -> Unit)? = null
+        ): SimpleSelect {
+            val simpleSelect = SimpleSelect(options, value, emptyOption, name, label, rich).apply { init?.invoke(this) }
+            this.add(simpleSelect)
+            return simpleSelect
+        }
+    }
+}
diff --git a/src/main/kotlin/pl/treksoft/kvision/form/select/SimpleSelectInput.kt b/src/main/kotlin/pl/treksoft/kvision/form/select/SimpleSelectInput.kt
new file mode 100644
index 00000000..df334c1c
--- /dev/null
+++ b/src/main/kotlin/pl/treksoft/kvision/form/select/SimpleSelectInput.kt
@@ -0,0 +1,213 @@
+/*
+ * 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.form.select
+
+import com.github.snabbdom.VNode
+import pl.treksoft.kvision.core.Container
+import pl.treksoft.kvision.core.StringBoolPair
+import pl.treksoft.kvision.core.StringPair
+import pl.treksoft.kvision.form.FormInput
+import pl.treksoft.kvision.form.InputSize
+import pl.treksoft.kvision.html.TAG
+import pl.treksoft.kvision.html.Tag
+import pl.treksoft.kvision.panel.SimplePanel
+
+internal const val KVNULL = "#kvnull"
+
+/**
+ * Simple select component.
+ *
+ * @constructor
+ * @param options an optional list of options (value to label pairs) for the select control
+ * @param value text input value
+ * @param emptyOption determines if an empty option is automatically generated
+ * @param classes a set of CSS class names
+ */
+open class SimpleSelectInput(
+    options: List<StringPair>? = null, value: String? = null, emptyOption: Boolean = false,
+    classes: Set<String> = setOf()
+) : SimplePanel(classes + "form-control"), FormInput {
+
+    /**
+     * A list of options (value to label pairs) for the select control.
+     */
+    var options by refreshOnUpdate(options) { setChildrenFromOptions() }
+
+    /**
+     * Text input value.
+     */
+    var value by refreshOnUpdate(value) { refreshState() }
+    /**
+     * The value of the selected child option.
+     *
+     * This value is placed directly in the generated HTML code, while the [value] property is dynamically
+     * 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()
+
+    init {
+        this.vnkey = "kv_simpleselectinput_${counter++}"
+        setChildrenFromOptions()
+        this.setInternalEventListener<SimpleSelectInput> {
+            change = {
+                self.changeValue()
+            }
+        }
+    }
+
+    override fun render(): VNode {
+        return render("select", childrenVNodes())
+    }
+
+    private fun setChildrenFromOptions() {
+        super.removeAll()
+        if (emptyOption) {
+            super.add(Tag(TAG.OPTION, "", attributes = mapOf("value" to KVNULL)))
+        }
+        options?.let {
+            val c = it.map {
+                val attributes = if (it.first == value) {
+                    mapOf("value" to it.first, "selected" to "selected")
+                } else {
+                    mapOf("value" to it.first)
+                }
+                Tag(TAG.OPTION, it.second, attributes = attributes)
+            }
+            super.addAll(c)
+        }
+    }
+
+    private fun selectOption() {
+        children.forEach { child ->
+            if (child is Tag && child.type == TAG.OPTION) {
+                if (value != null && child.getAttribute("value") == value) {
+                    child.setAttribute("selected", "selected")
+                } else {
+                    child.removeAttribute("selected")
+                }
+            }
+        }
+    }
+
+    override fun getSnClass(): List<StringBoolPair> {
+        val cl = super.getSnClass().toMutableList()
+        size?.let {
+            cl.add(it.className to true)
+        }
+        return cl
+    }
+
+    override fun getSnAttrs(): List<StringPair> {
+        val sn = super.getSnAttrs().toMutableList()
+        name?.let {
+            sn.add("name" to it)
+        }
+        autofocus?.let {
+            if (it) {
+                sn.add("autofocus" to "autofocus")
+            }
+        }
+        if (disabled) {
+            sn.add("disabled" to "disabled")
+        }
+        return sn
+    }
+
+    override fun afterInsert(node: VNode) {
+        refreshState()
+    }
+
+    /**
+     * @suppress
+     * Internal function
+     */
+    protected open fun refreshState() {
+        value?.let {
+            getElementJQuery()?.`val`(it)
+        } ?: getElementJQueryD()?.`val`(null)
+    }
+
+    /**
+     * @suppress
+     * Internal function
+     */
+    protected open fun changeValue() {
+        val v = getElementJQuery()?.`val`() as String?
+        if (v != null && v.isNotEmpty() && v != KVNULL) {
+            this.value = v
+        } else {
+            this.value = null
+        }
+    }
+
+    /**
+     * Makes the input element focused.
+     */
+    override fun focus() {
+        getElementJQuery()?.focus()
+    }
+
+    /**
+     * Makes the input element blur.
+     */
+    override fun blur() {
+        getElementJQuery()?.blur()
+    }
+
+    companion object {
+        internal var counter = 0
+
+        /**
+         * DSL builder extension function.
+         *
+         * It takes the same parameters as the constructor of the built component.
+         */
+        fun Container.simpleSelectInput(
+            options: List<StringPair>? = null, value: String? = null, emptyOption: Boolean = false,
+            classes: Set<String> = setOf(), init: (SimpleSelectInput.() -> Unit)? = null
+        ): SimpleSelectInput {
+            val simpleSelectInput = SimpleSelectInput(options, value, emptyOption, classes).apply { init?.invoke(this) }
+            this.add(simpleSelectInput)
+            return simpleSelectInput
+        }
+    }
+}
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/form/select/SimpleSelectInputSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/form/select/SimpleSelectInputSpec.kt
new file mode 100644
index 00000000..b2c77d10
--- /dev/null
+++ b/src/test/kotlin/test/pl/treksoft/kvision/form/select/SimpleSelectInputSpec.kt
@@ -0,0 +1,51 @@
+/*
+ * 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 test.pl.treksoft.kvision.form.select
+
+import pl.treksoft.kvision.form.select.SimpleSelectInput
+import pl.treksoft.kvision.panel.Root
+import test.pl.treksoft.kvision.DomSpec
+import kotlin.browser.document
+import kotlin.test.Test
+
+class SimpleSelectInputSpec : DomSpec {
+
+    @Test
+    fun render() {
+        run {
+            val root = Root("test", fixed = true)
+            val si = SimpleSelectInput(listOf("test1" to "Test 1", "test2" to "Test 2"), "test1", true).apply {
+                name = "name"
+                id = "idti"
+                disabled = true
+            }
+            root.add(si)
+            val element = document.getElementById("test")
+            assertEqualsHtml(
+                "<select class=\"form-control\" id=\"idti\" name=\"name\" disabled=\"disabled\"><option value=\"#kvnull\"></option><option value=\"test1\" selected=\"selected\">Test 1</option><option value=\"test2\">Test 2</option></select>",
+                element?.innerHTML,
+                "Should render correct simple select input control"
+            )
+        }
+    }
+
+}
diff --git a/src/test/kotlin/test/pl/treksoft/kvision/form/select/SimpleSelectSpec.kt b/src/test/kotlin/test/pl/treksoft/kvision/form/select/SimpleSelectSpec.kt
new file mode 100644
index 00000000..db1c36f0
--- /dev/null
+++ b/src/test/kotlin/test/pl/treksoft/kvision/form/select/SimpleSelectSpec.kt
@@ -0,0 +1,53 @@
+/*
+ * 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 test.pl.treksoft.kvision.form.select
+
+import pl.treksoft.kvision.form.select.SimpleSelect
+import pl.treksoft.kvision.panel.Root
+import test.pl.treksoft.kvision.DomSpec
+import kotlin.browser.document
+import kotlin.test.Test
+
+class SimpleSelectSpec : DomSpec {
+
+    @Test
+    fun render() {
+        run {
+            val root = Root("test", fixed = true)
+            val select =
+                SimpleSelect(listOf("test1" to "Test 1", "test2" to "Test 2"), "test1", true, "select", "Label").apply {
+                    name = "name"
+                    id = "idti"
+                    disabled = true
+                }
+            root.add(select)
+            val element = document.getElementById("test")
+            val id = select.input.id
+            assertEqualsHtml(
+                "<div class=\"form-group\" id=\"idti\"><label class=\"control-label\" for=\"$id\">Label</label><select class=\"form-control\" id=\"$id\" name=\"name\" disabled=\"disabled\"><option value=\"#kvnull\"></option><option value=\"test1\" selected=\"selected\">Test 1</option><option value=\"test2\">Test 2</option></select></div>",
+                element?.innerHTML,
+                "Should render correct simple select form control"
+            )
+        }
+    }
+
+}