CHANGELOG.md

@@ -1,10 +1,5 @@
 # Changelog
 
-## 0.1.3
-
-* Add support of sections
-* Improve support of navbars
-
 ## 0.1.2
 
 * New typealias `AttrsWithContentBuilder`

gradle.properties

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

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> = InputAttrs.empty(),
+    inputAttrs: InputAttrs<String> = Attrs.empty(),
     contentBuilder: ContentBuilder<HTMLDivElement> = {}
 ) = Div(
     {

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

@@ -1,76 +1,35 @@
 package dev.inmo.jsuikit.elements
 
 import androidx.compose.runtime.Composable
-import dev.inmo.jsuikit.modifiers.*
-import dev.inmo.jsuikit.utils.*
+import dev.inmo.jsuikit.modifiers.UIKitModifier
+import dev.inmo.jsuikit.modifiers.include
 import org.jetbrains.compose.web.dom.*
-import org.w3c.dom.HTMLDivElement
 import org.w3c.dom.HTMLElement
 
 @Composable
 fun Navbar(
-    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?,
+    leftBuilder: NavbarNavBuilder? = null,
     centerBuilder: NavbarNavBuilder? = null,
     rightBuilder: NavbarNavBuilder? = null,
     vararg navModifiers: UIKitModifier,
     attributesCustomizer: AttrBuilderContext<HTMLElement> = {},
 ) {
-    Navbar(
+    Nav(
         {
+            attr("uk-navbar", "")
+            classes("uk-navbar-container", "uk-navbar")
             include(*navModifiers)
             attributesCustomizer()
         }
     ) {
         leftBuilder ?.let {
-            Div({ include(UIKitNavbar.Alignment.Left) }) { it.draw() }
+            Div({ classes("uk-navbar-left") }) { it.draw() }
         }
         centerBuilder ?.let {
-            Div({ include(UIKitNavbar.Alignment.Center) }) { it.draw() }
+            Div({ classes("uk-navbar-center") }) { it.draw() }
         }
         rightBuilder ?.let {
-            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)
+            Div({ classes("uk-navbar-right") }) { it.draw() }
         }
     }
 }

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

@@ -1,37 +1,13 @@
 package dev.inmo.jsuikit.elements
 
 import androidx.compose.runtime.Composable
-import dev.inmo.jsuikit.modifiers.*
-import dev.inmo.jsuikit.utils.*
+import dev.inmo.jsuikit.modifiers.UIKitModifier
+import dev.inmo.jsuikit.modifiers.include
 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
@@ -52,7 +28,6 @@ interface NavbarNavElement {
     }
 }
 
-@Deprecated("Will be removed soon. Use NavbarNavPart with AttrsWithContentBuilder instead")
 class NavbarNavBuilder(
     private val modifiers: Array<UIKitModifier>,
     private val elements: List<NavbarNavElement>,
@@ -71,7 +46,8 @@ class NavbarNavBuilder(
     fun draw() {
         Ul(
             {
-                include(UIKitNavbar.Nav, *modifiers)
+                classes("uk-navbar-nav")
+                include(*modifiers)
                 attributesCustomizer()
             }
         ) {

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

@@ -14,8 +14,6 @@ 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,86 +1,17 @@
 package dev.inmo.jsuikit.modifiers
 
-import dev.inmo.jsuikit.types.Dropdown
-import dev.inmo.jsuikit.utils.*
+sealed class UIKitNavbar(suffix: String) : UIKitModifier {
+    override val classes: Array<String> = arrayOf("uk-navbar-$suffix")
 
-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 Transparent : UIKitNavbar("transparent")
+    sealed class Dropdown(suffix: String?) : UIKitNavbar("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)
     }
-    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")
+    object Item : UIKitNavbar("item")
 
-            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") {
+    companion object {
         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

@@ -1,23 +0,0 @@
-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/UIKitUtility.kt

@@ -38,10 +38,7 @@ sealed class UIKitUtility(classname: String) : UIKitModifier {
         object Width : Responsive("width")
         object Height : Responsive("height")
     }
-    sealed class Preserve(suffix: String) : UIKitUtility("uk-preserve-$suffix") {
-        object Width : Preserve("width")
-        object Color : Preserve("color")
-    }
+    object PreserveWidth : UIKitUtility("uk-preserve-width")
 
     sealed class Border(suffix: String) : UIKitUtility("uk-border-$suffix") {
         object Rounded : Border("rounded")
@@ -115,8 +112,4 @@ 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

@@ -1,27 +1,10 @@
 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