From 29efe4b5cd1339f26b581308d35788bc4f33f492 Mon Sep 17 00:00:00 2001 From: InsanusMokrassar Date: Thu, 19 May 2022 13:21:39 +0600 Subject: [PATCH] Improve support of navbars --- CHANGELOG.md | 2 + .../dev/inmo/jsuikit/elements/Navbar.kt | 28 +++++-- .../inmo/jsuikit/elements/NavbarNavBuilder.kt | 6 +- .../dev/inmo/jsuikit/modifiers/UIKitNavbar.kt | 81 +++++++++++++++++-- 4 files changed, 99 insertions(+), 18 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e7e8afd..1fa6cce 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,8 @@ ## 0.1.3 +* Improve support of navbars + ## 0.1.2 * New typealias `AttrsWithContentBuilder` diff --git a/src/jsMain/kotlin/dev/inmo/jsuikit/elements/Navbar.kt b/src/jsMain/kotlin/dev/inmo/jsuikit/elements/Navbar.kt index 5c94117..9cc5f44 100644 --- a/src/jsMain/kotlin/dev/inmo/jsuikit/elements/Navbar.kt +++ b/src/jsMain/kotlin/dev/inmo/jsuikit/elements/Navbar.kt @@ -1,11 +1,25 @@ 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 org.jetbrains.compose.web.dom.* import org.w3c.dom.HTMLElement +@Composable +fun Navbar( + attributesCustomizer: AttrBuilderContext = {}, + contentBuilder: ContentBuilder +) { + Nav( + { + include(UIKitNavbar, UIKitNavbar.Container) + attributesCustomizer() + } + ) { + contentBuilder + } +} + @Composable fun Navbar( leftBuilder: NavbarNavBuilder? = null, @@ -14,22 +28,20 @@ fun Navbar( vararg navModifiers: UIKitModifier, attributesCustomizer: AttrBuilderContext = {}, ) { - 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() } } } } diff --git a/src/jsMain/kotlin/dev/inmo/jsuikit/elements/NavbarNavBuilder.kt b/src/jsMain/kotlin/dev/inmo/jsuikit/elements/NavbarNavBuilder.kt index 184293a..69e6ba7 100644 --- a/src/jsMain/kotlin/dev/inmo/jsuikit/elements/NavbarNavBuilder.kt +++ b/src/jsMain/kotlin/dev/inmo/jsuikit/elements/NavbarNavBuilder.kt @@ -1,8 +1,7 @@ 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 org.jetbrains.compose.web.attributes.AttrsScope import org.jetbrains.compose.web.dom.* import org.w3c.dom.HTMLLIElement @@ -46,8 +45,7 @@ class NavbarNavBuilder( fun draw() { Ul( { - classes("uk-navbar-nav") - include(*modifiers) + include(UIKitNavbar.Nav, *modifiers) attributesCustomizer() } ) { diff --git a/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitNavbar.kt b/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitNavbar.kt index a23932a..24c5046 100644 --- a/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitNavbar.kt +++ b/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 = 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 = classes as Array + + 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 + ) : UIKitNavbar(*UIKitNavbar.classes) + + companion object : UIKitNavbar("uk-navbar") { val Logo = UIKitUtility.Logo + + operator fun invoke( + align: String? = null, + 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) } }