import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Inline Components")

    Column {
        SquareButton {
            id: btn1
            side: 50
            onClicked: btn2.randomizeColor()
        }
        SquareButton {
            id: btn2
            x: 50
            onClicked: btn3.randomizeColor()
        }
        SquareButton {
            id: btn3
            radius: 10
            onClicked: btn1.randomizeColor()
        }
    }

    component SquareButton : Rectangle {
        id: root

        property real side: 20

        readonly property alias pressed: mouseArea.pressed

        signal clicked()

        function randomizeColor() {
            root.color = Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
        }

        border { width: 3; color: Qt.darker(root.color) }
        width: side; height: side
        Component.onCompleted: randomizeColor()

        MouseArea {
            id: mouseArea
            anchors.fill: parent
            onClicked: root.clicked(mouse.x, mouse.y)
        }
    }
}