upfill utilities

0.0.9

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 0.0.10
+
+* Filling of `UIKitUtility`
+
+## 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.10

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) })
+}

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

@@ -3,10 +3,110 @@ package dev.inmo.jsuikit.modifiers
 sealed class UIKitUtility(classname: String) : UIKitModifier {
     override val classes: Array<String> = arrayOf(classname)
 
+    object Panel : UIKitUtility("uk-panel")
+
+    sealed class Float(suffix: String) : UIKitUtility("uk-float-$suffix") {
+        object Left : Float("left")
+        object Right : Float("right")
+    }
+    object Clearfix : Float("clearfix")
+
     sealed class Overflow(suffix: String) : UIKitUtility("uk-overflow-$suffix") {
         object Hidden : Overflow("hidden")
         object Auto : Overflow("auto")
     }
 
+    sealed class Resize(suffix: String?) : UIKitUtility("uk-resize${suffix ?.let { "-$it" } ?: ""}") {
+        object Vertical : Resize("vertical")
+        companion object : Resize(null)
+    }
+
+    sealed class Display(suffix: String) : UIKitUtility("uk-display-$suffix") {
+        object Block : Display("block")
+        sealed class Inline(suffix: String?) : Display("inline${suffix ?.let { "-$it" } ?: ""}") {
+            object Block : Inline("block")
+            companion object : Inline(null)
+        }
+    }
+
+    sealed class Inline(suffix: String?) : UIKitUtility("uk-inline${suffix ?.let { "-$it" } ?: ""}") {
+        object Clip : Inline("clip")
+        companion object : Inline(null)
+    }
+
+    sealed class Responsive(suffix: String) : UIKitUtility("uk-responsive-$suffix") {
+        object Width : Responsive("width")
+        object Height : Responsive("height")
+    }
+    object PreserveWidth : UIKitUtility("uk-preserve-width")
+
+    sealed class Border(suffix: String) : UIKitUtility("uk-border-$suffix") {
+        object Rounded : Border("rounded")
+        object Circle : Border("circle")
+        object Pill : Border("pill")
+    }
+
+    sealed class BoxShadow(suffix: String) : UIKitUtility("uk-box-shadow-$suffix") {
+        object Small : BoxShadow("small")
+        object Medium : BoxShadow("medium")
+        object Large : BoxShadow("large")
+        object XLarge : BoxShadow("xlarge")
+
+        object Bottom : BoxShadow("bottom")
+
+        sealed class Hover(suffix: String) : BoxShadow("hover-$suffix") {
+            object Small : Hover("small")
+            object Medium : Hover("medium")
+            object Large : Hover("large")
+            object XLarge : Hover("xlarge")
+        }
+    }
+
+    object DropCap : UIKitUtility("uk-dropcap")
+
     object Logo : UIKitUtility("uk-logo")
+
+    sealed class Blend(suffix: String) : UIKitUtility("uk-blend-$suffix") {
+        object Multiply : Blend("multiply")
+        object Screen : Blend("screen")
+        object Overlay : Blend("overlay")
+        object Darken : Blend("darken")
+        object Lighten : Blend("lighten")
+        sealed class Color(suffix: String?) : Blend("color${suffix ?.let { "-$it" } ?: ""}") {
+            object Dodge : Color("dodge")
+            object Burn : Color("burn")
+            companion object : Color(null)
+        }
+        object HardLight : Blend("hard-light")
+        object SoftLight : Blend("soft-light")
+        object Difference : Blend("difference")
+        object Exclusion : Blend("exclusion")
+        object Hue : Blend("hue")
+        object Saturation : Blend("saturation")
+        object Luminosity : Blend("luminosity")
+    }
+
+    sealed class Transform(suffix: String) : UIKitUtility("uk-transform-$suffix") {
+        object Center : Transform("center")
+        sealed class Origin(suffix: String) : Transform("origin-$suffix") {
+            sealed class Top(suffix: String) : Origin("top-$suffix") {
+                object Left : Top("left")
+                object Center : Top("center")
+                object Right : Top("right")
+            }
+            sealed class Center(suffix: String) : Origin("center-$suffix") {
+                object Left : Center("left")
+                object Right : Center("right")
+            }
+            sealed class Bottom(suffix: String) : Origin("bottom-$suffix") {
+                object Left : Bottom("left")
+                object Center : Bottom("center")
+                object Right : Bottom("right")
+            }
+        }
+    }
+
+    object Disabled : UIKitUtility("uk-disabled")
+    object Drag : UIKitUtility("uk-drag")
+    object Active : UIKitUtility("uk-active")
 }