@formio/js 5.2.3 → 5.2.4-rc.0

package/lib/mjs/components/day/Day.js

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import moment from 'moment';
 import Field from '../_classes/field/Field';
-import { boolValue, componentValueTypes, getComponentSavedTypes, getLocaleDateFormatInfo } from '../../utils';
+import { boolValue, componentValueTypes, getComponentSavedTypes, getLocaleDateFormatInfo, } from '../../utils';
 import { getDayFormat } from '@formio/core';
 export default class DayComponent extends Field {
     static schema(...extend) {
@@ -13,21 +13,21 @@ export default class DayComponent extends Field {
                 day: {
                     type: 'number',
                     placeholder: '',
-                    required: false
+                    required: false,
                 },
                 month: {
                     type: 'select',
                     placeholder: '',
-                    required: false
+                    required: false,
                 },
                 year: {
                     type: 'number',
                     placeholder: '',
-                    required: false
-                }
+                    required: false,
+                },
             },
             dayFirst: false,
-            defaultValue: ''
+            defaultValue: '',
         }, ...extend);
     }
     static get builderInfo() {
@@ -37,23 +37,34 @@ export default class DayComponent extends Field {
             icon: 'calendar',
             documentation: '/userguide/form-building/advanced-components#day',
             weight: 50,
-            schema: DayComponent.schema()
+            schema: DayComponent.schema(),
         };
     }
     static get conditionOperatorsSettings() {
         return {
             ...super.conditionOperatorsSettings,
-            operators: ['isDateEqual', 'isNotDateEqual', 'isEmpty', 'isNotEmpty', 'dateLessThan', 'dateGreaterThan', 'dateLessThanOrEqual', 'dateGreaterThanOrEqual'],
+            operators: [
+                'isDateEqual',
+                'isNotDateEqual',
+                'isEmpty',
+                'isNotEmpty',
+                'dateLessThan',
+                'dateGreaterThan',
+                'dateLessThanOrEqual',
+                'dateGreaterThanOrEqual',
+            ],
         };
     }
     static savedValueTypes(schema) {
         schema = schema || {};
-        return getComponentSavedTypes(schema) || [componentValueTypes.string];
+        return (getComponentSavedTypes(schema) || [
+            componentValueTypes.string,
+        ]);
     }
     // Empty value used before 9.3.x
     static oldEmptyValue = '00/00/0000';
     constructor(component, options, data) {
-        if (!options.inFormBuilder && !options.building) {
+        if (options && !options.inFormBuilder && !options.building) {
             if (component.maxDate && component.maxDate.indexOf('moment(') === -1) {
                 component.maxDate = moment(component.maxDate, 'YYYY-MM-DD').toISOString();
             }
@@ -138,7 +149,7 @@ export default class DayComponent extends Field {
                 step: 1,
                 min,
                 max,
-            }
+            },
         };
     }
     selectDefinition(name) {
@@ -150,8 +161,8 @@ export default class DayComponent extends Field {
                 id: `${this.component.key}-${name}`,
                 class: 'form-control',
                 name,
-                lang: this.options.language
-            }
+                lang: this.options.language,
+            },
         };
     }
     get days() {
@@ -159,12 +170,12 @@ export default class DayComponent extends Field {
             return this._days;
         }
         this._days = [
-            { value: '', label: _.get(this.component, 'fields.day.placeholder', '') }
+            { value: '', label: _.get(this.component, 'fields.day.placeholder', '') },
         ];
         for (let x = 1; x <= 31; x++) {
             this._days.push({
                 value: x,
-                label: x.toString()
+                label: x.toString(),
             });
         }
         return this._days;
@@ -176,7 +187,8 @@ export default class DayComponent extends Field {
         this._months = [
             {
                 value: '',
-                label: _.get(this.component, 'fields.month.placeholder') || (this.hideInputLabels ? this.t('Month') : '')
+                label: _.get(this.component, 'fields.month.placeholder') ||
+                    (this.hideInputLabels ? this.t('Month') : ''),
             },
             { value: 1, label: 'January' },
             { value: 2, label: 'February' },
@@ -189,7 +201,7 @@ export default class DayComponent extends Field {
             { value: 9, label: 'September' },
             { value: 10, label: 'October' },
             { value: 11, label: 'November' },
-            { value: 12, label: 'December' }
+            { value: 12, label: 'December' },
         ];
         return this._months;
     }
@@ -198,24 +210,32 @@ export default class DayComponent extends Field {
             return this._years;
         }
         this._years = [
-            { value: '', label: _.get(this.component, 'fields.year.placeholder', '') }
+            { value: '', label: _.get(this.component, 'fields.year.placeholder', '') },
         ];
         const minYears = _.get(this.component, 'fields.year.minYear', 1900) || 1900;
         const maxYears = _.get(this.component, 'fields.year.maxYear', 2030) || 2030;
         for (let x = minYears; x <= maxYears; x++) {
             this._years.push({
                 value: x,
-                label: x.toString()
+                label: x.toString(),
             });
         }
         return this._years;
     }
     setErrorClasses(elements, dirty, hasError) {
         super.setErrorClasses(elements, dirty, hasError);
-        super.setErrorClasses([this.refs.day, this.refs.month, this.refs.year], dirty, hasError);
+        super.setErrorClasses([
+            this.refs.day,
+            this.refs.month,
+            this.refs.year,
+        ], dirty, hasError);
     }
     removeInputError(elements) {
-        super.removeInputError([this.refs.day, this.refs.month, this.refs.year]);
+        super.removeInputError([
+            this.refs.day,
+            this.refs.month,
+            this.refs.year,
+        ]);
         super.removeInputError(elements);
     }
     init() {
@@ -247,18 +267,19 @@ export default class DayComponent extends Field {
         if (this.component.fields[name].type === 'select') {
             return this.renderTemplate('select', {
                 input: this.selectDefinition(name),
-                selectOptions: this[`${name}s`].reduce((html, option) => html + this.renderTemplate('selectOption', {
-                    option,
-                    selected: false,
-                    attrs: {}
-                }), ''),
+                selectOptions: this[`${name}s`].reduce((html, option) => html +
+                    this.renderTemplate('selectOption', {
+                        option,
+                        selected: false,
+                        attrs: {},
+                    }), ''),
             });
         }
         else {
             return this.renderTemplate('input', {
                 prefix: this.prefix,
                 suffix: this.suffix,
-                input: this.inputDefinition(name)
+                input: this.inputDefinition(name),
             });
         }
     }
@@ -289,7 +310,8 @@ export default class DayComponent extends Field {
             // TODO: Need to rework this to work with day select as well.
             // Change day max input when month changes.
             this.addEventListener(this.refs.month, 'input', () => {
-                const maxDay = this.refs.year ? parseInt(new Date(this.refs.year.value, this.refs.month.value, 0).getDate(), 10)
+                const maxDay = this.refs.year
+                    ? parseInt(new Date(this.refs.year.value, this.refs.month.value, 0).getDate(), 10)
                     : '';
                 const day = this.getFieldValue('day');
                 if (!this.component.fields.day.hide && maxDay) {
@@ -302,9 +324,15 @@ export default class DayComponent extends Field {
             });
             this.addEventListener(this.refs.year, 'input', updateValueAndSaveFocus(this.refs.year, 'year'));
             this.addEventListener(this.refs.input, this.info.changeEvent, () => this.updateValue(null, {
-                modified: true
+                modified: true,
             }));
-            [this.refs.day, this.refs.month, this.refs.year].filter((element) => !!element).forEach((element) => {
+            [
+                this.refs.day,
+                this.refs.month,
+                this.refs.year,
+            ]
+                .filter((element) => !!element)
+                .forEach((element) => {
                 super.addFocusBlurEvents(element);
             });
         }
@@ -355,16 +383,32 @@ export default class DayComponent extends Field {
         }
         const dateParts = [];
         const valueParts = value.split('/');
-        const [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];
+        const [DAY, MONTH, YEAR,] = this.component.dayFirst
+            ? [
+                0,
+                1,
+                2,
+            ]
+            : [
+                1,
+                0,
+                2,
+            ];
         const defaultValue = this.component.defaultValue ? this.component.defaultValue.split('/') : '';
         let defaultDay = '';
         let defaultMonth = '';
         let defaultYear = '';
         if (defaultValue) {
             const hasHiddenFields = defaultValue.length !== 3;
-            defaultDay = hasHiddenFields ? this.getDayWithHiddenFields(defaultValue).day : defaultValue[DAY];
-            defaultMonth = hasHiddenFields ? this.getDayWithHiddenFields(defaultValue).month : defaultValue[MONTH];
-            defaultYear = hasHiddenFields ? this.getDayWithHiddenFields(defaultValue).year : defaultValue[YEAR];
+            defaultDay = hasHiddenFields
+                ? this.getDayWithHiddenFields(defaultValue).day
+                : defaultValue[DAY];
+            defaultMonth = hasHiddenFields
+                ? this.getDayWithHiddenFields(defaultValue).month
+                : defaultValue[MONTH];
+            defaultYear = hasHiddenFields
+                ? this.getDayWithHiddenFields(defaultValue).year
+                : defaultValue[YEAR];
         }
         if (this.options.building && defaultValue.length === 3) {
             return this.component.defaultValue;
@@ -426,7 +470,17 @@ export default class DayComponent extends Field {
         }
     }
     getDayWithHiddenFields(parts) {
-        let [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];
+        let [DAY, MONTH, YEAR,] = this.component.dayFirst
+            ? [
+                0,
+                1,
+                2,
+            ]
+            : [
+                1,
+                0,
+                2,
+            ];
         if (!this.showDay) {
             MONTH = MONTH === 0 ? 0 : MONTH - 1;
             YEAR = YEAR - 1;
@@ -463,7 +517,7 @@ export default class DayComponent extends Field {
                 break;
         }
         val = parseInt(val, 10);
-        return (!_.isNaN(val) && _.isNumber(val)) ? val : 0;
+        return !_.isNaN(val) && _.isNumber(val) ? val : 0;
     }
     get parts() {
         return {
@@ -487,36 +541,60 @@ export default class DayComponent extends Field {
     getDate(value) {
         let defaults = [], day, month, year;
         // Map positions to identifiers to get default values for each part of day
-        const [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];
+        const [DAY, MONTH, YEAR,] = this.component.dayFirst
+            ? [
+                0,
+                1,
+                2,
+            ]
+            : [
+                1,
+                0,
+                2,
+            ];
         const defaultValue = value || this.component.defaultValue;
         if (defaultValue) {
-            defaults = defaultValue.split('/').map(x => parseInt(x, 10));
+            defaults = defaultValue.split('/').map((x) => parseInt(x, 10));
         }
         const isModalEditClosed = this.component.modalEdit && !this.componentModal.isOpened;
         if (this.showDay && this.refs.day) {
-            day = (this.refs.day.value === '' && !isModalEditClosed) ? '' : parseInt(this.refs.day.value, 10);
+            day =
+                this.refs.day.value === '' && !isModalEditClosed ? '' : parseInt(this.refs.day.value, 10);
         }
         if (day === undefined || _.isNaN(day) || value) {
-            day = (defaults.length !== 3)
-                ? this.getDayWithHiddenFields(defaults).day
-                : (defaults[DAY] && !_.isNaN(defaults[DAY]) ? defaults[DAY] : 0);
+            day =
+                defaults.length !== 3
+                    ? this.getDayWithHiddenFields(defaults).day
+                    : defaults[DAY] && !_.isNaN(defaults[DAY])
+                        ? defaults[DAY]
+                        : 0;
         }
         if (this.showMonth && this.refs.month) {
             // Months are 0 indexed.
-            month = (this.refs.month.value === '' && !isModalEditClosed) ? '' : parseInt(this.refs.month.value, 10);
+            month =
+                this.refs.month.value === '' && !isModalEditClosed
+                    ? ''
+                    : parseInt(this.refs.month.value, 10);
         }
         if (month === undefined || _.isNaN(month) || value) {
-            month = (defaults.length !== 3)
-                ? this.getDayWithHiddenFields(defaults).month
-                : (defaults[MONTH] && !_.isNaN(defaults[MONTH]) ? defaults[MONTH] : 0);
+            month =
+                defaults.length !== 3
+                    ? this.getDayWithHiddenFields(defaults).month
+                    : defaults[MONTH] && !_.isNaN(defaults[MONTH])
+                        ? defaults[MONTH]
+                        : 0;
         }
         if (this.showYear && this.refs.year) {
-            year = (this.refs.year.value === '' && !isModalEditClosed) ? '' : parseInt(this.refs.year.value);
+            year =
+                this.refs.year.value === '' && !isModalEditClosed ? '' : parseInt(this.refs.year.value);
         }
         if (year === undefined || _.isNaN(year) || value) {
-            year = (defaults.length !== 3)
-                ? this.getDayWithHiddenFields(defaults).year
-                : (defaults[YEAR] && !_.isNaN(defaults[YEAR]) ? defaults[YEAR] : 0);
+            year =
+                defaults.length !== 3
+                    ? this.getDayWithHiddenFields(defaults).year
+                    : defaults[YEAR] && !_.isNaN(defaults[YEAR])
+                        ? defaults[YEAR]
+                        : 0;
         }
         let result;
         if (!day && !month && !year) {
@@ -533,10 +611,10 @@ export default class DayComponent extends Field {
         month = this.showMonth ? month.toString().padStart(2, 0) : '';
         year = this.showYear ? year.toString().padStart(4, 0) : '';
         if (this.component.dayFirst) {
-            result = `${day}${this.showDay && this.showMonth || this.showDay && this.showYear ? '/' : ''}${month}${this.showMonth && this.showYear ? '/' : ''}${year}`;
+            result = `${day}${(this.showDay && this.showMonth) || (this.showDay && this.showYear) ? '/' : ''}${month}${this.showMonth && this.showYear ? '/' : ''}${year}`;
         }
         else {
-            result = `${month}${this.showDay && this.showMonth || this.showMonth && this.showYear ? '/' : ''}${day}${this.showDay && this.showYear ? '/' : ''}${year}`;
+            result = `${month}${(this.showDay && this.showMonth) || (this.showMonth && this.showYear) ? '/' : ''}${day}${this.showDay && this.showYear ? '/' : ''}${year}`;
         }
         return result;
     }
@@ -556,7 +634,7 @@ export default class DayComponent extends Field {
     }
     getValue() {
         const result = super.getValue();
-        return (!result) ? this.dataValue : result;
+        return !result ? this.dataValue : result;
     }
     /**
      * Get the value at a specific index.
@@ -589,10 +667,12 @@ export default class DayComponent extends Field {
         if (field && typeof field === 'string' && this.refs[field]) {
             this.refs[field].focus();
         }
-        else if (this.dayFirst && this.showDay || !this.dayFirst && !this.showMonth && this.showDay) {
+        else if ((this.dayFirst && this.showDay) ||
+            (!this.dayFirst && !this.showMonth && this.showDay)) {
             this.refs.day?.focus();
         }
-        else if (this.dayFirst && !this.showDay && this.showMonth || !this.dayFirst && this.showMonth) {
+        else if ((this.dayFirst && !this.showDay && this.showMonth) ||
+            (!this.dayFirst && this.showMonth)) {
             this.refs.month?.focus();
         }
         else if (!this.showDay && !this.showDay && this.showYear) {
@@ -615,12 +695,22 @@ export default class DayComponent extends Field {
         if (!value) {
             return true;
         }
-        const [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];
+        const [DAY, MONTH, YEAR,] = this.component.dayFirst
+            ? [
+                0,
+                1,
+                2,
+            ]
+            : [
+                1,
+                0,
+                2,
+            ];
         const values = value.split('/');
         if (values.length < 3) {
             return true;
         }
-        return (values[DAY] === '00' || values[MONTH] === '00' || values[YEAR] === '0000');
+        return values[DAY] === '00' || values[MONTH] === '00' || values[YEAR] === '0000';
     }
     getValidationFormat() {
         let validationFormat = this.dayFirst ? 'DD-MM-YYYY' : 'MM-DD-YYYY';

package/lib/mjs/components/day/editForm/Day.edit.day.js

@@ -10,14 +10,14 @@ export default [
             values: [
                 {
                     label: 'Number',
-                    value: 'number'
+                    value: 'number',
                 },
                 {
                     label: 'Select',
-                    value: 'select'
+                    value: 'select',
                 },
-            ]
-        }
+            ],
+        },
     },
     {
         weight: 210,
@@ -26,7 +26,7 @@ export default [
         key: 'fields.day.placeholder',
         label: 'Placeholder',
         placeholder: 'Day Placeholder',
-        tooltip: 'The placeholder text that will appear when Day field is empty.'
+        tooltip: 'The placeholder text that will appear when Day field is empty.',
     },
     {
         weight: 215,
@@ -38,9 +38,13 @@ export default [
             if (data.defaultValue) {
                 const defaultValueParts = data.defaultValue.split('/');
                 if (!data.fields.day.hide && defaultValueParts.length !== 3) {
-                    const newDefaultValue = ['00'];
+                    const newDefaultValue = [
+                        '00',
+                    ];
                     if (!data.fields.month.hide) {
-                        data.dayFirst ? newDefaultValue.push(defaultValueParts[0]) : newDefaultValue.unshift(defaultValueParts[0]);
+                        data.dayFirst
+                            ? newDefaultValue.push(defaultValueParts[0])
+                            : newDefaultValue.unshift(defaultValueParts[0]);
                     }
                     if (!data.fields.year.hide) {
                         newDefaultValue.push(defaultValueParts[1]);
@@ -49,7 +53,7 @@ export default [
                 }
             }
         },
-        input: true
+        input: true,
     },
     {
         weight: 214,
@@ -57,6 +61,6 @@ export default [
         label: 'Day First',
         tooltip: 'Display the Day field before the Month field.',
         key: 'dayFirst',
-        input: true
+        input: true,
     },
 ];

package/lib/mjs/components/day/editForm/Day.edit.display.js

@@ -1,7 +1,7 @@
 export default [
     {
         key: 'labelPosition',
-        ignore: true
+        ignore: true,
     },
     {
         weight: 15,
@@ -9,7 +9,7 @@ export default [
         label: 'Hide Input Labels',
         tooltip: 'Hide the labels of component inputs. This allows you to show the labels in the form builder, but not when it is rendered.',
         key: 'hideInputLabels',
-        input: true
+        input: true,
     },
     {
         type: 'select',
@@ -25,13 +25,13 @@ export default [
                 { label: 'Top', value: 'top' },
                 { label: 'Left', value: 'left' },
                 { label: 'Right', value: 'right' },
-                { label: 'Bottom', value: 'bottom' }
-            ]
-        }
+                { label: 'Bottom', value: 'bottom' },
+            ],
+        },
     },
     {
         key: 'placeholder',
-        ignore: true
+        ignore: true,
     },
     {
         weight: 213,
@@ -39,6 +39,6 @@ export default [
         label: 'Use Locale Settings',
         tooltip: 'Use locale settings to display day.',
         key: 'useLocaleSettings',
-        input: true
+        input: true,
     },
 ];

package/lib/mjs/components/day/editForm/Day.edit.month.js

@@ -10,14 +10,14 @@ export default [
             values: [
                 {
                     label: 'Number',
-                    value: 'number'
+                    value: 'number',
                 },
                 {
                     label: 'Select',
-                    value: 'select'
+                    value: 'select',
                 },
-            ]
-        }
+            ],
+        },
     },
     {
         weight: 210,
@@ -26,7 +26,7 @@ export default [
         key: 'fields.month.placeholder',
         label: 'Placeholder',
         placeholder: 'Month Placeholder',
-        tooltip: 'The placeholder text that will appear when Month field is empty.'
+        tooltip: 'The placeholder text that will appear when Month field is empty.',
     },
     {
         weight: 215,
@@ -38,9 +38,13 @@ export default [
             if (data.defaultValue) {
                 const defaultValueParts = data.defaultValue.split('/');
                 if (!data.fields.month.hide && defaultValueParts.length !== 3) {
-                    const newDefaultValue = ['00'];
+                    const newDefaultValue = [
+                        '00',
+                    ];
                     if (!data.fields.day.hide) {
-                        data.dayFirst ? newDefaultValue.unshift(defaultValueParts[0]) : newDefaultValue.push(defaultValueParts[0]);
+                        data.dayFirst
+                            ? newDefaultValue.unshift(defaultValueParts[0])
+                            : newDefaultValue.push(defaultValueParts[0]);
                     }
                     if (!data.fields.year.hide) {
                         newDefaultValue.push(defaultValueParts[1]);
@@ -49,6 +53,6 @@ export default [
                 }
             }
         },
-        input: true
+        input: true,
     },
 ];

package/lib/mjs/components/day/editForm/Day.edit.validation.js

@@ -1,11 +1,11 @@
 export default [
     {
         key: 'validate.required',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'validate.unique',
-        ignore: true
+        ignore: true,
     },
     {
         weight: 0,
@@ -13,7 +13,7 @@ export default [
         label: 'Require Day',
         tooltip: 'A required field must be filled in before the form can be submitted.',
         key: 'fields.day.required',
-        input: true
+        input: true,
     },
     {
         weight: 10,
@@ -21,7 +21,7 @@ export default [
         label: 'Require Month',
         tooltip: 'A required field must be filled in before the form can be submitted.',
         key: 'fields.month.required',
-        input: true
+        input: true,
     },
     {
         weight: 20,
@@ -29,14 +29,14 @@ export default [
         label: 'Require Year',
         tooltip: 'A required field must be filled in before the form can be submitted.',
         key: 'fields.year.required',
-        input: true
+        input: true,
     },
     {
         weight: 40,
         type: 'textfield',
         label: 'Minimum Day',
         placeholder: 'yyyy-MM-dd',
-        tooltip: 'A minimum date that can be set. You can also use Moment.js functions. For example: \n \n moment().subtract(10, \'days\')',
+        tooltip: "A minimum date that can be set. You can also use Moment.js functions. For example: \n \n moment().subtract(10, 'days')",
         key: 'minDate',
         input: true,
     },
@@ -45,7 +45,7 @@ export default [
         type: 'textfield',
         label: 'Maximum Day',
         placeholder: 'yyyy-MM-dd',
-        tooltip: 'A maximum day that can be set. You can also use Moment.js functions. For example: \n \n moment().add(10, \'days\')',
+        tooltip: "A maximum day that can be set. You can also use Moment.js functions. For example: \n \n moment().add(10, 'days')",
         key: 'maxDate',
         input: true,
     },

package/lib/mjs/components/day/editForm/Day.edit.year.js

@@ -10,14 +10,14 @@ export default [
             values: [
                 {
                     label: 'Number',
-                    value: 'number'
+                    value: 'number',
                 },
                 {
                     label: 'Select',
-                    value: 'select'
+                    value: 'select',
                 },
-            ]
-        }
+            ],
+        },
     },
     {
         weight: 203,
@@ -26,7 +26,7 @@ export default [
         key: 'fields.year.minYear',
         label: 'Minimum Year',
         placeholder: '1900',
-        tooltip: 'The minimum year that can be entered.'
+        tooltip: 'The minimum year that can be entered.',
     },
     {
         weight: 204,
@@ -35,7 +35,7 @@ export default [
         key: 'fields.year.maxYear',
         label: 'Maximum Year',
         placeholder: '2030',
-        tooltip: 'The maximum year that can be entered.'
+        tooltip: 'The maximum year that can be entered.',
     },
     {
         weight: 210,
@@ -44,7 +44,7 @@ export default [
         key: 'fields.year.placeholder',
         label: 'Placeholder',
         placeholder: 'Year Placeholder',
-        tooltip: 'The placeholder text that will appear when Year field is empty.'
+        tooltip: 'The placeholder text that will appear when Year field is empty.',
     },
     {
         weight: 215,
@@ -61,6 +61,6 @@ export default [
                 }
             }
         },
-        input: true
+        input: true,
     },
 ];