Update CHANGELOG.md

0.5.1

CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 0.5.2
+
+* More fixes in Dialogs
+* Badge supported
+* Inline creation support
+
+## 0.5.1
+
+* Fixes in new `Dialog`s
+
+## 0.5.0
+
+* Fully rework `Dialog` elements
+
 ## 0.4.3
 
 * Add opportunity to now show dialog automatically

gradle.properties

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

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

@@ -0,0 +1,25 @@
+package dev.inmo.jsuikit.elements
+
+import androidx.compose.runtime.Composable
+import dev.inmo.jsuikit.modifiers.UIKitBadge
+import dev.inmo.jsuikit.modifiers.include
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+import org.jetbrains.compose.web.dom.ContentBuilder
+import org.jetbrains.compose.web.dom.Span
+import org.jetbrains.compose.web.dom.Text
+import org.w3c.dom.HTMLSpanElement
+
+@Composable
+fun Badge(
+    text: String,
+    onAfterText: ContentBuilder<HTMLSpanElement>? = null,
+    onBeforeText: ContentBuilder<HTMLSpanElement>? = null,
+    attrs: AttrBuilderContext<HTMLSpanElement>? = null
+) = Span({
+    include(UIKitBadge)
+    attrs ?.invoke(this)
+}) {
+    onAfterText ?.invoke(this)
+    Text(text)
+    onBeforeText ?.invoke(this)
+}

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

@@ -1,33 +1,22 @@
 package dev.inmo.jsuikit.elements
 
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.DisposableEffectResult
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
 import dev.inmo.jsuikit.modifiers.*
 import org.jetbrains.compose.web.dom.*
+import org.jetbrains.compose.web.renderComposableInBody
 import org.w3c.dom.HTMLDivElement
-import org.w3c.dom.HTMLElement
-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()
-        UIKit.modal("#${element.id}") ?.hide()
-        onDisposed?.invoke()
-    }
-}
-
 @Composable
 fun Dialog(
     vararg modifiers: UIKitModifier,
     attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {},
-    onHide: (() -> Unit)? = null,
+    onHidden: ((HTMLDivElement) -> Unit)? = null,
-    onHidden: (() -> Unit)? = null,
+    onShown: ((HTMLDivElement) -> Unit)? = null,
     dialogAttrsBuilder: AttrBuilderContext<HTMLDivElement>? = null,
     headerAttrsBuilder: AttrBuilderContext<HTMLDivElement>? = null,
     headerBuilder: ContentBuilder<HTMLDivElement>? = null,
@@ -37,105 +26,147 @@ fun Dialog(
     footerBuilder: ContentBuilder<HTMLDivElement>? = null,
     bodyAttrsBuilder: AttrBuilderContext<HTMLDivElement>? = null,
     autoShow: Boolean = true,
-    bodyBuilder: ContentBuilder<HTMLDivElement>
+    removeOnHide: Boolean = true,
+    bodyBuilder: ContentBuilder<HTMLDivElement> = {}
 ) {
-    Div(
+    val draw = remember { mutableStateOf(true) }
-        {
+
-            if (modifiers.none { it is UIKitModal.WithCustomAttributes }) {
+    remember {
-                include(UIKitModal)
+        renderComposableInBody {
-            }
+            if (draw.value) {
-            id("dialog${Random.nextUInt()}")
-            include(*modifiers)
-            attributesCustomizer()
-        }
-    ) {
-        Div(
-            {
-                include(UIKitModal.Dialog)
-                dialogAttrsBuilder ?.let { it() } ?: include(UIKitMargin.Auto.Vertical)
-            }
-        ) {
-            headerBuilder ?.let {
                 Div(
                     {
-                        include(UIKitModal.Header)
+                        if (modifiers.none { it is UIKitModal.WithCustomAttributes }) {
-                        headerAttrsBuilder ?.let { it() }
+                            include(UIKitModal)
+                        }
+                        id("dialog${Random.nextUInt()}")
+                        include(*modifiers)
+
+                        attributesCustomizer()
                     }
                 ) {
-                    it()
+                    DisposableEffect(true) {
-                }
+                        val htmlElement = scopeElement
-            }
+
-            afterHeaderBuilder ?.let { it() }
+                        if (autoShow) {
-            Div(
+                            UIKit.modal(htmlElement).show()
-                {
+                        }
-                    include(UIKitModal.Body)
+
-                    bodyAttrsBuilder ?.let { it() }
+                        if (onHidden != null || removeOnHide) {
-                }
+                            htmlElement.addEventListener("hidden", {
-            ) {
+                                if (it.target != htmlElement) return@addEventListener
-                bodyBuilder()
+
-            }
+                                onHidden ?.invoke(htmlElement)
-            beforeFooterBuilder ?.let { it() }
+
-            footerBuilder ?.let {
+                                if (removeOnHide) {
-                Div(
+                                    htmlElement.remove()
-                    {
+                                }
-                        include(UIKitModal.Footer)
+                            })
-                        footerAttrsBuilder ?.let { it() } ?: include(UIKitText.Alignment.Horizontal.Right)
+                        }
+
+                        onShown ?.let {
+                            htmlElement.addEventListener("shown", {
+                                if (it.target != htmlElement) return@addEventListener
+
+                                onShown(htmlElement)
+                            })
+                        }
+
+
+                        onDispose {
+                            draw.value = false
+                        }
+                    }
+
+                    Div(
+                        {
+                            include(UIKitModal.Dialog)
+                            dialogAttrsBuilder ?.let { it() } ?: include(UIKitMargin.Auto.Vertical)
+                        }
+                    ) {
+                        headerBuilder ?.let {
+                            Div(
+                                {
+                                    include(UIKitModal.Header)
+                                    headerAttrsBuilder ?.let { it() }
+                                }
+                            ) {
+                                it()
+                            }
+                        }
+                        afterHeaderBuilder ?.let { it() }
+                        Div(
+                            {
+                                include(UIKitModal.Body)
+                                bodyAttrsBuilder ?.let { it() }
+                            }
+                        ) {
+                            bodyBuilder()
+                        }
+                        beforeFooterBuilder ?.let { it() }
+                        footerBuilder ?.let {
+                            Div(
+                                {
+                                    include(UIKitModal.Footer)
+                                    footerAttrsBuilder ?.let { it() } ?: include(UIKitText.Alignment.Horizontal.Right)
+                                }
+                            ) {
+                                it()
+                            }
+                        }
                     }
-                ) {
-                    it()
                 }
             }
         }
-
-        DisposableRefEffect {
-            DialogDisposableEffectResult(it, onHide, onHidden)
-        }
-
-        DomSideEffect { htmlElement ->
-            var wrapper: (Event) -> Unit = {}
-            wrapper = { it: Event ->
-                htmlElement.removeEventListener("hidden", wrapper)
-                htmlElement.remove()
-                onHidden ?.invoke()
-            }
-            htmlElement.addEventListener("hidden", wrapper)
-
-            if (autoShow) {
-                UIKit.modal("#${htmlElement.id}") ?.show()
-            }
-        }
     }
+
+    Div({
+        hidden()
+        ref {
+            onDispose {
+                draw.value = false
+            }
+        }
+    })
 }
 
 @Composable
 fun Dialog(
     title: String,
     vararg modifiers: UIKitModifier,
-    hide: (() -> Unit)? = null,
-    hidden: (() -> Unit)? = null,
-    footerBuilder: (@Composable () -> Unit)? = null,
     attributesCustomizer: AttrBuilderContext<HTMLDivElement> = {},
+    onHidden: ((HTMLDivElement) -> Unit)? = null,
+    onShown: ((HTMLDivElement) -> 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,
     autoShow: Boolean = true,
-    bodyBuilder: @Composable () -> Unit
+    removeOnHide: Boolean = true,
+    bodyBuilder: ContentBuilder<HTMLDivElement> = {}
 ) = Dialog(
     modifiers = modifiers,
+    attributesCustomizer = attributesCustomizer,
+    onHidden = onHidden,
+    onShown = onShown,
+    dialogAttrsBuilder = dialogAttrsBuilder,
+    headerAttrsBuilder = headerAttrsBuilder,
     headerBuilder = {
         H2({ include(UIKitModal.Title) }) {
             Text(title)
         }
+        headerBuilder ?.invoke(this)
     },
-    onHide = hide,
+    afterHeaderBuilder = afterHeaderBuilder,
-    onHidden = hidden,
+    beforeFooterBuilder = beforeFooterBuilder,
-    footerBuilder = footerBuilder ?.let { _ ->
+    footerAttrsBuilder = footerAttrsBuilder,
-        {
+    footerBuilder = footerBuilder,
-            footerBuilder()
+    bodyAttrsBuilder = bodyAttrsBuilder,
-        }
-    },
-    attributesCustomizer = {
-        attributesCustomizer()
-    },
     autoShow = autoShow,
-    bodyBuilder = {
+    removeOnHide = removeOnHide,
-        bodyBuilder()
+    bodyBuilder = bodyBuilder
-    }
 )

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

@@ -0,0 +1,18 @@
+package dev.inmo.jsuikit.elements
+
+import androidx.compose.runtime.Composable
+import dev.inmo.jsuikit.modifiers.UIKitUtility
+import dev.inmo.jsuikit.modifiers.include
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+import org.jetbrains.compose.web.dom.ContentBuilder
+import org.jetbrains.compose.web.dom.Div
+import org.w3c.dom.HTMLDivElement
+
+@Composable
+fun Inline(
+    attrBuilderContext: AttrBuilderContext<HTMLDivElement>? = null,
+    contentBuilder: ContentBuilder<HTMLDivElement>
+) = Div({
+    include(UIKitUtility.Inline)
+    attrBuilderContext ?.invoke(this)
+}, contentBuilder)

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

@@ -0,0 +1,7 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitBadge(classname: String) : UIKitModifier {
+    override val classes: Array<String> = arrayOf(classname)
+
+    companion object : UIKitBadge("uk-badge")
+}

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

@@ -6,6 +6,7 @@ import kotlin.js.Json
 external interface UIKit {
     val notification: UIKitNotifications
     val modal: UIKitDialogs
+    val util: UIKitUtil
 
 
     fun notification(message: String, parameters: Json)

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

@@ -0,0 +1,8 @@
+package dev.inmo.jsuikit.types
+
+import org.w3c.dom.HTMLElement
+
+external interface UIKitUtil {
+    fun on(selector: String, event: String, callback: () -> Unit)
+    fun on(element: HTMLElement, event: String, callback: () -> Unit)
+}

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

@@ -0,0 +1,9 @@
+package dev.inmo.jsuikit.utils
+
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+import org.w3c.dom.Element
+
+operator fun <T : Element> AttrBuilderContext<T>.plus(other: AttrBuilderContext<T>): AttrBuilderContext<T> = {
+    this@plus()
+    other()
+}