Onboarding Tutorial

 // SPDX-FileCopyrightText: 2026 Sandro Andrade <sandroandrade@kde.org>
 // SPDX-License-Identifier: LGPL-2.0-or-later

 import QtQuick
 import QtQuick.Controls as QQC2
 import QtQuick.Layouts
 import org.kde.kirigami as Kirigami
 import org.kde.kirigamiaddons.onboarding

 Item {
     id: item

     required property var swipeView

     objectName: "Page1"

     GridLayout {
         id: gridLayout

         anchors {
             fill: parent
             margins: Kirigami.Units.largeSpacing
         }
         columns: 3

         QQC2.Button {
             id: button1

             Layout.fillWidth: true
             text: qsTr("Start onboarding")

             Onboarding.texts: [qsTr("This button starts the default onboarding tutorial.")]
             Onboarding.additionalData: ({
                 video: "qrc:/qt/qml/org/kde/kirigamiaddons/examples/onboardingtutorial/onboarding-video.webp",
                 videoCaption: "This is a video caption",
             })

             onClicked: Onboarding.start()
         }

         QQC2.CheckBox {
             id: checkbox1

             Layout.fillWidth: true
             text: qsTr("CheckBox 1")

             Onboarding.texts: [qsTr("This checkbox represents an option that can be enabled or disabled.")]
         }

         QQC2.Button {
             id: button2

             Layout.fillWidth: true
             text: qsTr("Start advanced")

             Onboarding.groups: ["advanced"]
             Onboarding.texts: [qsTr("This button starts the advanced onboarding tutorial.")]

             onClicked: Onboarding.start("advanced")
         }

         QQC2.Button {
             id: button3

             Layout.columnSpan: 2
             Layout.fillWidth: true
             highlighted: true
             text: qsTr("Button 3")

             Onboarding.groups: ["", "advanced"]
             Onboarding.texts: [
                 qsTr("This highlighted button shows how longer onboarding text wraps inside the tooltip."),
                 qsTr("The advanced flow can reuse the same control with different guidance."),
             ]
         }

         QQC2.ComboBox {
             id: combobox1

             Layout.fillWidth: true
             model: [qsTr("Apple"), qsTr("Banana"), qsTr("Watermelon")]

             Onboarding.texts: [qsTr("This combo box lets the user choose from a short list of values.")]
         }

         RowLayout {
             id: group1

             Layout.columnSpan: 3
             Layout.fillWidth: true

             Onboarding.texts: [qsTr("This row groups related input controls.")]

             QQC2.TextField {
                 id: textfield1

                 Layout.fillWidth: true
                 placeholderText: qsTr("I'm a text field")

                 Onboarding.texts: [qsTr("This text field accepts free-form text.")]
             }

             QQC2.SpinBox {
                 id: spinbox1

                 Layout.fillWidth: true

                 Onboarding.texts: [qsTr("This spin box adjusts a numeric value.")]
                 up.indicator.Onboarding.texts: [qsTr("This spin box button increases the value.")]
                 down.indicator.Onboarding.texts: [qsTr("This spin box button decreases the value.")]
             }

             QQC2.Button {
                 id: button4

                 Layout.fillWidth: true
                 text: qsTr("Button 4")

                 Onboarding.texts: [qsTr("This button completes the grouped controls on the first page.")]
             }
         }

         QQC2.TextArea {
             id: textarea1

             Layout.fillHeight: true
             Layout.fillWidth: true

             Onboarding.texts: [qsTr("This text area accepts longer input.")]
         }

         QQC2.Dial {
             id: dial1

             Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter

             Onboarding.texts: [qsTr("This dial is an interactive value selector.")]
         }

         QQC2.Dial {
             id: dial2

             Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter

             Onboarding.groups: ["", "advanced"]
             Onboarding.texts: [
                 qsTr("This second dial is the last item on the first page."),
                 qsTr("The advanced flow continues on the next page after this dial."),
             ]
             Onboarding.onAboutToShow: item.swipeView.currentIndex = 0
         }
     }
 }