library: Use PaddingValues instead of DpSize (#32)

* update: Use PaddingValues instead of DpSize
* update: Allow setting Scaffold's popupHost to null (using Scaffold and MiuixPopupHost separately)

---------

Co-authored-by: YuKongA <[email protected]>

Author: HowieHChen

composeApp/src/commonMain/kotlin/MainPage.kt

@@ -65,7 +65,7 @@ fun MainPage(
                                 label = "Search",
                                 leadingIcon = {
                                     Icon(
-                                        modifier = Modifier.padding(horizontal = 16.dp),
+                                        modifier = Modifier.padding(start = 12.dp, end = 8.dp),
                                         imageVector = MiuixIcons.Search,
                                         tint = MiuixTheme.colorScheme.onSurfaceContainer,
                                         contentDescription = "Search"

composeApp/src/commonMain/kotlin/component/OtherComponent.kt

@@ -19,7 +19,6 @@ import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.input.TextFieldValue
-import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import top.yukonga.miuix.kmp.basic.ButtonDefaults
@@ -141,7 +140,7 @@ fun OtherComponent(padding: PaddingValues) {
             .padding(horizontal = 12.dp)
             .padding(bottom = 12.dp),
         color = MiuixTheme.colorScheme.primaryVariant,
-        insideMargin = DpSize(16.dp, 16.dp)
+        insideMargin = PaddingValues(16.dp)
     ) {
         Text(
             color = MiuixTheme.colorScheme.onPrimary,
@@ -156,7 +155,7 @@ fun OtherComponent(padding: PaddingValues) {
             .fillMaxWidth()
             .padding(horizontal = 12.dp)
             .padding(bottom = 12.dp + padding.calculateBottomPadding()),
-        insideMargin = DpSize(16.dp, 16.dp)
+        insideMargin = PaddingValues(16.dp)
     ) {
         Text(
             color = MiuixTheme.colorScheme.onSurface,

composeApp/src/commonMain/kotlin/component/TextComponent.kt

@@ -72,11 +72,14 @@ fun TextComponent() {
             title = "Title",
             summary = "Summary",
             leftAction = {
-                Text(text = "Left")
+                Text(
+                    text = "Left",
+                    modifier = Modifier.padding(end = 16.dp)
+                )
             },
             rightActions = {
                 Text(text = "Right1")
-                Spacer(Modifier.width(6.dp))
+                Spacer(Modifier.width(10.dp))
                 Text(text = "Right2")
             },
             onClick = {},
@@ -88,6 +91,7 @@ fun TextComponent() {
             leftAction = {
                 Text(
                     text = "Left",
+                    modifier = Modifier.padding(end = 16.dp),
                     color = MiuixTheme.colorScheme.disabledOnSecondaryVariant
                 )
             },
@@ -96,7 +100,7 @@ fun TextComponent() {
                     text = "Right1",
                     color = MiuixTheme.colorScheme.disabledOnSecondaryVariant
                 )
-                Spacer(Modifier.width(6.dp))
+                Spacer(Modifier.width(10.dp))
                 Text(
                     text = "Right2",
                     color = MiuixTheme.colorScheme.disabledOnSecondaryVariant
@@ -116,6 +120,7 @@ fun TextComponent() {
             leftAction = {
                 Box(
                     contentAlignment = Alignment.TopStart,
+                    modifier = Modifier.padding(end = 16.dp)
                 ) {
                     Icon(
                         imageVector = Icons.Rounded.AccountBox,
@@ -154,7 +159,7 @@ fun TextComponent() {
         Row(
             modifier = Modifier
                 .fillMaxWidth()
-                .padding(horizontal = 12.dp, vertical = 12.dp),
+                .padding(16.dp),
             horizontalArrangement = Arrangement.SpaceBetween
         ) {
             Checkbox(
@@ -186,7 +191,7 @@ fun TextComponent() {
             checked = miuixSuperRightCheckboxState,
             rightActions = {
                 Text(
-                    modifier = Modifier.padding(end = 6.dp),
+                    modifier = Modifier.padding(end = 10.dp),
                     text = miuixSuperRightCheckbox,
                     color = MiuixTheme.colorScheme.onSurfaceVariantActions
                 )
@@ -224,7 +229,7 @@ fun TextComponent() {
         Row(
             modifier = Modifier
                 .fillMaxWidth()
-                .padding(horizontal = 12.dp, vertical = 12.dp),
+                .padding(16.dp),
             horizontalArrangement = Arrangement.SpaceBetween
         ) {
             Switch(

miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Button.kt

@@ -1,6 +1,7 @@
 package top.yukonga.miuix.kmp.basic
 
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.defaultMinSize
@@ -15,7 +16,6 @@ import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.semantics.role
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.dp
 import top.yukonga.miuix.kmp.theme.MiuixTheme
 import top.yukonga.miuix.kmp.utils.SmoothRoundedCornerShape
@@ -42,7 +42,7 @@ fun Button(
     minWidth: Dp = ButtonDefaults.MinWidth,
     minHeight: Dp = ButtonDefaults.MinHeight,
     colors: ButtonColors = ButtonDefaults.buttonColors(),
-    insideMargin: DpSize = ButtonDefaults.InsideMargin,
+    insideMargin: PaddingValues = ButtonDefaults.InsideMargin,
     content: @Composable RowScope.() -> Unit
 ) {
     Surface(
@@ -57,7 +57,7 @@ fun Button(
         Row(
             Modifier
                 .defaultMinSize(minWidth = minWidth, minHeight = minHeight)
-                .padding(insideMargin.width, insideMargin.height),
+                .padding(insideMargin),
             horizontalArrangement = Arrangement.Center,
             verticalAlignment = Alignment.CenterVertically,
             content = content
@@ -88,7 +88,7 @@ fun TextButton(
     cornerRadius: Dp = ButtonDefaults.ConorRadius,
     minWidth: Dp = ButtonDefaults.MinWidth,
     minHeight: Dp = ButtonDefaults.MinHeight,
-    insideMargin: DpSize = ButtonDefaults.InsideMargin,
+    insideMargin: PaddingValues = ButtonDefaults.InsideMargin,
 ) {
     Surface(
         onClick = {
@@ -102,7 +102,7 @@ fun TextButton(
         Row(
             Modifier
                 .defaultMinSize(minWidth = minWidth, minHeight = minHeight)
-                .padding(insideMargin.width, insideMargin.height),
+                .padding(insideMargin),
             horizontalArrangement = Arrangement.Center,
             verticalAlignment = Alignment.CenterVertically,
             content = {
@@ -138,7 +138,7 @@ object ButtonDefaults {
     /**
      * The default inside margin applied for all buttons.
      */
-    val InsideMargin = DpSize(16.dp, 16.dp)
+    val InsideMargin = PaddingValues(16.dp)
 
     /**
      * The default [ButtonColors] for all buttons.

miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Card.kt

@@ -2,13 +2,13 @@ package top.yukonga.miuix.kmp.basic
 
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.dp
 import top.yukonga.miuix.kmp.theme.MiuixTheme
 import top.yukonga.miuix.kmp.utils.SmoothRoundedCornerShape
@@ -29,22 +29,19 @@ import top.yukonga.miuix.kmp.utils.SmoothRoundedCornerShape
 fun Card(
     modifier: Modifier = Modifier,
     cornerRadius: Dp = CardDefaults.ConorRadius,
-    insideMargin: DpSize = CardDefaults.InsideMargin,
+    insideMargin: PaddingValues = CardDefaults.InsideMargin,
     color: Color = CardDefaults.DefaultColor(),
     content: @Composable ColumnScope.() -> Unit
 ) {
     val shape = remember { SmoothRoundedCornerShape(cornerRadius) }
-    val paddingModifier = remember(insideMargin) {
-        Modifier.padding(vertical = insideMargin.height, horizontal = insideMargin.width)
-    }
 
     Surface(
         modifier = modifier,
         shape = shape,
         color = color,
     ) {
         Column(
-            modifier = paddingModifier,
+            modifier = Modifier.padding(insideMargin),
             content = content
         )
     }
@@ -60,7 +57,7 @@ object CardDefaults {
     /**
      * The default margin inside the [Card].
      */
-    val InsideMargin = DpSize(0.dp, 0.dp)
+    val InsideMargin = PaddingValues(0.dp)
 
     /**
      * The default color width of the [Card].

miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Component.kt

@@ -5,6 +5,7 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -23,7 +24,6 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.input.pointer.PointerEventType
 import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.dp
 import top.yukonga.miuix.kmp.theme.MiuixTheme
 
@@ -45,7 +45,7 @@ import top.yukonga.miuix.kmp.theme.MiuixTheme
 @Composable
 fun BasicComponent(
     modifier: Modifier = Modifier,
-    insideMargin: DpSize = BasicComponentDefaults.InsideMargin,
+    insideMargin: PaddingValues = BasicComponentDefaults.InsideMargin,
     title: String? = null,
     titleColor: BasicComponentColors = BasicComponentDefaults.titleColor(),
     summary: String? = null,
@@ -80,19 +80,12 @@ fun BasicComponent(
             }
             .heightIn(min = 56.dp)
             .fillMaxWidth()
-            .padding(
-                horizontal = insideMargin.width,
-                vertical = insideMargin.height
-            ),
+            .padding(insideMargin),
         verticalAlignment = Alignment.CenterVertically,
         horizontalArrangement = Arrangement.SpaceBetween
     ) {
         leftAction?.let {
-            Box(
-                modifier = Modifier.padding(end = 16.dp)
-            ) {
-                it()
-            }
+            it()
         }
         Column(
             modifier = Modifier.weight(1f)
@@ -130,7 +123,7 @@ object BasicComponentDefaults {
     /**
      * The default margin inside the [BasicComponent].
      */
-    val InsideMargin = DpSize(16.dp, 16.dp)
+    val InsideMargin = PaddingValues(16.dp)
 
     /**
      * The default color of the title.

miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Scaffold.kt

@@ -29,6 +29,7 @@ import androidx.compose.ui.util.fastMap
 import androidx.compose.ui.util.fastMapNotNull
 import androidx.compose.ui.util.fastMaxBy
 import top.yukonga.miuix.kmp.theme.MiuixTheme
+import top.yukonga.miuix.kmp.utils.MiuixPopupUtil
 import top.yukonga.miuix.kmp.utils.MiuixPopupUtil.Companion.MiuixPopupHost
 
 /**
@@ -45,6 +46,8 @@ import top.yukonga.miuix.kmp.utils.MiuixPopupUtil.Companion.MiuixPopupHost
  * @param floatingActionButtonPosition position of the floating action button.
  * @param snackbarHost component to host [Snackbar]s that are pushed to be shown via
  *   [SnackbarHostState.showSnackbar], typically a [SnackbarHost].
+ * @param popupHost component to host [SuperDropdown]s & [SuperDialog]s that are pushed to be shown via
+ *   [MiuixPopupUtil.showPopup] & [MiuixPopupUtil.showDialog], typically a [MiuixPopupHost].
  * @param containerColor the color used for the background of this scaffold. Use [Color.Transparent]
  *   to have no color.
  * @param contentWindowInsets window insets to be passed to [content] slot via [PaddingValues]
@@ -65,6 +68,7 @@ fun Scaffold(
     floatingActionButton: @Composable () -> Unit = {},
     floatingActionButtonPosition: MiuixFabPosition = MiuixFabPosition.End,
     snackbarHost: @Composable () -> Unit = {},
+    popupHost: @Composable () -> Unit = { MiuixPopupHost() },
     containerColor: Color = MiuixTheme.colorScheme.background,
     contentWindowInsets: WindowInsets = WindowInsets.statusBars,
     content: @Composable (PaddingValues) -> Unit
@@ -91,7 +95,7 @@ fun Scaffold(
             snackbar = snackbarHost,
             fab = floatingActionButton,
             fabPosition = floatingActionButtonPosition,
-            popup = { MiuixPopupHost() },
+            popup = popupHost,
             contentWindowInsets = safeInsets,
         )
     }

miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/SearchBar.kt

@@ -129,7 +129,7 @@ fun InputField(
     val interactionSource = interactionSource ?: remember { MutableInteractionSource() }
 
     val paddingModifier = remember(insideMargin, leadingIcon, trailingIcon) {
-        if (leadingIcon == null && trailingIcon == null) Modifier.padding(insideMargin.width, vertical = insideMargin.height)
+        if (leadingIcon == null && trailingIcon == null) Modifier.padding(horizontal = insideMargin.width, vertical = insideMargin.height)
         else if (leadingIcon == null) Modifier.padding(start = insideMargin.width).padding(vertical = insideMargin.height)
         else if (trailingIcon == null) Modifier.padding(end = insideMargin.width).padding(vertical = insideMargin.height)
         else Modifier.padding(vertical = insideMargin.height)

miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/SmallTitle.kt

@@ -1,12 +1,12 @@
 package top.yukonga.miuix.kmp.basic
 
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.font.FontWeight
-import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.dp
 import top.yukonga.miuix.kmp.theme.MiuixTheme
 
@@ -23,10 +23,10 @@ fun SmallTitle(
     text: String,
     modifier: Modifier = Modifier,
     textColor: Color = MiuixTheme.colorScheme.onBackgroundVariant,
-    insideMargin: DpSize = DpSize(28.dp, 8.dp)
+    insideMargin: PaddingValues = PaddingValues(28.dp, 8.dp)
 ) {
     val paddingModifier = remember(insideMargin) {
-        Modifier.padding(horizontal = insideMargin.width, vertical = insideMargin.height)
+        Modifier.padding(insideMargin)
     }
     Text(
         modifier = modifier.then(paddingModifier),

miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperArrow.kt

@@ -1,6 +1,7 @@
 package top.yukonga.miuix.kmp.extra
 
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
@@ -12,7 +13,6 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.text.style.TextAlign
-import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.dp
 import top.yukonga.miuix.kmp.basic.BasicComponent
 import top.yukonga.miuix.kmp.basic.BasicComponentColors
@@ -48,7 +48,7 @@ fun SuperArrow(
     rightText: String? = null,
     rightActionColor: RightActionColors = SuperArrowDefaults.rightActionColors(),
     onClick: (() -> Unit)? = null,
-    insideMargin: DpSize = BasicComponentDefaults.InsideMargin,
+    insideMargin: PaddingValues = BasicComponentDefaults.InsideMargin,
     enabled: Boolean = true
 ) {
     val updatedOnClick by rememberUpdatedState(onClick)