@king-design/intact 2.0.14 → 2.0.16

package/components/table/index.md

@@ -19,7 +19,7 @@ sidebar: doc
 | checkedKeys | 通过`key`数组来指定哪些行被选中 | `TableRowKey[]` | `[]` |
 | rowKey | 设置每行的key | `(value: T, index: number) => TableRowKey` | `(value: T, index: number) => index` |
 | rowCheckable | 当行可选时，是否点击该行任意区域都可选中 | `boolean` | `true` |
-| disableRow | 定义行禁用可选的逻辑，返回`true`，则改行被禁用选择 | `(value: T, index: number, key: TableRowKey) => boolean` | `undefined` |
+| disableRow | 定义行禁用可选的逻辑，返回`true`，则该行被禁用选择 | `(value: T, index: number, key: TableRowKey) => boolean` | `undefined` |
 | type | 表格类型，默认左右无边框，`"border"`类型会添加边框, `"grid"`类型会展示栅格边框 | `"default"` | `"border"` | `"grid"` | `"default"` |
 | stripe | 相邻行是否展示不同的背景色 | `boolean` | `false` |
 | rowClassName | 通过一个函数定义行的`className`，该函数会传入该行数据，索引和`key`当做参数，返回的字符串将被设为该行的`className` | <code>(value: T, index: number, key: TableRowKey) => string &#124; undefined</code> | `undefined` |
@@ -28,9 +28,9 @@ sidebar: doc
 | loading | 是否展示加载状态 | `boolean` | `false` |
 | merge | 指定表格单元格合并逻辑 | `TableMerge` | `undefined` |
 | expandedKeys | 通过`key`来指定哪些行展开 | `TableRowKey[]` | `undefined` |
-| rowExpandable | 是否点击改行任意区域即展开 | `boolean` | `true` |
+| rowExpandable | 是否点击该行任意区域即展开 | `boolean` | `true` |
 | selectedKeys | 当`rowSelectable`取值为非`false`时，指定哪些行高亮 | `TableRowKey[]` | `undefined` |
-| rowSelectable | 是否点击行时高亮改行，取值为`multiple`时，可以同时高亮多行 | `boolean` &#124; `"single"` &#124; `"multiple"` | `false` |
+| rowSelectable | 是否点击行时高亮该行，取值为`multiple`时，可以同时高亮多行 | `boolean` &#124; `"single"` &#124; `"multiple"` | `false` |
 | childrenKey | 树形表格指定子元素键名 | `string` | `"children"` |
 | indent | 树形表格指定子元素缩进宽度 | `number` | `32` |
 | spreadKeys | 树形表格指定展开的行 | `TableRowKey[]` | `undefined` |

package/components/table/index.spec.ts

@@ -194,7 +194,7 @@ describe('Table', () => {
         const [table1, table2] = element.querySelectorAll<HTMLElement>('.k-table');
 
         const icon = table1.querySelector('.k-table-group') as HTMLElement;
-        dispatchEvent(icon, 'mouseenter');
+        dispatchEvent(icon, 'click');
         await wait();
         const dropdown = getElement('.k-table-group-dropdown')!;
         expect(dropdown.innerHTML).to.matchSnapshot();
@@ -206,7 +206,7 @@ describe('Table', () => {
         expect(table1.innerHTML).to.matchSnapshot();
 
         const icon2 = table2.querySelector('.k-table-group') as HTMLElement;
-        dispatchEvent(icon2, 'mouseenter');
+        dispatchEvent(icon2, 'click');
         await wait();
         const dropdown2 = getElement('.k-table-group-dropdown')!;
         expect(dropdown2.innerHTML).to.matchSnapshot();

package/components/table/styles.ts

@@ -41,6 +41,8 @@ const defaults = {
         color: `#a6a6a6`,
         menuMaxHeight: '200px',
         get activeColor() { return theme.color.primary },
+        headerPadding: `8px`,
+        get headerBorder() { return `1px solid ${theme.color.bg}` },
     },
 
     // sort
@@ -371,5 +373,9 @@ export function makeGroupMenuStyles() {
         .k-dropdown-item.k-active {
             color: ${table.group.activeColor};
         }
+        .k-table-group-header {
+            padding: ${table.group.headerPadding};
+            border-bottom: ${table.group.headerBorder};
+        }
     `
 }

package/components/table/useGroup.ts

@@ -1,8 +1,9 @@
 import {useInstance} from 'intact';
-import type {TableColumn} from './column';
+import type {TableColumn, TableColumnGroupItem} from './column';
 import {isNullOrUndefined} from 'intact-shared';
 import {toggleArray} from  '../utils';
 import {createContext} from '../context';
+import {useState, watchState} from '../../hooks/useState';
 
 type ContextValue = {
     groupValue: any
@@ -13,6 +14,8 @@ export const context = createContext<ContextValue>();
 
 export function useGroup() {
     const instance = useInstance() as TableColumn;
+    const keywords = useState<string>('');
+    const filteredGroup = useState<TableColumnGroupItem[] | undefined>(instance.get('group'));
 
     function onSelect(value: any, groupValue: any, onChange: ContextValue['onChange']) {
         const {multiple, key} = instance.get();
@@ -51,5 +54,18 @@ export function useGroup() {
         return null;
     }
 
-    return {onSelect, isChecked, getGroupText};
+    watchState(keywords, (v) => {
+        const {group = []} = instance.get();
+        v = v.trim();
+        
+        if (!v) {
+            filteredGroup.set(group);
+        } else {
+            filteredGroup.set(group.filter(item => {
+                return String(item.label).includes(v) || String(item.value).includes(v);
+            }));
+        }
+    });
+
+    return {onSelect, isChecked, getGroupText, keywords, filteredGroup};
 }

package/components/table/useSortable.ts

@@ -10,7 +10,10 @@ export function useSortable() {
     // if the same column has been clicked three times consecutively,
     // then let the third click to reset the sort
     let count = 0;
-    function onChange(key: string) {
+    function onChange(key: string, event: Event & {_ignoreSortable?: boolean}) {
+        // ignore when click group dropdown menu
+        if (event._ignoreSortable) return;
+
         let sort = {...instance.get('sort')} as TableSortValue;
         if (sort.key === key) {
             count++;

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

@@ -7,6 +7,7 @@ export interface ColorpickerProps {
     size?: Sizes;
     disabled?: boolean;
     container?: Container;
+    show?: boolean;
 }
 export interface ColorpickerEvents {
 }

package/es/components/colorpicker/index.js

@@ -10,7 +10,8 @@ var typeDefs = {
   presets: Array,
   size: sizes,
   disabled: Boolean,
-  container: [Function, String]
+  container: [Function, String],
+  show: Boolean
 };
 
 var defaults = function defaults() {

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

@@ -48,7 +48,11 @@ export default function ($props, $blocks, $__proto__) {
         },
         'value': $this.get('value')
       })
-    })]
+    })],
+    'ev-$model:value': function ev$modelValue($v) {
+      $this.set('show', $v);
+    },
+    'value': $this.get('show')
   }));
 }
 ;

package/es/components/dialog/alert.vdt.js

@@ -15,7 +15,9 @@ export default function ($props, $blocks, $__proto__) {
       hideIcon = _this$get.hideIcon,
       hideFooter = _this$get.hideFooter,
       hideClose = _this$get.hideClose,
-      title = _this$get.title;
+      title = _this$get.title,
+      iconClassName = _this$get.iconClassName,
+      icon = _this$get.icon;
 
   var classNameObj = (_classNameObj = {
     'k-alert-dialog': true
@@ -37,14 +39,14 @@ export default function ($props, $blocks, $__proto__) {
 
       return block ? block.call($this, callBlock, data) : callBlock();
     }), (_$blocks['body'] = function ($super) {
-      return [_$ce(2, 'div', !hideIcon ? _$cc(Icon, {
-        'className': _$cn({
+      return [_$ce(2, 'div', [!hideIcon && !icon ? _$cc(Icon, {
+        'className': _$cn(iconClassName || {
           "ion-ios-checkmark": type === 'success',
           "ion-ios-information": type === 'warning',
           "ion-ios-close": type === 'error',
           "ion-ios-help": type === 'confirm'
         })
-      }) : undefined, 0, 'k-dialog-tip-icon'), _$ce(2, 'div', [title ? _$ce(2, 'div', title, 0, 'k-alert-dialog-title') : undefined, content], 0, 'k-alert-dialog-wrapper')];
+      }) : undefined, icon], 0, 'k-dialog-tip-icon'), _$ce(2, 'div', [title ? _$ce(2, 'div', title, 0, 'k-alert-dialog-title') : undefined, content], 0, 'k-alert-dialog-wrapper')];
     }, __$blocks['body'] = function ($super, data) {
       var block = $blocks['body'];
 

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

@@ -7,7 +7,7 @@ import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
 
 function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof _Symbol !== "undefined" && _getIteratorMethod(o) || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
-function _unsupportedIterableToArray(o, minLen) { var _context16; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty(_context16 = Object.prototype.toString.call(o)).call(_context16, 8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return _Array$from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _unsupportedIterableToArray(o, minLen) { var _context18; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty(_context18 = Object.prototype.toString.call(o)).call(_context18, 8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return _Array$from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
@@ -15,8 +15,10 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/con
 import _keysInstanceProperty from "@babel/runtime-corejs3/core-js/instance/keys";
 import _startsWithInstanceProperty from "@babel/runtime-corejs3/core-js/instance/starts-with";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import { __decorate } from "tslib";
 import { Component } from 'intact';
 import { Dialog, BaseDialog } from './';
+import { bind } from '../utils';
 import { getElement, mount, unmount, dispatchEvent, wait } from '../../test/utils';
 import BasicDemo from '~/components/dialog/demos/basic';
 import AsyncCloseDemo from '~/components/dialog/demos/asyncClose';
@@ -590,6 +592,64 @@ describe('Dialog', function () {
         }
       }
     }, _callee12);
+  })));
+  it('should remove body style when destroy', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee13() {
+    var Demo, _mount13, instance, element;
+
+    return _regeneratorRuntime.wrap(function _callee13$(_context17) {
+      while (1) {
+        switch (_context17.prev = _context17.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component4) {
+              _inheritsLoose(Demo, _Component4);
+
+              function Demo() {
+                var _context16;
+
+                var _this4;
+
+                for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+                  args[_key4] = arguments[_key4];
+                }
+
+                _this4 = _Component4.call.apply(_Component4, _concatInstanceProperty(_context16 = [this]).call(_context16, args)) || this;
+                _this4.Dialog = Dialog;
+                return _this4;
+              }
+
+              Demo.defaults = function defaults() {
+                return {
+                  show: true
+                };
+              };
+
+              var _proto = Demo.prototype;
+
+              _proto.onClose = function onClose() {
+                this.set('show', false);
+              };
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                var Dialog = this.Dialog;\n                <div>\n                    <Dialog v-if={this.get('show')}\n                        value={this.get('show')}\n                        ev-close={this.onClose}\n                        ref=\"dialog\"\n                    >test</Dialog>\n                </div>\n            ";
+
+            __decorate([bind], Demo.prototype, "onClose", null);
+
+            _mount13 = mount(Demo), instance = _mount13[0], element = _mount13[1];
+            instance.refs.dialog.close();
+            _context17.next = 7;
+            return wait();
+
+          case 7:
+            expect(document.body.getAttribute('style')).to.be.null;
+
+          case 8:
+          case "end":
+            return _context17.stop();
+        }
+      }
+    }, _callee13);
   }))); // it('should handle v-if and v-model at the same time correctly in Vue', async () => {
   // const Test = {
   // template: `<Dialog v-model="show" v-if="show" ref="dialog">test</Dialog>`,

package/es/components/dialog/staticMethods.d.ts

@@ -1,11 +1,13 @@
-import { VNode } from 'intact';
 import type { Dialog, DialogProps } from './';
 export interface AlertDialogProps extends DialogProps {
-    content?: string | VNode;
+    content?: string | object;
     type?: 'success' | 'warning' | 'error' | 'confirm';
     hideIcon?: boolean;
     hideFooter?: boolean;
     ref?: (i: Dialog) => void;
+    className?: string;
+    iconClassName?: string;
+    icon?: object;
 }
 export declare type StaticMethod = (options?: AlertDialogProps) => Promise<void>;
 export declare function addStaticMethods(Component: typeof Dialog): void;

package/es/components/dialog/staticMethods.js

@@ -29,6 +29,22 @@ export function addStaticMethods(Component) {
       options = {};
     }
 
+    var normalize = Component.normalize;
+
+    if (normalize) {
+      if (options.content) {
+        options = _extends({}, options, {
+          content: normalize(options.content)
+        });
+      }
+
+      if (options.icon) {
+        options = _extends({}, options, {
+          icon: normalize(options.icon)
+        });
+      }
+    }
+
     var dialog = new AlertDialog(options);
     dialog.show();
     if (options.ref) options.ref(dialog);

package/es/components/dialog/useFixBody.js

@@ -11,7 +11,9 @@ export function useFixBody(elementRef) {
   instance.on(SHOW, onEnter);
   instance.on('afterClose', onAfterLeave);
   onBeforeUnmount(function () {
-    if (fixedBody && instance.get('value')) {
+    // should also remove body style when dialog is removed, #805
+    // if (fixedBody && instance.get('value')) {
+    if (fixedBody) {
       // maybe HIDE event has not triggered
       onClosed(instance);
     }

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

@@ -13,6 +13,8 @@ export interface PaginationProps {
     showTotal?: boolean;
     showGoto?: boolean;
     showLimits?: boolean;
+    disableBtn?: (page: number, limit: number) => boolean;
+    disablePage?: (page: number, limit: number) => boolean;
 }
 export interface PaginationEvents {
     change: [PaginationChangeData];

package/es/components/pagination/index.js

@@ -16,7 +16,9 @@ var typeDefs = {
   simple: Boolean,
   showTotal: Boolean,
   showGoto: Boolean,
-  showLimits: Boolean
+  showLimits: Boolean,
+  disableBtn: Function,
+  disablePage: Function
 };
 
 var defaults = function defaults() {
@@ -141,7 +143,16 @@ export var Pagination = /*#__PURE__*/function (_Component) {
   };
 
   _proto.goto = function goto(e) {
+    var _this$get4 = this.get(),
+        disablePage = _this$get4.disablePage,
+        limit = _this$get4.limit;
+
     var value = parseInt(e.target.value) || 1;
+
+    if (disablePage && disablePage(value, limit)) {
+      return;
+    }
+
     this.changePage(value);
   };
 

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

@@ -3,6 +3,7 @@ import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import BasicDemo from '~/components/pagination/demos/basic';
 import GotoDemo from '~/components/pagination/demos/goto';
 import CurrentDemo from '~/components/pagination/demos/current';
+import DisableDemo from '~/components/pagination/demos/disable';
 import { mount, unmount, dispatchEvent, wait } from '../../test/utils';
 describe('Pagination', function () {
   afterEach(function () {
@@ -141,4 +142,31 @@ describe('Pagination', function () {
       }
     }, _callee3);
   })));
+  it('should not goto disabled page', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    var _mount4, instance, element, input;
+
+    return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            _mount4 = mount(DisableDemo), instance = _mount4[0], element = _mount4[1];
+            input = element.querySelector('.k-input-inner');
+            dispatchEvent(input, 'focus');
+            input.value = '11';
+            dispatchEvent(input, 'change');
+            dispatchEvent(input, 'blur');
+            _context4.next = 8;
+            return wait();
+
+          case 8:
+            expect(input.value).to.eql('10');
+            expect(instance.get('value2')).to.eql(10);
+
+          case 10:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  })));
 });

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

@@ -32,7 +32,9 @@ export default function ($props, $blocks, $__proto__) {
       value = _this$get.value,
       limit = _this$get.limit,
       limits = _this$get.limits,
-      showLimits = _this$get.showLimits;
+      showLimits = _this$get.showLimits,
+      disableBtn = _this$get.disableBtn,
+      disablePage = _this$get.disablePage;
 
   if (!total) return _$ccv(' pagination ');
   var classNameObj = (_classNameObj = {
@@ -47,11 +49,24 @@ export default function ($props, $blocks, $__proto__) {
   var totalPages = Math.ceil(total / limit) || 0;
 
   var paginationButton = function paginationButton(page) {
+    var disabled = false;
+
+    if (page !== value) {
+      if (disablePage) {
+        disabled || (disabled = !!disablePage(page, limit));
+      }
+
+      if (disableBtn) {
+        disabled || (disabled = !!disableBtn(page, limit));
+      }
+    }
+
     return _$cc(Button, {
       'type': type,
       'size': size,
       'icon': true,
       'value': page,
+      'disabled': disabled,
       'children': page
     });
   };
@@ -131,14 +146,14 @@ export default function ($props, $blocks, $__proto__) {
       'icon': true,
       'size': size,
       'type': type,
-      'disabled': value <= 1,
+      'disabled': value <= 1 || !!(disablePage && disablePage(value - 1, limit)),
       'ev-click': this.prev,
       'children': _$cc(Icon, _$tmp0)
     }), paginationItems, _$cc(Button, {
       'icon': true,
       'size': size,
       'type': type,
-      'disabled': value >= totalPages,
+      'disabled': value >= totalPages || !!(disablePage && disablePage(value + 1, limit)),
       'ev-click': this.next,
       'children': _$cc(Icon, _$tmp1)
     })],

package/es/components/pagination/styles.js

@@ -55,7 +55,7 @@ setDefault(function () {
   }).pagination;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("font-size:", pagination.fontSize, ";.k-pagination-limits,.k-pagination-goto,.k-pagination-total{margin-left:", pagination.gap, ";display:inline-block;vertical-align:middle;}.k-pagination-ellipsis{background-color:transparent;border-color:transparent;}.k-btns{.k-btn{width:auto!important;min-width:", button.height, ";padding:", pagination.btn.padding, ";margin-right:", pagination.btn.gap, ";&:last-of-type{margin:0!important;}}.k-icon{font-size:18px;}}.k-pagination-goto{.k-input{font-size:inherit;width:", pagination.goto.width, ";margin:", pagination.goto.gap, ";}}.k-select{width:auto;}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  return /*#__PURE__*/css("font-size:", pagination.fontSize, ";.k-pagination-limits,.k-pagination-goto,.k-pagination-total{margin-left:", pagination.gap, ";display:inline-block;vertical-align:middle;}.k-pagination-ellipsis{background-color:transparent;border-color:transparent;}.k-btns{.k-btn{width:auto!important;min-width:", button.height, ";padding:", pagination.btn.padding, ";margin-right:", pagination.btn.gap, ";&:last-of-type{margin:0!important;}}.k-icon{font-size:18px;}}.k-pagination-goto{.k-input{font-size:inherit;width:", pagination.goto.width, ";margin:", pagination.goto.gap, ";}.k-input-inner{text-align:center;}}.k-select{width:auto;}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = pagination[size];
     var btnStyles = button[size];
     return /*#__PURE__*/css("&.k-", size, "{font-size:", styles.fontSize, ";.k-btn{margin-right:", styles.btnGap, ";min-width:", btnStyles.height, ";.k-icon{font-size:", styles.iconFontSize, ";}}}");

package/es/components/portal.js

@@ -60,25 +60,37 @@ export var Portal = /*#__PURE__*/function (_Component) {
   };
 
   _proto.$update = function $update(lastVNode, nextVNode, parentDom, anchor, mountedQueue, force) {
+    var _this3 = this;
+
     // update container if it has changed
     var lastProps = lastVNode.props;
     var nextProps = nextVNode.props;
-    var lastContainer = this.container;
 
-    if (lastProps.container !== nextProps.container) {
-      this.initContainer(nextProps.container, parentDom, anchor);
-    }
+    var update = function update() {
+      var lastContainer = _this3.container;
+
+      if (lastProps.container !== nextProps.container) {
+        _this3.initContainer(nextProps.container, parentDom, anchor);
+      }
+
+      var nextContainer = _this3.container;
 
-    var nextContainer = this.container;
+      if (lastContainer === nextContainer) {
+        patch(lastProps.children, nextProps.children, nextContainer, _this3, _this3.$SVG, anchor, mountedQueue, false);
+      } else {
+        remove(lastProps.children, lastContainer, false);
+        mount(nextProps.children, nextContainer, _this3, _this3.$SVG, anchor, mountedQueue);
+      }
+
+      _Component.prototype.$update.call(_this3, lastVNode, nextVNode, parentDom, anchor, mountedQueue, force);
+    };
 
-    if (lastContainer === nextContainer) {
-      patch(lastProps.children, nextProps.children, nextContainer, this, this.$SVG, anchor, mountedQueue, false);
+    if (!this.container) {
+      // in react, sometimes $update will be called before mountedQueue in $render
+      mountedQueue.push(update);
     } else {
-      remove(lastProps.children, lastContainer, false);
-      mount(nextProps.children, nextContainer, this, this.$SVG, anchor, mountedQueue);
+      update();
     }
-
-    _Component.prototype.$update.call(this, lastVNode, nextVNode, parentDom, anchor, mountedQueue, force);
   };
 
   _proto.$unmount = function $unmount(vNode, nextVNode) {

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();
 

package/es/components/table/styles.js

@@ -53,6 +53,12 @@ var defaults = {
 
     get activeColor() {
       return theme.color.primary;
+    },
+
+    headerPadding: "8px",
+
+    get headerBorder() {
+      return "1px solid " + theme.color.bg;
     }
 
   },
@@ -89,5 +95,5 @@ export function makeStyles() {
   }), ";");
 }
 export function makeGroupMenuStyles() {
-  return /*#__PURE__*/css("max-height:", table.group.menuMaxHeight, ";overflow:auto;.k-dropdown-item.k-active{color:", table.group.activeColor, ";}");
+  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, ";}");
 }