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

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');
     });
 
@@ -50,7 +50,12 @@ describe('Tooltip', () => {
         const at = element.querySelector('.opera .k-btn') as HTMLElement;
         const {width, height, left, top} = at.getBoundingClientRect();
         const contains = (name: string) => expect(arrow.classList.contains(name)).to.be.true;
-        const eql = (a: number, b: number) => expect(Math.floor(a)).to.eql(Math.floor(b));
+        const eql = (a: number, b: number) => {
+            a = Math.floor(a);
+            b = Math.floor(b);
+            // Don't be entangled with the difference of 1 to 2 pixels
+            expect(a >= b - 1 && a <= b + 1).to.be.true;
+        };
 
         
         instance.set('position', 'left');
@@ -113,27 +118,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 +149,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 +170,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 +179,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 +192,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 +307,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 +345,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

@@ -29,8 +29,7 @@ const defaults = {
         get hoverColor() { return theme.color.primary },
         bgColor: '#fff',
         hoverBgColor: 'transparent',
-        padding: '5px 16px',
-        get height() { return theme.default.height },
+        padding: '7px 16px',
         get descColor() { return theme.color.lightBlack },
     },
 
@@ -39,7 +38,7 @@ const defaults = {
     }
 };
 
-let transfer: any;
+let transfer: typeof defaults;
 setDefault(() => {
     transfer = deepDefaults(theme, {transfer: defaults}).transfer;
 });
@@ -68,7 +67,6 @@ export function makeStyles() {
             .k-checkbox {
                 color: ${transfer.title.color}; 
                 font-size: ${transfer.title.fontSize};
-                display: block;
             }
         }
         .k-transfer-count {
@@ -84,7 +82,6 @@ export function makeStyles() {
             color: ${transfer.item.color};
             background: ${transfer.item.bgColor};
             user-select: none;
-            display: table;
             width: 100%;
             &:not(.k-disabled):hover {
                 background: ${transfer.item.hoverBgColor};
@@ -95,10 +92,7 @@ export function makeStyles() {
             }
             .k-checkbox {
                 padding: ${transfer.item.padding};
-                display: table-cell;
-                height: ${transfer.item.height};
-                vertical-align: middle;
-                white-space: nowrap;
+                display: flex;
             }
             p {
                 margin: 0;

package/components/tree/index.md

@@ -9,73 +9,100 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| data | 要渲染的数据 | `Object` | `undefined` |
-| expandedKeys | 通过`key`指定展开的数据节点 | `Array` | `undefined` |
-| checkedKeys | 通过`key`指定勾选的数据节点 | `Array` | `undefined` |
-| selectedKeys | 通过`key`指定选中的数据节点 | `Array` | `undefined` |
-| multiple | `selectedKeys`是否支持多选 | `Boolean` | `false` |
-| checkbox | 是否展示复选框 | `Boolean` | `false` |
-| load | 指定异步加载节点数据的函数，该函数通过`Promise`返回数组来添加子节点数据 | `Function` | `undefined` |
-| filter | 指定节点过滤函数，返回`true`则展示，否则过滤掉 | `Function` | `undefined` |
-| draggable | 是否支持拖拽 | `Boolean` | `false` |
-| allowDrag | 指定哪些节点可拖拽 | `Function` | `undefined` |
-| allowDrop | 指定哪些节点可以插入子节点 | `Function` | `undefined` |
-| uncorrelated | 是否让父子`checkbox`选中状态互不关联 | `Boolean` | `false` |
-| selectable | 节点是否可选中，默认为`true`可选中 | `Boolean` | `true` |
-| defaultExpandAll | 是否默认展开所有节点 | `Boolean` | `false` |
-
-## 实例属性
-
-| 属性 | 说明 | 类型 |
-| --- | --- | --- |
-| root | 组件实例的根节点对象实例，通过它可以往根节点追加节点 | `Node` |
-
-## Node对象
-
-组件内部使用`Node`对象来维护节点的状态
+| data | 要渲染的数据 | `TreeDataItem<K>[]` | `undefined` |
+| filter | 指定节点过滤函数，返回`true`则展示，否则过滤掉 | `(data: TreeDataItem<K>, node: Node<K>) => boolean` | `undefined` |
+| uncorrelated | 是否让父子`checkbox`选中状态互不关联 | `boolean` | `false` |
+| checkedKeys | 通过`key`指定勾选的数据节点 | `K[]` | `undefined` |
+| expandedKeys | 通过`key`指定展开的数据节点 | `K[]` | `undefined` |
+| defaultExpandAll | 是否默认展开所有节点 | `boolean` | `false` |
+| selectable | 节点是否可选中，默认为`true`可选中 | `boolean` | `true` |
+| selectedKeys | 通过`key`指定选中的数据节点 | `K[]` | `undefined` |
+| multiple | `selectedKeys`是否支持多选 | `boolean` | `false` |
+| checkbox | 是否展示复选框 | `boolean` | `false` |
+| load | 指定异步加载节点数据的函数，该函数通过`Promise`返回数组来添加子节点数据 | <code>(node: TreeNode<K>) => Proomise<void> &#124; void</code> | `undefined` |
+| showLine | 是否展示左侧对齐线 | `boolean` | `true` |
+| draggable | 是否支持拖拽 | `boolean` | `false` |
+| allowDrag | 指定哪些节点可拖拽 | `(node: TreeNode<K>) => boolean` | `undefined` |
+| allowDrop | 指定哪些节点可以插入子节点 | `(node: TreeNode<K>) => boolean` | `undefined` |
+
+```ts
+import {Key, Children} from 'intact';
+
+export type TreeDataItem<K extends Key> = {
+    label?: Children 
+    key?: K
+    disabled?: boolean
+    loaded?: boolean
+    children?: TreeDataItem<K>[]
+}
+
+export class TreeNode<K extends Key> {
+    data: TreeDataItem<K>;
+    parent: TreeNode<K> | null;
+    key: K;
+    checked: boolean;
+    indeterminate: boolean;
+    children: TreeNode<K>[] | null;
+    loaded: boolean | null | undefined;
+    filter: boolean;
+    constructor(data: TreeDataItem<K>, parent: TreeNode<K> | null, key: K);
+}
+```
+
+## TreeNode对象
+
+组件内部使用`TreeNode`对象来维护节点的状态
 
 ### 属性
 
 | 属性 | 说明 | 类型 |
 | --- | --- | --- |
-| checked | 节点是否已选中 | `Boolean` |
-| indeterminate | 节点是否半选中 | `Boolean` |
-| data | 节点的原始数据 | `Object` |
-| parent | 节点的父节点 | `Object` &#124; `undefined` |
-| key | 节点的key | `String` |
-| children | 节点的子节点 | `Array` &#124; `undefined` |
-| tree | 指向`Tree`组件实例 | `Tree` |
-| loaded | 是否已经完成异步加载 | `Boolean` &#124; `undefined` |
-
-### 方法
+| data | 节点的原始数据 | `TreeDataItem<K>` |
+| parent | 节点的父节点 | `TreeDataItem<K>` &#124; `null` |
+| key | 节点的key | `K` |
+| checked | 节点是否已选中 | `boolean` |
+| indeterminate | 节点是否半选中 | `boolean` |
+| children | 节点的子节点 | `TreeNode<K>` &#124; `null` |
+| loaded | 是否已经完成异步加载 | `boolean` &#124; `undefined` |
+| filter | 是否在搜索时被过滤掉了 | `boolean` | `false` |
 
-| 方法名 | 说明 | 参数 | 返回值 |
-| --- | --- | --- | --- |
-| append | 追加子节点 | 要追加的子节点数据，或子节点数据数组 | `undefined` |
-| remove | 删除节点 | - | `undefined` |
 
 # 扩展点
 
 | 名称 | 说明 | 参数 |
 | --- | --- | --- |
-| label | 自定义节点渲染内容 | `data, node` |
+| label | 自定义节点渲染内容 | `([data: TreeDataItem<K>, node: TreeNode<K>, index: number]) => Children` |
 
 # 方法
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
-| getCheckedData | 获取勾选的节点数据 | `onlyLeaf` 是否只返回叶子节点 | `Array` |
-| getSelectedData | 获取选中的节点数据 | - | `Array` |
-| expand | 展开节点 | `key` 要展开的节点的key | `undefined` |
-| shrink | 收起节点 | `key` 要收起的节点的key | `undefined` |
-| toggleSelect | 选中或取消选中节点 | `key` 节点的key | `undefined` |
+| getCheckedData | 获取勾选的节点数据 |  `(leafOnly: boolean = false) => TreeDataItem<K>[]`: `onlyLeaf` 是否只返回叶子节点 | `TreeDataItem<K>[]` |
+| getSelectedData | 获取选中的节点数据 | - | `TreeDataItem<K>[]` |
+| expand | 展开节点 | `(key: K) => void`，`key` 要展开的节点的key | `undefined` |
+| shrink | 收起节点 | `(key: K) => void`，`key` 要收起的节点的key | `undefined` |
+| getNodes | 返回一级节点  | `() => TreeNode<K>[]` | `TreeNode<K>[]` 一级节点数组 |
 
 # 事件
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
-| click:node | 点击节点触发 | `Node, Event` |
-| rightclick:node | 右键点击节点触发 | `Node, Event` |
-| dragend | 拖拽完成触发 | `{srcNode: '源节点', toNode: '目标节点', mode: '插入模式, -1: 插入节点前面, 1: 插入节点后面, 0: 插入节点内部', tree: '整颗节点树'}` |
-| denydrag | 拖拽不允许拖拽的节点触发 | `Node` |
-| denydrop | 插入到不允许插入的节点时触发 | `Node` |
+| dragend | 拖拽完成触发 | `DragEndData<K>`，`{srcNode: '源节点', toNode: '目标节点', mode: '插入模式, Before: 插入节点前面, After: 插入节点后面, Inner: 插入节点内部'}` |
+| denydrag | 拖拽不允许拖拽的节点触发 | `TreeNode<K>` |
+| denydrop | 插入到不允许插入的节点时触发 | `TreeNode<K>` |
+
+```ts
+import {Key} from 'intact';
+
+type DragEndData<K extends Key> = {
+    srcNode: TreeNode<K>
+    toNode: TreeNode<K>
+    mode: TreeMode
+}
+
+export enum TreeMode {
+    Before,
+    After,
+    Inner
+}
+```

package/components/tree/index.spec.ts

@@ -12,21 +12,22 @@ import {RANGE} from './useDraggable';
 describe('Tree', () => {
     afterEach(() => unmount());
 
-    it('expand and shrink', async () => {
+    it('expand and shrink', async function() {
+        this.timeout(0);
         const [instance, element] = mount(BasicDemo);
 
         const [, icon1, icon2] = element.querySelectorAll('.k-icon') as NodeListOf<HTMLElement>;
 
         icon2.click();
-        await wait(300);
+        await wait(500);
         expect(element.outerHTML).to.matchSnapshot();
 
         icon1.click();
-        await wait(300);
+        await wait(500);
         expect(element.outerHTML).to.matchSnapshot();
 
         icon1.click();
-        await wait(300);
+        await wait(500);
         expect(element.outerHTML).to.matchSnapshot();
     });
 
@@ -51,7 +52,7 @@ describe('Tree', () => {
         const [, , icon1] = element.querySelectorAll('.k-icon') as NodeListOf<HTMLElement>;
         // expand
         icon1.click();
-        await wait(300);
+        await wait(500);
         expect(element.outerHTML).to.matchSnapshot();
         const data2 = tree.getCheckedData(true);
         expect(data2.length).to.eql(2);
@@ -105,20 +106,20 @@ describe('Tree', () => {
 
         const [btn1, btn2] = element.querySelectorAll('.k-btn') as NodeListOf<HTMLElement>;
         btn1.click();
-        await wait(300);
+        await wait(500);
         expect(element.outerHTML).to.matchSnapshot();
         expect(instance.get('data')).to.have.length(3);
         expect(instance.get('data')).to.matchSnapshot();
 
         btn2.click();
-        await wait(300);
+        await wait(500);
         expect(element.outerHTML).to.matchSnapshot();
         const [, checkbox] = element.querySelectorAll('.k-checkbox') as NodeListOf<HTMLElement>;
         checkbox.click();
         await wait();
         const [,,, btn3] = element.querySelectorAll('.k-btn') as NodeListOf<HTMLElement>;
         btn3.click();
-        await wait(300);
+        await wait(500);
         expect(element.outerHTML).to.matchSnapshot();
 
         // uncheck and remove
@@ -126,7 +127,7 @@ describe('Tree', () => {
         checkbox1.click();
         await wait();
         (checkbox1.parentNode!.querySelector('.k-btn:nth-child(2)') as HTMLElement).click();
-        await wait(300);
+        await wait(500);
         expect(element.outerHTML).to.matchSnapshot();
         expect(instance.get('data')).to.matchSnapshot();
     });
@@ -163,7 +164,7 @@ describe('Tree', () => {
         // disable select and click on disabled selectable text should expand the tree
         tree.set('selectable', false);
         text1.click();
-        await wait(300);
+        await wait(500);
         expect(tree.getSelectedData().length).to.eql(0);
         expect(element.outerHTML).to.matchSnapshot();
     });
@@ -181,7 +182,7 @@ describe('Tree', () => {
         const [instance, element] = mount(DraggableDemo);
 
         instance.set('expandedKeys', ['2', '2-1', '1', '1-1']);
-        await wait(300);
+        await wait(500);
 
         // can not drag disabled item
         const disabled = element.querySelector('.k-disabled') as HTMLElement;
@@ -249,5 +250,5 @@ async function dragInsert(srcElement: HTMLElement, toElement: HTMLElement, mode?
 
     await wait(700);
     dispatchEvent(toElement, 'dragend');
-    await wait(300);
+    await wait(500);
 }

package/components/tree/index.ts

@@ -13,6 +13,7 @@ import type {Events} from '../types';
 export type {
     Node as TreeNode,
     DataItem as TreeDataItem,
+    Mode as TreeMode,
 };
 
 export interface TreeProps<K extends Key = Key> {

package/components/tree/index.vdt

@@ -56,6 +56,7 @@ const treeNodes = (nodes) => {
                 <div class={labelClassNameObj}>
                     <Icon class="k-tree-icon ion-android-arrow-dropdown" 
                         v-if={node.children && node.loaded !== false}
+                        hoverable
                         ev-click={(e) => {
                             // it may be in dropdownMenu, e.g. TreeSelect
                             e._ignore = true;