@blueking/bkui-form 0.0.42-beta.11 → 0.0.42-beta.13

package/dist/bkui-form-umd.js

@@ -1758,197 +1758,6 @@
     return typeof expression === 'string' && /{{.*}}/.test(expression);
   };
 
-  var WidgetNode = /*#__PURE__*/function () {
-    function WidgetNode(config) {
-      _classCallCheck(this, WidgetNode);
-      this.id = void 0;
-      this.instance = void 0;
-      this.parent = void 0;
-      this.type = void 0;
-      this.index = void 0;
-      // todo
-      this.children = void 0;
-      var id = config.id,
-        instance = config.instance,
-        parent = config.parent,
-        index = config.index,
-        type = config.type,
-        _config$children = config.children,
-        children = _config$children === void 0 ? [] : _config$children;
-      this.id = id;
-      this.type = type;
-      this.index = index;
-      this.instance = instance;
-      this.parent = parent;
-      this.children = children;
-    }
-    // 当前node的值
-    return _createClass(WidgetNode, [{
-      key: "value",
-      get: function get() {
-        var _this$instance;
-        return (_this$instance = this.instance) === null || _this$instance === void 0 ? void 0 : _this$instance.value;
-      }
-      // 是否含有可见子节点
-    }, {
-      key: "isChildrenVisible",
-      get: function get() {
-        if (this.type === 'node') {
-          var _this$instance2;
-          return (_this$instance2 = this.instance) === null || _this$instance2 === void 0 ? void 0 : _this$instance2.state.visible;
-        }
-        return this.children.some(function (child) {
-          return child.isChildrenVisible;
-        });
-      }
-      /**
-       * 获取 parents
-       */
-    }, {
-      key: "parents",
-      get: function get() {
-        if (!this.parent) {
-          return [];
-        }
-        return [].concat(_toConsumableArray(this.parent.parents), [this.parent]);
-      }
-      // 第一个子节点
-    }, {
-      key: "firstChild",
-      get: function get() {
-        return this.children[0] || null;
-      }
-      // 最后一个子节点
-    }, {
-      key: "lastChild",
-      get: function get() {
-        return this.children[this.children.length - 1] || null;
-      }
-      // 指定属性下的同胞节点
-    }, {
-      key: "getSibling",
-      value: function getSibling(lastProp) {
-        var _this$parent;
-        var reg = new RegExp("".concat(Path.getPathLastProp(this.id) || '', "$"));
-        var id = this.id.replace(reg, lastProp);
-        return (_this$parent = this.parent) === null || _this$parent === void 0 ? void 0 : _this$parent.children.find(function (node) {
-          return node.id === id;
-        });
-      }
-      // 获取所以同胞节点（不含自己）
-    }, {
-      key: "getSiblings",
-      value: function getSiblings() {
-        var _this$parent2,
-          _this = this;
-        return ((_this$parent2 = this.parent) === null || _this$parent2 === void 0 ? void 0 : _this$parent2.children.filter(function (node) {
-          return node.instance !== _this.instance;
-        })) || [];
-      }
-      /**
-       * 是否是叶子节点
-       */
-    }, {
-      key: "isLeaf",
-      get: function get() {
-        return !this.children.length;
-      }
-    }, {
-      key: "appendChild",
-      value: function appendChild(node) {
-        var _this$children;
-        var nodes = Array.isArray(node) ? node : [node];
-        var offset = node.index !== undefined ? node.index : this.children.length;
-        (_this$children = this.children).splice.apply(_this$children, [offset, 0].concat(_toConsumableArray(nodes)));
-        this.children.slice(offset).forEach(function (node, index) {
-          node.index = offset + index;
-        });
-        return nodes;
-      }
-    }, {
-      key: "removeChild",
-      value: function removeChild(node) {
-        var _this2 = this;
-        var nodes = Array.isArray(node) ? node : [node];
-        var removedChildIndex = [];
-        nodes.forEach(function (node) {
-          var index = node.index;
-          removedChildIndex.push(index);
-          _this2.children.splice(index, 1);
-        });
-        var minIndex = Math.min.apply(Math, removedChildIndex);
-        this.children.slice(minIndex).forEach(function (node, index) {
-          node.index = minIndex + index;
-        });
-        return nodes;
-      }
-    }]);
-  }();
-  var WidgetTree = /*#__PURE__*/function () {
-    function WidgetTree() {
-      _classCallCheck(this, WidgetTree);
-      this.widgetMap = {};
-    }
-    return _createClass(WidgetTree, [{
-      key: "addWidgetNode",
-      value: function addWidgetNode(path, instance, type, index) {
-        if (path === '') {
-          // 根节点
-          var node = new WidgetNode({
-            id: '',
-            type: type,
-            index: index,
-            parent: null,
-            instance: instance,
-            children: []
-          });
-          this.widgetMap[path] = node;
-        } else {
-          // 普通节点
-          var parentId = Path.getParentPath(path);
-          var parentNode = this.widgetMap[parentId];
-          var _node = new WidgetNode({
-            id: (instance === null || instance === void 0 ? void 0 : instance.path) || path,
-            type: type,
-            index: index,
-            parent: parentNode,
-            instance: instance,
-            children: []
-          });
-          if (!parentNode) {
-            console.warn('Unexpected parent id, please check widget node', _node);
-          } else {
-            parentNode.appendChild(_node);
-          }
-          this.widgetMap[path] = _node;
-        }
-      }
-    }, {
-      key: "removeWidgetNode",
-      value: function removeWidgetNode(path, instance) {
-        var node = this.widgetMap[path];
-        if (node) {
-          if (node.parent) {
-            var children = node.parent.children;
-            var index = children.findIndex(function (item) {
-              return item.instance === instance;
-            });
-            if (index > -1) {
-              children.splice(index, 1);
-              children.slice(index).forEach(function (node, i) {
-                node.index = index + i;
-              });
-            }
-          }
-          if (node.instance === instance) {
-            delete this.widgetMap[path];
-          }
-        }
-      }
-    }]);
-  }();
-  var widgetTree = new WidgetTree();
-
   var reactionsMap = {};
   var subscribe = function subscribe(path, typeName, fn) {
     if (!reactionsMap[path]) {
@@ -1980,7 +1789,7 @@
    * @param reaction 传入的reacion配置
    * @returns viod
    */
-  var resolveReaction = function resolveReaction(crtInsPath, targetPath, reaction) {
+  var resolveReaction = function resolveReaction(crtInsPath, targetPath, reaction, widgetTree) {
     return function () {
       var _ref = widgetTree.widgetMap[crtInsPath] || {},
         crtInstance = _ref.instance; // 当前组件实例，用来条件表达式判断
@@ -2025,6 +1834,7 @@
   };
   var reactionRegister = function reactionRegister(path) {
     var reactions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    var widgetTree = arguments.length > 2 ? arguments[2] : undefined;
     var _ref3 = widgetTree.widgetMap[path] || {},
       instance = _ref3.instance;
     if (reactions && Array.isArray(reactions)) {
@@ -2036,13 +1846,13 @@
         subscribePaths.forEach(function (p) {
           var sourcePathItem = parsePath(p, instance);
           if (typeof reaction.lifetime === 'string') {
-            subscribe(sourcePathItem, "lifetime/".concat(reaction.lifetime), resolveReaction(path, targePath, reaction));
+            subscribe(sourcePathItem, "lifetime/".concat(reaction.lifetime), resolveReaction(path, targePath, reaction, widgetTree));
           }
           if (typeof reaction.effect === 'string') {
-            subscribe(sourcePathItem, "effect/".concat(reaction.effect), resolveReaction(path, targePath, reaction));
+            subscribe(sourcePathItem, "effect/".concat(reaction.effect), resolveReaction(path, targePath, reaction, widgetTree));
           }
           if (!reaction.lifetime && !reaction.effect) {
-            subscribe(sourcePathItem, 'valChange', resolveReaction(path, targePath, reaction));
+            subscribe(sourcePathItem, 'valChange', resolveReaction(path, targePath, reaction, widgetTree));
           }
         });
       });
@@ -9776,7 +9586,7 @@
     };
   };
   // 设置表单项校验状态
-  var setWidgetErrorTips = function setWidgetErrorTips(path, isError, errorMsg) {
+  var setWidgetErrorTips = function setWidgetErrorTips(path, isError, errorMsg, widgetTree) {
     var formItem = widgetTree.widgetMap[path];
     var instance = formItem.instance;
     if (formItem.type === 'node') {
@@ -9809,7 +9619,7 @@
    * 校验单个表单项
    * @param path 字段路径
    */
-  var validateFormItem = function validateFormItem(path) {
+  var validateFormItem = function validateFormItem(path, widgetTree) {
     var _instance$schema;
     // TODO 校验逻辑梳理
     var formItem = widgetTree.widgetMap[path];
@@ -9849,7 +9659,7 @@
       var errorsText = ajv.errorsText(schemaValidate.errors, {
         separator: '\n'
       });
-      setWidgetErrorTips(path, true, errorsText);
+      setWidgetErrorTips(path, true, errorsText, widgetTree);
       return {
         result: false,
         message: errorsText,
@@ -9878,7 +9688,7 @@
       _iterator.f();
     }
     if (isError) {
-      setWidgetErrorTips(path, true, errorMsg);
+      setWidgetErrorTips(path, true, errorMsg, widgetTree);
       return {
         result: false,
         message: errorMsg,
@@ -9894,24 +9704,24 @@
   /**
    * 校验整个表单
    */
-  var validateForm = function validateForm() {
+  var validateForm = function validateForm(widgetTree) {
     var isValid = true;
     Object.keys(widgetTree.widgetMap).forEach(function (path) {
       var _validateFormItem;
-      if (!((_validateFormItem = validateFormItem(path)) !== null && _validateFormItem !== void 0 && _validateFormItem.result)) isValid = false;
+      if (!((_validateFormItem = validateFormItem(path, widgetTree)) !== null && _validateFormItem !== void 0 && _validateFormItem.result)) isValid = false;
     });
     return isValid;
   };
   /**
    * 校验表单（抛出具体错误信息）
    */
-  var validateFormWithResult = function validateFormWithResult() {
+  var validateFormWithResult = function validateFormWithResult(widgetTree) {
     return new Promise(function (resolve, reject) {
       var result = Object.keys(widgetTree.widgetMap).filter(function (path) {
         var _widgetTree$widgetMap;
         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);
+        var validateResult = validateFormItem(path, widgetTree);
         if (!(validateResult !== null && validateResult !== void 0 && validateResult.result)) {
           pre.push(validateResult);
         }
@@ -9954,8 +9764,8 @@
    * 触发校验
    * @param path 字段路径
    */
-  var dispatchValidate = function dispatchValidate(path) {
-    return validateFormItem(path);
+  var dispatchValidate = function dispatchValidate(path, widgetTree) {
+    return validateFormItem(path, widgetTree);
   };
 
   // 事件订阅器
@@ -10045,6 +9855,7 @@
   var Widget = Vue__default["default"].extend({
     name: 'Widget',
     props: props,
+    inject: ['widgetTree'],
     data: function data() {
       return {
         loading: false,
@@ -10063,10 +9874,10 @@
     },
     computed: {
       widgetMap: function widgetMap() {
-        return widgetTree.widgetMap;
+        return this.widgetTree.widgetMap;
       },
       widgetNode: function widgetNode() {
-        return widgetTree.widgetMap[this.path];
+        return this.widgetTree.widgetMap[this.path];
       },
       parent: function parent() {
         var _this$widgetNode;
@@ -10084,7 +9895,7 @@
           if (!deepEquals(newValue, oldValue)) {
             setTimeout(function () {
               reactionDispatch(_this.path, 'valChange');
-              dispatchValidate(_this.path);
+              dispatchValidate(_this.path, _this.widgetTree);
             }, 0);
           }
         }
@@ -10116,17 +9927,17 @@
         }
       });
       // 注册widget TreeNode
-      widgetTree.addWidgetNode(this.path, this, 'node');
+      this.widgetTree.addWidgetNode(this.path, this, 'node');
     },
     mounted: function mounted() {
       // 注册联动
-      reactionRegister(this.path, this.widgetSchema['ui:reactions']);
+      reactionRegister(this.path, this.widgetSchema['ui:reactions'], this.widgetTree);
       // 首次联动
       reactionDispatch(this.path, 'valChange');
       reactionDispatch(this.path, 'lifetime/init');
     },
     beforeDestroy: function beforeDestroy() {
-      widgetTree.removeWidgetNode(this.path, this);
+      this.widgetTree.removeWidgetNode(this.path, this);
       reactionUnRegister(this.path);
     },
     methods: {
@@ -10947,6 +10758,7 @@
   var TableWidget = Vue__default["default"].extend({
     name: 'TableWidget',
     props: props,
+    inject: ['widgetTree'],
     watch: {
       value: {
         immediate: true,
@@ -10956,9 +10768,9 @@
           (_this$value = this.value) === null || _this$value === void 0 ? void 0 : _this$value.forEach(function (_, index) {
             var path = "".concat(_this.path, ".").concat(index);
             // 销毁上一次的缓存
-            widgetTree.removeWidgetNode(path, null);
+            _this.widgetTree.removeWidgetNode(path, null);
             // 重新当前行的父节点
-            widgetTree.addWidgetNode(path, null, 'group');
+            _this.widgetTree.addWidgetNode(path, null, 'group');
           });
         }
       }
@@ -11139,6 +10951,7 @@
 
   var FieldGroupWrap = Vue__default["default"].extend({
     name: 'FieldGroupWrap',
+    inject: ['widgetTree'],
     props: _objectSpread2(_objectSpread2({}, props), {}, {
       // 组类型
       type: {
@@ -11165,6 +10978,10 @@
       hideEmptyRow: {
         type: Boolean,
         default: false
+      },
+      description: {
+        type: String,
+        default: ''
       }
     }),
     data: function data() {
@@ -11178,14 +10995,14 @@
     },
     created: function created() {
       // 注册widget TreeNode
-      widgetTree.addWidgetNode(this.path, this, 'group');
+      this.widgetTree.addWidgetNode(this.path, this, 'group');
     },
     mounted: function mounted() {
       // 更新样式
       this.$forceUpdate();
     },
     beforeDestroy: function beforeDestroy() {
-      widgetTree.removeWidgetNode(this.path, this);
+      this.widgetTree.removeWidgetNode(this.path, this);
     },
     methods: {
       setState: function setState(key, value) {
@@ -11253,7 +11070,13 @@
         }],
         "style": schemaFormStyle
       }, [title && this.showTitle ? h("span", {
-        "class": ['bk-schema-form-group-title', this.type]
+        "directives": [{
+          name: "bk-tooltips",
+          value: this.description
+        }],
+        "class": ['bk-schema-form-group-title', this.type, {
+          'has-desc': !!this.description
+        }]
       }, [title, hasError ? h("span", {
         "class": "bk-schema-form-group__error-tips"
       }, [h("span", {
@@ -11721,6 +11544,197 @@
   var css_248z = "";
   styleInject(css_248z);
 
+  var WidgetNode = /*#__PURE__*/function () {
+    function WidgetNode(config) {
+      _classCallCheck(this, WidgetNode);
+      this.id = void 0;
+      this.instance = void 0;
+      this.parent = void 0;
+      this.type = void 0;
+      this.index = void 0;
+      // todo
+      this.children = void 0;
+      var id = config.id,
+        instance = config.instance,
+        parent = config.parent,
+        index = config.index,
+        type = config.type,
+        _config$children = config.children,
+        children = _config$children === void 0 ? [] : _config$children;
+      this.id = id;
+      this.type = type;
+      this.index = index;
+      this.instance = instance;
+      this.parent = parent;
+      this.children = children;
+    }
+    // 当前node的值
+    return _createClass(WidgetNode, [{
+      key: "value",
+      get: function get() {
+        var _this$instance;
+        return (_this$instance = this.instance) === null || _this$instance === void 0 ? void 0 : _this$instance.value;
+      }
+      // 是否含有可见子节点
+    }, {
+      key: "isChildrenVisible",
+      get: function get() {
+        if (this.type === 'node') {
+          var _this$instance2;
+          return (_this$instance2 = this.instance) === null || _this$instance2 === void 0 ? void 0 : _this$instance2.state.visible;
+        }
+        return this.children.some(function (child) {
+          return child.isChildrenVisible;
+        });
+      }
+      /**
+       * 获取 parents
+       */
+    }, {
+      key: "parents",
+      get: function get() {
+        if (!this.parent) {
+          return [];
+        }
+        return [].concat(_toConsumableArray(this.parent.parents), [this.parent]);
+      }
+      // 第一个子节点
+    }, {
+      key: "firstChild",
+      get: function get() {
+        return this.children[0] || null;
+      }
+      // 最后一个子节点
+    }, {
+      key: "lastChild",
+      get: function get() {
+        return this.children[this.children.length - 1] || null;
+      }
+      // 指定属性下的同胞节点
+    }, {
+      key: "getSibling",
+      value: function getSibling(lastProp) {
+        var _this$parent;
+        var reg = new RegExp("".concat(Path.getPathLastProp(this.id) || '', "$"));
+        var id = this.id.replace(reg, lastProp);
+        return (_this$parent = this.parent) === null || _this$parent === void 0 ? void 0 : _this$parent.children.find(function (node) {
+          return node.id === id;
+        });
+      }
+      // 获取所以同胞节点（不含自己）
+    }, {
+      key: "getSiblings",
+      value: function getSiblings() {
+        var _this$parent2,
+          _this = this;
+        return ((_this$parent2 = this.parent) === null || _this$parent2 === void 0 ? void 0 : _this$parent2.children.filter(function (node) {
+          return node.instance !== _this.instance;
+        })) || [];
+      }
+      /**
+       * 是否是叶子节点
+       */
+    }, {
+      key: "isLeaf",
+      get: function get() {
+        return !this.children.length;
+      }
+    }, {
+      key: "appendChild",
+      value: function appendChild(node) {
+        var _this$children;
+        var nodes = Array.isArray(node) ? node : [node];
+        var offset = node.index !== undefined ? node.index : this.children.length;
+        (_this$children = this.children).splice.apply(_this$children, [offset, 0].concat(_toConsumableArray(nodes)));
+        this.children.slice(offset).forEach(function (node, index) {
+          node.index = offset + index;
+        });
+        return nodes;
+      }
+    }, {
+      key: "removeChild",
+      value: function removeChild(node) {
+        var _this2 = this;
+        var nodes = Array.isArray(node) ? node : [node];
+        var removedChildIndex = [];
+        nodes.forEach(function (node) {
+          var index = node.index;
+          removedChildIndex.push(index);
+          _this2.children.splice(index, 1);
+        });
+        var minIndex = Math.min.apply(Math, removedChildIndex);
+        this.children.slice(minIndex).forEach(function (node, index) {
+          node.index = minIndex + index;
+        });
+        return nodes;
+      }
+    }]);
+  }();
+  var WidgetTree = /*#__PURE__*/function () {
+    function WidgetTree() {
+      _classCallCheck(this, WidgetTree);
+      this.widgetMap = {};
+    }
+    return _createClass(WidgetTree, [{
+      key: "addWidgetNode",
+      value: function addWidgetNode(path, instance, type, index) {
+        if (path === '') {
+          // 根节点
+          var node = new WidgetNode({
+            id: '',
+            type: type,
+            index: index,
+            parent: null,
+            instance: instance,
+            children: []
+          });
+          this.widgetMap[path] = node;
+        } else {
+          // 普通节点
+          var parentId = Path.getParentPath(path);
+          var parentNode = this.widgetMap[parentId];
+          var _node = new WidgetNode({
+            id: (instance === null || instance === void 0 ? void 0 : instance.path) || path,
+            type: type,
+            index: index,
+            parent: parentNode,
+            instance: instance,
+            children: []
+          });
+          if (!parentNode) {
+            console.warn('Unexpected parent id, please check widget node', _node);
+          } else {
+            parentNode.appendChild(_node);
+          }
+          this.widgetMap[path] = _node;
+        }
+      }
+    }, {
+      key: "removeWidgetNode",
+      value: function removeWidgetNode(path, instance) {
+        var node = this.widgetMap[path];
+        if (node) {
+          if (node.parent) {
+            var children = node.parent.children;
+            var index = children.findIndex(function (item) {
+              return item.instance === instance;
+            });
+            if (index > -1) {
+              children.splice(index, 1);
+              children.slice(index).forEach(function (node, i) {
+                node.index = index + i;
+              });
+            }
+          }
+          if (node.instance === instance) {
+            delete this.widgetMap[path];
+          }
+        }
+      }
+    }]);
+  }();
+  // export default new WidgetTree();
+
   var defaultOptions = {
     namespace: 'bk',
     components: {
@@ -11768,7 +11782,8 @@
       data: function data() {
         return {
           rootData: {},
-          formKey: 'bk-ui-form'
+          formKey: 'bk-ui-form',
+          widgetTree: new WidgetTree()
         };
       },
       watch: {
@@ -11819,9 +11834,15 @@
             this.$emit('change', newValue, oldValue);
           }
         },
-        validateForm: validateForm,
-        validateFormItem: validateFormItem,
-        validate: validateFormWithResult,
+        validateForm: function validateForm$1() {
+          return validateForm(this.widgetTree);
+        },
+        validateFormItem: function validateFormItem$1(path) {
+          return validateFormItem(path, this.widgetTree);
+        },
+        validate: function validate() {
+          return validateFormWithResult(this.widgetTree);
+        },
         validateSchema: validateSchema
       },
       render: function render(h) {
@@ -11864,6 +11885,11 @@
             }
           }
         })]);
+      },
+      provide: function provide() {
+        return {
+          widgetTree: this.widgetTree
+        };
       }
     });
   }