bkui-vue 0.0.1-beta.42 → 0.0.1-beta.45

package/dist/index.esm.js

@@ -2370,29 +2370,38 @@ bkIcon.inheritAttrs = false;
 bkIcon.displayName = "bkIcon";
 JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 1024 1024","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;"},"elements":[{"type":"element","name":"path","attributes":{"d":"M512 744.64L789.6 462.72 880 554.56 512 928 144 554.56 234.4 462.72 512 744.64z"}},{"type":"element","name":"path","attributes":{"d":"M144 187.68L234.4 96 512 377.76 789.6 96 880 187.68 512 561.28 144 187.68z"}}]}');
 JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 1024 1024","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;"},"elements":[{"type":"element","name":"path","attributes":{"d":"M279.36 512L561.28 789.6 469.44 880 96 512 469.44 144 561.28 234.4 279.36 512z"}},{"type":"element","name":"path","attributes":{"d":"M836.32 144L928 234.4 646.08 512 928 789.6 836.32 880 462.72 512 836.32 144z"}}]}');
-const data$w = JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 1024 1024","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;"},"elements":[{"type":"element","name":"path","attributes":{"d":"M697.6 281.6l48 48-176 176 176 176-48 48-224-224L697.6 281.6z"}},{"type":"element","name":"path","attributes":{"d":"M505.6 281.6l48 48-176 176 176 176-48 48-224-224L505.6 281.6z"}}]}');
+const data$x = JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 1024 1024","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;"},"elements":[{"type":"element","name":"path","attributes":{"d":"M697.6 281.6l48 48-176 176 176 176-48 48-224-224L697.6 281.6z"}},{"type":"element","name":"path","attributes":{"d":"M505.6 281.6l48 48-176 176 176 176-48 48-224-224L505.6 281.6z"}}]}');
 const angleDoubleLeft = (props, context) => {
   const p2 = __spreadValues(__spreadValues({}, props), context.attrs);
   return createVNode(bkIcon, mergeProps(p2, {
-    "data": data$w,
+    "data": data$x,
     "name": "angleDoubleLeft"
   }), null);
 };
 angleDoubleLeft.displayName = "angleDoubleLeft";
 angleDoubleLeft.inheritAttrs = false;
 JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 1024 1024","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;"},"elements":[{"type":"element","name":"path","attributes":{"d":"M744.64 512L462.72 789.6 554.56 880 928 512 554.56 144 462.72 234.4 744.64 512z"}},{"type":"element","name":"path","attributes":{"d":"M187.68 144L96 234.4 377.76 512 96 789.6 187.68 880 561.28 512 187.68 144z"}}]}');
-const data$v = JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 1024 1024","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;"},"elements":[{"type":"element","name":"path","attributes":{"d":"M358.4 729.6l-48-48 176-176-176-176 48-48 224 224L358.4 729.6z"}},{"type":"element","name":"path","attributes":{"d":"M550.4 729.6l-48-48 176-176-176-176 48-48 224 224L550.4 729.6z"}}]}');
+const data$w = JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 1024 1024","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;"},"elements":[{"type":"element","name":"path","attributes":{"d":"M358.4 729.6l-48-48 176-176-176-176 48-48 224 224L358.4 729.6z"}},{"type":"element","name":"path","attributes":{"d":"M550.4 729.6l-48-48 176-176-176-176 48-48 224 224L550.4 729.6z"}}]}');
 const angleDoubleRight = (props, context) => {
   const p2 = __spreadValues(__spreadValues({}, props), context.attrs);
   return createVNode(bkIcon, mergeProps(p2, {
-    "data": data$v,
+    "data": data$w,
     "name": "angleDoubleRight"
   }), null);
 };
 angleDoubleRight.displayName = "angleDoubleRight";
 angleDoubleRight.inheritAttrs = false;
 JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 1024 1024","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;"},"elements":[{"type":"element","name":"path","attributes":{"d":"M512 279.36L789.6 561.28 880 469.44 512 96 144 469.44 234.4 561.28 512 279.36z"}},{"type":"element","name":"path","attributes":{"d":"M144 836.32L234.4 928 512 646.08 789.6 928 880 836.32 512 462.72 144 836.32z"}}]}');
-JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 1024 1024","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;"},"elements":[{"type":"element","name":"path","attributes":{"d":"M512 256L96 704 187.04 704 512 704 836.96 704 928 704 512 256z"}}]}');
+const data$v = JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 1024 1024","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;"},"elements":[{"type":"element","name":"path","attributes":{"d":"M512 256L96 704 187.04 704 512 704 836.96 704 928 704 512 256z"}}]}');
+const angleDownFill = (props, context) => {
+  const p2 = __spreadValues(__spreadValues({}, props), context.attrs);
+  return createVNode(bkIcon, mergeProps(p2, {
+    "data": data$v,
+    "name": "angleDownFill"
+  }), null);
+};
+angleDownFill.displayName = "angleDownFill";
+angleDownFill.inheritAttrs = false;
 JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 1024 1024","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;"},"elements":[{"type":"element","name":"path","attributes":{"d":"M512 762.56L98.72 349.28 189.28 258.72 512 581.44 834.72 258.72 925.28 349.28 512 762.56z"}}]}');
 const data$u = JSON.parse('{"type":"element","name":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 1024 1024","style":"width: 1em; height: 1em; vertical-align: middle;fill: currentColor;overflow: hidden;"},"elements":[{"type":"element","name":"path","attributes":{"d":"M288 448L336 400 512 576 688 400 736 448 512 672z"}}]}');
 const angleDown = (props, context) => {
@@ -11969,13 +11978,24 @@ var Component$6 = defineComponent({
 });
 const BkVirtualRender = withInstall(Component$6);
 const BORDER_OPRIONS = ["none", "row", "col", "outer"];
+var SortScope = /* @__PURE__ */ ((SortScope2) => {
+  SortScope2["CURRENT"] = "current";
+  SortScope2["ALL"] = "all";
+  return SortScope2;
+})(SortScope || {});
 const tableProps = {
   data: PropTypes.arrayOf(PropTypes.any).def([]),
   columns: PropTypes.arrayOf(PropTypes.shape({
     label: PropTypes.oneOfType([PropTypes.func.def(() => ""), PropTypes.string.def("")]),
     field: PropTypes.oneOfType([PropTypes.func.def(() => ""), PropTypes.string.def("")]),
     render: PropTypes.oneOfType([PropTypes.func.def(() => ""), PropTypes.string.def("")]),
-    width: PropTypes.oneOfType([PropTypes.number.def(void 0), PropTypes.string.def("auto")])
+    width: PropTypes.oneOfType([PropTypes.number.def(void 0), PropTypes.string.def("auto")]),
+    type: PropTypes.commonType(["selection", "index", "expand"], "columnType").def(""),
+    sort: PropTypes.oneOfType([PropTypes.shape({
+      sortby: PropTypes.string.def(""),
+      sortFn: PropTypes.func.def(null),
+      sortScope: PropTypes.commonType(Object.values(SortScope)).def("current")
+    }), PropTypes.bool]).def(false)
   })),
   activeColumn: PropTypes.oneOfType([PropTypes.number.def(-1), PropTypes.arrayOf(PropTypes.number.def(-1))]),
   columnPick: PropTypes.commonType(["multi", "single", "disabled"], "columnPick").def("disabled"),
@@ -11984,6 +12004,11 @@ const tableProps = {
   rowHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.func]).def(40),
   headHeight: PropTypes.number.def(40),
   showHead: PropTypes.bool.def(true),
+  thead: PropTypes.shape({
+    height: PropTypes.number.def(40),
+    isShow: PropTypes.bool.def(true),
+    cellFn: PropTypes.func.def(null)
+  }),
   virtualEnabled: PropTypes.bool.def(false),
   border: PropTypes.arrayOf(PropTypes.commonType(BORDER_OPRIONS, "border")).def(["row"]),
   pagination: PropTypes.oneOfType([PropTypes.bool.def(false), PropTypes.object.def({})]).def(false),
@@ -12575,6 +12600,26 @@ const resolvePaginationOption = (propPagination, defVal) => {
   }
   return {};
 };
+const resolveHeadConfig = (props) => {
+  const {
+    showHead,
+    headHeight,
+    thead = {}
+  } = props;
+  return Object.assign({}, {
+    isShow: showHead,
+    height: headHeight
+  }, __spreadValues({}, thead));
+};
+let EVENTS;
+(function(EVENTS2) {
+  EVENTS2["ON_SORT_BY_CLICK"] = "onSortByClick";
+})(EVENTS || (EVENTS = {}));
+let SortType;
+(function(SortType2) {
+  SortType2["ASC"] = "asc";
+  SortType2["DESC"] = "desc";
+})(SortType || (SortType = {}));
 class TableRender {
   constructor(props, ctx, reactiveProp, colgroups) {
     __publicField(this, "getColumnClass", (colIndex) => `${this.uuid}-column-${colIndex}`);
@@ -12584,11 +12629,18 @@ class TableRender {
     this.colgroups = colgroups;
     this.plugins = new TablePlugins(props, ctx);
     this.uuid = random(8);
+    this.events = /* @__PURE__ */ new Map();
   }
   get propActiveCols() {
     return this.reactiveProp.activeColumns;
   }
   renderTableHeadSchema() {
+    const {
+      isShow = true
+    } = resolveHeadConfig(this.props);
+    if (!isShow) {
+      return null;
+    }
     return createVNode("table", {
       "cellpadding": 0,
       "cellspacing": 0
@@ -12607,6 +12659,26 @@ class TableRender {
       "onChange": (current) => this.hanlePageChange(current)
     }), null);
   }
+  on(eventName, wartcher) {
+    if (!this.events.has(eventName)) {
+      this.events.set(eventName, []);
+    }
+    this.events.get(eventName).push(wartcher);
+    return this;
+  }
+  destroy() {
+    this.events.clear();
+    this.events = null;
+  }
+  emitEvent(eventName, args) {
+    if (this.events.has(eventName)) {
+      this.events.get(eventName).forEach((evet) => {
+        if (typeof evet === "function") {
+          Reflect.apply(evet, this, args);
+        }
+      });
+    }
+  }
   handlePageLimitChange(limit) {
     Object.assign(this.props.pagination, {
       limit
@@ -12640,8 +12712,61 @@ class TableRender {
     }
   }
   renderHeader() {
+    const config = resolveHeadConfig(this.props);
+    const {
+      cellFn
+    } = config;
     const rowStyle = {
-      "--row-height": `${resolvePropVal(this.props, "headHeight", ["thead"])}px`
+      "--row-height": `${resolvePropVal(config, "height", ["thead"])}px`
+    };
+    const hanldeSortClick = (e, column, index, type) => {
+      var _a, _b;
+      e.stopImmediatePropagation();
+      e.stopPropagation();
+      e.preventDefault();
+      const fieldName = column.field;
+      const getVal = (row) => this.getRowText(row, fieldName, column);
+      const sortFn0 = (a2, b2) => {
+        const val0 = getVal(a2);
+        const val1 = getVal(b2);
+        if (typeof val0 === "number" && typeof val1 === "number") {
+          return val0 - val1;
+        }
+        return String.prototype.localeCompare.call(val0, val1);
+      };
+      Object.assign(column, {
+        _sort_reg: type
+      });
+      const sortFn = typeof ((_a = column.sort) == null ? void 0 : _a.sortFn) === "function" ? (_b = column.sort) == null ? void 0 : _b.sortFn : sortFn0;
+      const execFn = (_a2, _b2) => sortFn(_a2, _b2) * (type === SortType.DESC ? -1 : 1);
+      this.emitEvent(EVENTS.ON_SORT_BY_CLICK, [{
+        sortFn: execFn,
+        column,
+        index,
+        type
+      }]);
+    };
+    const renderHeadCell = (column, index) => {
+      const cells = [];
+      if (column.sort) {
+        const sortReg = column["_sort_reg"];
+        const sortCell = createVNode("span", {
+          "class": "head-cell-sort"
+        }, [createVNode(angleDownFill, {
+          "class": ["sort-action", "sort-asc", sortReg === SortType.ASC ? "active" : ""],
+          "onClick": (e) => hanldeSortClick(e, column, index, SortType.ASC)
+        }, null), createVNode(angleUpFill, {
+          "class": ["sort-action", "sort-desc", sortReg === SortType.DESC ? "active" : ""],
+          "onClick": (e) => hanldeSortClick(e, column, index, SortType.DESC)
+        }, null)]);
+        cells.push(sortCell);
+      }
+      if (typeof cellFn === "function") {
+        cells.unshift(cellFn(column, index));
+        return cells;
+      }
+      cells.unshift(resolvePropVal(column, "label", [column, index]));
+      return cells;
     };
     return createVNode("thead", {
       "style": rowStyle
@@ -12654,24 +12779,24 @@ class TableRender {
       "onClick": () => this.handleColumnHeadClick(index)
     }, [createVNode("div", {
       "class": "cell"
-    }, [resolvePropVal(column, "label", [column])])]))])]);
+    }, [renderHeadCell(column, index)])]))])]);
   }
   renderTBody(rows) {
-    return createVNode("tbody", null, [rows.map((row, index) => {
+    return createVNode("tbody", null, [rows.map((row, rowIndex) => {
       const rowStyle = {
-        "--row-height": `${resolvePropVal(this.props, "rowHeight", ["tbody", row, index])}px`
+        "--row-height": `${resolvePropVal(this.props, "rowHeight", ["tbody", row, rowIndex])}px`
       };
       return createVNode("tr", {
         "style": rowStyle,
-        "onClick": (e) => this.handleRowClick(e, row, index, rows),
-        "onDblclick": (e) => this.handleRowDblClick(e, row, index, rows)
-      }, [this.props.columns.map((column, index2) => createVNode("td", {
-        "class": this.getColumnClass(index2),
+        "onClick": (e) => this.handleRowClick(e, row, rowIndex, rows),
+        "onDblclick": (e) => this.handleRowDblClick(e, row, rowIndex, rows)
+      }, [this.props.columns.map((column, index) => createVNode("td", {
+        "class": this.getColumnClass(index),
         "colspan": 1,
         "rowspan": 1
       }, [createVNode("div", {
         "class": "cell"
-      }, [this.renderCell(row, column, index2, rows)])]))]);
+      }, [this.renderCell(row, column, rowIndex, rows)])]))]);
     })]);
   }
   handleRowClick(e, row, index, rows) {
@@ -12680,8 +12805,14 @@ class TableRender {
   handleRowDblClick(e, row, index, rows) {
     this.context.emit("rowDblClick", e, row, index, rows, this);
   }
+  getRowText(row, key, column) {
+    if (column.type === "index") {
+      return row.__$table_row_index;
+    }
+    return row[key];
+  }
   renderCell(row, column, index, rows) {
-    const cell = row[resolvePropVal(column, "field", [column, row])];
+    const cell = this.getRowText(row, resolvePropVal(column, "field", [column, row]), column);
     if (typeof column.render === "function") {
       return column.render(cell, row, index, rows);
     }
@@ -12714,6 +12845,7 @@ var Component$4 = defineComponent({
     })));
     const startIndex = ref(0);
     const endIndex = ref(0);
+    let columnSortFn = null;
     let pagination2 = reactive({
       count: 0,
       limit: 10,
@@ -12754,15 +12886,29 @@ var Component$4 = defineComponent({
     }, {
       deep: true
     });
-    const tableRender = new TableRender(props, ctx, reactiveProp, colgroups);
-    const wrapperStyle = computed(() => ({
-      minHeight: resolveNumberOrStringToPix(props.minHeight, "auto")
-    }));
+    const indexData = computed(() => props.data.map((item, index) => __spreadProps(__spreadValues({}, item), {
+      __$table_row_index: index + 1
+    })));
+    const pageData = reactive([]);
     watchEffect(() => {
       pagination2 = resolvePaginationOption(props.pagination, pagination2);
       resetStartEndIndex();
+      pageData.splice(0, pageData.length, ...indexData.value.slice(startIndex.value, endIndex.value));
+      if (typeof columnSortFn === "function") {
+        pageData.sort(columnSortFn);
+      }
     });
-    const pageData = computed(() => props.data.slice(startIndex.value, endIndex.value));
+    const tableRender = new TableRender(props, ctx, reactiveProp, colgroups);
+    tableRender.on(EVENTS.ON_SORT_BY_CLICK, (args) => {
+      const {
+        sortFn
+      } = args;
+      columnSortFn = sortFn;
+      pageData.sort(columnSortFn);
+    });
+    const wrapperStyle = computed(() => ({
+      minHeight: resolveNumberOrStringToPix(props.minHeight, "auto")
+    }));
     const localPagination = computed(() => {
       if (!props.pagination) {
         return null;
@@ -12810,6 +12956,7 @@ var Component$4 = defineComponent({
     onBeforeUnmount(() => {
       observerIns.stop();
       observerIns = null;
+      tableRender.destroy();
     });
     ctx.expose({
       plugins: tableRender.plugins
@@ -12820,11 +12967,11 @@ var Component$4 = defineComponent({
       "ref": root
     }, [createVNode("div", {
       "class": headClass
-    }, [props.showHead && tableRender.renderTableHeadSchema()]), createVNode(BkVirtualRender, {
+    }, [tableRender.renderTableHeadSchema()]), createVNode(BkVirtualRender, {
       "lineHeight": props.rowHeight,
       "class": contentClass,
       "style": contentStyle.value,
-      "list": pageData.value,
+      "list": pageData,
       "onContentScroll": handleScrollChanged,
       "throttleDelay": 0,
       "enabled": props.virtualEnabled