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