diff --git a/CHANGELOG.md b/CHANGELOG.md index 1d11b53..cbff3bc 100644 --- a/CHANGELOG.md +++ b/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__ diff --git a/src/main/kotlin/dev/inmo/jsuikit/elements/Button.kt b/src/main/kotlin/dev/inmo/jsuikit/elements/Button.kt index acd463d..0689e36 100644 --- a/src/main/kotlin/dev/inmo/jsuikit/elements/Button.kt +++ b/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 = emptyArray(), disabled: Boolean = false, buttonType: UIKitButton.Type = UIKitButton.Type.Default, onClick: ((SyntheticMouseEvent) -> Unit)? = null, + attributesCustomizer: AttrBuilderContext = {}, contentAllocator: ContentBuilder ) { 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 = emptyArray(), disabled: Boolean = false, buttonType: UIKitButton.Type = UIKitButton.Type.Default, preTextContentAllocator: ContentBuilder? = null, afterTextContentAllocator: ContentBuilder? = null, + attributesCustomizer: AttrBuilderContext = {}, 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 = emptyArray(), containerModifiers: Array = emptyArray(), disabled: Boolean = false, buttonType: UIKitButton.Type = UIKitButton.Type.Default, + attributesCustomizer: AttrBuilderContext = {}, 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) } } diff --git a/src/main/kotlin/dev/inmo/jsuikit/elements/Dialog.kt b/src/main/kotlin/dev/inmo/jsuikit/elements/Dialog.kt index 6204e4d..f5ca7a2 100644 --- a/src/main/kotlin/dev/inmo/jsuikit/elements/Dialog.kt +++ b/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 = emptyArray(), hide: (() -> Unit)? = null, hidden: (() -> Unit)? = null, footerBuilder: (@Composable () -> Unit)? = null, + attributesCustomizer: AttrBuilderContext = {}, bodyBuilder: @Composable () -> Unit ) { Div( @@ -37,6 +39,7 @@ fun Dialog( classes("uk-flex-top", "uk-modal") id("dialog${Random.nextUInt()}") include(*modifiers) + attributesCustomizer() } ) { Div( diff --git a/src/main/kotlin/dev/inmo/jsuikit/elements/Dropdown.kt b/src/main/kotlin/dev/inmo/jsuikit/elements/Dropdown.kt index f5c7427..8ec41bb 100644 --- a/src/main/kotlin/dev/inmo/jsuikit/elements/Dropdown.kt +++ b/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.Div +import org.jetbrains.compose.web.dom.* import org.w3c.dom.HTMLDivElement @Composable fun Dropdown( - vararg modifiers: UIKitModifier, + modifiers: Array = 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 = {}, contentBuilder: ContentBuilder ) { Div( @@ -41,6 +41,7 @@ fun Dropdown( } classes("uk-dropdown") include(*modifiers) + attributesCustomizer() }, contentBuilder ) diff --git a/src/main/kotlin/dev/inmo/jsuikit/elements/Flex.kt b/src/main/kotlin/dev/inmo/jsuikit/elements/Flex.kt index 531e56e..3064f18 100644 --- a/src/main/kotlin/dev/inmo/jsuikit/elements/Flex.kt +++ b/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.ElementScope +import org.jetbrains.compose.web.dom.* import org.w3c.dom.HTMLDivElement @Composable fun Flex( - vararg modifiers: UIKitModifier, + modifiers: Array = emptyArray(), + attributesCustomizer: AttrBuilderContext = {}, filler: @Composable ElementScope.() -> Unit ) { Div( { classes("uk-flex") include(*modifiers) + attributesCustomizer() } ) { filler() diff --git a/src/main/kotlin/dev/inmo/jsuikit/elements/Grid.kt b/src/main/kotlin/dev/inmo/jsuikit/elements/Grid.kt index 6aa51ef..53bd59e 100644 --- a/src/main/kotlin/dev/inmo/jsuikit/elements/Grid.kt +++ b/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.ElementScope +import org.jetbrains.compose.web.dom.* import org.w3c.dom.HTMLDivElement @Composable fun GridColumn( - vararg modifiers: UIKitModifier, + modifiers: Array = emptyArray(), + attributesCustomizer: AttrBuilderContext = {}, builder: @Composable ElementScope.() -> Unit ) { Div( { include(*modifiers) + attributesCustomizer() } ) { builder() @@ -23,11 +24,12 @@ fun GridColumn( @Composable fun Grid( - vararg modifiers: UIKitModifier, + modifiers: Array = emptyArray(), masonry: Boolean = false, parallax: Int? = null, marginClass: String? = null, firstColumnClass: String? = null, + attributesCustomizer: AttrBuilderContext = {}, builder: @Composable ElementScope.() -> 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() diff --git a/src/main/kotlin/dev/inmo/jsuikit/elements/Icon.kt b/src/main/kotlin/dev/inmo/jsuikit/elements/Icon.kt index 3bd6b80..12eb9d8 100644 --- a/src/main/kotlin/dev/inmo/jsuikit/elements/Icon.kt +++ b/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.Span +import org.jetbrains.compose.web.dom.* +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 = emptyArray(), type: UIKitIconType = UIKitIconType.Default, ratio: Float? = null, + attributesCustomizer: AttrBuilderContext = {}, onClick: ((Event) -> Unit)? = null ) { + val configurer: AttrBuilderContext = { + 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( - { - classes("uk-icon") - include(*modifier, type) - attr("uk-icon", "icon: $name${if (ratio != null) { "; ratio: $ratio" } else ""}") - onClick ?.let { _ -> - onClick { onClick(it.nativeEvent) } - } - } - ) + Button(configurer) } else { - Span( - { - classes("uk-icon") - include(*modifier, type) - attr("uk-icon", "icon: $name${if (ratio != null) { "; ratio: $ratio" } else ""}") - onClick ?.let { _ -> - onClick { onClick(it.nativeEvent) } - } - } - ) + Span(configurer) } } @Composable fun drawAsButton( - vararg modifier: UIKitModifier, + modifiers: Array = emptyArray(), ratio: Float? = null, + attributesCustomizer: AttrBuilderContext = {}, 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 = emptyArray(), ratio: Float? = null, + attributesCustomizer: AttrBuilderContext = {}, onClick: ((Event) -> Unit)? = null - ) = invoke(*modifier, type = UIKitIconType.Default, ratio = ratio, onClick = onClick) + ) = invoke(modifiers, type = UIKitIconType.Default, ratio = ratio, onClick = onClick, attributesCustomizer = attributesCustomizer) } diff --git a/src/main/kotlin/dev/inmo/jsuikit/elements/Labels.kt b/src/main/kotlin/dev/inmo/jsuikit/elements/Labels.kt index 8698961..20ed43b 100644 --- a/src/main/kotlin/dev/inmo/jsuikit/elements/Labels.kt +++ b/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.Text +import org.jetbrains.compose.web.dom.* +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 = emptyArray(), + attributesCustomizer: AttrBuilderContext = {}, ) = Span( { classes("uk-label", "uk-label-$suffix") include(*modifiers) + attributesCustomizer() } ) { Text(text) diff --git a/src/main/kotlin/dev/inmo/jsuikit/elements/List.kt b/src/main/kotlin/dev/inmo/jsuikit/elements/List.kt index f443bc6..1be8c0d 100644 --- a/src/main/kotlin/dev/inmo/jsuikit/elements/List.kt +++ b/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 List( title: String, data: SnapshotStateList, titleModifiers: Array = emptyArray(), + titleCustomizer: AttrBuilderContext = {}, ulModifiers: Array = emptyArray(), + ulCustomizer: AttrBuilderContext = {}, besidesTitleAndList: (@Composable () -> Unit)? = null, elementAllocator: @Composable ElementScope.(T) -> Unit ) { - H4({ include(*titleModifiers) }) { + H4({ include(*titleModifiers); titleCustomizer() }) { Text(title) } besidesTitleAndList ?.invoke() @@ -24,6 +27,7 @@ fun List( { classes("uk-list") include(*ulModifiers) + ulCustomizer() } ) { data.forEach { diff --git a/src/main/kotlin/dev/inmo/jsuikit/elements/Nav.kt b/src/main/kotlin/dev/inmo/jsuikit/elements/Nav.kt index 40c90ba..1191cf3 100644 --- a/src/main/kotlin/dev/inmo/jsuikit/elements/Nav.kt +++ b/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 = emptyArray(), multiple: Boolean? = null, collapsible: Boolean? = null, animation: UIKitAnimation? = null, duration: Milliseconds? = null, + attributesCustomizer: AttrBuilderContext = {}, dataAllocator: ContentBuilder ) { 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, - attributesAllocator: (AttrBuilderContext)? = null, + modifiers: Array = emptyArray(), + attributesCustomizer: AttrBuilderContext = {}, contentAllocator: ContentBuilder ) { Li( { - attributesAllocator ?.apply { attributesAllocator() } include(*modifiers) + attributesCustomizer } ) { contentAllocator() diff --git a/src/main/kotlin/dev/inmo/jsuikit/elements/Navbar.kt b/src/main/kotlin/dev/inmo/jsuikit/elements/Navbar.kt index e12cd9f..ee3ee98 100644 --- a/src/main/kotlin/dev/inmo/jsuikit/elements/Navbar.kt +++ b/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.Nav +import org.jetbrains.compose.web.dom.* +import org.w3c.dom.HTMLElement @Composable fun Navbar( - vararg navModifiers: UIKitModifier, leftBuilder: NavbarNavBuilder? = null, centerBuilder: NavbarNavBuilder? = null, rightBuilder: NavbarNavBuilder? = null, + navModifiers: Array = emptyArray(), + attributesCustomizer: AttrBuilderContext = {}, ) { Nav( { attr("uk-navbar", "") classes("uk-navbar-container", "uk-navbar") include(*navModifiers) + attributesCustomizer() } ) { leftBuilder ?.let { diff --git a/src/main/kotlin/dev/inmo/jsuikit/elements/NavbarNavBuilder.kt b/src/main/kotlin/dev/inmo/jsuikit/elements/NavbarNavBuilder.kt index 1e2c14d..3cd40f2 100644 --- a/src/main/kotlin/dev/inmo/jsuikit/elements/NavbarNavBuilder.kt +++ b/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.setup() {} @@ -29,21 +30,25 @@ interface NavbarNavElement { class NavbarNavBuilder( private val modifiers: Array, - private val elements: List + private val elements: List, + private val attributesCustomizer: AttrBuilderContext = {} ) { constructor( modifiers: Array, - vararg elements: NavbarNavElement - ) : this(modifiers, elements.toList()) + vararg elements: NavbarNavElement, + attributesCustomizer: AttrBuilderContext = {} + ) : this(modifiers, elements.toList(), attributesCustomizer) constructor( - vararg elements: NavbarNavElement - ) : this(emptyArray(), elements.toList()) + vararg elements: NavbarNavElement, + attributesCustomizer: AttrBuilderContext = {} + ) : this(emptyArray(), elements.toList(), attributesCustomizer) @Composable fun draw() { Ul( { classes("uk-navbar-nav") include(*modifiers) + attributesCustomizer() } ) { elements.forEach { element -> diff --git a/src/main/kotlin/dev/inmo/jsuikit/elements/Progress.kt b/src/main/kotlin/dev/inmo/jsuikit/elements/Progress.kt index d4ec030..2b58c94 100644 --- a/src/main/kotlin/dev/inmo/jsuikit/elements/Progress.kt +++ b/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, - max: Int = 100 + modifiers: Array = emptyArray(), + max: Int = 100, + attributesCustomizer: AttrBuilderContext = {} ) { Progress( { @@ -17,6 +20,7 @@ fun Progress( include(*modifiers) attr("max", max.toString()) attr("value", value.toString()) + attributesCustomizer() } ) } diff --git a/src/main/kotlin/dev/inmo/jsuikit/elements/Spinner.kt b/src/main/kotlin/dev/inmo/jsuikit/elements/Spinner.kt index d982239..e310731 100644 --- a/src/main/kotlin/dev/inmo/jsuikit/elements/Spinner.kt +++ b/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, - ratio: Float? = null + modifiers: Array = emptyArray(), + ratio: Float? = null, + attributesCustomizer: AttrBuilderContext = {} ) { 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) +) diff --git a/src/main/kotlin/dev/inmo/jsuikit/elements/Table.kt b/src/main/kotlin/dev/inmo/jsuikit/elements/Table.kt index 33d45da..22e63e6 100644 --- a/src/main/kotlin/dev/inmo/jsuikit/elements/Table.kt +++ b/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 DefaultTable( heading: List, dataList: SnapshotStateList, - vararg tableModifiers: UIKitModifier, + tableModifiers: Array = emptyArray(), + attributesCustomizer: AttrBuilderContext = {}, cellFiller: @Composable (i: Int, t: T) -> Unit ) { val headingIndexes = heading.indices @@ -17,6 +20,7 @@ fun DefaultTable( { classes("uk-table") include(*tableModifiers) + attributesCustomizer() } ) { Thead { diff --git a/src/main/kotlin/dev/inmo/jsuikit/elements/TextField.kt b/src/main/kotlin/dev/inmo/jsuikit/elements/TextField.kt index 36adaf9..f14bd92 100644 --- a/src/main/kotlin/dev/inmo/jsuikit/elements/TextField.kt +++ b/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 TextField( @@ -12,7 +14,8 @@ fun TextField( state: MutableState, disabledState: State? = null, placeholder: String? = null, - vararg modifiers: UIKitModifier + attributesCustomizer: AttrBuilderContext = {}, + modifiers: Array = emptyArray() ) { Input(type) { classes("uk-input") @@ -26,5 +29,6 @@ fun TextField( disabled() } } + attributesCustomizer() } }