bkui-vue 0.0.1-beta.23 → 0.0.1-beta.230

package/lib/tree/tree.d.ts

@@ -5,6 +5,11 @@ declare const _default: import("vue").DefineComponent<{
         default: () => any[];
     };
     label: import("vue-types").VueTypeDef<any>;
+    nodeKey: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
     children: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     } & {
@@ -19,9 +24,7 @@ declare const _default: import("vue").DefineComponent<{
         default: number;
     } & {
         default: number;
-    }; /**
-     * 监听组件配置Data改变
-     */
+    };
     levelLine: import("vue-types").VueTypeDef<any> & {
         default: any;
     };
@@ -36,32 +39,103 @@ declare const _default: import("vue").DefineComponent<{
     async: import("vue-types").VueTypeShape<{
         callback: (item: any, cb: any) => Promise<any>;
         cache: Boolean;
+        deepAutoOpen?: string;
     }>;
     offsetLeft: import("vue-types").VueTypeValidableDef<number> & {
         default: number;
     } & {
         default: number;
     };
-}, {
-    renderData: import("vue").ComputedRef<any[]>;
-    flatData: {
-        data: any[];
-        schema: any[] | Map<string, any>;
-        levelLineSchema: {};
-    };
-    hanldeTreeNodeClick: (item: any) => void;
-    handleNodeContentClick: (item: any) => void;
-    handleNodeActionClick: (node: any) => void;
-    getActionIcon: (item: any) => any;
-    getRootIcon: (item: any) => JSX.Element;
-    getVirtualLines: (node: any) => JSX.Element[];
-    getNodePrefixIcon: (item: any) => any;
-    getLoadingIcon: (item: any) => JSX.Element | "";
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    search: import("vue-types").VueTypeDef<string | number | boolean | import("./props").SearchOption> & {
+        default: string | number | boolean | (() => import("./props").SearchOption);
+    };
+    emptyText: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    draggable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    disableDrag: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
+        default: (...args: any[]) => any;
+    } & {
+        default: (...args: any[]) => any;
+    };
+    disableDrop: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
+        default: (...args: any[]) => any;
+    } & {
+        default: (...args: any[]) => any;
+    };
+    dragSort: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    selectable: import("vue-types").VueTypeDef<any> & {
+        default: any;
+    };
+    disabledFolderSelectable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    showCheckbox: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    showNodeTypeIcon: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    selected: import("vue-types").VueTypeDef<string | number | {
+        [key: string]: any;
+    }> & {
+        default: string | number | (() => {
+            [key: string]: any;
+        });
+    };
+    autoCheckChildren: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    autoOpenParentNode: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    expandAll: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    nodeContentAction: import("vue-types").VueTypeDef<any> & {
+        default: any;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    nodeClick: (..._args: any[]) => boolean;
+    nodeCollapse: (..._args: any[]) => boolean;
+    nodeExpand: (..._args: any[]) => boolean;
+    nodeChecked: (..._args: any[]) => boolean;
+    nodeDragStart: (..._args: any[]) => boolean;
+    nodeDragOver: (..._args: any[]) => boolean;
+    nodeDragLeave: (..._args: any[]) => boolean;
+    nodeDrop: (..._args: any[]) => boolean;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     data: import("vue-types").VueTypeDef<any[]> & {
         default: () => any[];
     };
     label: import("vue-types").VueTypeDef<any>;
+    nodeKey: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
     children: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     } & {
@@ -76,9 +150,7 @@ declare const _default: import("vue").DefineComponent<{
         default: number;
     } & {
         default: number;
-    }; /**
-     * 监听组件配置Data改变
-     */
+    };
     levelLine: import("vue-types").VueTypeDef<any> & {
         default: any;
     };
@@ -93,20 +165,119 @@ declare const _default: import("vue").DefineComponent<{
     async: import("vue-types").VueTypeShape<{
         callback: (item: any, cb: any) => Promise<any>;
         cache: Boolean;
+        deepAutoOpen?: string;
     }>;
     offsetLeft: import("vue-types").VueTypeValidableDef<number> & {
         default: number;
     } & {
         default: number;
     };
-}>>, {
+    search: import("vue-types").VueTypeDef<string | number | boolean | import("./props").SearchOption> & {
+        default: string | number | boolean | (() => import("./props").SearchOption);
+    };
+    emptyText: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    draggable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    disableDrag: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
+        default: (...args: any[]) => any;
+    } & {
+        default: (...args: any[]) => any;
+    };
+    disableDrop: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
+        default: (...args: any[]) => any;
+    } & {
+        default: (...args: any[]) => any;
+    };
+    dragSort: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    selectable: import("vue-types").VueTypeDef<any> & {
+        default: any;
+    };
+    disabledFolderSelectable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    showCheckbox: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    showNodeTypeIcon: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    selected: import("vue-types").VueTypeDef<string | number | {
+        [key: string]: any;
+    }> & {
+        default: string | number | (() => {
+            [key: string]: any;
+        });
+    };
+    autoCheckChildren: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    autoOpenParentNode: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    expandAll: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    nodeContentAction: import("vue-types").VueTypeDef<any> & {
+        default: any;
+    };
+}>> & {
+    onNodeClick?: (...args: any[]) => any;
+    onNodeCollapse?: (...args: any[]) => any;
+    onNodeExpand?: (...args: any[]) => any;
+    onNodeChecked?: (...args: any[]) => any;
+    onNodeDragStart?: (...args: any[]) => any;
+    onNodeDragOver?: (...args: any[]) => any;
+    onNodeDragLeave?: (...args: any[]) => any;
+    onNodeDrop?: (...args: any[]) => any;
+}, {
     data: any[];
+    search: string | number | boolean | import("./props").SearchOption;
+    draggable: boolean;
     lineHeight: number;
+    selected: string | number | {
+        [key: string]: any;
+    };
     prefixIcon: any;
     children: string;
+    emptyText: string;
+    nodeKey: string;
     indent: number;
     levelLine: any;
     virtualRender: boolean;
     offsetLeft: number;
+    disableDrag: (...args: any[]) => any;
+    disableDrop: (...args: any[]) => any;
+    dragSort: boolean;
+    selectable: any;
+    disabledFolderSelectable: boolean;
+    showCheckbox: boolean;
+    showNodeTypeIcon: boolean;
+    autoCheckChildren: boolean;
+    autoOpenParentNode: boolean;
+    expandAll: boolean;
+    nodeContentAction: any;
 }>;
 export default _default;

package/lib/tree/tree.less

@@ -1,17 +1,27 @@
-.bk-tree {
-  .bk-node-row {
+@import '../styles/themes/themes.less';
+@import '../styles/mixins/scroll.less';
+@import '../virtual-render/virtual-render.less';
+@import '../checkbox/checkbox.less';
+
+.@{bk-prefix}-tree {
+  font-size: 14px;
+
+  .@{bk-prefix}-node-row {
     padding-left: calc(var(--offset-left));
-    &.is-checked {
-      background-color: #EBF2FF;
+
+    &.is-selected {
+      background-color: #ebf2ff;
     }
   }
 
-  .bk-tree-node {
+  &-node {
     position: relative;
+    display: flex;
     height: var(--lineHeight);
     padding-left: 0;
     line-height: var(--lineHeight);
     cursor: pointer;
+    align-items: center;
 
     &:not(.is-root) {
       margin-left: calc(var(--depth)*var(--indent));
@@ -31,22 +41,74 @@
       }
     }
 
+    &.is-open {
+      .@{bk-prefix}-node-action {
+        color: #63656e;
+      }
+    }
+
     .node-virtual-line {
-      display: inline-block;
       position: absolute;
-      left: calc(var(--depth) * var(--indent) * -1 + 6px);
       top: -12px;
       bottom: 50%;
+      left: calc(var(--depth) * var(--indent) * -1 + 6px);
+      display: inline-block;
       width: 0;
       border-left: var(--level-line);
     }
 
-    .bk-tree-icon {
+    .@{bk-prefix}-node-prefix {
+      display: flex;
+      width: 14px;
+      height: 14px;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .@{bk-prefix}-node-action {
+      margin-right: 6px;
+      color: #979ba5;
+    }
+
+    .@{bk-prefix}-tree-icon {
       margin: 0 6px 0 4px;
     }
 
-    .node-content {
-      display: inline-block;
+    .@{bk-prefix}-node-content {
+      display: flex;
+      flex: 1;
+      align-items: center;
+      min-width: 0;
+
+      .@{bk-prefix}-checkbox {
+        margin: 0;
+
+        .@{bk-prefix}-checkbox-input {
+          margin: 0;
+        }
+      }
+
+      .@{bk-prefix}-node-text {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  &-drop-active {
+    background: #f5f7fa;
+  }
+
+  &-drop-disabled {
+    background: #ffd5d5;
+    .@{bk-prefix}-tree-node {
+      cursor: no-drop;
     }
   }
+
+  &-drag-disabled{
+
+  }
 }