@formio/js 5.2.3 → 5.2.4-rc.0

package/lib/mjs/components/html/editForm/HTML.edit.display.js

@@ -1,39 +1,39 @@
 export default [
     {
         key: 'labelPosition',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'placeholder',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'description',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'tooltip',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'hideLabel',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'autofocus',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'disabled',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'tabindex',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'tableView',
-        ignore: true
+        ignore: true,
     },
     {
         type: 'textfield',
@@ -42,7 +42,7 @@ export default [
         weight: 50,
         label: 'HTML Tag',
         placeholder: 'HTML Element Tag',
-        tooltip: 'The tag of this HTML element.'
+        tooltip: 'The tag of this HTML element.',
     },
     {
         type: 'textfield',
@@ -51,7 +51,7 @@ export default [
         weight: 60,
         label: 'CSS Class',
         placeholder: 'CSS Class',
-        tooltip: 'The CSS class for this HTML element.'
+        tooltip: 'The CSS class for this HTML element.',
     },
     {
         type: 'datagrid',
@@ -65,15 +65,15 @@ export default [
                 label: 'Attribute',
                 key: 'attr',
                 input: true,
-                type: 'textfield'
+                type: 'textfield',
             },
             {
                 label: 'Value',
                 key: 'value',
                 input: true,
-                type: 'textfield'
-            }
-        ]
+                type: 'textfield',
+            },
+        ],
     },
     {
         type: 'textarea',
@@ -85,7 +85,7 @@ export default [
         tooltip: 'The content of this HTML element.',
         defaultValue: '<div class="well">Content</div>',
         key: 'content',
-        weight: 80
+        weight: 80,
     },
     {
         weight: 85,
@@ -93,6 +93,6 @@ export default [
         label: 'Refresh On Change',
         tooltip: 'Rerender the field whenever a value on the form changes.',
         key: 'refreshOnChange',
-        input: true
+        input: true,
     },
 ];

package/lib/mjs/components/html/editForm/HTML.edit.logic.js

@@ -83,10 +83,10 @@ export default [
                                 weight: 30,
                                 input: true,
                                 customConditional(context) {
-                                    return context.row.type === 'property' &&
+                                    return (context.row.type === 'property' &&
                                         context.row.hasOwnProperty('property') &&
                                         context.row.property.type === 'string' &&
-                                        context.row.property.component === 'content';
+                                        context.row.property.component === 'content');
                                 },
                             },
                         ],

package/lib/mjs/components/number/Number.form.js

@@ -11,15 +11,15 @@ export default function (...extend) {
     return textEditForm([
         {
             key: 'display',
-            components: NumberEditDisplay
+            components: NumberEditDisplay,
         },
         {
             key: 'data',
-            components: NumberEditData
+            components: NumberEditData,
         },
         {
             key: 'validation',
-            components: NumberEditValidation
+            components: NumberEditValidation,
         },
     ], ...extend);
 }

package/lib/mjs/components/number/Number.js

@@ -2,7 +2,7 @@ import { createNumberMask } from '@formio/text-mask-addons';
 import { conformToMask, maskInput } from '@formio/vanilla-text-mask';
 import _ from 'lodash';
 import Input from '../_classes/input/Input';
-import { getNumberSeparators, getNumberDecimalLimit, componentValueTypes, getComponentSavedTypes } from '../../utils/';
+import { getNumberSeparators, getNumberDecimalLimit, componentValueTypes, getComponentSavedTypes, } from '../../utils';
 export default class NumberComponent extends Input {
     static schema(...extend) {
         return Input.schema({
@@ -13,8 +13,8 @@ export default class NumberComponent extends Input {
                 min: '',
                 max: '',
                 step: 'any',
-                integer: ''
-            }
+                integer: '',
+            },
         }, ...extend);
     }
     static get builderInfo() {
@@ -24,7 +24,7 @@ export default class NumberComponent extends Input {
             group: 'basic',
             documentation: '/userguide/form-building/form-components#number',
             weight: 30,
-            schema: NumberComponent.schema()
+            schema: NumberComponent.schema(),
         };
     }
     static get serverConditionSettings() {
@@ -33,27 +33,43 @@ export default class NumberComponent extends Input {
     static get conditionOperatorsSettings() {
         return {
             ...super.conditionOperatorsSettings,
-            operators: [...super.conditionOperatorsSettings.operators, 'lessThan', 'greaterThan', 'lessThanOrEqual', 'greaterThanOrEqual'],
+            operators: [
+                ...super.conditionOperatorsSettings.operators,
+                'lessThan',
+                'greaterThan',
+                'lessThanOrEqual',
+                'greaterThanOrEqual',
+            ],
             valueComponent(classComp) {
                 return { ...classComp, type: 'number' };
-            }
+            },
         };
     }
     static savedValueTypes(schema) {
         schema = schema || {};
-        return getComponentSavedTypes(schema) || [componentValueTypes.number];
+        return (getComponentSavedTypes(schema) || [
+            componentValueTypes.number,
+        ]);
     }
     constructor(...args) {
         super(...args);
         const separators = getNumberSeparators(this.options.language || navigator.language);
-        this.decimalSeparator = this.options.decimalSeparator = this.component.decimalSymbol || this.options.decimalSeparator
-            || this.options.properties?.decimalSeparator
-            || separators.decimalSeparator;
+        this.decimalSeparator = this.options.decimalSeparator =
+            this.component.decimalSymbol ||
+                this.options.decimalSeparator ||
+                this.options.properties?.decimalSeparator ||
+                separators.decimalSeparator;
         if (this.component.delimiter) {
-            this.delimiter = this.component.thousandsSeparator || this.options.properties?.thousandsSeparator || this.options.thousandsSeparator || separators.delimiter;
+            this.delimiter =
+                this.component.thousandsSeparator ||
+                    this.options.properties?.thousandsSeparator ||
+                    this.options.thousandsSeparator ||
+                    separators.delimiter;
         }
         else {
-            if (this.component.thousandsSeparator || this.options.properties?.thousandsSeparator || this.options.thousandsSeparator) {
+            if (this.component.thousandsSeparator ||
+                this.options.properties?.thousandsSeparator ||
+                this.options.thousandsSeparator) {
                 console.warn('In order for thousands separator to work properly, you must set the delimiter to true in the component json');
             }
             this.delimiter = '';

package/lib/mjs/components/number/editForm/Number.edit.data.js

@@ -5,7 +5,7 @@ export default [
         weight: 70,
         key: 'delimiter',
         label: 'Use Thousands Separator',
-        tooltip: 'Separate thousands by local delimiter.'
+        tooltip: 'Separate thousands by local delimiter.',
     },
     {
         type: 'number',
@@ -13,7 +13,7 @@ export default [
         weight: 80,
         key: 'decimalLimit',
         label: 'Decimal Places',
-        tooltip: 'The maximum number of decimal places.'
+        tooltip: 'The maximum number of decimal places.',
     },
     {
         type: 'checkbox',
@@ -21,7 +21,7 @@ export default [
         weight: 90,
         key: 'requireDecimal',
         label: 'Require Decimal',
-        tooltip: 'Always show decimals, even if trailing zeros.'
+        tooltip: 'Always show decimals, even if trailing zeros.',
     },
     {
         key: 'case',

package/lib/mjs/components/number/editForm/Number.edit.display.js

@@ -1,15 +1,15 @@
 export default [
     {
         key: 'spellcheck',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'inputMask',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'allowMultipleMasks',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'showWordCount',
@@ -18,5 +18,5 @@ export default [
     {
         key: 'showCharCount',
         ignore: true,
-    }
+    },
 ];

package/lib/mjs/components/number/editForm/Number.edit.validation.js

@@ -1,27 +1,27 @@
 export default [
     {
         key: 'unique',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'validate.minLength',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'validate.maxLength',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'validate.minWords',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'validate.maxWords',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'validate.pattern',
-        ignore: true
+        ignore: true,
     },
     {
         type: 'number',
@@ -30,7 +30,7 @@ export default [
         input: true,
         placeholder: 'Minimum Value',
         tooltip: 'The minimum value this field must have before the form can be submitted.',
-        weight: 150
+        weight: 150,
     },
     {
         type: 'number',
@@ -39,6 +39,6 @@ export default [
         input: true,
         placeholder: 'Maximum Value',
         tooltip: 'The maximum value this field can have before the form can be submitted.',
-        weight: 160
-    }
+        weight: 160,
+    },
 ];

package/lib/mjs/components/panel/Panel.form.js

@@ -10,7 +10,7 @@ export default function (...extend) {
     return nestedComponentForm([
         {
             key: 'display',
-            components: PanelEditDisplay
+            components: PanelEditDisplay,
         },
         {
             key: 'conditional',

package/lib/mjs/components/panel/Panel.js

@@ -13,7 +13,7 @@ export default class PanelComponent extends NestedComponent {
             clearOnHide: false,
             input: false,
             tableView: false,
-            persistent: false
+            persistent: false,
         }, ...extend);
     }
     static get builderInfo() {
@@ -24,7 +24,7 @@ export default class PanelComponent extends NestedComponent {
             documentation: '/userguide/form-building/layout-components#panel',
             showPreview: false,
             weight: 30,
-            schema: PanelComponent.schema()
+            schema: PanelComponent.schema(),
         };
     }
     get defaultSchema() {

package/lib/mjs/components/panel/editForm/Panel.edit.conditional.js

@@ -3,19 +3,18 @@ import _isEqual from 'lodash/isEqual';
 import _omit from 'lodash/omit';
 import _difference from 'lodash/difference';
 import _keys from 'lodash/keys';
-/* eslint-disable quotes, max-len */
 const title = 'Advanced Next Page';
 const jsonProp = 'nextPage';
 const jsProp = 'nextPage';
-const jsDocHTML = (`
+const jsDocHTML = `
   <p>You must assign the <strong>next</strong> variable with the API key of the next page.</p>
   <p>The global variable <strong>data</strong> is provided, and allows you to access the data of any form component, by using its API key.</p>
   <p>Also <strong>moment</strong> library is available, and allows you to manipulate dates in a convenient way.</p>
   <h5>Example</h5><pre>next = data.addComment ? 'page3' : 'page4';</pre>
-`);
-const jsonDocHTML = (`
+`;
+const jsonDocHTML = `
   <p>Submission data is available as JsonLogic variables, with the same api key as your components.</p>
-`);
+`;
 const settingComponent = EditFormUtils.javaScriptValue(title, jsProp, jsonProp, 110, jsDocHTML, jsonDocHTML);
 export default [
     {
@@ -34,7 +33,6 @@ export default [
                 }
             }
             return isWizardPanel;
-        }
-    }
+        },
+    },
 ];
-/* eslint-enable quotes, max-len */

package/lib/mjs/components/panel/editForm/Panel.edit.display.js

@@ -1,34 +1,38 @@
-import _isEqual from 'lodash/isEqual';
+import _isEqual from 'lodash/isEqualWith';
 import _omit from 'lodash/omit';
+import _omitBy from 'lodash/omitBy';
 import _difference from 'lodash/difference';
+import _isNumber from 'lodash/isNumber';
+import _isPlainObject from 'lodash/isPlainObject';
+import _each from 'lodash/each';
 import _keys from 'lodash/keys';
 export default [
     {
         key: 'labelPosition',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'placeholder',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'description',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'autofocus',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'tableView',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'label',
         hidden: true,
         calculateValue(context) {
             return context.data.title;
-        }
+        },
     },
     {
         key: 'tabindex',
@@ -41,7 +45,7 @@ export default [
         placeholder: 'Panel Title',
         label: 'Title',
         key: 'title',
-        tooltip: 'The title text that appears in the header of this panel.'
+        tooltip: 'The title text that appears in the header of this panel.',
     },
     {
         weight: 20,
@@ -50,7 +54,7 @@ export default [
         key: 'tooltip',
         label: 'Tooltip',
         placeholder: 'To add a tooltip to this field, enter text here.',
-        tooltip: 'Adds a tooltip to the side of this field.'
+        tooltip: 'Adds a tooltip to the side of this field.',
     },
     {
         weight: 30,
@@ -66,9 +70,9 @@ export default [
                 { label: 'Info', value: 'info' },
                 { label: 'Success', value: 'success' },
                 { label: 'Danger', value: 'danger' },
-                { label: 'Warning', value: 'warning' }
-            ]
-        }
+                { label: 'Warning', value: 'warning' },
+            ],
+        },
     },
     {
         weight: 40,
@@ -83,8 +87,11 @@ export default [
                 defaultValue: true,
                 customConditional({ data = {}, buildingForm = {} }) {
                     const formSettings = buildingForm.settings || {};
-                    return ![data.breadcrumb, formSettings.wizardBreadcrumbsType].includes('none');
-                }
+                    return ![
+                        data.breadcrumb,
+                        formSettings.wizardBreadcrumbsType,
+                    ].includes('none');
+                },
             },
             {
                 input: true,
@@ -94,8 +101,13 @@ export default [
                 defaultValue: false,
                 tooltip: 'Determines if the breadcrumb bar is clickable or not for visited tabs.',
                 conditional: {
-                    json: { '===': [{ var: 'data.breadcrumbClickable' }, false] }
-                }
+                    json: {
+                        '===': [
+                            { var: 'data.breadcrumbClickable' },
+                            false,
+                        ],
+                    },
+                },
             },
             {
                 weight: 50,
@@ -113,7 +125,7 @@ export default [
                     {
                         label: 'Next',
                         value: 'next',
-                    }
+                    },
                 ],
                 inline: true,
                 type: 'selectboxes',
@@ -123,7 +135,7 @@ export default [
                 defaultValue: {
                     previous: true,
                     cancel: true,
-                    next: true
+                    next: true,
                 },
             },
             {
@@ -134,7 +146,7 @@ export default [
                 input: true,
                 inputType: 'checkbox',
                 defaultValue: false,
-                tooltip: 'Use the Enter key to go forward through pages.'
+                tooltip: 'Use the Enter key to go forward through pages.',
             },
             {
                 weight: 56,
@@ -144,7 +156,7 @@ export default [
                 input: true,
                 inputType: 'checkbox',
                 defaultValue: false,
-                tooltip: 'Use the Enter key to submit form on last page.'
+                tooltip: 'Use the Enter key to submit form on last page.',
             },
             {
                 weight: 60,
@@ -154,24 +166,33 @@ export default [
                 input: true,
                 inputType: 'checkbox',
                 defaultValue: false,
-                tooltip: 'Scroll to the top of the wizard page when user navigates to it'
-            }
+                tooltip: 'Scroll to the top of the wizard page when user navigates to it',
+            },
         ],
         customConditional(context) {
             let isWizardPanel = false;
             if (context.instance.options.editForm.display === 'wizard') {
                 const { components } = context.instance.options.editForm;
-                const component = context.instance.options.editComponent;
+                let component = context.instance.options.editComponent;
                 if (components && component) {
+                    const cleanComponent = (comp, diff) => {
+                        const cleanComp = _omit(comp, diff);
+                        _each(cleanComp, (propValue, prop) => {
+                            if (_isPlainObject(propValue)) {
+                                cleanComp[prop] = _omitBy(propValue, (v) => !v && !_isNumber(v) && v !== false);
+                            }
+                        });
+                        return cleanComp;
+                    };
                     isWizardPanel = components.some((comp) => {
                         const diff = _difference(_keys(comp), _keys(component)) || [];
                         diff.push('components');
-                        return _isEqual(_omit(comp, diff), _omit(component, diff));
+                        return _isEqual(cleanComponent(comp, diff), cleanComponent(component, diff));
                     });
                 }
             }
             return isWizardPanel;
-        }
+        },
     },
     {
         weight: 650,
@@ -179,7 +200,7 @@ export default [
         label: 'Collapsible',
         tooltip: 'If checked, this will turn this Panel into a collapsible panel.',
         key: 'collapsible',
-        input: true
+        input: true,
     },
     {
         weight: 651,
@@ -189,7 +210,12 @@ export default [
         key: 'collapsed',
         input: true,
         conditional: {
-            json: { '===': [{ var: 'data.collapsible' }, true] }
-        }
-    }
+            json: {
+                '===': [
+                    { var: 'data.collapsible' },
+                    true,
+                ],
+            },
+        },
+    },
 ];

package/lib/mjs/components/password/Password.form.js

@@ -11,15 +11,15 @@ export default function (...extend) {
     return textEditForm([
         {
             key: 'data',
-            components: PasswordEditData
+            components: PasswordEditData,
         },
         {
             key: 'display',
-            components: PasswordEditDisplay
+            components: PasswordEditDisplay,
         },
         {
             key: 'validation',
-            components: PasswordEditValidation
+            components: PasswordEditValidation,
         },
     ], ...extend);
 }

package/lib/mjs/components/password/Password.js

@@ -17,11 +17,14 @@ export default class PasswordComponent extends TextFieldComponent {
             group: 'basic',
             documentation: '/userguide/form-building/form-components#password',
             weight: 40,
-            schema: PasswordComponent.schema()
+            schema: PasswordComponent.schema(),
         };
     }
     get defaultSchema() {
-        return _.omit(PasswordComponent.schema(), ['protected', 'tableView']);
+        return _.omit(PasswordComponent.schema(), [
+            'protected',
+            'tableView',
+        ]);
     }
     get inputInfo() {
         const info = super.inputInfo;