in navs now titles are optional

0.0.48

CHANGELOG.md

@@ -1,5 +1,38 @@
 # Changelog
 
+## 0.0.49
+
+* Now it is possible to use optional title in navs builders
+
+## 0.0.48
+
+* Added support of `Breadcrumb`
+* Add opportunity to summarize `UIKitModifier`
+* Add opportunity to simply create attributes builder using `UIKitModifier` of array of them
+
+## 0.0.47
+
+* Add support of `Close` element
+
+## 0.0.46
+
+* Add support of `UIKitOverlay`
+* Add support of `UIKitInverse`
+
+## 0.0.45
+
+* Add support of containers in `UIKitContainer` modifiers and `Container` function
+
+## 0.0.44
+
+* `Versions`:
+    * `Compose`: `1.1.0` -> `1.1.1`
+
+## 0.0.43
+
+* Several new extensions for `UIKitModifier` like `UIKitModifier#onSmallScreen`
+* Support of `Tile`
+
 ## 0.0.42
 
 * Migration to compose 1.1.0

gradle.properties

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

gradle/libs.versions.toml

@@ -1,7 +1,7 @@
 [versions]
 
 kt = "1.6.10"
-jb-compose = "1.1.0"
+jb-compose = "1.1.1"
 jb-dokka = "1.6.10"
 gh-release = "2.2.12"
 

gradle/wrapper/gradle-wrapper.properties

@@ -1,5 +1,5 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-7.3.3-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.4.1-bin.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists

src/jsMain/kotlin/dev/inmo/jsuikit/elements/Breadcrumb.kt

@@ -0,0 +1,50 @@
+package dev.inmo.jsuikit.elements
+
+import androidx.compose.runtime.Composable
+import dev.inmo.jsuikit.modifiers.UIKitBreadcrumb
+import dev.inmo.jsuikit.modifiers.include
+import dev.inmo.jsuikit.utils.Attrs
+import org.jetbrains.compose.web.dom.*
+import org.w3c.dom.*
+
+@Composable
+fun <T> Breadcrumb(
+    data: Iterable<T>,
+    rootAttrs: Attrs<HTMLUListElement> = Attrs.empty(),
+    elementAttrs: Attrs<HTMLLIElement> = Attrs.empty(),
+    elementContent: @Composable ElementScope<HTMLLIElement>.(T) -> Unit = {},
+) {
+    Ul(
+        {
+            include(UIKitBreadcrumb)
+            rootAttrs.builder(this)
+        }
+    ) {
+        data.forEach {
+            Li({ elementAttrs.builder(this) }) {
+                elementContent(it)
+            }
+        }
+    }
+}
+
+@Composable
+fun BreadcrumbActiveElement(
+    href: String? = "#",
+    elementAttrs: Attrs<HTMLAnchorElement> = Attrs.empty(),
+    elementContent: @Composable ElementScope<HTMLAnchorElement>.() -> Unit = {},
+) {
+    A(href, { elementAttrs.builder(this) }) {
+        elementContent()
+    }
+}
+
+@Composable
+fun BreadcrumbInactiveElement(
+    elementAttrs: Attrs<HTMLSpanElement> = Attrs.empty(),
+    elementContent: @Composable ElementScope<HTMLSpanElement>.() -> Unit = {},
+) {
+    Span({ elementAttrs.builder(this) }) {
+        elementContent()
+    }
+}

src/jsMain/kotlin/dev/inmo/jsuikit/elements/Close.kt

@@ -0,0 +1,45 @@
+package dev.inmo.jsuikit.elements
+
+import androidx.compose.runtime.Composable
+import androidx.compose.web.events.SyntheticMouseEvent
+import dev.inmo.jsuikit.modifiers.UIKitClose
+import dev.inmo.jsuikit.modifiers.include
+import dev.inmo.jsuikit.utils.Attrs
+import org.jetbrains.compose.web.attributes.ButtonType
+import org.jetbrains.compose.web.attributes.type
+import org.jetbrains.compose.web.dom.*
+import org.w3c.dom.HTMLAnchorElement
+import org.w3c.dom.HTMLButtonElement
+
+object Close {
+    @Composable
+    fun drawAsLink(
+        href: String = "#",
+        attrs: Attrs<HTMLAnchorElement> = Attrs.empty(),
+        contentBuilder: ContentBuilder<HTMLAnchorElement> = {}
+    ) = A(
+        href,
+        {
+            include(UIKitClose)
+            attrs.builder(this)
+        },
+        contentBuilder
+    )
+
+    @Composable
+    fun drawAsButton(
+        attrs: Attrs<HTMLButtonElement> = Attrs.empty(),
+        contentBuilder: ContentBuilder<HTMLButtonElement> = {},
+        onClick: ((SyntheticMouseEvent) -> Unit)? = null
+    ) = Button(
+        {
+            type(ButtonType.Button)
+            include(UIKitClose)
+            attrs.builder(this)
+            onClick ?.let {
+                onClick(onClick)
+            }
+        },
+        contentBuilder
+    )
+}

src/jsMain/kotlin/dev/inmo/jsuikit/elements/Container.kt

@@ -0,0 +1,21 @@
+package dev.inmo.jsuikit.elements
+
+import androidx.compose.runtime.Composable
+import dev.inmo.jsuikit.modifiers.UIKitContainer
+import dev.inmo.jsuikit.modifiers.include
+import dev.inmo.jsuikit.utils.Attrs
+import org.jetbrains.compose.web.dom.ContentBuilder
+import org.jetbrains.compose.web.dom.Div
+import org.w3c.dom.HTMLDivElement
+
+@Composable
+fun Container(
+    attrs: Attrs<HTMLDivElement> = Attrs.empty(),
+    contentBuilder: ContentBuilder<HTMLDivElement> = {}
+) = Div(
+    {
+        include(UIKitContainer)
+        attrs.builder.invoke(this)
+    },
+    contentBuilder
+)

src/jsMain/kotlin/dev/inmo/jsuikit/elements/Grid.kt

@@ -10,7 +10,7 @@ import org.w3c.dom.HTMLDivElement
 fun GridColumn(
     vararg modifiers: UIKitModifier,
     attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {},
-    builder: @Composable ElementScope<HTMLDivElement>.() -> Unit
+    builder: @Composable ElementScope<HTMLDivElement>.() -> Unit = {}
 ) {
     Div(
         {
@@ -30,7 +30,7 @@ fun Grid(
     marginClass: String? = null,
     firstColumnClass: String? = null,
     attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {},
-    builder: @Composable ElementScope<HTMLDivElement>.() -> Unit
+    builder: @Composable ElementScope<HTMLDivElement>.() -> Unit = {}
 ) {
     val attrs = listOfNotNull(
         if (masonry) "masonry" to "true" else null,

src/jsMain/kotlin/dev/inmo/jsuikit/elements/Icon.kt

@@ -77,15 +77,15 @@ sealed class Icon(val name: String) {
         object Grid : App("grid")
         sealed class More(iconName: String) : App("more${iconName.takeIf { it.isNotEmpty() } ?.let { "-$it" } ?: "" }") {
             object Vertical : More("vertical")
-            companion object : More("more")
+            companion object : More("")
         }
         sealed class Plus(iconName: String) : App("plus${iconName.takeIf { it.isNotEmpty() } ?.let { "-$it" } ?: "" }") {
             object Circle : Plus("circle")
-            companion object : Plus("plus")
+            companion object : Plus("")
         }
         sealed class Minus(iconName: String) : App("minus${iconName.takeIf { it.isNotEmpty() } ?.let { "-$it" } ?: "" }") {
             object Circle : Minus("circle")
-            companion object : Minus("minus")
+            companion object : Minus("")
         }
         object Close : App("close")
         object Check : App("check")
@@ -93,7 +93,7 @@ sealed class Icon(val name: String) {
         object Refresh : App("refresh")
         sealed class Play(iconName: String) : App("play${iconName.takeIf { it.isNotEmpty() } ?.let { "-$it" } ?: "" }") {
             object Circle : Play("circle")
-            companion object : Play("play")
+            companion object : Play("")
         }
     }
     sealed class Devices(iconName: String) : Icon(iconName) {
@@ -102,11 +102,11 @@ sealed class Icon(val name: String) {
         object Laptop : Devices("laptop")
         sealed class Tablet(iconName: String) : Devices("tablet${iconName.takeIf { it.isNotEmpty() } ?.let { "-$it" } ?: "" }") {
             object Landscape : Tablet("landscape")
-            companion object : Tablet("tablet")
+            companion object : Tablet("")
         }
         sealed class Phone(iconName: String) : Devices("phone${iconName.takeIf { it.isNotEmpty() } ?.let { "-$it" } ?: "" }") {
             object Landscape : Phone("landscape")
-            companion object : Phone("phone")
+            companion object : Phone("")
         }
     }
     sealed class Storage(iconName: String) : Icon(iconName) {
@@ -114,7 +114,7 @@ sealed class Icon(val name: String) {
             object Text : File("text")
             object Pdf : File("pdf")
             object Edit : File("edit")
-            companion object : File("file")
+            companion object : File("")
         }
         object Copy : Storage("copy")
         object Folder : Storage("folder")
@@ -177,7 +177,7 @@ sealed class Icon(val name: String) {
         object Foursquare : Brands("foursquare")
         sealed class Github(iconName: String) : Brands("github${iconName.takeIf { it.isNotEmpty() } ?.let { "-$it" } ?: "" }") {
             object Alt : Github("alt")
-            companion object : Github("github")
+            companion object : Github("")
         }
         object Gitter : Brands("gitter")
         object Google : Brands("google")

src/jsMain/kotlin/dev/inmo/jsuikit/elements/Nav.kt

@@ -94,8 +94,8 @@ fun SubNav(
 
 @Composable
 fun <T> Nav(
-    title: String,
-    data: SnapshotStateList<T>,
+    title: String?,
+    data: Iterable<T>,
     vararg ulModifiers: UIKitModifier,
     titleModifiers: Array<UIKitModifier> = emptyArray(),
     multiple: Boolean? = null,
@@ -119,11 +119,13 @@ fun <T> Nav(
             ulCustomizer()
         }
     ) {
-        NavHeader(
-            title,
-            *titleModifiers,
-            attributesCustomizer = titleCustomizer
-        )
+        title ?.let {
+            NavHeader(
+                title,
+                *titleModifiers,
+                attributesCustomizer = titleCustomizer
+            )
+        }
         besidesTitleAndList ?.let { it() }
         data.forEach {
             elementAllocator(it)
@@ -133,8 +135,8 @@ fun <T> Nav(
 
 @Composable
 fun <T> DefaultNav(
-    title: String,
-    data: SnapshotStateList<T>,
+    title: String?,
+    data: Iterable<T>,
     vararg ulModifiers: UIKitModifier,
     titleModifiers: Array<UIKitModifier> = emptyArray(),
     multiple: Boolean? = null,
@@ -162,8 +164,8 @@ fun <T> DefaultNav(
 
 @Composable
 fun <T> PrimaryNav(
-    title: String,
-    data: SnapshotStateList<T>,
+    title: String?,
+    data: Iterable<T>,
     vararg ulModifiers: UIKitModifier,
     titleModifiers: Array<UIKitModifier> = emptyArray(),
     multiple: Boolean? = null,
@@ -191,8 +193,8 @@ fun <T> PrimaryNav(
 
 @Composable
 fun <T> SubNav(
-    title: String,
-    data: SnapshotStateList<T>,
+    title: String?,
+    data: Iterable<T>,
     vararg ulModifiers: UIKitModifier,
     titleModifiers: Array<UIKitModifier> = emptyArray(),
     multiple: Boolean? = null,

src/jsMain/kotlin/dev/inmo/jsuikit/elements/Tile.kt

@@ -0,0 +1,21 @@
+package dev.inmo.jsuikit.elements
+
+import androidx.compose.runtime.Composable
+import dev.inmo.jsuikit.modifiers.UIKitTile
+import dev.inmo.jsuikit.modifiers.include
+import dev.inmo.jsuikit.utils.Attrs
+import org.jetbrains.compose.web.dom.ContentBuilder
+import org.jetbrains.compose.web.dom.Div
+import org.w3c.dom.HTMLDivElement
+
+@Composable
+fun Tile(
+    attrs: Attrs<HTMLDivElement> = Attrs.empty(),
+    contentBuilder: ContentBuilder<HTMLDivElement>
+) = Div(
+    {
+        include(UIKitTile)
+        attrs.builder(this)
+    },
+    contentBuilder
+)

src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/AttributeValue.kt

@@ -1,3 +1,5 @@
 package dev.inmo.jsuikit.modifiers
 
-sealed class AttributeValue(val name: String)
+sealed class AttributeValue(val name: String) {
+    override fun toString(): String = name
+}

src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitBreadcrumb.kt

@@ -0,0 +1,8 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitBreadcrumb(
+    override val classes: Array<String> = emptyArray(),
+    override val otherAttrs: Map<String, String> = emptyMap()
+) : UIKitModifier {
+    companion object : UIKitBreadcrumb(arrayOf("uk-breadcrumb"))
+}

src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitClose.kt

@@ -0,0 +1,17 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitClose(
+    override val classes: Array<String> = emptyArray(),
+    override val otherAttrs: Map<String, String> = emptyMap()
+) : UIKitModifier {
+
+    object Large : UIKitClose(
+        arrayOf("uk-close-large")
+    )
+
+    companion object : UIKitClose(
+        arrayOf("uk-close"),
+        mapOf("uk-close" to "")
+    )
+
+}

src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitContainer.kt

@@ -0,0 +1,19 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitContainer(
+    override val classes: Array<String> = emptyArray(),
+    override val otherAttrs: Map<String, String> = emptyMap()
+) : UIKitModifier {
+
+    sealed class Size(size: String) : UIKitContainer(arrayOf("uk-container-$size")) {
+        object XSmall : Size("xsmall")
+        object Small : Size("small")
+        object Large : Size("large")
+        object XLarge : Size("xlarge")
+        object Expand : Size("expand")
+    }
+
+    companion object : UIKitContainer(
+        arrayOf("uk-container")
+    )
+}

src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitDropdown.kt

@@ -50,6 +50,9 @@ sealed class UIKitDropdown(classname: String) : UIKitModifier {
         object Click : Mode("click")
         object Hover : Mode("hover")
 
+        object None : Mode("")
+        object HoverAndClick : Mode("$Hover, $Click")
+
     }
 
     sealed class Flip(name: String) : AttributeValue(name) {

src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitInverse.kt

@@ -0,0 +1,8 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitInverse(classname: String) : UIKitModifier {
+    override val classes: Array<String> = arrayOf(classname)
+
+    object Light : UIKitInverse("uk-light")
+    object Dark : UIKitInverse("uk-dark")
+}

src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitModifier.kt

@@ -1,6 +1,9 @@
 package dev.inmo.jsuikit.modifiers
 
+import dev.inmo.jsuikit.utils.Attrs
 import org.jetbrains.compose.web.attributes.AttrsScope
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+import org.w3c.dom.Element
 
 interface UIKitModifier {
     val classes: Array<String>
@@ -15,3 +18,16 @@ fun AttrsScope<*>.include(vararg container: UIKitModifier?) {
         it ?.otherAttrs ?.let { attrs -> attrs.forEach { (k, v) -> attr(k, v) } }
     }
 }
+
+fun <T : Element> UIKitModifier.asAttributesBuilder(): AttrBuilderContext<T> = {
+    include(this@asAttributesBuilder)
+}
+operator fun UIKitModifier.plus(other: UIKitModifier): UIKitModifier = UIKitCustom(
+    classes + other.classes,
+    otherAttrs + other.otherAttrs
+)
+fun <T: Element> UIKitModifier.builder() = Attrs<T>(this).builder
+fun <T: Element> Array<out UIKitModifier>.builder() = Attrs<T>(*this).builder
+inline fun <T: Element> attrsBuilder(vararg modifiers: UIKitModifier) = modifiers.builder<T>()
+@JsName("plusBuilder")
+operator fun <T: Element> UIKitModifier.plus(other: UIKitModifier): AttrBuilderContext<T> = Attrs<T>(this@plus, other).builder

src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitOverlay.kt

@@ -0,0 +1,16 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitOverlay(
+    override val classes: Array<String> = emptyArray(),
+    override val otherAttrs: Map<String, String> = emptyMap()
+) : UIKitModifier {
+
+    object Default : UIKitOverlay(arrayOf("uk-overlay-default"))
+    object Primary : UIKitOverlay(arrayOf("uk-overlay-primary"))
+    object Icon : UIKitOverlay(arrayOf("uk-overlay-icon"))
+
+    companion object : UIKitOverlay(
+        arrayOf("uk-overlay")
+    )
+
+}

src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitScreenSizeModifier.kt

@@ -20,3 +20,12 @@ sealed class UIKitScreenSizeModifier(val name: String) {
 }
 
 fun UIKitModifier.applyWhenScreenSizeIs(size: UIKitScreenSizeModifier) = size.modify(this)
+
+val UIKitModifier.onSmallScreens
+    get() = applyWhenScreenSizeIs(UIKitScreenSizeModifier.Small)
+val UIKitModifier.onMediumScreens
+    get() = applyWhenScreenSizeIs(UIKitScreenSizeModifier.Medium)
+val UIKitModifier.onLargeScreens
+    get() = applyWhenScreenSizeIs(UIKitScreenSizeModifier.Large)
+val UIKitModifier.onXLargeScreens
+    get() = applyWhenScreenSizeIs(UIKitScreenSizeModifier.XLarge)

src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitTile.kt

@@ -0,0 +1,15 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitTile(
+    override val classes: Array<String> = emptyArray(),
+    override val otherAttrs: Map<String, String> = emptyMap()
+) : UIKitModifier {
+
+    object Default : UIKitTile(arrayOf("uk-tile-default"))
+    object Muted : UIKitTile(arrayOf("uk-tile-muted"))
+    object Primary : UIKitTile(arrayOf("uk-tile-primary"))
+    object Secondary : UIKitTile(arrayOf("uk-tile-secondary"))
+
+    companion object : UIKitTile(arrayOf("uk-tile"))
+
+}