SearchField.qml 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
  1. // Copyright (C) 2025 The Qt Company Ltd.
  2. // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
  3. // Qt-Security score:significant reason:default
  4. pragma ComponentBehavior: Bound
  5. import QtQuick
  6. import QtQuick.Templates as T
  7. import QtQuick.Controls.impl
  8. import QtQuick.Controls.FluentWinUI3.impl as Impl
  9. T.SearchField {
  10. id: control
  11. implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
  12. implicitContentWidth + leftPadding + rightPadding)
  13. + searchIndicator.implicitIndicatorWidth + clearIndicator.implicitIndicatorWidth
  14. implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
  15. implicitContentHeight + topPadding + bottomPadding,
  16. searchIndicator.implicitIndicatorHeight + topPadding + bottomPadding)
  17. spacing: __config.contentItem.spacing / 2 || 0
  18. topPadding: __config.topPadding || 0
  19. bottomPadding: __config.bottomPadding || 0
  20. readonly property real __clearIndicator: (!clearIndicator.indicator || !clearIndicator.indicator.visible ? 0 : clearIndicator.indicator.width + control.spacing)
  21. readonly property real __searchIndicator: (!searchIndicator.indicator || !searchIndicator.indicator.visible ? 0 : searchIndicator.indicator.width + control.spacing)
  22. leftPadding: __config.leftPadding + (control.mirrored ? __clearIndicator + __searchIndicator : 0)
  23. rightPadding: __config.rightPadding + (control.mirrored ? 0 : __clearIndicator + __searchIndicator)
  24. topInset: -__config.topInset || 0
  25. bottomInset: -__config.bottomInset || 0
  26. leftInset: -__config.leftInset || 0
  27. rightInset: -__config.rightInset || 0
  28. readonly property string __currentState: [
  29. !control.enabled && "disabled",
  30. (control.searchIndicator.pressed && control.clearIndicator.pressed) && "hovered",
  31. control.popup.visible && "open",
  32. (control.searchIndicator.pressed && control.clearIndicator.pressed) && "pressed"
  33. ].filter(Boolean).join("_") || "normal"
  34. readonly property var __config: (control.popup.visible
  35. ? Config.controls.editablecombobox[__currentState]
  36. : Config.controls.combobox[__currentState]) || {}
  37. readonly property Item __focusFrameTarget: null
  38. readonly property bool __isHighContrast: Application.styleHints.accessibility.contrastPreference === Qt.HighContrast
  39. delegate: ItemDelegate {
  40. width: ListView.view.width
  41. text: model[control.textRole]
  42. palette.text: control.palette.text
  43. palette.highlightedText: control.palette.highlightedText
  44. font.weight: control.currentIndex === index ? Font.DemiBold : Font.Normal
  45. highlighted: control.highlightedIndex === index
  46. hoverEnabled: control.hoverEnabled
  47. required property var model
  48. required property int index
  49. }
  50. searchIndicator.indicator: Impl.StyleImage {
  51. // use SpinBox indicator assets as they share the same style
  52. property string state: [
  53. (control.searchIndicator.hovered || control.searchIndicator.pressed) && "up",
  54. (control.searchIndicator.indicator.enabled && control.searchIndicator.hovered && !control.searchIndicator.pressed) && "hovered",
  55. (control.searchIndicator.indicator.enabled && control.searchIndicator.pressed) && "pressed",
  56. (!control.searchIndicator.indicator.enabled) && "disabled"
  57. ].filter(Boolean).join("_") || "normal"
  58. readonly property var indicatorConfig: Config.controls.spinbox[state] || {}
  59. imageConfig: indicatorConfig.indicator_up_background
  60. x: !control.mirrored ? control.width - width - control.spacing : control.spacing
  61. y: control.topPadding + (control.availableHeight - height) / 2
  62. implicitWidth: 32
  63. implicitHeight: 24
  64. ColorImage {
  65. x: (parent.width - width) / 2
  66. y: (parent.height - height) / 2
  67. width: 13
  68. height: 13
  69. source: Qt.resolvedUrl("icons/search-magnifier")
  70. color: control.palette.placeholderText
  71. opacity: control.searchIndicator.pressed ? 0.7 : 1
  72. }
  73. }
  74. clearIndicator.indicator: Impl.StyleImage {
  75. // use SpinBox indicator assets as they share the same style
  76. property string state: [
  77. (control.clearIndicator.hovered || control.clearIndicator.pressed) && "down",
  78. (control.clearIndicator.indicator.enabled && control.clearIndicator.hovered && !control.clearIndicator.pressed) && "hovered",
  79. (control.clearIndicator.indicator.enabled && control.clearIndicator.pressed) && "pressed",
  80. (!control.clearIndicator.indicator.enabled) && "disabled"
  81. ].filter(Boolean).join("_") || "normal"
  82. readonly property var indicatorConfig: Config.controls.spinbox[state] || {}
  83. imageConfig: indicatorConfig.indicator_down_background
  84. x: (!searchIndicator.indicator || !searchIndicator.indicator.visible)
  85. ? (!control.mirrored ? control.width - width - control.spacing : control.spacing)
  86. : (!control.mirrored ? control.width - width - (control.spacing * 2) - searchIndicator.indicator.width : searchIndicator.indicator.width + (control.spacing * 2))
  87. y: control.topPadding + (control.availableHeight - height) / 2
  88. implicitWidth: 32
  89. implicitHeight: 24
  90. visible: control.text.length > 0
  91. ColorImage {
  92. x: (parent.width - width) / 2
  93. y: (parent.height - height) / 2
  94. width: 13
  95. height: 13
  96. source: Qt.resolvedUrl("icons/close_big")
  97. color: control.palette.placeholderText
  98. opacity: control.clearIndicator.pressed ? 0.7 : 1
  99. }
  100. }
  101. contentItem: T.TextField {
  102. leftPadding: control.__config.label_contentItem.leftPadding
  103. rightPadding: control.__config.label_contentItem.rightPadding
  104. topPadding: control.__config.label_contentItem.topPadding
  105. bottomPadding: control.__config.label_contentItem.bottomPadding
  106. implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
  107. contentHeight + topPadding + bottomPadding)
  108. text: control.text
  109. color: control.palette.text
  110. selectionColor: control.palette.highlight
  111. selectedTextColor: control.palette.highlightedText
  112. horizontalAlignment: control.__config.label_text.textHAlignment
  113. verticalAlignment: control.__config.label_text.textVAlignment
  114. readonly property Item __focusFrameControl: control
  115. }
  116. background: ItemGroup {
  117. Impl.StyleImage {
  118. visible: !control.__isHighContrast
  119. imageConfig: control.__config.background
  120. Item {
  121. visible: control.popup.visible || control.activeFocus
  122. width: parent.width
  123. height: 2
  124. y: parent.height - height
  125. Impl.FocusStroke {
  126. width: parent.width
  127. height: parent.height
  128. radius: control.popup.visible ? 0 : control.__config.background.bottomOffset
  129. color: control.palette.accent
  130. }
  131. }
  132. }
  133. Rectangle {
  134. visible: control.__isHighContrast
  135. implicitWidth: control.__config.background.width
  136. implicitHeight: control.__config.background.height
  137. color: control.palette.window
  138. border.color: control.hovered ? control.palette.accent : control.palette.text
  139. radius: 4
  140. }
  141. }
  142. popup: T.Popup {
  143. y: control.height
  144. width: control.width
  145. height: control.suggestionCount > 0 ? Math.min(contentItem.implicitHeight + topPadding + bottomPadding, control.Window.height - topMargin - bottomMargin) : 0
  146. topMargin: 8
  147. bottomMargin: 8
  148. palette: control.palette
  149. topPadding: control.__config.popup_contentItem.topPadding || 0
  150. leftPadding: control.__config.popup_contentItem.leftPadding || 0
  151. rightPadding: control.__config.popup_contentItem.rightPadding || 0
  152. bottomPadding: control.__config.popup_contentItem.bottomPadding || 0
  153. contentItem: ListView {
  154. clip: true
  155. implicitHeight: contentHeight
  156. model: control.delegateModel
  157. currentIndex: control.highlightedIndex
  158. highlightMoveDuration: 0
  159. }
  160. enter: Transition {
  161. NumberAnimation { property: "height"; from: control.popup.height / 3; to: control.popup.height; easing.type: Easing.OutCubic; duration: 250 }
  162. }
  163. background: ItemGroup {
  164. Impl.StyleImage {
  165. visible: !control.__isHighContrast
  166. imageConfig: control.__config.popup_background.filePath ? control.__config.popup_background : Config.controls.popup["normal"].background // fallback to regular popup
  167. }
  168. Rectangle {
  169. visible: control.__isHighContrast
  170. implicitWidth: Config.controls.popup["normal"].background.width
  171. implicitHeight: Config.controls.popup["normal"].background.height
  172. color: control.palette.window
  173. border.color: control.palette.text
  174. radius: 4
  175. }
  176. }
  177. }
  178. }