diff --git a/CHANGELOG.md b/CHANGELOG.md index 4aa1eb0..3f64d34 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,10 @@ ## 0.0.30 +* Add `UIKitComment` +* Including of `Comment` element +* Upfill `UIKitSubNav` + ## 0.0.29 * Unfilling of `UIKitText` diff --git a/src/jsMain/kotlin/dev/inmo/jsuikit/elements/Comment.kt b/src/jsMain/kotlin/dev/inmo/jsuikit/elements/Comment.kt new file mode 100644 index 0000000..65774d7 --- /dev/null +++ b/src/jsMain/kotlin/dev/inmo/jsuikit/elements/Comment.kt @@ -0,0 +1,106 @@ +package dev.inmo.jsuikit.elements + +import androidx.compose.runtime.Composable +import dev.inmo.jsuikit.modifiers.* +import dev.inmo.jsuikit.utils.* +import org.jetbrains.compose.web.dom.* +import org.w3c.dom.* + +@Composable +fun Comment( + rootAttrs: Attrs = Attrs.empty(), + headerAttrs: Attrs? = null, + headerContent: ContentBuilder? = null, + bodyAttrs: Attrs? = null, + bodyContent: ContentBuilder? = null, +) { + Article( + { + include(UIKitComment) + rootAttrs.builder(this) + } + ) { + if (headerAttrs != null || headerContent != null) { + Header ( + { + include(UIKitComment.Header) + headerAttrs ?.builder ?.invoke(this) + } + ) { + headerContent ?.let { it(this) } + } + } + if (bodyAttrs != null || bodyContent != null) { + Div( + { + include(UIKitComment.Body) + bodyAttrs ?.builder ?.invoke(this) + } + ) { + bodyContent ?.let { it(this) } + } + } + } +} + +@Composable +fun DefaultComment( + headerGridAttrs: Attrs? = null, + avatarUrl: String? = null, + avatarAttrs: Attrs? = null, + titleAttrs: Attrs? = null, + titleContent: ContentBuilder? = null, + metaAttrs: Attrs? = null, + metaContent: ContentBuilder? = null, + rootAttrs: Attrs = Attrs.empty(), + headerAttrs: Attrs? = null, + additionalHeaderContent: ContentBuilder? = null, + bodyAttrs: Attrs? = null, + bodyContent: ContentBuilder? = null, +) { + Comment( + rootAttrs = rootAttrs, + headerAttrs = headerAttrs, + headerContent = { + if (arrayOf(headerGridAttrs, avatarUrl, avatarAttrs, titleAttrs, titleContent, metaAttrs, metaContent).anyNotNull()) { + Grid( + UIKitGrid.Gap.Medium, UIKitFlex.Alignment.Vertical.Middle, + attributesCustomizer = headerGridAttrs ?.builder ?: {} + ) { + if (avatarUrl != null) { + Div({ include(UIKitWidth.Auto) }) { + Img(avatarUrl, attrs = avatarAttrs ?.builder) + } + } + if (arrayOf(titleAttrs, titleContent, metaAttrs, metaContent).anyNotNull()) { + Div({ include(UIKitWidth.Expand) }) { + optionallyDraw(titleAttrs, titleContent) { + H4( + { + include(UIKitComment.Title, UIKitMargin.Remove) + titleAttrs ?.builder ?.invoke(this) + } + ) { + titleContent ?.invoke(this) + } + } + optionallyDraw(metaAttrs, metaContent) { + Ul ( + { + include(UIKitComment.Meta, UIKitSubNav, UIKitSubNav.Divider, UIKitMargin.Remove.Top) + metaAttrs ?.builder ?.invoke(this) + } + ) { + metaContent ?.invoke(this) + } + } + } + } + } + } + additionalHeaderContent ?.let { it(this) } + }, + bodyAttrs = bodyAttrs, + bodyContent = bodyContent + ) +} diff --git a/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitComment.kt b/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitComment.kt new file mode 100644 index 0000000..ba320a9 --- /dev/null +++ b/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitComment.kt @@ -0,0 +1,17 @@ +package dev.inmo.jsuikit.modifiers + +sealed class UIKitComment(suffix: String?) : UIKitModifier { + override val classes: Array = arrayOf("uk-comment${suffix ?.let { "-$it" } ?: ""}") + + object Body : UIKitComment("body") + object Header : UIKitComment("header") + object Title : UIKitComment("title") + object Meta : UIKitComment("meta") + object Avatar : UIKitComment("avatar") + + object Primary : UIKitComment("primary") + + object List : UIKitComment("list") + + companion object : UIKitComment(null) +} diff --git a/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitNav.kt b/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitNav.kt index 37c815e..27c925a 100644 --- a/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitNav.kt +++ b/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitNav.kt @@ -4,7 +4,6 @@ sealed class UIKitNav(classname: String) : UIKitModifier { override val classes: Array = arrayOf(classname) object ParentIcon : UIKitNav("uk-nav-parent-icon") - object SubNav : UIKitNav("uk-nav-sub") object Header : UIKitNav("uk-nav-header") object Divider : UIKitNav("uk-nav-divider") @@ -15,5 +14,7 @@ sealed class UIKitNav(classname: String) : UIKitModifier { object Center : UIKitNav("uk-nav-center") - companion object : UIKitNav("uk-nav") + companion object : UIKitNav("uk-nav") { + val SubNav = UIKitSubNav + } } diff --git a/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitSubNav.kt b/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitSubNav.kt new file mode 100644 index 0000000..2191b8a --- /dev/null +++ b/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitSubNav.kt @@ -0,0 +1,10 @@ +package dev.inmo.jsuikit.modifiers + +sealed class UIKitSubNav(classname: String) : UIKitModifier { + override val classes: Array = arrayOf(classname) + + object Divider : UIKitSubNav("uk-subnav-divider") + object Pill : UIKitSubNav("uk-subnav-pill") + + companion object : UIKitSubNav("uk-subnav") +} diff --git a/src/jsMain/kotlin/dev/inmo/jsuikit/utils/AnyNotNull.kt b/src/jsMain/kotlin/dev/inmo/jsuikit/utils/AnyNotNull.kt new file mode 100644 index 0000000..407c330 --- /dev/null +++ b/src/jsMain/kotlin/dev/inmo/jsuikit/utils/AnyNotNull.kt @@ -0,0 +1,11 @@ +package dev.inmo.jsuikit.utils + +fun Array.anyNotNull(): Boolean { + for (item in this) { + if (item != null) { + return true + } + } + + return false +} diff --git a/src/jsMain/kotlin/dev/inmo/jsuikit/utils/OptionallyDraw.kt b/src/jsMain/kotlin/dev/inmo/jsuikit/utils/OptionallyDraw.kt new file mode 100644 index 0000000..dcad048 --- /dev/null +++ b/src/jsMain/kotlin/dev/inmo/jsuikit/utils/OptionallyDraw.kt @@ -0,0 +1,16 @@ +package dev.inmo.jsuikit.utils + +import androidx.compose.runtime.Composable +import org.jetbrains.compose.web.dom.ContentBuilder +import org.w3c.dom.Element + +@Composable +inline fun optionallyDraw ( + attrs: Attrs? = null, + noinline contentBuilder: ContentBuilder? = null, + whatToDraw: @Composable () -> Unit +) { + if (attrs != null || contentBuilder != null) { + whatToDraw() + } +}