Merge pull request #85 from InsanusMokrassar/0.7.4

0.7.4

.github/workflows/build.yml

@@ -1,15 +0,0 @@
-name: Build
-
-on: [push]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - name: Set up JDK 11
-        uses: actions/setup-java@v1
-        with:
-          java-version: 11
-      - name: Build with Gradle
-        run: ./gradlew build

.github/workflows/build_and_publish.yml

@@ -0,0 +1,26 @@
+name: Build
+
+on: [push]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Set up JDK 11
+        uses: actions/setup-java@v1
+        with:
+          java-version: 11
+      - name: Rewrite version
+        run: |
+          branch="`echo "${{ github.ref }}" | grep -o "[^/]*$"`"
+          cat gradle.properties | sed -e "s/^version=\([0-9\.]*\)/version=\1-branch_$branch-build${{ github.run_number }}/" > gradle.properties.tmp
+          rm gradle.properties
+          mv gradle.properties.tmp gradle.properties
+      - name: Build with Gradle
+        run: ./gradlew build
+      - name: Publish
+        continue-on-error: true
+        run: ./gradlew publishAllPublicationsToGiteaRepository
+        env:
+            GITEA_TOKEN: ${{ secrets.GITEA_TOKEN }}

CHANGELOG.md

@@ -1,5 +1,62 @@
 # Changelog
 
+## 0.7.4
+
+* `Kotlin`: `1.9.21`
+* `Compose`: `1.5.11`
+
+## 0.7.3
+
+* `Kotlin`: `1.9.20`
+* `Compose`: `1.5.10`
+
+## 0.7.2
+
+* `Kotlin`: `1.9.10`
+* `Compose`: `1.5.1`
+
+## 0.7.1
+
+* Type of `animation` parameter in `Alert` has been changed according to docs: now it is `Boolean`
+* Add tooltip `JS` part support
+
+## 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
+
+## 0.4.3
+
+* Add opportunity to now show dialog automatically
+
 ## 0.4.2
 
 * `Compose`: `1.2.2`

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.4.2
+version=0.7.4

gradle/libs.versions.toml

@@ -1,8 +1,8 @@
 [versions]
 
-kt = "1.7.20"
+kt = "1.9.21"
-jb-compose = "1.2.2"
+jb-compose = "1.5.11"
-jb-dokka = "1.7.20"
+jb-dokka = "1.9.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-8.4-bin.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists

publish.gradle

@@ -1,7 +1,7 @@
 apply plugin: 'maven-publish'
 
 task javadocsJar(type: Jar) {
-    classifier = 'javadoc'
+    archiveClassifier = 'javadoc'
 }
 
 publishing {
@@ -38,14 +38,32 @@ publishing {
             }
         }
         repositories {
+            if (project.hasProperty('GITEA_TOKEN') || System.getenv('GITEA_TOKEN') != null) {
+                maven {
+                    name = "GITEA"
+                    url = uri("https://git.inmo.dev/api/packages/InsanusMokrassar/maven")
+            
+                    credentials(HttpHeaderCredentials) {
+                        name = "Authorization"
+                        value = project.hasProperty('GITEA_TOKEN') ? project.property('GITEA_TOKEN') : System.getenv('GITEA_TOKEN')
+                    }
+            
+                    authentication {
+                        header(HttpHeaderAuthentication)
+                    }
+            
+                }
+            }
             if ((project.hasProperty('SONATYPE_USER') || System.getenv('SONATYPE_USER') != null) && (project.hasProperty('SONATYPE_PASSWORD') || System.getenv('SONATYPE_PASSWORD') != null)) {
                 maven {
                     name = "sonatype"
                     url = uri("https://oss.sonatype.org/service/local/staging/deploy/maven2/")
+            
                     credentials {
                         username = project.hasProperty('SONATYPE_USER') ? project.property('SONATYPE_USER') : System.getenv('SONATYPE_USER')
                         password = project.hasProperty('SONATYPE_PASSWORD') ? project.property('SONATYPE_PASSWORD') : System.getenv('SONATYPE_PASSWORD')
                     }
+            
                 }
             }
         }
@@ -66,4 +84,10 @@ if (project.hasProperty("signing.gnupg.keyName")) {
             dependsOn(it)
         }
     }
+
+    // Workaround to make android sign operations depend on signing tasks
+    project.getTasks().withType(AbstractPublishToMaven.class).configureEach {
+        def signingTasks = project.getTasks().withType(Sign.class)
+        mustRunAfter(signingTasks)
+    }
 }

publish.kpsb

@@ -1 +1 @@
-{"licenses":[{"id":"Apache-2.0","title":"Apache Software License 2.0","url":"https://opensource.org/licenses/Apache-2.0"}],"mavenConfig":{"name":"${project.name}","description":"${project.name}","url":"https://github.com/InsanusMokrassar/JSUIKitKBindings","vcsUrl":"https://github.com/InsanusMokrassar/JSUIKitKBindings.git","developers":[{"id":"InsanusMokrassar","name":"Ovsiannikov Aleksei","eMail":"ovsyannikov.alexey95@gmail.com"}],"repositories":[{"name":"sonatype","url":"https://oss.sonatype.org/service/local/staging/deploy/maven2/"}],"gpgSigning":{"type":"dev.inmo.kmppscriptbuilder.core.models.GpgSigning.Optional"}}}
+{"licenses":[{"id":"Apache-2.0","title":"Apache Software License 2.0","url":"https://opensource.org/licenses/Apache-2.0"}],"mavenConfig":{"name":"${project.name}","description":"${project.name}","url":"https://github.com/InsanusMokrassar/JSUIKitKBindings","vcsUrl":"https://github.com/InsanusMokrassar/JSUIKitKBindings.git","developers":[{"id":"InsanusMokrassar","name":"Ovsiannikov Aleksei","eMail":"ovsyannikov.alexey95@gmail.com"}],"repositories":[{"name":"GITEA","url":"https://git.inmo.dev/api/packages/InsanusMokrassar/maven","credsType":{"type":"dev.inmo.kmppscriptbuilder.core.models.MavenPublishingRepository.CredentialsType.HttpHeaderCredentials","headerName":"Authorization","headerValueProperty":"GITEA_TOKEN"}},{"name":"sonatype","url":"https://oss.sonatype.org/service/local/staging/deploy/maven2/"}],"gpgSigning":{"type":"dev.inmo.kmppscriptbuilder.core.models.GpgSigning.Optional"}}}

settings.gradle

@@ -1,3 +1 @@
 rootProject.name = 'kjsuikit'
-
-enableFeaturePreview("VERSION_CATALOGS")

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

@@ -12,7 +12,7 @@ import org.w3c.dom.HTMLDivElement
 @Composable
 fun Alert(
     attrs: Attrs<HTMLDivElement> = Attrs.empty(),
-    animation: UIKitAnimation? = UIKitAnimation.Fade,
+    animation: Boolean = true,
     duration: Milliseconds? = null,
     selClose: String? = null,
     content: ContentBuilder<HTMLDivElement>
@@ -22,7 +22,7 @@ fun Alert(
         include(UIKitAlert)
 
         buildAndAddAttribute("uk-alert") {
-            "animation" to animation ?.classes ?.firstOrNull()
+            "animation" to animation
             "duration" to duration
             "sel-close" to selClose
         }

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,
@@ -36,8 +25,15 @@ fun Dialog(
     footerAttrsBuilder: AttrBuilderContext<HTMLDivElement>? = null,
     footerBuilder: ContentBuilder<HTMLDivElement>? = null,
     bodyAttrsBuilder: AttrBuilderContext<HTMLDivElement>? = null,
-    bodyBuilder: ContentBuilder<HTMLDivElement>
+    autoShow: Boolean = true,
+    removeOnHide: Boolean = true,
+    bodyBuilder: ContentBuilder<HTMLDivElement> = {}
 ) {
+    val draw = remember { mutableStateOf(true) }
+
+    remember {
+        renderComposableInBody {
+            if (draw.value) {
                 Div(
                     {
                         if (modifiers.none { it is UIKitModal.WithCustomAttributes }) {
@@ -45,9 +41,43 @@ fun Dialog(
                         }
                         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", {
+                                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
+                        }
+                    }
+
                     Div(
                         {
                             include(UIKitModal.Dialog)
@@ -85,52 +115,58 @@ fun Dialog(
                             }
                         }
                     }
-
+                }
-        DisposableRefEffect {
+            }
-            DialogDisposableEffectResult(it, onHide, onHidden)
+        }
     }
 
-        DomSideEffect { htmlElement ->
+    Div({
-            var wrapper: (Event) -> Unit = {}
+        hidden()
-            wrapper = { it: Event ->
+        ref {
-                htmlElement.removeEventListener("hidden", wrapper)
+            onDispose {
-                htmlElement.remove()
+                draw.value = false
-                onHidden ?.invoke()
-            }
-            htmlElement.addEventListener("hidden", wrapper)
-
-            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
+    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,
+    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,
-        }
+    autoShow = autoShow,
-    },
+    removeOnHide = removeOnHide,
-    attributesCustomizer = {
+    bodyBuilder = bodyBuilder
-        attributesCustomizer()
-    },
-    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/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")
+}

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)
@@ -16,4 +17,7 @@ external interface UIKit {
 
     fun dropdown(element: Element, options: DropdownOptions = definedExternally): Dropdown
     fun dropdown(selector: String, options: DropdownOptions = definedExternally): Dropdown?
+
+    fun tooltip(element: Element): UIKitTooltip
+    fun tooltip(selector: String): UIKitTooltip?
 }

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

@@ -0,0 +1,6 @@
+package dev.inmo.jsuikit.types
+
+external interface UIKitTooltip {
+    fun show()
+    fun hide()
+}

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