@king-design/intact 3.1.0-beta.2 → 3.1.0

package/components/tree/demos/draggable.md

@@ -8,7 +8,7 @@ order: 6
 触发`denydrag`和`denydrop`事件来告知用户
 
 ```vdt
-import {Tree, Input} from 'kpc';
+import {Tree, Input, Icon} from 'kpc';
 
 <Tree 
     draggable
@@ -19,11 +19,22 @@ import {Tree, Input} from 'kpc';
     ev-denydrop={this.onDenyDrop}
     v-model:data='data'
     v-model:expandedKeys="expandedKeys"
-/>
+>
+    <b:label args="[data, node]">
+        <Icon v-if={data.type === 'file'} class="k-icon-paper" />
+        <Icon v-else class="k-icon-folder" />
+        {data.label}
+    </b:label>
+</Tree>
+```
+
+```styl
+.k-tree-text .k-icon
+    margin-right 8px
 ```
 
 ```ts
-import {Message, TreeDataItem, TreeNode, TreeDragEndData} from 'kpc';
+import {Message, TreeDataItem, TreeNode, TreeDragEndData, TreeMode} from 'kpc';
 
 interface Props {
     data?: TreeDataItem<string>[]
@@ -37,58 +48,52 @@ export default class extends Component<Props> {
         return {
             data: [
                 {
-                    label: 'First floor-1',
-                    key: '1',
+                    label: '总览',
+                    key: 'summarization',
+                    type: 'file',
+                },
+                {
+                    label: '产品简介',
+                    key: 'introduction',
+                    type: 'file',
+                },
+                {
+                    label: '技术实现',
+                    key: 'implemention',
+                    type: 'file',
+                },
+                {
+                    label: '操作指南',
+                    key: 'guide',
+                    type: 'dir',
                     children: [
                         {
-                            label: 'Second floor-1.1',
-                            key: '1-1',
-                            children: [
-                                {
-                                    label: 'This node can not be dragged and dropped.',
-                                    key: '1-1-1'
-                                }
-                            ]
-                        }
+                            label: '产品安装',
+                            key: 'installation',
+                            type: 'file',
+                        },
                     ]
                 },
                 {
-                    label: 'First floor-2',
-                    key: '2',
+                    label: '接入说明',
+                    key: 'interaction',
+                    type: 'dir',
                     children: [
                         {
-                            label: 'Second floor-2.1',
-                            key: '2-1',
-                            children: [
-                                {
-                                    label: 'Third floor-2.1.1',
-                                    key: '2-1-1' 
-                                },
-                                {
-                                    label: 'Third floor-2.1.2',
-                                    key: '2-1-2'
-                                }
-                            ]
-                        },
-                        {
-                            label: 'Second floor-2.2',
-                            key: '2-2',
-                            children: [
-                                {
-                                    label: 'Third floor-2.2.1',
-                                    key: '2-2-1'
-                                }
-                            ]
+                            label: '使用',
+                            key: 'usage',
+                            type: 'file',
                         },
-                        {
-                            label: 'Second floor-2.3',
-                            key: '2-3',
-                            disabled: true
-                        }
                     ]
-                }
+                },
+                {
+                    label: '禁用文件',
+                    key: 'disabled',
+                    type: 'file',
+                    disabled: true,
+                },
             ],
-            expandedKeys: ['2', '2-1'],
+            expandedKeys: [],
         };
     }
 
@@ -97,11 +102,21 @@ export default class extends Component<Props> {
     }
 
     allowDrag(node: TreeNode<string>) {
-        return node.key !== '1-1-1';
+        return node.key !== 'summarization';
     }
 
-    allowDrop(node: TreeNode<string>) {
-        return node.key !== '1-1-1';
+    allowDrop(node: TreeNode<string>, srcNode: TreeNode<string>, mode: TreeMode) {
+        // 能够将文件拖入文件夹，但是不能讲文件夹拖入文件夹
+        if (mode === TreeMode.Inner) {
+            // 文件拖入文件夹
+            return srcNode.data.type === 'file' && node.data.type === 'dir';
+        } else if (srcNode.data.type === 'dir' && node.parent) {
+            // 此时插入模式是，前面或者后面插入
+            // 如果拖动的是文件夹，但是目标节点存在父元素，代表目标节点也是文件夹，不能插入
+            return false
+        }
+
+        return true;
     }
 
     onDenyDrag(node: TreeNode<string>) {

package/components/tree/demos/expandAll.md

@@ -5,19 +5,40 @@ order: 7
 
 给组件添加`defaultExpandAll`属性，可以默认展开所有节点
 
-> 仅限首次渲染`Tree`时生效，后续添加节点不会默认展开
+> `@before v3.1.0` 仅限首次渲染`Tree`时生效，后续添加节点不会默认展开
+> `@since v3.1.0` 当首次渲染时，如果不存在`data`或者`data`为空数组，则待接收到新的`data`后，展开所有节点
 
 ```vdt
-import {Tree} from 'kpc';
+import {Tree, Button} from 'kpc';
 
-<Tree
-    defaultExpandAll
-    data={this.get('data')}
-/>
+<div class="wrapper">
+    <Tree
+        defaultExpandAll
+        data={this.get('data')}
+    />
+    <Tree
+        defaultExpandAll
+        data={this.get('delayData')}
+    />
+    <Button ev-click={this.load}>加载数据</Button>
+</div>
+```
+
+```styl
+.wrapper
+    display flex
+    gap 18px
 ```
 
 ```ts
-export default class extends Component {
+import {bind, TreeDataItem} from 'kpc';
+
+interface Props {
+    data: TreeDataItem<string>[]
+    delayData?: TreeDataItem<string>[]
+}
+
+export default class extends Component<Props> {
     static template = template;
     static defaults() {
         return {
@@ -62,8 +83,15 @@ export default class extends Component {
                         }
                     ]
                 }
-            ]
+            ],
+
+            delayData: undefined
         }
     }
+
+    @bind
+    load() {
+        this.set('delayData', this.get('data'));
+    }
 }
 ```

package/components/tree/index.md

@@ -23,7 +23,7 @@ sidebar: doc
 | showLine | 是否展示左侧对齐线 | `boolean` | `true` |
 | draggable | 是否支持拖拽 | `boolean` | `false` |
 | allowDrag | 指定哪些节点可拖拽 | `(node: TreeNode<K>) => boolean` | `undefined` |
-| allowDrop | 指定哪些节点可以插入子节点 | `(node: TreeNode<K>) => boolean` | `undefined` |
+| allowDrop | 指定哪些节点可以插入子节点 | `(node: TreeNode<K>, srcNode: TreeNode[K]) => boolean` | `undefined` |
 
 ```ts
 import {Key, Children} from 'intact';
@@ -82,6 +82,7 @@ export class TreeNode<K extends Key> {
 | expand | 展开节点 | `(key: K) => void`，`key` 要展开的节点的key | `undefined` |
 | shrink | 收起节点 | `(key: K) => void`，`key` 要收起的节点的key | `undefined` |
 | getNodes | 返回一级节点  | `() => TreeNode<K>[]` | `TreeNode<K>[]` 一级节点数组 |
+| expandAll | 展开所有节点 | `() => void` | `undefined` |
 
 # 事件
 
@@ -89,7 +90,7 @@ export class TreeNode<K extends Key> {
 | --- | --- | --- |
 | dragend | 拖拽完成触发 | `DragEndData<K>`，`{srcNode: '源节点', toNode: '目标节点', mode: '插入模式, Before: 插入节点前面, After: 插入节点后面, Inner: 插入节点内部'}` |
 | denydrag | 拖拽不允许拖拽的节点触发 | `TreeNode<K>` |
-| denydrop | 插入到不允许插入的节点时触发 | `TreeNode<K>` |
+| denydrop | 插入到不允许插入的节点时触发 | `(node: TreeNode[K], srcNode: TreeNode[K], mode: TreeMode)`，`node`: 当前要插入的目的节点, `srcNode`: 当前拖拽的节点，`mode`: 插入模式 |
 
 ```ts
 import {Key} from 'intact';

package/components/tree/index.spec.ts

@@ -181,57 +181,56 @@ describe('Tree', () => {
 
         const [instance, element] = mount(DraggableDemo);
 
-        instance.set('expandedKeys', ['2', '2-1', '1', '1-1']);
+        instance.set('expandedKeys', ['guide']);
         await wait(500);
 
+        let [notAllowed, file1, file2, dir1, file3, dir2, disabled]= element.querySelectorAll('.k-tree-label') as NodeListOf<HTMLElement>;
         // can not drag disabled item
-        const disabled = element.querySelector('.k-disabled') as HTMLElement;
-        // dispatchEvent(disabled, 'mousedown');
         dispatchEvent(disabled, 'dragstart');
         expect(onDenyDrag.callCount).to.eql(1);
 
-        let nodes = element.querySelectorAll('.k-tree-label') as NodeListOf<HTMLElement>;
 
         // can not drag not-allowed item
-        const notAllowed = nodes[2];
-        // dispatchEvent(notAllowed, 'mousedown');
         dispatchEvent(notAllowed, 'dragstart');
         expect(onDenyDrag.callCount).to.eql(2);
 
-        // drag insert
-        return dragInsert(nodes[6], nodes[6]).then(() => {
-            // drag to self will do nothing
-            expect(element.innerHTML).to.matchSnapshot();
-            expect(onDragEnd.callCount).to.eql(0);
-
-            return dragInsert(nodes[6], notAllowed);
-        }).then(() => {
-            // drag to not-allowed item will do nothing
-            expect(element.innerHTML).to.matchSnapshot();
-            expect(onDragEnd.callCount).to.eql(0);
-
-            return dragInsert(nodes[6], disabled);
-        }).then(() => {
-            // drag to disabled item will do nothing
-            expect(element.innerHTML).to.matchSnapshot();
-            expect(onDragEnd.callCount).to.eql(0);
-
-            return dragInsert(nodes[6], nodes[5], 'before');
-        }).then(() => {
-            expect(element.innerHTML).to.matchSnapshot();
-            expect(onDragEnd.callCount).to.eql(1);
-            expect(instance.get('data')).to.matchSnapshot();
-
-            return dragInsert(nodes[6], nodes[5], 'after');
-        }).then(() => {
-            expect(element.innerHTML).to.matchSnapshot();
-            expect(instance.get('data')).to.matchSnapshot();
-
-            return dragInsert(nodes[6], nodes[5]);
-        }).then(() => {
-            expect(element.innerHTML).to.matchSnapshot();
-            expect(instance.get('data')).to.matchSnapshot();
-        });
+        await dragInsert(dir1, dir1);
+        // drag to self will do nothing
+        expect(element.innerHTML).to.matchSnapshot();
+        expect(onDragEnd.callCount).to.eql(0);
+
+        await dragInsert(file1, notAllowed);
+        // drag to not-allowed item will do nothing
+        expect(element.innerHTML).to.matchSnapshot();
+        expect(onDragEnd.callCount).to.eql(0);
+
+        await dragInsert(file1, disabled);
+        // drag to disabled item will do nothing
+        expect(element.innerHTML).to.matchSnapshot();
+        expect(onDragEnd.callCount).to.eql(0);
+
+        await dragInsert(file2, file1, 'before');
+        expect(element.innerHTML).to.matchSnapshot();
+        expect(onDragEnd.callCount).to.eql(1);
+        expect(instance.get('data')).to.matchSnapshot();
+
+        await dragInsert(file2, file1, 'after');
+        expect(element.innerHTML).to.matchSnapshot();
+        expect(onDragEnd.callCount).to.eql(2);
+        expect(instance.get('data')).to.matchSnapshot();
+
+        await dragInsert(file1, dir1);
+        expect(onDragEnd.callCount).to.eql(3);
+        expect(element.innerHTML).to.matchSnapshot();
+        expect(instance.get('data')).to.matchSnapshot();
+
+        await dragInsert(dir2, dir1);
+        expect(onDragEnd.callCount).to.eql(3);
+        expect(onDenyDrag.callCount).to.eql(2);
+
+        await dragInsert(dir2, file3, 'before');
+        expect(onDragEnd.callCount).to.eql(3);
+        expect(onDenyDrag.callCount).to.eql(2);
     });
 });
 

package/components/tree/index.ts

@@ -14,9 +14,10 @@ import { useConfigContext } from '../config';
 export type {
     Node as TreeNode,
     DataItem as TreeDataItem,
-    Mode as TreeMode,
 };
 
+export { Mode as TreeMode };
+
 export interface TreeProps<K extends Key = Key> {
     data?: DataItem<K>[]
     filter?: Filter<K>
@@ -32,12 +33,12 @@ export interface TreeProps<K extends Key = Key> {
     showLine?: boolean
     draggable?: boolean
     allowDrag?: (node: Node<K>) => boolean 
-    allowDrop?: (node: Node<K>) => boolean 
+    allowDrop?: (node: Node<K>, srcNode: Node<K>, mode: Mode) => boolean 
 }
 
 export interface TreeEvents<K extends Key> {
     denydrag: [Node<K>]
-    denydrop: [Node<K>]
+    denydrop: [Node<K>, Node<K>, Mode]
     dragend: [DragEndData<K>]
     transitionEnd: []
 }
@@ -125,6 +126,10 @@ export class Tree<K extends Key = Key> extends Component<TreeProps<K>, TreeEvent
         return this.nodes.getNodes() as Node<K>[];
     }
 
+    public expandAll() {
+        this.expanded.expandAll();
+    }
+
     @bind
     private onClick(node: Node<K>) {
         if (node.data.disabled) return;

package/components/tree/styles.ts

@@ -78,6 +78,8 @@ export function makeStyles(k: string) {
             padding: ${tree.textPadding};
             border-radius: ${tree.borderRadius};
             flex: 1;
+            display: flex;
+            align-items: center;
         }
 
         .${k}-tree-leaf {

package/components/tree/useDraggable.ts

@@ -59,15 +59,15 @@ export function useDraggable() {
             mode.set(newMode);
             overKey.set(node.key);
 
-            // if the node does not allow drop, prevent the dragging ndoe from inserting to it
-            if (mode.value === Mode.Inner) {
+            // if the node does not allow drop, prevent the dragging node from inserting to it
+            // if (mode.value === Mode.Inner) {
                 const {allowDrop} = instance.get();
-                if (node.data.disabled || allowDrop && !allowDrop(node)) {
-                    instance.trigger('denydrop', node);
+                if (node.data.disabled || allowDrop && !allowDrop(node, draggingNode!, newMode)) {
+                    instance.trigger('denydrop', node, draggingNode!, newMode);
                     valid = false;
                     return;
                 }
-            }
+            // }
 
             valid = true;
         }

package/components/tree/useExpanded.ts

@@ -11,8 +11,20 @@ export function useExpanded(getNodes: () => Node<Key>[]) {
     });
 
     onBeforeMount(() => {
-        if (instance.get('defaultExpandAll')) {
-            expandAll();
+        /**
+         * change the behavior
+         * if the data is undefined, we expand all keys after we received data
+         */
+        const { defaultExpandAll, data } = instance.get();
+        if (defaultExpandAll) {
+            if (data && data.length) {
+                expandAll();
+            } else {
+                instance.on(`$receive:data`, function cb() {
+                    expandAll();
+                    instance.off(`$receive:data`, cb);
+                });
+            }
         }
     });
 
@@ -55,5 +67,5 @@ export function useExpanded(getNodes: () => Node<Key>[]) {
         instance.set('expandedKeys', Array.from(expandedKeys));
     }
 
-    return {get: () => expandedKeys, toggle};
+    return {get: () => expandedKeys, toggle, expandAll};
 }

package/components/tree/useNodes.ts

@@ -8,6 +8,7 @@ export type DataItem<K extends Key> = {
     disabled?: boolean
     loaded?: boolean
     children?: DataItem<K>[]
+    [key: string]: any
 }
 
 const prefix = '__$_';

package/components/treeSelect/index.md

@@ -29,7 +29,7 @@ sidebar: doc
 | uncorrelated | 是否让父子`checkbox`选中状态互不关联 | `boolean` | `false` |
 | load | 指定异步加载节点数据的函数，该函数通过`Promise`返回数组来添加子节点数据 | <code>(node: TreeNode<K>) => Proomise<void> &#124; void</code> | `undefined` |
 | showLine | 是否展示`Tree`的对齐线 | `boolean` | `true` |
-| defaultExpandAll | 是否默认展开所有节点 | `boolean` | `true` |
+| defaultExpandAll | 是否默认展开所有节点 | `boolean` | `false` |
 | checkbox | 是否展示复选框 | `boolean` | `false` |
 | filter | 当支持筛选时，可以自定义筛选规则 | `(keywords: string, data: TreeDataItem<K>) => boolean` | `undefined` |
 | show | 是否展示菜单项 | `boolean` | `false` |
@@ -74,6 +74,12 @@ type Collision = 'fit' | 'flip' | 'flipfit' | 'none'
 import {Children} from 'intact';
 ```
 
+# 方法
+
+| 方法名 | 说明 | 参数 | 返回值 |
+| --- | --- | --- | --- |
+| expandAll | 展开所有节点 | `() => void` | `undefined` |
+
 # 事件
 
 | 事件名 | 说明 | 参数 |

package/components/treeSelect/index.ts

@@ -74,6 +74,10 @@ export class TreeSelect<
         });
     }
 
+    public expandAll() {
+        this.value.treeRef.value!.expandAll();
+    }
+
     protected getPlaceholder() {
         const {placeholder} = this.get();
 

package/components/upload/demos/files.md

@@ -3,16 +3,20 @@ title: 定义初始化列表
 order: 3
 ---
 
-你可以通过`defaultFiles`定义初始化上传列表，该属性取值为数组，数组每一项结构如下：
-1. `name` 文件名
-2. `url` 文件对应的url地址
+你可以通过`files`定义初始化上传列表，该属性取值为数组，数组每一项结构如下：
+1. `name` 文件名，必填
+2. `url` 文件对应的url地址，非必填
+3. `status` 状态`UploadFileStatus`，默认成功，非必填
+4. `uid` 文件唯一标识id，非必填
+
+> @since 3.1.0，defaultFiles已被废弃，使用files来代替，支持响应式更新
 
 ```vdt
 import {Upload} from 'kpc';
 
 <Upload multiple
     action="//fakestoreapi.com/products"
-    defaultFiles={this.get('defaultFiles')}
+    v-model:files="files"
 />
 ```
 
@@ -22,22 +26,20 @@ import {Upload} from 'kpc';
 ```
 
 ```ts
-interface Props {
-    defaultFiles: DefaultFile[]
-}
+import {UploadFileStatus, UploadFile} from 'kpc';
 
-type DefaultFile = {
-    name: string
-    url: string
+interface Props {
+    files?: UploadFile[]
 }
 
 export default class extends Component<Props> {
     static template = template;
     static defaults() {
         return {
-            defaultFiles: [
+            files: [
                 {name: 'test1.jpg', url: 'http://www.example.com/test1.jpg'},
-                {name: 'test2.png', url: 'http://www.example.com/test2.png'}
+                {name: 'test2.png', url: 'http://www.example.com/test2.png'},
+                {name: 'test3.png', status: UploadFileStatus.Error},
             ]
         } as Props;
     }

package/components/upload/index.md

@@ -11,7 +11,7 @@ sidebar: doc
 | --- | --- | --- | --- |
 | 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` |
+| defaultFiles `@deprecated` | 指定初始化上传列表，见示例 | <code>(Partial&lt;UploadFile&gt; & Pick&lt;UploadFile, 'name' &#124; 'url'&gt;)[]</code> | `undefined` |
 | maxSize | 最大上传文件大小限制(kb)，默认无限制 | `number` | `undefined` |
 | limit | 最大上传文件数量限制，默认无限制 | `number` | `undefined` |
 | autoUpload | 是否选择文件后即自动上传 | `boolean` | `true` |
@@ -29,13 +29,13 @@ sidebar: doc
 
 ```ts
 export type UploadFile = {
-    status: UploadFileStatus
+    status?: UploadFileStatus
     type?: string
     size?: number
     name: string
-    percent: number
-    uid: number
-    raw: File | Partial<UploadFile>
+    percent?: number
+    uid?: number
+    raw?: File | Partial<UploadFile>
     url?: string
     request?: any
 }

package/components/upload/index.ts

@@ -10,7 +10,8 @@ import type {RequestError} from './ajaxUploader';
 import type {Events} from '../types';
 import { useConfigContext } from '../config';
 
-export type {RequestError, UploadFileStatus};
+export type {RequestError};
+export {UploadFileStatus};
 
 export interface UploadProps {
     accept?: string
@@ -45,13 +46,13 @@ export interface UploadBlocks {
 }
 
 export type UploadFile = {
-    status: UploadFileStatus
+    status?: UploadFileStatus
     type?: string
     size?: number
     name: string
-    percent: number
-    uid: number
-    raw: File | Partial<UploadFile>
+    percent?: number
+    uid?: number | string
+    raw?: File | Partial<UploadFile>
     url?: string
     request?: any
 }

package/components/upload/useFiles.ts

@@ -17,21 +17,22 @@ export function useFiles(
         const {files, defaultFiles} = instance.get();
         const _files = files!.slice(0);
         if (defaultFiles) {
+            if (process.env.NODE_ENV !== 'production') {
+                console.warn(`'defaultFiles' is deprecated, use 'files' instead for reactive updating.`)
+            }
             defaultFiles.forEach(file => {
-                _files.push({
-                    status: UploadFileStatus.Done,
-                    name: file.name,
-                    percent: 100,
-                    uid: uid++,
-                    raw: file,
-                    url: file.url,
-                });
+                _files.push(normalizeFile(file));
             });
 
             instance.set('files', _files);
         }
     }
 
+    instance.on(`$receive:files`, (files) => {
+        if (!files) return;
+        instance.set('files', files.map(normalizeFile));
+    });
+
     async function addFiles(fileList: FileList) {
         const files = instance.get('files')!.slice(0);
         const newFiles = Array.from(fileList);
@@ -100,3 +101,13 @@ export function useFiles(
 
     return {addFiles, removeFile};
 }
+
+function normalizeFile(file: UploadFile) {
+    return {
+        status: UploadFileStatus.Done,
+        percent: 100,
+        uid: uid++,
+        raw: file,
+        ...file
+    };
+}

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

@@ -21,6 +21,7 @@ export default function ($props, $blocks, $__proto__) {
       fields = _this$get.fields;
 
   var k = this.config.k;
+  var baseMenuStyles = makeMenuStyles(k);
   var classNameObj = (_classNameObj = {}, _classNameObj[k + "-cascader-menu"] = true, _classNameObj[makeMenuStyles(k)] = true, _classNameObj);
   var getField = this.fields;