@formio/js 5.0.0-dev.5723.99bf27e → 5.0.0-dev.5725.d52e1c4

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

@@ -4,6 +4,7 @@ export default class PanelComponent extends NestedComponent {
         icon: string;
         group: string;
         documentation: string;
+        showPreview: boolean;
         weight: number;
         schema: any;
     };

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

@@ -22,6 +22,7 @@ export default class PanelComponent extends NestedComponent {
             icon: 'list-alt',
             group: 'layout',
             documentation: '/userguide/form-building/layout-components#panel',
+            showPreview: false,
             weight: 30,
             schema: PanelComponent.schema()
         };

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;
@@ -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.
@@ -295,14 +296,15 @@ export default class RadioComponent extends ListComponent {
     setItems(items) {
         const listData = [];
         items?.forEach((item, i) => {
+            const valueAtProperty = _.get(item, this.component.valueProperty);
             this.loadedOptions[i] = {
-                value: this.component.valueProperty ? item[this.component.valueProperty] : item,
-                label: this.component.valueProperty ? this.itemTemplate(item, item[this.component.valueProperty]) : this.itemTemplate(item, item, i)
+                value: this.component.valueProperty ? valueAtProperty : item,
+                label: this.component.valueProperty ? this.itemTemplate(item, valueAtProperty) : this.itemTemplate(item, item, i)
             };
-            listData.push(this.templateData[this.component.valueProperty ? item[this.component.valueProperty] : i]);
-            if ((this.component.valueProperty || !this.isRadio) && (_.isUndefined(item[this.component.valueProperty]) ||
-                (!this.isRadio && _.isObject(item[this.component.valueProperty])) ||
-                (!this.isRadio && _.isBoolean(item[this.component.valueProperty])))) {
+            listData.push(this.templateData[this.component.valueProperty ? valueAtProperty : i]);
+            if ((this.component.valueProperty || !this.isRadio) && (_.isUndefined(valueAtProperty) ||
+                (!this.isRadio && _.isObject(valueAtProperty)) ||
+                (!this.isRadio && _.isBoolean(valueAtProperty)))) {
                 this.loadedOptions[i].invalid = true;
             }
         });

package/lib/mjs/components/radio/fixtures/comp12.d.ts

@@ -0,0 +1,29 @@
+declare namespace _default {
+    let components: {
+        label: string;
+        optionsLabelPosition: string;
+        tableView: boolean;
+        dataSrc: string;
+        values: {
+            label: string;
+            value: string;
+            shortcut: string;
+        }[];
+        valueProperty: string;
+        validateWhenHidden: boolean;
+        key: string;
+        type: string;
+        data: {
+            url: string;
+            headers: {
+                key: string;
+                value: string;
+            }[];
+        };
+        template: string;
+        authenticate: boolean;
+        input: boolean;
+        inputType: string;
+    }[];
+}
+export default _default;

package/lib/mjs/components/radio/fixtures/comp12.js

@@ -0,0 +1,34 @@
+export default {
+    components: [
+        {
+            "label": "Select Boxes",
+            "optionsLabelPosition": "right",
+            "tableView": false,
+            "dataSrc": "url",
+            "values": [
+                {
+                    "label": "",
+                    "value": "",
+                    "shortcut": ""
+                }
+            ],
+            "valueProperty": "data.name",
+            "validateWhenHidden": false,
+            "key": "selectBoxes",
+            "type": "selectboxes",
+            "data": {
+                "url": "https://remote-dev.form.io/projectId/name/submission",
+                "headers": [
+                    {
+                        "key": "",
+                        "value": ""
+                    }
+                ]
+            },
+            "template": "<span>{{ item.data.name }}</span>",
+            "authenticate": true,
+            "input": true,
+            "inputType": "checkbox"
+        }
+    ]
+};

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

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

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

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

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) {

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

@@ -9,9 +9,47 @@ export default class SelectComponent extends ListComponent {
     };
     static get serverConditionSettings(): {
         valueComponent(classComp: any): any;
+        dataTypeOperators: {
+            number: string[];
+        };
+        dataTypeValueComponents: {
+            number: {
+                lessThan: () => {
+                    type: string;
+                };
+                greaterThan: () => {
+                    type: string;
+                };
+                lessThanOrEqual: () => {
+                    type: string;
+                };
+                greaterThanOrEqual: () => {
+                    type: string;
+                };
+            };
+        };
     };
     static get conditionOperatorsSettings(): {
         valueComponent(classComp: any): any;
+        dataTypeOperators: {
+            number: string[];
+        };
+        dataTypeValueComponents: {
+            number: {
+                lessThan: () => {
+                    type: string;
+                };
+                greaterThan: () => {
+                    type: string;
+                };
+                lessThanOrEqual: () => {
+                    type: string;
+                };
+                greaterThanOrEqual: () => {
+                    type: string;
+                };
+            };
+        };
     };
     static savedValueTypes(schema: any): any[];
     templateData: {} | undefined;

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

@@ -57,6 +57,7 @@ export default class SelectComponent extends ListComponent {
         return SelectComponent.conditionOperatorsSettings;
     }
     static get conditionOperatorsSettings() {
+        const numberType = () => ({ type: 'number' });
         return {
             ...super.conditionOperatorsSettings,
             valueComponent(classComp) {
@@ -73,7 +74,18 @@ export default class SelectComponent extends ListComponent {
           `;
                 }
                 return valueComp;
-            }
+            },
+            dataTypeOperators: {
+                number: ['lessThan', 'greaterThan', 'lessThanOrEqual', 'greaterThanOrEqual'],
+            },
+            dataTypeValueComponents: {
+                number: {
+                    lessThan: numberType,
+                    greaterThan: numberType,
+                    lessThanOrEqual: numberType,
+                    greaterThanOrEqual: numberType,
+                },
+            },
         };
     }
     static savedValueTypes(schema) {
@@ -526,13 +538,13 @@ export default class SelectComponent extends ListComponent {
             skip,
         };
         // Allow for url interpolation.
-        url = this.interpolate(url, {
+        url = this.sanitize(this.interpolate(url, {
             formioBase: Formio.getBaseUrl(),
             search,
             limit,
             skip,
             page: Math.abs(Math.floor(skip / limit))
-        });
+        }), this.shouldSanitizeValue);
         // Add search capability.
         if (this.component.searchField && search) {
             const searchValue = Array.isArray(search)
@@ -1581,8 +1593,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

@@ -0,0 +1,59 @@
+declare namespace _default {
+    let components: ({
+        label: string;
+        tableView: boolean;
+        modal: boolean;
+        rowDrafts: boolean;
+        key: string;
+        type: string;
+        displayAsTable: boolean;
+        input: boolean;
+        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;
+        showValidations: boolean;
+        tableView: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        saveOnEnter: boolean;
+        modal?: undefined;
+        rowDrafts?: undefined;
+        displayAsTable?: undefined;
+        components?: undefined;
+    })[];
+}
+export default _default;

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

@@ -0,0 +1,64 @@
+export default {
+    "components": [
+        {
+            "label": "Edit Grid",
+            "tableView": false,
+            "modal": true,
+            "rowDrafts": true,
+            "key": "editGrid",
+            "type": "editgrid",
+            "displayAsTable": false,
+            "input": true,
+            "components": [
+                {
+                    "label": "Select",
+                    "widget": "choicesjs",
+                    "tableView": true,
+                    "data": {
+                        "values": [
+                            {
+                                "label": "a",
+                                "value": "a"
+                            },
+                            {
+                                "label": "b",
+                                "value": "b"
+                            },
+                            {
+                                "label": "c",
+                                "value": "c"
+                            }
+                        ]
+                    },
+                    "validate": {
+                        "required": true
+                    },
+                    "key": "select",
+                    "type": "select",
+                    "input": true
+                },
+                {
+                    "label": "Text Field",
+                    "applyMaskOn": "change",
+                    "tableView": true,
+                    "validate": {
+                        "required": true
+                    },
+                    "validateWhenHidden": false,
+                    "key": "textField",
+                    "type": "textfield",
+                    "input": true
+                }
+            ]
+        },
+        {
+            "label": "Submit",
+            "showValidations": false,
+            "tableView": false,
+            "key": "submit",
+            "type": "button",
+            "input": true,
+            "saveOnEnter": false
+        }
+    ]
+};

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

@@ -0,0 +1,44 @@
+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;
+        key: string;
+        type: string;
+        input: boolean;
+        applyMaskOn?: undefined;
+        conditional?: undefined;
+    } | {
+        label: string;
+        applyMaskOn: string;
+        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;
+    })[];
+}
+export default _default;

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

@@ -0,0 +1,57 @@
+export default {
+    title: 'FIO-8072',
+    name: 'fio8072',
+    path: 'fio8072',
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'Select',
+            widget: 'choicesjs',
+            tableView: true,
+            data: {
+                values: [
+                    {
+                        label: 'A',
+                        value: '1',
+                    },
+                    {
+                        label: 'B',
+                        value: '2',
+                    },
+                    {
+                        label: 'C',
+                        value: '10',
+                    },
+                    {
+                        label: 'D',
+                        value: '1d',
+                    },
+                ],
+            },
+            dataType: 'number',
+            key: 'select',
+            type: 'select',
+            input: true,
+        },
+        {
+            label: 'Text Field',
+            applyMaskOn: 'change',
+            tableView: true,
+            key: 'textField',
+            type: 'textfield',
+            input: true,
+            conditional: {
+                show: true,
+                conjunction: 'all',
+                conditions: [
+                    {
+                        component: 'select',
+                        operator: 'lessThan',
+                        value: 5,
+                    },
+                ],
+            },
+        },
+    ],
+};

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

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

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

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

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

@@ -1,26 +1,4 @@
 export default class SelectBoxesComponent extends RadioComponent {
-    static get serverConditionSettings(): {
-        valueComponent(classComp: any): {
-            type: string;
-            dataSrc: string;
-            valueProperty: string;
-            dataType: string;
-            data: {
-                custom: string;
-            };
-        };
-    };
-    static get conditionOperatorsSettings(): {
-        valueComponent(classComp: any): {
-            type: string;
-            dataSrc: string;
-            valueProperty: string;
-            dataType: string;
-            data: {
-                custom: string;
-            };
-        };
-    };
     static savedValueTypes(schema: any): string[];
     constructor(...args: any[]);
     get emptyValue(): any;

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

@@ -27,15 +27,22 @@ export default class SelectBoxesComponent extends RadioComponent {
         return {
             ...super.conditionOperatorsSettings,
             valueComponent(classComp) {
-                return {
-                    type: 'select',
-                    dataSrc: 'custom',
-                    valueProperty: 'value',
-                    dataType: 'string',
-                    data: {
-                        custom: `values = ${classComp && classComp.values ? JSON.stringify(classComp.values) : []}`
-                    },
-                };
+                const isValuesSrc = !classComp.dataSrc || classComp.dataSrc === 'values';
+                return isValuesSrc
+                    ? {
+                        type: 'select',
+                        dataSrc: 'custom',
+                        valueProperty: 'value',
+                        dataType: 'string',
+                        data: {
+                            custom: `values = ${classComp && classComp.values ? JSON.stringify(classComp.values) : []}`
+                        },
+                    }
+                    : {
+                        ...classComp,
+                        dataType: 'string',
+                        type: 'select',
+                    };
             }
         };
     }