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

package/components/steps/step.vdt.js

@@ -4,14 +4,6 @@ import { linkEvent } from 'intact';
 import { getRestProps, addStyle } from '../utils';
 import { context as StepsContext } from './context';
 import { Icon } from '../icon';
-var _$tmp0 = {
-  'className': 'k-icon-close-bold',
-  'color': 'danger'
-};
-var _$tmp1 = {
-  'className': 'k-icon-check-bold',
-  'color': 'primary'
-};
 export default function ($props, $blocks, $__proto__) {
   var _this = this;
 
@@ -26,6 +18,7 @@ export default function ($props, $blocks, $__proto__) {
       className = _this$get.className,
       style = _this$get.style;
 
+  var k = this.config.k;
   return _$cc(StepsContext.Consumer, {
     'children': function children(_ref) {
       var _classNameObj;
@@ -37,18 +30,19 @@ export default function ($props, $blocks, $__proto__) {
       var selected = value === index;
       var error = selected && status === 'error';
       var done = value > index;
-      var classNameObj = (_classNameObj = {
-        'k-step': true,
-        'k-active': selected,
-        'k-done': done,
-        'k-error': error
-      }, _classNameObj[className] = className, _classNameObj);
+      var classNameObj = (_classNameObj = {}, _classNameObj[k + "-step"] = true, _classNameObj[k + "-active"] = selected, _classNameObj[k + "-done"] = done, _classNameObj[k + "-error"] = error, _classNameObj[className] = className, _classNameObj);
       return _$cv('div', _extends({}, getRestProps(_this), {
         'className': _$cn(classNameObj),
         'style': style
-      }), [_$ce(2, 'div', [_$ce(2, 'div', error && type !== 'simple' ? _$cc(Icon, _$tmp0) : done && (type === 'line' || type === 'line-compact') ? _$cc(Icon, _$tmp1) : type !== 'simple' ? _$ce(2, 'span', index + 1, 0) : undefined, 0, 'k-step-mark'), _$ce(2, 'div', [_$ce(2, 'div', title, 0, 'k-step-title'), _$ce(2, 'div', _children, 0, 'k-step-content')], 4, 'k-step-main')], 4, 'k-step-wrapper', {
+      }), [_$ce(2, 'div', [_$ce(2, 'div', error && type !== 'simple' ? _$cc(Icon, {
+        'className': _$cn(k + "-icon-close-bold"),
+        'color': 'danger'
+      }) : done && (type === 'line' || type === 'line-compact') ? _$cc(Icon, {
+        'className': _$cn(k + "-icon-check-bold"),
+        'color': 'primary'
+      }) : type !== 'simple' ? _$ce(2, 'span', index + 1, 0) : undefined, 0, _$cn(k + "-step-mark")), _$ce(2, 'div', [_$ce(2, 'div', title, 0, _$cn(k + "-step-title")), _$ce(2, 'div', _children, 0, _$cn(k + "-step-content"))], 4, _$cn(k + "-step-main"))], 4, _$cn(k + "-step-wrapper"), {
         'ev-click': linkEvent(index, onChange)
-      }), _$ce(2, 'div', null, 1, 'k-step-tail')]);
+      }), _$ce(2, 'div', null, 1, _$cn(k + "-step-tail"))]);
     }
   });
 }

package/components/steps/styles.d.ts

@@ -1,4 +1,4 @@
 import '../../styles/global';
-export declare function makeStepsStyles(): string;
-export declare function makeCommonStyles(): string;
-export declare function makeVerticalStyles(): string;
+export declare function makeStepsStyles(k: string): string;
+export declare function makeCommonStyles(k: string): string;
+export declare function makeVerticalStyles(k: string): string;

package/components/steps/styles.js

@@ -143,37 +143,37 @@ setDefault(function () {
   }).steps;
 });
 var stepStatus = ['done', 'active', 'error'];
-export function makeStepsStyles() {
-  return /*#__PURE__*/css("display:flex;", makeCommonStyles(), ";&.k-default{", makeDefaultStyles(), ";}&.k-line,&.k-line-compact,&.k-simple{", makeLineStyles(), ";}&.k-line-compact{", makeLineCompactStyles(), ";}&.k-simple{", makeSimpleStyles(), ";}&.k-clickable{.k-done{cursor:pointer;.k-step-wrapper:hover .k-step-mark{background:", steps.done.markHoverBgColor, ";}}}", makeVerticalStyles(), ";");
+export function makeStepsStyles(k) {
+  return /*#__PURE__*/css("display:flex;", makeCommonStyles(k), ";&.", k, "-default{", makeDefaultStyles(k), ";}&.", k, "-line,&.", k, "-line-compact,&.", k, "-simple{", makeLineStyles(k), ";}&.", k, "-line-compact{", makeLineCompactStyles(k), ";}&.", k, "-simple{", makeSimpleStyles(k), ";}&.", k, "-clickable{.", k, "-done{cursor:pointer;.", k, "-step-wrapper:hover .", k, "-step-mark{background:", steps.done.markHoverBgColor, ";}}}", makeVerticalStyles(k), ";");
 }
 
-function makeDefaultStyles() {
+function makeDefaultStyles(k) {
   var defaults = steps.default;
-  return /*#__PURE__*/css("text-align:center;height:", defaults.height, ";background:", defaults.bgColor, ";.k-step-wrapper{", center(), ";height:100%;padding:0 ", defaults.padding, ";}.k-step-mark{width:", defaults.markWidth, ";height:", defaults.markWidth, ";margin-right:", steps.gap, ";}.k-step-main{display:flex;overflow:hidden;white-space:nowrap;}.k-step-title{padding-right:", steps.gap, ";}.k-step:last-of-type{.k-step-tail{display:none;}}&:not(.k-vertical){", makeArrow(false), ";}");
+  return /*#__PURE__*/css("text-align:center;height:", defaults.height, ";background:", defaults.bgColor, ";.", k, "-step-wrapper{", center(), ";height:100%;padding:0 ", defaults.padding, ";}.", k, "-step-mark{width:", defaults.markWidth, ";height:", defaults.markWidth, ";margin-right:", steps.gap, ";}.", k, "-step-main{display:flex;overflow:hidden;white-space:nowrap;}.", k, "-step-title{padding-right:", steps.gap, ";}.", k, "-step:last-of-type{.", k, "-step-tail{display:none;}}&:not(.", k, "-vertical){", makeArrow(false, k), ";}");
 }
 
-function makeArrow(isVertical) {
+function makeArrow(isVertical, k) {
   var defaults = steps.default;
   var offset = "calc(-1 * (" + defaults.height + " / 2 + " + steps.gap + "))";
   var size = "calc(" + defaults.height + " / 2 + " + steps.gap + ")";
-  return /*#__PURE__*/css(".k-step-tail{position:absolute;", !isVertical ? "\n                    top: 0;\n                    right: " + offset + ";\n                    width: " + size + ";\n                    height: " + defaults.height + ";\n                " : "\n                    left: 0;\n                    bottom: " + offset + ";\n                    height: " + size + ";\n                    width: " + defaults.height + ";\n                ", " overflow:hidden;z-index:1;&:after,&:before{content:'';border-width:calc(", defaults.height, " / 2 + ", steps.gap, ");border-style:solid;border-color:transparent;position:absolute;", isVertical ? 'left' : 'top', ":calc(-1 * ", steps.gap, ");}&:after{border-", isVertical ? 'top' : 'left', "-color:", defaults.bgColor, ";", isVertical ? 'top' : 'left', ":calc(-1 * ", steps.gap, ");}&:before{border-", isVertical ? 'top' : 'left', "-color:#fff;", isVertical ? 'top' : 'left', ":0;}}.k-step:not(:first-of-type){padding-", isVertical ? 'top' : 'left', ":calc(", defaults.height, " / 2 + ", steps.gap, ");}");
+  return /*#__PURE__*/css(".", k, "-step-tail{position:absolute;", !isVertical ? /*#__PURE__*/css("top:0;right:", offset, ";width:", size, ";height:", defaults.height, ";") : /*#__PURE__*/css("left:0;bottom:", offset, ";height:", size, ";width:", defaults.height, ";"), " overflow:hidden;z-index:1;&:after,&:before{content:'';border-width:calc(", defaults.height, " / 2 + ", steps.gap, ");border-style:solid;border-color:transparent;position:absolute;", isVertical ? 'left' : 'top', ":calc(-1 * ", steps.gap, ");}&:after{border-", isVertical ? 'top' : 'left', "-color:", defaults.bgColor, ";", isVertical ? 'top' : 'left', ":calc(-1 * ", steps.gap, ");}&:before{border-", isVertical ? 'top' : 'left', "-color:#fff;", isVertical ? 'top' : 'left', ":0;}}.", k, "-step:not(:first-of-type){padding-", isVertical ? 'top' : 'left', ":calc(", defaults.height, " / 2 + ", steps.gap, ");}");
 }
 
-function makeLineStyles() {
+function makeLineStyles(k) {
   var line = steps.line;
   var top = "calc(" + line.markWidth + " / 2 - " + line.lineWidth + " / 2)";
-  return /*#__PURE__*/css(".k-step{display:flex;}.k-step-wrapper{display:inline-block;text-align:center;position:relative;width:", line.contentWidth, ";}.k-step:last-of-type{flex:0 0 auto;}.k-step-mark{border:", line.markborder, ";width:", line.markWidth, ";height:", line.markWidth, ";position:relative;z-index:1;&,.k-icon{font-size:", line.markFontSize, ";}}.k-step-main{padding-top:", line.titleGap, ";}.k-step-title{font-size:14px;color:", theme.color.text, ";}.k-step-content{margin-top:", line.descGap, ";color:", theme.color.placeholder, ";}.k-step-wrapper{&:before,&:after{content:'';display:block;height:", line.lineWidth, ";background:", line.lineColor, ";width:50%;position:absolute;top:", top, ";}&:after{right:0;}}.k-step{&:first-of-type .k-step-wrapper:before,&:last-of-type .k-step-wrapper:after{background:transparent;}}.k-step-tail{flex:1;height:", line.lineWidth, ";background:", line.lineColor, ";margin-top:", top, ";}.k-step{&.k-done{.k-step-tail,&:not(:last-of-type) .k-step-wrapper:after,&:not(:first-of-type) .k-step-wrapper:before{background:", theme.color.primary, ";}}&:not(:first-of-type).k-active{.k-step-wrapper:before{background:", theme.color.primary, ";}}&.k-active .k-step-title{color:", theme.color.primary, ";}&.k-error .k-step-title{color:", theme.color.danger, ";}}");
+  return /*#__PURE__*/css(".", k, "-step{display:flex;}.", k, "-step-wrapper{display:inline-block;text-align:center;position:relative;width:", line.contentWidth, ";}.", k, "-step:last-of-type{flex:0 0 auto;}.", k, "-step-mark{border:", line.markborder, ";width:", line.markWidth, ";height:", line.markWidth, ";position:relative;z-index:1;&,.", k, "-icon{font-size:", line.markFontSize, ";}}.", k, "-step-main{padding-top:", line.titleGap, ";}.", k, "-step-title{font-size:14px;color:", theme.color.text, ";}.", k, "-step-content{margin-top:", line.descGap, ";color:", theme.color.placeholder, ";}.", k, "-step-wrapper{&:before,&:after{content:'';display:block;height:", line.lineWidth, ";background:", line.lineColor, ";width:50%;position:absolute;top:", top, ";}&:after{right:0;}}.", k, "-step{&:first-of-type .", k, "-step-wrapper:before,&:last-of-type .", k, "-step-wrapper:after{background:transparent;}}.", k, "-step-tail{flex:1;height:", line.lineWidth, ";background:", line.lineColor, ";margin-top:", top, ";}.", k, "-step{&.", k, "-done{.", k, "-step-tail,&:not(:last-of-type) .", k, "-step-wrapper:after,&:not(:first-of-type) .", k, "-step-wrapper:before{background:", theme.color.primary, ";}}&:not(:first-of-type).", k, "-active{.", k, "-step-wrapper:before{background:", theme.color.primary, ";}}&.", k, "-active .", k, "-step-title{color:", theme.color.primary, ";}&.", k, "-error .", k, "-step-title{color:", theme.color.danger, ";}}");
 }
 
-function makeLineCompactStyles() {
+function makeLineCompactStyles(k) {
   var line = steps.line;
-  return /*#__PURE__*/css(".k-step-wrapper{display:inline-flex;text-align:left;width:auto;&:before,&:after{display:none;}}.k-step-main{flex:1;padding:0 0 0 ", line.titleGap, ";}.k-step-content{margin:0;}.k-step-tail{margin-right:", line.titleGap, ";}.k-step-title{display:flex;align-items:center;height:", line.markWidth, ";&:after{content:'';display:block;flex:1;height:", line.lineWidth, ";background:", line.lineColor, ";margin-left:", line.titleGap, ";}}.k-step:last-of-type .k-step-title:after{display:none;}.k-step{&.k-done{.k-step-title:after{background:", theme.color.primary, ";}}}");
+  return /*#__PURE__*/css(".", k, "-step-wrapper{display:inline-flex;text-align:left;width:auto;&:before,&:after{display:none;}}.", k, "-step-main{flex:1;padding:0 0 0 ", line.titleGap, ";}.", k, "-step-content{margin:0;}.", k, "-step-tail{margin-right:", line.titleGap, ";}.", k, "-step-title{display:flex;align-items:center;height:", line.markWidth, ";&:after{content:'';display:block;flex:1;height:", line.lineWidth, ";background:", line.lineColor, ";margin-left:", line.titleGap, ";}}.", k, "-step:last-of-type .", k, "-step-title:after{display:none;}.", k, "-step{&.", k, "-done{.", k, "-step-title:after{background:", theme.color.primary, ";}}}");
 }
 
-function makeSimpleStyles() {
+function makeSimpleStyles(k) {
   var simple = steps.simple;
   var top = "calc(" + simple.markWidth + " / 2 - " + steps.line.lineWidth + " / 2)";
-  return /*#__PURE__*/css(".k-step-mark{width:", simple.markWidth, ";height:", simple.markWidth, ";background:", simple.markBgColor, ";}.k-step-wrapper{font-size:0;&:before,&:after{top:", top, ";}}.k-step-main{font-size:", theme.default.fontSize, ";}.k-step-tail{margin-top:", top, ";}.k-step{&.k-done{.k-step-mark{background:", simple.doneMarkBgColor, ";}}&.k-error{.k-step-mark{background:", simple.errorMarkBgColor, ";}}}");
+  return /*#__PURE__*/css(".", k, "-step-mark{width:", simple.markWidth, ";height:", simple.markWidth, ";background:", simple.markBgColor, ";}.", k, "-step-wrapper{font-size:0;&:before,&:after{top:", top, ";}}.", k, "-step-main{font-size:", theme.default.fontSize, ";}.", k, "-step-tail{margin-top:", top, ";}.", k, "-step{&.", k, "-done{.", k, "-step-mark{background:", simple.doneMarkBgColor, ";}}&.", k, "-error{.", k, "-step-mark{background:", simple.errorMarkBgColor, ";}}}");
 }
 
 function center(flex) {
@@ -184,13 +184,13 @@ function center(flex) {
   return /*#__PURE__*/css("display:", flex, ";align-items:center;justify-content:center;");
 }
 
-export function makeCommonStyles() {
-  return /*#__PURE__*/css(".k-step{position:relative;flex:1;", _mapInstanceProperty(stepStatus).call(stepStatus, function (status) {
+export function makeCommonStyles(k) {
+  return /*#__PURE__*/css(".", k, "-step{position:relative;flex:1;", _mapInstanceProperty(stepStatus).call(stepStatus, function (status) {
     var styles = steps[status];
-    return /*#__PURE__*/css("&.k-", status, "{.k-step-mark{color:", styles.markColor, ";border-color:", styles.markBorderColor, ";background:", styles.markBgColor, ";}.k-step-main{color:", styles.mainColor, ";}}");
-  }), ";}.k-step-mark{", center('inline-flex'), ";border:", steps.default.markborder, ";border-radius:50%;vertical-align:top;color:", steps.markColor, ";background:", steps.markBgColor, ";}");
+    return /*#__PURE__*/css("&.", k, "-", status, "{.", k, "-step-mark{color:", styles.markColor, ";border-color:", styles.markBorderColor, ";background:", styles.markBgColor, ";}.", k, "-step-main{color:", styles.mainColor, ";}}");
+  }), ";}.", k, "-step-mark{", center('inline-flex'), ";border:", steps.default.markborder, ";border-radius:50%;vertical-align:top;color:", steps.markColor, ";background:", steps.markBgColor, ";}");
 }
-export function makeVerticalStyles() {
+export function makeVerticalStyles(k) {
   var verticalLine = steps.vertical.line;
-  return /*#__PURE__*/css("&.k-vertical{&.k-default{height:auto;width:", steps.default.height, ";writing-mode:vertical-rl;letter-spacing:1px;", makeArrow(true), ";.k-step-wrapper{width:100%;padding:", steps.default.padding, " 0;}.k-step-mark{margin-right:0;margin-bottom:", steps.gap, ";}.k-step-title{padding-right:0;padding-bottom:", steps.gap, ";}}&.k-line,&.k-line-compact,&.k-simple{flex-direction:column;.k-step{flex:none;min-height:", verticalLine.minHeight, ";}.k-step-wrapper{display:flex;width:auto;text-align:left;}.k-step-main{flex:1;padding:0 0 ", verticalLine.padding, " ", verticalLine.padding, ";}.k-step-title{display:flex;align-items:center;height:", steps.line.markWidth, ";&:after{display:none;}}.k-step-wrapper{&:before,&:after{display:none;}}.k-step-tail{position:absolute;left:calc(", steps.line.markWidth, " / 2 - ", steps.line.lineWidth, " / 2);height:100%;width:", steps.line.lineWidth, ";background:", steps.line.lineColor, ";}.k-step:last-of-type{.k-step-tail{display:none;}}}&.k-simple{.k-step-tail{left:calc(", steps.simple.markWidth, " / 2 - ", steps.line.lineWidth, " / 2);}.k-step-title{height:", steps.simple.markWidth, ";margin-bottom:", steps.vertical.simple.titleGap, ";}}}");
+  return /*#__PURE__*/css("&.", k, "-vertical{&.", k, "-default{height:auto;width:", steps.default.height, ";writing-mode:vertical-rl;letter-spacing:1px;", makeArrow(true, k), ";.", k, "-step-wrapper{width:100%;padding:", steps.default.padding, " 0;}.", k, "-step-mark{margin-right:0;margin-bottom:", steps.gap, ";}.", k, "-step-title{padding-right:0;padding-bottom:", steps.gap, ";}}&.", k, "-line,&.", k, "-line-compact,&.", k, "-simple{flex-direction:column;.", k, "-step{flex:none;min-height:", verticalLine.minHeight, ";}.", k, "-step-wrapper{display:flex;width:auto;text-align:left;}.", k, "-step-main{flex:1;padding:0 0 ", verticalLine.padding, " ", verticalLine.padding, ";}.", k, "-step-title{display:flex;align-items:center;height:", steps.line.markWidth, ";&:after{display:none;}}.", k, "-step-wrapper{&:before,&:after{display:none;}}.", k, "-step-tail{position:absolute;left:calc(", steps.line.markWidth, " / 2 - ", steps.line.lineWidth, " / 2);height:100%;width:", steps.line.lineWidth, ";background:", steps.line.lineColor, ";}.", k, "-step:last-of-type{.", k, "-step-tail{display:none;}}}&.", k, "-simple{.", k, "-step-tail{left:calc(", steps.simple.markWidth, " / 2 - ", steps.line.lineWidth, " / 2);}.", k, "-step-title{height:", steps.simple.markWidth, ";margin-bottom:", steps.vertical.simple.titleGap, ";}}}");
 }

package/components/switch/index.d.ts

@@ -28,6 +28,7 @@ export declare class Switch<True = true, False = false> extends Component<Switch
     static events: Events<SwitchEvents>;
     private elementRef;
     private draggable;
+    private config;
     private onClick;
     private onClickOnHandle;
     private onKeypress;

package/components/switch/index.js

@@ -6,6 +6,7 @@ import template from './index.vdt';
 import { sizes } from '../../styles/utils';
 import { bind } from '../utils';
 import { useDraggable } from './useDraggable';
+import { useConfigContext } from '../config';
 var typeDefs = {
   name: String,
   on: String,
@@ -47,6 +48,7 @@ export var Switch = /*#__PURE__*/function (_Component) {
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.elementRef = createRef();
     _this.draggable = useDraggable(_this.elementRef);
+    _this.config = useConfigContext();
     return _this;
   }
 

package/components/switch/index.vdt.js

@@ -34,9 +34,8 @@ export default function ($props, $blocks, $__proto__) {
       dragging = _this$draggable.dragging,
       barRef = _this$draggable.barRef,
       barWidth = _this$draggable.barWidth;
-  var classNameObj = (_classNameObj = {
-    'k-switch': true
-  }, _classNameObj[className] = className, _classNameObj['k-checked'] = value === trueValue, _classNameObj["k-" + size] = true, _classNameObj['k-disabled'] = disabled, _classNameObj['k-dragging'] = dragging.value, _classNameObj[makeStyles()] = true, _classNameObj);
+  var k = this.config.k;
+  var classNameObj = (_classNameObj = {}, _classNameObj[k + "-switch"] = true, _classNameObj[className] = className, _classNameObj[k + "-checked"] = value === trueValue, _classNameObj[k + "-" + size] = true, _classNameObj[k + "-disabled"] = disabled, _classNameObj[k + "-dragging"] = dragging.value, _classNameObj[makeStyles(k)] = true, _classNameObj);
   var onStyle;
   var offStyle;
   var barStyle;
@@ -109,7 +108,7 @@ export default function ($props, $blocks, $__proto__) {
     };
 
     return block ? block.call($this, callBlock, data) : callBlock();
-  }, __$blocks['off'](_$no)), 0, 'k-switch-off', {
+  }, __$blocks['off'](_$no)), 0, _$cn(k + "-switch-off"), {
     'style': offStyle
   }) : undefined, _$ce(2, 'div', [on || $blocks.on ? _$ce(2, 'div', (_$blocks['on'] = function ($super) {
     return on;
@@ -121,12 +120,12 @@ export default function ($props, $blocks, $__proto__) {
     };
 
     return block ? block.call($this, callBlock, data) : callBlock();
-  }, __$blocks['on'](_$no)), 0, 'k-switch-on', {
+  }, __$blocks['on'](_$no)), 0, _$cn(k + "-switch-on"), {
     'style': onStyle
-  }) : undefined, _$ce(2, 'div', _$ce(2, 'div', _$ce(2, 'img', null, 1, null, _$tmp0), 2, 'k-switch-handle', {
+  }) : undefined, _$ce(2, 'div', _$ce(2, 'div', _$ce(2, 'img', null, 1, null, _$tmp0), 2, _$cn(k + "-switch-handle"), {
     'ev-click': this.onClickOnHandle,
     'ev-mousedown': start
-  }), 2, 'k-switch-wrapper')], 0, 'k-switch-bar', {
+  }), 2, _$cn(k + "-switch-wrapper"))], 0, _$cn(k + "-switch-bar"), {
     'style': barStyle
   }, null, barRef)]);
 }

package/components/switch/styles.d.ts

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

package/components/switch/styles.js

@@ -72,12 +72,12 @@ setDefault(function () {
     switch: defaults
   }).switch;
 });
-export function makeStyles() {
-  return /*#__PURE__*/css("display:inline-block;vertical-align:middle;background:", kswitch.bgColor, ";position:relative;cursor:pointer;user-select:none;overflow:hidden;box-sizing:content-box;transition:background ", kswitch.transition, ";input{opacity:0;position:absolute;}.k-switch-bar,.k-switch-off{box-sizing:border-box;}.k-switch-bar{position:absolute;text-align:right;overflow:hidden;}.k-switch-wrapper{display:inline-block;position:relative;z-index:1;border-radius:", kswitch.handleBorderRadius, ";}.k-switch-bar,.k-switch-wrapper{height:100%;background:", kswitch.bgColor, ";transition:all ", kswitch.transition, ";}&:hover{&,.k-switch-bar,.k-switch-wrapper{background:", kswitch.hoverBgColor, ";}}.k-switch-handle{border-radius:", kswitch.handleBorderRadius, ";background:", kswitch.handleBgColor, ";height:100%;cursor:pointer;transition:left ", kswitch.transition, ";display:inline-block;img{height:100%;visibility:hidden;}}.k-switch-on,.k-switch-off{position:absolute;font-size:", kswitch.fontSize, ";color:", kswitch.color, ";text-align:center;}&.k-dragging{.k-switch-bar,.k-switch-wrapper{background:", kswitch.checked.bgColor, ";transition:background ", kswitch.transition, ";}}&:focus{outline:none;}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+export function makeStyles(k) {
+  return /*#__PURE__*/css("display:inline-block;vertical-align:middle;background:", kswitch.bgColor, ";position:relative;cursor:pointer;user-select:none;overflow:hidden;box-sizing:content-box;transition:background ", kswitch.transition, ";input{opacity:0;position:absolute;}.", k, "-switch-bar,.", k, "-switch-off{box-sizing:border-box;}.", k, "-switch-bar{position:absolute;text-align:right;overflow:hidden;}.", k, "-switch-wrapper{display:inline-block;position:relative;z-index:1;border-radius:", kswitch.handleBorderRadius, ";}.", k, "-switch-bar,.", k, "-switch-wrapper{height:100%;background:", kswitch.bgColor, ";transition:all ", kswitch.transition, ";}&:hover{&,.", k, "-switch-bar,.", k, "-switch-wrapper{background:", kswitch.hoverBgColor, ";}}.", k, "-switch-handle{border-radius:", kswitch.handleBorderRadius, ";background:", kswitch.handleBgColor, ";height:100%;cursor:pointer;transition:left ", kswitch.transition, ";display:inline-block;img{height:100%;visibility:hidden;}}.", k, "-switch-on,.", k, "-switch-off{position:absolute;font-size:", kswitch.fontSize, ";color:", kswitch.color, ";text-align:center;}&.", k, "-dragging{.", k, "-switch-bar,.", k, "-switch-wrapper{background:", kswitch.checked.bgColor, ";transition:background ", kswitch.transition, ";}}&:focus{outline:none;}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var _kswitch$size = kswitch[size],
         width = _kswitch$size.width,
         height = _kswitch$size.height,
         padding = _kswitch$size.padding;
-    return /*#__PURE__*/css("&.k-", size, ",&.k-", size, " .k-switch-on,&.k-", size, " .k-switch-off{width:", width, ";height:", height, ";}&.k-", size, "{border-radius:", height, ";.k-switch-bar{width:", height, ";border-radius:", height, ";}.k-switch-wrapper{padding:", padding, ";}.k-switch-on,.k-switch-off{line-height:", height, ";left:0;}.k-switch-on{padding:0 ", height, " 0 calc(", height, " / 3);}.k-switch-off{padding:0 calc(", height, " / 3) 0 ", height, ";}}");
-  }), "&.k-checked{.k-switch-bar,.k-switch-wrapper{background:", kswitch.checked.bgColor, ";}.k-switch-bar{width:100%;}&:hover{.k-switch-bar,.k-switch-wrapper{background:", kswitch.checked.hoverBgColor, ";}}}&.k-disabled{&,.k-switch-handle{cursor:not-allowed;}&,.k-switch-bar,.k-switch-wrapper{background:", kswitch.disabledBgColor, ";}&.k-checked{&,.k-switch-bar,.k-switch-wrapper{background:", kswitch.checked.disabledBgColor, ";}}}");
+    return /*#__PURE__*/css("&.", k, "-", size, ",&.", k, "-", size, " .", k, "-switch-on,&.", k, "-", size, " .", k, "-switch-off{width:", width, ";height:", height, ";}&.", k, "-", size, "{border-radius:", height, ";.", k, "-switch-bar{width:", height, ";border-radius:", height, ";}.", k, "-switch-wrapper{padding:", padding, ";}.", k, "-switch-on,.", k, "-switch-off{line-height:", height, ";left:0;}.", k, "-switch-on{padding:0 ", height, " 0 calc(", height, " / 3);}.", k, "-switch-off{padding:0 calc(", height, " / 3) 0 ", height, ";}}");
+  }), "&.", k, "-checked{.", k, "-switch-bar,.", k, "-switch-wrapper{background:", kswitch.checked.bgColor, ";}.", k, "-switch-bar{width:100%;}&:hover{.", k, "-switch-bar,.", k, "-switch-wrapper{background:", kswitch.checked.hoverBgColor, ";}}}&.", k, "-disabled{&,.", k, "-switch-handle{cursor:not-allowed;}&,.", k, "-switch-bar,.", k, "-switch-wrapper{background:", kswitch.disabledBgColor, ";}&.", k, "-checked{&,.", k, "-switch-bar,.", k, "-switch-wrapper{background:", kswitch.checked.disabledBgColor, ";}}}");
 }

package/components/table/cell.d.ts

@@ -18,5 +18,6 @@ export interface TableCellProps {
 }
 export declare class TableCell extends Component<TableCellProps> {
     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;
 }

package/components/table/cell.js

@@ -1,11 +1,23 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import { Component } from 'intact-react';
 import template from './cell.vdt';
+import { useConfigContext } from '../config';
 export var TableCell = /*#__PURE__*/function (_Component) {
   _inheritsLoose(TableCell, _Component);
 
   function TableCell() {
-    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 = TableCell.prototype;

package/components/table/cell.vdt.js

@@ -4,10 +4,6 @@ import { get, noop } from 'intact-shared';
 import { Button } from '../button';
 import { Icon } from '../icon';
 import { getTextByChildren } from '../utils';
-var _$tmp0 = {
-  'className': 'k-icon-right',
-  'size': 'small'
-};
 export default function ($props, $blocks, $__proto__) {
   $blocks || ($blocks = {});
   $props || ($props = {});
@@ -27,6 +23,7 @@ export default function ($props, $blocks, $__proto__) {
       onClickArrow = _this$get.onClickArrow,
       hasChildren = _this$get.hasChildren;
 
+  var k = this.config.k;
   var blocks = props.$blocks;
   var children = get(data, props.key);
 
@@ -52,9 +49,12 @@ export default function ($props, $blocks, $__proto__) {
     'icon': true,
     'circle': true,
     'size': 'mini',
-    'className': 'k-table-arrow',
+    'className': _$cn(k + "-table-arrow"),
     'ev-click': onClickArrow,
-    'children': _$cc(Icon, _$tmp0)
+    'children': _$cc(Icon, {
+      'className': _$cn(k + "-icon-right"),
+      'size': 'small'
+    })
   }) : undefined, children], 0, _$cn(className), {
     'style': style,
     'title': getTextByChildren(children),

package/components/table/column.d.ts

@@ -32,4 +32,5 @@ export declare class TableColumn<T = any> extends Component<TableColumnProps, Ta
     static typeDefs: Required<TypeDefs<TableColumnProps>>;
     elementRef: import("intact").RefObject<HTMLElement>;
     private group;
+    private config;
 }

package/components/table/column.js

@@ -3,6 +3,7 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/con
 import { Component, VNode, createRef } from 'intact-react';
 import template from './column.vdt';
 import { useGroup } from './useGroup';
+import { useConfigContext } from '../config';
 var typeDefs = {
   key: {
     type: String,
@@ -39,6 +40,7 @@ export var TableColumn = /*#__PURE__*/function (_Component) {
     _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
     _this.elementRef = createRef();
     _this.group = useGroup();
+    _this.config = useConfigContext();
     return _this;
   }
 

package/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-react';
+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-react';
 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/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/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/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-react';
 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/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/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;