Kirigami-addons

FormPasswordFieldDelegate.qml
1/*
2 * Copyright 2022 Carl Schwan <carl@carlschwan.eu>
3 * SPDX-License-Identifier: LGPL-2.0-or-later
4 */
5
6import QtQuick
7import QtQuick.Controls
8import QtQuick.Layouts
9
10import org.kde.kirigami as Kirigami
11
12/**
13 * @brief A Form delegate that corresponds to a password field.
14 *
15 * ```qml
16 * FormCard.FormHeader {
17 * title: "Information"
18 * }
19 *
20 * FormCard.FormCard {
21 * FormCard.FormTextFieldDelegate {
22 * label: "Account name"
23 * }
24 *
25 * FormCard.FormPasswordFieldDelegate {
26 * label: "Password"
27 * statusMessage: "Password incorrect"
28 * status: Kirigami.MessageType.Error
29 * text: "666666666"
30 * }
31 *
32 * FormCard.FormPasswordFieldDelegate {
33 * label: "Password repeat"
34 * statusMessage: "Password match"
35 * text: "4242424242"
36 * status: Kirigami.MessageType.Positive
37 * echoMode: TextInput.Password
38 * }
39 * }
40 * ```
41 *
42 * @since KirigamiAddons 0.11.0
43 *
44 * @inherit AbstractFormDelegate
45 */
46AbstractFormDelegate {
47 id: root
48
49 /**
50 * @brief A label containing primary text that appears above and
51 * to the left the text field.
52 */
53 required property string label
54
55 /**
56 * @brief set the maximum length of the text inside the TextField if maxLength > 0
57 */
58 property alias maximumLength: textField.maximumLength
59
60 /**
61 * @brief This hold the activeFocus state of the internal TextField.
62 */
63 property alias fieldActiveFocus: textField.activeFocus
64
65 /**
66 * @brief This hold the `readOnly` state of the internal TextField.
67 */
68 property alias readOnly: textField.readOnly
69
70 /**
71 * @brief This property holds the `echoMode` of the internal TextField.
72 *
73 * This consists of how the text inside the text field will be
74 * displayed to the user.
75 *
76 * @see <a href="https://doc.qt.io/qt-6/qml-qtquick-textinput.html#echoMode-prop">TextInput.echoMode</a>
77 */
78 property alias echoMode: textField.echoMode
79
80 /**
81 * @brief This property holds the `inputMethodHints` of the
82 * internal TextField.
83 *
84 * This consists of hints on the expected content or behavior of
85 * the text field, be it sensitive data, in a date format, or whether
86 * the characters will be hidden, for example.
87 *
88 * @see <a href="https://doc.qt.io/qt-6/qml-qtquick-textinput.html#inputMethodHints-prop">TextInput.inputMethodHints</a>
89 */
90 property alias inputMethodHints: textField.inputMethodHints
91
92 /**
93 * @brief This property holds the `placeholderText` of the
94 * internal TextField.
95 *
96 * This consists of secondary text shown by default on the text field
97 * if no text has been written in it.
98 */
99 property alias placeholderText: textField.placeholderText
100
101 /**
102 * @brief This property holds the `validator` of the internal TextField.
103 */
104 property alias validator: textField.validator
105
106 /**
107 * @brief This property holds the `acceptableInput` of the internal TextField.
108 */
109 property alias acceptableInput: textField.acceptableInput
110
111 /**
112 * @brief This property holds the current status message type of
113 * the text field.
114 *
115 * This consists of an inline message with a colorful background
116 * and an appropriate icon.
117 *
118 * The status property will affect the color of ::statusMessage used.
119 *
120 * Accepted values:
121 * - `Kirigami.MessageType.Information` (blue color)
122 * - `Kirigami.MessageType.Positive` (green color)
123 * - `Kirigami.MessageType.Warning` (orange color)
124 * - `Kirigami.MessageType.Error` (red color)
126 * default: `Kirigami.MessageType.Information` if ::statusMessage is set,
127 * nothing otherwise.
128 *
129 * @see Kirigami.MessageType
130 */
131 property var status: Kirigami.MessageType.Information
132
133 /**
134 * @brief This property holds the current status message of
135 * the text field.
136 *
137 * If this property is not set, no ::status will be shown.
138 */
139 property string statusMessage: ""
140
141 /**
142 * @This signal is emitted when the Return or Enter key is pressed.
144 * Note that if there is a validator or inputMask set on the text input,
145 * the signal will only be emitted if the input is in an acceptable
146 * state.
147 */
148 signal accepted();
149
150 /**
151 * @brief This signal is emitted when the Return or Enter key is pressed
152 * or the text input loses focus.
153 *
154 * Note that if there is a validator or inputMask set on the text input
155 * and enter/return is pressed, this signal will only be emitted if
156 * the input follows the inputMask and the validator returns an
157 * acceptable state.
158 */
159 signal editingFinished();
161 /**
162 * @brief This signal is emitted whenever the text is edited.
163 *
164 * Unlike textChanged(), this signal is not emitted when the text
165 * is changed programmatically, for example, by changing the
166 * value of the text property or by calling ::clear().
167 */
168 signal textEdited();
169
170 /**
171 * @brief Clears the contents of the text input and resets partial
172 * text input from an input method.
173 */
174 function clear(): void {
175 textField.clear();
176 }
177
178 /**
179 * Inserts text into the TextInput at position.
180 */
181 function insert(position: int, text: string): void {
182 textField.insert(position, text);
183 }
184
185 /**
186 * Causes all text to be selected.
187 * @since Kirigami Addons 1.4.0
188 */
189 function selectAll(): void {
190 textField.selectAll();
191 }
192
193 /**
194 * Causes the text from start to end to be selected.
195 * @since Kirigami Addons 1.4.0
196 */
197 function select(start: int, end: int): void {
198 textField.select(start, end);
199 }
200
201 onActiveFocusChanged: { // propagate focus to the text field
202 if (activeFocus) {
203 textField.forceActiveFocus();
204 }
205 }
206
207 onClicked: textField.forceActiveFocus()
208 background: null
209 Accessible.role: Accessible.EditableText
210
211 contentItem: ColumnLayout {
212 spacing: Kirigami.Units.smallSpacing
213 RowLayout {
214 spacing: Kirigami.Units.largeSpacing
215 Label {
216 Layout.fillWidth: true
217 text: label
218 elide: Text.ElideRight
219 color: root.enabled ? Kirigami.Theme.textColor : Kirigami.Theme.disabledTextColor
220 wrapMode: Text.Wrap
221 maximumLineCount: 2
222 }
223 Label {
224 TextMetrics {
225 id: metrics
226 text: label(root.maximumLength, root.maximumLength)
227 font: Kirigami.Theme.smallFont
228
229 function label(current: int, maximum: int): string {
230 return i18ndc("kirigami-addons6", "@label %1 is current text length, %2 is maximum length of text field", "%1/%2", current, maximum)
231 }
232 }
233 // 32767 is the default value for TextField.maximumLength
234 visible: root.maximumLength < 32767
235 text: metrics.label(textField.text.length, root.maximumLength)
236 font: Kirigami.Theme.smallFont
237 color: textField.text.length === root.maximumLength
238 ? Kirigami.Theme.neutralTextColor
239 : Kirigami.Theme.textColor
240 horizontalAlignment: Text.AlignRight
241
242 Layout.margins: Kirigami.Units.smallSpacing
243 Layout.preferredWidth: metrics.advanceWidth
244 }
245 }
246 Kirigami.PasswordField {
247 id: textField
248 Accessible.description: label
249 Layout.fillWidth: true
250 placeholderText: root.placeholderText
251 text: root.text
252 onTextChanged: root.text = text
253 onAccepted: root.accepted()
254 onEditingFinished: root.editingFinished()
255 onTextEdited: root.textEdited()
256 activeFocusOnTab: false
257 }
258
259 Kirigami.InlineMessage {
260 id: formErrorHandler
261 visible: root.statusMessage.length > 0
262 Layout.topMargin: visible ? Kirigami.Units.smallSpacing : 0
263 Layout.fillWidth: true
264 text: root.statusMessage
265 type: root.status
266 }
267 }
268}
269
This file is part of the KDE documentation.
Documentation copyright © 1996-2024 The KDE developers.
Generated on Fri Dec 6 2024 12:05:53 by doxygen 1.12.0 written by Dimitri van Heesch, © 1997-2006

KDE's Doxygen guidelines are available online.