Kirigami2

SearchDialog.qml
1// SPDX-FileCopyrightText: 2023 Tobias Fella <tobias.fella@kde.org>
2// SPDX-FileCopyrightText: 2024 Carl Schwan <carl@carlschwan.eu>
3// SPDX-License-Identifier: LGPL-2.0-or-later
4
5pragma ComponentBehavior: Bound
6
7import QtQuick
8import QtQuick.Controls as QQC2
9import QtQuick.Layouts
10
11import org.kde.kirigami as Kirigami
12
13/**
14 * A dialog to let's you do a global search accross your applications
15 * documents, chat rooms and more.
16 *
17 * Example usage for a chat app where we want to quickly search for a room.
18 *
19 * @code{.qml}
20 * import QtQuick
21 * import org.kde.kitemmodels as KItemModels
22 * import org.kde.kirigami as Kirigami
23 *
24 * Kirigami.SearchDialog {
25 * id: root
26 *
27 * onTextChanged: {
28 * sortModel.filterText = text;
29 * }
30 * onAccepted: listView.currentItem.clicked()
31 *
32 * emptyText: i18nc("Placeholder message", "No room found.")
33 *
34 * model: KItemModels.KSortFilterProxyModel {
35 * id: sortModel
36 *
37 * sourceModel: RoomModel { }
38 * }
39 *
40 * delegate: RoomDelegate {
41 * onClicked: root.close()
42 * }
43 *
44 * Shortcut {
45 * sequence: "Ctrl+K"
46 * onActivated: root.open()
47 * }
48 * }
49 * @endcode{}
50 *
51 * @image html searchdialog.html
52 *
53 * @note This component is unsuitable on mobile. Instead on mobile prefer to
54 * use a seperate page for the search.
55 *
56 * @since Kirigami 6.3
57 */
58QQC2.Dialog {
59 id: root
60
61 /**
62 * This property holds an alias to the model of the internal ListView.
63 */
64 property alias model: listView.model
65
66 /**
67 * This property holds an alias to the delegate component of the internal ListView.
68 */
69 property alias delegate: listView.delegate
71 /**
72 * This property holds an alias to the currentItem component of the internal ListView.
73 */
74 property alias currentItem: listView.currentItem
75
76 /**
77 * This property holds an alias to the section component of the internal ListView.
78 */
79 property alias section: listView.section
80
81 /**
82 * This property holds an alias to the content of the search field.
83 */
84 property alias text: searchField.text
85
86 /**
87 * This property holds an alias to the left actions of the seach field.
88 */
89 property alias searchFieldLeftActions: searchField.leftActions
91 /**
92 * This property holds an alias to the right actions of the seach field.
93 */
94 property alias searchFieldRightActions: searchField.rightActions
96 /**
97 * The placeholder text shown in the (empty) search field.
98 */
99 property alias searchFieldPlaceholderText: searchField.placeholderText
101 /**
102 * This property holds the number of search results displayed in the internal ListView.
103 */
104 property alias count: listView.count
105
106 /**
107 * This property holds an alias to the placeholder message text displayed
108 * when the internal list view is empty.
109 */
110 property alias emptyText: placeholder.text
111
112 /**
113 * This property holds an alias to the placeholder message icon displayed
114 * when the internal list view is empty.
115 */
116 property alias emptyIcon: placeholder.icon
117
118 width: Math.min(Kirigami.Units.gridUnit * 35, parent.width)
119 height: Math.min(Kirigami.Units.gridUnit * 20, parent.height)
120
121 padding: 0
122
123 anchors.centerIn: parent
124
125 modal: true
126
127 onOpened: {
128 searchField.forceActiveFocus();
129 searchField.text = "";
130 listView.currentIndex = 0;
131 }
132
133 contentItem: ColumnLayout {
134 spacing: 0
135
136 Kirigami.SearchField {
137 id: searchField
138
139 Layout.fillWidth: true
140
141 background: null
142
143 Layout.margins: Kirigami.Units.smallSpacing
144
145 Keys.onDownPressed: {
146 const listViewHadFocus = listView.activeFocus;
147 listView.forceActiveFocus();
148 if (listView.currentIndex < listView.count - 1) {
149 // don't move to the next entry when we just changed focus from the search field to the list view
150 if (listViewHadFocus) {
151 listView.currentIndex++;
152 }
153 } else {
154 listView.currentIndex = 0;
155 }
156 }
157 Keys.onUpPressed: {
158 listView.forceActiveFocus();
159 if (listView.currentIndex === 0) {
160 listView.currentIndex = listView.count - 1;
161 } else {
162 listView.currentIndex--;
163 }
164 }
165 Keys.onPressed: (event) => {
166 switch (event.key) {
167 case Qt.Key_PageDown:
168 listView.forceActiveFocus();
169 listView.currentIndex = Math.min(listView.count - 1, listView.currentIndex + Math.floor(listView.height / listView.currentItem.height));
170 event.accepted = true;
171 break;
172 case Qt.Key_PageUp:
173 listView.forceActiveFocus();
174 listView.currentIndex = Math.max(0, listView.currentIndex - Math.floor(listView.height / listView.currentItem.height));
175 event.accepted = true;
176 break;
177 }
178 }
179
180 focusSequence: ""
181 autoAccept: false
182
183 onAccepted: root.accepted()
184 }
185
186 Kirigami.Separator {
187 Layout.fillWidth: true
188 }
189
190 QQC2.ScrollView {
191 Layout.fillWidth: true
192 Layout.fillHeight: true
193 Keys.forwardTo: searchField
194
195 ListView {
196 id: listView
197
198 currentIndex: 0
199 clip: true
200 highlightMoveDuration: 200
201 Keys.forwardTo: searchField
202 keyNavigationEnabled: true
203
204 Kirigami.PlaceholderMessage {
205 id: placeholder
206 anchors.centerIn: parent
207 width: parent.width - Kirigami.Units.gridUnit * 4
208 icon.name: 'system-search-symbolic'
209 visible: listView.count === 0 && text.length > 0
210 }
211 }
212 }
213 }
214}
This file is part of the KDE documentation.
Documentation copyright © 1996-2024 The KDE developers.
Generated on Fri Jul 19 2024 11:52:23 by doxygen 1.11.0 written by Dimitri van Heesch, © 1997-2006

KDE's Doxygen guidelines are available online.