JetBrains/compose-multiplatform v0.5.0-build270

on GitHub

Desktop

Changes

• new Window API is no longer experimental
• old Window API is deprecated
• classes from android.compose.desktop.* moved to androidx.compose.ui.awt.* (ComposeWindow, ComposePanel, etc)
• svgResource/vectorXmlResource/imageResource replaced by painterResource

Breaking changes

• Window level keyboard API for the old Window API removed
• Window(icon: BufferedImage) replaced by Window(icon: Painter)
• ContextMenu renamed to CursorDropdownMenu

Web

Declare CSS Variables in wherever you want

We removed CSSVariables completely, so that one can declare CSS variables directly (we recommend to do it in Stylesheets)

Changes in CSS Color API

Any CSS API method that works with color does not accept strings as
arguments. Instead color("white") use color(Color.white). Instead
of color("#cefcef") write color(Color("#cefcef")).

This might seem like an overkill and too verbose for a frontend
development, but in fact, we are going to deprecate any String signature in CSS API in
favour of specialized "enums" (not necessarily technically enums, but
you got it) and helper builder/functions - and we want color-related
subset to be consistent with the rest of API. It seems to us (at least now)
that benefits of such approach overweight the verbosity concerns.

However one can alays use "raw" syntax for setting any property and
assigning arbitrary String value.

We also deprecated Color.RGBA, Color.RBG, Color.HSL, Color.HSLA in
favour of their less verbose counterparts, namely, rgba, rgb, hsl,
hsla. Please, move to them (IDE makes it possible to perform such refactoring
automatically), since we are going to remove this functions somewhere in
August.

Use mediaMaxWidth, mediaMinWidth, mediaMaxHeight, mediaMinHeight

maxWidth/Height, minWidth/Height in mediaQueries renamed to mediaMaxWidth/Height, mediaMinWidth/Height so they won't clash with "regular" maxWidth, minWidth etc. CSS API properties.

New Input functions

We have introduced a number of additional functions for creating inputs of different types:

TextInput(value = "text", attrs = {
   onInput { } // all these components have attrs same as HTMLInputElement
})
CheckboxInput(checked = false)
RadioInput(checked = false)
NumberInput(value = 0, min = 0, max = 10)
DateInput(value = "2021-10-10")
TelInput(value = "0123456")
EmailInput()
// and other input types

Unified onInput and onChange event listeners

In the previous versions it was important to carefully choose a proper input or change listener, so it matches the type of the input.
In the new version, onInput and onChange can be used regardless of the input type and the value of the input will have a proper type. Here is an example:

Input(type = InputType.Text, attrs = {
   onInput { event ->
       val inputValue: String = event.value
   }
})
 
Input(type = InputType.Checkbox, attrs = {
    onInput { event ->
        val isChecked: Boolean = event.value
    }
})

New SyntheticEvent exposes native event properties

That means there is no need to access nativeEvent or eventTarget.
Here is an example with SyntheticMouseEvent and its properties x and y.

Div(attrs = {
   onClick { event -> // SyntheticMouseEvent
       val x = event.x
       val y = event.y
       event.preventDefault() // The same goes for methods, like `preventDefault()`
   }
})