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

package/es/components/spinner/styles.js

@@ -4,13 +4,41 @@ import { deepDefaults, sizes } from '../../styles/utils';
 import { theme, setDefault } from '../../styles/theme';
 import '../../styles/global';
 var defaults = {
+  get borderRadius() {
+    return theme.borderRadius;
+  },
+
+  get border() {
+    return "1px solid " + theme.color.border;
+  },
+
+  get hoverBorderColor() {
+    return theme.color.primary;
+  },
+
+  get hoverBtnBg() {
+    return theme.color.bg;
+  },
+
+  get disabledBorderColor() {
+    return theme.color.disabledBorder;
+  },
+
+  get disabledBg() {
+    return theme.color.disabledBg;
+  },
+
+  get disabledColor() {
+    return theme.color.disabled;
+  },
+
   default: {
     inputWidth: '46px',
-    iconFontSize: '24px'
+    iconFontSize: '16px'
   },
   large: {
     inputWidth: '60px',
-    iconFontSize: '32px'
+    iconFontSize: '24px'
   },
   small: {
     inputWidth: '32px',
@@ -42,9 +70,9 @@ setDefault(function () {
   }).spinner;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("display:inline-block;vertical-align:middle;line-height:1;.k-spinner-btn{vertical-align:top;&:hover,&:focus{z-index:1;position:relative;}&.k-left{border-top-right-radius:0;border-bottom-right-radius:0;margin-right:-1px;}&.k-right{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px;}}.k-spinner-input{width:", spinner.default.inputWidth, ";vertical-align:top;.k-input-inner{text-align:center;padding:0;border-radius:0;}}.k-spinner-icon{font-size:", spinner.default.iconFontSize, ";}&.k-vertical{position:relative;font-size:0;", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  return /*#__PURE__*/css("display:inline-block;vertical-align:middle;border:", spinner.border, ";border-radius:", spinner.borderRadius, ";&:hover{border-color:", spinner.hoverBorderColor, ";.k-spinner-btn{background:", spinner.hoverBtnBg, ";}.k-left{border-radius:", spinner.borderRadius, " 0 0 ", spinner.borderRadius, ";}.k-right{border-radius:0 ", spinner.borderRadius, " ", spinner.borderRadius, " 0;}}.k-spinner-input{width:", spinner.default.inputWidth, ";.k-input-inner{text-align:center;border:none;border-radius:0;&:hover,&:focus{border:none;}}}.k-spinner-icon{font-size:", spinner.default.iconFontSize, ";}&.k-vertical{position:relative;font-size:0;", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var generate = function generate() {
-      return "\n                    .k-spinner-input {\n                        padding-right: calc(" + theme[size].height + " - 1px);\n                        width: " + spinner.vertical[size].width + ";\n                    }\n                ";
+      return "\n                    .k-spinner-input {\n                        padding-right: " + theme[size].height + ";\n                        width: " + spinner.vertical[size].width + ";\n                    }\n                ";
     };
 
     if (size === 'default') {
@@ -52,7 +80,7 @@ export function makeStyles() {
     } else {
       return "\n                        &.k-" + size + " {\n                            " + generate() + "\n                        }\n                    ";
     }
-  }), ";.k-spinner-btn{position:absolute;right:0;margin:0;height:calc(50% + 1px);line-height:50%;}.k-spinner-icon{line-height:50%!important;font-size:inherit!important;}.k-spinner-btn.k-left{bottom:0;border-radius:0 0 ", theme.borderRadius, " 0;}.k-spinner-btn.k-right{top:0;border-radius:0 ", theme.borderRadius, " 0 0;}.k-spinner-input{font-size:0;.k-input-inner{border-radius:", theme.borderRadius, " 0 0 ", theme.borderRadius, ";}}}&.k-disabled{.k-spinner-btn{&:hover,&:focus{z-index:0;}}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  }), ";.k-spinner-btn{position:absolute;right:0;margin:0;height:calc(50% - 2px);line-height:50%;}.k-spinner-icon{font-size:inherit!important;}.k-spinner-btn.k-left{bottom:1px;border-radius:0 0 ", spinner.borderRadius, " 0;}.k-spinner-btn.k-right{top:1px;border-radius:0 ", spinner.borderRadius, " 0 0;}.k-spinner-input{font-size:0;.k-input-inner{border-radius:", spinner.borderRadius, " 0 0 ", spinner.borderRadius, ";}}}&.k-disabled{border-color:", spinner.disabledBorderColor, ";background:", spinner.disabledBg, ";}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = spinner[size];
 
     var generate = function generate() {

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

@@ -2,8 +2,8 @@ import { Component, TypeDefs } from 'intact';
 export * from './step';
 export interface StepsProps {
     value?: number;
-    status?: 'normal' | 'error';
-    type?: 'default' | 'line' | 'simple';
+    status?: 'normal' | 'error' | 'done';
+    type?: 'default' | 'line' | 'simple' | 'line-compact' | 'dot';
     clickable?: boolean;
 }
 export declare class Steps extends Component<StepsProps> {

package/es/components/steps/index.js

@@ -6,8 +6,8 @@ import { bind } from '../utils';
 export * from './step';
 var typeDefs = {
   value: Number,
-  status: ['normal', 'error'],
-  type: ['default', 'line', 'simple'],
+  status: ['normal', 'error', 'done'],
+  type: ['default', 'line', 'simple', 'line-compact', 'dot'],
   clickable: Boolean
 };
 

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

@@ -40,6 +40,7 @@ export default function ($props, $blocks, $__proto__) {
       value: value,
       status: status,
       width: width,
+      type: type,
       onChange: this.changeIndex
     },
     'children': _$cv('div', _extends({

package/es/components/steps/step.vdt.js

@@ -2,8 +2,16 @@ import _extends from "@babel/runtime-corejs3/helpers/extends";
 import { createUnknownComponentVNode as _$cc, createVNode as _$cv, className as _$cn, createElementVNode as _$ce } from 'intact';
 import { linkEvent } from 'intact';
 import { getRestProps, addStyle } from '../utils';
-import { makeStepStyles } from './styles';
 import { context as StepsContext } from './context';
+import { Icon } from '../icon';
+var _$tmp0 = {
+  'className': 'k-icon-close-big',
+  'color': 'danger'
+};
+var _$tmp1 = {
+  'className': 'k-icon-check',
+  'color': 'primary'
+};
 export default function ($props, $blocks, $__proto__) {
   var _this = this;
 
@@ -25,22 +33,23 @@ export default function ($props, $blocks, $__proto__) {
       var value = _ref.value,
           status = _ref.status,
           width = _ref.width,
-          onChange = _ref.onChange;
+          onChange = _ref.onChange,
+          type = _ref.type;
       var selected = value === index;
       var error = selected && status === 'error';
+      var done = value > index;
       var classNameObj = (_classNameObj = {
         'k-step': true,
         'k-active': selected,
-        'k-done': value > index,
+        'k-done': done,
         'k-error': error
-      }, _classNameObj[className] = className, _classNameObj[makeStepStyles()] = true, _classNameObj);
+      }, _classNameObj[className] = className, _classNameObj);
       return _$cv('div', _extends({}, getRestProps(_this), {
         'className': _$cn(classNameObj),
-        'style': addStyle(style, {
-          width: width
-        }),
+        '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', {
         'ev-click': linkEvent(index, onChange)
-      }), [_$ce(2, 'div', null, 1, 'k-step-tail'), _$ce(2, 'div', [_$ce(2, 'div', _$ce(2, 'div', error ? _$ce(2, 'i', null, 1, 'k-step-icon ion-ios-close-empty') : _$ce(2, 'span', index + 1, 0), 2, 'k-step-inner'), 2, 'k-step-head'), _$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', null, 1, 'k-step-tail')]);
     }
   });
 }

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

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

package/es/components/steps/styles.js

@@ -4,137 +4,116 @@ import { theme, setDefault } from '../../styles/theme';
 import { deepDefaults } from '../../styles/utils';
 import '../../styles/global';
 var defaults = {
-  get transition() {
-    return theme.transition.middle;
-  },
+  gap: '10px',
 
-  get height() {
-    return theme.default.height;
+  get titleColor() {
+    return theme.color.title;
   },
 
-  get bgColor() {
-    return theme.color.bg;
+  get desColor() {
+    return theme.color.lightBlack;
   },
 
-  gutter: '10px',
-  gapTop: '-2px',
-  // head
-  head: {
-    innerWidth: '16px',
-
-    get innerBorder() {
-      return "1px solid " + theme.color.placeholder;
-    },
+  get markColor() {
+    return theme.color.placeholder;
+  },
 
-    iconFontSize: '24px',
-    paddingRight: '10px'
+  get markborder() {
+    return "1px solid " + theme.color.placeholder;
   },
-  main: {
-    get color() {
-      return theme.color.text;
+
+  markBgColor: '#fff',
+  default: {
+    get height() {
+      return theme.default.height;
     },
 
-    get titlePaddingRight() {
-      return steps.head.paddingRight;
+    get bgColor() {
+      return theme.color.bg;
     },
 
-    contentFontSize: '12px'
+    markWidth: '16px'
   },
   // done
   done: {
-    get headColor() {
+    get markColor() {
       return theme.color.primary;
     },
 
-    get headInnerBorderColor() {
+    get markBorderColor() {
       return theme.color.primary;
     },
 
-    headInnerBgColor: 'transparent',
+    markBgColor: '#fff',
 
     get mainColor() {
       return theme.color.primary;
-    },
-
-    get simpleColor() {
-      return theme.color.text;
     }
 
   },
   // active
   active: {
-    headColor: '#fff',
+    markColor: '#fff',
 
-    get headInnerBorderColor() {
+    get markBorderColor() {
       return theme.color.primary;
     },
 
-    get headInnerBgColor() {
+    get markBgColor() {
       return theme.color.primary;
     },
 
     get mainColor() {
       return theme.color.primary;
-    },
-
-    get simpleColor() {
-      return theme.color.primary;
     }
 
   },
   // error
   error: {
-    get headColor() {
+    get markColor() {
       return theme.color.danger;
     },
 
-    get headInnerBorderColor() {
+    get markBorderColor() {
       return theme.color.danger;
     },
 
-    headInnerBgColor: 'transparent',
+    markBgColor: '#fff',
 
     get mainColor() {
       return theme.color.danger;
-    },
-
-    get simpleColor() {
-      return theme.color.danger;
     }
 
   },
   // line
   line: {
-    bgColor: '#fff',
-    mainContentGap: '5px 0 0',
-
-    get tailBgColor() {
-      return theme.color.placeholder;
-    },
+    markWidth: '32px',
+    markFontSize: '24px',
 
-    get doneTailBgColor() {
-      return theme.color.primary;
+    get lineColor() {
+      return theme.color.border;
     },
 
-    innerWidth: '32px',
-    innerLineHeight: '30px',
-    innerFontSize: '18px',
-    headTop: '16px',
-    titleFontSize: '14px',
-    titleGopTop: '16px',
-    iconLineHeight: '30px',
-    tailTop: '16px',
-    width: '160px'
+    titleGap: '16px',
+    descGap: '4px',
+    contentMaxWidth: '200px'
   },
   // simple
   simple: {
-    fontSize: '14px',
+    markWidth: '12px',
+
+    get markBgColor() {
+      return theme.color.placeholder;
+    },
 
-    get color() {
-      return theme.color.disabled;
+    get doneMarkBgColor() {
+      return theme.color.primary;
     },
 
-    headPaddingRight: '6px'
+    get errorMarkBgColor() {
+      return theme.color.danger;
+    }
+
   }
 };
 var steps;
@@ -145,14 +124,40 @@ setDefault(function () {
 });
 var stepStatus = ['done', 'active', 'error'];
 export function makeStepsStyles() {
-  return /*#__PURE__*/css("display:flex;&.k-default,&.k-line{", _mapInstanceProperty(stepStatus).call(stepStatus, function (status) {
-    var styles = steps[status];
-    return /*#__PURE__*/css(".k-", status, "{.k-step-inner{color:", styles.headColor, ";border-color:", styles.headInnerBorderColor, "!important;background:", styles.headInnerBgColor, ";}.k-step-main{color:", styles.mainColor, ";}}");
-  }), ";.k-step-head{padding-right:", steps.head.paddingRight, ";}.k-step-inner{width:", steps.head.innerWidth, ";height:", steps.head.innerWidth, ";line-height:calc(", steps.head.innerWidth, " - 2px);border-radius:50%;text-align:center;border:", steps.head.innerBorder, ";}.k-step-icon:before{line-height:calc(", steps.head.innerWidth, " - 2px);}.k-step-main{color:", steps.main.color, ";}.k-step-tail{position:absolute;}.k-step:last-of-type{.k-step-tail{display:none;}}}&.k-simple,&.k-default{text-align:center;height:", steps.height, ";line-height:", steps.height, ";overflow:hidden;.k-step-head,.k-step-main,.k-step-content,.k-step-inner{display:inline-block;}.k-step{white-space:nowrap;}.k-step-wrapper{overflow:hidden;}}&.k-default{background:", steps.bgColor, ";.k-step-tail{top:0;right:calc(-1 * (", steps.height, " / 2 + ", steps.gutter, "));width:calc(", steps.height, " / 2 + ", steps.gutter, ");height:", steps.height, ";overflow:hidden;z-index:1;&:after,&:before{content:'';border-width:calc(", steps.height, " / 2 + ", steps.gutter, ");border-style:solid;border-color:transparent;position:absolute;top:calc(-1 * ", steps.gutter, ");}&:after{border-left-color:", steps.bgColor, ";left:calc(-1 * ", steps.head.paddingRight, ");}&:before{border-left-color:", steps.line.bgColor, ";left:0;}}.k-step-head,.k-step-inner{vertical-align:middle;margin-top:", steps.gapTop, ";}.k-step:not(:first-of-type){padding-left:calc(", steps.height, " / 2 + ", steps.gutter, ");}}&.k-line{.k-step{width:auto!important;&:last-of-type{flex:0 0 auto;.k-step-wrapper{display:flex;}.k-step-title{padding-right:0;}}}.k-step-head{background:", steps.line.bgColor, ";position:relative;display:flex;padding:0;&:before,&:after{content:'';display:block;flex:1;height:1px;background:", theme.color.placeholder, ";top:", steps.line.headTop, ";position:relative;}}.k-step-inner{width:", steps.line.innerWidth, ";height:", steps.line.innerWidth, ";line-height:", steps.line.innerLineHeight, ";font-size:", steps.line.innerFontSize, ";}.k-step-main{position:relative;width:", steps.line.width, ";}.k-step-title{line-height:", steps.head.innerWidth, ";background:", steps.line.bgColor, ";font-size:", steps.line.titleFontSize, ";padding:0;margin-top:", steps.line.titleGopTop, ";}.k-step-content{margin:", steps.line.mainContentGap, ";}.k-step-tail{left:0;right:", steps.head.paddingRight, ";top:calc(", steps.head.innerWidth, " / 2);height:1px;background:", steps.line.tailBgColor, ";}.k-step:first-of-type .k-step-head:before,.k-step:last-of-type .k-step-head:after{background:transparent;}.k-done{.k-step-tail{background:", steps.line.doneTailBgColor, ";}.k-step-head{&:before,&:after{background:", theme.color.primary, ";}}}.k-active{.k-step-head{&:before{background:", theme.color.primary, ";}}}.k-step-icon:before{line-height:", steps.line.iconLineHeight, ";}.k-step-wrapper{display:inline-block!important;text-align:center;}.k-step-tail{right:0;top:", steps.line.tailTop, ";}}&.k-simple{font-size:", steps.simple.fontSize, ";", _mapInstanceProperty(stepStatus).call(stepStatus, function (status) {
-    var styles = steps[status];
-    return /*#__PURE__*/css(".k-", status, "{.k-step-main,.k-step-inner{color:", styles.simpleColor, ";}}");
-  }), ";.k-step,.k-step-main{color:", steps.simple.color, ";}.k-step-head{padding-right:", steps.simple.headPaddingRight, ";vertical-align:top;}}&.k-clickable{.k-done{cursor:pointer;}}");
+  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;}}");
+}
+
+function makeDefaultStyles() {
+  var defaults = steps.default;
+  return /*#__PURE__*/css("text-align:center;height:", defaults.height, ";background:", defaults.bgColor, ";.k-step-wrapper{", center(), ";height:100%;}.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;}}.k-step-tail{position:absolute;top:0;right:calc(-1 * (", defaults.height, " / 2 + ", steps.gap, "));width:calc(", defaults.height, " / 2 + ", steps.gap, ");height:", 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;top:calc(-1 * ", steps.gap, ");}&:after{border-left-color:", defaults.bgColor, ";left:calc(-1 * ", steps.gap, ");}&:before{border-left-color:#fff;left:0;}}.k-step:not(:first-of-type){padding-left:calc(", defaults.height, " / 2 + ", steps.gap, ");}");
+}
+
+function makeLineStyles() {
+  var line = defaults.line;
+  return /*#__PURE__*/css(".k-step{display:flex;}.k-step-wrapper{display:inline-block;text-align:center;position:relative;}.k-step:last-of-type{flex:0 0 auto;}.k-step-mark{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, ";max-width:", line.contentMaxWidth, ";}.k-step-wrapper{&:before,&:after{content:'';display:block;height:1px;background:", line.lineColor, ";width:50%;position:absolute;top:calc(", line.markWidth, " / 2);}&: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:1px;background:", line.lineColor, ";margin-top:calc(", line.markWidth, " / 2);}.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, ";}}");
 }
-export function makeStepStyles() {
-  return /*#__PURE__*/css("position:relative;flex:1;.k-step-icon:before{font-size:", steps.head.iconFontSize, ";}.k-step-title{display:inline-block;padding-right:", steps.main.titlePaddingRight, ";white-space:nowrap;}.k-step-content{font-size:", steps.main.contentFontSize, ";}.k-step-inner,.k-step-main{transition:all ", steps.transition, ";}");
+
+function makeLineCompactStyles() {
+  var line = defaults.line;
+  return /*#__PURE__*/css(".k-step-wrapper{display:inline-flex;text-align:left;&: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:1px;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() {
+  var simple = defaults.simple;
+  return /*#__PURE__*/css(".k-step-mark{width:", simple.markWidth, ";height:", simple.markWidth, ";background:", simple.markBgColor, ";}.k-step-wrapper{font-size:0;&:before,&:after{top:calc(", simple.markWidth, " / 2);}}.k-step-main{font-size:", theme.default.fontSize, ";}.k-step-tail{margin-top:calc(", simple.markWidth, " / 2);}.k-step{&.k-done{.k-step-mark{background:", simple.doneMarkBgColor, ";}}&.k-error{.k-step-mark{background:", simple.errorMarkBgColor, ";}}}");
+}
+
+function center(flex) {
+  if (flex === void 0) {
+    flex = '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) {
+    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.markborder, ";border-radius:50%;vertical-align:top;color:", steps.markColor, ";background:", steps.markBgColor, ";}");
 }

package/es/components/switch/styles.js

@@ -1,68 +1,54 @@
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
 import { css } from '@emotion/css';
 import { theme, setDefault } from '../../styles/theme';
-import { deepDefaults, sizes } from '../../styles/utils';
+import { deepDefaults, sizes, palette } from '../../styles/utils';
 import '../../styles/global';
 var defaults = {
   get transition() {
     return theme.transition.middle;
   },
 
-  bgColor: "#fff",
-  fontSize: "12px",
-
-  get color() {
-    return theme.color.text;
-  },
-
-  checkedBgColor: "#fff",
-  handleBorderRadius: "100%",
-
-  get handleBgColor() {
+  get bgColor() {
     return theme.color.border;
   },
 
-  get border() {
-    return "1px solid " + theme.color.border;
-  },
-
+  fontSize: "12px",
+  color: '#fff',
+  handleBorderRadius: "100%",
+  handleBgColor: '#fff',
   // checked
   checked: {
-    get borderColor() {
-      return theme.color.primary;
-    },
-
-    get color() {
+    get bgColor() {
       return theme.color.primary;
     },
 
-    get bgColor() {
-      return theme.color.primary;
+    get disabledBgColor() {
+      return palette(theme.color.primary, -3);
     }
 
   },
   // default
   default: {
-    width: "36px",
-    height: "18px",
-    padding: "2px"
+    width: "45px",
+    height: "24px",
+    padding: "3px"
   },
   // large
   large: {
-    width: "52px",
-    height: "26px",
-    padding: "2px"
+    width: "58px",
+    height: "30px",
+    padding: "3px"
   },
   // small
   small: {
-    width: "32px",
+    width: "30px",
     height: "16px",
     padding: "2px"
   },
   // mini
   mini: {
-    width: "24px",
-    height: "12px",
+    width: "18px",
+    height: "10px",
     padding: "1px"
   },
 
@@ -79,11 +65,11 @@ setDefault(function () {
   }).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;border:", kswitch.border, ";box-sizing:content-box;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, ";}.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.checkedBgColor, ";transition:background ", kswitch.transition, ";}}&:focus{outline:none;border-color:", kswitch.checked.borderColor, ";}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  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;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, ";}.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{border-color:", kswitch.checked.borderColor, ";.k-switch-on{color:", kswitch.checked.color, ";}.k-switch-handle{background:", kswitch.checked.bgColor, ";}.k-switch-bar,.k-switch-wrapper{background:", kswitch.checkedBgColor, ";}.k-switch-bar{width:100%;}}&.k-disabled{background:", kswitch.disabledBgColor, ";cursor:not-allowed;.k-switch-bar,.k-switch-wrapper{background:", kswitch.disabledBgColor, ";}}&:not(.k-checked){.k-switch-bar,.k-switch-wrapper{border-top-right-radius:0;border-bottom-right-radius:0;}}");
+  }), "&.k-checked{.k-switch-bar,.k-switch-wrapper{background:", kswitch.checked.bgColor, ";}.k-switch-bar{width:100%;}}&.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/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, map as _$ma } from 'intact';
+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 { getClassAndStyleForFixed } from './useFixedColumns';
 import { Dropdown, DropdownMenu, DropdownItem } from '../dropdown';
 import { Button } from '../button';
@@ -14,13 +14,18 @@ import { context as TableContext } from './useColumns';
 import { context as ResizableContext } from './useResizable';
 import { context as FixedColumnsContext } from './useFixedColumns';
 import { stopPropagation } from '../utils';
+import { Input } from '../input';
+import { _$ } from '../../i18n';
 var _$tmp0 = {
   'className': 'ion-android-arrow-dropdown'
 };
 var _$tmp1 = {
-  'className': 'ion-android-arrow-dropup k-asc'
+  'className': 'ion-ios-search'
 };
 var _$tmp2 = {
+  'className': 'ion-android-arrow-dropup k-asc'
+};
+var _$tmp3 = {
   'className': 'ion-android-arrow-dropdown k-desc'
 };
 export default function ($props, $blocks, $__proto__) {
@@ -45,7 +50,9 @@ export default function ($props, $blocks, $__proto__) {
   var _this$group = this.group,
       onSelect = _this$group.onSelect,
       isChecked = _this$group.isChecked,
-      getGroupText = _this$group.getGroupText;
+      getGroupText = _this$group.getGroupText,
+      keywords = _this$group.keywords,
+      filteredGroup = _this$group.filteredGroup;
   return _$cc(TableContext.Consumer, {
     'children': function children(checkType) {
       return _$cc(GroupContext.Consumer, {
@@ -98,17 +105,46 @@ export default function ($props, $blocks, $__proto__) {
                           collision: 'flipfit'
                         },
                         'key': 'dropdown',
+                        'trigger': 'click',
+                        'ev-show': function evShow() {
+                          return keywords.set('');
+                        },
                         'children': [_$cc(Button, {
                           'icon': true,
                           'size': 'mini',
                           'className': 'k-table-group',
-                          'ev-click': stopPropagation,
+                          'ev-click': function evClick(e) {
+                            return e._ignoreSortable = true;
+                          },
                           'children': _$cc(Icon, _$tmp0)
                         }), _$cc(DropdownMenu, {
                           'className': _$cn((_$cn2 = {
                             "k-table-group-dropdown": true
                           }, _$cn2[makeGroupMenuStyles()] = true, _$cn2)),
-                          'children': _$ma(group, function ($value, $key) {
+                          'children': [_$ce(2, 'div', _$cc(Input, {
+                            'size': 'small',
+                            'fluid': true,
+                            'placeholder': _$('请输入关键字'),
+                            'value': keywords.value,
+                            'ev-$change:value': keywords.set,
+                            'clearable': true,
+                            '$blocks': function ($blocks) {
+                              var _$blocks = {},
+                                  __$blocks = _$ex({}, $blocks);
+
+                              return (_$blocks['suffix'] = function ($super) {
+                                return _$cc(Icon, _$tmp1);
+                              }, __$blocks['suffix'] = function ($super, data) {
+                                var block = $blocks['suffix'];
+
+                                var callBlock = function callBlock() {
+                                  return _$blocks['suffix'].call($this, $super, data);
+                                };
+
+                                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) {
                             return _$cc(DropdownItem, {
                               'ev-select': function evSelect() {
                                 return onSelect($value.value, groupValue, onChange);
@@ -122,9 +158,9 @@ export default function ($props, $blocks, $__proto__) {
                                 'children': $value.label
                               }) : _$ce(2, 'span', $value.label, 0)
                             });
-                          }, $this)
+                          }, $this), 4, 'k-table-group-body')]
                         })]
-                      }, 'dropdown') : undefined, sortable ? _$ce(2, 'div', [_$cc(Icon, _$tmp1), _$cc(Icon, _$tmp2)], 4, _$cn((_$cn3 = {
+                      }, 'dropdown') : undefined, sortable ? _$ce(2, 'div', [_$cc(Icon, _$tmp2), _$cc(Icon, _$tmp3)], 4, _$cn((_$cn3 = {
                         'k-column-sort': true
                       }, _$cn3["k-" + type] = type, _$cn3))) : undefined], 0, 'k-table-title')], 0, _$cn(classNameObj), {
                         'style': style,

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

@@ -352,7 +352,7 @@ describe('Table', function () {
             _instance$refs4 = instance.refs, __test1 = _instance$refs4.__test1, __test2 = _instance$refs4.__test2;
             _element$querySelecto8 = element.querySelectorAll('.k-table'), table1 = _element$querySelecto8[0], table2 = _element$querySelecto8[1];
             icon = table1.querySelector('.k-table-group');
-            dispatchEvent(icon, 'mouseenter');
+            dispatchEvent(icon, 'click');
             _context7.next = 7;
             return wait();
 
@@ -370,7 +370,7 @@ describe('Table', function () {
             });
             expect(table1.innerHTML).to.matchSnapshot();
             icon2 = table2.querySelector('.k-table-group');
-            dispatchEvent(icon2, 'mouseenter');
+            dispatchEvent(icon2, 'click');
             _context7.next = 19;
             return wait();