diff --git a/CHANGELOG.md b/CHANGELOG.md index 7d75992..1c6af24 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,8 @@ ## 0.0.9 +* Improving of `Nav` support + ## 0.0.8 Removing of redundant non standard things diff --git a/src/jsMain/kotlin/dev/inmo/jsuikit/elements/Nav.kt b/src/jsMain/kotlin/dev/inmo/jsuikit/elements/Nav.kt index e22c623..db843f1 100644 --- a/src/jsMain/kotlin/dev/inmo/jsuikit/elements/Nav.kt +++ b/src/jsMain/kotlin/dev/inmo/jsuikit/elements/Nav.kt @@ -1,12 +1,13 @@ package dev.inmo.jsuikit.elements import androidx.compose.runtime.Composable +import androidx.compose.runtime.snapshots.SnapshotStateList import dev.inmo.jsuikit.buildAndAddAttribute import dev.inmo.jsuikit.modifiers.* import dev.inmo.jsuikit.utils.Milliseconds import org.jetbrains.compose.web.dom.* -import org.w3c.dom.HTMLLIElement -import org.w3c.dom.HTMLUListElement +import org.jetbrains.compose.web.dom.Text +import org.w3c.dom.* @Composable fun Nav( @@ -35,6 +36,62 @@ fun Nav( } } +@Composable +fun Nav( + title: String, + data: SnapshotStateList, + vararg ulModifiers: UIKitModifier, + titleModifiers: Array = emptyArray(), + multiple: Boolean? = null, + collapsible: Boolean? = null, + animation: UIKitAnimation? = null, + duration: Milliseconds? = null, + besidesTitleAndList: ContentBuilder? = null, + titleCustomizer: AttrBuilderContext = {}, + ulCustomizer: AttrBuilderContext = {}, + elementAllocator: @Composable ElementScope.(T) -> Unit +) { + Ul( + { + buildAndAddAttribute("uk-nav") { + "multiple" to multiple ?.toString() + "collapsible" to collapsible ?.toString() + "animation" to animation + "duration" to duration ?.toString() + } + classes("uk-nav") + include(*ulModifiers) + ulCustomizer() + } + ) { + NavHeader( + title, + *titleModifiers, + attributesCustomizer = titleCustomizer + ) + besidesTitleAndList ?.let { it() } + data.forEach { + elementAllocator(it) + } + } +} + +@Composable +fun NavHeader( + text: String, + vararg modifiers: UIKitModifier, + attributesCustomizer: AttrBuilderContext = {}, +) { + Li( + { + include(*modifiers, UIKitNav.Header) + attributesCustomizer() + } + ) { + Text(text) + } +} + @Composable fun NavElement( vararg modifiers: UIKitModifier, @@ -44,9 +101,14 @@ fun NavElement( Li( { include(*modifiers) - attributesCustomizer + attributesCustomizer() } ) { contentAllocator() } } + +@Composable +fun NavDivider() { + Li({ include(UIKitNav.Divider) }) +}