@king-design/vue 3.0.0-beta.1 → 3.0.0

package/components/select/base.vdt.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _flatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/flat";
 import _valuesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/values";
-import { createUnknownComponentVNode as _$cc, createVNode as _$cv, className as _$cn, createElementVNode as _$ce, noop as _$no, map as _$ma } from 'intact-vue-next';
+import { createUnknownComponentVNode as _$cc, createVNode as _$cv, className as _$cn, createElementVNode as _$ce, noop as _$no, map as _$ma, extend as _$ex, EMPTY_OBJ as _$em } from 'intact-vue-next';
 import { TransitionGroup, Transition } from 'intact';
 import { Input } from '../input';
 import { Icon } from '../icon';
@@ -16,6 +16,9 @@ var _$tmp0 = {
   'className': 'ion-load-c',
   'rotate': true
 };
+var _$tmp1 = {
+  'className': 'k-icon-search'
+};
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj,
       _this = this;
@@ -62,6 +65,21 @@ export default function ($props, $blocks, $__proto__) {
   var _this$focusout = this.focusout,
       onFocusout = _this$focusout.onFocusout,
       triggerRef = _this$focusout.triggerRef;
+  var filterInput = filterable ? _$cc(Input, {
+    'className': 'k-select-input',
+    'value': keywords,
+    'ev-$change:value': onInput,
+    'disabled': disabled,
+    'placeholder': !hasValue ? placeholder : '',
+    'ref': inputRef,
+    'autoWidth': true,
+    'inline': true,
+    'size': size,
+    'key': 'filter',
+    'readonly': !show,
+    'waveDisabled': true,
+    'flat': flat
+  }, 'filter', inputRef) : undefined;
   return _$cc(ErrorContext.Consumer, {
     'defaultValue': false,
     'children': function children(isInvalid) {
@@ -124,7 +142,7 @@ export default function ($props, $blocks, $__proto__) {
 
               return block ? block.call($this, callBlock, data) : callBlock();
             }, __$blocks['value'](_$no, [value, label])), 0, 'k-select-value c-ellipsis', null, 'value') : _$ce(2, 'div', [(_$blocks['values'] = function ($super) {
-              return label && label.length ? _$cc(Tags, {
+              return label && label.length || filterable ? _$cc(Tags, {
                 'nowrap': nowrap,
                 'size': size,
                 'draggable': draggable,
@@ -148,7 +166,23 @@ export default function ($props, $blocks, $__proto__) {
                       return block ? block.call($this, callBlock, data) : callBlock();
                     }, __$blocks['value'](_$no, [value[$key], $label]))
                   }, isStringOrNumber($label) ? $label : isStringOrNumber(value[$key]) ? value[$key] : $key);
-                }, $this)
+                }, $this),
+                '$blocks': function ($blocks) {
+                  var _$blocks = {},
+                      __$blocks = _$ex({}, $blocks);
+
+                  return (_$blocks['append'] = function ($super) {
+                    return filterInput;
+                  }, __$blocks['append'] = function ($super, data) {
+                    var block = $blocks['append'];
+
+                    var callBlock = function callBlock() {
+                      return _$blocks['append'].call($this, $super, data);
+                    };
+
+                    return block ? block.call($this, callBlock, data) : callBlock();
+                  }), __$blocks;
+                }.call($this, _$em)
               }) : undefined;
             }, __$blocks['values'] = function ($super, data) {
               var block = _valuesInstanceProperty($blocks);
@@ -158,21 +192,7 @@ export default function ($props, $blocks, $__proto__) {
               };
 
               return block ? block.call($this, callBlock, data) : callBlock();
-            }, _valuesInstanceProperty(__$blocks).call(__$blocks, _$no, [value, label])), filterable ? _$cc(Input, {
-              'className': 'k-select-input',
-              'value': keywords,
-              'ev-$change:value': onInput,
-              'disabled': disabled,
-              'placeholder': !hasValue ? placeholder : '',
-              'ref': inputRef,
-              'autoWidth': true,
-              'inline': true,
-              'size': size,
-              'key': 'filter',
-              'readonly': !show,
-              'waveDisabled': true,
-              'flat': flat
-            }, 'filter', inputRef) : undefined], 0, 'k-select-values', null, 'values')
+            }, _valuesInstanceProperty(__$blocks).call(__$blocks, _$no, [value, label])), $blocks && _valuesInstanceProperty($blocks) ? filterInput : undefined], 0, 'k-select-values', null, 'values')
           })], 0, 'k-select-main'), !hideIcon || clearable || loading || $blocks.suffix ? _$ce(2, 'span', [clearable && !disabled ? _$cc(Icon, {
             'className': _$cn({
               "k-select-clear ion-ios-close": true,
@@ -181,8 +201,8 @@ export default function ($props, $blocks, $__proto__) {
             'ev-click': _this.clear,
             'hoverable': true
           }) : undefined, _$ce(2, 'span', (_$blocks['suffix'] = function ($super) {
-            return loading ? _$cc(Icon, _$tmp0) : !hideIcon ? _$cc(Icon, {
-              'className': 'k-select-arrow ion-ios-arrow-down',
+            return loading ? _$cc(Icon, _$tmp0) : !hideIcon ? filterable && show ? _$cc(Icon, _$tmp1) : _$cc(Icon, {
+              'className': 'k-select-arrow k-icon-down',
               'disabled': $props.isDisableArrow
             }) : undefined;
           }, __$blocks['suffix'] = function ($super, data) {

package/components/select/index.spec.js

@@ -473,7 +473,7 @@ describe('Select', function () {
     }, _callee9);
   })));
   it('Searchable with multiple', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
-    var _mount11, instance, element, _element$querySelecto6, select, dropdown, _dropdown$querySelect2, selectAll, toggleSelect, unselectAll, _dropdown$querySelect3, confirm, cancel, input;
+    var _mount11, instance, element, _element$querySelecto6, select, dropdown, _dropdown$querySelect2, selectAll, toggleSelect, unselectAll, _dropdown$querySelect3, cancel, confirm, input;
 
     return _regeneratorRuntime.wrap(function _callee10$(_context12) {
       while (1) {
@@ -488,44 +488,56 @@ describe('Select', function () {
           case 5:
             dropdown = getElement('.k-select-menu');
             _dropdown$querySelect2 = dropdown.querySelectorAll('.k-select-op .k-btn'), selectAll = _dropdown$querySelect2[0], toggleSelect = _dropdown$querySelect2[1], unselectAll = _dropdown$querySelect2[2];
-            _dropdown$querySelect3 = dropdown.querySelectorAll('.k-select-footer .k-btn'), confirm = _dropdown$querySelect3[0], cancel = _dropdown$querySelect3[1]; // select all
+            _dropdown$querySelect3 = dropdown.querySelectorAll('.k-select-footer .k-btn'), cancel = _dropdown$querySelect3[0], confirm = _dropdown$querySelect3[1]; // select all
 
             selectAll.click();
             confirm.click();
+            _context12.next = 12;
+            return wait();
+
+          case 12:
             expect(instance.get('days')).have.length(7); // unselect all
 
             select.click();
-            _context12.next = 14;
+            _context12.next = 16;
             return wait();
 
-          case 14:
+          case 16:
             unselectAll.click();
             confirm.click();
+            _context12.next = 20;
+            return wait();
+
+          case 20:
             expect(instance.get('days')).have.length(0); // toggle select
 
             select.click();
-            _context12.next = 20;
+            _context12.next = 24;
             return wait();
 
-          case 20:
+          case 24:
             instance.set('days', ['Monday', 'Tuesday']);
-            _context12.next = 23;
+            _context12.next = 27;
             return wait();
 
-          case 23:
+          case 27:
             input = dropdown.querySelector('.k-input-inner');
             input.value = 's';
             dispatchEvent(input, 'input');
-            _context12.next = 28;
+            _context12.next = 32;
             return wait();
 
-          case 28:
+          case 32:
             toggleSelect.click();
             confirm.click();
+            _context12.next = 36;
+            return wait();
+
+          case 36:
             expect(instance.get('days')).have.length(5);
             expect(instance.get('days')).include('Monday');
 
-          case 32:
+          case 38:
           case "end":
             return _context12.stop();
         }

package/components/select/menu.vdt.js

@@ -11,7 +11,7 @@ import { Icon } from '../icon';
 import { context } from './useSearchable';
 import { Tabs, Tab } from '../tabs';
 var _$tmp0 = {
-  'className': 'ion-ios-search'
+  'className': 'k-icon-search'
 };
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
@@ -117,14 +117,14 @@ export default function ($props, $blocks, $__proto__) {
         'ev-click': unselectAll,
         'children': _$('清空')
       })], 4, 'k-select-op') : undefined], 0, 'k-select-header'), _$ce(2, 'div', children, 0, 'k-select-body'), multiple ? _$ce(2, 'div', [_$cc(Button, {
+        'size': 'small',
+        'ev-click': this.select.hide,
+        'children': _$('取消')
+      }), _$cc(Button, {
         'type': 'primary',
         'size': 'small',
         'ev-click': confirm,
         'children': _$('确定')
-      }), _$cc(Button, {
-        'size': 'small',
-        'ev-click': this.select.hide,
-        'children': _$('取消')
       })], 4, 'k-select-footer') : undefined]
     });
   }

package/components/select/option.vdt.js

@@ -7,7 +7,8 @@ import { Icon } from '../icon';
 import { Checkbox } from '../checkbox';
 import { context } from './useSearchable';
 var _$tmp0 = {
-  'className': 'k-select-checkmark ion-ios-checkmark-empty'
+  'className': 'k-select-checkmark ion-ios-checkmark-empty',
+  'color': 'primary'
 };
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj,

package/components/select/styles.js

@@ -6,7 +6,7 @@ import { deepDefaults, sizes, getRight, getLeft } from '../../styles/utils';
 import '../../styles/global';
 var defaults = deepDefaults({
   get transition() {
-    return theme.transition.middle;
+    return theme.transition.large;
   },
 
   width: "300px",
@@ -174,7 +174,7 @@ setDefault(function () {
   }).select;
 });
 export default function makeStyles() {
-  return /*#__PURE__*/css("display:inline-flex;align-items:center;vertical-align:middle;position:relative;width:", select.width, ";cursor:pointer;outline:none;border:", select.border, ";background:", select.bgColor, ";transition:border ", select.transition, ",background ", select.transition, ",box-shadow ", select.transition, ";border-radius:", select.borderRadius, ";.k-select-main{flex:1;min-width:0;}.k-select-prefix,.k-select-suffix{position:relative;}.k-select-suffix{margin-left:", select.suffixGap, ";}.k-select-placeholder{color:", select.placeholderColor, ";user-select:none;}.k-input .k-input-inner{background:transparent;}&.k-fluid{width:100%;}.k-select-clear{opacity:0;transition:opacity ", select.transition, ",color ", select.transition, "!important;pointer-events:none;position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%, -50%);}&:hover{border:", select.hoverBorder, ";.k-select-clear.k-show{opacity:1;pointer-events:all;+.k-select-suffix-icon{opacity:0;}}}.k-select-suffix-icon{display:inline-block;transition:opacity ", select.transition, ";}.k-select-arrow{display:inline-block;transition:transform ", select.transition, ";}&.k-dropdown-open{border:", select.focusBorder, ";.k-select-arrow{transform:rotateX(180deg);}}&:focus{outline:none;border:", select.focusBorder, ";}.k-tags{padding:3px 0;}.k-tag{word-break:break-word;height:auto;}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  return /*#__PURE__*/css("display:inline-flex;align-items:center;vertical-align:middle;position:relative;width:", select.width, ";cursor:pointer;outline:none;border:", select.border, ";background:", select.bgColor, ";transition:border ", select.transition, ",background ", select.transition, ",box-shadow ", select.transition, ";border-radius:", select.borderRadius, ";.k-select-main{flex:1;min-width:0;}.k-select-prefix,.k-select-suffix{display:flex;align-items:center;position:relative;}.k-select-suffix{margin-left:", select.suffixGap, ";}.k-select-placeholder{color:", select.placeholderColor, ";user-select:none;}.k-input .k-input-inner{background:transparent;}&.k-fluid{width:100%;}.k-select-clear{opacity:0;transition:opacity ", select.transition, ",color ", select.transition, "!important;pointer-events:none;position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%, -50%);}&:hover{border:", select.hoverBorder, ";.k-select-clear.k-show{opacity:1;pointer-events:all;+.k-select-suffix-icon{opacity:0;}}}.k-select-suffix-icon{display:inline-flex;align-items:center;transition:opacity ", select.transition, ";}.k-select-arrow{display:inline-block;transition:transform ", select.transition, ";}&.k-dropdown-open{border:", select.focusBorder, ";.k-select-arrow{transform:rotateX(180deg);}}&:focus{outline:none;border:", select.focusBorder, ";}.k-tags{padding:3px 0;}.k-tag{word-break:break-word;height:auto;max-width:calc(100% - ", getRight(select.tag.margin), " - 1px);}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = select[size];
     var className = /*#__PURE__*/css("font-size:", styles.fontSize, ";min-height:", styles.height, ";padding:", styles.padding, ";");
     if (size === 'default') return className;

package/components/spinner/index.vdt.js

@@ -6,16 +6,16 @@ import { Input } from '../input';
 import { getRestProps } from '../utils';
 import { makeStyles } from './styles';
 var _$tmp0 = {
-  'className': 'k-spinner-icon k-icon-minus-small'
+  'className': 'k-spinner-icon k-icon-minus'
 };
 var _$tmp1 = {
-  'className': 'k-spinner-icon k-icon-arrow-down'
+  'className': 'k-spinner-icon k-icon-down'
 };
 var _$tmp2 = {
-  'className': 'k-spinner-icon k-icon-add-small'
+  'className': 'k-spinner-icon k-icon-add'
 };
 var _$tmp3 = {
-  'className': 'k-spinner-icon k-icon-arrow-up'
+  'className': 'k-spinner-icon k-icon-up'
 };
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;

package/components/spinner/styles.js

@@ -70,7 +70,7 @@ setDefault(function () {
   }).spinner;
 });
 export function makeStyles() {
-  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) {
+  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-wrapper{border:none;border-radius:0;&:hover{border:none;}}&.k-focus .k-input-wrapper{border:none;}.k-input-inner{text-align:center;}}.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: " + theme[size].height + ";\n                        width: " + spinner.vertical[size].width + ";\n                    }\n                ";
     };
@@ -80,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% - 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) {
+  }), ";.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{.k-input-wrapper{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/components/steps/step.vdt.js

@@ -5,11 +5,11 @@ import { getRestProps, addStyle } from '../utils';
 import { context as StepsContext } from './context';
 import { Icon } from '../icon';
 var _$tmp0 = {
-  'className': 'k-icon-close-big',
+  'className': 'k-icon-close-bold',
   'color': 'danger'
 };
 var _$tmp1 = {
-  'className': 'k-icon-check',
+  'className': 'k-icon-check-bold',
   'color': 'primary'
 };
 export default function ($props, $blocks, $__proto__) {

package/components/steps/styles.js

@@ -1,7 +1,7 @@
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
 import { css } from '@emotion/css';
 import { theme, setDefault } from '../../styles/theme';
-import { deepDefaults } from '../../styles/utils';
+import { deepDefaults, palette } from '../../styles/utils';
 import '../../styles/global';
 var defaults = {
   gap: '10px',
@@ -45,6 +45,10 @@ var defaults = {
       return theme.color.primary;
     },
 
+    get markHoverBgColor() {
+      return palette(theme.color.primary, -4);
+    },
+
     markBgColor: '#fff',
 
     get mainColor() {
@@ -140,7 +144,7 @@ setDefault(function () {
 });
 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;}}", makeVerticalStyles(), ";");
+  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(), ";");
 }
 
 function makeDefaultStyles() {

package/components/switch/styles.js

@@ -12,6 +12,10 @@ var defaults = {
     return theme.color.border;
   },
 
+  get hoverBgColor() {
+    return theme.color.placeholder;
+  },
+
   fontSize: "12px",
   color: '#fff',
   handleBorderRadius: "100%",
@@ -24,6 +28,10 @@ var defaults = {
 
     get disabledBgColor() {
       return palette(theme.color.primary, -3);
+    },
+
+    get hoverBgColor() {
+      return theme.color.linkHover;
     }
 
   },
@@ -65,11 +73,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;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) {
+  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%;}}&.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, ";}}}");
+  }), "&.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.vdt.js

@@ -5,7 +5,7 @@ import { Button } from '../button';
 import { Icon } from '../icon';
 import { getTextByChildren } from '../utils';
 var _$tmp0 = {
-  'className': 'ion-ios-arrow-right',
+  'className': 'k-icon-right',
   'size': 'small'
 };
 export default function ($props, $blocks, $__proto__) {

package/components/table/column.vdt.js

@@ -6,7 +6,7 @@ import { Button } from '../button';
 import { Icon } from '../icon';
 import { Checkbox } from '../checkbox';
 import { makeGroupMenuStyles } from './styles';
-import { isStringOrNumber, get } from 'intact-shared';
+import { isStringOrNumber, get, isArray } from 'intact-shared';
 import { context as GroupContext } from './useGroup';
 import { context as SortableContext } from './useSortable';
 import { linkEvent } from 'intact';
@@ -17,16 +17,15 @@ import { stopPropagation } from '../utils';
 import { Input } from '../input';
 import { _$ } from '../../i18n';
 var _$tmp0 = {
-  'className': 'ion-android-arrow-dropdown'
+  'className': 'k-icon-search'
 };
 var _$tmp1 = {
-  'className': 'ion-ios-search'
+  'className': 'k-icon-up k-asc',
+  'size': 'mini'
 };
 var _$tmp2 = {
-  'className': 'ion-android-arrow-dropup k-asc'
-};
-var _$tmp3 = {
-  'className': 'ion-android-arrow-dropdown k-desc'
+  'className': 'k-icon-down k-desc',
+  'size': 'mini'
 };
 export default function ($props, $blocks, $__proto__) {
   var _this = this;
@@ -50,9 +49,14 @@ export default function ($props, $blocks, $__proto__) {
   var _this$group = this.group,
       onSelect = _this$group.onSelect,
       isChecked = _this$group.isChecked,
-      getGroupText = _this$group.getGroupText,
       keywords = _this$group.keywords,
-      filteredGroup = _this$group.filteredGroup;
+      filteredGroup = _this$group.filteredGroup,
+      onShow = _this$group.onShow,
+      reset = _this$group.reset,
+      confirm = _this$group.confirm,
+      dropdownRef = _this$group.dropdownRef,
+      localGroupValue = _this$group.localGroupValue,
+      isEmptyValue = _this$group.isEmptyValue;
   return _$cc(TableContext.Consumer, {
     'children': function children(checkType) {
       return _$cc(GroupContext.Consumer, {
@@ -80,7 +84,6 @@ export default function ($props, $blocks, $__proto__) {
                         'k-column-sortable': sortable
                       }, _classNameObj[className] = className, _classNameObj);
                       var groupValue = currentGroup && currentGroup[key];
-                      var groupText = getGroupText(groupValue);
                       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', {
@@ -88,7 +91,7 @@ export default function ($props, $blocks, $__proto__) {
                           e._vNode = _this.$vNode;
                           onStart(e);
                         }
-                      }) : undefined, _$ce(2, 'div', [_$ce(2, 'div', [(_$blocks['title'] = function ($super) {
+                      }) : undefined, _$ce(2, 'div', [_$ce(2, 'div', (_$blocks['title'] = function ($super) {
                         return title;
                       }, __$blocks['title'] = function ($super, data) {
                         var block = $blocks['title'];
@@ -98,7 +101,7 @@ export default function ($props, $blocks, $__proto__) {
                         };
 
                         return block ? block.call($this, callBlock, data) : callBlock();
-                      }, __$blocks['title'](_$no)), groupText], 0, 'k-table-title-text c-ellipsis'), group ? _$cc(Dropdown, {
+                      }, __$blocks['title'](_$no)), 0, 'k-table-title-text c-ellipsis'), group ? _$cc(Dropdown, {
                         'position': {
                           my: 'center top',
                           at: 'center bottom+5',
@@ -107,16 +110,16 @@ export default function ($props, $blocks, $__proto__) {
                         'key': 'dropdown',
                         'trigger': 'click',
                         'ev-show': function evShow() {
-                          return keywords.set('');
+                          return onShow(groupValue);
                         },
-                        'children': [_$cc(Button, {
-                          'icon': true,
-                          'size': 'mini',
-                          'className': 'k-table-group',
+                        'ref': dropdownRef,
+                        'children': [_$cc(Icon, {
+                          'className': 'k-icon-down-squared k-table-group',
                           'ev-click': function evClick(e) {
                             return e._ignoreSortable = true;
                           },
-                          'children': _$cc(Icon, _$tmp0)
+                          'hoverable': true,
+                          'color': isEmptyValue(groupValue) ? null : 'primary'
                         }), _$cc(DropdownMenu, {
                           'className': _$cn((_$cn2 = {
                             "k-table-group-dropdown": true
@@ -133,7 +136,7 @@ export default function ($props, $blocks, $__proto__) {
                                   __$blocks = _$ex({}, $blocks);
 
                               return (_$blocks['suffix'] = function ($super) {
-                                return _$cc(Icon, _$tmp1);
+                                return _$cc(Icon, _$tmp0);
                               }, __$blocks['suffix'] = function ($super, data) {
                                 var block = $blocks['suffix'];
 
@@ -147,24 +150,39 @@ export default function ($props, $blocks, $__proto__) {
                           }), 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);
+                                return onSelect($value.value, onChange);
                               },
                               'hideOnSelect': !multiple,
                               'className': _$cn({
-                                'k-active': checked = isChecked($value.value, groupValue)
+                                'k-active': checked = isChecked($value.value)
                               }),
                               'children': multiple ? _$cc(Checkbox, {
                                 'value': checked,
                                 'children': $value.label
                               }) : _$ce(2, 'span', $value.label, 0)
                             });
-                          }, $this), 4, 'k-table-group-body')]
+                          }, $this), 4, 'k-table-group-body'), multiple ? _$ce(2, 'div', [_$cc(Button, {
+                            'size': 'small',
+                            'disabled': isEmptyValue(localGroupValue.value),
+                            'type': 'secondary',
+                            'ev-click': function evClick() {
+                              return reset(onChange);
+                            },
+                            'children': '重置'
+                          }), _$cc(Button, {
+                            'type': 'primary',
+                            'size': 'small',
+                            'ev-click': function evClick() {
+                              return confirm(onChange);
+                            },
+                            'children': '确定'
+                          })], 4, 'k-table-group-footer') : undefined]
                         })]
-                      }, 'dropdown') : undefined, sortable ? _$ce(2, 'div', [_$cc(Icon, _$tmp2), _$cc(Icon, _$tmp3)], 4, _$cn((_$cn3 = {
+                      }, '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), {
                         'style': style,
-                        'title': isStringOrNumber(title) ? title + (groupText || '') : null,
+                        'title': isStringOrNumber(title) ? title : null,
                         'ev-click': sortable ? linkEvent(key, onChangeSort) : null,
                         'colspan': cols,
                         'rowspan': rows

package/components/table/index.spec.js

@@ -365,7 +365,7 @@ describe('Table', function () {
     }, _callee6);
   })));
   it('group', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
-    var _mount7, instance, element, _instance$refs4, __test1, __test2, _element$querySelecto8, table1, table2, icon, dropdown, item, icon2, dropdown2, _dropdown2$querySelec, item1, item2, newDropdown;
+    var _mount7, instance, element, _instance$refs4, __test1, __test2, _element$querySelecto8, table1, table2, icon, dropdown, item, icon2, dropdown2, _dropdown2$querySelec, item1, item2, _dropdown2$querySelec2, reset, confirm, newDropdown;
 
     return _regeneratorRuntime.wrap(function _callee7$(_context7) {
       while (1) {
@@ -407,7 +407,7 @@ describe('Table', function () {
 
           case 25:
             expect(instance.get('multipleGroup')).to.eql({
-              status: ['active']
+              status: []
             });
             expect(table2.innerHTML).to.matchSnapshot();
             item2.click();
@@ -415,24 +415,55 @@ describe('Table', function () {
             return wait();
 
           case 30:
+            expect(instance.get('multipleGroup')).to.eql({
+              status: []
+            }); // click confirm
+
+            _dropdown2$querySelec2 = dropdown2.querySelectorAll('.k-table-group-footer .k-btn'), reset = _dropdown2$querySelec2[0], confirm = _dropdown2$querySelec2[1];
+            confirm.click();
+            _context7.next = 35;
+            return wait();
+
+          case 35:
             expect(instance.get('multipleGroup')).to.eql({
               status: ['active', 'stopped']
             });
-            expect(table2.innerHTML).to.matchSnapshot(); // update group
+            expect(table2.innerHTML).to.matchSnapshot(); // click reset
+
+            dispatchEvent(icon2, 'click');
+            _context7.next = 40;
+            return wait();
+
+          case 40:
+            expect(dropdown2.innerHTML).to.matchSnapshot();
+            reset.click();
+            _context7.next = 44;
+            return wait();
+
+          case 44:
+            expect(dropdown2.innerHTML).to.matchSnapshot();
+            confirm.click();
+            _context7.next = 48;
+            return wait();
+
+          case 48:
+            expect(instance.get('multipleGroup')).to.eql({
+              status: []
+            }); // update group
 
             instance.set('statusGroup', [{
               label: 'label',
               value: 'value'
             }]);
             dispatchEvent(icon, 'click');
-            _context7.next = 36;
+            _context7.next = 53;
             return wait(500);
 
-          case 36:
+          case 53:
             newDropdown = getElement('.k-table-group-dropdown');
             expect(newDropdown.innerHTML).to.matchSnapshot();
 
-          case 38:
+          case 55:
           case "end":
             return _context7.stop();
         }