Implement roundedCornerOuterBorder, implement Percentage on both platforms, and update the demo

Author: ShreckYe

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

@@ -40,7 +40,7 @@ expect class ModifierOrAttrsScope<out TElement : Element> {
  * as different orders of CSS properties do in the HTML `style` attribute.
  */
 expect class StyleScope {
-    fun margin(value: LengthOrPercentage)
+    fun margin(value: Length)
     fun height(value: HeightOrWidth)
     fun width(value: HeightOrWidth)
 
@@ -49,16 +49,11 @@ expect class StyleScope {
     /**
      * Currently inconsistent, adds inner border on desktop and Android and outer padding on web.
      */
-    fun border(width: Length, color: Color)
+    fun platformBorder(width: Length, color: Color)
 
     fun outerBorder(width: Length, color: Color)
 
-    // TODO
-    /*
-    class CornerSize
-
-    fun roundedCornerBorder(width: Length, color: Color, cornerRadius: CornerSize)
-    */
+    fun roundedCornerOuterBorder(width: Length, color: Color, cornerRadius: LengthOrPercentage)
 }
 
 fun StyleScope.height(value: LengthOrPercentage) =

compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/ui/unit/Sizes.kt

@@ -3,6 +3,9 @@ package com.huanshankeji.compose.ui.unit
 // Percentage is only supported on JS.
 expect sealed interface LengthOrPercentage
 expect sealed interface Length : LengthOrPercentage
+expect class Percentage : LengthOrPercentage
+
+expect val Int.percent: Percentage
 
 expect class DpOrPx : Length
 

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

@@ -27,7 +27,10 @@ actual class ModifierOrAttrsScope<out TElement : Element>(val attrsScope: AttrsS
 }
 
 actual class StyleScope(val styleScope: org.jetbrains.compose.web.css.StyleScope) {
-    actual fun margin(value: LengthOrPercentage) =
+    actual fun margin(value: Length) =
+        styleScope.margin(value.platformValue)
+
+    fun margin(value: LengthOrPercentage) =
         styleScope.margin(value.platformValue)
 
     actual fun height(value: HeightOrWidth) =
@@ -52,9 +55,14 @@ actual class StyleScope(val styleScope: org.jetbrains.compose.web.css.StyleScope
     actual fun backgroundColor(color: Color) =
         styleScope.backgroundColor(color.platformValue)
 
-    actual fun border(width: Length, color: Color) =
+    actual fun platformBorder(width: Length, color: Color) =
         styleScope.border(width.platformValue, LineStyle.Solid, color.platformValue)
 
     actual fun outerBorder(width: Length, color: Color) =
-        border(width, color)
+        platformBorder(width, color)
+
+    actual fun roundedCornerOuterBorder(width: Length, color: Color, cornerRadius: LengthOrPercentage) {
+        outerBorder(width, color)
+        styleScope.borderRadius(cornerRadius.platformValue)
+    }
 }

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

@@ -1,6 +1,7 @@
 package com.huanshankeji.compose.ui.unit
 
 import org.jetbrains.compose.web.css.*
+import org.jetbrains.compose.web.css.percent as platformPercent
 
 actual sealed interface LengthOrPercentage {
     val platformValue: CSSLengthOrPercentageValue
@@ -14,9 +15,9 @@ actual sealed interface Length : LengthOrPercentage {
     class Impl(override val platformValue: CSSLengthValue) : Length
 }
 
-// JS only
-class Percentage(override val platformValue: CSSPercentageValue) : LengthOrPercentage
+actual class Percentage(override val platformValue: CSSPercentageValue) : LengthOrPercentage
 
+actual val Int.percent get() = Percentage(this.platformPercent)
 
 actual class DpOrPx(override val platformValue: CSSpxValue) : Length
 

compose-multiplatform-common/src/jvmMain/kotlin/com/huanshankeji/compose/ui/ModifierOrAttrsScopeJvm.kt

@@ -3,13 +3,11 @@ package com.huanshankeji.compose.ui
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.ui.Modifier
 import com.huanshankeji.compose.ui.color.Color
-import com.huanshankeji.compose.ui.unit.HeightOrWidth
+import com.huanshankeji.compose.ui.unit.*
 import com.huanshankeji.compose.ui.unit.HeightOrWidth.*
-import com.huanshankeji.compose.ui.unit.Length
-import com.huanshankeji.compose.ui.unit.LengthOrPercentage
-import com.huanshankeji.compose.ui.unit.asDpOrPx
 
 fun <TElement : Element> ModifierOrAttrs<TElement>.toModifier(): Modifier =
     this?.let {
@@ -40,7 +38,7 @@ actual class StyleScope(val modifierOrAttrsScope: ModifierOrAttrsScope<*>) {
     fun modify(block: Modifier.() -> Modifier) =
         modifierOrAttrsScope.modify(block)
 
-    actual fun margin(value: LengthOrPercentage) = modify {
+    actual fun margin(value: Length) = modify {
         padding(value.asDpOrPx().platformValue)
     }
 
@@ -66,12 +64,26 @@ actual class StyleScope(val modifierOrAttrsScope: ModifierOrAttrsScope<*>) {
         background(color.platformValue)
     }
 
-    actual fun border(width: Length, color: Color) = modify {
+    actual fun platformBorder(width: Length, color: Color) = modify {
         border(width.asDpOrPx().platformValue, color.platformValue)
     }
 
     actual fun outerBorder(width: Length, color: Color) {
-        border(width, color)
+        platformBorder(width, color)
+        margin(width)
+    }
+
+    actual fun roundedCornerOuterBorder(width: Length, color: Color, cornerRadius: LengthOrPercentage) {
+        modify {
+            border(
+                width.asDpOrPx().platformValue, color.platformValue, when (cornerRadius) {
+                    is DpOrPx -> RoundedCornerShape(cornerRadius.platformValue)
+                    is Percentage -> RoundedCornerShape(cornerRadius.value)
+                    // TODO
+                    else -> throw AssertionError()
+                }
+            )
+        }
         margin(width)
     }
 }

compose-multiplatform-common/src/jvmMain/kotlin/com/huanshankeji/compose/ui/unit/Sizes.kt

@@ -5,16 +5,26 @@ import androidx.compose.ui.unit.dp
 
 actual sealed interface LengthOrPercentage
 actual sealed interface Length : LengthOrPercentage
+actual typealias Percentage = PercentageImpl
+
+class PercentageImpl(val value: Int) : LengthOrPercentage {
+    init {
+        require(value in 0..100)
+    }
+}
+
+actual val Int.percent get() = Percentage(this)
 
 actual class DpOrPx(val platformValue: Dp) : Length
 
-fun Length.asDpOrPx() : DpOrPx =
+fun Length.asDpOrPx(): DpOrPx =
     when (this) {
         is DpOrPx -> this
         // TODO: this else branch is not needed but marked as an error by the IDE plugin
         else -> throw AssertionError()
     }
-fun LengthOrPercentage.asDpOrPx() : DpOrPx =
+
+fun LengthOrPercentage.asDpOrPx(): DpOrPx =
     when (this) {
         is DpOrPx -> this
         // TODO

demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/App.kt

@@ -82,8 +82,9 @@ fun App() {
 
                 Row({
                     style {
+                        // The order of function calls can't be changed!
+                        roundedCornerOuterBorder(4.dpOrPx, Colors.blue, 16.dpOrPx)
                         backgroundColor(rgbColor(0U, 0x80U, 0x00U))
-                        outerBorder(4.dpOrPx, Colors.blue)
                     }
                 }) {
                     @Composable