bkui-vue 0.0.1-beta.14 → 0.0.1-beta.17

package/lib/tree/props.d.ts

@@ -0,0 +1,70 @@
+import { ExtractPropTypes } from 'vue';
+/**
+ * Tree Prop: prefixIcon function
+ * @param {} isRoot 是否为分跟节点
+ * @param {} hasChild 是否有孩子节点
+ * @param {} isOpen 当前节点是否展开
+ * @param {} renderType 当前渲染类型（action: 用来标识当前节点状态，展开 | 收起, node_type：节点类型，文件、文件夹）
+ * @param {} item 当前节点数据
+ */
+export declare type IPrefixIcon = (isRoot: boolean, hasChild: boolean, isOpen: boolean, renderType: string, item: any) => any;
+export declare const treeProps: {
+    /**
+     * 渲染列表
+     */
+    data: import("vue-types").VueTypeDef<any[]> & {
+        default: () => any[];
+    };
+    /**
+     * 指定节点标签为节点对象的某个属性值
+     */
+    label: import("vue-types").VueTypeDef<any>;
+    /**
+     * 子节点 Key, 用于读取子节点
+     * 默认 children
+     */
+    children: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    /**
+     * 相邻级节点间的水平缩进，单位为像素
+     */
+    indent: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    /**
+     * 设置行高
+     */
+    lineHeight: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    /**
+     * 设置层级连线
+     */
+    levelLine: import("vue-types").VueTypeDef<any> & {
+        default: any;
+    };
+    /**
+     * 是否开启虚拟滚动
+     * 默认虚拟滚动是开启的，数据量大的情况下有利于性能优化，可以通过设置 virtualRender = false 关闭虚拟滚动
+     */
+    virtualRender: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    /**
+     * 当前节点标识图标
+     * 默认 true
+     */
+    prefixIcon: import("vue-types").VueTypeDef<any> & {
+        default: any;
+    };
+};
+export declare type TreePropTypes = Readonly<ExtractPropTypes<typeof treeProps>>;

package/lib/tree/tree.css

@@ -5,13 +5,13 @@
   line-height: var(--lineHeight);
   cursor: pointer;
 }
-.bk-tree .bk-tree-node.is-open::after {
+.bk-tree .bk-tree-node.is-open:not(.is-virtual-render)::after {
   position: absolute;
-  top: calc(var(--lineHeight) / 2);
-  left: 0;
+  top: calc(var(--lineHeight) / 2 + 6px);
+  left: 6px;
   z-index: 1;
   width: 0;
-  height: calc(var(--lines) * var(--lineHeight));
+  height: calc(var(--lines) * var(--lineHeight) - 6px);
   pointer-events: none;
   border-left: var(--level-line);
   content: '';
@@ -21,15 +21,24 @@
 }
 .bk-tree .bk-tree-node:not(.is-root)::before {
   position: absolute;
-  top: 50%;
-  left: calc(0px - var(--indent));
+  top: calc(50% + 1px);
+  left: calc(0px - var(--indent) + 6px);
   z-index: 1;
-  width: var(--indent);
+  width: calc(var(--indent) - 6px);
   height: 0;
   pointer-events: none;
   border-bottom: var(--level-line);
   content: '';
 }
+.bk-tree .bk-tree-node .node-virtual-line {
+  display: inline-block;
+  position: absolute;
+  left: calc(var(--depth) * var(--indent) * -1 + 6px);
+  top: -12px;
+  bottom: 50%;
+  width: 0;
+  border-left: var(--level-line);
+}
 .bk-tree .bk-tree-node .bk-tree-icon {
   margin: 0 6px 0 4px;
 }

package/lib/tree/tree.d.ts

@@ -1,4 +1,4 @@
-import { TreePropTypes as defineTypes } from './util';
+import { TreePropTypes as defineTypes } from './props';
 export declare type TreePropTypes = defineTypes;
 declare const _default: import("vue").DefineComponent<{
     data: import("vue-types").VueTypeDef<any[]> & {
@@ -9,10 +9,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     } & {
         default: string;
-    }; /**
-     * 扁平化数据
-     * schema: 需要展示连线时，用于计算连线高度
-     */
+    };
     indent: import("vue-types").VueTypeValidableDef<number> & {
         default: number;
     } & {
@@ -23,7 +20,17 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: number;
     };
-    levelLine: import("vue-types").VueTypeDef<any>;
+    levelLine: import("vue-types").VueTypeDef<any> & {
+        default: any;
+    };
+    virtualRender: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    prefixIcon: import("vue-types").VueTypeDef<any> & {
+        default: any;
+    };
 }, {
     renderData: import("vue").ComputedRef<any[]>;
     flatData: {
@@ -32,27 +39,48 @@ declare const _default: import("vue").DefineComponent<{
         levelLineSchema: {};
     };
     hanldeTreeNodeClick: (item: any) => void;
-    getActionIcon: (item: any) => JSX.Element;
+    getActionIcon: (item: any) => string | JSX.Element;
     getRootIcon: (item: any) => JSX.Element;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    data?: unknown;
-    label?: unknown;
-    children?: unknown;
-    indent?: unknown;
-    lineHeight?: unknown;
-    levelLine?: unknown;
-} & {
+    getVirtualLines: (node: any) => JSX.Element[];
+    getNodePrefixIcon: (item: any) => string | JSX.Element;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, 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>;
+    children: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    indent: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    lineHeight: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    levelLine: import("vue-types").VueTypeDef<any> & {
+        default: any;
+    };
+    virtualRender: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    prefixIcon: import("vue-types").VueTypeDef<any> & {
+        default: any;
+    };
+}>>, {
     data: any[];
+    prefixIcon: any;
     children: string;
-    indent: number;
     lineHeight: number;
-} & {
-    label?: any;
-    levelLine?: any;
-}> & {}, {
-    data: any[];
-    children: string;
     indent: number;
-    lineHeight: number;
+    levelLine: any;
+    virtualRender: boolean;
 }>;
 export default _default;

package/lib/tree/tree.less

@@ -7,16 +7,18 @@
     cursor: pointer;
 
     &.is-open {
-      &::after {
-        position: absolute;
-        top: calc(var(--lineHeight) / 2);
-        left: 0;
-        z-index: 1;
-        width: 0;
-        height: calc(var(--lines) * var(--lineHeight));
-        pointer-events: none;
-        border-left: var(--level-line);
-        content: '';
+      &:not(.is-virtual-render) {
+        &::after {
+          position: absolute;
+          top: calc(var(--lineHeight) / 2 + 6px);
+          left: 6px;
+          z-index: 1;
+          width: 0;
+          height: calc(var(--lines) * var(--lineHeight) - 6px);
+          pointer-events: none;
+          border-left: var(--level-line);
+          content: '';
+        }
       }
     }
 
@@ -25,27 +27,25 @@
 
       &::before {
         position: absolute;
-        top: 50%;
-        left: calc(0px - var(--indent));
+        top: calc(50% + 1px);
+        left: calc(0px - var(--indent) + 6px);
         z-index: 1;
-        width: var(--indent);
+        width: calc(var(--indent) - 6px);
         height: 0;
         pointer-events: none;
         border-bottom: var(--level-line);
         content: '';
       }
+    }
 
-      // &::after {
-      //   position: absolute;
-      //   top: -50%;
-      //   bottom: 50%;
-      //   left: calc(0px - var(--indent) * var(--depth));
-      //   z-index: 1;
-      //   width: 0;
-      //   pointer-events: none;
-      //   border-left: var(--level-line);
-      //   content: '';
-      // }
+    .node-virtual-line {
+      display: inline-block;
+      position: absolute;
+      left: calc(var(--depth) * var(--indent) * -1 + 6px);
+      top: -12px;
+      bottom: 50%;
+      width: 0;
+      border-left: var(--level-line);
     }
 
     .bk-tree-icon {

package/lib/tree/tree.variable.css

@@ -5,13 +5,13 @@
   line-height: var(--lineHeight);
   cursor: pointer;
 }
-.bk-tree .bk-tree-node.is-open::after {
+.bk-tree .bk-tree-node.is-open:not(.is-virtual-render)::after {
   position: absolute;
-  top: calc(var(--lineHeight) / 2);
-  left: 0;
+  top: calc(var(--lineHeight) / 2 + 6px);
+  left: 6px;
   z-index: 1;
   width: 0;
-  height: calc(var(--lines) * var(--lineHeight));
+  height: calc(var(--lines) * var(--lineHeight) - 6px);
   pointer-events: none;
   border-left: var(--level-line);
   content: '';
@@ -21,15 +21,24 @@
 }
 .bk-tree .bk-tree-node:not(.is-root)::before {
   position: absolute;
-  top: 50%;
-  left: calc(0px - var(--indent));
+  top: calc(50% + 1px);
+  left: calc(0px - var(--indent) + 6px);
   z-index: 1;
-  width: var(--indent);
+  width: calc(var(--indent) - 6px);
   height: 0;
   pointer-events: none;
   border-bottom: var(--level-line);
   content: '';
 }
+.bk-tree .bk-tree-node .node-virtual-line {
+  display: inline-block;
+  position: absolute;
+  left: calc(var(--depth) * var(--indent) * -1 + 6px);
+  top: -12px;
+  bottom: 50%;
+  width: 0;
+  border-left: var(--level-line);
+}
 .bk-tree .bk-tree-node .bk-tree-icon {
   margin: 0 6px 0 4px;
 }

package/lib/tree/util.d.ts

@@ -1,46 +1,4 @@
-import { ExtractPropTypes } from 'vue';
-export declare const treeProps: {
-    /**
-     * 渲染列表
-     */
-    data: import("vue-types").VueTypeDef<any[]> & {
-        default: () => any[];
-    };
-    /**
-     * 指定节点标签为节点对象的某个属性值
-     */
-    label: import("vue-types").VueTypeDef<any>;
-    /**
-     * 子节点 Key, 用于读取子节点
-     * 默认 children
-     */
-    children: import("vue-types").VueTypeValidableDef<string> & {
-        default: string;
-    } & {
-        default: string;
-    };
-    /**
-     * 相邻级节点间的水平缩进，单位为像素
-     */
-    indent: import("vue-types").VueTypeValidableDef<number> & {
-        default: number;
-    } & {
-        default: number;
-    };
-    /**
-     * 设置行高
-     */
-    lineHeight: import("vue-types").VueTypeValidableDef<number> & {
-        default: number;
-    } & {
-        default: number;
-    };
-    /**
-     * 设置层级连线
-     */
-    levelLine: import("vue-types").VueTypeDef<any>;
-};
-export declare type TreePropTypes = Readonly<ExtractPropTypes<typeof treeProps>>;
+import { TreePropTypes } from './props';
 /**
  * 扁平化当前数据
  * @param arrData
@@ -82,8 +40,9 @@ export declare const getNodeItemStyle: (item: any, props: TreePropTypes, schema?
  * @param item
  * @returns
  */
-export declare const getNodeItemClass: (item: any, schema: any) => {
+export declare const getNodeItemClass: (item: any, schema: any, props: TreePropTypes) => {
     'is-root': any;
     'bk-tree-node': boolean;
     'is-open': any;
+    'is-virtual-render': boolean;
 };