@next-core/brick-kit 2.122.4 → 2.122.7

package/dist/index.bundle.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@babel/runtime/helpers/asyncToGenerator'), require('@babel/runtime/helpers/defineProperty'), require('@babel/runtime/helpers/objectSpread2'), require('antd'), require('@next-core/easyops-analytics'), require('react'), require('@next-core/brick-http'), require('@ant-design/icons'), require('i18next'), require('history'), require('@babel/runtime/helpers/objectWithoutProperties'), require('@next-core/brick-utils'), require('lodash'), require('moment'), require('@next-core/pipes'), require('js-yaml'), require('react-i18next'), require('@babel/runtime/helpers/esm/extends'), require('@next-core/illustrations'), require('@babel/runtime/helpers/decorate')) :
   typeof define === 'function' && define.amd ? define(['exports', '@babel/runtime/helpers/asyncToGenerator', '@babel/runtime/helpers/defineProperty', '@babel/runtime/helpers/objectSpread2', 'antd', '@next-core/easyops-analytics', 'react', '@next-core/brick-http', '@ant-design/icons', 'i18next', 'history', '@babel/runtime/helpers/objectWithoutProperties', '@next-core/brick-utils', 'lodash', 'moment', '@next-core/pipes', 'js-yaml', 'react-i18next', '@babel/runtime/helpers/esm/extends', '@next-core/illustrations', '@babel/runtime/helpers/decorate'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.BrickKit = {}, global._asyncToGenerator$4, global._defineProperty$1, global._objectSpread, global.antd, global.easyopsAnalytics, global.React, global.brickHttp, global.icons, global.i18next, global.history$1, global._objectWithoutProperties, global.brickUtils, global.lodash, global.moment, global.pipes, global.yaml, global.reactI18next, global._extends, global.illustrations, global._decorate));
-})(this, (function (exports, _asyncToGenerator$4, _defineProperty$1, _objectSpread, antd, easyopsAnalytics, React, brickHttp, icons, i18next, history$1, _objectWithoutProperties, brickUtils, lodash, moment, pipes, yaml, reactI18next, _extends, illustrations, _decorate) { 'use strict';
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.BrickKit = {}, global._asyncToGenerator$4, global._defineProperty$1, global._objectSpread, global.antd, global.easyopsAnalytics, global.React, global.brickHttp, global.icons, global.i18next, global.history$1, global._objectWithoutProperties, global.brickUtils, global._, global.moment, global.pipes, global.yaml, global.reactI18next, global._extends, global.illustrations, global._decorate));
+})(this, (function (exports, _asyncToGenerator$4, _defineProperty$1, _objectSpread, antd, easyopsAnalytics, React, brickHttp, icons, i18next, history$1, _objectWithoutProperties, brickUtils, _, moment, pipes, yaml, reactI18next, _extends, illustrations, _decorate) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -12,7 +12,7 @@
   var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
   var i18next__default = /*#__PURE__*/_interopDefaultLegacy(i18next);
   var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
-  var lodash__default = /*#__PURE__*/_interopDefaultLegacy(lodash);
+  var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
   var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
   var yaml__default = /*#__PURE__*/_interopDefaultLegacy(yaml);
   var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
@@ -607,7 +607,7 @@
         return delegateMethods(Object, ["entries", "fromEntries", "keys", "values"]);
 
       case "_":
-        return Object.fromEntries(Object.entries(lodash__default["default"]).filter(entry => !shouldOmitInLodash.has(entry[0])).concat(mock ? [["uniqueId", prefix => "".concat(prefix !== null && prefix !== void 0 ? prefix : "", "42")]] : []));
+        return Object.fromEntries(Object.entries(___default["default"]).filter(entry => !shouldOmitInLodash.has(entry[0])).concat(mock ? [["uniqueId", prefix => "".concat(prefix !== null && prefix !== void 0 ? prefix : "", "42")]] : []));
 
       case "moment":
         return Object.assign(function () {
@@ -936,7 +936,7 @@
     var result = preprocessTransformProperties(data, to, from, mapArray, options);
 
     for (var [propName, propValue] of Object.entries(result)) {
-      lodash.set(props, propName, propValue);
+      _.set(props, propName, propValue);
     }
 
     return props;
@@ -1037,7 +1037,7 @@
 
   function preprocessTransformProperties(data, to, from, mapArray, options) {
     var props = {};
-    var processedData = from ? lodash.get(data, from) : data;
+    var processedData = from ? _.get(data, from) : data;
 
     if (Array.isArray(to)) {
       for (var item of to) {
@@ -1080,7 +1080,7 @@
       return;
     }
 
-    var fromData = from ? lodash.get(data, from) : data;
+    var fromData = from ? _.get(data, from) : data;
     var isArray = Array.isArray(fromData);
 
     if (!isArray && mapArray === true) {
@@ -1108,7 +1108,7 @@
 
 
   function transformIntermediateData(data, to, from, mapArray) {
-    var intermediateData = from ? lodash.get(data, from) : data;
+    var intermediateData = from ? _.get(data, from) : data;
 
     if (!to) {
       return intermediateData;
@@ -1418,7 +1418,7 @@
   function _validatePermissions() {
     _validatePermissions = _asyncToGenerator__default["default"](function* (usedActions) {
       // Do not request known actions.
-      var actions = lodash.difference(usedActions, Array.from(permissionMap.keys()));
+      var actions = _.difference(usedActions, Array.from(permissionMap.keys()));
 
       if (actions.length === 0) {
         return;
@@ -1553,7 +1553,7 @@
         return collectCoverage ? fakeImageFactory() : widgetId ? widgetImagesFactory(widgetId) : imagesFactory(app.id, app.isBuildPush);
 
       case "I18N":
-        return collectCoverage ? lodash.identity : widgetId ? widgetI18nFactory(widgetId) : i18next.getFixedT(null, getI18nNamespace("app", app.id));
+        return collectCoverage ? _.identity : widgetId ? widgetI18nFactory(widgetId) : i18next.getFixedT(null, getI18nNamespace("app", app.id));
 
       case "I18N_TEXT":
         return collectCoverage ? fakeI18nText : i18nText;
@@ -2132,7 +2132,7 @@
 
       _defineProperty__default["default"](this, "state", void 0);
 
-      _defineProperty__default["default"](this, "id", lodash.uniqueId("tpl-ctx-"));
+      _defineProperty__default["default"](this, "id", _.uniqueId("tpl-ctx-"));
 
       this.brick = brick;
       tplContextMap.set(this.id, this);
@@ -2364,7 +2364,7 @@
           return hash ? hash.substr(1) : null;
 
         case "APP":
-          return _objectSpread__default["default"](_objectSpread__default["default"]({}, lodash.cloneDeep(app)), {}, {
+          return _objectSpread__default["default"](_objectSpread__default["default"]({}, _.cloneDeep(app)), {}, {
             getMenu
           });
 
@@ -2558,7 +2558,7 @@
   }
 
   function propertyMergeAllOfArray(_ref, object) {
-    var _, _proxy$mergeArgs;
+    var _$1, _proxy$mergeArgs;
 
     var {
       baseValue,
@@ -2592,14 +2592,14 @@
 
         case "insertAt":
           // Defaults to `-1`.
-          position = (_ = (_proxy$mergeArgs = proxy.mergeArgs) === null || _proxy$mergeArgs === void 0 ? void 0 : _proxy$mergeArgs[0]) !== null && _ !== void 0 ? _ : -1;
+          position = (_$1 = (_proxy$mergeArgs = proxy.mergeArgs) === null || _proxy$mergeArgs === void 0 ? void 0 : _proxy$mergeArgs[0]) !== null && _$1 !== void 0 ? _$1 : -1;
 
           if (position < 0) {
             // It's counted from the end if position is negative.
             position += quasis.length;
           }
 
-          position = lodash.clamp(position, 0, computedBaseValue.length);
+          position = _.clamp(position, 0, computedBaseValue.length);
           break;
         // istanbul ignore next: should never reach
 
@@ -2704,7 +2704,7 @@
 
           var expandableSlot = quasisMap.get(item.refSlot);
           var refPosition = (_item$refPosition = item.refPosition) !== null && _item$refPosition !== void 0 ? _item$refPosition : -1;
-          expandableSlot[lodash.clamp(refPosition < 0 ? expandableSlot.length + refPosition : refPosition, 0, expandableSlot.length - 1)].push(...((_externalSlots$item$$ = externalSlots === null || externalSlots === void 0 ? void 0 : (_externalSlots$item$$2 = externalSlots[item.$$reversedRef]) === null || _externalSlots$item$$2 === void 0 ? void 0 : _externalSlots$item$$2.bricks) !== null && _externalSlots$item$$ !== void 0 ? _externalSlots$item$$ : []));
+          expandableSlot[_.clamp(refPosition < 0 ? expandableSlot.length + refPosition : refPosition, 0, expandableSlot.length - 1)].push(...((_externalSlots$item$$ = externalSlots === null || externalSlots === void 0 ? void 0 : (_externalSlots$item$$2 = externalSlots[item.$$reversedRef]) === null || _externalSlots$item$$2 === void 0 ? void 0 : _externalSlots$item$$2.bricks) !== null && _externalSlots$item$$ !== void 0 ? _externalSlots$item$$ : []));
         }
       }
 
@@ -2859,7 +2859,7 @@
         brick.textContent = propValue;
       } else {
         if (extractProps) {
-          lodash.set(brick, propName, propValue);
+          _.set(brick, propName, propValue);
         } else {
           brick[propName] = propValue;
         }
@@ -2930,7 +2930,7 @@
         var defaultCollapsed = (_menuBar$menu = menuBar.menu) === null || _menuBar$menu === void 0 ? void 0 : _menuBar$menu.defaultCollapsed;
         var menu = yield processMenu(menuBar.menuId, context, kernel, hasSubMenu);
 
-        if (!lodash.isNil(defaultCollapsed)) {
+        if (!_.isNil(defaultCollapsed)) {
           menu.defaultCollapsed = defaultCollapsed;
         }
 
@@ -3202,7 +3202,7 @@
   }
 
   function sortMenuItems(list) {
-    return lodash.sortBy(list, item => {
+    return _.sortBy(list, item => {
       var _item$sort;
 
       return (_item$sort = item.sort) !== null && _item$sort !== void 0 ? _item$sort : -Infinity;
@@ -3383,6 +3383,11 @@
   function _dev_only_updateSnippetPreviewSettings(appId, snippetData) {
     kernel._dev_only_updateSnippetPreviewSettings(appId, snippetData);
   }
+  /* istanbul ignore next */
+
+  function _dev_only_updateFormPreviewSettings(appId, formId, settings) {
+    kernel._dev_only_updateFormPreviewSettings(appId, formId, settings);
+  }
   class Runtime {
     constructor() {
       _defineProperty__default["default"](this, "registerBrickTemplate", registerBrickTemplate);
@@ -6842,7 +6847,7 @@
       var app = storyboard.app;
 
       if (app) {
-        app.config = brickUtils.deepFreeze(lodash.merge({}, app.defaultConfig, app.userConfig));
+        app.config = brickUtils.deepFreeze(_.merge({}, app.defaultConfig, app.userConfig));
 
         if (app.locales) {
           (function () {
@@ -7948,6 +7953,9 @@
     }
   }
 
+  var formRenderer = "form-renderer.form-renderer";
+  var filterProperties = ["brick", "slots", "properties", "events", "if", "context", "bricks", "mountPoint"];
+
   class Kernel {
     constructor() {
       var _this = this;
@@ -8280,7 +8288,7 @@
         path: previewPath,
         bricks: [_objectSpread__default["default"]({
           brick: templateId
-        }, lodash.pick(settings, "properties", "events", "lifeCycle", "context"))],
+        }, _.pick(settings, "properties", "events", "lifeCycle", "context"))],
         menu: false,
         exact: true
       };
@@ -8316,6 +8324,31 @@
       }
     }
 
+    _dev_only_updateFormPreviewSettings(appId, formId, formData) {
+      var {
+        routes
+      } = this.bootstrapData.storyboards.find(item => item.app.id === appId);
+      var previewPath = "${APP.homepage}/_dev_only_/form-preview/".concat(formId);
+      var previewRouteIndex = routes.findIndex(route => route.path === previewPath);
+      var newPreviewRoute = {
+        path: previewPath,
+        bricks: [{
+          brick: formRenderer,
+          properties: {
+            formData: formData
+          }
+        }],
+        menu: false,
+        exact: true
+      };
+
+      if (previewRouteIndex === -1) {
+        routes.unshift(newPreviewRoute);
+      } else {
+        routes.splice(previewRouteIndex, 1, newPreviewRoute);
+      }
+    }
+
     loadDepsOfStoryboard(storyboard) {
       return this.gracefullyLoadDeps(this._loadDepsOfStoryboard, storyboard);
     }
@@ -8611,7 +8644,7 @@
           return [];
         }
 
-        return lodash.sortBy(allRelatedApps.filter(item => item.objectId === thisApp.objectId), ["order"]);
+        return _.sortBy(allRelatedApps.filter(item => item.objectId === thisApp.objectId), ["order"]);
       })();
     }
 
@@ -8680,7 +8713,7 @@
 
       var currentAppId = this.currentApp.id;
       var currentStoryboard = this.bootstrapData.storyboards.find(storyboard => storyboard.app.id === currentAppId);
-      return ((_cloneDeep = lodash.cloneDeep((_currentStoryboard$me = currentStoryboard.meta) === null || _currentStoryboard$me === void 0 ? void 0 : _currentStoryboard$me.menus)) !== null && _cloneDeep !== void 0 ? _cloneDeep : []).filter(menu => menu.menuId === menuId).map(menu => _objectSpread__default["default"](_objectSpread__default["default"]({}, menu), {}, {
+      return ((_cloneDeep = _.cloneDeep((_currentStoryboard$me = currentStoryboard.meta) === null || _currentStoryboard$me === void 0 ? void 0 : _currentStoryboard$me.menus)) !== null && _cloneDeep !== void 0 ? _cloneDeep : []).filter(menu => menu.menuId === menuId).map(menu => _objectSpread__default["default"](_objectSpread__default["default"]({}, menu), {}, {
         app: [{
           appId: currentAppId
         }]
@@ -9016,6 +9049,299 @@
     }
   }
 
+  function ExpandCustomForm(formData, brickConf) {
+    var errorBrick = {
+      brick: "presentational-bricks.brick-illustration",
+      properties: {
+        category: "default",
+        header: {
+          title: "参数错误"
+        },
+        mode: "guide",
+        name: "search-empty"
+      }
+    };
+
+    try {
+      var formStoryboard = getStoryboard([formData.formSchema], [], formData.fields);
+      formStoryboard[0] = ___default["default"].isEmpty(formStoryboard[0]) ? errorBrick : formStoryboard[0];
+      return _objectSpread__default["default"](_objectSpread__default["default"]({}, brickConf), {}, {
+        brick: "div",
+        slots: {
+          "": {
+            bricks: formStoryboard,
+            type: "bricks"
+          }
+        }
+      });
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.warn(error.message);
+      return {
+        brick: "div",
+        slots: {
+          "": {
+            bricks: [errorBrick],
+            type: "bricks"
+          }
+        }
+      };
+    }
+  }
+  function getDefaultProperties(_name, fields) {
+    var field = fields.filter(item => item.id === _name)[0];
+    var defaultValue = {};
+
+    if (field) {
+      switch (field.type) {
+        case "STRING":
+          defaultValue = {
+            brick: "forms.general-input",
+            properties: {
+              id: field.id,
+              name: field.id,
+              label: field.name,
+              readOnly: field.limit.includes("readOnly"),
+              required: field.limit.includes("required"),
+              placeholder: field.description
+            }
+          };
+          break;
+
+        case "INT":
+          defaultValue = {
+            brick: "forms.general-input-number",
+            properties: {
+              id: field.id,
+              name: field.id,
+              label: field.name,
+              readOnly: field.limit.includes("readOnly"),
+              required: field.limit.includes("required"),
+              placeholder: field.description,
+              precision: 0,
+              inputBoxStyle: {
+                width: "100%"
+              }
+            }
+          };
+          break;
+
+        case "BOOLEAN":
+          defaultValue = {
+            brick: "forms.general-switch",
+            properties: {
+              id: field.id,
+              name: field.id,
+              label: field.name,
+              readOnly: field.limit.includes("readOnly"),
+              required: field.limit.includes("required")
+            }
+          };
+          break;
+
+        case "FLOAT":
+          defaultValue = {
+            brick: "forms.general-input-number",
+            properties: {
+              id: field.id,
+              name: field.id,
+              label: field.name,
+              readOnly: field.limit.includes("readOnly"),
+              required: field.limit.includes("required"),
+              placeholder: field.description,
+              inputBoxStyle: {
+                width: "100%"
+              }
+            }
+          };
+          break;
+
+        case "ENUMERATED_SINGLE_OPTION":
+          defaultValue = {
+            brick: "forms.general-select",
+            properties: {
+              id: field.id,
+              name: field.id,
+              label: field.name,
+              readOnly: field.limit.includes("readOnly"),
+              required: field.limit.includes("required"),
+              options: [{
+                label: "选项一",
+                value: 1
+              }, {
+                label: "选项二",
+                value: 2
+              }],
+              placeholder: field.description,
+              inputBoxStyle: {
+                width: "100%"
+              }
+            }
+          };
+          break;
+
+        case "SELECT_MULTIPLE_ENUMERATED_TYPE":
+          defaultValue = {
+            brick: "forms.general-select",
+            properties: {
+              id: field.id,
+              name: field.id,
+              label: field.name,
+              readOnly: field.limit.includes("readOnly"),
+              required: field.limit.includes("required"),
+              mode: "multiple",
+              options: [{
+                label: "选项一",
+                value: 1
+              }, {
+                label: "选项二",
+                value: 2
+              }],
+              placeholder: field.description,
+              inputBoxStyle: {
+                width: "100%"
+              }
+            }
+          };
+          break;
+
+        case "DATE":
+          defaultValue = {
+            brick: "forms.general-date-picker",
+            properties: {
+              id: field.id,
+              name: field.id,
+              label: field.name,
+              readOnly: field.limit.includes("readOnly"),
+              required: field.limit.includes("required"),
+              placeholder: field.description
+            }
+          };
+          break;
+
+        case "TIME":
+          defaultValue = {
+            brick: "forms.general-date-picker",
+            properties: {
+              id: field.id,
+              name: field.id,
+              label: field.name,
+              readOnly: field.limit.includes("readOnly"),
+              required: field.limit.includes("required"),
+              placeholder: field.description
+            }
+          };
+          break;
+
+        case "IP":
+          defaultValue = {
+            brick: "forms.general-input",
+            properties: {
+              id: field.id,
+              name: field.id,
+              label: field.name,
+              readOnly: field.limit.includes("readOnly"),
+              required: field.limit.includes("required"),
+              placeholder: field.description,
+              pattern: /((^\s*((([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]))\s*$)|(^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$))/
+            }
+          };
+          break;
+
+        case "JSON":
+          defaultValue = {};
+          break;
+
+        case "ARRAY":
+          defaultValue = {};
+          break;
+
+        case "STRUCTURE":
+          defaultValue = {
+            brick: "forms.cmdb-instance-select-panel",
+            properties: {
+              id: field.id,
+              name: field.id,
+              label: field.name,
+              readOnly: field.limit.includes("readOnly"),
+              required: field.limit.includes("required")
+            }
+          };
+          break;
+
+        case "STRUCTURE_ARRAY":
+          defaultValue = {
+            brick: "forms.cmdb-instance-select-panel",
+            properties: {
+              id: field.id,
+              name: field.id,
+              label: field.name,
+              readOnly: field.limit.includes("readOnly"),
+              required: field.limit.includes("required")
+            }
+          };
+          break;
+
+        default:
+          defaultValue = {
+            brick: "forms.general-input",
+            properties: {
+              id: field.id,
+              name: field.id,
+              label: field.name,
+              readOnly: field.limit.includes("readOnly"),
+              required: field.limit.includes("required"),
+              placeholder: field.description
+            }
+          };
+          break;
+      }
+    }
+
+    return defaultValue;
+  }
+  function getStoryboard(datasource, result, fields) {
+    var _loop = function (i) {
+      var dataItem = datasource[i];
+      var resultItem = {}; //数据初始化：根据id,字段类型获取默认属性
+
+      var defaultProperties = getDefaultProperties(dataItem.id, fields); //数据初始化：与默认属性进行合并
+
+      Object.keys(defaultProperties).forEach(item => {
+        if (!dataItem[item]) {
+          dataItem[item] = defaultProperties[item];
+        } else if (dataItem[item] && typeof dataItem[item] === "object") {
+          dataItem[item] = _objectSpread__default["default"](_objectSpread__default["default"]({}, defaultProperties[item]), dataItem[item]);
+        }
+      });
+      Object.keys(dataItem).forEach(item => {
+        if (filterProperties.includes(item)) {
+          resultItem[item] = dataItem[item];
+        }
+      });
+
+      if (Array.isArray(dataItem.bricks)) {
+        var _Object$keys;
+
+        resultItem["slots"] = ___default["default"].groupBy(getStoryboard(dataItem.bricks, [], fields), "mountPoint");
+        (_Object$keys = Object.keys(resultItem["slots"])) === null || _Object$keys === void 0 ? void 0 : _Object$keys.forEach(item => {
+          resultItem.slots[item] = {
+            bricks: resultItem.slots[item],
+            type: "bricks"
+          };
+        });
+      }
+
+      result[i] = resultItem;
+    };
+
+    for (var i = 0; i < datasource.length; i++) {
+      _loop(i);
+    }
+
+    return result;
+  }
+
   class LocationContext {
     constructor(kernel, location) {
       _defineProperty__default["default"](this, "query", void 0);
@@ -9132,7 +9458,7 @@
       // This enables two apps with relationship of parent-child of homepage.
 
 
-      var sortedStoryboards = lodash.orderBy(storyboards, storyboard => {
+      var sortedStoryboards = _.orderBy(storyboards, storyboard => {
         var _storyboard$app$homep, _storyboard$app, _storyboard$app$homep2;
 
         return (_storyboard$app$homep = (_storyboard$app = storyboard.app) === null || _storyboard$app === void 0 ? void 0 : (_storyboard$app$homep2 = _storyboard$app.homepage) === null || _storyboard$app$homep2 === void 0 ? void 0 : _storyboard$app$homep2.length) !== null && _storyboard$app$homep !== void 0 ? _storyboard$app$homep : 0;
@@ -9300,7 +9626,7 @@
         } // 静态菜单配置，仅在有值时才设置，这样可以让菜单设置也具有按路由层级覆盖的能力。
 
 
-        var otherMenuConf = lodash.omit(menuConf, ["injectDeep", "type"]);
+        var otherMenuConf = _.omit(menuConf, ["injectDeep", "type"]);
         var injectedMenuConf = injectDeep !== false ? computeRealValue(otherMenuConf, context, true) : otherMenuConf;
         var {
           sidebarMenu,
@@ -9478,7 +9804,7 @@
         if (brickConf[symbolForComputedPropsFromProxy]) {
           Object.entries(brickConf[symbolForComputedPropsFromProxy]).forEach(_ref2 => {
             var [propName, propValue] = _ref2;
-            lodash.set(brick.properties, propName, propValue);
+            _.set(brick.properties, propName, propValue);
           });
         }
 
@@ -9512,6 +9838,12 @@
           yield _this6.kernel.loadDynamicBricksInBrickConf(expandedBrickConf);
         }
 
+        if (brick.type === formRenderer) {
+          var formData = brick.properties.formData;
+          expandedBrickConf = ExpandCustomForm(formData, brickConf);
+          yield _this6.kernel.loadDynamicBricksInBrickConf(expandedBrickConf);
+        }
+
         if (expandedBrickConf.exports) {
           for (var [prop, ctxName] of Object.entries(expandedBrickConf.exports)) {
             if (typeof ctxName === "string" && ctxName.startsWith("CTX.")) {
@@ -9901,7 +10233,7 @@
                     function _fetchData() {
                       _fetchData = _asyncToGenerator__default["default"](function* () {
                         var value = yield promise;
-                        data = field === null || field === undefined ? value : lodash.get(value, field); // The fetched data and its inner objects should never be *injected* again.
+                        data = field === null || field === undefined ? value : _.get(value, field); // The fetched data and its inner objects should never be *injected* again.
 
                         recursiveMarkAsInjected(data);
                       });
@@ -10142,7 +10474,7 @@
         function _fetchData() {
           _fetchData = _asyncToGenerator__default["default"](function* () {
             var value = yield promise;
-            data = field === null || field === undefined ? value : lodash.get(value, field); // The fetched data and its inner objects should never be *injected* again.
+            data = field === null || field === undefined ? value : _.get(value, field); // The fetched data and its inner objects should never be *injected* again.
 
             recursiveMarkAsInjected(data);
           });
@@ -10282,6 +10614,15 @@
     return;
   };
 
+  function registerFormRenderer() {
+    customElements.get(formRenderer) || customElements.define(formRenderer, class FormElement extends HTMLElement {
+      get $$typeof() {
+        return "formRenderer";
+      }
+
+    });
+  }
+
   class Router {
     constructor(kernel) {
       _defineProperty__default["default"](this, "defaultCollapsed", false);
@@ -10454,7 +10795,7 @@
         var _apiAnalyzer$getInsta, _getLocalAppsTheme;
 
         _this3.state = "initial";
-        _this3.renderId = lodash.uniqueId("render-id-");
+        _this3.renderId = _.uniqueId("render-id-");
         resetAllInjected();
         clearPollTimeout();
 
@@ -10490,6 +10831,7 @@
 
           registerStoryboardFunctions((_storyboard$meta = storyboard.meta) === null || _storyboard$meta === void 0 ? void 0 : _storyboard$meta.functions, storyboard.app);
           registerMock((_storyboard$meta2 = storyboard.meta) === null || _storyboard$meta2 === void 0 ? void 0 : _storyboard$meta2.mocks);
+          registerFormRenderer();
           collectContract((_storyboard$meta3 = storyboard.meta) === null || _storyboard$meta3 === void 0 ? void 0 : _storyboard$meta3.contracts);
         }
 
@@ -10549,23 +10891,8 @@
           };
 
           try {
-            var specificTemplatePreviewIndex = lodash.findLastIndex(storyboard.routes, route => route.path.startsWith("${APP.homepage}/_dev_only_/template-preview/"));
-            var specificSnippetPreviewIndex = lodash.findLastIndex(storyboard.routes, route => route.path.startsWith("${APP.homepage}/_dev_only_/snippet-preview/"));
-            var mergedRoutes = [...storyboard.routes.slice(0, specificTemplatePreviewIndex + 1), ...storyboard.routes.slice(0, specificSnippetPreviewIndex + 1), {
-              path: "${APP.homepage}/_dev_only_/template-preview/:templateId",
-              bricks: [{
-                brick: "span"
-              }],
-              menu: false,
-              exact: true
-            }, {
-              path: "${APP.homepage}/_dev_only_/snippet-preview/:snippetId",
-              bricks: [{
-                brick: "span"
-              }],
-              menu: false,
-              exact: true
-            }, ...storyboard.routes.slice(specificTemplatePreviewIndex + 1)];
+            var mergedRoutes = _this3.MergePreviewRouter(storyboard.routes);
+
             yield locationContext.mountRoutes(mergedRoutes, undefined, mountRoutesResult);
           } catch (error) {
             // eslint-disable-next-line no-console
@@ -10775,6 +11102,50 @@
         subMenu: mountResult.menuBar.subMenu
       };
     }
+
+    MergePreviewRouter(router) {
+      var mergedRoutes = router;
+      var specificTemplatePreviewIndex = _.findLastIndex(mergedRoutes, route => route.path.startsWith("${APP.homepage}/_dev_only_/template-preview/"));
+
+      if (specificTemplatePreviewIndex > -1) {
+        mergedRoutes = [...mergedRoutes.slice(0, specificTemplatePreviewIndex + 1), {
+          path: "${APP.homepage}/_dev_only_/template-preview/:templateId",
+          bricks: [{
+            brick: "span"
+          }],
+          menu: false,
+          exact: true
+        }, ...mergedRoutes.slice(specificTemplatePreviewIndex + 1)];
+      }
+
+      var specificSnippetPreviewIndex = _.findLastIndex(mergedRoutes, route => route.path.startsWith("${APP.homepage}/_dev_only_/snippet-preview/"));
+
+      if (specificSnippetPreviewIndex > -1) {
+        mergedRoutes = [...mergedRoutes.slice(0, specificSnippetPreviewIndex + 1), {
+          path: "${APP.homepage}/_dev_only_/snippet-preview/:snippetId",
+          bricks: [{
+            brick: "span"
+          }],
+          menu: false,
+          exact: true
+        }, ...mergedRoutes.slice(specificSnippetPreviewIndex + 1)];
+      }
+
+      var specificFormPreviewIndex = _.findLastIndex(mergedRoutes, route => route.path.startsWith("${APP.homepage}/_dev_only_/form-preview/"));
+
+      if (specificFormPreviewIndex > -1) {
+        mergedRoutes = [...mergedRoutes.slice(0, specificFormPreviewIndex + 1), {
+          path: "${APP.homepage}/_dev_only_/form-preview/:FormId",
+          bricks: [{
+            brick: "span"
+          }],
+          menu: false,
+          exact: true
+        }, ...mergedRoutes.slice(specificFormPreviewIndex + 1)];
+      }
+
+      return mergedRoutes;
+    }
     /* istanbul ignore next */
 
 
@@ -11774,7 +12145,7 @@
       if (useBrick[symbolForComputedPropsFromProxy]) {
         Object.entries(useBrick[symbolForComputedPropsFromProxy]).forEach(_ref3 => {
           var [propName, propValue] = _ref3;
-          lodash.set(brick.properties, propName, propValue);
+          _.set(brick.properties, propName, propValue);
         });
       }
 
@@ -11976,7 +12347,7 @@
       if (useBrick[symbolForComputedPropsFromProxy]) {
         Object.entries(useBrick[symbolForComputedPropsFromProxy]).forEach(_ref9 => {
           var [propName, propValue] = _ref9;
-          lodash.set(brick.properties, propName, propValue);
+          _.set(brick.properties, propName, propValue);
         });
       }
 
@@ -12450,7 +12821,7 @@
       isBig
     } = props;
     var theme = useCurrentTheme();
-    var prefix = lodash.uniqueId();
+    var prefix = _.uniqueId();
 
     var createNewId = id => {
       return prefix + id;
@@ -13192,10 +13563,11 @@
     getFakeKernel: _dev_only_getFakeKernel,
 
     /** @deprecated Keep it for backward-compatibility. */
-    checkoutTplContext: lodash.noop,
+    checkoutTplContext: _.noop,
     updateStoryboard: _dev_only_updateStoryboard,
     updateTemplatePreviewSettings: _dev_only_updateTemplatePreviewSettings,
-    updateSnippetPreviewSettings: _dev_only_updateSnippetPreviewSettings
+    updateSnippetPreviewSettings: _dev_only_updateSnippetPreviewSettings,
+    updateFormPreviewSettings: _dev_only_updateFormPreviewSettings
   };
 
   var _excluded$2 = ["type"];
@@ -13530,9 +13902,9 @@
           return e => {
             if (e) {
               if (typeof e.detail === "object" && !Array.isArray(e.detail)) {
-                lodash.merge(this, e.detail);
+                _.merge(this, e.detail);
               } else {
-                lodash.merge(this, {
+                _.merge(this, {
                   detail: e.detail
                 });
               }
@@ -13593,9 +13965,9 @@
     var options = React.useMemo(() => {
       var localOptions = {};
 
-      if (lodash.isObject(providerOrParamsOrGlobalOptions)) {
+      if (_.isObject(providerOrParamsOrGlobalOptions)) {
         localOptions = providerOrParamsOrGlobalOptions;
-      } else if (lodash.isObject(gloabalOptionsOrDeps)) {
+      } else if (_.isObject(gloabalOptionsOrDeps)) {
         localOptions = gloabalOptionsOrDeps;
       }
 
@@ -13763,13 +14135,13 @@
         var providerStr = provider;
         var providerArgs = [];
 
-        if (lodash.isString(providerOrBody)) {
+        if (_.isString(providerOrBody)) {
           providerStr = providerOrBody;
         }
 
-        if (lodash.isObject(providerOrBody)) {
+        if (_.isObject(providerOrBody)) {
           providerArgs = providerOrBody;
-        } else if (lodash.isObject(args)) {
+        } else if (_.isObject(args)) {
           providerArgs = args;
         }