@formio/js 5.0.0-dev.5755.7a395f8 → 5.0.0-dev.5755.8d3062b

package/lib/mjs/components/_classes/multivalue/Multivalue.js

@@ -1,12 +1,46 @@
 import Field from '../field/Field';
 import _ from 'lodash';
+import { Utils } from '@formio/core';
 export default class Multivalue extends Field {
-    get dataValue() {
-        const parent = super.dataValue;
-        if (!parent && this.component.multiple) {
-            return [];
+    /**
+     * Normalize values coming into updateValue.
+     * @param {*} value - The value to normalize before setting.
+     * @param {object} flags - Flags to use when normalizing the value.
+     * @param {*} emptyValue - The empty value for the field.
+     * @returns {*} - The normalized value.
+     */
+    normalizeValue(value, flags = {}, emptyValue = this.emptyValue) {
+        const underlyingValueShouldBeArray = Utils.getModelType(this.component) === 'array' || this.component.storeas === 'array' || Array.isArray(emptyValue);
+        if (this.component.multiple) {
+            if (Array.isArray(value)) {
+                if (underlyingValueShouldBeArray) {
+                    if (value.length === 0 || !Array.isArray(value[0])) {
+                        return [value];
+                    }
+                }
+                if (value.length === 0) {
+                    return [emptyValue];
+                }
+                return super.normalizeValue(value, flags);
+            }
+            else {
+                return super.normalizeValue(value == null ? [emptyValue] : [value], flags);
+            }
+        }
+        else {
+            if (Array.isArray(value) && !underlyingValueShouldBeArray) {
+                if (this.component.storeas === 'string') {
+                    return super.normalizeValue(value.join(this.delimiter || ''), flags);
+                }
+                return super.normalizeValue(value[0] || emptyValue, flags);
+            }
+            else {
+                return super.normalizeValue(value, flags);
+            }
         }
-        return parent;
+    }
+    get dataValue() {
+        return this.normalizeValue(super.dataValue);
     }
     set dataValue(value) {
         super.dataValue = value;
@@ -26,30 +60,20 @@ export default class Multivalue extends Field {
     get addAnother() {
         return this.t(this.component.addAnother || 'Add Another');
     }
-    useWrapper() {
-        return this.component.hasOwnProperty('multiple') && this.component.multiple;
-    }
     /**
      * @returns {Field} - The created field.
      */
     render() {
-        // If single value field.
-        if (!this.useWrapper()) {
-            return super.render(`<div ${this._referenceAttributeName}="element">
-          ${this.renderElement(this.component.type !== 'hidden' ? this.dataValue : '')}
-        </div>`);
-        }
-        // Make sure dataValue is in the correct array format.
-        let dataValue = this.dataValue;
-        if (!Array.isArray(dataValue)) {
-            dataValue = dataValue ? [dataValue] : [];
-        }
-        // If multiple value field.
-        return super.render(this.renderTemplate('multiValueTable', {
-            rows: dataValue.map(this.renderRow.bind(this)).join(''),
-            disabled: this.disabled,
-            addAnother: this.addAnother,
-        }));
+        let dataValue = this.normalizeValue(this.dataValue);
+        return this.component.hasOwnProperty('multiple') && this.component.multiple
+            ? super.render(this.renderTemplate('multiValueTable', {
+                rows: dataValue.map(this.renderRow.bind(this)).join(''),
+                disabled: this.disabled,
+                addAnother: this.addAnother,
+            }))
+            : super.render(`<div ${this._referenceAttributeName}="element">
+            ${this.renderElement(this.component.type !== 'hidden' ? dataValue : '')}
+          </div>`);
     }
     renderElement() {
         return '';

package/lib/mjs/components/address/Address.d.ts

@@ -11,6 +11,12 @@ export default class AddressComponent extends ContainerComponent {
         weight: number;
         schema: any;
     };
+    static get serverConditionSettings(): {
+        operators: string[];
+    };
+    static get conditionOperatorsSettings(): {
+        operators: string[];
+    };
     static get modeSwitcherRef(): string;
     static get removeValueIconRef(): string;
     static get searchInputRef(): string;

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

@@ -91,6 +91,15 @@ export default class AddressComponent extends ContainerComponent {
             schema: AddressComponent.schema(),
         };
     }
+    static get serverConditionSettings() {
+        return AddressComponent.conditionOperatorsSettings;
+    }
+    static get conditionOperatorsSettings() {
+        return {
+            ...super.conditionOperatorsSettings,
+            operators: ['isEmpty', 'isNotEmpty'],
+        };
+    }
     mergeSchema(component = {}) {
         let { defaultSchema } = this;
         if (component.components) {
@@ -181,7 +190,7 @@ export default class AddressComponent extends ContainerComponent {
         return (this.manualModeEnabled && this.dataValue) ? this.dataValue.address : this.dataValue;
     }
     set address(value) {
-        if (this.manualModeEnabled && !this.isMultiple) {
+        if (this.manualModeEnabled && !this.isMultiple && !_.isEqual(value, this.emptyValue)) {
             this.dataValue.address = value;
         }
         else {

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

@@ -432,7 +432,7 @@ export default class DataGridComponent extends NestedArrayComponent {
     }
     removeRow(index) {
         const makeEmpty = index === 0 && this.rows.length === 1;
-        const flags = { isReordered: !makeEmpty, resetValue: makeEmpty };
+        const flags = { isReordered: !makeEmpty, resetValue: makeEmpty, modified: true };
         this.splice(index, flags);
         this.emit('dataGridDeleteRow', { index });
         const [row] = this.rows.splice(index, 1);

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

@@ -97,6 +97,11 @@ export default class DayComponent extends Field {
      * @returns {null|void} - Returns null if the value is invalid, otherwise void.
      */
     setValueAt(index: number, value: any): null | void;
+    getDayWithHiddenFields(parts: any): {
+        month: any;
+        day: any;
+        year: any;
+    };
     getFieldValue(name: any): number;
     get parts(): {
         day: number;
@@ -130,8 +135,7 @@ 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(): "DD-MM-YYYY" | "MM-DD-YYYY";
+    getValidationFormat(): string;
 }
 import Field from '../_classes/field/Field';

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

@@ -25,7 +25,8 @@ export default class DayComponent extends Field {
                     required: false
                 }
             },
-            dayFirst: false
+            dayFirst: false,
+            defaultValue: ''
         }, ...extend);
     }
     static get builderInfo() {
@@ -341,15 +342,33 @@ export default class DayComponent extends Field {
         const valueParts = value.split('/');
         const [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];
         const defaultValue = this.component.defaultValue ? this.component.defaultValue.split('/') : '';
-        const getNextPart = (shouldTake, defaultValue) => dateParts.push(shouldTake ? valueParts.shift() : defaultValue);
+        let defaultDay = '';
+        let defaultMonth = '';
+        let defaultYear = '';
+        if (defaultValue) {
+            const hasHiddenFields = defaultValue.length !== 3;
+            defaultDay = hasHiddenFields ? this.getDayWithHiddenFields(defaultValue).day : defaultValue[DAY];
+            defaultMonth = hasHiddenFields ? this.getDayWithHiddenFields(defaultValue).month : defaultValue[MONTH];
+            defaultYear = hasHiddenFields ? this.getDayWithHiddenFields(defaultValue).year : defaultValue[YEAR];
+        }
+        if (this.options.building && defaultValue.length === 3) {
+            return this.component.defaultValue;
+        }
+        const getNextPart = (shouldTake, defaultValue) => {
+            // Only push the part if it's not an empty string
+            const part = shouldTake ? valueParts.shift() : defaultValue;
+            if (part !== '') {
+                dateParts.push(part);
+            }
+        };
         if (this.dayFirst) {
-            getNextPart(this.showDay, defaultValue ? defaultValue[DAY] : '00');
+            getNextPart(this.showDay, defaultDay);
         }
-        getNextPart(this.showMonth, defaultValue ? defaultValue[MONTH] : '00');
+        getNextPart(this.showMonth, defaultMonth);
         if (!this.dayFirst) {
-            getNextPart(this.showDay, defaultValue ? defaultValue[DAY] : '00');
+            getNextPart(this.showDay, defaultDay);
         }
-        getNextPart(this.showYear, defaultValue ? defaultValue[YEAR] : '0000');
+        getNextPart(this.showYear, defaultYear);
         return dateParts.join('/');
     }
     /**
@@ -364,16 +383,23 @@ export default class DayComponent extends Field {
         if (value === 'Invalid date') {
             return null;
         }
+        let day, month, year;
         const parts = value.split('/');
-        let day;
-        if (this.component.dayFirst) {
-            day = parts.shift();
+        if (parts.length !== 3) {
+            day = this.getDayWithHiddenFields(parts).day;
+            month = this.getDayWithHiddenFields(parts).month;
+            year = this.getDayWithHiddenFields(parts).year;
         }
-        const month = parts.shift();
-        if (!this.component.dayFirst) {
-            day = parts.shift();
+        else {
+            if (this.component.dayFirst) {
+                day = parts.shift();
+            }
+            month = parts.shift();
+            if (!this.component.dayFirst) {
+                day = parts.shift();
+            }
+            year = parts.shift();
         }
-        const year = parts.shift();
         if (this.refs.day && this.showDay) {
             this.refs.day.value = day === '00' ? '' : parseInt(day, 10);
         }
@@ -384,6 +410,27 @@ export default class DayComponent extends Field {
             this.refs.year.value = year === '0000' ? '' : parseInt(year, 10);
         }
     }
+    getDayWithHiddenFields(parts) {
+        let [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];
+        if (!this.showDay) {
+            MONTH = MONTH === 0 ? 0 : MONTH - 1;
+            YEAR = YEAR - 1;
+            DAY = null;
+        }
+        if (!this.showMonth) {
+            DAY = DAY === 0 ? 0 : DAY - 1;
+            YEAR = YEAR - 1;
+            MONTH = null;
+        }
+        if (!this.showYear) {
+            YEAR = null;
+        }
+        return {
+            month: _.isNull(MONTH) ? '' : parts[MONTH],
+            day: _.isNull(DAY) ? '' : parts[DAY],
+            year: _.isNull(YEAR) ? '' : parts[YEAR],
+        };
+    }
     getFieldValue(name) {
         const parts = this.dataValue ? this.dataValue.split('/') : [];
         let val = 0;
@@ -550,13 +597,26 @@ export default class DayComponent extends Field {
     }
     isPartialDay(value) {
         if (!value) {
-            return false;
+            return true;
         }
         const [DAY, MONTH, YEAR] = this.component.dayFirst ? [0, 1, 2] : [1, 0, 2];
         const values = value.split('/');
+        if (values.length < 3) {
+            return true;
+        }
         return (values[DAY] === '00' || values[MONTH] === '00' || values[YEAR] === '0000');
     }
     getValidationFormat() {
-        return this.dayFirst ? 'DD-MM-YYYY' : 'MM-DD-YYYY';
+        let validationFormat = this.dayFirst ? 'DD-MM-YYYY' : 'MM-DD-YYYY';
+        if (this.fields?.day?.hide) {
+            validationFormat = validationFormat.replace('DD-', '');
+        }
+        if (this.fields?.month?.hide) {
+            validationFormat = validationFormat.replace('MM-', '');
+        }
+        if (this.fields?.year?.hide) {
+            validationFormat = validationFormat.replace('-YYYY', '');
+        }
+        return validationFormat;
     }
 }

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

@@ -14,6 +14,7 @@ declare const _default: ({
     input?: undefined;
     placeholder?: undefined;
     tooltip?: undefined;
+    onChange?: undefined;
 } | {
     weight: number;
     type: string;
@@ -25,16 +26,32 @@ declare const _default: ({
     wieght?: undefined;
     datasrc?: undefined;
     data?: undefined;
+    onChange?: undefined;
 } | {
     weight: number;
     type: string;
     label: string;
     tooltip: string;
     key: string;
+    onChange: ({ data }: {
+        data: any;
+    }) => void;
     input: boolean;
     wieght?: undefined;
     datasrc?: undefined;
     data?: undefined;
     placeholder?: undefined;
+} | {
+    weight: number;
+    type: string;
+    label: string;
+    tooltip: string;
+    key: string;
+    input: boolean;
+    wieght?: undefined;
+    datasrc?: undefined;
+    data?: undefined;
+    placeholder?: undefined;
+    onChange?: undefined;
 })[];
 export default _default;

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

@@ -1,3 +1,4 @@
+import _ from 'lodash';
 export default [
     {
         wieght: 200,
@@ -33,6 +34,21 @@ export default [
         label: 'Hidden',
         tooltip: 'Hide the Day part of the component.',
         key: 'fields.day.hide',
+        onChange: ({ data }) => {
+            if (data.defaultValue) {
+                const defaultValueParts = data.defaultValue.split('/');
+                if (!data.fields.day.hide && defaultValueParts.length !== 3) {
+                    const newDefaultValue = ['00'];
+                    if (!data.fields.month.hide) {
+                        data.dayFirst ? newDefaultValue.push(defaultValueParts[0]) : newDefaultValue.unshift(defaultValueParts[0]);
+                    }
+                    if (!data.fields.year.hide) {
+                        newDefaultValue.push(defaultValueParts[1]);
+                    }
+                    _.set(data, 'defaultValue', newDefaultValue.join('/'));
+                }
+            }
+        },
         input: true
     },
     {

package/lib/mjs/components/day/editForm/Day.edit.month.d.ts

@@ -14,6 +14,7 @@ declare const _default: ({
     input?: undefined;
     placeholder?: undefined;
     tooltip?: undefined;
+    onChange?: undefined;
 } | {
     weight: number;
     type: string;
@@ -25,12 +26,16 @@ declare const _default: ({
     wieght?: undefined;
     datasrc?: undefined;
     data?: undefined;
+    onChange?: undefined;
 } | {
     weight: number;
     type: string;
     label: string;
     tooltip: string;
     key: string;
+    onChange: ({ data }: {
+        data: any;
+    }) => void;
     input: boolean;
     wieght?: undefined;
     datasrc?: undefined;

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

@@ -1,3 +1,4 @@
+import _ from 'lodash';
 export default [
     {
         wieght: 200,
@@ -33,6 +34,21 @@ export default [
         label: 'Hidden',
         tooltip: 'Hide the Month part of the component.',
         key: 'fields.month.hide',
+        onChange: ({ data }) => {
+            if (data.defaultValue) {
+                const defaultValueParts = data.defaultValue.split('/');
+                if (!data.fields.month.hide && defaultValueParts.length !== 3) {
+                    const newDefaultValue = ['00'];
+                    if (!data.fields.day.hide) {
+                        data.dayFirst ? newDefaultValue.unshift(defaultValueParts[0]) : newDefaultValue.push(defaultValueParts[0]);
+                    }
+                    if (!data.fields.year.hide) {
+                        newDefaultValue.push(defaultValueParts[1]);
+                    }
+                    _.set(data, 'defaultValue', newDefaultValue.join('/'));
+                }
+            }
+        },
         input: true
     },
 ];

package/lib/mjs/components/day/editForm/Day.edit.year.d.ts

@@ -14,6 +14,7 @@ declare const _default: ({
     input?: undefined;
     placeholder?: undefined;
     tooltip?: undefined;
+    onChange?: undefined;
 } | {
     weight: number;
     type: string;
@@ -25,12 +26,16 @@ declare const _default: ({
     wieght?: undefined;
     datasrc?: undefined;
     data?: undefined;
+    onChange?: undefined;
 } | {
     weight: number;
     type: string;
     label: string;
     tooltip: string;
     key: string;
+    onChange: ({ data }: {
+        data: any;
+    }) => void;
     input: boolean;
     wieght?: undefined;
     datasrc?: undefined;

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

@@ -1,3 +1,4 @@
+import _ from 'lodash';
 export default [
     {
         wieght: 200,
@@ -51,6 +52,15 @@ export default [
         label: 'Hidden',
         tooltip: 'Hide the Year part of the component.',
         key: 'fields.year.hide',
+        onChange: ({ data }) => {
+            if (data.defaultValue) {
+                const defaultValueParts = data.defaultValue.split('/');
+                if (!data.fields.month.hide && defaultValueParts.length !== 3) {
+                    defaultValueParts.push('0000');
+                    _.set(data, 'defaultValue', defaultValueParts.join('/'));
+                }
+            }
+        },
         input: true
     },
 ];

package/lib/mjs/components/file/File.d.ts

@@ -38,7 +38,7 @@ export default class FileComponent extends Field {
     get hasTypes(): any;
     _fileBrowseHidden: any;
     get shouldSyncFiles(): boolean;
-    get autoSync(): any;
+    get autoSync(): boolean;
     get columnsSize(): {
         name: number;
         size: number;

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

@@ -140,7 +140,9 @@ export default class FileComponent extends Field {
         return Boolean(this.filesToSync.filesToDelete.length || this.filesToSync.filesToUpload.length);
     }
     get autoSync() {
-        return _.get(this, 'component.autoSync', false);
+        // Disable autoSync for now
+        return false;
+        // return _.get(this, 'component.autoSync', false);
     }
     get columnsSize() {
         const actionsColumn = this.disabled ? 0 : this.autoSync ? 2 : 1;

package/lib/mjs/components/file/editForm/File.edit.display.js

@@ -4,7 +4,7 @@ export default [
         ignore: true
     },
     {
-        type: 'checkbox',
+        type: 'hidden',
         label: 'Files Synchronization feature',
         tooltip: 'Enable ability to control files synchronization. Files will be auto synced before submit.',
         key: 'autoSync',

package/lib/mjs/components/html/HTML.js

@@ -5,7 +5,7 @@ export default class HTMLComponent extends Component {
         return Component.schema({
             label: 'HTML',
             type: 'htmlelement',
-            tag: 'p',
+            tag: 'div',
             attrs: [],
             content: '',
             input: false,

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

@@ -8,26 +8,10 @@ export default class RadioComponent extends ListComponent {
         schema: any;
     };
     static get conditionOperatorsSettings(): {
-        valueComponent(classComp: any): {
-            type: string;
-            dataSrc: string;
-            valueProperty: string;
-            dataType: any;
-            data: {
-                custom(): any;
-            };
-        };
+        valueComponent(classComp: any): any;
     };
     static get serverConditionSettings(): {
-        valueComponent(classComp: any): {
-            type: string;
-            dataSrc: string;
-            valueProperty: string;
-            dataType: any;
-            data: {
-                custom: string;
-            };
-        };
+        valueComponent(classComp: any): any;
     };
     static savedValueTypes(schema: any): any[];
     constructor(component: any, options: any, data: any);

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

@@ -30,35 +30,26 @@ export default class RadioComponent extends ListComponent {
         return {
             ...super.conditionOperatorsSettings,
             valueComponent(classComp) {
-                return {
-                    type: 'select',
-                    dataSrc: 'custom',
-                    valueProperty: 'value',
-                    dataType: classComp.dataType || '',
-                    data: {
-                        custom() {
-                            return classComp.values;
+                const isValuesSrc = !classComp.dataSrc || classComp.dataSrc === 'values';
+                return isValuesSrc
+                    ? {
+                        type: 'select',
+                        dataSrc: 'custom',
+                        valueProperty: 'value',
+                        dataType: classComp.dataType || '',
+                        data: {
+                            custom: `values = ${classComp && classComp.values ? JSON.stringify(classComp.values) : []}`,
                         }
-                    },
-                };
+                    }
+                    : {
+                        ...classComp,
+                        type: 'select',
+                    };
             }
         };
     }
     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) : []}`,
-                    },
-                };
-            },
-        };
+        return RadioComponent.conditionOperatorsSettings;
     }
     static savedValueTypes(schema) {
         const { boolean, string, number, object, array } = componentValueTypes;
@@ -221,7 +212,7 @@ export default class RadioComponent extends ListComponent {
         if (!boolValue(setting) || !value) {
             return true;
         }
-        const values = this.component.values;
+        const values = this.component.dataSrc === 'values' ? this.component.values : this.loadedOptions;
         if (values) {
             return values.findIndex(({ value: optionValue }) => this.normalizeValue(optionValue) === value) !== -1;
         }
@@ -264,6 +255,16 @@ export default class RadioComponent extends ListComponent {
         if (method.toUpperCase() === 'GET') {
             body = null;
         }
+        const limit = this.component.limit || 100;
+        const skip = this.isScrollLoading ? this.selectOptions.length : 0;
+        // Allow for url interpolation.
+        url = this.sanitize(this.interpolate(url, {
+            formioBase: Formio.getBaseUrl(),
+            search,
+            limit,
+            skip,
+            page: Math.abs(Math.floor(skip / limit))
+        }), this.shouldSanitizeValue);
         // Set ignoreCache if it is
         options.ignoreCache = this.component.ignoreCache;
         // Make the request.

package/lib/mjs/components/recaptcha/ReCaptcha.d.ts

@@ -1,6 +1,12 @@
 export default class ReCaptchaComponent extends Component {
     static get builderInfo(): {};
     static savedValueTypes(): never[];
+    static get conditionOperatorsSettings(): {
+        operators: string[];
+    };
+    static get serverConditionSettings(): {
+        operators: string[];
+    };
     render(): string;
     recaptchaResult: any;
     createInput(): void;

package/lib/mjs/components/recaptcha/ReCaptcha.js

@@ -17,6 +17,15 @@ export default class ReCaptchaComponent extends Component {
     static savedValueTypes() {
         return [];
     }
+    static get conditionOperatorsSettings() {
+        return {
+            ...super.conditionOperatorsSettings,
+            operators: ['isEmpty', 'isNotEmpty'],
+        };
+    }
+    static get serverConditionSettings() {
+        return ReCaptchaComponent.conditionOperatorsSettings;
+    }
     render() {
         this.recaptchaResult = null;
         if (this.builderMode) {