nav support improving

0.0.8

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.0.9
+
+* Improving of `Nav` support
+
 ## 0.0.8
 
 Removing of redundant non standard things

README.md

@@ -1,8 +1,5 @@
 # JSUIKit Kotlin
 
-**IMPORTANT NOTICE**: ___Currently it is possible that you will have issues with `vararg` arguments passing to the functions.
-Use `arrayOf(...)` instead___
-
 Hello :) This library is a wrapper for JavaScript/CSS [UIKit](https://getuikit.com) framework. It uses the same
 structure as in [UIKit Docs](https://getuikit.com/docs/introduction) and in most cases you may use it.
 
@@ -11,10 +8,10 @@ for you in case you are using it too.
 
 ## How to include
 
-Last version: [![Maven Central](https://maven-badges.herokuapp.com/maven-central/dev.inmo/jsuikitkotlin/badge.svg)](https://maven-badges.herokuapp.com/maven-central/dev.inmo/jsuikitkotlin)
+Last version: [![Maven Central](https://maven-badges.herokuapp.com/maven-central/dev.inmo/kjsuikit/badge.svg)](https://maven-badges.herokuapp.com/maven-central/dev.inmo/kjsuikit)
 
 ```groovy
-implementation "dev.inmo:jsuikitkotlin:$jsuikitkotlin_version"
+implementation "dev.inmo:kjsuikit:$kjsuikit_version"
 ```
 
 **THIS LIBRARY DO NOT ADD ANY JS OR CSS**. So, you must download and include UIKit js/css by yourself. See

gradle.properties

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

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 <T> Nav(
+    title: String,
+    data: SnapshotStateList<T>,
+    vararg ulModifiers: UIKitModifier,
+    titleModifiers: Array<UIKitModifier> = emptyArray(),
+    multiple: Boolean? = null,
+    collapsible: Boolean? = null,
+    animation: UIKitAnimation? = null,
+    duration: Milliseconds? = null,
+    besidesTitleAndList: ContentBuilder<HTMLUListElement>? = null,
+    titleCustomizer: AttrBuilderContext<HTMLLIElement> = {},
+    ulCustomizer: AttrBuilderContext<HTMLUListElement> = {},
+    elementAllocator: @Composable ElementScope<HTMLUListElement>.(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<HTMLLIElement> = {},
+) {
+    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) })
+}