Drop component and Navbar improvements

CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## 0.2.2
 
+* Add support of `Drop` component
+* Improve support of `Navbar`s
+
 ## 0.2.1
 
 * `Tab` elements become supported

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

@@ -0,0 +1,24 @@
+package dev.inmo.jsuikit.elements
+
+import androidx.compose.runtime.Composable
+import dev.inmo.jsuikit.modifiers.UIKitDrop
+import dev.inmo.jsuikit.modifiers.attrsBuilder
+import dev.inmo.jsuikit.utils.*
+import org.jetbrains.compose.web.dom.Div
+import org.w3c.dom.HTMLButtonElement
+import org.w3c.dom.HTMLDivElement
+
+@Composable
+fun Drop(
+    buttonBuilder: AttrsWithContentBuilder<HTMLButtonElement>,
+    dropBuilder: AttrsWithContentBuilder<HTMLDivElement>
+) {
+    DefaultButton(
+        attributesCustomizer = buttonBuilder.attributesBuilderContext,
+        contentAllocator = buttonBuilder.builder
+    )
+    Div(
+        (Attrs<HTMLDivElement>(UIKitDrop.Custom()) + dropBuilder.attrs).builder,
+        dropBuilder.builder
+    )
+}

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

@@ -10,7 +10,7 @@ import org.w3c.dom.HTMLLIElement
 import org.w3c.dom.HTMLUListElement
 
 @Composable
-fun <T> Iconnav(
+fun <T> IconNav(
     data: Iterable<T>,
     listAttrs: Attrs<HTMLUListElement> = Attrs.empty(),
     elementAttrsBuilder: AttrsScope<HTMLLIElement>.(T) -> Unit = {},
@@ -31,3 +31,11 @@ fun <T> Iconnav(
         }
     }
 }
+
+@Composable
+fun <T> Iconnav(
+    data: Iterable<T>,
+    listAttrs: Attrs<HTMLUListElement> = Attrs.empty(),
+    elementAttrsBuilder: AttrsScope<HTMLLIElement>.(T) -> Unit = {},
+    elementBuilder: @Composable ElementScope<HTMLLIElement>.(T) -> Unit
+) = IconNav(data, listAttrs, elementAttrsBuilder, elementBuilder)

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

@@ -5,8 +5,7 @@ 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.*
-import org.w3c.dom.HTMLUListElement
 
 @Composable
 fun NavbarNav(
@@ -30,3 +29,17 @@ fun NavbarNav(
     vararg elements: AttrsWithContentBuilder<HTMLLIElement>,
     attrs: Attrs<HTMLUListElement> = Attrs.empty()
 ) = NavbarNav(elements.toList(), attrs)
+
+fun NavbarNavBuilder(
+    elements: List<AttrsWithContentBuilder<HTMLLIElement>>,
+    attrs: Attrs<HTMLUListElement> = Attrs.empty(),
+    containerAttrs: Attrs<HTMLDivElement> = Attrs.empty()
+) = AttrsWithContentBuilder<HTMLDivElement>(containerAttrs) {
+    NavbarNav(elements, attrs)
+}
+
+fun NavbarNavBuilder(
+    vararg elements: AttrsWithContentBuilder<HTMLLIElement>,
+    attrs: Attrs<HTMLUListElement> = Attrs.empty(),
+    containerAttrs: Attrs<HTMLDivElement> = Attrs.empty()
+) = NavbarNavBuilder(elements.toList(), attrs, containerAttrs)

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

@@ -0,0 +1,122 @@
+package dev.inmo.jsuikit.modifiers
+
+import dev.inmo.jsuikit.utils.*
+import org.jetbrains.compose.web.css.selectors.CSSSelector
+
+sealed class UIKitDrop(
+    override val classes: Array<String> = emptyArray(),
+    override val otherAttrs: Map<String, String> = emptyMap()
+) : UIKitModifier {
+    sealed class Position(name: String) : AttributeValue(name) {
+
+        sealed class Bottom(name: String) : Position("bottom-$name") {
+
+            object Left : Bottom("left")
+            object Center : Bottom("center")
+            object Right : Bottom("right")
+            object Justify : Bottom("justify")
+
+        }
+
+        sealed class Top(name: String) : Position("top-$name") {
+
+            object Left : Top("left")
+            object Center : Top("center")
+            object Right : Top("right")
+            object Justify : Top("justify")
+
+        }
+
+        sealed class Left(name: String) : Position("left-$name") {
+
+            object Top : Left("top")
+            object Center : Left("center")
+            object Bottom : Left("bottom")
+
+        }
+
+        sealed class Right(name: String) : Position("right-$name") {
+
+            object Top : Right("top")
+            object Center : Right("center")
+            object Bottom : Right("bottom")
+
+        }
+    }
+
+    sealed class Stretch(name: String) : AttributeValue(name) {
+        object True : Stretch("true")
+        object X : Stretch("x")
+        object Y : Stretch("y")
+    }
+
+    sealed class Mode(name: String) : AttributeValue(name) {
+
+        object Click : Mode("click")
+        object Hover : Mode("hover")
+
+        object None : Mode("")
+        object HoverAndClick : Mode("$Hover, $Click")
+
+    }
+
+    class Custom internal constructor(
+        classes: Array<String> = emptyArray(),
+        otherAttrs: Map<String, String> = emptyMap()
+    ) : UIKitDrop(classes, otherAttrs)
+
+    companion object {
+        operator fun invoke(
+            toggle: CSSSelector? = null,
+            position: Position? = null,
+            stretch: Stretch? = null,
+            mode: Mode? = null,
+            delayShow: Milliseconds? = null,
+            delayHide: Milliseconds? = null,
+            autoUpdate: Boolean? = null,
+            boundary: CSSSelector? = null,
+            boundaryX: CSSSelector? = null,
+            boundaryY: CSSSelector? = null,
+            target: CSSSelector? = null,
+            targetX: CSSSelector? = null,
+            targetY: CSSSelector? = null,
+            inset: Boolean? = null,
+            flip: Boolean? = null,
+            shift: Boolean? = null,
+            offset: Pixels? = null,
+            animation: UIKitAnimation? = null,
+            animationOut: Boolean? = null,
+            bgScroll: Boolean? = null,
+            duration: Milliseconds? = null,
+            container: Boolean? = null
+        ) = Custom(
+            arrayOf("uk-drop"),
+            mapOf(
+                buildAttribute("uk-drop") {
+                    "toggle" to toggle
+                    "position" to position
+                    "stretch" to stretch
+                    "mode" to mode
+                    "delay-show" to delayShow
+                    "delay-hide" to delayHide
+                    "auto-update" to autoUpdate
+                    "boundary" to boundary
+                    "boundary-x" to boundaryX
+                    "boundary-y" to boundaryY
+                    "target" to target
+                    "target-x" to targetX
+                    "target-y" to targetY
+                    "inset" to inset
+                    "flip" to flip
+                    "shift" to shift
+                    "offset" to offset
+                    "animation" to animation
+                    "animation-out" to animationOut
+                    "bg-scroll" to bgScroll
+                    "duration" to duration
+                    "container" to container
+                }
+            )
+        )
+    }
+}

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

@@ -1,13 +1,17 @@
 package dev.inmo.jsuikit.utils
 
+import dev.inmo.jsuikit.modifiers.AttributeValue
+
 
 class ParametersBuilder(
     val skipNullValues: Boolean = true,
     private val parameters: MutableMap<String, String?> = mutableMapOf()
 ) {
     fun add(k: String, v: Any? = null) {
-        if (v != null || !skipNullValues) {
+        when {
-            parameters[k] = v ?.toString()
+            v is AttributeValue -> parameters[k] = v.name
+            v == null && skipNullValues -> return
+            else -> parameters[k] = v ?.toString()
         }
     }
     infix fun String.to(value: Any?) = add(this, value)