@formio/js 5.4.0 → 5.4.2

package/lib/mjs/components/select/editForm/Select.edit.data.js

@@ -65,10 +65,7 @@ export default [
         tooltip: 'The name of the indexeddb database.',
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.dataSrc' },
-                    'indexeddb',
-                ],
+                '===': [{ var: 'data.dataSrc' }, 'indexeddb'],
             },
         },
     },
@@ -81,10 +78,7 @@ export default [
         tooltip: 'The name of table in the indexeddb database.',
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.dataSrc' },
-                    'indexeddb',
-                ],
+                '===': [{ var: 'data.dataSrc' }, 'indexeddb'],
             },
         },
     },
@@ -100,10 +94,7 @@ export default [
         defaultValue: {},
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.dataSrc' },
-                    'indexeddb',
-                ],
+                '===': [{ var: 'data.dataSrc' }, 'indexeddb'],
             },
         },
     },
@@ -119,10 +110,7 @@ export default [
         description: '<div>Example: <pre>["apple", "banana", "orange"].</pre></div> <div>Example 2: <pre>[{"name": "John", "email": "john.doe@test.com"}, {"name": "Jane", "email": "jane.doe@test.com"}].</pre></div>',
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.dataSrc' },
-                    'json',
-                ],
+                '===': [{ var: 'data.dataSrc' }, 'json'],
             },
         },
     },
@@ -138,19 +126,10 @@ export default [
             json: {
                 and: [
                     {
-                        in: [
-                            { var: 'data.dataSrc' },
-                            [
-                                'resource',
-                                'url',
-                            ],
-                        ],
+                        in: [{ var: 'data.dataSrc' }, ['resource', 'url']],
                     },
                     {
-                        '!==': [
-                            { var: 'data.widget' },
-                            'html5',
-                        ],
+                        '!==': [{ var: 'data.widget' }, 'html5'],
                     },
                 ],
             },
@@ -164,9 +143,7 @@ export default [
         tooltip: 'Values to use as the data source. Labels are shown in the select field. Values are the corresponding values saved with the submission.',
         weight: 10,
         reorder: true,
-        defaultValue: [
-            { label: '', value: '' },
-        ],
+        defaultValue: [{ label: '', value: '' }],
         components: [
             {
                 label: 'Label',
@@ -185,10 +162,7 @@ export default [
         ],
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.dataSrc' },
-                    'values',
-                ],
+                '===': [{ var: 'data.dataSrc' }, 'values'],
             },
         },
     },
@@ -210,10 +184,7 @@ export default [
         tooltip: 'The resource to be used with this field.',
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.dataSrc' },
-                    'resource',
-                ],
+                '===': [{ var: 'data.dataSrc' }, 'resource'],
             },
         },
     },
@@ -227,10 +198,7 @@ export default [
         tooltip: 'The property within the source data, where iterable items reside. For example: results.items or results[0].items',
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.dataSrc' },
-                    'url',
-                ],
+                '===': [{ var: 'data.dataSrc' }, 'url'],
             },
         },
     },
@@ -285,16 +253,10 @@ export default [
             json: {
                 and: [
                     {
-                        '===': [
-                            { var: 'data.dataSrc' },
-                            'resource',
-                        ],
+                        '===': [{ var: 'data.dataSrc' }, 'resource'],
                     },
                     {
-                        '!==': [
-                            { var: 'data.reference' },
-                            true,
-                        ],
+                        '!==': [{ var: 'data.reference' }, true],
                     },
                     { var: 'data.data.resource' },
                 ],
@@ -342,16 +304,10 @@ export default [
             json: {
                 and: [
                     {
-                        '===': [
-                            { var: 'data.dataSrc' },
-                            'resource',
-                        ],
+                        '===': [{ var: 'data.dataSrc' }, 'resource'],
                     },
                     {
-                        '===': [
-                            { var: 'data.valueProperty' },
-                            '',
-                        ],
+                        '===': [{ var: 'data.valueProperty' }, ''],
                     },
                 ],
             },
@@ -366,10 +322,7 @@ export default [
         weight: 15,
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.dataSrc' },
-                    'url',
-                ],
+                '===': [{ var: 'data.dataSrc' }, 'url'],
             },
         },
     },
@@ -383,13 +336,7 @@ export default [
         tooltip: 'The name of the search querystring parameter used when sending a request to filter results with. The server at the URL must handle this query parameter.',
         conditional: {
             json: {
-                in: [
-                    { var: 'data.dataSrc' },
-                    [
-                        'url',
-                        'resource',
-                    ],
-                ],
+                in: [{ var: 'data.dataSrc' }, ['url', 'resource']],
             },
         },
     },
@@ -413,13 +360,7 @@ export default [
         defaultValue: 0.3,
         conditional: {
             json: {
-                in: [
-                    { var: 'data.dataSrc' },
-                    [
-                        'url',
-                        'resource',
-                    ],
-                ],
+                in: [{ var: 'data.dataSrc' }, ['url', 'resource']],
             },
         },
     },
@@ -435,16 +376,10 @@ export default [
             json: {
                 and: [
                     {
-                        '===': [
-                            { var: 'data.dataSrc' },
-                            'url',
-                        ],
+                        '===': [{ var: 'data.dataSrc' }, 'url'],
                     },
                     {
-                        '!=': [
-                            { var: 'data.searchField' },
-                            '',
-                        ],
+                        '!=': [{ var: 'data.searchField' }, ''],
                     },
                 ],
             },
@@ -460,13 +395,7 @@ export default [
         tooltip: 'Use this to provide additional filtering using query parameters.',
         conditional: {
             json: {
-                in: [
-                    { var: 'data.dataSrc' },
-                    [
-                        'url',
-                        'resource',
-                    ],
-                ],
+                in: [{ var: 'data.dataSrc' }, ['url', 'resource']],
             },
         },
     },
@@ -480,13 +409,7 @@ export default [
         tooltip: 'Use this to provide additional sorting using query parameters',
         conditional: {
             json: {
-                in: [
-                    { var: 'data.dataSrc' },
-                    [
-                        'url',
-                        'resource',
-                    ],
-                ],
+                in: [{ var: 'data.dataSrc' }, ['url', 'resource']],
             },
         },
     },
@@ -503,19 +426,10 @@ export default [
             json: {
                 and: [
                     {
-                        in: [
-                            { var: 'data.dataSrc' },
-                            [
-                                'url',
-                                'resource',
-                            ],
-                        ],
+                        in: [{ var: 'data.dataSrc' }, ['url', 'resource']],
                     },
                     {
-                        '!==': [
-                            { var: 'data.disableLimit' },
-                            true,
-                        ],
+                        '!==': [{ var: 'data.disableLimit' }, true],
                     },
                 ],
             },
@@ -533,10 +447,7 @@ export default [
         tooltip: 'Write custom code to return the value options or a promise with value options. The form data object is available.',
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.dataSrc' },
-                    'custom',
-                ],
+                '===': [{ var: 'data.dataSrc' }, 'custom'],
             },
         },
     },
@@ -566,15 +477,7 @@ export default [
         },
         conditional: {
             json: {
-                in: [
-                    { var: 'data.dataSrc' },
-                    [
-                        'url',
-                        'resource',
-                        'values',
-                        'custom',
-                    ],
-                ],
+                in: [{ var: 'data.dataSrc' }, ['url', 'resource', 'values', 'custom']],
             },
         },
     },
@@ -604,14 +507,7 @@ export default [
         },
         conditional: {
             json: {
-                in: [
-                    { var: 'data.dataSrc' },
-                    [
-                        'url',
-                        'resource',
-                        'values',
-                    ],
-                ],
+                in: [{ var: 'data.dataSrc' }, ['url', 'resource', 'values']],
             },
         },
     },
@@ -625,15 +521,7 @@ export default [
         tooltip: 'When the Refresh On field is changed, clear this components value.',
         conditional: {
             json: {
-                in: [
-                    { var: 'data.dataSrc' },
-                    [
-                        'url',
-                        'resource',
-                        'values',
-                        'custom',
-                    ],
-                ],
+                in: [{ var: 'data.dataSrc' }, ['url', 'resource', 'values', 'custom']],
             },
         },
     },
@@ -658,19 +546,10 @@ export default [
             json: {
                 and: [
                     {
-                        in: [
-                            { var: 'data.dataSrc' },
-                            [
-                                'url',
-                                'resource',
-                            ],
-                        ],
+                        in: [{ var: 'data.dataSrc' }, ['url', 'resource']],
                     },
                     {
-                        '===': [
-                            { var: 'data.searchEnabled' },
-                            true,
-                        ],
+                        '===': [{ var: 'data.searchEnabled' }, true],
                     },
                 ],
             },
@@ -706,10 +585,7 @@ export default [
         tooltip: 'Allows to create a new resource while entering a submission.',
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.dataSrc' },
-                    'resource',
-                ],
+                '===': [{ var: 'data.dataSrc' }, 'resource'],
             },
         },
     },
@@ -725,10 +601,7 @@ export default [
             json: {
                 and: [
                     {
-                        '===': [
-                            { var: 'data.dataSrc' },
-                            'resource',
-                        ],
+                        '===': [{ var: 'data.dataSrc' }, 'resource'],
                     },
                     { '!!': { var: 'data.addResource' } },
                 ],
@@ -744,10 +617,7 @@ export default [
         tooltip: 'Using this option will save this field as a reference and link its value to the value of the origin record.',
         conditional: {
             json: {
-                '===': [
-                    { var: 'data.dataSrc' },
-                    'resource',
-                ],
+                '===': [{ var: 'data.dataSrc' }, 'resource'],
             },
         },
     },
@@ -796,39 +666,24 @@ export default [
                 and: [
                     { var: 'data.valueProperty' },
                     {
-                        '===': [
-                            { var: 'data.lazyLoad' },
-                            true,
-                        ],
+                        '===': [{ var: 'data.lazyLoad' }, true],
                     },
                     {
-                        '!==': [
-                            { var: 'data.widget' },
-                            'html5',
-                        ],
+                        '!==': [{ var: 'data.widget' }, 'html5'],
                     },
                     {
                         or: [
                             {
-                                '===': [
-                                    { var: 'data.dataSrc' },
-                                    'url',
-                                ],
+                                '===': [{ var: 'data.dataSrc' }, 'url'],
                             },
                             {
                                 and: [
                                     {
-                                        '===': [
-                                            { var: 'data.dataSrc' },
-                                            'resource',
-                                        ],
+                                        '===': [{ var: 'data.dataSrc' }, 'resource'],
                                     },
                                     // 'data' means entire object from resource will be used
                                     {
-                                        '!==': [
-                                            { var: 'data.valueProperty' },
-                                            'data',
-                                        ],
+                                        '!==': [{ var: 'data.valueProperty' }, 'data'],
                                     },
                                 ],
                             },

package/lib/mjs/components/select/editForm/Select.edit.validation.js

@@ -19,15 +19,7 @@ export default [
         input: true,
         conditional: {
             json: {
-                in: [
-                    { var: 'data.dataSrc' },
-                    [
-                        'values',
-                        'json',
-                        'custom',
-                        'url',
-                    ],
-                ],
+                in: [{ var: 'data.dataSrc' }, ['values', 'json', 'custom', 'url']],
             },
         },
     },

package/lib/mjs/components/selectboxes/SelectBoxes.js

@@ -47,9 +47,7 @@ export default class SelectBoxesComponent extends RadioComponent {
         };
     }
     static savedValueTypes(schema) {
-        return (getComponentSavedTypes(schema) || [
-            componentValueTypes.object,
-        ]);
+        return getComponentSavedTypes(schema) || [componentValueTypes.object];
     }
     constructor(...args) {
         super(...args);
@@ -267,15 +265,14 @@ export default class SelectBoxesComponent extends RadioComponent {
                     this.setInputsDisabled(false);
                 }
                 if (!isValid && maxCount && count > maxCount) {
-                    const message = this.t(this.component.maxSelectedCountMessage ||
-                        'You may only select up to {{maxCount}} items', { maxCount });
+                    const message = this.t(this.component.maxSelectedCountMessage || 'maxSelectItems', { maxCount });
                     this.errors.push({ message });
                     this.setCustomValidity(message, dirty);
                     return false;
                 }
                 else if (!isValid && minCount && count < minCount) {
                     this.setInputsDisabled(false);
-                    const message = this.t(this.component.minSelectedCountMessage || 'You must select at least {{minCount}} items', { minCount });
+                    const message = this.t(this.component.minSelectedCountMessage || 'minSelectItems', { minCount });
                     this.errors.push({ message });
                     this.setCustomValidity(message, dirty);
                     return false;

package/lib/mjs/components/signature/Signature.d.ts

@@ -24,7 +24,7 @@ export default class SignatureComponent extends Input {
     checkSize(force: any, scale: any): void;
     signaturePad: SignaturePad | null | undefined;
     observer: any;
-    getValueAsString(value: any): "" | "Yes" | "No";
+    getValueAsString(value: any): string;
     focus(): void;
     setDataToSigaturePad(): void;
 }

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

@@ -24,7 +24,7 @@ export default class SignatureComponent extends Input {
             group: 'advanced',
             icon: 'pencil',
             weight: 120,
-            documentation: '/developers/integrations/esign/esign-integrations#signature-component',
+            documentation: '/userguide/forms/form-building/form-components/advanced-components#signature',
             schema: SignatureComponent.schema(),
         };
     }
@@ -34,17 +34,12 @@ 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();
@@ -180,7 +175,7 @@ export default class SignatureComponent extends Input {
         return this.renderModalPreview({
             previewText: this.dataValue
                 ? `<img src=${this.dataValue} ${this._referenceAttributeName}='openModal' style="width: 100%;height: 100%;" />`
-                : this.t('Click to Sign'),
+                : this.t('clickToSign'),
         });
     }
     attach(element) {
@@ -252,7 +247,7 @@ export default class SignatureComponent extends Input {
         if (_.isUndefined(value) && this.inDataTable) {
             return '';
         }
-        return value ? 'Yes' : 'No';
+        return this.t(value ? 'yes' : 'no');
     }
     focus() {
         this.refs.padBody.focus();

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

@@ -17,9 +17,7 @@ export default [
         placeholder: 'Width',
         conditional: {
             json: {
-                '!': [
-                    { var: 'data.keepOverlayRatio' },
-                ],
+                '!': [{ var: 'data.keepOverlayRatio' }],
             },
         },
         weight: 50,
@@ -33,9 +31,7 @@ export default [
         placeholder: 'Height',
         conditional: {
             json: {
-                '!': [
-                    { var: 'data.keepOverlayRatio' },
-                ],
+                '!': [{ var: 'data.keepOverlayRatio' }],
             },
         },
         weight: 51,

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

@@ -27,16 +27,11 @@ 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();
@@ -133,21 +128,15 @@ export default class SurveyComponent extends Field {
         <table border="1" style="width:100%">
           <thead>
             <tr>
-              <th>Question</th>
-              <th>Value</th>
+              <th>${this.t('surveyQuestion')}</th>
+              <th>${this.t('surveyQuestionValue')}</th>
             </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;
                 }

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

@@ -11,9 +11,7 @@ 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',
@@ -28,9 +26,7 @@ export default [
                 type: 'textfield',
                 allowCalculateOverride: true,
                 calculateValue: {
-                    _camelCase: [
-                        { var: 'row.label' },
-                    ],
+                    _camelCase: [{ var: 'row.label' }],
                 },
             },
             {
@@ -49,9 +45,7 @@ export default [
         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',
@@ -66,9 +60,7 @@ export default [
                 type: 'textfield',
                 allowCalculateOverride: true,
                 calculateValue: {
-                    _camelCase: [
-                        { var: 'row.label' },
-                    ],
+                    _camelCase: [{ var: 'row.label' }],
                 },
             },
             {

package/lib/mjs/components/table/editForm/Table.edit.display.js

@@ -68,10 +68,10 @@ export default [
         tooltip: 'Enter the number or columns that should be displayed by this table.',
     },
     {
-        label: "Column Headers",
+        label: 'Column Headers',
         multiple: true,
-        key: "header",
-        type: "textfield",
+        key: 'header',
+        type: 'textfield',
         input: true,
         tooltip: 'Enter header names for the columns',
         customConditional: "if(instance && instance.dataValue && Array.isArray(instance.dataValue)) {\r\n  const isAllowToAddHeader = instance.dataValue.length < data.numCols;\r\n  const addBtn = _.get(instance, 'refs.addButton[0]', null);\r\n  if(addBtn) {\r\n    isAllowToAddHeader? addBtn.removeAttribute('disabled'):  addBtn.setAttribute('disabled', 'disabled');\r\n  }\r\n} ",