SearchField: Add Universal style

Task-number: QTBUG-137318
Change-Id: Id5777edd049185f885100f0399afe1f4f7f6cbe5
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>
(cherry picked from commit de3976722a3f9fec332e256856fb46aef4a51b78)
Reviewed-by: Qt Cherry-pick Bot <cherrypick_bot@qt-project.org>

10 files changed, 158 insertions, 0 deletions

diff --git a/src/quickcontrols/universal/CMakeLists.txt b/src/quickcontrols/universal/CMakeLists.txt
index 2fded13064..74870b3d99 100644
--- a/src/quickcontrols/universal/CMakeLists.txt
+++ b/src/quickcontrols/universal/CMakeLists.txt
@@ -40,6 +40,7 @@ set(qml_files
     "ScrollView.qml"
     "ScrollBar.qml"
     "ScrollIndicator.qml"
+    "SearchField.qml"
     "SelectionRectangle.qml"
     "Slider.qml"
     "SpinBox.qml"
@@ -151,6 +152,10 @@ qt_internal_add_resource(QuickControls2Universal "qtquickcontrols2universalstyle
         "images/checkmark@2x.png"
         "images/checkmark@3x.png"
         "images/checkmark@4x.png"
+        "images/close_big.png"
+        "images/close_big@2x.png"
+        "images/close_big@3x.png"
+        "images/close_big@4x.png"
         "images/downarrow.png"
         "images/downarrow@2x.png"
         "images/downarrow@3x.png"
@@ -163,6 +168,10 @@ qt_internal_add_resource(QuickControls2Universal "qtquickcontrols2universalstyle
         "images/rightarrow@2x.png"
         "images/rightarrow@3x.png"
         "images/rightarrow@4x.png"
+        "images/search-magnifier.png"
+        "images/search-magnifier@2x.png"
+        "images/search-magnifier@3x.png"
+        "images/search-magnifier@4x.png"
 )
 
 _qt_internal_add_qml_static_plugin_dependency(qtquickcontrols2universalstyleplugin quickwindow)
diff --git a/src/quickcontrols/universal/SearchField.qml b/src/quickcontrols/universal/SearchField.qml
new file mode 100644
index 0000000000..5ceda1094c
--- /dev/null
+++ b/src/quickcontrols/universal/SearchField.qml
@@ -0,0 +1,149 @@
+// Copyright (C) 2025 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
+// Qt-Security score:significant reason:default
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Universal
+import QtQuick.Controls.Universal.impl
+
+T.SearchField {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+                   + searchIndicator.implicitIndicatorWidth + clearIndicator.implicitIndicatorWidth
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             searchIndicator.implicitIndicatorHeight + topPadding + bottomPadding)
+
+    leftPadding: padding + (control.mirrored ? __clearIndicatorWidth : __searchIndicatorWidth)
+    rightPadding: padding + (control.mirrored ? __searchIndicatorWidth : __clearIndicatorWidth)
+
+    readonly property real __clearIndicatorWidth: !clearIndicator.indicator || !clearIndicator.indicator.visible
+                                             ? 0 : clearIndicator.indicator.width + spacing
+    readonly property real __searchIndicatorWidth: !searchIndicator.indicator || !searchIndicator.indicator.visible
+                                              ? 0 : searchIndicator.indicator.width + spacing
+
+    Universal.theme: activeFocus ? Universal.Light : undefined
+
+    delegate: ItemDelegate {
+        width: ListView.view.width
+        text: model[control.textRole]
+        palette.text: control.palette.text
+        palette.highlightedText: control.palette.highlightedText
+        font.weight: control.currentIndex === index ? Font.DemiBold : Font.Normal
+        highlighted: control.highlightedIndex === index
+        hoverEnabled: control.hoverEnabled
+
+        required property var model
+        required property int index
+    }
+
+    searchIndicator.indicator: Item {
+        x: !control.mirrored ? control.padding : control.width - width - control.padding
+        y: control.topPadding + (control.availableHeight - height) / 2
+        implicitWidth: 28
+        implicitHeight: 28
+
+        Rectangle {
+            width: parent.width
+            height: parent.height
+            color: control.activeFocus ? control.Universal.accent :
+                   control.searchIndicator.pressed ? control.Universal.baseMediumLowColor :
+                   control.searchIndicator.hovered ? control.Universal.baseLowColor : "transparent"
+            visible: control.searchIndicator.pressed || control.searchIndicator.hovered
+            opacity: control.activeFocus && !control.searchIndicator.pressed ? 0.4 : 1.0
+        }
+
+        ColorImage {
+            x: (parent.width - width) / 2
+            y: (parent.height - height) / 2
+            width: 20
+            height: 20
+            color: !enabled ? control.Universal.chromeDisabledLowColor :
+                              control.activeFocus ? control.Universal.chromeBlackHighColor : control.Universal.baseHighColor
+            source: "qrc:/qt-project.org/imports/QtQuick/Controls/Universal/images/search-magnifier.png"
+        }
+    }
+
+    clearIndicator.indicator: Item {
+        x: control.mirrored ? control.padding : control.width - width - control.padding
+        y: control.topPadding + (control.availableHeight - height) / 2
+        implicitWidth: 28
+        implicitHeight: 28
+        visible: control.text.length > 0
+
+        Rectangle {
+            width: parent.width
+            height: parent.height
+            color: control.activeFocus ? control.Universal.accent :
+                   control.clearIndicator.pressed ? control.Universal.baseMediumLowColor :
+                   control.clearIndicator.hovered ? control.Universal.baseLowColor : "transparent"
+            visible: control.clearIndicator.pressed || control.clearIndicator.hovered
+            opacity: control.activeFocus && !control.clearIndicator.pressed ? 0.4 : 1.0
+        }
+
+        ColorImage {
+            x: (parent.width - width) / 2
+            y: (parent.height - height) / 2
+            width: 20
+            height: 20
+            color: !enabled ? control.Universal.chromeDisabledLowColor :
+                              control.activeFocus ? control.Universal.chromeBlackHighColor : control.Universal.baseHighColor
+            source: "qrc:/qt-project.org/imports/QtQuick/Controls/Universal/images/close_big.png"
+        }
+    }
+
+    contentItem: T.TextField {
+        leftPadding: !control.mirrored ? 6 : 0
+        rightPadding: !control.mirrored ? 6 : 0
+
+        text: control.text
+
+        color: !control.enabled ? control.Universal.chromeDisabledLowColor :
+                                  control.activeFocus ? control.Universal.chromeBlackHighColor : control.Universal.foreground
+        selectionColor: control.Universal.accent
+        selectedTextColor: control.Universal.chromeWhiteColor
+        verticalAlignment: TextInput.AlignVCenter
+    }
+
+    background: Rectangle {
+        implicitWidth: 120
+        implicitHeight: 32
+
+        border.width: 2 // TextControlBorderThemeThickness
+        border.color: !control.enabled ? control.Universal.baseLowColor :
+                       control.activeFocus ? control.Universal.accent :
+                       control.hovered ? control.Universal.baseMediumColor : control.Universal.chromeDisabledLowColor
+        color: control.enabled ? control.Universal.background : control.Universal.baseLowColor
+    }
+
+    popup: T.Popup {
+        y: control.height
+        width: control.width
+        height: Math.min(contentItem.implicitHeight, control.Window.height - control.y - control.height - control.padding)
+        topMargin: 6
+        bottomMargin: 6
+
+        Universal.theme: control.Universal.theme
+        Universal.accent: control.Universal.accent
+
+        contentItem: ListView {
+            clip: true
+            implicitHeight: contentHeight
+            model: control.delegateModel
+            currentIndex: control.highlightedIndex
+            highlightMoveDuration: 0
+
+            T.ScrollIndicator.vertical: ScrollIndicator { }
+        }
+
+        background: Rectangle {
+            color: control.Universal.chromeMediumLowColor
+            border.color: control.Universal.chromeHighColor
+            border.width: 1
+        }
+    }
+}
diff --git a/src/quickcontrols/universal/images/close_big.png b/src/quickcontrols/universal/images/close_big.png
new file mode 100644
index 0000000000..b6b130d9e1
--- /dev/null
+++ b/src/quickcontrols/universal/images/close_big.png
diff --git a/src/quickcontrols/universal/images/close_big@2x.png b/src/quickcontrols/universal/images/close_big@2x.png
new file mode 100644
index 0000000000..504ce40f58
--- /dev/null
+++ b/src/quickcontrols/universal/images/close_big@2x.png
diff --git a/src/quickcontrols/universal/images/close_big@3x.png b/src/quickcontrols/universal/images/close_big@3x.png
new file mode 100644
index 0000000000..88c425ac54
--- /dev/null
+++ b/src/quickcontrols/universal/images/close_big@3x.png
diff --git a/src/quickcontrols/universal/images/close_big@4x.png b/src/quickcontrols/universal/images/close_big@4x.png
new file mode 100644
index 0000000000..55bf55efb9
--- /dev/null
+++ b/src/quickcontrols/universal/images/close_big@4x.png
diff --git a/src/quickcontrols/universal/images/search-magnifier.png b/src/quickcontrols/universal/images/search-magnifier.png
new file mode 100644
index 0000000000..5b2eb5d94c
--- /dev/null
+++ b/src/quickcontrols/universal/images/search-magnifier.png
diff --git a/src/quickcontrols/universal/images/search-magnifier@2x.png b/src/quickcontrols/universal/images/search-magnifier@2x.png
new file mode 100644
index 0000000000..ed1168dfbb
--- /dev/null
+++ b/src/quickcontrols/universal/images/search-magnifier@2x.png
diff --git a/src/quickcontrols/universal/images/search-magnifier@3x.png b/src/quickcontrols/universal/images/search-magnifier@3x.png
new file mode 100644
index 0000000000..a7148787fe
--- /dev/null
+++ b/src/quickcontrols/universal/images/search-magnifier@3x.png
diff --git a/src/quickcontrols/universal/images/search-magnifier@4x.png b/src/quickcontrols/universal/images/search-magnifier@4x.png
new file mode 100644
index 0000000000..bccb47d85f
--- /dev/null
+++ b/src/quickcontrols/universal/images/search-magnifier@4x.png