slint/internal/compiler/tests/syntax/basic/states_transitions.slint

// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0

export TestCase := Rectangle {
//              ^warning{':=' to declare a component is deprecated. The new syntax declare components with 'component MyComponent {'. Read the documentation for more info}
    property<bool> checked;
    property <int> border;
    states [
        checked when checked: {
            color: blue; // same as root.color
            text.color: red;
            border: 42;
        }
        pressed when touch.pressed: {
            color: green;
            border: 88;
            text.foo.bar: 0;
//          ^error{'text.foo.bar' is not a valid property}
            colour: yellow;
//          ^error{'colour' is not a valid property}
//                  ^^error{Unknown unqualified identifier 'yellow'}
            fox.color: yellow;
//          ^error{'fox' is not a valid element id}
            text.fox: yellow;
//          ^error{'fox' not found in 'text'}
//                    ^^error{Unknown unqualified identifier 'yellow'}
        }
    ]

    transitions [
        in pressed: {
            animate * { duration: 88ms; }
            animate color { duration: 88ms; }
        }
        out pressed: {
            animate color, foo.x { duration: 300ms; }
//                         ^error{'foo' is not a valid element id}
            //pause: 20ms;
            animate border { duration: 120ms; }
            animate color, text.text { duration: 300ms; }
//                         ^error{'text.text' is not a property that can be animated}
        }

        in-out checked: {
            animate color { duration: 100ms; }
        }
    ]

    text := Text {}
    touch := TouchArea {}

}


export component NewSyntax {
    property<bool> checked;
    property <int> border;
    property <color> color;
    states [
        checked when checked: {
            color: blue; // same as root.color
            text.color: red;
            border: 42;

            in-out {
                animate color { duration: 100ms; }
            }
        }
        pressed when touch.pressed: {
            color: green;
            border: 88;
            text.foo.bar: 0;
//          ^error{'text.foo.bar' is not a valid property}
            colour: yellow;
//          ^error{'colour' is not a valid property}
//                  ^^error{Unknown unqualified identifier 'yellow'}
            fox.color: yellow;
//          ^error{'fox' is not a valid element id}
            text.fox: yellow;
//          ^error{'fox' not found in 'text'}
//                    ^^error{Unknown unqualified identifier 'yellow'}

            in  {
                animate * { duration: 88ms; }
                animate color { duration: 88ms; }
            }
            out {
                animate color, foo.x { duration: 300ms; }
//                             ^error{'foo' is not a valid element id}
                animate border { duration: 120ms; }
                animate color, text.text { duration: 300ms; }
//                             ^error{'text.text' is not a property that can be animated}
            }
        }
    ]

    text := Text {}
    touch := TouchArea {}

}

export component OldInNewSyntax {
    property<bool> checked;
    property <int> border;
    property <color> color;
    states [
        checked when checked: {
            color: blue; // same as root.color
            text.color: red;
            border: 42;
        }
        pressed when touch.pressed: {
            color: green;
            border: 88;
            text.foo.bar: 0;
//          ^error{'text.foo.bar' is not a valid property}
            colour: yellow;
//          ^error{'colour' is not a valid property}
//                  ^^error{Unknown unqualified identifier 'yellow'}
            fox.color: yellow;
//          ^error{'fox' is not a valid element id}
            text.fox: yellow;
//          ^error{'fox' not found in 'text'}
//                    ^^error{Unknown unqualified identifier 'yellow'}
        }
    ]

    transitions [
//  ^error{'transitions' block are no longer supported. Use 'in {...}' and 'out {...}' directly in the state definition}
        in pressed: {
            animate * { duration: 88ms; }
            animate color { duration: 88ms; }
        }
        out pressed: {
            animate color, foo.x { duration: 300ms; }
//                         ^error{'foo' is not a valid element id}
            animate border { duration: 120ms; }
            animate color, text.text { duration: 300ms; }
//                         ^error{'text.text' is not a property that can be animated}

        }
    ]

    text := Text {}
    touch := TouchArea {}

}