Initially add TopAppBarScaffold and some definitions related to icons

Author: ShreckYe

README.md

@@ -1,5 +1,14 @@
 # Compose Multiplatform Material wrappers
 
-Compose Multiplatform Material Design component wrappers for Desktop, Android, and Web (mainly based on [KMDC](https://github.com/mpetuska/kmdc))
+Some simple Compose Multiplatform Material Design component wrappers for desktop, Android, and web (mainly based on [KMDC](https://github.com/mpetuska/kmdc))
 
-We try to make sure the styles of the `Composable` components follow those in `com.huanshankeji.compose.material`, with, however, only a subset of the `Composable` arguments supported due to the API differences and limitations of the JS components this project depends on.
+We try to make the styles of the composable components follow those of the desktop and Android ones in `com.huanshankeji.compose.material`, meanwhile being compatible with the Web APIs. However, only a subset of the composable arguments is supported due to the API differences and limitations of the web composables this project depends on.
+
+Customizing styles (using `Modifier`s for desktop and Android, and `attrs: AttrBuilderContext<*>?` for web) is not supported yet.
+
+Visual consistency across different platforms is not guaranteed.
+
+## Supported components
+
+- `Button`
+- `TopAppBarScaffold`

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

@@ -9,3 +9,13 @@ expect /*value*/ class ButtonScope {
 
 @Composable
 expect fun Button(onClick: () -> Unit, content: @Composable ButtonScope.() -> Unit)
+
+
+//expect class TopAppBarActionsScope
+@Composable
+expect fun TopAppBarScaffold(
+    title: @Composable () -> Unit,
+    navigationIcon: @Composable (() -> Unit)? = null,
+    actions: @Composable /*TopAppBarActionsScope.*/() -> Unit = {},
+    content: @Composable () -> Unit
+)

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

@@ -0,0 +1,7 @@
+package com.huanshankeji.compose.material.icons
+
+expect class IconType
+
+expect object Icons {
+    val Search : IconType
+}

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

@@ -4,6 +4,7 @@ import androidx.compose.runtime.Composable
 import dev.petuska.kmdc.button.Label
 import dev.petuska.kmdc.button.MDCButton
 import dev.petuska.kmdc.button.MDCButtonScope
+import dev.petuska.kmdc.top.app.bar.*
 import org.w3c.dom.HTMLButtonElement
 
 actual class ButtonScope(val mdcButtonScope: MDCButtonScope<HTMLButtonElement>) {
@@ -15,3 +16,31 @@ actual class ButtonScope(val mdcButtonScope: MDCButtonScope<HTMLButtonElement>)
 @Composable
 actual fun Button(onClick: () -> Unit, content: @Composable ButtonScope.() -> Unit) =
     MDCButton(attrs = { onClick { onClick() } }) { ButtonScope(this).content() }
+
+
+@Composable
+actual fun TopAppBarScaffold(
+    title: @Composable () -> Unit,
+    navigationIcon: @Composable (() -> Unit)?,
+    actions: @Composable () -> Unit,
+    content: @Composable () -> Unit
+) =
+    MDCTopAppBar {
+        TopAppBar {
+            Row {
+                Section(align = MDCTopAppBarSectionAlign.Start) {
+                    navigationIcon?.let { NavButton { it() } }
+                    Title { title() }
+                }
+                Section(
+                    align = MDCTopAppBarSectionAlign.End,
+                    attrs = {
+                        attr("role", "toolbar")
+                    }
+                ) {
+                    actions()
+                }
+            }
+        }
+        Main { content() }
+    }

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

@@ -0,0 +1,9 @@
+package com.huanshankeji.compose.material.icons
+
+import dev.petuska.kmdcx.icons.MDCIcon
+
+actual class IconType(val mdcIcon: MDCIcon)
+
+actual object Icons {
+    actual val Search: IconType = IconType(MDCIcon.Search)
+}

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

@@ -1,7 +1,9 @@
 package com.huanshankeji.compose.material
 
 import androidx.compose.foundation.layout.RowScope
+import androidx.compose.material.Scaffold
 import androidx.compose.material.Text
+import androidx.compose.material.TopAppBar
 import androidx.compose.runtime.Composable
 
 actual class ButtonScope(val rowScope: RowScope) {
@@ -13,3 +15,15 @@ actual class ButtonScope(val rowScope: RowScope) {
 @Composable
 actual fun Button(onClick: () -> Unit, content: @Composable ButtonScope.() -> Unit) =
     androidx.compose.material.Button(onClick) { ButtonScope(this).content() }
+
+
+@Composable
+actual fun TopAppBarScaffold(
+    title: @Composable () -> Unit,
+    navigationIcon: @Composable (() -> Unit)?,
+    actions: @Composable () -> Unit,
+    content: @Composable () -> Unit
+) =
+    Scaffold(topBar = {
+        TopAppBar(title = title, navigationIcon = navigationIcon, actions = { actions() })
+    }) { content() }

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

@@ -0,0 +1,11 @@
+package com.huanshankeji.compose.material.icons
+
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Search
+import androidx.compose.ui.graphics.vector.ImageVector
+
+actual typealias IconType = ImageVector
+
+actual object Icons {
+    actual val Search: IconType = Icons.Default.Search
+}