SplitButton.qml

Go to the documentation of this file.

// SPDX-FileCopyrightText: 2026 Pier Luigi Fiorini <pierluigi.fiorini@gmail.com>
// SPDX-License-Identifier: MPL-2.0
 
pragma ComponentBehavior: Bound
 
import QtQuick
import QtQuick.Window
import QtQuick.Templates as T
import Fluid as MD
import "../internal"
import "../core/UiMetrics.js" as UiMetrics
 
T.Control {
    id: control
 
    enum Type { Filled, Tonal, Elevated, Outlined }
    enum Size { ExtraSmall, Small, Medium, Large, ExtraLarge }
 
    property int type: SplitButton.Filled
    property int size: SplitButton.Small
    property alias text: leading.text
    property alias icon: leading.icon
    property alias display: leading.display
    property alias action: leading.action
    property MD.typescale typescale: UiMetrics.buttonTypescale(control)
    property bool primaryEnabled: true
    property bool secondaryEnabled: true
    property T.Menu menu: null
    property bool expanded: false
    property string secondaryText: qsTr("More options")
    readonly property T.Button leadingButton: leading
    readonly property T.ToolButton trailingButton: trailing
 
    signal clicked()
    signal secondaryClicked()
 
    readonly property string _suffix: ["ExtraSmall", "Small", "Medium", "Large", "ExtraLarge"][Math.max(0, Math.min(4, size))]
    readonly property real _surfaceHeight: MD.Tokens.splitButton["containerHeight" + _suffix]
    readonly property bool _mirrored: mirrored || locale.textDirection === Qt.RightToLeft
    readonly property color _containerColor: type === SplitButton.Filled ? control.MD.Style.primaryColor
        : type === SplitButton.Tonal ? control.MD.Style.secondaryContainerColor
        : type === SplitButton.Elevated ? control.MD.Style.surfaceContainerLowColor : "transparent"
    readonly property color _contentColor: type === SplitButton.Filled ? control.MD.Style.onPrimaryColor
        : type === SplitButton.Tonal ? control.MD.Style.onSecondaryContainerColor
        : type === SplitButton.Elevated ? control.MD.Style.primaryColor : control.MD.Style.onSurfaceVariantColor
    readonly property color _outlineColor: type === SplitButton.Outlined ? control.MD.Style.outlineVariantColor : "transparent"
    readonly property real _outlineWidth: type === SplitButton.Outlined ? MD.Tokens.button["outlinedOutlineWidth" + _suffix] : 0
    property T.Menu _managedMenu: null
    property bool _hadManagedMenu: false
    property bool _syncingExpanded: false
    property bool _keyboardOpening: false
    property bool _restoreMenuFocus: false
    property bool _menuOwnedFocus: false
    property bool _menuClosing: false
    property bool _reopenMenuAfterClose: false
    property Item _focusBeforeMenu: null
    property Item _closingFocusItem: null
    property Item _outsideMenuFocus: null
    property Item _menuContentItem: null
    property Item _menuPopupItem: null
    property bool _menuOpenBeforePointerPress: false
 
    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
                            implicitContentWidth + leftPadding + rightPadding)
    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
                             implicitContentHeight + topPadding + bottomPadding)
    padding: 0
    focusPolicy: Qt.NoFocus
    Accessible.ignored: true
 
    // Overlay observes a pointer press before CloseOnPressOutside dismisses the menu.
    T.Overlay.onPressed: {
        _menuOpenBeforePointerPress = menu !== null && expanded;
        Qt.callLater(() => control._menuOpenBeforePointerPress = false);
    }
 
    function _partContainerColor(partEnabled: bool): color {
        return partEnabled ? _containerColor
            : type === SplitButton.Outlined ? "transparent" : control.MD.Style.onSurfaceColor;
    }
 
    function _partElevation(partEnabled: bool, hovered: bool, down: bool): real {
        if (!partEnabled)
            return MD.Tokens.splitButton.disabledContainerElevation;
        if (type === SplitButton.Outlined)
            return MD.Tokens.splitButton.flatContainerElevation;
        if (type === SplitButton.Elevated)
            return hovered && !down ? MD.Tokens.splitButton.elevatedHoverContainerElevation
                                    : MD.Tokens.splitButton.elevatedContainerElevation;
        return hovered && !down ? MD.Tokens.splitButton.flatHoverContainerElevation
                                : MD.Tokens.splitButton.flatContainerElevation;
    }
 
    function _syncExpanded(value: bool) {
        _syncingExpanded = true;
        expanded = value;
        _syncingExpanded = false;
    }
 
    function _insideMenu(item: Item): bool {
        // Menu can already be marked deleted while focus teardown signals arrive.
        // Read the Item references captured at opening instead of touching that Menu.
        const content = control._menuContentItem;
        const container = control._menuPopupItem;
        if (!item || (!content && !container))
            return false;
        let cursor = item;
        while (cursor) {
            if (cursor === content || cursor === container)
                return true;
            cursor = cursor.parent;
        }
        return false;
    }
 
    function _placeMenu() {
        if (!menu || !control.Window.window)
            return;
        const viewport = control.Window.window.contentItem;
        const anchor = trailing.mapToItem(viewport, 0, 0);
        const whole = control.mapToItem(viewport, 0, 0);
        const menuWidth = menu.width > 0 ? menu.width : menu.implicitWidth;
        const menuHeight = menu.height > 0 ? menu.height : menu.implicitHeight;
        const left = Math.max(0, menu.leftMargin);
        const right = viewport.width - Math.max(0, menu.rightMargin);
        const top = Math.max(0, menu.topMargin);
        const bottom = viewport.height - Math.max(0, menu.bottomMargin);
        const candidates = _mirrored
            ? [anchor.x + trailing.width - menuWidth, anchor.x,
               whole.x + control.width - menuWidth, whole.x]
            : [anchor.x, anchor.x + trailing.width - menuWidth,
               whole.x, whole.x + control.width - menuWidth];
        let chosenX = candidates[0];
        for (let index = 0; index < candidates.length; ++index) {
            if (candidates[index] >= left && candidates[index] + menuWidth <= right) {
                chosenX = candidates[index];
                break;
            }
        }
        chosenX = Math.max(left, Math.min(Math.max(left, right - menuWidth), chosenX));
        const surfaceTop = anchor.y + layout.surfaceY;
        const below = surfaceTop + _surfaceHeight + MD.Tokens.splitButton.menuAnchorGap;
        const above = surfaceTop - MD.Tokens.splitButton.menuAnchorGap - menuHeight;
        const belowSpace = bottom - below;
        const aboveSpace = surfaceTop - MD.Tokens.splitButton.menuAnchorGap - top;
        const preferAbove = belowSpace < menuHeight && (above >= top || aboveSpace > belowSpace);
        const chosenY = preferAbove ? above : below;
        menu.parent = trailing;
        menu.x = chosenX - anchor.x;
        menu.y = chosenY - anchor.y;
    }
 
    function openMenu() {
        if (!menu || !enabled || !visible || !secondaryEnabled)
            return;
        if (_menuClosing && menu.visible) {
            _reopenMenuAfterClose = true;
            _syncExpanded(true);
            return;
        }
        _placeMenu();
        menu.open();
    }
 
    function closeMenu() {
        _reopenMenuAfterClose = false;
        if (menu) {
            _syncExpanded(false);
            menu.close();
        }
    }
 
    function toggleMenu() {
        if (!menu)
            return;
        if (expanded)
            closeMenu();
        else
            openMenu();
    }
 
    onExpandedChanged: {
        if (menu && !_syncingExpanded) {
            if (expanded) {
                if (enabled && visible && secondaryEnabled)
                    openMenu();
                else
                    _syncExpanded(false);
            } else {
                closeMenu();
            }
        }
    }
    onMenuChanged: {
        const previous = _managedMenu;
        const hadManagedMenu = _hadManagedMenu;
        _managedMenu = menu;
        _hadManagedMenu = menu !== null;
        _restoreMenuFocus = false;
        _menuOwnedFocus = false;
        _menuClosing = false;
        _reopenMenuAfterClose = false;
        _focusBeforeMenu = null;
        _closingFocusItem = null;
        _outsideMenuFocus = null;
        _menuContentItem = null;
        _menuPopupItem = null;
        if (previous && previous !== menu)
            previous.close();
        if (!hadManagedMenu && menu && expanded)
            openMenu();
        else if (hadManagedMenu || menu)
            _syncExpanded(menu ? menu.visible : false);
    }
    onEnabledChanged: if (!enabled) closeMenu()
    onVisibleChanged: if (!visible) closeMenu()
    onSecondaryEnabledChanged: if (!secondaryEnabled) closeMenu()
    Component.onDestruction: if (_managedMenu) _managedMenu.close()
 
    Connections {
        target: control.Window.window
        function onActiveFocusItemChanged() {
            const focused = control.Window.window.activeFocusItem;
            if (control._insideMenu(focused)) {
                control._menuOwnedFocus = true;
                control._outsideMenuFocus = null;
            } else if (control._menuClosing) {
                // Qt restores the previous focus with PopupFocusReason or OtherFocusReason.
                // A pointer/keyboard move during dismissal belongs to the user instead.
                const focusedControl = focused as T.Control;
                if (focusedControl && focusedControl.focusReason !== Qt.PopupFocusReason
                                   && focusedControl.focusReason !== Qt.OtherFocusReason) {
                    control._restoreMenuFocus = false;
                    control._outsideMenuFocus = focused;
                }
            } else if (control.expanded) {
                const focusedControl = focused as T.Control;
                if (focusedControl && focusedControl.focusReason !== Qt.PopupFocusReason
                                   && focusedControl.focusReason !== Qt.OtherFocusReason) {
                    control._menuOwnedFocus = false;
                    control._outsideMenuFocus = focused;
                }
                // Popup removes focus before aboutToHide, so defer relinquishing ownership.
                Qt.callLater(() => {
                    if (control.Window.window && control.expanded && !control._menuClosing
                            && !control._insideMenu(control.Window.window.activeFocusItem))
                        control._menuOwnedFocus = false;
                });
            }
        }
    }
 
    Connections {
        target: control.menu
        function onAboutToShow() {
            control._menuContentItem = control.menu.contentItem;
            control._menuPopupItem = control._menuContentItem ? control._menuContentItem.parent : null;
            control._focusBeforeMenu = control.Window.window ? control.Window.window.activeFocusItem : null;
            control._menuOwnedFocus = false;
            control._menuClosing = false;
            control._reopenMenuAfterClose = false;
            control._restoreMenuFocus = false;
            control._outsideMenuFocus = null;
            control._placeMenu();
            control._syncExpanded(true);
        }
        function onOpened() {
            control._syncExpanded(true);
            if (control._keyboardOpening && control.menu) {
                for (let index = 0; index < control.menu.count; ++index) {
                    const item = control.menu.itemAt(index);
                    if (item && item.enabled && item.visible && item.focusPolicy !== Qt.NoFocus) {
                        control.menu.currentIndex = index;
                        item.forceActiveFocus(Qt.PopupFocusReason);
                        break;
                    }
                }
            }
            control._keyboardOpening = false;
        }
        function onAboutToHide() {
            control._closingFocusItem = control.Window.window ? control.Window.window.activeFocusItem : null;
            control._restoreMenuFocus = control._menuOwnedFocus;
            control._menuClosing = true;
            control._syncExpanded(false);
        }
        function onClosed() {
            if (control._reopenMenuAfterClose) {
                control._reopenMenuAfterClose = false;
                control._menuClosing = false;
                control.openMenu();
                return;
            }
            control._syncExpanded(false);
            Qt.callLater(() => {
                if (!control || (control.menu && control.menu.visible))
                    return;
                const focused = control.Window.window ? control.Window.window.activeFocusItem : null;
                const nativeFallback = !focused || focused === control.Window.window.contentItem
                            || focused === control._focusBeforeMenu
                            || focused === control._closingFocusItem || control._insideMenu(focused);
                if (nativeFallback && control._outsideMenuFocus
                        && control._outsideMenuFocus.enabled && control._outsideMenuFocus.visible)
                    control._outsideMenuFocus.forceActiveFocus(Qt.PopupFocusReason);
                else if (nativeFallback && control._restoreMenuFocus && trailing.enabled && control.visible)
                    trailing.forceActiveFocus(Qt.PopupFocusReason);
                control._restoreMenuFocus = false;
                control._menuOwnedFocus = false;
                control._menuClosing = false;
                control._focusBeforeMenu = null;
                control._closingFocusItem = null;
                control._outsideMenuFocus = null;
            });
        }
    }
 
    contentItem: SplitButtonLayout {
        id: layout
        objectName: "splitButtonLayout"
        mirrored: control._mirrored
        surfaceHeight: control._surfaceHeight
        minimumTarget: MD.Tokens.measurement.minimumInteractiveSize
        betweenSpace: MD.Tokens.splitButton["betweenSpace" + control._suffix]
        leadingContentWidth: leading.implicitContentWidth
        leadingStartPadding: MD.Tokens.splitButton["leadingButtonLeadingSpace" + control._suffix]
        leadingEndPadding: MD.Tokens.splitButton["leadingButtonTrailingSpace" + control._suffix]
        trailingIconSize: MD.Tokens.splitButton["trailingIconSize" + control._suffix]
        trailingStartPadding: MD.Tokens.splitButton["trailingButtonLeadingSpace" + control._suffix]
        trailingEndPadding: MD.Tokens.splitButton["trailingButtonTrailingSpace" + control._suffix]
 
        T.Button {
            id: leading
            objectName: "splitButtonLeadingButton"
            x: layout.leadingX
            width: layout.leadingWidth
            height: layout.height
            enabled: control.enabled && control.primaryEnabled && (!action || action.enabled)
            display: T.AbstractButton.TextBesideIcon
            focusPolicy: Qt.StrongFocus
            hoverEnabled: true
            padding: 0
            icon.width: MD.Tokens.button["iconSize" + control._suffix]
            icon.height: MD.Tokens.button["iconSize" + control._suffix]
            font.pixelSize: control.typescale.fontSize
            font.weight: control.typescale.fontWeight
            font.letterSpacing: control.typescale.tracking
            LayoutMirroring.enabled: control._mirrored
            Keys.onPressed: event => {
                if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter)
                    event.accepted = true;
            }
            Keys.onReleased: event => {
                if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter) {
                    event.accepted = true;
                    if (!event.isAutoRepeat)
                        leading.click();
                }
            }
            onClicked: control.clicked()
 
            contentItem: SplitButtonContent {
                objectName: "splitButtonLeadingContent"
                trailing: false
                mirrored: control._mirrored
                expanded: false
                text: leading.text
                iconName: leading.icon.name
                iconSource: leading.icon.source
                iconWidth: leading.icon.width
                iconHeight: leading.icon.height
                display: leading.display
                textFont: leading.font
                lineHeight: control.typescale.lineHeight
                contentColor: leading.enabled ? control._contentColor : control.MD.Style.onSurfaceVariantColor
                iconColor: leading.enabled && leading.icon.color.a > 0 ? leading.icon.color : contentColor
                contentOpacity: leading.enabled ? 1 : MD.Tokens.button.disabledLabelTextOpacity
                spacing: MD.Tokens.button["iconLabelSpace" + control._suffix]
                startPadding: layout.leadingStartPadding
                endPadding: layout.leadingEndPadding
                opticalOffset: leadingSurface.opticalOffset
            }
 
            background: SplitButtonBackground {
                id: leadingSurface
                objectName: "splitButtonLeadingBackground"
                y: layout.surfaceY
                width: leading.width
                height: control._surfaceHeight
                leading: true
                mirrored: control._mirrored
                partEnabled: leading.enabled
                hovered: leading.hovered
                focused: leading.visualFocus
                pressed: leading.down
                expanded: false
                restingInnerRadius: MD.Tokens.splitButton["innerCornerCornerSize" + control._suffix]
                hoveredInnerRadius: MD.Tokens.splitButton["innerHoveredCornerCornerSize" + control._suffix]
                pressedInnerRadius: MD.Tokens.splitButton["innerPressedCornerCornerSize" + control._suffix]
                outerShape: MD.Tokens.splitButton.outerCornerShape
                expandedShape: MD.Tokens.splitButton.trailingExpandedInnerCornerShape
                containerColor: control._partContainerColor(leading.enabled)
                contentColor: control._contentColor
                outlineColor: control._outlineColor
                containerOpacity: leading.enabled ? 1 : MD.Tokens.button.disabledContainerOpacity
                outlineWidth: control._outlineWidth
                selectedOpacity: MD.Tokens.splitButton.trailingSelectedStateLayerOpacity
                leadingPadding: layout.leadingStartPadding
                trailingPadding: layout.leadingEndPadding
                opticalCoefficient: MD.Tokens.splitButton.opticalCenteringCoefficient
                elevation: control._partElevation(leading.enabled, leading.hovered, leading.down)
            }
        }
 
        T.ToolButton {
            id: trailing
            property bool _closeMenuOnActivation: false
            objectName: "splitButtonTrailingButton"
            x: layout.trailingX
            width: layout.trailingWidth
            height: layout.height
            enabled: control.enabled && control.secondaryEnabled
            focusPolicy: Qt.StrongFocus
            hoverEnabled: true
            padding: 0
            LayoutMirroring.enabled: control._mirrored
            Accessible.name: control.secondaryText
            Accessible.expandable: true
            Accessible.expanded: control.expanded
            onPressed: _closeMenuOnActivation = control.menu !== null
                && (control._menuOpenBeforePointerPress || control.expanded)
            onCanceled: _closeMenuOnActivation = false
            Keys.onPressed: event => {
                if (event.key === Qt.Key_Space || event.key === Qt.Key_Return || event.key === Qt.Key_Enter)
                    control._keyboardOpening = true;
                if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter)
                    event.accepted = true;
            }
            Keys.onReleased: event => {
                if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter) {
                    event.accepted = true;
                    if (!event.isAutoRepeat)
                        trailing.click();
                }
            }
            onClicked: {
                control._keyboardOpening = control._keyboardOpening && trailing.focusReason !== Qt.MouseFocusReason;
                const closeMenu = _closeMenuOnActivation || (control.menu !== null && control.expanded);
                _closeMenuOnActivation = false;
                control.secondaryClicked();
                if (closeMenu)
                    control.closeMenu();
                else
                    control.openMenu();
            }
 
            contentItem: SplitButtonContent {
                objectName: "splitButtonTrailingContent"
                trailing: true
                mirrored: control._mirrored
                expanded: control.expanded
                text: ""
                iconName: ""
                iconSource: ""
                iconWidth: layout.trailingIconSize
                iconHeight: layout.trailingIconSize
                display: T.AbstractButton.IconOnly
                textFont: leading.font
                lineHeight: control.typescale.lineHeight
                contentColor: trailing.enabled ? control._contentColor : control.MD.Style.onSurfaceVariantColor
                iconColor: contentColor
                contentOpacity: trailing.enabled ? 1 : MD.Tokens.button.disabledIconOpacity
                spacing: 0
                startPadding: layout.trailingStartPadding
                endPadding: layout.trailingEndPadding
                opticalOffset: trailingSurface.opticalOffset
            }
 
            background: SplitButtonBackground {
                id: trailingSurface
                objectName: "splitButtonTrailingBackground"
                y: layout.surfaceY
                width: trailing.width
                height: control._surfaceHeight
                leading: false
                mirrored: control._mirrored
                partEnabled: trailing.enabled
                hovered: trailing.hovered
                focused: trailing.visualFocus
                pressed: trailing.down
                expanded: control.expanded
                restingInnerRadius: MD.Tokens.splitButton["innerCornerCornerSize" + control._suffix]
                hoveredInnerRadius: MD.Tokens.splitButton["innerHoveredCornerCornerSize" + control._suffix]
                pressedInnerRadius: MD.Tokens.splitButton["innerPressedCornerCornerSize" + control._suffix]
                outerShape: MD.Tokens.splitButton.outerCornerShape
                expandedShape: MD.Tokens.splitButton.trailingExpandedInnerCornerShape
                containerColor: control._partContainerColor(trailing.enabled)
                contentColor: control._contentColor
                outlineColor: control._outlineColor
                containerOpacity: trailing.enabled ? 1 : MD.Tokens.button.disabledContainerOpacity
                outlineWidth: control._outlineWidth
                selectedOpacity: MD.Tokens.splitButton.trailingSelectedStateLayerOpacity
                leadingPadding: layout.trailingStartPadding
                trailingPadding: layout.trailingEndPadding
                opticalCoefficient: MD.Tokens.splitButton.opticalCenteringCoefficient
                elevation: control._partElevation(trailing.enabled, trailing.hovered, trailing.down)
            }
        }
    }
}