@formio/js 5.0.0-rc.5

package/lib/mjs/components/button/fixtures/comp3.d.ts

@@ -0,0 +1,113 @@
+declare namespace _default {
+    const type: string;
+    const components: ({
+        label: string;
+        mask: boolean;
+        spellcheck: boolean;
+        tableView: boolean;
+        delimiter: boolean;
+        requireDecimal: boolean;
+        inputFormat: string;
+        key: string;
+        logic: {
+            name: string;
+            trigger: {
+                type: string;
+                event: string;
+            };
+            actions: {
+                name: string;
+                type: string;
+                value: string;
+            }[];
+        }[];
+        type: string;
+        input: boolean;
+        action?: undefined;
+        showValidations?: undefined;
+        state?: undefined;
+        event?: undefined;
+        url?: undefined;
+        headers?: undefined;
+    } | {
+        label: string;
+        action: string;
+        showValidations: boolean;
+        tableView: boolean;
+        key: string;
+        type: string;
+        state: string;
+        input: boolean;
+        mask?: undefined;
+        spellcheck?: undefined;
+        delimiter?: undefined;
+        requireDecimal?: undefined;
+        inputFormat?: undefined;
+        logic?: undefined;
+        event?: undefined;
+        url?: undefined;
+        headers?: undefined;
+    } | {
+        label: string;
+        action: string;
+        showValidations: boolean;
+        tableView: boolean;
+        key: string;
+        type: string;
+        event: string;
+        input: boolean;
+        mask?: undefined;
+        spellcheck?: undefined;
+        delimiter?: undefined;
+        requireDecimal?: undefined;
+        inputFormat?: undefined;
+        logic?: undefined;
+        state?: undefined;
+        url?: undefined;
+        headers?: undefined;
+    } | {
+        label: string;
+        action: string;
+        showValidations: boolean;
+        tableView: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        mask?: undefined;
+        spellcheck?: undefined;
+        delimiter?: undefined;
+        requireDecimal?: undefined;
+        inputFormat?: undefined;
+        logic?: undefined;
+        state?: undefined;
+        event?: undefined;
+        url?: undefined;
+        headers?: undefined;
+    } | {
+        label: string;
+        action: string;
+        showValidations: boolean;
+        tableView: boolean;
+        key: string;
+        type: string;
+        url: string;
+        headers: {
+            header: string;
+            value: string;
+        }[];
+        input: boolean;
+        mask?: undefined;
+        spellcheck?: undefined;
+        delimiter?: undefined;
+        requireDecimal?: undefined;
+        inputFormat?: undefined;
+        logic?: undefined;
+        state?: undefined;
+        event?: undefined;
+    })[];
+    const title: string;
+    const display: string;
+    const name: string;
+    const path: string;
+}
+export default _default;

package/lib/mjs/components/button/fixtures/comp3.js

@@ -0,0 +1,82 @@
+export default {
+    type: 'form',
+    components: [
+        {
+            label: 'Number',
+            mask: false,
+            spellcheck: true,
+            tableView: false,
+            delimiter: false,
+            requireDecimal: false,
+            inputFormat: 'plain',
+            key: 'number',
+            logic: [
+                {
+                    name: 'show two',
+                    trigger: {
+                        type: 'event',
+                        event: 'showTwo'
+                    },
+                    actions: [
+                        {
+                            name: 'simple action',
+                            type: 'value',
+                            value: 'value = 2;'
+                        }
+                    ]
+                }
+            ],
+            type: 'number',
+            input: true
+        },
+        {
+            label: 'Save in state',
+            action: 'saveState',
+            showValidations: false,
+            tableView: false,
+            key: 'saveInState',
+            type: 'button',
+            state: 'testState',
+            input: true
+        },
+        {
+            label: 'Event',
+            action: 'event',
+            showValidations: false,
+            tableView: false,
+            key: 'event',
+            type: 'button',
+            event: 'showTwo',
+            input: true
+        },
+        {
+            label: 'Reset',
+            action: 'reset',
+            showValidations: false,
+            tableView: false,
+            key: 'reset',
+            type: 'button',
+            input: true
+        },
+        {
+            label: 'Post',
+            action: 'url',
+            showValidations: false,
+            tableView: false,
+            key: 'post',
+            type: 'button',
+            url: 'https://test.com',
+            headers: [
+                {
+                    header: '',
+                    value: ''
+                }
+            ],
+            input: true
+        }
+    ],
+    title: 'test',
+    display: 'form',
+    name: 'test',
+    path: 'test'
+};

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

@@ -0,0 +1,4 @@
+import comp1 from './comp1';
+import comp2 from './comp2';
+import comp3 from './comp3';
+export { comp1, comp2, comp3 };

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

@@ -0,0 +1,4 @@
+import comp1 from './comp1';
+import comp2 from './comp2';
+import comp3 from './comp3';
+export { comp1, comp2, comp3 };

package/lib/mjs/components/button/fixtures/values.d.ts

@@ -0,0 +1,2 @@
+declare const _default: boolean[];
+export default _default;

package/lib/mjs/components/button/fixtures/values.js

@@ -0,0 +1,4 @@
+export default [
+    true,
+    false,
+];

package/lib/mjs/components/checkbox/Checkbox.d.ts

@@ -0,0 +1,36 @@
+export default class CheckBoxComponent extends Field {
+    static get builderInfo(): {
+        title: string;
+        group: string;
+        icon: string;
+        documentation: string;
+        weight: number;
+        schema: any;
+    };
+    get labelClass(): string;
+    get inputInfo(): {
+        type: string;
+        component: any;
+        changeEvent: string;
+        attr: {
+            name: any;
+            type: any;
+            class: string;
+            lang: any;
+        };
+    };
+    get labelInfo(): {
+        hidden: boolean;
+    };
+    render(): any;
+    input: any;
+    detach(element: any): void;
+    get emptyValue(): false | null;
+    getValueAt(index: any): any;
+    get checked(): boolean;
+    setCheckedState(value: any): any;
+    setValue(value: any, flags?: {}): boolean;
+    getValueAsString(value: any): any;
+    updateValue(value: any, flags: any): boolean;
+}
+import Field from '../_classes/field/Field';

package/lib/mjs/components/checkbox/Checkbox.form.d.ts

@@ -0,0 +1,3 @@
+export default function _default(...extend: any[]): {
+    components: any;
+};

package/lib/mjs/components/checkbox/Checkbox.form.js

@@ -0,0 +1,20 @@
+import Components from '../Components';
+import CheckboxEditData from './editForm/Checkbox.edit.data';
+import CheckboxEditDisplay from './editForm/Checkbox.edit.display';
+import CheckboxEditValidation from './editForm/Checkbox.edit.validation';
+export default function (...extend) {
+    return Components.baseEditForm([
+        {
+            key: 'data',
+            components: CheckboxEditData
+        },
+        {
+            key: 'display',
+            components: CheckboxEditDisplay
+        },
+        {
+            key: 'validation',
+            components: CheckboxEditValidation
+        },
+    ], ...extend);
+}

package/lib/mjs/components/checkbox/Checkbox.js

@@ -0,0 +1,188 @@
+import _ from 'lodash';
+import Field from '../_classes/field/Field';
+export default class CheckBoxComponent extends Field {
+    static schema(...extend) {
+        return Field.schema({
+            type: 'checkbox',
+            inputType: 'checkbox',
+            label: 'Checkbox',
+            key: 'checkbox',
+            dataGridLabel: true,
+            labelPosition: 'right',
+            value: '',
+            name: ''
+        }, ...extend);
+    }
+    static get builderInfo() {
+        return {
+            title: 'Checkbox',
+            group: 'basic',
+            icon: 'check-square',
+            documentation: '/userguide/form-building/form-components#check-box',
+            weight: 50,
+            schema: CheckBoxComponent.schema()
+        };
+    }
+    get defaultSchema() {
+        return CheckBoxComponent.schema();
+    }
+    get defaultValue() {
+        const { name } = this.component;
+        const defaultValue = super.defaultValue;
+        return name ? (this.component[name] || this.emptyValue) : (defaultValue || this.component.defaultValue || false).toString() === 'true';
+    }
+    get labelClass() {
+        let className = '';
+        if (this.isInputComponent
+            && !this.options.inputsOnly
+            && this.component.validate
+            && this.component.validate.required) {
+            className += ' field-required';
+        }
+        return `${className}`;
+    }
+    get hasSetValue() {
+        return this.hasValue();
+    }
+    get inputInfo() {
+        const info = super.elementInfo();
+        info.type = 'input';
+        info.changeEvent = 'click';
+        info.attr.type = this.component.inputType || 'checkbox';
+        info.attr.class = 'form-check-input';
+        if (this.component.name) {
+            info.attr.name = `data[${this.component.name}]`;
+        }
+        info.attr.value = this.component.value ? this.component.value : 0;
+        info.label = this.t(this.component.label, { _userInput: true });
+        info.labelClass = this.labelClass;
+        return info;
+    }
+    get labelInfo() {
+        return {
+            hidden: true
+        };
+    }
+    render() {
+        return super.render(this.renderTemplate('checkbox', {
+            input: this.inputInfo,
+            checked: this.checked,
+            tooltip: this.interpolate(this.t(this.component.tooltip) || '', { _userInput: true }).replace(/(?:\r\n|\r|\n)/g, '<br />')
+        }));
+    }
+    attach(element) {
+        this.loadRefs(element, { input: 'multiple' });
+        this.input = this.refs.input[0];
+        if (this.refs.input) {
+            this.addEventListener(this.input, this.inputInfo.changeEvent, () => this.updateValue(null, {
+                modified: true
+            }));
+            this.addShortcut(this.input);
+        }
+        return super.attach(element);
+    }
+    detach(element) {
+        if (element && this.input) {
+            this.removeShortcut(this.input);
+        }
+        super.detach();
+    }
+    get emptyValue() {
+        return this.component.inputType === 'radio' ? null : false;
+    }
+    isEmpty(value = this.dataValue) {
+        return super.isEmpty(value) || value === false;
+    }
+    get key() {
+        return this.component.name ? this.component.name : super.key;
+    }
+    getValueAt(index) {
+        if (this.component.name) {
+            return this.refs.input[index].checked ? this.component.value : '';
+        }
+        return !!this.refs.input[index].checked;
+    }
+    getValue() {
+        const value = super.getValue();
+        if (this.component.name) {
+            return value ? this.setCheckedState(value) : this.setCheckedState(this.dataValue);
+        }
+        else {
+            return (value === '') ? this.dataValue : !!value;
+        }
+    }
+    get checked() {
+        if (this.component.name) {
+            return (this.dataValue === this.component.value);
+        }
+        return !!this.dataValue;
+    }
+    setCheckedState(value) {
+        if (!this.input) {
+            return;
+        }
+        if (this.component.name) {
+            this.input.value = (value === this.component.value) ? this.component.value : 0;
+            this.input.checked = (value === this.component.value) ? 1 : 0;
+        }
+        else if (value === 'on') {
+            this.input.value = 1;
+            this.input.checked = 1;
+        }
+        else if (value === 'off') {
+            this.input.value = 0;
+            this.input.checked = 0;
+        }
+        else if (value) {
+            this.input.value = 1;
+            this.input.checked = 1;
+        }
+        else {
+            this.input.value = 0;
+            this.input.checked = 0;
+        }
+        if (this.input.checked) {
+            this.input.setAttribute('checked', true);
+        }
+        else {
+            this.input.removeAttribute('checked');
+        }
+        return value;
+    }
+    setValue(value, flags = {}) {
+        if (this.setCheckedState(value) !== undefined ||
+            (!this.input && value !== undefined && (this.visible || this.conditionallyVisible() || !this.component.clearOnHide))) {
+            const changed = this.updateValue(value, flags);
+            if (this.isHtmlRenderMode() && flags && flags.fromSubmission && changed) {
+                this.redraw();
+            }
+            return changed;
+        }
+        return false;
+    }
+    getValueAsString(value) {
+        const { name: componentName, value: componentValue } = this.component;
+        const hasValue = componentName ? _.isEqual(value, componentValue) : value;
+        return this.t(hasValue ? 'Yes' : 'No');
+    }
+    updateValue(value, flags) {
+        // If this is a radio and is alredy checked, uncheck it.
+        if (this.component.name && flags.modified && (this.dataValue === this.component.value)) {
+            this.input.checked = 0;
+            this.input.value = 0;
+            this.dataValue = '';
+            this.updateOnChange(flags, true);
+        }
+        const changed = super.updateValue(value, flags);
+        // Update attributes of the input element
+        if (changed && this.input) {
+            if (this.input.checked) {
+                this.input.setAttribute('checked', 'true');
+            }
+            else {
+                this.input.removeAttribute('checked');
+            }
+        }
+        return changed;
+    }
+}

package/lib/mjs/components/checkbox/editForm/Checkbox.edit.data.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    key: string;
+    ignore: boolean;
+}[];
+export default _default;

package/lib/mjs/components/checkbox/editForm/Checkbox.edit.data.js

@@ -0,0 +1,6 @@
+export default [
+    {
+        key: 'multiple',
+        ignore: true
+    },
+];

package/lib/mjs/components/checkbox/editForm/Checkbox.edit.display.d.ts

@@ -0,0 +1,75 @@
+declare const _default: ({
+    key: string;
+    ignore: boolean;
+    type?: undefined;
+    input?: undefined;
+    weight?: undefined;
+    label?: undefined;
+    tooltip?: undefined;
+    dataSrc?: undefined;
+    valueProperty?: undefined;
+    customDefaultValue?: undefined;
+    template?: undefined;
+    data?: undefined;
+    conditional?: undefined;
+} | {
+    type: string;
+    input: boolean;
+    weight: number;
+    label: string;
+    key: string;
+    tooltip: string;
+    dataSrc: string;
+    valueProperty: string;
+    customDefaultValue: () => string;
+    template: string;
+    data: {
+        custom(context: any): {
+            label: string;
+            value: string;
+        }[];
+        values?: undefined;
+    };
+    ignore?: undefined;
+    conditional?: undefined;
+} | {
+    type: string;
+    input: boolean;
+    key: string;
+    label: string;
+    tooltip: string;
+    dataSrc: string;
+    weight: number;
+    data: {
+        values: {
+            label: string;
+            value: string;
+        }[];
+    };
+    ignore?: undefined;
+    valueProperty?: undefined;
+    customDefaultValue?: undefined;
+    template?: undefined;
+    conditional?: undefined;
+} | {
+    type: string;
+    input: boolean;
+    key: string;
+    label: string;
+    tooltip: string;
+    weight: number;
+    conditional: {
+        json: {
+            '===': (string | {
+                var: string;
+            })[];
+        };
+    };
+    ignore?: undefined;
+    dataSrc?: undefined;
+    valueProperty?: undefined;
+    customDefaultValue?: undefined;
+    template?: undefined;
+    data?: undefined;
+})[];
+export default _default;

package/lib/mjs/components/checkbox/editForm/Checkbox.edit.display.js

@@ -0,0 +1,74 @@
+import BuilderUtils from '../../../utils/builder';
+import _ from 'lodash';
+export default [
+    {
+        key: 'labelPosition',
+        ignore: true,
+    },
+    {
+        key: 'labelWidth',
+        ignore: true,
+    },
+    {
+        key: 'labelMargin',
+        ignore: true
+    },
+    {
+        key: 'placeholder',
+        ignore: true,
+    },
+    {
+        type: 'select',
+        input: true,
+        weight: 350,
+        label: 'Shortcut',
+        key: 'shortcut',
+        tooltip: 'Shortcut for this component.',
+        dataSrc: 'custom',
+        valueProperty: 'value',
+        customDefaultValue: () => '',
+        template: '{{ item.label }}',
+        data: {
+            custom(context) {
+                return BuilderUtils.getAvailableShortcuts(_.get(context, 'instance.options.editForm', {}), _.get(context, 'instance.options.editComponent', {}));
+            },
+        },
+    },
+    {
+        type: 'select',
+        input: true,
+        key: 'inputType',
+        label: 'Input Type',
+        tooltip: 'This is the input type used for this checkbox.',
+        dataSrc: 'values',
+        weight: 410,
+        data: {
+            values: [
+                { label: 'Checkbox', value: 'checkbox' },
+                { label: 'Radio', value: 'radio' },
+            ],
+        },
+    },
+    {
+        type: 'textfield',
+        input: true,
+        key: 'name',
+        label: 'Radio Key',
+        tooltip: 'The key used to trigger the radio button toggle.',
+        weight: 420,
+        conditional: {
+            json: { '===': [{ var: 'data.inputType' }, 'radio'] },
+        },
+    },
+    {
+        type: 'textfield',
+        input: true,
+        label: 'Radio Value',
+        key: 'value',
+        tooltip: 'The value used with this radio button.',
+        weight: 430,
+        conditional: {
+            json: { '===': [{ var: 'data.inputType' }, 'radio'] },
+        },
+    },
+];

package/lib/mjs/components/checkbox/editForm/Checkbox.edit.validation.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    key: string;
+    ignore: boolean;
+}[];
+export default _default;

package/lib/mjs/components/checkbox/editForm/Checkbox.edit.validation.js

@@ -0,0 +1,10 @@
+export default [
+    {
+        key: 'validateOn',
+        ignore: true
+    },
+    {
+        key: 'unique',
+        ignore: true
+    },
+];

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

@@ -0,0 +1,24 @@
+declare namespace _default {
+    export namespace conditional {
+        const eq: string;
+        const when: null;
+        const show: string;
+    }
+    export const tags: never[];
+    export const type: string;
+    export namespace validate {
+        const required: boolean;
+    }
+    export const persistent: boolean;
+    const _protected: boolean;
+    export { _protected as protected };
+    export const defaultValue: boolean;
+    export const key: string;
+    export const dataGridLabel: boolean;
+    export const label: string;
+    export const hideLabel: boolean;
+    export const tableView: boolean;
+    export const inputType: string;
+    export const input: boolean;
+}
+export default _default;

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

@@ -0,0 +1,22 @@
+export default {
+    'conditional': {
+        'eq': '',
+        'when': null,
+        'show': ''
+    },
+    'tags': [],
+    'type': 'checkbox',
+    'validate': {
+        'required': false
+    },
+    'persistent': true,
+    'protected': false,
+    'defaultValue': false,
+    'key': 'checkme',
+    'dataGridLabel': true,
+    'label': 'Check me',
+    'hideLabel': false,
+    'tableView': true,
+    'inputType': 'checkbox',
+    'input': true
+};