@formio/js 5.2.3 → 5.2.4-rc.0

package/lib/mjs/components/select/editForm/Select.edit.data.d.ts

@@ -376,6 +376,7 @@ declare const _default: ({
     valueProperty: string;
     dataSrc: string;
     lazyLoad: boolean;
+    authenticate: boolean;
     onSetItems(component: any, form: any): {
         label: string;
         key: string;
@@ -415,7 +416,6 @@ declare const _default: ({
     description?: undefined;
     reorder?: undefined;
     components?: undefined;
-    authenticate?: undefined;
     placeholder?: undefined;
     validate?: undefined;
     delimiter?: undefined;

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

@@ -2,7 +2,7 @@ import _ from 'lodash';
 import { eachComponent } from '../../../utils';
 const calculateSingleSelectData = (context, defaultValue) => {
     const { instance, data } = context;
-    const rawDefaultValue = instance.downloadedResources.find(resource => _.get(resource, data.valueProperty) === defaultValue);
+    const rawDefaultValue = instance.downloadedResources.find((resource) => _.get(resource, data.valueProperty) === defaultValue);
     const options = { data: {}, noeval: true };
     instance.interpolate(data.template, {
         item: rawDefaultValue,
@@ -64,7 +64,12 @@ export default [
         label: 'Database name',
         tooltip: 'The name of the indexeddb database.',
         conditional: {
-            json: { '===': [{ var: 'data.dataSrc' }, 'indexeddb'] },
+            json: {
+                '===': [
+                    { var: 'data.dataSrc' },
+                    'indexeddb',
+                ],
+            },
         },
     },
     {
@@ -75,8 +80,13 @@ export default [
         weight: 16,
         tooltip: 'The name of table in the indexeddb database.',
         conditional: {
-            json: { '===': [{ var: 'data.dataSrc' }, 'indexeddb'] },
-        }
+            json: {
+                '===': [
+                    { var: 'data.dataSrc' },
+                    'indexeddb',
+                ],
+            },
+        },
     },
     {
         type: 'textarea',
@@ -89,7 +99,12 @@ export default [
         tooltip: 'Filter table items that match the object.',
         defaultValue: {},
         conditional: {
-            json: { '===': [{ var: 'data.dataSrc' }, 'indexeddb'] },
+            json: {
+                '===': [
+                    { var: 'data.dataSrc' },
+                    'indexeddb',
+                ],
+            },
         },
     },
     {
@@ -103,7 +118,12 @@ export default [
         tooltip: 'A valid JSON array to use as a data source.',
         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'] },
+            json: {
+                '===': [
+                    { var: 'data.dataSrc' },
+                    'json',
+                ],
+            },
         },
     },
     {
@@ -111,7 +131,7 @@ export default [
         input: true,
         label: 'Lazy Load Data',
         key: 'lazyLoad',
-        tooltip: 'When set, this will not fire off the request to the URL until this control is within focus. This can improve performance if you have many Select dropdowns on your form where the API\'s will only fire when the control is activated.',
+        tooltip: "When set, this will not fire off the request to the URL until this control is within focus. This can improve performance if you have many Select dropdowns on your form where the API's will only fire when the control is activated.",
         weight: 11,
         defaultValue: true,
         conditional: {
@@ -129,10 +149,10 @@ export default [
                     {
                         '!==': [
                             { var: 'data.widget' },
-                            'html5'
-                        ]
-                    }
-                ]
+                            'html5',
+                        ],
+                    },
+                ],
             },
         },
     },
@@ -144,7 +164,9 @@ 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',
@@ -162,7 +184,12 @@ export default [
             },
         ],
         conditional: {
-            json: { '===': [{ var: 'data.dataSrc' }, 'values'] },
+            json: {
+                '===': [
+                    { var: 'data.dataSrc' },
+                    'values',
+                ],
+            },
         },
     },
     {
@@ -182,7 +209,12 @@ export default [
         weight: 10,
         tooltip: 'The resource to be used with this field.',
         conditional: {
-            json: { '===': [{ var: 'data.dataSrc' }, 'resource'] },
+            json: {
+                '===': [
+                    { var: 'data.dataSrc' },
+                    'resource',
+                ],
+            },
         },
     },
     {
@@ -194,7 +226,12 @@ export default [
         description: 'The object path to the iterable items.',
         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'] },
+            json: {
+                '===': [
+                    { var: 'data.dataSrc' },
+                    'url',
+                ],
+            },
         },
     },
     {
@@ -211,18 +248,21 @@ export default [
         valueProperty: 'key',
         dataSrc: 'url',
         lazyLoad: false,
+        authenticate: true,
         onSetItems(component, form) {
             const newItems = form.type === 'resource'
-                ? [{
+                ? [
+                    {
                         label: '{Entire Object}',
                         key: 'data',
-                    }]
+                    },
+                ]
                 : [];
             eachComponent(form.components, (component, path) => {
                 if (component.input) {
                     newItems.push({
                         label: component.label || component.key,
-                        key: `data.${path}`
+                        key: `data.${path}`,
                     });
                 }
             });
@@ -244,8 +284,18 @@ export default [
         conditional: {
             json: {
                 and: [
-                    { '===': [{ var: 'data.dataSrc' }, 'resource'] },
-                    { '!==': [{ var: 'data.reference' }, true] },
+                    {
+                        '===': [
+                            { var: 'data.dataSrc' },
+                            'resource',
+                        ],
+                    },
+                    {
+                        '!==': [
+                            { var: 'data.reference' },
+                            true,
+                        ],
+                    },
                     { var: 'data.data.resource' },
                 ],
             },
@@ -278,7 +328,7 @@ export default [
         weight: 12,
         label: 'ID Path',
         placeholder: 'id',
-        tooltip: 'Path to the select option id.'
+        tooltip: 'Path to the select option id.',
     },
     {
         type: 'textfield',
@@ -291,8 +341,18 @@ export default [
         conditional: {
             json: {
                 and: [
-                    { '===': [{ var: 'data.dataSrc' }, 'resource'] },
-                    { '===': [{ var: 'data.valueProperty' }, ''] },
+                    {
+                        '===': [
+                            { var: 'data.dataSrc' },
+                            'resource',
+                        ],
+                    },
+                    {
+                        '===': [
+                            { var: 'data.valueProperty' },
+                            '',
+                        ],
+                    },
                 ],
             },
         },
@@ -305,7 +365,12 @@ export default [
         tooltip: 'When enabled the request will not include the limit and skip options in the query string',
         weight: 15,
         conditional: {
-            json: { '===': [{ var: 'data.dataSrc' }, 'url'] },
+            json: {
+                '===': [
+                    { var: 'data.dataSrc' },
+                    'url',
+                ],
+            },
         },
     },
     {
@@ -369,8 +434,18 @@ export default [
         conditional: {
             json: {
                 and: [
-                    { '===': [{ var: 'data.dataSrc' }, 'url'] },
-                    { '!=': [{ var: 'data.searchField' }, ''] },
+                    {
+                        '===': [
+                            { var: 'data.dataSrc' },
+                            'url',
+                        ],
+                    },
+                    {
+                        '!=': [
+                            { var: 'data.searchField' },
+                            '',
+                        ],
+                    },
                 ],
             },
         },
@@ -427,15 +502,22 @@ export default [
         conditional: {
             json: {
                 and: [
-                    { in: [
+                    {
+                        in: [
                             { var: 'data.dataSrc' },
                             [
                                 'url',
-                                'resource'
+                                'resource',
                             ],
-                        ] },
-                    { '!==': [{ var: 'data.disableLimit' }, true] }
-                ]
+                        ],
+                    },
+                    {
+                        '!==': [
+                            { var: 'data.disableLimit' },
+                            true,
+                        ],
+                    },
+                ],
             },
         },
     },
@@ -450,7 +532,12 @@ export default [
         placeholder: "values = data['mykey'] or values = Promise.resolve(['myValue'])",
         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'] },
+            json: {
+                '===': [
+                    { var: 'data.dataSrc' },
+                    'custom',
+                ],
+            },
         },
     },
     {
@@ -470,12 +557,12 @@ export default [
                     if (component.key !== context.data.key) {
                         values.push({
                             label: component.label || component.key,
-                            value: path
+                            value: path,
                         });
                     }
                 });
                 return values;
-            }
+            },
         },
         conditional: {
             json: {
@@ -485,7 +572,7 @@ export default [
                         'url',
                         'resource',
                         'values',
-                        'custom'
+                        'custom',
                     ],
                 ],
             },
@@ -508,12 +595,12 @@ export default [
                     if (component.key !== context.data.key) {
                         values.push({
                             label: component.label || component.key,
-                            value: path
+                            value: path,
                         });
                     }
                 });
                 return values;
-            }
+            },
         },
         conditional: {
             json: {
@@ -522,7 +609,7 @@ export default [
                     [
                         'url',
                         'resource',
-                        'values'
+                        'values',
                     ],
                 ],
             },
@@ -544,7 +631,7 @@ export default [
                         'url',
                         'resource',
                         'values',
-                        'custom'
+                        'custom',
                     ],
                 ],
             },
@@ -566,19 +653,26 @@ export default [
         key: 'noRefreshOnScroll',
         label: 'Disable Options Refresh When Scrolling',
         defaultValue: false,
-        tooltip: 'When checked, the select with search input won\'t perform new api requests when scrolling through the list of options.',
+        tooltip: "When checked, the select with search input won't perform new api requests when scrolling through the list of options.",
         conditional: {
             json: {
                 and: [
-                    { in: [
+                    {
+                        in: [
                             { var: 'data.dataSrc' },
                             [
                                 'url',
-                                'resource'
+                                'resource',
                             ],
-                        ] },
-                    { '===': [{ var: 'data.searchEnabled' }, true] }
-                ]
+                        ],
+                    },
+                    {
+                        '===': [
+                            { var: 'data.searchEnabled' },
+                            true,
+                        ],
+                    },
+                ],
             },
         },
     },
@@ -611,7 +705,12 @@ export default [
         label: 'Add Resource',
         tooltip: 'Allows to create a new resource while entering a submission.',
         conditional: {
-            json: { '===': [{ var: 'data.dataSrc' }, 'resource'] },
+            json: {
+                '===': [
+                    { var: 'data.dataSrc' },
+                    'resource',
+                ],
+            },
         },
     },
     {
@@ -625,7 +724,12 @@ export default [
         conditional: {
             json: {
                 and: [
-                    { '===': [{ var: 'data.dataSrc' }, 'resource'] },
+                    {
+                        '===': [
+                            { var: 'data.dataSrc' },
+                            'resource',
+                        ],
+                    },
                     { '!!': { var: 'data.addResource' } },
                 ],
             },
@@ -639,7 +743,12 @@ export default [
         label: 'Save as reference',
         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'] },
+            json: {
+                '===': [
+                    { var: 'data.dataSrc' },
+                    'resource',
+                ],
+            },
         },
     },
     {
@@ -686,21 +795,46 @@ export default [
             json: {
                 and: [
                     { var: 'data.valueProperty' },
-                    { '===': [{ var: 'data.lazyLoad' }, true] },
-                    { '!==': [{ var: 'data.widget' }, 'html5'] },
+                    {
+                        '===': [
+                            { var: 'data.lazyLoad' },
+                            true,
+                        ],
+                    },
+                    {
+                        '!==': [
+                            { 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.display.js

@@ -3,7 +3,7 @@ export default [
         type: 'select',
         input: true,
         weight: 20,
-        tooltip: 'Select the type of widget you\'d like to use.',
+        tooltip: "Select the type of widget you'd like to use.",
         key: 'widget',
         defaultValue: 'choicesjs',
         label: 'Widget Type',
@@ -21,6 +21,6 @@ export default [
         label: 'Unique Options',
         tooltip: 'Display only unique dropdown options.',
         key: 'uniqueOptions',
-        input: true
+        input: true,
     },
 ];

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

@@ -7,8 +7,8 @@ export default [
         key: 'validate.select',
         input: true,
         conditional: {
-            json: { var: 'data.searchField' }
-        }
+            json: { var: 'data.searchField' },
+        },
     },
     {
         weight: 52,
@@ -25,10 +25,10 @@ export default [
                         'values',
                         'json',
                         'custom',
-                        'url'
+                        'url',
                     ],
                 ],
             },
         },
-    }
+    },
 ];

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

@@ -13,12 +13,12 @@ export default function (...extend) {
                 {
                     key: 'dataType',
                     ignore: true,
-                }
-            ]
+                },
+            ],
         },
         {
             key: 'validation',
-            components: SelectBoxesEditValidation
+            components: SelectBoxesEditValidation,
         },
     ], ...extend);
 }

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

@@ -7,7 +7,7 @@ export default class SelectBoxesComponent extends RadioComponent {
             type: 'selectboxes',
             label: 'Select Boxes',
             key: 'selectBoxes',
-            inline: false
+            inline: false,
         }, ...extend);
     }
     static get builderInfo() {
@@ -17,7 +17,7 @@ export default class SelectBoxesComponent extends RadioComponent {
             icon: 'plus-square',
             weight: 60,
             documentation: '/userguide/form-building/form-components#select-box',
-            schema: SelectBoxesComponent.schema()
+            schema: SelectBoxesComponent.schema(),
         };
     }
     static get serverConditionSettings() {
@@ -35,7 +35,7 @@ export default class SelectBoxesComponent extends RadioComponent {
                         valueProperty: 'value',
                         dataType: 'string',
                         data: {
-                            custom: `values = ${classComp && classComp.values ? JSON.stringify(classComp.values) : []}`
+                            custom: `values = ${classComp && classComp.values ? JSON.stringify(classComp.values) : []}`,
                         },
                     }
                     : {
@@ -43,11 +43,13 @@ export default class SelectBoxesComponent extends RadioComponent {
                         dataType: 'string',
                         type: 'select',
                     };
-            }
+            },
         };
     }
     static savedValueTypes(schema) {
-        return getComponentSavedTypes(schema) || [componentValueTypes.object];
+        return (getComponentSavedTypes(schema) || [
+            componentValueTypes.object,
+        ]);
     }
     constructor(...args) {
         super(...args);
@@ -122,7 +124,7 @@ export default class SelectBoxesComponent extends RadioComponent {
         if (typeof value !== 'object') {
             if (typeof value === 'string') {
                 value = {
-                    [value]: true
+                    [value]: true,
                 };
             }
             else {
@@ -135,7 +137,9 @@ export default class SelectBoxesComponent extends RadioComponent {
             });
         }
         const checkedValues = _.keys(_.pickBy(value, (val) => val));
-        if (this.isSelectURL && this.templateData && _.every(checkedValues, (val) => this.templateData[val])) {
+        if (this.isSelectURL &&
+            this.templateData &&
+            _.every(checkedValues, (val) => this.templateData[val])) {
             const submission = this.root.submission;
             if (!submission.metadata.selectData) {
                 submission.metadata.selectData = {};
@@ -186,13 +190,19 @@ export default class SelectBoxesComponent extends RadioComponent {
             if (options.modalPreview || this.options.readOnly || this.inDataTable) {
                 const checkedItems = _.keys(_.pickBy(value, (val) => val));
                 if (this.selectData?.length === checkedItems.length) {
-                    return this.selectData.map(item => this.itemTemplate(item)).join(', ');
+                    return this.selectData.map((item) => this.itemTemplate(item)).join(', ');
                 }
                 else if (this.loadedOptions?.length) {
-                    return this.loadedOptions.filter((option) => value[option.value]).map((option) => option.label).join(', ');
+                    return this.loadedOptions
+                        .filter((option) => value[option.value])
+                        .map((option) => option.label)
+                        .join(', ');
                 }
             }
-            return _(value).pickBy((val) => val).keys().join(', ');
+            return _(value)
+                .pickBy((val) => val)
+                .keys()
+                .join(', ');
         }
         return _(this.component.values || [])
             .filter((v) => value[v.value])
@@ -211,7 +221,11 @@ export default class SelectBoxesComponent extends RadioComponent {
                     key = valuesKeys.find((k) => input?.value.toString() === k);
                 }
                 const isChecked = value[key];
-                if ((isChecked && key) || (this.isSelectURL && !this.shouldLoad && this.listData && _.findIndex(this.selectData, this.listData[index]) !== -1)) {
+                if ((isChecked && key) ||
+                    (this.isSelectURL &&
+                        !this.shouldLoad &&
+                        this.listData &&
+                        _.findIndex(this.selectData, this.listData[index]) !== -1)) {
                     //add class to container when selected
                     this.addClass(wrapper, this.optionSelectedClass);
                     //change "checked" attribute
@@ -226,8 +240,8 @@ export default class SelectBoxesComponent extends RadioComponent {
     }
     setInputsDisabled(value, onlyUnchecked) {
         if (this.refs.input) {
-            this.refs.input.forEach(item => {
-                if (onlyUnchecked && !item.checked || !onlyUnchecked) {
+            this.refs.input.forEach((item) => {
+                if ((onlyUnchecked && !item.checked) || !onlyUnchecked) {
                     item.disabled = value;
                 }
             });
@@ -238,7 +252,7 @@ export default class SelectBoxesComponent extends RadioComponent {
         const maxCount = this.component.validate.maxSelectedCount;
         if (!this.shouldSkipValidation(data, rowData, options)) {
             const isValid = this.isValid(data, dirty);
-            if ((maxCount || minCount)) {
+            if (maxCount || minCount) {
                 const count = Object.keys(this.validationValue).reduce((total, key) => {
                     if (this.validationValue[key]) {
                         total++;
@@ -253,7 +267,8 @@ 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 ||
+                        'You may only select up to {{maxCount}} items', { maxCount });
                     this.errors.push({ message });
                     this.setCustomValidity(message, dirty);
                     return false;
@@ -272,7 +287,8 @@ export default class SelectBoxesComponent extends RadioComponent {
     setCustomValidity(messages, dirty, external) {
         if (this.options.building && _.find(messages, { ruleName: 'invalidValueProperty' })) {
             setTimeout(() => {
-                this.root && getComponent(this.root.components, 'valueProperty').setCustomValidity(messages, dirty);
+                this.root &&
+                    getComponent(this.root.components, 'valueProperty').setCustomValidity(messages, dirty);
             }, 0);
             return super.setCustomValidity(_.filter(messages, (message) => message.ruleName !== 'invalidValueProperty'), dirty, external);
         }