@formio/js 5.0.0-dev.5543.201e658 → 5.0.0-dev.5543.3c780dd

package/lib/mjs/WebformBuilder.js

@@ -115,6 +115,7 @@ export default class WebformBuilder extends Component {
                 html,
                 disableBuilderActions: self?.component?.disableBuilderActions,
                 childComponent: component,
+                design: self?.options?.design
             });
         };
         this.options.hooks.renderComponents = (html, { components, self }) => {
@@ -472,6 +473,7 @@ export default class WebformBuilder extends Component {
     attach(element) {
         this.on('change', (form) => {
             this.populateRecaptchaSettings(form);
+            this.webform.setAlert(false);
         });
         return super.attach(element).then(() => {
             this.loadRefs(element, {
@@ -804,6 +806,20 @@ export default class WebformBuilder extends Component {
                 return;
             }
         }
+        if (draggableComponent.uniqueComponent) {
+            let isCompAlreadyExists = false;
+            eachComponent(this.webform.components, (component) => {
+                if (component.key === draggableComponent.schema.key) {
+                    isCompAlreadyExists = true;
+                    return;
+                }
+            }, true);
+            if (isCompAlreadyExists) {
+                this.webform.redraw();
+                this.webform.setAlert('danger', `You cannot add more than one ${draggableComponent.title} component to one page.`);
+                return;
+            }
+        }
         if (target !== source) {
             // Ensure the key remains unique in its new container.
             BuilderUtils.uniquify(this.findNamespaceRoot(target.formioComponent), info);
@@ -836,7 +852,7 @@ export default class WebformBuilder extends Component {
             parent.addChildComponent(info, element, target, source, sibling);
         }
         const componentInDataGrid = parent.type === 'datagrid';
-        if (isNew && !this.options.noNewEdit && !info.noNewEdit) {
+        if (isNew && !this.options.noNewEdit && !info.noNewEdit && !(this.options.design && info.type === 'reviewpage')) {
             this.editComponent(info, target, isNew, null, null, { inDataGrid: componentInDataGrid });
         }
         // Only rebuild the parts needing to be rebuilt.

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

@@ -195,7 +195,7 @@ export default class DataGridComponent extends NestedArrayComponent {
         return this.hasAddButton() && ['bottom', 'both'].includes(this.addAnotherPosition);
     }
     get canAddColumn() {
-        return this.builderMode;
+        return this.builderMode && !this.options.design;
     }
     render() {
         const columns = this.getColumns();

package/lib/mjs/components/datetime/fixtures/comp13.d.ts

@@ -0,0 +1,123 @@
+declare namespace _default {
+    const type: string;
+    const display: string;
+    const components: ({
+        label: string;
+        tableView: boolean;
+        datePicker: {
+            disableWeekends: boolean;
+            disableWeekdays: boolean;
+            disableFunction?: undefined;
+        };
+        enableMinDateInput: boolean;
+        enableMaxDateInput: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        widget: {
+            type: string;
+            displayInTimezone: string;
+            locale: string;
+            useLocaleSettings: boolean;
+            allowInput: boolean;
+            mode: string;
+            enableTime: boolean;
+            noCalendar: boolean;
+            format: string;
+            hourIncrement: number;
+            minuteIncrement: number;
+            time_24hr: boolean;
+            minDate: null;
+            disableWeekends: boolean;
+            disableWeekdays: boolean;
+            maxDate: null;
+            disableFunction?: undefined;
+        };
+        validate?: undefined;
+        disableOnInvalid?: undefined;
+    } | {
+        label: string;
+        tableView: boolean;
+        enableMinDateInput: boolean;
+        datePicker: {
+            disableWeekends: boolean;
+            disableWeekdays: boolean;
+            disableFunction?: undefined;
+        };
+        enableMaxDateInput: boolean;
+        validate: {
+            custom: string;
+        };
+        key: string;
+        type: string;
+        input: boolean;
+        widget: {
+            type: string;
+            displayInTimezone: string;
+            locale: string;
+            useLocaleSettings: boolean;
+            allowInput: boolean;
+            mode: string;
+            enableTime: boolean;
+            noCalendar: boolean;
+            format: string;
+            hourIncrement: number;
+            minuteIncrement: number;
+            time_24hr: boolean;
+            minDate: null;
+            disableWeekends: boolean;
+            disableWeekdays: boolean;
+            maxDate: null;
+            disableFunction?: undefined;
+        };
+        disableOnInvalid?: undefined;
+    } | {
+        label: string;
+        tableView: boolean;
+        datePicker: {
+            disableFunction: string;
+            disableWeekends: boolean;
+            disableWeekdays: boolean;
+        };
+        enableMinDateInput: boolean;
+        enableMaxDateInput: boolean;
+        key: string;
+        customConditional: string;
+        type: string;
+        input: boolean;
+        widget: {
+            type: string;
+            displayInTimezone: string;
+            locale: string;
+            useLocaleSettings: boolean;
+            allowInput: boolean;
+            mode: string;
+            enableTime: boolean;
+            noCalendar: boolean;
+            format: string;
+            hourIncrement: number;
+            minuteIncrement: number;
+            time_24hr: boolean;
+            minDate: null;
+            disableWeekends: boolean;
+            disableWeekdays: boolean;
+            disableFunction: string;
+            maxDate: null;
+        };
+        validate?: undefined;
+        disableOnInvalid?: undefined;
+    } | {
+        type: string;
+        label: string;
+        key: string;
+        disableOnInvalid: boolean;
+        input: boolean;
+        tableView: boolean;
+        datePicker?: undefined;
+        enableMinDateInput?: undefined;
+        enableMaxDateInput?: undefined;
+        widget?: undefined;
+        validate?: undefined;
+    })[];
+}
+export default _default;

package/lib/mjs/components/datetime/fixtures/comp13.js

@@ -0,0 +1,116 @@
+export default {
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'Min Date',
+            tableView: false,
+            datePicker: {
+                disableWeekends: false,
+                disableWeekdays: false
+            },
+            enableMinDateInput: false,
+            enableMaxDateInput: false,
+            key: 'minDate',
+            type: 'datetime',
+            input: true,
+            widget: {
+                type: 'calendar',
+                displayInTimezone: 'viewer',
+                locale: 'en',
+                useLocaleSettings: false,
+                allowInput: true,
+                mode: 'single',
+                enableTime: true,
+                noCalendar: false,
+                format: 'yyyy-MM-dd hh:mm a',
+                hourIncrement: 1,
+                minuteIncrement: 1,
+                // eslint-disable-next-line camelcase
+                time_24hr: false,
+                minDate: null,
+                disableWeekends: false,
+                disableWeekdays: false,
+                maxDate: null
+            }
+        },
+        {
+            label: 'Max Date',
+            tableView: false,
+            enableMinDateInput: false,
+            datePicker: {
+                disableWeekends: false,
+                disableWeekdays: false
+            },
+            enableMaxDateInput: false,
+            validate: {
+                custom: "var minDate = moment(data.minDate);\nvar maxDate = moment(data.maxDate);\nvalid = maxDate.isAfter(minDate)? true : 'Max date must be after min date'"
+            },
+            key: 'maxDate',
+            type: 'datetime',
+            input: true,
+            widget: {
+                type: 'calendar',
+                displayInTimezone: 'viewer',
+                locale: 'en',
+                useLocaleSettings: false,
+                allowInput: true,
+                mode: 'single',
+                enableTime: true,
+                noCalendar: false,
+                format: 'yyyy-MM-dd hh:mm a',
+                hourIncrement: 1,
+                minuteIncrement: 1,
+                // eslint-disable-next-line camelcase
+                time_24hr: false,
+                minDate: null,
+                disableWeekends: false,
+                disableWeekdays: false,
+                maxDate: null
+            }
+        },
+        {
+            label: 'In Between Date',
+            tableView: false,
+            datePicker: {
+                disableFunction: '!moment(date).isBetween(moment(data.minDate), moment(data.maxDate))',
+                disableWeekends: false,
+                disableWeekdays: false
+            },
+            enableMinDateInput: false,
+            enableMaxDateInput: false,
+            key: 'inBetweenDate',
+            customConditional: 'show = !!data.minDate && !!data.maxDate',
+            type: 'datetime',
+            input: true,
+            widget: {
+                type: 'calendar',
+                displayInTimezone: 'viewer',
+                locale: 'en',
+                useLocaleSettings: false,
+                allowInput: true,
+                mode: 'single',
+                enableTime: true,
+                noCalendar: false,
+                format: 'yyyy-MM-dd hh:mm a',
+                hourIncrement: 1,
+                minuteIncrement: 1,
+                // eslint-disable-next-line camelcase
+                time_24hr: false,
+                minDate: null,
+                disableWeekends: false,
+                disableWeekdays: false,
+                disableFunction: '!moment(date).isBetween(moment(data.minDate), moment(data.maxDate))',
+                maxDate: null
+            }
+        },
+        {
+            type: 'button',
+            label: 'Submit',
+            key: 'submit',
+            disableOnInvalid: true,
+            input: true,
+            tableView: false
+        }
+    ],
+};

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

@@ -2,6 +2,7 @@ import comp1 from './comp1';
 import comp10 from './comp10';
 import comp11 from './comp11';
 import comp12 from './comp12';
+import comp13 from './comp13';
 import comp2 from './comp2';
 import comp3 from './comp3';
 import comp5 from './comp5';
@@ -9,4 +10,4 @@ import comp6 from './comp6';
 import comp7 from './comp7';
 import comp8 from './comp8';
 import comp9 from './comp9';
-export { comp1, comp10, comp11, comp12, comp2, comp3, comp5, comp6, comp7, comp8, comp9 };
+export { comp1, comp10, comp11, comp12, comp13, comp2, comp3, comp5, comp6, comp7, comp8, comp9 };

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

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

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

@@ -136,6 +136,7 @@ export default class FormComponent extends Component {
             return this.subForm.getComponent(path, fn, originalPathStr);
         }
     }
+    /* eslint-disable max-statements */
     getSubOptions(options = {}) {
         options.parentPath = `${this.path}.data.`;
         options.events = this.createEmitter();
@@ -189,8 +190,16 @@ export default class FormComponent extends Component {
         if (this.options.preview) {
             options.preview = this.options.preview;
         }
+        if (this.options.saveDraft) {
+            options.saveDraft = this.options.saveDraft;
+            options.formio = new Formio(this.formSrc);
+        }
+        if (this.options.saveDraftThrottle) {
+            options.saveDraftThrottle = this.options.saveDraftThrottle;
+        }
         return options;
     }
+    /* eslint-enable max-statements */
     render() {
         if (this.builderMode) {
             return super.render(this.component.label || 'Nested form');
@@ -425,7 +434,13 @@ export default class FormComponent extends Component {
         }
         else if (this.formSrc) {
             this.subFormLoading = true;
-            return (new Formio(this.formSrc)).loadForm({ params: { live: 1 } })
+            const options = this.root.formio?.base && this.root.formio?.projectUrl
+                ? {
+                    base: this.root.formio.base,
+                    project: this.root.formio.projectUrl,
+                }
+                : {};
+            return (new Formio(this.formSrc, options)).loadForm({ params: { live: 1 } })
                 .then((formObj) => {
                 this.formObj = formObj;
                 if (this.options.pdf && this.component.useOriginalRevision) {
@@ -601,7 +616,13 @@ export default class FormComponent extends Component {
         if (shouldLoadSubmissionById) {
             const formId = submission.form || this.formObj.form || this.component.form;
             const submissionUrl = `${this.subForm.formio.formsUrl}/${formId}/submission/${submission._id}`;
-            this.subForm.setUrl(submissionUrl, this.options);
+            const options = this.root.formio?.base && this.root.formio?.projectUrl
+                ? {
+                    base: this.root.formio.base,
+                    project: this.root.formio.projectUrl,
+                }
+                : {};
+            this.subForm.setUrl(submissionUrl, { ...this.options, ...options });
             this.subForm.loadSubmission().catch((err) => {
                 console.error(`Unable to load subform submission ${submission._id}:`, err);
             });

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

@@ -25,6 +25,24 @@ export default class RadioComponent extends ListComponent {
         isPrototypeOf(v: Object): boolean;
         propertyIsEnumerable(v: PropertyKey): boolean;
     };
+    static get serverConditionSettings(): {
+        valueComponent(classComp: any): {
+            type: string;
+            dataSrc: string;
+            valueProperty: string;
+            dataType: any;
+            data: {
+                custom: string;
+            };
+        };
+        constructor: Function;
+        toString(): string;
+        toLocaleString(): string;
+        valueOf(): Object;
+        hasOwnProperty(v: PropertyKey): boolean;
+        isPrototypeOf(v: Object): boolean;
+        propertyIsEnumerable(v: PropertyKey): boolean;
+    };
     static savedValueTypes(schema: any): any[];
     constructor(component: any, options: any, data: any);
     previousValue: any;

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

@@ -44,6 +44,22 @@ export default class RadioComponent extends ListComponent {
             }
         };
     }
+    static get serverConditionSettings() {
+        return {
+            ...super.serverConditionSettings,
+            valueComponent(classComp) {
+                return {
+                    type: 'select',
+                    dataSrc: 'custom',
+                    valueProperty: 'value',
+                    dataType: classComp.dataType || '',
+                    data: {
+                        custom: `values = ${classComp && classComp.values ? JSON.stringify(classComp.values) : []}`,
+                    },
+                };
+            },
+        };
+    }
     static savedValueTypes(schema) {
         const { boolean, string, number, object, array } = componentValueTypes;
         const { dataType } = schema;

package/lib/mjs/widgets/CalendarWidget.js

@@ -409,6 +409,14 @@ export default class CalendarWidget extends InputWidget {
                 }
             }
         });
+        // If other fields are used to calculate disabled dates, we need to redraw calendar to refresh disabled dates
+        if (this.settings.disableFunction && this.componentInstance && this.componentInstance.root) {
+            this.componentInstance.root.on('change', (e) => {
+                if (e.changed && this.calendar) {
+                    this.calendar.redraw();
+                }
+            });
+        }
         // Restore the calendar value from the component value.
         this.setValue(this.componentValue);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.0.0-dev.5543.201e658",
+  "version": "5.0.0-dev.5543.3c780dd",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -109,7 +109,7 @@
     "moment": "^2.29.4",
     "moment-timezone": "^0.5.44",
     "quill": "^2.0.0-dev.3",
-    "signature_pad": "^4.1.4",
+    "signature_pad": "^4.2.0",
     "string-hash": "^1.1.3",
     "tippy.js": "^6.3.7",
     "uuid": "^9.0.0",