formiojs-eorion 0.1.8 → 0.1.10

package/Formio.js

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

package/components/CustomTabs/Tabs.js

@@ -139,7 +139,7 @@ var CustomTabsComponent = /*#__PURE__*/function (_NestedComponent) {
     value: function attach(element) {
       var _this$loadRefs,
         _this5 = this;
-      this.loadRefs(element, (_this$loadRefs = {}, _defineProperty(_this$loadRefs, this.tabLinkKey, 'multiple'), _defineProperty(_this$loadRefs, this.tabKey, 'multiple'), _defineProperty(_this$loadRefs, this.tabLikey, 'multiple'), _defineProperty(_this$loadRefs, 'tabLine', 'single'), _this$loadRefs));
+      this.loadRefs(element, (_this$loadRefs = {}, _defineProperty(_this$loadRefs, this.tabLinkKey, 'multiple'), _defineProperty(_this$loadRefs, this.tabKey, 'multiple'), _defineProperty(_this$loadRefs, this.tabLikey, 'multiple'), _defineProperty(_this$loadRefs, 'tabLine', 'single'), _defineProperty(_this$loadRefs, 'tabHeaderContainer', 'single'), _defineProperty(_this$loadRefs, 'tabHeaderContainerScroll', 'single'), _this$loadRefs));
       ['change', 'error'].forEach(function (event) {
         return _this5.on(event, _this5.handleTabsValidation.bind(_this5));
       });
@@ -193,12 +193,39 @@ var CustomTabsComponent = /*#__PURE__*/function (_NestedComponent) {
       _lodash.default.each(this.refs[this.tabLinkKey], function (tabLink, tabIndex) {
         // 设置下划线位置 //设置颜色
         if (tabIndex === _this7.currentTab) {
-          _this7.refs.tabLine.style.width = "".concat(tabLink.offsetWidth, "px");
-          // 10是容器的padding
-          _this7.refs.tabLine.style.transform = "translateX(".concat(tabLink.offsetLeft - 15, "px)");
-          tabLink.style.color = _this7.component["headerColor"];
+          // 检测tab标签是否完整显示
+          var rect = tabLink.getBoundingClientRect();
+          var rectScroll = _this7.refs.tabHeaderContainerScroll.getBoundingClientRect();
+          // 10px是左右的padding
+          if (rect.right > rectScroll.right) {
+            // 右滑
+            _this7.refs.tabHeaderContainerScroll.scrollLeft = _this7.refs.tabHeaderContainerScroll.scrollLeft + (rect.right - rectScroll.right);
+          }
+          if (rect.left < rectScroll.left) {
+            // 左滑
+            _this7.refs.tabHeaderContainerScroll.scrollLeft = _this7.refs.tabHeaderContainerScroll.scrollLeft - (rectScroll.left - rect.left);
+          }
+          if (_this7.refs.tabLine) {
+            _this7.refs.tabLine.style.width = "".concat(tabLink.offsetWidth, "px");
+            _this7.refs.tabLine.style.transform = "translateX(".concat(tabLink.offsetLeft, "px)");
+          }
+          if (_this7.component["headerStyle"] === "pills") {
+            tabLink.querySelector(".tab-pills-item").style.color = "white";
+            tabLink.querySelector(".tab-pills-item").style["background-color"] = _this7.component["headerColor"];
+            tabLink.querySelector(".tab-pills-item").style.border = "1px solid ".concat(_this7.component["headerColor"]);
+            tabLink.querySelector(".triangle").style.display = "flex";
+          } else {
+            tabLink.style.color = _this7.component["headerColor"];
+          }
         } else {
-          tabLink.style.color = _this7.component["headerNormalColor"];
+          if (_this7.component["headerStyle"] === "pills") {
+            tabLink.querySelector(".tab-pills-item").style.color = _this7.component["headerNormalColor"];
+            tabLink.querySelector(".tab-pills-item").style.border = "1px solid ".concat(_this7.component["headerNormalColor"]);
+            tabLink.querySelector(".tab-pills-item").style["background-color"] = "transparent";
+            tabLink.querySelector(".triangle").style.display = "none";
+          } else {
+            tabLink.style.color = _this7.component["headerNormalColor"];
+          }
         }
       });
     }

package/components/CustomTabs/editForm/Tabs.edit.display.js

@@ -61,6 +61,22 @@ var _default = [{
     key: 'hideHeader',
     label: '隐藏头部',
     input: true
+  }, {
+    type: 'select',
+    label: '样式',
+    data: {
+      values: [{
+        label: '普通',
+        value: 'normal'
+      }, {
+        label: 'pills',
+        value: 'pills'
+      }]
+    },
+    key: 'headerStyle',
+    input: true,
+    defaultValue: 'normal',
+    dataSrc: 'values'
   }, {
     type: 'select',
     label: '对齐方式',

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

package/dist/formio.builder.css

@@ -2626,6 +2626,11 @@ span[role=link] {
   height: 100%;
 }
 
+.formio-component-customTabs .tab-header {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+}
 .formio-component-customTabs .tab-header .tab-item {
   display: flex;
   align-items: center;
@@ -2644,11 +2649,17 @@ span[role=link] {
   cursor: default;
 }
 .formio-component-customTabs .tab-header .tab-line {
-  position: absolute;
   height: 2px;
   margin-top: 5px;
   transition: all 0.3s;
 }
+.formio-component-customTabs .tab-header .tab-pills-item {
+  display: table;
+  width: fit-content;
+  border-radius: 0.35rem;
+  padding: 0.5rem 1rem;
+  word-break: keep-all;
+}
 
 .formio-component-customTable table, .formio-component-customTable th, .formio-component-customTable td {
   border: 1px solid black;