Drop component and Navbar improvements

This commit is contained in:
InsanusMokrassar 2022-09-14 13:54:48 +06:00
parent cf2b823765
commit d783834aa4
6 changed files with 179 additions and 5 deletions

View File

@ -2,6 +2,9 @@
## 0.2.2 ## 0.2.2
* Add support of `Drop` component
* Improve support of `Navbar`s
## 0.2.1 ## 0.2.1
* `Tab` elements become supported * `Tab` elements become supported

View File

@ -0,0 +1,24 @@
package dev.inmo.jsuikit.elements
import androidx.compose.runtime.Composable
import dev.inmo.jsuikit.modifiers.UIKitDrop
import dev.inmo.jsuikit.modifiers.attrsBuilder
import dev.inmo.jsuikit.utils.*
import org.jetbrains.compose.web.dom.Div
import org.w3c.dom.HTMLButtonElement
import org.w3c.dom.HTMLDivElement
@Composable
fun Drop(
buttonBuilder: AttrsWithContentBuilder<HTMLButtonElement>,
dropBuilder: AttrsWithContentBuilder<HTMLDivElement>
) {
DefaultButton(
attributesCustomizer = buttonBuilder.attributesBuilderContext,
contentAllocator = buttonBuilder.builder
)
Div(
(Attrs<HTMLDivElement>(UIKitDrop.Custom()) + dropBuilder.attrs).builder,
dropBuilder.builder
)
}

View File

@ -10,7 +10,7 @@ import org.w3c.dom.HTMLLIElement
import org.w3c.dom.HTMLUListElement import org.w3c.dom.HTMLUListElement
@Composable @Composable
fun <T> Iconnav( fun <T> IconNav(
data: Iterable<T>, data: Iterable<T>,
listAttrs: Attrs<HTMLUListElement> = Attrs.empty(), listAttrs: Attrs<HTMLUListElement> = Attrs.empty(),
elementAttrsBuilder: AttrsScope<HTMLLIElement>.(T) -> Unit = {}, elementAttrsBuilder: AttrsScope<HTMLLIElement>.(T) -> Unit = {},
@ -31,3 +31,11 @@ fun <T> Iconnav(
} }
} }
} }
@Composable
fun <T> Iconnav(
data: Iterable<T>,
listAttrs: Attrs<HTMLUListElement> = Attrs.empty(),
elementAttrsBuilder: AttrsScope<HTMLLIElement>.(T) -> Unit = {},
elementBuilder: @Composable ElementScope<HTMLLIElement>.(T) -> Unit
) = IconNav(data, listAttrs, elementAttrsBuilder, elementBuilder)

View File

@ -5,8 +5,7 @@ import dev.inmo.jsuikit.modifiers.*
import dev.inmo.jsuikit.utils.* import dev.inmo.jsuikit.utils.*
import org.jetbrains.compose.web.attributes.AttrsScope import org.jetbrains.compose.web.attributes.AttrsScope
import org.jetbrains.compose.web.dom.* import org.jetbrains.compose.web.dom.*
import org.w3c.dom.HTMLLIElement import org.w3c.dom.*
import org.w3c.dom.HTMLUListElement
@Composable @Composable
fun NavbarNav( fun NavbarNav(
@ -30,3 +29,17 @@ fun NavbarNav(
vararg elements: AttrsWithContentBuilder<HTMLLIElement>, vararg elements: AttrsWithContentBuilder<HTMLLIElement>,
attrs: Attrs<HTMLUListElement> = Attrs.empty() attrs: Attrs<HTMLUListElement> = Attrs.empty()
) = NavbarNav(elements.toList(), attrs) ) = NavbarNav(elements.toList(), attrs)
fun NavbarNavBuilder(
elements: List<AttrsWithContentBuilder<HTMLLIElement>>,
attrs: Attrs<HTMLUListElement> = Attrs.empty(),
containerAttrs: Attrs<HTMLDivElement> = Attrs.empty()
) = AttrsWithContentBuilder<HTMLDivElement>(containerAttrs) {
NavbarNav(elements, attrs)
}
fun NavbarNavBuilder(
vararg elements: AttrsWithContentBuilder<HTMLLIElement>,
attrs: Attrs<HTMLUListElement> = Attrs.empty(),
containerAttrs: Attrs<HTMLDivElement> = Attrs.empty()
) = NavbarNavBuilder(elements.toList(), attrs, containerAttrs)

View File

@ -0,0 +1,122 @@
package dev.inmo.jsuikit.modifiers
import dev.inmo.jsuikit.utils.*
import org.jetbrains.compose.web.css.selectors.CSSSelector
sealed class UIKitDrop(
override val classes: Array<String> = emptyArray(),
override val otherAttrs: Map<String, String> = emptyMap()
) : UIKitModifier {
sealed class Position(name: String) : AttributeValue(name) {
sealed class Bottom(name: String) : Position("bottom-$name") {
object Left : Bottom("left")
object Center : Bottom("center")
object Right : Bottom("right")
object Justify : Bottom("justify")
}
sealed class Top(name: String) : Position("top-$name") {
object Left : Top("left")
object Center : Top("center")
object Right : Top("right")
object Justify : Top("justify")
}
sealed class Left(name: String) : Position("left-$name") {
object Top : Left("top")
object Center : Left("center")
object Bottom : Left("bottom")
}
sealed class Right(name: String) : Position("right-$name") {
object Top : Right("top")
object Center : Right("center")
object Bottom : Right("bottom")
}
}
sealed class Stretch(name: String) : AttributeValue(name) {
object True : Stretch("true")
object X : Stretch("x")
object Y : Stretch("y")
}
sealed class Mode(name: String) : AttributeValue(name) {
object Click : Mode("click")
object Hover : Mode("hover")
object None : Mode("")
object HoverAndClick : Mode("$Hover, $Click")
}
class Custom internal constructor(
classes: Array<String> = emptyArray(),
otherAttrs: Map<String, String> = emptyMap()
) : UIKitDrop(classes, otherAttrs)
companion object {
operator fun invoke(
toggle: CSSSelector? = null,
position: Position? = null,
stretch: Stretch? = null,
mode: Mode? = null,
delayShow: Milliseconds? = null,
delayHide: Milliseconds? = null,
autoUpdate: Boolean? = null,
boundary: CSSSelector? = null,
boundaryX: CSSSelector? = null,
boundaryY: CSSSelector? = null,
target: CSSSelector? = null,
targetX: CSSSelector? = null,
targetY: CSSSelector? = null,
inset: Boolean? = null,
flip: Boolean? = null,
shift: Boolean? = null,
offset: Pixels? = null,
animation: UIKitAnimation? = null,
animationOut: Boolean? = null,
bgScroll: Boolean? = null,
duration: Milliseconds? = null,
container: Boolean? = null
) = Custom(
arrayOf("uk-drop"),
mapOf(
buildAttribute("uk-drop") {
"toggle" to toggle
"position" to position
"stretch" to stretch
"mode" to mode
"delay-show" to delayShow
"delay-hide" to delayHide
"auto-update" to autoUpdate
"boundary" to boundary
"boundary-x" to boundaryX
"boundary-y" to boundaryY
"target" to target
"target-x" to targetX
"target-y" to targetY
"inset" to inset
"flip" to flip
"shift" to shift
"offset" to offset
"animation" to animation
"animation-out" to animationOut
"bg-scroll" to bgScroll
"duration" to duration
"container" to container
}
)
)
}
}

View File

@ -1,13 +1,17 @@
package dev.inmo.jsuikit.utils package dev.inmo.jsuikit.utils
import dev.inmo.jsuikit.modifiers.AttributeValue
class ParametersBuilder( class ParametersBuilder(
val skipNullValues: Boolean = true, val skipNullValues: Boolean = true,
private val parameters: MutableMap<String, String?> = mutableMapOf() private val parameters: MutableMap<String, String?> = mutableMapOf()
) { ) {
fun add(k: String, v: Any? = null) { fun add(k: String, v: Any? = null) {
if (v != null || !skipNullValues) { when {
parameters[k] = v ?.toString() v is AttributeValue -> parameters[k] = v.name
v == null && skipNullValues -> return
else -> parameters[k] = v ?.toString()
} }
} }
infix fun String.to(value: Any?) = add(this, value) infix fun String.to(value: Any?) = add(this, value)