@formio/js 5.0.0-rc.5

package/lib/mjs/components/textfield/editForm/TextField.edit.display.d.ts

@@ -0,0 +1,248 @@
+declare const _default: ({
+    weight: number;
+    type: string;
+    input: boolean;
+    key: string;
+    label: string;
+    placeholder: string;
+    tooltip: string;
+    defaultValue: string;
+    onChange: (context: any) => void;
+    dataSrc: string;
+    data: {
+        values: {
+            label: string;
+            value: string;
+        }[];
+    };
+    conditional: {
+        json: {
+            '===': (string | {
+                var: string;
+            })[];
+            '!=='?: undefined;
+        };
+    };
+    refreshOn?: undefined;
+    clearOnHide?: undefined;
+    rows?: undefined;
+    editor?: undefined;
+    as?: undefined;
+    validation?: undefined;
+    reorder?: undefined;
+    components?: undefined;
+} | {
+    weight: number;
+    type: string;
+    key: string;
+    label: string;
+    refreshOn: string;
+    clearOnHide: boolean;
+    calculateValue: (context: any) => any;
+    input: boolean;
+    rows: number;
+    editor: string;
+    as: string;
+    conditional: {
+        json: {
+            '!==': (string | {
+                var: string;
+            })[];
+            '==='?: undefined;
+        };
+    };
+    placeholder?: undefined;
+    tooltip?: undefined;
+    defaultValue?: undefined;
+    onChange?: undefined;
+    dataSrc?: undefined;
+    data?: undefined;
+    validation?: undefined;
+    reorder?: undefined;
+    components?: undefined;
+} | {
+    weight: number;
+    type: string;
+    input: boolean;
+    key: string;
+    label: string;
+    tooltip: string;
+    customConditional(context: any): boolean;
+    placeholder?: undefined;
+    defaultValue?: undefined;
+    onChange?: undefined;
+    dataSrc?: undefined;
+    data?: undefined;
+    conditional?: undefined;
+    refreshOn?: undefined;
+    clearOnHide?: undefined;
+    rows?: undefined;
+    editor?: undefined;
+    as?: undefined;
+    validation?: undefined;
+    reorder?: undefined;
+    components?: undefined;
+} | {
+    weight: number;
+    type: string;
+    input: boolean;
+    key: string;
+    label: string;
+    tooltip: string;
+    defaultValue: string;
+    dataSrc: string;
+    data: {
+        values: {
+            label: string;
+            value: string;
+        }[];
+    };
+    customConditional(context: any): boolean;
+    placeholder?: undefined;
+    onChange?: undefined;
+    conditional?: undefined;
+    refreshOn?: undefined;
+    clearOnHide?: undefined;
+    rows?: undefined;
+    editor?: undefined;
+    as?: undefined;
+    validation?: undefined;
+    reorder?: undefined;
+    components?: undefined;
+} | {
+    weight: number;
+    type: string;
+    input: boolean;
+    key: string;
+    label: string;
+    tooltip: string;
+    validation: {
+        maxLength: number;
+    };
+    customConditional(context: any): any;
+    placeholder?: undefined;
+    defaultValue?: undefined;
+    onChange?: undefined;
+    dataSrc?: undefined;
+    data?: undefined;
+    conditional?: undefined;
+    refreshOn?: undefined;
+    clearOnHide?: undefined;
+    rows?: undefined;
+    editor?: undefined;
+    as?: undefined;
+    reorder?: undefined;
+    components?: undefined;
+} | {
+    weight: number;
+    type: string;
+    input: boolean;
+    key: string;
+    label: string;
+    placeholder?: undefined;
+    tooltip?: undefined;
+    defaultValue?: undefined;
+    onChange?: undefined;
+    dataSrc?: undefined;
+    data?: undefined;
+    conditional?: undefined;
+    refreshOn?: undefined;
+    clearOnHide?: undefined;
+    rows?: undefined;
+    editor?: undefined;
+    as?: undefined;
+    validation?: undefined;
+    reorder?: undefined;
+    components?: undefined;
+} | {
+    weight: number;
+    type: string;
+    input: boolean;
+    key: string;
+    defaultValue: boolean;
+    label: string;
+    placeholder?: undefined;
+    tooltip?: undefined;
+    onChange?: undefined;
+    dataSrc?: undefined;
+    data?: undefined;
+    conditional?: undefined;
+    refreshOn?: undefined;
+    clearOnHide?: undefined;
+    rows?: undefined;
+    editor?: undefined;
+    as?: undefined;
+    validation?: undefined;
+    reorder?: undefined;
+    components?: undefined;
+} | {
+    weight: number;
+    type: string;
+    input: boolean;
+    key: string;
+    label: string;
+    customConditional(context: any): boolean;
+    reorder: boolean;
+    components: {
+        type: string;
+        key: string;
+        label: string;
+        input: boolean;
+    }[];
+    placeholder?: undefined;
+    tooltip?: undefined;
+    defaultValue?: undefined;
+    onChange?: undefined;
+    dataSrc?: undefined;
+    data?: undefined;
+    conditional?: undefined;
+    refreshOn?: undefined;
+    clearOnHide?: undefined;
+    rows?: undefined;
+    editor?: undefined;
+    as?: undefined;
+    validation?: undefined;
+} | {
+    weight: number;
+    type: string;
+    input: boolean;
+    key: string;
+    label: string;
+    placeholder: string;
+    tooltip: string;
+    defaultValue?: undefined;
+    onChange?: undefined;
+    dataSrc?: undefined;
+    data?: undefined;
+    conditional?: undefined;
+    refreshOn?: undefined;
+    clearOnHide?: undefined;
+    rows?: undefined;
+    editor?: undefined;
+    as?: undefined;
+    validation?: undefined;
+    reorder?: undefined;
+    components?: undefined;
+} | {
+    weight: number;
+    type: string;
+    label: string;
+    tooltip: string;
+    key: string;
+    input: boolean;
+    placeholder?: undefined;
+    defaultValue?: undefined;
+    onChange?: undefined;
+    dataSrc?: undefined;
+    data?: undefined;
+    conditional?: undefined;
+    refreshOn?: undefined;
+    clearOnHide?: undefined;
+    rows?: undefined;
+    editor?: undefined;
+    as?: undefined;
+    validation?: undefined;
+    reorder?: undefined;
+    components?: undefined;
+})[];
+export default _default;

package/lib/mjs/components/textfield/editForm/TextField.edit.display.js

@@ -0,0 +1,203 @@
+import Widgets from '../../../widgets';
+import _ from 'lodash';
+export default [
+    {
+        weight: 400,
+        type: 'select',
+        input: true,
+        key: 'widget.type',
+        label: 'Widget',
+        placeholder: 'Select a widget',
+        tooltip: 'The widget is the display UI used to input the value of the field.',
+        defaultValue: 'input',
+        onChange: (context) => {
+            context.data.widget = _.pick(context.data.widget, 'type');
+        },
+        dataSrc: 'values',
+        data: {
+            values: [
+                { label: 'Input Field', value: 'input' },
+                { label: 'Calendar Picker', value: 'calendar' },
+            ]
+        },
+        conditional: {
+            json: { '===': [{ var: 'data.type' }, 'textfield'] }
+        }
+    },
+    {
+        weight: 405,
+        type: 'textarea',
+        key: 'widget',
+        label: 'Widget Settings',
+        refreshOn: 'wiget.type',
+        clearOnHide: false,
+        // Deleted clearOnHide and refreshOn to make possible to change exist widget settings.
+        calculateValue: (context) => {
+            const { calculatedValue } = context.instance;
+            const { type } = context.data.widget;
+            if (_.isEmpty(_.omit(context.data.widget, 'type')) ||
+                _.isEmpty(_.omit(calculatedValue, 'type'))) {
+                if (calculatedValue && !calculatedValue.type) {
+                    return context.data.widget;
+                }
+                const existWidget = context.instance._currentForm.options.editComponent.widget;
+                if (existWidget && !_.isEmpty(_.omit(existWidget, 'type')) && type === existWidget.type) {
+                    return _.omit(existWidget, 'language');
+                }
+                else if (type) {
+                    return _.omit(Widgets[type].defaultSettings, 'language');
+                }
+            }
+            return context.data.widget;
+        },
+        input: true,
+        rows: 5,
+        editor: 'ace',
+        as: 'json',
+        conditional: {
+            json: { '!==': [{ var: 'data.widget.type' }, 'input'] }
+        }
+    },
+    {
+        weight: 410,
+        type: 'textfield',
+        input: true,
+        key: 'inputMask',
+        label: 'Input Mask',
+        tooltip: 'An input mask helps the user with input by ensuring a predefined format.<br><br>9: numeric<br>a: alphabetical<br>*: alphanumeric<br><br>Example telephone mask: (999) 999-9999<br><br>See the <a target=\'_blank\' href=\'https://github.com/RobinHerbots/jquery.inputmask\'>jquery.inputmask documentation</a> for more information.</a>',
+        customConditional(context) {
+            return !context.data.allowMultipleMasks;
+        },
+    },
+    {
+        weight: 410,
+        type: 'textfield',
+        input: true,
+        key: 'displayMask',
+        label: 'Display Mask',
+        tooltip: 'A display mask helps to display the input in a readable way, this won\'t affect the  value which will be saved (to affect both view and saved value, delete Display Mask and use Input Mask).<br><br>9: numeric<br>a: alphabetical<br>*: alphanumeric<br><br>Example telephone mask: (999) 999-9999<br><br>See the <a target=\'_blank\' href=\'https://github.com/RobinHerbots/jquery.inputmask\'>jquery.inputmask documentation</a> for more information.</a>',
+        customConditional(context) {
+            return !context.data.allowMultipleMasks;
+        },
+    },
+    {
+        weight: 410,
+        type: 'select',
+        input: true,
+        key: 'applyMaskOn',
+        label: 'Apply Mask On',
+        tooltip: 'Select the type of applying mask.',
+        defaultValue: 'change',
+        dataSrc: 'values',
+        data: {
+            values: [
+                { label: 'Change', value: 'change' },
+                { label: 'Blur', value: 'blur' },
+            ],
+        },
+        customConditional(context) {
+            return !context.data.allowMultipleMasks;
+        },
+    },
+    {
+        weight: 411,
+        type: 'textfield',
+        input: true,
+        key: 'inputMaskPlaceholderChar',
+        label: 'Input Mask Placeholder Char',
+        tooltip: 'You can specify a char which will be used as a placeholder in the field. <br>E.g., \u02cd<br>Make note that placeholder char will be replaced by a space if it is used inside the mask',
+        validation: {
+            maxLength: 1
+        },
+        customConditional(context) {
+            return context.data.inputMask || context.data.displayMask;
+        }
+    },
+    {
+        weight: 413,
+        type: 'checkbox',
+        input: true,
+        key: 'allowMultipleMasks',
+        label: 'Allow Multiple Masks'
+    },
+    {
+        weight: 1350,
+        type: 'checkbox',
+        input: true,
+        key: 'spellcheck',
+        defaultValue: true,
+        label: 'Allow Spellcheck'
+    },
+    {
+        weight: 417,
+        type: 'datagrid',
+        input: true,
+        key: 'inputMasks',
+        label: 'Input Masks',
+        customConditional(context) {
+            return context.data.allowMultipleMasks === true;
+        },
+        reorder: true,
+        components: [
+            {
+                type: 'textfield',
+                key: 'label',
+                label: 'Label',
+                input: true
+            },
+            {
+                type: 'textfield',
+                key: 'mask',
+                label: 'Mask',
+                input: true
+            }
+        ]
+    },
+    {
+        weight: 320,
+        type: 'textfield',
+        input: true,
+        key: 'prefix',
+        label: 'Prefix'
+    },
+    {
+        weight: 330,
+        type: 'textfield',
+        input: true,
+        key: 'suffix',
+        label: 'Suffix'
+    },
+    {
+        weight: 700,
+        type: 'textfield',
+        input: true,
+        key: 'autocomplete',
+        label: 'Autocomplete',
+        placeholder: 'on',
+        tooltip: 'Indicates whether input elements can by default have their values automatically completed by the browser. See the <a href=\'https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\'>MDN documentation</a> on autocomplete for more information.'
+    },
+    {
+        weight: 1300,
+        type: 'checkbox',
+        label: 'Hide Input',
+        tooltip: 'Hide the input in the browser. This does not encrypt on the server. Do not use for passwords.',
+        key: 'mask',
+        input: true
+    },
+    {
+        weight: 1200,
+        type: 'checkbox',
+        label: 'Show Word Counter',
+        tooltip: 'Show a live count of the number of words.',
+        key: 'showWordCount',
+        input: true
+    },
+    {
+        weight: 1201,
+        type: 'checkbox',
+        label: 'Show Character Counter',
+        tooltip: 'Show a live count of the number of characters.',
+        key: 'showCharCount',
+        input: true
+    },
+];

package/lib/mjs/components/textfield/editForm/TextField.edit.validation.d.ts

@@ -0,0 +1,10 @@
+declare const _default: {
+    weight: number;
+    key: string;
+    label: string;
+    placeholder: string;
+    type: string;
+    tooltip: string;
+    input: boolean;
+}[];
+export default _default;

package/lib/mjs/components/textfield/editForm/TextField.edit.validation.js

@@ -0,0 +1,47 @@
+export default [
+    {
+        weight: 110,
+        key: 'validate.minLength',
+        label: 'Minimum Length',
+        placeholder: 'Minimum Length',
+        type: 'number',
+        tooltip: 'The minimum length requirement this field must meet.',
+        input: true
+    },
+    {
+        weight: 120,
+        key: 'validate.maxLength',
+        label: 'Maximum Length',
+        placeholder: 'Maximum Length',
+        type: 'number',
+        tooltip: 'The maximum length requirement this field must meet.',
+        input: true
+    },
+    {
+        weight: 125,
+        key: 'validate.minWords',
+        label: 'Minimum Word Length',
+        placeholder: 'Minimum Word Length',
+        type: 'number',
+        tooltip: 'The minimum amount of words that can be added to this field.',
+        input: true
+    },
+    {
+        weight: 126,
+        key: 'validate.maxWords',
+        label: 'Maximum Word Length',
+        placeholder: 'Maximum Word Length',
+        type: 'number',
+        tooltip: 'The maximum amount of words that can be added to this field.',
+        input: true
+    },
+    {
+        weight: 130,
+        key: 'validate.pattern',
+        label: 'Regular Expression Pattern',
+        placeholder: 'Regular Expression Pattern',
+        type: 'textfield',
+        tooltip: 'The regular expression pattern test that the field value must pass before the form can be submitted.',
+        input: true
+    }
+];

package/lib/mjs/components/textfield/fixtures/comp-with-display-and-value-masks.d.ts

@@ -0,0 +1,47 @@
+declare namespace _default {
+    const type: string;
+    const components: ({
+        label: string;
+        tableView: boolean;
+        key: string;
+        type: string;
+        inputMask: string;
+        input: boolean;
+        displayMask?: undefined;
+        disableOnInvalid?: undefined;
+    } | {
+        label: string;
+        tableView: boolean;
+        key: string;
+        type: string;
+        displayMask: string;
+        input: boolean;
+        inputMask?: undefined;
+        disableOnInvalid?: undefined;
+    } | {
+        label: string;
+        tableView: boolean;
+        key: string;
+        type: string;
+        displayMask: string;
+        inputMask: string;
+        input: boolean;
+        disableOnInvalid?: undefined;
+    } | {
+        type: string;
+        label: string;
+        key: string;
+        disableOnInvalid: boolean;
+        input: boolean;
+        tableView: boolean;
+        inputMask?: undefined;
+        displayMask?: undefined;
+    })[];
+    const revisions: string;
+    const _vid: number;
+    const title: string;
+    const display: string;
+    const name: string;
+    const path: string;
+}
+export default _default;

package/lib/mjs/components/textfield/fixtures/comp-with-display-and-value-masks.js

@@ -0,0 +1,46 @@
+export default {
+    type: 'form',
+    components: [
+        {
+            label: 'Text Field with Input Mask',
+            tableView: true,
+            key: 'textField',
+            type: 'textfield',
+            inputMask: '999-999',
+            input: true
+        },
+        {
+            label: 'Text Field with Display Mask',
+            tableView: true,
+            key: 'textFieldDisplayMask',
+            type: 'textfield',
+            displayMask: '999-999',
+            input: true
+        },
+        {
+            label: 'Text Field with Display and Input Masks',
+            tableView: true,
+            key: 'textFieldDisplayAndInputMasks',
+            type: 'textfield',
+            displayMask: '+9(99)-999',
+            inputMask: '999-999',
+            input: true
+        },
+        {
+            label: 'Text Field with Display and Input Masks',
+            tableView: true,
+            key: 'textFieldDisplayAndInputMasksReverse',
+            type: 'textfield',
+            displayMask: '999-999',
+            inputMask: '+9(99)-999',
+            input: true
+        },
+        { type: 'button', label: 'Submit', key: 'submit', disableOnInvalid: true, input: true, tableView: false }
+    ],
+    revisions: '',
+    _vid: 0,
+    title: 'Value And Display Masks',
+    display: 'form',
+    name: 'valueAndDisplayMasks',
+    path: 'valueanddisplaymasks',
+};

package/lib/mjs/components/textfield/fixtures/comp1.d.ts

@@ -0,0 +1,33 @@
+declare namespace _default {
+    export const tags: never[];
+    export const type: string;
+    export namespace conditional {
+        const eq: string;
+        const when: null;
+        const show: string;
+    }
+    export namespace validate {
+        const customPrivate: boolean;
+        const custom: string;
+        const pattern: string;
+        const maxLength: string;
+        const minLength: string;
+        const required: boolean;
+    }
+    export const persistent: boolean;
+    export const unique: boolean;
+    const _protected: boolean;
+    export { _protected as protected };
+    export const defaultValue: string;
+    export const multiple: boolean;
+    export const suffix: string;
+    export const prefix: string;
+    export const placeholder: string;
+    export const key: string;
+    export const label: string;
+    export const inputMask: string;
+    export const inputType: string;
+    export const tableView: boolean;
+    export const input: boolean;
+}
+export default _default;

package/lib/mjs/components/textfield/fixtures/comp1.js

@@ -0,0 +1,31 @@
+export default {
+    'tags': [],
+    'type': 'textfield',
+    'conditional': {
+        'eq': '',
+        'when': null,
+        'show': ''
+    },
+    'validate': {
+        'customPrivate': false,
+        'custom': '',
+        'pattern': '',
+        'maxLength': '',
+        'minLength': '',
+        'required': false
+    },
+    'persistent': true,
+    'unique': false,
+    'protected': false,
+    'defaultValue': '',
+    'multiple': false,
+    'suffix': '',
+    'prefix': '',
+    'placeholder': 'Enter your first name',
+    'key': 'firstName',
+    'label': 'First Name',
+    'inputMask': '',
+    'inputType': 'text',
+    'tableView': true,
+    'input': true
+};

package/lib/mjs/components/textfield/fixtures/comp2.d.ts

@@ -0,0 +1,33 @@
+declare namespace _default {
+    export const tags: never[];
+    export const type: string;
+    export namespace conditional {
+        const eq: string;
+        const when: null;
+        const show: string;
+    }
+    export namespace validate {
+        const customPrivate: boolean;
+        const custom: string;
+        const pattern: string;
+        const maxLength: number;
+        const minLength: number;
+        const required: boolean;
+    }
+    export const persistent: boolean;
+    export const unique: boolean;
+    const _protected: boolean;
+    export { _protected as protected };
+    export const defaultValue: string;
+    export const multiple: boolean;
+    export const suffix: string;
+    export const prefix: string;
+    export const placeholder: string;
+    export const key: string;
+    export const label: string;
+    export const inputMask: string;
+    export const inputType: string;
+    export const tableView: boolean;
+    export const input: boolean;
+}
+export default _default;