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

package/components/copy/index.spec.ts

@@ -1,5 +1,8 @@
 import BasicDemo from '~/components/copy/demos/basic';
 import {mount, unmount, dispatchEvent, wait, getElement} from '../../test/utils';
+import { Tooltip } from '../tooltip';
+import { Component } from 'intact';
+import { Copy } from '.';
 
 describe('Copy', () => {
     afterEach(async () => {
@@ -18,4 +21,29 @@ describe('Copy', () => {
             console.log(e);
         }
     });
+
+    it('wrap copy with tooltip', async () => {
+        class Demo extends Component {
+            static template = `
+                const { Tooltip, Copy } = this;
+                <Tooltip content="test">
+                    <Copy text="test" />
+                </Tooltip>
+            `;
+            Tooltip = Tooltip;
+            Copy = Copy;
+        }
+
+        const [instance, element] = mount(Demo);
+
+        element.click();
+        await wait();
+        try {
+            const text = await navigator.clipboard.readText();
+            expect(text).to.eql('test');
+        } catch (e) {
+            // Read permisson denied 
+            console.log(e);
+        }
+    });
 });

package/components/copy/index.ts

@@ -12,6 +12,7 @@ export interface CopyProps {
 export interface CopyEvents {
     success: [string]
     error: []
+    click: [MouseEvent]
 }
 
 const typeDefs: Required<TypeDefs<CopyProps>> = {
@@ -26,6 +27,7 @@ const defaults = (): Partial<CopyProps> => ({
 const events: Events<CopyEvents> = {
     success: true,
     error: true,
+    click: true,
 };
 
 export class Copy extends Component<CopyProps, CopyEvents> {

package/components/copy/useCopy.ts

@@ -11,7 +11,7 @@ export function useCopy() {
     let timer: number;
 
     return {
-        startCopy: () => {
+        startCopy: (e: MouseEvent) => {
             const { text, showMessage } = instance.get();
 
             if (clipboardCopy(text) || commandCopy(text)) {
@@ -27,6 +27,8 @@ export function useCopy() {
                 success.set(false);
                 instance.trigger('error');
             }
+
+            instance.trigger('click', e);
         },
         success,
     };

package/components/dialog/base.ts

@@ -179,7 +179,7 @@ export class BaseDialog<
 
     @bind
     private onClickWrapper(e: MouseEvent) {
-        if (this.get('closable')) {
+        if (this.get('closable') && e.target === this.overlayRef.value) {
             this.terminate();
         }
     }

package/components/dialog/base.vdt

@@ -90,8 +90,8 @@ const dialog = (
                 ev-click={this.onClickWrapper}
                 class={`${k}-dialog-overlay`}
                 ref={this.overlayRef}
-            ></div>
+            >{dialog}</div>
         </Transition>
-        {dialog}
+        <template v-else>{dialog}</template>
     </div>
 </Portal>

package/components/dialog/styles.ts

@@ -168,6 +168,7 @@ export function makeWrapperStyles(k: string) {
             width: 100%;
             height: 100%;
             background: rgba(0, 0, 0, .5);
+            overflow: auto;
         }
     `;
 }

package/components/menu/demos/basic.md

@@ -26,7 +26,7 @@ import {Menu, MenuItem, Icon} from 'kpc';
     </MenuItem>
     <MenuItem key="2" disabled><Icon class="ion-star" />menu 2</MenuItem>
     <MenuItem key="3">
-        <i class="k-icon ion-heart"></i>menu 3
+        <Icon class="ion-heart" />menu 3
         <Menu>
             <MenuItem key="3-1">sub menu 1</MenuItem>
             <MenuItem key="3-2">sub menu 2</MenuItem>

package/components/menu/item.vdt

@@ -5,7 +5,7 @@ import {Icon} from '../icon';
 import {Menu} from './menu';
 import {getRestProps, expandAnimationCallbacks} from '../utils';
 import {isNullOrUndefined} from 'intact-shared';
-import {makeItemStyles, makeTitleStyles} from './styles';
+import {makeItemStyles, makeTitleStyles, makeNestedMenuStyles} from './styles';
 
 const rootMenu = this.rootMenu;
 const {theme, type, dot: rootDot} = rootMenu.get();
@@ -18,6 +18,7 @@ const {
     tooltipContents, iconVNode, titleVNodes,
     position, isCollapse,
 } = this.dropdown();
+
 const { k } = this.config;
 const classNameObj = {
     [`${k}-menu-item`]: true,
@@ -48,7 +49,21 @@ const title = (children) => (
             key="subMenu"
             {...expandAnimationCallbacks}
         >
-            {subMenuVNode}
+            {(() => {
+                if (subMenuVNode) {
+                    const paddingLeft = this.parentMenu.get('_paddingLeft');
+                    const [_classname, _paddingLeft] = makeNestedMenuStyles(k, showDot || !!iconVNode, paddingLeft);
+                    const className = _$cn({
+                        [_classname]: true,
+                        [subMenuVNode.className]: subMenuVNode.className,
+                    });
+                    const clonedVNode = directClone(subMenuVNode);
+                    clonedVNode.props = { ...clonedVNode.props, className, _paddingLeft };
+                    clonedVNode.className = className;
+
+                    return clonedVNode;
+                }
+            })()}
         </Transition>
     </template>
 

package/components/menu/menu.ts

@@ -12,6 +12,8 @@ export interface MenuProps<K extends Key = Key> {
     size?: 'large' | 'default' | 'small' 
     accordion?: boolean
     dot?: boolean
+
+    _paddingLeft?: string 
 }
 
 export interface MenuEvents { }
@@ -29,6 +31,8 @@ const typeDefs: Required<TypeDefs<MenuProps>> = {
     size: ['large', 'default', 'small'],
     accordion: Boolean,
     dot: Boolean,
+
+    _paddingLeft: String,
 };
 
 const defaults = (): Partial<MenuProps> => ({

package/components/menu/menu.vdt

@@ -41,7 +41,7 @@ const content = (
     <div v-if={!isDropdownMenu}
         {...getRestProps(this)}
         class={classNameObj}
-    >{content}{}</div>
+    >{content}</div>
     <DropdownMenu v-else 
         {...getRestProps(this)}
         class={classNameObj}

package/components/menu/styles.ts

@@ -96,20 +96,6 @@ export function makeMenuStyles(k: string) {
             font-size: ${menu.fontSize};
         }
 
-        // nested menu
-        &:not(.${k}-dropdown-menu) &:not(.${k}-dropdown-menu) {
-            width: auto;
-            background: ${menu.subBgColor};
-            .${k}-menu-title {
-                padding-left: calc(${getLeft(menu.item.padding)} + ${menu.icon.width} + ${menu.icon.gap});
-            }
-        }
-        &:not(.${k}-dropdown-menu) &:not(.${k}-dropdown-menu) &:not(.${k}-dropdown-menu) {
-            .${k}-menu-title {
-                padding-left: calc(${getLeft(menu.item.padding)} + ${menu.icon.width} * 2 + ${menu.icon.gap});
-            }
-        }
-
         .${k}-icon {
             width: ${menu.icon.width};
             margin-right: ${menu.icon.gap};
@@ -244,7 +230,6 @@ export function makeItemStyles(k: string) {
         .${k}-menu-title {
             cursor: pointer;
             height: ${menu.item.height};
-            transition: all ${menu.transition};
             &:hover {
                 color: ${menu.item.hoverColor};
             }
@@ -259,6 +244,9 @@ export function makeItemStyles(k: string) {
                 text-overflow: ellipsis;
                 min-width: 0;
             }
+            .${k}-icon {
+                color: inherit;
+            }
         }
         .${k}-menu-arrow {
             transition: transform ${menu.transition};
@@ -305,3 +293,19 @@ export function makeItemStyles(k: string) {
         }
     `
 }
+
+export function makeNestedMenuStyles(k: string, hasIcon: boolean, parentPaddingLeft: string = getLeft(menu.item.padding)) {
+    const paddingLeft = `${parentPaddingLeft}${hasIcon ? ' + ' + menu.icon.width : ''} + ${menu.icon.gap}`;
+    return [
+        css`
+            &.${k}-menu {
+                width: auto;
+                background: ${menu.subBgColor};
+                .${k}-menu-title {
+                    padding-left: calc(${paddingLeft});
+                }
+            }
+        `,
+        paddingLeft,
+    ]
+}

package/components/menu/useDropdown.ts

@@ -45,16 +45,13 @@ export function useDropdown(rootMenu: Menu, parentMenu: Menu) {
         eachChildren(children, vNode => {
             if (isComponentVNode(vNode, Menu)) {
                 subMenuVNode = vNode;
-            } else if (isTopItem && isCollapse) {
-                if (isStringOrNumberNotEmpty(vNode) || isTextVNode(vNode)) {
-                    tooltipContents.push(vNode);
-                } else if (!iconVNode && isComponentVNode(vNode, Icon)) {
-                    iconVNode = vNode;
-                }
             } else {
                 if (isStringOrNumberNotEmpty(vNode) || isTextVNode(vNode)) {
                     // wrap with span for showing text ellipsis
                     vNode = createVNode('span', null, vNode);
+                    tooltipContents.push(vNode);
+                } else if (!iconVNode && isComponentVNode(vNode, Icon)) {
+                    iconVNode = vNode;
                 }
                 titleVNodes.push(vNode);
             }

package/components/table/row.vdt

@@ -39,8 +39,8 @@ const pushCheckTypeVNode = (children) => {
         <td key="$checktype"
             {...getClassAndStyleForFixed({
                 fixed: hasFixedLeft ? 'left' : false,
-                className: [`${k}-table-check`]
-            }, 0)}
+                className: [`${k}-table-check`],
+            }, 0, k)}
             {...spans}
         >{children}</td>
     )

package/components/table/table.vdt

@@ -80,7 +80,7 @@ const thead = hideHeader ? null : (
                                         <th v-if={$key === 0 && checkType !== 'none'}
                                             {...getClassAndStyleForFixed({
                                                 fixed: hasFixedLeft ? 'left' : false,
-                                            }, 0)}
+                                            }, 0, k)}
                                             rowspan={maxRows}
                                             key="$checktype"
                                         >

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/index.md

@@ -14,7 +14,7 @@ sidebar: doc
 | uncorrelated | 是否让父子`checkbox`选中状态互不关联 | `boolean` | `false` |
 | checkedKeys | 通过`key`指定勾选的数据节点 | `K[]` | `undefined` |
 | expandedKeys | 通过`key`指定展开的数据节点 | `K[]` | `undefined` |
-| defaultExpandAll | 是否默认展开所有节点 | `boolean` | `false` |
+| defaultExpandAll | 是否默认展开所有节点 （该属性只在首次渲染时起作用，渲染后再更新数据`data`，没有效果） | `boolean` | `false` |
 | selectable | 节点是否可选中，默认为`true`可选中 | `boolean` | `true` |
 | selectedKeys | 通过`key`指定选中的数据节点 | `K[]` | `undefined` |
 | multiple | `selectedKeys`是否支持多选 | `boolean` | `false` |
@@ -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

@@ -55,5 +55,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 = '__$_';