@formio/js 5.0.0-rc.20 → 5.0.0-rc.21

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

@@ -1,5 +1,5 @@
 import Field from '../_classes/field/Field';
-import { uniqueName } from '../../utils/utils';
+import { componentValueTypes, getComponentSavedTypes, uniqueName } from '../../utils/utils';
 import download from 'downloadjs';
 import _ from 'lodash';
 import fileProcessor from '../../providers/processor/fileProcessor';
@@ -54,11 +54,18 @@ export default class FileComponent extends Field {
         };
     }
     static get serverConditionSettings() {
+        return FileComponent.conditionOperatorsSettings;
+    }
+    static get conditionOperatorsSettings() {
         return {
-            ...super.serverConditionSettings,
+            ...super.conditionOperatorsSettings,
             operators: ['isEmpty', 'isNotEmpty'],
         };
     }
+    static savedValueTypes(schema) {
+        schema = schema || {};
+        return getComponentSavedTypes(schema) || [componentValueTypes.object];
+    }
     init() {
         super.init();
         webViewCamera = navigator.camera || Camera;
@@ -353,8 +360,10 @@ export default class FileComponent extends Field {
         this.refs.fileStatusRemove.forEach((fileStatusRemove, index) => {
             this.addEventListener(fileStatusRemove, 'click', (event) => {
                 event.preventDefault();
-                if (this.abortUpload) {
-                    this.abortUpload();
+                const fileUpload = this.statuses[index];
+                _.pull(this.filesUploading, fileUpload.originalName);
+                if (fileUpload.abort) {
+                    fileUpload.abort();
                 }
                 this.statuses.splice(index, 1);
                 this.redraw();
@@ -560,6 +569,7 @@ export default class FileComponent extends Field {
                 const fileName = uniqueName(file.name, this.component.fileNameTemplate, this.evalContext());
                 const escapedFileName = file.name ? file.name.replaceAll('<', '&lt;').replaceAll('>', '&gt;') : file.name;
                 const fileUpload = {
+                    abort: () => null,
                     originalName: escapedFileName,
                     name: fileName,
                     size: file.size,
@@ -678,7 +688,7 @@ export default class FileComponent extends Field {
                             }
                         }
                     }
-                    fileUpload.message = this.t('Starting upload.');
+                    fileUpload.message = this.t('Starting upload...');
                     this.redraw();
                     const filePromise = fileService.uploadFile(storage, processedFile || file, fileName, dir, 
                     // Progress callback
@@ -691,9 +701,7 @@ export default class FileComponent extends Field {
                     // Upload start callback
                     () => {
                         this.emit('fileUploadingStart', filePromise);
-                    }, 
-                    // Abort upload callback
-                    (abort) => this.abortUpload = abort).then((fileInfo) => {
+                    }, (abort) => fileUpload.abort = abort).then((fileInfo) => {
                         const index = this.statuses.indexOf(fileUpload);
                         if (index !== -1) {
                             this.statuses.splice(index, 1);

package/lib/mjs/components/form/Form.d.ts

@@ -7,6 +7,7 @@ export default class FormComponent extends Component {
         weight: number;
         schema: any;
     };
+    static savedValueTypes(): string[];
     init(): any;
     formObj: any;
     valueChanged: boolean | undefined;

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

@@ -2,7 +2,7 @@ import _ from 'lodash';
 import Component from '../_classes/component/Component';
 import ComponentModal from '../_classes/componentModal/ComponentModal';
 import EventEmitter from 'eventemitter3';
-import { isMongoId, eachComponent, getStringFromComponentPath, getArrayFromComponentPath } from '../../utils/utils';
+import { isMongoId, eachComponent, getStringFromComponentPath, getArrayFromComponentPath, componentValueTypes } from '../../utils/utils';
 import { Formio } from '../../Formio';
 import Form from '../../Form';
 export default class FormComponent extends Component {
@@ -28,6 +28,9 @@ export default class FormComponent extends Component {
             schema: FormComponent.schema()
         };
     }
+    static savedValueTypes() {
+        return [componentValueTypes.object];
+    }
     init() {
         super.init();
         this.formObj = {

package/lib/mjs/components/html/HTML.d.ts

@@ -8,6 +8,7 @@ export default class HTMLComponent extends Component {
         showPreview: boolean;
         schema: any;
     };
+    static savedValueTypes(): never[];
     get content(): any;
     get singleTags(): string[];
     checkRefreshOn(changed: any): void;

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

@@ -23,6 +23,9 @@ export default class HTMLComponent extends Component {
             schema: HTMLComponent.schema()
         };
     }
+    static savedValueTypes() {
+        return [];
+    }
     get defaultSchema() {
         return HTMLComponent.schema();
     }

package/lib/mjs/components/number/Number.d.ts

@@ -8,9 +8,28 @@ export default class NumberComponent extends Input {
         schema: any;
     };
     static get serverConditionSettings(): {
-        operators: string[];
+        operators: any[];
         valueComponent(classComp: any): any;
+        constructor: Function;
+        toString(): string;
+        toLocaleString(): string;
+        valueOf(): Object;
+        hasOwnProperty(v: PropertyKey): boolean;
+        isPrototypeOf(v: Object): boolean;
+        propertyIsEnumerable(v: PropertyKey): boolean;
     };
+    static get conditionOperatorsSettings(): {
+        operators: any[];
+        valueComponent(classComp: any): any;
+        constructor: Function;
+        toString(): string;
+        toLocaleString(): string;
+        valueOf(): Object;
+        hasOwnProperty(v: PropertyKey): boolean;
+        isPrototypeOf(v: Object): boolean;
+        propertyIsEnumerable(v: PropertyKey): boolean;
+    };
+    static savedValueTypes(schema: any): string[];
     constructor(...args: any[]);
     validators: string[];
     delimiter: any;

package/lib/mjs/components/number/Number.js

@@ -1,8 +1,8 @@
 import { createNumberMask } from '@formio/text-mask-addons';
 import { conformToMask, maskInput } from '@formio/vanilla-text-mask';
 import _ from 'lodash';
-import { getNumberDecimalLimit, getNumberSeparators } from '../../utils/utils';
 import Input from '../_classes/input/Input';
+import { getNumberSeparators, getNumberDecimalLimit, componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
 export default class NumberComponent extends Input {
     static schema(...extend) {
         return Input.schema({
@@ -28,22 +28,21 @@ export default class NumberComponent extends Input {
         };
     }
     static get serverConditionSettings() {
+        return NumberComponent.conditionOperatorsSettings;
+    }
+    static get conditionOperatorsSettings() {
         return {
-            operators: [
-                'isEqual',
-                'isNotEqual',
-                'isEmpty',
-                'isNotEmpty',
-                'greaterThan',
-                'greaterThanOrEqual',
-                'lessThan',
-                'lessThanOrEqual',
-            ],
+            ...super.conditionOperatorsSettings,
+            operators: [...super.conditionOperatorsSettings.operators, 'lessThan', 'greaterThan', 'lessThanOrEqual', 'greaterThanOrEqual'],
             valueComponent(classComp) {
                 return { ...classComp, type: 'number' };
-            },
+            }
         };
     }
+    static savedValueTypes(schema) {
+        schema = schema || {};
+        return getComponentSavedTypes(schema) || [componentValueTypes.number];
+    }
     constructor(...args) {
         super(...args);
         this.validators = this.validators.concat(['min', 'max']);

package/lib/mjs/components/panel/Panel.d.ts

@@ -7,6 +7,7 @@ export default class PanelComponent extends NestedComponent {
         weight: number;
         schema: any;
     };
+    static savedValueTypes(): never[];
     constructor(...args: any[]);
     noField: boolean;
     getComponent(path: any, fn: any, originalPath: any): Object;

package/lib/mjs/components/panel/Panel.js

@@ -33,6 +33,9 @@ export default class PanelComponent extends NestedComponent {
     get templateName() {
         return 'panel';
     }
+    static savedValueTypes() {
+        return [];
+    }
     constructor(...args) {
         super(...args);
         this.noField = true;

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

@@ -7,6 +7,25 @@ export default class RadioComponent extends ListComponent {
         documentation: string;
         schema: any;
     };
+    static get conditionOperatorsSettings(): {
+        valueComponent(classComp: any): {
+            type: string;
+            dataSrc: string;
+            valueProperty: string;
+            dataType: any;
+            data: {
+                custom(): any;
+            };
+        };
+        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;
     get inputInfo(): {

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

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import ListComponent from '../_classes/list/ListComponent';
 import { Formio } from '../../Formio';
-import { boolValue } from '../../utils/utils';
+import { boolValue, componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
 export default class RadioComponent extends ListComponent {
     static schema(...extend) {
         return ListComponent.schema({
@@ -26,6 +26,39 @@ export default class RadioComponent extends ListComponent {
             schema: RadioComponent.schema()
         };
     }
+    static get conditionOperatorsSettings() {
+        return {
+            ...super.conditionOperatorsSettings,
+            valueComponent(classComp) {
+                return {
+                    type: 'select',
+                    dataSrc: 'custom',
+                    valueProperty: 'value',
+                    dataType: classComp.dataType || '',
+                    data: {
+                        custom() {
+                            return classComp.values;
+                        }
+                    },
+                };
+            }
+        };
+    }
+    static savedValueTypes(schema) {
+        const { boolean, string, number, object, array } = componentValueTypes;
+        const { dataType } = schema;
+        const types = getComponentSavedTypes(schema);
+        if (types) {
+            return types;
+        }
+        if (dataType === 'object') {
+            return [object, array];
+        }
+        if (componentValueTypes[dataType]) {
+            return [componentValueTypes[dataType]];
+        }
+        return [boolean, string, number, object, array];
+    }
     constructor(component, options, data) {
         super(component, options, data);
         this.previousValue = this.dataValue || null;

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

@@ -7,6 +7,7 @@ export default class ReCaptchaComponent extends Component {
         weight: number;
         schema: any;
     };
+    static savedValueTypes(): never[];
     render(): any;
     recaptchaResult: any;
     createInput(): void;

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

@@ -21,6 +21,9 @@ export default class ReCaptchaComponent extends Component {
             schema: ReCaptchaComponent.schema()
         };
     }
+    static savedValueTypes() {
+        return [];
+    }
     render() {
         this.recaptchaResult = null;
         if (this.builderMode) {

package/lib/mjs/components/select/Select.d.ts

@@ -9,8 +9,25 @@ export default class SelectComponent extends ListComponent {
     };
     static get serverConditionSettings(): {
         valueComponent(classComp: any): any;
-        operators: string[];
+        constructor: Function;
+        toString(): string;
+        toLocaleString(): string;
+        valueOf(): Object;
+        hasOwnProperty(v: PropertyKey): boolean;
+        isPrototypeOf(v: Object): boolean;
+        propertyIsEnumerable(v: PropertyKey): boolean;
     };
+    static get conditionOperatorsSettings(): {
+        valueComponent(classComp: any): any;
+        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[];
     templateData: {} | undefined;
     triggerUpdate: ((...args: any[]) => any) | undefined;
     set itemsLoaded(arg: any);
@@ -40,6 +57,7 @@ export default class SelectComponent extends ListComponent {
     get isSelectResource(): boolean;
     get itemsFromUrl(): boolean;
     get isInfiniteScrollProvided(): boolean;
+    get shouldInitialLoad(): any;
     isEntireObjectDisplay(): boolean;
     selectValueAndLabel(data: any): {
         value: any;

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

@@ -2,7 +2,7 @@ import _ from 'lodash';
 import { Formio } from '../../Formio';
 import ListComponent from '../_classes/list/ListComponent';
 import Form from '../../Form';
-import { getRandomComponentId, boolValue, isPromise } from '../../utils/utils';
+import { getRandomComponentId, boolValue, isPromise, componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
 import Choices from '../../utils/ChoicesWrapper';
 export default class SelectComponent extends ListComponent {
     static schema(...extend) {
@@ -54,13 +54,34 @@ export default class SelectComponent extends ListComponent {
         };
     }
     static get serverConditionSettings() {
+        return SelectComponent.conditionOperatorsSettings;
+    }
+    static get conditionOperatorsSettings() {
         return {
-            ...super.serverConditionSettings,
+            ...super.conditionOperatorsSettings,
             valueComponent(classComp) {
                 return { ...classComp, type: 'select' };
-            },
+            }
         };
     }
+    static savedValueTypes(schema) {
+        const { boolean, string, number, object, array } = componentValueTypes;
+        const { dataType, reference } = schema;
+        const types = getComponentSavedTypes(schema);
+        if (types) {
+            return types;
+        }
+        if (reference) {
+            return [object];
+        }
+        if (dataType === 'object') {
+            return [object, array];
+        }
+        if (componentValueTypes[dataType]) {
+            return [componentValueTypes[dataType]];
+        }
+        return [boolean, string, number, object, array];
+    }
     init() {
         super.init();
         this.templateData = {};
@@ -172,6 +193,15 @@ export default class SelectComponent extends ListComponent {
     get shouldDisabled() {
         return super.shouldDisabled || this.parentDisabled;
     }
+    get shouldInitialLoad() {
+        if (this.component.widget === 'html5' &&
+            this.isEntireObjectDisplay() &&
+            this.component.searchField &&
+            this.dataValue) {
+            return false;
+        }
+        return super.shouldLoad;
+    }
     isEntireObjectDisplay() {
         return this.component.dataSrc === 'resource' && this.valueProperty === 'data';
     }
@@ -482,7 +512,11 @@ export default class SelectComponent extends ListComponent {
         });
         // Add search capability.
         if (this.component.searchField && search) {
-            const searchValue = Array.isArray(search) ? search.join(',') : search;
+            const searchValue = Array.isArray(search)
+                ? search.join(',')
+                : typeof search === 'object'
+                    ? JSON.stringify(search)
+                    : search;
             query[this.component.searchField] = this.component.searchField.endsWith('__regex')
                 ? _.escapeRegExp(searchValue)
                 : searchValue;
@@ -1195,7 +1229,7 @@ export default class SelectComponent extends ListComponent {
             !this.active &&
             !this.selectOptions.length &&
             hasValue &&
-            this.shouldLoad &&
+            this.shouldInitialLoad &&
             this.visible && (this.component.searchField || this.component.valueProperty);
     }
     setChoicesValue(value, hasPreviousValue, flags = {}) {

package/lib/mjs/components/selectboxes/SelectBoxes.d.ts

@@ -9,8 +9,33 @@ export default class SelectBoxesComponent extends RadioComponent {
                 custom: string;
             };
         };
-        operators: string[];
+        constructor: Function;
+        toString(): string;
+        toLocaleString(): string;
+        valueOf(): Object;
+        hasOwnProperty(v: PropertyKey): boolean;
+        isPrototypeOf(v: Object): boolean;
+        propertyIsEnumerable(v: PropertyKey): boolean;
     };
+    static get conditionOperatorsSettings(): {
+        valueComponent(classComp: any): {
+            type: string;
+            dataSrc: string;
+            valueProperty: string;
+            valueType: string;
+            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): string[];
     constructor(...args: any[]);
     validators: string[];
     get emptyValue(): any;

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

@@ -1,4 +1,5 @@
 import _ from 'lodash';
+import { componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
 import RadioComponent from '../radio/Radio';
 export default class SelectBoxesComponent extends RadioComponent {
     static schema(...extend) {
@@ -20,8 +21,11 @@ export default class SelectBoxesComponent extends RadioComponent {
         };
     }
     static get serverConditionSettings() {
+        return SelectBoxesComponent.conditionOperatorsSettings;
+    }
+    static get conditionOperatorsSettings() {
         return {
-            ...super.serverConditionSettings,
+            ...super.conditionOperatorsSettings,
             valueComponent(classComp) {
                 return {
                     type: 'select',
@@ -35,6 +39,9 @@ export default class SelectBoxesComponent extends RadioComponent {
             }
         };
     }
+    static savedValueTypes(schema) {
+        return getComponentSavedTypes(schema) || [componentValueTypes.object];
+    }
     constructor(...args) {
         super(...args);
         this.validators = this.validators.concat('minSelectedCount', 'maxSelectedCount', 'availableValueProperty');

package/lib/mjs/components/signature/Signature.d.ts

@@ -7,6 +7,27 @@ export default class SignatureComponent extends Input {
         documentation: string;
         schema: any;
     };
+    static get serverConditionSettings(): {
+        operators: string[];
+        constructor: Function;
+        toString(): string;
+        toLocaleString(): string;
+        valueOf(): Object;
+        hasOwnProperty(v: PropertyKey): boolean;
+        isPrototypeOf(v: Object): boolean;
+        propertyIsEnumerable(v: PropertyKey): boolean;
+    };
+    static get conditionOperatorsSettings(): {
+        operators: 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): string[];
     currentWidth: any;
     scale: any;
     ratio: number | undefined;

package/lib/mjs/components/signature/Signature.js

@@ -2,6 +2,7 @@ import SignaturePad from 'signature_pad';
 import _ResizeObserver from 'resize-observer-polyfill';
 import Input from '../_classes/input/Input';
 import _ from 'lodash';
+import { componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
 export default class SignatureComponent extends Input {
     static schema(...extend) {
         return Input.schema({
@@ -29,11 +30,18 @@ export default class SignatureComponent extends Input {
         };
     }
     static get serverConditionSettings() {
+        return SignatureComponent.conditionOperatorsSettings;
+    }
+    static get conditionOperatorsSettings() {
         return {
-            ...super.serverConditionSettings,
+            ...super.conditionOperatorsSettings,
             operators: ['isEmpty', 'isNotEmpty'],
         };
     }
+    static savedValueTypes(schema) {
+        schema = schema || {};
+        return getComponentSavedTypes(schema) || [componentValueTypes.string];
+    }
     init() {
         super.init();
         this.currentWidth = 0;

package/lib/mjs/components/survey/Survey.d.ts

@@ -7,6 +7,27 @@ export default class SurveyComponent extends Field {
         documentation: string;
         schema: any;
     };
+    static get serverConditionSettings(): {
+        operators: string[];
+        constructor: Function;
+        toString(): string;
+        toLocaleString(): string;
+        valueOf(): Object;
+        hasOwnProperty(v: PropertyKey): boolean;
+        isPrototypeOf(v: Object): boolean;
+        propertyIsEnumerable(v: PropertyKey): boolean;
+    };
+    static get conditionOperatorsSettings(): {
+        operators: 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): string[];
     render(): any;
     setValue(value: any, flags?: {}): boolean;
     get emptyValue(): {};

package/lib/mjs/components/survey/Survey.js

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import Field from '../_classes/field/Field';
-import { boolValue } from '../../utils/utils';
+import { boolValue, componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
 export default class SurveyComponent extends Field {
     static schema(...extend) {
         return Field.schema({
@@ -22,11 +22,17 @@ export default class SurveyComponent extends Field {
         };
     }
     static get serverConditionSettings() {
+        return SurveyComponent.conditionOperatorsSettings;
+    }
+    static get conditionOperatorsSettings() {
         return {
-            ...super.serverConditionSettings,
+            ...super.conditionOperatorsSettings,
             operators: ['isEmpty', 'isNotEmpty'],
         };
     }
+    static savedValueTypes(schema) {
+        return getComponentSavedTypes(schema) || [componentValueTypes.object];
+    }
     get defaultSchema() {
         return SurveyComponent.schema();
     }

package/lib/mjs/components/table/Table.d.ts

@@ -11,6 +11,7 @@ export default class TableComponent extends NestedComponent {
         showPreview: boolean;
         schema: any;
     };
+    static savedValueTypes(): never[];
     constructor(...args: any[]);
     get cellClassName(): string;
     get tableKey(): string;

package/lib/mjs/components/table/Table.js

@@ -43,6 +43,9 @@ export default class TableComponent extends NestedComponent {
             schema: TableComponent.schema()
         };
     }
+    static savedValueTypes() {
+        return [];
+    }
     get defaultSchema() {
         return TableComponent.schema();
     }

package/lib/mjs/components/tabs/Tabs.d.ts

@@ -8,6 +8,7 @@ export default class TabsComponent extends NestedComponent {
         showPreview: boolean;
         schema: any;
     };
+    static savedValueTypes(): never[];
     constructor(...args: any[]);
     get tabKey(): string;
     get tabLikey(): string;

package/lib/mjs/components/tabs/Tabs.js

@@ -30,6 +30,9 @@ export default class TabsComponent extends NestedComponent {
             schema: TabsComponent.schema(),
         };
     }
+    static savedValueTypes() {
+        return [];
+    }
     get defaultSchema() {
         return TabsComponent.schema();
     }

package/lib/mjs/components/tags/Tags.d.ts

@@ -7,6 +7,27 @@ export default class TagsComponent extends Input {
         weight: number;
         schema: any;
     };
+    static get serverConditionSettings(): {
+        operators: any[];
+        constructor: Function;
+        toString(): string;
+        toLocaleString(): string;
+        valueOf(): Object;
+        hasOwnProperty(v: PropertyKey): boolean;
+        isPrototypeOf(v: Object): boolean;
+        propertyIsEnumerable(v: PropertyKey): boolean;
+    };
+    static get conditionOperatorsSettings(): {
+        operators: any[];
+        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[];
     get emptyValue(): "" | never[];
     get delimiter(): any;
     attachElement(element: any, index: any): void;