Compare commits

...

16 Commits

10 changed files with 190 additions and 31 deletions

View File

@@ -1,5 +1,26 @@
# Changelog
## 0.0.29
* Unfilling of `UIKitText`
## 0.0.28
* Fixes in `UIKitWidth`
## 0.0.27
* `TextField` has been renamed to `StandardInput`
* `StandardInput` now will look for changes in state
## 0.0.26
* Add UIKitColumn
## 0.0.25
* Full including of divider
## 0.0.24
* Add opportunity to fill space between header and body of table

View File

@@ -9,4 +9,4 @@ android.enableJetifier=true
# Project data
group=dev.inmo
version=0.0.24
version=0.0.29

View File

@@ -1,7 +1,40 @@
package dev.inmo.jsuikit.elements
import androidx.compose.runtime.Composable
import dev.inmo.jsuikit.modifiers.*
import org.jetbrains.compose.web.dom.AttrBuilderContext
import org.jetbrains.compose.web.dom.Hr
import org.w3c.dom.HTMLHRElement
object Divider {
@Composable
fun Common(
vararg modifiers: UIKitModifier,
attributesCustomizer: AttrBuilderContext<HTMLHRElement> = {}
) = Hr {
include(*modifiers)
attributesCustomizer()
}
@Composable
fun Icon(
vararg modifiers: UIKitModifier,
attributesCustomizer: AttrBuilderContext<HTMLHRElement> = {}
) = Common(
*(modifiers + UIKitDivider.Icon), attributesCustomizer = attributesCustomizer
)
@Composable
fun Small(
vararg modifiers: UIKitModifier,
attributesCustomizer: AttrBuilderContext<HTMLHRElement> = {}
) = Common(
*(modifiers + UIKitDivider.Small), attributesCustomizer = attributesCustomizer
)
@Composable
fun Vertical(
vararg modifiers: UIKitModifier,
attributesCustomizer: AttrBuilderContext<HTMLHRElement> = {}
) = Common(
*(modifiers + UIKitDivider.Vertical), attributesCustomizer = attributesCustomizer
)
}
@Composable
fun Divider() = Hr({ classes("uk-divider-icon") })

View File

@@ -23,4 +23,4 @@ fun Spinner(
}
@Composable
fun DefaultSpinner() = Spinner(UIKitAlign.Center, UIKitMargin.Small, UIKitText.Alignment.Center)
fun DefaultSpinner() = Spinner(UIKitAlign.Center, UIKitMargin.Small, UIKitText.Alignment.Horizontal.Center, UIKitText.Alignment.Vertical.Middle)

View File

@@ -9,7 +9,7 @@ import org.jetbrains.compose.web.dom.Input
import org.w3c.dom.HTMLInputElement
@Composable
fun <T> TextField(
fun <T> StandardInput(
type: InputType<T>,
state: MutableState<T>,
disabledState: State<Boolean>? = null,
@@ -23,7 +23,16 @@ fun <T> TextField(
placeholder ?.let(::placeholder)
onChange { state.value = it.value }
state.value.let {
when (it) {
is String -> value(it)
is Number -> value(it)
else -> {}
}
}
onInput { state.value = it.value }
disabledState ?.let {
if (it.value) {
disabled()
@@ -32,3 +41,14 @@ fun <T> TextField(
attributesCustomizer()
}
}
@Composable
@Deprecated("Renamed", ReplaceWith("StandardInput", "dev.inmo.jsuikit.elements.StandardInput"))
fun <T> TextField(
type: InputType<T>,
state: MutableState<T>,
disabledState: State<Boolean>? = null,
placeholder: String? = null,
vararg modifiers: UIKitModifier,
attributesCustomizer: AttrBuilderContext<HTMLInputElement> = {},
) = StandardInput(type, state, disabledState, placeholder, modifiers = modifiers, attributesCustomizer)

View File

@@ -0,0 +1,14 @@
package dev.inmo.jsuikit.modifiers
sealed class UIKitBase(classname: String) : UIKitModifier {
override val classes: Array<String> = arrayOf(classname)
sealed class Heading(suffix: String) : UIKitBase("uk-h$suffix") {
object H1 : Heading("1")
object H2 : Heading("2")
object H3 : Heading("3")
object H4 : Heading("4")
object H5 : Heading("5")
object H6 : Heading("6")
}
}

View File

@@ -0,0 +1,15 @@
package dev.inmo.jsuikit.modifiers
sealed class UIKitColumn(classname: String) : UIKitModifier {
override val classes: Array<String> = arrayOf(classname)
object Two : UIKitColumn("uk-column-1-2")
object Three : UIKitColumn("uk-column-1-3")
object Four : UIKitColumn("uk-column-1-4")
object Five : UIKitColumn("uk-column-1-5")
object Six : UIKitColumn("uk-column-1-6")
object Divider : UIKitColumn("uk-column-divider")
object Span : UIKitColumn("uk-column-span")
}

View File

@@ -0,0 +1,10 @@
package dev.inmo.jsuikit.modifiers
sealed class UIKitDivider(classname: String) : UIKitModifier {
override val classes: Array<String> = arrayOf(classname)
object Icon : UIKitDivider("uk-divider-icon")
object Small : UIKitDivider("uk-divider-small")
object Vertical : UIKitDivider("uk-divider-vertical")
}

View File

@@ -3,16 +3,34 @@ package dev.inmo.jsuikit.modifiers
sealed class UIKitText(suffix: String) : UIKitModifier {
override val classes: Array<String> = arrayOf("uk-text-$suffix")
object Lead : UIKitText("lead")
object Meta : UIKitText("meta")
sealed class Alignment(suffix: String) : UIKitText(suffix) {
object Left : Alignment("left")
object Right : Alignment("right")
object Center : Alignment("center")
object Justify : Alignment("justify")
sealed class Style(suffix: String) : UIKitText(suffix) {
object Lead : Style("lead")
object Meta : Style("meta")
object Italic : Style("italic")
}
sealed class Size(suffix: String) : UIKitText(suffix) {
object Small : Size("small")
object Default : Size("default")
object Large : Size("large")
}
sealed class Weight(suffix: String) : UIKitText(suffix) {
object Light : Weight("light")
object Normal : Weight("normal")
object Bold : Weight("bold")
object Lighter : Weight("lighter")
object Bolder : Weight("bolder")
}
sealed class Transform(suffix: String) : UIKitText(suffix) {
object Capitalize : Transform("capitalize")
object Uppercase : Transform("uppercase")
object Lowercase : Transform("lowercase")
}
object DecorationNone : UIKitText("decoration-none")
sealed class Color(suffix: String) : UIKitText(suffix) {
object Muted : Color("muted")
object Emphasis : Color("emphasis")
@@ -22,4 +40,32 @@ sealed class UIKitText(suffix: String) : UIKitModifier {
object Warning : Color("warning")
object Danger : Color("danger")
}
object Background : UIKitText("background")
sealed class Alignment(suffix: String) : UIKitText(suffix) {
sealed class Horizontal(suffix: String) : Alignment(suffix) {
object Left : Horizontal("left")
object Right : Horizontal("right")
object Center : Horizontal("center")
object Justify : Horizontal("justify")
}
sealed class Vertical(suffix: String) : Alignment(suffix) {
object Top : Vertical("top")
object Middle : Vertical("middle")
object Bottom : Vertical("bottom")
object Baseline : Vertical("baseline")
}
}
sealed class Wrapping(suffix: String) : UIKitText(suffix) {
object Truncate : Wrapping("truncate")
object Break : Wrapping("break")
object NoWrap : Wrapping("nowrap")
}
}

View File

@@ -1,29 +1,29 @@
package dev.inmo.jsuikit.modifiers
sealed class UIKitWidth(classname: String) : UIKitModifier {
override val classes: Array<String> = arrayOf("uk-width-$classname")
override val classes: Array<String> = arrayOf(classname)
object Auto : UIKitWidth("auto")
object Expand : UIKitWidth("expand")
object Full : UIKitWidth("1-1")
object Auto : UIKitWidth("uk-width-auto")
object Expand : UIKitWidth("uk-width-expand")
object Full : UIKitWidth("uk-width-1-1")
object Half : UIKitWidth("1-2")
object Half : UIKitWidth("uk-width-1-2")
object OneThird : UIKitWidth("1-3")
object TwoThird : UIKitWidth("2-3")
object OneThird : UIKitWidth("uk-width-1-3")
object TwoThird : UIKitWidth("uk-width-2-3")
object OneFourth : UIKitWidth("1-4")
object ThreeFourth : UIKitWidth("3-4")
object OneFourth : UIKitWidth("uk-width-1-4")
object ThreeFourth : UIKitWidth("uk-width-3-4")
object OneFifth : UIKitWidth("1-5")
object TwoFifth : UIKitWidth("2-5")
object ThreeFifth : UIKitWidth("3-5")
object FourFifth : UIKitWidth("4-5")
object OneFifth : UIKitWidth("uk-width-1-5")
object TwoFifth : UIKitWidth("uk-width-2-5")
object ThreeFifth : UIKitWidth("uk-width-3-5")
object FourFifth : UIKitWidth("uk-width-4-5")
object OneSixth : UIKitWidth("1-6")
object FiveSixth : UIKitWidth("5-6")
object OneSixth : UIKitWidth("uk-width-1-6")
object FiveSixth : UIKitWidth("uk-width-5-6")
sealed class Child(suffix: String) : UIKitWidth("child-$suffix") {
sealed class Child(suffix: String) : UIKitWidth("uk-child-width-$suffix") {
object Full : Child("1-1")
object Half : Child("1-2")
@@ -57,7 +57,7 @@ sealed class UIKitWidth(classname: String) : UIKitModifier {
}
}
sealed class Fixed(suffix: String) : UIKitWidth("fixed-$suffix") {
sealed class Fixed(suffix: String) : UIKitWidth("uk-width-fixed-$suffix") {
object Small : Fixed("small")
object Medium : Fixed("medium")