@blueking/bkui-form 0.0.42-beta.10 → 0.0.42-beta.12

package/dist/bkui-form-es.js

@@ -1750,197 +1750,6 @@ var isExpression = function isExpression(expression) {
   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]) {
@@ -1972,7 +1781,7 @@ var subscribe = function subscribe(path, typeName, fn) {
  * @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; // 当前组件实例，用来条件表达式判断
@@ -2017,6 +1826,7 @@ var parsePath = function parsePath(path, instance) {
 };
 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)) {
@@ -2028,13 +1838,13 @@ var reactionRegister = function reactionRegister(path) {
       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));
         }
       });
     });
@@ -9768,7 +9578,7 @@ var validate = function validate(rule, instance) {
   };
 };
 // 设置表单项校验状态
-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') {
@@ -9801,7 +9611,7 @@ var setWidgetErrorTips = function setWidgetErrorTips(path, isError, errorMsg) {
  * 校验单个表单项
  * @param path 字段路径
  */
-var validateFormItem = function validateFormItem(path) {
+var validateFormItem = function validateFormItem(path, widgetTree) {
   var _instance$schema;
   // TODO 校验逻辑梳理
   var formItem = widgetTree.widgetMap[path];
@@ -9841,7 +9651,7 @@ var validateFormItem = function validateFormItem(path) {
     var errorsText = ajv.errorsText(schemaValidate.errors, {
       separator: '\n'
     });
-    setWidgetErrorTips(path, true, errorsText);
+    setWidgetErrorTips(path, true, errorsText, widgetTree);
     return {
       result: false,
       message: errorsText,
@@ -9870,7 +9680,7 @@ var validateFormItem = function validateFormItem(path) {
     _iterator.f();
   }
   if (isError) {
-    setWidgetErrorTips(path, true, errorMsg);
+    setWidgetErrorTips(path, true, errorMsg, widgetTree);
     return {
       result: false,
       message: errorMsg,
@@ -9886,24 +9696,24 @@ var validateFormItem = function validateFormItem(path) {
 /**
  * 校验整个表单
  */
-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);
       }
@@ -9946,8 +9756,8 @@ var validateSchema = /*#__PURE__*/function () {
  * 触发校验
  * @param path 字段路径
  */
-var dispatchValidate = function dispatchValidate(path) {
-  return validateFormItem(path);
+var dispatchValidate = function dispatchValidate(path, widgetTree) {
+  return validateFormItem(path, widgetTree);
 };
 
 // 事件订阅器
@@ -10037,6 +9847,7 @@ var _excluded$4 = ["url", "params"],
 var Widget = Vue.extend({
   name: 'Widget',
   props: props,
+  inject: ['widgetTree'],
   data: function data() {
     return {
       loading: false,
@@ -10055,10 +9866,10 @@ var Widget = Vue.extend({
   },
   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;
@@ -10076,7 +9887,7 @@ var Widget = Vue.extend({
         if (!deepEquals(newValue, oldValue)) {
           setTimeout(function () {
             reactionDispatch(_this.path, 'valChange');
-            dispatchValidate(_this.path);
+            dispatchValidate(_this.path, _this.widgetTree);
           }, 0);
         }
       }
@@ -10108,17 +9919,17 @@ var Widget = Vue.extend({
       }
     });
     // 注册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: {
@@ -10939,6 +10750,7 @@ var getRowDefaultData = function getRowDefaultData() {
 var TableWidget = Vue.extend({
   name: 'TableWidget',
   props: props,
+  inject: ['widgetTree'],
   watch: {
     value: {
       immediate: true,
@@ -10948,9 +10760,9 @@ var TableWidget = Vue.extend({
         (_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');
         });
       }
     }
@@ -10997,7 +10809,19 @@ var TableWidget = Vue.extend({
     }
     var uiOptions = Schema.getUiOptions(schema);
     var getTableColumn = function getTableColumn() {
-      var VNodeList = Object.keys(properties).map(function (key) {
+      // 表格列排序优先取 ui:order 属性里配置的顺序
+      var colKeys = Object.keys(properties);
+      var orders = (schemaItems === null || schemaItems === void 0 ? void 0 : schemaItems['ui:order']) || [];
+      var orderMap = new Map();
+      orders.forEach(function (key, index) {
+        orderMap.set(key, index);
+      });
+      colKeys.sort(function (a, b) {
+        var orderA = orderMap.has(a) ? orderMap.get(a) : Infinity;
+        var orderB = orderMap.has(b) ? orderMap.get(b) : Infinity;
+        return orderA - orderB;
+      });
+      var VNodeList = colKeys.map(function (key) {
         var _colField$uiProps, _colField$uiProps2;
         var colField = properties[key];
         // 仅支持基础数据类型的属性配置，render-header、sort-method、formatter等Function类型的属性不属于json支持的数据类型，配置将不会生效
@@ -11119,6 +10943,7 @@ var TableWidget = Vue.extend({
 
 var FieldGroupWrap = Vue.extend({
   name: 'FieldGroupWrap',
+  inject: ['widgetTree'],
   props: _objectSpread2(_objectSpread2({}, props), {}, {
     // 组类型
     type: {
@@ -11158,14 +10983,14 @@ var FieldGroupWrap = Vue.extend({
   },
   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) {
@@ -11701,6 +11526,197 @@ function styleInject(css, ref) {
 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: {
@@ -11748,7 +11764,8 @@ function createForm() {
     data: function data() {
       return {
         rootData: {},
-        formKey: 'bk-ui-form'
+        formKey: 'bk-ui-form',
+        widgetTree: new WidgetTree()
       };
     },
     watch: {
@@ -11799,9 +11816,15 @@ function createForm() {
           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) {
@@ -11844,6 +11867,11 @@ function createForm() {
           }
         }
       })]);
+    },
+    provide: function provide() {
+      return {
+        widgetTree: this.widgetTree
+      };
     }
   });
 }