bkui-vue 0.0.1-beta.12 → 0.0.1-beta.120

package/lib/tree/props.d.ts

@@ -0,0 +1,168 @@
+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>;
+    /**
+     * 每个树节点用来作为唯一标识的属性，此标识应该是唯一的
+     * 如果设置系统会默认自动生成唯一id
+     */
+    nodeKey: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    /**
+     * 子节点 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;
+    };
+    /**
+     * 异步加载节点数据配置
+     * @param callback 请求数据回调函数，函数返回 Promise
+     * @param cache 是否缓存请求结果，默认为True，只有在第一次才会发起请求，若设置为false则每次都会发起请求
+     */
+    async: import("vue-types").VueTypeShape<AsyncOption>;
+    /**
+     * 每个节点偏移左侧距离
+     */
+    offsetLeft: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    /**
+     * 搜索配置
+     * 可以为一个配置项 SearchOption
+     * 或者直接为一个字符串，如果直接为字符串则模糊匹配此值
+     */
+    search: import("vue-types").VueTypeDef<string | number | boolean | SearchOption> & {
+        default: string | number | boolean | (() => SearchOption);
+    };
+    emptyText: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    draggable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    /**
+     * 节点拖拽时可交换位置（开启拖拽可交换位置后将不支持改变层级）
+     */
+    dragSort: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    /**
+     * 节点是否可以选中
+     */
+    selectable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    /**
+     * 默认选中的节点id，selectable为false时无效
+     */
+    selected: import("vue-types").VueTypeDef<string | number | {
+        [key: string]: any;
+    }> & {
+        default: string | number | (() => {
+            [key: string]: any;
+        });
+    };
+    /**
+     * 是否自动检查当前节点是否有子节点
+     * 节点前面的展开收起Icon会根据判定值做改变
+     * 如果需要自已控制，请设置为false
+     */
+    autoCheckChildren: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    /**
+     * 如果设置了某一个叶子节点状态为展开，是否自动展开所有父级节点
+     * 默认为true，如果设置为false，则每层状态需要自己控制
+     */
+    autoOpenParentNode: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+};
+declare type AsyncOption = {
+    callback: (item: any, cb: any) => Promise<any>;
+    cache: Boolean;
+    deepAutoOpen?: string;
+};
+export declare type SearchOption = {
+    value: string | number | boolean;
+    match: string | Function;
+    resultType: string;
+    openResultNode: boolean;
+};
+export declare type TreePropTypes = Readonly<ExtractPropTypes<typeof treeProps>>;
+export {};

package/lib/tree/tree.css

@@ -1,35 +1,53 @@
+.bk-tree .bk-node-row {
+  padding-left: calc(var(--offset-left));
+}
+.bk-tree .bk-node-row.is-selected {
+  background-color: #ebf2ff;
+}
 .bk-tree .bk-tree-node {
   position: relative;
+  display: flex;
   height: var(--lineHeight);
   padding-left: 0;
   line-height: var(--lineHeight);
   cursor: pointer;
-}
-.bk-tree .bk-tree-node.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: '';
+  align-items: center;
 }
 .bk-tree .bk-tree-node:not(.is-root) {
   margin-left: calc(var(--depth)*var(--indent));
 }
-.bk-tree .bk-tree-node:not(.is-root)::before {
+.bk-tree .bk-tree-node:not(.is-root).level-line::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 {
+  position: absolute;
+  top: -12px;
+  bottom: 50%;
+  left: calc(var(--depth) * var(--indent) * -1 + 6px);
+  display: inline-block;
+  width: 0;
+  border-left: var(--level-line);
+}
 .bk-tree .bk-tree-node .bk-tree-icon {
   margin: 0 6px 0 4px;
 }
+.bk-tree .bk-tree-node .bk-node-content {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  min-width: 0;
+}
+.bk-tree .bk-tree-node .bk-node-content .bk-node-text {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/lib/tree/tree.d.ts

@@ -1,18 +1,20 @@
-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[]> & {
         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;
     } & {
         default: string;
-    }; /**
-     * 扁平化数据
-     * schema: 需要展示连线时，用于计算连线高度
-     */
+    };
     indent: import("vue-types").VueTypeValidableDef<number> & {
         default: number;
     } & {
@@ -23,36 +25,180 @@ 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;
+    };
+    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;
+    };
+    dragSort: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    selectable: 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;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    nodeClick: (..._args: any[]) => boolean;
+    nodeCollapse: (..._args: any[]) => boolean;
+    nodeExpand: (..._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;
+    } & {
+        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;
+    };
+    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;
+    };
+    dragSort: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    selectable: 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;
+    };
+}>> & {
+    onNodeClick?: (...args: any[]) => any;
+    onNodeCollapse?: (...args: any[]) => any;
+    onNodeExpand?: (...args: any[]) => any;
 }, {
-    renderData: import("vue").ComputedRef<any[]>;
-    flatData: {
-        data: any[];
-        schema: {};
-        levelLineSchema: {};
-    };
-    hanldeTreeNodeClick: (item: any) => void;
-    getActionIcon: (item: any) => 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;
-} & {
     data: any[];
-    children: string;
-    indent: number;
+    search: string | number | boolean | import("./props").SearchOption;
+    draggable: boolean;
     lineHeight: number;
-} & {
-    label?: any;
-    levelLine?: any;
-}> & {}, {
-    data: any[];
+    selected: string | number | {
+        [key: string]: any;
+    };
+    prefixIcon: any;
     children: string;
+    emptyText: string;
+    nodeKey: string;
     indent: number;
-    lineHeight: number;
+    levelLine: any;
+    virtualRender: boolean;
+    offsetLeft: number;
+    dragSort: boolean;
+    selectable: boolean;
+    autoCheckChildren: boolean;
+    autoOpenParentNode: boolean;
 }>;
 export default _default;

package/lib/tree/tree.less

@@ -1,55 +1,66 @@
-.bk-tree {
-  .bk-tree-node {
+@import '../styles/themes/themes.less';
+.@{bk-prefix}-tree {
+  .@{bk-prefix}-node-row {
+    padding-left: calc(var(--offset-left));
+
+    &.is-selected {
+      background-color: #ebf2ff;
+    }
+  }
+
+  .@{bk-prefix}-tree-node {
     position: relative;
+    display: flex;
     height: var(--lineHeight);
     padding-left: 0;
     line-height: var(--lineHeight);
     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: '';
-      }
-    }
+    align-items: center;
 
     &:not(.is-root) {
       margin-left: calc(var(--depth)*var(--indent));
 
-      &::before {
-        position: absolute;
-        top: 50%;
-        left: calc(0px - var(--indent));
-        z-index: 1;
-        width: var(--indent);
-        height: 0;
-        pointer-events: none;
-        border-bottom: var(--level-line);
-        content: '';
+      &.level-line {
+        &::before {
+          position: absolute;
+          top: calc(50% + 1px);
+          left: calc(0px - var(--indent) + 6px);
+          z-index: 1;
+          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 {
+      position: absolute;
+      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}-tree-icon {
       margin: 0 6px 0 4px;
     }
+
+    .@{bk-prefix}-node-content {
+      display: flex;
+      flex: 1;
+      align-items: center;
+      min-width: 0;
+
+      .@{bk-prefix}-node-text {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
   }
 }