@king-design/intact 3.0.0 → 3.1.0-beta.0

package/es/components/table/column.vdt.js

@@ -1,5 +1,5 @@
 import _sortInstanceProperty from "@babel/runtime-corejs3/core-js/instance/sort";
-import { createUnknownComponentVNode as _$cc, createElementVNode as _$ce, noop as _$no, className as _$cn, extend as _$ex, EMPTY_OBJ as _$em, map as _$ma } from 'intact';
+import { createUnknownComponentVNode as _$cc, createElementVNode as _$ce, className as _$cn, noop as _$no, extend as _$ex, EMPTY_OBJ as _$em, map as _$ma } from 'intact';
 import { getClassAndStyleForFixed } from './useFixedColumns';
 import { Dropdown, DropdownMenu, DropdownItem } from '../dropdown';
 import { Button } from '../button';
@@ -16,17 +16,6 @@ import { context as FixedColumnsContext } from './useFixedColumns';
 import { stopPropagation } from '../utils';
 import { Input } from '../input';
 import { _$ } from '../../i18n';
-var _$tmp0 = {
-  'className': 'k-icon-search'
-};
-var _$tmp1 = {
-  'className': 'k-icon-up k-asc',
-  'size': 'mini'
-};
-var _$tmp2 = {
-  'className': 'k-icon-down k-desc',
-  'size': 'mini'
-};
 export default function ($props, $blocks, $__proto__) {
   var _this = this;
 
@@ -57,6 +46,7 @@ export default function ($props, $blocks, $__proto__) {
       dropdownRef = _this$group.dropdownRef,
       localGroupValue = _this$group.localGroupValue,
       isEmptyValue = _this$group.isEmptyValue;
+  var k = this.config.k;
   return _$cc(TableContext.Consumer, {
     'children': function children(checkType) {
       return _$cc(GroupContext.Consumer, {
@@ -74,19 +64,17 @@ export default function ($props, $blocks, $__proto__) {
                       onStart = _ref3.onStart;
                   return _$cc(FixedColumnsContext.Consumer, {
                     'children': function children(offsetMap) {
-                      var _classNameObj, _$cn2, _$cn3;
+                      var _classNameObj, _$cn2, _$cn4;
 
                       var _getClassAndStyleForF = getClassAndStyleForFixed(_this.get(), offsetMap[key], checkType),
                           className = _getClassAndStyleForF.className,
                           style = _getClassAndStyleForF.style;
 
-                      var classNameObj = (_classNameObj = {
-                        'k-column-sortable': sortable
-                      }, _classNameObj[className] = className, _classNameObj);
+                      var classNameObj = (_classNameObj = {}, _classNameObj[k + "-column-sortable"] = sortable, _classNameObj[className] = className, _classNameObj);
                       var groupValue = currentGroup && currentGroup[key];
                       var type = sort && sort.key === key && sort.type;
                       var checked;
-                      return _$ce(2, 'th', [resizable && _this.$vNode.props.prevVNode ? _$ce(2, 'div', null, 1, 'k-table-resize', {
+                      return _$ce(2, 'th', [resizable && _this.$vNode.props.prevVNode ? _$ce(2, 'div', null, 1, _$cn(k + "-table-resize"), {
                         'ev-mousedown': function evMousedown(e) {
                           e._vNode = _this.$vNode;
                           onStart(e);
@@ -101,7 +89,7 @@ export default function ($props, $blocks, $__proto__) {
                         };
 
                         return block ? block.call($this, callBlock, data) : callBlock();
-                      }, __$blocks['title'](_$no)), 0, 'k-table-title-text c-ellipsis'), group ? _$cc(Dropdown, {
+                      }, __$blocks['title'](_$no)), 0, _$cn(k + "-table-title-text c-ellipsis")), group ? _$cc(Dropdown, {
                         'position': {
                           my: 'center top',
                           at: 'center bottom+5',
@@ -114,16 +102,14 @@ export default function ($props, $blocks, $__proto__) {
                         },
                         'ref': dropdownRef,
                         'children': [_$cc(Icon, {
-                          'className': 'k-icon-down-squared k-table-group',
+                          'className': _$cn(k + "-icon-down-squared " + k + "-table-group"),
                           'ev-click': function evClick(e) {
                             return e._ignoreSortable = true;
                           },
                           'hoverable': true,
                           'color': isEmptyValue(groupValue) ? null : 'primary'
                         }), _$cc(DropdownMenu, {
-                          'className': _$cn((_$cn2 = {
-                            "k-table-group-dropdown": true
-                          }, _$cn2[makeGroupMenuStyles()] = true, _$cn2)),
+                          'className': _$cn((_$cn2 = {}, _$cn2[k + "-table-group-dropdown"] = true, _$cn2[makeGroupMenuStyles(k)] = true, _$cn2)),
                           'children': [_$ce(2, 'div', _$cc(Input, {
                             'size': 'small',
                             'fluid': true,
@@ -136,7 +122,9 @@ export default function ($props, $blocks, $__proto__) {
                                   __$blocks = _$ex({}, $blocks);
 
                               return (_$blocks['suffix'] = function ($super) {
-                                return _$cc(Icon, _$tmp0);
+                                return _$cc(Icon, {
+                                  'className': _$cn(k + "-icon-search")
+                                });
                               }, __$blocks['suffix'] = function ($super, data) {
                                 var block = $blocks['suffix'];
 
@@ -147,21 +135,21 @@ export default function ($props, $blocks, $__proto__) {
                                 return block ? block.call($this, callBlock, data) : callBlock();
                               }), __$blocks;
                             }.call($this, _$em)
-                          }), 2, 'k-table-group-header'), _$ce(2, 'div', _$ma(filteredGroup.value, function ($value, $key) {
+                          }), 2, _$cn(k + "-table-group-header")), _$ce(2, 'div', _$ma(filteredGroup.value, function ($value, $key) {
+                            var _$cn3;
+
                             return _$cc(DropdownItem, {
                               'ev-select': function evSelect() {
                                 return onSelect($value.value, onChange);
                               },
                               'hideOnSelect': !multiple,
-                              'className': _$cn({
-                                'k-active': checked = isChecked($value.value)
-                              }),
+                              'className': _$cn((_$cn3 = {}, _$cn3[k + "-active"] = checked = isChecked($value.value), _$cn3)),
                               'children': multiple ? _$cc(Checkbox, {
                                 'value': checked,
                                 'children': $value.label
                               }) : _$ce(2, 'span', $value.label, 0)
                             });
-                          }, $this), 4, 'k-table-group-body'), multiple ? _$ce(2, 'div', [_$cc(Button, {
+                          }, $this), 4, _$cn(k + "-table-group-body")), multiple ? _$ce(2, 'div', [_$cc(Button, {
                             'size': 'small',
                             'disabled': isEmptyValue(localGroupValue.value),
                             'type': 'secondary',
@@ -176,11 +164,15 @@ export default function ($props, $blocks, $__proto__) {
                               return confirm(onChange);
                             },
                             'children': '确定'
-                          })], 4, 'k-table-group-footer') : undefined]
+                          })], 4, _$cn(k + "-table-group-footer")) : undefined]
                         })]
-                      }, 'dropdown', dropdownRef) : undefined, sortable ? _$ce(2, 'div', [_$cc(Icon, _$tmp1), _$cc(Icon, _$tmp2)], 4, _$cn((_$cn3 = {
-                        'k-column-sort': true
-                      }, _$cn3["k-" + type] = type, _$cn3))) : undefined], 0, 'k-table-title')], 0, _$cn(classNameObj), {
+                      }, 'dropdown', dropdownRef) : undefined, sortable ? _$ce(2, 'div', [_$cc(Icon, {
+                        'className': _$cn(k + "-icon-up " + k + "-asc"),
+                        'size': 'mini'
+                      }), _$cc(Icon, {
+                        'className': _$cn(k + "-icon-down " + k + "-desc"),
+                        'size': 'mini'
+                      })], 4, _$cn((_$cn4 = {}, _$cn4[k + "-column-sort"] = true, _$cn4[k + "-" + type] = type, _$cn4))) : undefined], 0, _$cn(k + "-table-title"))], 0, _$cn(classNameObj), {
                         'style': style,
                         'title': isStringOrNumber(title) ? title : null,
                         'ev-click': sortable ? linkEvent(key, onChangeSort) : null,

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

@@ -1141,7 +1141,7 @@ describe('Table', function () {
             table = instance.refs.table;
             pagination = table.pagination.paginationRef;
             spy = sinon.spy();
-            table.on('changePage', spy); // check all
+            table.on('page', spy); // check all
 
             table.checkAll();
             expect(table.getCheckedData()).to.have.length(10); // next page

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

@@ -33,6 +33,7 @@ export interface TableRowProps {
 declare type DragCallback = (e: MouseEvent, tableRow: TableRow) => void;
 export declare class TableRow extends Component<TableRowProps> {
     static template: string | import("intact").Template<any>;
+    private config;
     $update(lastVNode: VNodeComponentClass<this>, nextVNode: VNodeComponentClass<this>, parentDom: Element, anchor: IntactDom | null, mountedQueue: Function[], force: boolean): void;
     onClick(e: MouseEvent): void;
     onChangeChecked(v: boolean): void;

package/es/components/table/row.js

@@ -1,13 +1,26 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import { __decorate } from "tslib";
 import { Component } from 'intact';
 import template from './row.vdt';
 import { bind } from '../utils';
+import { isEqualObject } from '../utils';
+import { useConfigContext } from '../config';
 export var TableRow = /*#__PURE__*/function (_Component) {
   _inheritsLoose(TableRow, _Component);
 
   function TableRow() {
-    return _Component.apply(this, arguments) || this;
+    var _context;
+
+    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(_context = [this]).call(_context, args)) || this;
+    _this.config = useConfigContext();
+    return _this;
   }
 
   var _proto = TableRow.prototype;
@@ -21,8 +34,14 @@ export var TableRow = /*#__PURE__*/function (_Component) {
     for (key in lastProps) {
       // ignore index
       if (key === 'index') continue;
+      var lastValue = lastProps[key];
+      var nextValue = nextProps[key]; // deeply compare for offsetMap
+
+      if (key === 'offsetMap' && isEqualObject(lastValue, nextValue)) {
+        continue;
+      }
 
-      if (lastProps[key] !== nextProps[key]) {
+      if (lastValue !== nextValue) {
         isSame = false;
         break;
       }

package/es/components/table/row.vdt.js

@@ -37,15 +37,8 @@ export default function ($props, $blocks, $__proto__) {
       draggingKey = _this$get.draggingKey,
       animation = _this$get.animation;
 
-  var classNameObj = (_classNameObj = {
-    'k-disabled': disabled,
-    'k-checked': checked,
-    'k-selected': selected,
-
-    /* 'k-hidden': hidden, */
-    'k-spreaded': spreaded,
-    'k-dragging': draggingKey === key
-  }, _classNameObj[className] = className, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-disabled"] = disabled, _classNameObj[k + "-checked"] = checked, _classNameObj[k + "-selected"] = selected, _classNameObj[k + "-spreaded"] = spreaded, _classNameObj[k + "-dragging"] = draggingKey === key, _classNameObj[className] = className, _classNameObj);
 
   var getGridItem = function getGridItem(columnIndex) {
     var _grid$rowIndex;
@@ -68,7 +61,7 @@ export default function ($props, $blocks, $__proto__) {
       'key': '$checktype'
     }, getClassAndStyleForFixed({
       fixed: hasFixedLeft ? 'left' : false,
-      className: 'k-table-check'
+      className: [k + "-table-check"]
     }, 0), spans), children));
   };
 

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

@@ -1,3 +1,3 @@
 import '../../styles/global';
-export declare function makeStyles(): string;
-export declare function makeGroupMenuStyles(): string;
+export declare function makeStyles(k: string): string;
+export declare function makeGroupMenuStyles(k: string): string;

package/es/components/table/styles.js

@@ -101,11 +101,11 @@ setDefault(function () {
     table: defaults
   }).table;
 });
-export function makeStyles() {
-  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-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, ";&:not(:last-of-type) th{border-bottom:", table.border, ";}}}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%);}&: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-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 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-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, ";&:not(:last-of-type) th{border-bottom:", table.border, ";}}}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%);}&: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:bre.", k, "-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, "-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, ";min-width:", table.group.menuMinWidth, "!important;overflow:auto;.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-footer{text-align:right;border-top:", table.group.headerBorder, ";padding:8px;.k-btn{margin-left:8px;}}");
+export 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/es/components/table/table.d.ts

@@ -54,7 +54,7 @@ export interface TableEvents<T = any, K extends TableRowKey = number> {
     uncheckRow: [T, number, K];
     checkAll: [];
     uncheckAll: [];
-    changePage: [PaginationChangeData];
+    page: [PaginationChangeData];
 }
 export interface TableBlocks<T = unknown> {
     empty: null;
@@ -97,6 +97,7 @@ export declare class Table<T = any, RowKey extends TableRowKey = TableRowKey, Ch
     private resetRowStatus;
     private draggable;
     private stickyScrollbar;
+    private config;
     checkAll(): void;
     uncheckAll(): void;
     getCheckedData(): any[];

package/es/components/table/table.js

@@ -26,6 +26,7 @@ import { useStickyScrollbar } from './useStickyScrollbar';
 import { useWidth } from './useWidth';
 import { useScroll } from './useScroll';
 import { usePagination } from './usePagination';
+import { useConfigContext } from '../config';
 var typeDefs = {
   data: Array,
   fixHeader: [Boolean, String, Number],
@@ -87,7 +88,7 @@ var events = {
   uncheckRow: true,
   checkAll: true,
   uncheckAll: true,
-  changePage: true
+  page: true
 };
 export var Table = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Table, _Component);
@@ -119,6 +120,7 @@ export var Table = /*#__PURE__*/function (_Component) {
     _this.resetRowStatus = useRestRowStatus(_this.disableRow.getAllKeys);
     _this.draggable = useDraggable(_this.pagination.data);
     _this.stickyScrollbar = useStickyScrollbar(_this.stickyHeader.elementRef, _this.scroll, _this.width.tableRef, _this.fixedColumns.setScrollPosition);
+    _this.config = useConfigContext();
     return _this;
   }
 

package/es/components/table/table.vdt.js

@@ -23,11 +23,6 @@ import { Pagination } from '../pagination';
 var _$tmp0 = {
   'width': '40'
 };
-var _$tmp1 = {
-  'overlay': true,
-  'size': 'small',
-  'className': 'k-table-spin'
-};
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj,
       _this = this;
@@ -82,10 +77,8 @@ export default function ($props, $blocks, $__proto__) {
       excludeStickHeader = _this$stickyHeader.excludeStickHeader,
       elementRef = _this$stickyHeader.elementRef,
       headRef = _this$stickyHeader.headRef;
-  var classNameObj = (_classNameObj = {
-    'k-table': true,
-    'k-fix-header': fixHeader
-  }, _classNameObj["k-scroll-" + scrollPosition.value] = scrollPosition.value, _classNameObj['k-fix-columns'] = hasFixed.value, _classNameObj["k-" + type] = type && type !== 'default', _classNameObj['k-stripe'] = stripe, _classNameObj['k-with-expand'] = $blocks.expand, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-table"] = true, _classNameObj[k + "-fix-header"] = fixHeader, _classNameObj[k + "-scroll-" + scrollPosition.value] = scrollPosition.value, _classNameObj[k + "-fix-columns"] = hasFixed.value, _classNameObj[k + "-" + type] = type && type !== 'default', _classNameObj[k + "-stripe"] = stripe, _classNameObj[k + "-with-expand"] = $blocks.expand, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
   var style = isStringOrNumber(fixHeader) ? {
     maxHeight: fixHeader + "px"
   } : null;
@@ -186,7 +179,7 @@ export default function ($props, $blocks, $__proto__) {
     };
 
     return block ? block.call($this, callBlock, data) : callBlock();
-  }, __$blocks['empty'](_$no)), 0, 'k-table-empty', {
+  }, __$blocks['empty'](_$no)), 0, _$cn(k + "-table-empty"), {
     'colspan': colCount
   }), 2, null, null, 'table-empty') : function () {
     var rows = [];
@@ -269,6 +262,8 @@ export default function ($props, $blocks, $__proto__) {
       rows.push(row);
 
       if ($blocks.expand) {
+        var _$cn3;
+
         var expanded = isExpanded(key);
         rows.push(_$ce(2, 'tr', _$ce(2, 'td', _$cc(Transition, _extends({}, expandAnimationCallbacks, {
           'children': expanded ? _$ce(2, 'div', (_$blocks['expand'] = function ($super) {
@@ -281,13 +276,10 @@ export default function ($props, $blocks, $__proto__) {
             };
 
             return block ? block.call($this, callBlock, data) : callBlock();
-          }, __$blocks['expand'](_$no, [value, index])), 0, 'k-table-expand') : undefined
+          }, __$blocks['expand'](_$no, [value, index])), 0, _$cn(k + "-table-expand")) : undefined
         })), 2, null, {
           'colspan': colCount
-        }), 2, _$cn({
-          "k-expand": true,
-          'k-expanded': expanded
-        }), null, key + ".$expand"));
+        }), 2, _$cn((_$cn3 = {}, _$cn3[k + "-expand"] = true, _$cn3[k + "-expanded"] = expanded, _$cn3)), null, key + ".$expand"));
       }
 
       return hidden || !spreaded;
@@ -315,7 +307,7 @@ export default function ($props, $blocks, $__proto__) {
   return _$ce(2, 'div', [_$ce(2, 'div', [!isNull(stickHeader.value) ? _$cc(Affix, {
     'top': stickHeader.value,
     'exclude': excludeStickHeader,
-    'className': 'k-table-affix-header',
+    'className': _$cn(k + "-table-affix-header"),
     'children': _$ce(2, 'table', [colgroup, thead], 0, null, {
       'style': {
         width: tableWidthPx
@@ -325,7 +317,7 @@ export default function ($props, $blocks, $__proto__) {
     'style': {
       width: tableWidthPx
     }
-  }, null, tableRef)], 0, 'k-table-wrapper', {
+  }, null, tableRef)], 0, _$cn(k + "-table-wrapper"), {
     'style': style
   }, null, scrollRef), pagination ? _$cc(Pagination, _extends({
     'ref': paginationRef,
@@ -337,16 +329,20 @@ export default function ($props, $blocks, $__proto__) {
     'ev-change': onPageChange
   }), null, paginationRef) : undefined, _$cc(Transition, {
     'name': 'k-fade',
-    'children': loading ? _$cc(Spin, _$tmp1) : undefined
+    'children': loading ? _$cc(Spin, {
+      'overlay': true,
+      'size': 'small',
+      'className': _$cn(k + "-table-spin")
+    }) : undefined
   }), !isNull(stickScrollbar.value) ? _$cc(Affix, {
     'bottom': stickScrollbar.value,
     'shouldFix': shouldStickScrollbar,
     'style': stickScrollbarStyle.value,
-    'children': _$ce(2, 'div', _$ce(2, 'div', null, 1, 'k-table-scrollbar-inner', {
+    'children': _$ce(2, 'div', _$ce(2, 'div', null, 1, _$cn(k + "-table-scrollbar-inner"), {
       'style': {
         width: tableActualWidth.value
       }
-    }), 2, 'k-table-scrollbar', {
+    }), 2, _$cn(k + "-table-scrollbar"), {
       'ev-scroll': onScrollbarScroll
     }, null, scrollbarRef)
   }) : undefined], 0, _$cn(classNameObj), null, null, elementRef);

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

@@ -3,6 +3,7 @@ import { TableColumn, TableColumnProps } from './column';
 export declare const context: {
     Provider: import("intact").ComponentConstructor<import("intact").Component<import("../context").ProviderProps<("none" | "radio" | "checkbox") | undefined>, {}, {}, {}>>;
     Consumer: import("intact").ComponentConstructor<import("intact").Component<import("../context").ConsumerProps<("none" | "radio" | "checkbox") | undefined>, {}, {}, {}>>;
+    useContext: () => import("intact").RefObject<("none" | "radio" | "checkbox") | undefined>;
 };
 export declare function useColumns(): {
     getColumns: () => VNodeComponentClass<TableColumn<any>>[][];

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

@@ -1,4 +1,4 @@
-import { VNodeComponentClass, Props, Key } from 'intact';
+import { VNodeComponentClass, Props, RefObject, Key } from 'intact';
 import { TableColumn, TableColumnProps } from './column';
 import type { TableProps, TableRowKey } from './table';
 import { State } from '../../hooks/useState';
@@ -7,6 +7,7 @@ declare type ScrollPosition = 'left' | 'middle' | 'right';
 export declare const context: {
     Provider: import("intact").ComponentConstructor<import("intact").Component<import("../context").ProviderProps<any>, {}, {}, {}>>;
     Consumer: import("intact").ComponentConstructor<import("intact").Component<import("../context").ConsumerProps<any>, {}, {}, {}>>;
+    useContext: () => RefObject<any>;
 };
 export declare function useFixedColumns(getColumns: () => VNodeComponentClass<TableColumn>[][], { scrollRef, callbacks }: ReturnType<typeof useScroll>, widthMap: State<Record<TableRowKey, number>>): {
     scrollPosition: State<ScrollPosition | null>;

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

@@ -7,6 +7,7 @@ declare type ContextValue = {
 export declare const context: {
     Provider: import("intact").ComponentConstructor<import("intact").Component<import("../context").ProviderProps<ContextValue>, {}, {}, {}>>;
     Consumer: import("intact").ComponentConstructor<import("intact").Component<import("../context").ConsumerProps<ContextValue>, {}, {}, {}>>;
+    useContext: () => import("intact").RefObject<ContextValue | undefined>;
 };
 export declare function useGroup(): {
     onSelect: (value: any, onChange: ContextValue['onChange']) => void;

package/es/components/table/usePagination.js

@@ -68,7 +68,7 @@ export function usePagination() {
       }));
     }
 
-    instance.trigger('changePage', data);
+    instance.trigger('page', data);
   }
 
   return {

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

@@ -4,6 +4,7 @@ import { State } from '../../hooks/useState';
 export declare const context: {
     Provider: import("intact").ComponentConstructor<import("intact").Component<import("../context").ProviderProps<any>, {}, {}, {}>>;
     Consumer: import("intact").ComponentConstructor<import("intact").Component<import("../context").ConsumerProps<any>, {}, {}, {}>>;
+    useContext: () => RefObject<any>;
 };
 export declare function useResizable(scrollRef: RefObject<HTMLElement>, tableRef: RefObject<HTMLElement>, tableWidth: State<number | null>, widthMap: State<Record<TableRowKey, number>>, storeWidth: () => void): {
     start: (e: MouseEvent) => void;

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

@@ -1,6 +1,7 @@
 export declare const context: {
     Provider: import("intact").ComponentConstructor<import("intact").Component<import("../context").ProviderProps<any>, {}, {}, {}>>;
     Consumer: import("intact").ComponentConstructor<import("intact").Component<import("../context").ConsumerProps<any>, {}, {}, {}>>;
+    useContext: () => import("intact").RefObject<any>;
 };
 export declare function useSortable(): {
     onChange: (key: string, event: Event & {

package/es/components/tabs/index.d.ts

@@ -21,6 +21,10 @@ export declare class Tabs<T = any> extends Component<TabsProps<T>, TabsEvents<T>
     static events: Events<TabsEvents<any>>;
     private activeBar;
     private scroll;
+    config: {
+        cls: (name: string) => string;
+        readonly k: string;
+    };
     init(): void;
     changeTab(tabProps: TabProps): Promise<void>;
     remove(value: T): void;

package/es/components/tabs/index.js

@@ -8,6 +8,7 @@ import { TABS } from './constants';
 import { sizes } from '../../styles/utils';
 import { useActiveBar } from './useActiveBar';
 import { useScroll } from './useScroll';
+import { useConfigContext } from '../config';
 export * from './tab';
 var typeDefs = {
   value: null,
@@ -43,6 +44,7 @@ export var Tabs = /*#__PURE__*/function (_Component) {
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.activeBar = useActiveBar();
     _this.scroll = useScroll();
+    _this.config = useConfigContext();
     return _this;
   }
 

package/es/components/tabs/index.vdt.js

@@ -27,13 +27,12 @@ export default function ($props, $blocks, $__proto__) {
       next = _this$scroll.next,
       scrollRef = _this$scroll.scrollRef,
       wrapperRef = _this$scroll.wrapperRef;
-  var classNameObj = (_classNameObj = {
-    'k-tabs': true
-  }, _classNameObj["k-size-" + size] = size, _classNameObj['k-vertical'] = vertical, _classNameObj["k-type-" + type] = true, _classNameObj["k-is-scroll"] = isScroll.value, _classNameObj[className] = className, _classNameObj[makeStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-tabs"] = true, _classNameObj[k + "-size-" + size] = size, _classNameObj[k + "-vertical"] = vertical, _classNameObj[k + "-type-" + type] = true, _classNameObj[k + "-is-scroll"] = isScroll.value, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
   return _$cv('div', _extends({
     'className': _$cn(classNameObj)
   }, getRestProps(this)), [isScroll.value ? _$cc(Button, {
-    'className': 'k-tabs-prev',
+    'className': _$cn(k + "-tabs-prev"),
     'type': 'none',
     'icon': true,
     'key': 'prev',
@@ -41,16 +40,16 @@ export default function ($props, $blocks, $__proto__) {
     'disabled': !enablePrev.value,
     'ev-click': prev,
     'children': _$cc(Icon, {
-      'className': _$cn(vertical ? "k-icon-up" : "k-icon-left")
+      'className': _$cn(vertical ? k + "-icon-up" : k + "-icon-left")
     })
-  }, 'prev') : undefined, _$ce(2, 'div', _$ce(2, 'div', [children, _$ce(2, 'div', null, 1, 'k-tabs-active-bar', {
+  }, 'prev') : undefined, _$ce(2, 'div', _$ce(2, 'div', [children, _$ce(2, 'div', null, 1, _$cn(k + "-tabs-active-bar"), {
     'style': this.activeBar.value
-  })], 0, 'k-tabs-wrapper', {
+  })], 0, _$cn(k + "-tabs-wrapper"), {
     'style': {
       transform: vertical ? "translateY(" + offset.value + "px)" : "translateX(" + offset.value + "px)"
     }
-  }, null, wrapperRef), 2, 'k-tabs-scroll c-clearfix', null, null, scrollRef), isScroll.value ? _$cc(Button, {
-    'className': 'k-tabs-next',
+  }, null, wrapperRef), 2, _$cn(k + "-tabs-scroll c-clearfix"), null, null, scrollRef), isScroll.value ? _$cc(Button, {
+    'className': _$cn(k + "-tabs-next"),
     'type': 'none',
     'icon': true,
     'key': 'next',
@@ -58,7 +57,7 @@ export default function ($props, $blocks, $__proto__) {
     'disabled': !enableNext.value,
     'ev-click': next,
     'children': _$cc(Icon, {
-      'className': _$cn(vertical ? "k-icon-down" : "k-icon-right")
+      'className': _$cn(vertical ? k + "-icon-down" : k + "-icon-right")
     })
   }, 'next') : undefined]);
 }

package/es/components/tabs/styles.d.ts

@@ -1,2 +1,2 @@
 import '../../styles/global';
-export declare function makeStyles(): string;
+export declare function makeStyles(k: string): string;