Grid {
        id: numpad
        rows: 3
        columns: 3
        spacing: 10

        Repeater {
            model: 9

            MouseArea {
                width: 90
                height: width
                preventStealing: true

                Rectangle {
                    color: black
                    anchors.fill: parent
                }

                onClicked: {
                    entry(index + 1);
                }

                drag.target: this

                drag.onActiveChanged: {
                    if (drag.active) {
                        drag.target = dragComponent.createObject(this)
                    }
                }

                Component {
                    id: dragComponent
                    Text {
                        property bool dragActive: parent.drag.active
                        id:dragIndicator
                        text: index + 1
                        font.bold: true
                        x: parent.mouseX - width/2
                        y: parent.mouseY - height/2

                        onDragActiveChanged: if (!dragActive) this.destroy()
                    }
                }
            }
        }