From b41344ef41a1d689b701f0f99129f4b42128d9ce Mon Sep 17 00:00:00 2001 From: Oleksandr Karpovich Date: Wed, 28 Jul 2021 17:50:20 +0200 Subject: [PATCH] Web/update tutorials and examples (#942) * web: Update tutorials (to use 0.5.0-build270) * web: Update examples (to use 0.5.0-build270 and kotlin 1.5.21) Co-authored-by: Oleksandr Karpovich --- .../falling_balls_with_web/build.gradle.kts | 4 +- .../buildSrc/buildSrc/src/main/kotlin/Deps.kt | 4 +- .../kotlin/example/todo/web/Components.kt | 4 +- examples/web-compose-bird/build.gradle.kts | 2 +- examples/web-getting-started/build.gradle.kts | 4 +- examples/web-with-react/build.gradle.kts | 4 +- examples/web_landing/build.gradle.kts | 4 +- .../content/AboutComposeWebLibsSection.kt | 4 +- .../com/sample/content/CodeSamplesSwitcher.kt | 12 ++-- .../kotlin/com/sample/content/CodeSnippets.kt | 2 +- .../kotlin/com/sample/content/IntroSection.kt | 6 +- .../kotlin/com/sample/style/Stylesheet.kt | 14 ++--- .../jsMain/kotlin/com/sample/style/WtCard.kt | 22 ++++---- .../jsMain/kotlin/com/sample/style/WtCol.kt | 3 +- .../kotlin/com/sample/style/WtContainer.kt | 8 +-- .../kotlin/com/sample/style/WtDisplay.kt | 6 +- .../kotlin/com/sample/style/WtOffest.kt | 8 +-- .../jsMain/kotlin/com/sample/style/WtRow.kt | 4 +- .../kotlin/com/sample/style/WtSection.kt | 8 +-- .../jsMain/kotlin/com/sample/style/WtText.kt | 56 +++++++++---------- templates/web-template/build.gradle.kts | 4 +- tutorials/Web/Building_UI/README.md | 6 +- tutorials/Web/Events_Handling/README.md | 26 ++++----- tutorials/Web/Getting_Started/README.md | 6 +- tutorials/Web/README.md | 2 +- tutorials/Web/Style_Dsl/README.md | 34 +++++++++-- web/gradle.properties | 4 +- 27 files changed, 140 insertions(+), 121 deletions(-) diff --git a/examples/falling_balls_with_web/build.gradle.kts b/examples/falling_balls_with_web/build.gradle.kts index bb91a8d17f..1f61ef1466 100644 --- a/examples/falling_balls_with_web/build.gradle.kts +++ b/examples/falling_balls_with_web/build.gradle.kts @@ -2,8 +2,8 @@ import org.jetbrains.compose.compose import org.jetbrains.compose.desktop.application.dsl.TargetFormat plugins { - kotlin("multiplatform") version "1.5.10" - id("org.jetbrains.compose") version "0.5.0-build235" + kotlin("multiplatform") version "1.5.21" + id("org.jetbrains.compose") version "0.5.0-build270" } version = "1.0-SNAPSHOT" diff --git a/examples/todoapp/buildSrc/buildSrc/src/main/kotlin/Deps.kt b/examples/todoapp/buildSrc/buildSrc/src/main/kotlin/Deps.kt index 594f333827..557533198e 100644 --- a/examples/todoapp/buildSrc/buildSrc/src/main/kotlin/Deps.kt +++ b/examples/todoapp/buildSrc/buildSrc/src/main/kotlin/Deps.kt @@ -3,7 +3,7 @@ object Deps { object JetBrains { object Kotlin { // __KOTLIN_COMPOSE_VERSION__ - private const val VERSION = "1.5.10" + private const val VERSION = "1.5.21" const val gradlePlugin = "org.jetbrains.kotlin:kotlin-gradle-plugin:$VERSION" const val testCommon = "org.jetbrains.kotlin:kotlin-test-common:$VERSION" const val testJunit = "org.jetbrains.kotlin:kotlin-test-junit:$VERSION" @@ -13,7 +13,7 @@ object Deps { object Compose { // __LATEST_COMPOSE_RELEASE_VERSION__ - private const val VERSION = "0.5.0-build235" + private const val VERSION = "0.5.0-build270" const val gradlePlugin = "org.jetbrains.compose:compose-gradle-plugin:$VERSION" } } diff --git a/examples/todoapp/web/src/jsMain/kotlin/example/todo/web/Components.kt b/examples/todoapp/web/src/jsMain/kotlin/example/todo/web/Components.kt index e4dedb27cc..7db4874b18 100644 --- a/examples/todoapp/web/src/jsMain/kotlin/example/todo/web/Components.kt +++ b/examples/todoapp/web/src/jsMain/kotlin/example/todo/web/Components.kt @@ -43,7 +43,7 @@ fun MaterialCheckbox( attrs = { classes("filled-in") if (checked) checked() - onCheckboxInput { onCheckedChange(it.checked) } + onChange { onCheckedChange(it.value) } } ) @@ -85,7 +85,7 @@ fun MaterialTextArea( attrs = { id("text_area_add_todo") classes("materialize-textarea") - onTextInput { onTextChanged(it.inputValue) } + onInput { onTextChanged(it.value) } style { width(100.percent) height(100.percent) diff --git a/examples/web-compose-bird/build.gradle.kts b/examples/web-compose-bird/build.gradle.kts index 821321b27c..3c27cb5e45 100644 --- a/examples/web-compose-bird/build.gradle.kts +++ b/examples/web-compose-bird/build.gradle.kts @@ -1,7 +1,7 @@ // Add compose gradle plugin plugins { kotlin("multiplatform") version "1.5.21" - id("org.jetbrains.compose") version "0.5.0-build262" + id("org.jetbrains.compose") version "0.5.0-build270" } group = "com.theapache64.composebird" version = "1.0.0-alpha01" diff --git a/examples/web-getting-started/build.gradle.kts b/examples/web-getting-started/build.gradle.kts index e4da7cc0ed..042c67327f 100644 --- a/examples/web-getting-started/build.gradle.kts +++ b/examples/web-getting-started/build.gradle.kts @@ -1,6 +1,6 @@ plugins { - kotlin("multiplatform") version "1.5.10" - id("org.jetbrains.compose") version "0.5.0-build235" + kotlin("multiplatform") version "1.5.21" + id("org.jetbrains.compose") version "0.5.0-build270" } repositories { diff --git a/examples/web-with-react/build.gradle.kts b/examples/web-with-react/build.gradle.kts index 1a108cd64f..34b34c468d 100644 --- a/examples/web-with-react/build.gradle.kts +++ b/examples/web-with-react/build.gradle.kts @@ -1,6 +1,6 @@ plugins { - kotlin("multiplatform") version "1.5.10" - id("org.jetbrains.compose") version "0.5.0-build235" + kotlin("multiplatform") version "1.5.21" + id("org.jetbrains.compose") version "0.5.0-build270" } repositories { diff --git a/examples/web_landing/build.gradle.kts b/examples/web_landing/build.gradle.kts index d5785e87e6..903f66afea 100644 --- a/examples/web_landing/build.gradle.kts +++ b/examples/web_landing/build.gradle.kts @@ -1,6 +1,6 @@ plugins { - kotlin("multiplatform") version "1.5.10" - id("org.jetbrains.compose") version "0.5.0-build235" + kotlin("multiplatform") version "1.5.21" + id("org.jetbrains.compose") version "0.5.0-build270" } repositories { diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt index c2daa1f94f..cc5d810eb0 100644 --- a/examples/web_landing/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt +++ b/examples/web_landing/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt @@ -84,7 +84,7 @@ private fun CardWithList(card: CardWithListPresentation) { Ul(attrs = { classes(WtTexts.wtText2) }) { - card.list.forEachIndexed { ix, it -> + card.list.forEachIndexed { _, it -> Li({ style { property("padding-top", 24.px) @@ -93,4 +93,4 @@ private fun CardWithList(card: CardWithListPresentation) { } } } -} \ No newline at end of file +} diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSamplesSwitcher.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSamplesSwitcher.kt index e2f40d6a7d..89d907dd27 100644 --- a/examples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSamplesSwitcher.kt +++ b/examples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSamplesSwitcher.kt @@ -15,7 +15,7 @@ import org.jetbrains.compose.web.dom.Text import com.sample.style.AppStylesheet import org.jetbrains.compose.web.attributes.value -private object SwitcherVariables : CSSVariables { +private object SwitcherVariables { val labelWidth by variable() val labelPadding by variable() } @@ -23,7 +23,7 @@ private object SwitcherVariables : CSSVariables { object SwitcherStylesheet : StyleSheet(AppStylesheet) { val boxed by style { - media(maxWidth(640.px)) { + media(mediaMaxWidth(640.px)) { self style { SwitcherVariables.labelWidth(48.px) SwitcherVariables.labelPadding(5.px) @@ -44,7 +44,7 @@ object SwitcherStylesheet : StyleSheet(AppStylesheet) { color(Color("transparent")) borderRadius(20.px, 20.px, 20.px) } - color("#aaa") + color(Color("#aaa")) } border { @@ -66,7 +66,7 @@ object SwitcherStylesheet : StyleSheet(AppStylesheet) { color(Color("#167dff")) borderRadius(20.px, 20.px, 20.px) } - color("#000") + color(Color("#000")) } } } @@ -82,9 +82,9 @@ fun CodeSampleSwitcher(count: Int, current: Int, onSelect: (Int) -> Unit) { value("snippet$ix") id("snippet$ix") if (current == ix) checked() - onRadioInput { onSelect(ix) } + onChange { onSelect(ix) } }) Label(forId = "snippet$ix") { Text("${ix + 1}") } } } -} \ No newline at end of file +} diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt index 0a74c3fdbb..35111abca0 100644 --- a/examples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt +++ b/examples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt @@ -236,7 +236,7 @@ private fun TitledCodeSample(title: String, code: String) { Div({ classes(WtOffsets.wtTopOffset24) style { - backgroundColor(Color.RGBA(39, 40, 44, 0.05)) + backgroundColor(rgba(39, 40, 44, 0.05)) borderRadius(8.px, 8.px, 8.px) property("padding", "12px 16px") } diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/content/IntroSection.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/content/IntroSection.kt index c5228a7a6d..e76f4206c3 100644 --- a/examples/web_landing/src/jsMain/kotlin/com/sample/content/IntroSection.kt +++ b/examples/web_landing/src/jsMain/kotlin/com/sample/content/IntroSection.kt @@ -121,7 +121,7 @@ private fun IntroCodeSample() { Div({ style { marginTop(24.px) - backgroundColor(Color.RGBA(39, 40, 44, 0.05)) + backgroundColor(rgba(39, 40, 44, 0.05)) borderRadius(8.px) property("font-family", "'JetBrains Mono', monospace") } @@ -149,7 +149,7 @@ private fun IntroCodeSample() { style { height(1.px) border(width = 0.px) - backgroundColor(Color.RGBA(39, 40, 44, 0.15)) + backgroundColor(rgba(39, 40, 44, 0.15)) } }) @@ -220,4 +220,4 @@ private fun ComposeWebStatusMessage() { } } } -} \ No newline at end of file +} diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/style/Stylesheet.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/style/Stylesheet.kt index 3c9605cbe1..0450ebd6a2 100644 --- a/examples/web_landing/src/jsMain/kotlin/com/sample/style/Stylesheet.kt +++ b/examples/web_landing/src/jsMain/kotlin/com/sample/style/Stylesheet.kt @@ -3,9 +3,9 @@ package com.sample.style import org.jetbrains.compose.web.css.* import org.jetbrains.compose.web.css.selectors.CSSSelector -object AppCSSVariables : CSSVariables { - val wtColorGreyLight by variable() - val wtColorGreyDark by variable() +object AppCSSVariables { + val wtColorGreyLight by variable() + val wtColorGreyDark by variable() val wtOffsetTopUnit by variable() val wtHorizontalLayoutGutter by variable() @@ -39,11 +39,11 @@ object AppStylesheet : StyleSheet() { top((-32).px) marginLeft(8.px) fontSize(15.px) - backgroundColor(Color.RGBA(39, 40, 44, .05)) - color(Color.RGBA(39,40,44,.7)) + backgroundColor(rgba(39, 40, 44, .05)) + color(rgba(39,40,44,.7)) borderRadius(4.px, 4.px, 4.px) - media(maxWidth(640.px)) { + media(mediaMaxWidth(640.px)) { self style { top((-16).px) } @@ -66,7 +66,7 @@ object AppStylesheet : StyleSheet() { margin(0.px) } - media(maxWidth(640.px)) { + media(mediaMaxWidth(640.px)) { CSSSelector.Universal style { AppCSSVariables.wtOffsetTopUnit(16.px) AppCSSVariables.wtFlowUnit(16.px) diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtCard.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtCard.kt index b603796b05..7c39c9e39a 100644 --- a/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtCard.kt +++ b/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtCard.kt @@ -10,19 +10,19 @@ object WtCards : StyleSheet(AppStylesheet) { property("min-height", 0) property("box-sizing", "border-box") } - + val wtCardThemeLight by style { - border(color = Color.RGBA(39,40,44,.2)) - color("#27282c") - backgroundColor("white") + border(color = rgba(39,40,44,.2)) + color(Color("#27282c")) + backgroundColor(Color("white")) } val wtCardThemeDark by style { - backgroundColor(Color.RGBA(255, 255, 255, 0.05)) - color(Color.RGBA(255, 255, 255, 0.6)) + backgroundColor(rgba(255, 255, 255, 0.05)) + color(rgba(255, 255, 255, 0.6)) border(0.px) } - + val wtCardSection by style { position(Position.Relative) property("overflow", "auto") @@ -31,19 +31,19 @@ object WtCards : StyleSheet(AppStylesheet) { property("box-sizing", "border-box") property("padding", "24px 32px") - media(maxWidth(640.px)) { + media(mediaMaxWidth(640.px)) { self style { padding(16.px) } } } - + val wtVerticalFlex by style { display(DisplayStyle.Flex) flexDirection(FlexDirection.Column) alignItems(AlignItems.FlexStart) } - + val wtVerticalFlexGrow by style { flexGrow(1) property("max-width", 100.percent) } -} \ No newline at end of file +} diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtCol.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtCol.kt index 525a11018f..6be3f12ab6 100644 --- a/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtCol.kt +++ b/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtCol.kt @@ -9,6 +9,7 @@ import org.jetbrains.compose.web.css.maxWidth import org.jetbrains.compose.web.css.media import org.jetbrains.compose.web.css.percent import org.jetbrains.compose.web.css.px +import org.jetbrains.compose.web.css.mediaMaxWidth import org.jetbrains.compose.web.css.selectors.CSSSelector fun GenericStyleSheetBuilder.mediaMaxWidth( @@ -16,7 +17,7 @@ fun GenericStyleSheetBuilder.mediaMaxWidth( cssSelector: CSSSelector, rulesBuild: TBuilder.() -> Unit ) { - media(maxWidth(value)) { + media(mediaMaxWidth(value)) { cssSelector style rulesBuild } } diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtContainer.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtContainer.kt index 78bbb890a7..187cf346e9 100644 --- a/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtContainer.kt +++ b/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtContainer.kt @@ -11,7 +11,7 @@ object WtContainer : StyleSheet(AppStylesheet) { property("padding-right", 22.px) property("max-width", 1276.px) - media(maxWidth(640.px)) { + media(mediaMaxWidth(640.px)) { self style { property("max-width", 100.percent) property("padding-left", 16.px) @@ -19,7 +19,7 @@ object WtContainer : StyleSheet(AppStylesheet) { } } - media(maxWidth(1276.px)) { + media(mediaMaxWidth(1276.px)) { self style { property("max-width", 996.px) property("padding-left", 22.px) @@ -27,7 +27,7 @@ object WtContainer : StyleSheet(AppStylesheet) { } } - media(maxWidth(1000.px)) { + media(mediaMaxWidth(1000.px)) { self style { property("max-width", 100.percent) property("padding-left", 22.px) @@ -35,4 +35,4 @@ object WtContainer : StyleSheet(AppStylesheet) { } } } -} \ No newline at end of file +} diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtDisplay.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtDisplay.kt index 8868c2099f..2930f6f395 100644 --- a/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtDisplay.kt +++ b/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtDisplay.kt @@ -8,7 +8,7 @@ object WtDisplay : StyleSheet(AppStylesheet) { } val wtDisplayMdBlock by style { - media(maxWidth(1000.px)) { + media(mediaMaxWidth(1000.px)) { self style { display(DisplayStyle.Block) } @@ -16,10 +16,10 @@ object WtDisplay : StyleSheet(AppStylesheet) { } val wtDisplayMdNone by style { - media(maxWidth(1000.px)) { + media(mediaMaxWidth(1000.px)) { self style { display(DisplayStyle.None) } } } -} \ No newline at end of file +} diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtOffest.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtOffest.kt index 1f47befae9..ba70d247c0 100644 --- a/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtOffest.kt +++ b/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtOffest.kt @@ -22,9 +22,9 @@ object WtOffsets : StyleSheet(AppStylesheet) { val wtTopOffset48 by style { marginTop(48.px) } - + val wtTopOffsetSm12 by style { - media(maxWidth(640.px)) { + media(mediaMaxWidth(640.px)) { self style { marginTop(12.px) } @@ -32,10 +32,10 @@ object WtOffsets : StyleSheet(AppStylesheet) { } val wtTopOffsetSm24 by style { - media(maxWidth(640.px)) { + media(mediaMaxWidth(640.px)) { self style { marginTop(24.px) } } } -} \ No newline at end of file +} diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtRow.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtRow.kt index cbca28aabc..bc6dc626dc 100644 --- a/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtRow.kt +++ b/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtRow.kt @@ -23,7 +23,7 @@ object WtRows : StyleSheet(AppStylesheet) { val wtRowSizeM by style { AppCSSVariables.wtHorizontalLayoutGutter(16.px) - media(maxWidth(640.px)) { + media(mediaMaxWidth(640.px)) { self style { AppCSSVariables.wtHorizontalLayoutGutter(8.px) } @@ -39,4 +39,4 @@ object WtRows : StyleSheet(AppStylesheet) { alignItems(AlignItems.Center) } } -} \ No newline at end of file +} diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtSection.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtSection.kt index 9ff4a403d6..93580a690a 100644 --- a/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtSection.kt +++ b/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtSection.kt @@ -12,16 +12,16 @@ object WtSections : StyleSheet(AppStylesheet) { propertyName = "padding-bottom", value = "calc(4*${AppCSSVariables.wtOffsetTopUnit.value(24.px)})" ) - backgroundColor("#fff") + backgroundColor(Color("#fff")) } val wtSectionBgGrayLight by style { - backgroundColor("#f4f4f4") + backgroundColor(Color("#f4f4f4")) backgroundColor(AppCSSVariables.wtColorGreyLight.value()) } val wtSectionBgGrayDark by style { - backgroundColor("#323236") + backgroundColor(Color("#323236")) backgroundColor(AppCSSVariables.wtColorGreyDark.value()) } -} \ No newline at end of file +} diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtText.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtText.kt index ded73e36c7..90a1410b2b 100644 --- a/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtText.kt +++ b/examples/web_landing/src/jsMain/kotlin/com/sample/style/WtText.kt @@ -6,7 +6,7 @@ import org.jetbrains.compose.web.css.selectors.hover object WtTexts : StyleSheet(AppStylesheet) { val wtHero by style { - color("#27282c") + color(Color("#27282c")) fontSize(60.px) property("font-size", AppCSSVariables.wtHeroFontSize.value(60.px)) property("letter-spacing", (-1.5).px) @@ -14,7 +14,7 @@ object WtTexts : StyleSheet(AppStylesheet) { property("line-height", 64.px) property("line-height", AppCSSVariables.wtHeroLineHeight.value(64.px)) - media(maxWidth(640.px)) { + media(mediaMaxWidth(640.px)) { self style { AppCSSVariables.wtHeroFontSize(42.px) AppCSSVariables.wtHeroLineHeight(48.px) @@ -28,7 +28,7 @@ object WtTexts : StyleSheet(AppStylesheet) { } val wtSubtitle2 by style { - color("#27282c") + color(Color("#27282c")) fontSize(28.px) property("font-size", AppCSSVariables.wtSubtitle2FontSize.value(28.px)) property("letter-spacing", "normal") @@ -36,7 +36,7 @@ object WtTexts : StyleSheet(AppStylesheet) { property("line-height", 40.px) property("line-height", AppCSSVariables.wtSubtitle2LineHeight.value(40.px)) - media(maxWidth(640.px)) { + media(mediaMaxWidth(640.px)) { self style { AppCSSVariables.wtSubtitle2FontSize(24.px) AppCSSVariables.wtSubtitle2LineHeight(32.px) @@ -50,7 +50,7 @@ object WtTexts : StyleSheet(AppStylesheet) { } val wtText1 by style { - color(Color.RGBA(39, 40, 44, .7)) + color(rgba(39, 40, 44, .7)) fontSize(18.px) property("letter-spacing", "normal") property("font-weight", 400) @@ -63,11 +63,11 @@ object WtTexts : StyleSheet(AppStylesheet) { } val wtText1ThemeDark by style { - color(Color.RGBA(255, 255, 255, 0.6)) + color(rgba(255, 255, 255, 0.6)) } val wtText2 by style { - color(Color.RGBA(39, 40, 44, .7)) + color(rgba(39, 40, 44, .7)) fontSize(15.px) property("letter-spacing", "normal") property("font-weight", 400) @@ -80,7 +80,7 @@ object WtTexts : StyleSheet(AppStylesheet) { } val wtText3 by style { - color(Color.RGBA(39, 40, 44, .7)) + color(rgba(39, 40, 44, .7)) fontSize(12.px) property("letter-spacing", "normal") property("font-weight", 400) @@ -93,21 +93,21 @@ object WtTexts : StyleSheet(AppStylesheet) { } val wtTextPale by style { - color(Color.RGBA(255, 255, 255, 0.30)) + color(rgba(255, 255, 255, 0.30)) } val wtText2ThemeDark by style { - color(Color.RGBA(255, 255, 255, 0.6)) + color(rgba(255, 255, 255, 0.6)) } val wtText3ThemeDark by style { - color(Color.RGBA(255, 255, 255, 0.6)) + color(rgba(255, 255, 255, 0.6)) } val wtLink by style { property("border-bottom", "1px solid transparent") property("text-decoration", "none") - color("#167dff") + color(Color("#167dff")) hover(self) style { property("border-bottom-color", "#167dff") @@ -115,7 +115,7 @@ object WtTexts : StyleSheet(AppStylesheet) { } val wtH2 by style { - color("#27282c") + color(Color("#27282c")) fontSize(31.px) property("font-size", AppCSSVariables.wtH2FontSize.value(31.px)) property("letter-spacing", (-.5).px) @@ -123,7 +123,7 @@ object WtTexts : StyleSheet(AppStylesheet) { property("line-height", 40.px) property("line-height", 40.px) - media(maxWidth(640.px)) { + media(mediaMaxWidth(640.px)) { self style { AppCSSVariables.wtH2FontSize(24.px) AppCSSVariables.wtH2LineHeight(32.px) @@ -137,11 +137,11 @@ object WtTexts : StyleSheet(AppStylesheet) { } val wtH2ThemeDark by style { - color("#fff") + color(Color("#fff")) } val wtH3 by style { - color("#27282c") + color(Color("#27282c")) fontSize(21.px) property("font-size", AppCSSVariables.wtH3FontSize.value(20.px)) property("letter-spacing", "normal") @@ -156,12 +156,12 @@ object WtTexts : StyleSheet(AppStylesheet) { } val wtH3ThemeDark by style { - color("#fff") + color(Color("#fff")) } val wtButton by style { - color("white") - backgroundColor("#167dff") + color(Color("white")) + backgroundColor(Color("#167dff")) fontSize(15.px) display(DisplayStyle.InlineBlock) property("text-decoration", "none") @@ -172,7 +172,7 @@ object WtTexts : StyleSheet(AppStylesheet) { property("width", "fit-content") hover(self) style { - backgroundColor(Color.RGBA(22, 125, 255, .8)) + backgroundColor(rgba(22, 125, 255, .8)) } } @@ -186,16 +186,16 @@ object WtTexts : StyleSheet(AppStylesheet) { property("outline", "none") hover(self) style { - backgroundColor(Color.RGBA(255, 255, 255, 0.1)) + backgroundColor(rgba(255, 255, 255, 0.1)) } } val wtButtonContrast by style { - color("white") - backgroundColor("#27282c") + color(Color("white")) + backgroundColor(Color("#27282c")) hover(self) style { - backgroundColor(Color.RGBA(39, 40, 44, .7)) + backgroundColor(rgba(39, 40, 44, .7)) } } @@ -203,19 +203,19 @@ object WtTexts : StyleSheet(AppStylesheet) { property("margin-right", 16.px) marginLeft(16.px) padding(12.px) - backgroundColor("transparent") + backgroundColor(Color("transparent")) display(DisplayStyle.LegacyInlineFlex) hover(self) style { - backgroundColor(Color.RGBA(255, 255, 255, 0.1)) + backgroundColor(rgba(255, 255, 255, 0.1)) property("border-radius", "24px") } - media(maxWidth(640.px)) { + media(mediaMaxWidth(640.px)) { self style { property("margin-right", 8.px) property("margin-left", 8.px) } } } -} \ No newline at end of file +} diff --git a/templates/web-template/build.gradle.kts b/templates/web-template/build.gradle.kts index bff80b4248..4cd02ceb0f 100644 --- a/templates/web-template/build.gradle.kts +++ b/templates/web-template/build.gradle.kts @@ -3,9 +3,9 @@ import org.jetbrains.compose.desktop.application.dsl.TargetFormat plugins { // __KOTLIN_COMPOSE_VERSION__ - kotlin("multiplatform") version "1.5.10" + kotlin("multiplatform") version "1.5.21" // __LATEST_COMPOSE_RELEASE_VERSION__ - id("org.jetbrains.compose") version ("0.5.0-build235") + id("org.jetbrains.compose") version ("0.5.0-build270") } repositories { diff --git a/tutorials/Web/Building_UI/README.md b/tutorials/Web/Building_UI/README.md index 367d72b3cd..72f4d06a95 100644 --- a/tutorials/Web/Building_UI/README.md +++ b/tutorials/Web/Building_UI/README.md @@ -1,6 +1,6 @@ # Building the UI with Compose Web -**The API is experimental, and breaking changes can be expected** +**The API is not finalized, and breaking changes can be expected** ## Introduction @@ -62,7 +62,7 @@ If you want to apply styles to text, it needs to be wrapped in a container with ``` kotlin Span( - attrs = { style { color("red") } } // inline style + attrs = { style { color(Color.red) } } // inline style ) { Text("Red text") } @@ -202,7 +202,7 @@ fun main() { Text("Arbitrary text") Span({ - style { color("red") } // inline style + style { color(Color.red) } // inline style }) { Text("Red text") } diff --git a/tutorials/Web/Events_Handling/README.md b/tutorials/Web/Events_Handling/README.md index c857fc364e..60fed77606 100644 --- a/tutorials/Web/Events_Handling/README.md +++ b/tutorials/Web/Events_Handling/README.md @@ -1,6 +1,6 @@ # Events handling in Compose Web -**The API is experimental, and breaking changes can be expected** +**The API is not finalized, and breaking changes can be expected** You can add event listeners in the `attrs` block: @@ -8,11 +8,11 @@ You can add event listeners in the `attrs` block: ``` kotlin Button( attrs = { - onClick { wrappedMouseEvent -> - // wrappedMouseEvent is of `WrappedMouseEvent` type - println("button clicked at ${wrappedMouseEvent.movementX}, ${wrappedMouseEvent.movementY}") + onClick { event -> + // event is of `SyntheticMouseEvent` type + println("button clicked at ${event.movementX}, ${event.movementY}") - val nativeEvent = wrappedMouseEvent.nativeEvent // [MouseEvent](https://developer.mozilla.org/en/docs/Web/API/MouseEvent) + val nativeEvent = event.nativeEvent // [MouseEvent](https://developer.mozilla.org/en/docs/Web/API/MouseEvent) } } ) { @@ -37,22 +37,19 @@ TextArea( #### Other event handlers -For events that don't have their own configuration functions in the `attrs` block, you can use `addEventListener` with the `name` of the event, `options`, and an pass an `eventListener` which receives a `WrappedEvent`. In this example, we're defining the behavior of a `Form` element when it triggers the `submit` event: +For events that don't have their own configuration functions in the `attrs` block, you can use `addEventListener` with the `name` of the event, `options`, and an pass an `eventListener` which receives a `SyntheticEvent`. In this example, we're defining the behavior of a `Form` element when it triggers the `submit` event: ``` kotlin Form(attrs = { this.addEventListener("submit") { console.log("Hello, Submit!") - it.nativeEvent.preventDefault() + it.preventDefault() } }) ``` -Your event handlers receive wrapped events that inherit from `GenericWrappedEvent`, which also provides access to the underlying `nativeEvent` – the actual event created by JS runtime - -https://developer.mozilla.org/en-US/docs/Web/API/Event - -There are more event listeners supported out of a box. We plan to add the documentation for them later on. In the meantime, you can find all supported event listeners in the [source code](https://github.com/JetBrains/androidx/blob/compose-web-main/compose/web/src/jsMain/kotlin/androidx/compose/web/attributes/EventsListenerBuilder.kt). +There are more event listeners supported out of a box. We plan to add the documentation for them later on. In the meantime, you can find all supported event listeners in the [source code](https://github.com/JetBrains/compose-jb/blob/master/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/EventsListenerBuilder.kt). ### Runnable example @@ -67,11 +64,8 @@ fun main() { renderComposable(rootElementId = "root") { Button( attrs = { - onClick { wrappedMouseEvent -> - // wrappedMouseEvent is of `WrappedMouseEvent` type - println("button clicked at ${wrappedMouseEvent.movementX}, ${wrappedMouseEvent.movementY}") - - val nativeEvent = wrappedMouseEvent.nativeEvent + onClick { event -> + println("button clicked at ${event.movementX}, ${event.movementY}") } } ) { diff --git a/tutorials/Web/Getting_Started/README.md b/tutorials/Web/Getting_Started/README.md index ae8a9d43c8..df77d7010d 100644 --- a/tutorials/Web/Getting_Started/README.md +++ b/tutorials/Web/Getting_Started/README.md @@ -1,6 +1,6 @@ # Getting Started With Compose for Web -**The API is experimental, and breaking changes can be expected** +**The API is not finalized, and breaking changes can be expected** ## Introduction @@ -42,8 +42,8 @@ pluginManagement { ``` kotlin // Add compose gradle plugin plugins { - kotlin("multiplatform") version "1.5.10" - id("org.jetbrains.compose") version "0.5.0-build228" + kotlin("multiplatform") version "1.5.21" + id("org.jetbrains.compose") version "0.5.0-build270" } // Add maven repositories diff --git a/tutorials/Web/README.md b/tutorials/Web/README.md index 4deaa1e73a..b0795d75c9 100644 --- a/tutorials/Web/README.md +++ b/tutorials/Web/README.md @@ -1,5 +1,5 @@ # Compose for Web -**The API is experimental, and breaking changes can be expected** +**The API is not finalized, and breaking changes can be expected** ### Content: diff --git a/tutorials/Web/Style_Dsl/README.md b/tutorials/Web/Style_Dsl/README.md index 0fc24de954..e478bee424 100644 --- a/tutorials/Web/Style_Dsl/README.md +++ b/tutorials/Web/Style_Dsl/README.md @@ -1,5 +1,5 @@ # Style DSL in Compose Web -**The API is experimental, and breaking changes can be expected** +**The API is not finalized, and breaking changes can be expected** ## Introduction In this tutorial we have a look at how to style the components using the Style DSL. It’s a typesafe DSL for style sheets, which you can use to express CSS rules in your Kotlin code, and even modify styles based on the state of your Compose application. @@ -101,11 +101,11 @@ object AppStylesheet : StyleSheet() { // A convenient way to create a class selector // AppStylesheet.container can be used as a class in component attrs val container by style { - color("red") + color(Color.red) // hover selector for a class self + hover() style { // self is a selector for `container` - color("green") + color(Color.green) } } } @@ -135,9 +135,9 @@ object AppStylesheet : StyleSheet() { The style DSL also provides support for CSS variables. ``` kotlin -object MyVariables : CSSVariables { +object MyVariables { // declare a variable - val contentBackgroundColor by variable() + val contentBackgroundColor by variable() } object MyStyleSheet: StyleSheet() { @@ -169,6 +169,30 @@ import org.jetbrains.compose.web.css.* import org.jetbrains.compose.web.dom.* import org.jetbrains.compose.web.renderComposable +object MyVariables { + // declare a variable + val contentBackgroundColor by variable() +} + +object MyStyleSheet: StyleSheet() { + + val container by style { + //set variable's value for the `container` scope + MyVariables.contentBackgroundColor(Color("blue")) + } + + val content by style { + // get the value + backgroundColor(MyVariables.contentBackgroundColor.value()) + } + + val contentWithDefaultBgColor by style { + // default value can be provided as well + // default value is used when the value is not previously set + backgroundColor(MyVariables.contentBackgroundColor.value(Color("#333"))) + } +} + object AppStylesheet : StyleSheet() { val container by style { // container is a class display(DisplayStyle.Flex) diff --git a/web/gradle.properties b/web/gradle.properties index 027c19c867..e7cb6d513f 100644 --- a/web/gradle.properties +++ b/web/gradle.properties @@ -1,6 +1,6 @@ # __LATEST_COMPOSE_RELEASE_VERSION__ -COMPOSE_CORE_VERSION=0.5.0-build262 -COMPOSE_WEB_VERSION=0.5.0-build262 +COMPOSE_CORE_VERSION=0.5.0-build270 +COMPOSE_WEB_VERSION=0.5.0-build270 COMPOSE_WEB_BUILD_WITH_EXAMPLES=false compose.web.buildSamples=false compose.web.tests.integration.withFirefox