SearchField.qml 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  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.Fusion
  9. import QtQuick.Controls.Fusion.impl
  10. T.SearchField {
  11. id: control
  12. implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
  13. implicitContentWidth + leftPadding + rightPadding)
  14. implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
  15. implicitContentHeight + topPadding + bottomPadding,
  16. searchIndicator.implicitIndicatorHeight + topPadding + bottomPadding)
  17. leftPadding: padding + (control.mirrored
  18. ? (!clearIndicator.indicator || !clearIndicator.indicator.visible ? 0 : clearIndicator.indicator.width + spacing)
  19. : (!searchIndicator.indicator || !searchIndicator.indicator.visible ? 0 : searchIndicator.indicator.width + spacing))
  20. rightPadding: padding + (control.mirrored
  21. ? (!searchIndicator.indicator || !searchIndicator.indicator.visible ? 0 : searchIndicator.indicator.width + spacing)
  22. : (!clearIndicator.indicator || !clearIndicator.indicator.visible ? 0 : clearIndicator.indicator.width + spacing))
  23. delegate: MenuItem {
  24. width: ListView.view.width
  25. text: model[control.textRole]
  26. font.weight: control.currentIndex === index ? Font.DemiBold : Font.Normal
  27. highlighted: control.highlightedIndex === index
  28. hoverEnabled: control.hoverEnabled
  29. required property var model
  30. required property int index
  31. }
  32. searchIndicator.indicator: PaddedRectangle {
  33. implicitWidth: 22
  34. implicitHeight: 20
  35. height: control.height - 2
  36. x: !control.mirrored ? 1 : control.width - width - 1
  37. y: 1
  38. radius: 1.7
  39. clip: true
  40. topPadding: -2
  41. leftPadding: -2
  42. color: control.searchIndicator.pressed ? Fusion.buttonColor(control.palette, false, true, true) : "transparent"
  43. ColorImage {
  44. x: (parent.width - width) / 2
  45. y: (parent.height - height) / 2
  46. width: 18
  47. height: 18
  48. color: control.palette.buttonText
  49. source: "qrc:/qt-project.org/imports/QtQuick/Controls/Fusion/images/search-magnifier.png"
  50. opacity: enabled ? 1 : 0.3
  51. }
  52. }
  53. clearIndicator.indicator: PaddedRectangle {
  54. implicitWidth: 22
  55. implicitHeight: 20
  56. height: control.height - 2
  57. x: control.mirrored ? 1 : control.width - width - 1
  58. y: 1
  59. visible: control.text.length > 0
  60. radius: 1.7
  61. clip: true
  62. topPadding: -2
  63. leftPadding: -2
  64. color: control.clearIndicator.pressed ? Fusion.buttonColor(control.palette, false, true, true) : "transparent"
  65. ColorImage {
  66. x: (parent.width - width) / 2
  67. y: (parent.height - height) / 2
  68. width: 18
  69. height: 18
  70. color: control.palette.buttonText
  71. source: "qrc:/qt-project.org/imports/QtQuick/Controls/Fusion/images/close_circle.png"
  72. opacity: enabled ? 1 : 0.3
  73. }
  74. }
  75. contentItem: T.TextField {
  76. implicitHeight: contentHeight + topPadding + bottomPadding
  77. leftPadding: !control.mirrored ? 6 : 0
  78. rightPadding: !control.mirrored ? 6 : 0
  79. text: control.text
  80. color: control.palette.text
  81. selectionColor: control.palette.highlight
  82. selectedTextColor: control.palette.highlightedText
  83. verticalAlignment: TextInput.AlignVCenter
  84. ContextMenu.menu: TextEditingContextMenu {
  85. editor: parent
  86. }
  87. }
  88. background: Rectangle {
  89. implicitWidth: 120
  90. implicitHeight: 24
  91. radius: 2
  92. color: control.palette.base
  93. border.color: control.activeFocus ? Fusion.highlightedOutline(control.palette) : Fusion.outline(control.palette)
  94. Rectangle {
  95. x: 1; y: 1
  96. width: parent.width - 2
  97. height: parent.height - 2
  98. color: "transparent"
  99. border.color: Color.transparent(Fusion.highlightedOutline(control.palette), 40 / 255)
  100. visible: control.activeFocus
  101. radius: 1.7
  102. }
  103. Rectangle {
  104. x: 2
  105. y: 1
  106. width: parent.width - 4
  107. height: 1
  108. color: Fusion.topShadow
  109. }
  110. Rectangle {
  111. x: !control.mirrored ? 1 : parent.width - width - 1
  112. y: 1
  113. width: control.searchIndicator.indicator && control.searchIndicator.indicator.visible
  114. ? control.searchIndicator.indicator.width + 1 : 0
  115. height: parent.height - 2
  116. radius: 2
  117. gradient: Gradient {
  118. GradientStop {
  119. position: 0
  120. color: Fusion.gradientStart(Fusion.buttonColor(control.palette, control.visualFocus, false, control.searchIndicator.hovered))
  121. }
  122. GradientStop {
  123. position: 1
  124. color: Fusion.gradientStop(Fusion.buttonColor(control.palette, control.visualFocus, false, control.searchIndicator.hovered))
  125. }
  126. }
  127. Rectangle {
  128. x: !control.mirrored ? parent.width - 1 : 0
  129. width: 1
  130. height: parent.height
  131. color: Fusion.outline(control.palette)
  132. }
  133. }
  134. Rectangle {
  135. x: control.mirrored ? 1 : parent.width - width - 1
  136. y: 1
  137. width: control.clearIndicator.indicator && control.clearIndicator.indicator.visible
  138. ? control.clearIndicator.indicator.width + 1 : 0
  139. height: parent.height - 2
  140. radius: 2
  141. gradient: Gradient {
  142. GradientStop {
  143. position: 0
  144. color: Fusion.gradientStart(Fusion.buttonColor(control.palette, control.visualFocus, false, control.clearIndicator.hovered))
  145. }
  146. GradientStop {
  147. position: 1
  148. color: Fusion.gradientStop(Fusion.buttonColor(control.palette, control.visualFocus, false, control.clearIndicator.hovered))
  149. }
  150. }
  151. Rectangle {
  152. x: control.mirrored ? parent.width - 1 : 0
  153. width: 1
  154. height: parent.height
  155. color: Fusion.outline(control.palette)
  156. }
  157. }
  158. }
  159. popup: T.Popup {
  160. y: control.height
  161. width: control.width
  162. height: Math.min(contentItem.implicitHeight, control.Window.height - control.y - control.height - control.padding)
  163. topMargin: 6
  164. bottomMargin: 6
  165. palette: control.palette
  166. contentItem: ListView {
  167. clip: true
  168. implicitHeight: contentHeight
  169. model: control.delegateModel
  170. currentIndex: control.highlightedIndex
  171. highlightMoveDuration: 0
  172. T.ScrollIndicator.vertical: ScrollIndicator { }
  173. }
  174. background: Rectangle {
  175. color: control.popup.palette.window
  176. border.color: Fusion.outline(control.palette)
  177. Rectangle {
  178. z: -1
  179. x: 1; y: 1
  180. width: parent.width
  181. height: parent.height
  182. color: control.palette.shadow
  183. opacity: 0.2
  184. }
  185. }
  186. }
  187. }