@formio/js 5.0.0-rc.91 → 5.0.0-rc.93

package/lib/mjs/components/day/Day.d.ts

@@ -11,6 +11,7 @@ export default class DayComponent extends Field {
         operators: string[];
     };
     static savedValueTypes(schema: any): string[];
+    static oldEmptyValue: string;
     static get serverConditionSettings(): {
         operators: string[];
     };
@@ -135,7 +136,6 @@ export default class DayComponent extends Field {
      * @returns {string|null} - The string value of the date.
      */
     getValueAsString(value: any): string | null;
-    focus(field: any): void;
     isPartialDay(value: any): boolean;
     getValidationFormat(): string;
 }

package/lib/mjs/components/day/Day.js

@@ -49,6 +49,8 @@ export default class DayComponent extends Field {
         schema = schema || {};
         return getComponentSavedTypes(schema) || [componentValueTypes.string];
     }
+    // Empty value used before 9.3.x
+    static oldEmptyValue = '00/00/0000';
     constructor(component, options, data) {
         if (component.maxDate && component.maxDate.indexOf('moment(') === -1) {
             component.maxDate = moment(component.maxDate, 'YYYY-MM-DD').toISOString();
@@ -102,6 +104,12 @@ export default class DayComponent extends Field {
         info.changeEvent = 'input';
         return info;
     }
+    isEmpty(value = this.dataValue) {
+        if (value === DayComponent.oldEmptyValue) {
+            return true;
+        }
+        return super.isEmpty(value);
+    }
     inputDefinition(name) {
         let min, max;
         if (name === 'day') {
@@ -335,6 +343,10 @@ export default class DayComponent extends Field {
         }
     }
     normalizeValue(value) {
+        // Adjust the value from old to new format
+        if (value === DayComponent.oldEmptyValue) {
+            value = '';
+        }
         if (!value || this.valueMask.test(value)) {
             return value;
         }
@@ -582,6 +594,9 @@ export default class DayComponent extends Field {
      * @returns {string|null} - The string value of the date.
      */
     getValueAsString(value) {
+        if (!value) {
+            return '';
+        }
         return this.getDate(value) || '';
     }
     focus(field) {

package/lib/mjs/components/day/fixtures/comp5.d.ts

@@ -1,7 +1,7 @@
 declare namespace _default {
     let type: string;
     let display: string;
-    let components: {
+    let components: ({
         label: string;
         hideInputLabels: boolean;
         inputsLabelPosition: string;
@@ -24,6 +24,22 @@ declare namespace _default {
         type: string;
         input: boolean;
         defaultValue: string;
-    }[];
+        action?: undefined;
+        theme?: undefined;
+    } | {
+        type: string;
+        action: string;
+        label: string;
+        theme: string;
+        hideInputLabels?: undefined;
+        inputsLabelPosition?: undefined;
+        useLocaleSettings?: undefined;
+        tableView?: undefined;
+        fields?: undefined;
+        validateOn?: undefined;
+        key?: undefined;
+        input?: undefined;
+        defaultValue?: undefined;
+    })[];
 }
 export default _default;

package/lib/mjs/components/day/fixtures/comp5.js

@@ -26,5 +26,11 @@ export default {
             input: true,
             defaultValue: '00/00/0000'
         },
+        {
+            type: 'button',
+            action: 'submit',
+            label: 'Submit',
+            theme: 'primary'
+        }
     ]
 };

package/lib/mjs/components/editgrid/EditGrid.d.ts

@@ -89,8 +89,8 @@ export default class EditGridComponent extends NestedArrayComponent {
     hasOpenRows(): any;
     getAttachedData(data?: null): any;
     shouldValidateDraft(editRow: any): any;
-    shouldValidateRow(editRow: any, dirty: any): any;
-    validateRow(editRow: any, dirty: any, forceSilentCheck: any): any;
+    shouldValidateRow(editRow: any, dirty: any, fromSubmission: any): any;
+    validateRow(editRow: any, dirty: any, forceSilentCheck: any, fromSubmission: any): any;
     showRowErrorAlerts(editRow: any, errors: any): void;
     /**
      * @returns {boolean} - Return that this component processes its own validation.

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

@@ -8,6 +8,7 @@ import { fastCloneDeep, Evaluator, getArrayFromComponentPath, eachComponent } fr
 const EditRowState = {
     New: 'new',
     Editing: 'editing',
+    Saving: 'saving',
     Saved: 'saved',
     Viewing: 'viewing',
     Removed: 'removed',
@@ -788,6 +789,10 @@ export default class EditGridComponent extends NestedArrayComponent {
         if (!this.component.rowDrafts) {
             editRow.components.forEach((comp) => comp.setPristine(false));
         }
+        // Mark the row with a 'Saving' state to trigger validation for future row changes
+        if (editRow.state === EditRowState.New) {
+            editRow.state = EditRowState.Saving;
+        }
         const errors = this.validateRow(editRow, true);
         if (!this.component.rowDrafts) {
             if (errors.length) {
@@ -800,7 +805,7 @@ export default class EditGridComponent extends NestedArrayComponent {
                 this.root.focusedComponent = null;
             }
             switch (editRow.state) {
-                case EditRowState.New: {
+                case EditRowState.Saving: {
                     const newIndex = dataValue.length;
                     dataValue.push(editRow.data);
                     editRow.components.forEach(component => component.rowIndex = newIndex);
@@ -958,16 +963,17 @@ export default class EditGridComponent extends NestedArrayComponent {
             !this.hasOpenRows()) ||
             this.root?.submitted;
     }
-    shouldValidateRow(editRow, dirty) {
+    shouldValidateRow(editRow, dirty, fromSubmission) {
         return this.shouldValidateDraft(editRow) ||
-            editRow.state === EditRowState.New ||
+            editRow.state === EditRowState.Saving ||
             editRow.state === EditRowState.Editing ||
             editRow.alerts ||
+            fromSubmission ||
             dirty;
     }
-    validateRow(editRow, dirty, forceSilentCheck) {
+    validateRow(editRow, dirty, forceSilentCheck, fromSubmission) {
         editRow.errors = [];
-        if (this.shouldValidateRow(editRow, dirty)) {
+        if (this.shouldValidateRow(editRow, dirty, fromSubmission)) {
             const silentCheck = (this.component.rowDrafts && !this.shouldValidateDraft(editRow)) || forceSilentCheck;
             const rootValue = fastCloneDeep(this.rootValue);
             const editGridValue = _.get(rootValue, this.path, []);
@@ -1038,7 +1044,7 @@ export default class EditGridComponent extends NestedArrayComponent {
         return true;
     }
     checkComponentValidity(data, dirty, row, options = {}, errors = []) {
-        const { silentCheck } = options;
+        const { silentCheck, fromSubmission } = options;
         const superValid = super.checkComponentValidity(data, dirty, row, options, errors);
         // If super tells us that component invalid and there is no need to update alerts, just return false
         if (!superValid && (!this.alert && !this.hasOpenRows())) {
@@ -1048,7 +1054,7 @@ export default class EditGridComponent extends NestedArrayComponent {
         const allRowErrors = [];
         this.editRows.forEach((editRow, index) => {
             // Trigger all errors on the row.
-            const rowErrors = this.validateRow(editRow, dirty, silentCheck);
+            const rowErrors = this.validateRow(editRow, dirty, silentCheck, fromSubmission);
             errors.push(...rowErrors);
             allRowErrors.push(...rowErrors);
             if (this.rowRefs) {
@@ -1062,6 +1068,7 @@ export default class EditGridComponent extends NestedArrayComponent {
                     }
                     else if (errorContainer) {
                         errorContainer.textContent = '';
+                        this.removeClass(errorContainer, 'help-block');
                     }
                 }
             }

package/lib/mjs/components/editgrid/fixtures/comp19.d.ts

@@ -0,0 +1,59 @@
+declare namespace _default {
+    let _id: string;
+    let title: string;
+    let name: string;
+    let path: string;
+    let type: string;
+    let display: string;
+    let components: ({
+        label: string;
+        tableView: boolean;
+        validateWhenHidden: boolean;
+        rowDrafts: boolean;
+        key: string;
+        type: string;
+        displayAsTable: boolean;
+        input: boolean;
+        components: {
+            label: string;
+            columns: {
+                components: {
+                    label: string;
+                    applyMaskOn: string;
+                    tableView: boolean;
+                    validate: {
+                        required: boolean;
+                    };
+                    validateWhenHidden: boolean;
+                    key: string;
+                    type: string;
+                    input: boolean;
+                }[];
+                width: number;
+                offset: number;
+                push: number;
+                pull: number;
+                size: string;
+                currentWidth: number;
+            }[];
+            key: string;
+            type: string;
+            input: boolean;
+            tableView: boolean;
+        }[];
+        disableOnInvalid?: undefined;
+    } | {
+        type: string;
+        label: string;
+        key: string;
+        disableOnInvalid: boolean;
+        input: boolean;
+        tableView: boolean;
+        validateWhenHidden?: undefined;
+        rowDrafts?: undefined;
+        displayAsTable?: undefined;
+        components?: undefined;
+    })[];
+    let project: string;
+}
+export default _default;

package/lib/mjs/components/editgrid/fixtures/comp19.js

@@ -0,0 +1,71 @@
+export default {
+    _id: '6704f3d329cf52a3ddd4e244',
+    title: 'uiu',
+    name: 'uiu',
+    path: 'uiu',
+    type: 'resource',
+    display: 'form',
+    components: [
+        {
+            label: 'Edit Grid',
+            tableView: false,
+            validateWhenHidden: false,
+            rowDrafts: false,
+            key: 'editGrid',
+            type: 'editgrid',
+            displayAsTable: false,
+            input: true,
+            components: [
+                {
+                    label: 'Columns',
+                    columns: [
+                        {
+                            components: [
+                                {
+                                    label: 'Text Field',
+                                    applyMaskOn: 'change',
+                                    tableView: true,
+                                    validate: {
+                                        required: true,
+                                    },
+                                    validateWhenHidden: false,
+                                    key: 'textField',
+                                    type: 'textfield',
+                                    input: true,
+                                },
+                            ],
+                            width: 6,
+                            offset: 0,
+                            push: 0,
+                            pull: 0,
+                            size: 'md',
+                            currentWidth: 6,
+                        },
+                        {
+                            components: [],
+                            width: 6,
+                            offset: 0,
+                            push: 0,
+                            pull: 0,
+                            size: 'md',
+                            currentWidth: 6,
+                        },
+                    ],
+                    key: 'columns',
+                    type: 'columns',
+                    input: false,
+                    tableView: false,
+                },
+            ],
+        },
+        {
+            type: 'button',
+            label: 'Submit',
+            key: 'submit',
+            disableOnInvalid: true,
+            input: true,
+            tableView: false,
+        },
+    ],
+    project: '66f66c655879bf08113cf465',
+};

package/lib/mjs/components/editgrid/fixtures/index.d.ts

@@ -15,7 +15,8 @@ import comp14 from './comp14';
 import comp15 from './comp15';
 import comp16 from './comp16';
 import comp18 from './comp18';
+import comp19 from './comp19';
 import compOpenWhenEmpty from './comp-openWhenEmpty';
 import withOpenWhenEmptyAndConditions from './comp-with-conditions-and-openWhenEmpty';
 import compWithCustomDefaultValue from './comp-with-custom-default-value';
-export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, compOpenWhenEmpty, withOpenWhenEmptyAndConditions, compWithCustomDefaultValue, compTestEvents };
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19, compOpenWhenEmpty, withOpenWhenEmptyAndConditions, compWithCustomDefaultValue, compTestEvents };

package/lib/mjs/components/editgrid/fixtures/index.js

@@ -16,8 +16,9 @@ import comp15 from './comp15';
 import comp16 from './comp16';
 import comp17 from './comp17';
 import comp18 from './comp18';
+import comp19 from './comp19';
 import withOpenWhenEmptyAndConditions from './comp-with-conditions-and-openWhenEmpty';
 import compOpenWhenEmpty from './comp-openWhenEmpty';
 import compWithCustomDefaultValue from './comp-with-custom-default-value';
 import compTestEvents from './comp-test-events';
-export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, compOpenWhenEmpty, withOpenWhenEmptyAndConditions, compWithCustomDefaultValue, compTestEvents };
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19, compOpenWhenEmpty, withOpenWhenEmptyAndConditions, compWithCustomDefaultValue, compTestEvents };

package/lib/mjs/components/form/editForm/Form.edit.data.js

@@ -2,7 +2,7 @@ import EditFormUtils from '../../_classes/component/editForm/utils';
 /* eslint-disable max-len */
 export default [
     EditFormUtils.javaScriptValue('Custom Default Value', 'customDefaultValue', 'customDefaultValue', 120, '<p><h4>Example:</h4><pre>value = data.firstName + " " + data.lastName;</pre></p>', '<p><h4>Example:</h4><pre>{"cat": [{"var": "data.firstName"}, " ", {"var": "data.lastName"}]}</pre>'),
-    EditFormUtils.javaScriptValue('Calculated Value', 'calculateValue', 'calculateValue', 130, '<p><h4>Example:</h4><pre>value = data.a + data.b + data.c;</pre></p>', '<p><h4>Example:</h4><pre>{"+": [{"var": "data.a"}, {"var": "data.b"}, {"var": "data.c"}]}</pre><p><a href="http://formio.github.io/formio.js/app/examples/calculated.html" target="_blank" rel="noopener noreferrer">Click here for an example</a></p>'),
+    EditFormUtils.javaScriptValue('Calculated Value', 'calculateValue', 'calculateValue', 130, '<p><h4>Example:</h4><pre>value = data.a + data.b + data.c;</pre></p>', '<p><h4>Example:</h4><pre>{"+": [{"var": "data.a"}, {"var": "data.b"}, {"var": "data.c"}]}</pre><p><a href="https://help.form.io/userguide/form-building/logic-and-conditions#calculated-values" target="_blank" rel="noopener noreferrer">Click here for an example</a></p>'),
     {
         weight: 140,
         type: 'checkbox',

package/lib/mjs/components/number/fixtures/comp11.d.ts

@@ -0,0 +1,17 @@
+declare namespace _default {
+    let components: {
+        label: string;
+        mask: boolean;
+        tableView: boolean;
+        modalEdit: boolean;
+        multiple: boolean;
+        delimiter: string;
+        requireDecimal: boolean;
+        inputFormat: string;
+        truncateMultipleSpaces: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+    }[];
+}
+export default _default;

package/lib/mjs/components/number/fixtures/comp11.js

@@ -0,0 +1,18 @@
+export default {
+    components: [
+        {
+            label: 'Number',
+            mask: true,
+            tableView: false,
+            modalEdit: true,
+            multiple: true,
+            delimiter: ',',
+            requireDecimal: false,
+            inputFormat: 'plain',
+            truncateMultipleSpaces: false,
+            key: 'number',
+            type: 'number',
+            input: true
+        }
+    ]
+};

package/lib/mjs/components/number/fixtures/index.d.ts

@@ -8,4 +8,5 @@ import comp7 from './comp7';
 import comp8 from './comp8';
 import comp9 from './comp9';
 import comp10 from './comp10';
-export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10 };
+import comp11 from './comp11';
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11 };

package/lib/mjs/components/number/fixtures/index.js

@@ -8,4 +8,5 @@ import comp7 from './comp7';
 import comp8 from './comp8';
 import comp9 from './comp9';
 import comp10 from './comp10';
-export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10 };
+import comp11 from './comp11';
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11 };

package/lib/mjs/components/radio/Radio.d.ts

@@ -21,6 +21,7 @@ export default class RadioComponent extends ListComponent {
     get isRadio(): boolean;
     get optionSelectedClass(): string;
     get listData(): any;
+    get selectMetadata(): any;
     templateData: {} | undefined;
     triggerUpdate: ((...args: any[]) => any) | undefined;
     itemsLoadedResolve: ((value: any) => void) | undefined;

package/lib/mjs/components/radio/Radio.js

@@ -109,6 +109,12 @@ export default class RadioComponent extends ListComponent {
         const listData = _.get(this.root, 'submission.metadata.listData', {});
         return _.get(listData, this.path);
     }
+    get selectMetadata() {
+        return super.selectData;
+    }
+    get selectData() {
+        return this.selectMetadata || this.component.selectData;
+    }
     init() {
         super.init();
         this.templateData = {};
@@ -244,12 +250,15 @@ export default class RadioComponent extends ListComponent {
         else if (!_.isString(value)) {
             value = _.toString(value);
         }
-        const isModalPreviewWithUrlDataSource = options.modalPreview && this.component.dataSrc === 'url';
-        if (this.component.dataSrc !== 'values' && !isModalPreviewWithUrlDataSource) {
+        const shouldUseSelectData = (options.modalPreview || this.inDataTable)
+            && this.component.dataSrc === 'url' && (this.loadedOptions.length || this.selectData);
+        if (this.component.dataSrc !== 'values' && !shouldUseSelectData) {
             return value;
         }
-        const values = isModalPreviewWithUrlDataSource ? this.loadedOptions : this.component.values;
-        const option = _.find(values, (v) => v.value === value);
+        const values = shouldUseSelectData ? this.loadedOptions : this.component.values;
+        const option = !values?.length && shouldUseSelectData ? {
+            label: this.itemTemplate(this.selectData),
+        } : _.find(values, (v) => v.value === value);
         if (!value) {
             return _.get(option, 'label', '');
         }

package/lib/mjs/components/select/Select.js

@@ -1589,8 +1589,8 @@ export default class SelectComponent extends ListComponent {
         super.detach();
     }
     focus() {
+        super.focus.call(this);
         if (this.focusableElement) {
-            super.focus.call(this);
             this.focusableElement.focus();
         }
     }

package/lib/mjs/components/select/fixtures/comp25.d.ts

@@ -1,44 +1,59 @@
 declare namespace _default {
-    let title: string;
-    let name: string;
-    let path: string;
-    let type: string;
-    let display: string;
     let components: ({
         label: string;
-        widget: string;
         tableView: boolean;
-        data: {
-            values: {
-                label: string;
-                value: string;
-            }[];
-        };
-        dataType: string;
+        modal: boolean;
+        rowDrafts: boolean;
         key: string;
         type: string;
+        displayAsTable: boolean;
         input: boolean;
-        applyMaskOn?: undefined;
-        conditional?: undefined;
+        components: ({
+            label: string;
+            widget: string;
+            tableView: boolean;
+            data: {
+                values: {
+                    label: string;
+                    value: string;
+                }[];
+            };
+            validate: {
+                required: boolean;
+            };
+            key: string;
+            type: string;
+            input: boolean;
+            applyMaskOn?: undefined;
+            validateWhenHidden?: undefined;
+        } | {
+            label: string;
+            applyMaskOn: string;
+            tableView: boolean;
+            validate: {
+                required: boolean;
+            };
+            validateWhenHidden: boolean;
+            key: string;
+            type: string;
+            input: boolean;
+            widget?: undefined;
+            data?: undefined;
+        })[];
+        showValidations?: undefined;
+        saveOnEnter?: undefined;
     } | {
         label: string;
-        applyMaskOn: string;
+        showValidations: boolean;
         tableView: boolean;
         key: string;
         type: string;
         input: boolean;
-        conditional: {
-            show: boolean;
-            conjunction: string;
-            conditions: {
-                component: string;
-                operator: string;
-                value: number;
-            }[];
-        };
-        widget?: undefined;
-        data?: undefined;
-        dataType?: undefined;
+        saveOnEnter: boolean;
+        modal?: undefined;
+        rowDrafts?: undefined;
+        displayAsTable?: undefined;
+        components?: undefined;
     })[];
 }
 export default _default;