feat(StatusInput): implement error message and charlimit APIs
Usage: ```qml StatusInput { label: "Fieldname" charLimit: 30 errorMessage: "Some error occured" input.valid: false input.text: "Some invalid value" input.valid: false } ``` Closes #289, #290
This commit is contained in:
parent
646c00bd3a
commit
3cf53d0233
|
@ -15,6 +15,7 @@ Column {
|
||||||
}
|
}
|
||||||
|
|
||||||
StatusInput {
|
StatusInput {
|
||||||
|
label: "Label"
|
||||||
input.placeholderText: "Disabled"
|
input.placeholderText: "Disabled"
|
||||||
input.enabled: false
|
input.enabled: false
|
||||||
}
|
}
|
||||||
|
@ -32,6 +33,30 @@ Column {
|
||||||
StatusInput {
|
StatusInput {
|
||||||
label: "Label"
|
label: "Label"
|
||||||
input.placeholderText: "Placeholder"
|
input.placeholderText: "Placeholder"
|
||||||
|
input.clearable: true
|
||||||
|
}
|
||||||
|
|
||||||
|
StatusInput {
|
||||||
|
charLimit: 30
|
||||||
|
input.placeholderText: "Placeholder"
|
||||||
|
input.clearable: true
|
||||||
|
}
|
||||||
|
|
||||||
|
StatusInput {
|
||||||
|
label: "Label"
|
||||||
|
charLimit: 30
|
||||||
|
input.placeholderText: "Placeholder"
|
||||||
|
input.clearable: true
|
||||||
|
}
|
||||||
|
|
||||||
|
StatusInput {
|
||||||
|
label: "Label"
|
||||||
|
charLimit: 30
|
||||||
|
errorMessage: "Error message"
|
||||||
|
|
||||||
|
input.clearable: true
|
||||||
|
input.valid: false
|
||||||
|
input.placeholderText: "Placeholder"
|
||||||
}
|
}
|
||||||
|
|
||||||
StatusInput {
|
StatusInput {
|
||||||
|
|
|
@ -4,17 +4,29 @@ import StatusQ.Core 0.1
|
||||||
import StatusQ.Core.Theme 0.1
|
import StatusQ.Core.Theme 0.1
|
||||||
import StatusQ.Controls 0.1
|
import StatusQ.Controls 0.1
|
||||||
|
|
||||||
Item {
|
Rectangle {
|
||||||
id: root
|
id: root
|
||||||
|
|
||||||
implicitWidth: 480
|
implicitWidth: 480
|
||||||
height: label.anchors.topMargin +
|
height: (label.visible ?
|
||||||
label.height +
|
label.anchors.topMargin +
|
||||||
|
label.height :
|
||||||
|
charLimitLabel.visible ?
|
||||||
|
charLimitLabel.anchors.topMargin +
|
||||||
|
charLimitLabel.height :
|
||||||
|
0) +
|
||||||
statusBaseInput.anchors.topMargin +
|
statusBaseInput.anchors.topMargin +
|
||||||
statusBaseInput.height + 8
|
statusBaseInput.height +
|
||||||
|
(errorMessage.visible ?
|
||||||
|
errorMessage.anchors.topMargin +
|
||||||
|
errorMessage.height :
|
||||||
|
0) + 8
|
||||||
|
|
||||||
|
color: "transparent"
|
||||||
property alias input: statusBaseInput
|
property alias input: statusBaseInput
|
||||||
property string label: ""
|
property string label: ""
|
||||||
|
property int charLimit: 0
|
||||||
|
property string errorMessage: ""
|
||||||
|
|
||||||
StatusBaseText {
|
StatusBaseText {
|
||||||
id: label
|
id: label
|
||||||
|
@ -27,16 +39,47 @@ Item {
|
||||||
|
|
||||||
text: root.label
|
text: root.label
|
||||||
font.pixelSize: 15
|
font.pixelSize: 15
|
||||||
color: Theme.palette.directColor1
|
color: statusBaseInput.enabled ? Theme.palette.directColor1 : Theme.palette.baseColor1
|
||||||
|
}
|
||||||
|
|
||||||
|
StatusBaseText {
|
||||||
|
id: charLimitLabel
|
||||||
|
height: visible ? implicitHeight : 0
|
||||||
|
anchors.top: parent.top
|
||||||
|
anchors.right: parent.right
|
||||||
|
anchors.topMargin: visible ? 11 : 0
|
||||||
|
anchors.rightMargin: 16
|
||||||
|
visible: !!root.charLimit
|
||||||
|
|
||||||
|
text: "0 / " + root.charLimit
|
||||||
|
font.pixelSize: 12
|
||||||
|
color: statusBaseInput.enabled ? Theme.palette.baseColor1 : Theme.palette.directColor6
|
||||||
}
|
}
|
||||||
|
|
||||||
StatusBaseInput {
|
StatusBaseInput {
|
||||||
id: statusBaseInput
|
id: statusBaseInput
|
||||||
anchors.top: label.bottom
|
anchors.top: label.visible ? label.bottom :
|
||||||
|
charLimitLabel.visible ? charLimitLabel.bottom : parent.top
|
||||||
anchors.left: parent.left
|
anchors.left: parent.left
|
||||||
anchors.right: parent.right
|
anchors.right: parent.right
|
||||||
anchors.topMargin: 8
|
anchors.topMargin: charLimitLabel.visible ? 11 : 8
|
||||||
anchors.leftMargin: 16
|
anchors.leftMargin: 16
|
||||||
anchors.rightMargin: 16
|
anchors.rightMargin: 16
|
||||||
}
|
}
|
||||||
|
|
||||||
|
StatusBaseText {
|
||||||
|
id: errorMessage
|
||||||
|
|
||||||
|
anchors.top: statusBaseInput.bottom
|
||||||
|
anchors.topMargin: 11
|
||||||
|
anchors.right: parent.right
|
||||||
|
anchors.rightMargin: 16
|
||||||
|
|
||||||
|
height: visible ? implicitHeight : 0
|
||||||
|
visible: !!root.errorMessage && !statusBaseInput.valid
|
||||||
|
|
||||||
|
font.pixelSize: 12
|
||||||
|
color: Theme.palette.dangerColor1
|
||||||
|
text: root.errorMessage
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue