@formio/js 5.2.4-rc.0 → 5.2.5

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,34 +37,23 @@ 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 && !options.inFormBuilder && !options.building) {
+        if (!options.inFormBuilder && !options.building) {
             if (component.maxDate && component.maxDate.indexOf('moment(') === -1) {
                 component.maxDate = moment(component.maxDate, 'YYYY-MM-DD').toISOString();
             }
@@ -149,7 +138,7 @@ export default class DayComponent extends Field {
                 step: 1,
                 min,
                 max,
-            },
+            }
         };
     }
     selectDefinition(name) {
@@ -161,8 +150,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() {
@@ -170,12 +159,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;
@@ -187,8 +176,7 @@ 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' },
@@ -201,7 +189,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;
     }
@@ -210,32 +198,24 @@ 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() {
@@ -267,19 +247,18 @@ 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)
             });
         }
     }
@@ -310,8 +289,7 @@ 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) {
@@ -324,15 +302,9 @@ 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);
             });
         }
@@ -383,32 +355,16 @@ 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;
@@ -470,17 +426,7 @@ 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;
@@ -517,7 +463,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 {
@@ -541,67 +487,43 @@ 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) {
             if (!isModalEditClosed) {
                 this.dataValue = this.emptyValue;
                 if (this.options.building) {
-                    this.triggerChange();
+                    this.triggerChange?.();
                 }
             }
             return null;
@@ -611,10 +533,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;
     }
@@ -634,7 +556,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.
@@ -667,12 +589,10 @@ 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) {
@@ -695,22 +615,12 @@ 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,13 +38,9 @@ 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]);
@@ -53,7 +49,7 @@ export default [
                 }
             }
         },
-        input: true,
+        input: true
     },
     {
         weight: 214,
@@ -61,6 +57,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,13 +38,9 @@ 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]);
@@ -53,6 +49,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,
     },