2022-01-12 10:27:49 +00:00
|
|
|
package dev.inmo.jsuikit.elements
|
2021-12-22 08:38:12 +00:00
|
|
|
|
|
|
|
import androidx.compose.runtime.Composable
|
2022-01-12 10:27:49 +00:00
|
|
|
import dev.inmo.jsuikit.buildAndAddAttribute
|
2022-01-12 13:58:52 +00:00
|
|
|
import dev.inmo.jsuikit.modifiers.*
|
2022-01-12 10:27:49 +00:00
|
|
|
import dev.inmo.jsuikit.utils.Milliseconds
|
2021-12-22 08:38:12 +00:00
|
|
|
import org.jetbrains.compose.web.dom.*
|
2022-01-20 13:56:46 +00:00
|
|
|
import org.jetbrains.compose.web.dom.Text
|
|
|
|
import org.w3c.dom.*
|
2021-12-22 08:38:12 +00:00
|
|
|
|
|
|
|
@Composable
|
|
|
|
fun Nav(
|
2022-01-13 13:56:39 +00:00
|
|
|
vararg modifiers: UIKitModifier,
|
2021-12-22 08:38:12 +00:00
|
|
|
multiple: Boolean? = null,
|
|
|
|
collapsible: Boolean? = null,
|
|
|
|
animation: UIKitAnimation? = null,
|
|
|
|
duration: Milliseconds? = null,
|
2022-01-13 05:55:08 +00:00
|
|
|
attributesCustomizer: AttrBuilderContext<HTMLUListElement> = {},
|
2021-12-22 08:38:12 +00:00
|
|
|
dataAllocator: ContentBuilder<HTMLUListElement>
|
|
|
|
) {
|
|
|
|
Ul(
|
|
|
|
{
|
|
|
|
buildAndAddAttribute("uk-nav") {
|
|
|
|
"multiple" to multiple ?.toString()
|
|
|
|
"collapsible" to collapsible ?.toString()
|
|
|
|
"animation" to animation
|
|
|
|
"duration" to duration ?.toString()
|
|
|
|
}
|
2022-01-21 05:31:00 +00:00
|
|
|
include(*modifiers, UIKitNav)
|
2022-01-13 05:55:08 +00:00
|
|
|
attributesCustomizer()
|
2021-12-22 08:38:12 +00:00
|
|
|
}
|
|
|
|
) {
|
|
|
|
dataAllocator()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-01-21 05:31:00 +00:00
|
|
|
@Composable
|
|
|
|
fun DefaultNav(
|
|
|
|
vararg modifiers: UIKitModifier,
|
|
|
|
multiple: Boolean? = null,
|
|
|
|
collapsible: Boolean? = null,
|
|
|
|
animation: UIKitAnimation? = null,
|
|
|
|
duration: Milliseconds? = null,
|
|
|
|
attributesCustomizer: AttrBuilderContext<HTMLUListElement> = {},
|
|
|
|
dataAllocator: ContentBuilder<HTMLUListElement>
|
|
|
|
) = Nav(
|
|
|
|
modifiers = modifiers + UIKitNav.Default,
|
|
|
|
multiple,
|
|
|
|
collapsible,
|
|
|
|
animation,
|
|
|
|
duration,
|
|
|
|
attributesCustomizer,
|
|
|
|
dataAllocator
|
|
|
|
)
|
|
|
|
|
|
|
|
@Composable
|
|
|
|
fun PrimaryNav(
|
|
|
|
vararg modifiers: UIKitModifier,
|
|
|
|
multiple: Boolean? = null,
|
|
|
|
collapsible: Boolean? = null,
|
|
|
|
animation: UIKitAnimation? = null,
|
|
|
|
duration: Milliseconds? = null,
|
|
|
|
attributesCustomizer: AttrBuilderContext<HTMLUListElement> = {},
|
|
|
|
dataAllocator: ContentBuilder<HTMLUListElement>
|
|
|
|
) = Nav(
|
|
|
|
modifiers = modifiers + UIKitNav.Primary,
|
|
|
|
multiple,
|
|
|
|
collapsible,
|
|
|
|
animation,
|
|
|
|
duration,
|
|
|
|
attributesCustomizer,
|
|
|
|
dataAllocator
|
|
|
|
)
|
|
|
|
|
|
|
|
@Composable
|
|
|
|
fun SubNav(
|
|
|
|
vararg modifiers: UIKitModifier,
|
|
|
|
multiple: Boolean? = null,
|
|
|
|
collapsible: Boolean? = null,
|
|
|
|
animation: UIKitAnimation? = null,
|
|
|
|
duration: Milliseconds? = null,
|
|
|
|
attributesCustomizer: AttrBuilderContext<HTMLUListElement> = {},
|
|
|
|
dataAllocator: ContentBuilder<HTMLUListElement>
|
|
|
|
) = Nav(
|
|
|
|
modifiers = modifiers + UIKitNav.SubNav,
|
|
|
|
multiple,
|
|
|
|
collapsible,
|
|
|
|
animation,
|
|
|
|
duration,
|
|
|
|
attributesCustomizer,
|
|
|
|
dataAllocator
|
|
|
|
)
|
|
|
|
|
2022-01-20 13:56:46 +00:00
|
|
|
@Composable
|
|
|
|
fun <T> Nav(
|
2022-04-03 10:03:13 +00:00
|
|
|
title: String?,
|
2022-03-25 11:13:50 +00:00
|
|
|
data: Iterable<T>,
|
2022-01-20 13:56:46 +00:00
|
|
|
vararg ulModifiers: UIKitModifier,
|
|
|
|
titleModifiers: Array<UIKitModifier> = emptyArray(),
|
|
|
|
multiple: Boolean? = null,
|
|
|
|
collapsible: Boolean? = null,
|
|
|
|
animation: UIKitAnimation? = null,
|
|
|
|
duration: Milliseconds? = null,
|
|
|
|
besidesTitleAndList: ContentBuilder<HTMLUListElement>? = null,
|
|
|
|
titleCustomizer: AttrBuilderContext<HTMLLIElement> = {},
|
2022-04-03 18:07:33 +00:00
|
|
|
afterTitleContentBuilder: ContentBuilder<HTMLLIElement> = {},
|
2022-01-20 13:56:46 +00:00
|
|
|
ulCustomizer: AttrBuilderContext<HTMLUListElement> = {},
|
|
|
|
elementAllocator: @Composable ElementScope<HTMLUListElement>.(T) -> Unit
|
|
|
|
) {
|
|
|
|
Ul(
|
|
|
|
{
|
|
|
|
buildAndAddAttribute("uk-nav") {
|
|
|
|
"multiple" to multiple ?.toString()
|
|
|
|
"collapsible" to collapsible ?.toString()
|
|
|
|
"animation" to animation
|
|
|
|
"duration" to duration ?.toString()
|
|
|
|
}
|
2022-01-21 05:31:00 +00:00
|
|
|
include(*ulModifiers, UIKitNav)
|
2022-01-20 13:56:46 +00:00
|
|
|
ulCustomizer()
|
|
|
|
}
|
|
|
|
) {
|
2022-04-03 10:03:13 +00:00
|
|
|
title ?.let {
|
|
|
|
NavHeader(
|
|
|
|
title,
|
|
|
|
*titleModifiers,
|
2022-04-03 17:58:08 +00:00
|
|
|
attributesCustomizer = titleCustomizer,
|
2022-04-03 18:07:33 +00:00
|
|
|
afterTitleContentBuilder = afterTitleContentBuilder
|
2022-04-03 10:03:13 +00:00
|
|
|
)
|
|
|
|
}
|
2022-01-20 13:56:46 +00:00
|
|
|
besidesTitleAndList ?.let { it() }
|
|
|
|
data.forEach {
|
|
|
|
elementAllocator(it)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-01-21 05:31:00 +00:00
|
|
|
@Composable
|
|
|
|
fun <T> DefaultNav(
|
2022-04-03 10:03:13 +00:00
|
|
|
title: String?,
|
2022-03-25 11:13:50 +00:00
|
|
|
data: Iterable<T>,
|
2022-01-21 05:31:00 +00:00
|
|
|
vararg ulModifiers: UIKitModifier,
|
|
|
|
titleModifiers: Array<UIKitModifier> = emptyArray(),
|
|
|
|
multiple: Boolean? = null,
|
|
|
|
collapsible: Boolean? = null,
|
|
|
|
animation: UIKitAnimation? = null,
|
|
|
|
duration: Milliseconds? = null,
|
|
|
|
besidesTitleAndList: ContentBuilder<HTMLUListElement>? = null,
|
|
|
|
titleCustomizer: AttrBuilderContext<HTMLLIElement> = {},
|
2022-04-03 18:07:33 +00:00
|
|
|
afterTitleContentBuilder: ContentBuilder<HTMLLIElement> = {},
|
2022-01-21 05:31:00 +00:00
|
|
|
ulCustomizer: AttrBuilderContext<HTMLUListElement> = {},
|
|
|
|
elementAllocator: @Composable ElementScope<HTMLUListElement>.(T) -> Unit
|
|
|
|
) = Nav(
|
|
|
|
title,
|
|
|
|
data,
|
|
|
|
ulModifiers = ulModifiers + UIKitNav.Default,
|
|
|
|
titleModifiers,
|
|
|
|
multiple,
|
|
|
|
collapsible,
|
|
|
|
animation,
|
|
|
|
duration,
|
|
|
|
besidesTitleAndList,
|
|
|
|
titleCustomizer,
|
2022-04-03 18:07:33 +00:00
|
|
|
afterTitleContentBuilder,
|
2022-01-21 05:31:00 +00:00
|
|
|
ulCustomizer,
|
|
|
|
elementAllocator
|
|
|
|
)
|
|
|
|
|
|
|
|
@Composable
|
|
|
|
fun <T> PrimaryNav(
|
2022-04-03 10:03:13 +00:00
|
|
|
title: String?,
|
2022-03-25 11:13:50 +00:00
|
|
|
data: Iterable<T>,
|
2022-01-21 05:31:00 +00:00
|
|
|
vararg ulModifiers: UIKitModifier,
|
|
|
|
titleModifiers: Array<UIKitModifier> = emptyArray(),
|
|
|
|
multiple: Boolean? = null,
|
|
|
|
collapsible: Boolean? = null,
|
|
|
|
animation: UIKitAnimation? = null,
|
|
|
|
duration: Milliseconds? = null,
|
|
|
|
besidesTitleAndList: ContentBuilder<HTMLUListElement>? = null,
|
|
|
|
titleCustomizer: AttrBuilderContext<HTMLLIElement> = {},
|
2022-04-03 18:07:33 +00:00
|
|
|
afterTitleContentBuilder: ContentBuilder<HTMLLIElement> = {},
|
2022-01-21 05:31:00 +00:00
|
|
|
ulCustomizer: AttrBuilderContext<HTMLUListElement> = {},
|
|
|
|
elementAllocator: @Composable ElementScope<HTMLUListElement>.(T) -> Unit
|
|
|
|
) = Nav(
|
|
|
|
title,
|
|
|
|
data,
|
|
|
|
ulModifiers = ulModifiers + UIKitNav.Primary,
|
|
|
|
titleModifiers,
|
|
|
|
multiple,
|
|
|
|
collapsible,
|
|
|
|
animation,
|
|
|
|
duration,
|
|
|
|
besidesTitleAndList,
|
|
|
|
titleCustomizer,
|
2022-04-03 18:07:33 +00:00
|
|
|
afterTitleContentBuilder,
|
2022-01-21 05:31:00 +00:00
|
|
|
ulCustomizer,
|
|
|
|
elementAllocator
|
|
|
|
)
|
|
|
|
|
|
|
|
@Composable
|
|
|
|
fun <T> SubNav(
|
2022-04-03 10:03:13 +00:00
|
|
|
title: String?,
|
2022-03-25 11:13:50 +00:00
|
|
|
data: Iterable<T>,
|
2022-01-21 05:31:00 +00:00
|
|
|
vararg ulModifiers: UIKitModifier,
|
|
|
|
titleModifiers: Array<UIKitModifier> = emptyArray(),
|
|
|
|
multiple: Boolean? = null,
|
|
|
|
collapsible: Boolean? = null,
|
|
|
|
animation: UIKitAnimation? = null,
|
|
|
|
duration: Milliseconds? = null,
|
|
|
|
besidesTitleAndList: ContentBuilder<HTMLUListElement>? = null,
|
|
|
|
titleCustomizer: AttrBuilderContext<HTMLLIElement> = {},
|
2022-04-03 18:07:33 +00:00
|
|
|
afterTitleContentBuilder: ContentBuilder<HTMLLIElement> = {},
|
2022-01-21 05:31:00 +00:00
|
|
|
ulCustomizer: AttrBuilderContext<HTMLUListElement> = {},
|
|
|
|
elementAllocator: @Composable ElementScope<HTMLUListElement>.(T) -> Unit
|
|
|
|
) = Nav(
|
|
|
|
title,
|
|
|
|
data,
|
|
|
|
ulModifiers = ulModifiers + UIKitNav.SubNav,
|
|
|
|
titleModifiers,
|
|
|
|
multiple,
|
|
|
|
collapsible,
|
|
|
|
animation,
|
|
|
|
duration,
|
|
|
|
besidesTitleAndList,
|
|
|
|
titleCustomizer,
|
2022-04-03 18:07:33 +00:00
|
|
|
afterTitleContentBuilder,
|
2022-01-21 05:31:00 +00:00
|
|
|
ulCustomizer,
|
|
|
|
elementAllocator
|
|
|
|
)
|
|
|
|
|
2022-01-20 13:56:46 +00:00
|
|
|
@Composable
|
|
|
|
fun NavHeader(
|
|
|
|
text: String,
|
|
|
|
vararg modifiers: UIKitModifier,
|
|
|
|
attributesCustomizer: AttrBuilderContext<HTMLLIElement> = {},
|
2022-04-03 17:58:08 +00:00
|
|
|
afterTitleContentBuilder: ContentBuilder<HTMLLIElement> = {}
|
2022-01-20 13:56:46 +00:00
|
|
|
) {
|
|
|
|
Li(
|
|
|
|
{
|
|
|
|
include(*modifiers, UIKitNav.Header)
|
|
|
|
attributesCustomizer()
|
|
|
|
}
|
|
|
|
) {
|
|
|
|
Text(text)
|
2022-04-03 17:58:08 +00:00
|
|
|
afterTitleContentBuilder()
|
2022-01-20 13:56:46 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-01-21 05:31:00 +00:00
|
|
|
@Composable
|
|
|
|
fun NavItemElement(
|
|
|
|
vararg modifiers: UIKitModifier,
|
|
|
|
attributesCustomizer: AttrBuilderContext<HTMLLIElement> = {},
|
2022-04-15 07:06:14 +00:00
|
|
|
anchorAttributesCustomizer: AttrBuilderContext<HTMLAnchorElement> = {},
|
2022-01-21 05:31:00 +00:00
|
|
|
contentAllocator: ContentBuilder<HTMLAnchorElement>
|
|
|
|
) {
|
|
|
|
Li(
|
|
|
|
{
|
|
|
|
include(*modifiers)
|
|
|
|
attributesCustomizer()
|
|
|
|
}
|
|
|
|
) {
|
2022-04-15 07:06:14 +00:00
|
|
|
A("#", attrs = anchorAttributesCustomizer) {
|
2022-01-21 05:31:00 +00:00
|
|
|
contentAllocator()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-12-22 08:38:12 +00:00
|
|
|
@Composable
|
|
|
|
fun NavElement(
|
2022-01-13 13:56:39 +00:00
|
|
|
vararg modifiers: UIKitModifier,
|
2022-01-13 05:55:08 +00:00
|
|
|
attributesCustomizer: AttrBuilderContext<HTMLLIElement> = {},
|
2021-12-22 08:38:12 +00:00
|
|
|
contentAllocator: ContentBuilder<HTMLLIElement>
|
|
|
|
) {
|
|
|
|
Li(
|
|
|
|
{
|
|
|
|
include(*modifiers)
|
2022-01-20 13:56:46 +00:00
|
|
|
attributesCustomizer()
|
2021-12-22 08:38:12 +00:00
|
|
|
}
|
|
|
|
) {
|
|
|
|
contentAllocator()
|
|
|
|
}
|
|
|
|
}
|
2022-01-20 13:56:46 +00:00
|
|
|
|
|
|
|
@Composable
|
2022-01-24 15:39:47 +00:00
|
|
|
fun NavDivider(
|
|
|
|
vararg modifiers: UIKitModifier,
|
|
|
|
attributesCustomizer: AttrBuilderContext<HTMLLIElement> = {},
|
|
|
|
) {
|
|
|
|
Li({ include(UIKitNav.Divider, *modifiers);attributesCustomizer() })
|
2022-01-20 13:56:46 +00:00
|
|
|
}
|