diff --git a/CHANGELOG.md b/CHANGELOG.md index f335481..feee5bf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,7 @@ * Add `UIKitPlaceholder` * `UIKitForm#Custom` now have nullable param target * Add `UIKitUtility#Link` +* Add `DescriptionList` and several support composable functions ## 0.0.40 diff --git a/src/jsMain/kotlin/dev/inmo/jsuikit/elements/DescriptionList.kt b/src/jsMain/kotlin/dev/inmo/jsuikit/elements/DescriptionList.kt new file mode 100644 index 0000000..7510e94 --- /dev/null +++ b/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, + contentBuilder: ContentBuilder +) { + DList( + { + include(UIKitDescriptionList) + attrs.builder(this) + }, + contentBuilder + ) +} + +@Composable +fun DescriptionList( + data: Iterable, + attrs: Attrs, + beforeTermContent: (@Composable ElementScope.(Int, T) -> Unit)? = null, + itemTermAttrs: ((Int, T) -> Attrs?)? = null, + itemTermContent: (@Composable ElementScope.(Int, T) -> Unit)? = null, + betweenTermAndDescriptionContent: (@Composable ElementScope.(Int, T) -> Unit)? = null, + afterDescriptionContent: (@Composable ElementScope.(Int, T) -> Unit)? = null, + itemDescriptionAttrs: ((Int, T) -> Attrs?)? = null, + itemDescriptionContent: (@Composable ElementScope.(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) + } + } +} diff --git a/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitDescriptionList.kt b/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitDescriptionList.kt new file mode 100644 index 0000000..1292c4e --- /dev/null +++ b/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 +) : UIKitModifier { + + object Divider : UIKitDescriptionList(arrayOf("uk-description-list-divider")) + + companion object : UIKitDescriptionList(arrayOf("uk-description-list")) + +} diff --git a/src/jsMain/kotlin/dev/inmo/jsuikit/utils/Dlist.kt b/src/jsMain/kotlin/dev/inmo/jsuikit/utils/Dlist.kt new file mode 100644 index 0000000..c886d2c --- /dev/null +++ b/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 { + private val el: Element by lazy { document.createElement("dl") } + override fun create(): HTMLDListElement = el.cloneNode() as HTMLDListElement +} + +private object DTermElementBuilder : ElementBuilder { + private val el: Element by lazy { document.createElement("dt") } + override fun create(): HTMLElement = el.cloneNode() as HTMLElement +} + +private object DDescriptionElementBuilder : ElementBuilder { + private val el: Element by lazy { document.createElement("dd") } + override fun create(): HTMLElement = el.cloneNode() as HTMLElement +} + +@Composable +fun DList( + attrs: AttrBuilderContext? = null, + content: ContentBuilder? = null +) { + TagElement( + DListElementBuilder, + attrs, + content + ) +} +@Composable +fun DTerm( + attrs: AttrBuilderContext? = null, + content: ContentBuilder? = null +) { + TagElement( + DTermElementBuilder, + attrs, + content + ) +} +@Composable +fun DDescription( + attrs: AttrBuilderContext? = null, + content: ContentBuilder? = null +) { + TagElement( + DDescriptionElementBuilder, + attrs, + content + ) +}