zartui 2.0.80 → 2.0.81

package/lib/index.js

@@ -309,7 +309,7 @@ exports.Toast = _toast.default;
 var _uploader = _interopRequireDefault(require("./uploader"));
 
 exports.Uploader = _uploader.default;
-var version = '2.0.80';
+var version = '2.0.81';
 exports.version = version;
 
 function install(Vue) {

package/lib/index.less

@@ -3,6 +3,7 @@
 @import "./info/index.less";
 @import "./icon/index.less";
 @import "./tag/index.less";
+@import "./table/index.less";
 @import "./tabbar-item/index.less";
 @import "./step/index.less";
 @import "./rate/index.less";
@@ -67,5 +68,4 @@
 @import "./stepper/index.less";
 @import "./steps/index.less";
 @import "./swipe-cell/index.less";
-@import "./tabbar/index.less";
-@import "./table/index.less";
+@import "./tabbar/index.less";

package/lib/style/var.less

@@ -1066,11 +1066,16 @@
 @backtop-box-shadow: 0 4px 12px 0 rgba(5,140,230,0.40);
 
 // Table
-@table-border-radius: @border-radius-lg;
 @table-head-height: 40px;
 @table-head-font-size: 14px;
+@table-head-color: @blue;
+@table-head-background: #E6F5FF;
+@table-body-background: #F5FAFF;
 @table-row-height: 40px;
 @table-row-font-size: 14px;
+@table-row-color: #2D4B73;
+@table-row-background: #fff;
+@table-sort-default-color: #c8c9cc;
 
 // Fold-Dialog
 @foldDialog-padding: 0 16px 12px 16px;

package/lib/table/index.css

@@ -1 +1 @@
-.zt2-table{position:relative;border-radius:8px;scrollbar-width:none;-ms-overflow-style:none}.zt2-table::-webkit-scrollbar{display:none;width:0;height:0}.zt2-table__normal-box{display:-webkit-box;display:-webkit-flex;display:flex;overflow-x:scroll;position:relative}.zt2-table__fixed-left-box{display:-webkit-box;display:-webkit-flex;display:flex;position:absolute;top:0;left:-1px;z-index:2}.zt2-table__fixed-right-box{display:-webkit-box;display:-webkit-flex;display:flex;position:absolute;top:0;right:-1px;z-index:2}.zt2-table__fixed-left-box.shadow::after{content:"";position:absolute;top:0;right:-10px;width:10px;height:100%;opacity:.06;background-image:-webkit-linear-gradient(left,#000 0,rgba(0,0,0,0) 100%);background-image:linear-gradient(90deg,#000 0,rgba(0,0,0,0) 100%)}.zt2-table__fixed-right-box.shadow::before{content:"";position:absolute;top:0;left:-10px;width:10px;height:100%;opacity:.06;background-image:-webkit-linear-gradient(left,#000 0,rgba(0,0,0,0) 100%);background-image:linear-gradient(90deg,#000 0,rgba(0,0,0,0) 100%)}.zt2-table__head{-webkit-flex-shrink:0;flex-shrink:0}.zt2-table__head-item{height:40px;font-weight:600;font-size:14px;text-align:center;line-height:40px}.zt2-table__table-data{height:40px;font-size:14px;text-align:center;line-height:40px}.zt2-table.zt2-table--no-border .zt2-table__fixed-head::after,.zt2-table.zt2-table--no-border .zt2-table__head-item::after,.zt2-table.zt2-table--no-border .zt2-table__head::after,.zt2-table.zt2-table--no-border .zt2-table__normal-box::after,.zt2-table.zt2-table--no-border .zt2-table__table-data::after{border:none}
+.zt2-table table{border-collapse:separate;border-spacing:0;width:100%;table-layout:auto;box-sizing:border-box}.zt2-table--fixed{overflow:auto scroll}.zt2-table--fixed::-webkit-scrollbar{width:0;height:0}.zt2-table--fixed table{table-layout:fixed}.zt2-table--thead-fixed{position:-webkit-sticky!important;position:sticky!important;z-index:2}.zt2-table--fix-left{position:-webkit-sticky!important;position:sticky!important;z-index:2}.zt2-table--bordered{border-left:1px solid #f0f0f0}.zt2-table--bordered>table{border-top:1px solid #f0f0f0}.zt2-table--bordered .zt2-table__thead>tr>th{border-right:1px solid #f0f0f0;border-bottom:1px solid #f0f0f0}.zt2-table--bordered .zt2-table__tbody>tr>td{border-bottom:1px solid #f0f0f0;border-right:1px solid #f0f0f0}.zt2-table__thead>tr>th{box-sizing:border-box;overflow-wrap:break-word;height:40px;font-weight:600;font-size:14px;color:#0091fa;text-align:center;line-height:40px;background:#e6f5ff}.zt2-table__head{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center}.zt2-table__head-sort{display:-webkit-inline-box;display:-webkit-inline-flex;display:inline-flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;color:#c8c9cc}.zt2-table__sort-active{color:#0091fa}.zt2-table__tbody>tr>td{box-sizing:border-box;overflow-wrap:break-word;height:40px;font-size:14px;color:#2d4b73;text-align:center;line-height:40px;background:#fff}.zt2-table--striped .zt2-table__tbody>tr:nth-child(even)>td{background:#f5faff}.zt2-table--left-last{border-right:none!important}.zt2-table--left-last::after{content:"";position:absolute;top:0;right:-10px;width:10px;height:100%;opacity:.06;background-image:-webkit-linear-gradient(left,#000 0,rgba(0,0,0,0) 100%);background-image:linear-gradient(90deg,#000 0,rgba(0,0,0,0) 100%)}

package/lib/table/index.js

@@ -1,20 +1,22 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.default = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _utils = require("../utils");
 
-var _constant = require("../utils/constant");
+var _index = _interopRequireDefault(require("../icon/index"));
+
+var _type = require("./type");
 
 var _createNamespace = (0, _utils.createNamespace)('table'),
     createComponent = _createNamespace[0],
     bem = _createNamespace[1];
 
-var defaultData = function defaultData() {
-  return {};
-};
-
 var _default = createComponent({
   props: {
     headList: {
@@ -25,269 +27,198 @@ var _default = createComponent({
       type: Array,
       default: []
     },
-    outline: {
+    bordered: {
       type: Boolean,
       default: true
     },
-    headColor: {
-      type: String,
-      default: "#000"
-    },
-    headBackground: {
-      type: String,
-      default: "#fafafa"
-    },
-    dataColor: {
-      type: String,
-      default: "#000"
-    },
-    dataBackground: {
-      type: String,
-      default: "#fff"
-    },
-    hideTableHead: {
+    striped: {
       type: Boolean,
       default: false
     }
   },
   data: function data() {
-    return defaultData();
+    return {
+      pingedLeft: false,
+      sortOrder: '',
+      sortKey: ''
+    };
   },
   computed: {
-    fixedColumnLeft: function fixedColumnLeft() {
+    fixedColumn: function fixedColumn() {
       return this.headList.filter(function (v) {
-        return v.fixedLeft;
+        return v.fixed;
       });
     },
-    fixedColumnRight: function fixedColumnRight() {
-      return this.headList.filter(function (v) {
-        return v.fixedRight;
-      });
-    },
-    resortHeadList: function resortHeadList() {
-      // 对表头数组重新排序，需要固定的表头向左对齐
-      return this.fixedColumnLeft.concat(this.headList.filter(function (v) {
-        return !v.fixedLeft && !v.fixedRight;
-      })).concat(this.fixedColumnRight);
+    fixed: function fixed() {
+      return this.fixedColumn.length > 0;
     },
-    hasSummary: function hasSummary() {
-      return this.headList.filter(function (v) {
-        return v.showSummary;
-      }).length > 0;
-    }
-  },
-  mounted: function mounted() {
-    var columnTotalWidth = 0;
-    this.headList.forEach(function (v, i) {
-      var dom = document.getElementById("tableHead" + i);
-
-      if (dom) {
-        columnTotalWidth += dom.clientWidth || 0;
-      }
-    });
-    var box = document.getElementById("normalBoxID");
-    var boxWidth = 0;
-
-    if (box) {
-      boxWidth = box.clientWidth;
-    }
-
-    if (this.fixedColumnLeft && this.fixedColumnLeft.length || this.fixedColumnRight && this.fixedColumnRight.length) {
-      // 当表格横向出现滚动时，给固定列加一个box-shadow
-      var fixedBoxRight = document.getElementById("fixedRightBoxID");
-
-      if (fixedBoxRight && columnTotalWidth > boxWidth) {
-        fixedBoxRight.classList.add("shadow");
-      }
-
-      if (box) {
-        box.addEventListener("scroll", function (e) {
-          var fixedBoxLeft = document.getElementById("fixedLeftBoxID");
-
-          if (fixedBoxLeft) {
-            if (e && e.target && e.target.scrollLeft > 0) {
-              fixedBoxLeft.classList.add("shadow");
-            } else {
-              fixedBoxLeft.classList.remove("shadow");
-            }
-          }
-
-          if (fixedBoxRight) {
-            if (e && e.target && e.target.scrollLeft + e.target.clientWidth >= columnTotalWidth - 1) {
-              fixedBoxRight.classList.remove("shadow");
-            } else {
-              fixedBoxRight.classList.add("shadow");
-            }
-          }
-        });
-      }
-    } // 获取需固定列的实际宽度，用于设置绝对定位元素的宽度
-
-
-    var fixedLeftIndexList = this.headList.map(function (v, i) {
-      if (v.fixedLeft) {
-        return "tableHead" + i;
-      } else {
-        return "";
-      }
-    }).filter(function (v) {
-      return v !== "";
-    });
-
-    if (fixedLeftIndexList.length > 0) {
-      fixedLeftIndexList.forEach(function (current, index) {
-        var fixedDom = document.getElementById("fixedHeadLeft" + index);
-        var normalDom = document.getElementById(current);
-
-        if (fixedDom && normalDom) {
-          fixedDom.style.width = normalDom.offsetWidth + "px";
+    formatColumns: function formatColumns() {
+      var _this = this;
+
+      var columns = [];
+      var left = 0;
+      this.headList.forEach(function (element, index) {
+        var column = {};
+        var preColumn = _this.headList[index - 1];
+        var nextColumn = _this.headList[index + 1];
+
+        if (element.sorter && element.defaultSortOrder) {
+          _this.sortOrder = element.defaultSortOrder || '';
+          _this.sortKey = element.key;
         }
-      }, 0);
-    } // 获取需固定列的实际宽度，用于设置绝对定位元素的宽度
 
-
-    var fixedRightIndexList = this.headList.map(function (v, i) {
-      if (v.fixedRight) {
-        return "tableHead" + i;
-      } else {
-        return "";
-      }
-    }).filter(function (v) {
-      return v !== "";
-    });
-
-    if (fixedRightIndexList.length > 0) {
-      fixedRightIndexList.forEach(function (current, index) {
-        var fixedDom = document.getElementById("fixedHeadRight" + index);
-        var normalDom = document.getElementById(current);
-
-        if (fixedDom && normalDom) {
-          fixedDom.style.width = normalDom.offsetWidth + "px";
+        if (preColumn) {
+          left += Number(preColumn.width.split('px')[0]);
+          column.left = left + "px";
+        } else {
+          column.left = 0;
         }
-      }, 0); // 当存在右侧固定列，且列宽度不足以撑满容器时，将最后一列宽度拉长到填满
 
-      if (columnTotalWidth < boxWidth) {
-        var lastColumn = document.getElementById("tableHead" + (this.headList.length - 1));
-
-        if (lastColumn) {
-          lastColumn.classList.add("widen");
-          lastColumn.style.width = "unset";
-          lastColumn.style.flex = "1";
+        if (element.fixed && !nextColumn.fixed) {
+          column.lastFixLeft = true;
         }
-      }
+
+        columns.push((0, _extends2.default)({}, element, column));
+      });
+      return columns;
     }
   },
-  watch: {},
   methods: {
-    genColumn: function genColumn(headObj, index, isFixed) {
-      var h = this.$createElement;
-
-      var _ref = this,
-          slots = _ref.slots,
-          hideTableHead = _ref.hideTableHead;
-
-      var headItemStyle = {
-        color: this.headColor,
-        background: this.headBackground
-      };
-      var dataStyle = {
-        color: this.dataColor,
-        background: this.dataBackground
-      };
-      var idName = "tableHead" + index;
-
-      if (isFixed === "left") {
-        idName = "fixedHeadLeft" + index;
+    onScroll: function onScroll(_ref) {
+      var currentTarget = _ref.currentTarget,
+          scrollLeft = _ref.scrollLeft;
+      var mergedScrollLeft = typeof scrollLeft === 'number' ? scrollLeft : currentTarget.scrollLeft;
+      this.pingedLeft = mergedScrollLeft > 0;
+    },
+    getNextSortOrder: function getNextSortOrder(type) {
+      if (!type) {
+        return _type.SortOrderEnum.ASCEND;
       }
 
-      if (isFixed === "right") {
-        idName = "fixedHeadRight" + index;
+      if (type === _type.SortOrderEnum.ASCEND) {
+        return _type.SortOrderEnum.DESCEND;
       }
 
-      var headRender = slots("head" + headObj.id) || headObj.label;
+      return '';
+    },
+    onHeaderClick: function onHeaderClick(data) {
+      if (!data.sorter) return;
+      this.sortOrder = this.getNextSortOrder(data.key === this.sortKey ? this.sortOrder : '');
+      this.sortKey = data.key;
+      this.$emit('sort', {
+        order: this.sortOrder,
+        key: data.key
+      });
+    },
+    getHead: function getHead(colData) {
+      var _this2 = this;
 
-      if ((headObj.fixedLeft || headObj.fixedRight) && !isFixed) {
-        // 被固定列遮住的列不显示内容
-        headRender = "";
+      var h = this.$createElement;
+
+      if ((colData == null ? void 0 : colData.colSpan) !== 0) {
+        return h("th", {
+          "class": bem({
+            'fix-left': colData.fixed,
+            'left-last': colData.lastFixLeft && this.pingedLeft
+          }),
+          "style": {
+            left: colData.fixed ? colData.left : ''
+          },
+          "attrs": {
+            "colspan": (colData == null ? void 0 : colData.colSpan) !== 1 ? colData == null ? void 0 : colData.colSpan : null
+          }
+        }, [h("div", {
+          "class": bem('head'),
+          "on": {
+            "click": function click() {
+              return _this2.onHeaderClick(colData);
+            }
+          }
+        }, [h("span", [colData.label]), colData.sorter ? h("span", {
+          "class": bem('head-sort')
+        }, [h(_index.default, {
+          "class": [colData.key === this.sortKey && this.sortOrder === _type.SortOrderEnum.ASCEND ? bem('sort-active') : ''],
+          "attrs": {
+            "name": "spinner-shrink",
+            "size": "12"
+          },
+          "style": {
+            marginBottom: '-3px'
+          }
+        }), h(_index.default, {
+          "class": [colData.key === this.sortKey && this.sortOrder === _type.SortOrderEnum.DESCEND ? bem('sort-active') : ''],
+          "attrs": {
+            "name": "spinner-expand",
+            "size": "12"
+          },
+          "style": {
+            marginTop: '-3px'
+          }
+        })]) : ''])]);
       }
+    },
+    onClick: function onClick() {},
+    getBody: function getBody(rowData, rowIndex) {
+      var _this3 = this;
 
-      return h("div", {
-        "class": [bem(isFixed ? "fixed-head" : "head"), isFixed ? _constant.BORDER_SURROUND : _constant.BORDER_RIGHT],
-        "attrs": {
-          "id": idName
-        },
-        "style": isFixed ? "" : headObj.width ? "width:" + headObj.width + ";" : ""
-      }, [h("div", {
-        "directives": [{
-          name: "show",
-          value: !hideTableHead
-        }],
-        "class": [bem("head-item"), _constant.BORDER_TOP_BOTTOM],
-        "style": headItemStyle
-      }, [headRender]), this.dataList.map(function (data) {
-        var hide = (headObj.fixedLeft || headObj.fixedRight) && !isFixed;
+      var h = this.$createElement;
+      return h("tr", [this.formatColumns.map(function (colData) {
+        var _additionalCellProps, _additionalCellProps2, _additionalCellProps3, _additionalCellProps4, _additionalCellProps5, _additionalCellProps6;
 
-        if (hide) {
-          // 被固定列遮住的列不显示内容
-          return h("div", {
-            "class": [bem("table-data"), _constant.BORDER_BOTTOM],
-            "style": dataStyle
-          });
-        } else if (data[headObj.key] && data[headObj.key].id && slots("data" + data[headObj.key].id)) {
-          return slots("data" + data[headObj.key].id);
-        } else {
-          return h("div", {
-            "class": [bem("table-data"), _constant.BORDER_BOTTOM],
-            "style": dataStyle
-          }, [data[headObj.key]]);
+        var additionalCellProps;
+
+        if (colData.customCell) {
+          additionalCellProps = colData.customCell(rowData, rowIndex);
         }
-      }), this.hasSummary ? headObj.showSummary ? h("div", {
-        "class": [bem("head-item"), _constant.BORDER_BOTTOM],
-        "style": headItemStyle
-      }, [this.dataList.reduce(function (prev, curr) {
-        return prev + curr[headObj.key];
-      }, 0)]) : h("div", {
-        "class": [bem("head-item"), _constant.BORDER_BOTTOM],
-        "style": headItemStyle
-      }, [headObj.summaryLabel || ""]) : ""]);
+
+        var style = (0, _extends2.default)({}, colData.style);
+        style.left = colData.fixed ? colData.left : '';
+        return ((_additionalCellProps = additionalCellProps) == null ? void 0 : _additionalCellProps.rowSpan) !== 0 && ((_additionalCellProps2 = additionalCellProps) == null ? void 0 : _additionalCellProps2.colSpan) !== 0 && h("td", {
+          "on": {
+            "click": function click() {
+              return colData.onClick && colData.onClick(rowData, rowIndex);
+            }
+          },
+          "class": bem({
+            'fix-left': colData.fixed,
+            'left-last': colData.lastFixLeft && _this3.pingedLeft
+          }),
+          "attrs": {
+            "colspan": ((_additionalCellProps3 = additionalCellProps) == null ? void 0 : _additionalCellProps3.colSpan) !== 1 ? (_additionalCellProps4 = additionalCellProps) == null ? void 0 : _additionalCellProps4.colSpan : null,
+            "rowspan": ((_additionalCellProps5 = additionalCellProps) == null ? void 0 : _additionalCellProps5.rowSpan) !== 1 ? (_additionalCellProps6 = additionalCellProps) == null ? void 0 : _additionalCellProps6.rowSpan : null
+          },
+          "style": style
+        }, [rowData[colData.key]]);
+      })]);
     }
   },
   render: function render(h) {
-    var _this = this;
+    var _this4 = this;
 
-    var showFixed = this.dataList && this.dataList.length;
     return h("div", {
-      "class": bem(["", this.outline ? "" : "no-border"])
-    }, [h("div", {
-      "attrs": {
-        "id": "normalBoxID"
-      },
-      "class": [bem("normal-box"), _constant.BORDER_LEFT]
-    }, [this.resortHeadList.map(function (x, i) {
-      return _this.genColumn(x, i);
-    })]), h("div", {
-      "directives": [{
-        name: "show",
-        value: showFixed
-      }],
-      "attrs": {
-        "id": "fixedLeftBoxID"
-      },
-      "class": bem("fixed-left-box")
-    }, [this.fixedColumnLeft.map(function (x, i) {
-      return _this.genColumn(x, i, "left");
-    })]), h("div", {
-      "directives": [{
-        name: "show",
-        value: showFixed
-      }],
-      "attrs": {
-        "id": "fixedRightBoxID"
-      },
-      "class": bem("fixed-right-box")
-    }, [this.fixedColumnRight.map(function (x, i) {
-      return _this.genColumn(x, i, "right");
-    })])]);
+      "class": bem({
+        fixed: this.fixed,
+        bordered: this.bordered,
+        striped: this.striped
+      }),
+      "on": {
+        "scroll": this.onScroll
+      }
+    }, [h("table", [h("colgroup", [this.headList.map(function (item) {
+      return h("col", {
+        "style": {
+          width: item.width
+        }
+      });
+    })]), h("thead", {
+      "class": bem('thead')
+    }, [h("tr", [this.formatColumns.map(function (colData) {
+      return _this4.getHead(colData);
+    })])]), h("tbody", {
+      "class": bem('tbody')
+    }, [this.dataList.map(function (rowData, rowIndex) {
+      return _this4.getBody(rowData, rowIndex);
+    })])])]);
   }
 });