@king-design/intact 2.0.17-beta.0 → 2.1.0

package/es/components/input/useAutoRows.js

@@ -0,0 +1,79 @@
+import { useInstance, onMounted } from 'intact';
+import { useState } from '../../hooks/useState';
+import { isObject } from 'intact-shared';
+export function useAutoRows(inputRef) {
+  var instance = useInstance();
+  var height = useState(0);
+  var lineHeight;
+  var paddingTop;
+  var paddingBottom;
+  var isBorderBox;
+
+  function getStyles() {
+    if (instance.get('type') === 'textarea') {
+      var styles = getComputedStyle(inputRef.value);
+      lineHeight = parseInt(styles.lineHeight);
+      paddingTop = parseInt(styles.paddingTop);
+      paddingBottom = parseInt(styles.paddingBottom);
+      isBorderBox = styles.boxSizing === 'border-box';
+    }
+  }
+
+  onMounted(getStyles);
+  instance.watch('type', getStyles, {
+    presented: true
+  });
+  instance.watch('value', adjust, {
+    inited: true,
+    presented: true
+  });
+  instance.watch('placeholder', adjust, {
+    inited: true,
+    presented: true
+  });
+  instance.watch('rows', adjust, {
+    inited: true,
+    presented: true
+  });
+  onMounted(adjust);
+
+  function adjust() {
+    var _instance$get = instance.get(),
+        rows = _instance$get.rows,
+        type = _instance$get.type;
+
+    if (type === 'textarea' && (rows === 'auto' || isObject(rows))) {
+      var textarea = inputRef.value;
+      var originheight = textarea.style.height; // we shuold remove height before get scrollHeight,
+      // otherwise we cannot shrink the height when we remove the text
+
+      textarea.style.height = '';
+      var scrollHeight = textarea.scrollHeight;
+      var lines = (scrollHeight - paddingTop - paddingBottom) / lineHeight;
+      textarea.style.height = originheight;
+      var actualLines = lines;
+
+      if (rows !== 'auto') {
+        var min = rows.min,
+            max = rows.max;
+
+        if (min && lines <= min) {
+          actualLines = min;
+        }
+
+        if (max && lines >= max) {
+          actualLines = max;
+        }
+      }
+
+      height.set(lineHeight * actualLines + (isBorderBox ? paddingTop + paddingBottom + 2
+      /* border */
+      : 0));
+      return;
+    }
+
+    height.set(0);
+  }
+
+  return height;
+}

package/es/components/input/useAutoWidth.js

@@ -1,4 +1,4 @@
-import { useInstance, createRef, onMounted } from 'intact';
+import { useInstance, createRef, onMounted, nextTick } from 'intact';
 import { useState } from '../../hooks/useState';
 export function useAutoWidth() {
   var instance = useInstance();
@@ -16,9 +16,15 @@ export function useAutoWidth() {
 
   function adjustWidth() {
     if (instance.get('autoWidth')) {
-      var _width = fakeRef.value.offsetWidth || 1;
+      nextTick(function () {
+        var fakeElem = fakeRef.value;
 
-      width.set(_width);
+        if (isVisible(fakeElem)) {
+          var _width = fakeElem.offsetWidth || 1;
+
+          width.set(_width);
+        }
+      });
     }
   }
 
@@ -26,4 +32,8 @@ export function useAutoWidth() {
     fakeRef: fakeRef,
     width: width
   };
+}
+
+function isVisible(elem) {
+  return elem && (elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length);
 }

package/es/components/input/useShowPassword.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLInputTypes } from './';
+export declare function useShowPassword(): {
+    isShow: import("../../hooks/useState").State<boolean>;
+    type: import("../../hooks/useState").State<HTMLInputTypes | undefined>;
+    toggleShow: () => void;
+    showIcon: import("../../hooks/useState").State<boolean>;
+};

package/es/components/input/useShowPassword.js

@@ -0,0 +1,31 @@
+import { useInstance } from 'intact';
+import { useState } from '../../hooks/useState';
+import { useReceive } from '../../hooks/useReceive';
+export function useShowPassword() {
+  var instance = useInstance();
+  var isShow = useState(false);
+  var type = useState(undefined);
+  var showIcon = useState(false);
+  instance.on('$receive:type', function (_type) {
+    type.set(_type);
+  });
+  useReceive(['type', 'showPassword'], function () {
+    var _instance$get = instance.get(),
+        showPassword = _instance$get.showPassword,
+        type = _instance$get.type;
+
+    showIcon.set(type === 'password' && !!showPassword);
+  });
+
+  function toggleShow() {
+    isShow.set(!isShow.value);
+    type.set(isShow.value ? 'text' : 'password');
+  }
+
+  return {
+    isShow: isShow,
+    type: type,
+    toggleShow: toggleShow,
+    showIcon: showIcon
+  };
+}

package/es/components/pagination/index.js

@@ -105,9 +105,7 @@ export var Pagination = /*#__PURE__*/function (_Component) {
 
     if (page > totalPages) {
       page = totalPages;
-    }
-
-    if (page < 1) {
+    } else if (page < 1) {
       page = 1;
     }
 

package/es/components/pagination/index.spec.js

@@ -4,11 +4,9 @@ import BasicDemo from '~/components/pagination/demos/basic';
 import GotoDemo from '~/components/pagination/demos/goto';
 import CurrentDemo from '~/components/pagination/demos/current';
 import DisableDemo from '~/components/pagination/demos/disable';
-import { mount, unmount, dispatchEvent, wait } from '../../test/utils';
+import { mount, dispatchEvent, wait } from '../../test/utils';
 describe('Pagination', function () {
-  afterEach(function () {
-    return unmount();
-  });
+  // afterEach(() => unmount());
   it('basic test', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var _mount, instance, element, pagination, btns, prev, next;
 

package/es/components/portal.d.ts

@@ -11,8 +11,12 @@ export declare class Portal<T extends PortalProps = PortalProps> extends Compone
     mountedQueue?: Function[];
     mountedDone?: boolean;
     $isPortal: boolean;
-    $render(lastVNode: VNodeComponentClass<this> | null, nextVNode: VNodeComponentClass<this>, parentDom: Element, anchor: IntactDom | null, mountedQueue: Function[]): void;
-    $update(lastVNode: VNodeComponentClass<this>, nextVNode: VNodeComponentClass<this>, parentDom: Element, anchor: IntactDom | null, mountedQueue: Function[], force: boolean): void;
+    $render(lastVNode: VNodeComponentClass<this> | null, nextVNode: VNodeComponentClass<this>, parentDom: Element, anchor: IntactDom | null, mountedQueue: Function[] & {
+        priority?: Function[];
+    }): void;
+    $update(lastVNode: VNodeComponentClass<this>, nextVNode: VNodeComponentClass<this>, parentDom: Element, anchor: IntactDom | null, mountedQueue: Function[] & {
+        priority?: Function[];
+    }, force: boolean): void;
     $unmount(vNode: VNodeComponentClass<this>, nextVNode: VNodeComponentClass<this> | null): void;
     private initContainer;
 }

package/es/components/portal.js

@@ -38,7 +38,8 @@ export var Portal = /*#__PURE__*/function (_Component) {
 
   var _proto = Portal.prototype;
 
-  _proto.$render = function $render(lastVNode, nextVNode, parentDom, anchor, mountedQueue) {
+  _proto.$render = function $render(lastVNode, nextVNode, parentDom, anchor, mountedQueue // in React, it has priority property to add some prior functions
+  ) {
     var _this2 = this;
 
     /**
@@ -47,7 +48,7 @@ export var Portal = /*#__PURE__*/function (_Component) {
      */
     var nextProps = nextVNode.props;
     var fakeContainer = document.createDocumentFragment();
-    mountedQueue.push(function () {
+    (mountedQueue.priority || mountedQueue).push(function () {
       var parentDom = _this2.$lastInput.dom.parentElement;
 
       _this2.initContainer(nextProps.container, parentDom, anchor);
@@ -87,7 +88,7 @@ export var Portal = /*#__PURE__*/function (_Component) {
 
     if (!this.container) {
       // in react, sometimes $update will be called before mountedQueue in $render
-      mountedQueue.push(update);
+      (mountedQueue.priority || mountedQueue).push(update);
     } else {
       update();
     }

package/es/components/position.js

@@ -1,6 +1,7 @@
 import _Object$assign from "@babel/runtime-corejs3/core-js/object/assign";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import _atInstanceProperty from "@babel/runtime-corejs3/core-js/instance/at";
+import { isArray } from 'intact-shared';
 var max = Math.max;
 var abs = Math.abs;
 var rHorizontal = /left|center|right/;
@@ -191,7 +192,7 @@ export default function position(elem, options) {
   var basePosition = _Object$assign({}, targetOffset); // don't detect collison if the target is not in viewport
 
 
-  var collision = isInViewport(targetRect) ? (options.collision || 'flip').split(' ') : ['none', 'none'];
+  var collision = isInViewport(targetRect) ? !isArray(options.collision) ? (options.collision || 'flip').split(' ') : options.collision : ['none', 'none'];
   var offsets = {};
   var within = getWithinInfo(options.within);
   var scrollInfo = getScrollInfo(within);

package/es/components/select/base.d.ts

@@ -1,7 +1,7 @@
 import { Component, Children, TypeDefs, RefObject } from 'intact';
 import { Sizes } from '../../styles/utils';
 import type { Input } from '../input';
-import { Dropdown } from '../dropdown';
+import { Dropdown, DropdownProps } from '../dropdown';
 import { State } from '../../hooks/useState';
 import { Container } from '../portal';
 import type { Events } from '../types';
@@ -21,6 +21,7 @@ export interface BaseSelectProps<V, Multipe extends boolean = boolean, Attach =
     container?: Container;
     width?: string | number;
     show?: boolean;
+    position?: DropdownProps['position'];
 }
 export interface BaseSelectEvents {
     keydown: [KeyboardEvent];

package/es/components/select/base.js

@@ -9,6 +9,7 @@ import { sizes } from '../../styles/utils';
 import { SELECT } from './constants';
 import { useShowHideEvents } from '../../hooks/useShowHideEvents';
 import { bind } from '../utils';
+import { Dropdown } from '../dropdown';
 import { useInput } from './useInput';
 import { useFocusout } from './useFocusout';
 import { isNullOrUndefined } from 'intact-shared';
@@ -27,7 +28,8 @@ var typeDefs = {
   placeholder: [String, Number],
   container: [Function, String],
   width: [String, Number],
-  show: Boolean
+  show: Boolean,
+  position: Dropdown.typeDefs.position
 };
 
 var defaults = function defaults() {

package/es/components/select/base.vdt.js

@@ -40,7 +40,8 @@ export default function ($props, $blocks, $__proto__) {
       inline = _this$get.inline,
       style = _this$get.style,
       width = _this$get.width,
-      show = _this$get.show;
+      show = _this$get.show,
+      position = _this$get.position;
 
   var classNameObj = (_classNameObj = {
     'k-select': true,
@@ -67,6 +68,7 @@ export default function ($props, $blocks, $__proto__) {
           'ref': _this.dropdownRef,
           'disabled': disabled,
           'container': container,
+          'position': position,
           'children': [_$cv('div', _extends({}, getRestProps(_this), {
             'className': _$cn(classNameObj),
             'tabindex': disabled ? '-1' : '0',

package/es/components/table/cell.js

@@ -16,12 +16,7 @@ export var TableCell = /*#__PURE__*/function (_Component) {
     var isSame = true;
 
     for (var key in lastProps) {
-      if (lastProps[key] !== nextProps[key]) {
-        isSame = false;
-        break;
-      }
-
-      if (key === 'props' && nextProps.props.$blocks) {
+      if (lastProps[key] !== nextProps[key] || key === 'props' && nextProps.props.$blocks) {
         isSame = false;
         break;
       }

package/es/components/table/index.spec.js

@@ -23,13 +23,14 @@ import { Table, TableColumn } from './';
 import DraggableTable from '~/components/table/demos/draggable';
 import MergeCellDemo from '~/components/table/demos/mergeCell';
 import { AllCheckedStatus } from './useChecked';
+import PaginationDemo from '~/components/table/demos/pagination';
 describe('Table', function () {
   afterEach(function () {
     unmount();
     localStorage.removeItem('resizableTable');
   });
   it('check & uncheck', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-    var _mount, instance, element, table, checked, spy, _element$querySelecto, tr1, tr2, all;
+    var _mount, instance, element, table, checked, spy, spyCheckRow, spyUncheckRow, spyCheckAll, spyUncheckAll, _element$querySelecto, tr1, tr2, all;
 
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) {
@@ -42,54 +43,76 @@ describe('Table', function () {
             spy = sinon.spy(function (v) {
               return console.log(v);
             });
-            table.on('$change:checkedKeys', spy); // click row
+            table.on('$change:checkedKeys', spy);
+            spyCheckRow = sinon.spy(function (data, index, key) {
+              return console.log('checkRow', data, index, key);
+            });
+            table.on('checkRow', spyCheckRow);
+            spyUncheckRow = sinon.spy(function (data, index, key) {
+              return console.log('uncheckRow', data, index, key);
+            });
+            table.on('uncheckRow', spyUncheckRow);
+            spyCheckAll = sinon.spy(function () {
+              return console.log('checkAll');
+            });
+            table.on('checkAll', spyCheckAll);
+            spyUncheckAll = sinon.spy(function () {
+              return console.log('uncheckAll');
+            });
+            table.on('uncheckAll', spyUncheckAll); // click row
 
             _element$querySelecto = element.querySelectorAll('tbody tr'), tr1 = _element$querySelecto[0], tr2 = _element$querySelecto[1];
             tr1.click();
-            _context.next = 9;
+            _context.next = 17;
             return wait();
 
-          case 9:
+          case 17:
             expect(table.get('checkedKeys')).to.eql([0]);
+            expect(spyCheckRow.callCount).to.eql(1);
             tr2.click();
-            _context.next = 13;
+            _context.next = 22;
             return wait();
 
-          case 13:
+          case 22:
             expect(table.get('checkedKeys')).to.eql([0, 1]);
             expect(checked.getAllCheckedStatus()).eql(AllCheckedStatus.All);
+            expect(spyCheckRow.callCount).to.eql(2);
+            expect(spyCheckAll.callCount).to.eq(0);
             tr1.click();
-            _context.next = 18;
+            _context.next = 29;
             return wait();
 
-          case 18:
+          case 29:
             expect(table.get('checkedKeys')).to.eql([1]);
             expect(checked.getAllCheckedStatus()).eql(AllCheckedStatus.Indeterminate);
+            expect(spyUncheckRow.callCount).to.eql(1);
             all = element.querySelector('.k-checkbox');
             all.click();
-            _context.next = 24;
+            _context.next = 36;
             return wait();
 
-          case 24:
+          case 36:
             expect(checked.getAllCheckedStatus()).eql(AllCheckedStatus.All);
+            expect(spyCheckAll.callCount).to.eql(1);
             all.click();
-            _context.next = 28;
+            _context.next = 41;
             return wait();
 
-          case 28:
+          case 41:
             expect(checked.getAllCheckedStatus()).eql(AllCheckedStatus.None);
             expect(table.get('checkedKeys')).to.eql([]);
+            expect(spyUncheckAll.callCount).to.eql(1);
             expect(spy.callCount).to.eql(5); // clear data of table should only trigger $change:checked event once, #407
 
             all.click();
-            table.set('data', []);
-            _context.next = 35;
+            instance.set('data', []);
+            _context.next = 49;
             return wait();
 
-          case 35:
+          case 49:
             expect(spy.callCount).to.eql(7);
 
-          case 36:
+          case 50:
           case "end":
             return _context.stop();
         }
@@ -342,7 +365,7 @@ describe('Table', function () {
     }, _callee6);
   })));
   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;
+    var _mount7, instance, element, _instance$refs4, __test1, __test2, _element$querySelecto8, table1, table2, icon, dropdown, item, icon2, dropdown2, _dropdown2$querySelec, item1, item2, newDropdown;
 
     return _regeneratorRuntime.wrap(function _callee7$(_context7) {
       while (1) {
@@ -395,9 +418,21 @@ describe('Table', function () {
             expect(instance.get('multipleGroup')).to.eql({
               status: ['active', 'stopped']
             });
-            expect(table2.innerHTML).to.matchSnapshot();
+            expect(table2.innerHTML).to.matchSnapshot(); // update group
 
-          case 32:
+            instance.set('statusGroup', [{
+              label: 'label',
+              value: 'value'
+            }]);
+            dispatchEvent(icon, 'click');
+            _context7.next = 36;
+            return wait(500);
+
+          case 36:
+            newDropdown = getElement('.k-table-group-dropdown');
+            expect(newDropdown.innerHTML).to.matchSnapshot();
+
+          case 38:
           case "end":
             return _context7.stop();
         }
@@ -1064,4 +1099,80 @@ describe('Table', function () {
       }
     }, _callee22);
   })));
+  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) {
+          case 0:
+            _mount25 = mount(PaginationDemo), instance = _mount25[0], element = _mount25[1];
+            table = instance.refs.table;
+            pagination = table.pagination.paginationRef;
+            spy = sinon.spy();
+            table.on('changePage', spy); // check all
+
+            table.checkAll();
+            expect(table.getCheckedData()).to.have.length(10); // next page
+
+            table.set('pagination', {
+              value: 2
+            });
+            table.trigger('$receive:pagination');
+            _context26.next = 11;
+            return wait();
+
+          case 11:
+            expect(table.getCheckedData()).to.have.length(0); // check all again
+
+            table.checkAll();
+            expect(table.getCheckedData()).to.have.length(10); // change limit
+
+            table.set('pagination', {
+              value: 1,
+              limit: 20
+            });
+            table.trigger('$receive:pagination');
+            _context26.next = 18;
+            return wait();
+
+          case 18:
+            expect(table.getCheckedData()).to.have.length(10); // check all again
+
+            table.checkAll();
+            expect(table.getCheckedData()).to.have.length(20); // change limit from pagination
+
+            pagination.value.set('limit', 10);
+            _context26.next = 24;
+            return wait();
+
+          case 24:
+            expect(table.getCheckedData()).to.have.length(10); // FIXME: Pagination component should no trigger change event multiple times
+            // when we set value and limit at the same time
+
+            expect(spy.callCount).to.eql(4);
+            expect(spy.lastCall.lastArg).to.eql({
+              value: 1,
+              limit: 10
+            }); // change page from pagination
+
+            _context26.next = 29;
+            return wait();
+
+          case 29:
+            pagination.value.changePage(2);
+            expect(table.getCheckedData()).to.have.length(0);
+            expect(spy.callCount).to.eql(5);
+            expect(spy.lastCall.lastArg).to.eql({
+              value: 2,
+              limit: 10
+            });
+
+          case 33:
+          case "end":
+            return _context26.stop();
+        }
+      }
+    }, _callee23);
+  })));
 });

package/es/components/table/row.d.ts

@@ -14,7 +14,7 @@ export interface TableRowProps {
     index: number;
     disabled: boolean;
     allDisabled: boolean;
-    onChangeChecked: (index: number, checked: boolean) => void;
+    onChangeChecked: (index: number, checked: boolean, key: TableRowKey) => void;
     grid: TableGrid;
     selected: boolean;
     spreaded: boolean;

package/es/components/table/row.js

@@ -56,9 +56,10 @@ export var TableRow = /*#__PURE__*/function (_Component) {
   _proto.onChangeChecked = function onChangeChecked(v) {
     var _this$get2 = this.get(),
         index = _this$get2.index,
+        key = _this$get2.key,
         onChangeChecked = _this$get2.onChangeChecked;
 
-    onChangeChecked(index, v);
+    onChangeChecked(index, v, key);
   };
 
   _proto.onClickArrow = function onClickArrow(e) {

package/es/components/table/styles.js

@@ -92,7 +92,7 @@ setDefault(function () {
 export function makeStyles() {
   return /*#__PURE__*/css("font-size:", table.fontSize, ";color:", table.color, ";border-top:", table.border, ";position:relative;z-index:0;.k-table-wrapper{border-bottom:", table.border, ";overflow:auto;}table{width:100%;border-spacing:0;table-layout:fixed;td,th{transition:all ", table.transition, ";}}thead{text-align:", table.thead.textAlign, ";font-size:", table.thead.fontSize, ";font-weight:", table.thead.fontWeight, ";position:sticky;top:0;z-index:2;tr{height:", table.thead.height, ";}}th{padding:", table.thead.padding, ";position:relative;background:", table.thead.bgColor, ";border-bottom:", table.border, ";&:before{content:'';height:", table.thead.delimiterHeight, ";position:absolute;background-color:", table.thead.delimiterColor, ";width:1px;left:1px;top:50%;transform:translateY(-50%);}&:first-of-type:before{display:none;}}.k-table-title{display:inline-flex;align-items:center;max-width:100%;}.k-table-title-text{flex:1;}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-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{width:", table.group.width, "!important;height:", table.group.width, "!important;margin-left:", table.group.gap, ";position:relative;color:", table.group.color, ";&:hover{color:", theme.color.primary, ";}.k-icon{transition:transform ", table.transition, ";}&.k-dropdown-open .k-icon{transform:rotate(180deg);}}.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-left:", _sortInstanceProperty(table).gap, ";color:", _sortInstanceProperty(table).color, ";}&.k-asc .k-icon.k-desc,&.k-desc .k-icon.k-asc{color:", _sortInstanceProperty(table).disabledColor, ";}}.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-table-arrow{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;}");
 }
 export function makeGroupMenuStyles() {
   return /*#__PURE__*/css("max-height:", table.group.menuMaxHeight, ";overflow:auto;.k-dropdown-item.k-active{color:", table.group.activeColor, ";}.k-table-group-header{padding:", table.group.headerPadding, ";border-bottom:", table.group.headerBorder, ";}");

package/es/components/table/table.d.ts

@@ -2,6 +2,7 @@ import { Component, TypeDefs } from 'intact';
 import { TableMerge } from './useMerge';
 import { TooltipProps } from '../tooltip/tooltip';
 import type { Events } from '../types';
+import type { PaginationProps, PaginationChangeData } from '../pagination';
 export interface TableProps<T = any, K extends TableRowKey = TableRowKey, C extends CheckType = CheckType, S extends string = string, G extends TableGroupValue = TableGroupValue> {
     data?: T[];
     fixHeader?: boolean | string | number;
@@ -35,6 +36,8 @@ export interface TableProps<T = any, K extends TableRowKey = TableRowKey, C exte
     widthStoreKey?: string;
     draggable?: boolean;
     animation?: boolean | [boolean, boolean];
+    hideHeader?: boolean;
+    pagination?: boolean | PaginationProps;
 }
 export interface TableEvents<T = any, K extends TableRowKey = number> {
     clickRow: [T, number, K];
@@ -47,6 +50,11 @@ export interface TableEvents<T = any, K extends TableRowKey = number> {
         from: number;
         to: number;
     }];
+    checkRow: [T, number, K];
+    uncheckRow: [T, number, K];
+    checkAll: [];
+    uncheckAll: [];
+    changePage: [PaginationChangeData];
 }
 export interface TableBlocks<T = unknown> {
     empty: null;
@@ -66,6 +74,13 @@ export declare class Table<T = any, RowKey extends TableRowKey = TableRowKey, Ch
     static typeDefs: Required<TypeDefs<TableProps<unknown, TableRowKey, CheckType, string, TableGroupValue<string | number | symbol>>>>;
     static defaults: () => Partial<TableProps<any, TableRowKey, CheckType, string, TableGroupValue<string | number | symbol>>>;
     static events: Events<TableEvents<any, number>>;
+    pagination: {
+        data: import("../../hooks/useState").State<any[] | undefined>;
+        value: import("../../hooks/useState").State<number>;
+        limit: import("../../hooks/useState").State<number>;
+        onChange: (data: PaginationChangeData) => void;
+        paginationRef: import("intact").RefObject<import("../pagination").Pagination>;
+    };
     private tree;
     private columns;
     private scroll;