Merge pull request #81 from InsanusMokrassar/0.7.0

0.7.0

CHANGELOG.md

@@ -1,5 +1,34 @@
 # Changelog
 
+## 0.7.0
+
+* `Kotlin`: `1.8.20`
+* `Compose`: `1.4.0`
+
+## 0.6.2
+
+* `Compose`: `1.3.1`
+
+## 0.6.1
+
+* `DefaultInput` has been renamed to `StandardInput`
+* `Compose`: `1.3.1-rc02`
+
+## 0.6.0
+
+* `Kotlin`: `1.8.10`
+* `Compose`: `1.3.1-rc01`
+
+## 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

gradle.properties

@@ -3,10 +3,8 @@ org.gradle.parallel=true
 kotlin.js.generate.externals=true
 kotlin.incremental=true
 kotlin.incremental.js=true
-android.useAndroidX=true
-android.enableJetifier=true
 
 # Project data
 
 group=dev.inmo
-version=0.5.0
+version=0.7.0

gradle/libs.versions.toml

@@ -1,8 +1,8 @@
 [versions]
 
-kt = "1.7.20"
+kt = "1.8.20"
-jb-compose = "1.2.2"
+jb-compose = "1.4.0"
-jb-dokka = "1.7.20"
+jb-dokka = "1.8.10"
 gh-release = "2.4.1"
 
 [libraries]

gradle/wrapper/gradle-wrapper.properties

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

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

@@ -8,8 +8,6 @@ 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.MutationObserver
-import org.w3c.dom.MutationObserverInit
 import kotlin.random.Random
 import kotlin.random.nextUInt
 
@@ -31,83 +29,90 @@ fun Dialog(
     removeOnHide: Boolean = true,
     bodyBuilder: ContentBuilder<HTMLDivElement> = {}
 ) {
-    val drawDiv = remember { mutableStateOf(true) }
+    val draw = remember { mutableStateOf(true) }
-    val composition = remember {
+
+    remember {
         renderComposableInBody {
-            Div(
+            if (draw.value) {
-                {
-                    if (modifiers.none { it is UIKitModal.WithCustomAttributes }) {
-                        include(UIKitModal)
-                    }
-                    id("dialog${Random.nextUInt()}")
-                    include(*modifiers)
-
-                    attributesCustomizer()
-                }
-            ) {
-                DisposableEffect(true) {
-                    val htmlElement = scopeElement
-
-                    if (autoShow) {
-                        UIKit.modal(htmlElement).show()
-                    }
-
-                    if (onHidden != null || removeOnHide) {
-                        htmlElement.addEventListener("hidden", {
-                            onHidden ?.invoke(htmlElement)
-
-                            if (removeOnHide) {
-                                htmlElement.remove()
-                            }
-                        })
-                    }
-
-                    onShown ?.let {
-                        htmlElement.addEventListener("shown", {
-                            onShown(htmlElement)
-                        })
-                    }
-
-
-                    onDispose {
-                        drawDiv.value = false
-                    }
-                }
-
                 Div(
                     {
-                        include(UIKitModal.Dialog)
+                        if (modifiers.none { it is UIKitModal.WithCustomAttributes }) {
-                        dialogAttrsBuilder ?.let { it() } ?: include(UIKitMargin.Auto.Vertical)
+                            include(UIKitModal)
+                        }
+                        id("dialog${Random.nextUInt()}")
+                        include(*modifiers)
+
+                        attributesCustomizer()
                     }
                 ) {
-                    headerBuilder ?.let {
+                    DisposableEffect(true) {
-                        Div(
+                        val htmlElement = scopeElement
-                            {
+
-                                include(UIKitModal.Header)
+                        if (autoShow) {
-                                headerAttrsBuilder ?.let { it() }
+                            UIKit.modal(htmlElement).show()
-                            }
+                        }
-                        ) {
+
-                            it()
+                        if (onHidden != null || removeOnHide) {
+                            htmlElement.addEventListener("hidden", {
+                                if (it.target != htmlElement) return@addEventListener
+
+                                onHidden ?.invoke(htmlElement)
+
+                                if (removeOnHide) {
+                                    htmlElement.remove()
+                                }
+                            })
+                        }
+
+                        onShown ?.let {
+                            htmlElement.addEventListener("shown", {
+                                if (it.target != htmlElement) return@addEventListener
+
+                                onShown(htmlElement)
+                            })
+                        }
+
+
+                        onDispose {
+                            draw.value = false
                         }
                     }
-                    afterHeaderBuilder ?.let { it() }
+
                     Div(
                         {
-                            include(UIKitModal.Body)
+                            include(UIKitModal.Dialog)
-                            bodyAttrsBuilder ?.let { it() }
+                            dialogAttrsBuilder ?.let { it() } ?: include(UIKitMargin.Auto.Vertical)
                         }
                     ) {
-                        bodyBuilder()
+                        headerBuilder ?.let {
-                    }
+                            Div(
-                    beforeFooterBuilder ?.let { it() }
+                                {
-                    footerBuilder ?.let {
+                                    include(UIKitModal.Header)
+                                    headerAttrsBuilder ?.let { it() }
+                                }
+                            ) {
+                                it()
+                            }
+                        }
+                        afterHeaderBuilder ?.let { it() }
                         Div(
                             {
-                                include(UIKitModal.Footer)
+                                include(UIKitModal.Body)
-                                footerAttrsBuilder ?.let { it() } ?: include(UIKitText.Alignment.Horizontal.Right)
+                                bodyAttrsBuilder ?.let { it() }
                             }
                         ) {
-                            it()
+                            bodyBuilder()
+                        }
+                        beforeFooterBuilder ?.let { it() }
+                        footerBuilder ?.let {
+                            Div(
+                                {
+                                    include(UIKitModal.Footer)
+                                    footerAttrsBuilder ?.let { it() } ?: include(UIKitText.Alignment.Horizontal.Right)
+                                }
+                            ) {
+                                it()
+                            }
                         }
                     }
                 }
@@ -115,18 +120,14 @@ fun Dialog(
         }
     }
 
-    if (drawDiv.value) {
+    Div({
-        Div({
+        hidden()
-            hidden()
+        ref {
-            ref {
+            onDispose {
-                onDispose {
+                draw.value = false
-                    composition.dispose()
-                }
             }
-        })
+        }
-    } else {
+    })
-        runCatching { composition.dispose() }
-    }
 }
 
 @Composable

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/elements/StandardInput.kt

@@ -8,6 +8,40 @@ import org.jetbrains.compose.web.dom.AttrBuilderContext
 import org.jetbrains.compose.web.dom.Input
 import org.w3c.dom.HTMLInputElement
 
+@Composable
+fun <T> StandardInput(
+    type: InputType<T>,
+    value: T? = null,
+    vararg modifiers: UIKitModifier,
+    disabled: Boolean = false,
+    placeholder: String? = null,
+    attributesCustomizer: AttrBuilderContext<HTMLInputElement> = {},
+    onChange: HTMLInputElement.(T) -> Unit
+) {
+    Input(type) {
+        classes("uk-input")
+        include(*modifiers)
+
+        placeholder ?.let(::placeholder)
+
+        value ?.let {
+            when (it) {
+                is String -> value(it)
+                is Number -> value(it)
+                else -> {}
+            }
+        }
+
+        onInput { event -> event.target.onChange(event.value) }
+
+        if (disabled) {
+            disabled()
+        }
+        attributesCustomizer()
+    }
+}
+
+@Deprecated("Renamed", ReplaceWith("StandardInput(type, value, *modifiers, disabled, placeholder, attributesCustomizer, onChange)"))
 @Composable
 fun <T> DefaultInput(
     type: InputType<T>,
@@ -17,28 +51,8 @@ fun <T> DefaultInput(
     vararg modifiers: UIKitModifier,
     attributesCustomizer: AttrBuilderContext<HTMLInputElement> = {},
     onChange: (T) -> Unit
-) {
+) = StandardInput(type, value, modifiers = modifiers, disabled, placeholder, attributesCustomizer) {
-    Input(type) {
+    onChange(it)
-        classes("uk-input")
-        include(*modifiers)
-
-        placeholder ?.let(::placeholder)
-
-        value.let {
-            when (it) {
-                is String -> value(it)
-                is Number -> value(it)
-                else -> {}
-            }
-        }
-
-        onInput { onChange(it.value) }
-
-        if (disabled) {
-            disabled()
-        }
-        attributesCustomizer()
-    }
 }
 
 @Composable
@@ -49,12 +63,12 @@ fun <T> StandardInput(
     placeholder: String? = null,
     vararg modifiers: UIKitModifier,
     attributesCustomizer: AttrBuilderContext<HTMLInputElement> = {},
-) = DefaultInput(
+) = StandardInput(
     type,
     state.value,
+    modifiers = modifiers,
     disabledState ?.value == true,
     placeholder,
-    modifiers = modifiers,
     attributesCustomizer = attributesCustomizer
 ) {
     state.value = it

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")
+}