Add TextField which is not tested yet

Author: ShreckYe

README.md

@@ -41,6 +41,7 @@ There is no plan to support Apple platforms until there is official support from
 - `IconButton`
 - `ScrollableList`/`LazyColumn` (visually inconsistent for now)
 - `Text`/`MaterialText`
+- `TextField`
 - `TopAppBarScaffold`
 
 ### styles

compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/ui/ModifierOrAttrsScope.kt

@@ -13,6 +13,11 @@ import org.jetbrains.compose.web.css.*
 import org.jetbrains.compose.web.dom.AttrBuilderContext
 import org.w3c.dom.HTMLElement
 
+/*
+fun <TElement : Element, TAttrsScope : AttrsScope<TElement>> ModifierOrAttrs<TElement>.toAttrs2(): (TAttrsScope.() -> Unit)? =
+    this?.let { { ModifierOrAttrsScope(this).it() } }
+*/
+
 fun <TElement : Element> ModifierOrAttrs<TElement>.toAttrs(): AttrBuilderContext<TElement>? =
     this?.let { { ModifierOrAttrsScope(this).it() } }
 

compose-multiplatform-material/src/commonMain/kotlin/com/huanshankeji/compose/material/TextField.kt

@@ -0,0 +1,19 @@
+package com.huanshankeji.compose.material
+
+import androidx.compose.runtime.Composable
+import com.huanshankeji.compose.ui.Element
+import com.huanshankeji.compose.ui.ModifierOrAttrs
+
+expect abstract class TextFieldElement : Element
+
+@Composable
+expect fun TextField(
+    value: String,
+    onValueChange: (String) -> Unit,
+    modifierOrAttrs: ModifierOrAttrs<TextFieldElement> = null,
+    enabled: Boolean = true,
+    label: String? = null,
+    placeholder: String? = null,
+    leadingIcon: @Composable (() -> Unit)? = null,
+    trailingIcon: @Composable (() -> Unit)? = null,
+)

compose-multiplatform-material/src/jsMain/kotlin/com/huanshankeji/compose/material/TextField.kt

@@ -0,0 +1,32 @@
+package com.huanshankeji.compose.material
+
+import androidx.compose.runtime.Composable
+import com.huanshankeji.compose.ui.ModifierOrAttrs
+import com.huanshankeji.compose.ui.toAttrs
+import dev.petuska.kmdc.textfield.MDCTextField
+import org.w3c.dom.HTMLInputElement
+
+actual typealias TextFieldElement = HTMLInputElement
+
+@Composable
+actual fun TextField(
+    value: String,
+    onValueChange: (String) -> Unit,
+    modifierOrAttrs: ModifierOrAttrs<TextFieldElement>,
+    enabled: Boolean,
+    label: String?,
+    placeholder: String?,
+    leadingIcon: @Composable (() -> Unit)?,
+    trailingIcon: @Composable (() -> Unit)?,
+) =
+    MDCTextField(value,
+        attrs = {
+            onInput { onValueChange(it.value) }
+            modifierOrAttrs.toAttrs()?.let { it() }
+        },
+        disabled = !enabled,
+        label = label,
+        helperText = placeholder,
+        leadingIcon = leadingIcon?.let { { it() } },
+        trailingIcon = trailingIcon?.let { { it() } }
+    )

compose-multiplatform-material/src/jvmMain/kotlin/com/huanshankeji/compose/material/TextField.kt

@@ -0,0 +1,30 @@
+package com.huanshankeji.compose.material
+
+import androidx.compose.runtime.Composable
+import com.huanshankeji.compose.ui.Element
+import com.huanshankeji.compose.ui.ModifierOrAttrs
+import com.huanshankeji.compose.ui.toModifier
+
+actual abstract class TextFieldElement : Element()
+
+@Composable
+actual fun TextField(
+    value: String,
+    onValueChange: (String) -> Unit,
+    modifierOrAttrs: ModifierOrAttrs<TextFieldElement>,
+    enabled: Boolean,
+    label: String?,
+    placeholder: String?,
+    leadingIcon: @Composable (() -> Unit)?,
+    trailingIcon: @Composable (() -> Unit)?,
+) =
+    androidx.compose.material.TextField(
+        value,
+        onValueChange,
+        modifierOrAttrs.toModifier(),
+        enabled = enabled,
+        label = label?.let { { Text(it) } },
+        placeholder = placeholder?.let { { Text(it) } },
+        leadingIcon = leadingIcon,
+        trailingIcon = trailingIcon
+    )