@formio/js 5.2.3 → 5.2.4-rc.0

package/lib/mjs/components/_classes/component/editForm/Component.edit.addons.js

@@ -10,12 +10,10 @@ export default [
         key: 'addons',
         label: 'Addons',
         templates: {
-            // eslint-disable-next-line quotes
             header: `<div class="row">
                 <div class="col-6">{{ t(components[0].label) }}</div>
                 <div class="col-4">Settings</div>
               </div>`,
-            // eslint-disable-next-line quotes
             row: `<div class="row">
               <div class="col-6">
                 {{ row.name.label }}
@@ -64,6 +62,6 @@ export default [
                 },
             },
             ...editForms,
-        ]
-    }
+        ],
+    },
 ];

package/lib/mjs/components/_classes/component/editForm/Component.edit.api.js

@@ -9,8 +9,8 @@ export default [
         validate: {
             pattern: '(\\w|\\w[\\w-.]*\\w)',
             patternMessage: 'The property name must only contain alphanumeric characters, underscores, dots and dashes and should not be ended by dash or dot.',
-            required: true
-        }
+            required: true,
+        },
     },
     {
         weight: 100,
@@ -19,7 +19,7 @@ export default [
         label: 'Field Tags',
         storeas: 'array',
         tooltip: 'Tag the field for use in custom logic.',
-        key: 'tags'
+        key: 'tags',
     },
     {
         weight: 200,
@@ -32,7 +32,7 @@ export default [
             key: 'value',
             label: 'Value',
             placeholder: 'Value',
-            input: true
-        }
+            input: true,
+        },
     },
 ];

package/lib/mjs/components/_classes/component/editForm/Component.edit.conditional.js

@@ -1,6 +1,5 @@
 import EditFormUtils from './utils';
 import { getContextComponents } from '../../../../utils';
-/* eslint-disable quotes, max-len */
 export default [
     {
         type: 'panel',
@@ -18,9 +17,9 @@ export default [
                 data: {
                     values: [
                         { label: 'True', value: 'true' },
-                        { label: 'False', value: 'false' }
-                    ]
-                }
+                        { label: 'False', value: 'false' },
+                    ],
+                },
             },
             {
                 type: 'select',
@@ -32,19 +31,18 @@ export default [
                 data: {
                     custom(context) {
                         return getContextComponents(context);
-                    }
-                }
+                    },
+                },
             },
             {
                 type: 'textfield',
                 input: true,
                 label: 'Has the value:',
-                key: 'conditional.eq'
-            }
-        ]
+                key: 'conditional.eq',
+            },
+        ],
     },
     EditFormUtils.javaScriptValue('Advanced Conditions', 'customConditional', 'conditional.json', 110, '<p>You must assign the <strong>show</strong> variable a boolean result.</p>' +
         '<p><strong>Note: Advanced Conditional logic will override the results of the Simple Conditional logic.</strong></p>' +
-        '<h5>Example</h5><pre>show = !!data.showMe;</pre>', '<p><a href="https://help.form.io/userguide/form-building/logic-and-conditions" target="_blank" rel="noopener noreferrer">Click here for an example</a></p>')
+        '<h5>Example</h5><pre>show = !!data.showMe;</pre>', '<p><a href="https://help.form.io/userguide/form-building/logic-and-conditions" target="_blank" rel="noopener noreferrer">Click here for an example</a></p>'),
 ];
-/* eslint-enable quotes, max-len */

package/lib/mjs/components/_classes/component/editForm/Component.edit.data.d.ts

@@ -87,6 +87,9 @@ declare const _default: ({
     valueProperty?: undefined;
     data?: undefined;
     conditional?: undefined;
+    as?: undefined;
+    editor?: undefined;
+    description?: undefined;
 } | {
     type: string;
     label: string;
@@ -103,6 +106,9 @@ declare const _default: ({
     valueProperty?: undefined;
     data?: undefined;
     conditional?: undefined;
+    as?: undefined;
+    editor?: undefined;
+    description?: undefined;
 } | {
     weight: number;
     type: string;
@@ -125,6 +131,9 @@ declare const _default: ({
     valueProperty?: undefined;
     data?: undefined;
     conditional?: undefined;
+    as?: undefined;
+    editor?: undefined;
+    description?: undefined;
 } | {
     weight: number;
     type: string;
@@ -173,6 +182,9 @@ declare const _default: ({
     valueProperty?: undefined;
     data?: undefined;
     conditional?: undefined;
+    as?: undefined;
+    editor?: undefined;
+    description?: undefined;
 } | {
     type: string;
     input: boolean;
@@ -200,6 +212,9 @@ declare const _default: ({
     defaultValue?: undefined;
     values?: undefined;
     logic?: undefined;
+    as?: undefined;
+    editor?: undefined;
+    description?: undefined;
 } | {
     weight: number;
     type: string;
@@ -216,5 +231,27 @@ declare const _default: ({
     valueProperty?: undefined;
     data?: undefined;
     conditional?: undefined;
+    as?: undefined;
+    editor?: undefined;
+    description?: undefined;
+} | {
+    type: string;
+    as: string;
+    editor: string;
+    weight: number;
+    input: boolean;
+    key: string;
+    label: string;
+    tooltip: string;
+    defaultValue: {};
+    description: string;
+    placeholder?: undefined;
+    inline?: undefined;
+    values?: undefined;
+    logic?: undefined;
+    dataSrc?: undefined;
+    valueProperty?: undefined;
+    data?: undefined;
+    conditional?: undefined;
 })[];
 export default _default;

package/lib/mjs/components/_classes/component/editForm/Component.edit.data.js

@@ -1,5 +1,4 @@
 import EditFormUtils from './utils';
-/* eslint-disable max-len */
 export default [
     {
         weight: 0,
@@ -7,7 +6,7 @@ export default [
         label: 'Multiple Values',
         tooltip: 'Allows multiple values to be entered for this field.',
         key: 'multiple',
-        input: true
+        input: true,
     },
     {
         type: 'textfield',
@@ -16,7 +15,7 @@ export default [
         weight: 5,
         placeholder: 'Default Value',
         tooltip: 'The Default Value will be the value for this field, before user interaction. Having a default value will override the placeholder text.',
-        input: true
+        input: true,
     },
     {
         weight: 30,
@@ -31,7 +30,7 @@ export default [
             { label: 'None', value: false },
             { label: 'Server', value: true },
             { label: 'Client', value: 'client-only' },
-        ]
+        ],
     },
     {
         weight: 150,
@@ -39,7 +38,7 @@ export default [
         label: 'Protected',
         tooltip: 'A protected field will not be returned when queried via API.',
         key: 'protected',
-        input: true
+        input: true,
     },
     {
         type: 'checkbox',
@@ -47,7 +46,7 @@ export default [
         weight: 200,
         key: 'dbIndex',
         label: 'Database Index',
-        tooltip: 'Set this field as an index within the database. Increases performance for submission queries.'
+        tooltip: 'Set this field as an index within the database. Increases performance for submission queries.',
     },
     {
         weight: 400,
@@ -61,7 +60,7 @@ export default [
                 name: 'disabled',
                 trigger: {
                     type: 'javascript',
-                    javascript: 'result = !instance.root.options.sac;'
+                    javascript: 'result = !instance.root.options.sac;',
                 },
                 actions: [
                     {
@@ -70,17 +69,17 @@ export default [
                         property: {
                             label: 'Disabled',
                             value: 'disabled',
-                            type: 'boolean'
+                            type: 'boolean',
                         },
-                        state: true
-                    }
-                ]
+                        state: true,
+                    },
+                ],
             },
             {
                 name: 'disabledToolTip',
                 trigger: {
                     type: 'javascript',
-                    javascript: 'result = !instance.root.options.sac;'
+                    javascript: 'result = !instance.root.options.sac;',
                 },
                 actions: [
                     {
@@ -89,13 +88,13 @@ export default [
                         property: {
                             label: 'Tooltip',
                             value: 'tooltip',
-                            type: 'string'
+                            type: 'string',
                         },
-                        text: 'Only available with Security Module. Contact sales@form.io for more information.'
-                    }
-                ]
-            }
-        ]
+                        text: 'Only available with Security Module. Contact sales@form.io for more information.',
+                    },
+                ],
+            },
+        ],
     },
     {
         type: 'select',
@@ -114,15 +113,19 @@ export default [
                     if (component.key !== context.data.key) {
                         values.push({
                             label: component.label || component.key,
-                            value: path
+                            value: path,
                         });
                     }
                 });
                 return values;
-            }
+            },
         },
         conditional: {
-            json: { '!': [{ var: 'data.dataSrc' }] },
+            json: {
+                '!': [
+                    { var: 'data.dataSrc' },
+                ],
+            },
         },
     },
     {
@@ -132,7 +135,7 @@ export default [
         key: 'clearOnHide',
         defaultValue: true,
         tooltip: 'When a field is conditionally hidden, omit the value from the submission data.',
-        input: true
+        input: true,
     },
     EditFormUtils.javaScriptValue('Custom Default Value', 'customDefaultValue', 'customDefaultValue', 1000, '<p><h4>Example:</h4><pre>value = data.firstName + " " + data.lastName;</pre></p>', '<p><h4>Example:</h4><pre>{"cat": [{"var": "data.firstName"}, " ", {"var": "data.lastName"}]}</pre>'),
     EditFormUtils.javaScriptValue('Calculated Value', 'calculateValue', 'calculateValue', 1100, '<p><h4>Example:</h4><pre>value = data.a + data.b + data.c;</pre></p>', '<p><h4>Example:</h4><pre>{"+": [{"var": "data.a"}, {"var": "data.b"}, {"var": "data.c"}]}</pre><p><a href="https://help.form.io/userguide/form-building/logic-and-conditions#calculated-values" target="_blank" rel="noopener noreferrer">Click here for an example</a></p>', '<tr><th>token</th><td>The decoded JWT token for the authenticated user.</td></tr>'),
@@ -142,7 +145,7 @@ export default [
         weight: 1100,
         key: 'calculateServer',
         label: 'Calculate Value on server',
-        tooltip: 'Checking this will run the calculation on the server. This is useful if you wish to override the values submitted with the calculations performed on the server.'
+        tooltip: 'Checking this will run the calculation on the server. This is useful if you wish to override the values submitted with the calculations performed on the server.',
     },
     {
         type: 'checkbox',
@@ -150,7 +153,18 @@ export default [
         weight: 1200,
         key: 'allowCalculateOverride',
         label: 'Allow Manual Override of Calculated Value',
-        tooltip: 'When checked, this will allow the user to manually override the calculated value.'
+        tooltip: 'When checked, this will allow the user to manually override the calculated value.',
     },
+    {
+        type: 'textarea',
+        as: 'json',
+        editor: 'ace',
+        weight: 1400,
+        input: true,
+        key: 'serverOverride',
+        label: 'Server Override',
+        tooltip: 'A JSON object containing the component settings that should be overriden when the form submission is processed on the server side.',
+        defaultValue: {},
+        description: '<b>Example</b>: { "clearOnHide": true }',
+    }
 ];
-/* eslint-enable max-len */

package/lib/mjs/components/_classes/component/editForm/Component.edit.display.js

@@ -1,4 +1,3 @@
-/* eslint-disable max-len */
 export default [
     {
         weight: 0,
@@ -9,7 +8,7 @@ export default [
         placeholder: 'Field Label',
         tooltip: 'The label for this field that will appear next to it.',
         validate: {
-            required: true
+            required: true,
         },
         autofocus: true,
     },
@@ -29,9 +28,9 @@ export default [
                 { label: 'Left (Right-aligned)', value: 'left-right' },
                 { label: 'Right (Left-aligned)', value: 'right-left' },
                 { label: 'Right (Right-aligned)', value: 'right-right' },
-                { label: 'Bottom', value: 'bottom' }
-            ]
-        }
+                { label: 'Bottom', value: 'bottom' },
+            ],
+        },
     },
     {
         type: 'number',
@@ -45,16 +44,26 @@ export default [
         suffix: '%',
         validate: {
             min: 0,
-            max: 100
+            max: 100,
         },
         conditional: {
             json: {
                 and: [
-                    { '!==': [{ var: 'data.labelPosition' }, 'top'] },
-                    { '!==': [{ var: 'data.labelPosition' }, 'bottom'] },
-                ]
-            }
-        }
+                    {
+                        '!==': [
+                            { var: 'data.labelPosition' },
+                            'top',
+                        ],
+                    },
+                    {
+                        '!==': [
+                            { var: 'data.labelPosition' },
+                            'bottom',
+                        ],
+                    },
+                ],
+            },
+        },
     },
     {
         type: 'number',
@@ -68,16 +77,26 @@ export default [
         suffix: '%',
         validate: {
             min: 0,
-            max: 100
+            max: 100,
         },
         conditional: {
             json: {
                 and: [
-                    { '!==': [{ var: 'data.labelPosition' }, 'top'] },
-                    { '!==': [{ var: 'data.labelPosition' }, 'bottom'] },
-                ]
-            }
-        }
+                    {
+                        '!==': [
+                            { var: 'data.labelPosition' },
+                            'top',
+                        ],
+                    },
+                    {
+                        '!==': [
+                            { var: 'data.labelPosition' },
+                            'bottom',
+                        ],
+                    },
+                ],
+            },
+        },
     },
     {
         weight: 100,
@@ -86,7 +105,7 @@ export default [
         key: 'placeholder',
         label: 'Placeholder',
         placeholder: 'Placeholder',
-        tooltip: 'The placeholder text that will appear when this field is empty.'
+        tooltip: 'The placeholder text that will appear when this field is empty.',
     },
     {
         weight: 200,
@@ -125,7 +144,7 @@ export default [
         key: 'customClass',
         label: 'Custom CSS Class',
         placeholder: 'Custom CSS Class',
-        tooltip: 'Custom CSS class to add to this component.'
+        tooltip: 'Custom CSS class to add to this component.',
     },
     {
         weight: 600,
@@ -134,7 +153,7 @@ export default [
         key: 'tabindex',
         label: 'Tab Index',
         placeholder: '0',
-        tooltip: 'Sets the tabindex attribute of this component to override the tab order of the form. See the <a href=\'https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex\'>MDN documentation</a> on tabindex for more information.'
+        tooltip: "Sets the tabindex attribute of this component to override the tab order of the form. See the <a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex'>MDN documentation</a> on tabindex for more information.",
     },
     {
         weight: 1100,
@@ -142,7 +161,7 @@ export default [
         label: 'Hidden',
         tooltip: 'A hidden field is still a part of the form, but is hidden from view.',
         key: 'hidden',
-        input: true
+        input: true,
     },
     {
         weight: 1200,
@@ -150,7 +169,7 @@ export default [
         label: 'Hide Label',
         tooltip: 'Hide the label (title, if no label) of this component. This allows you to show the label in the form builder, but not when it is rendered.',
         key: 'hideLabel',
-        input: true
+        input: true,
     },
     {
         weight: 1350,
@@ -158,7 +177,7 @@ export default [
         label: 'Initial Focus',
         tooltip: 'Make this field the initially focused element on this form.',
         key: 'autofocus',
-        input: true
+        input: true,
     },
     {
         weight: 1370,
@@ -169,7 +188,7 @@ export default [
         input: true,
         customConditional(context) {
             return context.instance.options?.flags?.inDataGrid;
-        }
+        },
     },
     {
         weight: 1400,
@@ -177,7 +196,7 @@ export default [
         label: 'Disabled',
         tooltip: 'Disable the form input.',
         key: 'disabled',
-        input: true
+        input: true,
     },
     {
         weight: 1500,
@@ -185,7 +204,7 @@ export default [
         label: 'Table View',
         tooltip: 'Shows this value within the table view of the submissions.',
         key: 'tableView',
-        input: true
+        input: true,
     },
     {
         weight: 1600,
@@ -193,7 +212,6 @@ export default [
         label: 'Modal Edit',
         tooltip: 'Opens up a modal to edit the value of this component.',
         key: 'modalEdit',
-        input: true
-    }
+        input: true,
+    },
 ];
-/* eslint-enable max-len */

package/lib/mjs/components/_classes/component/editForm/Component.edit.layout.js

@@ -9,9 +9,9 @@ export default [
             type: 'textfield',
             key: 'value',
             label: 'Attribute Value',
-            input: true
+            input: true,
         },
-        tooltip: 'Provide a map of HTML attributes for component\'s input element (attributes provided by other component settings or other attributes generated by form.io take precedence over attributes in this grid)',
+        tooltip: "Provide a map of HTML attributes for component's input element (attributes provided by other component settings or other attributes generated by form.io take precedence over attributes in this grid)",
         addAnother: 'Add Attribute',
     },
     {
@@ -30,7 +30,7 @@ export default [
                 key: 'overlay.style',
                 label: 'Style',
                 placeholder: '',
-                tooltip: 'Custom styles that should be applied to this component when rendered in PDF.'
+                tooltip: 'Custom styles that should be applied to this component when rendered in PDF.',
             },
             {
                 type: 'textfield',
@@ -38,7 +38,7 @@ export default [
                 key: 'overlay.page',
                 label: 'Page',
                 placeholder: '',
-                tooltip: 'The PDF page to place this component.'
+                tooltip: 'The PDF page to place this component.',
             },
             {
                 type: 'textfield',
@@ -46,7 +46,7 @@ export default [
                 key: 'overlay.left',
                 label: 'Left',
                 placeholder: '',
-                tooltip: 'The left margin within a page to place this component.'
+                tooltip: 'The left margin within a page to place this component.',
             },
             {
                 type: 'textfield',
@@ -54,7 +54,7 @@ export default [
                 key: 'overlay.top',
                 label: 'Top',
                 placeholder: '',
-                tooltip: 'The top margin within a page to place this component.'
+                tooltip: 'The top margin within a page to place this component.',
             },
             {
                 type: 'textfield',
@@ -62,7 +62,7 @@ export default [
                 key: 'overlay.width',
                 label: 'Width',
                 placeholder: '',
-                tooltip: 'The width of the component (in pixels).'
+                tooltip: 'The width of the component (in pixels).',
             },
             {
                 type: 'textfield',
@@ -70,8 +70,8 @@ export default [
                 key: 'overlay.height',
                 label: 'Height',
                 placeholder: '',
-                tooltip: 'The height of the component (in pixels).'
+                tooltip: 'The height of the component (in pixels).',
             },
-        ]
+        ],
     },
 ];

package/lib/mjs/components/_classes/component/editForm/Component.edit.logic.js

@@ -1,6 +1,5 @@
 import EditFormUtils from './utils';
 import { getContextComponents } from '../../../../utils';
-/* eslint-disable quotes, max-len */
 export default [
     {
         weight: 0,
@@ -328,9 +327,9 @@ export default [
                                 template: '<span>{{ item.label }}</span>',
                                 type: 'select',
                                 customConditional({ row }) {
-                                    return row.type === 'property' &&
+                                    return (row.type === 'property' &&
                                         row.hasOwnProperty('property') &&
-                                        row.property.type === 'boolean';
+                                        row.property.type === 'boolean');
                                 },
                             },
                             {
@@ -343,10 +342,10 @@ export default [
                                 tableView: false,
                                 description: 'Can use templating with {{ data.myfield }}. "data", "row", "component" and "result" variables are available.',
                                 customConditional({ row }) {
-                                    return row.type === 'property' &&
+                                    return (row.type === 'property' &&
                                         row.hasOwnProperty('property') &&
                                         row.property.type === 'string' &&
-                                        !row.property.component;
+                                        !row.property.component);
                                 },
                             },
                             {
@@ -384,7 +383,7 @@ export default [
                             Object.assign(EditFormUtils.logicVariablesTable('<tr><th>input</th><td>The value that was input into this component</td></tr>'), {
                                 customConditional({ row }) {
                                     return row.type === 'customAction';
-                                }
+                                },
                             }),
                             {
                                 weight: 20,
@@ -407,4 +406,3 @@ export default [
         ],
     },
 ];
-/* eslint-enable quotes, max-len */