add Toggle builder

0.1.6

CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## 0.1.7
+
+Add Toggle builder
+
+## 0.1.6
+
+* Add support of UIKitButton size and group
+
+## 0.1.5
+
+* Fix access to `UIKitSticky`
+
+## 0.1.4
+
+* Improvements in `UIKitGrid`
+* Add support of `UIKitSticky`
+
+## 0.1.3
+
+* Add support of sections
+* Improve support of navbars
+
+## 0.1.2
+
+* New typealias `AttrsWithContentBuilder`
+* Old `DList` and related composable functions removed (they are built-in in compose)
+
 ## 0.1.1
 
 * `Compose`: `1.2.0-alpha01-dev686`

gradle.properties

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

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

@@ -4,8 +4,7 @@ import androidx.compose.runtime.Composable
 import dev.inmo.jsuikit.modifiers.UIKitDescriptionList
 import dev.inmo.jsuikit.modifiers.include
 import dev.inmo.jsuikit.utils.*
-import org.jetbrains.compose.web.dom.ContentBuilder
-import org.jetbrains.compose.web.dom.ElementScope
+import org.jetbrains.compose.web.dom.*
 import org.w3c.dom.HTMLDListElement
 import org.w3c.dom.HTMLElement
 

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

@@ -10,7 +10,7 @@ import org.w3c.dom.HTMLDivElement
 @Composable
 fun DropArea(
     attrs: Attrs<HTMLDivElement> = Attrs.empty(),
-    inputAttrs: InputAttrs<String> = Attrs.empty(),
+    inputAttrs: InputAttrs<String> = InputAttrs.empty(),
     contentBuilder: ContentBuilder<HTMLDivElement> = {}
 ) = Div(
     {

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

@@ -1,35 +1,76 @@
 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.*
 import org.jetbrains.compose.web.dom.*
+import org.w3c.dom.HTMLDivElement
 import org.w3c.dom.HTMLElement
 
 @Composable
 fun Navbar(
-    leftBuilder: NavbarNavBuilder? = null,
+    attributesCustomizer: AttrBuilderContext<HTMLElement> = {},
+    contentBuilder: ContentBuilder<HTMLElement>
+) {
+    Nav(
+        {
+            include(UIKitNavbar, UIKitNavbar(), UIKitNavbar.Container)
+            attributesCustomizer()
+        }
+    ) {
+        contentBuilder()
+    }
+}
+
+@Deprecated("Will be removed soon. Use the variant with AttrsWithContentBuilders")
+@Composable
+fun Navbar(
+    leftBuilder: NavbarNavBuilder?,
     centerBuilder: NavbarNavBuilder? = null,
     rightBuilder: NavbarNavBuilder? = null,
     vararg navModifiers: UIKitModifier,
     attributesCustomizer: AttrBuilderContext<HTMLElement> = {},
 ) {
-    Nav(
+    Navbar(
         {
-            attr("uk-navbar", "")
-            classes("uk-navbar-container", "uk-navbar")
             include(*navModifiers)
             attributesCustomizer()
         }
     ) {
         leftBuilder ?.let {
-            Div({ classes("uk-navbar-left") }) { it.draw() }
+            Div({ include(UIKitNavbar.Alignment.Left) }) { it.draw() }
         }
         centerBuilder ?.let {
-            Div({ classes("uk-navbar-center") }) { it.draw() }
+            Div({ include(UIKitNavbar.Alignment.Center) }) { it.draw() }
         }
         rightBuilder ?.let {
-            Div({ classes("uk-navbar-right") }) { it.draw() }
+            Div({ include(UIKitNavbar.Alignment.Right) }) { it.draw() }
+        }
+    }
+}
+
+@Composable
+fun Navbar(
+    leftBuilder: AttrsWithContentBuilder<HTMLDivElement>? = null,
+    centerBuilder: AttrsWithContentBuilder<HTMLDivElement>? = null,
+    rightBuilder: AttrsWithContentBuilder<HTMLDivElement>? = null,
+    vararg navModifiers: UIKitModifier,
+    attributesCustomizer: AttrBuilderContext<HTMLElement> = {},
+) {
+    Navbar(
+        attributesCustomizer = {
+            include(*navModifiers)
+            attributesCustomizer()
+        }
+    ) {
+        leftBuilder ?.let {
+            Div({ include(UIKitNavbar.Alignment.Left);leftBuilder.attributesBuilderContext(this) }, leftBuilder.builder)
+        }
+        centerBuilder ?.let {
+            Div({ include(UIKitNavbar.Alignment.Center);centerBuilder.attributesBuilderContext(this) }, centerBuilder.builder)
+        }
+        rightBuilder ?.let {
+            Div({ include(UIKitNavbar.Alignment.Right);rightBuilder.attributesBuilderContext(this) }, rightBuilder.builder)
         }
     }
 }

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

@@ -1,13 +1,37 @@
 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.*
 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 NavbarNav(
+    elements: List<AttrsWithContentBuilder<HTMLLIElement>>,
+    attrs: Attrs<HTMLUListElement> = Attrs.empty()
+) {
+    Ul(
+        {
+            include(UIKitNavbar.Nav)
+            attrs.builder(this)
+        }
+    ) {
+        elements.forEach { element ->
+            Li(element.attributesBuilderContext, element.builder)
+        }
+    }
+}
+
+@Composable
+fun NavbarNav(
+    vararg elements: AttrsWithContentBuilder<HTMLLIElement>,
+    attrs: Attrs<HTMLUListElement> = Attrs.empty()
+) = NavbarNav(elements.toList(), attrs)
+
+@Deprecated("Will be removed soon. Use NavbarNavPart with AttrsWithContentBuilder instead")
 interface NavbarNavElement {
     fun AttrsScope<HTMLLIElement>.setup() {}
     @Composable
@@ -28,6 +52,7 @@ interface NavbarNavElement {
     }
 }
 
+@Deprecated("Will be removed soon. Use NavbarNavPart with AttrsWithContentBuilder instead")
 class NavbarNavBuilder(
     private val modifiers: Array<UIKitModifier>,
     private val elements: List<NavbarNavElement>,
@@ -46,8 +71,7 @@ class NavbarNavBuilder(
     fun draw() {
         Ul(
             {
-                classes("uk-navbar-nav")
-                include(*modifiers)
+                include(UIKitNavbar.Nav, *modifiers)
                 attributesCustomizer()
             }
         ) {

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

@@ -0,0 +1,26 @@
+package dev.inmo.jsuikit.elements
+
+import androidx.compose.runtime.Composable
+import dev.inmo.jsuikit.modifiers.UIKitToggle
+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.Button
+import org.jetbrains.compose.web.dom.ContentBuilder
+import org.w3c.dom.HTMLButtonElement
+
+@Composable
+fun Toggle(
+    attrs: Attrs<HTMLButtonElement>,
+    contentBuilder: ContentBuilder<HTMLButtonElement>
+) {
+    Button(
+        {
+            include(UIKitToggle)
+            type(ButtonType.Button)
+            attrs.builder(this)
+        },
+        contentBuilder
+    )
+}

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

@@ -12,5 +12,12 @@ sealed class UIKitButton(suffix: String?) : UIKitModifier {
         object Link : Type("link")
     }
 
+    sealed class Size(suffix: String) : UIKitButton(suffix) {
+        object Small : Size("small")
+        object Large : Size("large")
+    }
+
+    object Group : UIKitButton("group")
+
     companion object : UIKitButton(null)
 }

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

@@ -1,20 +1,41 @@
 package dev.inmo.jsuikit.modifiers
 
-sealed class UIKitGrid(suffix: String) : UIKitModifier {
-    override val classes: Array<String> = arrayOf("uk-grid-$suffix")
+import dev.inmo.jsuikit.utils.buildAttribute
 
-    sealed class Gap(suffix: String) : UIKitGrid(suffix) {
+sealed class UIKitGrid(vararg classnames: String) : UIKitModifier {
+    override val classes: Array<String> = classnames as Array<String>
 
-        object Small : Gap("small")
-        object Medium : Gap("medium")
-        object Large : Gap("large")
-        object Collapse : Gap("collapse")
+    sealed class Gap(classname: String) : UIKitGrid(classname) {
+
+        object Small : Gap("uk-grid-small")
+        object Medium : Gap("uk-grid-medium")
+        object Large : Gap("uk-grid-large")
+        object Collapse : Gap("uk-grid-collapse")
 
     }
 
-    object Divider : UIKitGrid("divider")
+    object Divider : UIKitGrid("uk-grid-divider")
 
-    object MatchHeight : UIKitGrid("match")
-    object ItemMatchHeight : UIKitGrid("item-match")
+    object MatchHeight : UIKitGrid("uk-grid-match")
+    object ItemMatchHeight : UIKitGrid("uk-grid-item-match")
 
+    class Custom internal constructor(override val otherAttrs: Map<String, String>) : UIKitGrid()
+
+    companion object : UIKitGrid("uk-grid") {
+        operator fun invoke(
+            margin: UIKitMargin? = null,
+            firstColumnClass: String? = null,
+            masonry: Boolean? = null,
+            parallax: UInt? = null
+        ) = Custom(
+            mapOf(
+                buildAttribute("uk-grid") {
+                    margin to margin ?.classes ?.joinToString(" ")
+                    "first-column" to firstColumnClass
+                    "masonry" to masonry
+                    "parallax" to parallax
+                }
+            )
+        )
+    }
 }

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

@@ -14,6 +14,8 @@ sealed class UIKitNav(classname: String) : UIKitModifier {
 
     object Center : UIKitNav("uk-nav-center")
 
+    object Sub : UIKitNav("uk-nav-sub")
+
     companion object : UIKitNav("uk-nav") {
         val SubNav = UIKitSubNav
     }

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

@@ -1,17 +1,86 @@
 package dev.inmo.jsuikit.modifiers
 
-sealed class UIKitNavbar(suffix: String) : UIKitModifier {
-    override val classes: Array<String> = arrayOf("uk-navbar-$suffix")
+import dev.inmo.jsuikit.types.Dropdown
+import dev.inmo.jsuikit.utils.*
 
-    object Transparent : UIKitNavbar("transparent")
-    sealed class Dropdown(suffix: String?) : UIKitNavbar("dropdown${suffix ?.let { "-$it" } ?: ""}") {
+sealed class UIKitNavbar(vararg classes: String) : UIKitModifier {
+    override val classes: Array<String> = classes as Array<String>
+
+    object Transparent : UIKitNavbar("uk-navbar-transparent")
+    object Container : UIKitNavbar("uk-navbar-container")
+    sealed class Dropdown(suffix: String?) : UIKitNavbar("uk-navbar-dropdown${suffix ?.let { "-$it" } ?: ""}") {
         object Nav : Dropdown("nav")
 
+        sealed class Width(suffix: String) : Dropdown(suffix) {
+            object Two : Width("width-2")
+            object Three : Width("width-3")
+            object Four : Width("width-4")
+            object Five : Width("width-5")
+        }
+
         companion object : Dropdown(null)
     }
-    object Item : UIKitNavbar("item")
+    sealed class Alignment(val suffix: String) : UIKitNavbar("uk-navbar-$suffix") {
+        object Left : Alignment("left")
+        sealed class Center(suffix: String) : Alignment(suffix) {
+            object Left : Center("center-left")
+            object Right : Center("center-right")
 
-    companion object {
+            companion object : Center("center")
+        }
+        object Right : Alignment("right")
+    }
+    object Item : UIKitNavbar("uk-navbar-item")
+    object Nav : UIKitNavbar("uk-navbar-nav")
+    object Subtitle : UIKitNavbar("uk-navbar-subtitle")
+    object Toggle : UIKitNavbar("uk-navbar-toggle")
+    object Sticky : UIKitNavbar("uk-navbar-sticky")
+
+    class Component internal constructor(
+        override val otherAttrs: Map<String, String>
+    ) : UIKitNavbar(*UIKitNavbar.classes)
+
+    companion object : UIKitNavbar("uk-navbar") {
         val Logo = UIKitUtility.Logo
+
+        operator fun invoke(
+            align: String?,
+            mode: String? = null,
+            delayShow: Milliseconds? = null,
+            delayHide: Milliseconds? = null,
+            boundary: String? = null,
+            boundaryAlign: Boolean? = null,
+            offset: Pixels? = null,
+            dropbar: Boolean? = null,
+            duration: Milliseconds? = null
+        ): Component {
+            return Component(
+                mapOf(
+                    buildAttribute(UIKitNavbar.classes.first()) {
+                        "align" to align
+                        "mode" to mode
+                        "delay-show" to delayShow
+                        "delay-hide" to delayHide
+                        "boundary" to boundary
+                        "boundary-align" to boundaryAlign
+                        "offset" to offset
+                        "dropbar" to dropbar
+                        "duration" to duration
+                    }
+                )
+            )
+        }
+
+        operator fun invoke(
+            align: Alignment? = null,
+            mode: UIKitDropdown.Mode? = null,
+            delayShow: Milliseconds? = null,
+            delayHide: Milliseconds? = null,
+            boundary: String? = null,
+            boundaryAlign: Boolean? = null,
+            offset: Pixels? = null,
+            dropbar: Boolean? = null,
+            duration: Milliseconds? = null
+        ): Component = invoke(align ?.suffix, mode ?.name, delayShow, delayHide, boundary, boundaryAlign, offset, dropbar, duration)
     }
 }

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

@@ -0,0 +1,23 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitSection(vararg classes: String) : UIKitModifier {
+    override val classes: Array<String> = classes as Array<String>
+
+    sealed class Style(suffix: String) : UIKitSection("uk-section-$suffix") {
+        object Default : Style("default")
+        object Muted : Style("muted")
+        object Primary : Style("primary")
+        object Secondary : Style("secondary")
+    }
+
+    sealed class Size(suffix: String) : UIKitSection("uk-section-$suffix") {
+        object XSmall : Size("xsmall")
+        object Small : Size("small")
+        object Large : Size("large")
+        object XLarge : Size("xlarge")
+    }
+
+    object Overlap : UIKitSection("uk-section-overlap")
+
+    companion object : UIKitSection("uk-section")
+}

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

@@ -0,0 +1,47 @@
+package dev.inmo.jsuikit.modifiers
+
+import dev.inmo.jsuikit.utils.buildAttribute
+import org.jetbrains.compose.web.css.CSSUnitLengthOrPercentage
+import org.jetbrains.compose.web.css.CSSUnitValueTyped
+
+class UIKitSticky(
+    position: Position? = null,
+    start: String? = null,
+    end: String? = null,
+    offset: CSSUnitValueTyped<CSSUnitLengthOrPercentage>? = null,
+    overflowFlip: Boolean? = null,
+    animation: UIKitAnimation? = null,
+    classForActiveItems: String? = null,
+    classForInactiveItems: String? = null,
+    showOnUp: Boolean? = null,
+    media: String? = null,
+    targetOffset: CSSUnitValueTyped<CSSUnitLengthOrPercentage>? = null
+) : UIKitModifier {
+    override val otherAttrs: Map<String, String> = mapOf(
+        buildAttribute("uk-sticky") {
+            "position" to position ?.name
+            "start" to start
+            "end" to end
+            "offset" to offset ?.toString()
+            "overflow-flip" to overflowFlip
+            "animation" to animation
+            "cls-active" to classForActiveItems
+            "cls-inactive" to classForInactiveItems
+            "show-on-up" to showOnUp
+            "media" to media
+            "target-offset" to targetOffset ?.toString()
+        }
+    )
+
+    sealed interface Position {
+        val name: String
+        object Top : Position {
+            override val name: String
+                get() = "top"
+        }
+        object Bottom : Position {
+            override val name: String
+                get() = "bottom"
+        }
+    }
+}

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

@@ -38,7 +38,7 @@ sealed class UIKitToggle(
 
     class Custom internal constructor(otherAttrs: Map<String, String>) : UIKitToggle(otherAttrs = otherAttrs)
 
-    companion object {
+    companion object : UIKitToggle(otherAttrs = mapOf("uk-toggle" to "")) {
         operator fun invoke(
             target: String? = null,
             mode: Mode? = null,

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

@@ -38,7 +38,10 @@ sealed class UIKitUtility(classname: String) : UIKitModifier {
         object Width : Responsive("width")
         object Height : Responsive("height")
     }
-    object PreserveWidth : UIKitUtility("uk-preserve-width")
+    sealed class Preserve(suffix: String) : UIKitUtility("uk-preserve-$suffix") {
+        object Width : Preserve("width")
+        object Color : Preserve("color")
+    }
 
     sealed class Border(suffix: String) : UIKitUtility("uk-border-$suffix") {
         object Rounded : Border("rounded")
@@ -112,4 +115,8 @@ sealed class UIKitUtility(classname: String) : UIKitModifier {
 
     object Open : UIKitUtility("uk-open")
     object Link : UIKitUtility("uk-link")
+
+    companion object {
+        val PreserveWidth = Preserve.Width
+    }
 }

src/jsMain/kotlin/dev/inmo/jsuikit/utils/AttrsWithContentBuilder.kt

@@ -0,0 +1,32 @@
+package dev.inmo.jsuikit.utils
+
+import dev.inmo.jsuikit.modifiers.UIKitModifier
+import org.jetbrains.compose.web.attributes.AttrsScope
+import org.jetbrains.compose.web.dom.ContentBuilder
+import org.w3c.dom.Element
+
+typealias AttrsWithContentBuilder<T> = Pair<Attrs<T>, ContentBuilder<T>>
+
+@Suppress("NOTHING_TO_INLINE")
+inline fun <T : Element> AttrsWithContentBuilder(
+    vararg modifiers: UIKitModifier?,
+    noinline attrs: AttrsScope<T>.() -> Unit = {},
+    noinline builder: ContentBuilder<T>
+) = AttrsWithContentBuilder(
+    Attrs(*modifiers, attrs = attrs),
+    builder
+)
+
+@Suppress("NOTHING_TO_INLINE")
+inline fun <T : Element> AttrsWithContentBuilder(attrs: Attrs<T>) = AttrsWithContentBuilder(
+    attrs
+) {}
+
+inline val <T : Element> AttrsWithContentBuilder<T>.attrs
+    get() = first
+
+inline val <T : Element> AttrsWithContentBuilder<T>.attributesBuilderContext
+    get() = attrs.builder
+
+inline val <T : Element> AttrsWithContentBuilder<T>.builder
+    get() = second

src/jsMain/kotlin/dev/inmo/jsuikit/utils/Dlist.kt

@@ -1,55 +0,0 @@
-package dev.inmo.jsuikit.utils
-
-import androidx.compose.runtime.Composable
-import kotlinx.browser.document
-import org.jetbrains.compose.web.dom.*
-import org.w3c.dom.*
-
-private object DListElementBuilder : ElementBuilder<HTMLDListElement> {
-    private val el: Element by lazy { document.createElement("dl") }
-    override fun create(): HTMLDListElement = el.cloneNode() as HTMLDListElement
-}
-
-private object DTermElementBuilder : ElementBuilder<HTMLElement> {
-    private val el: Element by lazy { document.createElement("dt") }
-    override fun create(): HTMLElement = el.cloneNode() as HTMLElement
-}
-
-private object DDescriptionElementBuilder : ElementBuilder<HTMLElement> {
-    private val el: Element by lazy { document.createElement("dd") }
-    override fun create(): HTMLElement = el.cloneNode() as HTMLElement
-}
-
-@Composable
-fun DList(
-    attrs: AttrBuilderContext<HTMLDListElement>? = null,
-    content: ContentBuilder<HTMLDListElement>? = null
-) {
-    TagElement(
-        DListElementBuilder,
-        attrs,
-        content
-    )
-}
-@Composable
-fun DTerm(
-    attrs: AttrBuilderContext<HTMLElement>? = null,
-    content: ContentBuilder<HTMLElement>? = null
-) {
-    TagElement(
-        DTermElementBuilder,
-        attrs,
-        content
-    )
-}
-@Composable
-fun DDescription(
-    attrs: AttrBuilderContext<HTMLElement>? = null,
-    content: ContentBuilder<HTMLElement>? = null
-) {
-    TagElement(
-        DDescriptionElementBuilder,
-        attrs,
-        content
-    )
-}