library: Add bottomAction param to BasicComponent

YuKongA · YuKongA · commit 97d2fbae1aa8 · 2025-12-09T09:04:50.000+08:00
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -20,7 +20,7 @@ jobs:
             os: ubuntu-latest
           - target: ':miuix:assembleAndroidTest'
             os: ubuntu-latest
-          - target: ':miuix:jsBrowserTest'
+          - target: ':miuix:wasmJsBrowserTest'
             os: ubuntu-latest
     runs-on: ${{ matrix.os }}
     steps:
diff --git a/docs/components/basiccomponent.md b/docs/components/basiccomponent.md
@@ -95,6 +95,7 @@ BasicComponent(
 | summaryColor      | BasicComponentColors            | Summary color configuration                           | BasicComponentDefaults.summaryColor() | No       |
 | leftAction        | @Composable (() -> Unit)?       | Composable content on the left side of the component  | null                                  | No       |
 | rightActions      | @Composable (RowScope.() -> Unit)? | Composable content on the right side of the component | null                                 | No       |
+| bottomAction      | @Composable (() -> Unit)?       | Composable content at the bottom of the component     | null                                  | No       |
 | modifier          | Modifier                        | Modifier for the component                            | Modifier                              | No       |
 | insideMargin      | PaddingValues                   | Internal padding of the component                     | BasicComponentDefaults.InsideMargin   | No       |
 | onClick           | (() -> Unit)?                   | Callback triggered when the component is clicked      | null                                  | No       |
diff --git a/docs/components/superarrow.md b/docs/components/superarrow.md
@@ -83,6 +83,7 @@ Scaffold {
 | summaryColor     | BasicComponentColors           | Summary text color configuration     | BasicComponentDefaults.summaryColor() | No     |
 | leftAction       | @Composable (() -> Unit)?      | Custom left content                  | null                                | No       |
 | rightActions     | @Composable RowScope.() -> Unit | Custom right-side content (slot)     | {}                                  | No       |
+| bottomAction     | @Composable (() -> Unit)?       | Custom bottom content                | null                                | No       |
 | modifier         | Modifier                       | Modifier applied to component        | Modifier                            | No       |
 | insideMargin     | PaddingValues                  | Internal content padding             | BasicComponentDefaults.InsideMargin | No       |
 | onClick          | (() -> Unit)?                  | Callback triggered on click          | null                                | No       |
@@ -188,4 +189,3 @@ SuperArrow(
     }
 }
 ```
-
diff --git a/docs/components/supercheckbox.md b/docs/components/supercheckbox.md
@@ -102,6 +102,7 @@ SuperCheckbox(
 | checkboxColors    | CheckboxColors                  | Checkbox control color configuration | CheckboxDefaults.checkboxColors()     | No       |
 | rightActions      | @Composable RowScope.() -> Unit | Custom content before checkbox       | {}                                    | No       |
 | checkboxLocation  | CheckboxLocation                | Checkbox position                    | CheckboxLocation.Left                 | No       |
+| bottomAction      | @Composable (() -> Unit)?       | Custom bottom content                | null                                  | No       |
 | onClick           | (() -> Unit)?                   | Additional callback on item click    | null                                  | No       |
 | holdDownState     | Boolean                         | Whether the component is held down   | false                                 | No       |
 | insideMargin      | PaddingValues                   | Internal content padding             | BasicComponentDefaults.InsideMargin   | No       |
diff --git a/docs/components/superdropdown.md b/docs/components/superdropdown.md
@@ -82,6 +82,7 @@ SuperDropdown(
 | summaryColor          | BasicComponentColors | Summary text color configuration  | BasicComponentDefaults.summaryColor() | No       |
 | dropdownColors        | DropdownColors       | Color configuration for dropdown  | DropdownDefaults.dropdownColors()     | No       |
 | leftAction            | @Composable (() -> Unit)? | Custom left content           | null                                  | No       |
+| bottomAction          | @Composable (() -> Unit)? | Custom bottom content         | null                                  | No       |
 | modifier              | Modifier             | Modifier applied to the component | Modifier                              | No       |
 | insideMargin          | PaddingValues        | Internal content padding          | BasicComponentDefaults.InsideMargin   | No       |
 | maxHeight             | Dp?                  | Maximum height of dropdown menu   | null                                  | No       |
diff --git a/docs/components/superspinner.md b/docs/components/superspinner.md
@@ -144,6 +144,7 @@ Scaffold {
 | summaryColor          | BasicComponentColors      | Summary text color config   | BasicComponentDefaults.summaryColor() | No       |
 | spinnerColors         | SpinnerColors             | Color configuration for spinner | SpinnerDefaults.spinnerColors()       | No       |
 | leftAction            | @Composable (() -> Unit)? | Custom left content         | null                                  | No       |
+| bottomAction          | @Composable (() -> Unit)? | Custom bottom content       | null                                  | No       |
 | modifier              | Modifier                  | Component modifier          | Modifier                              | No       |
 | insideMargin          | PaddingValues             | Internal content padding    | BasicComponentDefaults.InsideMargin   | No       |
 | maxHeight             | Dp?                       | Maximum dropdown height     | null                                  | No       |
diff --git a/docs/components/superswitch.md b/docs/components/superswitch.md
@@ -67,6 +67,7 @@ SuperSwitch(
 | summaryColor    | BasicComponentColors            | Summary text color configuration         | BasicComponentDefaults.summaryColor() | No       |
 | leftAction      | @Composable (() -> Unit)?       | Custom left content                      | null                                  | No       |
 | rightActions    | @Composable RowScope.() -> Unit | Custom right content (before switch)     | {}                                    | No       |
+| bottomAction    | @Composable (() -> Unit)?       | Custom bottom content                     | null                                  | No       |
 | switchColors    | SwitchColors                    | Switch control color configuration       | SwitchDefaults.switchColors()         | No       |
 | modifier        | Modifier                        | Component modifier                       | Modifier                              | No       |
 | insideMargin    | PaddingValues                   | Component internal content padding       | BasicComponentDefaults.InsideMargin   | No       |
diff --git a/docs/zh_CN/components/basiccomponent.md b/docs/zh_CN/components/basiccomponent.md
@@ -95,6 +95,7 @@ BasicComponent(
 | summaryColor      | BasicComponentColors            | 摘要颜色配置         | BasicComponentDefaults.summaryColor() | 否       |
 | leftAction        | @Composable (() -> Unit)?       | 组件左侧的可组合内容 | null                                  | 否       |
 | rightActions      | @Composable (RowScope.() -> Unit)? | 组件右侧的可组合内容 | null                                 | 否       |
+| bottomAction      | @Composable (() -> Unit)?       | 组件底部的可组合内容 | null                                  | 否       |
 | modifier          | Modifier                        | 应用于组件的修饰符   | Modifier                              | 否       |
 | insideMargin      | PaddingValues                   | 组件内部边距         | BasicComponentDefaults.InsideMargin   | 否       |
 | onClick           | (() -> Unit)?                   | 点击组件时触发的回调 | null                                  | 否       |
diff --git a/docs/zh_CN/components/superarrow.md b/docs/zh_CN/components/superarrow.md
@@ -83,6 +83,7 @@ Scaffold {
 | summaryColor     | BasicComponentColors           | 摘要文本的颜色配置                | BasicComponentDefaults.summaryColor() | 否     |
 | leftAction       | @Composable (() -> Unit)?      | 左侧自定义内容                    | null                                | 否       |
 | rightActions     | @Composable RowScope.() -> Unit | 右侧自定义内容插槽（slot）         | {}                                  | 否       |
+| bottomAction     | @Composable (() -> Unit)?       | 底部自定义内容                      | null                                  | 否       |
 | modifier         | Modifier                       | 应用于组件的修饰符                | Modifier                            | 否       |
 | insideMargin     | PaddingValues                  | 组件内部内容的边距                | BasicComponentDefaults.InsideMargin | 否       |
 | onClick          | (() -> Unit)?                  | 点击时触发的回调                  | null                                | 否       |
diff --git a/docs/zh_CN/components/supercheckbox.md b/docs/zh_CN/components/supercheckbox.md
@@ -102,6 +102,7 @@ SuperCheckbox(
 | checkboxColors   | CheckboxColors                  | 复选框控件的颜色配置       | CheckboxDefaults.checkboxColors()     | 否       |
 | rightActions     | @Composable RowScope.() -> Unit | 右侧自定义内容（复选框前） | {}                                    | 否       |
 | checkboxLocation | CheckboxLocation                | 复选框的位置               | CheckboxLocation.Left                 | 否       |
+| bottomAction     | @Composable (() -> Unit)?       | 底部自定义内容             | null                                  | 否       |
 | onClick          | (() -> Unit)?                   | 点击选项时触发的额外回调   | null                                  | 否       |
 | holdDownState    | Boolean                         | 组件是否处于按下状态       | false                                 | 否       |
 | insideMargin     | PaddingValues                   | 组件内部内容的边距         | BasicComponentDefaults.InsideMargin   | 否       |
diff --git a/docs/zh_CN/components/superdropdown.md b/docs/zh_CN/components/superdropdown.md
@@ -82,6 +82,7 @@ SuperDropdown(
 | summaryColor          | BasicComponentColors | 摘要文本的颜色配置       | BasicComponentDefaults.summaryColor() | 否       |
 | dropdownColors        | DropdownColors       | 下拉菜单的颜色配置       | DropdownDefaults.dropdownColors()     | 否       |
 | leftAction            | @Composable (() -> Unit)? | 左侧显示的自定义内容   | null                                  | 否       |
+| bottomAction          | @Composable (() -> Unit)? | 底部自定义内容         | null                                  | 否       |
 | modifier              | Modifier             | 应用于组件的修饰符       | Modifier                              | 否       |
 | insideMargin          | PaddingValues        | 组件内部内容的边距       | BasicComponentDefaults.InsideMargin   | 否       |
 | maxHeight             | Dp?                  | 下拉菜单的最大高度       | null                                  | 否       |
diff --git a/docs/zh_CN/components/superspinner.md b/docs/zh_CN/components/superspinner.md
@@ -144,6 +144,7 @@ Scaffold {
 | summaryColor          | BasicComponentColors      | 摘要文本的颜色配置     | BasicComponentDefaults.summaryColor() | 否       |
 | spinnerColors         | SpinnerColors             | 选择器的颜色配置       | SpinnerDefaults.spinnerColors()       | 否       |
 | leftAction            | @Composable (() -> Unit)? | 左侧显示的自定义内容   | null                                  | 否       |
+| bottomAction          | @Composable (() -> Unit)? | 底部自定义内容         | null                                  | 否       |
 | modifier              | Modifier                  | 应用于组件的修饰符     | Modifier                              | 否       |
 | insideMargin          | PaddingValues             | 组件内部内容的边距     | BasicComponentDefaults.InsideMargin   | 否       |
 | maxHeight             | Dp?                       | 下拉菜单的最大高度     | null                                  | 否       |
diff --git a/docs/zh_CN/components/superswitch.md b/docs/zh_CN/components/superswitch.md
@@ -67,6 +67,7 @@ SuperSwitch(
 | summaryColor    | BasicComponentColors            | 摘要文本的颜色配置         | BasicComponentDefaults.summaryColor() | 否       |
 | leftAction      | @Composable (() -> Unit)?       | 左侧自定义内容             | null                                  | 否       |
 | rightActions    | @Composable RowScope.() -> Unit | 右侧自定义内容（开关前）   | {}                                    | 否       |
+| bottomAction    | @Composable (() -> Unit)?       | 底部自定义内容             | null                                  | 否       |
 | switchColors    | SwitchColors                    | 开关控件的颜色配置         | SwitchDefaults.switchColors()         | 否       |
 | modifier        | Modifier                        | 应用于组件的修饰符         | Modifier                              | 否       |
 | insideMargin    | PaddingValues                   | 组件内部内容的边距         | BasicComponentDefaults.InsideMargin   | 否       |
diff --git a/example/src/commonMain/kotlin/component/TextComponent.kt b/example/src/commonMain/kotlin/component/TextComponent.kt
@@ -111,6 +111,9 @@ fun TextComponent(
         )
     }
 
+    var volume by remember { mutableStateOf(0.5f) }
+    val showVolumeDialog = remember { mutableStateOf(false) }
+
     SmallTitle(text = "Basic Component")
     Card(
         modifier = Modifier
@@ -194,6 +197,25 @@ fun TextComponent(
             holdDownState = showBottomSheet.value
         )
 
+        SuperArrow(
+            title = "Slider + Dialog + Arrow",
+            rightActions = {
+                Text(
+                    modifier = Modifier.padding(end = 8.dp),
+                    text = "${(volume * 100).toInt()}%",
+                    color = MiuixTheme.colorScheme.onSurfaceVariantActions
+                )
+            },
+            onClick = { showVolumeDialog.value = true },
+            holdDownState = showVolumeDialog.value,
+            bottomAction = {
+                Slider(
+                    value = volume,
+                    onValueChange = { volume = it }
+                )
+            }
+        )
+
         SuperArrow(
             title = "Disabled Arrow",
             rightActions = {
@@ -403,6 +425,7 @@ fun TextComponent(
         )
     }
     Dialog(showDialog, dialogTextFieldValue)
+    SliderDialog(showVolumeDialog, volumeState = { volume }, onVolumeChange = { volume = it })
     BottomSheet(showBottomSheet, bottomSheetDropdownSelectedOption, bottomSheetSuperSwitchState)
 }
 
@@ -448,6 +471,57 @@ fun Dialog(
     }
 }
 
+@Composable
+fun SliderDialog(
+    showDialog: MutableState<Boolean>,
+    volumeState: () -> Float,
+    onVolumeChange: (Float) -> Unit
+) {
+    SuperDialog(
+        title = "Adjust Volume",
+        summary = "Enter 0-100",
+        show = showDialog,
+        onDismissRequest = { showDialog.value = false }
+    ) {
+        var text by remember { mutableStateOf(((volumeState() * 100).toInt()).toString()) }
+        TextField(
+            modifier = Modifier.padding(bottom = 16.dp),
+            value = text,
+            maxLines = 1,
+            onValueChange = { newValue ->
+                val digits = newValue.filter { it.isDigit() }
+                if (digits.isEmpty()) {
+                    text = ""
+                } else {
+                    val limited = digits.take(3)
+                    val num = limited.toIntOrNull() ?: 0
+                    val clamped = num.coerceIn(0, 100)
+                    text = clamped.toString()
+                }
+            }
+        )
+        Row(horizontalArrangement = Arrangement.SpaceBetween) {
+            TextButton(
+                text = "Cancel",
+                onClick = { showDialog.value = false },
+                modifier = Modifier.weight(1f)
+            )
+            Spacer(Modifier.width(20.dp))
+            TextButton(
+                text = "Confirm",
+                onClick = {
+                    val parsed = text.toIntOrNull()
+                    val clamped = parsed?.coerceIn(0, 100) ?: ((volumeState() * 100).toInt())
+                    onVolumeChange(clamped / 100f)
+                    showDialog.value = false
+                },
+                modifier = Modifier.weight(1f),
+                colors = ButtonDefaults.textButtonColorsPrimary()
+            )
+        }
+    }
+}
+
 @Composable
 fun BottomSheet(
     showBottomSheet: MutableState<Boolean>,
@@ -549,4 +623,4 @@ class RoundedRectanglePainter(
             cornerRadius = CornerRadius(cornerRadius.toPx(), cornerRadius.toPx())
         )
     }
-}
+}
diff --git a/iosApp/iosApp/Info.plist b/iosApp/iosApp/Info.plist
@@ -17,7 +17,7 @@
 	<key>CFBundleShortVersionString</key>
 	<string>1.0.7</string>
 	<key>CFBundleVersion</key>
-	<string>657</string>
+	<string>658</string>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
 	<key>CADisableMinimumFrameDurationOnPhone</key>
diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Component.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/basic/Component.kt
diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperArrow.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperArrow.kt
diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperCheckbox.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperCheckbox.kt
diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperDropdown.kt
diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperSpinner.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperSpinner.kt
diff --git a/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperSwitch.kt b/miuix/src/commonMain/kotlin/top/yukonga/miuix/kmp/extra/SuperSwitch.kt

Original file line number	Diff line number	Diff line change
`@@ -83,6 +83,7 @@ Scaffold {`
`83`	`83`	`\| summaryColor \| BasicComponentColors \| Summary text color configuration \| BasicComponentDefaults.summaryColor() \| No \|`
`84`	`84`	`\| leftAction \| @Composable (() -> Unit)? \| Custom left content \| null \| No \|`
`85`	`85`	`\| rightActions \| @Composable RowScope.() -> Unit \| Custom right-side content (slot) \| {} \| No \|`
	`86`	`+\| bottomAction \| @Composable (() -> Unit)? \| Custom bottom content \| null \| No \|`
`86`	`87`	`\| modifier \| Modifier \| Modifier applied to component \| Modifier \| No \|`
`87`	`88`	`\| insideMargin \| PaddingValues \| Internal content padding \| BasicComponentDefaults.InsideMargin \| No \|`
`88`	`89`	`\| onClick \| (() -> Unit)? \| Callback triggered on click \| null \| No \|`
`@@ -188,4 +189,3 @@ SuperArrow(`
`188`	`189`	`}`
`189`	`190`	`}`
`190`	`191`	```
`191`		`-`