@mutt/widget-age

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 component.

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

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

or importing the SCSS:

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

More details on styling the dropdown can be found in the documentation for vue-select.

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',
},