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

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 = '__$_';

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 | 是否默认展开所有节点 （该属性只在首次渲染时起作用，渲染后再更新数据`data`，没有效果） | `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/es/components/colorpicker/styles.js

@@ -123,11 +123,11 @@ export function makeStyles(k) {
   }), "&.", k, "-disabled{.", k, "-colorpicker-color{background:", colorpicker.disabled.bgColor, ";border-color:", colorpicker.disabled.borderColor, ";cursor:", colorpicker.disabled.cursor, ";}}");
 }
 export function makePanelStyles(k) {
-  return /*#__PURE__*/css("padding:", colorpicker.panel.padding, ";width:", colorpicker.panel.width, ";.", k, "-colorpicker-saturation{height:", colorpicker.panel.saturationHeight, ";position:relative;overflow:hidden;user-select:none;}.", k, "-colorpicker-white,.", k, "-colorpicker-black{position:absolute;width:100%;height:100%;}.", k, "-colorpicker-white{background:linear-gradient(90deg, #fff, rgba(255, 255, 255, 0));}.", k, "-colorpicker-black{background:linear-gradient(0, #000, rgba(0, 0, 0, 0));}.", k, "-colorpicker-pointer{position:absolute;}.", k, "-colorpicker-circle{width:", colorpicker.panel.circle.width, ";height:", colorpicker.panel.circle.width, ";box-shadow:", colorpicker.panel.circle.boxShadow, ";border-radius:50%;transform:translate(-50%, -50%);}.", k, "-colorpicker-controls{display:flex;margin-top:", colorpicker.panel.gutter, ";}.", k, "-colorpicker-sliders{flex:1;.", k, "-slider{margin-bottom:", colorpicker.panel.gutter, ";}.", k, "-slider-tra.", k, "-wrapper,.", k, "-slider-track{height:", colorpicker.slider.height, ";}.", k, "-slider-tra.", k, "-wrapper{cursor:", colorpicker.slider.cursor, ";}.", k, "-slider-track{border-radius:", colorpicker.slider.borderRadius, ";margin:0 calc(", colorpicker.slider.thumb.width, " / 2 + 1px);background-color:transparent;}.", k, "-slider-bar{background:transparent;}.", k, "-slider-thumb{height:", colorpicker.slider.thumb.height, ";width:", colorpicker.slider.thumb.width, ";border:", colorpicker.slider.thumb.border, ";border-radius:", colorpicker.slider.thumb.borderRadius, ";box-shadow:", colorpicker.slider.thumb.boxShadow, ";&:focus,&:hover{transform:", colorpicker.slider.thumb.hover.transform, ";cursor:", colorpicker.slider.thumb.hover.cursor, ";background-color:", colorpicker.slider.thumb.hover.bgColor, ";}}}.", k, "-colorpicker-hue{.", k, "-slider-tra.", k, "-wrapper{background:linear-gradient(90deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red);}}.", k, "-colorpicker-alpha{background-size:contain;}.", k, "-colorpicker-alpha-bg{background-image:url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMElEQVQ4T2N89uzZfwY8QFJSEp80A+OoAcMiDP7//483HTx//hx/Ohg1gIFx6IcBALl+VXknOCvFAAAAAElFTkSuQmCC\");}.", k, "-colorpicker-color-wrapper{width:", colorpicker.color.width, ";height:", colorpicker.color.height, ";border-radius:", colorpicker.color.borderRadius, ";margin-left:", colorpicker.panel.gutter, ";overflow:hidden;}.", k, "-colorpicker-color{height:100%;box-shadow:", colorpicker.color.boxShadow, ";}.", k, "-colorpicker-input.", k, "-small{.", k, "-input-inner{height:", colorpicker.input.height, ";line-height:", colorpicker.input.height, ";padding:", colorpicker.input.padding, ";font-size:", colorpicker.panel.fontSize, ";}}.", k, "-colorpicker-text{text-align:center;font-size:", colorpicker.panel.fontSize, ";padding:", colorpicker.input.textPadding, ";}.", k, "-colorpicker-presets{border-top:", colorpicker.presets.delimiter, ";margin:0 -", colorpicker.panel.padding, ";overflow:hidden;}.", k, "-colorpicker-preset-color-wrapper{float:left;border-radius:", colorpicker.presets.borderRadius, ";cursor:pointer;overflow:hidden;margin:", colorpicker.panel.padding, " 0 0 ", colorpicker.panel.padding, ";}.", k, "-colorpicker-preset-color{width:", colorpicker.presets.width, ";height:", colorpicker.presets.height, ";box-shadow:", colorpicker.presets.boxShadow, ";}.", k, "-colorpicker-drag{cursor:ew-resize;user-select:none;}");
+  return /*#__PURE__*/css("padding:", colorpicker.panel.padding, ";width:", colorpicker.panel.width, ";.", k, "-colorpicker-saturation{height:", colorpicker.panel.saturationHeight, ";position:relative;overflow:hidden;user-select:none;}.", k, "-colorpicker-white,.", k, "-colorpicker-black{position:absolute;width:100%;height:100%;}.", k, "-colorpicker-white{background:linear-gradient(90deg, #fff, rgba(255, 255, 255, 0));}.", k, "-colorpicker-black{background:linear-gradient(0, #000, rgba(0, 0, 0, 0));}.", k, "-colorpicker-pointer{position:absolute;}.", k, "-colorpicker-circle{width:", colorpicker.panel.circle.width, ";height:", colorpicker.panel.circle.width, ";box-shadow:", colorpicker.panel.circle.boxShadow, ";border-radius:50%;transform:translate(-50%, -50%);}.", k, "-colorpicker-controls{display:flex;margin-top:", colorpicker.panel.gutter, ";}.", k, "-colorpicker-sliders{flex:1;.", k, "-slider{margin-bottom:", colorpicker.panel.gutter, ";}.", k, "-slider-track-wrapper,.", k, "-slider-track{height:", colorpicker.slider.height, ";}.", k, "-slider-track-wrapper{cursor:", colorpicker.slider.cursor, ";}.", k, "-slider-track{border-radius:", colorpicker.slider.borderRadius, ";margin:0 calc(", colorpicker.slider.thumb.width, " / 2 + 1px);background-color:transparent;}.", k, "-slider-bar{background:transparent;}.", k, "-slider-thumb{height:", colorpicker.slider.thumb.height, ";width:", colorpicker.slider.thumb.width, ";border:", colorpicker.slider.thumb.border, ";border-radius:", colorpicker.slider.thumb.borderRadius, ";box-shadow:", colorpicker.slider.thumb.boxShadow, ";&:focus,&:hover{transform:", colorpicker.slider.thumb.hover.transform, ";cursor:", colorpicker.slider.thumb.hover.cursor, ";background-color:", colorpicker.slider.thumb.hover.bgColor, ";}}}.", k, "-colorpicker-hue{.", k, "-slider-track-wrapper{background:linear-gradient(90deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red);}}.", k, "-colorpicker-alpha{background-size:contain;}.", k, "-colorpicker-alpha-bg{background-image:url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMElEQVQ4T2N89uzZfwY8QFJSEp80A+OoAcMiDP7//483HTx//hx/Ohg1gIFx6IcBALl+VXknOCvFAAAAAElFTkSuQmCC\");}.", k, "-colorpicker-color-wrapper{width:", colorpicker.color.width, ";height:", colorpicker.color.height, ";border-radius:", colorpicker.color.borderRadius, ";margin-left:", colorpicker.panel.gutter, ";overflow:hidden;}.", k, "-colorpicker-color{height:100%;box-shadow:", colorpicker.color.boxShadow, ";}.", k, "-colorpicker-input.", k, "-small{.", k, "-input-inner{height:", colorpicker.input.height, ";line-height:", colorpicker.input.height, ";padding:", colorpicker.input.padding, ";font-size:", colorpicker.panel.fontSize, ";}}.", k, "-colorpicker-text{text-align:center;font-size:", colorpicker.panel.fontSize, ";padding:", colorpicker.input.textPadding, ";}.", k, "-colorpicker-presets{border-top:", colorpicker.presets.delimiter, ";margin:0 -", colorpicker.panel.padding, ";overflow:hidden;}.", k, "-colorpicker-preset-color-wrapper{float:left;border-radius:", colorpicker.presets.borderRadius, ";cursor:pointer;overflow:hidden;margin:", colorpicker.panel.padding, " 0 0 ", colorpicker.panel.padding, ";}.", k, "-colorpicker-preset-color{width:", colorpicker.presets.width, ";height:", colorpicker.presets.height, ";box-shadow:", colorpicker.presets.boxShadow, ";}.", k, "-colorpicker-drag{cursor:ew-resize;user-select:none;}");
 }
 export function makeAlphaBgColor(_ref, k) {
   var r = _ref.r,
       g = _ref.g,
       b = _ref.b;
-  return /*#__PURE__*/css(".", k, "-slider-tra.", k, "-wrapper{background:linear-gradient(to right, rgba(", r, ", ", g, ", ", b, ", 0) 0%, rgb(", r, ", ", g, ", ", b, ") 100%);}");
+  return /*#__PURE__*/css(".", k, "-slider-track-wrapper{background:linear-gradient(to right, rgba(", r, ", ", g, ", ", b, ", 0) 0%, rgb(", r, ", ", g, ", ", b, ") 100%);}");
 }

package/es/components/copy/index.d.ts

@@ -7,6 +7,7 @@ export interface CopyProps {
 export interface CopyEvents {
     success: [string];
     error: [];
+    click: [MouseEvent];
 }
 export declare class Copy extends Component<CopyProps, CopyEvents> {
     static template: string | import("intact").Template<any>;

package/es/components/copy/index.js

@@ -17,7 +17,8 @@ var defaults = function defaults() {
 
 var events = {
   success: true,
-  error: true
+  error: true,
+  click: true
 };
 export var Copy = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Copy, _Component);

package/es/components/copy/index.spec.js

@@ -1,7 +1,12 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import BasicDemo from '~/components/copy/demos/basic';
-import { mount, unmount } from '../../test/utils';
+import { mount, unmount, wait } from '../../test/utils';
+import { Tooltip } from '../tooltip';
+import { Component } from 'intact';
+import { Copy } from '.';
 describe('Copy', function () {
   afterEach( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     return _regeneratorRuntime.wrap(function _callee$(_context) {
@@ -49,4 +54,62 @@ describe('Copy', function () {
       }
     }, _callee2, null, [[2, 9]]);
   })));
+  it('wrap copy with tooltip', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var Demo, _mount2, instance, element, text;
+
+    return _regeneratorRuntime.wrap(function _callee3$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component) {
+              _inheritsLoose(Demo, _Component);
+
+              function Demo() {
+                var _context3;
+
+                var _this;
+
+                for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+                  args[_key] = arguments[_key];
+                }
+
+                _this = _Component.call.apply(_Component, _concatInstanceProperty(_context3 = [this]).call(_context3, args)) || this;
+                _this.Tooltip = Tooltip;
+                _this.Copy = Copy;
+                return _this;
+              }
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const { Tooltip, Copy } = this;\n                <Tooltip content=\"test\">\n                    <Copy text=\"test\" />\n                </Tooltip>\n            ";
+            _mount2 = mount(Demo), instance = _mount2[0], element = _mount2[1];
+            element.click();
+            _context4.next = 6;
+            return wait();
+
+          case 6:
+            _context4.prev = 6;
+            _context4.next = 9;
+            return navigator.clipboard.readText();
+
+          case 9:
+            text = _context4.sent;
+            expect(text).to.eql('test');
+            _context4.next = 16;
+            break;
+
+          case 13:
+            _context4.prev = 13;
+            _context4.t0 = _context4["catch"](6);
+            // Read permisson denied 
+            console.log(_context4.t0);
+
+          case 16:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee3, null, [[6, 13]]);
+  })));
 });

package/es/components/copy/useCopy.d.ts

@@ -1,4 +1,4 @@
 export declare function useCopy(): {
-    startCopy: () => void;
+    startCopy: (e: MouseEvent) => void;
     success: import("../../hooks/useState").State<boolean>;
 };

package/es/components/copy/useCopy.js

@@ -8,7 +8,7 @@ export function useCopy() {
   var success = useState(false);
   var timer;
   return {
-    startCopy: function startCopy() {
+    startCopy: function startCopy(e) {
       var _instance$get = instance.get(),
           text = _instance$get.text,
           showMessage = _instance$get.showMessage;
@@ -30,6 +30,8 @@ export function useCopy() {
         success.set(false);
         instance.trigger('error');
       }
+
+      instance.trigger('click', e);
     },
     success: success
   };
@@ -57,15 +59,19 @@ function createFakeElement(value) {
 
 function clipboardCopy(text) {
   try {
-    navigator.clipboard.writeText(text);
-    return true;
+    if (navigator.clipboard
+    /* && window.isSecureContext */
+    ) {
+      navigator.clipboard.writeText(text);
+      return true;
+    }
   } catch (e) {
     if (process.env.NODE_ENV !== 'production') {
       console.log(e);
     }
-
-    return false;
   }
+
+  return false;
 }
 
 function commandCopy(text) {

package/es/components/dialog/base.js

@@ -142,7 +142,7 @@ export var BaseDialog = /*#__PURE__*/function (_Component) {
   };
 
   _proto.onClickWrapper = function onClickWrapper(e) {
-    if (this.get('closable')) {
+    if (this.get('closable') && e.target === this.overlayRef.value) {
       this.terminate();
     }
   };

package/es/components/dialog/base.vdt.js

@@ -123,15 +123,15 @@ export default function ($props, $blocks, $__proto__) {
 
   return _$cc(Portal, {
     'container': container,
-    'children': _$ce(2, 'div', [overlay ? _$cc(Transition, {
+    'children': _$ce(2, 'div', overlay ? _$cc(Transition, {
       'key': 'overlay',
       'show': overlay ? value : false,
       'appear': value,
       'name': 'k-fade',
-      'children': _$ce(2, 'div', null, 1, _$cn(k + "-dialog-overlay"), {
+      'children': _$ce(2, 'div', dialog, 0, _$cn(k + "-dialog-overlay"), {
         'ev-click': this.onClickWrapper
       }, null, this.overlayRef)
-    }, 'overlay') : undefined, dialog], 0, _$cn((_$cn2 = {}, _$cn2[k + "-dialog-wrapper"] = true, _$cn2[k + "-open"] = value, _$cn2[makeWrapperStyles(k)] = true, _$cn2)))
+    }, 'overlay') : dialog, 0, _$cn((_$cn2 = {}, _$cn2[k + "-dialog-wrapper"] = true, _$cn2[k + "-open"] = value, _$cn2[makeWrapperStyles(k)] = true, _$cn2)))
   });
 }
 ;

package/es/components/dialog/styles.js

@@ -92,7 +92,7 @@ export function makeDialogStyles(k) {
 export function makeWrapperStyles(k) {
   //.${k}-fade-leave-active will add position absolute to the styles
   // so we must set fixed with important to .${k}-dialog-overlay
-  return /*#__PURE__*/css("position:absolute;z-index:", theme.maxZIndex, ";top:0;left:0;width:100%;.", k, "-dialog-overlay{position:fixed!important;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, .5);}");
+  return /*#__PURE__*/css("position:absolute;z-index:", theme.maxZIndex, ";top:0;left:0;width:100%;.", k, "-dialog-overlay{position:fixed!important;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, .5);overflow:auto;}");
 }
 export function makeAlertStyles(k) {
   var _context2;

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

@@ -4,6 +4,7 @@ import { getRestProps } from '../utils';
 import { Input } from '../input';
 import { Icon } from '../icon';
 import { makeStyles } from './styles';
+import { Tooltip } from '../tooltip';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;
 
@@ -25,11 +26,13 @@ export default function ($props, $blocks, $__proto__) {
   var classNameObj = (_classNameObj = {}, _classNameObj[k + "-editable"] = true, _classNameObj[k + "-editing"] = editing, _classNameObj[k + "-disabled"] = disabled, _classNameObj[k + "-invalid"] = invalid, _classNameObj[className] = className, _classNameObj[makeStyles(k)] = true, _classNameObj);
   return _$cv('div', _extends({}, getRestProps(this), {
     'className': _$cn(classNameObj)
-  }), [!disabled && !editing ? _$cc(Icon, {
-    'className': _$cn(k + "-icon-edit " + k + "-editable-icon"),
-    'title': tip,
-    'ev-click': this.edit,
-    'hoverable': true
+  }), [!disabled && !editing ? _$cc(Tooltip, {
+    'content': tip,
+    'children': _$cc(Icon, {
+      'className': _$cn(k + "-icon-edit " + k + "-editable-icon"),
+      'ev-click': this.edit,
+      'hoverable': true
+    })
   }) : undefined, _$ce(2, 'div', !editing ? children : _$cc(Input, {
     'size': 'small',
     'defaultValue': value,