Browse Source

web: update web examples to 1.0.0-rc12 (#1517)

* web: move web-landing to 1.0.0-rc12

* web: move falling-balls-web to 1.0.0-rc12

* web: move web-compose-bird to 1.0.0-rc12

* web: move web-with-react example to 1.0.0-rc12

* web: update todoapp to 1.0.0-rc12

* web: use 1.0.0-rc12 in examples

Co-authored-by: Oleksandr Karpovich <oleksandr.karpovich@jetbrains.com>
pull/1523/head
Oleksandr Karpovich 3 years ago committed by GitHub
parent
commit
17194020d9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 2
      examples/falling-balls-web/build.gradle.kts
  2. 1
      examples/todoapp/web/build.gradle.kts
  3. 5
      examples/todoapp/web/src/jsMain/kotlin/example/todo/web/Components.kt
  4. 2
      examples/web-compose-bird/build.gradle.kts
  5. 2
      examples/web-landing/build.gradle.kts
  6. 12
      examples/web-landing/src/jsMain/kotlin/com/sample/content/CodeSamplesSwitcher.kt
  7. 9
      examples/web-landing/src/jsMain/kotlin/com/sample/style/Stylesheet.kt
  8. 1
      examples/web-landing/src/jsMain/kotlin/com/sample/style/WtText.kt
  9. 2
      examples/web-with-react/build.gradle.kts

2
examples/falling-balls-web/build.gradle.kts

@ -4,7 +4,7 @@ import org.jetbrains.compose.desktop.application.dsl.TargetFormat
plugins { plugins {
kotlin("multiplatform") version "1.5.31" kotlin("multiplatform") version "1.5.31"
id("org.jetbrains.compose") version "1.0.0-beta5" id("org.jetbrains.compose") version "1.0.0-rc12"
} }
version = "1.0-SNAPSHOT" version = "1.0-SNAPSHOT"

1
examples/todoapp/web/build.gradle.kts

@ -38,5 +38,6 @@ kotlin {
afterEvaluate { afterEvaluate {
rootProject.extensions.configure<NodeJsRootExtension> { rootProject.extensions.configure<NodeJsRootExtension> {
versions.webpackDevServer.version = "4.0.0" versions.webpackDevServer.version = "4.0.0"
versions.webpackCli.version = "4.9.0"
} }
} }

5
examples/todoapp/web/src/jsMain/kotlin/example/todo/web/Components.kt

@ -2,8 +2,8 @@ package example.todo.web
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import org.jetbrains.compose.common.material.Text import org.jetbrains.compose.common.material.Text
import org.jetbrains.compose.common.ui.ExperimentalComposeWebWidgetsApi
import org.jetbrains.compose.web.attributes.InputType import org.jetbrains.compose.web.attributes.InputType
import org.jetbrains.compose.web.attributes.checked
import org.jetbrains.compose.web.css.AlignItems import org.jetbrains.compose.web.css.AlignItems
import org.jetbrains.compose.web.css.DisplayStyle import org.jetbrains.compose.web.css.DisplayStyle
import org.jetbrains.compose.web.css.JustifyContent import org.jetbrains.compose.web.css.JustifyContent
@ -42,7 +42,7 @@ fun MaterialCheckbox(
type = InputType.Checkbox, type = InputType.Checkbox,
attrs = { attrs = {
classes("filled-in") classes("filled-in")
if (checked) checked() checked(checked)
onChange { onCheckedChange(it.value) } onChange { onCheckedChange(it.value) }
} }
) )
@ -66,6 +66,7 @@ fun Card(attrs: AttrBuilderContext<*> = {}, content: @Composable () -> Unit) {
} }
} }
@OptIn(ExperimentalComposeWebWidgetsApi::class)
@Composable @Composable
fun MaterialTextArea( fun MaterialTextArea(
id: String, id: String,

2
examples/web-compose-bird/build.gradle.kts

@ -2,7 +2,7 @@ import org.jetbrains.kotlin.gradle.targets.js.nodejs.NodeJsRootExtension
plugins { plugins {
kotlin("multiplatform") version "1.5.31" kotlin("multiplatform") version "1.5.31"
id("org.jetbrains.compose") version "1.0.0-beta5" id("org.jetbrains.compose") version "1.0.0-rc12"
} }
group = "com.theapache64.composebird" group = "com.theapache64.composebird"
version = "1.0.0-alpha01" version = "1.0.0-alpha01"

2
examples/web-landing/build.gradle.kts

@ -2,7 +2,7 @@ import org.jetbrains.kotlin.gradle.targets.js.nodejs.NodeJsRootExtension
plugins { plugins {
kotlin("multiplatform") version "1.5.31" kotlin("multiplatform") version "1.5.31"
id("org.jetbrains.compose") version "1.0.0-beta5" id("org.jetbrains.compose") version "1.0.0-rc12"
} }
repositories { repositories {

12
examples/web-landing/src/jsMain/kotlin/com/sample/content/CodeSamplesSwitcher.kt

@ -4,9 +4,6 @@ import androidx.compose.runtime.Composable
import org.jetbrains.compose.web.attributes.InputType import org.jetbrains.compose.web.attributes.InputType
import org.jetbrains.compose.web.attributes.name import org.jetbrains.compose.web.attributes.name
import org.jetbrains.compose.web.css.* import org.jetbrains.compose.web.css.*
import org.jetbrains.compose.web.css.selectors.CSSSelector
import org.jetbrains.compose.web.css.selectors.descendant
import org.jetbrains.compose.web.css.selectors.selector
import org.jetbrains.compose.web.dom.Form import org.jetbrains.compose.web.dom.Form
import org.jetbrains.compose.web.dom.Input import org.jetbrains.compose.web.dom.Input
import org.jetbrains.compose.web.dom.Label import org.jetbrains.compose.web.dom.Label
@ -28,7 +25,7 @@ object SwitcherStylesheet : StyleSheet(AppStylesheet) {
} }
} }
descendant(self, CSSSelector.Type("label")) style { desc(self, type("label")) style {
display(DisplayStyle.InlineBlock) display(DisplayStyle.InlineBlock)
width(SwitcherVariables.labelWidth.value(56.px)) width(SwitcherVariables.labelWidth.value(56.px))
padding(SwitcherVariables.labelPadding.value(10.px)) padding(SwitcherVariables.labelPadding.value(10.px))
@ -53,11 +50,14 @@ object SwitcherStylesheet : StyleSheet(AppStylesheet) {
borderRadius(22.px, 22.px, 22.px) borderRadius(22.px, 22.px, 22.px)
} }
descendant(self, selector("input[type=\"radio\"]")) style { type("input") + attrEquals(name = "type", value = "radio") style {
display(DisplayStyle.None) display(DisplayStyle.None)
} }
descendant(self, selector("input[type=\"radio\"]:checked + label")) style { adjacent(
sibling = type("input") + attrEquals(name = "type", value = "radio") + checked,
selected = type("label")
) style {
border { border {
style(LineStyle.Solid) style(LineStyle.Solid)
width(3.px) width(3.px)

9
examples/web-landing/src/jsMain/kotlin/com/sample/style/Stylesheet.kt

@ -58,7 +58,7 @@ object AppStylesheet : StyleSheet() {
) )
} }
CSSSelector.Universal style { universal style {
AppCSSVariables.wtColorGreyLight(Color("#f4f4f4")) AppCSSVariables.wtColorGreyLight(Color("#f4f4f4"))
AppCSSVariables.wtColorGreyDark(Color("#323236")) AppCSSVariables.wtColorGreyDark(Color("#323236"))
AppCSSVariables.wtOffsetTopUnit(24.px) AppCSSVariables.wtOffsetTopUnit(24.px)
@ -67,16 +67,15 @@ object AppStylesheet : StyleSheet() {
} }
media(mediaMaxWidth(640.px)) { media(mediaMaxWidth(640.px)) {
CSSSelector.Universal style { universal style {
AppCSSVariables.wtOffsetTopUnit(16.px) AppCSSVariables.wtOffsetTopUnit(16.px)
AppCSSVariables.wtFlowUnit(16.px) AppCSSVariables.wtFlowUnit(16.px)
} }
} }
CSSSelector.Attribute( attrContains(
name = "class", name = "class",
value = "wtCol", value = "wtCol"
operator = CSSSelector.Attribute.Operator.Contains
) style { ) style {
marginRight(AppCSSVariables.wtHorizontalLayoutGutter.value()) marginRight(AppCSSVariables.wtHorizontalLayoutGutter.value())
marginLeft(AppCSSVariables.wtHorizontalLayoutGutter.value()) marginLeft(AppCSSVariables.wtHorizontalLayoutGutter.value())

1
examples/web-landing/src/jsMain/kotlin/com/sample/style/WtText.kt

@ -1,7 +1,6 @@
package com.sample.style package com.sample.style
import org.jetbrains.compose.web.css.* import org.jetbrains.compose.web.css.*
import org.jetbrains.compose.web.css.selectors.hover
object WtTexts : StyleSheet(AppStylesheet) { object WtTexts : StyleSheet(AppStylesheet) {

2
examples/web-with-react/build.gradle.kts

@ -1,7 +1,7 @@
import org.jetbrains.kotlin.gradle.targets.js.nodejs.NodeJsRootExtension import org.jetbrains.kotlin.gradle.targets.js.nodejs.NodeJsRootExtension
plugins { plugins {
kotlin("multiplatform") version "1.5.31" kotlin("multiplatform") version "1.5.31"
id("org.jetbrains.compose") version "1.0.0-beta5" id("org.jetbrains.compose") version "1.0.0-rc12"
} }
repositories { repositories {

Loading…
Cancel
Save