mirror of
https://github.com/InsanusMokrassar/JSUIKitKBindings.git
synced 2024-12-22 00:27:25 +00:00
commit
efd9cb80e1
@ -1,5 +1,10 @@
|
||||
# Changelog
|
||||
|
||||
## 0.1.3
|
||||
|
||||
* Add support of sections
|
||||
* Improve support of navbars
|
||||
|
||||
## 0.1.2
|
||||
|
||||
* New typealias `AttrsWithContentBuilder`
|
||||
|
@ -9,4 +9,4 @@ android.enableJetifier=true
|
||||
# Project data
|
||||
|
||||
group=dev.inmo
|
||||
version=0.1.2
|
||||
version=0.1.3
|
||||
|
@ -10,7 +10,7 @@ import org.w3c.dom.HTMLDivElement
|
||||
@Composable
|
||||
fun DropArea(
|
||||
attrs: Attrs<HTMLDivElement> = Attrs.empty(),
|
||||
inputAttrs: InputAttrs<String> = Attrs.empty(),
|
||||
inputAttrs: InputAttrs<String> = InputAttrs.empty(),
|
||||
contentBuilder: ContentBuilder<HTMLDivElement> = {}
|
||||
) = Div(
|
||||
{
|
||||
|
@ -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<HTMLElement> = {},
|
||||
contentBuilder: ContentBuilder<HTMLElement>
|
||||
) {
|
||||
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<HTMLElement> = {},
|
||||
) {
|
||||
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<HTMLDivElement>? = null,
|
||||
centerBuilder: AttrsWithContentBuilder<HTMLDivElement>? = null,
|
||||
rightBuilder: AttrsWithContentBuilder<HTMLDivElement>? = null,
|
||||
vararg navModifiers: UIKitModifier,
|
||||
attributesCustomizer: AttrBuilderContext<HTMLElement> = {},
|
||||
) {
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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<AttrsWithContentBuilder<HTMLLIElement>>,
|
||||
attrs: Attrs<HTMLUListElement> = Attrs.empty()
|
||||
) {
|
||||
Ul(
|
||||
{
|
||||
include(UIKitNavbar.Nav)
|
||||
attrs.builder(this)
|
||||
}
|
||||
) {
|
||||
elements.forEach { element ->
|
||||
Li(element.attributesBuilderContext, element.builder)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun NavbarNav(
|
||||
vararg elements: AttrsWithContentBuilder<HTMLLIElement>,
|
||||
attrs: Attrs<HTMLUListElement> = Attrs.empty()
|
||||
) = NavbarNav(elements.toList(), attrs)
|
||||
|
||||
@Deprecated("Will be removed soon. Use NavbarNavPart with AttrsWithContentBuilder instead")
|
||||
interface NavbarNavElement {
|
||||
fun AttrsScope<HTMLLIElement>.setup() {}
|
||||
@Composable
|
||||
@ -28,6 +52,7 @@ interface NavbarNavElement {
|
||||
}
|
||||
}
|
||||
|
||||
@Deprecated("Will be removed soon. Use NavbarNavPart with AttrsWithContentBuilder instead")
|
||||
class NavbarNavBuilder(
|
||||
private val modifiers: Array<UIKitModifier>,
|
||||
private val elements: List<NavbarNavElement>,
|
||||
@ -46,8 +71,7 @@ class NavbarNavBuilder(
|
||||
fun draw() {
|
||||
Ul(
|
||||
{
|
||||
classes("uk-navbar-nav")
|
||||
include(*modifiers)
|
||||
include(UIKitNavbar.Nav, *modifiers)
|
||||
attributesCustomizer()
|
||||
}
|
||||
) {
|
||||
|
@ -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
|
||||
}
|
||||
|
@ -1,17 +1,86 @@
|
||||
package dev.inmo.jsuikit.modifiers
|
||||
|
||||
sealed class UIKitNavbar(suffix: String) : UIKitModifier {
|
||||
override val classes: Array<String> = 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<String> = classes as Array<String>
|
||||
|
||||
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<String, String>
|
||||
) : 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)
|
||||
}
|
||||
}
|
||||
|
23
src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitSection.kt
Normal file
23
src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitSection.kt
Normal file
@ -0,0 +1,23 @@
|
||||
package dev.inmo.jsuikit.modifiers
|
||||
|
||||
sealed class UIKitSection(vararg classes: String) : UIKitModifier {
|
||||
override val classes: Array<String> = classes as Array<String>
|
||||
|
||||
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")
|
||||
}
|
@ -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
|
||||
}
|
||||
}
|
||||
|
@ -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<T> = Pair<Attrs<T>, ContentBuilder<T>>
|
||||
|
||||
@Suppress("NOTHING_TO_INLINE")
|
||||
inline fun <T : Element> AttrsWithContentBuilder(
|
||||
vararg modifiers: UIKitModifier?,
|
||||
noinline attrs: AttrsScope<T>.() -> Unit = {},
|
||||
noinline builder: ContentBuilder<T>
|
||||
) = AttrsWithContentBuilder(
|
||||
Attrs(*modifiers, attrs = attrs),
|
||||
builder
|
||||
)
|
||||
|
||||
@Suppress("NOTHING_TO_INLINE")
|
||||
inline fun <T : Element> AttrsWithContentBuilder(attrs: Attrs<T>) = AttrsWithContentBuilder(
|
||||
attrs
|
||||
) {}
|
||||
|
||||
inline val <T : Element> AttrsWithContentBuilder<T>.attrs
|
||||
get() = first
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user