@king-design/vue 3.4.5 → 3.5.0

package/components/affix/index.d.ts

@@ -4,6 +4,7 @@ export interface AffixProps {
     bottom?: number;
     exclude?: (data: ExcludeParam) => boolean;
     shouldFix?: (data: ShouldFixParam) => boolean;
+    disabled?: boolean;
 }
 export interface AffixEvents {
     change: [boolean];

package/components/affix/index.js

@@ -8,7 +8,8 @@ var typeDefs = {
   top: Number,
   bottom: Number,
   exclude: Function,
-  shouldFix: Function
+  shouldFix: Function,
+  disabled: Boolean
 };
 export var Affix = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Affix, _Component);

package/components/affix/useStyle.js

@@ -14,54 +14,57 @@ export function useStyle(elementRef) {
       offsetTop = _instance$get.top,
       offsetBottom = _instance$get.bottom,
       exclude = _instance$get.exclude,
-      shouldFix = _instance$get.shouldFix;
-    var _elementRef$value$get = elementRef.value.getBoundingClientRect(),
-      top = _elementRef$value$get.top,
-      bottom = _elementRef$value$get.bottom,
-      width = _elementRef$value$get.width,
-      height = _elementRef$value$get.height;
-    var setStyle = function setStyle(styles) {
-      if (!exclude || exclude && !exclude({
-        offsetTop: offsetTop,
-        offsetBottom: offsetBottom,
-        top: top,
-        bottom: bottom,
-        width: width,
-        height: height
-      })) {
-        style.set(_extends({
-          position: 'fixed',
-          width: width + "px"
-        }, styles));
-        containerStyle.set({
-          height: height + "px"
-        });
-      } else {
-        resetStyle();
-      }
-    };
-    if (isNullOrUndefined(offsetTop) && isNullOrUndefined(offsetBottom)) {
-      offsetTop = 0;
-    }
-    if (!isNullOrUndefined(offsetTop)) {
-      if (shouldFix && shouldFix({
-        offsetTop: offsetTop,
-        offsetBottom: offsetBottom
-      }) || !shouldFix && top < offsetTop) {
-        return setStyle({
-          top: offsetTop + "px"
-        });
+      shouldFix = _instance$get.shouldFix,
+      disabled = _instance$get.disabled;
+    if (!disabled) {
+      var _elementRef$value$get = elementRef.value.getBoundingClientRect(),
+        top = _elementRef$value$get.top,
+        bottom = _elementRef$value$get.bottom,
+        width = _elementRef$value$get.width,
+        height = _elementRef$value$get.height;
+      var setStyle = function setStyle(styles) {
+        if (!exclude || exclude && !exclude({
+          offsetTop: offsetTop,
+          offsetBottom: offsetBottom,
+          top: top,
+          bottom: bottom,
+          width: width,
+          height: height
+        })) {
+          style.set(_extends({
+            position: 'fixed',
+            width: width + "px"
+          }, styles));
+          containerStyle.set({
+            height: height + "px"
+          });
+        } else {
+          resetStyle();
+        }
+      };
+      if (isNullOrUndefined(offsetTop) && isNullOrUndefined(offsetBottom)) {
+        offsetTop = 0;
       }
-    } else {
-      var viewportHeight = document.documentElement.clientHeight;
-      if (shouldFix && shouldFix({
-        offsetTop: offsetTop,
-        offsetBottom: offsetBottom,
-        viewportHeight: viewportHeight
-      }) || !shouldFix && !isNullOrUndefined(offsetBottom) && viewportHeight - bottom <= offsetBottom) {
-        return setStyle({
-          bottom: offsetBottom + "px"
-        });
+      if (!isNullOrUndefined(offsetTop)) {
+        if (shouldFix && shouldFix({
+          offsetTop: offsetTop,
+          offsetBottom: offsetBottom
+        }) || !shouldFix && top < offsetTop) {
+          return setStyle({
+            top: offsetTop + "px"
+          });
+        }
+      } else {
+        var viewportHeight = document.documentElement.clientHeight;
+        if (shouldFix && shouldFix({
+          offsetTop: offsetTop,
+          offsetBottom: offsetBottom,
+          viewportHeight: viewportHeight
+        }) || !shouldFix && !isNullOrUndefined(offsetBottom) && viewportHeight - bottom <= offsetBottom) {
+          return setStyle({
+            bottom: offsetBottom + "px"
+          });
+        }
       }
     }
     resetStyle();

package/components/datepicker/basepicker.js

@@ -15,13 +15,13 @@ import { findValueIndex } from './helpers';
 import { isEqualArray, last, bind } from '../utils';
 import { BaseSelect } from '../select/base';
 var typeDefs = _extends({}, BaseSelect.typeDefs, {
-  value: [String, Array, Date, Number, dayjs.Dayjs],
+  value: [String, Array, Date, Number, dayjs],
   range: Boolean,
   format: String,
   valueFormat: String,
   showFormat: String,
-  min: [String, Date, Number, dayjs.Dayjs],
-  max: [String, Date, Number, dayjs.Dayjs],
+  min: [String, Date, Number, dayjs],
+  max: [String, Date, Number, dayjs],
   disabledDate: Function
 });
 var defaults = function defaults() {

package/components/dialog/styles.js

@@ -58,8 +58,8 @@ var defaults = {
     padding: "0 24px",
     bodyMarginTop: "-25px",
     tipIconMarginBottom: '10px',
-    tipIconFontSize: '24px',
-    tipIconLineHeight: '24px',
+    tipIconFontSize: '40px',
+    tipIconLineHeight: '40px',
     // with title
     titleFontWeight: '500',
     titleTipIconFontSize: '24px',

package/components/dropdown/useKeyboard.js

@@ -91,6 +91,7 @@ export function useMenuKeyboard() {
   function reset() {
     var item = items[focusIndex];
     if (focusIndex > -1 && item) {
+      // TODO(find bug)
       itemEvents.get(item).onFocusout();
       focusIndex = -1;
     }
@@ -141,6 +142,8 @@ export function useItemKeyboard(itemEvents) {
     onMouseLeave: function onMouseLeave(e) {
       instance.trigger('mouseleave', e);
       keyboard.reset();
+      // If it is a virtual item, it needs to be reset manually because the DOM is reused.
+      isFocus.set(false);
     },
     isFocus: isFocus
   };

package/components/input/index.spec.js

@@ -8,6 +8,7 @@ import SearchDemo from '~/components/input/demos/search';
 import FrozenDemo from '~/components/input/demos/frozen';
 import AutoRowsDemo from '~/components/input/demos/autoRows';
 import PasswordDemo from '~/components/input/demos/password';
+import AutoWidthDemo from '~/components/input/demos/autowidth';
 import { Input } from './';
 import { Dialog } from '../dialog';
 import { Component } from 'intact-vue-next';
@@ -238,4 +239,24 @@ describe('Input', function () {
       }
     }, _callee6);
   })));
+  it('autoWidth', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
+    var _mount7, instance, element, input;
+    return _regeneratorRuntime.wrap(function _callee7$(_context8) {
+      while (1) switch (_context8.prev = _context8.next) {
+        case 0:
+          // should expand when input spaces
+          _mount7 = mount(AutoWidthDemo), instance = _mount7[0], element = _mount7[1];
+          input = element.querySelector('input');
+          input.value = 'ab  ';
+          dispatchEvent(input, 'input');
+          _context8.next = 6;
+          return wait(50);
+        case 6:
+          expect(input.offsetWidth).to.gt(16);
+        case 7:
+        case "end":
+          return _context8.stop();
+      }
+    }, _callee7);
+  })));
 });

package/components/input/index.vdt.js

@@ -133,7 +133,7 @@ export default function ($props, $blocks, $__proto__) {
           return block ? block.call($this, callBlock, data) : callBlock();
         }, __$blocks['suffix'](_$no))], 0, _$cn(k + "-input-suffix"), {
           'ev-click': stopPropagation
-        }) : undefined, autoWidth ? _$ce(2, 'div', _$ce(2, 'span', !hasValue ? hasInputValue || !defaultValue ? placeholder : defaultValue : inputValue, 0, null, null, null, fakeRef), 2, _$cn(k + "-input-fake")) : undefined], 0, _$cn(k + "-input-wrapper"), {
+        }) : undefined, autoWidth ? _$ce(2, 'div', _$ce(2, 'pre', !hasValue ? hasInputValue || !defaultValue ? placeholder : defaultValue : inputValue, 0, null, null, null, fakeRef), 2, _$cn(k + "-input-fake")) : undefined], 0, _$cn(k + "-input-wrapper"), {
           'ev-click': focusInputOnClick
         })
       });

package/components/input/styles.js

@@ -125,7 +125,7 @@ export var makeStyles = cache(function makeStyles(k) {
     return /*#__PURE__*/css("&.", k, "-", size, "{", sizeClassName, ";}");
   }), "&.", k, "-inline{.", k, "-input-wrapper{height:auto;border:none;border-radius:0;padding:0;}}&.", k, "-type-textarea{.", k, "-input-wrapper{display:inline-block;padding:0;height:auto;}.", k, "-textarea{width:100%;padding:", input.textareaPadding, ";line-height:1.5;vertical-align:top;}.", k, "-input-suffix{margin:0;justify-content:flex-end;}}", _mapInstanceProperty(_context = Input.typeDefs.resize).call(_context, function (type) {
     return /*#__PURE__*/css("&.", k, "-resize-", type, "{.", k, "-textarea{resize:", type, ";}}");
-  }), ".", k, "-input-fake{left:0;top:0;position:absolute;overflow:hidden;visibility:hidden;white-space:nowrap;}&.", k, "-auto-width{width:auto;max-width:100%;}.", k, "-input-count{color:", input.count.color, ";}");
+  }), ".", k, "-input-fake{left:0;top:0;position:absolute;overflow:hidden;visibility:hidden;white-space:nowrap;pre{font-family:inherit;}}&.", k, "-auto-width{width:auto;max-width:100%;}.", k, "-input-count{color:", input.count.color, ";}");
 });
 export var makeSearchStyles = cache(function makeSearchStyles(k) {
   return /*#__PURE__*/css("position:relative;display:inline-block;.", k, "-input{transition:width ", input.transition, ";}.", k, "-btn{position:absolute;top:0;right:0;z-index:1;}&.", k, "-default .", k, "-btn:hover{background:transparent;}.", k, "-input-suffix{margin-right:", input.search.suffixMarginRight, ";}&.", k, "-hide{", _mapInstanceProperty(sizes).call(sizes, function (size) {

package/components/layout/styles.js

@@ -60,7 +60,7 @@ export var makeAsideStyles = cache(function makeAsideStyles(k) {
     if (theme === 'dark') return;
     var styles = layout.light;
     return /*#__PURE__*/css("&.", k, "-", theme, "{background:", styles.bgColor, ";color:", styles.color, ";border-right:", styles.border, ";}");
-  }), " &.", k, "-fixed{position:fixed;overflow:auto;left:0;top:0;bottom:0;z-index:", theme.midZIndex, ";}.", k, "-menu{width:auto!important;}");
+  }), " &.", k, "-fixed{position:fixed;overflow:auto;left:0;top:0;bottom:0;z-index:", theme.midZIndex, ";}.", k, "-menu{width:auto!important;border-right:none!important;}");
 });
 export var makeBodyStyles = cache(function makeBodyStyles(k) {
   return /*#__PURE__*/css("transition:padding-left ", layout.transition, ";");

package/components/select/base.d.ts

@@ -24,6 +24,7 @@ export interface BaseSelectProps<V, Multipe extends boolean = boolean, Attach =
     flat?: boolean;
     nowrap?: boolean;
     draggable?: boolean;
+    virtual?: boolean;
 }
 export interface BaseSelectEvents {
     keydown: [KeyboardEvent];

package/components/select/base.js

@@ -37,7 +37,8 @@ var typeDefs = {
   position: Dropdown.typeDefs.position,
   flat: Boolean,
   nowrap: Boolean,
-  draggable: Boolean
+  draggable: Boolean,
+  virtual: Boolean
 };
 var defaults = function defaults() {
   return {

package/components/select/group.vdt.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
-import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce, noop as _$no } from 'intact-vue-next';
+import { createVNode as _$cv, className as _$cn, createElementVNode as _$ce, noop as _$no, createUnknownComponentVNode as _$cc } from 'intact-vue-next';
 import { makeGroupStyles } from './styles';
 import { getRestProps } from '../utils';
+import { VirtualList } from '../virtualList';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
   $blocks || ($blocks = {});
@@ -14,7 +15,8 @@ export default function ($props, $blocks, $__proto__) {
     label = _this$get.label,
     className = _this$get.className;
   var _this$select$get = this.select.get(),
-    card = _this$select$get.card;
+    card = _this$select$get.card,
+    virtual = _this$select$get.virtual;
   var k = this.config.k;
   var classNameObj = (_classNameObj = {}, _classNameObj[k + "-select-group"] = true, _classNameObj[className] = className, _classNameObj[makeGroupStyles(k)] = true, _classNameObj);
   return _$cv('div', _extends({}, getRestProps(this), {
@@ -27,6 +29,9 @@ export default function ($props, $blocks, $__proto__) {
       return _$blocks['label'].call($this, $super, data);
     };
     return block ? block.call($this, callBlock, data) : callBlock();
-  }, __$blocks['label'](_$no)), 0, _$cn(k + "-select-group-label")) : undefined, children]);
+  }, __$blocks['label'](_$no)), 0, _$cn(k + "-select-group-label")) : undefined, _$cc(VirtualList, {
+    'disabled': !virtual,
+    'children': children
+  })]);
 }
 ;

package/components/select/index.spec.js

@@ -240,7 +240,19 @@ describe('Select', function () {
           return wait();
         case 50:
           expect(instance.get('day1')).to.eql('Wednesday');
-        case 51:
+          // should input spaces
+          input1.click();
+          _context6.next = 54;
+          return wait();
+        case 54:
+          dispatchEvent(input1, 'focus');
+          input1.value = 'm ';
+          dispatchEvent(input1, 'input');
+          _context6.next = 59;
+          return wait();
+        case 59:
+          expect(input1.value).to.eql('m ');
+        case 60:
         case "end":
           return _context6.stop();
       }

package/components/select/menu.vdt.js

@@ -10,6 +10,7 @@ import { Button } from '../button';
 import { Icon } from '../icon';
 import { context } from './useSearchable';
 import { Tabs, Tab } from '../tabs';
+import { VirtualList } from '../virtualList';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
   $blocks || ($blocks = {});
@@ -21,7 +22,8 @@ export default function ($props, $blocks, $__proto__) {
   var _this$select$get = this.select.get(),
     card = _this$select$get.card,
     searchable = _this$select$get.searchable,
-    multiple = _this$select$get.multiple;
+    multiple = _this$select$get.multiple,
+    virtual = _this$select$get.virtual;
   var k = this.config.k;
   var classNameObj = (_classNameObj = {}, _classNameObj[k + "-select-menu"] = true, _classNameObj[k + "-card"] = card, _classNameObj[k + "-searchable"] = searchable, _classNameObj[className] = className, _classNameObj[makeMenuStyles(k)] = true, _classNameObj);
   if (card) {
@@ -43,9 +45,16 @@ export default function ($props, $blocks, $__proto__) {
         });
       }, $this)
     }), group];
-  }
-  if (isEmptyChildren(children)) {
+  } else if (isEmptyChildren(children)) {
     children = _$ce(2, 'div', _$('无数据'), 0, _$cn(k + "-select-empty"));
+  } else {
+    children = _$cc(VirtualList, {
+      'style': {
+        maxHeight: '200px'
+      },
+      'disabled': !virtual,
+      'children': children
+    });
   }
   if (searchable) {
     var _this$searchable = this.searchable,

package/components/select/select.vdt.js

@@ -14,7 +14,8 @@ export default function ($props, $blocks, $__proto__) {
     autoDisableArrow = _this$get.autoDisableArrow,
     disabled = _this$get.disabled,
     multiple = _this$get.multiple,
-    value = _this$get.value;
+    value = _this$get.value,
+    virtual = _this$get.virtual;
   var _this$filterable = this.filterable,
     getCreatedVNode = _this$filterable.getCreatedVNode,
     filter = _filterInstanceProperty(_this$filterable);

package/components/select/useFilterable.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
-import _findInstanceProperty from "@babel/runtime-corejs3/core-js/instance/find";
 import _trimInstanceProperty from "@babel/runtime-corejs3/core-js/instance/trim";
+import _findInstanceProperty from "@babel/runtime-corejs3/core-js/instance/find";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js/instance/filter";
 import { useInstance, createVNode as h, directClone } from 'intact-vue-next';
 import { Option } from './option';
@@ -10,18 +10,19 @@ import { getTextByChildren, mapChildren, isComponentVNode } from '../utils';
 export function useFilterable(keywords) {
   var component = useInstance();
   function getCreatedVNode(children) {
+    var _context;
     var _component$get = component.get(),
       creatable = _component$get.creatable,
       filterable = _component$get.filterable;
-    var _keywords = keywords.value;
+    var _keywords = _trimInstanceProperty(_context = keywords.value).call(_context);
     if (creatable && filterable && _keywords) {
       if (!_findInstanceProperty(children).call(children, function (vNode) {
         // TODO: create Option for OptionGroup
         if (vNode.tag === Option) {
-          var _context;
+          var _context2;
           var props = vNode.props;
           if (isNullOrUndefined(props)) return false;
-          if (props.value === _keywords || _trimInstanceProperty(_context = props.label).call(_context) === _keywords) {
+          if (props.value === _keywords || _trimInstanceProperty(_context2 = props.label).call(_context2) === _keywords) {
             return true;
           }
         }
@@ -47,6 +48,7 @@ export function useFilterable(keywords) {
       var _children = [];
       mapChildren(children, function (vNode) {
         if (isComponentVNode(vNode, Option)) {
+          var _context3;
           var props = vNode.props;
           if (isNullOrUndefined(props)) return;
           vNode = directClone(vNode);
@@ -59,7 +61,7 @@ export function useFilterable(keywords) {
           if (isStringOrNumber(value)) {
             vNode.key = value;
           }
-          if (filter(keywords.value, vNode.props)) {
+          if (filter(_trimInstanceProperty(_context3 = keywords.value).call(_context3), vNode.props)) {
             _children.push(vNode);
           }
         } else if (isComponentVNode(vNode, OptionGroup)) {

package/components/select/useInput.js

@@ -1,4 +1,3 @@
-import _trimInstanceProperty from "@babel/runtime-corejs3/core-js/instance/trim";
 import { useInstance, nextTick, createRef } from 'intact-vue-next';
 import { useState } from '../../hooks/useState';
 export function useInput(resetKeywords) {
@@ -6,7 +5,12 @@ export function useInput(resetKeywords) {
   var keywords = useState('');
   var inputRef = createRef();
   function onInput(value) {
-    keywords.set(_trimInstanceProperty(value).call(value));
+    /**
+     * can not trim the keywords, otherwise we can not input spaces
+     * https://github.com/ksc-fe/kpc/issues/1047
+     */
+    // keywords.set(value.trim());
+    keywords.set(value);
     var dropdown = component.dropdownRef.value;
     // the position may be flip, and the select input height may change height too,
     // so we should reset the position

package/components/table/index.spec.js

@@ -777,27 +777,28 @@ describe('Table', function () {
       while (1) switch (_context21.prev = _context21.next) {
         case 0:
           _mount19 = mount(TreeDemo), instance = _mount19[0], element = _mount19[1];
-          table = instance.$lastInput.children; // check all
+          table = instance.$lastInput.children[0].children; // check all
           checkbox = element.querySelector('.k-checkbox');
           checkbox.click();
           _context21.next = 6;
           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 = 12;
+          _context21.next = 13;
           return wait();
-        case 12:
+        case 13:
           expect(element.innerHTML).to.matchSnapshot();
           arrow.click();
-          _context21.next = 16;
+          _context21.next = 17;
           return wait();
-        case 16:
+        case 17:
           expect(element.innerHTML).to.matchSnapshot();
           expect(table.getCheckedData()).to.have.lengthOf(8);
-        case 18:
+        case 19:
         case "end":
           return _context21.stop();
       }

package/components/table/styles.js

@@ -93,7 +93,7 @@ export { table };
 export var makeStyles = cache(function makeStyles(k) {
   return /*#__PURE__*/css("font-size:", table.fontSize, ";color:", table.color, ";position:relative;z-index:0;.", k, "-table-wrapper{border-bottom:", table.border, ";overflow:auto;border-radius:", table.borderRadius, ";}table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;}thead{text-align:", table.thead.textAlign, ";font-size:", table.thead.fontSize, ";font-weight:", table.thead.fontWeight, ";z-index:2;tr{height:", table.thead.height, ";&:not(:last-of-type) th{border-bottom:", table.border, ";}}}tfoot{z-index:2;tr{td{border-top:", table.border, ";border-bottom-color:transparent;}}}th{padding:", table.thead.padding, ";position:relative;background:", table.thead.bgColor, ";line-height:normal;&:before{content:'';height:", table.thead.delimiterHeight, ";position:absolute;background-color:", table.thead.delimiterColor, ";width:1px;left:1px;top:50%;transform:translateY(-50%);}&.", k, "-fixed-right:before{left:-2px;}&:first-of-type:before{display:none;}}.", k, "-table-title{display:inline-flex;align-items:center;max-width:100%;color:", table.thead.color, ";}.", k, "-table-title-text{flex:1;display:inline-flex;line-height:1.4;}tbody{tr{&:hover td{background:", table.tbody.hoverBgcolor, ";}&:last-of-type td{border-bottom-color:transparent;}}}td{padding:", table.tbody.padding, ";border-bottom:", table.border, ";background:", table.bgColor, ";word-wrap:break-word;}.", k, "-fixed-left,.", k, "-fixed-right{position:sticky;z-index:1;&:after{content:'';display:block;transition:box-shadow ", table.transition, ";position:absolute;top:0;bottom:0px;width:10px;pointer-events:none;}}.", k, "-fixed-left:after{right:-11px;}.", k, "-fixed-right:after{left:-11px;}&.", k, "-scroll-left .", k, "-fixed-right:after{box-shadow:", table.fixRightShadow, ";}&.", k, "-scroll-right .", k, "-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}&.", k, "-scroll-middle{.", k, "-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}.", k, "-fixed-right:after{box-shadow:", table.fixRightShadow, ";}}.", k, "-fixed-right+.", k, "-fixed-right:after{display:none;}.", k, "-table-affix-header{position:sticky;top:0;left:0;.", k, "-affix-wrapper{overflow:hidden;}&.", k, "-fixed{position:relative;}}&.", k, "-border,&.", k, "-grid{.", k, "-table-wrapper{border-top:", table.border, ";border-left:", table.border, ";border-right:", table.border, ";}}&.", k, "-grid{td:not(:last-of-type),th:not(:last-of-type){border-right:", table.border, ";}th:before{display:none;}}&.", k, "-stripe{tr:nth-child(even):not(:hover) td{background:", table.stripeBgColor, ";}}.", k, "-table-group{margin-left:", table.group.gap, ";}.", k, "-table-check{.", k, "-checkbox,.", k, "-radio{position:relative;top:-1px;}}.", k, "-column-sortable{cursor:pointer;}.", k, "-column-sort{.", k, "-icon{display:block;height:", _sortInstanceProperty(table).iconHeight, ";line-height:", _sortInstanceProperty(table).iconHeight, ";margin:0 0 1px ", _sortInstanceProperty(table).gap, ";}&.", k, "-desc .", k, "-icon.", k, "-desc,&.", k, "-asc .", k, "-icon.", k, "-asc{color:", _sortInstanceProperty(table).enabledColor, ";}}.", k, "-table-spin.", k, "-overlay{z-index:2;}.", k, "-table-empty{text-align:center;}tr.", k, "-expand{td{padding:0;background:#fdfcff;}}&.", k, "-with-expand{tr:not(.", k, "-expand){td{border-bottom:none;}}}.", k, "-table-expand{border-top:", table.border, ";box-sizing:content-box;}tbody tr.", k, "-selected td{background:", table.selectedBgColor, ";}.", k, "-hidden{display:none;}.", k, "-table-arrow{width:", table.arrow.width, "!important;margin-right:", table.arrow.gap, ";transition:transform ", table.transition, ";position:relative;top:-1px;}tr.", k, "-spreaded{.", k, "-table-arrow{transform:rotate(90deg);}}.", k, "-table-resize{height:100%;width:", table.resizeWidth, ";position:absolute;top:0;left:-1px;cursor:ew-resize;}tr.", k, "-dragging{opacity:", table.draggingOpacity, ";}.", k, "-table-scrollbar{overflow-x:auto;overflow-y:hidden;}.", k, "-table-scrollbar-inner{height:1px;}", _mapInstanceProperty(aligns).call(aligns, function (type) {
     return /*#__PURE__*/css(".", k, "-align-", type, "{text-align:", type, ";}");
-  }), ">.", k, "-pagination{margin:16px 0;}&.", k, "-fix-header{min-height:0;.", k, "-table-wrapper{height:100%;}thead{position:sticky;top:0;}}&.", k, "-fix-footer{min-height:0;.", k, "-table-wrapper{height:100%;}tfoot{position:sticky;bottom:0;}}");
+  }), ">.", k, "-pagination{margin:16px 0;}&.", k, "-fix-header{min-height:0;.", k, "-table-wrapper{height:100%;}thead{position:sticky;top:0;}}&.", k, "-fix-footer{min-height:0;.", k, "-table-wrapper{height:100%;}tfoot{position:sticky;bottom:0;}}.", k, "-table-phantom{position:static;}");
 });
 export var makeGroupMenuStyles = cache(function makeGroupMenuStyles(k) {
   return /*#__PURE__*/css("min-width:", table.group.menuMinWidth, "!important;.", k, "-dropdown-item.", k, "-active{color:", table.group.activeColor, ";}.", k, "-table-group-header{padding:", table.group.headerPadding, ";border-bottom:", table.group.headerBorder, ";}.", k, "-table-group-body{max-height:", table.group.menuMaxHeight, ";overflow:auto;}.", k, "-table-group-footer{text-align:right;border-top:", table.group.headerBorder, ";padding:8px;.", k, "-btn{margin-left:8px;}}");

package/components/table/table.d.ts

@@ -39,6 +39,7 @@ export interface TableProps<T = any, K extends TableRowKey = TableRowKey, C exte
     hideHeader?: boolean;
     pagination?: boolean | PaginationProps;
     fixFooter?: boolean;
+    virtual?: boolean;
     spreadArrowIndex?: number;
     load?: (value: T) => Promise<void> | void;
 }

package/components/table/table.js

@@ -63,6 +63,7 @@ var typeDefs = {
   hideHeader: Boolean,
   pagination: [Boolean, Object],
   fixFooter: Boolean,
+  virtual: Boolean,
   spreadArrowIndex: Number,
   load: Function
 };
@@ -146,9 +147,9 @@ export var Table = /*#__PURE__*/function (_Component) {
       // we can not use scrollIntoView with smooth, because it can only operate one element
       // at the same time
       // elem.scrollIntoView({behavior: 'smooth'});
-      var headerHeight = scrollElement.querySelector('thead').offsetHeight;
+      // const headerHeight = (scrollElement.querySelector('thead') as HTMLElement).offsetHeight;
       var scrollTop = scrollElement.scrollTop;
-      var offsetTop = tr.offsetTop - headerHeight;
+      var offsetTop = tr.offsetTop;
       var top = offsetTop - scrollTop;
       var topOneFrame = top / 60 / (100 / 1000);
       var step = function step() {