@king-design/intact 2.0.0-beta.1 → 2.0.0

package/components/timepicker/index.md

@@ -9,24 +9,55 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| value | 当前选中的时间字符串 | `String` | `undefind` |
-| clearable | 是否能清空当前值 | `Boolean` | `false` |
-| step | 固定时间点的步长 | `String` | `undefined` |
-| max | 最大可选时间 | `String` | `undefined` |
-| min | 最小可选时间 | `String` | `undefined` |
-| placeholder | 占位文字 | `String` | `"请选择时间"` |
-| disabled | 是否禁用 | `Boolean` | `false` |
-| multiple | 是否支持多选 | `Boolean` | `false` |
-| size | 组件尺寸 | `"large"` | `"default"` | `"small"` | `"mini"` | `"default"` |
-| range | 是否选择时间范围 | `Boolean` | `false` |
-| container | 指定弹出选择层追加的位置，默认：`Dialog`类型的组件会追加到`Dialog`中，其他会追加到`body`中。你可以传入函数返回一个DOM用来作为插入的容器，或者传入字符串用来给`querySelector`进行查询 | `Function` | `String` | `undefined` |
-| format | 指定时间格式化字符串 | `String` | `HH:mm:ss` |
-| valueFormat | 指定`value`值时间格式化字符串 | `String` | `undefined` |
-| showFormat | 指定展示的时间格式化字符串 | `String` | `undefined` |
+| value | 当前选中的时间字符串，可用`v-model`双向绑定，你可以传入任意合法的日期，组件最终都会处理成时间字符串，日期信息将被忽略 | `Value` | `Value[]` | `[Value, Value]`  | `[Value, Value][]` | `""` |
+| multiple | 是否支持多选 | `boolean` | `false` |
+| disabled | 是否禁用 | `boolean` | `false` |
+| name | 表单元素的`name` | `string` | `undefined` |
+| size | 尺寸 | `"large"` | `"default"` | `"small"` | `"mini"` | `"default"` |
+| hideIcon | 是否隐藏后面的图标 | `boolean` | `false` |
+| clearable | 是否可清空 | `boolean` | `false` |
+| fluid | 是否宽度100% | `boolean` | `false` |
+| inline | 展示内联模式，该模式下，组件没有边框，宽度和高度如同内联元素一样由内容撑开 | `boolean` | `false` |
+| placeholder | 占位文案 | `string` | `"请选择时间"` |
+| container | 指定弹出菜单追加的位置，默认：`Dialog`类型的组件会追加到`Dialog`中，其他会追加到`body`中。你可以传入函数返回一个DOM用来作为插入的容器，或者传入字符串用来给`querySelector`进行查询 | `Container` | `undefined` |
+| width | 指定宽度，组件自动添加单位`px` | `number` | `string` | `undefined` | 
+| range | 是否选择时间范围 | `boolean` | `false` |
+| format | 指定日期格式化字符串 | `string` | `YYYY-MM-DD HH:mm:ss` |
+| valueFormat | 指定`value`值日期格式化字符串 | `string` | `undefined` |
+| showFormat | 指定展示的日期格式化字符串 | `string` | `undefined` |
+| max | 最大可选时间 | `Value` | `undefind` |
+| min | 最小可选时间 | `Value` | `undefind` |
+| disabledDate | 该属性值是一个函数，用于定义那些日期被禁止选择，函数参数为日期字符串，返回`true`则表示禁用该日期 | `(v: Dayjs) => boolean` | `undefined` |
+| step | 固定时间点的步长 | `string` | `undefined` |
+
+```ts
+import {Dayjs} from 'dayjs';
+import {VNode} from 'intact';
+
+export type Value = string | Date | number | Dayjs;
+export type Container = string | ((parentDom: Element, anchor: Node | null) => Element)
+```
+
+# 扩展点
+
+## Select
+
+| 名称 | 说明 | 参数 |
+| --- | --- | --- |
+| value | 自定义选择结果的展示 | `([value: any, label: Children]) => Children` |
+| values | 自定义多选的选择结果的展示 | `([values: any[], labels: Children[]]) => Children` |
+| prefix | 自定义输入款前面展示的内容 | - |
+| suffix | 自定义输入框后面展示的内容 | - |
+
+```ts
+import {Children} from 'intact';
+```
 
 # 事件
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
-| selectStart | 该事件尽在范围选择(`range`)，并且只选择了第一个值时触发 | `timeString` |
-| change | 当用户操作完成且值`value`变化时触发 | `dateString` |
+| show | 菜单弹出时触发 | - |
+| hide | 菜单隐藏时触发 | - |
+| selecting | 该事件尽在范围选择(`range`)触发，表示用户正在操作选择，可能只选了一个值，或者正在修改日期的时间 | `(value: [Dayjs, Dayjs?]) => void` |
+| change | 当用户操作完成且值`value`变化时触发 | `(value: string) => void` |

package/components/timepicker/index.spec.ts

@@ -11,15 +11,16 @@ describe('Timepicker', () => {
 
     afterEach(async () => {
         unmount();
-        await wait(400);
+        await wait(500);
     });
 
-    it('select time', async () => {
+    it('select time', async function() {
+        this.timeout(0);
         const [instance, element] = mount(BasicDemo);
 
         const [picker1, picker2] = element.querySelectorAll('.k-select') as NodeListOf<HTMLElement>;
         picker1.click();
-        await wait(300);
+        await wait(500);
         let dropdown = getElement('.k-time-content')!;
         expect(dropdown.innerHTML).to.matchSnapshot();
         const next = dropdown.querySelector('.k-scroll-select-item:nth-child(11)') as HTMLElement;
@@ -33,18 +34,18 @@ describe('Timepicker', () => {
         expect(dropdown.innerHTML).to.matchSnapshot();
         const ok = dropdown.querySelector('.k-btn') as HTMLElement;
         ok.click();
-        await wait(300);
+        await wait(500);
         expect(instance.get('time')).to.eql('02:00:00');
         expect(dropdown.style.display).to.eql('none');
         // set time
         instance.set('time', '03:03:03');
         picker1.click();
-        await wait(300);
+        await wait(500);
         expect(dropdown.innerHTML).to.matchSnapshot();
 
         // multiple
         picker2.click();
-        await wait(300);
+        await wait(500);
         dropdown = getElement('.k-time-content')!;
         dropdown.querySelector<HTMLElement>('.k-scroll-select-item:nth-child(11)')!.click();
         const ok2 = dropdown.querySelector('.k-btn') as HTMLElement;
@@ -83,7 +84,7 @@ describe('Timepicker', () => {
 
         const picker = element.querySelector('.k-select') as HTMLElement;
         picker.click();
-        await wait(300);
+        await wait(500);
         const dropdown = getElement('.k-time-content')!;
         expect(dropdown.innerHTML).to.matchSnapshot();
         const [start, end] = dropdown.querySelectorAll<HTMLElement>('.k-datepicker-calendar-wrapper');
@@ -95,7 +96,7 @@ describe('Timepicker', () => {
         expect(dropdown.innerHTML).to.matchSnapshot();
         dropdown.querySelector<HTMLElement>('.k-btn')!.click();
         await wait();
-        expect(instance.get('time')).to.eql(['01:00:00', '02:00:00']);
+        expect(instance.get('time')).to.eql(['01:00:00', '01:59:59']);
     });
 
     it('step', async () => {
@@ -122,7 +123,7 @@ describe('Timepicker', () => {
         (start.querySelector('.k-active')!.nextElementSibling as HTMLElement).click();
         await wait();
         expect(dropdown.innerHTML).to.matchSnapshot();
-        (end.querySelector('.k-active')!.nextElementSibling as HTMLElement).click();
+        (end.querySelector('.k-disabled')!.nextElementSibling as HTMLElement).click();
         await wait();
         expect(dropdown.innerHTML).to.matchSnapshot();
         dropdown.querySelector<HTMLElement>('.k-btn')!.click();
@@ -165,7 +166,7 @@ describe('Timepicker', () => {
         expect(content.innerHTML).to.matchSnapshot();
         content.querySelector<HTMLElement>('.k-btn')!.click();
         await wait();
-        expect(instance.get('time3')).eql(['00:30:00.000', '01:00:00.000']);
+        expect(instance.get('time3')).eql(['00:30:00.000', '00:30:00.000']);
         expect(input3.innerHTML).to.matchSnapshot();
     });
 

package/components/timepicker/styles.ts

@@ -18,7 +18,7 @@ const defaults = {
     },
 };
 
-let timepicker: any;
+let timepicker: typeof defaults;
 setDefault(() => {
     timepicker = deepDefaults(theme, {timepicker: defaults}).timepicker;
 });

package/components/timepicker/useStep.ts

@@ -3,7 +3,7 @@ import type {TimepickerProps} from './';
 import {useState} from '../../hooks/useState';
 import type {useDisabled} from '../datepicker/useDisabled';
 import type {useFormats} from './useFormats';
-import {NOW} from './constants'
+import {NOW_START, NOW_END} from './constants'
 import {Dayjs} from 'dayjs';
 import {useReceive} from '../../hooks/useReceive';
 
@@ -28,9 +28,9 @@ export function useStep(
 
         if (step) {
             const data: Option[] = [];
-            const maxValue = maxDate.value || NOW.hour(23).minute(59).second(59);
+            const maxValue = maxDate.value || NOW_END;
             const stepValue = parseTime(step);
-            let value = minDate.value || NOW;
+            let value = minDate.value || NOW_START;
 
             const push = (value: Dayjs) => {
                 data.push({

package/components/timepicker/useValue.ts

@@ -9,7 +9,7 @@ import {
 } from '../datepicker/basepicker';
 import type {useDisabled} from '../datepicker/useDisabled';
 import type {usePanel} from '../datepicker/usePanel';
-import {NOW} from './constants';
+import {NOW_START, NOW_END} from './constants';
 import {PanelFlags} from '../datepicker/usePanel';
 
 export function useValue(
@@ -47,7 +47,7 @@ export function useValue(
     });
 
     function getPlaceholderDates(): StateValueItem {
-        return instance.get('range') ? [NOW, NOW] : NOW;
+        return instance.get('range') ? [NOW_START, NOW_END] : NOW_START;
     }
 
     function onChangeTimeByStep(v: string, flag: PanelFlags) {

package/components/tip/demos/closable.md

@@ -19,7 +19,7 @@ import {Tip} from 'kpc';
         type={$value}
         closable
     >{$value}</Tip>
-    <Tip closable>
+    <Tip closable border="dashed">
         custom closing content
         <b:close>No longer show</b:close>
     </Tip>

package/components/tip/index.md

@@ -5,15 +5,19 @@ order: 89
 sidebar: doc
 ---
 
-> `Tip`组件继承`Tag`组件，所以很多属性都是一样的
+> `Tip`组件继承`Tag`组件，所以属性是一样的
 
 # 属性
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | type | 组件类型 | `"default"` | `"primary"` | `"success"` | `"warning"` | `"danger"` | `"default"` |
-| disabled | 是否展示禁用状态 | `Boolean` | `false` |
-| closable | 是否可关闭 | `Boolean` | `false` |
+| closable | 是否可关闭 | `boolean` | `false` |
+| closed | 是否已关闭 | `boolean` | `false` |
+| disabled | 是否展示禁用状态 | `boolean` | `false` |
+| size | 组件尺寸 | `"large"` | `"default"` | `"small"` | `"mini"` | `"default"` |
+| border | 定义边框样式 | `"solid"` | `"dashed"` | `"none"` | `"solid"` |
+
 
 # 扩展点
 
@@ -26,4 +30,4 @@ sidebar: doc
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
-| close | 标签关闭事件 | - |
+| close | 标签关闭事件 | `(e: MouseEvent) => void` |

package/components/tip/styles.ts

@@ -12,7 +12,7 @@ const defaults = {
     get padding() { return `6px ${theme.default.padding}` },
 };
 
-let tip: any;
+let tip: typeof defaults;
 setDefault(() => {
     tip = deepDefaults(theme, {tip: defaults}).tip;
 });

package/components/tooltip/demos/basic.md

@@ -6,19 +6,8 @@ order: 0
 使用`Tooltip`包裹需要展示提示的元素，使用`content`属性指定提示文本即可，组件默认为深色主题`dark`，你可以通过
 `theme`指定浅色主题`light`，通过`disabled`属性可以禁用提示，通过`size`可以指弹层的大小：`small` `default`
 
-> 由于`Tooltip`是一个宏函数，Intact下，会返回两个元素，所以不要当做模板的顶级元素，
-> 因为Intact模板只能返回一个元素，此时应该用一个元素将它包起来
-
-> `@since 1.0.0` `Tooltip`在`Vue/React`下渲染不会被元素包裹，这可能会影响你之前项目中定义的样式，
-> 如需渲染包裹元素，请做如下配置
-> ```js
-> // @code 
-> import {configure} from 'kpc';
->
-> // 该配置全局生效
-> configure({useWrapper: true});
-> ```
-
+> 与`Dropdown`一样，`Tooltip`会返回两个元素（触发器和菜单），所以不要作为Vue2.0的模板顶层返回元素
+> 因为Vue2.0只支持返回一个元素
 
 ```vdt
 import {Tooltip} from 'kpc';

package/components/tooltip/demos/trigger.md

@@ -7,8 +7,7 @@ order: 2
 鼠标离开触发器，弹层就会消失，如果我们需要鼠标能离开触发器并悬浮在弹层上，需要添加`canHover`属性
 
 ```vdt
-import {Tooltip} from 'kpc';
-import {ButtonGroup, Button} from 'kpc';
+import {Tooltip, ButtonGroup, Button} from 'kpc';
 
 <ButtonGroup>
     <Tooltip content="hover">

package/components/tooltip/index.md

@@ -9,21 +9,34 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| value | 提示弹层的展示隐藏状态，可用`v-model`进行双向绑定 | `Boolean` | `false` |
-| trigger | 触发方式，点击触发`click`, 悬浮触发`hover` | `"hover"` | `"click"` | `"hover"` |
-| canHover | 对于悬浮触发`hover`的方式，提示内容弹层是否在鼠标悬浮时仍然展示，默认鼠标离开触发元素弹层就会关闭 | `Boolean` | `false` |
-| showArrow | 弹层是否展示箭头 | `Boolean` | `true` |
-| position | 弹层的位置 | `"left"` | `"bottom"` | `"right"` | `"top"` | `Object` | `{my: 'center bottom-10', at: 'center top'}` |
-| transition | 弹层动画，默认只提供`c-fade`，你也可以传入任意自定义动画类型 | `String` | `"c-fade"` |
-| class | 样式名。特别说明：该属性会往内容弹出层上添加，vue下会同时往触发元素和弹层元素上添加 | `String` | `Object` | `undefined` |
-| confirm | 带“确认”和“取消”按钮的确认弹层 | `Boolean` | `false` |
-| onText | `confirm`模式下的“确认”按钮文案 | `String` | `"确认"` |
-| cancelText | `confirm`模式下的“取消”按钮文案 | `String` | `"取消"` |
-| container | 指定弹出提示内容追加的位置，默认：`Dialog`类型的组件会追加到`Dialog`中，其他会追加到`body`中。你可以传入函数返回一个DOM用来作为插入的容器，或者传入字符串用来给`querySelector`进行查询 | `Function` | `String` | `undefined` |
+| trigger | 触发方式，`hover`为悬停触发，`click`为点击触发 | `"hover"` | `"click"` | `"hover"` |
+| disabled | 是否禁用整个菜单 | `boolean` | `false` |
+| value | 是否将弹出菜单展示出来，可通过`v-model`双向绑定 | `boolean` | `false` |
+| position | 菜单弹出的位置，默认在触发器正上方向上偏移`10px`的地方 | `Position` | `"left"` | `"bottom"` | `"right"` | `"top"` | `{my: 'center bottom-10', at: 'center top', collision: 'flipfit'}` |
+| of | 弹出菜单的位置是相对当前触发元素，还是触发元素所在的菜单元素，这在嵌套菜单中可能会用到，可以使所有子菜单保持统一的对齐方式，例如：级联选择（Cascader）组件 | `"self"` | `"parent"` | `Event` | `"self"` |
+| container | 指定弹出菜单追加的位置，默认：`Dialog`类型的组件会追加到`Dialog`中，其他会追加到`body`中。你可以传入函数返回一个DOM用来作为插入的容器，或者传入字符串用来给`querySelector`进行查询 | `Container` | `undefined` |
+| showArrow | 弹层是否展示箭头 | `boolean` | `true` |
 | theme | 指定主题 | `"dark"` | `"light"` | `"dark"` |
-| disabled | 是否禁用提示 | `Boolean` | `false` |
-| always | 是否一直保持当前展示/隐藏状态 | `Boolean` | `false` |
+| hoverable | 对于悬浮触发`hover`的方式，提示内容弹层是否在鼠标悬浮时仍然展示，默认鼠标离开触发元素弹层就会关闭 | `boolean` | `false` |
+| always | 是否一直保持当前展示/隐藏状态 | `boolean` | `false` |
 | size | 弹层尺寸 | `"default"` | `"small"` | `"default"` |
+| confirm | 带“确认”和“取消”按钮的确认弹层 | `boolean` | `false` |
+| onText | `confirm`模式下的“确认”按钮文案 | `string` | `"确认"` |
+| cancelText | `confirm`模式下的“取消”按钮文案 | `string` | `"取消"` |
+| content | 指定提示的内容，当然你也可以用`content`扩展点指定 | `string` | `VNode` | `undefined` |
+
+```ts
+type Position = {
+    my?: string | [string, string]
+    at?: string | [string, string]
+    collision?: Collision | [Collision, Collision] 
+    collisionDirection?: ['left'] | ['top'] | ['left', 'top']
+}
+
+type Collision = 'fit' | 'flip' | 'flipfit' | 'none'
+
+export type Container = string | ((parentDom: Element, anchor: Node | null) => Element)
+```
 
 # 事件
 

package/components/tooltip/index.spec.ts

@@ -38,7 +38,7 @@ describe('Tooltip', () => {
 
         // should hide
         dispatchEvent(first, 'mouseleave');
-        await wait(400);
+        await wait(600);
         expect(content.style.display).to.eql('none');
     });
 
@@ -113,27 +113,29 @@ describe('Tooltip', () => {
 
         // should hide when click document
         document.body.click();
-        await wait(300);
+        await wait(500);
         expect(content.style.display).to.eql('none')
     });
 
-    it('should be hoverable', async () => {
+    it('should be hoverable', async function() {
+        this.timeout(0);
+
         const [, element] = mount(TriggerDemo);
         const [, , canHover] = Array.from(element.querySelectorAll('.k-btn'));
         dispatchEvent(canHover, 'mouseenter');
         await wait();
         dispatchEvent(canHover, 'mouseleave');
-        await wait(300);
+        await wait(500);
         const content = getElement('.k-tooltip-content')!;
         dispatchEvent(content, 'mouseenter');
-        await wait(300);
+        await wait(500);
         const content1 = getElement('.k-tooltip-content');
 
-        //  should not hide when hover from button to tooltip content    
+        //  should not hide when move mouse from button to tooltip content    
         expect(content1).eql(content);
 
         dispatchEvent(canHover, 'mouseleave');
-        await wait(500);
+        await wait(800);
         expect(content.style.display).to.eql('none')
     });
 
@@ -142,7 +144,7 @@ describe('Tooltip', () => {
 
         const [btn] =  Array.from<HTMLElement>(element.querySelectorAll('.k-btn'));
         btn.click();
-        await wait(300);
+        await wait(500);
         const content = getElement('.k-tooltip-content') as HTMLElement;
         // ignore the arrow, because it may change className to adapt to the direction
         expect(content.querySelector<HTMLElement>('.k-slider')!.outerHTML).to.matchSnapshot();
@@ -163,7 +165,7 @@ describe('Tooltip', () => {
         expect((content.querySelector('.k-tooltip-buttons') as HTMLElement).outerHTML).to.matchSnapshot();
 
         (content.querySelector('.k-btn') as HTMLElement).click();
-        await wait(300);
+        await wait(500);
         expect(content.style.display).eql('none');
 
         dispatchEvent(element.firstElementChild!, 'click');
@@ -172,7 +174,7 @@ describe('Tooltip', () => {
         const [, btn] = Array.from<HTMLElement>(content.querySelectorAll('.k-btn'));
         btn.click();
 
-        await wait(300);
+        await wait(500);
         expect(content.style.display).eql('none');
         expect(cancelCb.callCount).eql(1);
         expect(okCb.callCount).eql(1);
@@ -185,15 +187,15 @@ describe('Tooltip', () => {
         expect(content.textContent).eql('hello');
 
         document.body.click();
-        await wait(300);
+        await wait(500);
         expect(getElement('.k-tooltip-content')).eql(content);
 
         (element.querySelector('span') as HTMLElement).click();
-        await wait(300);
+        await wait(500);
         expect(getElement('.k-tooltip-content')).eql(content);
 
         dispatchEvent(content, 'mouseleave');
-        await wait(500);
+        await wait(600);
         expect(getElement('.k-tooltip-content')).eql(content);
     });
 
@@ -300,7 +302,7 @@ describe('Tooltip', () => {
         expect(content!.textContent).eql('hello');
 
         i.set('disabled', true);
-        await wait(300);
+        await wait(500);
         content = getElement('.k-tooltip-content');
         expect(content).eql(undefined);
 
@@ -338,6 +340,8 @@ describe('Tooltip', () => {
 
         await wait(500);
         const content = getElement('.k-tooltip-content')!;
+        console.log(content.outerHTML);
+        console.log(JSON.stringify(content.getBoundingClientRect()));
         expect(content.getBoundingClientRect().top < 0).to.be.true;
     });
 });

package/components/tooltip/styles.ts

@@ -31,7 +31,7 @@ const defaults = {
     smallPadding: '4px',
 };
 
-let tooltip: any;
+let tooltip: typeof defaults;
 setDefault(() => {
     tooltip = deepDefaults(theme, {tooltip: defaults}).tooltip;
 });

package/components/transfer/index.md

@@ -9,41 +9,54 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| data | 需要展示的列表数据, 其中`label`会默认当做列表文案展示，`disabled`用于指定是否禁用该行选择 | `Array` | `[]` |
-| value | 已选择key的数据项，可用`v-model`进行双向绑定 | `Array` | `[]` |
-| leftCheckedKeys | 通过`key`指定勾选的左侧数据节点 | `Array` | `[]` |
-| rightCheckedKeys | 通过`key`指定勾选的右侧数据节点 | `Array` | `[]` |
-| filterable | 是否需要过滤列表功能，默认根据`data`中定义的`label`进行过滤 | `Boolean` | `false` |
-| filter | 指定自定义的过滤函数，组件会将每行数据`data`以及关键词`keywords`传给它 | `Function` | `(data, keywords) => data.label.includes(keywords)` |
-| labelName | 指定每一行数据的哪个属性当做列表的`label`属性，默认会取`label`当做`label` | `String` | `"label"` |
-| placeholder | 当开启过滤功能时，用于输入框展示的占位文案 | `String` | `"请输入"` |
-| leftTitle | 左边顶部展示的标题 | `String` | `"请选择"` |
-| rightTitle | 右边顶部展示的标题 | `String` | `"已选择"` |
-| leftKeywords | 左边筛选关键字 | `String` | `undefined` |
-| rightKeywords | 右边筛选关键字 | `String` | `undefined` |
-| keyName | 指定每一行数据的哪个属性当做列表的`key`属性，默认会取`key`或者`label`当做`key` | `String` | `"key"` |
-| enableAdd | 指定右箭头按钮的可用状态 | `Function` | `undefined` |
-| enableRemove | 指定左箭头按钮的可用状态 | `Function` | `undefined` |
+| data | 需要展示的列表数据, 其中`label`会默认当做列表文案展示，`disabled`用于指定是否禁用该行选择 | `TransferDataItem[]` | `[]` |
+| keyName | 指定每一行数据的哪个属性当做列表的`key`属性，默认会取`key`属性 | `string` | `"key"` |
+| labelName | 指定每一行数据的哪个属性当做列表的`label`属性，默认会取`label`属性 | `string` | `"label"` |
+| value | 已选择key的数据项，可用`v-model`进行双向绑定 | `string[]` | `[]` |
+| leftCheckedKeys | 通过`key`指定勾选的左侧数据节点 | `string[]` | `[]` |
+| rightCheckedKeys | 通过`key`指定勾选的右侧数据节点 | `string[]` | `[]` |
+| filterable | 是否需要过滤列表功能，默认根据`data`中定义的`label`进行过滤 | `boolean` | `false` |
+| filter | 指定自定义的过滤函数，组件会将每行数据`data`以及关键词`keywords`传给它 | `(data: TransferDataItem, keywords: string) => boolean` | `(data: TransferDataItem, keywords: string) => data.label.includes(keywords)` |
+| placeholder | 当开启过滤功能时，用于输入框展示的占位文案 | `string` | `"请输入"` |
+| leftKeywords | 左边筛选关键字 | `string` | `undefined` |
+| rightKeywords | 右边筛选关键字 | `string` | `undefined` |
+| leftTitle | 左边顶部展示的标题 | `string` | `VNode` | `"请选择"` |
+| rightTitle | 右边顶部展示的标题 | `string` | `VNode` | `"已选择"` |
+| enableAdd | 指定右箭头按钮的可用状态 | `() => boolean` | `undefined` |
+| enableRemove | 指定左箭头按钮的可用状态 | `() => boolean` | `undefined` |
+
+```ts
+export type TransferDataItem<
+    A extends string = 'key',
+    B extends string = 'label',
+> = {
+    [K in A]: Key
+} & {
+    [K in B]?: Children
+} & {
+    disabled?: boolean
+}
+```
 
 # 扩展点
 
 | 名称 | 说明 | 参数 |
 | --- | --- | --- |
-| label | 自定义每一项的渲染函数，类似于`label`属性 | `data, index, type` |
-| filter | 自定义检索内容 | `type` | 
-| header | 自定义整个头部内容 | `type` |
-| list | 自定义整个列表内容 | `type` |
+| header | 自定义整个头部内容 | <code>(type: 'left' &#124; 'right') => Children</code> |
+| filter | 自定义检索内容 | <code>(type: 'left' &#124; 'right') => Children</code> | 
+| list | 自定义整个列表内容 | <code>(type: 'left' &#124; 'right') => Children</code> |
+| label | 自定义每一项的渲染函数，类似于`label`属性 | <code>(data: TransferDataItem, key: string, type: 'left' &#124; 'right') => Children</code> |
 
 # 方法
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
-| getData | 获取右边的节点数据 | - | `Array` |
-| getCheckedData | 获取勾选的节点数据 | `model` 要获取`左边`或`右边`的数据 | `"left"` &#124; `"right"` |
+| getData | 获取右边的节点数据 | `() => TransferDataItem[]` | `string[]`: 所有移入右栏的数据 |
+| getCheckedData | 获取勾选的节点数据 | <code>(type: 'left' &#124; 'right') => TransferDataItem[]</code> | `TransferDataItem[]`所有`Checkbox`选中的数据 |
 
 # 事件
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
-| add | 右箭头按钮点击事件 | `-` |
-| remove | 左箭头按钮点击事件 | `-` |
+| add | 右箭头按钮点击事件 | - |
+| remove | 左箭头按钮点击事件 | - |

package/components/transfer/index.spec.ts

@@ -43,14 +43,14 @@ describe('Transfer', () => {
         expect(element.outerHTML).to.matchSnapshot();
         const [remove, add] = element.querySelectorAll('.k-btn') as NodeListOf<HTMLElement>;
         add.click();
-        await wait(300);
+        await wait(500);
         expect(element.outerHTML).to.matchSnapshot();
         const rightFirst = element.querySelector('.k-transfer-panel:nth-child(3) .k-transfer-list .k-checkbox') as HTMLElement;
         rightFirst.click();
         await wait();
         expect(element.outerHTML).to.matchSnapshot();
         remove.click();
-        await wait(300);
+        await wait(500);
         expect(element.outerHTML).to.matchSnapshot();
     });
 
@@ -100,12 +100,13 @@ describe('Transfer', () => {
         expect(tree.get('leftCheckedKeys')).to.eql([]);
     });
 
-    it('filter', async () => {
+    it('filter', async function() {
+        this.timeout(0);
         const [instance, element] = mount(LabelDemo);
         
         const transfer = instance.refs.__test as Transfer;
         transfer.set('leftKeywords', '0');
-        await wait(300);
+        await wait(500);
         expect(element.innerHTML).to.matchSnapshot();
 
         const checkAll = element.querySelector('.k-transfer-title .k-checkbox') as HTMLElement;
@@ -114,7 +115,7 @@ describe('Transfer', () => {
         expect(element.innerHTML).to.matchSnapshot();
 
         transfer.set('leftKeywords', '');
-        await wait(300);
+        await wait(500);
         expect(element.innerHTML).to.matchSnapshot();
 
         checkAll.click();
@@ -124,7 +125,7 @@ describe('Transfer', () => {
         transfer.set('leftKeywords', '0');
         await wait();
         transfer.set('leftKeywords', '');
-        await wait(300);
+        await wait(500);
         expect(element.innerHTML).to.matchSnapshot();
     });
 });

package/components/transfer/styles.ts

@@ -39,7 +39,7 @@ const defaults = {
     }
 };
 
-let transfer: any;
+let transfer: typeof defaults;
 setDefault(() => {
     transfer = deepDefaults(theme, {transfer: defaults}).transfer;
 });