diff --git a/CHANGELOG.md b/CHANGELOG.md index 40d86f3..6a4ac0f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,9 @@ ## 0.0.19 +* Create `Card`s implementation +* Upgrade `Label` composable draw and create `UIKitLabel` modifiers + ## 0.0.18 * Add base companion for `UIKitFlex` with result class `uk-flex` diff --git a/src/jsMain/kotlin/dev/inmo/jsuikit/elements/Card.kt b/src/jsMain/kotlin/dev/inmo/jsuikit/elements/Card.kt new file mode 100644 index 0000000..b431672 --- /dev/null +++ b/src/jsMain/kotlin/dev/inmo/jsuikit/elements/Card.kt @@ -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 = Attrs.empty(), + headerAttrs: Attrs = Attrs.empty(), + header: ContentBuilder? = null, + footerAttrs: Attrs = Attrs.empty(), + footer: ContentBuilder? = null, + bodyAttrs: Attrs = Attrs.empty(), + body: ContentBuilder +) { + 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 = Attrs.empty(), + title: ContentBuilder +) { + H3( + { + include(UIKitCard.Title) + titleAttrs.builder(this) + }, + title + ) +} + +@Composable +fun CardBadge( + badgeAttrs: Attrs = Attrs.empty(), + badge: ContentBuilder +) { + Div( + { + include(UIKitCard.Badge, UIKitLabel) + badgeAttrs.builder(this) + }, + badge + ) +} diff --git a/src/jsMain/kotlin/dev/inmo/jsuikit/elements/Labels.kt b/src/jsMain/kotlin/dev/inmo/jsuikit/elements/Labels.kt index 686b280..4db71ca 100644 --- a/src/jsMain/kotlin/dev/inmo/jsuikit/elements/Labels.kt +++ b/src/jsMain/kotlin/dev/inmo/jsuikit/elements/Labels.kt @@ -1,41 +1,20 @@ package dev.inmo.jsuikit.elements import androidx.compose.runtime.Composable -import dev.inmo.jsuikit.modifiers.UIKitModifier -import dev.inmo.jsuikit.modifiers.include +import dev.inmo.jsuikit.modifiers.* +import dev.inmo.jsuikit.utils.Attrs import org.jetbrains.compose.web.dom.* import org.w3c.dom.HTMLSpanElement -sealed interface Label { - val suffix: String - - @Composable - fun draw( - text: String, - vararg modifiers: UIKitModifier, - attributesCustomizer: AttrBuilderContext = {}, - ) = Span( - { - classes("uk-label", "uk-label-$suffix") - include(*modifiers) - attributesCustomizer() - } - ) { - 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" +@Composable +fun Label( + text: String, + attrs: Attrs +) = Span( + { + include(UIKitLabel) + attrs.builder(this) } +) { + Text(text) } diff --git a/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitCard.kt b/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitCard.kt new file mode 100644 index 0000000..057dc68 --- /dev/null +++ b/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitCard.kt @@ -0,0 +1,35 @@ +package dev.inmo.jsuikit.modifiers + +sealed class UIKitCard(suffix: String?) : UIKitModifier { + override val classes: Array = 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) +} diff --git a/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitLabel.kt b/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitLabel.kt new file mode 100644 index 0000000..99b01bd --- /dev/null +++ b/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitLabel.kt @@ -0,0 +1,11 @@ +package dev.inmo.jsuikit.modifiers + +sealed class UIKitLabel(suffix: String?) : UIKitModifier { + override val classes: Array = arrayOf("uk-label${suffix?.let { "-$it" } ?: ""}") + + object Success : UIKitLabel("success") + object Warning : UIKitLabel("warning") + object Error : UIKitLabel("danger") + + companion object : UIKitLabel(null) +} diff --git a/src/jsMain/kotlin/dev/inmo/jsuikit/utils/AttributesCollection.kt b/src/jsMain/kotlin/dev/inmo/jsuikit/utils/AttributesCollection.kt new file mode 100644 index 0000000..b44ada7 --- /dev/null +++ b/src/jsMain/kotlin/dev/inmo/jsuikit/utils/AttributesCollection.kt @@ -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 ( + private vararg val modifiers: UIKitModifier, + private val attrs: AttrBuilderContext = {} +) { + val builder: AttrBuilderContext = { + include(*modifiers) + attrs() + } + + companion object { + val Empty = Attrs() + + @Suppress("UNCHECKED_CAST") + fun empty() = Empty as Attrs + } +} + +typealias Attrs = AttributesCollection