From d92e22089f85c0707b072fed075f88a0dfbf4903 Mon Sep 17 00:00:00 2001 From: Shreck Ye Date: Wed, 29 May 2024 20:50:39 +0800 Subject: [PATCH 01/85] Update README.md --- README.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/README.md b/README.md index 611153e1..3580c53f 100644 --- a/README.md +++ b/README.md @@ -114,6 +114,13 @@ Maven coordinate: "com.huanshankeji:compose-multiplatform-$module:$version" ``` +More specifically: +```kotlin +"com.huanshankeji:compose-multiplatform-common:$version" +"com.huanshankeji:compose-multiplatform-material2:$version" +"com.huanshankeji:compose-multiplatform-material3:$version" +``` + For example, depend on the Material 3 module with Gradle: ```kotlin From 488e159668f92998bd8f40198d3f780d7644959a Mon Sep 17 00:00:00 2001 From: Shreck Ye Date: Wed, 29 May 2024 20:51:42 +0800 Subject: [PATCH 02/85] Update README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 3580c53f..326c21fa 100644 --- a/README.md +++ b/README.md @@ -117,6 +117,7 @@ Maven coordinate: More specifically: ```kotlin "com.huanshankeji:compose-multiplatform-common:$version" +"com.huanshankeji:compose-multiplatform-material-icons-core:$version" "com.huanshankeji:compose-multiplatform-material2:$version" "com.huanshankeji:compose-multiplatform-material3:$version" ``` From 0d912fc00736686b3a2ece8ce22ea70906035072 Mon Sep 17 00:00:00 2001 From: Shreck Ye Date: Wed, 29 May 2024 21:01:15 +0800 Subject: [PATCH 03/85] Update README.md --- README.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/README.md b/README.md index 326c21fa..e2d1b5f0 100644 --- a/README.md +++ b/README.md @@ -106,6 +106,13 @@ The components in the `ext` packages don't follow the `androidx.compose` APIs ex - `outerBorder` - `roundedCornerBackgroundAndOuterBorder` +### Other APIs + +- `Alignment` +- `Arrangement` +- `KeyboardOptions` +- `KeyboardActions` + ## Add the libraries to your dependency Maven coordinate: From 3f38df2fe23b47074ca4c89c29defa1a7a66f521 Mon Sep 17 00:00:00 2001 From: Shreck Ye Date: Tue, 11 Jun 2024 12:03:35 +0800 Subject: [PATCH 04/85] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e2d1b5f0..01efcc9c 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# Compose Multiplatform Material: unified Compose Multiplatform common extensions and Material wrappers for `androidx.compose` and Compose HTML +# Compose Multiplatform Material (better name pending): unified Compose Multiplatform common extensions and Material wrappers for `androidx.compose` and Compose HTML [![Maven Central](https://img.shields.io/maven-central/v/com.huanshankeji/compose-multiplatform-material3)](https://search.maven.org/search?q=g:com.huanshankeji%20AND%20a:compose-multiplatform-*) ![Kotlin version](https://kotlin-version.aws.icerock.dev/kotlin-version?group=com.huanshankeji&name=compose-multiplatform-material3) From f62696f369c4a610e401b17b8dc3629041b20d9f Mon Sep 17 00:00:00 2001 From: Shreck Ye Date: Tue, 9 Jul 2024 16:11:29 +0800 Subject: [PATCH 05/85] Update README.md about Material Icons --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index 01efcc9c..de074f0a 100644 --- a/README.md +++ b/README.md @@ -89,6 +89,10 @@ This project is still in development and has not reached the stable state yet. S The components in the `ext` packages don't follow the `androidx.compose` APIs exactly, but rather provide wrappers are more idiomatic and conventional on both kinds of targets, wrapping different APIs which can't be unified following the `androidx.compose` APIs. +#### Material Icons + +The `com.huanshankeji.compose.material.icons.Icon` class delegates to both kinds of targets, but only a few Material Icons are added as PoC. You need to add your concrete icon implementations following the style of the existing ones in `com.huanshankeji.compose.material.icons` to use the icons you need. Track the progress of full icon support in #4. + ### Modifiers - size modifiers From 4f95c5ec9eb290245562efe83eb838193379b5c9 Mon Sep 17 00:00:00 2001 From: Shreck Ye Date: Tue, 9 Jul 2024 16:13:31 +0800 Subject: [PATCH 06/85] Update README.md about Material Icons --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index de074f0a..94ee5327 100644 --- a/README.md +++ b/README.md @@ -91,7 +91,7 @@ The components in the `ext` packages don't follow the `androidx.compose` APIs ex #### Material Icons -The `com.huanshankeji.compose.material.icons.Icon` class delegates to both kinds of targets, but only a few Material Icons are added as PoC. You need to add your concrete icon implementations following the style of the existing ones in `com.huanshankeji.compose.material.icons` to use the icons you need. Track the progress of full icon support in #4. +The `com.huanshankeji.compose.material.icons.Icon` class delegates to both kinds of targets, but only a few Material Icons are added as PoC. You need to add your concrete icon implementations following the style of the existing ones in `com.huanshankeji.compose.material.icons` to use the icons you need. Track the progress of full icon support in [#4](/../../issues/4). ### Modifiers From b2b76bff724f79daa781b2234902904b4210ab0e Mon Sep 17 00:00:00 2001 From: Shreck Ye Date: Thu, 10 Oct 2024 12:25:03 +0800 Subject: [PATCH 07/85] Bump the Android SDK version to 35 --- buildSrc/src/main/kotlin/Android.kt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/buildSrc/src/main/kotlin/Android.kt b/buildSrc/src/main/kotlin/Android.kt index 9d82f00a..dbf04a75 100644 --- a/buildSrc/src/main/kotlin/Android.kt +++ b/buildSrc/src/main/kotlin/Android.kt @@ -1 +1 @@ -val androidSdkVersion = 34 +val androidSdkVersion = 35 From b5296579cf8d3620e0dad44b572f02f4958f2e91 Mon Sep 17 00:00:00 2001 From: Shreck Ye Date: Mon, 14 Oct 2024 09:51:57 +0800 Subject: [PATCH 08/85] Revert "Bump the Android SDK version to 35" This reverts commit b2b76bff724f79daa781b2234902904b4210ab0e. Downgrade the Android SDK version back to 34 as warned by AGP ```text We recommend using a newer Android Gradle plugin to use compileSdk = 35 This Android Gradle plugin (8.5.2) was tested up to compileSdk = 34. You are strongly encouraged to update your project to use a newer Android Gradle plugin that has been tested with compileSdk = 35. If you are already using the latest version of the Android Gradle plugin, you may need to wait until a newer version with support for compileSdk = 35 is available. ``` --- buildSrc/src/main/kotlin/Android.kt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/buildSrc/src/main/kotlin/Android.kt b/buildSrc/src/main/kotlin/Android.kt index dbf04a75..9d79de1d 100644 --- a/buildSrc/src/main/kotlin/Android.kt +++ b/buildSrc/src/main/kotlin/Android.kt @@ -1 +1 @@ -val androidSdkVersion = 35 +val androidSdkVersion = 34 // bump to 35 when AGP and Kotlin are bumped From 665f0207a83568448ba15ef2a1e16dd4642fbca7 Mon Sep 17 00:00:00 2001 From: Shreck Ye Date: Mon, 14 Oct 2024 15:36:49 +0800 Subject: [PATCH 09/85] Bump "androidx.activity:activity-compose" to 1.9.2 --- buildSrc/src/main/kotlin/VersionsAndDependencies.kt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/buildSrc/src/main/kotlin/VersionsAndDependencies.kt b/buildSrc/src/main/kotlin/VersionsAndDependencies.kt index 7c73e089..46205f5d 100644 --- a/buildSrc/src/main/kotlin/VersionsAndDependencies.kt +++ b/buildSrc/src/main/kotlin/VersionsAndDependencies.kt @@ -15,7 +15,7 @@ object DependencyVersions { val composeMultiplatformLifecycleViewmodel = "2.8.0" object Androidx { - val activityCompose = "1.9.0" + val activityCompose = "1.9.2" val compose = "1.6.7" } } From b6defcc05a04912b78ecdb49a5333b9435e53030 Mon Sep 17 00:00:00 2001 From: Shreck Ye Date: Wed, 16 Oct 2024 22:31:14 +0800 Subject: [PATCH 10/85] Bump the Gradle wrapper to 8.10.2 --- gradle/wrapper/gradle-wrapper.properties | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gradle/wrapper/gradle-wrapper.properties b/gradle/wrapper/gradle-wrapper.properties index 66cd5a0e..79eb9d00 100644 --- a/gradle/wrapper/gradle-wrapper.properties +++ b/gradle/wrapper/gradle-wrapper.properties @@ -1,6 +1,6 @@ distributionBase=GRADLE_USER_HOME distributionPath=wrapper/dists -distributionUrl=https\://services.gradle.org/distributions/gradle-8.10-all.zip +distributionUrl=https\://services.gradle.org/distributions/gradle-8.10.2-all.zip networkTimeout=10000 validateDistributionUrl=true zipStoreBase=GRADLE_USER_HOME From 9137bfc6c5ebab7df4c0f68418296f3936b3e75c Mon Sep 17 00:00:00 2001 From: Shreck Ye Date: Thu, 17 Oct 2024 14:57:04 +0800 Subject: [PATCH 11/85] Adapt to "com.huanshankeji:common-gradle-dependencies:0.7.2-20241016-SNAPSHOT" --- buildSrc/build.gradle.kts | 6 +++--- .../kotlin/lib-conventions-without-publishing.gradle.kts | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/buildSrc/build.gradle.kts b/buildSrc/build.gradle.kts index 6b1e1611..ccc277db 100644 --- a/buildSrc/build.gradle.kts +++ b/buildSrc/build.gradle.kts @@ -3,7 +3,7 @@ plugins { } repositories { - //mavenLocal() + mavenLocal() // TODO comment out when not needed gradlePluginPortal() google() mavenCentral() @@ -15,7 +15,7 @@ dependencies { implementation(kotlin("gradle-plugin", kotlinVersion)) implementation("org.jetbrains.kotlin:compose-compiler-gradle-plugin:$kotlinVersion") implementation("org.jetbrains.compose:compose-gradle-plugin:1.6.11") - implementation("com.huanshankeji.team:gradle-plugins:0.5.1") + implementation("com.huanshankeji.team:gradle-plugins:0.6.0-SNAPSHOT") // TODO don't use a snapshot version in a main branch implementation("com.android.tools.build:gradle:8.5.2") - implementation("com.huanshankeji:common-gradle-dependencies:0.7.1-20240516") + implementation("com.huanshankeji:common-gradle-dependencies:0.7.2-20241016-SNAPSHOT") // TODO don't use a snapshot version in a main branch } diff --git a/buildSrc/src/main/kotlin/lib-conventions-without-publishing.gradle.kts b/buildSrc/src/main/kotlin/lib-conventions-without-publishing.gradle.kts index bc1ce6e1..c05e8410 100644 --- a/buildSrc/src/main/kotlin/lib-conventions-without-publishing.gradle.kts +++ b/buildSrc/src/main/kotlin/lib-conventions-without-publishing.gradle.kts @@ -2,7 +2,7 @@ import org.jetbrains.kotlin.gradle.ExperimentalKotlinGradlePluginApi plugins { id("common-conventions") - id("com.huanshankeji.kotlin-multiplatform-jvm-and-js-browser-conventions") + id("com.huanshankeji.kotlin-multiplatform-conventional-targets") id("com.android.library") } From c35fbeabfbec2fa6a2a65b0f695b0e08e4cf67cc Mon Sep 17 00:00:00 2001 From: Shreck Ye Date: Thu, 17 Oct 2024 15:50:54 +0800 Subject: [PATCH 12/85] Bump Compose Multiplatform to 1.7.0 --- buildSrc/build.gradle.kts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/buildSrc/build.gradle.kts b/buildSrc/build.gradle.kts index ccc277db..3eb71710 100644 --- a/buildSrc/build.gradle.kts +++ b/buildSrc/build.gradle.kts @@ -14,7 +14,7 @@ dependencies { val kotlinVersion = "2.0.10" implementation(kotlin("gradle-plugin", kotlinVersion)) implementation("org.jetbrains.kotlin:compose-compiler-gradle-plugin:$kotlinVersion") - implementation("org.jetbrains.compose:compose-gradle-plugin:1.6.11") + implementation("org.jetbrains.compose:compose-gradle-plugin:1.7.0") implementation("com.huanshankeji.team:gradle-plugins:0.6.0-SNAPSHOT") // TODO don't use a snapshot version in a main branch implementation("com.android.tools.build:gradle:8.5.2") implementation("com.huanshankeji:common-gradle-dependencies:0.7.2-20241016-SNAPSHOT") // TODO don't use a snapshot version in a main branch From fd878fdc4461a7233729767be619bda1b336b929 Mon Sep 17 00:00:00 2001 From: Shreck Ye Date: Thu, 17 Oct 2024 18:26:45 +0800 Subject: [PATCH 13/85] Bump the Compose Multiplatform navigation and ViewModel libraries to the latest --- buildSrc/src/main/kotlin/VersionsAndDependencies.kt | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/buildSrc/src/main/kotlin/VersionsAndDependencies.kt b/buildSrc/src/main/kotlin/VersionsAndDependencies.kt index 46205f5d..560a45e8 100644 --- a/buildSrc/src/main/kotlin/VersionsAndDependencies.kt +++ b/buildSrc/src/main/kotlin/VersionsAndDependencies.kt @@ -11,8 +11,8 @@ object DependencyVersions { val huanshankejiComposeHtml = "0.4.0-SNAPSHOT" // TODO don't use a snapshot version in a main branch val kmdc = "0.1.2" val materialSymbols = "0.19.0" - val composeMultiplatformNavigation = "2.7.0-alpha07" - val composeMultiplatformLifecycleViewmodel = "2.8.0" + val composeMultiplatformNavigation = "2.8.0-alpha10" + val composeMultiplatformLifecycleViewmodel = "2.8.3" object Androidx { val activityCompose = "1.9.2" From 0f0b9358efd2c21a03b1fe0c4f0d3c43c7abc6fe Mon Sep 17 00:00:00 2001 From: Shreck Ye Date: Thu, 17 Oct 2024 21:36:40 +0800 Subject: [PATCH 14/85] Bump `DependencyVersions`, run `kotlinUpgradeYarnLock`, and manually ensure that the demo app runs on JVM desktop, JS DOM, and Android The app crashes on a "Small Phone" emulator because the screen is not wide enough. The exception on Android: ```text java.lang.IllegalArgumentException: maxWidth(-104) must be >= than minWidth(0) ``` The exception on JVM desktop when the window is narrowed: ```text Exception in thread "AWT-EventQueue-0" java.lang.IllegalArgumentException: maxWidth(-21) must be >= than minWidth(0) ``` --- .../src/main/kotlin/VersionsAndDependencies.kt | 8 ++++---- kotlin-js-store/yarn.lock | 16 ++++++++-------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/buildSrc/src/main/kotlin/VersionsAndDependencies.kt b/buildSrc/src/main/kotlin/VersionsAndDependencies.kt index 560a45e8..30154dc9 100644 --- a/buildSrc/src/main/kotlin/VersionsAndDependencies.kt +++ b/buildSrc/src/main/kotlin/VersionsAndDependencies.kt @@ -7,15 +7,15 @@ val commonDependencies = CommonDependencies() object DependencyVersions { const val composeMultiplatform = ComposeBuildConfig.composeVersion // for "ui-unit" - val kobweb = "0.18.0" + val kobweb = "0.19.2" val huanshankejiComposeHtml = "0.4.0-SNAPSHOT" // TODO don't use a snapshot version in a main branch val kmdc = "0.1.2" - val materialSymbols = "0.19.0" + val materialSymbols = "0.25.1" val composeMultiplatformNavigation = "2.8.0-alpha10" val composeMultiplatformLifecycleViewmodel = "2.8.3" object Androidx { - val activityCompose = "1.9.2" - val compose = "1.6.7" + val activityCompose = "1.9.3" + val compose = "1.7.4" } } diff --git a/kotlin-js-store/yarn.lock b/kotlin-js-store/yarn.lock index 6b698594..40665701 100644 --- a/kotlin-js-store/yarn.lock +++ b/kotlin-js-store/yarn.lock @@ -787,10 +787,10 @@ "@material/theme" "^14.0.0" tslib "^2.1.0" -"@material/web@1.4.1": - version "1.4.1" - resolved "https://registry.yarnpkg.com/@material/web/-/web-1.4.1.tgz#116480759d0b5815ea181086d32cc3ccb54a30f6" - integrity sha512-17MZA6Bt7ie6uDc5cVEGtm6frQfm7ASLGVJhJuYJ0W2Fs7Zogd8wJ3ExoYU8jyzv8LEXcfvnZKcvr8dlquGsig== +"@material/web@2.2.0": + version "2.2.0" + resolved "https://registry.yarnpkg.com/@material/web/-/web-2.2.0.tgz#b98d57fc863301fe6c0036cc6f04869386067e08" + integrity sha512-k1Pi7f04qDRkHfIEdcnL++udN+x5Oq34R47n0Fk7Xo49uz9aKb6ZkO42jC6uvMH0ahOiFDktX9txHgYMDvNa+A== dependencies: lit "^2.7.4 || ^3.0.0" tslib "^2.4.0" @@ -2587,10 +2587,10 @@ material-icons@^1.13.12: resolved "https://registry.yarnpkg.com/material-icons/-/material-icons-1.13.12.tgz#eed4082bf0426642edeb027e75397e3064adc536" integrity sha512-/2YoaB79IjUK2B2JB+vIXXYGtBfHb/XG66LvoKVM5ykHW7yfrV5SP6d7KLX6iijY6/G9GqwgtPQ/sbhFnOURVA== -material-symbols@0.19.0: - version "0.19.0" - resolved "https://registry.yarnpkg.com/material-symbols/-/material-symbols-0.19.0.tgz#1dd7900fbe9cc88b7840c38848a02470ce0b4c5f" - integrity sha512-/iWffKJzk8QZw2Wg6QjSS8f4oRbnesbU1Eodje1+jzBCtNYJupJwArjnXpiFeWBANkW0gvOx6AdQpnj9wsgAmA== +material-symbols@0.25.1: + version "0.25.1" + resolved "https://registry.yarnpkg.com/material-symbols/-/material-symbols-0.25.1.tgz#e2d7b6cc1cf3eb54e7e0d223e0fe118d4fa7d308" + integrity sha512-0HopmXLjRs4H99LWajFWIXAt8DpaVMf9lyhKp35HQ+ocb7JJ3eXJTJNkOwccfbJ34qIuwYDwLJQtlzheMFmizw== media-typer@0.3.0: version "0.3.0" From 7b14b4945914c5324ad49081fa89e103ee64dcbd Mon Sep 17 00:00:00 2001 From: Shreck Ye Date: Fri, 18 Oct 2024 17:48:18 +0800 Subject: [PATCH 15/85] Use "common-gradle-dependencies" v0.8.0-20241016-SNAPSHOT --- buildSrc/build.gradle.kts | 2 +- buildSrc/src/main/kotlin/VersionsAndDependencies.kt | 7 ------- compose-multiplatform-lifecycle-viewmodel/build.gradle.kts | 4 ++-- compose-multiplatform-navigation/build.gradle.kts | 4 ++-- demo/build.gradle.kts | 4 ++-- 5 files changed, 7 insertions(+), 14 deletions(-) diff --git a/buildSrc/build.gradle.kts b/buildSrc/build.gradle.kts index 3eb71710..37b519e7 100644 --- a/buildSrc/build.gradle.kts +++ b/buildSrc/build.gradle.kts @@ -17,5 +17,5 @@ dependencies { implementation("org.jetbrains.compose:compose-gradle-plugin:1.7.0") implementation("com.huanshankeji.team:gradle-plugins:0.6.0-SNAPSHOT") // TODO don't use a snapshot version in a main branch implementation("com.android.tools.build:gradle:8.5.2") - implementation("com.huanshankeji:common-gradle-dependencies:0.7.2-20241016-SNAPSHOT") // TODO don't use a snapshot version in a main branch + implementation("com.huanshankeji:common-gradle-dependencies:0.8.0-20241016-SNAPSHOT") // TODO don't use a snapshot version in a main branch } diff --git a/buildSrc/src/main/kotlin/VersionsAndDependencies.kt b/buildSrc/src/main/kotlin/VersionsAndDependencies.kt index 30154dc9..6997b66c 100644 --- a/buildSrc/src/main/kotlin/VersionsAndDependencies.kt +++ b/buildSrc/src/main/kotlin/VersionsAndDependencies.kt @@ -11,11 +11,4 @@ object DependencyVersions { val huanshankejiComposeHtml = "0.4.0-SNAPSHOT" // TODO don't use a snapshot version in a main branch val kmdc = "0.1.2" val materialSymbols = "0.25.1" - val composeMultiplatformNavigation = "2.8.0-alpha10" - val composeMultiplatformLifecycleViewmodel = "2.8.3" - - object Androidx { - val activityCompose = "1.9.3" - val compose = "1.7.4" - } } diff --git a/compose-multiplatform-lifecycle-viewmodel/build.gradle.kts b/compose-multiplatform-lifecycle-viewmodel/build.gradle.kts index 2e244b43..84648b77 100644 --- a/compose-multiplatform-lifecycle-viewmodel/build.gradle.kts +++ b/compose-multiplatform-lifecycle-viewmodel/build.gradle.kts @@ -15,12 +15,12 @@ kotlin { https://android.googlesource.com/platform/frameworks/support/+/refs/heads/androidx-main/lifecycle/lifecycle-viewmodel-compose/build.gradle */ api(compose.runtime) - api("org.jetbrains.androidx.lifecycle:lifecycle-viewmodel:${DependencyVersions.composeMultiplatformLifecycleViewmodel}") + api(commonDependencies.jetbrainsAndroidx.lifecycle.viewmodel()) } } androidxCommonMain { dependencies { - api("org.jetbrains.androidx.lifecycle:lifecycle-viewmodel-compose:${DependencyVersions.composeMultiplatformLifecycleViewmodel}") + api(commonDependencies.jetbrainsAndroidx.lifecycle.viewmodelCompose()) } } } diff --git a/compose-multiplatform-navigation/build.gradle.kts b/compose-multiplatform-navigation/build.gradle.kts index d3fc961f..4623c38d 100644 --- a/compose-multiplatform-navigation/build.gradle.kts +++ b/compose-multiplatform-navigation/build.gradle.kts @@ -15,7 +15,7 @@ kotlin { https://android.googlesource.com/platform/frameworks/support/+/refs/heads/androidx-main/navigation/navigation-compose/build.gradle */ api(compose.runtime) - api("org.jetbrains.androidx.navigation:navigation-runtime:${DependencyVersions.composeMultiplatformNavigation}") + api(commonDependencies.jetbrainsAndroidx.navigation.runtime()) //implementation("org.jetbrains.compose.annotation-internal:annotation:${DependencyVersions.composeMultiplatform}") api(project(":compose-multiplatform-common")) // for `Modifier` and `Alignment` //implementation("org.jetbrains.androidx.lifecycle:lifecycle-viewmodel-compose:2.8.0") // This depends on Compose target '[jscanvas]'. @@ -23,7 +23,7 @@ kotlin { } androidxCommonMain { dependencies { - api("org.jetbrains.androidx.navigation:navigation-compose:${DependencyVersions.composeMultiplatformNavigation}") + api(commonDependencies.jetbrainsAndroidx.navigation.compose()) } } } diff --git a/demo/build.gradle.kts b/demo/build.gradle.kts index 8f91e5e4..cd18cf5a 100644 --- a/demo/build.gradle.kts +++ b/demo/build.gradle.kts @@ -65,8 +65,8 @@ kotlin { // TODO consider putting this in `androidxCommonMain` implementation(compose.ui) - implementation("androidx.activity:activity-compose:${DependencyVersions.Androidx.activityCompose}") - implementation("androidx.compose.ui:ui-tooling-preview:${DependencyVersions.Androidx.compose}") + implementation(commonDependencies.androidx.activity.compose()) + implementation(commonDependencies.androidx.compose.ui.module("tooling-preview")) } } iosMain { From c1f0b7aa41bc52e89841df2e385cf4f2a2d3ed70 Mon Sep 17 00:00:00 2001 From: Shreck Ye Date: Sat, 19 Oct 2024 18:34:14 +0800 Subject: [PATCH 16/85] Bump the dependencies to the latest release versions --- buildSrc/build.gradle.kts | 4 ++-- buildSrc/src/main/kotlin/VersionsAndDependencies.kt | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/buildSrc/build.gradle.kts b/buildSrc/build.gradle.kts index 37b519e7..01da0c14 100644 --- a/buildSrc/build.gradle.kts +++ b/buildSrc/build.gradle.kts @@ -15,7 +15,7 @@ dependencies { implementation(kotlin("gradle-plugin", kotlinVersion)) implementation("org.jetbrains.kotlin:compose-compiler-gradle-plugin:$kotlinVersion") implementation("org.jetbrains.compose:compose-gradle-plugin:1.7.0") - implementation("com.huanshankeji.team:gradle-plugins:0.6.0-SNAPSHOT") // TODO don't use a snapshot version in a main branch + implementation("com.huanshankeji.team:gradle-plugins:0.6.0") // TODO don't use a snapshot version in a main branch implementation("com.android.tools.build:gradle:8.5.2") - implementation("com.huanshankeji:common-gradle-dependencies:0.8.0-20241016-SNAPSHOT") // TODO don't use a snapshot version in a main branch + implementation("com.huanshankeji:common-gradle-dependencies:0.8.0-20241016") // TODO don't use a snapshot version in a main branch } diff --git a/buildSrc/src/main/kotlin/VersionsAndDependencies.kt b/buildSrc/src/main/kotlin/VersionsAndDependencies.kt index 6997b66c..1dabdf34 100644 --- a/buildSrc/src/main/kotlin/VersionsAndDependencies.kt +++ b/buildSrc/src/main/kotlin/VersionsAndDependencies.kt @@ -8,7 +8,7 @@ val commonDependencies = CommonDependencies() object DependencyVersions { const val composeMultiplatform = ComposeBuildConfig.composeVersion // for "ui-unit" val kobweb = "0.19.2" - val huanshankejiComposeHtml = "0.4.0-SNAPSHOT" // TODO don't use a snapshot version in a main branch + val huanshankejiComposeHtml = "0.4.0" // don't use a snapshot version in a main branch val kmdc = "0.1.2" val materialSymbols = "0.25.1" } From 56b899b58a4cbde4686c634fec760e142866af85 Mon Sep 17 00:00:00 2001 From: Shreck Ye Date: Sat, 19 Oct 2024 18:37:39 +0800 Subject: [PATCH 17/85] Remove obsolete TODOs --- buildSrc/build.gradle.kts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/buildSrc/build.gradle.kts b/buildSrc/build.gradle.kts index 01da0c14..5af5195f 100644 --- a/buildSrc/build.gradle.kts +++ b/buildSrc/build.gradle.kts @@ -15,7 +15,7 @@ dependencies { implementation(kotlin("gradle-plugin", kotlinVersion)) implementation("org.jetbrains.kotlin:compose-compiler-gradle-plugin:$kotlinVersion") implementation("org.jetbrains.compose:compose-gradle-plugin:1.7.0") - implementation("com.huanshankeji.team:gradle-plugins:0.6.0") // TODO don't use a snapshot version in a main branch + implementation("com.huanshankeji.team:gradle-plugins:0.6.0") // don't use a snapshot version in a main branch implementation("com.android.tools.build:gradle:8.5.2") - implementation("com.huanshankeji:common-gradle-dependencies:0.8.0-20241016") // TODO don't use a snapshot version in a main branch + implementation("com.huanshankeji:common-gradle-dependencies:0.8.0-20241016") // don't use a snapshot version in a main branch } From 911a1aae268ec965e478043900bb4db000ddaad3 Mon Sep 17 00:00:00 2001 From: Shreck Ye Date: Sun, 20 Oct 2024 18:35:23 +0800 Subject: [PATCH 18/85] Rename the platform-specific parameter names with suffixes "JsDom" and "Androidx" to make them consistent Resolve #37 --- README.md | 5 +++++ ...tionRelativeParentJsOnly.androidxCommon.kt | 2 +- .../ext/MatchPositionRelativeParentJsOnly.kt | 2 +- .../MatchPositionRelativeParentJsDom.js.kt | 2 +- .../ext/TopAppBarScaffold.androidxCommon.kt | 4 ++-- .../material2/ext/TopAppBarScaffold.kt | 6 ++--- .../material2/ext/TopAppBarScaffold.js.kt | 2 +- .../ext/ExposedDropdownMenu.androidxCommon.kt | 6 ++--- .../material3/ext/Menu.androidxCommon.kt | 16 +++++++------- .../material3/ext/ExposedDropdownMenu.kt | 14 ++++++------ .../compose/material3/ext/Menu.kt | 18 +++++++-------- .../compose/material3/lazy/ext/List.kt | 12 +++++----- .../material3/ext/ExposedDropdownMenu.js.kt | 6 ++--- .../compose/material3/ext/Menu.js.kt | 22 +++++++++---------- .../compose/material3/lazy/ext/List.js.kt | 2 +- .../compose/material/demo/Material3.kt | 2 +- 16 files changed, 63 insertions(+), 58 deletions(-) diff --git a/README.md b/README.md index 1fcf2978..5cfbc379 100644 --- a/README.md +++ b/README.md @@ -97,6 +97,11 @@ This project is still in development and has not reached the stable state yet. S The components in the `ext` packages don't follow the `androidx.compose` APIs exactly, but rather provide wrappers are more idiomatic and conventional on both kinds of targets, wrapping different APIs which can't be unified following the `androidx.compose` APIs. +#### About parameter names + +The parameter names with suffixes such as "JsDom" or "AndroidxCommon" are platform-specific, and only apply on their respective platform(s), Compose HTML / JS DOM or +`androidx.compose` platforms. + #### Material Icons The `com.huanshankeji.compose.material.icons.Icon` class delegates to both kinds of targets, but only a few Material Icons are added as PoC. You need to add your concrete icon implementations following the style of the existing ones in `com.huanshankeji.compose.material.icons` to use the icons you need. Track the progress of full icon support in [#4](/../../issues/4). diff --git a/compose-multiplatform-common/src/androidxCommonMain/kotlin/com/huanshankeji/compose/foundation/ext/MatchPositionRelativeParentJsOnly.androidxCommon.kt b/compose-multiplatform-common/src/androidxCommonMain/kotlin/com/huanshankeji/compose/foundation/ext/MatchPositionRelativeParentJsOnly.androidxCommon.kt index 16386217..61640417 100644 --- a/compose-multiplatform-common/src/androidxCommonMain/kotlin/com/huanshankeji/compose/foundation/ext/MatchPositionRelativeParentJsOnly.androidxCommon.kt +++ b/compose-multiplatform-common/src/androidxCommonMain/kotlin/com/huanshankeji/compose/foundation/ext/MatchPositionRelativeParentJsOnly.androidxCommon.kt @@ -2,5 +2,5 @@ package com.huanshankeji.compose.foundation.ext import com.huanshankeji.compose.ui.Modifier -actual fun Modifier.matchPositionRelativeParentJsOnly(): Modifier = +actual fun Modifier.matchPositionRelativeParentJsDom(): Modifier = this diff --git a/compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/foundation/ext/MatchPositionRelativeParentJsOnly.kt b/compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/foundation/ext/MatchPositionRelativeParentJsOnly.kt index 47eebb2d..88351667 100644 --- a/compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/foundation/ext/MatchPositionRelativeParentJsOnly.kt +++ b/compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/foundation/ext/MatchPositionRelativeParentJsOnly.kt @@ -2,4 +2,4 @@ package com.huanshankeji.compose.foundation.ext import com.huanshankeji.compose.ui.Modifier -expect fun Modifier.matchPositionRelativeParentJsOnly(): Modifier +expect fun Modifier.matchPositionRelativeParentJsDom(): Modifier diff --git a/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/ext/MatchPositionRelativeParentJsDom.js.kt b/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/ext/MatchPositionRelativeParentJsDom.js.kt index ca4f7999..34091886 100644 --- a/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/ext/MatchPositionRelativeParentJsDom.js.kt +++ b/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/ext/MatchPositionRelativeParentJsDom.js.kt @@ -13,7 +13,7 @@ fun StyleScope.matchPositionRelativeParent() { // Also considering using `inset` (https://developer.mozilla.org/en-US/docs/Web/CSS/inset) } -actual fun Modifier.matchPositionRelativeParentJsOnly(): Modifier = +actual fun Modifier.matchPositionRelativeParentJsDom(): Modifier = platformModify { attrsModifier { style { diff --git a/compose-multiplatform-material2/src/androidxCommonMain/kotlin/com/huanshankeji/compose/material2/ext/TopAppBarScaffold.androidxCommon.kt b/compose-multiplatform-material2/src/androidxCommonMain/kotlin/com/huanshankeji/compose/material2/ext/TopAppBarScaffold.androidxCommon.kt index 61731d5f..afd21087 100644 --- a/compose-multiplatform-material2/src/androidxCommonMain/kotlin/com/huanshankeji/compose/material2/ext/TopAppBarScaffold.androidxCommon.kt +++ b/compose-multiplatform-material2/src/androidxCommonMain/kotlin/com/huanshankeji/compose/material2/ext/TopAppBarScaffold.androidxCommon.kt @@ -69,7 +69,7 @@ actual fun TopAppBarScaffold( snackbarHost: @Composable (() -> Unit)?, floatingActionButton: @Composable (() -> Unit)?, floatingActionButtonPosition: FabPosition, - isFloatingActionButtonDockedAndroidxCommon: Boolean, + isFloatingActionButtonDockedAndroidx: Boolean, content: @Composable (PaddingValues) -> Unit ) = Scaffold( @@ -85,5 +85,5 @@ actual fun TopAppBarScaffold( ?: { androidx.compose.material.SnackbarHost(it) }, floatingActionButton = floatingActionButton ?: {}, floatingActionButtonPosition = floatingActionButtonPosition.toPlatformValue(), - isFloatingActionButtonDocked = isFloatingActionButtonDockedAndroidxCommon + isFloatingActionButtonDocked = isFloatingActionButtonDockedAndroidx ) { content(it.toCommonValue()) } diff --git a/compose-multiplatform-material2/src/commonMain/kotlin/com/huanshankeji/compose/material2/ext/TopAppBarScaffold.kt b/compose-multiplatform-material2/src/commonMain/kotlin/com/huanshankeji/compose/material2/ext/TopAppBarScaffold.kt index fe7b728f..7fbfacad 100644 --- a/compose-multiplatform-material2/src/commonMain/kotlin/com/huanshankeji/compose/material2/ext/TopAppBarScaffold.kt +++ b/compose-multiplatform-material2/src/commonMain/kotlin/com/huanshankeji/compose/material2/ext/TopAppBarScaffold.kt @@ -55,7 +55,7 @@ expect fun PrimitiveTopAppBarScaffold( * ``` * * @param snackbarHost `androidx.compose.material.Scaffold` has a `SnackbarHostState` parameter for this lambda, but `androidx.compose.material3.Scaffold` doesn't. Therefore, we think this is probably a design flaw and don't provide the parameter. - * @param isFloatingActionButtonDockedAndroidxCommon available on `androidx.compose` targets only. + * @param isFloatingActionButtonDockedAndroidx available on `androidx.compose` targets only. // * @param isContentOverflowingOrExpandingJs available on JS DOM only. */ @Composable @@ -68,7 +68,7 @@ expect fun TopAppBarScaffold( snackbarHost: @Composable (() -> Unit)? = null, floatingActionButton: @Composable (() -> Unit)? = null, floatingActionButtonPosition: FabPosition = FabPosition.End, - isFloatingActionButtonDockedAndroidxCommon: Boolean = false, - //isContentOverflowingOrExpandingJs: Boolean = true, // always overflows + isFloatingActionButtonDockedAndroidx: Boolean = false, + //isContentOverflowingOrExpandingJsDom: Boolean = true, // always overflows content: @Composable (PaddingValues) -> Unit ) diff --git a/compose-multiplatform-material2/src/jsMain/kotlin/com/huanshankeji/compose/material2/ext/TopAppBarScaffold.js.kt b/compose-multiplatform-material2/src/jsMain/kotlin/com/huanshankeji/compose/material2/ext/TopAppBarScaffold.js.kt index 7464313d..8bf3eb51 100644 --- a/compose-multiplatform-material2/src/jsMain/kotlin/com/huanshankeji/compose/material2/ext/TopAppBarScaffold.js.kt +++ b/compose-multiplatform-material2/src/jsMain/kotlin/com/huanshankeji/compose/material2/ext/TopAppBarScaffold.js.kt @@ -92,7 +92,7 @@ actual fun TopAppBarScaffold( snackbarHost: @Composable (() -> Unit)?, floatingActionButton: @Composable (() -> Unit)?, floatingActionButtonPosition: FabPosition, - isFloatingActionButtonDockedAndroidxCommon: Boolean, + isFloatingActionButtonDockedAndroidx: Boolean, content: @Composable (PaddingValues) -> Unit ) { @Composable diff --git a/compose-multiplatform-material3/src/androidxCommonMain/kotlin/com/huanshankeji/compose/material3/ext/ExposedDropdownMenu.androidxCommon.kt b/compose-multiplatform-material3/src/androidxCommonMain/kotlin/com/huanshankeji/compose/material3/ext/ExposedDropdownMenu.androidxCommon.kt index c549a9ef..017e9434 100644 --- a/compose-multiplatform-material3/src/androidxCommonMain/kotlin/com/huanshankeji/compose/material3/ext/ExposedDropdownMenu.androidxCommon.kt +++ b/compose-multiplatform-material3/src/androidxCommonMain/kotlin/com/huanshankeji/compose/material3/ext/ExposedDropdownMenu.androidxCommon.kt @@ -28,14 +28,14 @@ actual class ExposedDropdownMenuBoxScope(val platformValue: androidx.compose.mat @Composable actual fun ExposedDropdownMenu( expanded: Boolean, - onDismissRequestAndroidxCommonOnly: () -> Unit, - onCloseJsOnly: () -> Unit, + onDismissRequestAndroidx: () -> Unit, + onCloseJsDom: () -> Unit, modifier: Modifier, content: @Composable () -> Unit ) = platformValue.ExposedDropdownMenu( expanded, - onDismissRequestAndroidxCommonOnly, + onDismissRequestAndroidx, modifier.platformModifier ) { content() } } diff --git a/compose-multiplatform-material3/src/androidxCommonMain/kotlin/com/huanshankeji/compose/material3/ext/Menu.androidxCommon.kt b/compose-multiplatform-material3/src/androidxCommonMain/kotlin/com/huanshankeji/compose/material3/ext/Menu.androidxCommon.kt index 26fcd960..6c5f23e2 100644 --- a/compose-multiplatform-material3/src/androidxCommonMain/kotlin/com/huanshankeji/compose/material3/ext/Menu.androidxCommon.kt +++ b/compose-multiplatform-material3/src/androidxCommonMain/kotlin/com/huanshankeji/compose/material3/ext/Menu.androidxCommon.kt @@ -9,15 +9,15 @@ import com.huanshankeji.compose.ui.Modifier @Composable actual fun DropdownMenu( expanded: Boolean, - onDismissRequestAndroidxCommonOnly: () -> Unit, - onCloseJsOnly: () -> Unit, + onDismissRequestAndroidx: () -> Unit, + onCloseJsDom: () -> Unit, modifier: Modifier, offset: DpOffset, content: @Composable () -> Unit ) = androidx.compose.material3.DropdownMenu( expanded, - onDismissRequestAndroidxCommonOnly, + onDismissRequestAndroidx, modifier.platformModifier, offset ) { @@ -25,20 +25,20 @@ actual fun DropdownMenu( } actual class DropdownMenuBoxScope { - actual fun Modifier.menuAnchorJs(): Modifier = + actual fun Modifier.menuAnchorJsDom(): Modifier = this // do nothing @Composable actual fun DropdownMenu( expanded: Boolean, - onDismissRequestAndroidxCommonOnly: () -> Unit, - onCloseJsOnly: () -> Unit, + onDismissRequestAndroidx: () -> Unit, + onCloseJsDom: () -> Unit, modifier: Modifier, offset: DpOffset, content: @Composable () -> Unit ) = androidx.compose.material3.DropdownMenu( - expanded, onDismissRequestAndroidxCommonOnly, modifier.platformModifier, offset + expanded, onDismissRequestAndroidx, modifier.platformModifier, offset ) { content() } } @@ -58,7 +58,7 @@ actual fun DropdownMenuItem( leadingIcon: @Composable ((Modifier) -> Unit)?, trailingIcon: @Composable ((Modifier) -> Unit)?, enabled: Boolean, - keepOpenJsOnly: Boolean + keepOpenJsDom: Boolean ) = androidx.compose.material3.DropdownMenuItem( text.toContentWithoutModifier(), diff --git a/compose-multiplatform-material3/src/commonMain/kotlin/com/huanshankeji/compose/material3/ext/ExposedDropdownMenu.kt b/compose-multiplatform-material3/src/commonMain/kotlin/com/huanshankeji/compose/material3/ext/ExposedDropdownMenu.kt index 1b71d624..b370a4d5 100644 --- a/compose-multiplatform-material3/src/commonMain/kotlin/com/huanshankeji/compose/material3/ext/ExposedDropdownMenu.kt +++ b/compose-multiplatform-material3/src/commonMain/kotlin/com/huanshankeji/compose/material3/ext/ExposedDropdownMenu.kt @@ -25,14 +25,14 @@ expect class ExposedDropdownMenuBoxScope { */ /** - * @param onDismissRequestAndroidxCommonOnly not supported on JS. - * @param onCloseJsOnly JS only. + * @param onDismissRequestAndroidx not supported on JS. + * @param onCloseJsDom JS only. */ @Composable fun ExposedDropdownMenu( expanded: Boolean, - onDismissRequestAndroidxCommonOnly: () -> Unit, - onCloseJsOnly: () -> Unit, + onDismissRequestAndroidx: () -> Unit, + onCloseJsDom: () -> Unit, modifier: Modifier = Modifier, //scrollState: ScrollState = rememberScrollState(), content: @Composable /*ColumnScope.*/() -> Unit @@ -56,7 +56,7 @@ fun ExposedDropdownMenuBoxWithTextField( ExposedDropdownMenuBoxTextField(expanded, textFieldArgs) with(exposedDropdownMenuArgs) { ExposedDropdownMenu( - this.expanded, onDismissRequestAndroidxCommonOnly, onCloseJsOnly, this.modifier, content + this.expanded, onDismissRequestAndroidx, onCloseJsDom, this.modifier, content ) } } @@ -78,8 +78,8 @@ expect fun ExposedDropdownMenuBoxScope.ExposedDropdownMenuBoxTextField( class ExposedDropdownMenuArgs( val expanded: Boolean, - val onDismissRequestAndroidxCommonOnly: () -> Unit, - val onCloseJsOnly: () -> Unit, + val onDismissRequestAndroidx: () -> Unit, + val onCloseJsDom: () -> Unit, val modifier: Modifier = Modifier, val content: @Composable /*ColumnScope.*/() -> Unit ) diff --git a/compose-multiplatform-material3/src/commonMain/kotlin/com/huanshankeji/compose/material3/ext/Menu.kt b/compose-multiplatform-material3/src/commonMain/kotlin/com/huanshankeji/compose/material3/ext/Menu.kt index b82f240e..dc05ffd7 100644 --- a/compose-multiplatform-material3/src/commonMain/kotlin/com/huanshankeji/compose/material3/ext/Menu.kt +++ b/compose-multiplatform-material3/src/commonMain/kotlin/com/huanshankeji/compose/material3/ext/Menu.kt @@ -15,8 +15,8 @@ internal val defaultDpOffset = DpOffset(0.dp, 0.dp) @Composable expect fun DropdownMenu( expanded: Boolean, - onDismissRequestAndroidxCommonOnly: () -> Unit, - onCloseJsOnly: () -> Unit, + onDismissRequestAndroidx: () -> Unit, + onCloseJsDom: () -> Unit, modifier: Modifier = Modifier, offset: DpOffset = defaultDpOffset, //scrollState: ScrollState = rememberScrollState(), @@ -24,18 +24,18 @@ expect fun DropdownMenu( ) expect class DropdownMenuBoxScope { - fun Modifier.menuAnchorJs(): Modifier + fun Modifier.menuAnchorJsDom(): Modifier /** - * @param onDismissRequestAndroidxCommonOnly not supported on JS. - * @param onCloseJsOnly JS only + * @param onDismissRequestAndroidx not supported on JS. + * @param onCloseJsDom JS only * @see com.huanshankeji.compose.material3.ext.DropdownMenu */ @Composable fun DropdownMenu( expanded: Boolean, - onDismissRequestAndroidxCommonOnly: () -> Unit, - onCloseJsOnly: () -> Unit, + onDismissRequestAndroidx: () -> Unit, + onCloseJsDom: () -> Unit, modifier: Modifier = Modifier, offset: DpOffset = defaultDpOffset, //scrollState: ScrollState = rememberScrollState(), @@ -47,7 +47,7 @@ expect class DropdownMenuBoxScope { expect fun DropdownMenuBox(content: @Composable DropdownMenuBoxScope.() -> Unit) /** - * @param keepOpenJsOnly set to `true` for completely consistent behavior on JS to `androidx.compose`. However, if you set the `expanded` state to false in [onClick], doing this is unnecessary. + * @param keepOpenJsDom set to `true` for completely consistent behavior on JS to `androidx.compose`. However, if you set the `expanded` state to false in [onClick], doing this is unnecessary. */ @Composable expect fun DropdownMenuItem( @@ -57,7 +57,7 @@ expect fun DropdownMenuItem( leadingIcon: @Composable ((Modifier) -> Unit)? = null, trailingIcon: @Composable ((Modifier) -> Unit)? = null, enabled: Boolean = true, - keepOpenJsOnly: Boolean = false + keepOpenJsDom: Boolean = false ) @Composable diff --git a/compose-multiplatform-material3/src/commonMain/kotlin/com/huanshankeji/compose/material3/lazy/ext/List.kt b/compose-multiplatform-material3/src/commonMain/kotlin/com/huanshankeji/compose/material3/lazy/ext/List.kt index 540703e6..985e6ba3 100644 --- a/compose-multiplatform-material3/src/commonMain/kotlin/com/huanshankeji/compose/material3/lazy/ext/List.kt +++ b/compose-multiplatform-material3/src/commonMain/kotlin/com/huanshankeji/compose/material3/lazy/ext/List.kt @@ -1,7 +1,7 @@ package com.huanshankeji.compose.material3.lazy.ext import androidx.compose.runtime.Composable -import com.huanshankeji.compose.foundation.ext.matchPositionRelativeParentJsOnly +import com.huanshankeji.compose.foundation.ext.matchPositionRelativeParentJsDom import com.huanshankeji.compose.material.icons.Icon import com.huanshankeji.compose.material3.ext.toNullableContentWithModifier import com.huanshankeji.compose.material3.ext.toNullableTextWithModifier @@ -33,13 +33,13 @@ expect class ListScope { expect class ItemScope /** - * @param isInteractiveJs whether the item is interactive on JS DOM, + * @param isInteractiveJsDom whether the item is interactive on JS DOM, * aka whether it shows effects when the mouse pointer hovers above it or when it gets clicked. * On the `androidx.compose` targets, use `Modifier.clickable` for the same effect. */ class ListItemComponents( val contentModifier: Modifier = Modifier, - val isInteractiveJs: Boolean, + val isInteractiveJsDom: Boolean, val headline: @Composable (Modifier) -> Unit, val start: @Composable ((Modifier) -> Unit)? = null, val end: @Composable ((Modifier) -> Unit)? = null, @@ -49,7 +49,7 @@ class ListItemComponents( ) { constructor( contentModifier: Modifier = Modifier, - isInteractiveJs: Boolean, + isInteractiveJsDom: Boolean, headline: String, start: Icon? = null, end: Icon? = null, @@ -58,7 +58,7 @@ class ListItemComponents( overline: String? = null ) : this( contentModifier, - isInteractiveJs, + isInteractiveJsDom, headline.toTextWithModifier(), start.toNullableContentWithModifier(), end.toNullableContentWithModifier(), @@ -71,7 +71,7 @@ class ListItemComponents( /** * On JS DOM, if there isn't a parent with a fixed height * and you want the list height to be constraint to the available space of the parent instead of expanding the parent, - * set "position:relative;" on the parent element and use [Modifier.matchPositionRelativeParentJsOnly]. + * set "position:relative;" on the parent element and use [Modifier.matchPositionRelativeParentJsDom]. */ @Composable expect fun List(modifier: Modifier = Modifier, content: ListScope.() -> Unit) diff --git a/compose-multiplatform-material3/src/jsMain/kotlin/com/huanshankeji/compose/material3/ext/ExposedDropdownMenu.js.kt b/compose-multiplatform-material3/src/jsMain/kotlin/com/huanshankeji/compose/material3/ext/ExposedDropdownMenu.js.kt index 14eafb5b..a4442414 100644 --- a/compose-multiplatform-material3/src/jsMain/kotlin/com/huanshankeji/compose/material3/ext/ExposedDropdownMenu.js.kt +++ b/compose-multiplatform-material3/src/jsMain/kotlin/com/huanshankeji/compose/material3/ext/ExposedDropdownMenu.js.kt @@ -59,15 +59,15 @@ actual class ExposedDropdownMenuBoxScope( @Composable actual fun ExposedDropdownMenu( expanded: Boolean, - onDismissRequestAndroidxCommonOnly: () -> Unit, - onCloseJsOnly: () -> Unit, + onDismissRequestAndroidx: () -> Unit, + onCloseJsDom: () -> Unit, modifier: Modifier, content: @Composable () -> Unit ) = CommonDropdownMenu( //ANCHOR_ID, // An alternative approach by setting IDs. Duplicate IDs are semantically incorrect, however. expanded, - onCloseJsOnly, + onCloseJsDom, // The following is identical to inlining `mdMenuModifier(anchorElementState.value, modifier)` but probably due to some Compose compiler bugs invoking it directly doesn't work. FIXME when the bug is fixed { ref { diff --git a/compose-multiplatform-material3/src/jsMain/kotlin/com/huanshankeji/compose/material3/ext/Menu.js.kt b/compose-multiplatform-material3/src/jsMain/kotlin/com/huanshankeji/compose/material3/ext/Menu.js.kt index d5bc3121..a8282443 100644 --- a/compose-multiplatform-material3/src/jsMain/kotlin/com/huanshankeji/compose/material3/ext/Menu.js.kt +++ b/compose-multiplatform-material3/src/jsMain/kotlin/com/huanshankeji/compose/material3/ext/Menu.js.kt @@ -23,7 +23,7 @@ import org.w3c.dom.HTMLElement internal fun CommonDropdownMenu( //anchor: String?, expanded: Boolean, - onCloseJsOnly: () -> Unit, + onCloseJsDom: () -> Unit, //onDismissRequest: () -> Unit, attrs: Attrs?, offset: DpOffset = defaultDpOffset, @@ -43,7 +43,7 @@ internal fun CommonDropdownMenu( } }*/ //onClosing> { onDismissRequest() } // the `androidx.compose` one invokes `onDismissRequest` only when the menu is closed and an item is not selected. - onClosing> { onCloseJsOnly() } + onClosing> { onCloseJsDom() } attrs?.invoke(this) }, content = content @@ -91,17 +91,17 @@ internal fun MdMenuBox(modifier: Modifier, content: @Composable ElementScope Unit, - onCloseJsOnly: () -> Unit, + onDismissRequestAndroidx: () -> Unit, + onCloseJsDom: () -> Unit, modifier: Modifier, offset: DpOffset, content: @Composable () -> Unit ) = - CommonDropdownMenu(expanded, onCloseJsOnly, modifier.toAttrs(), offset) { content() } + CommonDropdownMenu(expanded, onCloseJsDom, modifier.toAttrs(), offset) { content() } actual class DropdownMenuBoxScope(anchorElementState: MutableState) { var anchorElement by anchorElementState - actual fun Modifier.menuAnchorJs(): Modifier = + actual fun Modifier.menuAnchorJsDom(): Modifier = platformModify { attrsModifier { refSetAnchorElementState { anchorElement = it } @@ -111,14 +111,14 @@ actual class DropdownMenuBoxScope(anchorElementState: MutableState @Composable actual fun DropdownMenu( expanded: Boolean, - onDismissRequestAndroidxCommonOnly: () -> Unit, - onCloseJsOnly: () -> Unit, + onDismissRequestAndroidx: () -> Unit, + onCloseJsDom: () -> Unit, modifier: Modifier, offset: DpOffset, content: @Composable () -> Unit ) = CommonDropdownMenu( - expanded, onCloseJsOnly, + expanded, onCloseJsDom, // The following is identical to inlining `mdMenuModifier(anchorElementState.value, modifier)` but probably due to some Compose compiler bugs invoking it directly doesn't work. FIXME when the bug is fixed { ref { @@ -145,11 +145,11 @@ actual fun DropdownMenuItem( leadingIcon: @Composable ((Modifier) -> Unit)?, trailingIcon: @Composable ((Modifier) -> Unit)?, enabled: Boolean, - keepOpenJsOnly: Boolean + keepOpenJsDom: Boolean ) = MdMenuItem( enabled.isFalseOrNull(), - keepOpen = keepOpenJsOnly.isTrueOrNull(), + keepOpen = keepOpenJsDom.isTrueOrNull(), attrs = modifier.toAttrs { onClick { onClick() diff --git a/compose-multiplatform-material3/src/jsMain/kotlin/com/huanshankeji/compose/material3/lazy/ext/List.js.kt b/compose-multiplatform-material3/src/jsMain/kotlin/com/huanshankeji/compose/material3/lazy/ext/List.js.kt index 59b90507..21098338 100644 --- a/compose-multiplatform-material3/src/jsMain/kotlin/com/huanshankeji/compose/material3/lazy/ext/List.js.kt +++ b/compose-multiplatform-material3/src/jsMain/kotlin/com/huanshankeji/compose/material3/lazy/ext/List.js.kt @@ -42,7 +42,7 @@ actual class ListScope(val mdListScope: MdListScope) { @Composable private fun ListItem(components: ListItemComponents) = mdListScope.MdListItem( - type = if (components.isInteractiveJs) MdListItemType.Button else null, + type = if (components.isInteractiveJsDom) MdListItemType.Button else null, attrs = components.contentModifier.toAttrs() ) { contentFromComponents(components) diff --git a/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Material3.kt b/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Material3.kt index 4381672b..47b298ca 100644 --- a/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Material3.kt +++ b/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Material3.kt @@ -214,7 +214,7 @@ fun Material3(modifier: Modifier) { var expanded by remember { mutableStateOf(false) } val close = { expanded = false } val (_, setSelection) = remember { mutableStateOf(null) } - IconButton({ expanded = true }, Modifier.menuAnchorJs()) { + IconButton({ expanded = true }, Modifier.menuAnchorJsDom()) { Icon(Icons.Filled.ArrowDropDown, "Please select") } DropdownMenu(expanded, close, close) { From 1fe305a2c5dc177b485017ed2babc02385fef049 Mon Sep 17 00:00:00 2001 From: Shreck Ye Date: Tue, 22 Oct 2024 23:14:53 +0800 Subject: [PATCH 19/85] Make the demos fit better in the screen with navigation, and add an `imitateAndroidxLayout` JS DOM modifier and replace `sizeFitContent` with it in the layouts Resolve #29, resolve #38 Extract more common functions for the CSS `stretch` value BTW. There is a new UI issue that the scrollable padding is not at the right place. --- .../huanshankeji/compose/foundation/Scroll.kt | 8 ++++ .../compose/foundation/layout/Box.js.kt | 6 +-- .../compose/foundation/layout/Column.js.kt | 4 +- .../compose/foundation/layout/Row.js.kt | 4 +- .../compose/foundation/layout/ext/Size.js.kt | 30 +++++++++--- .../kobweb/compose/ui/modifiers/Layout.kt | 28 +++++++++++ .../kobweb/compose/ui/modifiers/Size.kt | 3 ++ .../huanshankeji/compose/material2/Card.js.kt | 4 +- demo/build.gradle.kts | 1 + .../huanshankeji/compose/material/demo/App.kt | 48 +++++++++++++------ .../compose/material/demo/Common.kt | 8 +++- .../compose/material/demo/Material2.kt | 6 ++- .../compose/material/demo/Material3.kt | 10 +++- demo/src/jsMain/resources/index.html | 2 + 14 files changed, 126 insertions(+), 36 deletions(-) create mode 100644 compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/kobweb/compose/ui/modifiers/Layout.kt diff --git a/compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/foundation/Scroll.kt b/compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/foundation/Scroll.kt index e5ca0111..226d3d5f 100644 --- a/compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/foundation/Scroll.kt +++ b/compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/foundation/Scroll.kt @@ -17,6 +17,9 @@ expect class ScrollState It seems `state` has to be achieved with `DisposableEffect` on JS which can not be set with the Kobweb `Modifier` yet. See https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop. */ +/** + * Note that if the component is a layout, it applies to the target as a whole on `androidx` targets, but applies to its content on JS DOM. + */ expect fun Modifier.verticalScroll( state: ScrollState /* @@ -27,3 +30,8 @@ expect fun Modifier.verticalScroll( ): Modifier expect fun Modifier.horizontalScroll(state: ScrollState): Modifier + +/* +@Composable +expect fun VerticalScrollBox(content : @Composable () ->Unit) +*/ diff --git a/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/Box.js.kt b/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/Box.js.kt index 57dc24cf..d0ff5de6 100644 --- a/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/Box.js.kt +++ b/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/Box.js.kt @@ -6,7 +6,7 @@ import androidx.compose.runtime.Stable import com.huanshankeji.compose.ui.Alignment import com.huanshankeji.compose.ui.Modifier import com.huanshankeji.compose.ui.PlatformModifier -import com.huanshankeji.kobweb.compose.ui.modifiers.sizeFitContent +import com.huanshankeji.kobweb.compose.ui.modifiers.imitateAndroidxLayout import com.varabyte.kobweb.compose.foundation.layout.LayoutScopeMarker import com.varabyte.kobweb.compose.foundation.layout.Box as PlatformBox import com.varabyte.kobweb.compose.foundation.layout.BoxScope as PlatformBoxScope @@ -19,14 +19,14 @@ actual fun Box( ) { AddKobwebComposeStyleSheet() PlatformBox( - PlatformModifier.sizeFitContent().then(modifier.platformModifier), + PlatformModifier.imitateAndroidxLayout().then(modifier.platformModifier), contentAlignment.platformValue, ) { BoxScope.Impl(this).content() } } @Composable actual fun Box(modifier: Modifier) = - PlatformBox(PlatformModifier.sizeFitContent().then(modifier.platformModifier)) + PlatformBox(PlatformModifier.imitateAndroidxLayout().then(modifier.platformModifier)) @LayoutScopeMarker @Immutable diff --git a/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/Column.js.kt b/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/Column.js.kt index a742b57a..41846b1a 100644 --- a/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/Column.js.kt +++ b/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/Column.js.kt @@ -6,7 +6,7 @@ import androidx.compose.runtime.Stable import com.huanshankeji.compose.ui.Alignment import com.huanshankeji.compose.ui.Modifier import com.huanshankeji.compose.ui.PlatformModifier -import com.huanshankeji.kobweb.compose.ui.modifiers.sizeFitContent +import com.huanshankeji.kobweb.compose.ui.modifiers.imitateAndroidxLayout import com.varabyte.kobweb.compose.foundation.layout.LayoutScopeMarker @Composable @@ -19,7 +19,7 @@ actual fun Column( AddKobwebComposeStyleSheet() com.varabyte.kobweb.compose.foundation.layout.Column( PlatformModifier - .sizeFitContent() // "fit-content" is added to make it consistent with the `androidx` one + .imitateAndroidxLayout() // "fit-content" is added to make it consistent with the `androidx` one .stylesFrom(verticalArrangement) .then(modifier.platformModifier), verticalArrangement.platformValue, diff --git a/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/Row.js.kt b/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/Row.js.kt index d4683081..f13c5e4c 100644 --- a/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/Row.js.kt +++ b/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/Row.js.kt @@ -6,7 +6,7 @@ import androidx.compose.runtime.Stable import com.huanshankeji.compose.ui.Alignment import com.huanshankeji.compose.ui.Modifier import com.huanshankeji.compose.ui.PlatformModifier -import com.huanshankeji.kobweb.compose.ui.modifiers.sizeFitContent +import com.huanshankeji.kobweb.compose.ui.modifiers.imitateAndroidxLayout import com.varabyte.kobweb.compose.foundation.layout.LayoutScopeMarker @Composable @@ -19,7 +19,7 @@ actual fun Row( AddKobwebComposeStyleSheet() com.varabyte.kobweb.compose.foundation.layout.Row( PlatformModifier - .sizeFitContent() + .imitateAndroidxLayout() .stylesFrom(horizontalArrangement) .then(modifier.platformModifier), horizontalArrangement.platformValue, diff --git a/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/ext/Size.js.kt b/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/ext/Size.js.kt index a95bf250..97087748 100644 --- a/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/ext/Size.js.kt +++ b/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/ext/Size.js.kt @@ -7,28 +7,44 @@ import com.huanshankeji.compose.ui.Modifier import com.huanshankeji.compose.web.css.height import com.huanshankeji.compose.web.css.width import com.varabyte.kobweb.compose.ui.styleModifier +import org.jetbrains.compose.web.css.StyleScope private const val CSS_STRETCH_VALUE = "stretch" // This does not work on Chrome. -private val cssStretchValueBrowserDependent = +private const val CSS_WEBKIT_STRETCH_VALUE = "-webkit-fill-available" +private const val CSS_MOZ_STRETCH_VALUE = "-moz-available" +val cssWidthStretchValueBrowserDependent = when (browser) { - Browser.Webkit -> "-webkit-fill-available" - Browser.Mozilla -> "-moz-available" + Browser.Webkit -> CSS_WEBKIT_STRETCH_VALUE + Browser.Mozilla -> CSS_MOZ_STRETCH_VALUE null -> "" } +val cssHeightStretchValueBrowserDependent = + when (browser) { + Browser.Webkit -> CSS_WEBKIT_STRETCH_VALUE + Browser.Mozilla -> "100%" // Setting `CSS_MOZ_STRETCH_VALUE` for `height` seems to be not available on Firefox. See https://developer.mozilla.org/en-US/docs/Web/CSS/height#browser_compatibility. + null -> "" + } + +fun StyleScope.widthStretch() = + width(cssWidthStretchValueBrowserDependent) + +fun StyleScope.heightStretch() = + height(cssHeightStretchValueBrowserDependent) + @Stable actual fun Modifier.fillMaxWidthStretch(): Modifier = - platformModify { styleModifier { width(cssStretchValueBrowserDependent) } } + platformModify { styleModifier { widthStretch() } } @Stable actual fun Modifier.fillMaxHeightStretch(): Modifier = - platformModify { styleModifier { height(cssStretchValueBrowserDependent) } } // Setting this for `height` seems to be not available on Firefox. See https://developer.mozilla.org/en-US/docs/Web/CSS/height#browser_compatibility. + platformModify { styleModifier { heightStretch() } } @Stable actual fun Modifier.fillMaxSizeStretch(): Modifier = platformModify { styleModifier { - width(cssStretchValueBrowserDependent) - height(cssStretchValueBrowserDependent) // Setting this for `height` seems to be not available on Firefox. See https://developer.mozilla.org/en-US/docs/Web/CSS/height#browser_compatibility. + widthStretch() + heightStretch() } } diff --git a/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/kobweb/compose/ui/modifiers/Layout.kt b/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/kobweb/compose/ui/modifiers/Layout.kt new file mode 100644 index 00000000..f449cb50 --- /dev/null +++ b/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/kobweb/compose/ui/modifiers/Layout.kt @@ -0,0 +1,28 @@ +package com.huanshankeji.kobweb.compose.ui.modifiers + +import com.huanshankeji.compose.foundation.layout.ext.cssHeightStretchValueBrowserDependent +import com.huanshankeji.compose.foundation.layout.ext.cssWidthStretchValueBrowserDependent +import com.varabyte.kobweb.compose.css.Height +import com.varabyte.kobweb.compose.css.Width +import com.varabyte.kobweb.compose.css.height +import com.varabyte.kobweb.compose.css.width +import com.varabyte.kobweb.compose.ui.Modifier +import com.varabyte.kobweb.compose.ui.styleModifier +import org.jetbrains.compose.web.css.maxHeight +import org.jetbrains.compose.web.css.maxWidth + + +/** + * A modifier for layouts to make them more consistent with the `androidx.compose` behavior, + * by adding the parent sizes as max constrains for the children. + * Doing this prevents the children to push the parent out of the parent's parent, + * and make the `overflow-*` CSS property / the `*Scroll` modifier work better on JS DOM. + * See https://developer.android.com/develop/ui/compose/layouts/constraints-modifiers for more details. + */ +fun Modifier.imitateAndroidxLayout() = + styleModifier { + width(Width.FitContent) + height(Height.FitContent) + maxWidth(cssWidthStretchValueBrowserDependent) + maxHeight(cssHeightStretchValueBrowserDependent) + } diff --git a/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/kobweb/compose/ui/modifiers/Size.kt b/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/kobweb/compose/ui/modifiers/Size.kt index 6514c192..3b05c880 100644 --- a/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/kobweb/compose/ui/modifiers/Size.kt +++ b/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/kobweb/compose/ui/modifiers/Size.kt @@ -14,5 +14,8 @@ fun Modifier.size(width: Width, height: Height): Modifier = } //TODO consider removing and inlining this +/** + * Consider using [Modifier.imitateAndroidxLayout] instead when adding this for a layout. + */ fun Modifier.sizeFitContent() = size(Width.FitContent, Height.FitContent) diff --git a/compose-multiplatform-material2/src/jsMain/kotlin/com/huanshankeji/compose/material2/Card.js.kt b/compose-multiplatform-material2/src/jsMain/kotlin/com/huanshankeji/compose/material2/Card.js.kt index 60e0a6c5..5f67b633 100644 --- a/compose-multiplatform-material2/src/jsMain/kotlin/com/huanshankeji/compose/material2/Card.js.kt +++ b/compose-multiplatform-material2/src/jsMain/kotlin/com/huanshankeji/compose/material2/Card.js.kt @@ -3,10 +3,10 @@ package com.huanshankeji.compose.material2 import androidx.compose.runtime.Composable import com.huanshankeji.compose.ui.Modifier import com.huanshankeji.compose.ui.PlatformModifier -import com.huanshankeji.kobweb.compose.ui.modifiers.sizeFitContent +import com.huanshankeji.kobweb.compose.ui.modifiers.imitateAndroidxLayout import com.varabyte.kobweb.compose.ui.toAttrs import dev.petuska.kmdc.card.MDCCard @Composable actual fun Card(modifier: Modifier, content: @Composable () -> Unit) = - MDCCard(attrs = PlatformModifier.sizeFitContent().then(modifier.platformModifier).toAttrs()) { content() } + MDCCard(attrs = PlatformModifier.imitateAndroidxLayout().then(modifier.platformModifier).toAttrs()) { content() } diff --git a/demo/build.gradle.kts b/demo/build.gradle.kts index cd18cf5a..227ec7e9 100644 --- a/demo/build.gradle.kts +++ b/demo/build.gradle.kts @@ -48,6 +48,7 @@ kotlin { implementation(compose.runtime) implementation(project(":compose-multiplatform-material2")) implementation(project(":compose-multiplatform-material3")) + implementation(project(":compose-multiplatform-navigation")) /* see https://github.com/JetBrains/compose-multiplatform-core/blob/476d43b99a27696d12ef087e8028d90789645ba7/compose/ui/ui/build.gradle#L54 and https://github.com/JetBrains/compose-multiplatform-core/blob/381796b5e682653aa1fa53e6bcf0441d06b873f8/compose/runtime/runtime/build.gradle#L124 diff --git a/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/App.kt b/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/App.kt index d8cf8545..0422fc7e 100644 --- a/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/App.kt +++ b/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/App.kt @@ -2,11 +2,14 @@ package com.huanshankeji.compose.material.demo import androidx.compose.runtime.Composable import androidx.compose.ui.unit.dp -import com.huanshankeji.compose.foundation.layout.Box -import com.huanshankeji.compose.foundation.layout.Row -import com.huanshankeji.compose.foundation.layout.padding -import com.huanshankeji.compose.foundation.rememberScrollState -import com.huanshankeji.compose.foundation.verticalScroll +import androidx.navigation.NavHostController +import com.huanshankeji.androidx.navigation.compose.NavHost +import com.huanshankeji.androidx.navigation.compose.composable +import com.huanshankeji.androidx.navigation.compose.rememberNavController +import com.huanshankeji.compose.foundation.layout.* +import com.huanshankeji.compose.material3.Button +import com.huanshankeji.compose.material3.ext.TaglessText +import com.huanshankeji.compose.ui.Alignment import com.huanshankeji.compose.ui.Modifier internal enum class Selection { @@ -18,18 +21,35 @@ val listSize = 160.dp fun Modifier.contentPadding() = padding(16.dp) val contentPaddingModifier = Modifier.contentPadding() +enum class Screen { + Home, Common, Material2, Material3 +} + @Composable fun App() { - Row { - @Composable - fun subDemoModifier() = - Modifier.weight(1f).verticalScroll(rememberScrollState()) + val navController = rememberNavController() + NavHost(navController, Screen.Home.name) { + composable(Screen.Home.name) { Home(navController) } + //fun subDemoModifier() + composable(Screen.Common.name) { Common() } + composable(Screen.Material2.name) { Material2() } + composable(Screen.Material3.name) { Material3() } + } +} - Common(subDemoModifier()) - // Putting the scroll modifier in the `Box` causes `java.lang.IllegalArgumentException: Can't represent a size of 2147483577 in Constraints`. - Box(Modifier.weight(1f)) { - Material2(Modifier.verticalScroll(rememberScrollState())) +@Composable +fun Home(navController: NavHostController) { + Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) { + Column(verticalArrangement = Arrangement.spacedBy(16.dp)) { + Button({ navController.navigate(Screen.Common.name) }) { + TaglessText("Common") + } + Button({ navController.navigate(Screen.Material2.name) }) { + TaglessText("Material 2") + } + Button({ navController.navigate(Screen.Material3.name) }) { + TaglessText("Material 3") + } } - Material3(subDemoModifier()) } } diff --git a/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Common.kt b/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Common.kt index 321a27f2..b6acd483 100644 --- a/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Common.kt +++ b/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Common.kt @@ -7,6 +7,7 @@ import com.huanshankeji.compose.foundation.ext.outerBorder import com.huanshankeji.compose.foundation.ext.roundedCornerBackgroundAndOuterBorder import com.huanshankeji.compose.foundation.ext.roundedCornerOuterBorder import com.huanshankeji.compose.foundation.layout.* +import com.huanshankeji.compose.foundation.layout.ext.fillMaxWidthStretch import com.huanshankeji.compose.foundation.lazy.LazyColumn import com.huanshankeji.compose.foundation.lazy.LazyListScope import com.huanshankeji.compose.foundation.lazy.LazyRow @@ -16,8 +17,11 @@ import com.huanshankeji.compose.ui.Modifier import com.huanshankeji.compose.ui.graphics.Color @Composable -fun Common(modifier: Modifier) { - Column(modifier, Arrangement.spacedBy(16.dp)) { +fun Common(modifier: Modifier = Modifier) { + Column( + modifier.fillMaxWidthStretch().verticalScroll(rememberScrollState()).contentPadding(), + Arrangement.spacedBy(16.dp) + ) { BasicText("basic text 1") BasicText("basic text 2") diff --git a/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Material2.kt b/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Material2.kt index d80b0df5..a9cf168a 100644 --- a/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Material2.kt +++ b/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Material2.kt @@ -4,11 +4,13 @@ import androidx.compose.runtime.* import androidx.compose.ui.unit.dp import com.huanshankeji.compose.foundation.background import com.huanshankeji.compose.foundation.layout.* +import com.huanshankeji.compose.foundation.rememberScrollState import com.huanshankeji.compose.foundation.text.KeyboardActions import com.huanshankeji.compose.foundation.text.KeyboardOptions import com.huanshankeji.compose.foundation.text.input.ImeAction import com.huanshankeji.compose.foundation.text.input.KeyboardCapitalization import com.huanshankeji.compose.foundation.text.input.KeyboardType +import com.huanshankeji.compose.foundation.verticalScroll import com.huanshankeji.compose.material.icons.Icons import com.huanshankeji.compose.material.icons.filled.Add import com.huanshankeji.compose.material.icons.filled.Done @@ -26,7 +28,7 @@ import kotlinx.coroutines.launch import com.huanshankeji.compose.material2.ext.Button as ExtButton @Composable -fun Material2(modifier: Modifier) { +fun Material2(modifier: Modifier = Modifier) { val snackbarHostState = remember { SnackbarHostState() } // It seems the modifier can't be set on `TopAppBarScaffold` or a box wrapping it TopAppBarScaffold({ @@ -39,7 +41,7 @@ fun Material2(modifier: Modifier) { }, snackbarHost = { SnackbarHost(snackbarHostState) }) { - Card(modifier.contentPadding()) { + Card(modifier.verticalScroll(rememberScrollState()).contentPadding()) { Column(contentPaddingModifier.background(Color(0xF8, 0xF8, 0xF8, 0xFF)), Arrangement.spacedBy(16.dp)) { Text("Material text") diff --git a/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Material3.kt b/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Material3.kt index 47b298ca..01b9b771 100644 --- a/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Material3.kt +++ b/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Material3.kt @@ -4,11 +4,14 @@ import androidx.compose.runtime.* import androidx.compose.ui.unit.dp import com.huanshankeji.compose.ExtRecommendedApi import com.huanshankeji.compose.foundation.layout.* +import com.huanshankeji.compose.foundation.layout.ext.fillMaxWidthStretch +import com.huanshankeji.compose.foundation.rememberScrollState import com.huanshankeji.compose.foundation.text.KeyboardActions import com.huanshankeji.compose.foundation.text.KeyboardOptions import com.huanshankeji.compose.foundation.text.input.ImeAction import com.huanshankeji.compose.foundation.text.input.KeyboardCapitalization import com.huanshankeji.compose.foundation.text.input.KeyboardType +import com.huanshankeji.compose.foundation.verticalScroll import com.huanshankeji.compose.material.icons.Icons import com.huanshankeji.compose.material.icons.filled.Add import com.huanshankeji.compose.material.icons.filled.ArrowDropDown @@ -25,8 +28,11 @@ import com.huanshankeji.compose.ui.Modifier import com.huanshankeji.compose.material3.Button as RowScopeButton @Composable -fun Material3(modifier: Modifier) { - Column(modifier, Arrangement.spacedBy(16.dp)) { +fun Material3(modifier: Modifier = Modifier) { + Column( + modifier.fillMaxWidthStretch().verticalScroll(rememberScrollState()).contentPadding(), + Arrangement.spacedBy(16.dp) + ) { var count by remember { mutableStateOf(0) } val onClick: () -> Unit = { count++ } val buttonContent: @Composable () -> Unit = { diff --git a/demo/src/jsMain/resources/index.html b/demo/src/jsMain/resources/index.html index 1913ade4..4687f55c 100644 --- a/demo/src/jsMain/resources/index.html +++ b/demo/src/jsMain/resources/index.html @@ -5,9 +5,11 @@ Compose Multiplatform Material demo + From 0cab51c5c56204e027d1bc8547787ddf50892b21 Mon Sep 17 00:00:00 2001 From: Shreck Ye Date: Wed, 23 Oct 2024 01:17:35 +0800 Subject: [PATCH 20/85] Split the `padding` modifiers into `outerPadding` and `innerPadding` --- .../layout/ext/InnerPadding.androidxCommon.kt | 28 ++++++++++++ .../layout/ext/OuterPadding.androidxCommon.kt | 28 ++++++++++++ .../compose/foundation/Background.kt | 7 +++ .../compose/foundation/layout/Padding.kt | 26 ++++++++--- .../foundation/layout/ext/InnerPadding.kt | 43 +++++++++++++++++++ .../foundation/layout/ext/OuterPadding.kt | 43 +++++++++++++++++++ .../compose/foundation/layout/Padding.js.kt | 25 +++-------- .../foundation/layout/ext/InnerPadding.js.kt | 40 +++++++++++++++++ .../foundation/layout/ext/OuterPadding.js.kt | 40 +++++++++++++++++ 9 files changed, 255 insertions(+), 25 deletions(-) create mode 100644 compose-multiplatform-common/src/androidxCommonMain/kotlin/com/huanshankeji/compose/foundation/layout/ext/InnerPadding.androidxCommon.kt create mode 100644 compose-multiplatform-common/src/androidxCommonMain/kotlin/com/huanshankeji/compose/foundation/layout/ext/OuterPadding.androidxCommon.kt create mode 100644 compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/foundation/layout/ext/InnerPadding.kt create mode 100644 compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/foundation/layout/ext/OuterPadding.kt create mode 100644 compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/ext/InnerPadding.js.kt create mode 100644 compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/ext/OuterPadding.js.kt diff --git a/compose-multiplatform-common/src/androidxCommonMain/kotlin/com/huanshankeji/compose/foundation/layout/ext/InnerPadding.androidxCommon.kt b/compose-multiplatform-common/src/androidxCommonMain/kotlin/com/huanshankeji/compose/foundation/layout/ext/InnerPadding.androidxCommon.kt new file mode 100644 index 00000000..b7424fd6 --- /dev/null +++ b/compose-multiplatform-common/src/androidxCommonMain/kotlin/com/huanshankeji/compose/foundation/layout/ext/InnerPadding.androidxCommon.kt @@ -0,0 +1,28 @@ +package com.huanshankeji.compose.foundation.layout.ext + +import androidx.compose.runtime.Stable +import androidx.compose.ui.unit.Dp +import com.huanshankeji.compose.foundation.layout.PaddingValues +import com.huanshankeji.compose.foundation.layout.absolutePadding +import com.huanshankeji.compose.foundation.layout.padding +import com.huanshankeji.compose.ui.Modifier + +@Stable +actual fun Modifier.innerPadding(start: Dp, top: Dp, end: Dp, bottom: Dp): Modifier = + padding(start, top, end, bottom) + +@Stable +actual fun Modifier.innerPadding(horizontal: Dp, vertical: Dp): Modifier = + padding(horizontal, vertical) + +@Stable +actual fun Modifier.innerPadding(all: Dp): Modifier = + padding(all) + +@Stable +actual fun Modifier.innerPadding(paddingValues: PaddingValues): Modifier = + padding(paddingValues) + +@Stable +actual fun Modifier.absoluteInnerPadding(left: Dp, top: Dp, right: Dp, bottom: Dp): Modifier = + absolutePadding(left, top, right, bottom) diff --git a/compose-multiplatform-common/src/androidxCommonMain/kotlin/com/huanshankeji/compose/foundation/layout/ext/OuterPadding.androidxCommon.kt b/compose-multiplatform-common/src/androidxCommonMain/kotlin/com/huanshankeji/compose/foundation/layout/ext/OuterPadding.androidxCommon.kt new file mode 100644 index 00000000..1541c659 --- /dev/null +++ b/compose-multiplatform-common/src/androidxCommonMain/kotlin/com/huanshankeji/compose/foundation/layout/ext/OuterPadding.androidxCommon.kt @@ -0,0 +1,28 @@ +package com.huanshankeji.compose.foundation.layout.ext + +import androidx.compose.runtime.Stable +import androidx.compose.ui.unit.Dp +import com.huanshankeji.compose.foundation.layout.PaddingValues +import com.huanshankeji.compose.foundation.layout.absolutePadding +import com.huanshankeji.compose.foundation.layout.padding +import com.huanshankeji.compose.ui.Modifier + +@Stable +actual fun Modifier.outerPadding(start: Dp, top: Dp, end: Dp, bottom: Dp): Modifier = + padding(start, top, end, bottom) + +@Stable +actual fun Modifier.outerPadding(horizontal: Dp, vertical: Dp): Modifier = + padding(horizontal, vertical) + +@Stable +actual fun Modifier.outerPadding(all: Dp): Modifier = + padding(all) + +@Stable +actual fun Modifier.outerPadding(paddingValues: PaddingValues): Modifier = + padding(paddingValues) + +@Stable +actual fun Modifier.absoluteOuterPadding(left: Dp, top: Dp, right: Dp, bottom: Dp): Modifier = + absolutePadding(left, top, right, bottom) diff --git a/compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/foundation/Background.kt b/compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/foundation/Background.kt index 6ae59034..b6befc20 100644 --- a/compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/foundation/Background.kt +++ b/compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/foundation/Background.kt @@ -1,6 +1,13 @@ package com.huanshankeji.compose.foundation +import com.huanshankeji.compose.foundation.layout.Box +import com.huanshankeji.compose.foundation.layout.ext.outerPadding import com.huanshankeji.compose.ui.Modifier import com.huanshankeji.compose.ui.graphics.Color +/** + * For consistency on different platforms, if used with a padding modifier, + * use with [Modifier.outerPadding] and use after it, because the padding is not within the background. + * Otherwise, add an outer [Box] and use [background] on it. + */ expect fun Modifier.background(color: Color): Modifier diff --git a/compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/foundation/layout/Padding.kt b/compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/foundation/layout/Padding.kt index ee73bdce..f1ebd0c8 100644 --- a/compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/foundation/layout/Padding.kt +++ b/compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/foundation/layout/Padding.kt @@ -4,19 +4,23 @@ import androidx.compose.runtime.Immutable import androidx.compose.runtime.Stable import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp -import com.huanshankeji.compose.foundation.background -import com.huanshankeji.compose.foundation.onClick +import com.huanshankeji.compose.foundation.layout.ext.innerPadding +import com.huanshankeji.compose.foundation.layout.ext.outerPadding import com.huanshankeji.compose.ui.Modifier +private const val PADDING_DEPRECATED_MESSAGE = "Use `paddingFirst` or checkout out `paddingLast` instead." + /** - * See KDoc of the overload with one parameter for platform differences. + * See the KDoc of the overload with one [Dp] parameter for platform differences. */ +@Deprecated(PADDING_DEPRECATED_MESSAGE, ReplaceWith("this.paddingFirst(start, top, end, bottom)")) @Stable expect fun Modifier.padding(start: Dp = 0.dp, top: Dp = 0.dp, end: Dp = 0.dp, bottom: Dp = 0.dp): Modifier /** - * See KDoc of the overload with one parameter for platform differences. + * See the KDoc of the overload with one [Dp] parameter for platform differences. */ +@Deprecated(PADDING_DEPRECATED_MESSAGE, ReplaceWith("this.paddingFirst(horizontal, vertical)")) @Stable expect fun Modifier.padding(horizontal: Dp = 0.dp, vertical: Dp = 0.dp): Modifier @@ -24,16 +28,24 @@ expect fun Modifier.padding(horizontal: Dp = 0.dp, vertical: Dp = 0.dp): Modifie * Padding works differently on `androidx.compose` and CSS. * In `androidx.compose`, the `padding` modifier adds a layer of wrapper around the component, and [order of modifiers matters](https://developer.android.com/develop/ui/compose/modifiers#order-modifier-matters); * while in CSS, this function delegates to the `margin` CSS properties. - * - * As a result, for consistency on different platforms, it's recommend to put [padding] before the others such as [background] and [onClick], - * and if you want to add inner padding (corresponding to the CSS `padding`) for the content of a component, you are recommended to wrap the content with a [Box] with [padding]. + * @see outerPadding + * @see innerPadding */ +@Deprecated(PADDING_DEPRECATED_MESSAGE, ReplaceWith("this.paddingFirst(all)")) @Stable expect fun Modifier.padding(all: Dp): Modifier +/** + * See the KDoc of the overload with one [Dp] parameter for platform differences. + */ +@Deprecated(PADDING_DEPRECATED_MESSAGE, ReplaceWith("this.paddingFirst(paddingValues)")) @Stable expect fun Modifier.padding(paddingValues: PaddingValues): Modifier +/** + * See the KDoc of the overload with one [Dp] parameter for platform differences. + */ +@Deprecated(PADDING_DEPRECATED_MESSAGE, ReplaceWith("this.absolutePaddingFirst(left, top, right, bottom)")) @Stable expect fun Modifier.absolutePadding(left: Dp = 0.dp, top: Dp = 0.dp, right: Dp = 0.dp, bottom: Dp = 0.dp): Modifier diff --git a/compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/foundation/layout/ext/InnerPadding.kt b/compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/foundation/layout/ext/InnerPadding.kt new file mode 100644 index 00000000..e6d640ec --- /dev/null +++ b/compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/foundation/layout/ext/InnerPadding.kt @@ -0,0 +1,43 @@ +package com.huanshankeji.compose.foundation.layout.ext + +import androidx.compose.runtime.Stable +import androidx.compose.ui.unit.Dp +import androidx.compose.ui.unit.dp +import com.huanshankeji.compose.foundation.background +import com.huanshankeji.compose.foundation.clickable +import com.huanshankeji.compose.foundation.layout.PaddingValues +import com.huanshankeji.compose.foundation.layout.padding +import com.huanshankeji.compose.ui.Modifier + +/** + * See the KDoc of the overload with one [Dp] parameter for platform differences. + */ +@Stable +expect fun Modifier.innerPadding(start: Dp = 0.dp, top: Dp = 0.dp, end: Dp = 0.dp, bottom: Dp = 0.dp): Modifier + +/** + * See the KDoc of the overload with one [Dp] parameter for platform differences. + */ +@Stable +expect fun Modifier.innerPadding(horizontal: Dp = 0.dp, vertical: Dp = 0.dp): Modifier + +/** + * This delegates to the CSS `padding` property on JS DOM and adds the padding inside. + * For consistency on different platforms, please use it as the **last** modifier **after** the other modifiers such as [background] and [clickable]. + * See the KDoc of the [padding] overload with one [Dp] parameter for more information. + * @see outerPadding + */ +@Stable +expect fun Modifier.innerPadding(all: Dp): Modifier + +/** + * See the KDoc of the overload with one [Dp] parameter for platform differences. + */ +@Stable +expect fun Modifier.innerPadding(paddingValues: PaddingValues): Modifier + +/** + * See the KDoc of the overload with one [Dp] parameter for platform differences. + */ +@Stable +expect fun Modifier.absoluteInnerPadding(left: Dp = 0.dp, top: Dp = 0.dp, right: Dp = 0.dp, bottom: Dp = 0.dp): Modifier diff --git a/compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/foundation/layout/ext/OuterPadding.kt b/compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/foundation/layout/ext/OuterPadding.kt new file mode 100644 index 00000000..ffcb90f5 --- /dev/null +++ b/compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/foundation/layout/ext/OuterPadding.kt @@ -0,0 +1,43 @@ +package com.huanshankeji.compose.foundation.layout.ext + +import androidx.compose.runtime.Stable +import androidx.compose.ui.unit.Dp +import androidx.compose.ui.unit.dp +import com.huanshankeji.compose.foundation.background +import com.huanshankeji.compose.foundation.clickable +import com.huanshankeji.compose.foundation.layout.PaddingValues +import com.huanshankeji.compose.foundation.layout.padding +import com.huanshankeji.compose.ui.Modifier + +/** + * See the KDoc of the overload with one [Dp] parameter for platform differences. + */ +@Stable +expect fun Modifier.outerPadding(start: Dp = 0.dp, top: Dp = 0.dp, end: Dp = 0.dp, bottom: Dp = 0.dp): Modifier + +/** + * See the KDoc of the overload with one [Dp] parameter for platform differences. + */ +@Stable +expect fun Modifier.outerPadding(horizontal: Dp = 0.dp, vertical: Dp = 0.dp): Modifier + +/** + * This delegates to the CSS `margin` property on JS DOM and adds the padding outside. + * For consistency on different platforms, please use it as the **first** modifier **before** the other modifiers such as [background] and [clickable]. + * See the KDoc of the [padding] overload with one [Dp] parameter for more information. + * @see innerPadding + */ +@Stable +expect fun Modifier.outerPadding(all: Dp): Modifier + +/** + * See the KDoc of the overload with one [Dp] parameter for platform differences. + */ +@Stable +expect fun Modifier.outerPadding(paddingValues: PaddingValues): Modifier + +/** + * See the KDoc of the overload with one [Dp] parameter for platform differences. + */ +@Stable +expect fun Modifier.absoluteOuterPadding(left: Dp = 0.dp, top: Dp = 0.dp, right: Dp = 0.dp, bottom: Dp = 0.dp): Modifier diff --git a/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/Padding.js.kt b/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/Padding.js.kt index 933193d1..f099d0f5 100644 --- a/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/Padding.js.kt +++ b/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/Padding.js.kt @@ -3,40 +3,29 @@ package com.huanshankeji.compose.foundation.layout import androidx.compose.runtime.Immutable import androidx.compose.runtime.Stable import androidx.compose.ui.unit.Dp +import com.huanshankeji.compose.foundation.layout.ext.absoluteOuterPadding +import com.huanshankeji.compose.foundation.layout.ext.outerPadding import com.huanshankeji.compose.ui.Modifier -import com.huanshankeji.compose.ui.unit.toPx -import com.varabyte.kobweb.compose.ui.modifiers.margin -import com.varabyte.kobweb.compose.ui.modifiers.marginInline @Stable actual fun Modifier.padding(start: Dp, top: Dp, end: Dp, bottom: Dp): Modifier = - platformModify { - marginInline(start.toPx(), end.toPx()) - .margin { - top(top.toPx()) - bottom(bottom.toPx()) - } - } + outerPadding(start, top, end, bottom) @Stable actual fun Modifier.padding(horizontal: Dp, vertical: Dp): Modifier = - platformModify { margin(vertical.toPx(), horizontal.toPx()) } + outerPadding(horizontal, vertical) @Stable actual fun Modifier.padding(all: Dp): Modifier = - platformModify { margin(all.toPx()) } + outerPadding(all) @Stable actual fun Modifier.padding(paddingValues: PaddingValues): Modifier = - when (paddingValues) { - is PaddingValues.Absolute -> with(paddingValues) { absolutePadding(left, top, right, bottom) } - is PaddingValuesImpl -> with(paddingValues) { padding(start, top, end, bottom) } - else -> throw IllegalArgumentException(paddingValues.toString()) - } + outerPadding(paddingValues) @Stable actual fun Modifier.absolutePadding(left: Dp, top: Dp, right: Dp, bottom: Dp): Modifier = - platformModify { margin(top.toPx(), right.toPx(), bottom.toPx(), left.toPx()) } + absoluteOuterPadding(left, top, right, bottom) // copied and adapted from `androidx.compose.foundation.layout.Padding.kt` diff --git a/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/ext/InnerPadding.js.kt b/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/ext/InnerPadding.js.kt new file mode 100644 index 00000000..87955c59 --- /dev/null +++ b/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/ext/InnerPadding.js.kt @@ -0,0 +1,40 @@ +package com.huanshankeji.compose.foundation.layout.ext + +import androidx.compose.runtime.Stable +import androidx.compose.ui.unit.Dp +import com.huanshankeji.compose.foundation.layout.PaddingValues +import com.huanshankeji.compose.foundation.layout.PaddingValuesImpl +import com.huanshankeji.compose.ui.Modifier +import com.huanshankeji.compose.ui.unit.toPx +import com.varabyte.kobweb.compose.ui.modifiers.padding +import com.varabyte.kobweb.compose.ui.modifiers.paddingInline + +@Stable +actual fun Modifier.innerPadding(start: Dp, top: Dp, end: Dp, bottom: Dp): Modifier = + platformModify { + paddingInline(start.toPx(), end.toPx()) + .padding { + top(top.toPx()) + bottom(bottom.toPx()) + } + } + +@Stable +actual fun Modifier.innerPadding(horizontal: Dp, vertical: Dp): Modifier = + platformModify { padding(vertical.toPx(), horizontal.toPx()) } + +@Stable +actual fun Modifier.innerPadding(all: Dp): Modifier = + platformModify { padding(all.toPx()) } + +@Stable +actual fun Modifier.innerPadding(paddingValues: PaddingValues): Modifier = + when (paddingValues) { + is PaddingValues.Absolute -> with(paddingValues) { absoluteInnerPadding(left, top, right, bottom) } + is PaddingValuesImpl -> with(paddingValues) { innerPadding(start, top, end, bottom) } + else -> throw IllegalArgumentException(paddingValues.toString()) + } + +@Stable +actual fun Modifier.absoluteInnerPadding(left: Dp, top: Dp, right: Dp, bottom: Dp): Modifier = + platformModify { padding(top.toPx(), right.toPx(), bottom.toPx(), left.toPx()) } diff --git a/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/ext/OuterPadding.js.kt b/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/ext/OuterPadding.js.kt new file mode 100644 index 00000000..55a79422 --- /dev/null +++ b/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/ext/OuterPadding.js.kt @@ -0,0 +1,40 @@ +package com.huanshankeji.compose.foundation.layout.ext + +import androidx.compose.runtime.Stable +import androidx.compose.ui.unit.Dp +import com.huanshankeji.compose.foundation.layout.PaddingValues +import com.huanshankeji.compose.foundation.layout.PaddingValuesImpl +import com.huanshankeji.compose.ui.Modifier +import com.huanshankeji.compose.ui.unit.toPx +import com.varabyte.kobweb.compose.ui.modifiers.margin +import com.varabyte.kobweb.compose.ui.modifiers.marginInline + +@Stable +actual fun Modifier.outerPadding(start: Dp, top: Dp, end: Dp, bottom: Dp): Modifier = + platformModify { + marginInline(start.toPx(), end.toPx()) + .margin { + top(top.toPx()) + bottom(bottom.toPx()) + } + } + +@Stable +actual fun Modifier.outerPadding(horizontal: Dp, vertical: Dp): Modifier = + platformModify { margin(vertical.toPx(), horizontal.toPx()) } + +@Stable +actual fun Modifier.outerPadding(all: Dp): Modifier = + platformModify { margin(all.toPx()) } + +@Stable +actual fun Modifier.outerPadding(paddingValues: PaddingValues): Modifier = + when (paddingValues) { + is PaddingValues.Absolute -> with(paddingValues) { absoluteOuterPadding(left, top, right, bottom) } + is PaddingValuesImpl -> with(paddingValues) { outerPadding(start, top, end, bottom) } + else -> throw IllegalArgumentException(paddingValues.toString()) + } + +@Stable +actual fun Modifier.absoluteOuterPadding(left: Dp, top: Dp, right: Dp, bottom: Dp): Modifier = + platformModify { margin(top.toPx(), right.toPx(), bottom.toPx(), left.toPx()) } From ad04477802b1fa2ed449e4b162983b21ab3e4b78 Mon Sep 17 00:00:00 2001 From: Shreck Ye Date: Wed, 23 Oct 2024 17:50:15 +0800 Subject: [PATCH 21/85] Add the `VerticalScrollBox` and `HorizontalScrollBox` as alternatives to the `*Scroll` modifiers, update the demo with them to fix the issue of padding outside the scrollable part on JS DOM, and make some related improvements Related improvements: 1. extract some common JS DOM composables `KobwebBox` and `DivBox` 1. fix the `ReplaceWith`s in `@Deprecated` annotations of the `padding` modifiers (introduced in commit 0cab51c5c56204e027d1bc8547787ddf50892b21) 1. update the default `NavHost` `contentAlignment` parameters to `TopStart` to match the `androidx` ones Using `Center` seems a mistake caused by a bad merge in `androidx.compose`. See https://github.com/JetBrains/compose-multiplatform-core/blame/c93b73c3924ddc12370f32ca504dafb29f497260/navigation/navigation-compose/src/commonMain/kotlin/androidx/navigation/compose/NavHost.kt#L149 for more info. --- .../foundation/Scroll.androidxCommon.kt | 21 +++ .../huanshankeji/compose/foundation/Scroll.kt | 27 ++- .../compose/foundation/layout/Padding.kt | 28 ++- .../compose/foundation/Scroll.js.kt | 25 +++ .../compose/foundation/layout/Box.js.kt | 18 +- .../compose/foundation/layout/ext/Box.js.kt | 53 ++++++ .../androidx/navigation/compose/NavHost.kt | 4 +- .../huanshankeji/compose/material/demo/App.kt | 14 +- .../compose/material/demo/Common.kt | 5 +- .../compose/material/demo/Material2.kt | 177 +++++++++--------- .../compose/material/demo/Material3.kt | 8 +- 11 files changed, 258 insertions(+), 122 deletions(-) create mode 100644 compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/ext/Box.js.kt diff --git a/compose-multiplatform-common/src/androidxCommonMain/kotlin/com/huanshankeji/compose/foundation/Scroll.androidxCommon.kt b/compose-multiplatform-common/src/androidxCommonMain/kotlin/com/huanshankeji/compose/foundation/Scroll.androidxCommon.kt index 068fe97e..5fb67e58 100644 --- a/compose-multiplatform-common/src/androidxCommonMain/kotlin/com/huanshankeji/compose/foundation/Scroll.androidxCommon.kt +++ b/compose-multiplatform-common/src/androidxCommonMain/kotlin/com/huanshankeji/compose/foundation/Scroll.androidxCommon.kt @@ -4,6 +4,9 @@ import androidx.compose.foundation.horizontalScroll import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.verticalScroll import androidx.compose.runtime.Composable +import com.huanshankeji.compose.foundation.layout.Box +import com.huanshankeji.compose.foundation.layout.BoxScope +import com.huanshankeji.compose.ui.Alignment import com.huanshankeji.compose.ui.Modifier @Composable @@ -17,3 +20,21 @@ actual fun Modifier.verticalScroll(state: ScrollState): Modifier = actual fun Modifier.horizontalScroll(state: ScrollState): Modifier = platformModify { horizontalScroll(state) } + +@Composable +actual fun VerticalScrollBox( + boxModifier: Modifier, + contentModifier: Modifier, + contentAlignment: Alignment, + content: @Composable BoxScope.() -> Unit +) = + Box(boxModifier.verticalScroll(rememberScrollState()).then(contentModifier), contentAlignment, content) + +@Composable +actual fun HorizontalScrollBox( + boxModifier: Modifier, + contentModifier: Modifier, + contentAlignment: Alignment, + content: @Composable BoxScope.() -> Unit +) = + Box(boxModifier.horizontalScroll(rememberScrollState()).then(contentModifier), contentAlignment, content) diff --git a/compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/foundation/Scroll.kt b/compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/foundation/Scroll.kt index 226d3d5f..fd772413 100644 --- a/compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/foundation/Scroll.kt +++ b/compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/foundation/Scroll.kt @@ -2,6 +2,8 @@ package com.huanshankeji.compose.foundation import androidx.compose.runtime.Composable import androidx.compose.runtime.Stable +import com.huanshankeji.compose.foundation.layout.BoxScope +import com.huanshankeji.compose.ui.Alignment import com.huanshankeji.compose.ui.Modifier @Composable @@ -18,7 +20,9 @@ It seems `state` has to be achieved with `DisposableEffect` on JS which can not See https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop. */ /** - * Note that if the component is a layout, it applies to the target as a whole on `androidx` targets, but applies to its content on JS DOM. + * Note that if the component is a layout, for example a Material card, + * it applies to the target as a whole on `androidx` targets, but applies to its content on JS DOM. + * For consistency on different platforms, [VerticalScrollBox] is recommended over this modifier. */ expect fun Modifier.verticalScroll( state: ScrollState @@ -29,9 +33,24 @@ expect fun Modifier.verticalScroll( */ ): Modifier +/** + * For consistency on different platforms, [HorizontalScrollBox] is recommended over this modifier. + * @see verticalScroll + */ expect fun Modifier.horizontalScroll(state: ScrollState): Modifier -/* @Composable -expect fun VerticalScrollBox(content : @Composable () ->Unit) -*/ +expect fun VerticalScrollBox( + boxModifier: Modifier = Modifier, + contentModifier: Modifier = Modifier, + contentAlignment: Alignment = Alignment.TopStart, + content: @Composable BoxScope.() -> Unit +) + +@Composable +expect fun HorizontalScrollBox( + boxModifier: Modifier = Modifier, + contentModifier: Modifier = Modifier, + contentAlignment: Alignment = Alignment.TopStart, + content: @Composable BoxScope.() -> Unit +) diff --git a/compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/foundation/layout/Padding.kt b/compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/foundation/layout/Padding.kt index f1ebd0c8..abee1062 100644 --- a/compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/foundation/layout/Padding.kt +++ b/compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/foundation/layout/Padding.kt @@ -8,19 +8,29 @@ import com.huanshankeji.compose.foundation.layout.ext.innerPadding import com.huanshankeji.compose.foundation.layout.ext.outerPadding import com.huanshankeji.compose.ui.Modifier -private const val PADDING_DEPRECATED_MESSAGE = "Use `paddingFirst` or checkout out `paddingLast` instead." +private const val PADDING_DEPRECATED_MESSAGE = "Use `outerPadding` or checkout out `innerPadding` instead." + +private const val REPLACE_WITH_PACKAGE = "com.huanshankeji.compose.foundation.layout.ext" +private const val OUTER_PADDING_REPLACE_WITH_IMPORT = "$REPLACE_WITH_PACKAGE.outerPadding" +private const val ABSOLUTE_OUTER_PADDING_REPLACE_WITH_IMPORT = "$REPLACE_WITH_PACKAGE.absoluteOuterPadding" /** * See the KDoc of the overload with one [Dp] parameter for platform differences. */ -@Deprecated(PADDING_DEPRECATED_MESSAGE, ReplaceWith("this.paddingFirst(start, top, end, bottom)")) +@Deprecated( + PADDING_DEPRECATED_MESSAGE, + ReplaceWith("this.outerPadding(start, top, end, bottom)", OUTER_PADDING_REPLACE_WITH_IMPORT) +) @Stable expect fun Modifier.padding(start: Dp = 0.dp, top: Dp = 0.dp, end: Dp = 0.dp, bottom: Dp = 0.dp): Modifier /** * See the KDoc of the overload with one [Dp] parameter for platform differences. */ -@Deprecated(PADDING_DEPRECATED_MESSAGE, ReplaceWith("this.paddingFirst(horizontal, vertical)")) +@Deprecated( + PADDING_DEPRECATED_MESSAGE, + ReplaceWith("this.outerPadding(horizontal, vertical)", OUTER_PADDING_REPLACE_WITH_IMPORT) +) @Stable expect fun Modifier.padding(horizontal: Dp = 0.dp, vertical: Dp = 0.dp): Modifier @@ -31,21 +41,27 @@ expect fun Modifier.padding(horizontal: Dp = 0.dp, vertical: Dp = 0.dp): Modifie * @see outerPadding * @see innerPadding */ -@Deprecated(PADDING_DEPRECATED_MESSAGE, ReplaceWith("this.paddingFirst(all)")) +@Deprecated(PADDING_DEPRECATED_MESSAGE, ReplaceWith("this.outerPadding(all)", OUTER_PADDING_REPLACE_WITH_IMPORT)) @Stable expect fun Modifier.padding(all: Dp): Modifier /** * See the KDoc of the overload with one [Dp] parameter for platform differences. */ -@Deprecated(PADDING_DEPRECATED_MESSAGE, ReplaceWith("this.paddingFirst(paddingValues)")) +@Deprecated( + PADDING_DEPRECATED_MESSAGE, + ReplaceWith("this.outerPadding(paddingValues)", OUTER_PADDING_REPLACE_WITH_IMPORT) +) @Stable expect fun Modifier.padding(paddingValues: PaddingValues): Modifier /** * See the KDoc of the overload with one [Dp] parameter for platform differences. */ -@Deprecated(PADDING_DEPRECATED_MESSAGE, ReplaceWith("this.absolutePaddingFirst(left, top, right, bottom)")) +@Deprecated( + PADDING_DEPRECATED_MESSAGE, + ReplaceWith("this.absoluteOuterPadding(left, top, right, bottom)", ABSOLUTE_OUTER_PADDING_REPLACE_WITH_IMPORT) +) @Stable expect fun Modifier.absolutePadding(left: Dp = 0.dp, top: Dp = 0.dp, right: Dp = 0.dp, bottom: Dp = 0.dp): Modifier diff --git a/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/Scroll.js.kt b/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/Scroll.js.kt index 8bdd32b0..8251b5b8 100644 --- a/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/Scroll.js.kt +++ b/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/Scroll.js.kt @@ -4,6 +4,10 @@ import androidx.compose.runtime.Composable import androidx.compose.runtime.Stable import com.huanshankeji.compose.foundation.ext.css.horizontalScroll import com.huanshankeji.compose.foundation.ext.css.verticalScroll +import com.huanshankeji.compose.foundation.layout.Box +import com.huanshankeji.compose.foundation.layout.BoxScope +import com.huanshankeji.compose.foundation.layout.ext.KobwebBox +import com.huanshankeji.compose.ui.Alignment import com.huanshankeji.compose.ui.Modifier import com.huanshankeji.compose.ui.PlatformModifier import com.varabyte.kobweb.compose.ui.styleModifier @@ -32,3 +36,24 @@ actual fun Modifier.verticalScroll(state: ScrollState): Modifier = actual fun Modifier.horizontalScroll(state: ScrollState): Modifier = platformModify { horizontalScroll() } +@Composable +actual fun VerticalScrollBox( + boxModifier: Modifier, + contentModifier: Modifier, + contentAlignment: Alignment, + content: @Composable BoxScope.() -> Unit +) = + Box(boxModifier.verticalScroll(rememberScrollState())) { + KobwebBox(contentModifier, contentAlignment, content) + } + +@Composable +actual fun HorizontalScrollBox( + boxModifier: Modifier, + contentModifier: Modifier, + contentAlignment: Alignment, + content: @Composable BoxScope.() -> Unit +) = + Box(boxModifier.horizontalScroll(rememberScrollState())) { + KobwebBox(contentModifier, contentAlignment, content) + } diff --git a/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/Box.js.kt b/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/Box.js.kt index d0ff5de6..d4181be6 100644 --- a/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/Box.js.kt +++ b/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/Box.js.kt @@ -3,12 +3,13 @@ package com.huanshankeji.compose.foundation.layout import androidx.compose.runtime.Composable import androidx.compose.runtime.Immutable import androidx.compose.runtime.Stable +import com.huanshankeji.compose.foundation.layout.ext.KobwebBox import com.huanshankeji.compose.ui.Alignment import com.huanshankeji.compose.ui.Modifier import com.huanshankeji.compose.ui.PlatformModifier +import com.huanshankeji.compose.ui.toCommonModifier import com.huanshankeji.kobweb.compose.ui.modifiers.imitateAndroidxLayout import com.varabyte.kobweb.compose.foundation.layout.LayoutScopeMarker -import com.varabyte.kobweb.compose.foundation.layout.Box as PlatformBox import com.varabyte.kobweb.compose.foundation.layout.BoxScope as PlatformBoxScope @Composable @@ -16,17 +17,16 @@ actual fun Box( modifier: Modifier, contentAlignment: Alignment, content: @Composable BoxScope.() -> Unit -) { - AddKobwebComposeStyleSheet() - PlatformBox( - PlatformModifier.imitateAndroidxLayout().then(modifier.platformModifier), - contentAlignment.platformValue, - ) { BoxScope.Impl(this).content() } -} +) = + KobwebBox( + PlatformModifier.imitateAndroidxLayout().toCommonModifier().then(modifier), + contentAlignment, + content + ) @Composable actual fun Box(modifier: Modifier) = - PlatformBox(PlatformModifier.imitateAndroidxLayout().then(modifier.platformModifier)) + KobwebBox(PlatformModifier.imitateAndroidxLayout().then(modifier.platformModifier)) @LayoutScopeMarker @Immutable diff --git a/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/ext/Box.js.kt b/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/ext/Box.js.kt new file mode 100644 index 00000000..4609c153 --- /dev/null +++ b/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/ext/Box.js.kt @@ -0,0 +1,53 @@ +package com.huanshankeji.compose.foundation.layout.ext + +import androidx.compose.runtime.Composable +import com.huanshankeji.compose.foundation.layout.AddKobwebComposeStyleSheet +import com.huanshankeji.compose.foundation.layout.BoxScope +import com.huanshankeji.compose.ui.CommonModifier +import com.huanshankeji.compose.ui.PlatformModifier +import com.huanshankeji.kobweb.compose.ui.modifiers.imitateAndroidxLayout +import com.varabyte.kobweb.compose.dom.ElementRefScope +import com.varabyte.kobweb.compose.foundation.layout.Box +import com.varabyte.kobweb.compose.ui.toAttrs +import org.jetbrains.compose.web.dom.ContentBuilder +import org.jetbrains.compose.web.dom.Div +import org.w3c.dom.HTMLDivElement +import org.w3c.dom.HTMLElement +import com.huanshankeji.compose.foundation.layout.BoxScope as CommonBoxScope +import com.huanshankeji.compose.ui.Alignment as CommonAlignment +import com.varabyte.kobweb.compose.foundation.layout.BoxScope as PlatformBoxScope +import com.varabyte.kobweb.compose.ui.Alignment as PlatformAlignment + +/** + * Delegates to [Box] without [com.varabyte.kobweb.compose.ui.Modifier.imitateAndroidxLayout]. + */ +@Composable +fun KobwebBox( + modifier: PlatformModifier = PlatformModifier, + contentAlignment: PlatformAlignment = PlatformAlignment.TopStart, + ref: ElementRefScope? = null, + content: @Composable PlatformBoxScope.() -> Unit = {} +) { + AddKobwebComposeStyleSheet() + Box(modifier, contentAlignment, ref, content) +} + +@Composable +fun KobwebBox( + modifier: CommonModifier = CommonModifier, + contentAlignment: CommonAlignment, + content: @Composable CommonBoxScope.() -> Unit = {} +) = + KobwebBox(modifier.platformModifier, contentAlignment.platformValue) { + BoxScope.Impl(this).content() + } + +/** + * Delegates to [Div] without [com.varabyte.kobweb.compose.ui.Modifier.imitateAndroidxLayout]. + */ +@Composable +fun DivBox( + modifier: PlatformModifier = PlatformModifier, + content: ContentBuilder? = null +) = + Div(modifier.toAttrs(), content) diff --git a/compose-multiplatform-navigation/src/commonMain/kotlin/com/huanshankeji/androidx/navigation/compose/NavHost.kt b/compose-multiplatform-navigation/src/commonMain/kotlin/com/huanshankeji/androidx/navigation/compose/NavHost.kt index 26f334b6..4d63297d 100644 --- a/compose-multiplatform-navigation/src/commonMain/kotlin/com/huanshankeji/androidx/navigation/compose/NavHost.kt +++ b/compose-multiplatform-navigation/src/commonMain/kotlin/com/huanshankeji/androidx/navigation/compose/NavHost.kt @@ -12,7 +12,7 @@ expect fun NavHost( navController: NavHostController, startDestination: String, modifier: Modifier = Modifier, - contentAlignment: Alignment = Alignment.Center, + contentAlignment: Alignment = Alignment.TopStart, route: String? = null, builder: NavGraphBuilder.() -> Unit ) @@ -22,5 +22,5 @@ expect fun NavHost( navController: NavHostController, graph: NavGraph, modifier: Modifier = Modifier, - contentAlignment: Alignment = Alignment.Center, + contentAlignment: Alignment = Alignment.TopStart, ) diff --git a/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/App.kt b/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/App.kt index 0422fc7e..847b22c1 100644 --- a/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/App.kt +++ b/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/App.kt @@ -6,7 +6,12 @@ import androidx.navigation.NavHostController import com.huanshankeji.androidx.navigation.compose.NavHost import com.huanshankeji.androidx.navigation.compose.composable import com.huanshankeji.androidx.navigation.compose.rememberNavController -import com.huanshankeji.compose.foundation.layout.* +import com.huanshankeji.compose.foundation.layout.Arrangement +import com.huanshankeji.compose.foundation.layout.Box +import com.huanshankeji.compose.foundation.layout.Column +import com.huanshankeji.compose.foundation.layout.ext.fillMaxSizeStretch +import com.huanshankeji.compose.foundation.layout.ext.innerPadding +import com.huanshankeji.compose.foundation.layout.ext.outerPadding import com.huanshankeji.compose.material3.Button import com.huanshankeji.compose.material3.ext.TaglessText import com.huanshankeji.compose.ui.Alignment @@ -18,8 +23,9 @@ internal enum class Selection { val listSize = 160.dp -fun Modifier.contentPadding() = padding(16.dp) -val contentPaddingModifier = Modifier.contentPadding() +fun Modifier.outerContentPadding() = outerPadding(16.dp) +fun Modifier.innerContentPadding() = innerPadding(16.dp) +val contentPaddingModifier = Modifier.outerContentPadding() enum class Screen { Home, Common, Material2, Material3 @@ -39,7 +45,7 @@ fun App() { @Composable fun Home(navController: NavHostController) { - Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) { + Box(Modifier.fillMaxSizeStretch(), contentAlignment = Alignment.Center) { Column(verticalArrangement = Arrangement.spacedBy(16.dp)) { Button({ navController.navigate(Screen.Common.name) }) { TaglessText("Common") diff --git a/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Common.kt b/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Common.kt index b6acd483..2b211d32 100644 --- a/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Common.kt +++ b/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Common.kt @@ -7,7 +7,6 @@ import com.huanshankeji.compose.foundation.ext.outerBorder import com.huanshankeji.compose.foundation.ext.roundedCornerBackgroundAndOuterBorder import com.huanshankeji.compose.foundation.ext.roundedCornerOuterBorder import com.huanshankeji.compose.foundation.layout.* -import com.huanshankeji.compose.foundation.layout.ext.fillMaxWidthStretch import com.huanshankeji.compose.foundation.lazy.LazyColumn import com.huanshankeji.compose.foundation.lazy.LazyListScope import com.huanshankeji.compose.foundation.lazy.LazyRow @@ -17,9 +16,9 @@ import com.huanshankeji.compose.ui.Modifier import com.huanshankeji.compose.ui.graphics.Color @Composable -fun Common(modifier: Modifier = Modifier) { +fun Common(/*modifier: Modifier = Modifier*/) { Column( - modifier.fillMaxWidthStretch().verticalScroll(rememberScrollState()).contentPadding(), + Modifier.verticalScroll(rememberScrollState()).innerContentPadding(), Arrangement.spacedBy(16.dp) ) { BasicText("basic text 1") diff --git a/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Material2.kt b/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Material2.kt index a9cf168a..a51c207b 100644 --- a/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Material2.kt +++ b/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Material2.kt @@ -2,15 +2,14 @@ package com.huanshankeji.compose.material.demo import androidx.compose.runtime.* import androidx.compose.ui.unit.dp +import com.huanshankeji.compose.foundation.VerticalScrollBox import com.huanshankeji.compose.foundation.background import com.huanshankeji.compose.foundation.layout.* -import com.huanshankeji.compose.foundation.rememberScrollState import com.huanshankeji.compose.foundation.text.KeyboardActions import com.huanshankeji.compose.foundation.text.KeyboardOptions import com.huanshankeji.compose.foundation.text.input.ImeAction import com.huanshankeji.compose.foundation.text.input.KeyboardCapitalization import com.huanshankeji.compose.foundation.text.input.KeyboardType -import com.huanshankeji.compose.foundation.verticalScroll import com.huanshankeji.compose.material.icons.Icons import com.huanshankeji.compose.material.icons.filled.Add import com.huanshankeji.compose.material.icons.filled.Done @@ -28,7 +27,7 @@ import kotlinx.coroutines.launch import com.huanshankeji.compose.material2.ext.Button as ExtButton @Composable -fun Material2(modifier: Modifier = Modifier) { +fun Material2(/*modifier: Modifier = Modifier*/) { val snackbarHostState = remember { SnackbarHostState() } // It seems the modifier can't be set on `TopAppBarScaffold` or a box wrapping it TopAppBarScaffold({ @@ -41,107 +40,109 @@ fun Material2(modifier: Modifier = Modifier) { }, snackbarHost = { SnackbarHost(snackbarHostState) }) { - Card(modifier.verticalScroll(rememberScrollState()).contentPadding()) { - Column(contentPaddingModifier.background(Color(0xF8, 0xF8, 0xF8, 0xFF)), Arrangement.spacedBy(16.dp)) { - Text("Material text") + VerticalScrollBox { + Card(contentPaddingModifier) { + Column(contentPaddingModifier.background(Color(0xF8, 0xF8, 0xF8, 0xFF)), Arrangement.spacedBy(16.dp)) { + Text("Material text") - var count by remember { mutableStateOf(0) } - val coroutineScope = rememberCoroutineScope() - val onClick: () -> Unit = { - count++ - val count = count - coroutineScope.launch { - snackbarHostState.showSnackbar("Count incremented to $count", "action") + var count by remember { mutableStateOf(0) } + val coroutineScope = rememberCoroutineScope() + val onClick: () -> Unit = { + count++ + val count = count + coroutineScope.launch { + snackbarHostState.showSnackbar("Count incremented to $count", "action") + } } - } - val buttonContent: @Composable () -> Unit = { - TaglessText(count.toString()) - } - val rowScopeButtonContent: @Composable RowScope.() -> Unit = { buttonContent() } - - Row { - Button(onClick, content = rowScopeButtonContent) - OutlinedButton(onClick, content = rowScopeButtonContent) - TextButton(onClick, content = rowScopeButtonContent) - ExtButton(onClick) { - Label(count.toString()) + val buttonContent: @Composable () -> Unit = { + TaglessText(count.toString()) } - IconButton(onClick, icon = Icons.Default.Add, contentDescription = "increment count") - } + val rowScopeButtonContent: @Composable RowScope.() -> Unit = { buttonContent() } - val listModifier = Modifier.padding(16.dp).height(listSize) - List(listModifier) { - item { - Text("Ungrouped item") - } - items(count) { - Text("Ungrouped item $it/$count") + Row { + Button(onClick, content = rowScopeButtonContent) + OutlinedButton(onClick, content = rowScopeButtonContent) + TextButton(onClick, content = rowScopeButtonContent) + ExtButton(onClick) { + Label(count.toString()) + } + IconButton(onClick, icon = Icons.Default.Add, contentDescription = "increment count") } - group(headerContent = { - Text("Group title") - }) { + + val listModifier = Modifier.padding(16.dp).height(listSize) + List(listModifier) { item { - Text("Grouped item") + Text("Ungrouped item") } items(count) { - Text("Grouped item $it/$count") + Text("Ungrouped item $it/$count") + } + group(headerContent = { + Text("Group title") + }) { + item { + Text("Grouped item") + } + items(count) { + Text("Grouped item $it/$count") + } } } - } - Divider() - val secondaryText = "Secondary text" - List(listModifier) { - conventionalItem(content = ListItemComponents("Ungrouped item", secondaryText)) - conventionalItems(count) { - ListItemComponents("Ungrouped item $it/$count", secondaryText) - } - group(headerContent = { - Text("Group title") - }) { - conventionalItem(content = ListItemComponents("Grouped item", secondaryText)) + Divider() + val secondaryText = "Secondary text" + List(listModifier) { + conventionalItem(content = ListItemComponents("Ungrouped item", secondaryText)) conventionalItems(count) { - ListItemComponents("Grouped item $it/$count", secondaryText) + ListItemComponents("Ungrouped item $it/$count", secondaryText) + } + group(headerContent = { + Text("Group title") + }) { + conventionalItem(content = ListItemComponents("Grouped item", secondaryText)) + conventionalItems(count) { + ListItemComponents("Grouped item $it/$count", secondaryText) + } } } - } - var text by remember { mutableStateOf("") } - TextFieldWithMaterialIcons( - text, { text = it }, - label = "Demo text field", - leadingIcon = Icons.Default.Add, - trailingIcon = Icons.Default.Menu, - keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number), - singleLine = true - ) - OutlinedTextFieldWithMaterialIcons( - text, { text = it }, - label = "Demo text field", - leadingIcon = Icons.Default.Add, - trailingIcon = Icons.Default.Menu, - keyboardOptions = KeyboardOptions( - KeyboardCapitalization.Words, true, imeAction = ImeAction.Search - ), - keyboardActions = KeyboardActions { - println("keyboard actions with: $text") - }, - singleLine = true - ) - TextArea(text, { text = it }, label = "Demo text field", lines = 3) + var text by remember { mutableStateOf("") } + TextFieldWithMaterialIcons( + text, { text = it }, + label = "Demo text field", + leadingIcon = Icons.Default.Add, + trailingIcon = Icons.Default.Menu, + keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number), + singleLine = true + ) + OutlinedTextFieldWithMaterialIcons( + text, { text = it }, + label = "Demo text field", + leadingIcon = Icons.Default.Add, + trailingIcon = Icons.Default.Menu, + keyboardOptions = KeyboardOptions( + KeyboardCapitalization.Words, true, imeAction = ImeAction.Search + ), + keyboardActions = KeyboardActions { + println("keyboard actions with: $text") + }, + singleLine = true + ) + TextArea(text, { text = it }, label = "Demo text field", lines = 3) - var selected by remember { mutableStateOf(Selection.A) } - RadioGroupRow { - @Composable - fun RadioButtonRow(state: Selection) = - RadioRow(selected == state, state.toString(), { selected = state }) - Selection.entries.forEach { RadioButtonRow(it) } - } + var selected by remember { mutableStateOf(Selection.A) } + RadioGroupRow { + @Composable + fun RadioButtonRow(state: Selection) = + RadioRow(selected == state, state.toString(), { selected = state }) + Selection.entries.forEach { RadioButtonRow(it) } + } - Row { - var checked by remember { mutableStateOf(false) } - Checkbox(checked, { checked = it }) - Switch(checked, { checked = it }) - SwitchWithLabel(checked, { checked = it }, "Switch") + Row { + var checked by remember { mutableStateOf(false) } + Checkbox(checked, { checked = it }) + Switch(checked, { checked = it }) + SwitchWithLabel(checked, { checked = it }, "Switch") + } } } } diff --git a/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Material3.kt b/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Material3.kt index 01b9b771..a32c2d6e 100644 --- a/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Material3.kt +++ b/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Material3.kt @@ -4,7 +4,6 @@ import androidx.compose.runtime.* import androidx.compose.ui.unit.dp import com.huanshankeji.compose.ExtRecommendedApi import com.huanshankeji.compose.foundation.layout.* -import com.huanshankeji.compose.foundation.layout.ext.fillMaxWidthStretch import com.huanshankeji.compose.foundation.rememberScrollState import com.huanshankeji.compose.foundation.text.KeyboardActions import com.huanshankeji.compose.foundation.text.KeyboardOptions @@ -28,11 +27,8 @@ import com.huanshankeji.compose.ui.Modifier import com.huanshankeji.compose.material3.Button as RowScopeButton @Composable -fun Material3(modifier: Modifier = Modifier) { - Column( - modifier.fillMaxWidthStretch().verticalScroll(rememberScrollState()).contentPadding(), - Arrangement.spacedBy(16.dp) - ) { +fun Material3(/*modifier: Modifier = Modifier*/) { + Column(Modifier.verticalScroll(rememberScrollState()).innerContentPadding(), Arrangement.spacedBy(16.dp)) { var count by remember { mutableStateOf(0) } val onClick: () -> Unit = { count++ } val buttonContent: @Composable () -> Unit = { From 314f2f2629fd911d7f42b27314784c63d71c79f1 Mon Sep 17 00:00:00 2001 From: Shreck Ye Date: Wed, 23 Oct 2024 23:27:14 +0800 Subject: [PATCH 22/85] Fix a bug that the FAB gets scrolled up with the content in `TopAppBarScaffold`, and replace `*ScrollPlatformModifier`s with `imitateAndroidxLayout*ScrollPlatformModifier`s BTW --- .../ext/MatchPositionRelativeParentJsOnly.kt | 7 +++++++ .../huanshankeji/compose/foundation/Scroll.js.kt | 5 +++-- .../compose/foundation/lazy/LazyDsl.js.kt | 8 ++++---- .../compose/material2/ext/TopAppBarScaffold.js.kt | 15 +++++++-------- .../compose/material2/lazy/ext/LazyDsl.js.kt | 4 ++-- .../compose/material3/lazy/ext/List.js.kt | 4 ++-- .../compose/material/demo/Material2.kt | 2 ++ 7 files changed, 27 insertions(+), 18 deletions(-) diff --git a/compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/foundation/ext/MatchPositionRelativeParentJsOnly.kt b/compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/foundation/ext/MatchPositionRelativeParentJsOnly.kt index 88351667..29f54d15 100644 --- a/compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/foundation/ext/MatchPositionRelativeParentJsOnly.kt +++ b/compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/foundation/ext/MatchPositionRelativeParentJsOnly.kt @@ -2,4 +2,11 @@ package com.huanshankeji.compose.foundation.ext import com.huanshankeji.compose.ui.Modifier +/* +const val MATCH_POSITION_RELATIVE_PARENT_DEPRECATED_MESSAGE = + "This function's functionality is replaced by `imitateAndroidxLayout`." +*/ + + +//@Deprecated(MATCH_POSITION_RELATIVE_PARENT_DEPRECATED_MESSAGE) expect fun Modifier.matchPositionRelativeParentJsDom(): Modifier diff --git a/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/Scroll.js.kt b/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/Scroll.js.kt index 8251b5b8..f5ed946d 100644 --- a/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/Scroll.js.kt +++ b/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/Scroll.js.kt @@ -10,6 +10,7 @@ import com.huanshankeji.compose.foundation.layout.ext.KobwebBox import com.huanshankeji.compose.ui.Alignment import com.huanshankeji.compose.ui.Modifier import com.huanshankeji.compose.ui.PlatformModifier +import com.huanshankeji.kobweb.compose.ui.modifiers.imitateAndroidxLayout import com.varabyte.kobweb.compose.ui.styleModifier fun PlatformModifier.verticalScroll() = @@ -18,8 +19,8 @@ fun PlatformModifier.verticalScroll() = fun PlatformModifier.horizontalScroll() = styleModifier { horizontalScroll() } -val verticalScrollPlatformModifier = PlatformModifier.verticalScroll() -val horizontalScrollPlatformModifier = PlatformModifier.horizontalScroll() +val imitateAndroidxLayoutVerticalScrollPlatformModifier = PlatformModifier.imitateAndroidxLayout().verticalScroll() +val imitateAndroidxLayoutHorizontalScrollPlatformModifier = PlatformModifier.imitateAndroidxLayout().horizontalScroll() @Composable diff --git a/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/lazy/LazyDsl.js.kt b/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/lazy/LazyDsl.js.kt index 01d9253e..83413b51 100644 --- a/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/lazy/LazyDsl.js.kt +++ b/compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/lazy/LazyDsl.js.kt @@ -1,9 +1,9 @@ package com.huanshankeji.compose.foundation.lazy import androidx.compose.runtime.Composable -import com.huanshankeji.compose.foundation.horizontalScrollPlatformModifier +import com.huanshankeji.compose.foundation.imitateAndroidxLayoutHorizontalScrollPlatformModifier +import com.huanshankeji.compose.foundation.imitateAndroidxLayoutVerticalScrollPlatformModifier import com.huanshankeji.compose.foundation.layout.* -import com.huanshankeji.compose.foundation.verticalScrollPlatformModifier import com.huanshankeji.compose.runtime.DeferredComposableRunner import com.huanshankeji.compose.ui.Alignment import com.huanshankeji.compose.ui.Modifier @@ -63,7 +63,7 @@ actual fun LazyRow( content: LazyListScope.() -> Unit ) = Row( - commonLazyModifier(horizontalScrollPlatformModifier, contentPadding, modifier), + commonLazyModifier(imitateAndroidxLayoutHorizontalScrollPlatformModifier, contentPadding, modifier), horizontalArrangement, verticalAlignment ) { @@ -80,7 +80,7 @@ actual fun LazyColumn( content: LazyListScope.() -> Unit ) = Column( - commonLazyModifier(verticalScrollPlatformModifier, contentPadding, modifier), + commonLazyModifier(imitateAndroidxLayoutVerticalScrollPlatformModifier, contentPadding, modifier), verticalArrangement, horizontalAlignment ) { diff --git a/compose-multiplatform-material2/src/jsMain/kotlin/com/huanshankeji/compose/material2/ext/TopAppBarScaffold.js.kt b/compose-multiplatform-material2/src/jsMain/kotlin/com/huanshankeji/compose/material2/ext/TopAppBarScaffold.js.kt index 8bf3eb51..6e326d04 100644 --- a/compose-multiplatform-material2/src/jsMain/kotlin/com/huanshankeji/compose/material2/ext/TopAppBarScaffold.js.kt +++ b/compose-multiplatform-material2/src/jsMain/kotlin/com/huanshankeji/compose/material2/ext/TopAppBarScaffold.js.kt @@ -5,15 +5,13 @@ import com.huanshankeji.compose.contentDescription import com.huanshankeji.compose.foundation.ext.matchPositionRelativeParent import com.huanshankeji.compose.foundation.layout.Column import com.huanshankeji.compose.foundation.layout.PaddingValues +import com.huanshankeji.compose.foundation.layout.ext.fillMaxWidthStretch import com.huanshankeji.compose.foundation.layout.fillMaxSize -import com.huanshankeji.compose.foundation.layout.fillMaxWidth import com.huanshankeji.compose.material.icons.Icon import com.huanshankeji.compose.material2.icons.mdcIconWithStyle import com.huanshankeji.compose.ui.Modifier import com.huanshankeji.compose.ui.toAttrs -import com.varabyte.kobweb.compose.css.Overflow import com.varabyte.kobweb.compose.css.TextAlign -import com.varabyte.kobweb.compose.css.overflow import com.varabyte.kobweb.compose.css.textAlign import dev.petuska.kmdc.top.app.bar.* import org.jetbrains.compose.web.css.* @@ -121,26 +119,27 @@ actual fun TopAppBarScaffold( topAppBarModifier, navigationIcon, actions, - Modifier.weight(1f).fillMaxWidth() + Modifier.weight(1f).fillMaxWidthStretch() ) { + // The content gets hidden behind the top app bar if this div is not added. Div({ style { height(100.percent) - position(Position.Relative) + position(Position.Relative) // same issue as above if not added } }) { Div({ style { matchPositionRelativeParent() - overflow(Overflow.Auto) + //overflow(Overflow.Auto) // This seems not needed. TODO remove if confirmed to be not needed } }) { // see `ScaffoldLayoutWithMeasureFix` val innerPadding = PaddingValues() content(innerPadding) - - floatingActionButton?.let { fabWithPosition(it) } } + + floatingActionButton?.let { fabWithPosition(it) } } } diff --git a/compose-multiplatform-material2/src/jsMain/kotlin/com/huanshankeji/compose/material2/lazy/ext/LazyDsl.js.kt b/compose-multiplatform-material2/src/jsMain/kotlin/com/huanshankeji/compose/material2/lazy/ext/LazyDsl.js.kt index 522c9da3..14229dd7 100644 --- a/compose-multiplatform-material2/src/jsMain/kotlin/com/huanshankeji/compose/material2/lazy/ext/LazyDsl.js.kt +++ b/compose-multiplatform-material2/src/jsMain/kotlin/com/huanshankeji/compose/material2/lazy/ext/LazyDsl.js.kt @@ -1,7 +1,7 @@ package com.huanshankeji.compose.material2.lazy.ext import androidx.compose.runtime.Composable -import com.huanshankeji.compose.foundation.verticalScrollPlatformModifier +import com.huanshankeji.compose.foundation.imitateAndroidxLayoutVerticalScrollPlatformModifier import com.huanshankeji.compose.runtime.DeferredComposableRunner import com.huanshankeji.compose.ui.Modifier import com.varabyte.kobweb.compose.ui.toAttrs @@ -78,6 +78,6 @@ actual class HeaderScope(val headingElementScope: ElementScope Unit) = - MDCList(attrs = verticalScrollPlatformModifier.then(modifier.platformModifier).toAttrs()) { + MDCList(attrs = imitateAndroidxLayoutVerticalScrollPlatformModifier.then(modifier.platformModifier).toAttrs()) { ListScope(this).ComposableRun(content) } diff --git a/compose-multiplatform-material3/src/jsMain/kotlin/com/huanshankeji/compose/material3/lazy/ext/List.js.kt b/compose-multiplatform-material3/src/jsMain/kotlin/com/huanshankeji/compose/material3/lazy/ext/List.js.kt index 21098338..7edb1b97 100644 --- a/compose-multiplatform-material3/src/jsMain/kotlin/com/huanshankeji/compose/material3/lazy/ext/List.js.kt +++ b/compose-multiplatform-material3/src/jsMain/kotlin/com/huanshankeji/compose/material3/lazy/ext/List.js.kt @@ -1,7 +1,7 @@ package com.huanshankeji.compose.material3.lazy.ext import androidx.compose.runtime.Composable -import com.huanshankeji.compose.foundation.verticalScrollPlatformModifier +import com.huanshankeji.compose.foundation.imitateAndroidxLayoutVerticalScrollPlatformModifier import com.huanshankeji.compose.html.material3.MdList import com.huanshankeji.compose.html.material3.MdListItemScope import com.huanshankeji.compose.html.material3.MdListItemType @@ -95,6 +95,6 @@ actual fun List( modifier: Modifier, content: ListScope.() -> Unit ) = - MdList(verticalScrollPlatformModifier.then(modifier.platformModifier).toAttrs()) { + MdList(imitateAndroidxLayoutVerticalScrollPlatformModifier.then(modifier.platformModifier).toAttrs()) { ListScope(this).ComposableRun(content) } diff --git a/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Material2.kt b/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Material2.kt index a51c207b..e1b06d7e 100644 --- a/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Material2.kt +++ b/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Material2.kt @@ -39,6 +39,8 @@ fun Material2(/*modifier: Modifier = Modifier*/) { MaterialIconActionButton({}, icon = Icons.Default.Done, contentDescription = "done") }, snackbarHost = { SnackbarHost(snackbarHostState) + }, floatingActionButton = { + Text("FAB") // The Material 2 FAB is not added so this is a placeholder. }) { VerticalScrollBox { Card(contentPaddingModifier) { From 7178267191a2ffceb3220ccf5c5f679b1eb019a9 Mon Sep 17 00:00:00 2001 From: Shreck Ye Date: Wed, 23 Oct 2024 23:33:31 +0800 Subject: [PATCH 23/85] Update an issue link in README.md as it has been moved to YouTrack --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 5cfbc379..50de60de 100644 --- a/README.md +++ b/README.md @@ -141,7 +141,7 @@ Compose HTML / JS DOM. These APIs are highly experimental now. The navigation module currently supports a small subset of the Compose Navigation APIs, which does not support transition or animation on Compose HTML / JS DOM. These APIs are also highly experimental now. -See https://github.com/JetBrains/compose-multiplatform/issues/4966 for a bug to avoid. Also, ViewModel-related functions +See [CMP-4966](https://youtrack.jetbrains.com/issue/CMP-4966) for a bug to avoid. Also, ViewModel-related functions are not implemented yet on Compose HTML / JS DOM. ## Add the libraries to your dependency From a9def19fe2ae5b51efcb925412c2eb830166a989 Mon Sep 17 00:00:00 2001 From: Shreck Ye Date: Wed, 23 Oct 2024 23:56:45 +0800 Subject: [PATCH 24/85] Try moving the `snackbarHost` in `TopAppBarScaffold` to be above the bottom bar by putting it inside the `position: relative` `div` but it doesn't work Pass a `bottomBar` argument BTW. --- .../kotlin/com/huanshankeji/compose/material/demo/Material2.kt | 2 ++ 1 file changed, 2 insertions(+) diff --git a/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Material2.kt b/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Material2.kt index e1b06d7e..88902f9f 100644 --- a/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Material2.kt +++ b/demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Material2.kt @@ -37,6 +37,8 @@ fun Material2(/*modifier: Modifier = Modifier*/) { }, actions = { MaterialIconActionButton({}, icon = Icons.Default.Search, contentDescription = "search") MaterialIconActionButton({}, icon = Icons.Default.Done, contentDescription = "done") + }, bottomBar = { + Text("Bottom bar") // The Material 2 bottom bar is not added so this is a placeholder. }, snackbarHost = { SnackbarHost(snackbarHostState) }, floatingActionButton = { From 7001d7a9c66f8d4544cbd85d98f34a9a8698a1e1 Mon Sep 17 00:00:00 2001 From: Shreck Ye Date: Thu, 24 Oct 2024 01:31:00 +0800 Subject: [PATCH 25/85] Initially add the change log for v0.4.0 --- CHANGELOG.md | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 CHANGELOG.md diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 00000000..87bb6f6d --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,33 @@ +# Change log + +## v0.4.0 / 2024-10-24 + +* revamp Material 2 `TopAppBarScaffold` to take a bottom bar, a floating action bottom, and a snackbar host, and fix some of its display issues on JS DOM + * fix bugs that the action buttons don't show and their `onClick` callbacks are not passed on JS DOM +* add the Material 3 menu composables `DropdownMenu`, `DropdownMenuItem`, `ExposedDropdownMenuBox`, and `ExposedDropdownMenuWithTextField` +* add the Material 3 progress indicator composables `LinearProgressIndicator` and `CircularProgressIndicator` +* add the Material 2 `SnackbarHost` (the Material 3 snackbar is not available in Material Web yet) +* add `Arrangement.spacedBy` +* Move `LoadingState` here from [Compose HTML Material](https://github.com/huanshankeji/compose-html-material) +* add color parameters to the text composables +* rename `InlineText` to `TaglessText` +* add the `alpha` modifiers +* add a `hidden` modifier +* fix a bug in the Material 3 text fields on JS DOM that causes the caret to be reset to the start whenever the value changes if the `type` attribute is set +* initially support navigation +* initially support ViewModels which delegates to raw UI state on Compose HTML / JS DOM +* fix a bug that the Android demo app might crash and add the Android target explicitly for all modules +* add the `clickable` modifier and replace `onClick` with it +* add `RadioGroupColumn` and improve `RadioRow` on JS DOM +* add a platform-specific implementation for `com.huanshankeji.compose.material2.ext.IconButton` on JS DOM that's more idiomatic, and fix a bug that in some scenarios icons are not shown, by always importing "material-icons/iconfont/material-icons.css" +* add the `PaddingValues` type +* make multiline text fields work on JS DOM +* add an `isInteractiveJs` parameter to ListItemComponents +* add a `BoxWithConstraints` layout composable that's still buggy on JS DOM +* no longer publish the legacy module +* Add `flex-basis: 0` to the weight modifiers on JS DOM to be consistent with the `androidx.compose` behavior +* make the demo UI fridendly on mobile +* Split the `padding` modifiers into `outerPadding` and `innerPadding` +* add the `VerticalScrollBox` and `HorizontalScrollBox` composables as (better) alternatives to the `*Scroll` modifiers + +* bump Kotlin to 2.0.10, Compose Multiplatform to 1.7.0, Kobweb to 0.19.2, and our Compose HTML Material to 0.4.0 From e7ec48f220008bb748a8407bd38a42db9131796b Mon Sep 17 00:00:00 2001 From: Shreck Ye Date: Thu, 24 Oct 2024 10:33:02 +0800 Subject: [PATCH 26/85] Categorize the change log items, review them, and fix the inaccuracies --- CHANGELOG.md | 53 ++++++++++++++++++++++++++++++++++------------------ 1 file changed, 35 insertions(+), 18 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 87bb6f6d..0598f182 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,32 +2,49 @@ ## v0.4.0 / 2024-10-24 -* revamp Material 2 `TopAppBarScaffold` to take a bottom bar, a floating action bottom, and a snackbar host, and fix some of its display issues on JS DOM - * fix bugs that the action buttons don't show and their `onClick` callbacks are not passed on JS DOM -* add the Material 3 menu composables `DropdownMenu`, `DropdownMenuItem`, `ExposedDropdownMenuBox`, and `ExposedDropdownMenuWithTextField` -* add the Material 3 progress indicator composables `LinearProgressIndicator` and `CircularProgressIndicator` -* add the Material 2 `SnackbarHost` (the Material 3 snackbar is not available in Material Web yet) +* fix a bug that a dependent project might crash on Android and add the Android target explicitly for all modules +* no longer publish the legacy module +* bump Kotlin to 2.0.10, Compose Multiplatform to 1.7.0, Kobweb to 0.19.2, and our Compose HTML Material to 0.4.0 + +### Common + * add `Arrangement.spacedBy` * Move `LoadingState` here from [Compose HTML Material](https://github.com/huanshankeji/compose-html-material) * add color parameters to the text composables * rename `InlineText` to `TaglessText` * add the `alpha` modifiers * add a `hidden` modifier -* fix a bug in the Material 3 text fields on JS DOM that causes the caret to be reset to the start whenever the value changes if the `type` attribute is set -* initially support navigation -* initially support ViewModels which delegates to raw UI state on Compose HTML / JS DOM -* fix a bug that the Android demo app might crash and add the Android target explicitly for all modules * add the `clickable` modifier and replace `onClick` with it -* add `RadioGroupColumn` and improve `RadioRow` on JS DOM -* add a platform-specific implementation for `com.huanshankeji.compose.material2.ext.IconButton` on JS DOM that's more idiomatic, and fix a bug that in some scenarios icons are not shown, by always importing "material-icons/iconfont/material-icons.css" * add the `PaddingValues` type -* make multiline text fields work on JS DOM -* add an `isInteractiveJs` parameter to ListItemComponents * add a `BoxWithConstraints` layout composable that's still buggy on JS DOM -* no longer publish the legacy module -* Add `flex-basis: 0` to the weight modifiers on JS DOM to be consistent with the `androidx.compose` behavior -* make the demo UI fridendly on mobile -* Split the `padding` modifiers into `outerPadding` and `innerPadding` +* add `flex-basis: 0` to the weight modifiers on JS DOM to make them consistent with the `androidx.compose` behavior +* split the `padding` modifiers into `outerPadding` and `innerPadding` * add the `VerticalScrollBox` and `HorizontalScrollBox` composables as (better) alternatives to the `*Scroll` modifiers -* bump Kotlin to 2.0.10, Compose Multiplatform to 1.7.0, Kobweb to 0.19.2, and our Compose HTML Material to 0.4.0 +### Material 2 + +* revamp `TopAppBarScaffold` to take a bottom bar, a floating action bottom, and a snackbar host, and fix some of its display issues on JS DOM + * fix bugs that the action buttons don't show and their `onClick` callbacks are not passed on JS DOM +* add the `SnackbarHost` (the Material 3 snackbar is not available in Material Web yet) +* add `RadioGroupColumn` and improve `RadioRow` on JS DOM +* add a platform-specific implementation for `com.huanshankeji.compose.material2.ext.IconButton` on JS DOM that's more idiomatic, and fix a bug that in some scenarios icons are not shown, by always importing "material-icons/iconfont/material-icons.css" + +### Material 3 + +* add the menu composables `DropdownMenu`, `DropdownMenuItem`, `ExposedDropdownMenuBox`, and `ExposedDropdownMenuWithTextField` +* add the progress indicator composables `LinearProgressIndicator` and `CircularProgressIndicator` +* fix a bug in the text fields on JS DOM that causes the caret to be reset to the start whenever the value changes if the `type` attribute is set +* make multiline text fields work on JS DOM +* add an `isInteractiveJsDom` parameter to ListItemComponents + +### Navigtion + +* initially support navigation + +### ViewModl + +* initially support ViewModel which delegates to raw UI state on Compose HTML / JS DOM + +### Demo + +* make the demo UI fridendly on mobile From 62b6b1d46e8d323abb43eba338740b3a14d6b9ed Mon Sep 17 00:00:00 2001 From: Shreck Ye Date: Thu, 24 Oct 2024 17:55:11 +0800 Subject: [PATCH 27/85] Add the change log for some previous versions Content copied from: https://github.com/huanshankeji/compose-multiplatform-material/releases/tag/v0.2.0 and https://github.com/huanshankeji/compose-multiplatform-material/releases/tag/v0.3.0. --- CHANGELOG.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0598f182..c4e657c8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -48,3 +48,11 @@ ### Demo * make the demo UI fridendly on mobile + +## v0.3.0 / 2024-5-10 + +Support Material 3. See the Updated README.md for more details. + +## v0.2.0 / 2024-4-17 + +The project now depends on Kobweb Silk on Kotlin/JS (Compose HTML) and there is a universal multiplatform interface for `Modifier`, scopes, etc. akin to those in `androidx.compose`. Obselete code including `ModifierOrAttrsScope` is moved to a legacy module. From a4c2c9316be08a64425319f8579dc507f27ef156 Mon Sep 17 00:00:00 2001 From: Shreck Ye Date: Thu, 24 Oct 2024 18:11:23 +0800 Subject: [PATCH 28/85] Fix typos in the change log --- CHANGELOG.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c4e657c8..6ca9f898 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -37,17 +37,17 @@ * make multiline text fields work on JS DOM * add an `isInteractiveJsDom` parameter to ListItemComponents -### Navigtion +### Navigation * initially support navigation -### ViewModl +### ViewModel * initially support ViewModel which delegates to raw UI state on Compose HTML / JS DOM ### Demo -* make the demo UI fridendly on mobile +* make the demo UI friendly on mobile ## v0.3.0 / 2024-5-10 @@ -55,4 +55,4 @@ Support Material 3. See the Updated README.md for more details. ## v0.2.0 / 2024-4-17 -The project now depends on Kobweb Silk on Kotlin/JS (Compose HTML) and there is a universal multiplatform interface for `Modifier`, scopes, etc. akin to those in `androidx.compose`. Obselete code including `ModifierOrAttrsScope` is moved to a legacy module. +The project now depends on Kobweb Silk on Kotlin/JS (Compose HTML) and there is a universal multiplatform interface for `Modifier`, scopes, etc. akin to those in `androidx.compose`. Obsolete code including `ModifierOrAttrsScope` is moved to a legacy module. From 71265bd14e0aa676412f84fab1e0107998e69834 Mon Sep 17 00:00:00 2001 From: Shreck Ye Date: Fri, 25 Oct 2024 06:15:29 +0800 Subject: [PATCH 29/85] Comment out the Maven local repositories for Gradle `buildSrc` and projects so the build is always reproducible by others --- buildSrc/build.gradle.kts | 2 +- buildSrc/src/main/kotlin/common-conventions.gradle.kts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/buildSrc/build.gradle.kts b/buildSrc/build.gradle.kts index 5af5195f..5f62dd70 100644 --- a/buildSrc/build.gradle.kts +++ b/buildSrc/build.gradle.kts @@ -3,7 +3,7 @@ plugins { } repositories { - mavenLocal() // TODO comment out when not needed + //mavenLocal() // comment out when not needed gradlePluginPortal() google() mavenCentral() diff --git a/buildSrc/src/main/kotlin/common-conventions.gradle.kts b/buildSrc/src/main/kotlin/common-conventions.gradle.kts index e525ae45..de8d1d92 100644 --- a/buildSrc/src/main/kotlin/common-conventions.gradle.kts +++ b/buildSrc/src/main/kotlin/common-conventions.gradle.kts @@ -8,7 +8,7 @@ plugins { } repositories { - mavenLocal() + //mavenLocal() // commented out so the build is always reproducible by others // put back if needed when depending on a snapshot mavenCentral() google() maven("https://us-central1-maven.pkg.dev/varabyte-repos/public") // for Kobweb From 755a2593006cfd9f117793a11efd23f83eecc851 Mon Sep 17 00:00:00 2001 From: Shreck Ye Date: Fri, 25 Oct 2024 06:15:55 +0800 Subject: [PATCH 30/85] Bump the project version --- buildSrc/src/main/kotlin/VersionsAndDependencies.kt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/buildSrc/src/main/kotlin/VersionsAndDependencies.kt b/buildSrc/src/main/kotlin/VersionsAndDependencies.kt index 1dabdf34..43563b5e 100644 --- a/buildSrc/src/main/kotlin/VersionsAndDependencies.kt +++ b/buildSrc/src/main/kotlin/VersionsAndDependencies.kt @@ -1,7 +1,7 @@ import com.huanshankeji.CommonDependencies import org.jetbrains.compose.ComposeBuildConfig -val projectVersion = "0.4.0-SNAPSHOT" +val projectVersion = "0.4.1-SNAPSHOT" val commonDependencies = CommonDependencies() From 2f09b5be8f5db83ed8b3f5d08948e7cfa397b8ab Mon Sep 17 00:00:00 2001 From: Shreck Ye Date: Sat, 2 Nov 2024 16:03:29 +0800 Subject: [PATCH 31/85] Add the "Java with Gradle" GitHub Actions template without editing it yet --- .github/workflows/gradle.yml | 67 ++++++++++++++++++++++++++++++++++++ 1 file changed, 67 insertions(+) create mode 100644 .github/workflows/gradle.yml diff --git a/.github/workflows/gradle.yml b/.github/workflows/gradle.yml new file mode 100644 index 00000000..87d5ecb5 --- /dev/null +++ b/.github/workflows/gradle.yml @@ -0,0 +1,67 @@ +# This workflow uses actions that are not certified by GitHub. +# They are provided by a third-party and are governed by +# separate terms of service, privacy policy, and support +# documentation. +# This workflow will build a Java project with Gradle and cache/restore any dependencies to improve the workflow execution time +# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-java-with-gradle + +name: Java CI with Gradle + +on: + push: + branches: [ "main" ] + pull_request: + branches: [ "main" ] + +jobs: + build: + + runs-on: ubuntu-latest + permissions: + contents: read + + steps: + - uses: actions/checkout@v4 + - name: Set up JDK 17 + uses: actions/setup-java@v4 + with: + java-version: '17' + distribution: 'temurin' + + # Configure Gradle for optimal use in GitHub Actions, including caching of downloaded dependencies. + # See: https://github.com/gradle/actions/blob/main/setup-gradle/README.md + - name: Setup Gradle + uses: gradle/actions/setup-gradle@af1da67850ed9a4cedd57bfd976089dd991e2582 # v4.0.0 + + - name: Build with Gradle Wrapper + run: ./gradlew build + + # NOTE: The Gradle Wrapper is the default and recommended way to run Gradle (https://docs.gradle.org/current/userguide/gradle_wrapper.html). + # If your project does not have the Gradle Wrapper configured, you can use the following configuration to run Gradle with a specified version. + # + # - name: Setup Gradle + # uses: gradle/actions/setup-gradle@af1da67850ed9a4cedd57bfd976089dd991e2582 # v4.0.0 + # with: + # gradle-version: '8.9' + # + # - name: Build with Gradle 8.9 + # run: gradle build + + dependency-submission: + + runs-on: ubuntu-latest + permissions: + contents: write + + steps: + - uses: actions/checkout@v4 + - name: Set up JDK 17 + uses: actions/setup-java@v4 + with: + java-version: '17' + distribution: 'temurin' + + # Generates and submits a dependency graph, enabling Dependabot Alerts for all project dependencies. + # See: https://github.com/gradle/actions/blob/main/dependency-submission/README.md + - name: Generate and submit dependency graph + uses: gradle/actions/dependency-submission@af1da67850ed9a4cedd57bfd976089dd991e2582 # v4.0.0 From a57a6080f5bb0e300a82c7d639d0bc18b69be409 Mon Sep 17 00:00:00 2001 From: Shreck Ye Date: Sat, 2 Nov 2024 16:33:11 +0800 Subject: [PATCH 32/85] Update the workflow file to run on all branches, all OSs, use JDK 21, run "check" instead of "build", and use gradle/actions of a the latest release version --- .github/workflows/gradle.yml | 39 ++++++++++++------------------------ 1 file changed, 13 insertions(+), 26 deletions(-) diff --git a/.github/workflows/gradle.yml b/.github/workflows/gradle.yml index 87d5ecb5..f51890d0 100644 --- a/.github/workflows/gradle.yml +++ b/.github/workflows/gradle.yml @@ -9,59 +9,46 @@ name: Java CI with Gradle on: push: - branches: [ "main" ] + branches: [ "*" ] pull_request: - branches: [ "main" ] + branches: [ "*" ] jobs: - build: + check: - runs-on: ubuntu-latest + runs-on: ubuntu-latest, macos-latest, windows-latest permissions: contents: read steps: - uses: actions/checkout@v4 - - name: Set up JDK 17 + - name: Set up JDK 21 uses: actions/setup-java@v4 with: - java-version: '17' + java-version: '21' distribution: 'temurin' - # Configure Gradle for optimal use in GitHub Actions, including caching of downloaded dependencies. - # See: https://github.com/gradle/actions/blob/main/setup-gradle/README.md - name: Setup Gradle - uses: gradle/actions/setup-gradle@af1da67850ed9a4cedd57bfd976089dd991e2582 # v4.0.0 + uses: gradle/actions/setup-gradle@v4 - - name: Build with Gradle Wrapper - run: ./gradlew build - - # NOTE: The Gradle Wrapper is the default and recommended way to run Gradle (https://docs.gradle.org/current/userguide/gradle_wrapper.html). - # If your project does not have the Gradle Wrapper configured, you can use the following configuration to run Gradle with a specified version. - # - # - name: Setup Gradle - # uses: gradle/actions/setup-gradle@af1da67850ed9a4cedd57bfd976089dd991e2582 # v4.0.0 - # with: - # gradle-version: '8.9' - # - # - name: Build with Gradle 8.9 - # run: gradle build + - name: Check with Gradle Wrapper + run: ./gradlew check dependency-submission: - runs-on: ubuntu-latest + runs-on: ubuntu-latest, macos-latest, windows-latest permissions: contents: write steps: - uses: actions/checkout@v4 - - name: Set up JDK 17 + - name: Set up JDK 21 uses: actions/setup-java@v4 with: - java-version: '17' + java-version: '21' distribution: 'temurin' # Generates and submits a dependency graph, enabling Dependabot Alerts for all project dependencies. # See: https://github.com/gradle/actions/blob/main/dependency-submission/README.md - name: Generate and submit dependency graph - uses: gradle/actions/dependency-submission@af1da67850ed9a4cedd57bfd976089dd991e2582 # v4.0.0 + uses: gradle/actions/dependency-submission@v4 From 31dd23d82d14738d80cd2d416666375e09e2e839 Mon Sep 17 00:00:00 2001 From: Shreck Ye Date: Sat, 2 Nov 2024 16:43:38 +0800 Subject: [PATCH 33/85] Remove comments in the workflow and rename it --- .github/workflows/{gradle.yml => ci.yml} | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) rename .github/workflows/{gradle.yml => ci.yml} (57%) diff --git a/.github/workflows/gradle.yml b/.github/workflows/ci.yml similarity index 57% rename from .github/workflows/gradle.yml rename to .github/workflows/ci.yml index f51890d0..a351b905 100644 --- a/.github/workflows/gradle.yml +++ b/.github/workflows/ci.yml @@ -1,11 +1,4 @@ -# This workflow uses actions that are not certified by GitHub. -# They are provided by a third-party and are governed by -# separate terms of service, privacy policy, and support -# documentation. -# This workflow will build a Java project with Gradle and cache/restore any dependencies to improve the workflow execution time -# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-java-with-gradle - -name: Java CI with Gradle +name: CI on: push: @@ -48,7 +41,5 @@ jobs: java-version: '21' distribution: 'temurin' - # Generates and submits a dependency graph, enabling Dependabot Alerts for all project dependencies. - # See: https://github.com/gradle/actions/blob/main/dependency-submission/README.md - name: Generate and submit dependency graph uses: gradle/actions/dependency-submission@v4 From f1de59ab1fbb30256bda4b446d9353476eaec275 Mon Sep 17 00:00:00 2001 From: Shreck Ye Date: Sat, 2 Nov 2024 17:17:33 +0800 Subject: [PATCH 34/85] Add the GitHub Actions "GitHub Pages Jekyll" workflow template without editing it first From https://github.com/huanshankeji/compose-multiplatform-material/settings/pages. --- .github/workflows/jekyll-gh-pages.yml | 51 +++++++++++++++++++++++++++ 1 file changed, 51 insertions(+) create mode 100644 .github/workflows/jekyll-gh-pages.yml diff --git a/.github/workflows/jekyll-gh-pages.yml b/.github/workflows/jekyll-gh-pages.yml new file mode 100644 index 00000000..e31d81c5 --- /dev/null +++ b/.github/workflows/jekyll-gh-pages.yml @@ -0,0 +1,51 @@ +# Sample workflow for building and deploying a Jekyll site to GitHub Pages +name: Deploy Jekyll with GitHub Pages dependencies preinstalled + +on: + # Runs on pushes targeting the default branch + push: + branches: ["main"] + + # Allows you to run this workflow manually from the Actions tab + workflow_dispatch: + +# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages +permissions: + contents: read + pages: write + id-token: write + +# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. +# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. +concurrency: + group: "pages" + cancel-in-progress: false + +jobs: + # Build job + build: + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + - name: Setup Pages + uses: actions/configure-pages@v5 + - name: Build with Jekyll + uses: actions/jekyll-build-pages@v1 + with: + source: ./ + destination: ./_site + - name: Upload artifact + uses: actions/upload-pages-artifact@v3 + + # Deployment job + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + needs: build + steps: + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 From bd53c1da29694032de5ebee4cb5a9cd2caa637bc Mon Sep 17 00:00:00 2001 From: Shreck Ye Date: Sat, 2 Nov 2024 17:40:00 +0800 Subject: [PATCH 35/85] Update "jekyll-gh-pages.yml" partially and rename it --- .../workflows/{jekyll-gh-pages.yml => demo-gh-pages.yml} | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) rename .github/workflows/{jekyll-gh-pages.yml => demo-gh-pages.yml} (85%) diff --git a/.github/workflows/jekyll-gh-pages.yml b/.github/workflows/demo-gh-pages.yml similarity index 85% rename from .github/workflows/jekyll-gh-pages.yml rename to .github/workflows/demo-gh-pages.yml index e31d81c5..4a58f0fc 100644 --- a/.github/workflows/jekyll-gh-pages.yml +++ b/.github/workflows/demo-gh-pages.yml @@ -1,10 +1,10 @@ -# Sample workflow for building and deploying a Jekyll site to GitHub Pages -name: Deploy Jekyll with GitHub Pages dependencies preinstalled +name: Deploy the demo to GitHub Pages on: - # Runs on pushes targeting the default branch push: - branches: ["main"] + branches: [ "*" ] # TODO for testing purposes now, change to "release" + pull_request: + branches: [ "*" ] # TODO for testing purposes now, change to "release" # Allows you to run this workflow manually from the Actions tab workflow_dispatch: From fdb1ae74dce473829accd241441fcbad47ca9d50 Mon Sep 17 00:00:00 2001 From: Shreck Ye Date: Sat, 2 Nov 2024 17:51:25 +0800 Subject: [PATCH 36/85] Fix the runner list format in the workflow file --- .github/workflows/ci.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index a351b905..64479e65 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -9,7 +9,7 @@ on: jobs: check: - runs-on: ubuntu-latest, macos-latest, windows-latest + runs-on: [ubuntu-latest, macos-latest, windows-latest] permissions: contents: read From 38a04f033cd048ba580967e3060e76771975f633 Mon Sep 17 00:00:00 2001 From: Shreck Ye Date: Sat, 2 Nov 2024 19:03:13 +0800 Subject: [PATCH 37/85] Fix the multiple runner format The fix in the previous commit doesn't work. --- .github/workflows/ci.yml | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 64479e65..eef29adc 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -9,7 +9,10 @@ on: jobs: check: - runs-on: [ubuntu-latest, macos-latest, windows-latest] + strategy: + matrix: + os: [ubuntu-latest, macos-latest, windows-latest] + runs-on: ${{ matrix.os }} permissions: contents: read @@ -29,7 +32,10 @@ jobs: dependency-submission: - runs-on: ubuntu-latest, macos-latest, windows-latest + strategy: + matrix: + os: [ubuntu-latest, macos-latest, windows-latest] + runs-on: ${{ matrix.os }} permissions: contents: write From 2d6e8c5b77328d4f149db44af5b036b6b08d59e3 Mon Sep 17 00:00:00 2001 From: Shreck Ye Date: Sat, 2 Nov 2024 19:12:45 +0800 Subject: [PATCH 38/85] Downgrade the JDK to 8 to be consistent with the JVM toolchain version and fix the Gradle build failure --- .github/workflows/ci.yml | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index eef29adc..aec0f842 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -18,10 +18,10 @@ jobs: steps: - uses: actions/checkout@v4 - - name: Set up JDK 21 + - name: Set up JDK 8 uses: actions/setup-java@v4 with: - java-version: '21' + java-version: '8' distribution: 'temurin' - name: Setup Gradle @@ -41,10 +41,10 @@ jobs: steps: - uses: actions/checkout@v4 - - name: Set up JDK 21 + - name: Set up JDK 8 uses: actions/setup-java@v4 with: - java-version: '21' + java-version: '8' distribution: 'temurin' - name: Generate and submit dependency graph From 1e4a7112979a88d776161107e9eb148523661a17 Mon Sep 17 00:00:00 2001 From: Shreck Ye Date: Mon, 4 Nov 2024 04:44:33 +0800 Subject: [PATCH 39/85] Add a "side by side" site distribution to the demo and publish it to GitHub Pages A corresponding commit: https://github.com/huanshankeji/gradle-common/commit/642cdead586a475c63c24975341783d2ef6ae9f8 --- .github/workflows/demo-gh-pages.yml | 18 +++++++--- demo/build.gradle.kts | 16 +++++++++ demo/side-by-side-site/index.html | 45 ++++++++++++++++++++++++ demo/src/jsMain/resources/index.html | 2 +- demo/src/wasmJsMain/resources/index.html | 2 +- 5 files changed, 77 insertions(+), 6 deletions(-) create mode 100644 demo/side-by-side-site/index.html diff --git a/.github/workflows/demo-gh-pages.yml b/.github/workflows/demo-gh-pages.yml index 4a58f0fc..5eabfece 100644 --- a/.github/workflows/demo-gh-pages.yml +++ b/.github/workflows/demo-gh-pages.yml @@ -30,13 +30,23 @@ jobs: uses: actions/checkout@v4 - name: Setup Pages uses: actions/configure-pages@v5 - - name: Build with Jekyll - uses: actions/jekyll-build-pages@v1 + + - name: Set up JDK 8 + uses: actions/setup-java@v4 with: - source: ./ - destination: ./_site + java-version: "8" + distribution: "temurin" + + - name: Setup Gradle + uses: gradle/actions/setup-gradle@v4 + + - name: Build the distribution with Gradle Wrapper + run: ./gradlew :demo:sideBySideBrowserDistribution + - name: Upload artifact uses: actions/upload-pages-artifact@v3 + with: + path: demo/build/dist/sideBySide/productionExecutable/ # Deployment job deploy: diff --git a/demo/build.gradle.kts b/demo/build.gradle.kts index 227ec7e9..df384517 100644 --- a/demo/build.gradle.kts +++ b/demo/build.gradle.kts @@ -119,3 +119,19 @@ android { debugImplementation(compose.uiTooling) } } + +val jsBrowserDistribution by tasks.getting(Copy::class) +val wasmJsBrowserDistribution by tasks.getting(Copy::class) + +tasks.register("sideBySideBrowserDistribution") { + group = "kotlin browser" + + into(layout.buildDirectory.dir("dist/sideBySide/productionExecutable")) + from(jsBrowserDistribution) { + into("js-dom") + } + from(wasmJsBrowserDistribution) { + into("wasm-js-canvas") + } + from(projectDir.resolve("side-by-side-site")) +} diff --git a/demo/side-by-side-site/index.html b/demo/side-by-side-site/index.html new file mode 100644 index 00000000..2d8e6940 --- /dev/null +++ b/demo/side-by-side-site/index.html @@ -0,0 +1,45 @@ + + + + + + + Side by side - Compose Multiplatform Material demo + + + + + +
+
+

JS DOM / Compose HTML

+ +
+
+

Wasm JS canvas / androidx.compose

+ +
+
+ + + \ No newline at end of file diff --git a/demo/src/jsMain/resources/index.html b/demo/src/jsMain/resources/index.html index 4687f55c..989921be 100644 --- a/demo/src/jsMain/resources/index.html +++ b/demo/src/jsMain/resources/index.html @@ -4,7 +4,7 @@ - Compose Multiplatform Material demo + JS DOM - Compose Multiplatform Material demo + + + + +

box-sizing with margin

+

In .inner-div, either remove margin or set width to -webkit-fill-available. + +
+

+
+
+
+ + + + +``` + * * See the KDoc of the [padding] overload with one [Dp] parameter for more information. * @see innerPadding */ diff --git a/common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/ext/Size.js.kt b/common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/ext/Size.js.kt index 97087748..a987e1c3 100644 --- a/common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/ext/Size.js.kt +++ b/common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/ext/Size.js.kt @@ -10,7 +10,7 @@ import com.varabyte.kobweb.compose.ui.styleModifier import org.jetbrains.compose.web.css.StyleScope private const val CSS_STRETCH_VALUE = "stretch" // This does not work on Chrome. -private const val CSS_WEBKIT_STRETCH_VALUE = "-webkit-fill-available" +private const val CSS_WEBKIT_STRETCH_VALUE = "-webkit-fill-available" // This actually works on FireFox too as tested. private const val CSS_MOZ_STRETCH_VALUE = "-moz-available" val cssWidthStretchValueBrowserDependent = when (browser) {