Skip to content

Commit

Permalink
Add autocomplete shortcuts (#52)
Browse files Browse the repository at this point in the history 
Co-authored-by: hfhbd <[email protected]>
  • Loading branch information
@hfhbd
hfhbd and hfhbd authored Jul 7, 2021
1 parent a1fb29b commit 22df06d
Show file tree
Hide file tree
Showing 6 changed files with 438 additions and 79 deletions.
86 changes: 53 additions & 33 deletions showcase/src/jsMain/kotlin/app.softwork.bootstrapcompose.showcase/FormView.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ package app.softwork.bootstrapcompose.showcase

import androidx.compose.runtime.*
import app.softwork.bootstrapcompose.*
import org.jetbrains.compose.web.attributes.*
import org.jetbrains.compose.web.dom.*


Expand Down Expand Up @@ -35,9 +34,7 @@ private fun FormOverview() {
Div(attrs = { classes("mb-3") }) {
FormLabel { Text("Email address") }
InputGroup {
TextInput(attrs = {
value(emailAddress)
}) {
TextInput(value = emailAddress, placeholder = "[email protected]", autocomplete = AutoComplete.email) {
emailAddress = it.value
}
}
Expand All @@ -47,7 +44,7 @@ private fun FormOverview() {
Div(attrs = { classes("mb-3") }) {
FormLabel { Text("Password") }
InputGroup {
PasswordInput(value = password) { password = it.value }
PasswordInput(value = password, autocomplete = AutoComplete.currentPassword) { password = it.value }
}
}

Expand Down Expand Up @@ -84,25 +81,34 @@ private fun CheckoutFormExample() {
Column(size = 6, breakpoint = Breakpoint.Small) {
FormLabel { Text("First Name") }
InputGroup {
TextInput(attrs = { value(firstName) }) { firstName = it.value }
TextInput(
value = firstName,
placeholder = "",
autocomplete = AutoComplete.givenName
) { firstName = it.value }
}
}

Column(size = 6, breakpoint = Breakpoint.Small) {
FormLabel { Text("Last Name") }
InputGroup {
TextInput(attrs = { value(lastName) }) { lastName = it.value }
TextInput(
value = lastName,
placeholder = "",
autocomplete = AutoComplete.familyName
) { lastName = it.value }
}
}

Column(size = 12) {
FormLabel { Text("Username") }
InputGroup {
TextAddOn("@")
TextInput(attrs = {
value(username)
placeholder("Username")
}) { username = it.value }
TextInput(
value = username,
autocomplete = AutoComplete.username,
placeholder = "Username"
) { username = it.value }
}
}

Expand All @@ -114,20 +120,22 @@ private fun CheckoutFormExample() {
}
}
InputGroup {
TextInput(attrs = {
value(email)
placeholder("[email protected]")
}) { email = it.value }
TextInput(
value = email,
autocomplete = AutoComplete.email,
placeholder = "[email protected]"
) { email = it.value }
}
}

Column(size = 12) {
FormLabel { Text("Address") }
InputGroup {
TextInput(attrs = {
value(address)
placeholder("1234 Main St")
}) { address = it.value }
TextInput(
value = address,
autocomplete = AutoComplete.streetAddress,
placeholder = "1234 Main St"
) { address = it.value }
}
}

Expand All @@ -139,16 +147,16 @@ private fun CheckoutFormExample() {
}
}
InputGroup {
TextInput(attrs = {
value(address2)
placeholder("Apartment or suite")
}) { address2 = it.value }
TextInput(
value = address2,
placeholder = "Apartment or suite"
) { address2 = it.value }
}
}

Column(size = 5, breakpoint = Breakpoint.Medium) {
FormLabel(forId = "countryId") { Text("Country") }
Select(onChange = { s -> println(s) }) {
Select(autocomplete = AutoComplete.countryName, onChange = { s -> println(s) }) {
Option(value = "") {
Text("Choose...")
}
Expand All @@ -160,7 +168,7 @@ private fun CheckoutFormExample() {

Column(size = 4, breakpoint = Breakpoint.Medium) {
FormLabel(forId = "stateId") { Text("State") }
Select(id = "stateId", onChange = { s -> println(s) }) {
Select(id = "stateId", autocomplete = AutoComplete.addressLevel1, onChange = { s -> println(s) }) {
Option(value = "") {
Text("Choose...")
}
Expand All @@ -173,7 +181,9 @@ private fun CheckoutFormExample() {
Column(size = 3, breakpoint = Breakpoint.Medium) {
FormLabel { Text("Zip") }
InputGroup {
TextInput(attrs = { value(zip) }) { zip = it.value }
TextInput(value = zip, placeholder = "", autocomplete = AutoComplete.postalCode) {
zip = it.value
}
}
}
}
Expand Down Expand Up @@ -209,7 +219,7 @@ private fun CheckoutFormExample() {
Column(size = 6, breakpoint = Breakpoint.Medium) {
FormLabel { Text("Name on card") }
InputGroup {
TextInput(attrs = { value(nameOnCard) }) {
TextInput(value = nameOnCard, placeholder = "John Doe", autocomplete = AutoComplete.ccName) {
nameOnCard = it.value
}
}
Expand All @@ -220,19 +230,29 @@ private fun CheckoutFormExample() {
Column(size = 6, breakpoint = Breakpoint.Medium) {
FormLabel { Text("Credit card number") }
InputGroup {
TextInput(attrs = { value(cardNumber) }) { cardNumber = it.value }
TextInput(
value = cardNumber,
placeholder = "",
autocomplete = AutoComplete.ccNumber
) { cardNumber = it.value }
}
}
Column(size = 3, breakpoint = Breakpoint.Medium) {
FormLabel { Text("Expiration") }
InputGroup {
TextInput(attrs = { value(expiration) }) { expiration = it.value }
TextInput(
value = expiration,
placeholder = "",
autocomplete = AutoComplete.ccExp
) { expiration = it.value }
}
}
Column(size = 3, breakpoint = Breakpoint.Medium) {
FormLabel { Text("CVV") }
InputGroup {
TextInput(attrs = { value(cvv) }) { cvv = it.value }
TextInput(value = cvv, placeholder = "", autocomplete = AutoComplete.ccSecurityCode) {
cvv = it.value
}
}
}
}
Expand Down Expand Up @@ -267,9 +287,9 @@ private fun HorizontalFormView() {
Legend(attrs = { classes("col-form-label", "col-sm-2", "pt-0") }) { Text("Radios") }
Div(attrs = { classes("col-sm-10") }) {
RadioGroup {
Radio("First radio", onClick = {})
Radio("Second radio", onClick = {})
Radio("Third disabled radio", disabled = true, onClick = {})
Radio("First radio") { }
Radio("Second radio") { }
Radio("Third disabled radio", disabled = true) { }
}
}
}
Expand Down
48 changes: 37 additions & 11 deletions showcase/src/jsMain/kotlin/app.softwork.bootstrapcompose.showcase/InputGroupView.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import androidx.compose.runtime.*
import app.softwork.bootstrapcompose.*
import org.jetbrains.compose.web.attributes.*
import org.jetbrains.compose.web.dom.*
import org.jetbrains.compose.web.dom.Text
import org.w3c.dom.*

@Composable
fun InputGroupView() {
Expand Down Expand Up @@ -47,6 +49,7 @@ fun MutipleAddons() {
private fun BasicExampleView() {
var username by remember { mutableStateOf("") }
var range by remember { mutableStateOf(0.5) }
var server by remember { mutableStateOf("") }

Card("Basic example") {
Div(attrs = { classes("mb-3") }) {
Expand All @@ -58,7 +61,7 @@ private fun BasicExampleView() {

Div(attrs = { classes("mb-3") }) {
InputGroup {
TextInput(attrs = { placeholder("Recipient's username") }) { }
TextInput(value = username, placeholder = "Recipient's username") { }
TextAddOn("@example.com")
}
}
Expand All @@ -67,23 +70,23 @@ private fun BasicExampleView() {
Label(attrs = { classes(BSClasses.formLabel) }) { Text("Your vanity URL") }
InputGroup {
TextAddOn("https://example.com/users/")
TextInput { }
TextInput("") { }
}
}

Div(attrs = { classes("mb-3") }) {
InputGroup {
TextAddOn("$")
TextInput { }
TextInput("") { }
TextAddOn(".00")
}
}

Div(attrs = { classes("mb-3") }) {
InputGroup {
TextInput(attrs = { placeholder("Username") }) { }
TextInput(username, placeholder = "Username") { username = it.value }
TextAddOn("@")
TextInput(attrs = { placeholder("Server") }) { }
TextInput(server, placeholder = "Server") { server = it.value }
}
}

Expand Down Expand Up @@ -161,7 +164,7 @@ fun ButtonAddOnsView() {

Div(attrs = { classes("mb-3") }) {
InputGroup {
TextInput(attrs = { placeholder("Recipient's username") }) { }
TextInput("", placeholder = "Recipient's username") { }
ButtonAddOn(
"Button",
Color.Transparent,
Expand All @@ -188,7 +191,7 @@ fun ButtonAddOnsView() {

Div(attrs = { classes("mb-3") }) {
InputGroup {
TextInput(attrs = { placeholder("Recipient's username") }) { }
TextInput("", placeholder = "Recipient's username") { }
ButtonAddOn(
"Button",
Color.Transparent,
Expand Down Expand Up @@ -275,14 +278,14 @@ private fun CustomSelectView() {
Div(attrs = { classes("mb-3") }) {
InputGroup {
LabelAddOn("Options")
SelectInput(onChange = { }) {
SelectInput(false, onChange = { }) {
buildOptions()
}
}
}
Div(attrs = { classes("mb-3") }) {
InputGroup {
SelectInput(onChange = { }) {
SelectInput(false, onChange = { }) {
buildOptions()
}
LabelAddOn("Options")
Expand All @@ -296,15 +299,15 @@ private fun CustomSelectView() {
Color.Transparent,
ButtonType.Button,
attrs = { classes("btn-outline-secondary") }) {}
SelectInput(onChange = { }) {
SelectInput(false, onChange = { }) {
buildOptions()
}
}
}

Div(attrs = { classes("mb-3") }) {
InputGroup {
SelectInput(onChange = { }) {
SelectInput(false, onChange = { }) {
buildOptions()
}
ButtonAddOn(
Expand Down Expand Up @@ -355,5 +358,28 @@ private fun CustomFileInputView() {
attrs = { classes("btn-outline-secondary") }) {}
}
}

Div(attrs = { classes("mb-3") }) {
InputGroup {
var upload: HTMLInputElement? = null
FileInput {
hidden()
ref {
upload = it as HTMLInputElement
onDispose {

}
}
}
ButtonAddOn(
"Upload using hidden FileInput",
Color.Transparent,
ButtonType.Button,
attrs = { classes("btn-outline-secondary") }) {
upload!!.value = ""
upload!!.click()
}
}
}
}
}
Loading

0 comments on commit 22df06d

Please sign in to comment.