@blueking/bkui-form 0.0.13 → 0.0.16

package/dist/bkui-form-umd.js

@@ -924,6 +924,10 @@
     complete.splice.apply(complete, [restIndex, 1].concat(_toConsumableArray(rest)));
     return complete;
   }
+  function upperFirstLetter(str) {
+    if (!str) return str;
+    return "".concat(str.slice(0, 1).toUpperCase()).concat(str.slice(1));
+  }
 
   /**
    * Registry注册Form组件全局相关内容
@@ -1515,9 +1519,9 @@
         return group.reduce(function (area, rows) {
           var newRows = _this2.autoFillColumns(rows, gridTemplate.columns);
 
-          area += "\"".concat(newRows.join(' '), "\"\n");
+          area.push("\"".concat(newRows.join(' '), "\""));
           return area;
-        }, '');
+        }, []).join('\n');
       } // 当前列数不够时自动填充
 
     }, {
@@ -9821,15 +9825,27 @@
    */
 
   var validateFormWithResult = function validateFormWithResult() {
-    return Object.keys(widgetTree.widgetMap).reduce(function (pre, path) {
-      var validateResult = validateFormItem(path);
+    return new Promise(function (resolve, reject) {
+      var result = Object.keys(widgetTree.widgetMap).filter(function (path) {
+        var _widgetTree$widgetMap;
 
-      if (!(validateResult !== null && validateResult !== void 0 && validateResult.result)) {
-        pre.push(validateResult);
-      }
+        return ((_widgetTree$widgetMap = widgetTree.widgetMap[path]) === null || _widgetTree$widgetMap === void 0 ? void 0 : _widgetTree$widgetMap.type) === 'node';
+      }).reduce(function (pre, path) {
+        var validateResult = validateFormItem(path);
+
+        if (!(validateResult !== null && validateResult !== void 0 && validateResult.result)) {
+          pre.push(validateResult);
+        }
 
-      return pre;
-    }, []);
+        return pre;
+      }, []);
+
+      if (result.length) {
+        reject(result);
+      } else {
+        resolve([]);
+      }
+    });
   }; // 校验schema是否正常
 
   var validateSchema = /*#__PURE__*/function () {
@@ -10115,6 +10131,7 @@
           _this$$scopedSlots$de,
           _this$$scopedSlots$de2,
           _this$$scopedSlots,
+          _this$datasource,
           _this$datasource$find,
           _this4 = this,
           _this$$scopedSlots$su,
@@ -10159,7 +10176,7 @@
         attrs: _objectSpread2({}, this.state)
       }))); // 渲染默认readonly模式
 
-      var renderReadonlyWidget = h('div', [((_this$datasource$find = this.datasource.find(function (item) {
+      var renderReadonlyWidget = h('div', [((_this$datasource = this.datasource) === null || _this$datasource === void 0 ? void 0 : (_this$datasource$find = _this$datasource.find(function (item) {
         return item.value === _this4.value;
       })) === null || _this$datasource$find === void 0 ? void 0 : _this$datasource$find.label) || this.value]); // 渲染删除按钮（用于数组类型widget删除）
 
@@ -10650,6 +10667,10 @@
       // 注册widget TreeNode
       widgetTree.addWidgetNode(this.path, this, 'group');
     },
+    mounted: function mounted() {
+      // 更新样式
+      this.$forceUpdate();
+    },
     beforeDestroy: function beforeDestroy() {
       widgetTree.removeWidgetNode(this.path, this);
     },
@@ -10662,6 +10683,43 @@
       },
       clearGroupErrorTips: function clearGroupErrorTips() {
         this.groupErrorTips = {};
+      },
+      removeEmptyRows: function removeEmptyRows(container) {
+        var _this = this;
+
+        if (!container) return null;
+        var newContainer = Object.keys(container).reduce(function (pre, key) {
+          // 统一换成驼峰形势
+          var humpKey = key.split('-').reduce(function (pre, str, index) {
+            pre += index === 0 ? str : upperFirstLetter(str);
+            return pre;
+          }, '');
+          pre[humpKey] = container[key];
+          return pre;
+        }, {});
+        var oldGridTemplateAreas = newContainer.gridTemplateAreas,
+            oldGridTemplateRows = newContainer.gridTemplateRows;
+        var hiddenIndexs = [];
+        var gridTemplateAreas = oldGridTemplateAreas === null || oldGridTemplateAreas === void 0 ? void 0 : oldGridTemplateAreas.split('\n').filter(function (row, index) {
+          var hiddenRow = row.replace(/"/g, '').split(' ').every(function (name) {
+            if (name === '.') return true;
+            var fullPath = _this.path ? "".concat(_this.path, ".").concat(name) : name;
+            return widgetTree.widgetMap[fullPath] && widgetTree.widgetMap[fullPath].type === 'node' && widgetTree.widgetMap[fullPath].instance && !widgetTree.widgetMap[fullPath].instance.state.visible;
+          });
+
+          if (hiddenRow) {
+            hiddenIndexs.push(index);
+          }
+
+          return !hiddenRow;
+        }).join('\n');
+        var gridTemplateRows = oldGridTemplateRows === null || oldGridTemplateRows === void 0 ? void 0 : oldGridTemplateRows.split(' ').filter(function (_, index) {
+          return !hiddenIndexs.includes(index);
+        }).join(' ');
+        return _objectSpread2(_objectSpread2({}, newContainer), {}, {
+          gridTemplateAreas: gridTemplateAreas,
+          gridTemplateRows: gridTemplateRows
+        });
       }
     },
     render: function render(h) {
@@ -10669,14 +10727,14 @@
           _this$layout2,
           _this$schema,
           _this$layout3,
-          _this = this;
+          _this2 = this;
 
       var schemaFormStyle = _objectSpread2({
         position: 'relative',
         border: this.border ? '1px solid #dcdee5' : 'none'
       }, ((_this$layout = this.layout) === null || _this$layout === void 0 ? void 0 : _this$layout.item) || {});
 
-      var groupContentStyle = _objectSpread2({}, ((_this$layout2 = this.layout) === null || _this$layout2 === void 0 ? void 0 : _this$layout2.container) || {
+      var groupContentStyle = _objectSpread2({}, this.removeEmptyRows((_this$layout2 = this.layout) === null || _this$layout2 === void 0 ? void 0 : _this$layout2.container) || {
         display: 'grid',
         gridGap: '24px' // 未设置layout的布局组的默认样式
 
@@ -10703,7 +10761,7 @@
 
       var title = ((_this$schema = this.schema) === null || _this$schema === void 0 ? void 0 : _this$schema.title) || ((_this$layout3 = this.layout) === null || _this$layout3 === void 0 ? void 0 : _this$layout3.prop);
       var groupErrorTipsContent = Object.keys(this.groupErrorTips).map(function (widgetPath) {
-        return h("p", [_this.groupErrorTips[widgetPath]]);
+        return h("p", [_this2.groupErrorTips[widgetPath]]);
       });
       var hasError = JSON.stringify(this.groupErrorTips) !== '{}';
       return h("div", {
@@ -10726,8 +10784,8 @@
 
   function _extends(){return _extends=Object.assign||function(a){for(var b,c=1;c<arguments.length;c++)for(var d in b=arguments[c],b)Object.prototype.hasOwnProperty.call(b,d)&&(a[d]=b[d]);return a},_extends.apply(this,arguments)}var normalMerge=["attrs","props","domProps"],toArrayMerge=["class","style","directives"],functionalMerge=["on","nativeOn"],mergeJsxProps=function(a){return a.reduce(function(c,a){for(var b in a)if(!c[b])c[b]=a[b];else if(-1!==normalMerge.indexOf(b))c[b]=_extends({},c[b],a[b]);else if(-1!==toArrayMerge.indexOf(b)){var d=c[b]instanceof Array?c[b]:[c[b]],e=a[b]instanceof Array?a[b]:[a[b]];c[b]=d.concat(e);}else if(-1!==functionalMerge.indexOf(b)){for(var f in a[b])if(c[b][f]){var g=c[b][f]instanceof Array?c[b][f]:[c[b][f]],h=a[b][f]instanceof Array?a[b][f]:[a[b][f]];c[b][f]=g.concat(h);}else c[b][f]=a[b][f];}else if("hook"==b)for(var i in a[b])c[b][i]=c[b][i]?mergeFn(c[b][i],a[b][i]):a[b][i];else c[b]=a[b];return c},{})},mergeFn=function(a,b){return function(){a&&a.apply(this,arguments),b&&b.apply(this,arguments);}};var helper=mergeJsxProps;
 
-  var NoTitleArray = Vue__default["default"].extend({
-    name: 'NoTitleArray',
+  var KeyValueArrayWidget = Vue__default["default"].extend({
+    name: 'ArrayWidget',
     props: _objectSpread2({}, props),
     mounted: function mounted() {
       var _this$value;
@@ -10841,6 +10899,8 @@
               container: _objectSpread2({}, defaultContainerLayout)
             })
           })
+        }, {
+          "class": "mb10"
         }]), [props !== null && props !== void 0 && props.length ? props.map(function (prop) {
           var _this$schema3, _this$schema3$items;
 
@@ -10873,8 +10933,7 @@
         "on": {
           "click": this.handleAddItem
         },
-        "style": labelBtnStyle,
-        "class": "mt10"
+        "style": labelBtnStyle
       }, [h("i", {
         "class": "bk-icon icon-plus-line"
       })])]);
@@ -11116,13 +11175,23 @@
     }
   });
 
-  var UnitInputWidget = Vue__default["default"].extend({
-    name: 'UnitInput',
+  var InputWidget = Vue__default["default"].extend({
+    name: 'InputWidget',
     props: {
       value: [String, Number],
       unit: {
         type: String,
         default: ''
+      },
+      maxRows: {
+        type: Number,
+        default: 0
+      }
+    },
+    computed: {
+      rows: function rows() {
+        var len = String(this.value).split('\n').length;
+        return len <= this.maxRows ? len : this.maxRows;
       }
     },
     methods: {
@@ -11133,11 +11202,14 @@
     render: function render(h) {
       return h(registry.getBaseWidget('input'), {
         props: _objectSpread2({
-          value: this.value
+          value: this.value,
+          rows: this.rows,
+          type: this.maxRows > 1 ? 'textarea' : 'text'
         }, this.$attrs),
         on: {
           input: this.handleInput
-        }
+        },
+        class: ['bk-form-unit-input']
       }, [this.unit && h('div', {
         slot: 'append',
         class: ['group-text']
@@ -11184,12 +11256,12 @@
       checkbox: CheckboxWidget,
       table: TableWidget,
       group: FieldGroupWrap,
-      noTitleArray: NoTitleArray,
+      bfArray: KeyValueArrayWidget,
       tab: TabGroupWidget,
       collapse: CollapseGroupWidget,
       switcher: SwitcherWidget,
       color: ColorWidget,
-      unitInput: UnitInputWidget,
+      bfInput: InputWidget,
       input: 'bk-input'
     },
     fields: {