@formio/js 5.0.0-dev.5588.0f690c8 → 5.0.0-dev.5589.fd575d0

package/lib/mjs/Webform.js

@@ -263,12 +263,19 @@ export default class Webform extends NestedDataComponent {
         // Set language after everything is established.
         this.language = this.i18next.language;
         // See if we need to restore the draft from a user.
-        if (this.options.saveDraft && !this.options.skipDraftRestore) {
+        if (this.options.saveDraft) {
             this.formReady.then(() => {
-                const user = Formio.getUser();
-                // Only restore a draft if the submission isn't explicitly set.
-                if (user && !this.submissionSet) {
-                    this.restoreDraft(user._id);
+                if (!this.options.skipDraftRestore) {
+                    const user = Formio.getUser();
+                    // Only restore a draft if the submission isn't explicitly set.
+                    if (user && !this.submissionSet) {
+                        this.restoreDraft(user._id);
+                    }
+                }
+                else {
+                    // Enable drafts
+                    this.draftEnabled = true;
+                    this.savingDraft = false;
                 }
             });
         }
@@ -754,7 +761,7 @@ export default class Webform extends NestedDataComponent {
         }
         const draft = fastCloneDeep(this.submission);
         draft.state = 'draft';
-        if (!this.savingDraft) {
+        if (!this.savingDraft && !this.submitting) {
             this.emit('saveDraftBegin');
             this.savingDraft = true;
             this.formio.saveSubmission(draft).then((sub) => {

package/lib/mjs/WebformBuilder.js

@@ -1104,14 +1104,10 @@ export default class WebformBuilder extends Component {
         let hasInvalidComponents = false;
         this.webform.everyComponent((comp) => {
             const path = comp.path;
-            const errors = comp.visibleErrors || [];
             if (repeatablePaths.includes(path)) {
-                comp.setCustomValidity(`API Key is not unique: ${comp.key}`);
+                comp.setCustomValidity(this.t('apiKey', { key: comp.key }));
                 hasInvalidComponents = true;
             }
-            else if (errors.length && errors[0].message?.startsWith('API Key is not unique')) {
-                comp.setCustomValidity('');
-            }
         });
         this.emit('builderFormValidityChange', hasInvalidComponents);
     }

package/lib/mjs/components/_classes/component/Component.d.ts

@@ -492,10 +492,12 @@ declare class Component extends Element {
     /**
      * Add a new input error to this element.
      *
-     * @param message
-     * @param dirty
+     * @param {{level: string, message: string}[]} messages
      */
-    addMessages(messages: any): void;
+    addMessages(messages: {
+        level: string;
+        message: string;
+    }[]): void;
     setErrorClasses(elements: any, dirty: any, hasErrors: any, hasMessages: any, element?: any): void;
     setElementInvalid(element: any, invalid: any): void;
     clearOnHide(): void;

package/lib/mjs/components/_classes/component/Component.js

@@ -1795,8 +1795,7 @@ export default class Component extends Element {
     /**
      * Add a new input error to this element.
      *
-     * @param message
-     * @param dirty
+     * @param {{level: string, message: string}[]} messages
      */
     addMessages(messages) {
         if (!messages) {

package/lib/mjs/components/checkbox/Checkbox.js

@@ -178,15 +178,8 @@ export default class CheckBoxComponent extends Field {
         return value;
     }
     setValue(value, flags = {}) {
-        if (this.setCheckedState(value) !== undefined ||
-            (!this.input && value !== undefined && (this.visible || this.conditionallyVisible() || !this.component.clearOnHide))) {
-            const changed = this.updateValue(value, flags);
-            if (this.isHtmlRenderMode() && flags && flags.fromSubmission && changed) {
-                this.redraw();
-            }
-            return changed;
-        }
-        return false;
+        this.setCheckedState(value);
+        return super.setValue(value, flags);
     }
     getValueAsString(value) {
         const { name: componentName, value: componentValue } = this.component;

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

@@ -0,0 +1,34 @@
+declare namespace _default {
+    let title: string;
+    let name: string;
+    let path: string;
+    let type: string;
+    let display: string;
+    let components: ({
+        label: string;
+        tableView: boolean;
+        validateWhenHidden: boolean;
+        key: string;
+        conditional: {
+            show: boolean;
+            conjunction: string;
+            conditions: {
+                component: string;
+                operator: string;
+            }[];
+        };
+        type: string;
+        input: boolean;
+        applyMaskOn?: undefined;
+    } | {
+        label: string;
+        applyMaskOn: string;
+        tableView: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        validateWhenHidden?: undefined;
+        conditional?: undefined;
+    })[];
+}
+export default _default;

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

@@ -0,0 +1,53 @@
+export default {
+    title: '7595',
+    name: '7595',
+    path: '7595',
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'Checkbox',
+            tableView: false,
+            validateWhenHidden: false,
+            key: 'checkboxBefore',
+            conditional: {
+                show: true,
+                conjunction: 'all',
+                conditions: [
+                    {
+                        component: 'textField',
+                        operator: 'isNotEmpty'
+                    }
+                ]
+            },
+            type: 'checkbox',
+            input: true
+        },
+        {
+            label: 'Text Field',
+            applyMaskOn: 'change',
+            tableView: true,
+            key: 'textField',
+            type: 'textfield',
+            input: true
+        },
+        {
+            label: 'Checkbox',
+            tableView: false,
+            validateWhenHidden: false,
+            key: 'checkboxAfter',
+            conditional: {
+                show: true,
+                conjunction: 'all',
+                conditions: [
+                    {
+                        component: 'textField',
+                        operator: 'isNotEmpty'
+                    }
+                ]
+            },
+            type: 'checkbox',
+            input: true
+        },
+    ]
+};

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

@@ -2,5 +2,6 @@ import comp1 from './comp1';
 import comp2 from './comp2';
 import comp3 from './comp3';
 import comp4 from './comp4';
+import comp5 from './comp5';
 import customDefaultComponent from './customDefaultComponent';
-export { comp1, comp2, comp3, comp4, customDefaultComponent };
+export { comp1, comp2, comp3, comp4, comp5, customDefaultComponent };

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

@@ -3,4 +3,5 @@ import customDefaultComponent from './customDefaultComponent';
 import comp2 from './comp2';
 import comp3 from './comp3';
 import comp4 from './comp4';
-export { comp1, comp2, comp3, comp4, customDefaultComponent };
+import comp5 from './comp5';
+export { comp1, comp2, comp3, comp4, comp5, customDefaultComponent };

package/lib/mjs/components/form/Form.js

@@ -200,6 +200,9 @@ export default class FormComponent extends Component {
         if (this.options.saveDraftThrottle) {
             options.saveDraftThrottle = this.options.saveDraftThrottle;
         }
+        if (this.options.skipDraftRestore) {
+            options.skipDraftRestore = this.options.skipDraftRestore;
+        }
         return options;
     }
     /* eslint-enable max-statements */
@@ -570,8 +573,9 @@ export default class FormComponent extends Component {
             this.subForm.triggerSaveDraft.cancel();
         }
         const isAlreadySubmitted = submission && submission._id && submission.form;
+        const isDraftSubmission = this.options.saveDraft && submission.state === 'draft';
         // This submission has already been submitted, so just return the reference data.
-        if (isAlreadySubmitted && !this.subForm?.wizard) {
+        if (isAlreadySubmitted && !this.subForm?.wizard && !isDraftSubmission) {
             this.dataValue = submission;
             return Promise.resolve(this.dataValue);
         }

package/lib/mjs/components/form/fixtures/comp7.d.ts

@@ -0,0 +1,36 @@
+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;
+        key: string;
+        type: string;
+        input: boolean;
+        src?: undefined;
+        disableOnInvalid?: undefined;
+    } | {
+        label: string;
+        tableView: boolean;
+        src: string;
+        key: string;
+        type: string;
+        input: boolean;
+        disableOnInvalid?: undefined;
+    } | {
+        type: string;
+        label: string;
+        key: string;
+        disableOnInvalid: boolean;
+        input: boolean;
+        tableView: boolean;
+        src?: undefined;
+    })[];
+    let project: string;
+    let machineName: string;
+}
+export default _default;

package/lib/mjs/components/form/fixtures/comp7.js

@@ -0,0 +1,35 @@
+export default {
+    _id: '66051dae494c977c47028fac',
+    title: 'test draft parent',
+    name: 'testDraftParent',
+    path: 'testdraftparent',
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'Parent Form Field',
+            tableView: true,
+            key: 'parent',
+            type: 'textfield',
+            input: true,
+        },
+        {
+            label: 'Form',
+            tableView: true,
+            src: 'http://localhost:3000/idwqwhclwioyqbw/testdraftnested',
+            key: 'form',
+            type: 'form',
+            input: true,
+        },
+        {
+            type: 'button',
+            label: 'Submit',
+            key: 'submit',
+            disableOnInvalid: true,
+            input: true,
+            tableView: false,
+        },
+    ],
+    project: '63cead09be0090345b109e22',
+    machineName: 'idwqwhclwioyqbw:testdraftparent'
+};

package/lib/mjs/components/form/fixtures/comp8.d.ts

@@ -0,0 +1,26 @@
+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;
+        key: string;
+        type: string;
+        input: boolean;
+        disableOnInvalid?: undefined;
+    } | {
+        type: string;
+        label: string;
+        key: string;
+        disableOnInvalid: boolean;
+        input: boolean;
+        tableView: boolean;
+    })[];
+    let project: string;
+    let machineName: string;
+}
+export default _default;

package/lib/mjs/components/form/fixtures/comp8.js

@@ -0,0 +1,27 @@
+export default {
+    _id: '63e4deda12b88c4f05c125cf',
+    title: 'test draft nested',
+    name: 'testDraftNested',
+    path: 'testdraftnested',
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'Nested Form Field',
+            tableView: true,
+            key: 'nested',
+            type: 'textfield',
+            input: true,
+        },
+        {
+            type: 'button',
+            label: 'Submit',
+            key: 'submit',
+            disableOnInvalid: true,
+            input: true,
+            tableView: false,
+        },
+    ],
+    project: '63cead09be0090345b109e22',
+    machineName: 'idwqwhclwioyqbw:testdraftparent'
+};

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

@@ -5,4 +5,6 @@ import comp3 from './comp3';
 import comp4 from './comp4';
 import comp5 from './comp5';
 import comp6 from './comp6';
-export { formModalEdit, comp1, comp2, comp3, comp4, comp5, comp6 };
+import comp7 from './comp7';
+import comp8 from './comp8';
+export { formModalEdit, comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8 };

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

@@ -5,4 +5,6 @@ import comp3 from './comp3';
 import comp4 from './comp4';
 import comp5 from './comp5';
 import comp6 from './comp6';
-export { formModalEdit, comp1, comp2, comp3, comp4, comp5, comp6 };
+import comp7 from './comp7';
+import comp8 from './comp8';
+export { formModalEdit, comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8 };

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

@@ -71,7 +71,7 @@ export default class RadioComponent extends ListComponent {
     detach(element: any): void;
     validateValueProperty(): boolean;
     validateValueAvailability(setting: any, value: any): boolean;
-    getValueAsString(value: any): any;
+    getValueAsString(value: any, options?: {}): any;
     setValueAt(index: any, value: any): void;
     loadItems(url: any, search: any, headers: any, options: any, method: any, body: any): void;
     loadItemsFromMetadata(): void;

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

@@ -226,17 +226,19 @@ export default class RadioComponent extends ListComponent {
         }
         return false;
     }
-    getValueAsString(value) {
+    getValueAsString(value, options = {}) {
         if (_.isObject(value)) {
             value = JSON.stringify(value);
         }
         else if (!_.isString(value)) {
             value = _.toString(value);
         }
-        if (this.component.dataSrc !== 'values') {
+        const isModalPreviewWithUrlDataSource = options.modalPreview && this.component.dataSrc === 'url';
+        if (this.component.dataSrc !== 'values' && !isModalPreviewWithUrlDataSource) {
             return value;
         }
-        const option = _.find(this.component.values, (v) => v.value === value);
+        const values = isModalPreviewWithUrlDataSource ? this.loadedOptions : this.component.values;
+        const option = _.find(values, (v) => v.value === value);
         if (!value) {
             return _.get(option, 'label', '');
         }

package/lib/mjs/components/recaptcha/editForm/ReCaptcha.edit.display.d.ts

@@ -7,6 +7,9 @@ declare const _default: ({
         label: string;
         value: string;
     }[];
+    validate: {
+        required: boolean;
+    };
     weight: number;
     input?: undefined;
     dataSrc?: undefined;
@@ -28,6 +31,7 @@ declare const _default: ({
         custom(context: any): any[];
     };
     values?: undefined;
+    validate?: undefined;
     ignore?: undefined;
 } | {
     key: string;
@@ -36,6 +40,7 @@ declare const _default: ({
     tooltip?: undefined;
     type?: undefined;
     values?: undefined;
+    validate?: undefined;
     weight?: undefined;
     input?: undefined;
     dataSrc?: undefined;

package/lib/mjs/components/recaptcha/editForm/ReCaptcha.edit.display.js

@@ -15,6 +15,9 @@ export default [
                 value: 'buttonClick'
             }
         ],
+        validate: {
+            required: true
+        },
         weight: 650
     },
     {

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

@@ -226,9 +226,10 @@ export default class SelectComponent extends ListComponent {
     }
     selectValueAndLabel(data) {
         const value = this.getOptionValue((this.isEntireObjectDisplay() && !this.itemValue(data)) ? data : this.itemValue(data));
+        const readOnlyResourceLabelData = this.options.readOnly && (this.component.dataSrc === 'resource' || this.component.dataSrc === 'url') && this.selectData;
         return {
             value,
-            label: this.itemTemplate((this.isEntireObjectDisplay() && !_.isObject(data.data)) ? { data: data } : data, value)
+            label: this.itemTemplate((this.isEntireObjectDisplay() && !_.isObject(data.data)) ? { data: data } : readOnlyResourceLabelData || data, value)
         };
     }
     itemTemplate(data, value) {
@@ -1495,6 +1496,10 @@ export default class SelectComponent extends ListComponent {
     }
     asString(value, options = {}) {
         value = value ?? this.getValue();
+        if (options.modalPreview && this.selectData) {
+            const { label } = this.selectValueAndLabel(value);
+            return label;
+        }
         //need to convert values to strings to be able to compare values with available options that are strings
         const convertToString = (data, valueProperty) => {
             if (valueProperty) {

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

@@ -0,0 +1,47 @@
+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;
+        dataSrc: string;
+        data: {
+            resource: string;
+        };
+        template: string;
+        validate: {
+            select: boolean;
+        };
+        key: string;
+        type: string;
+        searchField: string;
+        input: boolean;
+        noRefreshOnScroll: boolean;
+        addResource: boolean;
+        reference: boolean;
+        valueProperty: string;
+        disableOnInvalid?: undefined;
+    } | {
+        type: string;
+        label: string;
+        key: string;
+        disableOnInvalid: boolean;
+        input: boolean;
+        tableView: boolean;
+        widget?: undefined;
+        dataSrc?: undefined;
+        data?: undefined;
+        template?: undefined;
+        validate?: undefined;
+        searchField?: undefined;
+        noRefreshOnScroll?: undefined;
+        addResource?: undefined;
+        reference?: undefined;
+        valueProperty?: undefined;
+    })[];
+}
+export default _default;

package/lib/mjs/components/select/fixtures/comp23.js

@@ -0,0 +1,38 @@
+export default {
+    title: 'FIO-8234',
+    name: 'fio8234',
+    path: 'fio8234',
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'Select',
+            widget: 'choicesjs',
+            tableView: true,
+            dataSrc: 'resource',
+            data: {
+                resource: '665446284c9b0163c3e0c7e6',
+            },
+            template: '<span>{{ item.data.textField1 }}</span>',
+            validate: {
+                select: false,
+            },
+            key: 'select',
+            type: 'select',
+            searchField: 'data.textField2__regex',
+            input: true,
+            noRefreshOnScroll: false,
+            addResource: false,
+            reference: false,
+            valueProperty: 'data.textField2',
+        },
+        {
+            type: 'button',
+            label: 'Submit',
+            key: 'submit',
+            disableOnInvalid: true,
+            input: true,
+            tableView: false,
+        },
+    ],
+};

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

@@ -19,5 +19,6 @@ import comp19 from './comp19';
 import comp20 from './comp20';
 import comp21 from './comp21';
 import comp22 from './comp22';
-export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19, comp20, comp21, comp22 };
+import comp23 from './comp23';
+export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19, comp20, comp21, comp22, comp23 };
 export { multiSelect, multiSelectOptions } from "./comp3";

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

@@ -20,4 +20,5 @@ import comp19 from './comp19';
 import comp20 from './comp20';
 import comp21 from './comp21';
 import comp22 from './comp22';
-export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19, comp20, comp21, comp22 };
+import comp23 from './comp23';
+export { comp1, comp2, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11, comp12, comp13, comp14, comp15, comp16, comp17, comp18, comp19, comp20, comp21, comp22, comp23 };

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

@@ -162,11 +162,14 @@ export default class SelectBoxesComponent extends RadioComponent {
         }
         return changed;
     }
-    getValueAsString(value) {
+    getValueAsString(value, options = {}) {
         if (!value) {
             return '';
         }
         if (this.isSelectURL) {
+            if (options.modalPreview && this.loadedOptions) {
+                return this.loadedOptions.filter((option) => value[option.value]).map((option) => option.label).join(', ');
+            }
             return _(value).pickBy((val) => val).keys().join(', ');
         }
         return _(this.component.values || [])

package/lib/mjs/translations/en.d.ts

@@ -71,5 +71,6 @@ declare namespace _default {
     let submitButtonAriaLabel: string;
     let reCaptchaTokenValidationError: string;
     let reCaptchaTokenNotSpecifiedError: string;
+    let apiKey: string;
 }
 export default _default;

package/lib/mjs/translations/en.js

@@ -71,4 +71,5 @@ export default {
     submitButtonAriaLabel: 'Submit Form button. Click to submit the form',
     reCaptchaTokenValidationError: 'ReCAPTCHA: Token validation error',
     reCaptchaTokenNotSpecifiedError: 'ReCAPTCHA: Token is not specified in submission',
+    apiKey: 'API Key is not unique: {{key}}'
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.0.0-dev.5588.0f690c8",
+  "version": "5.0.0-dev.5589.fd575d0",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {
@@ -89,7 +89,7 @@
     "core-js": "^3.37.0",
     "dialog-polyfill": "^0.5.6",
     "dom-autoscroller": "^2.3.4",
-    "dompurify": "^3.1.0",
+    "dompurify": "^3.1.1",
     "downloadjs": "^1.4.7",
     "dragula": "^3.7.3",
     "eventemitter3": "^5.0.1",
@@ -105,7 +105,7 @@
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "moment-timezone": "^0.5.44",
-    "quill": "^2.0.0-rc.4",
+    "quill": "^2.0.0",
     "signature_pad": "^4.2.0",
     "string-hash": "^1.1.3",
     "tippy.js": "^6.3.7",