complete rework

core/src/commonMain/kotlin/dev/inmo/kmppscriptbuilder/core/ui/MavenInfoView.kt

@@ -74,6 +74,7 @@ class MavenInfoView : VerticalView("Project information") {
         ) { projectVcsUrlProperty = it }
 
         ButtonsPanel(
+            "Gpg signing",
             GpgSigning.Disabled,
             GpgSigning.Optional,
             GpgSigning.Enabled

core/src/commonMain/kotlin/dev/inmo/kmppscriptbuilder/core/ui/ProjectTypeView.kt

@@ -20,6 +20,7 @@ class ProjectTypeView : VerticalView("Project type") {
 
     override val content: @Composable () -> Unit = {
         ButtonsPanel(
+            "Project type",
             MultiplatformProjectType,
             JVMProjectType,
             JSProjectType

core/src/commonMain/kotlin/dev/inmo/kmppscriptbuilder/core/ui/utils/UIElements.kt

@@ -27,15 +27,17 @@ expect fun SwitchWithLabel(
 
 @Composable
 expect fun <T> ButtonsPanel(
+    title: String,
     data: Iterable<T>,
     itemDrawer: @Composable (T) -> Unit
 )
 
 @Composable
 fun <T> ButtonsPanel(
+    title: String,
     vararg data: T,
     itemDrawer: @Composable (T) -> Unit
-) = ButtonsPanel(data.toList(), itemDrawer)
+) = ButtonsPanel(title, data.toList(), itemDrawer)
 
 @Composable
 expect fun DefaultDivider()

core/src/jsMain/kotlin/dev/inmo/kmppscriptbuilder/core/ui/GpgSigningOptionDrawer.kt

@@ -4,8 +4,10 @@ import androidx.compose.runtime.Composable
 import dev.inmo.jsuikit.elements.DefaultButton
 import dev.inmo.jsuikit.modifiers.UIKitButton
 import dev.inmo.jsuikit.modifiers.UIKitMargin
+import dev.inmo.jsuikit.modifiers.UIKitUtility
 import dev.inmo.kmppscriptbuilder.core.models.GpgSigning
 import dev.inmo.kmppscriptbuilder.core.ui.utils.Drawer
+import dev.inmo.kmppscriptbuilder.core.ui.utils.NoTransform
 
 actual class GpgSigningOptionDrawer(
     private val mavenInfoView: MavenInfoView
@@ -13,9 +15,9 @@ actual class GpgSigningOptionDrawer(
     @Composable
     override fun GpgSigning.draw() {
         if (mavenInfoView.gpgSignProperty == this) {
-            DefaultButton(name, UIKitButton.Type.Primary)
+            DefaultButton(name, UIKitButton.Type.Primary, UIKitMargin.Small.Horizontal, UIKitUtility.NoTransform, UIKitUtility.Border.Rounded)
         } else {
-            DefaultButton(name, UIKitButton.Type.Default) {
+            DefaultButton(name, UIKitButton.Type.Default, UIKitMargin.Small.Horizontal, UIKitUtility.NoTransform, UIKitUtility.Border.Rounded) {
                 mavenInfoView.gpgSignProperty = this
             }
         }

core/src/jsMain/kotlin/dev/inmo/kmppscriptbuilder/core/ui/LicensesDrawer.kt

@@ -5,10 +5,12 @@ import dev.inmo.jsuikit.elements.DefaultButton
 import dev.inmo.jsuikit.elements.Divider
 import dev.inmo.jsuikit.modifiers.UIKitButton
 import dev.inmo.jsuikit.modifiers.UIKitMargin
+import dev.inmo.jsuikit.modifiers.UIKitUtility
 import dev.inmo.jsuikit.modifiers.builder
 import dev.inmo.jsuikit.utils.Attrs
 import dev.inmo.kmppscriptbuilder.core.ui.utils.CommonTextField
 import dev.inmo.kmppscriptbuilder.core.ui.utils.Drawer
+import dev.inmo.kmppscriptbuilder.core.ui.utils.NoTransform
 import org.jetbrains.compose.web.dom.Div
 
 actual object LicensesDrawer : Drawer<LicensesView> {
@@ -32,7 +34,7 @@ actual object LicensesDrawer : Drawer<LicensesView> {
             Divider.Common()
         }
 
-        DefaultButton("Add empty license", UIKitButton.Type.Primary, UIKitMargin.Small) {
+        DefaultButton("Add empty license", UIKitButton.Type.Primary, UIKitMargin.Small, UIKitUtility.NoTransform, UIKitUtility.Border.Rounded) {
             licensesListState.add(LicenseState())
         }
 
@@ -50,7 +52,7 @@ actual object LicensesDrawer : Drawer<LicensesView> {
                     license.url ?: "",
                     "License URL",
                 ) { license.url = it }
-                DefaultButton("Remove", UIKitButton.Type.Danger, UIKitMargin.Small) {
+                DefaultButton("Remove", UIKitButton.Type.Default, UIKitMargin.Small, UIKitUtility.NoTransform, UIKitUtility.Border.Rounded) {
                     licensesListState.remove(license)
                 }
             }

core/src/jsMain/kotlin/dev/inmo/kmppscriptbuilder/core/ui/ListViewDrawer.kt

@@ -4,18 +4,20 @@ import androidx.compose.runtime.Composable
 import dev.inmo.jsuikit.elements.DefaultButton
 import dev.inmo.jsuikit.modifiers.UIKitButton
 import dev.inmo.jsuikit.modifiers.UIKitMargin
+import dev.inmo.jsuikit.modifiers.UIKitUtility
 import dev.inmo.jsuikit.modifiers.builder
 import dev.inmo.kmppscriptbuilder.core.ui.utils.Drawer
+import dev.inmo.kmppscriptbuilder.core.ui.utils.NoTransform
 import org.jetbrains.compose.web.dom.Div
 
 actual class ListViewDrawer<T> : Drawer<ListView<T>> {
     @Composable
     override fun ListView<T>.draw() {
-        DefaultButton(addItemText, UIKitButton.Type.Primary ) { itemsList.add(createItem()) }
+        DefaultButton(addItemText, UIKitButton.Type.Primary, UIKitUtility.NoTransform, UIKitUtility.Border.Rounded ) { itemsList.add(createItem()) }
         itemsList.forEach { item ->
             Div(UIKitMargin.Small.builder()) {
                 buildView(item)
-                DefaultButton(removeItemText, UIKitButton.Type.Danger, UIKitMargin.Small) {
+                DefaultButton(removeItemText, UIKitButton.Type.Default, UIKitMargin.Small, UIKitUtility.NoTransform, UIKitUtility.Border.Rounded) {
                     itemsList.remove(item)
                 }
             }

core/src/jsMain/kotlin/dev/inmo/kmppscriptbuilder/core/ui/ProjectTypeDrawer.kt

@@ -4,8 +4,11 @@ import androidx.compose.runtime.Composable
 import dev.inmo.jsuikit.elements.DefaultButton
 import dev.inmo.jsuikit.modifiers.UIKitButton
 import dev.inmo.jsuikit.modifiers.UIKitMargin
+import dev.inmo.jsuikit.modifiers.UIKitText
+import dev.inmo.jsuikit.modifiers.UIKitUtility
 import dev.inmo.kmppscriptbuilder.core.models.ProjectType
 import dev.inmo.kmppscriptbuilder.core.ui.utils.Drawer
+import dev.inmo.kmppscriptbuilder.core.ui.utils.NoTransform
 
 actual class ProjectTypeDrawer(
     private val projectTypeView: ProjectTypeView
@@ -13,9 +16,9 @@ actual class ProjectTypeDrawer(
     @Composable
     override fun ProjectType.draw() {
         if (projectTypeView.projectType == this) {
-            DefaultButton(name, UIKitButton.Type.Primary)
+            DefaultButton(name, UIKitButton.Type.Primary, UIKitMargin.Small.Horizontal, UIKitUtility.NoTransform, UIKitUtility.Border.Rounded)
         } else {
-            DefaultButton(name, UIKitButton.Type.Default) {
+            DefaultButton(name, UIKitButton.Type.Default, UIKitMargin.Small.Horizontal, UIKitUtility.NoTransform, UIKitUtility.Border.Rounded) {
                 projectTypeView.projectType = this
             }
         }

core/src/jsMain/kotlin/dev/inmo/kmppscriptbuilder/core/ui/utils/ActualUIElements.kt

@@ -9,6 +9,7 @@ import dev.inmo.jsuikit.elements.Icon
 import dev.inmo.jsuikit.elements.Label
 import dev.inmo.jsuikit.elements.drawAsFormInputPart
 import dev.inmo.jsuikit.modifiers.UIKitButton
+import dev.inmo.jsuikit.modifiers.UIKitCustom
 import dev.inmo.jsuikit.modifiers.UIKitFlex
 import dev.inmo.jsuikit.modifiers.UIKitForm
 import dev.inmo.jsuikit.modifiers.UIKitInverse
@@ -18,6 +19,8 @@ import dev.inmo.jsuikit.modifiers.UIKitUtility
 import dev.inmo.jsuikit.modifiers.builder
 import dev.inmo.jsuikit.modifiers.include
 import dev.inmo.jsuikit.utils.Attrs
+import kotlinx.browser.window
+import kotlinx.coroutines.withTimeout
 import org.jetbrains.compose.web.attributes.InputType
 import org.jetbrains.compose.web.dom.Div
 import org.jetbrains.compose.web.dom.Legend
@@ -59,7 +62,12 @@ actual fun CommonTextField(
         placeholder = hint,
         attributesCustomizer = {
             onFocusIn { onFocusChanged(true) }
-            onFocusOut { onFocusChanged(false) }
+            onFocusOut {
+                window.setTimeout( // avoid immediate hiding of potential interface data with additional delay
+                    { onFocusChanged(false) },
+                    100
+                )
+            }
         },
         onChange = onChange
     )
@@ -84,7 +92,7 @@ actual fun SwitchWithLabel(
             onCheckedChange(!checked)
         },
         attributesCustomizer = {
-            include(UIKitUtility.Inline)
+            include(UIKitUtility.Inline, UIKitUtility.NoTransform, UIKitUtility.Border.Rounded)
         }
     ) {
         if (checked) {
@@ -95,8 +103,13 @@ actual fun SwitchWithLabel(
 }
 
 @Composable
-actual fun <T> ButtonsPanel(data: Iterable<T>, itemDrawer: @Composable (T) -> Unit) {
+actual fun <T> ButtonsPanel(
+    title: String,
+    data: Iterable<T>,
+    itemDrawer: @Composable (T) -> Unit
+) {
     Flex(UIKitFlex.Alignment.Vertical.Middle, UIKitMargin.Small) {
+        Div(UIKitMargin.Small.Horizontal.builder()) { Text(title) }
         data.forEach { itemDrawer(it) }
     }
 }

core/src/jsMain/kotlin/dev/inmo/kmppscriptbuilder/core/ui/utils/NoTransform.kt

@@ -0,0 +1,9 @@
+package dev.inmo.kmppscriptbuilder.core.ui.utils
+
+import dev.inmo.jsuikit.modifiers.UIKitCustom
+import dev.inmo.jsuikit.modifiers.UIKitUtility
+
+val ClassNoTransform = UIKitCustom(arrayOf("no-transform"))
+
+val UIKitUtility.Companion.NoTransform
+    get() = ClassNoTransform

core/src/jsMain/resources/css/internal.css

@@ -0,0 +1,4 @@
+.no-transform {
+    text-transform: none;
+}
+

core/src/jsMain/resources/index.html

@@ -5,6 +5,7 @@
     <title>Kotlin Publication Scripts Builder</title>
     <!-- UIkit CSS -->
     <link rel="stylesheet" href="./css/uikit.min.css" />
+    <link rel="stylesheet" href="./css/internal.css" />
 </head>
 <body>
 <!--    <form class="uk-padding-small">-->

core/src/jvmMain/kotlin/dev/inmo/kmppscriptbuilder/core/ui/utils/ActualUIElements.kt

@@ -80,8 +80,12 @@ actual fun TitleText(text: String) {
 }
 
 @Composable
-actual fun <T> ButtonsPanel(data: Iterable<T>, itemDrawer: @Composable (T) -> Unit) {
+actual fun <T> ButtonsPanel(
+    title: String,
+    data: Iterable<T>,
+    itemDrawer: @Composable (T) -> Unit) {
     Row {
+        Text(title, Modifier.padding(8.dp))
         data.forEach { itemDrawer(it) }
     }
 }