diff options
Diffstat (limited to 'src/main/kotlin/pl/treksoft/kvision')
16 files changed, 503 insertions, 32 deletions
diff --git a/src/main/kotlin/pl/treksoft/kvision/Showcase.kt b/src/main/kotlin/pl/treksoft/kvision/Showcase.kt index ab88be28..bf0691e1 100644 --- a/src/main/kotlin/pl/treksoft/kvision/Showcase.kt +++ b/src/main/kotlin/pl/treksoft/kvision/Showcase.kt @@ -1,18 +1,15 @@ package pl.treksoft.kvision import pl.treksoft.kvision.basic.Label -import pl.treksoft.kvision.core.Container -import pl.treksoft.kvision.core.Img -import pl.treksoft.kvision.core.Root -import pl.treksoft.kvision.css.BGATTACH -import pl.treksoft.kvision.css.BGREPEAT -import pl.treksoft.kvision.css.BGSIZE -import pl.treksoft.kvision.css.BORDERSTYLE -import pl.treksoft.kvision.css.Background -import pl.treksoft.kvision.css.Border -import pl.treksoft.kvision.css.COLOR +import pl.treksoft.kvision.core.* import pl.treksoft.kvision.dropdown.DD.* import pl.treksoft.kvision.dropdown.DropDown +import pl.treksoft.kvision.form.CHECKBOXSTYLE +import pl.treksoft.kvision.form.CheckBox +import pl.treksoft.kvision.form.INPUTSIZE +import pl.treksoft.kvision.form.TEXTINPUTTYPE +import pl.treksoft.kvision.form.Text +import pl.treksoft.kvision.form.TextInput import pl.treksoft.kvision.html.* import pl.treksoft.kvision.html.TAG.DIV import pl.treksoft.kvision.html.TAG.H1 @@ -44,6 +41,37 @@ class Showcase : ApplicationBase() { link.add(Tag(TAG.P, "Cośtam")) root.add(link) + val textField = TextInput(placeholder = "Wprowadź hasło ...", value = "abc") + root.add(textField) + textField.setEventListener<TextInput> { + input = { e -> + println("i" + self.value) + } + change = { e -> + println("c" + self.value) + } + } + val passwordField = TextInput(TEXTINPUTTYPE.PASSWORD) + root.add(passwordField) + + val textField2 = TextInput(placeholder = "Disabled") + textField2.disabled = true + textField2.size = INPUTSIZE.LARGE + root.add(textField2) + + val checkbox = CheckBox(true, label = "Kliknij aby <b>przetestować</b>", rich = true, circled = true, + style = CHECKBOXSTYLE.DANGER) + root.add(checkbox) + checkbox.setEventListener<CheckBox> { + click = { e -> + println("click" + self.value) + } + change = { e -> println("change" + self.value) } + } + + val text = Text(placeholder = "Pole formularza", maxlength = 5, label = "To jest pole") + root.add(text) + val dd = DropDown("Dropdown", listOf("abc" to "#!/x", "def" to "#!/y"), "flag") root.add(dd) dd.setEventListener<DropDown> { @@ -206,6 +234,8 @@ class Showcase : ApplicationBase() { button.setEventListener<Button> { click = { _ -> println(self.text) + println(textField.value) + println(checkbox.value) grid4.colorHex = 0xff0000 dd3.text = "Zmiana" dd3.style = BUTTONSTYLE.WARNING diff --git a/src/main/kotlin/pl/treksoft/kvision/css/Css.kt b/src/main/kotlin/pl/treksoft/kvision/core/Css.kt index e2a4122b..eba7782a 100644 --- a/src/main/kotlin/pl/treksoft/kvision/css/Css.kt +++ b/src/main/kotlin/pl/treksoft/kvision/core/Css.kt @@ -1,6 +1,5 @@ -package pl.treksoft.kvision.css +package pl.treksoft.kvision.core -import pl.treksoft.kvision.core.ResString import pl.treksoft.kvision.utils.Utils @Suppress("EnumNaming", "EnumEntryName") diff --git a/src/main/kotlin/pl/treksoft/kvision/core/KVManager.kt b/src/main/kotlin/pl/treksoft/kvision/core/KVManager.kt index aa7d7a4a..e394db73 100644 --- a/src/main/kotlin/pl/treksoft/kvision/core/KVManager.kt +++ b/src/main/kotlin/pl/treksoft/kvision/core/KVManager.kt @@ -18,6 +18,7 @@ object KVManager { private val bootstrapWebpack = require("bootstrap-webpack") private val fontAwesomeWebpack = require("font-awesome-webpack") private val resizable = require("jquery-resizable-dom") + private val awesomeBootstrapCheckbox = require("awesome-bootstrap-checkbox") private val sdPatch = Snabbdom.init(arrayOf(classModule, attributesModule, propsModule, styleModule, eventListenersModule, datasetModule)) diff --git a/src/main/kotlin/pl/treksoft/kvision/core/StyledComponent.kt b/src/main/kotlin/pl/treksoft/kvision/core/StyledComponent.kt index 414e4561..8b883d82 100644 --- a/src/main/kotlin/pl/treksoft/kvision/core/StyledComponent.kt +++ b/src/main/kotlin/pl/treksoft/kvision/core/StyledComponent.kt @@ -1,10 +1,5 @@ package pl.treksoft.kvision.core -import pl.treksoft.kvision.css.Background -import pl.treksoft.kvision.css.Border -import pl.treksoft.kvision.css.COLOR -import pl.treksoft.kvision.css.Color -import pl.treksoft.kvision.css.CssSize import pl.treksoft.kvision.snabbdom.StringPair abstract class StyledComponent : KVObject { diff --git a/src/main/kotlin/pl/treksoft/kvision/dropdown/DropDown.kt b/src/main/kotlin/pl/treksoft/kvision/dropdown/DropDown.kt index b145f721..92f06591 100644 --- a/src/main/kotlin/pl/treksoft/kvision/dropdown/DropDown.kt +++ b/src/main/kotlin/pl/treksoft/kvision/dropdown/DropDown.kt @@ -4,7 +4,6 @@ import com.github.snabbdom.VNode import pl.treksoft.kvision.core.Container import pl.treksoft.kvision.core.ResString import pl.treksoft.kvision.core.Widget -import pl.treksoft.kvision.html.BUTTONSIZE import pl.treksoft.kvision.html.BUTTONSTYLE import pl.treksoft.kvision.html.Button import pl.treksoft.kvision.html.LIST @@ -23,8 +22,7 @@ enum class DD(val type: String) { } open class DropDown(text: String, elements: List<StringPair>? = null, icon: String? = null, - style: BUTTONSTYLE = BUTTONSTYLE.DEFAULT, size: BUTTONSIZE? = null, - block: Boolean = false, disabled: Boolean = false, image: ResString? = null, + style: BUTTONSTYLE = BUTTONSTYLE.DEFAULT, disabled: Boolean = false, image: ResString? = null, dropup: Boolean = false, classes: Set<String> = setOf()) : Container(classes) { var text get() = button.text @@ -73,7 +71,7 @@ open class DropDown(text: String, elements: List<StringPair>? = null, icon: Stri } private val idc = "kv_dropdown_" + counter - internal val button: DropDownButton = DropDownButton(idc, text, icon, style, size, block, + internal val button: DropDownButton = DropDownButton(idc, text, icon, style, disabled, image, setOf("dropdown")) internal val list: DropDownListTag = DropDownListTag(idc, setOf("dropdown-menu")) @@ -165,9 +163,9 @@ open class DropDown(text: String, elements: List<StringPair>? = null, icon: Stri } open class DropDownButton(id: String, text: String, icon: String? = null, style: BUTTONSTYLE = BUTTONSTYLE.DEFAULT, - size: BUTTONSIZE? = null, block: Boolean = false, disabled: Boolean = false, + disabled: Boolean = false, image: ResString? = null, classes: Set<String> = setOf()) : - Button(text, icon, style, size, block, disabled, image, classes) { + Button(text, icon, style, disabled, image, classes) { init { this.id = id diff --git a/src/main/kotlin/pl/treksoft/kvision/form/CheckBox.kt b/src/main/kotlin/pl/treksoft/kvision/form/CheckBox.kt new file mode 100644 index 00000000..2d7b3276 --- /dev/null +++ b/src/main/kotlin/pl/treksoft/kvision/form/CheckBox.kt @@ -0,0 +1,110 @@ +package pl.treksoft.kvision.form + +import pl.treksoft.kvision.core.Container +import pl.treksoft.kvision.core.Widget +import pl.treksoft.kvision.snabbdom.SnOn +import pl.treksoft.kvision.snabbdom.StringBoolPair + +enum class CHECKBOXSTYLE(val className: String) { + DEFAULT("checkbox-default"), + PRIMARY("checkbox-primary"), + SUCCESS("checkbox-success"), + INFO("checkbox-info"), + WARNING("checkbox-warning"), + DANGER("checkbox-danger"), +} + +open class CheckBox(value: Boolean = false, name: String? = null, style: CHECKBOXSTYLE? = null, + circled: Boolean = false, inline: Boolean = false, disabled: Boolean = false, + label: String? = null, rich: Boolean = false) : Container(setOf("checkbox")), BoolFormField { + + override var value + get() = input.value + set(value) { + input.value = value + } + var startValue + get() = input.startValue + set(value) { + input.startValue = value + } + var name + get() = input.name + set(value) { + input.name = value + } + override var disabled + get() = input.disabled + set(value) { + input.disabled = value + } + var label + get() = flabel.text + set(value) { + flabel.text = value + } + var rich + get() = flabel.rich + set(value) { + flabel.rich = value + } + var style = style + set(value) { + field = value + refresh() + } + var circled = circled + set(value) { + field = value + refresh() + } + var inline = inline + set(value) { + field = value + refresh() + } + override var size + get() = input.size + set(value) { + input.size = value + } + + private val idc = "kv_form_checkbox_" + counter + val input: CheckBoxInput = CheckBoxInput(value, name, disabled, idc, setOf("styled")) + val flabel: FieldLabel = FieldLabel(idc, label, rich) + + init { + this.addInternal(input) + this.addInternal(flabel) + counter++ + } + + companion object { + var counter = 0 + } + + @Suppress("UNCHECKED_CAST") + override fun <T : Widget> setEventListener(block: SnOn<T>.() -> Unit): Widget { + input.setEventListener<T>(block) + return this + } + + override fun setEventListener(block: SnOn<Widget>.() -> Unit): Widget { + input.setEventListener(block) + return this + } + + override fun getSnClass(): List<StringBoolPair> { + val cl = super.getSnClass().toMutableList() + style?.let { + cl.add(it.className to true) + } + if (circled) { + cl.add("checkbox-circle" to true) + } + if (inline) { + cl.add("checkbox-inline" to true) + } + return cl + } +} diff --git a/src/main/kotlin/pl/treksoft/kvision/form/CheckBoxInput.kt b/src/main/kotlin/pl/treksoft/kvision/form/CheckBoxInput.kt new file mode 100644 index 00000000..1893668b --- /dev/null +++ b/src/main/kotlin/pl/treksoft/kvision/form/CheckBoxInput.kt @@ -0,0 +1,78 @@ +package pl.treksoft.kvision.form + +import com.github.snabbdom.VNode +import pl.treksoft.kvision.core.Widget +import pl.treksoft.kvision.snabbdom.StringBoolPair +import pl.treksoft.kvision.snabbdom.StringPair + +open class CheckBoxInput(override var value: Boolean = false, + name: String? = null, disabled: Boolean = false, id: String? = null, + classes: Set<String> = setOf()) : Widget(classes), BoolFormField { + + init { + this.id = id + } + + @Suppress("LeakingThis") + var startValue: Boolean = value + set(value) { + field = value + this.value = value + refresh() + } + var name: String? = name + set(value) { + field = value + refresh() + } + override var disabled: Boolean = disabled + set(value) { + field = value + refresh() + } + override var size: INPUTSIZE? = null + set(value) { + field = value + refresh() + } + + override fun render(): VNode { + return kvh("input") + } + + 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() + sn.add("type" to "checkbox") + if (startValue) { + sn.add("checked" to "checked") + } + name?.let { + sn.add("name" to it) + } + if (disabled) { + sn.add("disabled" to "disabled") + } + return sn + } + + override fun afterInsert(node: VNode) { + this.getElementJQuery()?.on("change", { _, _ -> + val v = getElementJQuery()?.prop("checked") as Boolean? + value = (v == true) + true + }) + this.getElementJQuery()?.on("click", { _, _ -> + val v = getElementJQuery()?.prop("checked") as Boolean? + value = (v == true) + true + }) + } +} diff --git a/src/main/kotlin/pl/treksoft/kvision/form/FieldLabel.kt b/src/main/kotlin/pl/treksoft/kvision/form/FieldLabel.kt new file mode 100644 index 00000000..92b014d4 --- /dev/null +++ b/src/main/kotlin/pl/treksoft/kvision/form/FieldLabel.kt @@ -0,0 +1,14 @@ +package pl.treksoft.kvision.form + +import pl.treksoft.kvision.html.TAG +import pl.treksoft.kvision.html.Tag +import pl.treksoft.kvision.snabbdom.StringPair + +open class FieldLabel(private val forId: String, text: String? = null, rich: Boolean = false) : Tag(TAG.LABEL, + text, rich) { + + override fun getSnAttrs(): List<StringPair> { + return super.getSnAttrs() + ("for" to forId) + } + +} diff --git a/src/main/kotlin/pl/treksoft/kvision/form/FormField.kt b/src/main/kotlin/pl/treksoft/kvision/form/FormField.kt new file mode 100644 index 00000000..dd7ae745 --- /dev/null +++ b/src/main/kotlin/pl/treksoft/kvision/form/FormField.kt @@ -0,0 +1,27 @@ +package pl.treksoft.kvision.form + +enum class INPUTSIZE(val className: String) { + LARGE("input-lg"), + SMALL("input-sm") +} + +interface FormField { + var disabled: Boolean + var size: INPUTSIZE? + fun getValueAsString(): String? +} + +interface StringFormField : FormField { + var value: String? + override fun getValueAsString(): String? = value +} + +interface NumberFormField : FormField { + var value: Number? + override fun getValueAsString(): String? = value?.toString() +} + +interface BoolFormField : FormField { + var value: Boolean + override fun getValueAsString(): String? = value.toString() +} diff --git a/src/main/kotlin/pl/treksoft/kvision/form/Password.kt b/src/main/kotlin/pl/treksoft/kvision/form/Password.kt new file mode 100644 index 00000000..86a862cd --- /dev/null +++ b/src/main/kotlin/pl/treksoft/kvision/form/Password.kt @@ -0,0 +1,6 @@ +package pl.treksoft.kvision.form + +open class Password(placeholder: String? = null, value: String? = null, + name: String? = null, maxlength: Int? = null, label: String? = null, rich: Boolean = false, + disabled: Boolean = false) : Text(TEXTINPUTTYPE.PASSWORD, placeholder, value, name, maxlength, + label, rich, disabled) diff --git a/src/main/kotlin/pl/treksoft/kvision/form/Text.kt b/src/main/kotlin/pl/treksoft/kvision/form/Text.kt new file mode 100644 index 00000000..0980099f --- /dev/null +++ b/src/main/kotlin/pl/treksoft/kvision/form/Text.kt @@ -0,0 +1,75 @@ +package pl.treksoft.kvision.form + +import pl.treksoft.kvision.core.Container + + +open class Text(type: TEXTINPUTTYPE = TEXTINPUTTYPE.TEXT, placeholder: String? = null, value: String? = null, + name: String? = null, maxlength: Int? = null, label: String? = null, rich: Boolean = false, + disabled: Boolean = false) : Container(setOf("form-group")), StringFormField { + + override var value + get() = input.value + set(value) { + input.value = value + } + var startValue + get() = input.startValue + set(value) { + input.startValue = value + } + var type + get() = input.type + set(value) { + input.type = value + } + var placeholder + get() = input.placeholder + set(value) { + input.placeholder = value + } + var name + get() = input.name + set(value) { + input.name = value + } + var maxlength + get() = input.maxlength + set(value) { + input.maxlength = value + } + override var disabled + get() = input.disabled + set(value) { + input.disabled = value + } + var label + get() = flabel.text + set(value) { + flabel.text = value + } + var rich + get() = flabel.rich + set(value) { + flabel.rich = value + } + override var size + get() = input.size + set(value) { + input.size = value + } + + private val idc = "kv_form_text_" + counter + internal val input: TextInput = TextInput(type, placeholder, value, name, maxlength, disabled, idc) + internal val flabel: FieldLabel = FieldLabel(idc, label, rich) + + init { + this.addInternal(flabel) + this.addInternal(input) + counter++ + } + + companion object { + var counter = 0 + } + +} diff --git a/src/main/kotlin/pl/treksoft/kvision/form/TextInput.kt b/src/main/kotlin/pl/treksoft/kvision/form/TextInput.kt new file mode 100644 index 00000000..a87cb164 --- /dev/null +++ b/src/main/kotlin/pl/treksoft/kvision/form/TextInput.kt @@ -0,0 +1,136 @@ +package pl.treksoft.kvision.form + +import com.github.snabbdom.VNode +import pl.treksoft.kvision.core.Widget +import pl.treksoft.kvision.snabbdom.StringBoolPair +import pl.treksoft.kvision.snabbdom.StringPair + +enum class TEXTINPUTTYPE(val type: String) { + TEXT("text"), + PASSWORD("password") +} + +class TextInput(type: TEXTINPUTTYPE = TEXTINPUTTYPE.TEXT, placeholder: String? = null, + override var value: String? = null, name: String? = null, maxlength: Int? = null, + disabled: Boolean = false, id: String? = null, + classes: Set<String> = setOf()) : Widget(classes + "form-control"), StringFormField { + init { + this.id = id + } + + @Suppress("LeakingThis") + var startValue: String? = value + set(value) { + field = value + this.value = value + refresh() + } + var type: TEXTINPUTTYPE = type + set(value) { + field = value + refresh() + } + var placeholder: String? = placeholder + set(value) { + field = value + refresh() + } + var name: String? = name + set(value) { + field = value + refresh() + } + var maxlength: Int? = maxlength + set(value) { + field = value + refresh() + } + override var disabled: Boolean = disabled + set(value) { + field = value + refresh() + } + + var autocomplete: Boolean? = null + set(value) { + field = value + refresh() + } + var autofocus: Boolean? = null + set(value) { + field = value + refresh() + } + var readonly: Boolean? = null + set(value) { + field = value + refresh() + } + override var size: INPUTSIZE? = null + set(value) { + field = value + refresh() + } + + override fun render(): VNode { + return kvh("input") + } + + override fun getSnClass(): List<StringBoolPair> { + val cl = super.getSnClass().toMutableList() + size?.let { + cl.add(it.className to true) + } + return cl + } + + @Suppress("ComplexMethod") + override fun getSnAttrs(): List<StringPair> { + val sn = super.getSnAttrs().toMutableList() + sn.add("type" to type.type) + placeholder?.let { + sn.add("placeholder" to it) + } + startValue?.let { + sn.add("value" to it) + } + name?.let { + sn.add("name" to it) + } + autocomplete?.let { + if (it) { + sn.add("autocomplete" to "on") + } else { + sn.add("autocomplete" to "off") + } + } + autofocus?.let { + if (it) { + sn.add("autofocus" to "autofocus") + } + } + maxlength?.let { + sn.add("maxlength" to ("" + it)) + } + readonly?.let { + if (it) { + sn.add("readonly" to "readonly") + } + } + if (disabled) { + sn.add("disabled" to "disabled") + } + return sn + } + + override fun afterInsert(node: VNode) { + this.getElementJQuery()?.on("input", { _, _ -> + val v = getElementJQuery()?.`val`() as String? + if (v != null && v.isNotEmpty()) { + value = v + } else { + value = null + } + }) + } +} diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Button.kt b/src/main/kotlin/pl/treksoft/kvision/html/Button.kt index d10cb8cd..f0cb91f7 100644 --- a/src/main/kotlin/pl/treksoft/kvision/html/Button.kt +++ b/src/main/kotlin/pl/treksoft/kvision/html/Button.kt @@ -23,8 +23,8 @@ enum class BUTTONSIZE(val className: String) { } open class Button(text: String, icon: String? = null, style: BUTTONSTYLE = BUTTONSTYLE.DEFAULT, - size: BUTTONSIZE? = null, block: Boolean = false, disabled: Boolean = false, - image: ResString? = null, classes: Set<String> = setOf()) : Widget(classes) { + disabled: Boolean = false, image: ResString? = null, + classes: Set<String> = setOf()) : Widget(classes) { var text = text set(value) { field = value @@ -40,22 +40,23 @@ open class Button(text: String, icon: String? = null, style: BUTTONSTYLE = BUTTO field = value refresh() } - var size = size + var disabled = disabled set(value) { field = value refresh() } - var block = block + var image = image set(value) { field = value refresh() } - var disabled = disabled + + var size: BUTTONSIZE? = null set(value) { field = value refresh() } - var image = image + var block = false set(value) { field = value refresh() diff --git a/src/main/kotlin/pl/treksoft/kvision/html/Tag.kt b/src/main/kotlin/pl/treksoft/kvision/html/Tag.kt index da964f6e..70725d97 100644 --- a/src/main/kotlin/pl/treksoft/kvision/html/Tag.kt +++ b/src/main/kotlin/pl/treksoft/kvision/html/Tag.kt @@ -22,6 +22,7 @@ enum class TAG(val tagName: String) { UL("ul"), OL("ol"), DIV("div"), + LABEL("label"), MARK("mark"), DEL("del"), diff --git a/src/main/kotlin/pl/treksoft/kvision/panel/SplitPanel.kt b/src/main/kotlin/pl/treksoft/kvision/panel/SplitPanel.kt index 9084742a..06f9be59 100644 --- a/src/main/kotlin/pl/treksoft/kvision/panel/SplitPanel.kt +++ b/src/main/kotlin/pl/treksoft/kvision/panel/SplitPanel.kt @@ -4,7 +4,7 @@ import com.github.snabbdom.VNode import pl.treksoft.jquery.JQuery import pl.treksoft.jquery.JQueryEventObject import pl.treksoft.kvision.core.Container -import pl.treksoft.kvision.css.UNIT +import pl.treksoft.kvision.core.UNIT import pl.treksoft.kvision.html.TAG import pl.treksoft.kvision.html.Tag import pl.treksoft.kvision.snabbdom.obj diff --git a/src/main/kotlin/pl/treksoft/kvision/utils/Utils.kt b/src/main/kotlin/pl/treksoft/kvision/utils/Utils.kt index 5a9bf5a6..9c88326b 100644 --- a/src/main/kotlin/pl/treksoft/kvision/utils/Utils.kt +++ b/src/main/kotlin/pl/treksoft/kvision/utils/Utils.kt @@ -1,8 +1,8 @@ @file:Suppress("TooManyFunctions") package pl.treksoft.kvision.utils -import pl.treksoft.kvision.css.CssSize -import pl.treksoft.kvision.css.UNIT +import pl.treksoft.kvision.core.CssSize +import pl.treksoft.kvision.core.UNIT fun Int.px(): CssSize = Pair(this, UNIT.px) fun Int.em(): CssSize = Pair(this, UNIT.em) |