@king-design/vue 3.3.3 → 3.4.0-beta.1

package/components/table/index.spec.js

@@ -1,8 +1,12 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
 import _JSON$stringify from "@babel/runtime-corejs3/core-js/json/stringify";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js/instance/find-index";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import { __decorate } from "tslib";
 import BasicDemo from '~/components/table/demos/basic';
 import CheckTypeDemo from '~/components/table/demos/checkType';
 import ExpandDemo from '~/components/table/demos/rowExpandable';
@@ -20,6 +24,7 @@ import ScrollToRowDemo from '~/components/table/demos/scrollToRow';
 import { mount, unmount, dispatchEvent, getElement, wait } from '../../test/utils';
 import { Component } from 'intact-vue-next';
 import { Table, TableColumn } from './';
+import { bind } from '../utils';
 import DraggableTable from '~/components/table/demos/draggable';
 import MergeCellDemo from '~/components/table/demos/mergeCell';
 import { AllCheckedStatus } from './useChecked';
@@ -266,15 +271,102 @@ describe('Table', function () {
       }
     }, _callee5);
   })));
-  it('sort', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
-    var _mount6, instance, element, _element$querySelecto7, th1, th2;
-    return _regeneratorRuntime.wrap(function _callee6$(_context6) {
-      while (1) switch (_context6.prev = _context6.next) {
+  it('append a row in merged table', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+    var _context8;
+    var uniqueId, Demo, _mount6, instance, element, _instance$get, data;
+    return _regeneratorRuntime.wrap(function _callee6$(_context9) {
+      while (1) switch (_context9.prev = _context9.next) {
+        case 0:
+          uniqueId = 0;
+          Demo = /*#__PURE__*/function (_Component) {
+            _inheritsLoose(Demo, _Component);
+            function Demo() {
+              var _context6;
+              var _this;
+              for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+                args[_key] = arguments[_key];
+              }
+              _this = _Component.call.apply(_Component, _concatInstanceProperty(_context6 = [this]).call(_context6, args)) || this;
+              _this.Table = Table;
+              _this.TableColumn = TableColumn;
+              return _this;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                data: [{
+                  Name: '刘备',
+                  Title: '大哥',
+                  uniqueId: 0
+                }]
+              };
+            };
+            var _proto = Demo.prototype;
+            _proto.merge = function merge(row, column, rowIndex, columnIndex) {
+              var _this$get = this.get(),
+                data = _this$get.data;
+              var _loop = function _loop(i) {
+                  var _context7;
+                  var mergeIndex = _findIndexInstanceProperty(data).call(data, function (item, index) {
+                    var _data$i;
+                    return index > i && item.Name !== ((_data$i = data[i]) == null ? void 0 : _data$i.Name);
+                  });
+                  var allSame = data.every(function (item, index) {
+                    if (index > i) {
+                      return item.Name === data[i].Name;
+                    }
+                    return true;
+                  });
+                  if (_includesInstanceProperty(_context7 = [0, 1, 2]).call(_context7, columnIndex) && rowIndex === i) {
+                    if (mergeIndex === -1 && allSame) {
+                      return {
+                        v: {
+                          rowspan: data.length - i
+                        }
+                      };
+                    }
+                    if (mergeIndex > -1) {
+                      return {
+                        v: {
+                          rowspan: mergeIndex - i
+                        }
+                      };
+                    }
+                  }
+                },
+                _ret;
+              for (var i = 0; i < data.length; i++) {
+                _ret = _loop(i);
+                if (_ret) return _ret.v;
+              }
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const {Table, TableColumn} = this;\n                const { data } = this.get();\n                <Table data={data} merge={this.merge} rowKey={data => data.uniqueId} animation={false}>\n                    <TableColumn title=\"\u540D\u79F0\" key=\"Name\" />\n                    <TableColumn title=\"\u5934\u8854\" key=\"Title\" />\n                    <TableColumn title=\"uniqueId\" key=\"uniqueId\" />\n                </Table>\n            ";
+          __decorate([bind], Demo.prototype, "merge", null);
+          _mount6 = mount(Demo), instance = _mount6[0], element = _mount6[1];
+          _instance$get = instance.get(), data = _instance$get.data;
+          instance.set('data', _concatInstanceProperty(_context8 = []).call(_context8, data, [_extends({}, data[data.length - 1], {
+            uniqueId: ++uniqueId
+          })]));
+          _context9.next = 9;
+          return wait();
+        case 9:
+          expect(element.innerHTML).to.matchSnapshot();
+        case 10:
+        case "end":
+          return _context9.stop();
+      }
+    }, _callee6);
+  })));
+  it('sort', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
+    var _mount7, instance, element, _element$querySelecto7, th1, th2;
+    return _regeneratorRuntime.wrap(function _callee7$(_context10) {
+      while (1) switch (_context10.prev = _context10.next) {
         case 0:
-          _mount6 = mount(SortDemo), instance = _mount6[0], element = _mount6[1];
+          _mount7 = mount(SortDemo), instance = _mount7[0], element = _mount7[1];
           _element$querySelecto7 = element.querySelectorAll('thead th'), th1 = _element$querySelecto7[1], th2 = _element$querySelecto7[2];
           th1.click();
-          _context6.next = 5;
+          _context10.next = 5;
           return wait();
         case 5:
           expect(instance.get('sort')).to.eql({
@@ -282,7 +374,7 @@ describe('Table', function () {
             type: 'desc'
           });
           th2.click();
-          _context6.next = 9;
+          _context10.next = 9;
           return wait();
         case 9:
           expect(instance.get('sort')).to.eql({
@@ -290,7 +382,7 @@ describe('Table', function () {
             type: 'desc'
           });
           th2.click();
-          _context6.next = 13;
+          _context10.next = 13;
           return wait();
         case 13:
           expect(instance.get('sort')).to.eql({
@@ -298,34 +390,34 @@ describe('Table', function () {
             type: 'asc'
           });
           th2.click();
-          _context6.next = 17;
+          _context10.next = 17;
           return wait();
         case 17:
           expect(instance.get('sort')).to.eql({});
         case 18:
         case "end":
-          return _context6.stop();
+          return _context10.stop();
       }
-    }, _callee6);
+    }, _callee7);
   })));
-  it('group', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
-    var _mount7, instance, element, _instance$refs4, __test1, __test2, _element$querySelecto8, table1, table2, icon, dropdown, item, icon2, dropdown2, _dropdown2$querySelec, item1, item2, _dropdown2$querySelec2, checkAll, reset, confirm, newDropdown;
-    return _regeneratorRuntime.wrap(function _callee7$(_context7) {
-      while (1) switch (_context7.prev = _context7.next) {
+  it('group', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
+    var _mount8, instance, element, _instance$refs4, __test1, __test2, _element$querySelecto8, table1, table2, icon, dropdown, item, icon2, dropdown2, _dropdown2$querySelec, item1, item2, _dropdown2$querySelec2, checkAll, reset, confirm, newDropdown;
+    return _regeneratorRuntime.wrap(function _callee8$(_context11) {
+      while (1) switch (_context11.prev = _context11.next) {
         case 0:
-          _mount7 = mount(GroupDemo), instance = _mount7[0], element = _mount7[1];
+          _mount8 = mount(GroupDemo), instance = _mount8[0], element = _mount8[1];
           _instance$refs4 = instance.refs, __test1 = _instance$refs4.__test1, __test2 = _instance$refs4.__test2;
           _element$querySelecto8 = element.querySelectorAll('.k-table'), table1 = _element$querySelecto8[0], table2 = _element$querySelecto8[1];
           icon = table1.querySelector('.k-table-group');
           dispatchEvent(icon, 'click');
-          _context7.next = 7;
+          _context11.next = 7;
           return wait();
         case 7:
           dropdown = getElement('.k-table-group-dropdown');
           expect(dropdown.innerHTML).to.matchSnapshot();
           item = dropdown.querySelector('.k-dropdown-item:nth-child(2)');
           item.click();
-          _context7.next = 13;
+          _context11.next = 13;
           return wait();
         case 13:
           expect(instance.get('group')).to.eql({
@@ -334,14 +426,14 @@ describe('Table', function () {
           expect(table1.innerHTML).to.matchSnapshot();
           icon2 = table2.querySelector('.k-table-group');
           dispatchEvent(icon2, 'click');
-          _context7.next = 19;
+          _context11.next = 19;
           return wait();
         case 19:
           dropdown2 = getElement('.k-table-group-dropdown');
           expect(dropdown2.innerHTML).to.matchSnapshot();
           _dropdown2$querySelec = dropdown2.querySelectorAll('.k-checkbox'), item1 = _dropdown2$querySelec[0], item2 = _dropdown2$querySelec[1];
           item1.click();
-          _context7.next = 25;
+          _context11.next = 25;
           return wait();
         case 25:
           expect(instance.get('multipleGroup')).to.eql({
@@ -349,7 +441,7 @@ describe('Table', function () {
           });
           expect(table2.innerHTML).to.matchSnapshot();
           item2.click();
-          _context7.next = 30;
+          _context11.next = 30;
           return wait();
         case 30:
           expect(instance.get('multipleGroup')).to.eql({
@@ -358,7 +450,7 @@ describe('Table', function () {
           // click confirm
           _dropdown2$querySelec2 = dropdown2.querySelectorAll('.k-table-group-footer .k-btn'), checkAll = _dropdown2$querySelec2[0], reset = _dropdown2$querySelec2[1], confirm = _dropdown2$querySelec2[2];
           confirm.click();
-          _context7.next = 35;
+          _context11.next = 35;
           return wait();
         case 35:
           expect(instance.get('multipleGroup')).to.eql({
@@ -367,12 +459,12 @@ describe('Table', function () {
           expect(table2.innerHTML).to.matchSnapshot();
           // click reset
           dispatchEvent(icon2, 'click');
-          _context7.next = 40;
+          _context11.next = 40;
           return wait();
         case 40:
           expect(dropdown2.innerHTML).to.matchSnapshot();
           reset.click();
-          _context7.next = 44;
+          _context11.next = 44;
           return wait();
         case 44:
           expect(dropdown2.innerHTML).to.matchSnapshot();
@@ -381,11 +473,11 @@ describe('Table', function () {
           });
           // click checkAll
           dispatchEvent(icon2, 'click');
-          _context7.next = 49;
+          _context11.next = 49;
           return wait();
         case 49:
           checkAll.click();
-          _context7.next = 52;
+          _context11.next = 52;
           return wait();
         case 52:
           expect(dropdown2.querySelectorAll('.k-checkbox.k-checked')).to.length(2);
@@ -395,56 +487,56 @@ describe('Table', function () {
             value: 'value'
           }]);
           dispatchEvent(icon, 'click');
-          _context7.next = 57;
+          _context11.next = 57;
           return wait(500);
         case 57:
           newDropdown = getElement('.k-table-group-dropdown');
           expect(newDropdown.innerHTML).to.matchSnapshot();
         case 59:
         case "end":
-          return _context7.stop();
+          return _context11.stop();
       }
-    }, _callee7);
+    }, _callee8);
   })));
-  it('fix columns', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
-    var _mount8, instance, element, table, tableElement, scrollElement;
-    return _regeneratorRuntime.wrap(function _callee8$(_context8) {
-      while (1) switch (_context8.prev = _context8.next) {
+  it('fix columns', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
+    var _mount9, instance, element, table, tableElement, scrollElement;
+    return _regeneratorRuntime.wrap(function _callee9$(_context12) {
+      while (1) switch (_context12.prev = _context12.next) {
         case 0:
-          _mount8 = mount(FixColumnDemo), instance = _mount8[0], element = _mount8[1];
+          _mount9 = mount(FixColumnDemo), instance = _mount9[0], element = _mount9[1];
           table = instance.refs.__test;
           element.style.width = "1000px";
           tableElement = element.querySelector('.k-table:nth-child(2)');
           scrollElement = tableElement.querySelector('.k-table-wrapper'); // should add k-scroll-middle classname
           scrollElement.scrollLeft = 100;
-          _context8.next = 8;
+          _context12.next = 8;
           return wait(100);
         case 8:
           expect(tableElement.outerHTML).to.matchSnapshot();
           // should add k-scroll-right classname
           scrollElement.scrollLeft = 1000;
-          _context8.next = 12;
+          _context12.next = 12;
           return wait(100);
         case 12:
           expect(tableElement.outerHTML).to.matchSnapshot();
           // should change max-height if we set fixHeader to true
           table.set('fixHeader', true);
-          _context8.next = 16;
+          _context12.next = 16;
           return wait();
         case 16:
           expect(tableElement.outerHTML).to.matchSnapshot();
         case 17:
         case "end":
-          return _context8.stop();
+          return _context12.stop();
       }
-    }, _callee8);
+    }, _callee9);
   })));
-  it('resize', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
-    var _mount9, instance, element, table, resize;
-    return _regeneratorRuntime.wrap(function _callee9$(_context9) {
-      while (1) switch (_context9.prev = _context9.next) {
+  it('resize', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
+    var _mount10, instance, element, table, resize;
+    return _regeneratorRuntime.wrap(function _callee10$(_context13) {
+      while (1) switch (_context13.prev = _context13.next) {
         case 0:
-          _mount9 = mount(BasicDemo), instance = _mount9[0], element = _mount9[1];
+          _mount10 = mount(BasicDemo), instance = _mount10[0], element = _mount10[1];
           table = instance.refs.__test;
           resize = element.querySelector('.k-table-resize');
           dispatchEvent(resize, 'mousedown', {
@@ -455,24 +547,24 @@ describe('Table', function () {
             clientX: 1
           });
           dispatchEvent(document, 'mouseup');
-          _context9.next = 8;
+          _context13.next = 8;
           return wait();
         case 8:
           expect(element.innerHTML).to.matchSnapshot();
         case 9:
         case "end":
-          return _context9.stop();
+          return _context13.stop();
       }
-    }, _callee9);
+    }, _callee10);
   })));
-  it('store width on resizing', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
-    var _mount10, instance, element, resize, innerHTML, _mount11, table;
-    return _regeneratorRuntime.wrap(function _callee10$(_context10) {
-      while (1) switch (_context10.prev = _context10.next) {
+  it('store width on resizing', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11() {
+    var _mount11, instance, element, resize, innerHTML, _mount12, table;
+    return _regeneratorRuntime.wrap(function _callee11$(_context14) {
+      while (1) switch (_context14.prev = _context14.next) {
         case 0:
           localStorage.removeItem('resizableTable');
-          _mount10 = mount(ResizableDemo), instance = _mount10[0], element = _mount10[1]; // should equal to minWidth
-          _context10.next = 4;
+          _mount11 = mount(ResizableDemo), instance = _mount11[0], element = _mount11[1]; // should equal to minWidth
+          _context14.next = 4;
           return wait();
         case 4:
           expect(element.querySelector('thead th:nth-child(4)').offsetWidth).to.eql(300);
@@ -485,29 +577,29 @@ describe('Table', function () {
             clientX: 1
           });
           dispatchEvent(document, 'mouseup');
-          _context10.next = 11;
+          _context14.next = 11;
           return wait();
         case 11:
           // rerender
           innerHTML = element.innerHTML;
           unmount();
-          _mount11 = mount(ResizableDemo), table = _mount11[1];
+          _mount12 = mount(ResizableDemo), table = _mount12[1];
           expect(table.innerHTML).to.matchSnapshot();
           expect(table.innerHTML).to.eql(innerHTML);
           localStorage.removeItem('resizableTable');
         case 17:
         case "end":
-          return _context10.stop();
+          return _context14.stop();
       }
-    }, _callee10);
+    }, _callee11);
   })));
-  it('resize column that its previous column is hidden', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11() {
-    var _mount12, instance, element, resize;
-    return _regeneratorRuntime.wrap(function _callee11$(_context11) {
-      while (1) switch (_context11.prev = _context11.next) {
+  it('resize column that its previous column is hidden', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee12() {
+    var _mount13, instance, element, resize;
+    return _regeneratorRuntime.wrap(function _callee12$(_context15) {
+      while (1) switch (_context15.prev = _context15.next) {
         case 0:
           localStorage.removeItem('resizableTable');
-          _mount12 = mount(ResizableDemo, null, ResizableDemoData), instance = _mount12[0], element = _mount12[1];
+          _mount13 = mount(ResizableDemo, null, ResizableDemoData), instance = _mount13[0], element = _mount13[1];
           resize = element.querySelector('thead th:nth-child(4) .k-table-resize');
           dispatchEvent(resize, 'mousedown', {
             which: 1,
@@ -517,23 +609,23 @@ describe('Table', function () {
             clientX: 1
           });
           dispatchEvent(document, 'mouseup');
-          _context11.next = 8;
+          _context15.next = 8;
           return wait();
         case 8:
           expect(element.innerHTML).to.matchSnapshot();
           localStorage.removeItem('resizableTable');
         case 10:
         case "end":
-          return _context11.stop();
+          return _context15.stop();
       }
-    }, _callee11);
+    }, _callee12);
   })));
-  it('should set the width of table equal to container after resizing and expanding container', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee12() {
-    var _mount13, instance, element, resize, container;
-    return _regeneratorRuntime.wrap(function _callee12$(_context12) {
-      while (1) switch (_context12.prev = _context12.next) {
+  it('should set the width of table equal to container after resizing and expanding container', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee13() {
+    var _mount14, instance, element, resize, container;
+    return _regeneratorRuntime.wrap(function _callee13$(_context16) {
+      while (1) switch (_context16.prev = _context16.next) {
         case 0:
-          _mount13 = mount(BasicDemo), instance = _mount13[0], element = _mount13[1];
+          _mount14 = mount(BasicDemo), instance = _mount14[0], element = _mount14[1];
           resize = element.querySelector('.k-table-resize');
           dispatchEvent(resize, 'mousedown', {
             which: 1,
@@ -543,63 +635,63 @@ describe('Table', function () {
             clientX: 1
           });
           dispatchEvent(document, 'mouseup');
-          _context12.next = 7;
+          _context16.next = 7;
           return wait();
         case 7:
           container = element.parentNode;
           container.style.width = '1000px';
-          _context12.next = 11;
+          _context16.next = 11;
           return wait(200);
         case 11:
           expect(element.querySelector('table').style.width).to.eql('1000px');
         case 12:
         case "end":
-          return _context12.stop();
+          return _context16.stop();
       }
-    }, _callee12);
+    }, _callee13);
   })));
-  it('loading', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee13() {
-    var _mount14, instance, element;
-    return _regeneratorRuntime.wrap(function _callee13$(_context13) {
-      while (1) switch (_context13.prev = _context13.next) {
+  it('loading', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee14() {
+    var _mount15, instance, element;
+    return _regeneratorRuntime.wrap(function _callee14$(_context17) {
+      while (1) switch (_context17.prev = _context17.next) {
         case 0:
-          _mount14 = mount(LoadingDemo), instance = _mount14[0], element = _mount14[1];
+          _mount15 = mount(LoadingDemo), instance = _mount15[0], element = _mount15[1];
           instance.set('loading', true);
-          _context13.next = 4;
+          _context17.next = 4;
           return wait();
         case 4:
           expect(element.innerHTML).to.matchSnapshot();
           instance.set('loading', false);
-          _context13.next = 8;
+          _context17.next = 8;
           return wait();
         case 8:
           expect(element.innerHTML).to.matchSnapshot();
         case 9:
         case "end":
-          return _context13.stop();
+          return _context17.stop();
       }
-    }, _callee13);
+    }, _callee14);
   })));
-  it('export', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee14() {
-    var _mount15, instance, element, content, content1, csv;
-    return _regeneratorRuntime.wrap(function _callee14$(_context14) {
-      while (1) switch (_context14.prev = _context14.next) {
+  it('export', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee15() {
+    var _mount16, instance, element, content, content1, csv;
+    return _regeneratorRuntime.wrap(function _callee15$(_context18) {
+      while (1) switch (_context18.prev = _context18.next) {
         case 0:
           this.timeout(0);
-          _mount15 = mount(ExportDemo), instance = _mount15[0], element = _mount15[1];
-          _context14.next = 4;
+          _mount16 = mount(ExportDemo), instance = _mount16[0], element = _mount16[1];
+          _context18.next = 4;
           return instance.refs.table.exportTable();
         case 4:
-          content = _context14.sent;
+          content = _context18.sent;
           expect(content.replace(/\r\n|\r/g, '\n')).to.matchSnapshot();
-          _context14.next = 8;
+          _context18.next = 8;
           return instance.refs.table.exportTable([{
             a: '1',
             b: 2,
             c: 3
           }]);
         case 8:
-          content1 = _context14.sent;
+          content1 = _context18.sent;
           expect(content1.replace(/\r\n|\r/g, '\n')).to.matchSnapshot();
           // it will be error codes if downloadjs exports below contents
           // use custom download function instead
@@ -607,151 +699,151 @@ describe('Table', function () {
           download(csv, 'test.csv');
         case 12:
         case "end":
-          return _context14.stop();
+          return _context18.stop();
       }
-    }, _callee14, this);
+    }, _callee15, this);
   })));
-  it('selectedKeys', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee15() {
-    var _mount16, instance, element, _element$querySelecto9, table1, table2, _table1$querySelector3, tr1, tr2, _table2$querySelector3, tr21, tr22;
-    return _regeneratorRuntime.wrap(function _callee15$(_context15) {
-      while (1) switch (_context15.prev = _context15.next) {
+  it('selectedKeys', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee16() {
+    var _mount17, instance, element, _element$querySelecto9, table1, table2, _table1$querySelector3, tr1, tr2, _table2$querySelector3, tr21, tr22;
+    return _regeneratorRuntime.wrap(function _callee16$(_context19) {
+      while (1) switch (_context19.prev = _context19.next) {
         case 0:
-          _mount16 = mount(SelectedKeysDemo), instance = _mount16[0], element = _mount16[1];
+          _mount17 = mount(SelectedKeysDemo), instance = _mount17[0], element = _mount17[1];
           _element$querySelecto9 = element.querySelectorAll('tbody'), table1 = _element$querySelecto9[0], table2 = _element$querySelecto9[1];
           _table1$querySelector3 = table1.querySelectorAll('tr'), tr1 = _table1$querySelector3[0], tr2 = _table1$querySelector3[1];
           tr1.click();
-          _context15.next = 6;
+          _context19.next = 6;
           return wait();
         case 6:
           expect(table1.innerHTML).to.matchSnapshot();
           tr2.click();
-          _context15.next = 10;
+          _context19.next = 10;
           return wait();
         case 10:
           expect(table1.innerHTML).to.matchSnapshot();
           expect(instance.refs.__test1.getSelectedData()).to.have.lengthOf(1);
           tr2.click();
-          _context15.next = 15;
+          _context19.next = 15;
           return wait();
         case 15:
           expect(table1.innerHTML).to.matchSnapshot();
           expect(instance.refs.__test1.getSelectedData()).to.have.lengthOf(0);
           _table2$querySelector3 = table2.querySelectorAll('tr'), tr21 = _table2$querySelector3[0], tr22 = _table2$querySelector3[1];
           tr21.click();
-          _context15.next = 21;
+          _context19.next = 21;
           return wait();
         case 21:
           expect(table2.innerHTML).to.matchSnapshot();
           tr22.click();
-          _context15.next = 25;
+          _context19.next = 25;
           return wait();
         case 25:
           expect(table2.innerHTML).to.matchSnapshot();
           expect(instance.refs.__test2.getSelectedData()).to.have.lengthOf(2);
           tr22.click();
-          _context15.next = 30;
+          _context19.next = 30;
           return wait();
         case 30:
           expect(table2.innerHTML).to.matchSnapshot();
           expect(instance.refs.__test2.getSelectedData()).to.have.lengthOf(1);
         case 32:
         case "end":
-          return _context15.stop();
+          return _context19.stop();
       }
-    }, _callee15);
+    }, _callee16);
   })));
-  it('tooltip', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee16() {
-    var _mount17, instance, element, tr, content;
-    return _regeneratorRuntime.wrap(function _callee16$(_context16) {
-      while (1) switch (_context16.prev = _context16.next) {
+  it('tooltip', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee17() {
+    var _mount18, instance, element, tr, content;
+    return _regeneratorRuntime.wrap(function _callee17$(_context20) {
+      while (1) switch (_context20.prev = _context20.next) {
         case 0:
-          _mount17 = mount(TooltipDemo), instance = _mount17[0], element = _mount17[1];
+          _mount18 = mount(TooltipDemo), instance = _mount18[0], element = _mount18[1];
           tr = element.querySelector('tbody tr');
           dispatchEvent(tr, 'mouseenter');
-          _context16.next = 5;
+          _context20.next = 5;
           return wait();
         case 5:
           content = getElement('.k-tooltip-content');
           expect(content.textContent).to.matchSnapshot();
         case 7:
         case "end":
-          return _context16.stop();
+          return _context20.stop();
       }
-    }, _callee16);
+    }, _callee17);
   })));
-  it('tree', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee17() {
-    var _mount18, instance, element, table, checkbox, arrow;
-    return _regeneratorRuntime.wrap(function _callee17$(_context17) {
-      while (1) switch (_context17.prev = _context17.next) {
+  it('tree', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee18() {
+    var _mount19, instance, element, table, checkbox, arrow;
+    return _regeneratorRuntime.wrap(function _callee18$(_context21) {
+      while (1) switch (_context21.prev = _context21.next) {
         case 0:
-          _mount18 = mount(TreeDemo), instance = _mount18[0], element = _mount18[1];
+          _mount19 = mount(TreeDemo), instance = _mount19[0], element = _mount19[1];
           table = instance.$lastInput.children; // check all
           checkbox = element.querySelector('.k-checkbox');
           checkbox.click();
-          _context17.next = 6;
+          _context21.next = 6;
           return wait();
         case 6:
           expect(element.innerHTML).to.matchSnapshot();
           expect(table.getCheckedData()).to.have.lengthOf(8);
           arrow = element.querySelector('.k-table-arrow');
           arrow.click();
-          _context17.next = 12;
+          _context21.next = 12;
           return wait();
         case 12:
           expect(element.innerHTML).to.matchSnapshot();
           arrow.click();
-          _context17.next = 16;
+          _context21.next = 16;
           return wait();
         case 16:
           expect(element.innerHTML).to.matchSnapshot();
           expect(table.getCheckedData()).to.have.lengthOf(8);
         case 18:
         case "end":
-          return _context17.stop();
+          return _context21.stop();
       }
-    }, _callee17);
+    }, _callee18);
   })));
-  it('should keep checked status of the disabled row', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee18() {
-    var _mount19, instance, element, checked, checkbox, _element$querySelecto10, checkbox2, checkbox4;
-    return _regeneratorRuntime.wrap(function _callee18$(_context18) {
-      while (1) switch (_context18.prev = _context18.next) {
+  it('should keep checked status of the disabled row', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee19() {
+    var _mount20, instance, element, checked, checkbox, _element$querySelecto10, checkbox2, checkbox4;
+    return _regeneratorRuntime.wrap(function _callee19$(_context22) {
+      while (1) switch (_context22.prev = _context22.next) {
         case 0:
-          _mount19 = mount(DisabledDemo), instance = _mount19[0], element = _mount19[1];
+          _mount20 = mount(DisabledDemo), instance = _mount20[0], element = _mount20[1];
           checked = instance.$lastInput.children.checked;
           checkbox = element.querySelector('.k-checkbox');
           checkbox.click();
-          _context18.next = 6;
+          _context22.next = 6;
           return wait();
         case 6:
           expect(instance.get('checkedKeys')).to.eql(['3', '2', '4']);
           checkbox.click();
-          _context18.next = 10;
+          _context22.next = 10;
           return wait();
         case 10:
           expect(instance.get('checkedKeys')).to.eql(['3']);
           _element$querySelecto10 = element.querySelectorAll('.k-checkbox'), checkbox2 = _element$querySelecto10[2], checkbox4 = _element$querySelecto10[4];
           checkbox2.click();
-          _context18.next = 15;
+          _context22.next = 15;
           return wait();
         case 15:
           expect(checked.getAllCheckedStatus()).eql(AllCheckedStatus.Indeterminate);
           checkbox4.click();
-          _context18.next = 19;
+          _context22.next = 19;
           return wait();
         case 19:
           expect(checked.getAllCheckedStatus()).eql(AllCheckedStatus.All);
         case 20:
         case "end":
-          return _context18.stop();
+          return _context22.stop();
       }
-    }, _callee18);
+    }, _callee19);
   })));
-  it('scroll to row', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee19() {
-    var _mount20, instance, element, table, scroll, tr, height, test;
-    return _regeneratorRuntime.wrap(function _callee19$(_context19) {
-      while (1) switch (_context19.prev = _context19.next) {
+  it('scroll to row', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee20() {
+    var _mount21, instance, element, table, scroll, tr, height, test;
+    return _regeneratorRuntime.wrap(function _callee20$(_context23) {
+      while (1) switch (_context23.prev = _context23.next) {
         case 0:
-          _mount20 = mount(ScrollToRowDemo), instance = _mount20[0], element = _mount20[1];
+          _mount21 = mount(ScrollToRowDemo), instance = _mount21[0], element = _mount21[1];
           table = instance.refs.table;
           scroll = element.querySelector('.k-table-wrapper');
           tr = element.querySelector('tbody tr');
@@ -759,55 +851,55 @@ describe('Table', function () {
           test = function test(rows) {
             expect(scroll.scrollTop).to.eql(height * rows);
           };
-          _context19.next = 8;
+          _context23.next = 8;
           return table.scrollToRowByIndex(2);
         case 8:
           test(2);
-          _context19.next = 11;
+          _context23.next = 11;
           return table.scrollToRowByIndex(1);
         case 11:
           test(1);
-          _context19.next = 14;
+          _context23.next = 14;
           return table.scrollToRowByKey('name 3');
         case 14:
           test(2);
-          _context19.next = 17;
+          _context23.next = 17;
           return table.scrollToRowByKey('name 2');
         case 17:
           test(1);
         case 18:
         case "end":
-          return _context19.stop();
+          return _context23.stop();
       }
-    }, _callee19);
+    }, _callee20);
   })));
   it('render a hidden table with minWidth', function () {
-    var Demo = /*#__PURE__*/function (_Component) {
-      _inheritsLoose(Demo, _Component);
+    var Demo = /*#__PURE__*/function (_Component2) {
+      _inheritsLoose(Demo, _Component2);
       function Demo() {
-        var _context20;
-        var _this;
-        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-          args[_key] = arguments[_key];
+        var _context24;
+        var _this2;
+        for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+          args[_key2] = arguments[_key2];
         }
-        _this = _Component.call.apply(_Component, _concatInstanceProperty(_context20 = [this]).call(_context20, args)) || this;
-        _this.Table = Table;
-        _this.TableColumn = TableColumn;
-        return _this;
+        _this2 = _Component2.call.apply(_Component2, _concatInstanceProperty(_context24 = [this]).call(_context24, args)) || this;
+        _this2.Table = Table;
+        _this2.TableColumn = TableColumn;
+        return _this2;
       }
       return Demo;
     }(Component);
     Demo.template = "\n                const {Table, TableColumn} = this;\n                <div style=\"display: none;\">\n                    <Table>\n                        <TableColumn key=\"a\" minWidth={30} />\n                    </Table>\n                </div>\n            ";
-    var _mount21 = mount(Demo),
-      element = _mount21[1];
+    var _mount22 = mount(Demo),
+      element = _mount22[1];
     expect(element.innerHTML).to.matchSnapshot();
   });
-  it('draggable', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee20() {
-    var _mount22, instance, element, _element$querySelecto11, tr1, tr2, _element$getBoundingC, top;
-    return _regeneratorRuntime.wrap(function _callee20$(_context21) {
-      while (1) switch (_context21.prev = _context21.next) {
+  it('draggable', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee21() {
+    var _mount23, instance, element, _element$querySelecto11, tr1, tr2, _element$getBoundingC, top;
+    return _regeneratorRuntime.wrap(function _callee21$(_context25) {
+      while (1) switch (_context25.prev = _context25.next) {
         case 0:
-          _mount22 = mount(DraggableTable), instance = _mount22[0], element = _mount22[1];
+          _mount23 = mount(DraggableTable), instance = _mount23[0], element = _mount23[1];
           _element$querySelecto11 = element.querySelectorAll('tbody tr'), tr1 = _element$querySelecto11[0], tr2 = _element$querySelecto11[1];
           _element$getBoundingC = element.getBoundingClientRect(), top = _element$getBoundingC.top;
           dispatchEvent(tr2, 'dragstart');
@@ -815,33 +907,33 @@ describe('Table', function () {
             clientY: top + 41 + 20
           });
           dispatchEvent(tr2, 'dragend');
-          _context21.next = 8;
+          _context25.next = 8;
           return wait(500);
         case 8:
           expect(element.innerHTML).to.matchSnapshot();
         case 9:
         case "end":
-          return _context21.stop();
+          return _context25.stop();
       }
-    }, _callee20);
+    }, _callee21);
   })));
-  it('should not check all even though the keys is equal but the checkedKeys have some keys that not in rowKeys', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee21() {
-    var Demo, _mount23, instance, element, table, checked;
-    return _regeneratorRuntime.wrap(function _callee21$(_context23) {
-      while (1) switch (_context23.prev = _context23.next) {
+  it('should not check all even though the keys is equal but the checkedKeys have some keys that not in rowKeys', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee22() {
+    var Demo, _mount24, instance, element, table, checked;
+    return _regeneratorRuntime.wrap(function _callee22$(_context27) {
+      while (1) switch (_context27.prev = _context27.next) {
         case 0:
-          Demo = /*#__PURE__*/function (_Component2) {
-            _inheritsLoose(Demo, _Component2);
+          Demo = /*#__PURE__*/function (_Component3) {
+            _inheritsLoose(Demo, _Component3);
             function Demo() {
-              var _context22;
-              var _this2;
-              for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-                args[_key2] = arguments[_key2];
+              var _context26;
+              var _this3;
+              for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+                args[_key3] = arguments[_key3];
               }
-              _this2 = _Component2.call.apply(_Component2, _concatInstanceProperty(_context22 = [this]).call(_context22, args)) || this;
-              _this2.Table = Table;
-              _this2.TableColumn = TableColumn;
-              return _this2;
+              _this3 = _Component3.call.apply(_Component3, _concatInstanceProperty(_context26 = [this]).call(_context26, args)) || this;
+              _this3.Table = Table;
+              _this3.TableColumn = TableColumn;
+              return _this3;
             }
             Demo.defaults = function defaults() {
               return {
@@ -856,7 +948,7 @@ describe('Table', function () {
             return Demo;
           }(Component);
           Demo.template = "\n                const {Table, TableColumn} = this;\n                <Table v-model:checkedKeys=\"checkedKeys\"\n                    data={this.get('data')}\n                    rowKey={i => i.a}\n                    ref=\"table\"\n                    keepStatus={true}\n                >\n                    <TableColumn key=\"a\" />\n                </Table>\n            ";
-          _mount23 = mount(Demo), instance = _mount23[0], element = _mount23[1];
+          _mount24 = mount(Demo), instance = _mount24[0], element = _mount24[1];
           table = instance.refs.table;
           checked = table.checked;
           expect(checked.getAllCheckedStatus()).to.eql(AllCheckedStatus.None);
@@ -865,7 +957,7 @@ describe('Table', function () {
           table.uncheckAll();
           expect(instance.get('checkedKeys')).to.eql([3, 4]);
           instance.set('checkedKeys', [3, 4, 1]);
-          _context23.next = 13;
+          _context27.next = 13;
           return wait();
         case 13:
           expect(checked.getAllCheckedStatus()).to.eql(AllCheckedStatus.Indeterminate);
@@ -875,47 +967,47 @@ describe('Table', function () {
           instance.set('data', [{
             a: 1
           }]);
-          _context23.next = 19;
+          _context27.next = 19;
           return wait();
         case 19:
           expect(instance.get('checkedKeys')).to.eql([3, 4, 1, 2]);
         case 20:
         case "end":
-          return _context23.stop();
+          return _context27.stop();
       }
-    }, _callee21);
+    }, _callee22);
   })));
-  it('should update children in TableCell', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee22() {
-    var update, Test, Demo, _mount24, instance, element;
-    return _regeneratorRuntime.wrap(function _callee22$(_context25) {
-      while (1) switch (_context25.prev = _context25.next) {
+  it('should update children in TableCell', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee23() {
+    var update, Test, Demo, _mount25, instance, element;
+    return _regeneratorRuntime.wrap(function _callee23$(_context29) {
+      while (1) switch (_context29.prev = _context29.next) {
         case 0:
           update = sinon.spy();
-          Test = /*#__PURE__*/function (_Component3) {
-            _inheritsLoose(Test, _Component3);
+          Test = /*#__PURE__*/function (_Component4) {
+            _inheritsLoose(Test, _Component4);
             function Test() {
-              return _Component3.apply(this, arguments) || this;
+              return _Component4.apply(this, arguments) || this;
             }
-            var _proto = Test.prototype;
-            _proto.beforeUpdate = function beforeUpdate() {
+            var _proto2 = Test.prototype;
+            _proto2.beforeUpdate = function beforeUpdate() {
               update();
             };
             return Test;
           }(Component);
           Test.template = "<div>test</div>";
-          Demo = /*#__PURE__*/function (_Component4) {
-            _inheritsLoose(Demo, _Component4);
+          Demo = /*#__PURE__*/function (_Component5) {
+            _inheritsLoose(Demo, _Component5);
             function Demo() {
-              var _context24;
-              var _this3;
-              for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-                args[_key3] = arguments[_key3];
+              var _context28;
+              var _this4;
+              for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+                args[_key4] = arguments[_key4];
               }
-              _this3 = _Component4.call.apply(_Component4, _concatInstanceProperty(_context24 = [this]).call(_context24, args)) || this;
-              _this3.Table = Table;
-              _this3.TableColumn = TableColumn;
-              _this3.Test = Test;
-              return _this3;
+              _this4 = _Component5.call.apply(_Component5, _concatInstanceProperty(_context28 = [this]).call(_context28, args)) || this;
+              _this4.Table = Table;
+              _this4.TableColumn = TableColumn;
+              _this4.Test = Test;
+              return _this4;
             }
             Demo.defaults = function defaults() {
               return {
@@ -929,24 +1021,24 @@ describe('Table', function () {
             return Demo;
           }(Component);
           Demo.template = "\n                const {Table, TableColumn, Test} = this;\n                <Table data={this.get('data')} ref=\"table\">\n                    <TableColumn key=\"a\">\n                        <b:template>\n                            <Test />\n                        </b:template>\n                    </TableColumn>\n                </Table>\n            ";
-          _mount24 = mount(Demo), instance = _mount24[0], element = _mount24[1];
+          _mount25 = mount(Demo), instance = _mount25[0], element = _mount25[1];
           element.querySelector('tbody tr').click();
-          _context25.next = 9;
+          _context29.next = 9;
           return wait();
         case 9:
           expect(update.callCount).to.eql(1);
         case 10:
         case "end":
-          return _context25.stop();
+          return _context29.stop();
       }
-    }, _callee22);
+    }, _callee23);
   })));
-  it('pagination', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee23() {
-    var _mount25, instance, element, table, pagination, spy;
-    return _regeneratorRuntime.wrap(function _callee23$(_context26) {
-      while (1) switch (_context26.prev = _context26.next) {
+  it('pagination', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee24() {
+    var _mount26, instance, element, table, pagination, spy;
+    return _regeneratorRuntime.wrap(function _callee24$(_context30) {
+      while (1) switch (_context30.prev = _context30.next) {
         case 0:
-          _mount25 = mount(PaginationDemo), instance = _mount25[0], element = _mount25[1];
+          _mount26 = mount(PaginationDemo), instance = _mount26[0], element = _mount26[1];
           table = instance.refs.table;
           pagination = table.pagination.paginationRef;
           spy = sinon.spy();
@@ -959,7 +1051,7 @@ describe('Table', function () {
             value: 2
           });
           table.trigger('$receive:pagination');
-          _context26.next = 11;
+          _context30.next = 11;
           return wait();
         case 11:
           expect(table.getCheckedData()).to.have.length(0);
@@ -972,7 +1064,7 @@ describe('Table', function () {
             limit: 20
           });
           table.trigger('$receive:pagination');
-          _context26.next = 18;
+          _context30.next = 18;
           return wait();
         case 18:
           expect(table.getCheckedData()).to.have.length(10);
@@ -981,7 +1073,7 @@ describe('Table', function () {
           expect(table.getCheckedData()).to.have.length(20);
           // change limit from pagination
           pagination.value.set('limit', 10);
-          _context26.next = 24;
+          _context30.next = 24;
           return wait();
         case 24:
           expect(table.getCheckedData()).to.have.length(10);
@@ -993,7 +1085,7 @@ describe('Table', function () {
             limit: 10
           });
           // change page from pagination
-          _context26.next = 29;
+          _context30.next = 29;
           return wait();
         case 29:
           pagination.value.changePage(2);
@@ -1005,8 +1097,8 @@ describe('Table', function () {
           });
         case 33:
         case "end":
-          return _context26.stop();
+          return _context30.stop();
       }
-    }, _callee23);
+    }, _callee24);
   })));
 });