@mutt/widget-age/README.md

Mutt Forms Widget - Age input

# Mutt Forms Widget - Age
Mutt Form Vue widget to capture an age in years & months

## Requirements

Please ensure you install the peer dependencies which are defined in `package.json`.

### Select dropdown styling

This widget makes use of the [vue-select](https://github.com/sagalbot/vue-select) component.

No styling is included for this component, you will need to include it by either
including the CSS from the component:

```css
import 'vue-select/dist/vue-select.css';
```

or importing the SCSS:

```css
@import "vue-select/src/scss/vue-select.scss";
```

More details on styling the dropdown can be found in the [documentation for vue-select](https://vue-select.org/guide/css.html#scss-variables).

## Field Options
The age widget accepts the following options:

option | type | description | default
------ | ---- | ----------- | -------
`min` | ISO-8601 formatted String | The minimum date allowed | null
`max` | ISO-8601 formatted String | The maximum date allowed | null
`default` | Date or String | The default date to set | null
`dateFieldSeparator` | String | A character or string of characters that adds a span containing the character between the date field inputs
`attrs` | Object of Strings or Numbers  | The html attributes for the field wrapper e.g `data-*` | null

Please note here that min/max refer to the minimum & maximum dates returned by the widget rather than the age, therefore max should resolve to a later date value than min

## Emitted Events

When a valid entry of years & months is entered, the widget will emit the `ageValidated` event with the following object:
```
key: this.field.name,
value: this.field.value,
action: 'populated',
validated, // true if the validation rules pass
bubble: true,
```

### Complete Example

```
dob: {
  help:
    '<p>If you don’t know the exact age, please provide a considered estimate.</p>',
  label: null,
  max: 'P-4W',
  min: 'P-21Y',
  attrs: {
    data-qa-locator: 'pet-info-age-selector'
  },
  natural: {
    prefix: ' and you are ',
    suffix: ' old.',
    title: 'How old are you?',
    trigger: '',
  },
  serialize: 'date',
  widget: 'naturalage',
},
```