nuxeo-development-framework 3.1.6 → 3.1.8

package/src/lib/components/dynamic-form/components/form-wrappers/base-edit-form/base-edit-form.ts

@@ -1,780 +0,0 @@
-import { Components } from 'formiojs';
-import { cloneDeep, unionWith, each, filter, sortBy, isEqual } from 'lodash';
-
-export const baseDisplay = [
-  {
-    weight: 0,
-    type: 'textfield',
-    input: true,
-    hidden: true,
-    key: 'key',
-    label: 'Property Name',
-    tooltip: 'The name of this field in the API endpoint.',
-    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
-    }
-  },
-  {
-    weight: 0,
-    type: 'textfield',
-    input: true,
-    key: 'label',
-    label: 'Label - English',
-    placeholder: 'Field Label',
-    tooltip: 'The label for this field that will appear next to it.',
-    validate: {
-      required: true
-    }
-  },
-  {
-    weight: 10,
-    type: 'textfield',
-    input: true,
-    key: 'labelAr',
-    label: 'Label - Arabic',
-    placeholder: 'Field Label',
-    tooltip: 'The label for this field that will appear next to it.',
-    validate: {
-      required: true
-    }
-  },
-  {
-    type: 'select',
-    input: true,
-    key: 'labelPosition',
-    label: 'Label Position',
-    tooltip: 'Position for the label for this field.',
-    weight: 20,
-    defaultValue: 'top',
-    dataSrc: 'values',
-    data: {
-      values: [
-        {
-          label: 'Top',
-          value: 'top'
-        },
-        {
-          label: 'Left (Left-aligned)',
-          value: 'left-left'
-        },
-        {
-          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'
-        }
-      ]
-    }
-  },
-  {
-    type: 'number',
-    input: true,
-    key: 'labelWidth',
-    label: 'Label Width',
-    tooltip: 'The width of label on line in percentages.',
-    clearOnHide: false,
-    weight: 30,
-    placeholder: '30',
-    suffix: '%',
-    validate: {
-      min: 0,
-      max: 100
-    },
-    conditional: {
-      json: {
-        and: [
-          {
-            '!==': [
-              {
-                var: 'data.labelPosition'
-              },
-              'top'
-            ]
-          },
-          {
-            '!==': [
-              {
-                var: 'data.labelPosition'
-              },
-              'bottom'
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    type: 'number',
-    input: true,
-    key: 'labelMargin',
-    label: 'Label Margin',
-    tooltip: 'The width of label margin on line in percentages.',
-    clearOnHide: false,
-    weight: 30,
-    placeholder: '3',
-    suffix: '%',
-    validate: {
-      min: 0,
-      max: 100
-    },
-    conditional: {
-      json: {
-        and: [
-          {
-            '!==': [
-              {
-                var: 'data.labelPosition'
-              },
-              'top'
-            ]
-          },
-          {
-            '!==': [
-              {
-                var: 'data.labelPosition'
-              },
-              'bottom'
-            ]
-          }
-        ]
-      }
-    }
-  },
-  {
-    weight: 200,
-    type: 'textarea',
-    input: true,
-    key: 'description',
-    label: 'Description - English',
-    placeholder: 'Description for this field.',
-    tooltip: 'The description is text that will appear below the input field.',
-    editor: 'ace',
-    as: 'html',
-    wysiwyg: {
-      minLines: 3,
-      isUseWorkerDisabled: true
-    }
-  },
-  {
-    weight: 200,
-    type: 'textarea',
-    input: true,
-    key: 'descriptionAr',
-    label: 'Description - Arabic',
-    placeholder: 'Description for this field.',
-    tooltip: 'The description is text that will appear below the input field.',
-    editor: 'ace',
-    as: 'html',
-    wysiwyg: {
-      minLines: 3,
-      isUseWorkerDisabled: true
-    }
-  },
-  {
-    weight: 300,
-    type: 'textarea',
-    input: true,
-    key: 'tooltip',
-    label: 'Tooltip - English',
-    placeholder: 'To add a tooltip to this field, enter text here.',
-    tooltip: 'Adds a tooltip to the side of this field.',
-    editor: 'ace',
-    as: 'html',
-    wysiwyg: {
-      minLines: 3,
-      isUseWorkerDisabled: true
-    }
-  },
-  {
-    weight: 300,
-    type: 'textarea',
-    input: true,
-    key: 'tooltipAr',
-    label: 'Tooltip - Arabic',
-    placeholder: 'To add a tooltip to this field, enter text here.',
-    tooltip: 'Adds a tooltip to the side of this field.',
-    editor: 'ace',
-    as: 'html',
-    wysiwyg: {
-      minLines: 3,
-      isUseWorkerDisabled: true
-    }
-  },
-  {
-    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>'
-  },
-  {
-    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., ˍ<br>Make note that placeholder char will be replaced by a space if it is used inside the mask',
-    validation: {
-      maxLength: 1
-    }
-  },
-
-  {
-    weight: 1100,
-    type: 'checkbox',
-    label: 'Hidden',
-    tooltip: 'A hidden field is still a part of the form, but is hidden from view.',
-    key: 'hidden',
-    input: true
-  },
-  {
-    weight: 1200,
-    type: 'checkbox',
-    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
-  },
-
-  {
-    weight: 1400,
-    type: 'checkbox',
-    label: 'Disabled',
-    tooltip: 'Disable the form input.',
-    key: 'disabled',
-    input: true
-  }
-
-];
-export const baseData = [
-  {
-    weight: 0,
-    type: 'checkbox',
-    label: 'Multiple Values',
-    tooltip: 'Allows multiple values to be entered for this field.',
-    key: 'multiple',
-    input: true
-  },
-  {
-    type: 'textfield',
-    label: 'Default Value',
-    key: 'defaultValue',
-    weight: 5,
-    placeholder: 'Default Value',
-    tooltip: 'The will be the value for this field, before user interaction. Having a default value will override the placeholder text.',
-    input: true
-  },
-
-  {
-    type: 'select',
-    input: true,
-    key: 'redrawOn',
-    label: 'Redraw On',
-    weight: 600,
-    tooltip: 'Redraw this component if another component changes. This is useful if interpolating parts of the component like the label.',
-    dataSrc: 'custom',
-    valueProperty: 'value',
-    data: {},
-    conditional: {
-      json: {
-        '!': [
-          {
-            var: 'data.dataSrc'
-          }
-        ]
-      }
-    }
-  },
-  {
-    weight: 700,
-    type: 'checkbox',
-    label: 'Clear Value When Hidden',
-    key: 'clearOnHide',
-    defaultValue: true,
-    tooltip: 'When a field is hidden, clear the value.',
-    input: true
-  },
-  {
-    type: 'panel',
-    title: 'Custom Default Value',
-    theme: 'default',
-    collapsible: true,
-    collapsed: true,
-    key: 'customDefaultValuePanel',
-    weight: 1000,
-    components: [
-      {
-        type: 'htmlelement',
-        tag: 'div',
-        content: '<p>The following variables are available in all scripts.</p><table class="table table-bordered table-condensed table-striped"><tr><th>form</th><td>The complete form JSON object</td></tr><tr><th>submission</th><td>The complete submission object.</td></tr><tr><th>data</th><td>The complete submission data object.</td></tr><tr><th>row</th><td>Contextual "row" data, used within DataGrid, EditGrid, and Container components</td></tr><tr><th>component</th><td>The current component JSON</td></tr><tr><th>instance</th><td>The current component instance.</td></tr><tr><th>value</th><td>The current value of the component.</td></tr><tr><th>moment</th><td>The moment.js library for date manipulation.</td></tr><tr><th>_</th><td>An instance of <a href="https://lodash.com/docs/" target="_blank">Lodash</a>.</td></tr><tr><th>utils</th><td>An instance of the <a href="http://formio.github.io/formio.js/docs/identifiers.html#utils" target="_blank">FormioUtils</a> object.</td></tr><tr><th>util</th><td>An alias for "utils".</td></tr></table><br/>'
-      },
-      {
-        type: 'panel',
-        title: 'JavaScript',
-        collapsible: true,
-        collapsed: false,
-        style: {
-          'margin-bottom': '10px'
-        },
-        key: 'customDefaultValue-js',
-        components: [
-          {
-            type: 'textarea',
-            key: 'customDefaultValue',
-            rows: 5,
-            editor: 'ace',
-            hideLabel: true,
-            as: 'javascript',
-            input: true
-          },
-          {
-            type: 'htmlelement',
-            tag: 'div',
-            content: '<p>Enter custom javascript code.</p><p><h4>Example:</h4><pre>value = data.firstName + " " + data.lastName;</pre></p>'
-          }
-        ]
-      },
-      {
-        type: 'panel',
-        title: 'JSONLogic',
-        collapsible: true,
-        collapsed: true,
-        key: 'customDefaultValue-json',
-        components: [
-          {
-            type: 'htmlelement',
-            tag: 'div',
-            content: '<p>Execute custom logic using <a href="http://jsonlogic.com/" target="_blank">JSONLogic</a>.</p><p>Full <a href="https://lodash.com/docs" target="_blank">Lodash</a> support is provided using an "_" before each operation, such as <code>{"_sum": {var: "data.a"}}</code></p><p><h4>Example:</h4><pre>{"cat": [{"var": "data.firstName"}, " ", {"var": "data.lastName"}]}</pre>'
-          },
-          {
-            type: 'textarea',
-            key: 'customDefaultValue',
-            rows: 5,
-            editor: 'ace',
-            hideLabel: true,
-            as: 'json',
-            input: true
-          }
-        ]
-      }
-    ]
-  },
-  {
-    type: 'panel',
-    title: 'Calculated Value',
-    theme: 'default',
-    collapsible: true,
-    collapsed: true,
-    key: 'calculateValuePanel',
-    weight: 1100,
-    components: [
-      {
-        type: 'htmlelement',
-        tag: 'div',
-        content: '<p>The following variables are available in all scripts.</p><table class="table table-bordered table-condensed table-striped"><tr><th>token</th><td>The decoded JWT token for the authenticated user.</td></tr><tr><th>form</th><td>The complete form JSON object</td></tr><tr><th>submission</th><td>The complete submission object.</td></tr><tr><th>data</th><td>The complete submission data object.</td></tr><tr><th>row</th><td>Contextual "row" data, used within DataGrid, EditGrid, and Container components</td></tr><tr><th>component</th><td>The current component JSON</td></tr><tr><th>instance</th><td>The current component instance.</td></tr><tr><th>value</th><td>The current value of the component.</td></tr><tr><th>moment</th><td>The moment.js library for date manipulation.</td></tr><tr><th>_</th><td>An instance of <a href="https://lodash.com/docs/" target="_blank">Lodash</a>.</td></tr><tr><th>utils</th><td>An instance of the <a href="http://formio.github.io/formio.js/docs/identifiers.html#utils" target="_blank">FormioUtils</a> object.</td></tr><tr><th>util</th><td>An alias for "utils".</td></tr></table><br/>'
-      },
-      {
-        type: 'panel',
-        title: 'JavaScript',
-        collapsible: true,
-        collapsed: false,
-        style: {
-          'margin-bottom': '10px'
-        },
-        key: 'calculateValue-js',
-        components: [
-          {
-            type: 'textarea',
-            key: 'calculateValue',
-            rows: 5,
-            editor: 'ace',
-            hideLabel: true,
-            as: 'javascript',
-            input: true
-          },
-          {
-            type: 'htmlelement',
-            tag: 'div',
-            content: '<p>Enter custom javascript code.</p><p><h4>Example:</h4><pre>value = data.a + data.b + data.c;</pre></p>'
-          }
-        ]
-      },
-      {
-        type: 'panel',
-        title: 'JSONLogic',
-        collapsible: true,
-        collapsed: true,
-        key: 'calculateValue-json',
-        components: [
-          {
-            type: 'htmlelement',
-            tag: 'div',
-            content: '<p>Execute custom logic using <a href="http://jsonlogic.com/" target="_blank">JSONLogic</a>.</p><p>Full <a href="https://lodash.com/docs" target="_blank">Lodash</a> support is provided using an "_" before each operation, such as <code>{"_sum": {var: "data.a"}}</code></p><p><h4>Example:</h4><pre>{"+": [{"var": "data.a"}, {"var": "data.b"}, {"var": "data.c"}]}</pre><p><a target="_blank" href="http://formio.github.io/formio.js/app/examples/calculated.html">Click here for an example</a></p>'
-          },
-          {
-            type: 'textarea',
-            key: 'calculateValue',
-            rows: 5,
-            editor: 'ace',
-            hideLabel: true,
-            as: 'json',
-            input: true
-          }
-        ]
-      }
-    ]
-  },
-
-  {
-    type: 'checkbox',
-    input: true,
-    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.'
-  }
-];
-export const baseValidation = [
-  {
-    weight: 0,
-    type: 'select',
-    key: 'validateOn',
-    defaultValue: 'change',
-    input: true,
-    label: 'Validate On',
-    tooltip: 'Determines when this component should trigger front-end validation.',
-    dataSrc: 'values',
-    data: {
-      values: [
-        {
-          label: 'Change',
-          value: 'change'
-        },
-        {
-          label: 'Blur',
-          value: 'blur'
-        }
-      ]
-    }
-  },
-  {
-    weight: 10,
-    type: 'checkbox',
-    label: 'Required',
-    tooltip: 'A required field must be filled in before the form can be submitted.',
-    key: 'validate.required',
-    input: true
-  },
-  {
-    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
-  },
-
-  {
-    weight: 200,
-    key: 'validate.customMessage',
-    label: 'Custom Error Message',
-    placeholder: 'Custom Error Message',
-    type: 'textfield',
-    tooltip: 'Error message displayed if any error occurred.',
-    input: true
-  },
-  {
-    type: 'panel',
-    title: 'Custom Validation',
-    collapsible: true,
-    collapsed: true,
-    style: {
-      'margin-bottom': '10px'
-    },
-    key: 'custom-validation-js',
-    weight: 300,
-    components: [
-      {
-        type: 'htmlelement',
-        tag: 'div',
-        content: '<p>The following variables are available in all scripts.</p><table class="table table-bordered table-condensed table-striped"><tr><th>input</th><td>The value that was input into this component</td></tr><tr><th>form</th><td>The complete form JSON object</td></tr><tr><th>submission</th><td>The complete submission object.</td></tr><tr><th>data</th><td>The complete submission data object.</td></tr><tr><th>row</th><td>Contextual "row" data, used within DataGrid, EditGrid, and Container components</td></tr><tr><th>component</th><td>The current component JSON</td></tr><tr><th>instance</th><td>The current component instance.</td></tr><tr><th>value</th><td>The current value of the component.</td></tr><tr><th>moment</th><td>The moment.js library for date manipulation.</td></tr><tr><th>_</th><td>An instance of <a href="https://lodash.com/docs/" target="_blank">Lodash</a>.</td></tr><tr><th>utils</th><td>An instance of the <a href="http://formio.github.io/formio.js/docs/identifiers.html#utils" target="_blank">FormioUtils</a> object.</td></tr><tr><th>util</th><td>An alias for "utils".</td></tr></table><br/>'
-      },
-      {
-        type: 'textarea',
-        key: 'validate.custom',
-        rows: 5,
-        editor: 'ace',
-        hideLabel: true,
-        as: 'javascript',
-        input: true
-      },
-      {
-        type: 'htmlelement',
-        tag: 'div',
-        content: '\n          <small>\n            <p>Enter custom validation code.</p>\n            <p>You must assign the <strong>valid</strong> variable as either <strong>true</strong> or an error message if validation fails.</p>\n            <h5>Example:</h5>\n            <pre>valid = (input === \'Joe\') ? true : \'Your name must be "Joe"\';</pre>\n          </small>'
-      }
-    ]
-  },
-  {
-    type: 'panel',
-    title: 'JSONLogic Validation',
-    collapsible: true,
-    collapsed: true,
-    key: 'json-validation-json',
-    weight: 400,
-    components: [
-      {
-        type: 'htmlelement',
-        tag: 'div',
-        content: '<p>Execute custom logic using <a href="http://jsonlogic.com/" target="_blank">JSONLogic</a>.</p><h5>Example:</h5><pre>{\n  "if": [\n    {\n      "===": [\n        {\n          "var": "input"\n        },\n        "Bob"\n      ]\n    },\n    true,\n    "Your name must be \'Bob\'!"\n  ]\n}</pre>'
-      },
-      {
-        type: 'textarea',
-        key: 'validate.json',
-        hideLabel: true,
-        rows: 5,
-        editor: 'ace',
-        as: 'json',
-        input: true
-      }
-    ]
-  }
-];
-export const baseConditional = [
-  {
-    type: 'panel',
-    title: 'Simple',
-    key: 'simple-conditional',
-    theme: 'default',
-    components: [
-      {
-        type: 'select',
-        input: true,
-        label: 'This component should Display:',
-        key: 'conditional.show',
-        dataSrc: 'values',
-        data: {
-          values: [
-            {
-              label: 'True',
-              value: 'true'
-            },
-            {
-              label: 'False',
-              value: 'false'
-            }
-          ]
-        }
-      },
-      {
-        type: 'select',
-        input: true,
-        label: 'When the form component:',
-        key: 'conditional.when',
-        dataSrc: 'custom',
-        valueProperty: 'value',
-        data: {}
-      },
-      {
-        type: 'textfield',
-        input: true,
-        label: 'Has the value:',
-        key: 'conditional.eq'
-      }
-    ]
-  },
-  {
-    type: 'panel',
-    title: 'Advanced Conditions',
-    theme: 'default',
-    collapsible: true,
-    collapsed: true,
-    key: 'customConditionalPanel',
-    weight: 110,
-    components: [
-      {
-        type: 'htmlelement',
-        tag: 'div',
-        content: '<p>The following variables are available in all scripts.</p><table class="table table-bordered table-condensed table-striped"><tr><th>form</th><td>The complete form JSON object</td></tr><tr><th>submission</th><td>The complete submission object.</td></tr><tr><th>data</th><td>The complete submission data object.</td></tr><tr><th>row</th><td>Contextual "row" data, used within DataGrid, EditGrid, and Container components</td></tr><tr><th>component</th><td>The current component JSON</td></tr><tr><th>instance</th><td>The current component instance.</td></tr><tr><th>value</th><td>The current value of the component.</td></tr><tr><th>moment</th><td>The moment.js library for date manipulation.</td></tr><tr><th>_</th><td>An instance of <a href="https://lodash.com/docs/" target="_blank">Lodash</a>.</td></tr><tr><th>utils</th><td>An instance of the <a href="http://formio.github.io/formio.js/docs/identifiers.html#utils" target="_blank">FormioUtils</a> object.</td></tr><tr><th>util</th><td>An alias for "utils".</td></tr></table><br/>'
-      },
-      {
-        type: 'panel',
-        title: 'JavaScript',
-        collapsible: true,
-        collapsed: false,
-        style: {
-          'margin-bottom': '10px'
-        },
-        key: 'customConditional-js',
-        components: [
-          {
-            type: 'textarea',
-            key: 'customConditional',
-            rows: 5,
-            editor: 'ace',
-            hideLabel: true,
-            as: 'javascript',
-            input: true
-          },
-          {
-            type: 'htmlelement',
-            tag: 'div',
-            content: '<p>Enter custom javascript code.</p><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>'
-          }
-        ]
-      },
-      {
-        type: 'panel',
-        title: 'JSONLogic',
-        collapsible: true,
-        collapsed: true,
-        key: 'customConditional-json',
-        components: [
-          {
-            type: 'htmlelement',
-            tag: 'div',
-            content: '<p>Execute custom logic using <a href="http://jsonlogic.com/" target="_blank">JSONLogic</a>.</p><p>Full <a href="https://lodash.com/docs" target="_blank">Lodash</a> support is provided using an "_" before each operation, such as <code>{"_sum": {var: "data.a"}}</code></p><p><a href="http://formio.github.io/formio.js/app/examples/conditions.html" target="_blank">Click here for an example</a></p>'
-          },
-          {
-            type: 'textarea',
-            key: 'conditional.json',
-            rows: 5,
-            editor: 'ace',
-            hideLabel: true,
-            as: 'json',
-            input: true
-          }
-        ]
-      }
-    ]
-  }
-];
-const sortAndFilterComponents = (components) => {
-  return filter(sortBy(components, 'weight'), (item) => !item.ignore);
-};
-const unifyComponents = (objValue, srcValue) => {
-  if (objValue.key && srcValue.key) {
-    if (objValue.skipMerge || srcValue.skipMerge) {
-      return false;
-    }
-    if (objValue.key === srcValue.key) {
-      // Create complete objects by including missing keys.
-      each(objValue, (value, prop) => {
-        if (objValue.overrideEditForm || !srcValue.hasOwnProperty(prop)) {
-          srcValue[prop] = value;
-        }
-      });
-      each(srcValue, (value, prop) => {
-        if (srcValue.overrideEditForm || !objValue.hasOwnProperty(prop)) {
-          objValue[prop] = value;
-        }
-      });
-
-      if (objValue.components) {
-        srcValue.components = sortAndFilterComponents(
-          unionWith(objValue.components, srcValue.components, unifyComponents)
-        );
-      }
-      return true;
-    }
-    else {
-      return false;
-    }
-  }
-  return isEqual(objValue, srcValue);
-};
-export const baseEditForm = (...extend) => {
-
-  const components = cloneDeep([
-    {
-      type: 'tabs',
-      key: 'tabs',
-      components: [{
-        key: 'display',
-        components: baseDisplay,
-        label: 'Display',
-        weight: 0
-      },
-      {
-        key: 'data',
-        components: baseData,
-        label: 'Data',
-        weight: 10
-      },
-      {
-        key: 'validation',
-        components: baseValidation,
-        label: 'Validation',
-        weight: 20
-      },
-      {
-        label: 'Conditional',
-        key: 'conditional',
-        weight: 40,
-        components: baseConditional
-      }
-      ]
-    }
-  ]).concat(extend.map((items) => ({
-    type: 'tabs',
-    key: 'tabs',
-    components: cloneDeep(items),
-  })));
-  
-  return {
-    components: unionWith(components, unifyComponents).concat({
-      type: 'hidden',
-      key: 'type'
-    })
-  };
-};