QuickControls: Add vertical and horizontal header view delegates

Implement QQuickHeaderViewDelegate as the base class for header view
delegates, introducing 'headerView' and 'orientation' properties.
Separate previous delegate settings into HorizontalHeaderViewDelegate
and VerticalHeaderViewDelegate components for Basic, Fusion, and Imagine
styles.

This change improves the modularity and reusability of header view
delegates across different styles. It also allows for more consistent
behavior and easier customization of header views.

A test suite has been added to verify default property settings and
ensure the new components work without warnings.

[ChangeLog][QtQuickControls][HeaderView] Add dedicated delegate
components for vertical and horizontal header views.

Task-number: QTBUG-70326
Change-Id: I8831e77f6909bdae13c3a7262145ab156f63a59a
Reviewed-by: Mitch Curtis <[email protected]>

2 files changed, 49 insertions, 62 deletions

diff --git a/examples/quickcontrols/spreadsheets/Spreadsheets/ColumnHeaderView.qml b/examples/quickcontrols/spreadsheets/Spreadsheets/ColumnHeaderView.qml
index 25412d8f54..feaaed4e1e 100644
--- a/examples/quickcontrols/spreadsheets/Spreadsheets/ColumnHeaderView.qml
+++ b/examples/quickcontrols/spreadsheets/Spreadsheets/ColumnHeaderView.qml
@@ -26,35 +26,15 @@ HorizontalHeaderView {
         orientation: Qt.Horizontal
     }
 
-    delegate: Rectangle {
+    textRole: "columnName"
+    delegate: HorizontalHeaderViewDelegate {
         id: headerDelegate
 
         required property var index
-        required property bool selected
+        required property int column
         required property bool containsDrag
-        readonly property real cellPadding: 8
-        readonly property bool containsMenu: columnMenu.column === column
-
-        implicitWidth: title.implicitWidth + (cellPadding * 2)
-        implicitHeight: Math.max(root.height, title.implicitHeight + (cellPadding * 2))
-        border {
-            width: containsDrag || containsMenu ? 1 : 0
-            color: palette.highlight
-        }
-        color: selected ? palette.highlight : palette.button
-
-        gradient: Gradient {
-            GradientStop {
-                position: 0
-                color: Qt.styleHints.colorScheme === Qt.Light ? headerDelegate.color
-                                                              : Qt.lighter(headerDelegate.color, 1.3)
-            }
-            GradientStop {
-                position: 1
-                color: Qt.styleHints.colorScheme === Qt.Light ? Qt.darker(headerDelegate.color, 1.3)
-                                                              : headerDelegate.color
-            }
-        }
+        readonly property bool visibleBorder: ((columnMenu.column === column)
+                                               || containsDrag)
 
         function rightClicked() {
             columnMenu.column = index
@@ -62,10 +42,25 @@ HorizontalHeaderView {
             columnMenu.popup(menu_pos)
         }
 
-        Label {
-            id: title
-            anchors.centerIn: parent
-            text: model.columnName
+        Binding {
+            target: headerDelegate.background
+            property: "color"
+            value: headerDelegate.palette.highlight
+            when: headerDelegate.highlighted
+        }
+
+        Binding {
+            target: headerDelegate.background
+            property: "border.width"
+            value: headerDelegate.visibleBorder ? 1 : 0
+            when: (headerDelegate.background as Rectangle) ?? false
+        }
+
+        Binding {
+            target: headerDelegate.background
+            property: "border.color"
+            value: headerDelegate.palette.highlight
+            when: (headerDelegate.background as Rectangle) ?? false
         }
 
         HeaderViewTapHandler {
diff --git a/examples/quickcontrols/spreadsheets/Spreadsheets/RowHeaderView.qml b/examples/quickcontrols/spreadsheets/Spreadsheets/RowHeaderView.qml
index 2617ee1801..b83c64a1e6 100644
--- a/examples/quickcontrols/spreadsheets/Spreadsheets/RowHeaderView.qml
+++ b/examples/quickcontrols/spreadsheets/Spreadsheets/RowHeaderView.qml
@@ -26,38 +26,15 @@ VerticalHeaderView {
         orientation: Qt.Vertical
     }
 
-    delegate: Rectangle {
+    textRole: "rowName"
+    delegate: VerticalHeaderViewDelegate {
         id: headerDelegate
 
-        required property var index
-        required property bool selected
-        required property bool current
         required property bool containsDrag
-        readonly property real cellPadding: 8
-        readonly property bool containsMenu: rowMenu.row === row
-
-        implicitHeight: title.implicitHeight + (cellPadding * 2)
-        implicitWidth: Math.max(root.width, title.implicitWidth + (cellPadding * 2))
-
-        border {
-            width: containsDrag || containsMenu ? 1 : 0
-            color: palette.highlight
-        }
-
-        color: selected ? palette.highlight : palette.button
-
-        gradient: Gradient {
-            GradientStop {
-                position: 0
-                color: Qt.styleHints.colorScheme === Qt.Light ? headerDelegate.color
-                                                              : Qt.lighter(headerDelegate.color, 1.3)
-            }
-            GradientStop {
-                position: 1
-                color: Qt.styleHints.colorScheme === Qt.Light ? Qt.darker(headerDelegate.color, 1.3)
-                                                              : headerDelegate.color
-            }
-        }
+        required property var index
+        required property int row
+        readonly property bool visibleBorder: ((rowMenu.row === row)
+                                               || containsDrag)
 
         function rightClicked() {
             rowMenu.row = index
@@ -65,10 +42,25 @@ VerticalHeaderView {
             rowMenu.popup(menu_pos)
         }
 
-        Label {
-            id: title
-            anchors.centerIn: parent
-            text: model.rowName
+        Binding {
+            target: headerDelegate.background
+            property: "color"
+            value: headerDelegate.palette.highlight
+            when: headerDelegate.highlighted
+        }
+
+        Binding {
+            target: headerDelegate.background
+            property: "border.width"
+            value: headerDelegate.visibleBorder ? 1 : 0
+            when: (headerDelegate.background as Rectangle) ?? false
+        }
+
+        Binding {
+            target: headerDelegate.background
+            property: "border.color"
+            value: headerDelegate.palette.highlight
+            when: (headerDelegate.background as Rectangle) ?? false
         }
 
         HeaderViewTapHandler {