Grid support improvement; Article, Iconnav and Leader support

This commit is contained in:
InsanusMokrassar 2022-07-31 15:04:27 +06:00
parent 429d3d4e77
commit 8c5dca73fa
8 changed files with 156 additions and 15 deletions

View File

@ -2,6 +2,11 @@
## 0.1.9 ## 0.1.9
* `Artile` elements become supported
* `Iconnav` elements become supported
* `Leader` elements become supported
* `Grid` support improvements
## 0.1.8 ## 0.1.8
* `Compose`: `1.2.0-alpha01-dev731` * `Compose`: `1.2.0-alpha01-dev731`

View File

@ -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<HTMLHeadingElement>,
headerAttrs: Attrs<HTMLHeadingElement> = Attrs.empty(),
metaBuilder: ContentBuilder<HTMLParagraphElement>? = null,
metaAttrs: Attrs<HTMLParagraphElement>? = null,
otherContentBuilder: ContentBuilder<HTMLElement>
) = 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<HTMLElement>
) = UIKitArticleElement(
{ Text(header) },
metaBuilder = meta ?.let {
{
Text(meta)
}
},
otherContentBuilder = otherContentBuilder
)

View File

@ -1,8 +1,8 @@
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.buildAttribute
import org.jetbrains.compose.web.dom.* import org.jetbrains.compose.web.dom.*
import org.w3c.dom.HTMLDivElement import org.w3c.dom.HTMLDivElement
@ -26,23 +26,18 @@ fun GridColumn(
fun Grid( fun Grid(
vararg modifiers: UIKitModifier, vararg modifiers: UIKitModifier,
masonry: Boolean = false, masonry: Boolean = false,
parallax: Int? = null, parallax: UInt? = null,
marginClass: String? = null, marginClass: UIKitMargin? = null,
firstColumnClass: String? = null, firstColumnClass: String? = null,
attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {}, attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {},
builder: @Composable ElementScope<HTMLDivElement>.() -> Unit = {} builder: ContentBuilder<HTMLDivElement> = {}
) { ) {
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( Div(
{ {
attr("uk-grid", attrs.joinToString(";") { (k, v) -> "$k: $v" }) include(
classes("uk-grid") UIKitGrid.invoke(marginClass, firstColumnClass, masonry, parallax),
include(*modifiers) *modifiers
)
attributesCustomizer() attributesCustomizer()
} }
) { ) {

View File

@ -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 <T> Iconnav(
data: Iterable<T>,
listAttrs: Attrs<HTMLUListElement> = Attrs.empty(),
elementAttrsBuilder: AttrsScope<HTMLLIElement>.(T) -> Unit = {},
elementBuilder: @Composable ElementScope<HTMLLIElement>.(T) -> Unit
) {
Ul(
{
include(UIKitIconnav)
listAttrs.builder(this)
}
) {
data.forEach {
Li(
{
elementAttrsBuilder.invoke(this, it)
}
) { elementBuilder(this, it) }
}
}
}

View File

@ -0,0 +1,12 @@
package dev.inmo.jsuikit.modifiers
sealed class UIKitArticle(
override val classes: Array<String>
) : UIKitModifier {
object Title : UIKitArticle(arrayOf("uk-article-title"))
object Meta : UIKitArticle(arrayOf("uk-article-meta"))
companion object : UIKitArticle(arrayOf("uk-article"))
}

View File

@ -19,7 +19,7 @@ sealed class UIKitGrid(vararg classnames: String) : UIKitModifier {
object MatchHeight : UIKitGrid("uk-grid-match") object MatchHeight : UIKitGrid("uk-grid-match")
object ItemMatchHeight : UIKitGrid("uk-grid-item-match") object ItemMatchHeight : UIKitGrid("uk-grid-item-match")
class Custom internal constructor(override val otherAttrs: Map<String, String>) : UIKitGrid() class Custom internal constructor(override val otherAttrs: Map<String, String>) : UIKitGrid("uk-grid")
companion object : UIKitGrid("uk-grid") { companion object : UIKitGrid("uk-grid") {
operator fun invoke( operator fun invoke(

View File

@ -0,0 +1,11 @@
package dev.inmo.jsuikit.modifiers
sealed class UIKitIconnav(
override val classes: Array<String>
) : UIKitModifier {
object Vertical : UIKitIconnav(arrayOf("uk-iconnav-vertical"))
companion object : UIKitIconnav(arrayOf("uk-iconnav"))
}

View File

@ -0,0 +1,28 @@
package dev.inmo.jsuikit.modifiers
import dev.inmo.jsuikit.utils.buildAttribute
sealed class UIKitLeader(
override val classes: Array<String>,
override val otherAttrs: Map<String, String>
) : UIKitModifier {
class Custom(
otherAttrs: Map<String, String>
) : 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
}
)
)
}
}