diff --git a/sandbox/StatusInputPage.qml b/sandbox/StatusInputPage.qml index e868ddf7..3fbe74a3 100644 --- a/sandbox/StatusInputPage.qml +++ b/sandbox/StatusInputPage.qml @@ -4,6 +4,7 @@ import QtQuick.Layouts 1.14 import StatusQ.Core 0.1 import StatusQ.Core.Theme 0.1 import StatusQ.Controls 0.1 +import StatusQ.Controls.Validators 0.1 import Sandbox 0.1 @@ -66,6 +67,22 @@ Column { input.placeholderText: "Placeholder" } + StatusInput { + label: "Label" + charLimit: 30 + input.placeholderText: "Input with validator" + + validators: [ + StatusMinLengthValidator { minLength: 10 } + ] + + onTextChanged: { + if (errors && errors.minLength) { + errorMessage = `Value can't be shorter than ${errors.minLength.min} but got ${errors.minLength.actual}` + } + } + } + StatusInput { input.multiline: true input.placeholderText: "Multiline" diff --git a/src/StatusQ/Controls/StatusInput.qml b/src/StatusQ/Controls/StatusInput.qml index 0b06ed21..a4e85175 100644 --- a/src/StatusQ/Controls/StatusInput.qml +++ b/src/StatusQ/Controls/StatusInput.qml @@ -3,6 +3,7 @@ import QtQuick 2.14 import StatusQ.Core 0.1 import StatusQ.Core.Theme 0.1 import StatusQ.Controls 0.1 +import StatusQ.Controls.Validators 0.1 Item { id: root @@ -22,9 +23,14 @@ Item { 0) + 8 property alias input: statusBaseInput + property alias valid: statusBaseInput.valid + property alias text: statusBaseInput.text property string label: "" property int charLimit: 0 property string errorMessage: "" + property list validators + + property var errors: ({}) StatusBaseText { id: label @@ -68,6 +74,24 @@ Item { anchors.rightMargin: 16 maximumLength: root.charLimit + + onTextChanged: { + if (root.validators.length) { + for (let idx in root.validators) { + let result = root.validators[idx].validate(statusBaseInput.text) + + if (typeof result === "boolean" && result) { + statusBaseInput.valid = true + } else { + if (!root.errors) { + root.errors = {} + } + root.errors[root.validators[idx].name] = result + statusBaseInput.valid = false + } + } + } + } } StatusBaseText { diff --git a/src/StatusQ/Controls/Validators/StatusMinLengthValidator.qml b/src/StatusQ/Controls/Validators/StatusMinLengthValidator.qml new file mode 100644 index 00000000..f6a2c171 --- /dev/null +++ b/src/StatusQ/Controls/Validators/StatusMinLengthValidator.qml @@ -0,0 +1,16 @@ +import StatusQ.Controls 0.1 + +StatusValidator { + + property int minLength: 0 + + name: "minLength" + + validate: function (value) { + return value.length >= minLength ? true : { + min: minLength, + actual: value.length + } + } +} + diff --git a/src/StatusQ/Controls/Validators/StatusValidator.qml b/src/StatusQ/Controls/Validators/StatusValidator.qml new file mode 100644 index 00000000..3e12d5b7 --- /dev/null +++ b/src/StatusQ/Controls/Validators/StatusValidator.qml @@ -0,0 +1,11 @@ +import QtQuick 2.13 + +QtObject { + id: statusValidator + + property string name: "" + + property var validate: function (value) { + return true + } +} diff --git a/src/StatusQ/Controls/Validators/qmldir b/src/StatusQ/Controls/Validators/qmldir new file mode 100644 index 00000000..040fc7e4 --- /dev/null +++ b/src/StatusQ/Controls/Validators/qmldir @@ -0,0 +1,5 @@ +module StatusQ.Controls.Validators + +StatusValidator 0.1 StatusValidator.qml +StatusMinLengthValidator 0.1 StatusMinLengthValidator.qml +StatusMaxLengthValidator 0.1 StatusMaxLengthValidator.qml diff --git a/statusq.qrc b/statusq.qrc index a014a0f3..c1523f53 100644 --- a/statusq.qrc +++ b/statusq.qrc @@ -50,6 +50,8 @@ src/StatusQ/Controls/StatusCheckBox.qml src/StatusQ/Controls/StatusButton.qml src/StatusQ/Controls/StatusToolTip.qml + src/StatusQ/Controls/Validators/StatusValidator.qml + src/StatusQ/Controls/Validators/StatusMinLengthValidator.qml src/StatusQ/Layout/StatusAppNavBar.qml src/StatusQ/Layout/qmldir src/StatusQ/Layout/StatusAppTwoPanelLayout.qml