From 857afb0fa7e8bdf435e2bb7cb5d951ba29449362 Mon Sep 17 00:00:00 2001 From: Robert Jaros Date: Tue, 7 May 2019 20:42:30 +0200 Subject: Closable tabs in the TabPanel container. --- .../kvision-bootstrap/src/main/resources/css/style.css | 14 ++++++++++++++ 1 file changed, 14 insertions(+) (limited to 'kvision-modules/kvision-bootstrap/src/main/resources/css/style.css') 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 a0314ced..ddbd5d28 100644 --- a/kvision-modules/kvision-bootstrap/src/main/resources/css/style.css +++ b/kvision-modules/kvision-bootstrap/src/main/resources/css/style.css @@ -163,3 +163,17 @@ ul.tabs-top > li { float:none; flex-shrink: 0; } + +.kv-tab-close { + margin-left: 10px; + color: #000; + text-shadow: 0 1px 0 #fff; + filter: alpha(opacity=20); + opacity: 0.2; +} + +.kv-tab-close:hover, .kv-tab-close:focus { + cursor: pointer; + filter: alpha(opacity=50); + opacity: 0.5; +} -- cgit From a4ff696ce73bd1c4894a6ea444c5fbb048bc1e44 Mon Sep 17 00:00:00 2001 From: Robert Jaros Date: Sat, 11 May 2019 02:38:53 +0200 Subject: Add new SimpleSelect form control. --- .../src/main/resources/css/style.css | 29 +++ .../treksoft/kvision/form/select/SimpleSelect.kt | 209 ++++++++++++++++++++ .../kvision/form/select/SimpleSelectInput.kt | 213 +++++++++++++++++++++ .../kvision/form/select/SimpleSelectInputSpec.kt | 51 +++++ .../kvision/form/select/SimpleSelectSpec.kt | 53 +++++ 5 files changed, 555 insertions(+) create mode 100644 src/main/kotlin/pl/treksoft/kvision/form/select/SimpleSelect.kt create mode 100644 src/main/kotlin/pl/treksoft/kvision/form/select/SimpleSelectInput.kt create mode 100644 src/test/kotlin/test/pl/treksoft/kvision/form/select/SimpleSelectInputSpec.kt create mode 100644 src/test/kotlin/test/pl/treksoft/kvision/form/select/SimpleSelectSpec.kt (limited to 'kvision-modules/kvision-bootstrap/src/main/resources/css/style.css') 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? = 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 { + val cl = super.getSnClass().toMutableList() + if (validatorError != null) { + cl.add("has-error" to true) + } + return cl + } + + @Suppress("UNCHECKED_CAST") + override fun setEventListener(block: SnOn.() -> Unit): Widget { + input.setEventListener(block) + return this + } + + override fun setEventListener(block: SnOn.() -> 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): 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 { + 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? = 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? = null, value: String? = null, emptyOption: Boolean = false, + classes: Set = 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 { + 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 { + val cl = super.getSnClass().toMutableList() + size?.let { + cl.add(it.className to true) + } + return cl + } + + override fun getSnAttrs(): List { + 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? = null, value: String? = null, emptyOption: Boolean = false, + classes: Set = 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( + "", + 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( + "
", + element?.innerHTML, + "Should render correct simple select form control" + ) + } + } + +} -- cgit From f262805b2710f145ef16bb18fee0e53530ef9505 Mon Sep 17 00:00:00 2001 From: Robert Jaros Date: Sat, 11 May 2019 22:01:36 +0200 Subject: Fixed styling of SimpleSelect control. --- kvision-modules/kvision-bootstrap/src/main/resources/css/style.css | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'kvision-modules/kvision-bootstrap/src/main/resources/css/style.css') 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 eac7ddb9..992a5a0b 100644 --- a/kvision-modules/kvision-bootstrap/src/main/resources/css/style.css +++ b/kvision-modules/kvision-bootstrap/src/main/resources/css/style.css @@ -196,6 +196,10 @@ select.form-control option { background-color: white; } +select.input-sm { + line-height: inherit; +} + .tabulator-row .tabulator-cell.tabulator-editing input, .tabulator-row .tabulator-cell.tabulator-editing select { border: 1px solid #ccc; border-radius: 4px; -- cgit From 6416ab05253ee96647541efa9521ff6ec84d8826 Mon Sep 17 00:00:00 2001 From: Robert Jaros Date: Mon, 13 May 2019 15:25:26 +0200 Subject: Small styling fixes of Tabulator editable cells. --- kvision-modules/kvision-bootstrap/src/main/resources/css/style.css | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'kvision-modules/kvision-bootstrap/src/main/resources/css/style.css') 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 992a5a0b..7633ed6c 100644 --- a/kvision-modules/kvision-bootstrap/src/main/resources/css/style.css +++ b/kvision-modules/kvision-bootstrap/src/main/resources/css/style.css @@ -210,3 +210,8 @@ select.input-sm { -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); } + +.tabulator-row .tabulator-cell.tabulator-editing { + border-right: 1px solid #1d68cd !important; + padding: 2px !important; +} -- cgit