1

Author: YuKongA

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

@@ -22,6 +22,12 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.CornerRadius
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.drawscope.DrawScope
+import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import top.yukonga.miuix.kmp.basic.BasicComponent
 import top.yukonga.miuix.kmp.basic.Box
@@ -35,10 +41,15 @@ import top.yukonga.miuix.kmp.basic.Text
 import top.yukonga.miuix.kmp.basic.TextButton
 import top.yukonga.miuix.kmp.basic.TextField
 import top.yukonga.miuix.kmp.extra.CheckboxLocation
+import top.yukonga.miuix.kmp.extra.DropDownMode
+import top.yukonga.miuix.kmp.extra.SpinnerEntry
+import top.yukonga.miuix.kmp.extra.SpinnerMode
 import top.yukonga.miuix.kmp.extra.SuperArrow
 import top.yukonga.miuix.kmp.extra.SuperCheckbox
 import top.yukonga.miuix.kmp.extra.SuperDialog
 import top.yukonga.miuix.kmp.extra.SuperDropdown
+import top.yukonga.miuix.kmp.extra.SuperSpinner
+import top.yukonga.miuix.kmp.extra.SuperSpinnerAsDialog
 import top.yukonga.miuix.kmp.extra.SuperSwitch
 import top.yukonga.miuix.kmp.theme.MiuixTheme
 import top.yukonga.miuix.kmp.utils.MiuixPopupUtil.Companion.dismissDialog
@@ -52,8 +63,17 @@ fun TextComponent() {
     var switch by remember { mutableStateOf(false) }
     var switchTrue by remember { mutableStateOf(true) }
     val dropdownOptions = listOf("Option 1", "Option 2", "Option 3", "Option 4")
-    val dropdownSelectedOption = remember { mutableStateOf(0) }
-    val dropdownSelectedOptionRight = remember { mutableStateOf(1) }
+    val dropdownOptionSelected = remember { mutableStateOf(0) }
+    val dropdownOptionSelectedRight = remember { mutableStateOf(1) }
+    val spinnerOptions = listOf(
+        SpinnerEntry(icon = { Icon(RoundedRectanglePainter(), "Icon", Modifier.padding(end = 12.dp), Color(0xFFFF5B29)) }, "Option 1", "Red"),
+        SpinnerEntry(icon = { Icon(RoundedRectanglePainter(), "Icon", Modifier.padding(end = 12.dp), Color(0xFF36D167)) }, "Option 2", "Green"),
+        SpinnerEntry(icon = { Icon(RoundedRectanglePainter(), "Icon", Modifier.padding(end = 12.dp), Color(0xFF3482FF)) }, "Option 3", "Blue"),
+        SpinnerEntry(icon = { Icon(RoundedRectanglePainter(), "Icon", Modifier.padding(end = 12.dp), Color(0xFFFFB21D)) }, "Option 4", "Yellow"),
+    )
+    val spinnerOptionSelected = remember { mutableStateOf(0) }
+    val spinnerOptionSelectedRight = remember { mutableStateOf(1) }
+    val spinnerOptionSelectedDialog = remember { mutableStateOf(2) }
     var miuixSuperCheckbox by remember { mutableStateOf("State: false") }
     var miuixSuperCheckboxState by remember { mutableStateOf(false) }
     var miuixSuperRightCheckbox by remember { mutableStateOf("false") }
@@ -295,7 +315,6 @@ fun TextComponent() {
     }
 
     SmallTitle(text = "Dropdown")
-
     Card(
         modifier = Modifier
             .padding(horizontal = 12.dp)
@@ -305,17 +324,17 @@ fun TextComponent() {
             title = "Dropdown",
             summary = "Popup near click",
             items = dropdownOptions,
-            selectedIndex = dropdownSelectedOption.value,
-            onSelectedIndexChange = { newOption -> dropdownSelectedOption.value = newOption },
+            selectedIndex = dropdownOptionSelected.value,
+            onSelectedIndexChange = { newOption -> dropdownOptionSelected.value = newOption },
         )
 
         SuperDropdown(
             title = "Dropdown",
             summary = "Popup always on right",
-            alwaysRight = true,
             items = dropdownOptions,
-            selectedIndex = dropdownSelectedOptionRight.value,
-            onSelectedIndexChange = { newOption -> dropdownSelectedOptionRight.value = newOption },
+            selectedIndex = dropdownOptionSelectedRight.value,
+            onSelectedIndexChange = { newOption -> dropdownOptionSelectedRight.value = newOption },
+            mode = DropDownMode.AlwaysAtRight
         )
 
         SuperDropdown(
@@ -327,6 +346,47 @@ fun TextComponent() {
         )
     }
 
+    SmallTitle(text = "Spinner")
+    Card(
+        modifier = Modifier
+            .padding(horizontal = 12.dp)
+            .padding(bottom = 6.dp)
+    ) {
+        SuperSpinner(
+            title = "Spinner",
+            summary = "Spinner near click",
+            items = spinnerOptions,
+            selectedIndex = spinnerOptionSelected.value,
+            onSelectedIndexChange = { newOption -> spinnerOptionSelected.value = newOption },
+        )
+
+        SuperSpinner(
+            title = "Spinner",
+            summary = "Spinner always on right",
+            items = spinnerOptions,
+            selectedIndex = spinnerOptionSelectedRight.value,
+            onSelectedIndexChange = { newOption -> spinnerOptionSelectedRight.value = newOption },
+            mode = SpinnerMode.AlwaysAtRight,
+        )
+
+        SuperSpinnerAsDialog(
+            title = "Spinner",
+            summary = "Spinner as Dialog",
+            dialogButtonString = "Cancel",
+            items = spinnerOptions,
+            selectedIndex = spinnerOptionSelectedDialog.value,
+            onSelectedIndexChange = { newOption -> spinnerOptionSelectedDialog.value = newOption },
+        )
+
+        SuperSpinner(
+            title = "Disabled Spinner",
+            items = listOf(SpinnerEntry(icon = null, title = "Option 4")),
+            selectedIndex = 0,
+            onSelectedIndexChange = {},
+            enabled = false
+        )
+    }
+
     dialog(showDialog)
     dialog2(showDialog2)
 }
@@ -424,3 +484,17 @@ fun dialog2(showDialog: MutableState<Boolean>) {
         }
     }
 }
+
+class RoundedRectanglePainter(
+    private val cornerRadius: Dp = 6.dp
+) : Painter() {
+    override val intrinsicSize = Size.Unspecified
+
+    override fun DrawScope.onDraw() {
+        drawRoundRect(
+            color = Color.White,
+            size = Size(size.width, size.height),
+            cornerRadius = CornerRadius(cornerRadius.toPx(), cornerRadius.toPx())
+        )
+    }
+}

miuix/build.gradle.kts

@@ -58,9 +58,3 @@ android {
         minSdk = libs.versions.android.minSdk.get().toInt()
     }
 }
-
-compose.resources {
-    publicResClass = false
-    packageOfResClass = "top.yukonga.miuix.kmp.resources"
-    generateResClass = auto
-}

miuix/src/commonMain/composeResources/values-zh-rCN/strings.xml

@@ -92,8 +92,8 @@ import kotlin.math.roundToInt
  * @param titleColor The color of the title.
  * @param summary The summary of the [SuperDropdown].
  * @param summaryColor The color of the summary.
+ * @param mode The dropdown show mode of the [SuperDropdown].
  * @param horizontalPadding The horizontal padding of the [SuperDropdown].
- * @param alwaysRight Whether the popup is always show on the right side.
  * @param insideMargin The margin inside the [SuperDropdown].
  * @param defaultWindowInsetsPadding Whether to apply default window insets padding to the [SuperDropdown].
  * @param enabled Whether the [SuperDropdown] is enabled.
@@ -109,7 +109,7 @@ fun SuperDropdown(
     titleColor: BasicComponentColors = BasicComponentDefaults.titleColor(),
     summary: String? = null,
     summaryColor: BasicComponentColors = BasicComponentDefaults.summaryColor(),
-    alwaysRight: Boolean = false,
+    mode: DropDownMode = DropDownMode.Normal,
     horizontalPadding: Dp = 0.dp,
     insideMargin: PaddingValues = BasicComponentDefaults.InsideMargin,
     defaultWindowInsetsPadding: Boolean = true,
@@ -275,7 +275,7 @@ fun SuperDropdown(
                     LazyColumn(
                         modifier = Modifier
                             .onGloballyPositioned { layoutCoordinates ->
-                                offsetXPx = if (alwaysRight || !alignLeft) {
+                                offsetXPx = if (mode == DropDownMode.AlwaysAtRight || !alignLeft) {
                                     dropdownOffsetXPx + componentWidthPx - insideRightPx - layoutCoordinates.size.width - paddingPx - if (defaultWindowInsetsPadding) displayCutoutLeftSize.value else 0
                                 } else {
                                     dropdownOffsetXPx + paddingPx + insideLeftPx - if (defaultWindowInsetsPadding) displayCutoutLeftSize.value else 0
@@ -375,7 +375,7 @@ fun DropdownImpl(
         Text(
             modifier = Modifier.width(textWidthDp ?: 50.dp),
             text = text,
-            fontSize = 16.sp,
+            fontSize = MiuixTheme.textStyles.body1.fontSize,
             fontWeight = FontWeight.Medium,
             color = textColor,
         )
@@ -437,3 +437,11 @@ fun calculateOffsetYPx(
  * Only one dropdown is allowed to be displayed at a time.
  */
 val dropdownStates = mutableStateListOf<MutableState<Boolean>>()
+
+/**
+ * The dropdown show mode.
+ */
+enum class DropDownMode {
+    Normal,
+    AlwaysAtRight
+}