@formio/js 5.2.3 → 5.2.4-rc.0

package/lib/mjs/components/datamap/editForm/DataMap.edit.display.js

@@ -1,19 +1,19 @@
 export default [
     {
         key: 'placeholder',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'tabindex',
-        ignore: true
+        ignore: true,
     },
     {
         type: 'textfield',
         label: 'Label for Key column',
         key: 'keyLabel',
-        tooltip: 'Provide a label text for Key column (otherwise \'Key\' will be used)',
+        tooltip: "Provide a label text for Key column (otherwise 'Key' will be used)",
         weight: 404,
-        input: true
+        input: true,
     },
     {
         type: 'checkbox',
@@ -21,7 +21,7 @@ export default [
         key: 'disableAddingRemovingRows',
         tooltip: 'Check if you want to hide Add Another button and Remove Row button',
         weight: 405,
-        input: true
+        input: true,
     },
     {
         type: 'checkbox',
@@ -29,7 +29,7 @@ export default [
         key: 'keyBeforeValue',
         tooltip: 'Check if you would like to show the Key before the Value column.',
         weight: 406,
-        input: true
+        input: true,
     },
     {
         type: 'textfield',
@@ -41,6 +41,6 @@ export default [
         input: true,
         customConditional(context) {
             return !context.data.disableAddingRemovingRows;
-        }
-    }
+        },
+    },
 ];

package/lib/mjs/components/datetime/DateTime.form.js

@@ -13,27 +13,27 @@ export default function (...extend) {
     return Components.baseEditForm([
         {
             key: 'display',
-            components: DateTimeEditDisplay
+            components: DateTimeEditDisplay,
         },
         {
             label: 'Date',
             key: 'date',
             weight: 1,
-            components: DateTimeEditDate
+            components: DateTimeEditDate,
         },
         {
             label: 'Time',
             key: 'time',
             weight: 2,
-            components: DateTimeEditTime
+            components: DateTimeEditTime,
         },
         {
             key: 'data',
-            components: DateTimeEditData
+            components: DateTimeEditData,
         },
         {
             key: 'validation',
-            components: DateTimeEditValidation
+            components: DateTimeEditValidation,
         },
     ], ...extend);
 }

package/lib/mjs/components/datetime/DateTime.js

@@ -28,7 +28,7 @@ export default class DateTimeComponent extends Input {
                 yearRows: 4,
                 yearColumns: 5,
                 minDate: null,
-                maxDate: null
+                maxDate: null,
             },
             timePicker: {
                 hourStep: 1,
@@ -36,7 +36,7 @@ export default class DateTimeComponent extends Input {
                 showMeridian: true,
                 readonlyInput: false,
                 mousewheel: true,
-                arrowkeys: true
+                arrowkeys: true,
             },
             customOptions: {},
         }, ...extend);
@@ -48,7 +48,7 @@ export default class DateTimeComponent extends Input {
             icon: 'calendar',
             documentation: '/userguide/form-building/advanced-components#date-and-time',
             weight: 40,
-            schema: DateTimeComponent.schema()
+            schema: DateTimeComponent.schema(),
         };
     }
     static get serverConditionSettings() {
@@ -57,34 +57,49 @@ export default class DateTimeComponent extends Input {
     static get conditionOperatorsSettings() {
         return {
             ...super.conditionOperatorsSettings,
-            operators: ['isDateEqual', 'isNotDateEqual', 'isEmpty', 'isNotEmpty', 'dateLessThan', 'dateGreaterThan', 'dateLessThanOrEqual', 'dateGreaterThanOrEqual'],
+            operators: [
+                'isDateEqual',
+                'isNotDateEqual',
+                'isEmpty',
+                'isNotEmpty',
+                'dateLessThan',
+                'dateGreaterThan',
+                'dateLessThanOrEqual',
+                'dateGreaterThanOrEqual',
+            ],
             valueComponent(classComp) {
                 return {
                     ...classComp,
                     type: 'datetime',
                 };
-            }
+            },
         };
     }
     static savedValueTypes(schema) {
         schema = schema || {};
-        return getComponentSavedTypes(schema) || [componentValueTypes.date];
+        return (getComponentSavedTypes(schema) || [
+            componentValueTypes.date,
+        ]);
     }
     constructor(component, options, data) {
         super(component, options, data);
-        const timezone = (this.component.timezone || this.options.timezone);
+        const timezone = this.component.timezone || this.options.timezone;
         const time24hr = !_.get(this.component, 'timePicker.showMeridian', true);
         // Change the format to map to the settings.
         if (!this.component.enableDate) {
             this.component.format = this.component.format.replace(/yyyy-MM-dd /g, '');
         }
-        else if (this.component.enableDate && !/[yMd]/.test(this.component.format) && this.builderMode) {
+        else if (this.component.enableDate &&
+            !/[yMd]/.test(this.component.format) &&
+            this.builderMode) {
             this.component.format = `yyyy-MM-dd ${this.component.format}`;
         }
         if (!this.component.enableTime) {
             this.component.format = this.component.format.replace(/ hh:mm a$/g, '');
         }
-        else if (this.component.enableTime && !/[mhH]/.test(this.component.format) && this.builderMode) {
+        else if (this.component.enableTime &&
+            !/[mhH]/.test(this.component.format) &&
+            this.builderMode) {
             this.component.format = `${this.component.format} hh:mm a`;
         }
         else if (time24hr) {
@@ -103,7 +118,6 @@ export default class DateTimeComponent extends Input {
                 customOptions = {};
             }
         }
-        /* eslint-disable camelcase */
         this.component.widget = {
             type: 'calendar',
             timezone,
@@ -131,7 +145,6 @@ export default class DateTimeComponent extends Input {
         // it is done here since these settings depend on properties present after the component is initialized
         // originalComponent is used to restore the component (and widget) after evaluating field logic
         this.originalComponent = fastCloneDeep(this.component);
-        /* eslint-enable camelcase */
     }
     get defaultSchema() {
         return DateTimeComponent.schema();
@@ -151,7 +164,7 @@ export default class DateTimeComponent extends Input {
         return FormioUtils.convertFormatToMoment(this.component.format);
     }
     isEmpty(value = this.dataValue) {
-        if (value && (value.toString() === 'Invalid Date')) {
+        if (value && value.toString() === 'Invalid Date') {
             return true;
         }
         return super.isEmpty(value);
@@ -161,8 +174,8 @@ export default class DateTimeComponent extends Input {
         return result === 'Invalid date' ? input : result;
     }
     isEqual(valueA, valueB = this.dataValue) {
-        return (this.isEmpty(valueA) && this.isEmpty(valueB))
-            || moment.utc(valueA).format(this.momentFormat) === moment.utc(valueB).format(this.momentFormat);
+        return ((this.isEmpty(valueA) && this.isEmpty(valueB)) ||
+            moment.utc(valueA).format(this.momentFormat) === moment.utc(valueB).format(this.momentFormat));
     }
     createWrapper() {
         return false;
@@ -183,12 +196,14 @@ export default class DateTimeComponent extends Input {
         const timezone = this.timezone;
         if (value && !this.attached && timezone) {
             if (Array.isArray(value) && this.component.multiple) {
-                return value.map(item => _.trim(FormioUtils.momentDate(item, format, timezone, options).format(format))).join(', ');
+                return value
+                    .map((item) => _.trim(FormioUtils.momentDate(item, format, timezone, options).format(format)))
+                    .join(', ');
             }
             return _.trim(FormioUtils.momentDate(value, format, timezone, options).format(format));
         }
         if (Array.isArray(value) && this.component.multiple) {
-            return value.map(item => _.trim(moment(item).format(format))).join(', ');
+            return value.map((item) => _.trim(moment(item).format(format))).join(', ');
         }
         return (value ? _.trim(moment(value).format(format)) : value) || '';
     }

package/lib/mjs/components/datetime/editForm/DateTime.edit.data.js

@@ -5,9 +5,10 @@ export default [
         key: 'defaultDate',
         label: 'Default Date',
         placeholder: 'moment()',
-        tooltip: 'You can use Moment.js functions to set the default value to a specific date. For example: \n \n moment().subtract(10, \'days\')',
-        weight: 6
-    }, {
+        tooltip: "You can use Moment.js functions to set the default value to a specific date. For example: \n \n moment().subtract(10, 'days')",
+        weight: 6,
+    },
+    {
         type: 'textarea',
         as: 'json',
         editor: 'ace',

package/lib/mjs/components/datetime/editForm/DateTime.edit.date.js

@@ -7,7 +7,7 @@ export default [
         key: 'enableDate',
         label: 'Enable Date Input',
         weight: 0,
-        tooltip: 'Enables date input for this field.'
+        tooltip: 'Enables date input for this field.',
     },
     {
         type: 'tags',
@@ -17,9 +17,9 @@ export default [
         placeholder: '(yyyy-MM-dd) or (yyyy-MM-dd - yyyy-MM-dd)',
         tooltip: 'Add dates that you want to blacklist. For example: \n \n 2025-02-21',
         validate: {
-            custom: 'if (_.isEmpty(input)) {\n  return true;\n}\nconst dates = _.isArray(input) ?\ninput : input.split(component.delimeter);\nconst isValid = _.every(dates, (data) => \n  !!data.match(/\\d{4}-\\d{2}-\\d{2}/g));\nvalid = isValid || \'Invalid date\';'
+            custom: "if (_.isEmpty(input)) {\n  return true;\n}\nconst dates = _.isArray(input) ?\ninput : input.split(component.delimeter);\nconst isValid = _.every(dates, (data) => \n  !!data.match(/\\d{4}-\\d{2}-\\d{2}/g));\nvalid = isValid || 'Invalid date';",
         },
-        weight: 21
+        weight: 21,
     },
     {
         type: 'panel',
@@ -40,16 +40,16 @@ export default [
                 key: 'datePicker.disableFunction',
                 label: 'Disabling dates by a function',
                 description: 'For more information check out the <a href="https://flatpickr.js.org/examples/#disabling-dates" target="_blank" rel="noopener noreferrer">Docs</a>',
-                weight: 22
+                weight: 22,
             },
             {
                 type: 'htmlelement',
                 tag: 'div',
                 content: '<h4>Example</h4>' +
                     `<pre>// Disable all weekends<br>date.getDay() === 0 || date.getDay() === 6</pre>
-          `
-            }
-        ]
+          `,
+            },
+        ],
     },
     {
         type: 'checkbox',
@@ -57,7 +57,7 @@ export default [
         key: 'datePicker.disableWeekends',
         label: 'Disable weekends',
         tooltip: 'Check to disable weekends',
-        weight: 23
+        weight: 23,
     },
     {
         type: 'checkbox',
@@ -65,6 +65,6 @@ export default [
         key: 'datePicker.disableWeekdays',
         label: 'Disable weekdays',
         tooltip: 'Check to disable weekdays',
-        weight: 23
-    }
+        weight: 23,
+    },
 ];

package/lib/mjs/components/datetime/editForm/DateTime.edit.display.js

@@ -13,9 +13,9 @@ export default [
                 { label: 'of Viewer', value: 'viewer' },
                 { label: 'of Submission', value: 'submission' },
                 { label: 'of Location', value: 'location' },
-                { label: 'UTC', value: 'utc' }
-            ]
-        }
+                { label: 'UTC', value: 'utc' },
+            ],
+        },
     },
     {
         type: 'select',
@@ -29,12 +29,17 @@ export default [
         valueProperty: 'name',
         dataSrc: 'url',
         data: {
-            url: '{{options.cdnUrl}}/timezones.json'
+            url: '{{options.cdnUrl}}/timezones.json',
         },
         template: '<span>{{ item.label }}</span>',
         conditional: {
-            json: { '===': [{ var: 'data.displayInTimezone' }, 'location'] }
-        }
+            json: {
+                '===': [
+                    { var: 'data.displayInTimezone' },
+                    'location',
+                ],
+            },
+        },
     },
     {
         type: 'checkbox',
@@ -42,7 +47,7 @@ export default [
         key: 'useLocaleSettings',
         label: 'Use Locale Settings',
         tooltip: 'Use locale settings to display date and time.',
-        weight: 51
+        weight: 51,
     },
     {
         type: 'checkbox',
@@ -50,7 +55,7 @@ export default [
         key: 'allowInput',
         label: 'Allow Manual Input',
         tooltip: 'Check this if you would like to allow the user to manually enter in the date.',
-        weight: 51
+        weight: 51,
     },
     {
         type: 'textfield',
@@ -60,7 +65,7 @@ export default [
         placeholder: 'Format',
         description: 'Use formats provided by <a href="https://github.com/angular-ui/bootstrap/tree/master/src/dateparser/docs#uibdateparsers-format-codes" target="_blank" rel="noopener noreferrer">DateParser Codes</a>',
         tooltip: 'The date format for displaying the datetime value.',
-        weight: 52
+        weight: 52,
     },
     {
         type: 'editgrid',
@@ -70,7 +75,7 @@ export default [
         description: 'You can specify few buttons which will be shown above the calendar. Use Label to specify the name of the button and onClick to specify which date/time will be set when user clicks the button. E.g, date = new Date()',
         templates: {
             header: '<div class="row">\n  <div class="col-sm-3">Label</div>\n  <div class="col-sm-6">onClick</div>\n</div>',
-            row: '<div class="row">\n      <div class="col-sm-3">\n        {{ flattenedComponents.label.getView(row.label) }}\n      </div>\n      <div class="col-sm-6">\n        {{ flattenedComponents.onClick.getView(row.onClick) }}\n      </div>\n      {% if (!instance.disabled) { %}\n        <div class="col-sm-3">\n          <div class="btn-group pull-right">\n            <button class="btn btn-default btn-light btn-sm editRow"><i class="{{ iconClass("edit") }}"></i></button>\n            {% if (!instance.hasRemoveButtons || instance.hasRemoveButtons()) { %}\n              <button class="btn btn-danger btn-sm removeRow"><i class="{{ iconClass("trash") }}"></i></button>\n            {% } %}\n          </div>\n        </div>\n      {% } %}\n    </div>'
+            row: '<div class="row">\n      <div class="col-sm-3">\n        {{ flattenedComponents.label.getView(row.label) }}\n      </div>\n      <div class="col-sm-6">\n        {{ flattenedComponents.onClick.getView(row.onClick) }}\n      </div>\n      {% if (!instance.disabled) { %}\n        <div class="col-sm-3">\n          <div class="btn-group pull-right">\n            <button class="btn btn-default btn-light btn-sm editRow"><i class="{{ iconClass("edit") }}"></i></button>\n            {% if (!instance.hasRemoveButtons || instance.hasRemoveButtons()) { %}\n              <button class="btn btn-danger btn-sm removeRow"><i class="{{ iconClass("trash") }}"></i></button>\n            {% } %}\n          </div>\n        </div>\n      {% } %}\n    </div>',
         },
         components: [
             {
@@ -79,8 +84,8 @@ export default [
                 type: 'textfield',
                 input: true,
                 validate: {
-                    required: true
-                }
+                    required: true,
+                },
             },
             {
                 label: 'onClick',
@@ -89,10 +94,10 @@ export default [
                 editor: 'ace',
                 input: true,
                 validate: {
-                    required: true
-                }
-            }
+                    required: true,
+                },
+            },
         ],
-        defaultValue: []
-    }
+        defaultValue: [],
+    },
 ];

package/lib/mjs/components/datetime/editForm/DateTime.edit.time.js

@@ -5,7 +5,7 @@ export default [
         key: 'enableTime',
         label: 'Enable Time Input',
         tooltip: 'Enables time input for this field.',
-        weight: 0
+        weight: 0,
     },
     {
         type: 'number',
@@ -13,7 +13,7 @@ export default [
         key: 'timePicker.hourStep',
         label: 'Hour Step Size',
         tooltip: 'The number of hours to increment/decrement in the time picker.',
-        weight: 10
+        weight: 10,
     },
     {
         type: 'number',
@@ -21,7 +21,7 @@ export default [
         key: 'timePicker.minuteStep',
         label: 'Minute Step Size',
         tooltip: 'The number of minutes to increment/decrement in the time picker.',
-        weight: 20
+        weight: 20,
     },
     {
         type: 'checkbox',
@@ -29,6 +29,6 @@ export default [
         key: 'timePicker.showMeridian',
         label: '12 Hour Time (AM/PM)',
         tooltip: 'Display time in 12 hour time with AM/PM.',
-        weight: 30
-    }
+        weight: 30,
+    },
 ];

package/lib/mjs/components/datetime/editForm/DateTime.edit.validation.js

@@ -6,7 +6,7 @@ export default [
         label: 'Use Input to add moment.js for minDate',
         persistent: false,
         weight: 10,
-        tooltip: 'Enables to use input for moment functions instead of calendar.'
+        tooltip: 'Enables to use input for moment functions instead of calendar.',
     },
     {
         label: 'Minimum Date',
@@ -55,7 +55,7 @@ export default [
         label: 'Use Input to add moment.js for maxDate',
         persistent: false,
         weight: 20,
-        tooltip: 'Enables to use input for moment functions instead of calendar.'
+        tooltip: 'Enables to use input for moment functions instead of calendar.',
     },
     {
         label: 'Maximum Date',
@@ -99,5 +99,5 @@ export default [
         enableTime: false,
         skipMerge: true,
         weight: 20,
-    }
+    },
 ];

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

@@ -14,7 +14,7 @@ export default function (...extend) {
     return Components.baseEditForm([
         {
             key: 'display',
-            components: DayEditDisplay
+            components: DayEditDisplay,
         },
         {
             key: 'data',
@@ -22,25 +22,25 @@ export default function (...extend) {
         },
         {
             key: 'validation',
-            components: DayEditValidation
+            components: DayEditValidation,
         },
         {
             key: 'day',
             label: 'Day',
             weight: 3,
-            components: DayEditDay
+            components: DayEditDay,
         },
         {
             key: 'month',
             label: 'Month',
             weight: 3,
-            components: DayEditMonth
+            components: DayEditMonth,
         },
         {
             key: 'year',
             label: 'Year',
             weight: 3,
-            components: DayEditYear
+            components: DayEditYear,
         },
     ], ...extend);
 }