import QtQuick 2.0

ListView {
    id: listView
    width: 400
    height: 400
    model: ListModel {
        id: sectionModel
        ListElement { value: "Item 1"; section: "First" }
        ListElement { value: "Item 2"; section: "First" }
        ListElement { value: "Item 3"; section: "First" }
        ListElement { value: "Item 4"; section: "Second" }
        ListElement { value: "Item 5"; section: "Second" }
        ListElement { value: "Item 6"; section: "Second" }
    }

    section.property: "section"
    section.criteria: ViewSection.FullString
    section.delegate: Item {
        width: parent.width
        height: 60
        Text {
            anchors.centerIn: parent
            font.pixelSize: 24
            text: section
        }
    }

    delegate: Rectangle {
        width: parent.width
        height: 80
        color: "gray"

        Text {
            x: 10
            anchors.verticalCenter: parent.verticalCenter
            font.pixelSize: 16
            text: value
        }

        MouseArea {
            anchors.fill: parent
            onClicked: sectionModel.remove(index)
        }
    }

    remove: Transition {
        NumberAnimation { property: "opacity"; to: 0; duration: 2000 }
    }

    removeDisplaced: Transition {
        SequentialAnimation {
            PauseAnimation { duration: 2000 }
            NumberAnimation { property: "y"; duration: 2000  }
        }
    }
}