@formio/js 5.0.0-rc.5

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

@@ -0,0 +1,410 @@
+import EditFormUtils from './utils';
+import { getContextComponents } from '../../../../utils/utils';
+/* eslint-disable quotes, max-len */
+export default [
+    {
+        weight: 0,
+        input: true,
+        label: 'Advanced Logic',
+        key: 'logic',
+        templates: {
+            header: '<div class="row"> \n  <div class="col-sm-6">\n    <strong>{{ value.length }} {{ ctx.t("Advanced Logic Configured") }}</strong>\n  </div>\n</div>',
+            row: '<div class="row"> \n  <div class="col-sm-6">\n    <div>{{ row.name }} </div>\n  </div>\n  <div class="col-sm-2"> \n    <div class="btn-group pull-right"> \n      <button class="btn btn-default editRow">{{ ctx.t("Edit") }}</button> \n      <button class="btn btn-danger removeRow">{{ ctx.t("Delete") }}</button> \n    </div> \n  </div> \n</div>',
+            footer: '',
+        },
+        type: 'editgrid',
+        addAnother: 'Add Logic',
+        saveRow: 'Save Logic',
+        components: [
+            {
+                weight: 0,
+                input: true,
+                inputType: 'text',
+                label: 'Logic Name',
+                key: 'name',
+                validate: {
+                    required: true,
+                },
+                type: 'textfield',
+            },
+            {
+                weight: 10,
+                key: 'triggerPanel',
+                input: false,
+                title: 'Trigger',
+                tableView: false,
+                components: [
+                    {
+                        weight: 0,
+                        input: true,
+                        tableView: false,
+                        components: [
+                            {
+                                weight: 0,
+                                input: true,
+                                label: 'Type',
+                                key: 'type',
+                                tableView: false,
+                                data: {
+                                    values: [
+                                        {
+                                            value: 'simple',
+                                            label: 'Simple',
+                                        },
+                                        {
+                                            value: 'javascript',
+                                            label: 'Javascript',
+                                        },
+                                        {
+                                            value: 'json',
+                                            label: 'JSON Logic',
+                                        },
+                                        {
+                                            value: 'event',
+                                            label: 'Event',
+                                        },
+                                    ],
+                                },
+                                dataSrc: 'values',
+                                template: '<span>{{ item.label }}</span>',
+                                type: 'select',
+                            },
+                            {
+                                weight: 10,
+                                label: '',
+                                key: 'simple',
+                                type: 'container',
+                                tableView: false,
+                                customConditional({ row }) {
+                                    return row.type === 'simple';
+                                },
+                                components: [
+                                    {
+                                        input: true,
+                                        key: 'show',
+                                        label: 'Show',
+                                        type: 'hidden',
+                                        tableView: false,
+                                        calculateValue() {
+                                            return true;
+                                        },
+                                    },
+                                    {
+                                        type: 'select',
+                                        input: true,
+                                        label: 'When the form component:',
+                                        key: 'when',
+                                        dataSrc: 'custom',
+                                        valueProperty: 'value',
+                                        tableView: false,
+                                        data: {
+                                            custom(context) {
+                                                return getContextComponents(context);
+                                            },
+                                        },
+                                    },
+                                    {
+                                        type: 'textfield',
+                                        input: true,
+                                        label: 'Has the value:',
+                                        key: 'eq',
+                                        tableView: false,
+                                    },
+                                ],
+                            },
+                            {
+                                weight: 10,
+                                type: 'textarea',
+                                key: 'javascript',
+                                rows: 5,
+                                editor: 'ace',
+                                as: 'javascript',
+                                input: true,
+                                tableView: false,
+                                placeholder: `result = (data['mykey'] > 1);`,
+                                description: '"row", "data", and "component" variables are available. Return "result".',
+                                customConditional({ row }) {
+                                    return row.type === 'javascript';
+                                },
+                            },
+                            {
+                                weight: 10,
+                                type: 'textarea',
+                                key: 'json',
+                                rows: 5,
+                                editor: 'ace',
+                                label: 'JSON Logic',
+                                as: 'json',
+                                input: true,
+                                tableView: false,
+                                placeholder: `{ ... }`,
+                                description: '"row", "data", "component" and "_" variables are available. Return the result to be passed to the action if truthy.',
+                                customConditional({ row }) {
+                                    return row.type === 'json';
+                                },
+                            },
+                            {
+                                weight: 10,
+                                type: 'textfield',
+                                key: 'event',
+                                label: 'Event Name',
+                                placeholder: 'event',
+                                description: 'The event that will trigger this logic. You can trigger events externally or via a button.',
+                                tableView: false,
+                                customConditional({ row }) {
+                                    return row.type === 'event';
+                                },
+                            },
+                        ],
+                        key: 'trigger',
+                        type: 'container',
+                    },
+                ],
+                type: 'panel',
+            },
+            {
+                weight: 20,
+                input: true,
+                label: 'Actions',
+                key: 'actions',
+                tableView: false,
+                templates: {
+                    header: '<div class="row"> \n  <div class="col-sm-6"><strong>{{ value.length }} {{ ctx.t("actions") }}</strong></div>\n</div>',
+                    row: '<div class="row"> \n  <div class="col-sm-6">\n    <div>{{ row.name }} </div>\n  </div>\n  <div class="col-sm-2"> \n    <div class="btn-group pull-right"> \n      <button class="btn btn-default editRow">{{ ctx.t("Edit") }}</button> \n      <button class="btn btn-danger removeRow">{{ ctx.t("Delete") }}</button> \n    </div> \n  </div> \n</div>',
+                    footer: '',
+                },
+                type: 'editgrid',
+                addAnother: 'Add Action',
+                saveRow: 'Save Action',
+                components: [
+                    {
+                        weight: 0,
+                        title: 'Action',
+                        input: false,
+                        key: 'actionPanel',
+                        type: 'panel',
+                        components: [
+                            {
+                                weight: 0,
+                                input: true,
+                                inputType: 'text',
+                                label: 'Action Name',
+                                key: 'name',
+                                validate: {
+                                    required: true,
+                                },
+                                type: 'textfield',
+                            },
+                            {
+                                weight: 10,
+                                input: true,
+                                label: 'Type',
+                                key: 'type',
+                                data: {
+                                    values: [
+                                        {
+                                            value: 'property',
+                                            label: 'Property',
+                                        },
+                                        {
+                                            value: 'value',
+                                            label: 'Value',
+                                        },
+                                        {
+                                            label: 'Merge Component Schema',
+                                            value: 'mergeComponentSchema',
+                                        },
+                                        {
+                                            label: 'Custom Action',
+                                            value: 'customAction',
+                                        },
+                                    ],
+                                },
+                                dataSrc: 'values',
+                                template: '<span>{{ item.label }}</span>',
+                                type: 'select',
+                            },
+                            {
+                                weight: 20,
+                                type: 'select',
+                                template: '<span>{{ item.label }}</span>',
+                                dataSrc: 'json',
+                                tableView: false,
+                                data: {
+                                    json: [
+                                        {
+                                            label: 'Hidden',
+                                            value: 'hidden',
+                                            type: 'boolean',
+                                        },
+                                        {
+                                            label: 'Required',
+                                            value: 'validate.required',
+                                            type: 'boolean',
+                                        },
+                                        {
+                                            label: 'Disabled',
+                                            value: 'disabled',
+                                            type: 'boolean',
+                                        },
+                                        {
+                                            label: 'Label',
+                                            value: 'label',
+                                            type: 'string',
+                                        },
+                                        {
+                                            label: 'Title',
+                                            value: 'title',
+                                            type: 'string',
+                                        },
+                                        {
+                                            label: 'Prefix',
+                                            value: 'prefix',
+                                            type: 'string',
+                                        },
+                                        {
+                                            label: 'Suffix',
+                                            value: 'suffix',
+                                            type: 'string',
+                                        },
+                                        {
+                                            label: 'Tooltip',
+                                            value: 'tooltip',
+                                            type: 'string',
+                                        },
+                                        {
+                                            label: 'Description',
+                                            value: 'description',
+                                            type: 'string',
+                                        },
+                                        {
+                                            label: 'Placeholder',
+                                            value: 'placeholder',
+                                            type: 'string',
+                                        },
+                                        {
+                                            label: 'Input Mask',
+                                            value: 'inputMask',
+                                            type: 'string',
+                                        },
+                                        {
+                                            label: 'CSS Class',
+                                            value: 'className',
+                                            type: 'string',
+                                        },
+                                        {
+                                            label: 'Container Custom Class',
+                                            value: 'customClass',
+                                            type: 'string',
+                                        },
+                                    ],
+                                },
+                                key: 'property',
+                                label: 'Component Property',
+                                input: true,
+                                customConditional({ row }) {
+                                    return row.type === 'property';
+                                },
+                            },
+                            {
+                                weight: 30,
+                                input: true,
+                                label: 'Set State',
+                                key: 'state',
+                                tableView: false,
+                                data: {
+                                    values: [
+                                        {
+                                            label: 'True',
+                                            value: 'true',
+                                        },
+                                        {
+                                            label: 'False',
+                                            value: 'false',
+                                        },
+                                    ],
+                                },
+                                dataSrc: 'values',
+                                template: '<span>{{ item.label }}</span>',
+                                type: 'select',
+                                customConditional({ row }) {
+                                    return row.type === 'property' &&
+                                        row.hasOwnProperty('property') &&
+                                        row.property.type === 'boolean';
+                                },
+                            },
+                            {
+                                weight: 30,
+                                type: 'textfield',
+                                key: 'text',
+                                label: 'Text',
+                                inputType: 'text',
+                                input: true,
+                                tableView: false,
+                                description: 'Can use templating with {{ data.myfield }}. "data", "row", "component" and "result" variables are available.',
+                                customConditional({ row }) {
+                                    return row.type === 'property' &&
+                                        row.hasOwnProperty('property') &&
+                                        row.property.type === 'string' &&
+                                        !row.property.component;
+                                },
+                            },
+                            {
+                                weight: 20,
+                                input: true,
+                                label: 'Value (Javascript)',
+                                key: 'value',
+                                editor: 'ace',
+                                as: 'javascript',
+                                rows: 5,
+                                placeholder: `value = data.myfield;`,
+                                type: 'textarea',
+                                tableView: false,
+                                description: '"row", "data", "component", and "result" variables are available. Return the value.',
+                                customConditional({ row }) {
+                                    return row.type === 'value';
+                                },
+                            },
+                            {
+                                weight: 20,
+                                input: true,
+                                label: 'Schema Defenition',
+                                key: 'schemaDefinition',
+                                editor: 'ace',
+                                as: 'javascript',
+                                rows: 5,
+                                placeholder: `schema = { label: 'Updated' };`,
+                                type: 'textarea',
+                                tableView: false,
+                                description: '"row", "data", "component", and "result" variables are available. Return the schema.',
+                                customConditional({ row }) {
+                                    return row.type === 'mergeComponentSchema';
+                                },
+                            },
+                            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,
+                                input: true,
+                                label: 'Custom Action (Javascript)',
+                                key: 'customAction',
+                                editor: 'ace',
+                                rows: 5,
+                                placeholder: `value = data.myfield;`,
+                                type: 'textarea',
+                                tableView: false,
+                                customConditional({ row }) {
+                                    return row.type === 'customAction';
+                                },
+                            },
+                        ],
+                    },
+                ],
+            },
+        ],
+    },
+];
+/* eslint-enable quotes, max-len */

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

@@ -0,0 +1,140 @@
+declare const _default: ({
+    weight: number;
+    type: string;
+    label: string;
+    tooltip: string;
+    key: string;
+    input: boolean;
+    defaultValue?: undefined;
+    dataSrc?: undefined;
+    data?: undefined;
+    placeholder?: undefined;
+    title?: undefined;
+    collapsible?: undefined;
+    collapsed?: undefined;
+    style?: undefined;
+    components?: undefined;
+} | {
+    weight: number;
+    type: string;
+    key: string;
+    defaultValue: string;
+    input: boolean;
+    label: string;
+    tooltip: string;
+    dataSrc: string;
+    data: {
+        values: {
+            label: string;
+            value: string;
+        }[];
+    };
+    placeholder?: undefined;
+    title?: undefined;
+    collapsible?: undefined;
+    collapsed?: undefined;
+    style?: undefined;
+    components?: undefined;
+} | {
+    weight: number;
+    type: string;
+    input: boolean;
+    key: string;
+    label: string;
+    placeholder: string;
+    tooltip: string;
+    defaultValue?: undefined;
+    dataSrc?: undefined;
+    data?: undefined;
+    title?: undefined;
+    collapsible?: undefined;
+    collapsed?: undefined;
+    style?: undefined;
+    components?: undefined;
+} | {
+    type: string;
+    title: string;
+    collapsible: boolean;
+    collapsed: boolean;
+    style: {
+        'margin-bottom': string;
+    };
+    key: string;
+    weight: number;
+    customConditional(): boolean;
+    components: ({
+        type: string;
+        tag: string;
+        content: string;
+    } | {
+        type: string;
+        key: string;
+        rows: number;
+        editor: string;
+        hideLabel: boolean;
+        as: string;
+        input: boolean;
+        components?: undefined;
+    } | {
+        type: string;
+        components: {
+            weight: number;
+            type: string;
+            label: string;
+            tooltip: string;
+            description: string;
+            key: string;
+            input: boolean;
+        }[];
+        key?: undefined;
+        rows?: undefined;
+        editor?: undefined;
+        hideLabel?: undefined;
+        as?: undefined;
+        input?: undefined;
+    })[];
+    label?: undefined;
+    tooltip?: undefined;
+    input?: undefined;
+    defaultValue?: undefined;
+    dataSrc?: undefined;
+    data?: undefined;
+    placeholder?: undefined;
+} | {
+    type: string;
+    title: string;
+    collapsible: boolean;
+    collapsed: boolean;
+    key: string;
+    weight: number;
+    components: ({
+        type: string;
+        tag: string;
+        content: string;
+        key?: undefined;
+        hideLabel?: undefined;
+        rows?: undefined;
+        editor?: undefined;
+        as?: undefined;
+        input?: undefined;
+    } | {
+        type: string;
+        key: string;
+        hideLabel: boolean;
+        rows: number;
+        editor: string;
+        as: string;
+        input: boolean;
+        tag?: undefined;
+        content?: undefined;
+    })[];
+    label?: undefined;
+    tooltip?: undefined;
+    input?: undefined;
+    defaultValue?: undefined;
+    dataSrc?: undefined;
+    data?: undefined;
+    placeholder?: undefined;
+    style?: undefined;
+})[];
+export default _default;