now project is multiplatform and correctly working

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

@@ -0,0 +1,84 @@
+package dev.inmo.jsuikit.elements
+
+import androidx.compose.runtime.Composable
+import androidx.compose.web.events.SyntheticMouseEvent
+import dev.inmo.jsuikit.modifiers.*
+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,
+    disabled: Boolean = false,
+    buttonType: UIKitButton.Type = UIKitButton.Type.Default,
+    onClick: ((SyntheticMouseEvent) -> Unit)? = null,
+    attributesCustomizer: AttrBuilderContext<HTMLButtonElement> = {},
+    contentAllocator: ContentBuilder<HTMLButtonElement>
+) {
+    Button(
+        {
+            onClick ?.let { onClick(it) }
+            classes("uk-button")
+            include(*modifiers, buttonType)
+            if (disabled) {
+                disabled()
+            }
+            attributesCustomizer()
+        }
+    ) {
+        contentAllocator()
+    }
+}
+
+@Composable
+fun DefaultButton(
+    text: String,
+    vararg modifiers: UIKitModifier,
+    disabled: Boolean = false,
+    buttonType: UIKitButton.Type = UIKitButton.Type.Default,
+    preTextContentAllocator: ContentBuilder<HTMLButtonElement>? = null,
+    afterTextContentAllocator: ContentBuilder<HTMLButtonElement>? = null,
+    attributesCustomizer: AttrBuilderContext<HTMLButtonElement> = {},
+    onClick: ((SyntheticMouseEvent) -> Unit)? = null
+) = DefaultButton(*modifiers, disabled = disabled, buttonType = buttonType, onClick = onClick, attributesCustomizer = attributesCustomizer) {
+    preTextContentAllocator ?.apply { preTextContentAllocator() }
+    Text(text)
+    afterTextContentAllocator ?.apply { afterTextContentAllocator() }
+}
+
+@Composable
+fun UploadButton(
+    text: String,
+    vararg buttonModifiers: UIKitModifier,
+    containerModifiers: Array<UIKitModifier> = emptyArray(),
+    disabled: Boolean = false,
+    buttonType: UIKitButton.Type = UIKitButton.Type.Default,
+    attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {},
+    onChange: (Event) -> Unit
+) {
+    Div(
+        {
+            classes("js-upload", "uk-form-custom")
+            attr("uk-form-custom", "")
+            include(*containerModifiers)
+            attributesCustomizer()
+        }
+    ) {
+        Input(InputType.File) { onChange { onChange(it.nativeEvent) } }
+        Button(
+            {
+                classes("uk-button")
+                include(*buttonModifiers, buttonType)
+                if (disabled) {
+                    disabled()
+                }
+            }
+        ) {
+            Text(text)
+        }
+    }
+}

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

@@ -0,0 +1,97 @@
+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 org.jetbrains.compose.web.dom.*
+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
+
+private class DialogDisposableEffectResult(
+    private val element: HTMLElement,
+    private val onDispose: (() -> Unit)?,
+    private val onDisposed: (() -> Unit)?
+) : DisposableEffectResult {
+    override fun dispose() {
+        onDispose?.invoke()
+        js("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
+) {
+    Div(
+        {
+            attr("uk-modal", "")
+            classes("uk-flex-top", "uk-modal")
+            id("dialog${Random.nextUInt()}")
+            include(*modifiers)
+            attributesCustomizer()
+        }
+    ) {
+        Div(
+            {
+                classes("uk-modal-dialog", "uk-margin-auto-vertical")
+            }
+        ) {
+            title ?.let {
+                Div(
+                    {
+                        classes("uk-modal-header")
+                    }
+                ) {
+                    H2({ classes("uk-modal-title") }) {
+                        Text(title)
+                    }
+                }
+            }
+            Div(
+                {
+                    classes("uk-modal-body")
+                }
+            ) {
+                bodyBuilder()
+            }
+            footerBuilder ?.let {
+                Div(
+                    {
+                        classes("uk-modal-footer", "uk-text-right")
+                    }
+                ) {
+                    footerBuilder()
+                }
+            }
+        }
+
+        DisposableRefEffect {
+            DialogDisposableEffectResult(it, hide, hidden)
+        }
+
+        DomSideEffect { htmlElement ->
+            var wrapper: (Event) -> Unit = {}
+            wrapper = { it: Event ->
+                htmlElement.removeEventListener("hidden", wrapper)
+                htmlElement.remove()
+                hidden ?.invoke()
+            }
+            htmlElement.addEventListener("hidden", wrapper)
+
+            val dialog = js("UIkit").modal("#${htmlElement.id}")
+            dialog.show()
+            Unit
+        }
+    }
+}

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

@@ -0,0 +1,7 @@
+package dev.inmo.jsuikit.elements
+
+import androidx.compose.runtime.Composable
+import org.jetbrains.compose.web.dom.Hr
+
+@Composable
+fun Divider() = Hr({ classes("uk-divider-icon") })

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

@@ -0,0 +1,48 @@
+package dev.inmo.jsuikit.elements
+
+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.*
+import org.w3c.dom.HTMLDivElement
+
+@Composable
+fun Dropdown(
+    vararg modifiers: UIKitModifier,
+    toggle: String? = null,
+    pos: UIKitDropdown.Position? = null,
+    mode: UIKitDropdown.Mode? = null,
+    delayShow: Milliseconds? = null,
+    delayHide: Milliseconds? = null,
+    boundary: String? = null,
+    boundaryAlign: Boolean? = null,
+    flip: UIKitDropdown.Flip? = null,
+    offset: Int? = null,
+    animation: UIKitAnimation? = null,
+    duration: Milliseconds? = null,
+    attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {},
+    contentBuilder: ContentBuilder<HTMLDivElement>
+) {
+    Div(
+        {
+            buildAndAddAttribute("uk-dropdown") {
+                "toggle" to toggle
+                "pos" to pos
+                "mode" to mode
+                "delayShow" to delayShow
+                "delayHide" to delayHide
+                "boundary" to boundary
+                "boundaryAlign" to boundaryAlign
+                "flip" to flip
+                "offset" to offset
+                "animation" to animation
+                "duration" to duration
+            }
+            classes("uk-dropdown")
+            include(*modifiers)
+            attributesCustomizer()
+        },
+        contentBuilder
+    )
+}

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

@@ -0,0 +1,24 @@
+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.*
+import org.w3c.dom.HTMLDivElement
+
+@Composable
+fun Flex(
+    vararg modifiers: UIKitModifier,
+    attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {},
+    filler: @Composable ElementScope<HTMLDivElement>.() -> Unit
+) {
+    Div(
+        {
+            classes("uk-flex")
+            include(*modifiers)
+            attributesCustomizer()
+        }
+    ) {
+        filler()
+    }
+}

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

@@ -0,0 +1,51 @@
+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.*
+import org.w3c.dom.HTMLDivElement
+
+@Composable
+fun GridColumn(
+    vararg modifiers: UIKitModifier,
+    attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {},
+    builder: @Composable ElementScope<HTMLDivElement>.() -> Unit
+) {
+    Div(
+        {
+            include(*modifiers)
+            attributesCustomizer()
+        }
+    ) {
+        builder()
+    }
+}
+
+@Composable
+fun Grid(
+    vararg modifiers: UIKitModifier,
+    masonry: Boolean = false,
+    parallax: Int? = null,
+    marginClass: String? = null,
+    firstColumnClass: String? = null,
+    attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {},
+    builder: @Composable ElementScope<HTMLDivElement>.() -> Unit
+) {
+    val attrs = listOfNotNull(
+        if (masonry) "masonry" to "true" else null,
+        parallax ?.let { "parallax" to it.toString() },
+        marginClass ?.let { "margin" to it },
+        firstColumnClass ?.let { "first-column" to it },
+    )
+    Div(
+        {
+            attr("uk-grid", attrs.joinToString(";") { (k, v) -> "$k: $v" })
+            classes("uk-grid")
+            include(*modifiers)
+            attributesCustomizer()
+        }
+    ) {
+        builder()
+    }
+}

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

@@ -0,0 +1,244 @@
+package dev.inmo.jsuikit.elements
+
+import androidx.compose.runtime.Composable
+import dev.inmo.jsuikit.modifiers.*
+import org.jetbrains.compose.web.dom.*
+import org.w3c.dom.*
+import org.w3c.dom.events.Event
+
+sealed class Icon(val name: String) {
+    sealed class App(iconName: String) : Icon(iconName) {
+        object Home : App("home")
+        sealed class Sign(iconName: String) : App("sign-$iconName") {
+            object In : Sign("in")
+            object Out : Sign("out")
+        }
+        object User : App("user")
+        object Users : App("users")
+        object Lock : App("lock")
+        object Unlock : App("unlock")
+        object Settings : App("settings")
+        object Cog : App("cog")
+        object Nut : App("nut")
+        object Comment : App("comment")
+        object Commenting : App("commenting")
+        object Comments : App("comments")
+        object Hashtag : App("hashtag")
+        object Tag : App("tag")
+        object Cart : App("cart")
+        object Bag : App("bag")
+        sealed class Credit(iconName: String) : App("credit-$iconName") {
+            object Card : Credit("card")
+        }
+        object Mail : App("mail")
+        object Receiver : App("receiver")
+        object Print : App("print")
+        object Search : App("search")
+        object Location : App("location")
+        object Bookmark : App("bookmark")
+        object Code : App("code")
+        sealed class Paint(iconName: String) : App("paint-$iconName") {
+            object Bucket : Paint("bucket")
+        }
+        object Camera : App("camera")
+        sealed class Video(iconName: String) : App("video-$iconName") {
+            object Camera : Video("camera")
+        }
+        object Bell : App("bell")
+        object Microphone : App("microphone")
+        object Bolt : App("bolt")
+        object Star : App("star")
+        object Heart : App("heart")
+        object Happy : App("happy")
+        object Lifesaver : App("lifesaver")
+        object Rss : App("rss")
+        object Social : App("social")
+        sealed class Git(iconName: String) : App("git-$iconName") {
+            object Branch : Git("branch")
+            object Fork : Git("fork")
+        }
+        object World : App("world")
+        object Calendar : App("calendar")
+        object Clock : App("clock")
+        object History : App("history")
+        object Future : App("future")
+        object Pencil : App("pencil")
+        object Trash : App("trash")
+        object Move : App("move")
+        object Link : App("link")
+        object Question : App("question")
+        object Info : App("info")
+        object Warning : App("warning")
+        object Image : App("image")
+        object Thumbnails : App("thumbnails")
+        object Table : App("table")
+        object List : App("list")
+        object Menu : App("menu")
+        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")
+        }
+        sealed class Plus(iconName: String) : App("plus${iconName.takeIf { it.isNotEmpty() } ?.let { "-$it" } ?: "" }") {
+            object Circle : Plus("circle")
+            companion object : Plus("plus")
+        }
+        sealed class Minus(iconName: String) : App("minus${iconName.takeIf { it.isNotEmpty() } ?.let { "-$it" } ?: "" }") {
+            object Circle : Minus("circle")
+            companion object : Minus("minus")
+        }
+        object Close : App("close")
+        object Check : App("check")
+        object Ban : App("ban")
+        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")
+        }
+    }
+    sealed class Devices(iconName: String) : Icon(iconName) {
+        object Tv : Devices("tv")
+        object Desktop : Devices("desktop")
+        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")
+        }
+        sealed class Phone(iconName: String) : Devices("phone${iconName.takeIf { it.isNotEmpty() } ?.let { "-$it" } ?: "" }") {
+            object Landscape : Phone("landscape")
+            companion object : Phone("phone")
+        }
+    }
+    sealed class Storage(iconName: String) : Icon(iconName) {
+        sealed class File(iconName: String) : Storage("file${iconName.takeIf { it.isNotEmpty() } ?.let { "-$it" } ?: "" }") {
+            object Text : File("text")
+            object Pdf : File("pdf")
+            object Edit : File("edit")
+            companion object : File("file")
+        }
+        object Copy : Storage("copy")
+        object Folder : Storage("folder")
+        object Album : Storage("album")
+        object Push : Storage("push")
+        object Pull : Storage("pull")
+        object Server : Storage("server")
+        object Database : Storage("database")
+        sealed class Cloud(iconName: String) : Storage("cloud-$iconName") {
+            object Upload : Cloud("upload")
+            object Download : Cloud("download")
+        }
+        object Download : Storage("download")
+        object Upload : Storage("upload")
+    }
+    sealed class Direction(iconName: String) : Icon(iconName) {
+        object Reply : Direction("reply")
+        object Forward : Direction("forward")
+        object Expand : Direction("expand")
+        object Shrink : Direction("shrink")
+        sealed class Arrow(iconName: String) : Direction("arrow-$iconName") {
+            object Up : Arrow("up")
+            object Down : Arrow("down")
+            object Left : Arrow("left")
+            object Right : Arrow("right")
+        }
+        sealed class Chevron(iconName: String) : Direction("chevron-$iconName") {
+            object Up : Chevron("up")
+            object Down : Chevron("down")
+            object Left : Chevron("left")
+            object Right : Chevron("right")
+            sealed class Double(iconName: String) : Chevron("double-$iconName") {
+                object Left : Double("left")
+                object Right : Double("right")
+            }
+        }
+        sealed class Triangle(iconName: String) : Direction("triangle-$iconName") {
+            object Up : Triangle("up")
+            object Down : Triangle("down")
+            object Left : Triangle("left")
+            object Right : Triangle("right")
+        }
+    }
+    sealed class Editor(iconName: String) : Icon(iconName) {
+        object Bold : Editor("bold")
+        object Italic : Editor("italic")
+        object Strikethrough : Editor("strikethrough")
+        sealed class Quote(iconName: String) : Editor("quote-$iconName") {
+            object Right : Quote("right")
+        }
+    }
+    sealed class Brands(iconName: String) : Icon(iconName) {
+        object _500px : Brands("500px")
+        object Behance : Brands("behance")
+        object Discord : Brands("discord")
+        object Dribbble : Brands("dribbble")
+        object Etsy : Brands("etsy")
+        object Facebook : Brands("facebook")
+        object Flickr : Brands("flickr")
+        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")
+        }
+        object Gitter : Brands("gitter")
+        object Google : Brands("google")
+        object Instagram : Brands("instagram")
+        object Joomla : Brands("joomla")
+        object Linkedin : Brands("linkedin")
+        object Pagekit : Brands("pagekit")
+        object Pinterest : Brands("pinterest")
+        object Reddit : Brands("reddit")
+        object Soundcloud : Brands("soundcloud")
+        object Tiktok : Brands("tiktok")
+        object Tripadvisor : Brands("tripadvisor")
+        object Tumblr : Brands("tumblr")
+        object Twitch : Brands("twitch")
+        object Twitter : Brands("twitter")
+        object Uikit : Brands("uikit")
+        object Vimeo : Brands("vimeo")
+        object Whatsapp : Brands("whatsapp")
+        object Wordpress : Brands("wordpress")
+        object Xing : Brands("xing")
+        object Yelp : Brands("yelp")
+        object Youtube : Brands("youtube")
+    }
+
+    @Composable
+    operator fun invoke(
+        vararg modifiers: UIKitModifier,
+        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(configurer)
+        } else {
+            Span(configurer)
+        }
+    }
+
+    @Composable
+    fun drawAsButton(
+        vararg modifiers: UIKitModifier,
+        ratio: Float? = null,
+        attributesCustomizer: AttrBuilderContext<out HTMLElement> = {},
+        onClick: ((Event) -> Unit)? = null
+    ) = invoke(*modifiers, type = UIKitIconType.Button, ratio = ratio, onClick = onClick, attributesCustomizer = attributesCustomizer)
+
+    @Composable
+    fun drawAsIcon(
+        vararg modifiers: UIKitModifier,
+        ratio: Float? = null,
+        attributesCustomizer: AttrBuilderContext<out HTMLElement> = {},
+        onClick: ((Event) -> Unit)? = null
+    ) = invoke(*modifiers, type = UIKitIconType.Default, ratio = ratio, onClick = onClick, attributesCustomizer = attributesCustomizer)
+}

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

@@ -0,0 +1,41 @@
+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.*
+import org.w3c.dom.HTMLSpanElement
+
+sealed interface Label {
+    val suffix: String
+
+    @Composable
+    fun draw(
+        text: String,
+        vararg modifiers: UIKitModifier,
+        attributesCustomizer: AttrBuilderContext<HTMLSpanElement> = {},
+    ) = Span(
+        {
+            classes("uk-label", "uk-label-$suffix")
+            include(*modifiers)
+            attributesCustomizer()
+        }
+    ) {
+        Text(text)
+    }
+
+    object Success : Label {
+        override val suffix: String
+            get() = "success"
+    }
+
+    object Warning : Label {
+        override val suffix: String
+            get() = "warning"
+    }
+
+    object Error : Label {
+        override val suffix: String
+            get() = "danger"
+    }
+}

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

@@ -0,0 +1,37 @@
+package dev.inmo.jsuikit.elements
+
+import androidx.compose.runtime.Composable
+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
+fun <T> List(
+    title: String,
+    data: SnapshotStateList<T>,
+    vararg titleModifiers: UIKitModifier,
+    ulModifiers: Array<UIKitModifier> = emptyArray(),
+    besidesTitleAndList: (@Composable () -> Unit)? = null,
+    titleCustomizer: AttrBuilderContext<HTMLHeadingElement> = {},
+    ulCustomizer: AttrBuilderContext<HTMLUListElement> = {},
+    elementAllocator: @Composable ElementScope<HTMLUListElement>.(T) -> Unit
+) {
+    H4({ include(*titleModifiers); titleCustomizer() }) {
+        Text(title)
+    }
+    besidesTitleAndList ?.invoke()
+    Ul(
+        {
+            classes("uk-list")
+            include(*ulModifiers)
+            ulCustomizer()
+        }
+    ) {
+        data.forEach {
+            elementAllocator(it)
+        }
+    }
+}

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

@@ -0,0 +1,52 @@
+package dev.inmo.jsuikit.elements
+
+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.*
+import org.w3c.dom.HTMLLIElement
+import org.w3c.dom.HTMLUListElement
+
+@Composable
+fun Nav(
+    vararg modifiers: UIKitModifier,
+    multiple: Boolean? = null,
+    collapsible: Boolean? = null,
+    animation: UIKitAnimation? = null,
+    duration: Milliseconds? = null,
+    attributesCustomizer: AttrBuilderContext<HTMLUListElement> = {},
+    dataAllocator: ContentBuilder<HTMLUListElement>
+) {
+    Ul(
+        {
+            buildAndAddAttribute("uk-nav") {
+                "multiple" to multiple ?.toString()
+                "collapsible" to collapsible ?.toString()
+                "animation" to animation
+                "duration" to duration ?.toString()
+            }
+            classes("uk-nav")
+            include(*modifiers)
+            attributesCustomizer()
+        }
+    ) {
+        dataAllocator()
+    }
+}
+
+@Composable
+fun NavElement(
+    vararg modifiers: UIKitModifier,
+    attributesCustomizer: AttrBuilderContext<HTMLLIElement> = {},
+    contentAllocator: ContentBuilder<HTMLLIElement>
+) {
+    Li(
+        {
+            include(*modifiers)
+            attributesCustomizer
+        }
+    ) {
+        contentAllocator()
+    }
+}

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

@@ -0,0 +1,35 @@
+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.*
+import org.w3c.dom.HTMLElement
+
+@Composable
+fun Navbar(
+    leftBuilder: NavbarNavBuilder? = null,
+    centerBuilder: NavbarNavBuilder? = null,
+    rightBuilder: NavbarNavBuilder? = null,
+    vararg navModifiers: UIKitModifier,
+    attributesCustomizer: AttrBuilderContext<HTMLElement> = {},
+) {
+    Nav(
+        {
+            attr("uk-navbar", "")
+            classes("uk-navbar-container", "uk-navbar")
+            include(*navModifiers)
+            attributesCustomizer()
+        }
+    ) {
+        leftBuilder ?.let {
+            Div({ classes("uk-navbar-left") }) { it.draw() }
+        }
+        centerBuilder ?.let {
+            Div({ classes("uk-navbar-center") }) { it.draw() }
+        }
+        rightBuilder ?.let {
+            Div({ classes("uk-navbar-right") }) { it.draw() }
+        }
+    }
+}

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

@@ -0,0 +1,63 @@
+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.dom.*
+import org.w3c.dom.HTMLLIElement
+import org.w3c.dom.HTMLUListElement
+
+interface NavbarNavElement {
+    fun AttrsBuilder<HTMLLIElement>.setup() {}
+    @Composable
+    fun ElementScope<HTMLLIElement>.fill()
+
+    class Default(
+        private val setupCallback: AttrsBuilder<HTMLLIElement>.() -> Unit,
+        private val fillCallback: @Composable ElementScope<HTMLLIElement>.() -> Unit
+    ) : NavbarNavElement {
+        override fun AttrsBuilder<HTMLLIElement>.setup() {
+            setupCallback()
+        }
+
+        @Composable
+        override fun ElementScope<HTMLLIElement>.fill() {
+            fillCallback()
+        }
+    }
+}
+
+class NavbarNavBuilder(
+    private val modifiers: Array<UIKitModifier>,
+    private val elements: List<NavbarNavElement>,
+    private val attributesCustomizer: AttrBuilderContext<HTMLUListElement> = {}
+) {
+    constructor(
+        modifiers: Array<UIKitModifier>,
+        vararg elements: NavbarNavElement,
+        attributesCustomizer: AttrBuilderContext<HTMLUListElement> = {}
+    ) : this(modifiers, elements.toList(), attributesCustomizer)
+    constructor(
+        vararg elements: NavbarNavElement,
+        attributesCustomizer: AttrBuilderContext<HTMLUListElement> = {}
+    ) : this(emptyArray(), elements.toList(), attributesCustomizer)
+    @Composable
+    fun draw() {
+        Ul(
+            {
+                classes("uk-navbar-nav")
+                include(*modifiers)
+                attributesCustomizer()
+            }
+        ) {
+            elements.forEach { element ->
+                Li(
+                    { element.apply { setup() } }
+                ) {
+                    element.apply { fill() }
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,26 @@
+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,
+    attributesCustomizer: AttrBuilderContext<HTMLProgressElement> = {}
+) {
+    Progress(
+        {
+            classes("uk-progress")
+            include(*modifiers)
+            attr("max", max.toString())
+            attr("value", value.toString())
+            attributesCustomizer()
+        }
+    )
+}

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

@@ -0,0 +1,26 @@
+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 modifiers: UIKitModifier,
+    ratio: Float? = null,
+    attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {}
+) {
+    Div(
+        {
+            attr("uk-spinner", ratio ?.let { "ratio: $it" } ?: "")
+            classes("uk-icon", "uk-spinner")
+            include(*modifiers)
+            attributesCustomizer()
+        }
+    )
+}
+
+@Composable
+fun DefaultSpinner() = Spinner(UIKitAlign.Center, UIKitMargin.Small, UIKitText.Alignment.Center)

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

@@ -0,0 +1,51 @@
+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.dom.*
+import org.w3c.dom.HTMLProgressElement
+import org.w3c.dom.HTMLTableElement
+
+@Composable
+fun <T> DefaultTable(
+    heading: List<String>,
+    dataList: SnapshotStateList<T>,
+    vararg tableModifiers: UIKitModifier,
+    attributesCustomizer: AttrBuilderContext<HTMLTableElement> = {},
+    cellFiller: @Composable (i: Int, t: T) -> Unit
+) {
+    val headingIndexes = heading.indices
+    Table(
+        {
+            classes("uk-table")
+            include(*tableModifiers)
+            attributesCustomizer()
+        }
+    ) {
+        Thead {
+            Tr {
+                heading.forEach {
+                    Th(
+                        {
+                            include(UIKitExtension.TextTransformUnset)
+                        }
+                    ) {
+                        Text(it)
+                    }
+                }
+            }
+        }
+        Tbody {
+            dataList.forEach {
+                Tr {
+                    headingIndexes.forEach { i ->
+                        Td {
+                            cellFiller(i, it)
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,34 @@
+package dev.inmo.jsuikit.elements
+
+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(
+    type: InputType<T>,
+    state: MutableState<T>,
+    disabledState: State<Boolean>? = null,
+    placeholder: String? = null,
+    vararg modifiers: UIKitModifier,
+    attributesCustomizer: AttrBuilderContext<HTMLInputElement> = {},
+) {
+    Input(type) {
+        classes("uk-input")
+        include(*modifiers)
+
+        placeholder ?.let(::placeholder)
+
+        onChange { state.value = it.value }
+        disabledState ?.let {
+            if (it.value) {
+                disabled()
+            }
+        }
+        attributesCustomizer()
+    }
+}