@king-design/react 3.0.0-beta.1 → 3.0.0-beta.2

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

@@ -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/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,37 @@ 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, {
+                            'type': 'none',
+                            'size': 'small',
+                            'disabled': isEmptyValue(localGroupValue.value),
+                            'ev-click': reset,
+                            '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();
         }

package/components/table/styles.js

@@ -31,6 +31,10 @@ var defaults = {
       return theme.color.bg;
     },
 
+    get color() {
+      return theme.color.lightBlack;
+    },
+
     padding: "0 5px 0 12px",
     fontSize: "12px",
     fontWeight: "bold",
@@ -51,10 +55,9 @@ var defaults = {
   stripeBgColor: '#f9f9fc',
   // group
   group: {
-    width: "14px",
-    gap: "10px",
-    color: "#a6a6a6",
+    gap: "8px",
     menuMaxHeight: '200px',
+    menuMinWidth: '200px',
 
     get activeColor() {
       return theme.color.primary;
@@ -70,9 +73,13 @@ var defaults = {
   // sort
   sort: {
     iconHeight: "7px",
-    gap: "10px",
-    color: "#d0d5d9",
-    disabledColor: "#ddd"
+    gap: "8px",
+
+    // color: `#d0d5d9`,
+    get enabledColor() {
+      return theme.color.primary;
+    }
+
   },
   expandBgColor: '#fdfcff',
 
@@ -95,10 +102,10 @@ setDefault(function () {
   }).table;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("font-size:", table.fontSize, ";color:", table.color, ";position:relative;z-index:0;.k-table-wrapper{border-bottom:", table.border, ";overflow:auto;border-radius:", table.borderRadius, ";}table{width:100%;border-spacing:0;table-layout:fixed;td,th{transition:all ", table.transition, ";}}thead{text-align:", table.thead.textAlign, ";font-size:", table.thead.fontSize, ";font-weight:", table.thead.fontWeight, ";position:sticky;top:0;z-index:2;tr{height:", table.thead.height, ";&:not(:last-of-type) th{border-bottom:", table.border, ";}}}th{padding:", table.thead.padding, ";position:relative;background:", table.thead.bgColor, ";line-height:normal;&:before{content:'';height:", table.thead.delimiterHeight, ";position:absolute;background-color:", table.thead.delimiterColor, ";width:1px;left:1px;top:50%;transform:translateY(-50%);}&:first-of-type:before{display:none;}}.k-table-title{display:inline-flex;align-items:center;max-width:100%;color:", theme.color.lightBlack, ";}.k-table-title-text{flex:1;}tbody{tr{&:hover td{background:", table.tbody.hoverBgcolor, ";}&:last-of-type td{border-bottom-color:transparent;}}}td{padding:", table.tbody.padding, ";border-bottom:", table.border, ";background:", table.bgColor, ";word-wrap:break-word;}.k-fixed-left,.k-fixed-right{position:sticky;z-index:1;&:after{content:'';display:block;transition:box-shadow ", table.transition, ";position:absolute;top:0;bottom:0px;width:10px;pointer-events:none;}}.k-fixed-left:after{right:-11px;}.k-fixed-right:after{left:-11px;}&.k-scroll-left .k-fixed-right:after{box-shadow:", table.fixRightShadow, ";}&.k-scroll-right .k-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}&.k-scroll-middle{.k-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}.k-fixed-right:after{box-shadow:", table.fixRightShadow, ";}}.k-fixed-right+.k-fixed-right:after{display:none;}.k-table-affix-header{position:sticky;top:0;left:0;.k-affix-wrapper{overflow:hidden;}&.k-fixed{position:relative;}}&.k-border,&.k-grid{.k-table-wrapper{border-top:", table.border, ";border-left:", table.border, ";border-right:", table.border, ";}}&.k-grid{td:not(:last-of-type),th:not(:last-of-type){border-right:", table.border, ";}th:before{display:none;}}&.k-stripe{tr:nth-child(even):not(:hover) td{background:", table.stripeBgColor, ";}}.k-table-group{width:", table.group.width, "!important;height:", table.group.width, "!important;margin-left:", table.group.gap, ";position:relative;color:", table.group.color, ";&:hover{color:", theme.color.primary, ";}.k-icon{transition:transform ", table.transition, ";}&.k-dropdown-open .k-icon{transform:rotate(180deg);}}.k-table-check{.k-checkbox,.k-radio{position:relative;top:-1px;}}.k-column-sortable{cursor:pointer;}.k-column-sort{.k-icon{display:block;height:", _sortInstanceProperty(table).iconHeight, ";line-height:", _sortInstanceProperty(table).iconHeight, ";margin-left:", _sortInstanceProperty(table).gap, ";color:", _sortInstanceProperty(table).color, ";}&.k-asc .k-icon.k-desc,&.k-desc .k-icon.k-asc{color:", _sortInstanceProperty(table).disabledColor, ";}}.k-table-spin.k-overlay{z-index:2;}.k-table-empty{text-align:center;}tr.k-expand{td{padding:0;background:#fdfcff;}}&.k-with-expand{tr:not(.k-expand){td{border-bottom:none;}}}.k-table-expand{border-top:", table.border, ";box-sizing:content-box;}tbody tr.k-selected td{background:", table.selectedBgColor, ";}.k-table-arrow{margin-right:", table.arrow.gap, ";transition:transform ", table.transition, ";position:relative;top:-1px;}tr.k-spreaded{.k-table-arrow{transform:rotate(90deg);}}.k-table-resize{height:100%;width:", table.resizeWidth, ";position:absolute;top:0;left:-1px;cursor:ew-resize;}tr.k-dragging{opacity:", table.draggingOpacity, ";}.k-table-scrollbar{overflow-x:auto;overflow-y:hidden;}.k-table-scrollbar-inner{height:1px;}", _mapInstanceProperty(aligns).call(aligns, function (type) {
+  return /*#__PURE__*/css("font-size:", table.fontSize, ";color:", table.color, ";position:relative;z-index:0;.k-table-wrapper{border-bottom:", table.border, ";overflow:auto;border-radius:", table.borderRadius, ";}table{width:100%;border-spacing:0;table-layout:fixed;td,th{transition:all ", table.transition, ";}}thead{text-align:", table.thead.textAlign, ";font-size:", table.thead.fontSize, ";font-weight:", table.thead.fontWeight, ";position:sticky;top:0;z-index:2;tr{height:", table.thead.height, ";&:not(:last-of-type) th{border-bottom:", table.border, ";}}}th{padding:", table.thead.padding, ";position:relative;background:", table.thead.bgColor, ";line-height:normal;&:before{content:'';height:", table.thead.delimiterHeight, ";position:absolute;background-color:", table.thead.delimiterColor, ";width:1px;left:1px;top:50%;transform:translateY(-50%);}&:first-of-type:before{display:none;}}.k-table-title{display:inline-flex;align-items:center;max-width:100%;color:", table.thead.color, ";}.k-table-title-text{flex:1;display:inline-flex;}tbody{tr{&:hover td{background:", table.tbody.hoverBgcolor, ";}&:last-of-type td{border-bottom-color:transparent;}}}td{padding:", table.tbody.padding, ";border-bottom:", table.border, ";background:", table.bgColor, ";word-wrap:break-word;}.k-fixed-left,.k-fixed-right{position:sticky;z-index:1;&:after{content:'';display:block;transition:box-shadow ", table.transition, ";position:absolute;top:0;bottom:0px;width:10px;pointer-events:none;}}.k-fixed-left:after{right:-11px;}.k-fixed-right:after{left:-11px;}&.k-scroll-left .k-fixed-right:after{box-shadow:", table.fixRightShadow, ";}&.k-scroll-right .k-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}&.k-scroll-middle{.k-fixed-left:after{box-shadow:", table.fixLeftShadow, ";}.k-fixed-right:after{box-shadow:", table.fixRightShadow, ";}}.k-fixed-right+.k-fixed-right:after{display:none;}.k-table-affix-header{position:sticky;top:0;left:0;.k-affix-wrapper{overflow:hidden;}&.k-fixed{position:relative;}}&.k-border,&.k-grid{.k-table-wrapper{border-top:", table.border, ";border-left:", table.border, ";border-right:", table.border, ";}}&.k-grid{td:not(:last-of-type),th:not(:last-of-type){border-right:", table.border, ";}th:before{display:none;}}&.k-stripe{tr:nth-child(even):not(:hover) td{background:", table.stripeBgColor, ";}}.k-table-group{margin-left:", table.group.gap, ";}.k-table-check{.k-checkbox,.k-radio{position:relative;top:-1px;}}.k-column-sortable{cursor:pointer;}.k-column-sort{.k-icon{display:block;height:", _sortInstanceProperty(table).iconHeight, ";line-height:", _sortInstanceProperty(table).iconHeight, ";margin:0 0 1px ", _sortInstanceProperty(table).gap, ";}&.k-desc .k-icon.k-desc,&.k-asc .k-icon.k-asc{color:", _sortInstanceProperty(table).enabledColor, ";}}.k-table-spin.k-overlay{z-index:2;}.k-table-empty{text-align:center;}tr.k-expand{td{padding:0;background:#fdfcff;}}&.k-with-expand{tr:not(.k-expand){td{border-bottom:none;}}}.k-table-expand{border-top:", table.border, ";box-sizing:content-box;}tbody tr.k-selected td{background:", table.selectedBgColor, ";}.k-table-arrow{margin-right:", table.arrow.gap, ";transition:transform ", table.transition, ";position:relative;top:-1px;}tr.k-spreaded{.k-table-arrow{transform:rotate(90deg);}}.k-table-resize{height:100%;width:", table.resizeWidth, ";position:absolute;top:0;left:-1px;cursor:ew-resize;}tr.k-dragging{opacity:", table.draggingOpacity, ";}.k-table-scrollbar{overflow-x:auto;overflow-y:hidden;}.k-table-scrollbar-inner{height:1px;}", _mapInstanceProperty(aligns).call(aligns, function (type) {
     return /*#__PURE__*/css(".k-align-", type, "{text-align:", type, ";}");
   }), ">.k-pagination{margin:16px 0;}");
 }
 export function makeGroupMenuStyles() {
-  return /*#__PURE__*/css("max-height:", table.group.menuMaxHeight, ";overflow:auto;.k-dropdown-item.k-active{color:", table.group.activeColor, ";}.k-table-group-header{padding:", table.group.headerPadding, ";border-bottom:", table.group.headerBorder, ";}");
+  return /*#__PURE__*/css("max-height:", table.group.menuMaxHeight, ";min-width:", table.group.menuMinWidth, "!important;overflow:auto;.k-dropdown-item.k-active{color:", table.group.activeColor, ";}.k-table-group-header{padding:", table.group.headerPadding, ";border-bottom:", table.group.headerBorder, ";}.k-table-group-footer{text-align:right;border-top:", table.group.headerBorder, ";padding:8px;.k-btn{margin-left:8px;}}");
 }

package/components/table/useGroup.d.ts

@@ -1,4 +1,5 @@
 import type { TableColumnGroupItem } from './column';
+import type { Dropdown } from '../dropdown';
 declare type ContextValue = {
     groupValue: any;
     onChange: (key: string, groupValue: any) => void;
@@ -8,10 +9,15 @@ export declare const context: {
     Consumer: import("intact").ComponentConstructor<import("intact").Component<import("../context").ConsumerProps<ContextValue>, {}, {}, {}>>;
 };
 export declare function useGroup(): {
-    onSelect: (value: any, groupValue: any, onChange: ContextValue['onChange']) => void;
-    isChecked: (value: any, groupValue: any) => any;
-    getGroupText: (groupValue: any) => string | null;
+    onSelect: (value: any, onChange: ContextValue['onChange']) => void;
+    isChecked: (value: any) => any;
     keywords: import("../../hooks/useState").State<string>;
     filteredGroup: import("../../hooks/useState").State<TableColumnGroupItem[] | undefined>;
+    onShow: (groupValue: any) => void;
+    reset: () => void;
+    confirm: (onChange: ContextValue['onChange']) => void;
+    dropdownRef: import("intact").RefObject<Dropdown>;
+    localGroupValue: import("../../hooks/useState").State<any>;
+    isEmptyValue: (groupValue: any) => boolean | undefined;
 };
 export {};

package/components/table/useGroup.js

@@ -1,9 +1,8 @@
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js/instance/filter";
 import _trimInstanceProperty from "@babel/runtime-corejs3/core-js/instance/trim";
-import { useInstance } from 'intact-react';
-import { isNullOrUndefined } from 'intact-shared';
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js/instance/filter";
+import { useInstance, createRef } from 'intact-react';
+import { isArray } from 'intact-shared';
 import { toggleArray } from '../utils';
 import { createContext } from '../context';
 import { useState, watchState } from '../../hooks/useState';
@@ -12,26 +11,37 @@ export function useGroup() {
   var instance = useInstance();
   var keywords = useState('');
   var filteredGroup = useState(instance.get('group'));
+  var localGroupValue = useState(null);
+  var dropdownRef = createRef();
   instance.on('$receive:group', function (group) {
     return filteredGroup.set(group);
   });
 
-  function onSelect(value, groupValue, onChange) {
+  function onShow(groupValue) {
+    keywords.set('');
+    localGroupValue.set(groupValue);
+  }
+
+  function onSelect(value, onChange) {
     var _instance$get = instance.get(),
         multiple = _instance$get.multiple,
         key = _instance$get.key;
 
     if (multiple) {
-      value = toggleArray(groupValue, value);
+      // should click confirm button when it is multiple selection
+      localGroupValue.set(toggleArray(localGroupValue.value, value));
+    } else {
+      // change immediately when it is single selection
+      onChange(key, value);
     }
-
-    onChange(key, value);
   }
 
-  function isChecked(value, groupValue) {
+  function isChecked(value) {
     var _instance$get2 = instance.get(),
         multiple = _instance$get2.multiple;
 
+    var groupValue = localGroupValue.value;
+
     if (multiple) {
       return groupValue && _includesInstanceProperty(groupValue).call(groupValue, value);
     }
@@ -39,38 +49,31 @@ export function useGroup() {
     return groupValue === value;
   }
 
-  function getGroupText(groupValue) {
+  function confirm(onChange) {
     var _instance$get3 = instance.get(),
-        multiple = _instance$get3.multiple,
-        group = _instance$get3.group;
-
-    if (isNullOrUndefined(groupValue)) return null;
+        key = _instance$get3.key;
 
-    if (!multiple) {
-      groupValue = [groupValue];
-    }
-
-    if (group) {
-      var _context;
+    onChange(key, localGroupValue.value);
+    dropdownRef.value.hide(true);
+  }
 
-      var ret = _mapInstanceProperty(_context = _filterInstanceProperty(group).call(group, function (item) {
-        return _includesInstanceProperty(groupValue).call(groupValue, item.value);
-      })).call(_context, function (item) {
-        return item.label;
-      }).join(', ');
+  function reset() {
+    localGroupValue.set([]);
+  }
 
-      if (ret) {
-        return "(" + ret + ")";
-      }
-    }
+  function isEmptyValue(groupValue) {
+    var _instance$get4 = instance.get(),
+        multiple = _instance$get4.multiple;
 
-    return null;
+    return !groupValue || multiple && (!isArray(groupValue) || groupValue.every(function (value) {
+      return !value;
+    }));
   }
 
   watchState(keywords, function (v) {
-    var _instance$get4 = instance.get(),
-        _instance$get4$group = _instance$get4.group,
-        group = _instance$get4$group === void 0 ? [] : _instance$get4$group;
+    var _instance$get5 = instance.get(),
+        _instance$get5$group = _instance$get5.group,
+        group = _instance$get5$group === void 0 ? [] : _instance$get5$group;
 
     v = _trimInstanceProperty(v).call(v);
 
@@ -78,17 +81,22 @@ export function useGroup() {
       filteredGroup.set(group);
     } else {
       filteredGroup.set(_filterInstanceProperty(group).call(group, function (item) {
-        var _context2, _context3;
+        var _context, _context2;
 
-        return _includesInstanceProperty(_context2 = String(item.label)).call(_context2, v) || _includesInstanceProperty(_context3 = String(item.value)).call(_context3, v);
+        return _includesInstanceProperty(_context = String(item.label)).call(_context, v) || _includesInstanceProperty(_context2 = String(item.value)).call(_context2, v);
       }));
     }
   });
   return {
     onSelect: onSelect,
     isChecked: isChecked,
-    getGroupText: getGroupText,
     keywords: keywords,
-    filteredGroup: filteredGroup
+    filteredGroup: filteredGroup,
+    onShow: onShow,
+    reset: reset,
+    confirm: confirm,
+    dropdownRef: dropdownRef,
+    localGroupValue: localGroupValue,
+    isEmptyValue: isEmptyValue
   };
 }

package/components/tabs/index.vdt.js

@@ -3,6 +3,7 @@ import { createVNode as _$cv, className as _$cn, createUnknownComponentVNode as
 import { Button } from '../button';
 import { getRestProps } from '../utils';
 import { makeStyles } from './styles';
+import { Icon } from '../icon';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
 
@@ -39,7 +40,9 @@ export default function ($props, $blocks, $__proto__) {
     'size': size,
     'disabled': !enablePrev.value,
     'ev-click': prev,
-    'children': _$ce(2, 'i', null, 1, _$cn(vertical ? "ion-ios-arrow-up" : "ion-ios-arrow-left"))
+    'children': _$cc(Icon, {
+      'className': _$cn(vertical ? "k-icon-up" : "k-icon-left")
+    })
   }, 'prev') : undefined, _$ce(2, 'div', _$ce(2, 'div', [children, _$ce(2, 'div', null, 1, 'k-tabs-active-bar', {
     'style': this.activeBar.value
   })], 0, 'k-tabs-wrapper', {
@@ -54,7 +57,9 @@ export default function ($props, $blocks, $__proto__) {
     'size': size,
     'disabled': !enableNext.value,
     'ev-click': next,
-    'children': _$ce(2, 'i', null, 1, _$cn(vertical ? "ion-ios-arrow-down" : "ion-ios-arrow-right"))
+    'children': _$cc(Icon, {
+      'className': _$cn(vertical ? "k-icon-down" : "k-icon-right")
+    })
   }, 'next') : undefined]);
 }
 ;