z-bar-qt/Components/SplitButton.qml

import QtQuick
import QtQuick.Layouts
import ZShell.Config
import qs.Services

Row {
	id: root

	enum Type {
		Filled,
		Tonal
	}

	property alias active: menu.active
	property color color: type == SplitButton.Filled ? Colors.palette.m3primary : Colors.palette.m3secondaryContainer
	property color disabledColor: Qt.alpha(Colors.palette.m3onSurface, 0.1)
	property color disabledTextColor: Qt.alpha(Colors.palette.m3onSurface, 0.38)
	readonly property alias expandBtn: expandBtn
	property alias expanded: menu.expanded
	property string fallbackIcon
	property string fallbackText
	property real horizontalPadding: Tokens.padding.medium
	readonly property alias iconLabel: iconLabel
	readonly property alias label: label
	readonly property alias menu: menu
	property alias menuItems: menu.items
	property bool menuOnTop
	property real minLeftWidth
	readonly property alias stateLayer: stateLayer
	property color textColor: type == SplitButton.Filled ? Colors.palette.m3onPrimary : Colors.palette.m3onSecondaryContainer
	readonly property alias textRow: textRow
	property int type: SplitButton.Filled
	property real verticalPadding: Tokens.padding.small

	spacing: Math.floor(Tokens.spacing.extraSmall / 2)

	CustomRect {
		bottomRightRadius: Tokens.rounding.medium / 2
		color: !root.enabled ? root.disabledColor : root.color
		implicitHeight: expandBtn.implicitHeight
		implicitWidth: Math.max(root.minLeftWidth, textRow.implicitWidth + root.horizontalPadding * 2)
		radius: implicitHeight / 2 * Math.min(1, Tokens.rounding.scale)
		topRightRadius: Tokens.rounding.medium / 2

		StateLayer {
			id: stateLayer

			bottomRightRadius: parent.bottomRightRadius
			color: root.textColor
			enabled: root.enabled
			topRightRadius: parent.topRightRadius

			onClicked: root.active?.clicked()
		}

		RowLayout {
			id: textRow

			anchors.centerIn: parent
			anchors.horizontalCenterOffset: Math.floor(root.verticalPadding / 4)
			spacing: Tokens.spacing.small

			MaterialIcon {
				id: iconLabel

				Layout.alignment: Qt.AlignVCenter
				animate: true
				color: !root.enabled ? root.disabledTextColor : root.textColor
				fill: 1
				text: root.active?.activeIcon ?? root.fallbackIcon
			}

			CustomText {
				id: label

				Layout.alignment: Qt.AlignVCenter
				Layout.preferredWidth: implicitWidth
				animate: true
				clip: true
				color: !root.enabled ? root.disabledTextColor : root.textColor
				text: root.active?.activeText ?? root.fallbackText

				Behavior on Layout.preferredWidth {
					Anim {
						type: Anim.Emphasized
					}
				}
			}
		}
	}

	CustomRect {
		id: expandBtn

		property real rad: root.expanded ? implicitHeight / 2 * Math.min(1, Tokens.rounding.scale) : Tokens.rounding.medium / 2

		bottomLeftRadius: rad
		color: !root.enabled ? root.disabledColor : root.color
		implicitHeight: expandIcon.implicitHeight + root.verticalPadding * 2
		implicitWidth: implicitHeight
		radius: implicitHeight / 2 * Math.min(1, Tokens.rounding.scale)
		topLeftRadius: rad

		Behavior on rad {
			Anim {
			}
		}

		StateLayer {
			id: expandStateLayer

			color: root.textColor
			enabled: root.enabled
			rect.bottomLeftRadius: parent.bottomLeftRadius
			rect.topLeftRadius: parent.topLeftRadius

			onClicked: root.expanded = !root.expanded
		}

		MaterialIcon {
			id: expandIcon

			anchors.centerIn: parent
			anchors.horizontalCenterOffset: root.expanded ? 0 : -Math.floor(root.verticalPadding / 4)
			color: !root.enabled ? root.disabledTextColor : root.textColor
			rotation: root.expanded ? 180 : 0
			text: "expand_more"

			Behavior on anchors.horizontalCenterOffset {
				Anim {
				}
			}
			Behavior on rotation {
				Anim {
				}
			}
		}
	}

	Menu {
		id: menu

		attachSideY: root.menuOnTop ? Menu.Top : Menu.Bottom
		attachTo: expandBtn
		marginY: Tokens.spacing.small * (root.menuOnTop ? -1 : 1)
		thisSideY: root.menuOnTop ? Menu.Bottom : Menu.Top
	}
}