Change the first argument from styles to attrs for better customizability for the layouts

Author: ShreckYe

compose-web-common/src/jsMain/kotlin/com/huanshankeji/compose/web/Layouts.kt

@@ -1,7 +1,12 @@
 package com.huanshankeji.compose.web
 
 import androidx.compose.runtime.Composable
+import com.huanshankeji.compose.web.attributes.attrs
+import com.huanshankeji.compose.web.attributes.plus
+import com.huanshankeji.compose.web.css.Styles
+import com.huanshankeji.compose.web.css.wrapInAttrs
 import org.jetbrains.compose.web.css.*
+import org.jetbrains.compose.web.dom.AttrBuilderContext
 import org.jetbrains.compose.web.dom.ContentBuilder
 import org.jetbrains.compose.web.dom.Div
 import org.w3c.dom.HTMLDivElement
@@ -10,102 +15,125 @@ import org.w3c.dom.HTMLDivElement
 
 @Composable
 fun Flexbox(
-    styles: Styles? = null,
+    attrs: AttrBuilderContext<HTMLDivElement>? = null,
     content: ContentBuilder<HTMLDivElement>
 ) =
-    Div({
+    Div(attrs<HTMLDivElement> {
         style {
             display(DisplayStyle.Flex)
-            styles?.invoke(this)
         }
-    }, content)
+    } + attrs, content)
+
+@Composable
+fun Flexbox(styles: Styles? = null, content: ContentBuilder<HTMLDivElement>) =
+    Flexbox(styles.wrapInAttrs(), content)
 
 @Composable
 fun Column(
-    styles: Styles? = null,
+    attrs: AttrBuilderContext<HTMLDivElement>? = null,
     fitContent: Boolean = true,
     content: ContentBuilder<HTMLDivElement>
 ) =
-    Flexbox({
-        flexDirection(FlexDirection.Column)
-        if (fitContent) property("width", "fit-content")
-        styles?.invoke(this)
-    }, content)
+    Flexbox(attrs<HTMLDivElement> {
+        style {
+            flexDirection(FlexDirection.Column)
+            if (fitContent) property("width", "fit-content")
+        }
+    } + attrs, content)
+
+@Composable
+fun Column(styles: Styles? = null, fitContent: Boolean = true, content: ContentBuilder<HTMLDivElement>) =
+    Column(styles.wrapInAttrs(), fitContent, content)
 
 @Composable
 fun ColumnWithSpaceBetween(
-    styles: Styles? = null,
+    attrs: AttrBuilderContext<HTMLDivElement>? = null,
     fitContent: Boolean = true,
     content: ContentBuilder<HTMLDivElement>
 ) =
-    Column({
-        justifyContent(JustifyContent.SpaceBetween)
-        styles?.invoke(this)
-    }, fitContent, content)
+    Column(attrs<HTMLDivElement> {
+        style {
+            justifyContent(JustifyContent.SpaceBetween)
+        }
+    } + attrs, fitContent, content)
+
+
+@Composable
+fun Row(
+    attrs: AttrBuilderContext<HTMLDivElement>? = null,
+    content: ContentBuilder<HTMLDivElement>
+) =
+    Flexbox(attrs<HTMLDivElement> {
+        style {
+            flexDirection(FlexDirection.Row)
+        }
+    } + attrs, content)
 
 @Composable
 fun Row(
     styles: Styles? = null,
     content: ContentBuilder<HTMLDivElement>
 ) =
-    Flexbox({
-        flexDirection(FlexDirection.Row)
-        styles?.invoke(this)
-    }, content)
+    Row(styles.wrapInAttrs(), content)
 
 @Composable
 fun RowWithSpaceBetween(
-    styles: Styles? = null,
+    attrs: AttrBuilderContext<HTMLDivElement>? = null,
     content: ContentBuilder<HTMLDivElement>
 ) =
-    Row({
-        justifyContent(JustifyContent.SpaceBetween)
-        styles?.invoke(this)
-    }, content)
+    Row(attrs<HTMLDivElement> {
+        style {
+            justifyContent(JustifyContent.SpaceBetween)
+        }
+    } + attrs, content)
 
 @Composable
 fun ColumnWithGaps(
-    styles: Styles? = null,
+    attrs: AttrBuilderContext<HTMLDivElement>? = null,
     gap: CSSNumeric,
     fitContent: Boolean = true,
     content: ContentBuilder<HTMLDivElement>
 ) =
-    Column({
-        gap(gap)
-        styles?.invoke(this)
-    }, fitContent, content)
+    Column(attrs<HTMLDivElement> {
+        style {
+            gap(gap)
+        }
+    } + attrs, fitContent, content)
 
 @Composable
 fun RowWithGaps(
-    styles: Styles? = null,
+    attrs: AttrBuilderContext<HTMLDivElement>? = null,
     gap: CSSNumeric,
     content: ContentBuilder<HTMLDivElement>
 ) =
-    Row({
-        gap(gap)
-        styles?.invoke(this)
-    }, content)
+    Row(attrs<HTMLDivElement> {
+        style {
+            gap(gap)
+        }
+    } + attrs, content)
 
 @Composable
 fun Centered(
-    styles: Styles? = null,
+    attrs: AttrBuilderContext<HTMLDivElement>? = null,
     content: ContentBuilder<HTMLDivElement>
 ) =
-    Flexbox({
-        alignItems(AlignItems.Center)
-        justifyContent(JustifyContent.Center)
-        styles?.invoke(this)
-    }, content)
+    Flexbox(attrs<HTMLDivElement> {
+        style {
+            alignItems(AlignItems.Center)
+            justifyContent(JustifyContent.Center)
+        }
+    } + attrs, content)
 
 @Composable
 fun CenteredInViewport(
-    styles: Styles? = null,
+    attrs: AttrBuilderContext<HTMLDivElement>? = null,
     content: ContentBuilder<HTMLDivElement>
 ) =
-    Centered({
-        minHeight(100.vh)
-        styles?.invoke(this)
-    }, content)
+    Centered(attrs<HTMLDivElement> {
+        style {
+            minHeight(100.vh)
+        }
+    } + attrs, content)
 
 @Composable
 fun FrGrid(

compose-web-common/src/jsMain/kotlin/com/huanshankeji/compose/web/Types.kt

@@ -1,7 +1,6 @@
 package com.huanshankeji.compose.web
 
 import androidx.compose.runtime.Composable
-import org.jetbrains.compose.web.css.StyleScope
 import org.jetbrains.compose.web.dom.AttrBuilderContext
 import org.jetbrains.compose.web.dom.ContentBuilder
 import org.jetbrains.compose.web.dom.Div
@@ -19,6 +18,4 @@ typealias DivElementComposable = ElementComposable<HTMLDivElement>
 // `::Div` cannot be used directly because "Function References of @Composable functions are not currently supported"
 val DivComposable: ElementComposable<HTMLDivElement> = { attrs, content -> Div(attrs, content) }
 
-typealias Styles = StyleScope.() -> Unit
-
 typealias HTMLElementContent = (@Composable ElementScope<HTMLElement>.() -> Unit)?

compose-web-common/src/jsMain/kotlin/com/huanshankeji/compose/web/css/Styles.kt

@@ -0,0 +1,10 @@
+package com.huanshankeji.compose.web.css
+
+import org.jetbrains.compose.web.css.StyleScope
+import org.jetbrains.compose.web.dom.AttrBuilderContext
+import org.w3c.dom.Element
+
+typealias Styles = StyleScope.() -> Unit
+
+fun <TElement : Element> Styles?.wrapInAttrs(): AttrBuilderContext<TElement>? =
+    this?.let { { style { it() } } }

compose-web-material/src/jsMain/kotlin/com/huanshankeji/compose/web/material/Layouts.kt

@@ -2,7 +2,7 @@ package com.huanshankeji.compose.web.material
 
 import androidx.compose.runtime.Composable
 import com.huanshankeji.compose.web.CenteredInViewport
-import com.huanshankeji.compose.web.Styles
+import com.huanshankeji.compose.web.css.Styles
 import org.jetbrains.compose.web.attributes.AttrsScope
 import org.jetbrains.compose.web.dom.ContentBuilder
 import org.w3c.dom.HTMLDivElement
@@ -13,6 +13,6 @@ fun CenteredCardInViewport(
     cardAttrs: (AttrsScope<HTMLDivElement>.() -> Unit)? = null,
     content: ContentBuilder<HTMLDivElement>
 ) =
-    CenteredInViewport(viewportDivStyles) {
+    CenteredInViewport({ viewportDivStyles?.let { style { it() } } }) {
         MdcCard(cardAttrs, content = content)
     }