Add more Bootstrap components (#10)

Co-authored-by: hfhbd <[email protected]>
hfhbd · Jun 3, 2021 · 135769a · 135769a
1 parent 1534797
commit 135769a
Show file tree

Hide file tree

Showing 15 changed files with 357 additions and 63 deletions.
diff --git a/src/jsMain/kotlin/app/softwork/bootstrapcompose/Brand.kt b/src/jsMain/kotlin/app/softwork/bootstrapcompose/Brand.kt
@@ -4,8 +4,10 @@ import androidx.compose.runtime.*
 import org.jetbrains.compose.web.dom.*
 
 @Composable
-public fun Brand(content: @Composable () -> Unit): Unit = Div(attrs = {
-    classes("navbar-brand")
-}) {
-    content()
+public fun Brand(content: @Composable () -> Unit) {
+    Div(attrs = {
+        classes("navbar-brand")
+    }) {
+        content()
+    }
 }
diff --git a/src/jsMain/kotlin/app/softwork/bootstrapcompose/Button.kt b/src/jsMain/kotlin/app/softwork/bootstrapcompose/Button.kt
@@ -5,20 +5,22 @@ import org.jetbrains.compose.web.attributes.*
 import org.jetbrains.compose.web.dom.*
 
 @Composable
-public inline fun Button(
+public fun Button(
     title: String,
     color: Color = Color.Primary,
     vararg customClasses: String = emptyArray(),
     type: ButtonType = ButtonType.Submit,
-    crossinline attrs: AttrsBuilder<Tag.Button>.() -> Unit = { },
-    crossinline onClick: () -> Unit
-): Unit = Button(attrs = {
-    classes("btn", "btn-$color", *customClasses)
-    attrs()
-    type(type)
-    onClick {
-        onClick()
+    attrs: AttrsBuilder<Tag.Button>.() -> Unit = { },
+    onClick: () -> Unit
+) {
+    Button(attrs = {
+        classes("btn", "btn-$color", *customClasses)
+        attrs()
+        type(type)
+        onClick {
+            onClick()
+        }
+    }) {
+        Text(title)
     }
-}) {
-    Text(title)
 }
diff --git a/src/jsMain/kotlin/app/softwork/bootstrapcompose/ButtonGroup.kt b/src/jsMain/kotlin/app/softwork/bootstrapcompose/ButtonGroup.kt
@@ -0,0 +1,11 @@
+package app.softwork.bootstrapcompose
+
+import androidx.compose.runtime.*
+import org.jetbrains.compose.web.dom.*
+
+@Composable
+public fun ButtonGroup(content: @Composable () -> Unit) {
+    Div({ classes("btn-group") }) {
+        content()
+    }
+}
diff --git a/src/jsMain/kotlin/app/softwork/bootstrapcompose/Card.kt b/src/jsMain/kotlin/app/softwork/bootstrapcompose/Card.kt
@@ -0,0 +1,29 @@
+package app.softwork.bootstrapcompose
+
+import androidx.compose.runtime.*
+import org.jetbrains.compose.web.attributes.*
+import org.jetbrains.compose.web.dom.*
+
+@Composable
+public fun Card(
+    header: String,
+    color: Color = Color.Dark,
+    attrs: AttrsBuilder<Tag.Div>.() -> Unit = {},
+    footer: @Composable () -> Unit = {},
+    body: @Composable () -> Unit
+) {
+    Div({
+        classes("card", "border-$color", "mb-3")
+        attrs()
+    }) {
+        Div({ classes("card-header") }) {
+            Text(header)
+        }
+        Div({ classes("card-body") }) {
+            body()
+        }
+        Div({ classes("card-footer") }) {
+            footer()
+        }
+    }
+}
diff --git a/src/jsMain/kotlin/app/softwork/bootstrapcompose/Checkbox.kt b/src/jsMain/kotlin/app/softwork/bootstrapcompose/Checkbox.kt
@@ -0,0 +1,27 @@
+package app.softwork.bootstrapcompose
+
+import androidx.compose.runtime.*
+import org.jetbrains.compose.web.attributes.*
+import org.jetbrains.compose.web.dom.*
+
+@Composable
+public fun Checkbox(checked: Boolean, label: String, id: String, onClick: () -> Unit) {
+    Div({ classes("form-check") }) {
+        Input(attrs = {
+            classes("form-check-input")
+            name("flexRadioDefault1")
+            id("a$id")
+            checked(checked)
+            onClick {
+                onClick()
+            }
+        }, type = InputType.Radio) {
+        }
+        Label(attrs = {
+            classes("form-check-label")
+            forId("a$id")
+        }) {
+            Text(label)
+        }
+    }
+}
diff --git a/src/jsMain/kotlin/app/softwork/bootstrapcompose/Collapse.kt b/src/jsMain/kotlin/app/softwork/bootstrapcompose/Collapse.kt
@@ -0,0 +1,22 @@
+package app.softwork.bootstrapcompose
+
+import androidx.compose.runtime.*
+import org.jetbrains.compose.web.attributes.*
+import org.jetbrains.compose.web.dom.*
+
+@Composable
+public fun Collapse(title: String, id: String, color: Color = Color.Primary, content: @Composable () -> Unit) {
+    Button(attrs = {
+        classes("btn", "btn-$color")
+        attr("data-bs-toggle", "collapse")
+        attr("data-bs-target", "#a$id")
+        attr("aria-expanded", "false")
+        attr("aria-controls", id)
+    }, type = ButtonType.Button, title = title) {}
+    Div({
+        classes("collapse")
+        id("a$id")
+    }) {
+        content()
+    }
+}
diff --git a/src/jsMain/kotlin/app/softwork/bootstrapcompose/Column.kt b/src/jsMain/kotlin/app/softwork/bootstrapcompose/Column.kt
@@ -5,10 +5,12 @@ import org.jetbrains.compose.web.dom.*
 
 @Composable
 public fun Column(
+    auto: Boolean = false,
+    horizontalAlignment: HorizontalAlignment? = null,
     breakpoint: Breakpoint? = null,
     size: Int? = null,
     content: @Composable () -> Unit
-): Unit =
+) {
     Div(attrs = {
         classes("col")
         if (breakpoint != null) {
@@ -17,6 +19,11 @@ public fun Column(
         if (size != null) {
             classes("col-$size")
         }
+        if (auto) {
+            classes("col-auto")
+        }
+        horizontalAlignment?.let { classes(it.toString()) }
     }) {
         content()
-    }
+    }
+}
diff --git a/src/jsMain/kotlin/app/softwork/bootstrapcompose/Container.kt b/src/jsMain/kotlin/app/softwork/bootstrapcompose/Container.kt
@@ -8,14 +8,16 @@ public fun Container(
     fluid: Boolean = false,
     type: Breakpoint? = null,
     content: @Composable () -> Unit
-): Unit = Div(attrs = {
-    classes("container")
-    if (type != null) {
-        classes("container-$type")
+) {
+    Div(attrs = {
+        classes("container")
+        if (type != null) {
+            classes("container-$type")
+        }
+        if (fluid) {
+            classes("container-fluid")
+        }
+    }) {
+        content()
     }
-    if(fluid) {
-        classes("container-fluid")
-    }
-}) {
-    content()
 }
diff --git a/src/jsMain/kotlin/app/softwork/bootstrapcompose/DateTimeInput.kt b/src/jsMain/kotlin/app/softwork/bootstrapcompose/DateTimeInput.kt
@@ -7,26 +7,28 @@ import org.w3c.dom.*
 import org.w3c.dom.Text
 
 @Composable
-public inline fun DateTimeInput(
+public fun DateTimeInput(
     label: String,
     labelClasses: String = "form-label",
     inputClasses: String = "form-control",
     placeholder: String,
     value: String,
-    crossinline attrs: AttrsBuilder<Tag.Input>.() -> Unit = { },
-    crossinline onChange: (HTMLInputElement) -> Unit
-): Unit = Label(forId = "", attrs = {
-    classes(labelClasses)
-    attr("for", null)
-}) {
-    Text(label)
-    Input(type = InputType.DateTimeLocal, attrs = {
-        attrs()
-        classes(inputClasses)
-        value(value)
-        placeholder(placeholder)
-        addEventListener("input") {
-            onChange(it.nativeEvent.target as HTMLInputElement)
-        }
-    })
+    attrs: AttrsBuilder<Tag.Input>.() -> Unit = { },
+    onChange: (HTMLInputElement) -> Unit
+) {
+    Label(forId = "", attrs = {
+        classes(labelClasses)
+        attr("for", null)
+    }) {
+        Text(label)
+        Input(type = InputType.DateTimeLocal, attrs = {
+            attrs()
+            classes(inputClasses)
+            value(value)
+            placeholder(placeholder)
+            addEventListener("input") {
+                onChange(it.nativeEvent.target as HTMLInputElement)
+            }
+        })
+    }
 }
diff --git a/src/jsMain/kotlin/app/softwork/bootstrapcompose/DropDown.kt b/src/jsMain/kotlin/app/softwork/bootstrapcompose/DropDown.kt
@@ -0,0 +1,87 @@
+package app.softwork.bootstrapcompose
+
+import androidx.compose.runtime.*
+import org.jetbrains.compose.web.attributes.*
+import org.jetbrains.compose.web.dom.*
+
+public class DropDownBuilder {
+    public sealed class Content {
+        public data class Button(val title: String, val onClick: () -> Unit) : Content()
+        public data class Header(val title: String) : Content()
+        public class Custom : Content() {
+            public lateinit var content: @Composable () -> Unit
+        }
+
+        public object Divider : Content()
+    }
+
+    private val content = mutableListOf<Content>()
+
+    public fun Button(title: String, onClick: () -> Unit) {
+        content.add(Content.Button(title, onClick))
+    }
+
+    public fun Divider() {
+        content.add(Content.Divider)
+    }
+
+    public fun Header(title: String) {
+        content.add(Content.Header(title))
+    }
+
+    @Composable
+    public fun Custom(block: @Composable () -> Unit) {
+        content.add(Content.Custom().apply { content = block })
+    }
+
+    internal fun build(): List<Content> = content
+}
+
+@Composable
+public fun DropDown(title: String, id: String, color: Color = Color.Primary, block: DropDownBuilder.() -> Unit) {
+    Div({ classes("dropdown") }) {
+        val buttons = DropDownBuilder().apply(block).build()
+
+        Button(attrs = {
+            classes("btn", "btn-$color", "dropdown-toggle")
+            id("dropdownMenu$id")
+            attr("data-bs-toggle", "dropdown")
+            attr("aria-expanded", "false")
+        }) {
+            Text(title)
+        }
+
+        Ul({
+            classes("dropdown-menu")
+            attr("aria-labelledby", "dropdownMenu$id")
+        }) {
+
+            for (button in buttons) {
+                Li {
+                    when (button) {
+                        is DropDownBuilder.Content.Button -> {
+                            Button({
+                                classes("dropdown-item")
+                                onClick { button.onClick() }
+                            }) {
+                                Text(button.title)
+                            }
+                        }
+                        is DropDownBuilder.Content.Divider -> {
+                            Hr({classes("dropdown-divider")}) {
+                            }
+                        }
+                        is DropDownBuilder.Content.Header -> {
+                            H6({classes("dropdown-header")}) {
+                                Text(button.title)
+                            }
+                        }
+                        is DropDownBuilder.Content.Custom -> {
+                            button.content()
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/src/jsMain/kotlin/app/softwork/bootstrapcompose/HorizontalAlignment.kt b/src/jsMain/kotlin/app/softwork/bootstrapcompose/HorizontalAlignment.kt
@@ -0,0 +1,12 @@
+package app.softwork.bootstrapcompose;
+
+public enum class HorizontalAlignment(private val classInfix: String) {
+    Start("start"),
+    Center("center"),
+    End("end"),
+    Around("around"),
+    Between("between"),
+    Evenly("evenly");
+
+    override fun toString(): String = "justify-content-$classInfix"
+}
diff --git a/src/jsMain/kotlin/app/softwork/bootstrapcompose/HrTag.kt b/src/jsMain/kotlin/app/softwork/bootstrapcompose/HrTag.kt
@@ -0,0 +1,18 @@
+package app.softwork.bootstrapcompose
+
+import androidx.compose.runtime.*
+import org.jetbrains.compose.web.attributes.*
+import org.jetbrains.compose.web.dom.*
+import org.w3c.dom.*
+
+public object HrTag : Tag
+
+// https://github.com/JetBrains/compose-jb/pull/741
+
+@Composable
+public fun Hr(
+    attrs: AttrBuilderContext<HrTag> = {},
+    content: ContentBuilder<HTMLHRElement>? = null
+) {
+    TagElement("hr", applyAttrs = attrs, content = content)
+}