add UIKitComment, Comment element, upfill UIKitSubNav

0.0.29

CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 0.0.30
+
+* Add `UIKitComment`
+* Including of `Comment` element
+* Upfill `UIKitSubNav`
+
+## 0.0.29
+
+* Unfilling of `UIKitText`
+
+## 0.0.28
+
+* Fixes in `UIKitWidth`
+
 ## 0.0.27
 
 * `TextField` has been renamed to `StandardInput`

gradle.properties

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

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

@@ -0,0 +1,106 @@
+package dev.inmo.jsuikit.elements
+
+import androidx.compose.runtime.Composable
+import dev.inmo.jsuikit.modifiers.*
+import dev.inmo.jsuikit.utils.*
+import org.jetbrains.compose.web.dom.*
+import org.w3c.dom.*
+
+@Composable
+fun Comment(
+    rootAttrs: Attrs<HTMLElement> = Attrs.empty(),
+    headerAttrs: Attrs<HTMLElement>? = null,
+    headerContent: ContentBuilder<HTMLElement>? = null,
+    bodyAttrs: Attrs<HTMLDivElement>? = null,
+    bodyContent: ContentBuilder<HTMLDivElement>? = null,
+) {
+    Article(
+        {
+            include(UIKitComment)
+            rootAttrs.builder(this)
+        }
+    ) {
+        if (headerAttrs != null || headerContent != null) {
+            Header (
+                {
+                    include(UIKitComment.Header)
+                    headerAttrs ?.builder ?.invoke(this)
+                }
+            ) {
+                headerContent ?.let { it(this) }
+            }
+        }
+        if (bodyAttrs != null || bodyContent != null) {
+            Div(
+                {
+                    include(UIKitComment.Body)
+                    bodyAttrs ?.builder ?.invoke(this)
+                }
+            ) {
+                bodyContent ?.let { it(this) }
+            }
+        }
+    }
+}
+
+@Composable
+fun DefaultComment(
+    headerGridAttrs: Attrs<HTMLDivElement>? = null,
+    avatarUrl: String? = null,
+    avatarAttrs: Attrs<HTMLImageElement>? = null,
+    titleAttrs: Attrs<HTMLHeadingElement>? = null,
+    titleContent: ContentBuilder<HTMLHeadingElement>? = null,
+    metaAttrs: Attrs<HTMLUListElement>? = null,
+    metaContent: ContentBuilder<HTMLUListElement>? = null,
+    rootAttrs: Attrs<HTMLElement> = Attrs.empty(),
+    headerAttrs: Attrs<HTMLElement>? = null,
+    additionalHeaderContent: ContentBuilder<HTMLElement>? = null,
+    bodyAttrs: Attrs<HTMLDivElement>? = null,
+    bodyContent: ContentBuilder<HTMLDivElement>? = null,
+) {
+    Comment(
+        rootAttrs = rootAttrs,
+        headerAttrs = headerAttrs,
+        headerContent = {
+            if (arrayOf(headerGridAttrs, avatarUrl, avatarAttrs, titleAttrs, titleContent, metaAttrs, metaContent).anyNotNull()) {
+                Grid(
+                    UIKitGrid.Gap.Medium, UIKitFlex.Alignment.Vertical.Middle,
+                    attributesCustomizer = headerGridAttrs ?.builder ?: {}
+                ) {
+                    if (avatarUrl != null) {
+                        Div({ include(UIKitWidth.Auto) }) {
+                            Img(avatarUrl, attrs = avatarAttrs ?.builder)
+                        }
+                    }
+                    if (arrayOf(titleAttrs, titleContent, metaAttrs, metaContent).anyNotNull()) {
+                        Div({ include(UIKitWidth.Expand) }) {
+                            optionallyDraw(titleAttrs, titleContent) {
+                                H4(
+                                    {
+                                        include(UIKitComment.Title, UIKitMargin.Remove)
+                                        titleAttrs ?.builder ?.invoke(this)
+                                    }
+                                ) {
+                                    titleContent ?.invoke(this)
+                                }
+                            }
+                            optionallyDraw(metaAttrs, metaContent) {
+                                Ul (
+                                    {
+                                        include(UIKitComment.Meta, UIKitSubNav, UIKitSubNav.Divider, UIKitMargin.Remove.Top)
+                                        metaAttrs ?.builder ?.invoke(this)
+                                    }
+                                ) {
+                                    metaContent ?.invoke(this)
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            additionalHeaderContent ?.let { it(this) }
+        },
+        bodyAttrs = bodyAttrs,
+        bodyContent = bodyContent
+    )
+}

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

@@ -23,4 +23,4 @@ fun Spinner(
 }
 
 @Composable
-fun DefaultSpinner() = Spinner(UIKitAlign.Center, UIKitMargin.Small, UIKitText.Alignment.Center)
+fun DefaultSpinner() = Spinner(UIKitAlign.Center, UIKitMargin.Small, UIKitText.Alignment.Horizontal.Center, UIKitText.Alignment.Vertical.Middle)

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

@@ -0,0 +1,14 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitBase(classname: String) : UIKitModifier {
+    override val classes: Array<String> = arrayOf(classname)
+
+    sealed class Heading(suffix: String) : UIKitBase("uk-h$suffix") {
+        object H1 : Heading("1")
+        object H2 : Heading("2")
+        object H3 : Heading("3")
+        object H4 : Heading("4")
+        object H5 : Heading("5")
+        object H6 : Heading("6")
+    }
+}

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

@@ -0,0 +1,17 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitComment(suffix: String?) : UIKitModifier {
+    override val classes: Array<String> = arrayOf("uk-comment${suffix ?.let { "-$it" } ?: ""}")
+
+    object Body : UIKitComment("body")
+    object Header : UIKitComment("header")
+    object Title : UIKitComment("title")
+    object Meta : UIKitComment("meta")
+    object Avatar : UIKitComment("avatar")
+
+    object Primary : UIKitComment("primary")
+
+    object List : UIKitComment("list")
+
+    companion object : UIKitComment(null)
+}

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

@@ -4,7 +4,6 @@ sealed class UIKitNav(classname: String) : UIKitModifier {
     override val classes: Array<String> = arrayOf(classname)
 
     object ParentIcon : UIKitNav("uk-nav-parent-icon")
-    object SubNav : UIKitNav("uk-nav-sub")
 
     object Header : UIKitNav("uk-nav-header")
     object Divider : UIKitNav("uk-nav-divider")
@@ -15,5 +14,7 @@ sealed class UIKitNav(classname: String) : UIKitModifier {
 
     object Center : UIKitNav("uk-nav-center")
 
-    companion object : UIKitNav("uk-nav")
+    companion object : UIKitNav("uk-nav") {
+        val SubNav = UIKitSubNav
+    }
 }

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

@@ -0,0 +1,10 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitSubNav(classname: String) : UIKitModifier {
+    override val classes: Array<String> = arrayOf(classname)
+
+    object Divider : UIKitSubNav("uk-subnav-divider")
+    object Pill : UIKitSubNav("uk-subnav-pill")
+
+    companion object : UIKitSubNav("uk-subnav")
+}

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

@@ -3,16 +3,34 @@ package dev.inmo.jsuikit.modifiers
 sealed class UIKitText(suffix: String) : UIKitModifier {
     override val classes: Array<String> = arrayOf("uk-text-$suffix")
 
-    object Lead : UIKitText("lead")
-    object Meta : UIKitText("meta")
-
-    sealed class Alignment(suffix: String) : UIKitText(suffix) {
-        object Left : Alignment("left")
-        object Right : Alignment("right")
-        object Center : Alignment("center")
-        object Justify : Alignment("justify")
+    sealed class Style(suffix: String) : UIKitText(suffix) {
+        object Lead : Style("lead")
+        object Meta : Style("meta")
+        object Italic : Style("italic")
     }
 
+    sealed class Size(suffix: String) : UIKitText(suffix) {
+        object Small : Size("small")
+        object Default : Size("default")
+        object Large : Size("large")
+    }
+
+    sealed class Weight(suffix: String) : UIKitText(suffix) {
+        object Light : Weight("light")
+        object Normal : Weight("normal")
+        object Bold : Weight("bold")
+        object Lighter : Weight("lighter")
+        object Bolder : Weight("bolder")
+    }
+
+    sealed class Transform(suffix: String) : UIKitText(suffix) {
+        object Capitalize : Transform("capitalize")
+        object Uppercase : Transform("uppercase")
+        object Lowercase : Transform("lowercase")
+    }
+
+    object DecorationNone : UIKitText("decoration-none")
+
     sealed class Color(suffix: String) : UIKitText(suffix) {
         object Muted : Color("muted")
         object Emphasis : Color("emphasis")
@@ -22,4 +40,32 @@ sealed class UIKitText(suffix: String) : UIKitModifier {
         object Warning : Color("warning")
         object Danger : Color("danger")
     }
+
+    object Background : UIKitText("background")
+
+    sealed class Alignment(suffix: String) : UIKitText(suffix) {
+
+        sealed class Horizontal(suffix: String) : Alignment(suffix) {
+            object Left : Horizontal("left")
+            object Right : Horizontal("right")
+            object Center : Horizontal("center")
+            object Justify : Horizontal("justify")
+        }
+
+        sealed class Vertical(suffix: String) : Alignment(suffix) {
+            object Top : Vertical("top")
+            object Middle : Vertical("middle")
+            object Bottom : Vertical("bottom")
+            object Baseline : Vertical("baseline")
+        }
+
+    }
+
+    sealed class Wrapping(suffix: String) : UIKitText(suffix) {
+
+        object Truncate : Wrapping("truncate")
+        object Break : Wrapping("break")
+        object NoWrap : Wrapping("nowrap")
+
+    }
 }

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

@@ -1,29 +1,29 @@
 package dev.inmo.jsuikit.modifiers
 
 sealed class UIKitWidth(classname: String) : UIKitModifier {
-    override val classes: Array<String> = arrayOf("uk-width-$classname")
+    override val classes: Array<String> = arrayOf(classname)
 
-    object Auto : UIKitWidth("auto")
-    object Expand : UIKitWidth("expand")
-    object Full : UIKitWidth("1-1")
+    object Auto : UIKitWidth("uk-width-auto")
+    object Expand : UIKitWidth("uk-width-expand")
+    object Full : UIKitWidth("uk-width-1-1")
 
-    object Half : UIKitWidth("1-2")
+    object Half : UIKitWidth("uk-width-1-2")
 
-    object OneThird : UIKitWidth("1-3")
-    object TwoThird : UIKitWidth("2-3")
+    object OneThird : UIKitWidth("uk-width-1-3")
+    object TwoThird : UIKitWidth("uk-width-2-3")
 
-    object OneFourth : UIKitWidth("1-4")
-    object ThreeFourth : UIKitWidth("3-4")
+    object OneFourth : UIKitWidth("uk-width-1-4")
+    object ThreeFourth : UIKitWidth("uk-width-3-4")
 
-    object OneFifth : UIKitWidth("1-5")
-    object TwoFifth : UIKitWidth("2-5")
-    object ThreeFifth : UIKitWidth("3-5")
-    object FourFifth : UIKitWidth("4-5")
+    object OneFifth : UIKitWidth("uk-width-1-5")
+    object TwoFifth : UIKitWidth("uk-width-2-5")
+    object ThreeFifth : UIKitWidth("uk-width-3-5")
+    object FourFifth : UIKitWidth("uk-width-4-5")
 
-    object OneSixth : UIKitWidth("1-6")
-    object FiveSixth : UIKitWidth("5-6")
+    object OneSixth : UIKitWidth("uk-width-1-6")
+    object FiveSixth : UIKitWidth("uk-width-5-6")
 
-    sealed class Child(suffix: String) : UIKitWidth("child-$suffix") {
+    sealed class Child(suffix: String) : UIKitWidth("uk-child-width-$suffix") {
         object Full : Child("1-1")
 
         object Half : Child("1-2")
@@ -57,7 +57,7 @@ sealed class UIKitWidth(classname: String) : UIKitModifier {
         }
     }
 
-    sealed class Fixed(suffix: String) : UIKitWidth("fixed-$suffix") {
+    sealed class Fixed(suffix: String) : UIKitWidth("uk-width-fixed-$suffix") {
 
         object Small : Fixed("small")
         object Medium : Fixed("medium")

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

@@ -0,0 +1,11 @@
+package dev.inmo.jsuikit.utils
+
+fun <T> Array<T>.anyNotNull(): Boolean {
+    for (item in this) {
+        if (item != null) {
+            return true
+        }
+    }
+
+    return false
+}

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

@@ -0,0 +1,16 @@
+package dev.inmo.jsuikit.utils
+
+import androidx.compose.runtime.Composable
+import org.jetbrains.compose.web.dom.ContentBuilder
+import org.w3c.dom.Element
+
+@Composable
+inline fun <T : Element> optionallyDraw (
+    attrs: Attrs<T>? = null,
+    noinline contentBuilder: ContentBuilder<T>? = null,
+    whatToDraw: @Composable () -> Unit
+) {
+    if (attrs != null || contentBuilder != null) {
+        whatToDraw()
+    }
+}