DankMaterialShell/Widgets/DankTabBar.qml

import QtQuick
import qs.Common
import qs.Widgets

Item {
    id: tabBar

    property alias model: tabRepeater.model
    property int currentIndex: 0
    property int spacing: Theme.spacingXS
    property int tabHeight: 36
    property bool showIcons: true
    property bool equalWidthTabs: true

    signal tabClicked(int index)

    height: tabHeight

    Row {
        id: tabRow

        anchors.fill: parent
        spacing: tabBar.spacing

        Repeater {
            id: tabRepeater

            Rectangle {
                property int tabCount: tabRepeater.count
                property bool isActive: tabBar.currentIndex === index
                property bool hasIcon: tabBar.showIcons && modelData
                                       && ("icon" in modelData)
                                       && modelData.icon
                                       && modelData.icon.length > 0
                property bool hasText: modelData && ("text" in modelData)
                                       && modelData.text
                                       && modelData.text.length > 0

                width: tabBar.equalWidthTabs ? (tabBar.width - tabBar.spacing * (tabCount - 1))
                                               / tabCount : contentRow.implicitWidth
                                               + Theme.spacingM * 2
                height: tabBar.tabHeight
                radius: Theme.cornerRadius
                color: isActive ? Theme.primaryPressed : tabArea.containsMouse ? Theme.primaryHoverLight : "transparent"

                Row {
                    id: contentRow

                    anchors.centerIn: parent
                    spacing: Theme.spacingXS

                    DankIcon {
                        name: modelData.icon || ""
                        size: Theme.iconSize - 4
                        color: parent.parent.isActive ? Theme.primary : Theme.surfaceText
                        anchors.verticalCenter: parent.verticalCenter
                        visible: parent.parent.hasIcon
                    }

                    StyledText {
                        text: modelData.text || ""
                        font.pixelSize: Theme.fontSizeMedium
                        color: parent.parent.isActive ? Theme.primary : Theme.surfaceText
                        font.weight: parent.parent.isActive ? Font.Medium : Font.Normal
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.verticalCenterOffset: 1
                        visible: parent.parent.hasText
                    }
                }

                MouseArea {
                    id: tabArea

                    anchors.fill: parent
                    hoverEnabled: true
                    cursorShape: Qt.PointingHandCursor
                    onClicked: {
                        tabBar.currentIndex = index
                        tabBar.tabClicked(index)
                    }
                }

                Behavior on color {
                    ColorAnimation {
                        duration: Theme.shortDuration
                        easing.type: Theme.standardEasing
                    }
                }
            }
        }
    }
}