create cards implementation and upgrade labels

This commit is contained in:
InsanusMokrassar 2022-01-25 12:39:09 +06:00
parent 0da87743e8
commit 936bb2d6fd
6 changed files with 166 additions and 33 deletions

View File

@ -2,6 +2,9 @@
## 0.0.19 ## 0.0.19
* Create `Card`s implementation
* Upgrade `Label` composable draw and create `UIKitLabel` modifiers
## 0.0.18 ## 0.0.18
* Add base companion for `UIKitFlex` with result class `uk-flex` * Add base companion for `UIKitFlex` with result class `uk-flex`

View File

@ -0,0 +1,79 @@
package dev.inmo.jsuikit.elements
import androidx.compose.runtime.Composable
import dev.inmo.jsuikit.modifiers.*
import dev.inmo.jsuikit.utils.Attrs
import org.jetbrains.compose.web.dom.*
import org.w3c.dom.*
@Composable
fun Card(
cardAttrs: Attrs<HTMLDivElement> = Attrs.empty(),
headerAttrs: Attrs<HTMLDivElement> = Attrs.empty(),
header: ContentBuilder<HTMLDivElement>? = null,
footerAttrs: Attrs<HTMLDivElement> = Attrs.empty(),
footer: ContentBuilder<HTMLDivElement>? = null,
bodyAttrs: Attrs<HTMLDivElement> = Attrs.empty(),
body: ContentBuilder<HTMLDivElement>
) {
Div(
{
include(UIKitCard)
cardAttrs.builder(this)
}
) {
header ?.let {
Div(
{
include(UIKitCard.Parts.Header)
headerAttrs.builder(this)
},
header
)
}
Div(
{
include(UIKitCard.Parts.Body)
bodyAttrs.builder(this)
},
body
)
footer ?.let {
Div(
{
include(UIKitCard.Parts.Footer)
footerAttrs.builder(this)
},
footer
)
}
}
}
@Composable
fun CardTitle(
titleAttrs: Attrs<HTMLHeadingElement> = Attrs.empty(),
title: ContentBuilder<HTMLHeadingElement>
) {
H3(
{
include(UIKitCard.Title)
titleAttrs.builder(this)
},
title
)
}
@Composable
fun CardBadge(
badgeAttrs: Attrs<HTMLDivElement> = Attrs.empty(),
badge: ContentBuilder<HTMLDivElement>
) {
Div(
{
include(UIKitCard.Badge, UIKitLabel)
badgeAttrs.builder(this)
},
badge
)
}

View File

@ -1,41 +1,20 @@
package dev.inmo.jsuikit.elements package dev.inmo.jsuikit.elements
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import dev.inmo.jsuikit.modifiers.UIKitModifier import dev.inmo.jsuikit.modifiers.*
import dev.inmo.jsuikit.modifiers.include import dev.inmo.jsuikit.utils.Attrs
import org.jetbrains.compose.web.dom.* import org.jetbrains.compose.web.dom.*
import org.w3c.dom.HTMLSpanElement import org.w3c.dom.HTMLSpanElement
sealed interface Label { @Composable
val suffix: String fun Label(
@Composable
fun draw(
text: String, text: String,
vararg modifiers: UIKitModifier, attrs: Attrs<HTMLSpanElement>
attributesCustomizer: AttrBuilderContext<HTMLSpanElement> = {}, ) = Span(
) = Span(
{ {
classes("uk-label", "uk-label-$suffix") include(UIKitLabel)
include(*modifiers) attrs.builder(this)
attributesCustomizer()
} }
) { ) {
Text(text) Text(text)
}
object Success : Label {
override val suffix: String
get() = "success"
}
object Warning : Label {
override val suffix: String
get() = "warning"
}
object Error : Label {
override val suffix: String
get() = "danger"
}
} }

View File

@ -0,0 +1,35 @@
package dev.inmo.jsuikit.modifiers
sealed class UIKitCard(suffix: String?) : UIKitModifier {
override val classes: Array<String> = arrayOf("uk-card${suffix ?.let { "-$it" } ?: ""}")
object Title : UIKitCard("title")
object Hover : UIKitCard("hover")
object Badge : Parts("badge")
sealed class Parts(suffix: String) : UIKitCard(suffix) {
object Header : Parts("header")
object Body : Parts("body")
object Footer : Parts("footer")
}
sealed class Style(suffix: String) : UIKitCard(suffix) {
object Default : Style("default")
object Primary : Style("primary")
object Secondary : Style("secondary")
}
sealed class Size(suffix: String) : UIKitCard(suffix) {
object Small : Size("small")
object Large : Size("large")
}
sealed class Media(suffix: String) : UIKitCard("media-$suffix") {
object Top : Media("top")
object Right : Media("right")
object Bottom : Media("bottom")
object Left : Media("left")
}
companion object : UIKitCard(null)
}

View File

@ -0,0 +1,11 @@
package dev.inmo.jsuikit.modifiers
sealed class UIKitLabel(suffix: String?) : UIKitModifier {
override val classes: Array<String> = arrayOf("uk-label${suffix?.let { "-$it" } ?: ""}")
object Success : UIKitLabel("success")
object Warning : UIKitLabel("warning")
object Error : UIKitLabel("danger")
companion object : UIKitLabel(null)
}

View File

@ -0,0 +1,26 @@
package dev.inmo.jsuikit.utils
import dev.inmo.jsuikit.modifiers.UIKitModifier
import dev.inmo.jsuikit.modifiers.include
import org.jetbrains.compose.web.attributes.AttrsBuilder
import org.jetbrains.compose.web.dom.AttrBuilderContext
import org.w3c.dom.Element
class AttributesCollection<T : Element> (
private vararg val modifiers: UIKitModifier,
private val attrs: AttrBuilderContext<T> = {}
) {
val builder: AttrBuilderContext<T> = {
include(*modifiers)
attrs()
}
companion object {
val Empty = Attrs<Element>()
@Suppress("UNCHECKED_CAST")
fun <T : Element> empty() = Empty as Attrs<T>
}
}
typealias Attrs<T> = AttributesCollection<T>