add attributes customizers lambdas to all elements and temporarily change signatures with modifiers from varargs to arrays

CHANGELOG.md

@@ -1,5 +1,7 @@
 ## 0.0.5
 
+All elements has changed their signatures: they all will accept an additional lambda for attributes configuration
+
 ## 0.0.4
 
 __Migrate modifers to modifiers__

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

@@ -7,14 +7,16 @@ import org.jetbrains.compose.web.attributes.InputType
 import org.jetbrains.compose.web.attributes.disabled
 import org.jetbrains.compose.web.dom.*
 import org.w3c.dom.HTMLButtonElement
+import org.w3c.dom.HTMLDivElement
 import org.w3c.dom.events.Event
 
 @Composable
 fun DefaultButton(
-    vararg modifiers: UIKitModifier,
+    modifiers: Array<UIKitModifier> = emptyArray(),
     disabled: Boolean = false,
     buttonType: UIKitButton.Type = UIKitButton.Type.Default,
     onClick: ((SyntheticMouseEvent) -> Unit)? = null,
+    attributesCustomizer: AttrBuilderContext<HTMLButtonElement> = {},
     contentAllocator: ContentBuilder<HTMLButtonElement>
 ) {
     Button(
@@ -25,6 +27,7 @@ fun DefaultButton(
             if (disabled) {
                 disabled()
             }
+            attributesCustomizer()
         }
     ) {
         contentAllocator()
@@ -34,13 +37,14 @@ fun DefaultButton(
 @Composable
 fun DefaultButton(
     text: String,
-    vararg modifiers: UIKitModifier,
+    modifiers: Array<UIKitModifier> = emptyArray(),
     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) {
+) = DefaultButton(modifiers, disabled = disabled, buttonType = buttonType, onClick = onClick, attributesCustomizer = attributesCustomizer) {
     preTextContentAllocator ?.apply { preTextContentAllocator() }
     Text(text)
     afterTextContentAllocator ?.apply { afterTextContentAllocator() }
@@ -49,10 +53,11 @@ fun DefaultButton(
 @Composable
 fun UploadButton(
     text: String,
-    vararg buttonModifiers: UIKitModifier,
+    buttonModifiers: Array<UIKitModifier> = emptyArray(),
     containerModifiers: Array<UIKitModifier> = emptyArray(),
     disabled: Boolean = false,
     buttonType: UIKitButton.Type = UIKitButton.Type.Default,
+    attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {},
     onChange: (Event) -> Unit
 ) {
     Div(
@@ -60,6 +65,7 @@ fun UploadButton(
             classes("js-upload", "uk-form-custom")
             attr("uk-form-custom", "")
             include(*containerModifiers)
+            attributesCustomizer()
         }
     ) {
         Input(InputType.File) { onChange { onChange(it.nativeEvent) } }

src/main/kotlin/dev/inmo/jsuikit/elements/Dialog.kt

@@ -5,7 +5,8 @@ import androidx.compose.runtime.DisposableEffectResult
 import dev.inmo.jsuikit.modifiers.UIKitModifier
 import dev.inmo.jsuikit.modifiers.include
 import org.jetbrains.compose.web.dom.*
-import org.w3c.dom.HTMLElement
+import org.jetbrains.compose.web.dom.Text
+import org.w3c.dom.*
 import org.w3c.dom.events.Event
 import kotlin.random.Random
 import kotlin.random.nextUInt
@@ -25,10 +26,11 @@ private class DialogDisposableEffectResult(
 @Composable
 fun Dialog(
     title: String? = null,
-    vararg modifiers: UIKitModifier,
+    modifiers: Array<UIKitModifier> = emptyArray(),
     hide: (() -> Unit)? = null,
     hidden: (() -> Unit)? = null,
     footerBuilder: (@Composable () -> Unit)? = null,
+    attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {},
     bodyBuilder: @Composable () -> Unit
 ) {
     Div(
@@ -37,6 +39,7 @@ fun Dialog(
             classes("uk-flex-top", "uk-modal")
             id("dialog${Random.nextUInt()}")
             include(*modifiers)
+            attributesCustomizer()
         }
     ) {
         Div(

src/main/kotlin/dev/inmo/jsuikit/elements/Dropdown.kt

@@ -4,13 +4,12 @@ import androidx.compose.runtime.Composable
 import dev.inmo.jsuikit.buildAndAddAttribute
 import dev.inmo.jsuikit.modifiers.*
 import dev.inmo.jsuikit.utils.Milliseconds
-import org.jetbrains.compose.web.dom.ContentBuilder
+import org.jetbrains.compose.web.dom.*
-import org.jetbrains.compose.web.dom.Div
 import org.w3c.dom.HTMLDivElement
 
 @Composable
 fun Dropdown(
-    vararg modifiers: UIKitModifier,
+    modifiers: Array<UIKitModifier> = emptyArray(),
     toggle: String? = null,
     pos: UIKitDropdown.Position? = null,
     mode: UIKitDropdown.Mode? = null,
@@ -22,6 +21,7 @@ fun Dropdown(
     offset: Int? = null,
     animation: UIKitAnimation? = null,
     duration: Milliseconds? = null,
+    attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {},
     contentBuilder: ContentBuilder<HTMLDivElement>
 ) {
     Div(
@@ -41,6 +41,7 @@ fun Dropdown(
             }
             classes("uk-dropdown")
             include(*modifiers)
+            attributesCustomizer()
         },
         contentBuilder
     )

src/main/kotlin/dev/inmo/jsuikit/elements/Flex.kt

@@ -3,19 +3,20 @@ package dev.inmo.jsuikit.elements
 import androidx.compose.runtime.Composable
 import dev.inmo.jsuikit.modifiers.UIKitModifier
 import dev.inmo.jsuikit.modifiers.include
-import org.jetbrains.compose.web.dom.Div
+import org.jetbrains.compose.web.dom.*
-import org.jetbrains.compose.web.dom.ElementScope
 import org.w3c.dom.HTMLDivElement
 
 @Composable
 fun Flex(
-    vararg modifiers: UIKitModifier,
+    modifiers: Array<UIKitModifier> = emptyArray(),
+    attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {},
     filler: @Composable ElementScope<HTMLDivElement>.() -> Unit
 ) {
     Div(
         {
             classes("uk-flex")
             include(*modifiers)
+            attributesCustomizer()
         }
     ) {
         filler()

src/main/kotlin/dev/inmo/jsuikit/elements/Grid.kt

@@ -3,18 +3,19 @@ package dev.inmo.jsuikit.elements
 import androidx.compose.runtime.Composable
 import dev.inmo.jsuikit.modifiers.UIKitModifier
 import dev.inmo.jsuikit.modifiers.include
-import org.jetbrains.compose.web.dom.Div
+import org.jetbrains.compose.web.dom.*
-import org.jetbrains.compose.web.dom.ElementScope
 import org.w3c.dom.HTMLDivElement
 
 @Composable
 fun GridColumn(
-    vararg modifiers: UIKitModifier,
+    modifiers: Array<UIKitModifier> = emptyArray(),
+    attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {},
     builder: @Composable ElementScope<HTMLDivElement>.() -> Unit
 ) {
     Div(
         {
             include(*modifiers)
+            attributesCustomizer()
         }
     ) {
         builder()
@@ -23,11 +24,12 @@ fun GridColumn(
 
 @Composable
 fun Grid(
-    vararg modifiers: UIKitModifier,
+    modifiers: Array<UIKitModifier> = emptyArray(),
     masonry: Boolean = false,
     parallax: Int? = null,
     marginClass: String? = null,
     firstColumnClass: String? = null,
+    attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {},
     builder: @Composable ElementScope<HTMLDivElement>.() -> Unit
 ) {
     val attrs = listOfNotNull(
@@ -41,6 +43,7 @@ fun Grid(
             attr("uk-grid", attrs.joinToString(";") { (k, v) -> "$k: $v" })
             classes("uk-grid")
             include(*modifiers)
+            attributesCustomizer()
         }
     ) {
         builder()

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

@@ -2,8 +2,8 @@ package dev.inmo.jsuikit.elements
 
 import androidx.compose.runtime.Composable
 import dev.inmo.jsuikit.modifiers.*
-import org.jetbrains.compose.web.dom.Button
+import org.jetbrains.compose.web.dom.*
-import org.jetbrains.compose.web.dom.Span
+import org.w3c.dom.*
 import org.w3c.dom.events.Event
 
 sealed class Icon(val name: String) {
@@ -204,47 +204,41 @@ sealed class Icon(val name: String) {
 
     @Composable
     operator fun invoke(
-        vararg modifier: UIKitModifier,
+        modifiers: Array<UIKitModifier> = emptyArray(),
         type: UIKitIconType = UIKitIconType.Default,
         ratio: Float? = null,
+        attributesCustomizer: AttrBuilderContext<out HTMLElement> = {},
         onClick: ((Event) -> Unit)? = null
     ) {
+        val configurer: AttrBuilderContext<out HTMLElement> = {
+            classes("uk-icon")
+            include(*modifiers, type)
+            attr("uk-icon", "icon: $name${if (ratio != null) { "; ratio: $ratio" } else ""}")
+            onClick ?.let { _ ->
+                onClick { onClick(it.nativeEvent) }
+            }
+            attributesCustomizer()
+        }
         if (type == UIKitIconType.Button) {
-            Button(
+            Button(configurer)
-                {
-                    classes("uk-icon")
-                    include(*modifier, type)
-                    attr("uk-icon", "icon: $name${if (ratio != null) { "; ratio: $ratio" } else ""}")
-                    onClick ?.let { _ ->
-                        onClick { onClick(it.nativeEvent) }
-                    }
-                }
-            )
         } else {
-            Span(
+            Span(configurer)
-                {
-                    classes("uk-icon")
-                    include(*modifier, type)
-                    attr("uk-icon", "icon: $name${if (ratio != null) { "; ratio: $ratio" } else ""}")
-                    onClick ?.let { _ ->
-                        onClick { onClick(it.nativeEvent) }
-                    }
-                }
-            )
         }
     }
 
     @Composable
     fun drawAsButton(
-        vararg modifier: UIKitModifier,
+        modifiers: Array<UIKitModifier> = emptyArray(),
         ratio: Float? = null,
+        attributesCustomizer: AttrBuilderContext<out HTMLElement> = {},
         onClick: ((Event) -> Unit)? = null
-    ) = invoke(*modifier, type = UIKitIconType.Button, ratio = ratio, onClick = onClick)
+    ) = invoke(modifiers, type = UIKitIconType.Button, ratio = ratio, onClick = onClick, attributesCustomizer = attributesCustomizer)
 
     @Composable
     fun drawAsIcon(
-        vararg modifier: UIKitModifier,
+        modifiers: Array<UIKitModifier> = emptyArray(),
         ratio: Float? = null,
+        attributesCustomizer: AttrBuilderContext<out HTMLElement> = {},
         onClick: ((Event) -> Unit)? = null
-    ) = invoke(*modifier, type = UIKitIconType.Default, ratio = ratio, onClick = onClick)
+    ) = invoke(modifiers, type = UIKitIconType.Default, ratio = ratio, onClick = onClick, attributesCustomizer = attributesCustomizer)
 }

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

@@ -3,8 +3,8 @@ package dev.inmo.jsuikit.elements
 import androidx.compose.runtime.Composable
 import dev.inmo.jsuikit.modifiers.UIKitModifier
 import dev.inmo.jsuikit.modifiers.include
-import org.jetbrains.compose.web.dom.Span
+import org.jetbrains.compose.web.dom.*
-import org.jetbrains.compose.web.dom.Text
+import org.w3c.dom.HTMLSpanElement
 
 sealed interface Label {
     val suffix: String
@@ -12,11 +12,13 @@ sealed interface Label {
     @Composable
     operator fun invoke(
         text: String,
-        vararg modifiers: UIKitModifier
+        modifiers: Array<UIKitModifier> = emptyArray(),
+        attributesCustomizer: AttrBuilderContext<HTMLSpanElement> = {},
     ) = Span(
         {
             classes("uk-label", "uk-label-$suffix")
             include(*modifiers)
+            attributesCustomizer()
         }
     ) {
         Text(text)

src/main/kotlin/dev/inmo/jsuikit/elements/List.kt

@@ -5,6 +5,7 @@ import androidx.compose.runtime.snapshots.SnapshotStateList
 import dev.inmo.jsuikit.modifiers.UIKitModifier
 import dev.inmo.jsuikit.modifiers.include
 import org.jetbrains.compose.web.dom.*
+import org.w3c.dom.HTMLHeadingElement
 import org.w3c.dom.HTMLUListElement
 
 @Composable
@@ -12,11 +13,13 @@ fun <T> List(
     title: String,
     data: SnapshotStateList<T>,
     titleModifiers: Array<UIKitModifier> = emptyArray(),
+    titleCustomizer: AttrBuilderContext<HTMLHeadingElement> = {},
     ulModifiers: Array<UIKitModifier> = emptyArray(),
+    ulCustomizer: AttrBuilderContext<HTMLUListElement> = {},
     besidesTitleAndList: (@Composable () -> Unit)? = null,
     elementAllocator: @Composable ElementScope<HTMLUListElement>.(T) -> Unit
 ) {
-    H4({ include(*titleModifiers) }) {
+    H4({ include(*titleModifiers); titleCustomizer() }) {
         Text(title)
     }
     besidesTitleAndList ?.invoke()
@@ -24,6 +27,7 @@ fun <T> List(
         {
             classes("uk-list")
             include(*ulModifiers)
+            ulCustomizer()
         }
     ) {
         data.forEach {

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

@@ -10,11 +10,12 @@ import org.w3c.dom.HTMLUListElement
 
 @Composable
 fun Nav(
-    vararg modifiers: UIKitModifier,
+    modifiers: Array<UIKitModifier> = emptyArray(),
     multiple: Boolean? = null,
     collapsible: Boolean? = null,
     animation: UIKitAnimation? = null,
     duration: Milliseconds? = null,
+    attributesCustomizer: AttrBuilderContext<HTMLUListElement> = {},
     dataAllocator: ContentBuilder<HTMLUListElement>
 ) {
     Ul(
@@ -27,6 +28,7 @@ fun Nav(
             }
             classes("uk-nav")
             include(*modifiers)
+            attributesCustomizer()
         }
     ) {
         dataAllocator()
@@ -35,14 +37,14 @@ fun Nav(
 
 @Composable
 fun NavElement(
-    vararg modifiers: UIKitModifier,
+    modifiers: Array<UIKitModifier> = emptyArray(),
-    attributesAllocator: (AttrBuilderContext<HTMLLIElement>)? = null,
+    attributesCustomizer: AttrBuilderContext<HTMLLIElement> = {},
     contentAllocator: ContentBuilder<HTMLLIElement>
 ) {
     Li(
         {
-            attributesAllocator ?.apply { attributesAllocator() }
             include(*modifiers)
+            attributesCustomizer
         }
     ) {
         contentAllocator()

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

@@ -3,21 +3,23 @@ package dev.inmo.jsuikit.elements
 import androidx.compose.runtime.Composable
 import dev.inmo.jsuikit.modifiers.UIKitModifier
 import dev.inmo.jsuikit.modifiers.include
-import org.jetbrains.compose.web.dom.Div
+import org.jetbrains.compose.web.dom.*
-import org.jetbrains.compose.web.dom.Nav
+import org.w3c.dom.HTMLElement
 
 @Composable
 fun Navbar(
-    vararg navModifiers: UIKitModifier,
     leftBuilder: NavbarNavBuilder? = null,
     centerBuilder: NavbarNavBuilder? = null,
     rightBuilder: NavbarNavBuilder? = null,
+    navModifiers: Array<UIKitModifier> = emptyArray(),
+    attributesCustomizer: AttrBuilderContext<HTMLElement> = {},
 ) {
     Nav(
         {
             attr("uk-navbar", "")
             classes("uk-navbar-container", "uk-navbar")
             include(*navModifiers)
+            attributesCustomizer()
         }
     ) {
         leftBuilder ?.let {

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

@@ -6,6 +6,7 @@ import dev.inmo.jsuikit.modifiers.include
 import org.jetbrains.compose.web.attributes.AttrsBuilder
 import org.jetbrains.compose.web.dom.*
 import org.w3c.dom.HTMLLIElement
+import org.w3c.dom.HTMLUListElement
 
 interface NavbarNavElement {
     fun AttrsBuilder<HTMLLIElement>.setup() {}
@@ -29,21 +30,25 @@ interface NavbarNavElement {
 
 class NavbarNavBuilder(
     private val modifiers: Array<UIKitModifier>,
-    private val elements: List<NavbarNavElement>
+    private val elements: List<NavbarNavElement>,
+    private val attributesCustomizer: AttrBuilderContext<HTMLUListElement> = {}
 ) {
     constructor(
         modifiers: Array<UIKitModifier>,
-        vararg elements: NavbarNavElement
+        vararg elements: NavbarNavElement,
-    ) : this(modifiers, elements.toList())
+        attributesCustomizer: AttrBuilderContext<HTMLUListElement> = {}
+    ) : this(modifiers, elements.toList(), attributesCustomizer)
     constructor(
-        vararg elements: NavbarNavElement
+        vararg elements: NavbarNavElement,
-    ) : this(emptyArray(), elements.toList())
+        attributesCustomizer: AttrBuilderContext<HTMLUListElement> = {}
+    ) : this(emptyArray(), elements.toList(), attributesCustomizer)
     @Composable
     fun draw() {
         Ul(
             {
                 classes("uk-navbar-nav")
                 include(*modifiers)
+                attributesCustomizer()
             }
         ) {
             elements.forEach { element ->

src/main/kotlin/dev/inmo/jsuikit/elements/Progress.kt

@@ -3,13 +3,16 @@ package dev.inmo.jsuikit.elements
 import androidx.compose.runtime.Composable
 import dev.inmo.jsuikit.modifiers.UIKitModifier
 import dev.inmo.jsuikit.modifiers.include
+import org.jetbrains.compose.web.dom.AttrBuilderContext
 import org.jetbrains.compose.web.dom.Progress
+import org.w3c.dom.HTMLProgressElement
 
 @Composable
 fun Progress(
     value: Int,
-    vararg modifiers: UIKitModifier,
+    modifiers: Array<UIKitModifier> = emptyArray(),
-    max: Int = 100
+    max: Int = 100,
+    attributesCustomizer: AttrBuilderContext<HTMLProgressElement> = {}
 ) {
     Progress(
         {
@@ -17,6 +20,7 @@ fun Progress(
             include(*modifiers)
             attr("max", max.toString())
             attr("value", value.toString())
+            attributesCustomizer()
         }
     )
 }

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

@@ -2,21 +2,27 @@ package dev.inmo.jsuikit.elements
 
 import androidx.compose.runtime.Composable
 import dev.inmo.jsuikit.modifiers.*
+import org.jetbrains.compose.web.dom.AttrBuilderContext
 import org.jetbrains.compose.web.dom.Div
+import org.w3c.dom.HTMLDivElement
 
 @Composable
 fun Spinner(
-    vararg modifier: UIKitModifier,
+    modifiers: Array<UIKitModifier> = emptyArray(),
-    ratio: Float? = null
+    ratio: Float? = null,
+    attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {}
 ) {
     Div(
         {
             attr("uk-spinner", ratio ?.let { "ratio: $it" } ?: "")
             classes("uk-icon", "uk-spinner")
-            include(*modifier)
+            include(*modifiers)
+            attributesCustomizer()
         }
     )
 }
 
 @Composable
-fun DefaultSpinner() = Spinner(UIKitAlign.Center, UIKitMargin.Small, UIKitText.Alignment.Center)
+fun DefaultSpinner() = Spinner(
+    arrayOf(UIKitAlign.Center, UIKitMargin.Small, UIKitText.Alignment.Center)
+)

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

@@ -4,12 +4,15 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.snapshots.SnapshotStateList
 import dev.inmo.jsuikit.modifiers.*
 import org.jetbrains.compose.web.dom.*
+import org.w3c.dom.HTMLProgressElement
+import org.w3c.dom.HTMLTableElement
 
 @Composable
 fun <T> DefaultTable(
     heading: List<String>,
     dataList: SnapshotStateList<T>,
-    vararg tableModifiers: UIKitModifier,
+    tableModifiers: Array<UIKitModifier> = emptyArray(),
+    attributesCustomizer: AttrBuilderContext<HTMLTableElement> = {},
     cellFiller: @Composable (i: Int, t: T) -> Unit
 ) {
     val headingIndexes = heading.indices
@@ -17,6 +20,7 @@ fun <T> DefaultTable(
         {
             classes("uk-table")
             include(*tableModifiers)
+            attributesCustomizer()
         }
     ) {
         Thead {

src/main/kotlin/dev/inmo/jsuikit/elements/TextField.kt

@@ -4,7 +4,9 @@ import androidx.compose.runtime.*
 import dev.inmo.jsuikit.modifiers.UIKitModifier
 import dev.inmo.jsuikit.modifiers.include
 import org.jetbrains.compose.web.attributes.*
+import org.jetbrains.compose.web.dom.AttrBuilderContext
 import org.jetbrains.compose.web.dom.Input
+import org.w3c.dom.HTMLInputElement
 
 @Composable
 fun <T> TextField(
@@ -12,7 +14,8 @@ fun <T> TextField(
     state: MutableState<T>,
     disabledState: State<Boolean>? = null,
     placeholder: String? = null,
-    vararg modifiers: UIKitModifier
+    attributesCustomizer: AttrBuilderContext<HTMLInputElement> = {},
+    modifiers: Array<UIKitModifier> = emptyArray()
 ) {
     Input(type) {
         classes("uk-input")
@@ -26,5 +29,6 @@ fun <T> TextField(
                 disabled()
             }
         }
+        attributesCustomizer()
     }
 }