mirror of
https://github.com/InsanusMokrassar/JSUIKitKBindings.git
synced 2024-11-04 15:33:49 +00:00
commit
0f6e2c9805
@ -1,5 +1,9 @@
|
|||||||
# Changelog
|
# Changelog
|
||||||
|
|
||||||
|
## 0.2.1
|
||||||
|
|
||||||
|
* `Tab` elements become supported
|
||||||
|
|
||||||
## 0.2.0
|
## 0.2.0
|
||||||
|
|
||||||
**ALL DEPRECATIONS HAVE BEEN REMOVED**
|
**ALL DEPRECATIONS HAVE BEEN REMOVED**
|
||||||
|
@ -9,4 +9,4 @@ android.enableJetifier=true
|
|||||||
# Project data
|
# Project data
|
||||||
|
|
||||||
group=dev.inmo
|
group=dev.inmo
|
||||||
version=0.2.0
|
version=0.2.1
|
||||||
|
46
src/jsMain/kotlin/dev/inmo/jsuikit/elements/Tabs.kt
Normal file
46
src/jsMain/kotlin/dev/inmo/jsuikit/elements/Tabs.kt
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
package dev.inmo.jsuikit.elements
|
||||||
|
|
||||||
|
import androidx.compose.runtime.Composable
|
||||||
|
import dev.inmo.jsuikit.modifiers.UIKitTab
|
||||||
|
import dev.inmo.jsuikit.modifiers.include
|
||||||
|
import dev.inmo.jsuikit.utils.optionallyDraw
|
||||||
|
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 <T> Tabs(
|
||||||
|
data: Iterable<T>,
|
||||||
|
tabsItemBuilder: @Composable ElementScope<HTMLLIElement>.(i: Int, data: T) -> Unit,
|
||||||
|
tabsItemAttrs: AttrsScope<HTMLLIElement>.(i: Int, data: T) -> Unit = { _, _ -> },
|
||||||
|
tabsContainerAttrs: AttrsScope<HTMLUListElement>.() -> Unit = {},
|
||||||
|
contentContainerAttrs: (AttrsScope<HTMLUListElement>.() -> Unit)? = null,
|
||||||
|
contentItemAttrs: (AttrsScope<HTMLLIElement>.(i: Int, data: T) -> Unit)? = null,
|
||||||
|
contentItemBuilder: (@Composable ElementScope<HTMLLIElement>.(i: Int, data: T) -> Unit)? = null
|
||||||
|
) {
|
||||||
|
Ul({
|
||||||
|
include(UIKitTab);
|
||||||
|
tabsContainerAttrs()
|
||||||
|
}) {
|
||||||
|
data.forEachIndexed { i, data ->
|
||||||
|
Li({ tabsItemAttrs(i, data) }) {
|
||||||
|
tabsItemBuilder(i, data)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
optionallyDraw(contentItemAttrs != null, contentItemBuilder != null, contentContainerAttrs != null) {
|
||||||
|
Ul({
|
||||||
|
contentContainerAttrs ?.invoke(this)
|
||||||
|
}) {
|
||||||
|
optionallyDraw(contentItemAttrs != null, contentItemBuilder != null) {
|
||||||
|
data.forEachIndexed { i, data ->
|
||||||
|
Li({ contentItemAttrs ?.invoke(this, i, data) }) {
|
||||||
|
contentItemBuilder ?.invoke(this, i, data)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
51
src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitTab.kt
Normal file
51
src/jsMain/kotlin/dev/inmo/jsuikit/modifiers/UIKitTab.kt
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
package dev.inmo.jsuikit.modifiers
|
||||||
|
|
||||||
|
import dev.inmo.jsuikit.utils.buildAttribute
|
||||||
|
import org.jetbrains.compose.web.css.selectors.CSSSelector
|
||||||
|
import kotlin.time.Duration
|
||||||
|
|
||||||
|
sealed class UIKitTab(
|
||||||
|
override val classes: Array<String> = emptyArray(),
|
||||||
|
override val otherAttrs: Map<String, String> = emptyMap()
|
||||||
|
) : UIKitModifier {
|
||||||
|
sealed class Position(
|
||||||
|
classes: Array<String> = emptyArray(),
|
||||||
|
otherAttrs: Map<String, String> = emptyMap()
|
||||||
|
) : UIKitTab(classes, otherAttrs) {
|
||||||
|
object Bottom : Position(arrayOf("uk-tab-bottom"))
|
||||||
|
object Left : Position(arrayOf("uk-tab-left"))
|
||||||
|
object Right : Position(arrayOf("uk-tab-right"))
|
||||||
|
}
|
||||||
|
|
||||||
|
class Custom(
|
||||||
|
connect: CSSSelector? = null,
|
||||||
|
toggle: CSSSelector? = null,
|
||||||
|
active: Int? = null,
|
||||||
|
animationsIn: Array<UIKitAnimation>? = null,
|
||||||
|
animationsOut: Array<UIKitAnimation>? = null,
|
||||||
|
animationDuration: Duration? = null,
|
||||||
|
swiping: Boolean? = null,
|
||||||
|
media: String? = null
|
||||||
|
) : UIKitTab(
|
||||||
|
arrayOf("uk-tab"),
|
||||||
|
mapOf(
|
||||||
|
buildAttribute("uk-tab") {
|
||||||
|
"connect" to connect
|
||||||
|
"toggle" to toggle
|
||||||
|
"active" to active
|
||||||
|
"animation" to (
|
||||||
|
(animationsIn ?.let {
|
||||||
|
it.joinToString(" ") { it.name }
|
||||||
|
} ?: "") + (animationsOut ?.let {
|
||||||
|
it.joinToString(" ", ",") { it.name }
|
||||||
|
} ?: "")
|
||||||
|
).takeIf { it.isNotBlank() }
|
||||||
|
"duration" to animationDuration
|
||||||
|
"swiping" to swiping
|
||||||
|
"media" to media
|
||||||
|
}
|
||||||
|
)
|
||||||
|
)
|
||||||
|
|
||||||
|
companion object : UIKitTab(arrayOf("uk-tab"), mapOf("uk-tab" to ""))
|
||||||
|
}
|
@ -3,7 +3,9 @@ package dev.inmo.jsuikit.utils
|
|||||||
import dev.inmo.jsuikit.modifiers.UIKitModifier
|
import dev.inmo.jsuikit.modifiers.UIKitModifier
|
||||||
import dev.inmo.jsuikit.modifiers.include
|
import dev.inmo.jsuikit.modifiers.include
|
||||||
import org.jetbrains.compose.web.attributes.AttrsScope
|
import org.jetbrains.compose.web.attributes.AttrsScope
|
||||||
|
import org.jetbrains.compose.web.attributes.HtmlAttrMarker
|
||||||
import org.jetbrains.compose.web.attributes.builders.InputAttrsScope
|
import org.jetbrains.compose.web.attributes.builders.InputAttrsScope
|
||||||
|
import org.jetbrains.compose.web.dom.AttrBuilderContext
|
||||||
import org.w3c.dom.Element
|
import org.w3c.dom.Element
|
||||||
import org.w3c.dom.HTMLInputElement
|
import org.w3c.dom.HTMLInputElement
|
||||||
|
|
||||||
|
@ -4,13 +4,19 @@ import androidx.compose.runtime.Composable
|
|||||||
import org.jetbrains.compose.web.dom.ContentBuilder
|
import org.jetbrains.compose.web.dom.ContentBuilder
|
||||||
import org.w3c.dom.Element
|
import org.w3c.dom.Element
|
||||||
|
|
||||||
|
@Composable
|
||||||
|
inline fun optionallyDraw (
|
||||||
|
vararg bools: Boolean,
|
||||||
|
whatToDraw: @Composable () -> Unit
|
||||||
|
) {
|
||||||
|
if (bools.any { it }) {
|
||||||
|
whatToDraw()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@Composable
|
@Composable
|
||||||
inline fun <T : Element> optionallyDraw (
|
inline fun <T : Element> optionallyDraw (
|
||||||
attrs: Attrs<T>? = null,
|
attrs: Attrs<T>? = null,
|
||||||
noinline contentBuilder: ContentBuilder<T>? = null,
|
noinline contentBuilder: ContentBuilder<T>? = null,
|
||||||
whatToDraw: @Composable () -> Unit
|
whatToDraw: @Composable () -> Unit
|
||||||
) {
|
) = optionallyDraw(attrs != null || contentBuilder != null, whatToDraw = whatToDraw)
|
||||||
if (attrs != null || contentBuilder != null) {
|
|
||||||
whatToDraw()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
Loading…
Reference in New Issue
Block a user