SearchAppBar.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.Templates as T
import Fluid as MD
import "../core/UiMetrics.js" as UiMetrics
import "../internal/MotionAnimation.js" as MotionAnimation
 
MD.BaseAppBar {
    id: control
 
    Accessible.role: Accessible.ToolBar
    Accessible.name: qsTr("Search")
 
    
    enum Mode {
        Launcher,
        Editable
    }
 
    enum TextAlignment {
        Start,
        Center
    }
 
    property int mode: SearchAppBar.Launcher
 
    property string text
 
    property string placeholderText: qsTr("Search")
 
    
    property int textAlignment: SearchAppBar.Start
 
    property int inputMethodHints: Qt.ImhNone
 
    property var validator: null
 
    property MD.AppBarAction searchNavigationAction: defaultSearchAction
 
    property list<MD.AppBarAction> searchActions
 
    property color searchContainerColor: MD.Style.surfaceContainerColor
 
    property color scrolledSearchContainerColor: MD.Style.surfaceContainerHighestColor
 
    property color searchTextColor: MD.Style.onSurfaceColor
 
    property color searchContentColor: MD.Style.onSurfaceVariantColor
 
    signal activated
 
    signal accepted
 
    readonly property bool _centeredText: textAlignment !== 0
 
    property var _visibleSearchActions: []
 
    property var _searchOverflowActions: []
 
    property real _capsuleWidth: 0
 
    property var _searchFieldItem: null
 
    property var _searchActionRepeater: null
 
    collapsedHeight: MD.Tokens.appBar.smallContainerHeight
    expandedHeight: collapsedHeight
    scrollBehavior: MD.BaseAppBar.EnterAlways
    minimumCenterWidth: MD.Tokens.appBar.searchContainerHeight + MD.Tokens.appBar.searchOuterFieldMargin * 2
    supplementalOverflowActions: _searchOverflowActions
 
    function _searchActionWidth(index) {
        const item = _searchActionRepeater ? _searchActionRepeater.itemAt(index) : null;
        return item ? item.implicitWidth : MD.Tokens.appBar.minimumInteractiveSize;
    }
 
    function _reflowSearchActions() {
        const candidates = [];
        const forcedVisible = [];
        let usedWidth = 0;
 
        for (let index = 0; index < searchActions.length; ++index) {
            const action = searchActions[index];
            if (!action || !action.visible)
                continue;
            const entry = {
                action: action,
                index: index,
                width: _searchActionWidth(index)
            };
            if (action.overflowPolicy === MD.AppBarAction.NeverOverflow) {
                forcedVisible.push(entry);
                usedWidth += entry.width;
            } else if (action.overflowPolicy !== MD.AppBarAction.AlwaysOverflow) {
                candidates.push(entry);
            }
        }
 
        const leadingWidth = searchNavigationAction && searchNavigationAction.visible ? MD.Tokens.appBar.minimumInteractiveSize + MD.Tokens.appBar.searchContainedLeadingSpace : MD.Tokens.appBar.searchContainedNoActionsLeadingSpace;
        const fixedWidth = leadingWidth + MD.Tokens.appBar.searchContainedTrailingSpace + MD.Tokens.appBar.titleInset * 2;
        const budget = Math.max(0, _capsuleWidth - fixedWidth);
 
        candidates.sort((left, right) => {
            if (left.action.priority !== right.action.priority)
                return right.action.priority - left.action.priority;
            return left.index - right.index;
        });
 
        const selected = new Set();
        for (const entry of forcedVisible)
            selected.add(entry.action);
        for (const entry of candidates) {
            if (usedWidth + entry.width <= budget) {
                selected.add(entry.action);
                usedWidth += entry.width;
            }
        }
 
        const visible = [];
        const overflow = [];
        for (const action of searchActions) {
            if (!action || !action.visible)
                continue;
            if (action.overflowPolicy === MD.AppBarAction.AlwaysOverflow || (action.overflowPolicy === MD.AppBarAction.AutoOverflow && !selected.has(action))) {
                overflow.push(action);
            } else {
                visible.push(action);
            }
        }
        _visibleSearchActions = visible;
        _searchOverflowActions = overflow;
    }
 
    function _scheduleSearchReflow() {
        _reflowSearchActions();
        Qt.callLater(() => control._reflowSearchActions());
    }
 
    function forceSearchFocus() {
        if (mode === SearchAppBar.Editable && _searchFieldItem)
            _searchFieldItem.forceActiveFocus();
    }
 
    function clear() {
        text = "";
    }
 
    onSearchActionsChanged: _scheduleSearchReflow()
    onSearchNavigationActionChanged: _scheduleSearchReflow()
    on_CapsuleWidthChanged: _scheduleSearchReflow()
    onModeChanged: {
        if (mode === SearchAppBar.Editable && _searchFieldItem)
            Qt.callLater(() => control.forceSearchFocus());
    }
 
    Component.onCompleted: _scheduleSearchReflow()
 
    MD.AppBarAction {
        id: defaultSearchAction
 
        text: qsTr("Search")
        icon.name: MD.SymbolNames.symbolSearch
        overflowPolicy: MD.AppBarAction.NeverOverflow
        onTriggered: control.activated()
    }
 
    centerContent: Component {
        Item {
            id: searchArea
 
            readonly property real physicalLeadingWidth: control.layoutMirrored ? control.trailingWidth : control.leadingWidth
            readonly property real physicalTrailingWidth: control.layoutMirrored ? control.leadingWidth : control.trailingWidth
            readonly property real regionLeft: physicalLeadingWidth + MD.Tokens.appBar.searchOuterFieldMargin
            readonly property real regionRight: width - physicalTrailingWidth - MD.Tokens.appBar.searchOuterFieldMargin
            readonly property real availableWidth: Math.max(0, regionRight - regionLeft)
            readonly property real desiredWidth: availableWidth <= MD.Tokens.appBar.searchAdaptiveBreakpoint ? availableWidth : Math.max(MD.Tokens.appBar.searchAdaptiveBreakpoint, availableWidth * MD.Tokens.appBar.searchAdaptiveWidthFraction)
            readonly property real capsuleX: Math.max(regionLeft, Math.min((width - desiredWidth) / 2, regionRight - desiredWidth))
 
            Binding {
                target: control
                property: "_capsuleWidth"
                value: capsule.width
            }
 
            Rectangle {
                id: capsule
                objectName: "searchCapsule"
 
                x: searchArea.capsuleX
                y: (control.collapsedHeight - height) / 2
                width: Math.max(0, Math.min(searchArea.availableWidth, searchArea.desiredWidth))
                height: MD.Tokens.appBar.searchContainerHeight
                topLeftRadius: UiMetrics.resolveShapeRadius(MD.Tokens.shape.cornerFull.topLeft,
                                                            width, height)
                topRightRadius: UiMetrics.resolveShapeRadius(MD.Tokens.shape.cornerFull.topRight,
                                                             width, height)
                bottomLeftRadius: UiMetrics.resolveShapeRadius(
                                          MD.Tokens.shape.cornerFull.bottomLeft, width, height)
                bottomRightRadius: UiMetrics.resolveShapeRadius(
                                           MD.Tokens.shape.cornerFull.bottomRight, width, height)
                color: control.lifted ? control.scrolledSearchContainerColor : control.searchContainerColor
                clip: true
 
                Behavior on color {
                    ColorAnimation {
                        duration: MotionAnimation.expressiveFastEffectsDuration
                        easing.type: Easing.BezierSpline
                        easing.bezierCurve: MotionAnimation.expressiveFastEffectsCurve
                    }
                }
 
                T.AbstractButton {
                    id: launcherButton
                    objectName: "searchLauncher"
 
                    anchors.fill: parent
                    text: control.text.length > 0 ? control.text : control.placeholderText
                    visible: control.mode === SearchAppBar.Launcher
                    hoverEnabled: true
                    focusPolicy: Qt.StrongFocus
                    background: Item {}
 
                    Accessible.role: Accessible.Button
                    Accessible.name: text
 
                    onClicked: control.activated()
                    Keys.onPressed: event => {
                        if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter || event.key === Qt.Key_Space) {
                            control.activated();
                            event.accepted = true;
                        }
                    }
                }
 
                MD.AppBarActionDelegate {
                    id: searchNavigationButton
                    objectName: "searchNavigationActionButton"
 
                    anchors.left: parent.left
                    anchors.verticalCenter: parent.verticalCenter
                    actionData: control.searchNavigationAction || defaultSearchAction
                    contentColor: control.searchContentColor
                    visible: control.searchNavigationAction !== null && control.searchNavigationAction.visible
                    accessibilityIgnored: control.mode === SearchAppBar.Launcher
                                          && control.searchNavigationAction === defaultSearchAction
                    z: 2
                }
 
                Row {
                    id: searchTrailingRow
                    objectName: "searchTrailingActions"
 
                    anchors.right: parent.right
                    anchors.verticalCenter: parent.verticalCenter
                    spacing: MD.Tokens.appBar.searchTrailingActionsGap
                    z: 2
 
                    Repeater {
                        id: searchActionRepeater
                        Component.onCompleted: {
                            control._searchActionRepeater = searchActionRepeater;
                            control._scheduleSearchReflow();
                        }
                        Component.onDestruction: {
                            if (control._searchActionRepeater === searchActionRepeater)
                                control._searchActionRepeater = null;
                        }
 
                        model: control.searchActions
 
                        delegate: MD.AppBarActionDelegate {
                            id: searchActionDelegate
                            required property var modelData
 
                            actionData: modelData
                            contentColor: control.searchContentColor
                            visible: control._visibleSearchActions.indexOf(actionData) >= 0
                            onImplicitWidthChanged: control._scheduleSearchReflow()
 
                            Connections {
                                target: searchActionDelegate.modelData
                                function onVisibleChanged() {
                                    control._scheduleSearchReflow();
                                }
                                function onPriorityChanged() {
                                    control._scheduleSearchReflow();
                                }
                                function onOverflowPolicyChanged() {
                                    control._scheduleSearchReflow();
                                }
                                function onPresentationChanged() {
                                    control._scheduleSearchReflow();
                                }
                                function onTextChanged() {
                                    control._scheduleSearchReflow();
                                }
                            }
                        }
                    }
                }
 
                readonly property real physicalStartWidth: control.layoutMirrored ? searchTrailingRow.width : searchNavigationButton.width
                readonly property real physicalEndWidth: control.layoutMirrored ? searchNavigationButton.width : searchTrailingRow.width
                readonly property real textLeft: physicalStartWidth + (searchNavigationButton.visible ? MD.Tokens.appBar.searchContainedLeadingSpace : MD.Tokens.appBar.searchContainedNoActionsLeadingSpace)
                readonly property real textRight: width - physicalEndWidth - (searchTrailingRow.width > 0 ? MD.Tokens.appBar.searchContainedTrailingSpace : MD.Tokens.appBar.searchContainedNoActionsTrailingSpace)
 
                MD.Label {
                    id: launcherLabel
                    objectName: "searchLauncherLabel"
 
                    x: capsule.textLeft
                    y: 0
                    width: Math.max(0, capsule.textRight - capsule.textLeft)
                    height: parent.height
                    text: control.text.length > 0 ? control.text : control.placeholderText
                    typescale: MD.Tokens.typescale.bodyLarge
                    color: control.searchTextColor
                    opacity: control.text.length > 0 ? 1 : MD.Tokens.appBar.disabledContentOpacity
                    horizontalAlignment: control._centeredText ? Text.AlignHCenter : control.layoutMirrored ? Text.AlignRight : Text.AlignLeft
                    verticalAlignment: Text.AlignVCenter
                    maximumLineCount: 1
                    elide: Text.ElideRight
                    visible: control.mode === SearchAppBar.Launcher
                    Accessible.ignored: true
                }
 
                T.TextField {
                    id: searchFieldProxy
                    Component.onCompleted: control._searchFieldItem = searchFieldProxy
                    Component.onDestruction: {
                        if (control._searchFieldItem === searchFieldProxy)
                            control._searchFieldItem = null;
                    }
                    objectName: "searchField"
 
                    x: capsule.textLeft
                    y: 0
                    width: Math.max(0, capsule.textRight - capsule.textLeft)
                    height: parent.height
                    text: control.text
                    placeholderText: control.placeholderText
                    inputMethodHints: control.inputMethodHints
                    validator: control.validator
                    color: control.searchTextColor
                    placeholderTextColor: control.searchContentColor
                    selectionColor: control.MD.Style.primaryColor
                    selectedTextColor: control.MD.Style.onPrimaryColor
                    font.family: control.MD.Style.plainFontFamily
                    font.pixelSize: MD.Tokens.typescale.bodyLarge.fontSize
                    font.weight: MD.Tokens.typescale.bodyLarge.fontWeight
                    font.letterSpacing: MD.Tokens.typescale.bodyLarge.tracking
                    horizontalAlignment: control._centeredText ? Text.AlignHCenter : control.layoutMirrored ? Text.AlignRight : Text.AlignLeft
                    verticalAlignment: Text.AlignVCenter
                    leftPadding: 0
                    rightPadding: 0
                    topPadding: 0
                    bottomPadding: 0
                    focusPolicy: Qt.StrongFocus
                    visible: control.mode === SearchAppBar.Editable
                    background: Item {}
 
                    Accessible.role: Accessible.EditableText
                    Accessible.name: control.placeholderText
                    Accessible.searchEdit: true
 
                    onTextEdited: control.text = text
                    onAccepted: control.accepted()
                }
 
                TapHandler {
                    enabled: control.mode === SearchAppBar.Editable
                    gesturePolicy: TapHandler.ReleaseWithinBounds
                    onTapped: searchFieldProxy.forceActiveFocus()
                }
            }
        }
    }
}