diff --git a/CHANGELOG.md b/CHANGELOG.md index 411493a..a2251e9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,10 @@ # Changelog +## 0.1.3 + +* Add support of sections +* Improve support of navbars + ## 0.1.2 * New typealias `AttrsWithContentBuilder` diff --git a/gradle.properties b/gradle.properties index 5053701..91e5a9e 100644 --- a/gradle.properties +++ b/gradle.properties @@ -9,4 +9,4 @@ android.enableJetifier=true # Project data group=dev.inmo -version=0.1.2 +version=0.1.3 diff --git a/src/jsMain/kotlin/dev/inmo/jsuikit/elements/DropArea.kt b/src/jsMain/kotlin/dev/inmo/jsuikit/elements/DropArea.kt index 1a18195..dbfd41e 100644 --- a/src/jsMain/kotlin/dev/inmo/jsuikit/elements/DropArea.kt +++ b/src/jsMain/kotlin/dev/inmo/jsuikit/elements/DropArea.kt @@ -10,7 +10,7 @@ import org.w3c.dom.HTMLDivElement @Composable fun DropArea( attrs: Attrs = Attrs.empty(), - inputAttrs: InputAttrs = Attrs.empty(), + inputAttrs: InputAttrs = InputAttrs.empty(), contentBuilder: ContentBuilder = {} ) = Div( { diff --git a/src/jsMain/kotlin/dev/inmo/jsuikit/elements/Navbar.kt b/src/jsMain/kotlin/dev/inmo/jsuikit/elements/Navbar.kt index 5c94117..ca54814 100644 --- a/src/jsMain/kotlin/dev/inmo/jsuikit/elements/Navbar.kt +++ b/src/jsMain/kotlin/dev/inmo/jsuikit/elements/Navbar.kt @@ -1,35 +1,76 @@ package dev.inmo.jsuikit.elements import androidx.compose.runtime.Composable -import dev.inmo.jsuikit.modifiers.UIKitModifier -import dev.inmo.jsuikit.modifiers.include +import dev.inmo.jsuikit.modifiers.* +import dev.inmo.jsuikit.utils.* import org.jetbrains.compose.web.dom.* +import org.w3c.dom.HTMLDivElement import org.w3c.dom.HTMLElement @Composable fun Navbar( - leftBuilder: NavbarNavBuilder? = null, + attributesCustomizer: AttrBuilderContext = {}, + contentBuilder: ContentBuilder +) { + Nav( + { + include(UIKitNavbar, UIKitNavbar(), UIKitNavbar.Container) + attributesCustomizer() + } + ) { + contentBuilder() + } +} + +@Deprecated("Will be removed soon. Use the variant with AttrsWithContentBuilders") +@Composable +fun Navbar( + leftBuilder: NavbarNavBuilder?, centerBuilder: NavbarNavBuilder? = null, rightBuilder: NavbarNavBuilder? = null, vararg navModifiers: UIKitModifier, attributesCustomizer: AttrBuilderContext = {}, ) { - Nav( + Navbar( { - attr("uk-navbar", "") - classes("uk-navbar-container", "uk-navbar") include(*navModifiers) attributesCustomizer() } ) { leftBuilder ?.let { - Div({ classes("uk-navbar-left") }) { it.draw() } + Div({ include(UIKitNavbar.Alignment.Left) }) { it.draw() } } centerBuilder ?.let { - Div({ classes("uk-navbar-center") }) { it.draw() } + Div({ include(UIKitNavbar.Alignment.Center) }) { it.draw() } } rightBuilder ?.let { - Div({ classes("uk-navbar-right") }) { it.draw() } + Div({ include(UIKitNavbar.Alignment.Right) }) { it.draw() } + } + } +} + +@Composable +fun Navbar( + leftBuilder: AttrsWithContentBuilder? = null, + centerBuilder: AttrsWithContentBuilder? = null, + rightBuilder: AttrsWithContentBuilder? = null, + vararg navModifiers: UIKitModifier, + attributesCustomizer: AttrBuilderContext = {}, +) { + Navbar( + attributesCustomizer = { + include(*navModifiers) + attributesCustomizer() + } + ) { + leftBuilder ?.let { + Div({ include(UIKitNavbar.Alignment.Left);leftBuilder.attributesBuilderContext(this) }, leftBuilder.builder) + } + centerBuilder ?.let { + Div({ include(UIKitNavbar.Alignment.Center);centerBuilder.attributesBuilderContext(this) }, centerBuilder.builder) + } + rightBuilder ?.let { + Div({ include(UIKitNavbar.Alignment.Right);rightBuilder.attributesBuilderContext(this) }, rightBuilder.builder) } } } diff --git a/src/jsMain/kotlin/dev/inmo/jsuikit/elements/NavbarNavBuilder.kt b/src/jsMain/kotlin/dev/inmo/jsuikit/elements/NavbarNavBuilder.kt index 184293a..b919dc1 100644 --- a/src/jsMain/kotlin/dev/inmo/jsuikit/elements/NavbarNavBuilder.kt +++ b/src/jsMain/kotlin/dev/inmo/jsuikit/elements/NavbarNavBuilder.kt @@ -1,13 +1,37 @@ package dev.inmo.jsuikit.elements import androidx.compose.runtime.Composable -import dev.inmo.jsuikit.modifiers.UIKitModifier -import dev.inmo.jsuikit.modifiers.include +import dev.inmo.jsuikit.modifiers.* +import dev.inmo.jsuikit.utils.* import org.jetbrains.compose.web.attributes.AttrsScope import org.jetbrains.compose.web.dom.* import org.w3c.dom.HTMLLIElement import org.w3c.dom.HTMLUListElement +@Composable +fun NavbarNav( + elements: List>, + attrs: Attrs = Attrs.empty() +) { + Ul( + { + include(UIKitNavbar.Nav) + attrs.builder(this) + } + ) { + elements.forEach { element -> + Li(element.attributesBuilderContext, element.builder) + } + } +} + +@Composable +fun NavbarNav( + vararg elements: AttrsWithContentBuilder, + attrs: Attrs = Attrs.empty() +) = NavbarNav(elements.toList(), attrs) + +@Deprecated("Will be removed soon. Use NavbarNavPart with AttrsWithContentBuilder instead") interface NavbarNavElement { fun AttrsScope.setup() {} @Composable @@ -28,6 +52,7 @@ interface NavbarNavElement { } } +@Deprecated("Will be removed soon. Use NavbarNavPart with AttrsWithContentBuilder instead") class NavbarNavBuilder( private val modifiers: Array, private val elements: List, @@ -46,8 +71,7 @@ class NavbarNavBuilder( fun draw() { Ul( { - classes("uk-navbar-nav") - include(*modifiers) + include(UIKitNavbar.Nav, *modifiers) attributesCustomizer() } ) { diff --git a/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitNav.kt b/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitNav.kt index 27c925a..5e8c34f 100644 --- a/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitNav.kt +++ b/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitNav.kt @@ -14,6 +14,8 @@ sealed class UIKitNav(classname: String) : UIKitModifier { object Center : UIKitNav("uk-nav-center") + object Sub : UIKitNav("uk-nav-sub") + companion object : UIKitNav("uk-nav") { val SubNav = UIKitSubNav } diff --git a/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitNavbar.kt b/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitNavbar.kt index a23932a..9b2c318 100644 --- a/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitNavbar.kt +++ b/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitNavbar.kt @@ -1,17 +1,86 @@ package dev.inmo.jsuikit.modifiers -sealed class UIKitNavbar(suffix: String) : UIKitModifier { - override val classes: Array = arrayOf("uk-navbar-$suffix") +import dev.inmo.jsuikit.types.Dropdown +import dev.inmo.jsuikit.utils.* - object Transparent : UIKitNavbar("transparent") - sealed class Dropdown(suffix: String?) : UIKitNavbar("dropdown${suffix ?.let { "-$it" } ?: ""}") { +sealed class UIKitNavbar(vararg classes: String) : UIKitModifier { + override val classes: Array = classes as Array + + object Transparent : UIKitNavbar("uk-navbar-transparent") + object Container : UIKitNavbar("uk-navbar-container") + sealed class Dropdown(suffix: String?) : UIKitNavbar("uk-navbar-dropdown${suffix ?.let { "-$it" } ?: ""}") { object Nav : Dropdown("nav") + sealed class Width(suffix: String) : Dropdown(suffix) { + object Two : Width("width-2") + object Three : Width("width-3") + object Four : Width("width-4") + object Five : Width("width-5") + } + companion object : Dropdown(null) } - object Item : UIKitNavbar("item") + sealed class Alignment(val suffix: String) : UIKitNavbar("uk-navbar-$suffix") { + object Left : Alignment("left") + sealed class Center(suffix: String) : Alignment(suffix) { + object Left : Center("center-left") + object Right : Center("center-right") - companion object { + companion object : Center("center") + } + object Right : Alignment("right") + } + object Item : UIKitNavbar("uk-navbar-item") + object Nav : UIKitNavbar("uk-navbar-nav") + object Subtitle : UIKitNavbar("uk-navbar-subtitle") + object Toggle : UIKitNavbar("uk-navbar-toggle") + object Sticky : UIKitNavbar("uk-navbar-sticky") + + class Component internal constructor( + override val otherAttrs: Map + ) : UIKitNavbar(*UIKitNavbar.classes) + + companion object : UIKitNavbar("uk-navbar") { val Logo = UIKitUtility.Logo + + operator fun invoke( + align: String?, + mode: String? = null, + delayShow: Milliseconds? = null, + delayHide: Milliseconds? = null, + boundary: String? = null, + boundaryAlign: Boolean? = null, + offset: Pixels? = null, + dropbar: Boolean? = null, + duration: Milliseconds? = null + ): Component { + return Component( + mapOf( + buildAttribute(UIKitNavbar.classes.first()) { + "align" to align + "mode" to mode + "delay-show" to delayShow + "delay-hide" to delayHide + "boundary" to boundary + "boundary-align" to boundaryAlign + "offset" to offset + "dropbar" to dropbar + "duration" to duration + } + ) + ) + } + + operator fun invoke( + align: Alignment? = null, + mode: UIKitDropdown.Mode? = null, + delayShow: Milliseconds? = null, + delayHide: Milliseconds? = null, + boundary: String? = null, + boundaryAlign: Boolean? = null, + offset: Pixels? = null, + dropbar: Boolean? = null, + duration: Milliseconds? = null + ): Component = invoke(align ?.suffix, mode ?.name, delayShow, delayHide, boundary, boundaryAlign, offset, dropbar, duration) } } diff --git a/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitSection.kt b/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitSection.kt new file mode 100644 index 0000000..46d1b90 --- /dev/null +++ b/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitSection.kt @@ -0,0 +1,23 @@ +package dev.inmo.jsuikit.modifiers + +sealed class UIKitSection(vararg classes: String) : UIKitModifier { + override val classes: Array = classes as Array + + sealed class Style(suffix: String) : UIKitSection("uk-section-$suffix") { + object Default : Style("default") + object Muted : Style("muted") + object Primary : Style("primary") + object Secondary : Style("secondary") + } + + sealed class Size(suffix: String) : UIKitSection("uk-section-$suffix") { + object XSmall : Size("xsmall") + object Small : Size("small") + object Large : Size("large") + object XLarge : Size("xlarge") + } + + object Overlap : UIKitSection("uk-section-overlap") + + companion object : UIKitSection("uk-section") +} diff --git a/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitUtility.kt b/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitUtility.kt index 515e0b7..e1c62f2 100644 --- a/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitUtility.kt +++ b/src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitUtility.kt @@ -38,7 +38,10 @@ sealed class UIKitUtility(classname: String) : UIKitModifier { object Width : Responsive("width") object Height : Responsive("height") } - object PreserveWidth : UIKitUtility("uk-preserve-width") + sealed class Preserve(suffix: String) : UIKitUtility("uk-preserve-$suffix") { + object Width : Preserve("width") + object Color : Preserve("color") + } sealed class Border(suffix: String) : UIKitUtility("uk-border-$suffix") { object Rounded : Border("rounded") @@ -112,4 +115,8 @@ sealed class UIKitUtility(classname: String) : UIKitModifier { object Open : UIKitUtility("uk-open") object Link : UIKitUtility("uk-link") + + companion object { + val PreserveWidth = Preserve.Width + } } diff --git a/src/jsMain/kotlin/dev/inmo/jsuikit/utils/AttrsWithContentBuilder.kt b/src/jsMain/kotlin/dev/inmo/jsuikit/utils/AttrsWithContentBuilder.kt index 5bef24b..f96a0b4 100644 --- a/src/jsMain/kotlin/dev/inmo/jsuikit/utils/AttrsWithContentBuilder.kt +++ b/src/jsMain/kotlin/dev/inmo/jsuikit/utils/AttrsWithContentBuilder.kt @@ -1,10 +1,27 @@ package dev.inmo.jsuikit.utils +import dev.inmo.jsuikit.modifiers.UIKitModifier +import org.jetbrains.compose.web.attributes.AttrsScope import org.jetbrains.compose.web.dom.ContentBuilder import org.w3c.dom.Element typealias AttrsWithContentBuilder = Pair, ContentBuilder> +@Suppress("NOTHING_TO_INLINE") +inline fun AttrsWithContentBuilder( + vararg modifiers: UIKitModifier?, + noinline attrs: AttrsScope.() -> Unit = {}, + noinline builder: ContentBuilder +) = AttrsWithContentBuilder( + Attrs(*modifiers, attrs = attrs), + builder +) + +@Suppress("NOTHING_TO_INLINE") +inline fun AttrsWithContentBuilder(attrs: Attrs) = AttrsWithContentBuilder( + attrs +) {} + inline val AttrsWithContentBuilder.attrs get() = first