Merge pull request #42 from InsanusMokrassar/0.0.41

0.0.41

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 0.0.41
+
+* Add `DropArea`
+* Add `UIKitPlaceholder`
+* `UIKitForm#Custom` now have nullable param target
+* Add `UIKitUtility#Link`
+* Add `DescriptionList` and several support composable functions
+
 ## 0.0.40
 
 * All `DefaultTable` functions now use `Iterable` as data type

gradle.properties

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

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

@@ -0,0 +1,57 @@
+package dev.inmo.jsuikit.elements
+
+import androidx.compose.runtime.Composable
+import dev.inmo.jsuikit.modifiers.UIKitDescriptionList
+import dev.inmo.jsuikit.modifiers.include
+import dev.inmo.jsuikit.utils.*
+import org.jetbrains.compose.web.dom.ContentBuilder
+import org.jetbrains.compose.web.dom.ElementScope
+import org.w3c.dom.HTMLDListElement
+import org.w3c.dom.HTMLElement
+
+@Composable
+fun DescriptionList(
+    attrs: Attrs<HTMLDListElement>,
+    contentBuilder: ContentBuilder<HTMLDListElement>
+) {
+    DList(
+        {
+            include(UIKitDescriptionList)
+            attrs.builder(this)
+        },
+        contentBuilder
+    )
+}
+
+@Composable
+fun <T> DescriptionList(
+    data: Iterable<T>,
+    attrs: Attrs<HTMLDListElement>,
+    beforeTermContent: (@Composable ElementScope<HTMLElement>.(Int, T) -> Unit)? = null,
+    itemTermAttrs: ((Int, T) -> Attrs<HTMLElement>?)? = null,
+    itemTermContent: (@Composable ElementScope<HTMLElement>.(Int, T) -> Unit)? = null,
+    betweenTermAndDescriptionContent: (@Composable ElementScope<HTMLElement>.(Int, T) -> Unit)? = null,
+    afterDescriptionContent: (@Composable ElementScope<HTMLElement>.(Int, T) -> Unit)? = null,
+    itemDescriptionAttrs: ((Int, T) -> Attrs<HTMLElement>?)? = null,
+    itemDescriptionContent: (@Composable ElementScope<HTMLElement>.(Int, T) -> Unit)? = null
+) {
+    DescriptionList(attrs) {
+        data.forEachIndexed { i, t ->
+            beforeTermContent ?.invoke(this, i, t)
+            if (itemTermAttrs != null || itemTermContent != null) {
+                DTerm(
+                    itemTermAttrs ?.let { { it(i, t) } },
+                    itemTermContent ?.let { { it(i, t) } },
+                )
+            }
+            betweenTermAndDescriptionContent ?.invoke(this, i, t)
+            if (itemDescriptionAttrs != null || itemDescriptionContent != null) {
+                DDescription(
+                    itemDescriptionAttrs ?.let { { it(i, t) } },
+                    itemDescriptionContent ?.let { { it(i, t) } },
+                )
+            }
+            afterDescriptionContent ?.invoke(this, i, t)
+        }
+    }
+}

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

@@ -0,0 +1,27 @@
+package dev.inmo.jsuikit.elements
+
+import androidx.compose.runtime.Composable
+import dev.inmo.jsuikit.modifiers.*
+import dev.inmo.jsuikit.utils.Attrs
+import dev.inmo.jsuikit.utils.InputAttrs
+import org.jetbrains.compose.web.attributes.InputType
+import org.jetbrains.compose.web.dom.*
+import org.w3c.dom.HTMLDivElement
+import org.w3c.dom.HTMLInputElement
+
+@Composable
+fun DropArea(
+    attrs: Attrs<HTMLDivElement> = Attrs.empty(),
+    inputAttrs: InputAttrs<String> = Attrs.empty(),
+    contentBuilder: ContentBuilder<HTMLDivElement> = {}
+) = Div(
+    {
+        include(UIKitPlaceholder, UIKitForm.Custom())
+        attrs.builder(this)
+    }
+) {
+    FileInput {
+        inputAttrs.builder.invoke(this)
+    }
+    contentBuilder(this)
+}

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

@@ -0,0 +1,11 @@
+package dev.inmo.jsuikit.modifiers
+
+sealed class UIKitDescriptionList(
+    override val classes: Array<String>
+) : UIKitModifier {
+
+    object Divider : UIKitDescriptionList(arrayOf("uk-description-list-divider"))
+
+    companion object : UIKitDescriptionList(arrayOf("uk-description-list"))
+
+}

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

@@ -47,8 +47,9 @@ sealed class UIKitForm(
     object Icon : UIKitForm("uk-form-icon")
 
     class Custom(
-        target: String = "true"
+        target: String? = null
     ) : UIKitForm(
+        "uk-form-custom",
         otherAttrs = mapOf(
             buildAttribute("uk-form-custom") {
                 "target" to target

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

@@ -0,0 +1,5 @@
+package dev.inmo.jsuikit.modifiers
+
+object UIKitPlaceholder : UIKitModifier {
+    override val classes: Array<String> = arrayOf("uk-placeholder")
+}

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

@@ -111,4 +111,5 @@ sealed class UIKitUtility(classname: String) : UIKitModifier {
     object Active : UIKitUtility("uk-active")
 
     object Open : UIKitUtility("uk-open")
+    object Link : UIKitUtility("uk-link")
 }

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

@@ -3,19 +3,22 @@ package dev.inmo.jsuikit.utils
 import dev.inmo.jsuikit.modifiers.UIKitModifier
 import dev.inmo.jsuikit.modifiers.include
 import org.jetbrains.compose.web.attributes.AttrsBuilder
+import org.jetbrains.compose.web.attributes.InputType
+import org.jetbrains.compose.web.attributes.builders.InputAttrsBuilder
 import org.jetbrains.compose.web.dom.AttrBuilderContext
 import org.w3c.dom.Element
+import org.w3c.dom.HTMLInputElement
 
-class AttributesCollection<T : Element> (
+class AttributesCollection<T : Element, Builder : AttrsBuilder<T>> (
-    private vararg val modifiers: UIKitModifier,
+    private vararg val modifiers: UIKitModifier?,
-    private val attrs: AttrBuilderContext<T> = {}
+    private val attrs: Builder.() -> Unit = {}
 ) {
-    val builder: AttrBuilderContext<T> = {
+    val builder: Builder.() -> Unit = {
         include(*modifiers)
         attrs()
     }
 
-    operator fun plus(other: AttributesCollection<T>) = AttributesCollection<T>(
+    operator fun plus(other: AttributesCollection<T, Builder>) = AttributesCollection<T, Builder>(
         *(modifiers + other.modifiers).distinct().toTypedArray()
     ) {
         this@AttributesCollection.attrs.invoke(this)
@@ -26,8 +29,9 @@ class AttributesCollection<T : Element> (
         val Empty = Attrs<Element>()
 
         @Suppress("UNCHECKED_CAST")
-        fun <T : Element> empty() = Empty as Attrs<T>
+        fun <T : Element, Builder : AttrsBuilder<T>> empty() = Empty as AttributesCollection<T, Builder>
     }
 }
 
-typealias Attrs<T> = AttributesCollection<T>
+typealias Attrs<T> = AttributesCollection<T, AttrsBuilder<T>>
+typealias InputAttrs<T> = AttributesCollection<HTMLInputElement, InputAttrsBuilder<T>>

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

@@ -0,0 +1,55 @@
+package dev.inmo.jsuikit.utils
+
+import androidx.compose.runtime.Composable
+import kotlinx.browser.document
+import org.jetbrains.compose.web.dom.*
+import org.w3c.dom.*
+
+private object DListElementBuilder : ElementBuilder<HTMLDListElement> {
+    private val el: Element by lazy { document.createElement("dl") }
+    override fun create(): HTMLDListElement = el.cloneNode() as HTMLDListElement
+}
+
+private object DTermElementBuilder : ElementBuilder<HTMLElement> {
+    private val el: Element by lazy { document.createElement("dt") }
+    override fun create(): HTMLElement = el.cloneNode() as HTMLElement
+}
+
+private object DDescriptionElementBuilder : ElementBuilder<HTMLElement> {
+    private val el: Element by lazy { document.createElement("dd") }
+    override fun create(): HTMLElement = el.cloneNode() as HTMLElement
+}
+
+@Composable
+fun DList(
+    attrs: AttrBuilderContext<HTMLDListElement>? = null,
+    content: ContentBuilder<HTMLDListElement>? = null
+) {
+    TagElement(
+        DListElementBuilder,
+        attrs,
+        content
+    )
+}
+@Composable
+fun DTerm(
+    attrs: AttrBuilderContext<HTMLElement>? = null,
+    content: ContentBuilder<HTMLElement>? = null
+) {
+    TagElement(
+        DTermElementBuilder,
+        attrs,
+        content
+    )
+}
+@Composable
+fun DDescription(
+    attrs: AttrBuilderContext<HTMLElement>? = null,
+    content: ContentBuilder<HTMLElement>? = null
+) {
+    TagElement(
+        DDescriptionElementBuilder,
+        attrs,
+        content
+    )
+}