@formio/js 5.1.0-dev.6040.debc859 → 5.1.0-dev.6042.6e62a7a

package/lib/mjs/components/address/Address.js

@@ -20,7 +20,6 @@ export default class AddressComponent extends ContainerComponent {
             key: 'address',
             switchToManualModeLabel: 'Can\'t find address? Switch to manual mode.',
             provider: '',
-            providerOptions: {},
             manualModeViewString: '',
             hideLabel: false,
             disableClearIcon: false,
@@ -113,20 +112,33 @@ export default class AddressComponent extends ContainerComponent {
             NestedComponent.prototype.addComponents.call(this, this.manualMode ? this.address : {});
         }
         Field.prototype.init.call(this);
+        // Added for backwards compatibility
+        if (this.component.providerOptions) {
+            const { params, url, queryProperty, responseProperty, displayValueProperty } = this.component.providerOptions;
+            const key = params?.key;
+            const autocompleteOptions = params?.autocompleteOptions;
+            delete this.component.providerOptions;
+            this.component.url = url;
+            this.component.queryProperty = queryProperty;
+            this.component.responseProperty = responseProperty;
+            this.component.displayValueProperty = displayValueProperty;
+            this.component.apiKey = key;
+            this.component.autocompleteOptions = autocompleteOptions;
+        }
+        let provider = this.component.provider;
+        const providerOptions = this.providerOptions;
+        const map = this.component.map;
         if (!this.builderMode) {
-            if (this.component.provider) {
-                const { provider, providerOptions, } = this.component;
+            if (provider) {
                 if (_.get(providerOptions, 'params.subscriptionKey')) {
                     _.set(providerOptions, "params['subscription-key']", _.get(providerOptions, 'params.subscriptionKey'));
                     _.unset(providerOptions, 'params.subscriptionKey');
                 }
                 this.provider = this.initializeProvider(provider, providerOptions);
             }
-            else if (this.component.map) {
+            else if (map) {
                 // Fallback to legacy version where Google Maps was the only provider.
-                this.component.provider = GoogleAddressProvider.name;
-                this.component.providerOptions = this.component.providerOptions || {};
-                const { map, provider, providerOptions, } = this.component;
+                provider = this.component.provider = GoogleAddressProvider.name;
                 const { key, region, } = map;
                 if (key) {
                     _.set(providerOptions, 'params.key', key);
@@ -258,6 +270,16 @@ export default class AddressComponent extends ContainerComponent {
             ? (this.refs[AddressComponent.modeSwitcherRef] || null)
             : null;
     }
+    get providerOptions() {
+        return {
+            params: { subscriptionKey: this.component.subscriptionKey, key: this.component.apiKey, ...this.component.params },
+            url: this.component.url,
+            queryProperty: this.component.queryProperty,
+            responseProperty: this.component.responseProperty,
+            displayValueProperty: this.component.displayValueProperty,
+            autocompleteOptions: this.component.autocompleteOptions
+        };
+    }
     get removeValueIcon() {
         return this.refs
             ? (this.refs[AddressComponent.removeValueIconRef] || null)
@@ -371,7 +393,8 @@ export default class AddressComponent extends ContainerComponent {
         const result = ((this.builderMode || this.manualMode) ? super.attach : Field.prototype.attach).call(this, element);
         if (!this.builderMode) {
             if (!this.provider && this.component.provider) {
-                const { provider, providerOptions, } = this.component;
+                const provider = this.component.provider;
+                const providerOptions = this.providerOptions;
                 this.provider = this.initializeProvider(provider, providerOptions);
             }
         }

package/lib/mjs/components/address/editForm/Address.edit.display.d.ts

@@ -8,6 +8,7 @@ declare const _default: ({
     customConditional: ({ data }: {
         data: any;
     }) => boolean;
+    defaultValue?: undefined;
     placeholder?: undefined;
     validate?: undefined;
 } | {
@@ -15,6 +16,7 @@ declare const _default: ({
     type: string;
     input: boolean;
     key: string;
+    defaultValue: string;
     label: string;
     placeholder: string;
     tooltip: string;
@@ -32,6 +34,7 @@ declare const _default: ({
     label: string;
     tooltip: string;
     customConditional?: undefined;
+    defaultValue?: undefined;
     placeholder?: undefined;
     validate?: undefined;
 } | {
@@ -45,6 +48,7 @@ declare const _default: ({
     customConditional: ({ data }: {
         data: any;
     }) => any;
+    defaultValue?: undefined;
     validate?: undefined;
 })[];
 export default _default;

package/lib/mjs/components/address/editForm/Address.edit.display.js

@@ -13,6 +13,7 @@ export default [
         type: 'textfield',
         input: true,
         key: 'switchToManualModeLabel',
+        defaultValue: 'Can\'t find address? Switch to manual mode.',
         label: 'Switch To Manual Mode Label',
         placeholder: 'Switch To Manual Mode Label',
         tooltip: 'The label for the checkbox used to switch to manual mode.',

package/lib/mjs/components/address/editForm/Address.edit.provider.js

@@ -26,7 +26,7 @@ export default [
     {
         type: 'textfield',
         input: true,
-        key: "providerOptions.params.subscriptionKey",
+        key: "subscriptionKey",
         label: 'Subscription Key',
         placeholder: 'Enter Subscription Key',
         weight: 10,
@@ -41,7 +41,7 @@ export default [
     {
         type: 'textfield',
         input: true,
-        key: 'providerOptions.url',
+        key: 'url',
         label: 'Url',
         placeholder: 'Enter Url',
         weight: 10,
@@ -56,7 +56,7 @@ export default [
     {
         type: 'textfield',
         input: true,
-        key: 'providerOptions.queryProperty',
+        key: 'queryProperty',
         label: 'Query Property',
         defaultValue: 'query',
         placeholder: 'Enter Query Property',
@@ -69,7 +69,7 @@ export default [
     {
         type: 'textfield',
         input: true,
-        key: 'providerOptions.responseProperty',
+        key: 'responseProperty',
         label: 'Response Property',
         placeholder: 'Enter Response Property',
         weight: 30,
@@ -81,7 +81,7 @@ export default [
     {
         type: 'textfield',
         input: true,
-        key: 'providerOptions.displayValueProperty',
+        key: 'displayValueProperty',
         label: 'Display Value Property',
         placeholder: 'Display Value Property',
         weight: 40,
@@ -93,7 +93,7 @@ export default [
     {
         type: 'textarea',
         input: true,
-        key: 'providerOptions.params',
+        key: 'params',
         label: 'Params',
         placeholder: '{ ... }',
         weight: 50,
@@ -108,7 +108,7 @@ export default [
     {
         type: 'textfield',
         input: true,
-        key: 'providerOptions.params.key',
+        key: 'apiKey',
         label: 'API Key',
         placeholder: 'Enter API Key',
         weight: 10,
@@ -123,7 +123,7 @@ export default [
     {
         type: 'textarea',
         input: true,
-        key: 'providerOptions.params.autocompleteOptions',
+        key: 'autocompleteOptions',
         label: 'Provider options',
         placeholder: 'Enter provider options as JSON object',
         defaultValue: {},

package/lib/mjs/components/content/editForm/Content.edit.display.js

@@ -3,6 +3,14 @@ export default [
         key: 'labelPosition',
         ignore: true
     },
+    {
+        key: 'labelWidth',
+        ignore: true
+    },
+    {
+        key: 'labelMargin',
+        ignore: true
+    },
     {
         key: 'placeholder',
         ignore: true

package/lib/mjs/components/currency/editForm/Currency.edit.display.js

@@ -7,6 +7,18 @@ export default [
         key: 'allowMultipleMasks',
         ignore: true
     },
+    {
+        key: 'inputMasks',
+        ignore: true
+    },
+    {
+        key: 'widget.type',
+        ignore: true
+    },
+    {
+        key: 'widget',
+        ignore: true
+    },
     {
         key: 'showWordCount',
         ignore: true

package/lib/mjs/components/datagrid/DataGrid.js

@@ -609,9 +609,6 @@ export default class DataGridComponent extends NestedArrayComponent {
         this.updateOnChange(flags, changed);
         return changed;
     }
-    restoreComponentsContext() {
-        this.rows.forEach((row, index) => _.forIn(row, (component) => component.data = this.dataValue[index]));
-    }
     toggleGroup(element, index) {
         element.classList.toggle('collapsed');
         _.each(this.refs.chunks[index], row => {

package/lib/mjs/components/datamap/DataMap.js

@@ -68,14 +68,10 @@ export default class DataMapComponent extends DataGridComponent {
         return {};
     }
     get dataValue() {
-        if (!this.key ||
-            (this.conditionallyHidden && this.component.clearOnHide)) {
+        if (!this.key) {
             return this.emptyValue;
         }
-        if (!this.hasValue() && this.shouldAddDefaultValue) {
-            this.dataValue = this.emptyValue;
-        }
-        return _.get(this.data, this.key);
+        return _.get(this.data, this.key, this.emptyValue);
     }
     set dataValue(value) {
         super.dataValue = value;

package/lib/mjs/components/datetime/editForm/DateTime.edit.validation.d.ts

@@ -6,36 +6,87 @@ declare const _default: ({
     persistent: boolean;
     weight: number;
     tooltip: string;
+    applyMaskOn?: undefined;
+    logic?: undefined;
     skipMerge?: undefined;
-    customConditional?: undefined;
+    tableView?: undefined;
+    validateWhenHidden?: undefined;
     enableTime?: undefined;
 } | {
+    label: string;
+    tooltip: string;
+    applyMaskOn: string;
+    key: string;
+    logic: ({
+        name: string;
+        trigger: {
+            type: string;
+            javascript: string;
+            event?: undefined;
+        };
+        actions: {
+            name: string;
+            type: string;
+            schemaDefinition: string;
+        }[];
+    } | {
+        name: string;
+        trigger: {
+            type: string;
+            event: string;
+            javascript?: undefined;
+        };
+        actions: {
+            name: string;
+            type: string;
+            customAction: string;
+        }[];
+    })[];
     type: string;
     input: boolean;
-    key: string;
-    label: string;
     skipMerge: boolean;
     weight: number;
-    tooltip: string;
-    customConditional({ data, component }: {
-        data: any;
-        component: any;
-    }): boolean;
     persistent?: undefined;
+    tableView?: undefined;
+    validateWhenHidden?: undefined;
     enableTime?: undefined;
 } | {
+    label: string;
+    tooltip: string;
+    applyMaskOn: string;
+    tableView: boolean;
+    validateWhenHidden: boolean;
+    key: string;
+    logic: ({
+        name: string;
+        trigger: {
+            type: string;
+            javascript: string;
+            event?: undefined;
+        };
+        actions: {
+            name: string;
+            type: string;
+            schemaDefinition: string;
+        }[];
+    } | {
+        name: string;
+        trigger: {
+            type: string;
+            event: string;
+            javascript?: undefined;
+        };
+        actions: {
+            name: string;
+            type: string;
+            customAction: string;
+        }[];
+    })[];
     type: string;
     input: boolean;
     enableTime: boolean;
-    key: string;
     skipMerge: boolean;
-    label: string;
     weight: number;
-    tooltip: string;
-    customConditional({ data, component }: {
-        data: any;
-        component: any;
-    }): any;
     persistent?: undefined;
 })[];
 export default _default;

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

@@ -9,35 +9,44 @@ export default [
         tooltip: 'Enables to use input for moment functions instead of calendar.'
     },
     {
-        type: 'datetime',
-        input: true,
+        label: 'Minimum Date',
+        tooltip: "The minimum date that can be picked. You can also use Moment.js functions. For example: moment().subtract(10, 'days')",
+        applyMaskOn: 'change',
         key: 'datePicker.minDate',
-        label: 'Use calendar to set minDate',
-        skipMerge: true,
-        weight: 10,
-        tooltip: 'Enables to use calendar to set date.',
-        customConditional({ data, component }) {
-            if (component.datePicker && component.datePicker.minDate && component.datePicker.minDate.indexOf('moment') !== -1) {
-                return false;
-            }
-            return !data.enableMinDateInput;
-        },
-    },
-    {
+        logic: [
+            {
+                name: 'check input mode',
+                trigger: {
+                    type: 'javascript',
+                    javascript: "if (component.datePicker && component.datePicker.minDate && component.datePicker.minDate.indexOf('moment') !== -1) {\r\n  result = false;\r\n}\r\nelse {\r\n  result = !data.enableMinDateInput;\r\n}",
+                },
+                actions: [
+                    {
+                        name: 'change component',
+                        type: 'mergeComponentSchema',
+                        schemaDefinition: "schema = {\n  type: 'datetime',\n  label: 'Use calendar to set minDate',\n  enableDate: true,\n  enableTime: true,\n  tooltip: 'Enables to use calendar to set date.',\n  widget: {\n    type: 'calendar',\n    displayInTimezone: 'viewer',\n    locale: 'en',\n    useLocaleSettings: false,\n    allowInput: true,\n    mode: 'single',\n    enableTime: true,\n    noCalendar: false,\n    format: 'yyyy-MM-dd hh:mm a',\n    hourIncrement: 1,\n    minuteIncrement: 1,\n    time_24hr: false,\n    disableWeekends: false,\n    disableWeekdays: false,\n    maxDate: null,\n  },\n};",
+                    },
+                ],
+            },
+            {
+                name: 'clear value',
+                trigger: {
+                    type: 'event',
+                    event: 'componentChange',
+                },
+                actions: [
+                    {
+                        name: 'reset value',
+                        type: 'customAction',
+                        customAction: "var isDateInput = instance.component?.type === 'datetime';\nvar enableInput = data.enableMinDateInput;\nvar allowReset = result[0].component && result[0].component.key === 'enableMinDateInput' && !result[0].flags?.fromSubmission;\nif(((enableInput && isDateInput) || (!enableInput && !isDateInput)) && allowReset) {\n  instance.resetValue()\n}\n",
+                    },
+                ],
+            },
+        ],
         type: 'textfield',
         input: true,
-        enableTime: false,
-        key: 'datePicker.minDate',
         skipMerge: true,
-        label: 'Minimum Date',
         weight: 10,
-        tooltip: 'The minimum date that can be picked. You can also use Moment.js functions. For example: \n \n moment().subtract(10, \'days\')',
-        customConditional({ data, component }) {
-            if (component.datePicker && component.datePicker.minDate && component.datePicker.minDate.indexOf('moment') !== -1) {
-                return true;
-            }
-            return data.enableMinDateInput;
-        },
     },
     {
         type: 'checkbox',
@@ -49,34 +58,46 @@ export default [
         tooltip: 'Enables to use input for moment functions instead of calendar.'
     },
     {
-        type: 'datetime',
-        input: true,
+        label: 'Maximum Date',
+        tooltip: "The maximum date that can be picked. You can also use Moment.js functions. For example: moment().add(10, 'days')",
+        applyMaskOn: 'change',
+        tableView: true,
+        validateWhenHidden: false,
         key: 'datePicker.maxDate',
-        skipMerge: true,
-        label: 'Use calendar to set maxDate',
-        weight: 20,
-        tooltip: 'Enables to use calendar to set date.',
-        customConditional({ data, component }) {
-            if (component.datePicker && component.datePicker.maxDate && component.datePicker.maxDate.indexOf('moment') !== -1) {
-                return false;
-            }
-            return !data.enableMaxDateInput;
-        },
-    },
-    {
+        logic: [
+            {
+                name: 'check input mode',
+                trigger: {
+                    type: 'javascript',
+                    javascript: "if (component.datePicker && component.datePicker.maxDate && component.datePicker.maxDate.indexOf('moment') !== -1) {\r\n  result = false;\r\n}\r\nelse {\r\n  result = !data.enableMaxDateInput;\r\n}",
+                },
+                actions: [
+                    {
+                        name: 'change component',
+                        type: 'mergeComponentSchema',
+                        schemaDefinition: "schema = {\n  type: 'datetime',\n  label: 'Use calendar to set maxDate',\n  enableDate: true,\n  enableTime: true,\n  tooltip: 'Enables to use calendar to set date.',\n  widget: {\n    type: 'calendar',\n    displayInTimezone: 'viewer',\n    locale: 'en',\n    useLocaleSettings: false,\n    allowInput: true,\n    mode: 'single',\n    enableTime: true,\n    noCalendar: false,\n    format: 'yyyy-MM-dd hh:mm a',\n    hourIncrement: 1,\n    minuteIncrement: 1,\n    time_24hr: false,\n    disableWeekends: false,\n    disableWeekdays: false,\n    maxDate: null,\n  },\n};",
+                    },
+                ],
+            },
+            {
+                name: 'clear value',
+                trigger: {
+                    type: 'event',
+                    event: 'componentChange',
+                },
+                actions: [
+                    {
+                        name: 'reset value',
+                        type: 'customAction',
+                        customAction: "var isDateInput = instance.component?.type === 'datetime';\nvar enableInput = data.enableMaxDateInput;\nvar allowReset = result[0].component && result[0].component.key === 'enableMaxDateInput' && !result[0].flags?.fromSubmission;\nif(((enableInput && isDateInput) || (!enableInput && !isDateInput)) && allowReset) {\n  instance.resetValue()\n}\n",
+                    },
+                ],
+            },
+        ],
         type: 'textfield',
         input: true,
         enableTime: false,
-        key: 'datePicker.maxDate',
         skipMerge: true,
-        label: 'Maximum Date',
-        tooltip: 'The maximum date that can be picked. You can also use Moment.js functions. For example: \n \n moment().add(10, \'days\')',
         weight: 20,
-        customConditional({ data, component }) {
-            if (component.datePicker && component.datePicker.maxDate && component.datePicker.maxDate.indexOf('moment') !== -1) {
-                return true;
-            }
-            return data.enableMaxDateInput;
-        },
     }
 ];

package/lib/mjs/components/day/editForm/Day.edit.display.js

@@ -3,6 +3,14 @@ export default [
         key: 'labelPosition',
         ignore: true
     },
+    {
+        key: 'labelWidth',
+        ignore: true
+    },
+    {
+        key: 'labelMargin',
+        ignore: true
+    },
     {
         weight: 15,
         type: 'checkbox',

package/lib/mjs/components/editgrid/EditGrid.js

@@ -546,13 +546,6 @@ export default class EditGridComponent extends NestedArrayComponent {
             }
         });
     }
-    restoreComponentsContext() {
-        this.getComponents().forEach((component) => {
-            const rowData = this.dataValue[component.rowIndex];
-            const editRowData = this.editRows[component.rowIndex]?.data;
-            component.data = rowData || editRowData;
-        });
-    }
     flattenComponents(rowIndex) {
         const result = {};
         this.everyComponent((component) => {
@@ -1106,7 +1099,9 @@ export default class EditGridComponent extends NestedArrayComponent {
             errors.push(...this._errors);
             return false;
         }
-        const message = this.invalid || this.invalidMessage(data, dirty, false, row);
+        // TODO: this is the only place invalidMessage gets called, and it's not clear why it's needed - we already validate the editGrid
+        // component above with super.checkComponentValidity
+        const message = this.invalid || this.invalidMessage(data, dirty, false, row, options);
         if (allRowErrors.length && this.root?.submitted && !message) {
             this._errors = this.setCustomValidity(message, dirty);
             errors.push(...this._errors);
@@ -1150,9 +1145,6 @@ export default class EditGridComponent extends NestedArrayComponent {
             }
         }
         const changed = this.hasChanged(value, this.dataValue);
-        if (this.parent) {
-            this.parent.checkComponentConditions();
-        }
         this.dataValue = value;
         // Refresh editRow data when data changes.
         this.dataValue.forEach((row, rowIndex) => {
@@ -1183,7 +1175,6 @@ export default class EditGridComponent extends NestedArrayComponent {
         this.editRows = this.editRows.slice(0, dataLength);
         this.openWhenEmpty();
         this.updateOnChange(flags, changed);
-        this.checkData();
         this.changeState(changed, flags);
         return changed;
     }

package/lib/mjs/components/email/editForm/Email.edit.display.js

@@ -7,6 +7,18 @@ export default [
         key: 'allowMultipleMasks',
         ignore: true,
     },
+    {
+        key: 'inputMasks',
+        ignore: true
+    },
+    {
+        key: 'widget.type',
+        ignore: true
+    },
+    {
+        key: 'widget',
+        ignore: true
+    },
     {
         key: 'showWordCount',
         ignore: true

package/lib/mjs/components/fieldset/editForm/Fieldset.edit.display.js

@@ -3,6 +3,14 @@ export default [
         key: 'labelPosition',
         ignore: true
     },
+    {
+        key: 'labelWidth',
+        ignore: true
+    },
+    {
+        key: 'labelMargin',
+        ignore: true
+    },
     {
         key: 'placeholder',
         ignore: true

package/lib/mjs/components/file/File.js

@@ -903,14 +903,17 @@ export default class FileComponent extends Field {
         } : false;
     }
     async uploadFile(fileToSync) {
-        return await this.fileService.uploadFile(fileToSync.storage, fileToSync.file, fileToSync.name, fileToSync.dir, 
+        const filePromise = this.fileService.uploadFile(fileToSync.storage, fileToSync.file, fileToSync.name, fileToSync.dir, 
         // Progress callback
-        this.updateProgress.bind(this, fileToSync), fileToSync.url, fileToSync.options, fileToSync.fileKey, fileToSync.groupPermissions, fileToSync.groupResourceId, () => { }, 
+        this.updateProgress.bind(this, fileToSync), fileToSync.url, fileToSync.options, fileToSync.fileKey, fileToSync.groupPermissions, fileToSync.groupResourceId, () => {
+            this.emit('fileUploadingStart', filePromise);
+        }, 
         // Abort upload callback
         (abort) => this.abortUploads.push({
             id: fileToSync.id,
             abort,
         }), this.getMultipartOptions(fileToSync));
+        return await filePromise;
     }
     async upload() {
         if (!this.filesToSync.filesToUpload.length) {
@@ -930,6 +933,7 @@ export default class FileComponent extends Field {
                 fileToSync.message = this.t('succefullyUploaded');
                 fileInfo.originalName = fileToSync.originalName;
                 fileInfo.hash = fileToSync.hash;
+                this.emit('fileUploadingEnd', Promise.resolve(fileInfo));
             }
             catch (response) {
                 fileToSync.status = 'error';
@@ -939,6 +943,7 @@ export default class FileComponent extends Field {
                     : response.type === 'abort'
                         ? this.t('Request was aborted')
                         : response.toString();
+                this.emit('fileUploadingEnd', Promise.reject(response));
                 this.emit('fileUploadError', {
                     fileToSync,
                     response,