Commit Graph

10 Commits

Author SHA1 Message Date
Pascal Precht 74a88a70b3 feat(StatusBaseInput): introduce `component` property
This property enables users to load any component into the input field.
This is useful for rendering a "clearable" icon button, simple icons or
even more complex buttons.

Usage:

```qml
StatusBaseInput {
    ...
    component: StatusIcon {
        name: "cancel"
        color: Theme.palette.dangerColor1
        width: 16
    }
}
```

The `clearable` property of `StatusBaseInput` also renders and icon button
on the right hand side. With this new feature, `clearable` is just a short-hand
for:

```qml
StatusBaseInput {
    ...
    component: StatusFlatRoundButton {
        visible: edit.text.length != 0 &&
                statusBaseInput.clearable &&
                !statusBaseInput.multiline &&
                edit.activeFocus
        type: StatusFlatRoundButton.Type.Secondary
        width: 24
        height: 24
        icon.name: "clear"
        icon.width: 16
        icon.height: 16
        icon.color: Theme.palette.baseColor1
        onClicked: {
            edit.clear()
        }
    }
}
```

Closes #380
2022-09-21 18:20:03 +02:00
Pascal Precht de776e4567 feat(StatusValidator): allow validators to provide default `errorMessage`
Validators can now define a default `errorMessage` like so:

```qml
StatusValidator {
  ...
  errorMessage: "..."
}
```

Because there's no access to runtime validation errors, `errorMessage` have to
be static. However, if applications wish to provide their own `errorMessage`
they can still override it and make it dynamic:

```qml
SomeValidator {
  ...
  errorMessage: input.errors.someValidator ? "Whoopsie" : ""
}
```
2022-09-21 18:20:03 +02:00
Alexandra Betouni faea959d63 feat(StatusInput): Introduced secondaryLabel property
Due to design updates in AddAccount modal, updates are
needed in StatusBaseInput and StatusInput

* Added the possibility of having the icon on the right
  side
* Added secondaryLabel for title
* Added examples in StatusInputPage

Closes #383
2022-09-21 18:20:03 +02:00
Pascal Precht 2d0febcaae feat(StatusInput): introduce new validator pipeline
There's a new `validators` property that can be used to add validators to `StatusInput` instances, which are executed in the same order:

```qml
StatusInput {
  text: "Some value"
  validators: [...]
}
```

For convenience StatusQ provides some common validation methods, such as `StatusMinLengthValidator`, StatusMaxLengthValidator` and could be extended to other (e.g. email validation etc):

```qml
StatusInput {
  text: "Some value"
  validators: [
    StatusMinLengthValidator { minLength: 3 }
  ]
}
```

Validators are executed every time the text of the input changes. They are executed in the same order they have been applied, which enables users to create cascading conditions like "First make sure the value is at least 3 characters long, then make sure it matches a certain pattern".

When a validation fails, it sets the validity of the input (`valid: false`) accordingly and optionally exposes additional error information on `StatusInput.errors`:

```qml
StatusInput {
  text: "Fo"
  onTextChanged: {
    if (errors) {
      /**
       * errors now has the following structure:
       * errors: {
       *   minLength: { minValue: 3, actual: ... }
       * }
       * Also, `StatusInput` is now `valid = false`
       **/
       errorMesssage = "Expected " + errors.minLenght.minValue + " but got: "+ errors.minLength.actual; // i18n'able
    }
  }
  validators: [
    StatusMinLengthValidator { minLength: 3 }
  ]
}
```
There can be any number of error objects on the `errors` property, depending on who many validators have been run that failed validation.

Custom validators can be implemented by introducing a new `StatusValidator` type that has to implement a `validate()` function and defines the validators name. The `validate()` function has to return either `true` or `false` depending on whether the value is valid.

Alternatively, the function can return an error object which gets exposed on the underlying input's `errors` property, at which point it's considered invalid as well.

Here's a simple custom validator:

```qml
// HelloValidator.qml
import StatusQ.Controls.Validators 0.1

StatusValidator {

  property string name: "hello"

  validate: function (value) { // `value` is the `text` value of the underlying control
    return value === "hello"
  }
}
```

Applying this validators would look like this:

```qml
StatusInput {
  text: "Some value"
  validators: [
    HelloValidator {}
  ]
  onTextChanged: {
    if (errors.hello) {
      errorMessage = "Doesn't say hello!"
    }
  }
}
```

Alternatively, validators can return error objects to provide more information about what went wrong. Here's the implementation of the `StatusMinLengthValidator` as an example:

```qml
StatusValidator {

    property int minLength: 0

    name: "minLength"

    validate: function (value) {
        return value.length >= minLength ? true : {
            min: minLength,
            actual: value.length
        }
    }
}
```

Because validators as components, they can hold any custom properties they need to be configured.

There has been concern that, with this API, error messages need to be potentially defined in multiple places, given that there could be multiple instances of any validator. This is easily solved by having a centralized function figure out what the error message is, given a certain error object:

```qml
StatusInput {
  validators: [
    StatusMinLengthValidator { minLength: 3 }
  ]
  onTextChanged: {
    if (errors) {
      errorMessage = getErrorMessage(errors) // this function is provided by global or elsewhere
    }
  }
}
```

Closes #298
2022-09-21 18:20:03 +02:00
Pascal Precht 53f1baac88 feat(StatusBaseInput): add icon support
Usage:

```qml
StatusBaseInput {
    icon.name: "..."
}
```

Closes #242
2022-09-21 18:20:03 +02:00
Pascal Precht fca3386cec 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
2022-09-21 18:20:03 +02:00
Pascal Precht e25fcf79f9 feat(Controls): introduce `StatusInput`
`StatusInput` is a wrapper around `StatusBaseInput` to provide additional
component composition for labels, error messages and alike

Closes #288
2022-09-21 18:20:03 +02:00
Pascal Precht 0ffee3f426 feat(StatusBaseInput): add visual validity state
Closes #287
2022-09-21 18:20:03 +02:00
Pascal Precht e966641ed1 fix(StatusBaseInput): ensure clear button has the correct color
Also only render clear button when input has active focus.

Closes #286
2022-09-21 18:20:03 +02:00
Pascal Precht 9945454a5d chore(sandbox): introduce StatusInputPage 2022-09-21 18:20:03 +02:00