improvements in UIKitModifier tools

0.0.47

CHANGELOG.md

@@ -1,5 +1,78 @@
 # Changelog
 
+## 0.0.48
+
+* Added support of `Breadcrumb`
+* Add opportunity to summarize `UIKitModifier`
+* Add opportunity to simply create attributes builder using `UIKitModifier` of array of them
+
+## 0.0.47
+
+* Add support of `Close` element
+
+## 0.0.46
+
+* Add support of `UIKitOverlay`
+* Add support of `UIKitInverse`
+
+## 0.0.45
+
+* Add support of containers in `UIKitContainer` modifiers and `Container` function
+
+## 0.0.44
+
+* `Versions`:
+    * `Compose`: `1.1.0` -> `1.1.1`
+
+## 0.0.43
+
+* Several new extensions for `UIKitModifier` like `UIKitModifier#onSmallScreen`
+* Support of `Tile`
+
+## 0.0.42
+
+* Migration to compose 1.1.0
+* Replaces according to it
+
+## 0.0.41
+
+* Add `DropArea`
+* Add `UIKitPlaceholder`
+* `UIKitForm#Custom` now have nullable param target
+* Add `UIKitUtility#Link`
+* Add `DescriptionList` and several support composable functions
+
+## 0.0.40
+
+* All `DefaultTable` functions now use `Iterable` as data type
+
+## 0.0.39
+
+* Add support of `Notifications`
+
+## 0.0.38
+
+* Add support of `Toggle`
+* Attributes collection now can be concatenated
+
+## 0.0.37
+
+* `Dialog` now do not add auto margin by default
+* Support of `Accordion` element
+
+## 0.0.36
+
+* Reorder arguments in `DefaultComment` fun
+* Add `Vertical` and `Horizontal` members in margins
+* Add `afterHeaderBuilder` and `beforeFooterBuilder` properties in `Dialog` fun
+* Add `UIKitCustom` to be able for simple creating of custom modifiers
+* Add support of `UIKitForm`
+
+## 0.0.35
+
+* Add `UIKitModal`
+* Improve work with dialogs
+
 ## 0.0.34
 
 * Add `Alert`

gradle.properties

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

gradle/libs.versions.toml

@@ -1,7 +1,7 @@
 [versions]
 
 kt = "1.6.10"
-jb-compose = "1.0.1"
+jb-compose = "1.1.1"
 jb-dokka = "1.6.10"
 gh-release = "2.2.12"
 

gradle/wrapper/gradle-wrapper.properties

@@ -1,5 +1,5 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-7.3.3-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.4.1-bin.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists

src/jsMain/kotlin/dev/inmo/jsuikit/UIKitAttributeValueBuilder.kt

@@ -3,7 +3,7 @@ package dev.inmo.jsuikit
 import dev.inmo.jsuikit.modifiers.AttributeValue
 import dev.inmo.jsuikit.utils.AttributeBuilder
 import dev.inmo.jsuikit.utils.buildAttribute
-import org.jetbrains.compose.web.attributes.AttrsBuilder
+import org.jetbrains.compose.web.attributes.AttrsScope
 
 @Deprecated("Will be removed soon")
 class UIKitAttributeValueBuilder {
@@ -22,7 +22,7 @@ class UIKitAttributeValueBuilder {
     fun build(): String = attrs.joinToString(";") { (k, v) -> "$k: $v" }
 }
 
-fun AttrsBuilder<*>.buildAndAddAttribute(
+fun AttrsScope<*>.buildAndAddAttribute(
     attributeName: String,
     skipNullValues: Boolean = true,
     block: AttributeBuilder.() -> Unit

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

@@ -0,0 +1,89 @@
+package dev.inmo.jsuikit.elements
+
+import androidx.compose.runtime.Composable
+import dev.inmo.jsuikit.modifiers.UIKitAccordion
+import dev.inmo.jsuikit.modifiers.include
+import dev.inmo.jsuikit.utils.Attrs
+import org.jetbrains.compose.web.attributes.AttrsScope
+import org.jetbrains.compose.web.dom.*
+import org.w3c.dom.*
+
+@Composable
+fun <T> Accordion(
+    data: Iterable<T>,
+    attrs: Attrs<HTMLUListElement> = Attrs.empty(),
+    itemAttrsBuilder: AttrsScope<HTMLLIElement>.(Int, T) -> Unit = { _, _ -> },
+    itemContentBuilder: @Composable ElementScope<HTMLLIElement>.(Int, T) -> Unit
+) {
+    Ul(
+        {
+            include(UIKitAccordion)
+            attrs.builder(this)
+        }
+    ) {
+        data.forEachIndexed { i, t ->
+            Li({ itemAttrsBuilder(i, t) }) {
+                itemContentBuilder(i, t)
+            }
+        }
+    }
+}
+
+@Composable
+fun <T> DefaultAccordion(
+    data: Iterable<T>,
+    attrs: Attrs<HTMLUListElement> = Attrs.empty(),
+    itemAttrsBuilder: AttrsScope<HTMLLIElement>.(Int, T) -> Unit = { _, _ -> },
+    titleAttrsBuilder: AttrsScope<HTMLAnchorElement>.(Int, T) -> Unit = { _, _ -> },
+    titleContentBuilder: @Composable ElementScope<HTMLAnchorElement>.(Int, T) -> Unit = { _, _ -> },
+    beforeTitleContentBuilder: @Composable ElementScope<HTMLLIElement>.(Int, T) -> Unit = { _, _ -> },
+    afterTitleContentBuilder: @Composable ElementScope<HTMLLIElement>.(Int, T) -> Unit = { _, _ -> },
+    afterContentContentBuilder: @Composable  ElementScope<HTMLLIElement>.(Int, T) -> Unit = { _, _ -> },
+    contentAttrsBuilder: AttrsScope<HTMLDivElement>.(Int, T) -> Unit = { _, _ -> },
+    contentContentBuilder: @Composable ElementScope<HTMLDivElement>.(Int, T) -> Unit
+) = Accordion(
+    data,
+    attrs,
+    itemAttrsBuilder
+) { i, t ->
+    beforeTitleContentBuilder(i, t)
+    A(
+        attrs = {
+            include(UIKitAccordion.Title)
+            titleAttrsBuilder(i, t)
+        }
+    ) {
+        titleContentBuilder(i, t)
+    }
+    afterTitleContentBuilder(i, t)
+    Div(
+        {
+            include(UIKitAccordion.Content)
+            contentAttrsBuilder(i, t)
+        }
+    ) {
+        contentContentBuilder(i, t)
+    }
+    afterContentContentBuilder(i, t)
+}
+
+@Composable
+fun <T> DefaultAccordion(
+    data: Iterable<T>,
+    titleResolver: (Int, T) -> String,
+    attrs: Attrs<HTMLUListElement> = Attrs.empty(),
+    itemAttrsBuilder: AttrsScope<HTMLLIElement>.(Int, T) -> Unit = { _, _ -> },
+    titleAttrsBuilder: AttrsScope<HTMLAnchorElement>.(Int, T) -> Unit = { _, _ -> },
+    contentAttrsBuilder: AttrsScope<HTMLDivElement>.(Int, T) -> Unit = { _, _ -> },
+    contentContentBuilder: @Composable ElementScope<HTMLDivElement>.(Int, T) -> Unit
+) = DefaultAccordion(
+    data,
+    attrs,
+    itemAttrsBuilder,
+    titleAttrsBuilder,
+    { i, t ->
+        org.jetbrains.compose.web.dom.Text(titleResolver(i, t))
+    },
+    contentAttrsBuilder = contentAttrsBuilder,
+    contentContentBuilder = contentContentBuilder
+)

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

@@ -0,0 +1,50 @@
+package dev.inmo.jsuikit.elements
+
+import androidx.compose.runtime.Composable
+import dev.inmo.jsuikit.modifiers.UIKitBreadcrumb
+import dev.inmo.jsuikit.modifiers.include
+import dev.inmo.jsuikit.utils.Attrs
+import org.jetbrains.compose.web.dom.*
+import org.w3c.dom.*
+
+@Composable
+fun <T> Breadcrumb(
+    data: Iterable<T>,
+    rootAttrs: Attrs<HTMLUListElement> = Attrs.empty(),
+    elementAttrs: Attrs<HTMLLIElement> = Attrs.empty(),
+    elementContent: @Composable ElementScope<HTMLLIElement>.(T) -> Unit = {},
+) {
+    Ul(
+        {
+            include(UIKitBreadcrumb)
+            rootAttrs.builder(this)
+        }
+    ) {
+        data.forEach {
+            Li({ elementAttrs.builder(this) }) {
+                elementContent(it)
+            }
+        }
+    }
+}
+
+@Composable
+fun BreadcrumbActiveElement(
+    href: String? = "#",
+    elementAttrs: Attrs<HTMLAnchorElement> = Attrs.empty(),
+    elementContent: @Composable ElementScope<HTMLAnchorElement>.() -> Unit = {},
+) {
+    A(href, { elementAttrs.builder(this) }) {
+        elementContent()
+    }
+}
+
+@Composable
+fun BreadcrumbInactiveElement(
+    elementAttrs: Attrs<HTMLSpanElement> = Attrs.empty(),
+    elementContent: @Composable ElementScope<HTMLSpanElement>.() -> Unit = {},
+) {
+    Span({ elementAttrs.builder(this) }) {
+        elementContent()
+    }
+}

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

@@ -4,7 +4,8 @@ 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.*
+import org.w3c.dom.HTMLDivElement
+import org.w3c.dom.HTMLHeadingElement
 
 @Composable
 fun Card(

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

@@ -0,0 +1,45 @@
+package dev.inmo.jsuikit.elements
+
+import androidx.compose.runtime.Composable
+import androidx.compose.web.events.SyntheticMouseEvent
+import dev.inmo.jsuikit.modifiers.UIKitClose
+import dev.inmo.jsuikit.modifiers.include
+import dev.inmo.jsuikit.utils.Attrs
+import org.jetbrains.compose.web.attributes.ButtonType
+import org.jetbrains.compose.web.attributes.type
+import org.jetbrains.compose.web.dom.*
+import org.w3c.dom.HTMLAnchorElement
+import org.w3c.dom.HTMLButtonElement
+
+object Close {
+    @Composable
+    fun drawAsLink(
+        href: String = "#",
+        attrs: Attrs<HTMLAnchorElement> = Attrs.empty(),
+        contentBuilder: ContentBuilder<HTMLAnchorElement> = {}
+    ) = A(
+        href,
+        {
+            include(UIKitClose)
+            attrs.builder(this)
+        },
+        contentBuilder
+    )
+
+    @Composable
+    fun drawAsButton(
+        attrs: Attrs<HTMLButtonElement> = Attrs.empty(),
+        contentBuilder: ContentBuilder<HTMLButtonElement> = {},
+        onClick: ((SyntheticMouseEvent) -> Unit)? = null
+    ) = Button(
+        {
+            type(ButtonType.Button)
+            include(UIKitClose)
+            attrs.builder(this)
+            onClick ?.let {
+                onClick(onClick)
+            }
+        },
+        contentBuilder
+    )
+}

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

@@ -45,16 +45,16 @@ fun Comment(
 
 @Composable
 fun DefaultComment(
+    rootAttrs: Attrs<HTMLElement> = Attrs.empty(),
     headerGridAttrs: Attrs<HTMLDivElement>? = null,
+    headerAttrs: Attrs<HTMLElement>? = null,
+    additionalHeaderContent: ContentBuilder<HTMLElement>? = 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,
 ) {

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

@@ -0,0 +1,21 @@
+package dev.inmo.jsuikit.elements
+
+import androidx.compose.runtime.Composable
+import dev.inmo.jsuikit.modifiers.UIKitContainer
+import dev.inmo.jsuikit.modifiers.include
+import dev.inmo.jsuikit.utils.Attrs
+import org.jetbrains.compose.web.dom.ContentBuilder
+import org.jetbrains.compose.web.dom.Div
+import org.w3c.dom.HTMLDivElement
+
+@Composable
+fun Container(
+    attrs: Attrs<HTMLDivElement> = Attrs.empty(),
+    contentBuilder: ContentBuilder<HTMLDivElement> = {}
+) = Div(
+    {
+        include(UIKitContainer)
+        attrs.builder.invoke(this)
+    },
+    contentBuilder
+)

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

@@ -0,0 +1,57 @@
+package dev.inmo.jsuikit.elements
+
+import androidx.compose.runtime.Composable
+import dev.inmo.jsuikit.modifiers.UIKitDescriptionList
+import dev.inmo.jsuikit.modifiers.include
+import dev.inmo.jsuikit.utils.*
+import org.jetbrains.compose.web.dom.ContentBuilder
+import org.jetbrains.compose.web.dom.ElementScope
+import org.w3c.dom.HTMLDListElement
+import org.w3c.dom.HTMLElement
+
+@Composable
+fun DescriptionList(
+    attrs: Attrs<HTMLDListElement>,
+    contentBuilder: ContentBuilder<HTMLDListElement>
+) {
+    DList(
+        {
+            include(UIKitDescriptionList)
+            attrs.builder(this)
+        },
+        contentBuilder
+    )
+}
+
+@Composable
+fun <T> DescriptionList(
+    data: Iterable<T>,
+    attrs: Attrs<HTMLDListElement>,
+    beforeTermContent: (@Composable ElementScope<HTMLElement>.(Int, T) -> Unit)? = null,
+    itemTermAttrs: ((Int, T) -> Attrs<HTMLElement>?)? = null,
+    itemTermContent: (@Composable ElementScope<HTMLElement>.(Int, T) -> Unit)? = null,
+    betweenTermAndDescriptionContent: (@Composable ElementScope<HTMLElement>.(Int, T) -> Unit)? = null,
+    afterDescriptionContent: (@Composable ElementScope<HTMLElement>.(Int, T) -> Unit)? = null,
+    itemDescriptionAttrs: ((Int, T) -> Attrs<HTMLElement>?)? = null,
+    itemDescriptionContent: (@Composable ElementScope<HTMLElement>.(Int, T) -> Unit)? = null
+) {
+    DescriptionList(attrs) {
+        data.forEachIndexed { i, t ->
+            beforeTermContent ?.invoke(this, i, t)
+            if (itemTermAttrs != null || itemTermContent != null) {
+                DTerm(
+                    itemTermAttrs ?.let { { it(i, t) } },
+                    itemTermContent ?.let { { it(i, t) } },
+                )
+            }
+            betweenTermAndDescriptionContent ?.invoke(this, i, t)
+            if (itemDescriptionAttrs != null || itemDescriptionContent != null) {
+                DDescription(
+                    itemDescriptionAttrs ?.let { { it(i, t) } },
+                    itemDescriptionContent ?.let { { it(i, t) } },
+                )
+            }
+            afterDescriptionContent ?.invoke(this, i, t)
+        }
+    }
+}

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

@@ -2,11 +2,10 @@ package dev.inmo.jsuikit.elements
 
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffectResult
-import dev.inmo.jsuikit.modifiers.UIKitModifier
-import dev.inmo.jsuikit.modifiers.include
+import dev.inmo.jsuikit.modifiers.*
 import org.jetbrains.compose.web.dom.*
-import org.jetbrains.compose.web.dom.Text
-import org.w3c.dom.*
+import org.w3c.dom.HTMLDivElement
+import org.w3c.dom.HTMLElement
 import org.w3c.dom.events.Event
 import kotlin.random.Random
 import kotlin.random.nextUInt
@@ -18,25 +17,32 @@ private class DialogDisposableEffectResult(
 ) : DisposableEffectResult {
     override fun dispose() {
         onDispose?.invoke()
-        js("UIkit").modal("#${element.id}") ?.hide()
+        UIKit.modal("#${element.id}") ?.hide()
         onDisposed?.invoke()
     }
 }
 
 @Composable
 fun Dialog(
-    title: String? = null,
     vararg modifiers: UIKitModifier,
-    hide: (() -> Unit)? = null,
-    hidden: (() -> Unit)? = null,
-    footerBuilder: (@Composable () -> Unit)? = null,
     attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {},
-    bodyBuilder: @Composable () -> Unit
+    onHide: (() -> Unit)? = null,
+    onHidden: (() -> Unit)? = null,
+    dialogAttrsBuilder: AttrBuilderContext<HTMLDivElement>? = null,
+    headerAttrsBuilder: AttrBuilderContext<HTMLDivElement>? = null,
+    headerBuilder: ContentBuilder<HTMLDivElement>? = null,
+    afterHeaderBuilder: ContentBuilder<HTMLDivElement>? = null,
+    beforeFooterBuilder: ContentBuilder<HTMLDivElement>? = null,
+    footerAttrsBuilder: AttrBuilderContext<HTMLDivElement>? = null,
+    footerBuilder: ContentBuilder<HTMLDivElement>? = null,
+    bodyAttrsBuilder: AttrBuilderContext<HTMLDivElement>? = null,
+    bodyBuilder: ContentBuilder<HTMLDivElement>
 ) {
     Div(
         {
-            attr("uk-modal", "")
-            classes("uk-flex-top", "uk-modal")
+            if (modifiers.none { it is UIKitModal.WithCustomAttributes }) {
+                include(UIKitModal)
+            }
             id("dialog${Random.nextUInt()}")
             include(*modifiers)
             attributesCustomizer()
@@ -44,40 +50,44 @@ fun Dialog(
     ) {
         Div(
             {
-                classes("uk-modal-dialog", "uk-margin-auto-vertical")
+                include(UIKitModal.Dialog)
+                dialogAttrsBuilder ?.let { it() } ?: include(UIKitMargin.Auto.Vertical)
             }
         ) {
-            title ?.let {
+            headerBuilder ?.let {
                 Div(
                     {
-                        classes("uk-modal-header")
+                        include(UIKitModal.Header)
+                        headerAttrsBuilder ?.let { it() }
                     }
                 ) {
-                    H2({ classes("uk-modal-title") }) {
-                        Text(title)
-                    }
+                    it()
                 }
             }
+            afterHeaderBuilder ?.let { it() }
             Div(
                 {
-                    classes("uk-modal-body")
+                    include(UIKitModal.Body)
+                    bodyAttrsBuilder ?.let { it() }
                 }
             ) {
                 bodyBuilder()
             }
+            beforeFooterBuilder ?.let { it() }
             footerBuilder ?.let {
                 Div(
                     {
-                        classes("uk-modal-footer", "uk-text-right")
+                        include(UIKitModal.Footer)
+                        footerAttrsBuilder ?.let { it() } ?: include(UIKitText.Alignment.Horizontal.Right)
                     }
                 ) {
-                    footerBuilder()
+                    it()
                 }
             }
         }
 
         DisposableRefEffect {
-            DialogDisposableEffectResult(it, hide, hidden)
+            DialogDisposableEffectResult(it, onHide, onHidden)
         }
 
         DomSideEffect { htmlElement ->
@@ -85,13 +95,42 @@ fun Dialog(
             wrapper = { it: Event ->
                 htmlElement.removeEventListener("hidden", wrapper)
                 htmlElement.remove()
-                hidden ?.invoke()
+                onHidden ?.invoke()
             }
             htmlElement.addEventListener("hidden", wrapper)
 
-            val dialog = js("UIkit").modal("#${htmlElement.id}")
-            dialog.show()
-            Unit
+            UIKit.modal("#${htmlElement.id}") ?.show()
         }
     }
 }
+
+@Composable
+fun Dialog(
+    title: String,
+    vararg modifiers: UIKitModifier,
+    hide: (() -> Unit)? = null,
+    hidden: (() -> Unit)? = null,
+    footerBuilder: (@Composable () -> Unit)? = null,
+    attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {},
+    bodyBuilder: @Composable () -> Unit
+) = Dialog(
+    modifiers = modifiers,
+    headerBuilder = {
+        H2({ include(UIKitModal.Title) }) {
+            Text(title)
+        }
+    },
+    onHide = hide,
+    onHidden = hidden,
+    footerBuilder = footerBuilder ?.let { _ ->
+        {
+            footerBuilder()
+        }
+    },
+    attributesCustomizer = {
+        attributesCustomizer()
+    },
+    bodyBuilder = {
+        bodyBuilder()
+    }
+)

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

@@ -0,0 +1,25 @@
+package dev.inmo.jsuikit.elements
+
+import androidx.compose.runtime.Composable
+import dev.inmo.jsuikit.modifiers.*
+import dev.inmo.jsuikit.utils.Attrs
+import dev.inmo.jsuikit.utils.InputAttrs
+import org.jetbrains.compose.web.dom.*
+import org.w3c.dom.HTMLDivElement
+
+@Composable
+fun DropArea(
+    attrs: Attrs<HTMLDivElement> = Attrs.empty(),
+    inputAttrs: InputAttrs<String> = Attrs.empty(),
+    contentBuilder: ContentBuilder<HTMLDivElement> = {}
+) = Div(
+    {
+        include(UIKitPlaceholder, UIKitForm.Custom())
+        attrs.builder(this)
+    }
+) {
+    FileInput {
+        inputAttrs.builder.invoke(this)
+    }
+    contentBuilder(this)
+}

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

@@ -4,7 +4,6 @@ import androidx.compose.runtime.Composable
 import dev.inmo.jsuikit.buildAndAddAttribute
 import dev.inmo.jsuikit.modifiers.*
 import dev.inmo.jsuikit.utils.Milliseconds
-import dev.inmo.jsuikit.utils.buildAttribute
 import org.jetbrains.compose.web.dom.*
 import org.w3c.dom.HTMLDivElement
 

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

@@ -10,7 +10,7 @@ import org.w3c.dom.HTMLDivElement
 fun GridColumn(
     vararg modifiers: UIKitModifier,
     attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {},
-    builder: @Composable ElementScope<HTMLDivElement>.() -> Unit
+    builder: @Composable ElementScope<HTMLDivElement>.() -> Unit = {}
 ) {
     Div(
         {
@@ -30,7 +30,7 @@ fun Grid(
     marginClass: String? = null,
     firstColumnClass: String? = null,
     attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {},
-    builder: @Composable ElementScope<HTMLDivElement>.() -> Unit
+    builder: @Composable ElementScope<HTMLDivElement>.() -> Unit = {}
 ) {
     val attrs = listOfNotNull(
         if (masonry) "masonry" to "true" else null,

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

@@ -77,15 +77,15 @@ sealed class Icon(val name: String) {
         object Grid : App("grid")
         sealed class More(iconName: String) : App("more${iconName.takeIf { it.isNotEmpty() } ?.let { "-$it" } ?: "" }") {
             object Vertical : More("vertical")
-            companion object : More("more")
+            companion object : More("")
         }
         sealed class Plus(iconName: String) : App("plus${iconName.takeIf { it.isNotEmpty() } ?.let { "-$it" } ?: "" }") {
             object Circle : Plus("circle")
-            companion object : Plus("plus")
+            companion object : Plus("")
         }
         sealed class Minus(iconName: String) : App("minus${iconName.takeIf { it.isNotEmpty() } ?.let { "-$it" } ?: "" }") {
             object Circle : Minus("circle")
-            companion object : Minus("minus")
+            companion object : Minus("")
         }
         object Close : App("close")
         object Check : App("check")
@@ -93,7 +93,7 @@ sealed class Icon(val name: String) {
         object Refresh : App("refresh")
         sealed class Play(iconName: String) : App("play${iconName.takeIf { it.isNotEmpty() } ?.let { "-$it" } ?: "" }") {
             object Circle : Play("circle")
-            companion object : Play("play")
+            companion object : Play("")
         }
     }
     sealed class Devices(iconName: String) : Icon(iconName) {
@@ -102,11 +102,11 @@ sealed class Icon(val name: String) {
         object Laptop : Devices("laptop")
         sealed class Tablet(iconName: String) : Devices("tablet${iconName.takeIf { it.isNotEmpty() } ?.let { "-$it" } ?: "" }") {
             object Landscape : Tablet("landscape")
-            companion object : Tablet("tablet")
+            companion object : Tablet("")
         }
         sealed class Phone(iconName: String) : Devices("phone${iconName.takeIf { it.isNotEmpty() } ?.let { "-$it" } ?: "" }") {
             object Landscape : Phone("landscape")
-            companion object : Phone("phone")
+            companion object : Phone("")
         }
     }
     sealed class Storage(iconName: String) : Icon(iconName) {
@@ -114,7 +114,7 @@ sealed class Icon(val name: String) {
             object Text : File("text")
             object Pdf : File("pdf")
             object Edit : File("edit")
-            companion object : File("file")
+            companion object : File("")
         }
         object Copy : Storage("copy")
         object Folder : Storage("folder")
@@ -177,7 +177,7 @@ sealed class Icon(val name: String) {
         object Foursquare : Brands("foursquare")
         sealed class Github(iconName: String) : Brands("github${iconName.takeIf { it.isNotEmpty() } ?.let { "-$it" } ?: "" }") {
             object Alt : Github("alt")
-            companion object : Github("github")
+            companion object : Github("")
         }
         object Gitter : Brands("gitter")
         object Google : Brands("google")
@@ -250,4 +250,12 @@ sealed class Icon(val name: String) {
         attributesCustomizer: AttrBuilderContext<out HTMLElement> = {},
         onClick: ((Event) -> Unit)? = null
     ) = invoke(*modifiers, type = UIKitIconType.Link, ratio = ratio, onClick = onClick, attributesCustomizer = attributesCustomizer)
+
+    @Composable
+    fun drawAsFormInputPart(
+        vararg modifiers: UIKitModifier,
+        ratio: Float? = null,
+        attributesCustomizer: AttrBuilderContext<out HTMLElement> = {},
+        onClick: ((Event) -> Unit)? = null
+    ) = invoke(*modifiers, UIKitForm.Icon, ratio = ratio, onClick = onClick, attributesCustomizer = attributesCustomizer)
 }

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

@@ -1,9 +1,11 @@
 package dev.inmo.jsuikit.elements
 
 import androidx.compose.runtime.Composable
-import dev.inmo.jsuikit.modifiers.*
+import dev.inmo.jsuikit.modifiers.UIKitLabel
+import dev.inmo.jsuikit.modifiers.include
 import dev.inmo.jsuikit.utils.Attrs
-import org.jetbrains.compose.web.dom.*
+import org.jetbrains.compose.web.dom.Span
+import org.jetbrains.compose.web.dom.Text
 import org.w3c.dom.HTMLSpanElement
 
 @Composable

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

@@ -95,7 +95,7 @@ fun SubNav(
 @Composable
 fun <T> Nav(
     title: String,
-    data: SnapshotStateList<T>,
+    data: Iterable<T>,
     vararg ulModifiers: UIKitModifier,
     titleModifiers: Array<UIKitModifier> = emptyArray(),
     multiple: Boolean? = null,
@@ -134,7 +134,7 @@ fun <T> Nav(
 @Composable
 fun <T> DefaultNav(
     title: String,
-    data: SnapshotStateList<T>,
+    data: Iterable<T>,
     vararg ulModifiers: UIKitModifier,
     titleModifiers: Array<UIKitModifier> = emptyArray(),
     multiple: Boolean? = null,
@@ -163,7 +163,7 @@ fun <T> DefaultNav(
 @Composable
 fun <T> PrimaryNav(
     title: String,
-    data: SnapshotStateList<T>,
+    data: Iterable<T>,
     vararg ulModifiers: UIKitModifier,
     titleModifiers: Array<UIKitModifier> = emptyArray(),
     multiple: Boolean? = null,
@@ -192,7 +192,7 @@ fun <T> PrimaryNav(
 @Composable
 fun <T> SubNav(
     title: String,
-    data: SnapshotStateList<T>,
+    data: Iterable<T>,
     vararg ulModifiers: UIKitModifier,
     titleModifiers: Array<UIKitModifier> = emptyArray(),
     multiple: Boolean? = null,

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

@@ -3,21 +3,21 @@ 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.attributes.AttrsBuilder
+import org.jetbrains.compose.web.attributes.AttrsScope
 import org.jetbrains.compose.web.dom.*
 import org.w3c.dom.HTMLLIElement
 import org.w3c.dom.HTMLUListElement
 
 interface NavbarNavElement {
-    fun AttrsBuilder<HTMLLIElement>.setup() {}
+    fun AttrsScope<HTMLLIElement>.setup() {}
     @Composable
     fun ElementScope<HTMLLIElement>.fill()
 
     class Default(
-        private val setupCallback: AttrsBuilder<HTMLLIElement>.() -> Unit,
+        private val setupCallback: AttrsScope<HTMLLIElement>.() -> Unit,
         private val fillCallback: @Composable ElementScope<HTMLLIElement>.() -> Unit
     ) : NavbarNavElement {
-        override fun AttrsBuilder<HTMLLIElement>.setup() {
+        override fun AttrsScope<HTMLLIElement>.setup() {
             setupCallback()
         }
 

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

@@ -0,0 +1,13 @@
+package dev.inmo.jsuikit.elements
+
+import dev.inmo.jsuikit.modifiers.UIKit
+import dev.inmo.jsuikit.types.*
+import dev.inmo.jsuikit.utils.Milliseconds
+
+fun Notification(
+    message: String,
+    status: UIKitNotificationParameter.Style? = null,
+    timeout: Milliseconds? = null,
+    group: NotificationsGroup? = null,
+    position: UIKitNotificationParameter.Position? = null
+) = UIKit.notification.invoke(message, status, timeout, group, position)

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

@@ -1,9 +1,9 @@
 package dev.inmo.jsuikit.elements
 
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.snapshots.SnapshotStateList
-import dev.inmo.jsuikit.modifiers.*
-import org.jetbrains.compose.web.attributes.AttrsBuilder
+import dev.inmo.jsuikit.modifiers.UIKitModifier
+import dev.inmo.jsuikit.modifiers.include
+import org.jetbrains.compose.web.attributes.AttrsScope
 import org.jetbrains.compose.web.dom.*
 import org.jetbrains.compose.web.dom.Text
 import org.w3c.dom.*
@@ -11,13 +11,13 @@ import org.w3c.dom.*
 @Composable
 fun <T> DefaultTable(
     headerBuilders: List<ContentBuilder<HTMLTableCellElement>>,
-    dataList: SnapshotStateList<T>,
+    dataList: Iterable<T>,
     vararg tableModifiers: UIKitModifier,
     attributesCustomizer: AttrBuilderContext<HTMLTableElement> = {},
     headerCustomizer: AttrBuilderContext<HTMLTableSectionElement> = {},
-    headerCellCustomizer: AttrsBuilder<HTMLTableCellElement>.(i: Int) -> Unit = {},
-    rowAttributes: AttrsBuilder<HTMLTableRowElement>.(t: T) -> Unit = {},
-    cellCustomizer: AttrsBuilder<HTMLTableCellElement>.(i: Int, t: T) -> Unit = { _, _ -> },
+    headerCellCustomizer: AttrsScope<HTMLTableCellElement>.(i: Int) -> Unit = {},
+    rowAttributes: AttrsScope<HTMLTableRowElement>.(t: T) -> Unit = {},
+    cellCustomizer: AttrsScope<HTMLTableCellElement>.(i: Int, t: T) -> Unit = { _, _ -> },
     betweenHeaderAndBodyFiller: ContentBuilder<HTMLTableElement> = {},
     cellFiller: @Composable ElementScope<HTMLTableCellElement>.(i: Int, t: T) -> Unit
 ) {
@@ -68,18 +68,18 @@ fun <T> DefaultTable(
 @Composable
 fun <T> DefaultTable(
     heading: List<String>,
-    dataList: SnapshotStateList<T>,
+    dataList: Iterable<T>,
     vararg tableModifiers: UIKitModifier,
     attributesCustomizer: AttrBuilderContext<HTMLTableElement> = {},
     headerCustomizer: AttrBuilderContext<HTMLTableSectionElement> = {},
-    headerCellCustomizer: AttrsBuilder<HTMLTableCellElement>.(i: Int, title: String) -> Unit = { _, _ -> },
-    rowAttributes: AttrsBuilder<HTMLTableRowElement>.(t: T) -> Unit = {},
-    cellCustomizer: AttrsBuilder<HTMLTableCellElement>.(i: Int, t: T) -> Unit = { _, _ -> },
+    headerCellCustomizer: AttrsScope<HTMLTableCellElement>.(i: Int, title: String) -> Unit = { _, _ -> },
+    rowAttributes: AttrsScope<HTMLTableRowElement>.(t: T) -> Unit = {},
+    cellCustomizer: AttrsScope<HTMLTableCellElement>.(i: Int, t: T) -> Unit = { _, _ -> },
     betweenHeaderAndBodyFiller: ContentBuilder<HTMLTableElement> = {},
     cellFiller: @Composable ElementScope<HTMLTableCellElement>.(i: Int, t: T) -> Unit
 ) {
     val headersByIndex = heading.mapIndexed { index, s -> index to s }.toMap()
-    val headerCellCustomizer: AttrsBuilder<HTMLTableCellElement>.(i: Int) -> Unit = { i ->
+    val headerCellCustomizer: AttrsScope<HTMLTableCellElement>.(i: Int) -> Unit = { i ->
         val header = headersByIndex[i]
         if (header != null) {
             headerCellCustomizer(i, header)

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

@@ -0,0 +1,21 @@
+package dev.inmo.jsuikit.elements
+
+import androidx.compose.runtime.Composable
+import dev.inmo.jsuikit.modifiers.UIKitTile
+import dev.inmo.jsuikit.modifiers.include
+import dev.inmo.jsuikit.utils.Attrs
+import org.jetbrains.compose.web.dom.ContentBuilder
+import org.jetbrains.compose.web.dom.Div
+import org.w3c.dom.HTMLDivElement
+
+@Composable
+fun Tile(
+    attrs: Attrs<HTMLDivElement> = Attrs.empty(),
+    contentBuilder: ContentBuilder<HTMLDivElement>
+) = Div(
+    {
+        include(UIKitTile)
+        attrs.builder(this)
+    },
+    contentBuilder
+)

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

@@ -1,3 +1,5 @@
 package dev.inmo.jsuikit.modifiers
 
-sealed class AttributeValue(val name: String)
+sealed class AttributeValue(val name: String) {
+    override fun toString(): String = name
+}

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

@@ -1,4 +1,6 @@
 package dev.inmo.jsuikit.modifiers
 
-inline val UIKit
-    get() = js("UIkit")
+import dev.inmo.jsuikit.types.UIKit
+
+inline val UIKit: UIKit
+    get() = js("UIkit").unsafeCast<UIKit>()

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

@@ -0,0 +1,52 @@
+package dev.inmo.jsuikit.modifiers
+
+import dev.inmo.jsuikit.utils.Milliseconds
+import dev.inmo.jsuikit.utils.buildAttribute
+import org.w3c.dom.PageTransitionEvent
+
+sealed class UIKitAccordion(
+    vararg classnames: String,
+    override val otherAttrs: Map<String, String> = emptyMap()
+) : UIKitModifier {
+    @Suppress("UNCHECKED_CAST")
+    override val classes: Array<String> = classnames as Array<String>
+
+    object Title : UIKitAccordion("uk-accordion-title")
+    object Content : UIKitAccordion("uk-accordion-content")
+
+    class Custom internal constructor(
+        otherAttrs: Map<String, String> = emptyMap()
+    ) : UIKitAccordion (otherAttrs = otherAttrs)
+
+    companion object : UIKitAccordion("uk-accordion", otherAttrs = mapOf("uk-accordion" to "")) {
+        val Open = UIKitUtility.Open
+
+        operator fun invoke(
+            activeItemIndex: Int? = null,
+            animation: Boolean? = null,
+            collapsible: Boolean? = null,
+            contentSelector: String? = null,
+            animationDuration: Milliseconds? = null,
+            multiple: Boolean? = null,
+            targetsSelector: String? = null,
+            toggleSelector: String? = null,
+            transition: PageTransitionEvent? = null,
+            offsetTopPixels: Int? = null,
+        ) = Custom(
+            mapOf(
+                buildAttribute("uk-accordion") {
+                    "active" to activeItemIndex
+                    "animation" to animation
+                    "collapsible" to collapsible
+                    "content" to contentSelector
+                    "duration" to animationDuration
+                    "multiple" to multiple
+                    "targets" to targetsSelector
+                    "toggle" to toggleSelector
+                    "transition" to transition
+                    "offset" to offsetTopPixels
+                }
+            )
+        )
+    }
+}

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

@@ -62,4 +62,7 @@ sealed class UIKitAnimation (name: String) : UIKitModifier, AttributeValue(name)
 
     object KenBurns : UIKitAnimation("kenburns")
 
+    override fun toString(): String {
+        return classes.joinToString(" ")
+    }
 }

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

@@ -0,0 +1,8 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitBreadcrumb(
+    override val classes: Array<String> = emptyArray(),
+    override val otherAttrs: Map<String, String> = emptyMap()
+) : UIKitModifier {
+    companion object : UIKitBreadcrumb(arrayOf("uk-breadcrumb"))
+}

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

@@ -0,0 +1,17 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitClose(
+    override val classes: Array<String> = emptyArray(),
+    override val otherAttrs: Map<String, String> = emptyMap()
+) : UIKitModifier {
+
+    object Large : UIKitClose(
+        arrayOf("uk-close-large")
+    )
+
+    companion object : UIKitClose(
+        arrayOf("uk-close"),
+        mapOf("uk-close" to "")
+    )
+
+}

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

@@ -0,0 +1,19 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitContainer(
+    override val classes: Array<String> = emptyArray(),
+    override val otherAttrs: Map<String, String> = emptyMap()
+) : UIKitModifier {
+
+    sealed class Size(size: String) : UIKitContainer(arrayOf("uk-container-$size")) {
+        object XSmall : Size("xsmall")
+        object Small : Size("small")
+        object Large : Size("large")
+        object XLarge : Size("xlarge")
+        object Expand : Size("expand")
+    }
+
+    companion object : UIKitContainer(
+        arrayOf("uk-container")
+    )
+}

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

@@ -0,0 +1,6 @@
+package dev.inmo.jsuikit.modifiers
+
+class UIKitCustom(
+    override val classes: Array<String> = emptyArray(),
+    override val otherAttrs: Map<String, String> = emptyMap()
+) : UIKitModifier

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

@@ -0,0 +1,11 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitDescriptionList(
+    override val classes: Array<String>
+) : UIKitModifier {
+
+    object Divider : UIKitDescriptionList(arrayOf("uk-description-list-divider"))
+
+    companion object : UIKitDescriptionList(arrayOf("uk-description-list"))
+
+}

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

@@ -50,6 +50,9 @@ sealed class UIKitDropdown(classname: String) : UIKitModifier {
         object Click : Mode("click")
         object Hover : Mode("hover")
 
+        object None : Mode("")
+        object HoverAndClick : Mode("$Hover, $Click")
+
     }
 
     sealed class Flip(name: String) : AttributeValue(name) {

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

@@ -0,0 +1,59 @@
+package dev.inmo.jsuikit.modifiers
+
+import dev.inmo.jsuikit.utils.buildAttribute
+
+sealed class UIKitForm(
+    vararg classnames: String,
+    override val otherAttrs: Map<String, String> = emptyMap()
+) : UIKitModifier {
+    @Suppress("UNCHECKED_CAST")
+    override val classes: Array<String> = classnames as Array<String>
+
+    object Fieldset : UIKitForm("uk-fieldset")
+    object Legend : UIKitForm("uk-legend")
+
+    object Input : UIKitForm("uk-input")
+    object Select : UIKitForm("uk-select")
+    object TextArea : UIKitForm("uk-textarea")
+    object Radio : UIKitForm("uk-radio", otherAttrs = mapOf("type" to "radio"))
+    object Checkbox : UIKitForm("uk-checkbox", otherAttrs = mapOf("type" to "checkbox"))
+    object Range : UIKitForm("uk-range", otherAttrs = mapOf("type" to "range"))
+
+    sealed class State(vararg classnames: String) : UIKitForm(*classnames) {
+        object Danger : State("uk-form-danger")
+        object Success : State("uk-form-success")
+    }
+    sealed class Size(vararg classnames: String) : UIKitForm(*classnames) {
+        object Large : Size("uk-form-large")
+        object Default : Size() // :)
+        object Small : Size("uk-form-small")
+    }
+    sealed class Width(vararg classnames: String) : UIKitForm(*classnames) {
+        object Large : Width("uk-form-width-large")
+        object Medium : Width("uk-form-width-medium")
+        object Small : Width("uk-form-width-small")
+        object XSmall : Width("uk-form-width-xsmall")
+    }
+
+    object Blank : UIKitForm("uk-form-blank")
+
+    sealed class Layout(vararg classnames: String) : UIKitForm(*classnames) {
+        object Stacked : Layout("uk-form-stacked")
+        object Horizontal : Layout("uk-form-horizontal")
+        object Label : Layout("uk-form-label")
+        object Controls : Layout("uk-form-controls")
+    }
+
+    object Icon : UIKitForm("uk-form-icon")
+
+    class Custom(
+        target: String? = null
+    ) : UIKitForm(
+        "uk-form-custom",
+        otherAttrs = mapOf(
+            buildAttribute("uk-form-custom") {
+                "target" to target
+            }
+        )
+    )
+}

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

@@ -1,7 +1,6 @@
 package dev.inmo.jsuikit.modifiers
 
 import dev.inmo.jsuikit.utils.*
-import org.jetbrains.compose.web.css.CSSKeyframe
 
 sealed class UIKitHeight(
     classname: String?,

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

@@ -0,0 +1,8 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitInverse(classname: String) : UIKitModifier {
+    override val classes: Array<String> = arrayOf(classname)
+
+    object Light : UIKitInverse("uk-light")
+    object Dark : UIKitInverse("uk-dark")
+}

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

@@ -1,68 +1,87 @@
 package dev.inmo.jsuikit.modifiers
 
-sealed class UIKitMargin(val classname: String) : UIKitModifier {
-    override val classes: Array<String> = arrayOf(classname)
+sealed class UIKitMargin(vararg classnames: String) : UIKitModifier {
+    @Suppress("UNCHECKED_CAST")
+    override val classes: Array<String> = classnames as Array<String>
 
-    object Top : Small("uk-margin-top")
-    object Bottom : Small("uk-margin-bottom")
-    object Left : Small("uk-margin-left")
-    object Right : Small("uk-margin-right")
+    object Top : UIKitMargin("uk-margin-top")
+    object Bottom : UIKitMargin("uk-margin-bottom")
+    object Left : UIKitMargin("uk-margin-left")
+    object Right : UIKitMargin("uk-margin-right")
+    object Vertical : UIKitMargin() { override val classes: Array<String> = Top.classes + Bottom.classes }
+    object Horizontal : UIKitMargin() { override val classes: Array<String> = Left.classes + Right.classes }
     companion object : Small("uk-margin")
 
-    sealed class Small(classname: String) : UIKitMargin(classname) {
+    sealed class Small(vararg classnames: String) : UIKitMargin(*classnames) {
 
         object Top : Small("uk-margin-small-top")
         object Bottom : Small("uk-margin-small-bottom")
         object Left : Small("uk-margin-small-left")
         object Right : Small("uk-margin-small-right")
+
+        object Vertical : Small() {
+            override val classes: Array<String> = Top.classes + Bottom.classes
+        }
+        object Horizontal : Small() {
+            override val classes: Array<String> = Left.classes + Right.classes
+        }
+
         companion object : Small("uk-margin-small")
 
     }
-    sealed class Medium(classname: String) : UIKitMargin(classname) {
+    sealed class Medium(vararg classnames: String) : UIKitMargin(*classnames) {
 
         object Top : Medium("uk-margin-medium-top")
         object Bottom : Medium("uk-margin-medium-bottom")
         object Left : Medium("uk-margin-medium-left")
         object Right : Medium("uk-margin-medium-right")
+        object Vertical : Medium() { override val classes: Array<String> = Top.classes + Bottom.classes }
+        object Horizontal : Medium() { override val classes: Array<String> = Left.classes + Right.classes }
         companion object : Medium("uk-margin-medium")
 
     }
-    sealed class Large(classname: String) : UIKitMargin(classname) {
+    sealed class Large(vararg classnames: String) : UIKitMargin(*classnames) {
 
         object Top : Large("uk-margin-large-top")
         object Bottom : Large("uk-margin-large-bottom")
         object Left : Large("uk-margin-large-left")
         object Right : Large("uk-margin-large-right")
+        object Vertical : Large() { override val classes: Array<String> = Top.classes + Bottom.classes }
+        object Horizontal : Large() { override val classes: Array<String> = Left.classes + Right.classes }
         companion object : Large("uk-margin-large")
 
     }
-    sealed class XLarge(classname: String) : UIKitMargin(classname) {
+    sealed class XLarge(vararg classnames: String) : UIKitMargin(*classnames) {
 
         object Top : XLarge("uk-margin-xlarge-top")
         object Bottom : XLarge("uk-margin-xlarge-bottom")
         object Left : XLarge("uk-margin-xlarge-left")
         object Right : XLarge("uk-margin-xlarge-right")
+        object Vertical : XLarge() { override val classes: Array<String> = Top.classes + Bottom.classes }
+        object Horizontal : XLarge() { override val classes: Array<String> = Left.classes + Right.classes }
         companion object : XLarge("uk-margin-xlarge")
 
     }
-    sealed class Auto(classname: String) : UIKitMargin(classname) {
+    sealed class Auto(vararg classnames: String) : UIKitMargin(*classnames) {
 
         object Top : Auto("uk-margin-auto-top")
         object Bottom : Auto("uk-margin-auto-bottom")
         object Left : Auto("uk-margin-auto-left")
         object Right : Auto("uk-margin-auto-right")
         object Vertical : Auto("uk-margin-auto-vertical")
+        object Horizontal : Auto() { override val classes: Array<String> = Left.classes + Right.classes }
         companion object : Auto("uk-margin-auto")
 
     }
 
-    sealed class Remove(classname: String) : UIKitMargin(classname) {
+    sealed class Remove(vararg classnames: String) : UIKitMargin(*classnames) {
 
         object Top : Remove("uk-margin-remove-top")
         object Bottom : Remove("uk-margin-remove-bottom")
         object Left : Remove("uk-margin-remove-left")
         object Right : Remove("uk-margin-remove-right")
         object Vertical : Remove("uk-margin-remove-vertical")
+        object Horizontal : Remove() { override val classes: Array<String> = Left.classes + Right.classes }
         object Adjacent : Remove("uk-margin-remove-adjacent")
         object FirstChild : Remove("uk-margin-remove-first-child")
         object LastChild : Remove("uk-margin-remove-last-child")

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

@@ -0,0 +1,58 @@
+package dev.inmo.jsuikit.modifiers
+
+import dev.inmo.jsuikit.utils.buildAttribute
+
+sealed class UIKitModal(
+    classname: String,
+    override val otherAttrs: Map<String, String> = emptyMap()
+) : UIKitModifier {
+    override val classes: Array<String> = arrayOf(classname)
+
+    object Dialog : UIKitModal("uk-modal-dialog")
+    object Title : UIKitModal("uk-modal-title")
+
+    object Header : UIKitModal("uk-modal-header")
+    object Body : UIKitModal("uk-modal-body")
+    object Footer : UIKitModal("uk-modal-footer")
+
+    object Container : UIKitModal("uk-modal-container")
+    object Full : UIKitModal("uk-modal-full")
+
+    object Page : UIKitModal("uk-modal-page")
+
+    sealed class Close(classname: String) : UIKitModal(classname) {
+        object Default : Close("uk-modal-close-default")
+        object Outside : Close("uk-modal-close-outside")
+        object Full : Close("uk-modal-close-full")
+
+        companion object : Close("uk-modal-close")
+    }
+
+    internal class WithCustomAttributes(
+        otherAttrs: Map<String, String> = emptyMap()
+    ) : UIKitModal("uk-modal", otherAttrs)
+
+    companion object : UIKitModal("uk-modal", mapOf("uk-modal" to "")) {
+        operator fun invoke(
+            escClose: Boolean? = null,
+            backgroundClose: Boolean? = null,
+            stack: Boolean? = null,
+            container: Boolean? = null,
+            classPage: String? = null,
+            classPanel: String? = null,
+            closingSelection: String? = null,
+        ): UIKitModal = WithCustomAttributes(
+            mapOf(
+                buildAttribute("uk-modal") {
+                    "esc-close" to escClose
+                    "bg-close" to backgroundClose
+                    "stack" to stack
+                    "container" to container
+                    "cls-page" to classPage
+                    "cls-panel" to classPanel
+                    "sel-close" to closingSelection
+                }
+            )
+        )
+    }
+}

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

@@ -1,6 +1,9 @@
 package dev.inmo.jsuikit.modifiers
 
-import org.jetbrains.compose.web.attributes.AttrsBuilder
+import dev.inmo.jsuikit.utils.Attrs
+import org.jetbrains.compose.web.attributes.AttrsScope
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+import org.w3c.dom.Element
 
 interface UIKitModifier {
     val classes: Array<String>
@@ -9,9 +12,22 @@ interface UIKitModifier {
         get() = emptyMap()
 }
 
-fun AttrsBuilder<*>.include(vararg container: UIKitModifier?) {
+fun AttrsScope<*>.include(vararg container: UIKitModifier?) {
     container.forEach {
         it ?.classes ?.let { newClasses -> classes(*newClasses) }
         it ?.otherAttrs ?.let { attrs -> attrs.forEach { (k, v) -> attr(k, v) } }
     }
 }
+
+fun <T : Element> UIKitModifier.asAttributesBuilder(): AttrBuilderContext<T> = {
+    include(this@asAttributesBuilder)
+}
+operator fun UIKitModifier.plus(other: UIKitModifier): UIKitModifier = UIKitCustom(
+    classes + other.classes,
+    otherAttrs + other.otherAttrs
+)
+fun <T: Element> UIKitModifier.builder() = Attrs<T>(this).builder
+fun <T: Element> Array<out UIKitModifier>.builder() = Attrs<T>(*this).builder
+inline fun <T: Element> attrsBuilder(vararg modifiers: UIKitModifier) = modifiers.builder<T>()
+@JsName("plusBuilder")
+operator fun <T: Element> UIKitModifier.plus(other: UIKitModifier): AttrBuilderContext<T> = Attrs<T>(this@plus, other).builder

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

@@ -0,0 +1,16 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitOverlay(
+    override val classes: Array<String> = emptyArray(),
+    override val otherAttrs: Map<String, String> = emptyMap()
+) : UIKitModifier {
+
+    object Default : UIKitOverlay(arrayOf("uk-overlay-default"))
+    object Primary : UIKitOverlay(arrayOf("uk-overlay-primary"))
+    object Icon : UIKitOverlay(arrayOf("uk-overlay-icon"))
+
+    companion object : UIKitOverlay(
+        arrayOf("uk-overlay")
+    )
+
+}

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

@@ -0,0 +1,5 @@
+package dev.inmo.jsuikit.modifiers
+
+object UIKitPlaceholder : UIKitModifier {
+    override val classes: Array<String> = arrayOf("uk-placeholder")
+}

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

@@ -20,3 +20,12 @@ sealed class UIKitScreenSizeModifier(val name: String) {
 }
 
 fun UIKitModifier.applyWhenScreenSizeIs(size: UIKitScreenSizeModifier) = size.modify(this)
+
+val UIKitModifier.onSmallScreens
+    get() = applyWhenScreenSizeIs(UIKitScreenSizeModifier.Small)
+val UIKitModifier.onMediumScreens
+    get() = applyWhenScreenSizeIs(UIKitScreenSizeModifier.Medium)
+val UIKitModifier.onLargeScreens
+    get() = applyWhenScreenSizeIs(UIKitScreenSizeModifier.Large)
+val UIKitModifier.onXLargeScreens
+    get() = applyWhenScreenSizeIs(UIKitScreenSizeModifier.XLarge)

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

@@ -0,0 +1,15 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitTile(
+    override val classes: Array<String> = emptyArray(),
+    override val otherAttrs: Map<String, String> = emptyMap()
+) : UIKitModifier {
+
+    object Default : UIKitTile(arrayOf("uk-tile-default"))
+    object Muted : UIKitTile(arrayOf("uk-tile-muted"))
+    object Primary : UIKitTile(arrayOf("uk-tile-primary"))
+    object Secondary : UIKitTile(arrayOf("uk-tile-secondary"))
+
+    companion object : UIKitTile(arrayOf("uk-tile"))
+
+}

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

@@ -0,0 +1,64 @@
+package dev.inmo.jsuikit.modifiers
+
+import dev.inmo.jsuikit.utils.Milliseconds
+import dev.inmo.jsuikit.utils.buildAttribute
+
+sealed class UIKitToggle(
+    vararg classnames: String,
+    override val otherAttrs: Map<String, String>
+) : UIKitModifier {
+    @Suppress("UNCHECKED_CAST")
+    override val classes: Array<String> = classnames as Array<String>
+
+    sealed class Mode {
+        abstract val mode: String
+
+        object Click : Mode() {
+            override val mode: String
+                get() = "click"
+        }
+
+        object Hover : Mode() {
+            override val mode: String
+                get() = "hover"
+        }
+
+        object ClickAndHover : Mode() {
+            override val mode: String
+                get() = "${Click.mode}, ${Hover.mode}"
+        }
+
+        object Media : Mode() {
+            override val mode: String
+                get() = "media"
+        }
+
+        override fun toString(): String = mode
+    }
+
+    class Custom internal constructor(otherAttrs: Map<String, String>) : UIKitToggle(otherAttrs = otherAttrs)
+
+    companion object {
+        operator fun invoke(
+            target: String? = null,
+            mode: Mode? = null,
+            classesToApplyOnToggle: String? = null,
+            media: String? = null,
+            animation: UIKitAnimation? = null,
+            duration: Milliseconds? = null,
+            queued: Boolean? = null
+        ) = Custom(
+            mapOf(
+                buildAttribute("uk-toggle") {
+                    "target" to target
+                    "mode" to mode
+                    "cls" to classesToApplyOnToggle
+                    "media" to media
+                    "animation" to animation
+                    "duration" to duration
+                    "queued" to queued
+                }
+            )
+        )
+    }
+}

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

@@ -109,4 +109,7 @@ sealed class UIKitUtility(classname: String) : UIKitModifier {
     object Disabled : UIKitUtility("uk-disabled")
     object Drag : UIKitUtility("uk-drag")
     object Active : UIKitUtility("uk-active")
+
+    object Open : UIKitUtility("uk-open")
+    object Link : UIKitUtility("uk-link")
 }

src/jsMain/kotlin/dev/inmo/jsuikit/types/UIKit.kt

@@ -0,0 +1,16 @@
+package dev.inmo.jsuikit.types
+
+import org.w3c.dom.Element
+import kotlin.js.Json
+
+external interface UIKit {
+    val notification: UIKitNotifications
+    val modal: UIKitDialogs
+
+
+    fun notification(message: String, parameters: Json)
+    fun notification(element: Element): UIKitNotification?
+
+    fun modal(element: Element): UIKitDialog
+    fun modal(selector: String): UIKitDialog?
+}

src/jsMain/kotlin/dev/inmo/jsuikit/types/UIKitDialog.kt

@@ -0,0 +1,38 @@
+package dev.inmo.jsuikit.types
+
+import org.w3c.dom.Element
+import kotlin.js.Promise
+
+external interface UIKitDialogs {
+    fun alert(text: String): UIKitDialogPromiseAlert
+    fun confirm(text: String): UIKitDialogPromiseConfirm
+    fun prompt(title: String): UIKitDialogPromisePrompt
+    fun prompt(title: String, preset: String): UIKitDialogPromisePrompt
+    fun dialog(element: Element): UIKitDialog
+}
+
+external class UIKitDialogPromiseConfirm : Promise<Unit> {
+    val dialog: UIKitDialog
+
+    fun then(
+        onConfirm: () -> Unit = definedExternally,
+        onRejected: () -> Unit = definedExternally,
+    )
+}
+
+external class UIKitDialogPromisePrompt : Promise<Unit> {
+    val dialog: UIKitDialog
+
+    fun then(onResult: (data: String?) -> Unit)
+}
+
+external class UIKitDialogPromiseAlert : Promise<Unit> {
+    val dialog: UIKitDialog
+
+    fun then(onClose: () -> Unit)
+}
+
+external interface UIKitDialog {
+    fun show()
+    fun hide()
+}

src/jsMain/kotlin/dev/inmo/jsuikit/types/UIKitNotificationParameter.kt

@@ -0,0 +1,39 @@
+package dev.inmo.jsuikit.types
+
+sealed class UIKitNotificationParameter {
+    abstract val parameterName: String
+    abstract val parameterValue: String
+
+    sealed class Style(override val parameterValue: String) : UIKitNotificationParameter() {
+        override val parameterName: String
+            get() = "status"
+
+        object Primary : Style("primary")
+        object Success : Style("success")
+        object Warning : Style("warning")
+        object Danger : Style("danger")
+
+    }
+
+    sealed class Position(override val parameterValue: String) : UIKitNotificationParameter() {
+        override val parameterName: String
+            get() = "pos"
+
+        sealed class Top(parameterValue: String) : Position("top-$parameterValue") {
+
+            object Left : Top("left")
+            object Center : Top("center")
+            object Right : Top("right")
+
+        }
+
+        sealed class Bottom(parameterValue: String) : Position("bottom-$parameterValue") {
+
+            object Left : Bottom("left")
+            object Center : Bottom("center")
+            object Right : Bottom("right")
+
+        }
+
+    }
+}

src/jsMain/kotlin/dev/inmo/jsuikit/types/UIKitNotifications.kt

@@ -0,0 +1,45 @@
+package dev.inmo.jsuikit.types
+
+import dev.inmo.jsuikit.modifiers.UIKit
+import dev.inmo.jsuikit.utils.Milliseconds
+import kotlin.js.json
+
+typealias NotificationsGroup = String
+
+external interface UIKitNotifications {
+
+    fun closeAll(group: NotificationsGroup)
+}
+
+external interface UIKitNotification {
+    fun close(immediate: Boolean)
+}
+
+data class UIKitNotificationsParameters(
+    val status: UIKitNotificationParameter.Style? = null,
+    val timeout: Milliseconds? = null,
+    val group: NotificationsGroup? = null,
+    val position: UIKitNotificationParameter.Position? = null
+) {
+    fun parametersJson() = json(
+        *listOfNotNull(
+            status ?.let { it.parameterName to it.parameterValue },
+            timeout ?.let { "timeout" to timeout.toString() },
+            group ?.let { "group" to it },
+            position ?.let { it.parameterName to it.parameterValue },
+        ).toTypedArray()
+    )
+}
+
+operator fun UIKitNotifications.invoke(
+    message: String,
+    parameters: UIKitNotificationsParameters
+) = UIKit.notification(message, parameters.parametersJson())
+
+operator fun UIKitNotifications.invoke(
+    message: String,
+    status: UIKitNotificationParameter.Style? = null,
+    timeout: Milliseconds? = null,
+    group: NotificationsGroup? = null,
+    position: UIKitNotificationParameter.Position? = null
+) = invoke(message, UIKitNotificationsParameters(status, timeout, group, position))

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

@@ -2,25 +2,34 @@ 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.jetbrains.compose.web.attributes.AttrsScope
+import org.jetbrains.compose.web.attributes.builders.InputAttrsScope
 import org.w3c.dom.Element
+import org.w3c.dom.HTMLInputElement
 
-class AttributesCollection<T : Element> (
-    private vararg val modifiers: UIKitModifier,
-    private val attrs: AttrBuilderContext<T> = {}
+class AttributesCollection<T : Element, Builder : AttrsScope<T>> (
+    private vararg val modifiers: UIKitModifier?,
+    private val attrs: Builder.() -> Unit = {}
 ) {
-    val builder: AttrBuilderContext<T> = {
+    val builder: Builder.() -> Unit = {
         include(*modifiers)
         attrs()
     }
 
+    operator fun plus(other: AttributesCollection<T, Builder>) = AttributesCollection<T, Builder>(
+        *(modifiers + other.modifiers).distinct().toTypedArray()
+    ) {
+        this@AttributesCollection.attrs.invoke(this)
+        other.attrs.invoke(this)
+    }
+
     companion object {
         val Empty = Attrs<Element>()
 
         @Suppress("UNCHECKED_CAST")
-        fun <T : Element> empty() = Empty as Attrs<T>
+        fun <T : Element, Builder : AttrsScope<T>> empty() = Empty as AttributesCollection<T, Builder>
     }
 }
 
-typealias Attrs<T> = AttributesCollection<T>
+typealias Attrs<T> = AttributesCollection<T, AttrsScope<T>>
+typealias InputAttrs<T> = AttributesCollection<HTMLInputElement, InputAttrsScope<T>>

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

@@ -0,0 +1,55 @@
+package dev.inmo.jsuikit.utils
+
+import androidx.compose.runtime.Composable
+import kotlinx.browser.document
+import org.jetbrains.compose.web.dom.*
+import org.w3c.dom.*
+
+private object DListElementBuilder : ElementBuilder<HTMLDListElement> {
+    private val el: Element by lazy { document.createElement("dl") }
+    override fun create(): HTMLDListElement = el.cloneNode() as HTMLDListElement
+}
+
+private object DTermElementBuilder : ElementBuilder<HTMLElement> {
+    private val el: Element by lazy { document.createElement("dt") }
+    override fun create(): HTMLElement = el.cloneNode() as HTMLElement
+}
+
+private object DDescriptionElementBuilder : ElementBuilder<HTMLElement> {
+    private val el: Element by lazy { document.createElement("dd") }
+    override fun create(): HTMLElement = el.cloneNode() as HTMLElement
+}
+
+@Composable
+fun DList(
+    attrs: AttrBuilderContext<HTMLDListElement>? = null,
+    content: ContentBuilder<HTMLDListElement>? = null
+) {
+    TagElement(
+        DListElementBuilder,
+        attrs,
+        content
+    )
+}
+@Composable
+fun DTerm(
+    attrs: AttrBuilderContext<HTMLElement>? = null,
+    content: ContentBuilder<HTMLElement>? = null
+) {
+    TagElement(
+        DTermElementBuilder,
+        attrs,
+        content
+    )
+}
+@Composable
+fun DDescription(
+    attrs: AttrBuilderContext<HTMLElement>? = null,
+    content: ContentBuilder<HTMLElement>? = null
+) {
+    TagElement(
+        DDescriptionElementBuilder,
+        attrs,
+        content
+    )
+}