From 8c5dca73fa5729ece65057ed5c27a171244d6354 Mon Sep 17 00:00:00 2001 From: InsanusMokrassar Date: Sun, 31 Jul 2022 15:04:27 +0600 Subject: [PATCH] Grid support improvement; Article, Iconnav and Leader support --- CHANGELOG.md | 5 ++ .../dev/inmo/jsuikit/elements/Article.kt | 57 +++++++++++++++++++ .../kotlin/dev/inmo/jsuikit/elements/Grid.kt | 23 +++----- .../dev/inmo/jsuikit/elements/Iconnav.kt | 33 +++++++++++ .../inmo/jsuikit/modifiers/UIKitArticle.kt | 12 ++++ .../dev/inmo/jsuikit/modifiers/UIKitGrid.kt | 2 +- .../inmo/jsuikit/modifiers/UIKitIconnav.kt | 11 ++++ .../dev/inmo/jsuikit/modifiers/UIKitLeader.kt | 28 +++++++++ 8 files changed, 156 insertions(+), 15 deletions(-) create mode 100644 src/jsMain/kotlin/dev/inmo/jsuikit/elements/Article.kt create mode 100644 src/jsMain/kotlin/dev/inmo/jsuikit/elements/Iconnav.kt create mode 100644 src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitArticle.kt create mode 100644 src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitIconnav.kt create mode 100644 src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitLeader.kt diff --git a/CHANGELOG.md b/CHANGELOG.md index ddf44ec..35e8e63 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,11 @@ ## 0.1.9 +* `Artile` elements become supported +* `Iconnav` elements become supported +* `Leader` elements become supported +* `Grid` support improvements + ## 0.1.8 * `Compose`: `1.2.0-alpha01-dev731` diff --git a/src/jsMain/kotlin/dev/inmo/jsuikit/elements/Article.kt b/src/jsMain/kotlin/dev/inmo/jsuikit/elements/Article.kt new file mode 100644 index 0000000..8b861f6 --- /dev/null +++ b/src/jsMain/kotlin/dev/inmo/jsuikit/elements/Article.kt @@ -0,0 +1,57 @@ +package dev.inmo.jsuikit.elements + +import androidx.compose.runtime.Composable +import dev.inmo.jsuikit.modifiers.UIKitArticle +import dev.inmo.jsuikit.modifiers.include +import dev.inmo.jsuikit.utils.Attrs +import dev.inmo.jsuikit.utils.optionallyDraw +import org.jetbrains.compose.web.dom.* +import org.jetbrains.compose.web.dom.Text +import org.w3c.dom.* + +@Composable +fun UIKitArticleElement ( + headerBuilder: ContentBuilder, + headerAttrs: Attrs = Attrs.empty(), + metaBuilder: ContentBuilder? = null, + metaAttrs: Attrs? = null, + otherContentBuilder: ContentBuilder +) = Article( + { + include(UIKitArticle) + } +) { + H1( + { + include(UIKitArticle.Title) + headerAttrs.builder(this) + }, + headerBuilder + ) + optionallyDraw(metaAttrs, metaBuilder) { + P( + { + include(UIKitArticle.Meta) + metaAttrs ?.builder ?.invoke(this) + }, + metaBuilder ?: {} + ) + } + + otherContentBuilder() +} + +@Composable +fun UIKitArticleElement ( + header: String, + meta: String? = null, + otherContentBuilder: ContentBuilder +) = UIKitArticleElement( + { Text(header) }, + metaBuilder = meta ?.let { + { + Text(meta) + } + }, + otherContentBuilder = otherContentBuilder +) diff --git a/src/jsMain/kotlin/dev/inmo/jsuikit/elements/Grid.kt b/src/jsMain/kotlin/dev/inmo/jsuikit/elements/Grid.kt index bc31bce..ad47d32 100644 --- a/src/jsMain/kotlin/dev/inmo/jsuikit/elements/Grid.kt +++ b/src/jsMain/kotlin/dev/inmo/jsuikit/elements/Grid.kt @@ -1,8 +1,8 @@ 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.buildAttribute import org.jetbrains.compose.web.dom.* import org.w3c.dom.HTMLDivElement @@ -26,23 +26,18 @@ fun GridColumn( fun Grid( vararg modifiers: UIKitModifier, masonry: Boolean = false, - parallax: Int? = null, - marginClass: String? = null, + parallax: UInt? = null, + marginClass: UIKitMargin? = null, firstColumnClass: String? = null, attributesCustomizer: AttrBuilderContext = {}, - builder: @Composable ElementScope.() -> Unit = {} + builder: ContentBuilder = {} ) { - val attrs = listOfNotNull( - if (masonry) "masonry" to "true" else null, - parallax ?.let { "parallax" to it.toString() }, - marginClass ?.let { "margin" to it }, - firstColumnClass ?.let { "first-column" to it }, - ) Div( { - attr("uk-grid", attrs.joinToString(";") { (k, v) -> "$k: $v" }) - classes("uk-grid") - include(*modifiers) + include( + UIKitGrid.invoke(marginClass, firstColumnClass, masonry, parallax), + *modifiers + ) attributesCustomizer() } ) { diff --git a/src/jsMain/kotlin/dev/inmo/jsuikit/elements/Iconnav.kt b/src/jsMain/kotlin/dev/inmo/jsuikit/elements/Iconnav.kt new file mode 100644 index 0000000..50d3043 --- /dev/null +++ b/src/jsMain/kotlin/dev/inmo/jsuikit/elements/Iconnav.kt @@ -0,0 +1,33 @@ +package dev.inmo.jsuikit.elements + +import androidx.compose.runtime.Composable +import dev.inmo.jsuikit.modifiers.UIKitIconnav +import dev.inmo.jsuikit.modifiers.include +import dev.inmo.jsuikit.utils.Attrs +import org.jetbrains.compose.web.attributes.AttrsScope +import org.jetbrains.compose.web.dom.* +import org.w3c.dom.HTMLLIElement +import org.w3c.dom.HTMLUListElement + +@Composable +fun Iconnav( + data: Iterable, + listAttrs: Attrs = Attrs.empty(), + elementAttrsBuilder: AttrsScope.(T) -> Unit = {}, + elementBuilder: @Composable ElementScope.(T) -> Unit +) { + Ul( + { + include(UIKitIconnav) + listAttrs.builder(this) + } + ) { + data.forEach { + Li( + { + elementAttrsBuilder.invoke(this, it) + } + ) { elementBuilder(this, it) } + } + } +} diff --git a/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitArticle.kt b/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitArticle.kt new file mode 100644 index 0000000..56ec3f5 --- /dev/null +++ b/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitArticle.kt @@ -0,0 +1,12 @@ +package dev.inmo.jsuikit.modifiers + +sealed class UIKitArticle( + override val classes: Array +) : UIKitModifier { + + object Title : UIKitArticle(arrayOf("uk-article-title")) + object Meta : UIKitArticle(arrayOf("uk-article-meta")) + + companion object : UIKitArticle(arrayOf("uk-article")) + +} diff --git a/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitGrid.kt b/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitGrid.kt index b97b769..1de9752 100644 --- a/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitGrid.kt +++ b/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitGrid.kt @@ -19,7 +19,7 @@ sealed class UIKitGrid(vararg classnames: String) : UIKitModifier { object MatchHeight : UIKitGrid("uk-grid-match") object ItemMatchHeight : UIKitGrid("uk-grid-item-match") - class Custom internal constructor(override val otherAttrs: Map) : UIKitGrid() + class Custom internal constructor(override val otherAttrs: Map) : UIKitGrid("uk-grid") companion object : UIKitGrid("uk-grid") { operator fun invoke( diff --git a/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitIconnav.kt b/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitIconnav.kt new file mode 100644 index 0000000..93df57a --- /dev/null +++ b/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitIconnav.kt @@ -0,0 +1,11 @@ +package dev.inmo.jsuikit.modifiers + +sealed class UIKitIconnav( + override val classes: Array +) : UIKitModifier { + + object Vertical : UIKitIconnav(arrayOf("uk-iconnav-vertical")) + + companion object : UIKitIconnav(arrayOf("uk-iconnav")) + +} diff --git a/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitLeader.kt b/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitLeader.kt new file mode 100644 index 0000000..2b4905b --- /dev/null +++ b/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitLeader.kt @@ -0,0 +1,28 @@ +package dev.inmo.jsuikit.modifiers + +import dev.inmo.jsuikit.utils.buildAttribute + +sealed class UIKitLeader( + override val classes: Array, + override val otherAttrs: Map +) : UIKitModifier { + + class Custom( + otherAttrs: Map + ) : UIKitLeader(arrayOf("uk-leader"), otherAttrs) + + companion object : UIKitLeader(arrayOf("uk-leader"), emptyMap()) { + operator fun invoke( + media: String? = null, + fill: String? = null + ) = Custom( + mapOf( + buildAttribute("uk-leader") { + "fill" to fill + "media" to media + } + ) + ) + } + +}