formiojs-eorion 0.1.7 → 0.1.9

package/Formio.js

@@ -1724,7 +1724,7 @@ Formio.projectUrlSet = false;
 Formio.plugins = [];
 Formio.cache = {};
 Formio.Providers = _providers.default;
-Formio.version = '0.1.7';
+Formio.version = '0.1.9';
 Formio.pathType = '';
 Formio.events = new _EventEmitter.default();
 Formio.cdn = new _CDN.default();

package/components/CustomTabs/Tabs.js

@@ -304,6 +304,9 @@ var CustomTabsComponent = /*#__PURE__*/function (_NestedComponent) {
           if (['echarts', 'taskCalendar'].includes(item.type)) {
             _this11.tabs[_this11.currentTab][index].refresh(new Date().getTime());
           }
+          if (['data_china_grid_row', 'data_china_grid'].includes(item.type)) {
+            _this11.tabs[_this11.currentTab][index].resetSparkLine();
+          }
         });
       }
       this.clearErrorClasses(this.refs[this.tabLinkKey]);

package/components/DataChinaGrid/Data.js

@@ -20,9 +20,9 @@ exports.default = void 0;
 require("core-js/modules/es.regexp.exec.js");
 require("core-js/modules/es.string.replace.js");
 require("core-js/modules/es.string.trim.js");
+require("core-js/modules/es.array.find.js");
 require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/web.dom-collections.for-each.js");
-require("core-js/modules/es.array.find.js");
 require("core-js/modules/es.array.concat.js");
 require("core-js/modules/es.object.get-prototype-of.js");
 var _Field = _interopRequireDefault(require("../_classes/field/Field"));
@@ -135,6 +135,62 @@ var DataChinaGrid = /*#__PURE__*/function (_Component) {
     value: function getValue() {
       return this.component.field;
     }
+  }, {
+    key: "resetSparkLine",
+    value: function resetSparkLine() {
+      var self = this;
+      var container = this.element.querySelector('.data-container');
+      if (self.component['enable-sparkline']) {
+        if (self.isLoadingSparkLine) {
+          return true;
+        }
+        self.isLoadingSparkLine = true;
+        var sparkLineType = this.component['sparkLine-type'] || 'line';
+        var fillColor;
+        if (self.component['sparkLine-fill-color']) {
+          switch (sparkLineType) {
+            case 'line':
+              fillColor = self.component['sparkLine-fill-color'].split(',')[0];
+              break;
+            case 'pie':
+            case 'donut':
+            case 'bar':
+              fillColor = self.component['sparkLine-fill-color'].split(',');
+              break;
+          }
+        }
+        // values
+        container.querySelector('.sparkline-container').innerHTML = "<span class=\"line\">".concat(self.parseTpl(self.component['sparkLine-value'], {
+          data: self.rootValue
+        }), "</span>");
+        try {
+          // @ts-ignore
+          $(container).find('.line').peity(sparkLineType, {
+            fill: fillColor,
+            height: self.component['sparkLine-height'],
+            max: self.component['sparkLine-max-value-count'],
+            min: 0,
+            stroke: self.component['sparkLine-stroke-color'],
+            strokeWidth: 2,
+            width: self.component['sparkLine-width']
+          });
+          self.isLoadingSparkLine = false;
+        } catch (e) {
+          container.querySelectorAll(".line").forEach(function (e) {
+            return peity(e, sparkLineType, {
+              fill: fillColor,
+              height: self.component['sparkLine-height'],
+              max: self.component['sparkLine-max-value-count'],
+              min: 0,
+              stroke: self.component['sparkLine-stroke-color'],
+              strokeWidth: 2,
+              width: self.component['sparkLine-width']
+            });
+          });
+          self.isLoadingSparkLine = false;
+        }
+      }
+    }
 
     /**
      * Set the value of the component into the dom elements.
@@ -179,56 +235,7 @@ var DataChinaGrid = /*#__PURE__*/function (_Component) {
           });
         }
         // 图标
-        if (self.component['enable-sparkline']) {
-          if (self.isLoadingSparkLine) {
-            return true;
-          }
-          self.isLoadingSparkLine = true;
-          var sparkLineType = this.component['sparkLine-type'] || 'line';
-          var fillColor;
-          if (self.component['sparkLine-fill-color']) {
-            switch (sparkLineType) {
-              case 'line':
-                fillColor = self.component['sparkLine-fill-color'].split(',')[0];
-                break;
-              case 'pie':
-              case 'donut':
-              case 'bar':
-                fillColor = self.component['sparkLine-fill-color'].split(',');
-                break;
-            }
-          }
-          // values
-          container.querySelector('.sparkline-container').innerHTML = "<span class=\"line\">".concat(self.parseTpl(self.component['sparkLine-value'], {
-            data: self.rootValue
-          }), "</span>");
-          try {
-            // @ts-ignore
-            $(container).find('.line').peity(sparkLineType, {
-              fill: fillColor,
-              height: self.component['sparkLine-height'],
-              max: self.component['sparkLine-max-value-count'],
-              min: 0,
-              stroke: self.component['sparkLine-stroke-color'],
-              strokeWidth: 2,
-              width: self.component['sparkLine-width']
-            });
-            self.isLoadingSparkLine = false;
-          } catch (e) {
-            container.querySelectorAll(".line").forEach(function (e) {
-              return peity(e, sparkLineType, {
-                fill: fillColor,
-                height: self.component['sparkLine-height'],
-                max: self.component['sparkLine-max-value-count'],
-                min: 0,
-                stroke: self.component['sparkLine-stroke-color'],
-                strokeWidth: 2,
-                width: self.component['sparkLine-width']
-              });
-            });
-            self.isLoadingSparkLine = false;
-          }
-        }
+        self.resetSparkLine();
       } catch (e) {
         console.log(e);
       }

package/components/DataChinaGridRow/Data.js

@@ -20,9 +20,9 @@ exports.default = void 0;
 require("core-js/modules/es.regexp.exec.js");
 require("core-js/modules/es.string.replace.js");
 require("core-js/modules/es.string.trim.js");
+require("core-js/modules/es.array.find.js");
 require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/web.dom-collections.for-each.js");
-require("core-js/modules/es.array.find.js");
 require("core-js/modules/es.array.concat.js");
 require("core-js/modules/es.object.get-prototype-of.js");
 var _Field = _interopRequireDefault(require("../_classes/field/Field"));
@@ -136,6 +136,65 @@ var DataChinaGridRow = /*#__PURE__*/function (_Component) {
     value: function getValue() {
       return this.component.field;
     }
+  }, {
+    key: "resetSparkLine",
+    value: function resetSparkLine() {
+      var self = this;
+      var container = this.element.querySelector('.data-container');
+      if (self.component['enable-sparkline']) {
+        if (self.isLoadingSparkLine) {
+          return true;
+        }
+        self.isLoadingSparkLine = true;
+        var sparkLineType = this.component['sparkLine-type'] || 'line';
+        var fillColor;
+        if (self.component['sparkLine-fill-color']) {
+          switch (sparkLineType) {
+            case 'line':
+              fillColor = self.component['sparkLine-fill-color'].split(',')[0];
+              break;
+            case 'pie':
+            case 'donut':
+            case 'bar':
+              fillColor = self.component['sparkLine-fill-color'].split(',');
+              break;
+          }
+        }
+        // values
+        container.querySelector('.sparkline-container').innerHTML = "<span class=\"line\">".concat(self.parseTpl(self.component['sparkLine-value'], {
+          data: self.rootValue
+        }), "</span>");
+        // 宽度计算
+        var parentWidth = container.querySelector('#sparkline-container-parent').offsetWidth;
+        parentWidth = parentWidth * self.component['sparkLine-width'];
+        try {
+          // @ts-ignore
+          (0, _jquery.default)(container).find('.line').peity(sparkLineType, {
+            fill: fillColor,
+            height: self.component['sparkLine-height'],
+            max: self.component['sparkLine-max-value-count'],
+            min: 0,
+            stroke: self.component['sparkLine-stroke-color'],
+            strokeWidth: 2,
+            width: parentWidth
+          });
+          self.isLoadingSparkLine = false;
+        } catch (e) {
+          container.querySelectorAll(".line").forEach(function (e) {
+            return peity(e, sparkLineType, {
+              fill: fillColor,
+              height: self.component['sparkLine-height'],
+              max: self.component['sparkLine-max-value-count'],
+              min: 0,
+              stroke: self.component['sparkLine-stroke-color'],
+              strokeWidth: 2,
+              width: parentWidth
+            });
+          });
+          self.isLoadingSparkLine = false;
+        }
+      }
+    }
 
     /**
      * Set the value of the component into the dom elements.
@@ -180,59 +239,7 @@ var DataChinaGridRow = /*#__PURE__*/function (_Component) {
           });
         }
         // 图标
-        if (self.component['enable-sparkline']) {
-          if (self.isLoadingSparkLine) {
-            return true;
-          }
-          self.isLoadingSparkLine = true;
-          var sparkLineType = this.component['sparkLine-type'] || 'line';
-          var fillColor;
-          if (self.component['sparkLine-fill-color']) {
-            switch (sparkLineType) {
-              case 'line':
-                fillColor = self.component['sparkLine-fill-color'].split(',')[0];
-                break;
-              case 'pie':
-              case 'donut':
-              case 'bar':
-                fillColor = self.component['sparkLine-fill-color'].split(',');
-                break;
-            }
-          }
-          // values
-          container.querySelector('.sparkline-container').innerHTML = "<span class=\"line\">".concat(self.parseTpl(self.component['sparkLine-value'], {
-            data: self.rootValue
-          }), "</span>");
-          // 宽度计算
-          var parentWidth = container.querySelector('#sparkline-container-parent').offsetWidth;
-          parentWidth = parentWidth * self.component['sparkLine-width'];
-          try {
-            // @ts-ignore
-            (0, _jquery.default)(container).find('.line').peity(sparkLineType, {
-              fill: fillColor,
-              height: self.component['sparkLine-height'],
-              max: self.component['sparkLine-max-value-count'],
-              min: 0,
-              stroke: self.component['sparkLine-stroke-color'],
-              strokeWidth: 2,
-              width: parentWidth
-            });
-            self.isLoadingSparkLine = false;
-          } catch (e) {
-            container.querySelectorAll(".line").forEach(function (e) {
-              return peity(e, sparkLineType, {
-                fill: fillColor,
-                height: self.component['sparkLine-height'],
-                max: self.component['sparkLine-max-value-count'],
-                min: 0,
-                stroke: self.component['sparkLine-stroke-color'],
-                strokeWidth: 2,
-                width: parentWidth
-              });
-            });
-            self.isLoadingSparkLine = false;
-          }
-        }
+        self.resetSparkLine();
       } catch (e) {
         console.log(e);
       }

package/components/echarts/ECharts.js

@@ -119,7 +119,7 @@ var ECharts = /*#__PURE__*/function (_FieldComponent) {
         // 初始化 ECharts 实例
         chartInstance = echarts.init(canvas);
       }
-      var optionsStr = this.component["option-value"];
+      var optionsStr = this.component['option-value'];
       optionsStr = this.parseTpl(optionsStr, {
         data: this.rootValue
       });

package/components/index.js

@@ -161,6 +161,7 @@ var _default = {
   data_china_grid: _Data2.default,
   data_china_grid_row: _Data3.default,
   customTabs: _Tabs2.default,
-  echarts: _ECharts.default
+  echarts: _ECharts.default,
+  progress: _Progress.default
 };
 exports.default = _default;

package/components/progress/Progress.form.js

@@ -5,14 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = _default;
 require("core-js/modules/es.array.concat.js");
-var _NestedComponent = _interopRequireDefault(require("../_classes/nested/NestedComponent.form"));
+var _Component = _interopRequireDefault(require("../_classes/component/Component.form"));
 var _ProgressEdit = _interopRequireDefault(require("./editForm/Progress.edit.display"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _default() {
   for (var _len = arguments.length, extend = new Array(_len), _key = 0; _key < _len; _key++) {
     extend[_key] = arguments[_key];
   }
-  return _NestedComponent.default.apply(void 0, [[{
+  return _Component.default.apply(void 0, [[{
     key: 'display',
     components: _ProgressEdit.default
   }]].concat(extend));

package/components/progress/Progress.js

@@ -15,12 +15,13 @@ exports.default = void 0;
 require("core-js/modules/es.regexp.exec.js");
 require("core-js/modules/es.string.replace.js");
 require("core-js/modules/es.string.trim.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/web.dom-collections.for-each.js");
 require("core-js/modules/es.array.concat.js");
 require("core-js/modules/es.symbol.to-primitive.js");
 require("core-js/modules/es.date.to-primitive.js");
 require("core-js/modules/es.symbol.js");
 require("core-js/modules/es.symbol.description.js");
-require("core-js/modules/es.object.to-string.js");
 require("core-js/modules/es.number.constructor.js");
 var _Field = _interopRequireDefault(require("../_classes/field/Field"));
 var _Progress = _interopRequireDefault(require("./Progress.form"));
@@ -65,9 +66,15 @@ var Progress = /*#__PURE__*/function (_FieldComponent) {
   }, {
     key: "attach",
     value: function attach(element) {
-      var refs = {};
+      var _this = this;
+      var refs = {
+        titleContainer: 'single',
+        progressContainer: 'single'
+      };
       this.loadRefs(element, refs);
-
+      setTimeout(function () {
+        _this.setValue();
+      }, 100);
       // Allow basic component functionality to attach like field logic and tooltips.
       return _get(_getPrototypeOf(Progress.prototype), "attach", this).call(this, element);
     }
@@ -87,7 +94,15 @@ var Progress = /*#__PURE__*/function (_FieldComponent) {
     value: function parseTpl(template, map) {
       return template.replace(/\$\{.+?}/g, function (match) {
         var path = match.substr(2, match.length - 3).trim();
-        return _lodash.default.get(map, path);
+        var strTmp = _lodash.default.get(map, path);
+        if (strTmp === undefined) {
+          strTmp = null;
+        } else {
+          if (_lodash.default.isArray(strTmp) || _lodash.default.isObject(strTmp)) {
+            strTmp = JSON.stringify(strTmp);
+          }
+        }
+        return strTmp;
       });
     }
 
@@ -100,6 +115,29 @@ var Progress = /*#__PURE__*/function (_FieldComponent) {
   }, {
     key: "setValue",
     value: function setValue(value) {
+      var _this2 = this;
+      this.refs.titleContainer.innerHTML = "";
+      this.refs.progressContainer.innerHTML = "";
+      var optionsStr = this.component['option-value'];
+      try {
+        optionsStr = this.parseTpl(optionsStr, {
+          data: this.rootValue
+        });
+        optionsStr = JSON.parse(optionsStr);
+        var sum = _lodash.default.sumBy(optionsStr, 'value');
+        if (this.component['max-value'] && this.component['max-value'].trim().length > 0) {
+          sum = _lodash.default.toNumber(this.parseTpl(this.component['max-value'], {
+            data: this.rootValue
+          }));
+        }
+        optionsStr.forEach(function (item) {
+          var percent = _lodash.default.floor(_lodash.default.divide(item.value, sum) * 100, 1);
+          _this2.refs.titleContainer.insertAdjacentHTML('beforeend', "<div class=\"progress-title-container\" style=\"display: flex;flex-direction: row;align-items: center;font-size: ".concat(_this2.component['font-size'], "\">\n            <div class=\"progress-title-item-indicator\" style=\"width: 5px;height: 5px;background-color: ").concat(item.color, ";margin-right: 10px\"></div>\n            <div class=\"progress-title-item-title\" style=\"color: ").concat(item.color, "\">").concat(item.title, "</div>\n            <div class=\"progress-title-item-value\" style=\"font-weight: bold;margin-left: 5px;margin-right: 5px;color: black\">").concat(item.value, "</div>\n            <div class=\"progress-title-item-unit\" style=\"color: grey\">").concat(item.unit, "</div>\n            <div class=\"progress-title-item-percent\" style=\"margin-left: 10px;color: grey\">").concat(percent, "%</div>\n        </div>"));
+          _this2.refs.progressContainer.insertAdjacentHTML('beforeend', "<div class=\"progress-bar\" role=\"progressbar\" style=\"width: ".concat(percent, "%;background-color: ").concat(item.color, "\" aria-valuenow=\"").concat(item.value, "\" aria-valuemin=\"0\" aria-valuemax=\"").concat(sum, "\"></div>"));
+        });
+      } catch (e) {
+        console.log('json转换失败', e);
+      }
       return true;
     }
   }], [{
@@ -121,7 +159,7 @@ exports.default = Progress;
 _defineProperty(Progress, "builderInfo", {
   title: 'Progress',
   group: 'advanced',
-  icon: 'qrcode',
+  icon: 'bar-progress',
   weight: 70,
   documentation: 'http://help.form.io/userguide/#progress',
   schema: Progress.schema()

package/components/progress/editForm/Progress.edit.display.js

@@ -5,40 +5,59 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _default = [{
-  type: 'number',
-  label: 'Size',
+  type: 'textfield',
+  label: '宽度',
   key: 'width',
   input: true,
   weight: 1,
-  defaultValue: 128,
-  placeholder: 'Size of Qr Code',
-  tooltip: 'Enter the size that should be displayed by this Qr Code.'
-}, {
-  type: 'select',
-  label: '对齐方式',
-  key: 'align',
-  weight: 2,
-  defaultValue: "start",
-  data: {
-    values: [{
-      label: 'left',
-      value: 'start'
-    }, {
-      label: 'right',
-      value: 'end'
-    }, {
-      label: 'mid',
-      value: 'center'
-    }]
+  defaultValue: "100%",
+  validate: {
+    required: true
   }
 }, {
-  type: 'input',
-  label: 'Value',
-  key: 'value',
+  type: 'textfield',
+  label: '高度',
+  key: 'height',
   input: true,
-  placeholder: "https://${data.name}-hh.com",
-  tooltip: 'Value',
-  weight: 3
+  weight: 1,
+  defaultValue: "50px",
+  validate: {
+    required: true
+  }
+}, {
+  type: 'textarea',
+  label: '配置项',
+  key: 'option-value',
+  editor: 'ace',
+  input: true,
+  tooltip: '配置项(json格式)',
+  placeholder: "[{\"value\":10,\"title\":\"demo\",\"color\":\"black\",\"unit\":\"\u4E2A\"}]",
+  weight: 1,
+  validate: {
+    required: true
+  }
+}, {
+  type: 'textfield',
+  label: '最大值',
+  key: 'max-value',
+  input: true,
+  weight: 1,
+  tooltip: '进度条最大值，若该值为空，则根据所有选项自动计算百分比',
+  defaultValue: null
+}, {
+  type: 'textfield',
+  label: '字体大小',
+  key: 'font-size',
+  input: true,
+  weight: 1,
+  defaultValue: "20px"
+}, {
+  type: 'textfield',
+  label: '进度条背景颜色',
+  key: 'progress-color',
+  input: true,
+  weight: 1,
+  defaultValue: "white"
 }, {
   key: 'labelPosition',
   ignore: true