@king-design/vue 3.6.0-beta.0 → 3.6.0

package/components/table/index.spec.js

@@ -5,6 +5,7 @@ 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 _Array$from from "@babel/runtime-corejs3/core-js/array/from";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import { __decorate } from "tslib";
 import BasicDemo from '~/components/table/demos/basic';
@@ -784,21 +785,20 @@ describe('Table', function () {
           return wait();
         case 6:
           expect(element.innerHTML).to.matchSnapshot();
-          debugger;
           expect(table.getCheckedData()).to.have.lengthOf(8);
           arrow = element.querySelector('.k-table-arrow');
           arrow.click();
-          _context21.next = 13;
+          _context21.next = 12;
           return wait();
-        case 13:
+        case 12:
           expect(element.innerHTML).to.matchSnapshot();
           arrow.click();
-          _context21.next = 17;
+          _context21.next = 16;
           return wait();
-        case 17:
+        case 16:
           expect(element.innerHTML).to.matchSnapshot();
           expect(table.getCheckedData()).to.have.lengthOf(8);
-        case 19:
+        case 18:
         case "end":
           return _context21.stop();
       }
@@ -1102,4 +1102,82 @@ describe('Table', function () {
       }
     }, _callee24);
   })));
+  it('fixHeader with Affix header scroll sync', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee25() {
+    var Demo, _mount27, instance, element, scrollContainer, affixWrapper1, affixWrapper2, affixWrapper3;
+    return _regeneratorRuntime.wrap(function _callee25$(_context32) {
+      while (1) switch (_context32.prev = _context32.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component6) {
+            _inheritsLoose(Demo, _Component6);
+            function Demo() {
+              var _context31;
+              var _this5;
+              for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
+                args[_key5] = arguments[_key5];
+              }
+              _this5 = _Component6.call.apply(_Component6, _concatInstanceProperty(_context31 = [this]).call(_context31, args)) || this;
+              _this5.Table = Table;
+              _this5.TableColumn = TableColumn;
+              return _this5;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                data: _Array$from({
+                  length: 10
+                }, function (_, i) {
+                  return {
+                    name: "Name " + i,
+                    column1: "Column1 " + i,
+                    column2: "Column2 " + i,
+                    column3: "Column3 " + i,
+                    action: "Action " + i
+                  };
+                }),
+                fixHeader: 200,
+                virtual: false,
+                stickScrollbar: false
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const {Table, TableColumn} = this;\n                const {data, fixHeader, virtual, stickScrollbar} = this.get();\n                <Table data={data} fixHeader={fixHeader} virtual={virtual} stickScrollbar={stickScrollbar} ref=\"table\">\n                    <TableColumn fixed=\"left\" key=\"name\" title=\"Name\" width=\"200\" />\n                    <TableColumn key=\"column1\" title=\"Column1\" width=\"300\" />\n                    <TableColumn key=\"column2\" title=\"Column2\" width=\"300\" />\n                    <TableColumn key=\"column3\" title=\"Column3\" width=\"300\" />\n                    <TableColumn fixed=\"right\" key=\"action\" title=\"Action\" width=\"200\" />\n                </Table>\n            ";
+          _mount27 = mount(Demo), instance = _mount27[0], element = _mount27[1]; // Test 1: fixHeader only - scroll left 50px
+          _context32.next = 5;
+          return wait();
+        case 5:
+          scrollContainer = element.querySelector('.k-table-wrapper');
+          scrollContainer.scrollLeft = 50;
+          _context32.next = 9;
+          return wait(100);
+        case 9:
+          affixWrapper1 = element.querySelector('.k-table-affix-header .k-affix-wrapper');
+          expect(affixWrapper1.scrollLeft).to.eql(50);
+          // Test 2: fixHeader + virtual - scroll left 50px more (total 100px)
+          instance.set('virtual', true);
+          _context32.next = 14;
+          return wait();
+        case 14:
+          scrollContainer.scrollLeft = 100;
+          _context32.next = 17;
+          return wait(100);
+        case 17:
+          affixWrapper2 = element.querySelector('.k-table-affix-header .k-affix-wrapper');
+          expect(affixWrapper2.scrollLeft).to.eql(100);
+          // Test 3: stickScrollbar + fixHeader - scroll right 50px (back to 50px)
+          instance.set('stickScrollbar', true);
+          _context32.next = 22;
+          return wait();
+        case 22:
+          scrollContainer.scrollLeft = 50;
+          _context32.next = 25;
+          return wait(100);
+        case 25:
+          affixWrapper3 = element.querySelector('.k-table-affix-header .k-affix-wrapper');
+          expect(affixWrapper3.scrollLeft).to.eql(50);
+        case 27:
+        case "end":
+          return _context32.stop();
+      }
+    }, _callee25);
+  })));
 });

package/components/table/useStickyHeader.js

@@ -17,7 +17,7 @@ export function useStickyHeader(callbacks) {
   });
   // when the scroll element scroll horizontally, scroll the sticky header too 
   callbacks.push(function (scrollLeft) {
-    if (isNull(stickHeader.value)) return;
+    if (isNull(stickHeader.value) && !instance.get('fixHeader')) return;
     var affixHeadWrapper = headRef.value.parentElement;
     affixHeadWrapper.scrollLeft = scrollLeft;
   });