@king-design/intact 2.0.15 → 2.0.16

package/components/select/demos/basic.md

@@ -11,7 +11,7 @@ import {Select, Option} from 'kpc';
 
 <div>
     <div style="margin-bottom: 16px;">
-        <Select v-model="day" show={true}>
+        <Select v-model="day">
             <Option value="Monday">星期一</Option>
             <Option value="Tuesday">星期二</Option>
             <Option value="Wednesday">星期三</Option>

package/components/table/column.vdt

@@ -12,9 +12,11 @@ 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';
 
 const {title, fixed, group, multiple, key, sortable, cols, rows} = this.get();
-const {onSelect, isChecked, getGroupText} = this.group;
+const {onSelect, isChecked, getGroupText, keywords, filteredGroup} = this.group;
 
 <TableContext.Consumer>
     {checkType => {
@@ -61,21 +63,35 @@ const {onSelect, isChecked, getGroupText} = this.group;
                                                 <Dropdown v-if={group}
                                                     position={{my: 'center top', at: 'center bottom+5', collision: 'flipfit'}}
                                                     key="dropdown"
+                                                    trigger="click"
+                                                    ev-show={() => keywords.set('')}
                                                 >
                                                     <Button icon size="mini" class="k-table-group"
-                                                        ev-click={stopPropagation}
+                                                        ev-click={e => e._ignoreSortable = true}
                                                     >
                                                         <Icon class="ion-android-arrow-dropdown" />
                                                     </Button>
                                                     <DropdownMenu class={{"k-table-group-dropdown": true, [makeGroupMenuStyles()]: true}}>
-                                                        <DropdownItem v-for={group}
-                                                            ev-select={() => onSelect($value.value, groupValue, onChange)}
-                                                            hideOnSelect={!multiple}
-                                                            class={{'k-active': (checked = isChecked($value.value, groupValue))}}
-                                                        >
-                                                            <Checkbox v-if={multiple} value={checked}>{$value.label}</Checkbox>
-                                                            <span v-else>{$value.label}</span>
-                                                        </DropdownItem>
+                                                        <div class="k-table-group-header">
+                                                            <Input size="small" fluid
+                                                                placeholder={_$('请输入关键字')}
+                                                                value={keywords.value}
+                                                                ev-$change:value={keywords.set}
+                                                                clearable
+                                                            >
+                                                                <b:suffix><Icon class="ion-ios-search" /></b:suffix>
+                                                            </Input>
+                                                        </div>
+                                                        <div class="k-table-group-body">
+                                                            <DropdownItem v-for={filteredGroup.value}
+                                                                ev-select={() => onSelect($value.value, groupValue, onChange)}
+                                                                hideOnSelect={!multiple}
+                                                                class={{'k-active': (checked = isChecked($value.value, groupValue))}}
+                                                            >
+                                                                <Checkbox v-if={multiple} value={checked}>{$value.label}</Checkbox>
+                                                                <span v-else>{$value.label}</span>
+                                                            </DropdownItem>
+                                                        </div>
                                                     </DropdownMenu>
                                                 </Dropdown>
                                                 <div v-if={sortable}

package/components/table/demos/rowExpandable.md

@@ -5,7 +5,7 @@ order: 8
 
 通过`expand`扩展点指定行展开后的模板内容。是否支持点击该行任何区域都展开内容，
 是由`rowExpandable`控制的，默认情况下它为`true`。你也可以将它设为`false`，来自定义展开逻辑。例如：
-点击某个`icon`后展开改行，而点击其它元素无效。自定义展开逻辑，修改`expandedKeys`属性值，来指定哪些`key`对应的行展开。
+点击某个`icon`后展开该行，而点击其它元素无效。自定义展开逻辑，修改`expandedKeys`属性值，来指定哪些`key`对应的行展开。
 
 ```vdt
 import {Table, TableColumn} from 'kpc';

package/components/table/demos/selectedKeys.md

@@ -3,7 +3,7 @@ title: 行高亮
 order: 5
 ---
 
-给`Table`添加`rowSelectable`属性，可以让表格点击行时高亮改行，你可以指定值为`multiple`来支持多行
+给`Table`添加`rowSelectable`属性，可以让表格点击行时高亮该行，你可以指定值为`multiple`来支持多行
 高亮。类似`checkedKeys`，我们可以通过`selectedKeys`来绑定高亮行的`key`，当高亮的行改变时，组件也会
 抛出`$change:selectedKeys`事件，我们可以通过`getSelectedData`来获取高亮行的数据
 

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/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, ";}");
 }

package/es/components/table/useGroup.d.ts

@@ -1,3 +1,4 @@
+import type { TableColumnGroupItem } from './column';
 declare type ContextValue = {
     groupValue: any;
     onChange: (key: string, groupValue: any) => void;
@@ -10,5 +11,7 @@ export declare function useGroup(): {
     onSelect: (value: any, groupValue: any, onChange: ContextValue['onChange']) => void;
     isChecked: (value: any, groupValue: any) => any;
     getGroupText: (groupValue: any) => string | null;
+    keywords: import("../../hooks/useState").State<string>;
+    filteredGroup: import("../../hooks/useState").State<TableColumnGroupItem[] | undefined>;
 };
 export {};

package/es/components/table/useGroup.js

@@ -1,13 +1,17 @@
 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';
 import { isNullOrUndefined } from 'intact-shared';
 import { toggleArray } from '../utils';
 import { createContext } from '../context';
+import { useState, watchState } from '../../hooks/useState';
 export var context = createContext();
 export function useGroup() {
   var instance = useInstance();
+  var keywords = useState('');
+  var filteredGroup = useState(instance.get('group'));
 
   function onSelect(value, groupValue, onChange) {
     var _instance$get = instance.get(),
@@ -60,9 +64,28 @@ export function useGroup() {
     return null;
   }
 
+  watchState(keywords, function (v) {
+    var _instance$get4 = instance.get(),
+        _instance$get4$group = _instance$get4.group,
+        group = _instance$get4$group === void 0 ? [] : _instance$get4$group;
+
+    v = _trimInstanceProperty(v).call(v);
+
+    if (!v) {
+      filteredGroup.set(group);
+    } else {
+      filteredGroup.set(_filterInstanceProperty(group).call(group, function (item) {
+        var _context2, _context3;
+
+        return _includesInstanceProperty(_context2 = String(item.label)).call(_context2, v) || _includesInstanceProperty(_context3 = String(item.value)).call(_context3, v);
+      }));
+    }
+  });
   return {
     onSelect: onSelect,
     isChecked: isChecked,
-    getGroupText: getGroupText
+    getGroupText: getGroupText,
+    keywords: keywords,
+    filteredGroup: filteredGroup
   };
 }

package/es/components/table/useSortable.d.ts

@@ -3,5 +3,7 @@ export declare const context: {
     Consumer: import("intact").ComponentConstructor<import("intact").Component<import("../context").ConsumerProps<any>, {}, {}, {}>>;
 };
 export declare function useSortable(): {
-    onChange: (key: string) => void;
+    onChange: (key: string, event: Event & {
+        _ignoreSortable?: boolean;
+    }) => void;
 };

package/es/components/table/useSortable.js

@@ -8,7 +8,10 @@ export function useSortable() {
 
   var count = 0;
 
-  function onChange(key) {
+  function onChange(key, event) {
+    // ignore when click group dropdown menu
+    if (event._ignoreSortable) return;
+
     var sort = _extends({}, instance.get('sort'));
 
     if (sort.key === key) {

package/es/index.d.ts

@@ -1,5 +1,5 @@
 /*!
- * @king-design v2.0.15
+ * @king-design v2.0.16
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -57,4 +57,4 @@ export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
-export declare const version = "2.0.15";
+export declare const version = "2.0.16";

package/es/index.js

@@ -1,5 +1,5 @@
 /*!
- * @king-design v2.0.15
+ * @king-design v2.0.16
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -59,5 +59,5 @@ export * from './components/tree';
 export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
-export var version = '2.0.15';
+export var version = '2.0.16';
 /* generate end */

package/es/site/data/components/menu/demos/collapse/react.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { MenuProps } from '@king-design/react';
+interface Props extends MenuProps {
+}
+export default class Demo extends React.Component<{}, Props> {
+    state: MenuProps<import("misstime").Key>;
+    private __test;
+    setTheme(theme?: string): void;
+    render(): JSX.Element;
+}
+export {};

package/es/site/data/components/menu/demos/size/react.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import './index.styl';
+import type { MenuProps } from '@king-design/react';
+export default class Demo extends React.Component {
+    state: MenuProps<import("misstime").Key>;
+    render(): JSX.Element;
+}

package/es/site/data/components/select/demos/basic/react.js

@@ -37,8 +37,7 @@ var Demo = /*#__PURE__*/function (_React$Component) {
         return _this2.setState({
           day: day
         });
-      },
-      show: true
+      }
     }, /*#__PURE__*/React.createElement(Option, {
       value: "Monday"
     }, "\u661F\u671F\u4E00"), /*#__PURE__*/React.createElement(Option, {

package/index.ts

@@ -1,5 +1,5 @@
 /*!
- * @king-design v2.0.15
+ * @king-design v2.0.16
  *
  * Copyright (c) Kingsoft Cloud
  * Released under the MIT License
@@ -62,6 +62,6 @@ export * from './components/treeSelect';
 export * from './components/upload';
 export * from './components/wave';
 
-export const version = '2.0.15';
+export const version = '2.0.16';
 
 /* generate end */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@king-design/intact",
-  "version": "2.0.15",
+  "version": "2.0.16",
   "description": "A component library written in Intact for Intact, Vue, React and Angular",
   "main": "es/index.js",
   "scripts": {
@@ -116,7 +116,7 @@
     "highlight.js": "^10.4.1",
     "history": "^5.0.0",
     "html-webpack-plugin": "5.3.1",
-    "intact-react": "^3.0.15",
+    "intact-react": "^3.0.16",
     "istanbul-instrumenter-loader": "^3.0.0",
     "js-yaml": "^4.1.0",
     "karma": "^6.3.2",
@@ -178,7 +178,7 @@
     "dayjs": "^1.10.7",
     "downloadjs": "^1.4.7",
     "enquire.js": "^2.1.6",
-    "intact": "^3.0.13",
+    "intact": "^3.0.16",
     "monaco-editor": "^0.26.1",
     "mxgraphx": "^4.0.7",
     "resize-observer-polyfill": "^1.5.1",