@formio/js 5.2.3 → 5.2.4-rc.0

package/lib/mjs/components/selectboxes/editForm/SelectBoxes.edit.validation.js

@@ -5,7 +5,7 @@ export default [
         key: 'validate.minSelectedCount',
         label: 'Minimum checked number',
         tooltip: 'Minimum checkboxes required before form can be submitted.',
-        weight: 250
+        weight: 250,
     },
     {
         type: 'number',
@@ -13,7 +13,7 @@ export default [
         key: 'validate.maxSelectedCount',
         label: 'Maximum checked number',
         tooltip: 'Maximum checkboxes possible before form can be submitted.',
-        weight: 250
+        weight: 250,
     },
     {
         type: 'textfield',
@@ -21,7 +21,7 @@ export default [
         key: 'minSelectedCountMessage',
         label: 'Minimum checked error message',
         tooltip: 'Error message displayed if minimum number of items not checked.',
-        weight: 250
+        weight: 250,
     },
     {
         type: 'textfield',
@@ -29,6 +29,6 @@ export default [
         key: 'maxSelectedCountMessage',
         label: 'Maximum checked error message',
         tooltip: 'Error message displayed if maximum number of items checked.',
-        weight: 250
-    }
+        weight: 250,
+    },
 ];

package/lib/mjs/components/signature/Signature.form.js

@@ -11,15 +11,15 @@ export default function (...extend) {
     return Components.baseEditForm([
         {
             key: 'display',
-            components: SignatureEditDisplay
+            components: SignatureEditDisplay,
         },
         {
             key: 'data',
-            components: SignatureEditData
+            components: SignatureEditData,
         },
         {
             key: 'validation',
-            components: SignatureEditValidation
+            components: SignatureEditValidation,
         },
     ], ...extend);
 }

package/lib/mjs/components/signature/Signature.js

@@ -25,7 +25,7 @@ export default class SignatureComponent extends Input {
             icon: 'pencil',
             weight: 120,
             documentation: '/developers/integrations/esign/esign-integrations#signature-component',
-            schema: SignatureComponent.schema()
+            schema: SignatureComponent.schema(),
         };
     }
     static get serverConditionSettings() {
@@ -34,12 +34,17 @@ export default class SignatureComponent extends Input {
     static get conditionOperatorsSettings() {
         return {
             ...super.conditionOperatorsSettings,
-            operators: ['isEmpty', 'isNotEmpty'],
+            operators: [
+                'isEmpty',
+                'isNotEmpty',
+            ],
         };
     }
     static savedValueTypes(schema) {
         schema = schema || {};
-        return getComponentSavedTypes(schema) || [componentValueTypes.string];
+        return (getComponentSavedTypes(schema) || [
+            componentValueTypes.string,
+        ]);
     }
     init() {
         super.init();
@@ -51,10 +56,10 @@ export default class SignatureComponent extends Input {
         if (!this.component.height) {
             this.component.height = '200px';
         }
-        if (this.component.keepOverlayRatio
-            && this.options?.display === 'pdf'
-            && this.component.overlay?.width
-            && this.component.overlay?.height) {
+        if (this.component.keepOverlayRatio &&
+            this.options?.display === 'pdf' &&
+            this.component.overlay?.width &&
+            this.component.overlay?.height) {
             this.ratio = this.component.overlay?.width / this.component.overlay?.height;
             this.component.width = '100%';
             this.component.height = 'auto';
@@ -137,7 +142,8 @@ export default class SignatureComponent extends Input {
         }
     }
     checkSize(force, scale) {
-        if (this.refs.padBody && (force || this.refs.padBody && this.refs.padBody.offsetWidth !== this.currentWidth)) {
+        if (this.refs.padBody &&
+            (force || (this.refs.padBody && this.refs.padBody.offsetWidth !== this.currentWidth))) {
             this.scale = force ? scale : this.scale;
             this.currentWidth = this.refs.padBody.offsetWidth;
             const width = this.currentWidth * this.scale;
@@ -149,7 +155,7 @@ export default class SignatureComponent extends Input {
             this.refs.canvas.style.maxHeight = `${maxHeight}px`;
             const ctx = this.refs.canvas.getContext('2d');
             ctx.setTransform(1, 0, 0, 1, 0, 0);
-            ctx.scale((1 / this.scale), (1 / this.scale));
+            ctx.scale(1 / this.scale, 1 / this.scale);
             ctx.fillStyle = this.signaturePad.backgroundColor;
             ctx.fillRect(0, 0, this.refs.canvas.width, this.refs.canvas.height);
             this.signaturePad.clear();
@@ -172,13 +178,18 @@ export default class SignatureComponent extends Input {
     }
     getModalPreviewTemplate() {
         return this.renderModalPreview({
-            previewText: this.dataValue ?
-                `<img src=${this.dataValue} ${this._referenceAttributeName}='openModal' style="width: 100%;height: 100%;" />` :
-                this.t('Click to Sign')
+            previewText: this.dataValue
+                ? `<img src=${this.dataValue} ${this._referenceAttributeName}='openModal' style="width: 100%;height: 100%;" />`
+                : this.t('Click to Sign'),
         });
     }
     attach(element) {
-        this.loadRefs(element, { canvas: 'single', refresh: 'single', padBody: 'single', signatureImage: 'single' });
+        this.loadRefs(element, {
+            canvas: 'single',
+            refresh: 'single',
+            padBody: 'single',
+            signatureImage: 'single',
+        });
         const superAttach = super.attach(element);
         if (this.refs.refresh && this.options.readOnly) {
             this.refs.refresh.classList.add('disabled');
@@ -189,7 +200,7 @@ export default class SignatureComponent extends Input {
                 minWidth: this.component.minWidth,
                 maxWidth: this.component.maxWidth,
                 penColor: this.component.penColor,
-                backgroundColor: this.component.backgroundColor
+                backgroundColor: this.component.backgroundColor,
             });
             this.signaturePad.addEventListener('endStroke', () => this.setValue(this.signaturePad.toDataURL()));
             this.refs.signatureImage.setAttribute('src', this.signaturePad.toDataURL());
@@ -225,7 +236,6 @@ export default class SignatureComponent extends Input {
         this.setValue(this.dataValue);
         return superAttach;
     }
-    /* eslint-enable max-statements */
     detach() {
         if (this.observer) {
             this.observer.disconnect();

package/lib/mjs/components/signature/editForm/Signature.edit.display.js

@@ -6,7 +6,7 @@ export default [
         label: 'Footer Label',
         tooltip: 'The footer text that appears below the signature area.',
         placeholder: 'Footer Label',
-        weight: 10
+        weight: 10,
     },
     {
         type: 'textfield',
@@ -16,9 +16,13 @@ export default [
         tooltip: 'The width of the signature area.',
         placeholder: 'Width',
         conditional: {
-            json: { '!': [{ var: 'data.keepOverlayRatio' }] },
+            json: {
+                '!': [
+                    { var: 'data.keepOverlayRatio' },
+                ],
+            },
         },
-        weight: 50
+        weight: 50,
     },
     {
         type: 'textfield',
@@ -26,10 +30,15 @@ export default [
         key: 'height',
         label: 'Height',
         tooltip: 'The height of the signature area.',
-        placeholder: 'Height', conditional: {
-            json: { '!': [{ var: 'data.keepOverlayRatio' }] },
+        placeholder: 'Height',
+        conditional: {
+            json: {
+                '!': [
+                    { var: 'data.keepOverlayRatio' },
+                ],
+            },
         },
-        weight: 51
+        weight: 51,
     },
     {
         weight: 52,
@@ -37,8 +46,8 @@ export default [
         label: 'Keep Overlay Aspect Ratio',
         tooltip: 'If checked, the field will have the same aspect ratio as its preview.',
         key: 'keepOverlayRatio',
-        customConditional: ({ options }) => (options?.editForm?.display === 'pdf'),
-        input: true
+        customConditional: ({ options }) => options?.editForm?.display === 'pdf',
+        input: true,
     },
     {
         type: 'textfield',
@@ -47,7 +56,7 @@ export default [
         label: 'Background Color',
         tooltip: 'The background color of the signature area.',
         placeholder: 'Background Color',
-        weight: 52
+        weight: 52,
     },
     {
         type: 'textfield',
@@ -56,7 +65,7 @@ export default [
         label: 'Pen Color',
         tooltip: 'The ink color for the signature area.',
         placeholder: 'Pen Color',
-        weight: 53
+        weight: 53,
     },
     {
         key: 'placeholder',

package/lib/mjs/components/survey/Survey.form.js

@@ -11,15 +11,15 @@ export default function (...extend) {
     return Components.baseEditForm([
         {
             key: 'display',
-            components: SurveyEditDisplay
+            components: SurveyEditDisplay,
         },
         {
             key: 'data',
-            components: SurveyEditData
+            components: SurveyEditData,
         },
         {
             key: 'validation',
-            components: SurveyEditValidation
+            components: SurveyEditValidation,
         },
     ], ...extend);
 }

package/lib/mjs/components/survey/Survey.js

@@ -8,7 +8,7 @@ export default class SurveyComponent extends Field {
             label: 'Survey',
             key: 'survey',
             questions: [],
-            values: []
+            values: [],
         }, ...extend);
     }
     static get builderInfo() {
@@ -18,7 +18,7 @@ export default class SurveyComponent extends Field {
             icon: 'list',
             weight: 110,
             documentation: '/userguide/form-building/advanced-components#survey',
-            schema: SurveyComponent.schema()
+            schema: SurveyComponent.schema(),
         };
     }
     static get serverConditionSettings() {
@@ -27,11 +27,16 @@ export default class SurveyComponent extends Field {
     static get conditionOperatorsSettings() {
         return {
             ...super.conditionOperatorsSettings,
-            operators: ['isEmpty', 'isNotEmpty'],
+            operators: [
+                'isEmpty',
+                'isNotEmpty',
+            ],
         };
     }
     static savedValueTypes(schema) {
-        return getComponentSavedTypes(schema) || [componentValueTypes.object];
+        return (getComponentSavedTypes(schema) || [
+            componentValueTypes.object,
+        ]);
     }
     get defaultSchema() {
         return SurveyComponent.schema();
@@ -48,7 +53,7 @@ export default class SurveyComponent extends Field {
             }
             else {
                 this.addEventListener(input, 'change', () => this.updateValue(null, {
-                    modified: true
+                    modified: true,
                 }));
             }
         });
@@ -62,7 +67,7 @@ export default class SurveyComponent extends Field {
         _.each(this.component.questions, (question) => {
             _.each(this.refs.input, (input) => {
                 if (input.name === this.getInputName(question)) {
-                    input.checked = (input.value === value[question.value]);
+                    input.checked = input.value === value[question.value];
                 }
             });
         });
@@ -78,9 +83,11 @@ export default class SurveyComponent extends Field {
     get defaultValue() {
         const defaultValue = super.defaultValue;
         //support for default values created in old formio.js versions
-        if (defaultValue && !_.isObject(defaultValue) && this.component.values.some(value => value.value === defaultValue)) {
+        if (defaultValue &&
+            !_.isObject(defaultValue) &&
+            this.component.values.some((value) => value.value === defaultValue)) {
             const adoptedDefaultValue = {};
-            this.component.questions.forEach(question => {
+            this.component.questions.forEach((question) => {
                 adoptedDefaultValue[question.value] = defaultValue;
             });
             return adoptedDefaultValue;
@@ -94,7 +101,7 @@ export default class SurveyComponent extends Field {
         const value = {};
         _.each(this.component.questions, (question) => {
             _.each(this.refs.input, (input) => {
-                if (input.checked && (input.name === this.getInputName(question))) {
+                if (input.checked && input.name === this.getInputName(question)) {
                     value[question.value] = input.value;
                     return false;
                 }
@@ -122,7 +129,7 @@ export default class SurveyComponent extends Field {
     }
     getValueAsString(value, options) {
         if (options?.email) {
-            let result = (`
+            let result = `
         <table border="1" style="width:100%">
           <thead>
             <tr>
@@ -131,19 +138,25 @@ export default class SurveyComponent extends Field {
             </tr>
           </thead>
           <tbody>
-      `);
+      `;
             _.forIn(value, (value, key) => {
-                const question = _.find(this.component.questions, ['value', key]);
-                const answer = _.find(this.component.values, ['value', value]);
+                const question = _.find(this.component.questions, [
+                    'value',
+                    key,
+                ]);
+                const answer = _.find(this.component.values, [
+                    'value',
+                    value,
+                ]);
                 if (!question || !answer) {
                     return;
                 }
-                result += (`
+                result += `
             <tr>
               <td style="text-align:center;padding: 5px 10px;">${question.label}</td>
               <td style="text-align:center;padding: 5px 10px;">${answer.label}</td>
             </tr>
-          `);
+          `;
             });
             result += '</tbody></table>';
             return result;
@@ -153,8 +166,8 @@ export default class SurveyComponent extends Field {
             return _.isEmpty(value)
                 ? ''
                 : _.map(value, (v, q) => {
-                    const valueLabel = _.get(_.find(values, val => _.isEqual(val.value, v)), 'label', v);
-                    const questionLabel = _.get(_.find(questions, quest => _.isEqual(quest.value, q)), 'label', q);
+                    const valueLabel = _.get(_.find(values, (val) => _.isEqual(val.value, v)), 'label', v);
+                    const questionLabel = _.get(_.find(questions, (quest) => _.isEqual(quest.value, q)), 'label', q);
                     return `${questionLabel}: ${valueLabel}`;
                 }).join('; ');
         }

package/lib/mjs/components/survey/editForm/Survey.edit.data.js

@@ -1,7 +1,7 @@
 export default [
     {
         key: 'multiple',
-        ignore: true
+        ignore: true,
     },
     {
         type: 'datagrid',
@@ -11,13 +11,15 @@ export default [
         tooltip: 'The questions you would like to ask in this survey question.',
         weight: 0,
         reorder: true,
-        defaultValue: [{ label: '', value: '' }],
+        defaultValue: [
+            { label: '', value: '' },
+        ],
         components: [
             {
                 label: 'Label',
                 key: 'label',
                 input: true,
-                type: 'textfield'
+                type: 'textfield',
             },
             {
                 label: 'Value',
@@ -25,7 +27,11 @@ export default [
                 input: true,
                 type: 'textfield',
                 allowCalculateOverride: true,
-                calculateValue: { _camelCase: [{ var: 'row.label' }] }
+                calculateValue: {
+                    _camelCase: [
+                        { var: 'row.label' },
+                    ],
+                },
             },
             {
                 label: 'Tooltip',
@@ -33,23 +39,25 @@ export default [
                 input: true,
                 type: 'textfield',
             },
-        ]
+        ],
     },
     {
         type: 'datagrid',
         input: true,
         label: 'Values',
         key: 'values',
-        tooltip: 'The values that can be selected per question. Example: \'Satisfied\', \'Very Satisfied\', etc.',
+        tooltip: "The values that can be selected per question. Example: 'Satisfied', 'Very Satisfied', etc.",
         weight: 1,
         reorder: true,
-        defaultValue: [{ label: '', value: '' }],
+        defaultValue: [
+            { label: '', value: '' },
+        ],
         components: [
             {
                 label: 'Label',
                 key: 'label',
                 input: true,
-                type: 'textfield'
+                type: 'textfield',
             },
             {
                 label: 'Value',
@@ -57,7 +65,11 @@ export default [
                 input: true,
                 type: 'textfield',
                 allowCalculateOverride: true,
-                calculateValue: { _camelCase: [{ var: 'row.label' }] }
+                calculateValue: {
+                    _camelCase: [
+                        { var: 'row.label' },
+                    ],
+                },
             },
             {
                 label: 'Tooltip',
@@ -65,6 +77,6 @@ export default [
                 input: true,
                 type: 'textfield',
             },
-        ]
-    }
+        ],
+    },
 ];

package/lib/mjs/components/survey/editForm/Survey.edit.display.js

@@ -1,6 +1,6 @@
 export default [
     {
         key: 'placeholder',
-        ignore: true
+        ignore: true,
     },
 ];

package/lib/mjs/components/survey/editForm/Survey.edit.validation.js

@@ -1,6 +1,6 @@
 export default [
     {
         key: 'validateOn',
-        ignore: true
+        ignore: true,
     },
 ];

package/lib/mjs/components/table/Table.form.js

@@ -9,7 +9,7 @@ export default function (...extend) {
     return nestedComponentForm([
         {
             key: 'display',
-            components: TableEditDisplay
+            components: TableEditDisplay,
         },
     ], ...extend);
 }

package/lib/mjs/components/table/Table.js

@@ -29,7 +29,7 @@ export default class TableComponent extends NestedComponent {
             bordered: false,
             hover: false,
             condensed: false,
-            persistent: false
+            persistent: false,
         }, ...extend);
     }
     static get builderInfo() {
@@ -40,7 +40,7 @@ export default class TableComponent extends NestedComponent {
             weight: 40,
             documentation: '/userguide/form-building/layout-components#table',
             showPreview: false,
-            schema: TableComponent.schema()
+            schema: TableComponent.schema(),
         };
     }
     static savedValueTypes() {
@@ -103,7 +103,9 @@ export default class TableComponent extends NestedComponent {
         for (let rowIndex = 0; rowIndex < this.component.numRows; rowIndex++) {
             this.component.rows[rowIndex] = this.component.rows[rowIndex] || [];
             for (let colIndex = 0; colIndex < this.component.numCols; colIndex++) {
-                this.component.rows[rowIndex][colIndex] = this.component.rows[rowIndex][colIndex] || { components: [] };
+                this.component.rows[rowIndex][colIndex] = this.component.rows[rowIndex][colIndex] || {
+                    components: [],
+                };
             }
             this.component.rows[rowIndex] = this.component.rows[rowIndex].slice(0, this.component.numCols);
         }
@@ -130,7 +132,7 @@ export default class TableComponent extends NestedComponent {
                         columnComponent = comp;
                     }
                     else {
-                        columnComponent = { ...comp, id: (comp.id + rowIndex) };
+                        columnComponent = { ...comp, id: comp.id + rowIndex };
                     }
                     const component = this.createComponent(columnComponent);
                     component.tableRow = rowIndex;
@@ -145,7 +147,7 @@ export default class TableComponent extends NestedComponent {
             cellClassName: this.cellClassName,
             tableKey: this.tableKey,
             colWidth: this.colWidth,
-            tableComponents: this.table.map(row => row.map(column => this.renderComponents(column)))
+            tableComponents: this.table.map((row) => row.map((column) => this.renderComponents(column))),
         }));
     }
     attach(element) {

package/lib/mjs/components/table/editForm/Table.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: 'autofocus',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'tooltip',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'tabindex',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'disabled',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'tableView',
-        ignore: true
+        ignore: true,
     },
     {
         key: 'hideLabel',
-        ignore: true
+        ignore: true,
     },
     {
         weight: 0,
@@ -44,10 +44,10 @@ export default [
         placeholder: 'Field Label',
         tooltip: 'The label for this field.',
         validate: {
-            required: true
+            required: true,
         },
         autofocus: true,
-        overrideEditForm: true
+        overrideEditForm: true,
     },
     {
         type: 'number',
@@ -56,7 +56,7 @@ export default [
         input: true,
         weight: 1,
         placeholder: 'Number of Rows',
-        tooltip: 'Enter the number or rows that should be displayed by this table.'
+        tooltip: 'Enter the number or rows that should be displayed by this table.',
     },
     {
         type: 'number',
@@ -65,7 +65,7 @@ export default [
         input: true,
         weight: 2,
         placeholder: 'Number of Columns',
-        tooltip: 'Enter the number or columns that should be displayed by this table.'
+        tooltip: 'Enter the number or columns that should be displayed by this table.',
     },
     {
         type: 'checkbox',
@@ -73,7 +73,7 @@ export default [
         key: 'cloneRows',
         input: true,
         weight: 3,
-        tooltip: 'Check this if you would like to \'clone\' the first row of components to all additional empty rows of the table.'
+        tooltip: "Check this if you would like to 'clone' the first row of components to all additional empty rows of the table.",
     },
     {
         type: 'select',
@@ -86,11 +86,11 @@ export default [
             values: [
                 { label: 'Left', value: 'left' },
                 { label: 'Center', value: 'center' },
-                { label: 'Right', value: 'right' }
-            ]
+                { label: 'Right', value: 'right' },
+            ],
         },
         defaultValue: 'left',
-        weight: 3
+        weight: 3,
     },
     {
         type: 'checkbox',
@@ -98,7 +98,7 @@ export default [
         key: 'striped',
         tooltip: 'This will stripe the table if checked.',
         input: true,
-        weight: 701
+        weight: 701,
     },
     {
         type: 'checkbox',
@@ -106,7 +106,7 @@ export default [
         key: 'bordered',
         input: true,
         tooltip: 'This will border the table if checked.',
-        weight: 702
+        weight: 702,
     },
     {
         type: 'checkbox',
@@ -114,7 +114,7 @@ export default [
         key: 'hover',
         input: true,
         tooltip: 'Highlight a row on hover.',
-        weight: 703
+        weight: 703,
     },
     {
         type: 'checkbox',
@@ -122,10 +122,10 @@ export default [
         key: 'condensed',
         input: true,
         tooltip: 'Condense the size of the table.',
-        weight: 704
+        weight: 704,
     },
     {
         key: 'hideLabel',
-        ignore: true
+        ignore: true,
     },
 ];