library: Allow to set backgroundColor of the SuperDialog

Author: YuKongA

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

@@ -11,6 +11,7 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
@@ -266,10 +267,10 @@ fun TextComponent() {
     dialog2(showDialog2)
 }
 
-
 @Composable
 fun dialog(showDialog: MutableState<Boolean>) {
     if (!showDialog.value) return
+    val value = remember { mutableStateOf("") }
     showDialog(
         content = {
             SuperDialog(
@@ -280,6 +281,12 @@ fun dialog(showDialog: MutableState<Boolean>) {
                     showDialog.value = false
                 },
             ) {
+                TextField(
+                    modifier = Modifier.padding(bottom = 16.dp),
+                    value = value.value,
+                    maxLines = 1,
+                    onValueChange = { value.value = it }
+                )
                 Row(
                     horizontalArrangement = Arrangement.SpaceBetween
                 ) {
@@ -310,23 +317,27 @@ fun dialog(showDialog: MutableState<Boolean>) {
 @Composable
 fun dialog2(showDialog: MutableState<Boolean>) {
     if (!showDialog.value) return
-    val value = remember { mutableStateOf("") }
+    val dropdownOptions = listOf("Option 1", "Option 2")
+    val dropdownSelectedOption = remember { mutableStateOf(0) }
     showDialog(
         content = {
             SuperDialog(
                 title = "Dialog 2",
-                summary = "Summary",
+                backgroundColor = MiuixTheme.colorScheme.background,
                 show = showDialog,
                 onDismissRequest = {
                     showDialog.value = false
                 },
             ) {
-                TextField(
-                    modifier = Modifier.padding(bottom = 16.dp),
-                    value = value.value,
-                    maxLines = 1,
-                    onValueChange = { value.value = it }
-                )
+                Card {
+                    SuperDropdown(
+                        title = "Dropdown",
+                        items = dropdownOptions,
+                        selectedIndex = dropdownSelectedOption.value,
+                        onSelectedIndexChange = { newOption -> dropdownSelectedOption.value = newOption },
+                    )
+                }
+                Spacer(Modifier.height(12.dp))
                 Row(
                     horizontalArrangement = Arrangement.SpaceBetween
                 ) {
@@ -352,4 +363,4 @@ fun dialog2(showDialog: MutableState<Boolean>) {
             }
         }
     )
-}
+}

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

@@ -48,6 +48,7 @@ import top.yukonga.miuix.kmp.utils.squircleshape.SquircleShape
  * @param titleColor The color of the title.
  * @param summary The summary of the [SuperDialog].
  * @param summaryColor The color of the summary.
+ * @param backgroundColor The background color of the [SuperDialog].
  * @param show The state of the [SuperDialog].
  * @param onDismissRequest The callback when the [SuperDialog] is dismissed.
  * @param insideMargin The margin inside the [SuperDialog].
@@ -61,6 +62,7 @@ fun SuperDialog(
     titleColor: Color = MiuixTheme.colorScheme.onSurface,
     summary: String? = null,
     summaryColor: Color = MiuixTheme.colorScheme.onSurfaceVariantDialog,
+    backgroundColor: Color = MiuixTheme.colorScheme.surfaceVariant,
     show: MutableState<Boolean>,
     onDismissRequest: () -> Unit,
     insideMargin: DpSize? = null,
@@ -84,13 +86,13 @@ fun SuperDialog(
 
     Box(
         modifier = if (defaultWindowInsetsPadding) {
-            modifier
+            Modifier
                 .imePadding()
                 .navigationBarsPadding()
                 .windowInsetsPadding(WindowInsets.displayCutout.only(WindowInsetsSides.Horizontal))
                 .windowInsetsPadding(WindowInsets.captionBar.only(WindowInsetsSides.Top))
         } else {
-            modifier
+            Modifier
         }
             .fillMaxSize()
             .pointerInput(Unit) {
@@ -99,11 +101,10 @@ fun SuperDialog(
                     onDismissRequest()
                 })
             }
-
             .then(paddingModifier)
     ) {
         Column(
-            modifier = Modifier
+            modifier = modifier
                 .then(if (contentAlignment != Alignment.Center) Modifier.fillMaxWidth() else Modifier.widthIn(max = 400.dp))
                 .pointerInput(Unit) {
                     detectTapGestures { /* Do nothing to consume the click */ }
@@ -115,7 +116,7 @@ fun SuperDialog(
                     clip = false
                 )
                 .background(
-                    color = MiuixTheme.colorScheme.surfaceVariant,
+                    color = backgroundColor,
                     shape = SquircleShape(bottomCornerRadius)
                 )
                 .padding(24.dp),

miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/utils/MiuixPopupUtil.kt

@@ -108,6 +108,16 @@ class MiuixPopupUtil {
                 ) {
                     dialogContext.value?.invoke()
                 }
+                AnimatedVisibility(
+                    visible = isPopupShowing.value && isDialogShowing.value,
+                    modifier = Modifier.zIndex(1f).fillMaxSize(),
+                ) {
+                    Box(
+                        modifier = Modifier
+                            .fillMaxSize()
+                            .background(Color.Black.copy(alpha = 0.3f))
+                    )
+                }
             }
             AnimatedVisibility(
                 visible = isPopupShowing.value,