@king-design/intact 2.0.0-beta.1 → 2.0.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;

package/components/tree/styles.ts

@@ -4,6 +4,7 @@ import {deepDefaults, palette} from '../../styles/utils';
 import '../../styles/global';
 
 const defaults = {
+    get transition() { return theme.transition.middle },
     fontSize: '12px',
     lineHeight: '24px',
     get hoverColor() { return theme.color.primary },
@@ -33,7 +34,7 @@ const defaults = {
     get line() { return `1px dashed ${theme.color.border}` },
 };
 
-let tree: any;
+let tree: typeof defaults;
 setDefault(() => {
     tree = deepDefaults(theme, {tree: defaults}).tree;
 });
@@ -87,8 +88,10 @@ export function makeStyles() {
             width: ${tree.iconWidth};
             text-align: center;
             color: ${tree.iconColor};
-            transform: rotate(-90deg);
-            transition: transform ${theme.transition};
+            &:before {
+                transform: rotate(-90deg);
+                transition: transform ${tree.transition};
+            }
         }
 
         .k-tree-checkbox {
@@ -114,7 +117,7 @@ export function makeStyles() {
                 }
             }
             &.k-expanded {
-                > .k-tree-label .k-tree-icon {
+                > .k-tree-label .k-tree-icon:before {
                     transform: rotate(0);
                 }
             }

package/components/treeSelect/index.md

@@ -11,30 +11,60 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| value | 当前选择的元素，可用`v-model`双向绑定 | `*` | `""` |
-| multiple | 是否支持多选 | `Boolean` | `false` |
-| disabled | 是否禁用 | `Boolean` | `false` |
-| clearable | 是否可清空 | `Boolean` | `false` |
-| filterable | 是否支持筛选 | `Boolean` | `false` |
-| filter | 当支持筛选时，可以自定义筛选规则 | `Function` | `undefined` |
-| keywords | 如果支持筛选，当前关键词 | `String` | `undefined` |
-| placeholder | 占位文案 | `String` | `"请选择"` |
+| value | 当前选择的元素，可用`v-model`双向绑定 | `any` | `""` |
+| multiple | 是否支持多选 | `boolean` | `false` |
+| filterable | 是否支持筛选 | `boolean` | `false` |
+| loading | 数据加载状态 | `boolean` | `false` |
+| disabled | 是否禁用 | `boolean` | `false` |
+| name | 表单元素的`name` | `string` | `undefined` |
 | size | 尺寸 | `"large"` | `"default"` | `"small"` | `"mini"` | `"default"` |
-| fluid | 是否宽度100% | `Boolean` | `false` |
-| width | 指定宽度，组件自动添加单位`px` | `Number` | `String` | `undefined` | 
-| container | 指定弹出菜单追加的位置，默认：`Dialog`类型的组件会追加到`Dialog`中，其他会追加到`body`中。你可以传入函数返回一个DOM用来作为插入的容器，或者传入字符串用来给`querySelector`进行查询 | `Function` | `String` | `undefined` |
-| inline | 展示内联模式，该模式下，组件没有边框，宽度和高度如同内联元素一样由内容撑开 | `Boolean` | `false` |
-| loading | 数据加载状态 | `Boolean` | `false` |
-| position | 定义弹层的位置 | `Object` | `{my: 'left top+8', at: 'left bottom'}` |
-| data | 要渲染的数据 | `Object` | `undefined` |
-| checkbox | 是否展示复选框 | `Boolean` | `false` |
-| load | 指定异步加载节点数据的函数，该函数通过`Promise`返回数组来添加子节点数据 | `Function` | `undefined` |
-| defaultExpandAll | 是否默认展开所有节点 | `Boolean` | `true` |
-| uncorrelated | 是否让父子`checkbox`选中状态互不关联 | `Boolean` | `false` |
+| 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` | 
+| data | 要渲染的数据 | `TreeDataItem<K>[]` | `undefined` |
+| uncorrelated | 是否让父子`checkbox`选中状态互不关联 | `boolean` | `false` |
+| load | 指定异步加载节点数据的函数，该函数通过`Promise`返回数组来添加子节点数据 | <code>(node: TreeNode<K>) => Proomise<void> &#124; void</code> | `undefined` |
+| showLine | 是否展示`Tree`的对齐线 | `boolean` | `true` |
+| defaultExpandAll | 是否默认展开所有节点 | `boolean` | `true` |
+| checkbox | 是否展示复选框 | `boolean` | `false` |
+| filter | 当支持筛选时，可以自定义筛选规则 | `(keywords: string, data: TreeDataItem<K>) => boolean` | `undefined` |
+
+```ts
+import {Key, Children} from 'intact';
+
+export type Container = string | ((parentDom: Element, anchor: Node | null) => Element)
+
+export type TreeDataItem<K extends Key> = {
+    label?: Children 
+    key?: K
+    disabled?: boolean
+    loaded?: boolean
+    children?: TreeDataItem<K>[]
+}
+
+```
 
 # 扩展点
 
 | 名称 | 说明 | 参数 |
 | --- | --- | --- |
-| value | 自定义选择结果的展示 | `value, label` |
+| value | 自定义选择结果的展示 | `([value: any, label: Children]) => Children` |
+| values | 自定义多选的选择结果的展示 | `([values: any[], labels: Children[]]) => Children` |
+| prefix | 自定义输入款前面展示的内容 | - |
+| suffix | 自定义输入框后面展示的内容 | - |
+| menu | 自定义整个菜单的内容 | - |
 
+```ts
+import {Children} from 'intact';
+```
+
+# 事件
+
+| 事件名 | 说明 | 参数 |
+| --- | --- | --- |
+| show | 菜单弹出时触发 | - |
+| hide | 菜单隐藏时触发 | - |

package/components/treeSelect/index.spec.ts

@@ -21,7 +21,7 @@ describe('TreeSelect', () => {
         (dropdown.querySelector('.k-tree-text') as HTMLElement).click();
         expect(instance.get('value')).to.eql('1');
 
-        await wait(300);
+        await wait(500);
         expect(getElement('.k-tree-select-menu')).to.be.undefined;
     });
 
@@ -39,7 +39,7 @@ describe('TreeSelect', () => {
         expect(instance.get('values')).to.eql(['1.1']);
 
         instance.set('values', ['1']);
-        await wait(300)
+        await wait(500)
         expect(dropdown.innerHTML).to.matchSnapshot();
         expect(element.innerHTML).to.matchSnapshot();
     });
@@ -73,7 +73,7 @@ describe('TreeSelect', () => {
         const input = element.querySelector('.k-input-inner') as HTMLInputElement;
         input.value = 'first';
         dispatchEvent(input, 'input');
-        await wait(300);
+        await wait(500);
         expect(dropdown.innerHTML).to.matchSnapshot();
 
         const [, text2] = dropdown.querySelectorAll('.k-tree-text');
@@ -103,11 +103,11 @@ describe('TreeSelect', () => {
         await wait();
         dispatchEvent(select, 'focusout');
 
-        await wait(300);
+        await wait(500);
         expect(element.querySelector('.k-form-error')).to.be.null;
 
         dispatchEvent(select, 'click');
-        await wait(300);
+        await wait(500);
         expect(element.querySelector('.k-form-error')).not.to.be.null;
     });
 });

package/components/treeSelect/styles.ts

@@ -4,11 +4,12 @@ import {deepDefaults, palette} from '../../styles/utils';
 import '../../styles/global';
 
 const defaults = {
+    get transition() { return theme.transition.middle },
     maxHeight: `400px`,
     padding: `3px 6px`,
 };
 
-let treeSelect: any;
+let treeSelect: typeof defaults;
 setDefault(() => {
     treeSelect = deepDefaults(theme, {treeSelect: defaults}).treeSelect;
 });
@@ -20,7 +21,7 @@ export function makeStyles() {
         padding: ${treeSelect.padding};
         overflow: auto;
         &:not([class*="-active"]) {
-            transition: left ${theme.transition}, top ${theme.transition};
+            transition: left ${treeSelect.transition}, top ${treeSelect.transition};
         }
     `;
 }

package/components/upload/index.md

@@ -9,23 +9,49 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| accept | `input`的[accept](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept)属性，支持的文件的类型 | `String` | `undefined` |
-| multiple | `input`的`multiple`属性，是否支持多选 | `Boolean` | `false` |
+| accept | `input`的[accept](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept)属性，支持的文件的类型 | `string` | `undefined` |
+| files | 所有已上传和待上传的文件列表 | `UploadFile[]` | `[]` |
+| defaultFiles | 指定初始化上传列表，见示例 | <code>(Partial&lt;UploadFile&gt; & Pick&lt;UploadFile, 'name' &#124; 'url'&gt;)[]</code> | `undefined` |
+| maxSize | 最大上传文件大小限制(kb)，默认无限制 | `number` | `undefined` |
+| limit | 最大上传文件数量限制，默认无限制 | `number` | `undefined` |
+| autoUpload | 是否选择文件后即自动上传 | `boolean` | `true` |
+| beforeRemove | 指定文件在删除之前的处理逻辑，如果该函数返回`false`，则取消删除，你也可以使用异步函数或返回`Promise`对象；组件会将当前文件(file)和文件列表(files)传给该函数 | `BeforeCallback` | `undefined` |
+| beforeUpload | 指定文件在开始上传之前的处理逻辑，如果该函数返回`false`，则取消上传，你也可以使用异步函数或返回`Promise`对象；组件会将当前文件(file)和文件列表(files)传给该函数 | `BeforeCallback` | `undefined` |
+| data | 指定上传附加的请求数据，可以为对象或者函数，为函数时，组件会将当前文件对象作为参数传入，函数应返回一个对象作为附加数据 | `DataObject` &#124; `DataFunction` | `undefined` |
+| action | 上传地址 | `string` | `undefined` |
+| headers | 指定上传的请求头 | <code>Record&lt;string &#124; number, string&gt;</code> | `undefined` |
+| name | 指定上传文件字段名，不存在时，组件默认会使用原始文件名 | `string` | `undefined` |
+| withCredentials | 指定跨域请求是是否允许传送cookie | `boolean` | `false` |
 | type | 组件风格 | `"select"` &#124; `"drag"` &#124; `"gallery"` | `"select"` |
-| autoUpload | 是否选择文件后即自动上传 | `Boolean` | `true` |
-| disabled | 是否禁用上传 | `Boolean` | `false` |
-| action | 上传地址 | `String` | `""` |
-| name | 指定上传文件字段名，不存在时，组件默认会使用原始文件名 | `String` | `undefined` |
-| headers | 指定上传的请求头 | `Object` | `undefined` |
-| data | 指定上传附加的请求数据，可以为对象或者函数，为函数时，组件会将当前文件对象作为参数传入，函数应返回一个对象作为附加数据 | `Object` &#124; `Function` | `undefined` |
-| withCredentials | 指定跨域请求是是否允许传送cookie | `Boolean` | `false` |
-| limit | 最大上传文件数量限制，默认无限制 | `Number` | `undefined` |
-| maxSize | 最大上传文件大小限制(kb)，默认无限制 | `Number` | `undefined` |
-| defaultFiles | 指定初始化上传列表，见示例 | `Array<Object>` | `undefined` |
-| beforeUpload | 指定文件在开始上传之前的处理逻辑，如果该函数返回`false`，则取消上传，你也可以使用异步函数或返回`Promise`对象；组件会将当前文件(file)和文件列表(files)传给该函数 | `Function` | `() => true` |
-| beforeRemove | 指定文件在删除之前的处理逻辑，如果该函数返回`false`，则取消删除，你也可以使用异步函数或返回`Promise`对象；组件会将当前文件(file)和文件列表(files)传给该函数 | `Function` | `() => true` |
-| files | 所有已上传和待上传的文件列表 | `Array` | `[]` |
-| directory | 是否支持上传文件夹 [caniuse](https://caniuse.com/#feat=input-file-directory) | `Boolean` | `false` |
+| directory | 是否支持上传文件夹 [caniuse](https://caniuse.com/#feat=input-file-directory) | `boolean` | `false` |
+| disabled | 是否禁用上传 | `boolean` | `false` |
+| multiple | `input`的`multiple`属性，是否支持多选 | `boolean` | `false` |
+
+```ts
+export type UploadFile = {
+    status: UploadFileStatus
+    type?: string
+    size?: number
+    name: string
+    percent: number
+    uid: number
+    raw: File | Partial<UploadFile>
+    url?: string
+    request?: any
+}
+
+export enum UploadFileStatus {
+    Done,
+    Ready,
+    NotReady,
+    Uploading,
+    Error,
+}
+
+type BeforeCallback = (file: UploadFile, files: UploadFile[]) => Promise<boolean> | boolean
+type DataObject = Record<string | number, any>
+type DataFunction = (file: UploadFile) => DataObject
+```
 
 # 扩展点
 
@@ -45,6 +71,16 @@ sidebar: doc
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
-| error | 文件超出最大文件数量限制，超出文件大小限制，或者上传失败都会抛出该事件 | `Error, file, files` |
-| progress | 文件上传过程中会抛出该事件 | `Event, file, files` |
-| success | 文件上传成功时会抛出该事件 | `response, file, files` |
+| progress | 文件上传过程中会抛出该事件 | `(event: ProgressEvent, xml: XMLHttpRequest, file: UploadFile, files: UploadFile[]) => void` |
+| success | 文件上传成功时会抛出该事件 | `(res: any, xml: XMLHttpRequest, file: UploadFile, files: UploadFile[]) => void` |
+| error | 文件超出最大文件数量限制，超出文件大小限制，或者上传失败都会抛出该事件 | <code>(err: Error &#124; RequestError, file: File[] &#124; File &#124; UploadFile, files: UploadFile[]) => void</code> |
+
+```ts
+interface RequestError extends Error {
+    status: number
+    method: string
+    url: string
+    response: any
+    xhr: XMLHttpRequest
+}
+```

package/components/upload/index.spec.ts

@@ -52,7 +52,7 @@ describe('Upload', () => {
         unmount();
         respond = xhr => { xhr.respond(200) };
         this.xhr.restore();
-        setTimeout(done, 400);
+        setTimeout(done, 500);
     });
 
     it('basic', function(done) {

package/components/upload/index.ts

@@ -9,7 +9,7 @@ import {useShowImage} from './useShowImage';
 import type {RequestError} from './ajaxUploader';
 import type {Events} from '../types';
 
-export type {RequestError};
+export type {RequestError, UploadFileStatus};
 
 export interface UploadProps {
     accept?: string

package/components/upload/index.vdt

@@ -53,11 +53,10 @@ const handle = (
 
 const {removeFile} = this.files;
 const closeBtn = (value, index, icon) => (
-    <Button type="none" icon size="mini" class="k-upload-close"
+    <Icon class={{"k-upload-close": true, [icon]: true}}
         ev-click={() => removeFile(value, index)}
-    >
-        <Icon class={icon} />
-    </Button>
+        hoverable
+    />
 );
 
 const {show, close, image, isShow} = this.showImage;

package/components/upload/styles.ts

@@ -4,6 +4,7 @@ import {deepDefaults, palette} from '../../styles/utils';
 import '../../styles/global';
 
 const defaults = {
+    get transition() { return theme.transition.middle },
     fontSize: '12px',
     tip: {
         gap: '16px',
@@ -73,7 +74,7 @@ const defaults = {
     }
 };
 
-let upload: any;
+let upload: typeof defaults;
 setDefault(() => {
     upload = deepDefaults(theme, {upload: defaults}).upload;
 });
@@ -149,7 +150,7 @@ export function makeStyles() {
                 border-radius: ${upload.drag.borderRadius};
                 cursor: pointer;
                 text-align: center;
-                transition: border-color ${theme.transition};
+                transition: border-color ${upload.transition};
                 &:hover {
                     border-color: ${upload.drag.hoverBorderColor};
                 }
@@ -198,7 +199,7 @@ export function makeStyles() {
                 right: ${upload.gallery.close.right};
                 display: inline-block;
                 opacity: 0;
-                transition: opacity ${theme.transition};
+                transition: opacity ${upload.transition};
                 pointer-events: none;
                 .k-icon {
                     font-size: ${upload.gallery.close.fontSize};
@@ -206,7 +207,7 @@ export function makeStyles() {
             }
             .k-upload-icons {
                 opacity: 0;
-                transition: opacity ${theme.transition};
+                transition: opacity ${upload.transition};
             }
             &:hover {
                 .k-upload-icons {

package/components/utils.ts

@@ -159,7 +159,7 @@ export function getRestProps<T>(component: Component<T>, props = component.get()
 }
 
 const externalLinkReg = /^(https?:)?\/\//;
-export function isExternalLink(to?: string) {
+export function isExternalLink(to?: string | object): to is string {
     if (!isString(to)) return false;
     return externalLinkReg.test(to);
 }