diff --git a/CHANGELOG.md b/CHANGELOG.md index de7ef7b..6ad064e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,8 @@ ## 0.0.37 +* Support of `Accordion` element + ## 0.0.36 * Reorder arguments in `DefaultComment` fun diff --git a/src/jsMain/kotlin/dev/inmo/jsuikit/elements/Accordion.kt b/src/jsMain/kotlin/dev/inmo/jsuikit/elements/Accordion.kt new file mode 100644 index 0000000..36eb804 --- /dev/null +++ b/src/jsMain/kotlin/dev/inmo/jsuikit/elements/Accordion.kt @@ -0,0 +1,89 @@ +package dev.inmo.jsuikit.elements + +import androidx.compose.runtime.Composable +import dev.inmo.jsuikit.modifiers.UIKitAccordion +import dev.inmo.jsuikit.modifiers.include +import dev.inmo.jsuikit.utils.Attrs +import org.jetbrains.compose.web.attributes.AttrsBuilder +import org.jetbrains.compose.web.dom.* +import org.w3c.dom.* + +@Composable +fun Accordion( + data: Iterable, + attrs: Attrs = Attrs.empty(), + itemAttrsBuilder: AttrsBuilder.(Int, T) -> Unit = { _, _ -> }, + itemContentBuilder: @Composable ElementScope.(Int, T) -> Unit +) { + Ul( + { + include() + attrs.builder(this) + } + ) { + data.forEachIndexed { i, t -> + Li({ itemAttrsBuilder(i, t) }) { + itemContentBuilder(i, t) + } + } + } +} + +@Composable +fun DefaultAccordion( + data: Iterable, + attrs: Attrs = Attrs.empty(), + itemAttrsBuilder: AttrsBuilder.(Int, T) -> Unit = { _, _ -> }, + titleAttrsBuilder: AttrsBuilder.(Int, T) -> Unit = { _, _ -> }, + titleContentBuilder: @Composable ElementScope.(Int, T) -> Unit = { _, _ -> }, + beforeTitleContentBuilder: @Composable ElementScope.(Int, T) -> Unit = { _, _ -> }, + afterTitleContentBuilder: @Composable ElementScope.(Int, T) -> Unit = { _, _ -> }, + afterContentContentBuilder: @Composable ElementScope.(Int, T) -> Unit = { _, _ -> }, + contentAttrsBuilder: AttrsBuilder.(Int, T) -> Unit = { _, _ -> }, + contentContentBuilder: @Composable ElementScope.(Int, T) -> Unit +) = Accordion( + data, + attrs, + itemAttrsBuilder +) { i, t -> + beforeTitleContentBuilder(i, t) + A( + attrs = { + include(UIKitAccordion.Title) + titleAttrsBuilder(i, t) + } + ) { + titleContentBuilder(i, t) + } + afterTitleContentBuilder(i, t) + Div( + { + include(UIKitAccordion.Content) + contentAttrsBuilder(i, t) + } + ) { + contentContentBuilder(i, t) + } + afterContentContentBuilder(i, t) +} + +@Composable +fun DefaultAccordion( + data: Iterable, + titleResolver: (Int, T) -> String, + attrs: Attrs = Attrs.empty(), + itemAttrsBuilder: AttrsBuilder.(Int, T) -> Unit = { _, _ -> }, + titleAttrsBuilder: AttrsBuilder.(Int, T) -> Unit = { _, _ -> }, + contentAttrsBuilder: AttrsBuilder.(Int, T) -> Unit = { _, _ -> }, + contentContentBuilder: @Composable ElementScope.(Int, T) -> Unit +) = DefaultAccordion( + data, + attrs, + itemAttrsBuilder, + titleAttrsBuilder, + { i, t -> + org.jetbrains.compose.web.dom.Text(titleResolver(i, t)) + }, + contentAttrsBuilder = contentAttrsBuilder, + contentContentBuilder = contentContentBuilder +) diff --git a/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitAccordion.kt b/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitAccordion.kt new file mode 100644 index 0000000..85554ea --- /dev/null +++ b/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitAccordion.kt @@ -0,0 +1,51 @@ +package dev.inmo.jsuikit.modifiers + +import dev.inmo.jsuikit.utils.* +import org.w3c.dom.PageTransitionEvent + +sealed class UIKitAccordion( + vararg classnames: String, + override val otherAttrs: Map = emptyMap() +) : UIKitModifier { + @Suppress("UNCHECKED_CAST") + override val classes: Array = classnames as Array + + object Title : UIKitAccordion("uk-accordion-title") + object Content : UIKitAccordion("uk-accordion-content") + + class Custom internal constructor( + otherAttrs: Map = emptyMap() + ) : UIKitAccordion (otherAttrs = otherAttrs) + + companion object : UIKitAccordion("uk-accordion") { + val Open = UIKitUtility.Open + + operator fun invoke( + activeItemIndex: Int? = null, + animation: Boolean? = null, + collapsible: Boolean? = null, + contentSelector: String? = null, + animationDuration: Milliseconds? = null, + multiple: Boolean? = null, + targetsSelector: String? = null, + toggleSelector: String? = null, + transition: PageTransitionEvent? = null, + offsetTopPixels: Int? = null, + ) = Custom( + mapOf( + buildAttribute("uk-accordion") { + "active" to activeItemIndex + "animation" to animation + "collapsible" to collapsible + "content" to contentSelector + "duration" to animationDuration + "multiple" to multiple + "targets" to targetsSelector + "toggle" to toggleSelector + "transition" to transition + "offset" to offsetTopPixels + } + ) + ) + } +} diff --git a/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitUtility.kt b/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitUtility.kt index 7833989..97f5249 100644 --- a/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitUtility.kt +++ b/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitUtility.kt @@ -109,4 +109,6 @@ sealed class UIKitUtility(classname: String) : UIKitModifier { object Disabled : UIKitUtility("uk-disabled") object Drag : UIKitUtility("uk-drag") object Active : UIKitUtility("uk-active") + + object Open : UIKitUtility("uk-open") }