bkui-vue 0.0.1-beta.35 → 0.0.1-beta.350

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;
     } & {
@@ -34,33 +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: {};
-    };
-    root: import("vue").Ref<any>;
-    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, "check"[], "check", 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;
     } & {
@@ -90,22 +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;
+    };
 }>> & {
-    onCheck?: (...args: any[]) => 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,14 +1,20 @@
 @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 {
+    &.is-selected {
       background-color: #ebf2ff;
     }
   }
 
-  .@{bk-prefix}-tree-node {
+  &-node {
     position: relative;
     display: flex;
     height: var(--lineHeight);
@@ -35,6 +41,12 @@
       }
     }
 
+    &.is-open {
+      .@{bk-prefix}-node-action {
+        color: #63656e;
+      }
+    }
+
     .node-virtual-line {
       position: absolute;
       top: -12px;
@@ -45,19 +57,58 @@
       border-left: var(--level-line);
     }
 
+    .@{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;
     }
 
     .@{bk-prefix}-node-content {
-      display: inline-flex;
+      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{
+
+  }
 }