Warning, /libraries/kirigami-addons/src/formcard/FormPasswordFieldDelegate.qml is written in an unsupported language. File is not indexed.
0001 /*
0002 * Copyright 2022 Carl Schwan <carl@carlschwan.eu>
0003 * SPDX-License-Identifier: LGPL-2.0-or-later
0004 */
0005
0006 import QtQuick 2.15
0007 import QtQuick.Controls 2.15
0008 import QtQuick.Layouts 1.15
0009
0010 import org.kde.kirigami 2.19 as Kirigami
0011
0012 /**
0013 * @brief A Form delegate that corresponds to a password field.
0014 *
0015 * ```qml
0016 * MobileForm.FormCard {
0017 * contentItem: ColumnLayout {
0018 * spacing: 0
0019 *
0020 * MobileForm.FormCardHeader {
0021 * title: "Information"
0022 * }
0023 *
0024 * MobileForm.FormTextFieldDelegate {
0025 * label: "Account name"
0026 * }
0027 *
0028 * MobileForm.FormPasswordFieldDelegate {
0029 * label: "Password"
0030 * statusMessage: "Password incorrect"
0031 * status: Kirigami.MessageType.Error
0032 * text: "666666666"
0033 * }
0034 *
0035 * MobileForm.FormPasswordFieldDelegate {
0036 * label: "Password repeat"
0037 * statusMessage: "Password match"
0038 * text: "4242424242"
0039 * status: Kirigami.MessageType.Positive
0040 * echoMode: TextInput.Password
0041 * }
0042 * }
0043 * }
0044 * ```
0045 *
0046 * @since KirigamiAddons 0.11.0
0047 *
0048 * @inherit AbstractFormDelegate
0049 */
0050 AbstractFormDelegate {
0051 id: root
0052
0053 /**
0054 * @brief A label containing primary text that appears above and
0055 * to the left the text field.
0056 */
0057 required property string label
0058
0059 /**
0060 * @brief set the maximum length of the text inside the TextField if maxLength > 0
0061 */
0062 property alias maximumLength: textField.maximumLength
0063
0064 /**
0065 * @brief This hold the activeFocus state of the internal TextField.
0066 */
0067 property alias fieldActiveFocus: textField.activeFocus
0068
0069 /**
0070 * @brief This hold the `readOnly` state of the internal TextField.
0071 */
0072 property alias readOnly: textField.readOnly
0073
0074 /**
0075 * @brief This property holds the `echoMode` of the internal TextField.
0076 *
0077 * This consists of how the text inside the text field will be
0078 * displayed to the user.
0079 *
0080 * @see <a href="https://doc.qt.io/qt-6/qml-qtquick-textinput.html#echoMode-prop">TextInput.echoMode</a>
0081 */
0082 property alias echoMode: textField.echoMode
0083
0084 /**
0085 * @brief This property holds the `inputMethodHints` of the
0086 * internal TextField.
0087 *
0088 * This consists of hints on the expected content or behavior of
0089 * the text field, be it sensitive data, in a date format, or whether
0090 * the characters will be hidden, for example.
0091 *
0092 * @see <a href="https://doc.qt.io/qt-6/qml-qtquick-textinput.html#inputMethodHints-prop">TextInput.inputMethodHints</a>
0093 */
0094 property alias inputMethodHints: textField.inputMethodHints
0095
0096 /**
0097 * @brief This property holds the `placeholderText` of the
0098 * internal TextField.
0099 *
0100 * This consists of secondary text shown by default on the text field
0101 * if no text has been written in it.
0102 */
0103 property alias placeholderText: textField.placeholderText
0104
0105 /**
0106 * @brief This property holds the `validator` of the internal TextField.
0107 */
0108 property alias validator: textField.validator
0109
0110 /**
0111 * @brief This property holds the `acceptableInput` of the internal TextField.
0112 */
0113 property alias acceptableInput: textField.acceptableInput
0114
0115 /**
0116 * @brief This property holds the current status message type of
0117 * the text field.
0118 *
0119 * This consists of an inline message with a colorful background
0120 * and an appropriate icon.
0121 *
0122 * The status property will affect the color of ::statusMessage used.
0123 *
0124 * Accepted values:
0125 * - `Kirigami.MessageType.Information` (blue color)
0126 * - `Kirigami.MessageType.Positive` (green color)
0127 * - `Kirigami.MessageType.Warning` (orange color)
0128 * - `Kirigami.MessageType.Error` (red color)
0129 *
0130 * default: `Kirigami.MessageType.Information` if ::statusMessage is set,
0131 * nothing otherwise.
0132 *
0133 * @see Kirigami.MessageType
0134 */
0135 property var status: Kirigami.MessageType.Information
0136
0137 /**
0138 * @brief This property holds the current status message of
0139 * the text field.
0140 *
0141 * If this property is not set, no ::status will be shown.
0142 */
0143 property string statusMessage: ""
0144
0145 /**
0146 * @This signal is emitted when the Return or Enter key is pressed.
0147 *
0148 * Note that if there is a validator or inputMask set on the text input,
0149 * the signal will only be emitted if the input is in an acceptable
0150 * state.
0151 */
0152 signal accepted();
0153
0154 /**
0155 * @brief This signal is emitted when the Return or Enter key is pressed
0156 * or the text input loses focus.
0157 *
0158 * Note that if there is a validator or inputMask set on the text input
0159 * and enter/return is pressed, this signal will only be emitted if
0160 * the input follows the inputMask and the validator returns an
0161 * acceptable state.
0162 */
0163 signal editingFinished();
0164
0165 /**
0166 * @brief This signal is emitted whenever the text is edited.
0167 *
0168 * Unlike textChanged(), this signal is not emitted when the text
0169 * is changed programmatically, for example, by changing the
0170 * value of the text property or by calling ::clear().
0171 */
0172 signal textEdited();
0173
0174 /**
0175 * @brief Clears the contents of the text input and resets partial
0176 * text input from an input method.
0177 */
0178 function clear() {
0179 textField.clear();
0180 }
0181
0182 /**
0183 * Inserts text into the TextInput at position.
0184 */
0185 function insert(position: int, text: string) {
0186 textField.insert(position, text);
0187 }
0188
0189 onActiveFocusChanged: { // propagate focus to the text field
0190 if (activeFocus) {
0191 textField.forceActiveFocus();
0192 }
0193 }
0194
0195 onClicked: textField.forceActiveFocus()
0196 background: null
0197 Accessible.role: Accessible.EditableText
0198
0199 contentItem: ColumnLayout {
0200 spacing: Kirigami.Units.smallSpacing
0201 RowLayout {
0202 spacing: Kirigami.Units.largeSpacing
0203 Label {
0204 Layout.fillWidth: true
0205 text: label
0206 elide: Text.ElideRight
0207 color: root.enabled ? Kirigami.Theme.textColor : Kirigami.Theme.disabledTextColor
0208 wrapMode: Text.Wrap
0209 maximumLineCount: 2
0210 }
0211 Label {
0212 TextMetrics {
0213 id: metrics
0214 text: label(root.maximumLength, root.maximumLength)
0215 font: Kirigami.Theme.smallFont
0216
0217 function label(current: int, maximum: int): string {
0218 return i18nc("@label %1 is current text length, %2 is maximum length of text field", "%1/%2", current, maximum)
0219 }
0220 }
0221 // 32767 is the default value for TextField.maximumLength
0222 visible: root.maximumLength < 32767
0223 text: metrics.label(textField.text.length, root.maximumLength)
0224 font: Kirigami.Theme.smallFont
0225 color: textField.text.length === root.maximumLength
0226 ? Kirigami.Theme.neutralTextColor
0227 : Kirigami.Theme.textColor
0228 horizontalAlignment: Text.AlignRight
0229
0230 Layout.margins: Kirigami.Units.smallSpacing
0231 Layout.preferredWidth: metrics.advanceWidth
0232 }
0233 }
0234 Kirigami.PasswordField {
0235 id: textField
0236 Accessible.description: label
0237 Layout.fillWidth: true
0238 placeholderText: root.placeholderText
0239 text: root.text
0240 onTextChanged: root.text = text
0241 onAccepted: root.accepted()
0242 onEditingFinished: root.editingFinished()
0243 onTextEdited: root.textEdited()
0244 activeFocusOnTab: false
0245 }
0246
0247 Kirigami.InlineMessage {
0248 id: formErrorHandler
0249 visible: root.statusMessage.length > 0
0250 Layout.topMargin: visible ? Kirigami.Units.smallSpacing : 0
0251 Layout.fillWidth: true
0252 text: root.statusMessage
0253 type: root.status
0254 }
0255 }
0256 }
0257