Add Fusion style for SearchFieldHEADdev

Task-number: QTBUG-137318
Pick-to: 6.10
Change-Id: I01112d5c37e49a2423249fb4065be91c6f7964f3
Reviewed-by: Mitch Curtis <[email protected]>

12 files changed, 167 insertions, 0 deletions

diff --git a/src/quickcontrols/fusion/CMakeLists.txt b/src/quickcontrols/fusion/CMakeLists.txt
index 021b9323dc..7f6d52872a 100644
--- a/src/quickcontrols/fusion/CMakeLists.txt
+++ b/src/quickcontrols/fusion/CMakeLists.txt
@@ -40,6 +40,7 @@ set(qml_files
     "ScrollBar.qml"
     "ScrollView.qml"
     "ScrollIndicator.qml"
+    "SearchField.qml"
     "SelectionRectangle.qml"
     "Slider.qml"
     "SpinBox.qml"
@@ -148,10 +149,18 @@ qt_internal_add_resource(QuickControls2Fusion "qtquickcontrols2fusionstyle"
         "images/[email protected]"
         "images/[email protected]"
         "images/[email protected]"
+        "images/close_circle.png"
+        "images/[email protected]"
+        "images/[email protected]"
+        "images/[email protected]"
         "images/progressmask.png"
         "images/[email protected]"
         "images/[email protected]"
         "images/[email protected]"
+        "images/search-magnifier.png"
+        "images/[email protected]"
+        "images/[email protected]"
+        "images/[email protected]"
 )
 
 _qt_internal_add_qml_static_plugin_dependency(qtquickcontrols2fusionstyleplugin quickwindow)
diff --git a/src/quickcontrols/fusion/SearchField.qml b/src/quickcontrols/fusion/SearchField.qml
new file mode 100644
index 0000000000..c09d3f0f06
--- /dev/null
+++ b/src/quickcontrols/fusion/SearchField.qml
@@ -0,0 +1,150 @@
+// 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
+
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls.impl
+import QtQuick.Controls.Fusion
+import QtQuick.Controls.Fusion.impl
+
+
+T.SearchField {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding,
+                             searchIndicator.implicitIndicatorHeight + topPadding + bottomPadding)
+
+    leftPadding: padding + (control.mirrored
+                            ? (!clearIndicator.indicator || !clearIndicator.indicator.visible ? 0 : clearIndicator.indicator.width + spacing)
+                            : (!searchIndicator.indicator || !searchIndicator.indicator.visible ? 0 : searchIndicator.indicator.width + spacing))
+    rightPadding: padding + (control.mirrored
+                             ? (!searchIndicator.indicator || !searchIndicator.indicator.visible ? 0 : searchIndicator.indicator.width + spacing)
+                             : (!clearIndicator.indicator || !clearIndicator.indicator.visible ? 0 : clearIndicator.indicator.width + spacing))
+
+    delegate: MenuItem {
+        width: ListView.view.width
+        text: model[control.textRole]
+        font.weight: control.currentIndex === index ? Font.DemiBold : Font.Normal
+        highlighted: control.currentIndex === index
+        hoverEnabled: control.hoverEnabled
+
+        required property var model
+        required property int index
+    }
+
+    searchIndicator.indicator: Rectangle {
+        implicitWidth: 20
+        implicitHeight: 20
+
+        x: !control.mirrored ? 2 : control.width - width - 2
+        y: control.topPadding + (control.availableHeight - height) / 2
+        color: control.palette.base
+
+        ColorImage {
+            x: (parent.width - width) / 2
+            y: (parent.height - height) / 2
+            width: 18
+            height: 18
+            color: control.palette.buttonText
+            source: "qrc:/qt-project.org/imports/QtQuick/Controls/Fusion/images/search-magnifier.png"
+            opacity: enabled ? 1 : 0.3
+        }
+    }
+
+    clearIndicator.indicator: Rectangle {
+        implicitWidth: 20
+        implicitHeight: 20
+
+        x: control.mirrored ? 2 : control.width - width - 2
+        y: control.topPadding + (control.availableHeight - height) / 2
+        visible: control.text.length > 0
+        color: control.palette.base
+
+        ColorImage {
+            x: (parent.width - width) / 2
+            y: (parent.height - height) / 2
+            width: 18
+            height: 18
+            color: control.palette.buttonText
+            source: "qrc:/qt-project.org/imports/QtQuick/Controls/Fusion/images/close_circle.png"
+            opacity: enabled ? 1 : 0.3
+        }
+    }
+
+    contentItem: T.TextField {
+        leftPadding: !control.mirrored ? 6 : 0
+        rightPadding: !control.mirrored ? 6 : 0
+
+        text: control.text
+
+        color: control.palette.text
+        selectionColor: control.palette.highlight
+        selectedTextColor: control.palette.highlightedText
+        verticalAlignment: TextInput.AlignVCenter
+    }
+
+    background: Rectangle {
+        implicitWidth: 120
+        implicitHeight: 24
+
+        radius: 2
+        color: control.palette.base
+        border.color: control.activeFocus ? Fusion.highlightedOutline(control.palette) : Fusion.outline(control.palette)
+
+        Rectangle {
+            x: 1; y: 1
+            width: parent.width - 2
+            height: parent.height - 2
+            color: "transparent"
+            border.color: Color.transparent(Fusion.highlightedOutline(control.palette), 40 / 255)
+            visible: control.activeFocus
+            radius: 1.7
+        }
+
+        Rectangle {
+            x: 2
+            y: 1
+            width: parent.width - 4
+            height: 1
+            color: Fusion.topShadow
+        }
+    }
+
+    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
+        palette: control.palette
+
+        contentItem: ListView {
+            clip: true
+            implicitHeight: contentHeight
+            model: control.delegateModel
+            currentIndex: control.currentIndex
+            highlightMoveDuration: 0
+
+            T.ScrollIndicator.vertical: ScrollIndicator { }
+        }
+
+        background: Rectangle {
+            color: control.popup.palette.window
+            border.color: Fusion.outline(control.palette)
+
+            Rectangle {
+                z: -1
+                x: 1; y: 1
+                width: parent.width
+                height: parent.height
+                color: control.palette.shadow
+                opacity: 0.2
+            }
+        }
+    }
+}
diff --git a/src/quickcontrols/fusion/images/close_circle.png b/src/quickcontrols/fusion/images/close_circle.png
new file mode 100644
index 0000000000..5231b23bb5
--- /dev/null
+++ b/src/quickcontrols/fusion/images/close_circle.png
diff --git a/src/quickcontrols/fusion/images/close_circle.svg b/src/quickcontrols/fusion/images/close_circle.svg
new file mode 100644
index 0000000000..1314001c20
--- /dev/null
+++ b/src/quickcontrols/fusion/images/close_circle.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4ZM12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.4644 15.5355C8.07388 15.145 8.07388 14.5118 8.4644 14.1213L10.5857 12L8.46444 9.87868C8.07392 9.48815 8.07392 8.85499 8.46444 8.46447C8.85496 8.07394 9.48813 8.07394 9.87865 8.46447L12 10.5858L14.1213 8.46446C14.5118 8.07394 15.1449 8.07394 15.5355 8.46446C15.926 8.85499 15.926 9.48815 15.5355 9.87868L13.4142 12L15.5355 14.1213C15.926 14.5118 15.926 15.145 15.5355 15.5355C15.145 15.9261 14.5118 15.9261 14.1213 15.5355L12 13.4142L9.87862 15.5355C9.48809 15.9261 8.85493 15.9261 8.4644 15.5355Z" fill="black"/>
+</svg>
diff --git a/src/quickcontrols/fusion/images/[email protected] b/src/quickcontrols/fusion/images/[email protected]
new file mode 100644
index 0000000000..b31f1769c4
--- /dev/null
+++ b/src/quickcontrols/fusion/images/[email protected]
diff --git a/src/quickcontrols/fusion/images/[email protected] b/src/quickcontrols/fusion/images/[email protected]
new file mode 100644
index 0000000000..020d43832a
--- /dev/null
+++ b/src/quickcontrols/fusion/images/[email protected]
diff --git a/src/quickcontrols/fusion/images/[email protected] b/src/quickcontrols/fusion/images/[email protected]
new file mode 100644
index 0000000000..366f621f6d
--- /dev/null
+++ b/src/quickcontrols/fusion/images/[email protected]
diff --git a/src/quickcontrols/fusion/images/search-magnifier.png b/src/quickcontrols/fusion/images/search-magnifier.png
new file mode 100644
index 0000000000..5b2eb5d94c
--- /dev/null
+++ b/src/quickcontrols/fusion/images/search-magnifier.png
diff --git a/src/quickcontrols/fusion/images/search-magnifier.svg b/src/quickcontrols/fusion/images/search-magnifier.svg
new file mode 100644
index 0000000000..7904ca80f7
--- /dev/null
+++ b/src/quickcontrols/fusion/images/search-magnifier.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.2929 14.2929C14.6834 13.9024 15.3166 13.9024 15.7071 14.2929L21.7071 20.2929C22.0976 20.6834 22.0976 21.3166 21.7071 21.7071C21.3166 22.0976 20.6834 22.0976 20.2929 21.7071L14.2929 15.7071C13.9024 15.3166 13.9024 14.6834 14.2929 14.2929Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 16C13.3137 16 16 13.3137 16 10C16 6.68629 13.3137 4 10 4C6.68629 4 4 6.68629 4 10C4 13.3137 6.68629 16 10 16ZM10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18Z" fill="black"/>
+</svg>
diff --git a/src/quickcontrols/fusion/images/[email protected] b/src/quickcontrols/fusion/images/[email protected]
new file mode 100644
index 0000000000..ed1168dfbb
--- /dev/null
+++ b/src/quickcontrols/fusion/images/[email protected]
diff --git a/src/quickcontrols/fusion/images/[email protected] b/src/quickcontrols/fusion/images/[email protected]
new file mode 100644
index 0000000000..a7148787fe
--- /dev/null
+++ b/src/quickcontrols/fusion/images/[email protected]
diff --git a/src/quickcontrols/fusion/images/[email protected] b/src/quickcontrols/fusion/images/[email protected]
new file mode 100644
index 0000000000..bccb47d85f
--- /dev/null
+++ b/src/quickcontrols/fusion/images/[email protected]