fixes in buttons

0.0.19

CHANGELOG.md

@@ -1,5 +1,39 @@
 # Changelog
 
+## 0.0.20
+
+* Remove type of button from `DefaultButton` and add companion to `UIKitButton` to be able to use `uk-button` class
+
+## 0.0.19
+
+* Create `Card`s implementation
+* Upgrade `Label` composable draw and create `UIKitLabel` modifiers
+
+## 0.0.18
+
+* Add base companion for `UIKitFlex` with result class `uk-flex`
+
+## 0.0.17
+
+* In `DefaultTable` `headingCustomizer` has been renamed to `headerCellCustomizer`
+* Add index and title parameters for `headerCellCustomizer` in `DefaultTable`
+
+## 0.0.16
+
+* Add opportunity to customize `NavDivider`
+
+## 0.0.15
+
+* Add support of link icons
+
+## 0.0.14
+
+* Add DefaultTable parameter cellCustomizer
+
+## 0.0.13
+
+* Add `Icon#Custom`
+
 ## 0.0.12
 
 * Add `rowAttributes` to table fun

gradle.properties

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

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

@@ -14,7 +14,6 @@ import org.w3c.dom.events.Event
 fun DefaultButton(
     vararg modifiers: UIKitModifier,
     disabled: Boolean = false,
-    buttonType: UIKitButton.Type = UIKitButton.Type.Default,
     onClick: ((SyntheticMouseEvent) -> Unit)? = null,
     attributesCustomizer: AttrBuilderContext<HTMLButtonElement> = {},
     contentAllocator: ContentBuilder<HTMLButtonElement>
@@ -22,8 +21,7 @@ fun DefaultButton(
     Button(
         {
             onClick ?.let { onClick(it) }
-            classes("uk-button")
-            include(*modifiers, buttonType)
+            include(UIKitButton, *modifiers)
             if (disabled) {
                 disabled()
             }
@@ -39,12 +37,11 @@ fun DefaultButton(
     text: String,
     vararg modifiers: UIKitModifier,
     disabled: Boolean = false,
-    buttonType: UIKitButton.Type = UIKitButton.Type.Default,
     preTextContentAllocator: ContentBuilder<HTMLButtonElement>? = null,
     afterTextContentAllocator: ContentBuilder<HTMLButtonElement>? = null,
     attributesCustomizer: AttrBuilderContext<HTMLButtonElement> = {},
     onClick: ((SyntheticMouseEvent) -> Unit)? = null
-) = DefaultButton(*modifiers, disabled = disabled, buttonType = buttonType, onClick = onClick, attributesCustomizer = attributesCustomizer) {
+) = DefaultButton(*modifiers, disabled = disabled, onClick = onClick, attributesCustomizer = attributesCustomizer) {
     preTextContentAllocator ?.apply { preTextContentAllocator() }
     Text(text)
     afterTextContentAllocator ?.apply { afterTextContentAllocator() }

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

@@ -0,0 +1,79 @@
+package dev.inmo.jsuikit.elements
+
+import androidx.compose.runtime.Composable
+import dev.inmo.jsuikit.modifiers.*
+import dev.inmo.jsuikit.utils.Attrs
+import org.jetbrains.compose.web.dom.*
+import org.w3c.dom.*
+
+@Composable
+fun Card(
+    cardAttrs: Attrs<HTMLDivElement> = Attrs.empty(),
+    headerAttrs: Attrs<HTMLDivElement> = Attrs.empty(),
+    header: ContentBuilder<HTMLDivElement>? = null,
+    footerAttrs: Attrs<HTMLDivElement> = Attrs.empty(),
+    footer: ContentBuilder<HTMLDivElement>? = null,
+    bodyAttrs: Attrs<HTMLDivElement> = Attrs.empty(),
+    body: ContentBuilder<HTMLDivElement>
+) {
+    Div(
+        {
+            include(UIKitCard)
+            cardAttrs.builder(this)
+        }
+    ) {
+        header ?.let {
+            Div(
+                {
+                    include(UIKitCard.Parts.Header)
+                    headerAttrs.builder(this)
+                },
+                header
+            )
+        }
+        Div(
+            {
+                include(UIKitCard.Parts.Body)
+                bodyAttrs.builder(this)
+            },
+            body
+        )
+        footer ?.let {
+            Div(
+                {
+                    include(UIKitCard.Parts.Footer)
+                    footerAttrs.builder(this)
+                },
+                footer
+            )
+        }
+    }
+}
+
+@Composable
+fun CardTitle(
+    titleAttrs: Attrs<HTMLHeadingElement> = Attrs.empty(),
+    title: ContentBuilder<HTMLHeadingElement>
+) {
+    H3(
+        {
+            include(UIKitCard.Title)
+            titleAttrs.builder(this)
+        },
+        title
+    )
+}
+
+@Composable
+fun CardBadge(
+    badgeAttrs: Attrs<HTMLDivElement> = Attrs.empty(),
+    badge: ContentBuilder<HTMLDivElement>
+) {
+    Div(
+        {
+            include(UIKitCard.Badge, UIKitLabel)
+            badgeAttrs.builder(this)
+        },
+        badge
+    )
+}

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

@@ -219,13 +219,15 @@ sealed class Icon(val name: String) {
             }
             attributesCustomizer()
         }
-        if (type == UIKitIconType.Button) {
-            Button(configurer)
-        } else {
-            Span(configurer)
+        when (type) {
+            UIKitIconType.Default -> Span(configurer)
+            UIKitIconType.Link -> A(href = "#", configurer)
+            UIKitIconType.Button -> Button(configurer)
         }
     }
 
+    class Custom(name: String) : Icon(name)
+
     @Composable
     fun drawAsButton(
         vararg modifiers: UIKitModifier,
@@ -241,4 +243,12 @@ sealed class Icon(val name: String) {
         attributesCustomizer: AttrBuilderContext<out HTMLElement> = {},
         onClick: ((Event) -> Unit)? = null
     ) = invoke(*modifiers, type = UIKitIconType.Default, ratio = ratio, onClick = onClick, attributesCustomizer = attributesCustomizer)
+
+    @Composable
+    fun drawAsLink(
+        vararg modifiers: UIKitModifier,
+        ratio: Float? = null,
+        attributesCustomizer: AttrBuilderContext<out HTMLElement> = {},
+        onClick: ((Event) -> Unit)? = null
+    ) = invoke(*modifiers, type = UIKitIconType.Link, ratio = ratio, onClick = onClick, attributesCustomizer = attributesCustomizer)
 }

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

@@ -1,41 +1,20 @@
 package dev.inmo.jsuikit.elements
 
 import androidx.compose.runtime.Composable
-import dev.inmo.jsuikit.modifiers.UIKitModifier
-import dev.inmo.jsuikit.modifiers.include
+import dev.inmo.jsuikit.modifiers.*
+import dev.inmo.jsuikit.utils.Attrs
 import org.jetbrains.compose.web.dom.*
 import org.w3c.dom.HTMLSpanElement
 
-sealed interface Label {
-    val suffix: String
-
-    @Composable
-    fun draw(
-        text: String,
-        vararg modifiers: UIKitModifier,
-        attributesCustomizer: AttrBuilderContext<HTMLSpanElement> = {},
-    ) = Span(
-        {
-            classes("uk-label", "uk-label-$suffix")
-            include(*modifiers)
-            attributesCustomizer()
-        }
-    ) {
-        Text(text)
-    }
-
-    object Success : Label {
-        override val suffix: String
-            get() = "success"
-    }
-
-    object Warning : Label {
-        override val suffix: String
-            get() = "warning"
-    }
-
-    object Error : Label {
-        override val suffix: String
-            get() = "danger"
+@Composable
+fun Label(
+    text: String,
+    attrs: Attrs<HTMLSpanElement>
+) = Span(
+    {
+        include(UIKitLabel)
+        attrs.builder(this)
     }
+) {
+    Text(text)
 }

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

@@ -269,6 +269,9 @@ fun NavElement(
 }
 
 @Composable
-fun NavDivider() {
-    Li({ include(UIKitNav.Divider) })
+fun NavDivider(
+    vararg modifiers: UIKitModifier,
+    attributesCustomizer: AttrBuilderContext<HTMLLIElement> = {},
+) {
+    Li({ include(UIKitNav.Divider, *modifiers);attributesCustomizer() })
 }

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

@@ -14,9 +14,10 @@ fun <T> DefaultTable(
     dataList: SnapshotStateList<T>,
     vararg tableModifiers: UIKitModifier,
     attributesCustomizer: AttrBuilderContext<HTMLTableElement> = {},
-    headingCustomizer: AttrBuilderContext<HTMLTableCellElement> = {},
+    headerCellCustomizer: AttrsBuilder<HTMLTableCellElement>.(i: Int, title: String) -> Unit = { _, _ -> },
     rowAttributes: AttrsBuilder<HTMLTableRowElement>.(t: T) -> Unit = {},
-    cellFiller: @Composable (i: Int, t: T) -> Unit
+    cellCustomizer: AttrsBuilder<HTMLTableCellElement>.(i: Int, t: T) -> Unit = { _, _ -> },
+    cellFiller: @Composable ElementScope<HTMLTableCellElement>.(i: Int, t: T) -> Unit
 ) {
     val headingIndexes = heading.indices
     Table(
@@ -28,13 +29,13 @@ fun <T> DefaultTable(
     ) {
         Thead {
             Tr {
-                heading.forEach {
+                heading.forEachIndexed { i, t ->
                     Th(
                         {
-                            headingCustomizer()
+                            headerCellCustomizer(i, t)
                         }
                     ) {
-                        Text(it)
+                        Text(t)
                     }
                 }
             }
@@ -47,7 +48,11 @@ fun <T> DefaultTable(
                     }
                 ) {
                     headingIndexes.forEach { i ->
-                        Td {
+                        Td(
+                            {
+                                cellCustomizer(i, it)
+                            }
+                        ) {
                             cellFiller(i, it)
                         }
                     }

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

@@ -1,7 +1,7 @@
 package dev.inmo.jsuikit.modifiers
 
-sealed class UIKitButton(suffix: String) : UIKitModifier {
-    override val classes: Array<String> = arrayOf("uk-button-$suffix")
+sealed class UIKitButton(suffix: String?) : UIKitModifier {
+    override val classes: Array<String> = arrayOf("uk-button${suffix?.let { "-$it" } ?: ""}")
 
     sealed class Type(suffix: String) : UIKitButton(suffix) {
         object Default : Type("default")
@@ -11,4 +11,6 @@ sealed class UIKitButton(suffix: String) : UIKitModifier {
         object Text : Type("text")
         object Link : Type("link")
     }
+
+    companion object : UIKitButton(null)
 }

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

@@ -0,0 +1,35 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitCard(suffix: String?) : UIKitModifier {
+    override val classes: Array<String> = arrayOf("uk-card${suffix ?.let { "-$it" } ?: ""}")
+
+    object Title : UIKitCard("title")
+    object Hover : UIKitCard("hover")
+    object Badge : Parts("badge")
+
+    sealed class Parts(suffix: String) : UIKitCard(suffix) {
+        object Header : Parts("header")
+        object Body : Parts("body")
+        object Footer : Parts("footer")
+    }
+
+    sealed class Style(suffix: String) : UIKitCard(suffix) {
+        object Default : Style("default")
+        object Primary : Style("primary")
+        object Secondary : Style("secondary")
+    }
+
+    sealed class Size(suffix: String) : UIKitCard(suffix) {
+        object Small : Size("small")
+        object Large : Size("large")
+    }
+
+    sealed class Media(suffix: String) : UIKitCard("media-$suffix") {
+        object Top : Media("top")
+        object Right : Media("right")
+        object Bottom : Media("bottom")
+        object Left : Media("left")
+    }
+
+    companion object : UIKitCard(null)
+}

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

@@ -1,7 +1,7 @@
 package dev.inmo.jsuikit.modifiers
 
-sealed class UIKitFlex(suffix: String) : UIKitModifier {
-    override val classes: Array<String> = arrayOf("uk-flex-$suffix")
+sealed class UIKitFlex(suffix: String?) : UIKitModifier {
+    override val classes: Array<String> = arrayOf("uk-flex${suffix ?.let { "-$it" } ?: ""}")
 
     object Inline : UIKitFlex("inline")
 
@@ -76,4 +76,6 @@ sealed class UIKitFlex(suffix: String) : UIKitModifier {
 
     object NoWrap : UIKitFlex("nowrap")
 
+    companion object : UIKitFlex(null)
+
 }

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

@@ -0,0 +1,11 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitLabel(suffix: String?) : UIKitModifier {
+    override val classes: Array<String> = arrayOf("uk-label${suffix?.let { "-$it" } ?: ""}")
+
+    object Success : UIKitLabel("success")
+    object Warning : UIKitLabel("warning")
+    object Error : UIKitLabel("danger")
+
+    companion object : UIKitLabel(null)
+}

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

@@ -0,0 +1,26 @@
+package dev.inmo.jsuikit.utils
+
+import dev.inmo.jsuikit.modifiers.UIKitModifier
+import dev.inmo.jsuikit.modifiers.include
+import org.jetbrains.compose.web.attributes.AttrsBuilder
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+import org.w3c.dom.Element
+
+class AttributesCollection<T : Element> (
+    private vararg val modifiers: UIKitModifier,
+    private val attrs: AttrBuilderContext<T> = {}
+) {
+    val builder: AttrBuilderContext<T> = {
+        include(*modifiers)
+        attrs()
+    }
+
+    companion object {
+        val Empty = Attrs<Element>()
+
+        @Suppress("UNCHECKED_CAST")
+        fun <T : Element> empty() = Empty as Attrs<T>
+    }
+}
+
+typealias Attrs<T> = AttributesCollection<T>