bkui-vue 0.0.1-beta.21 → 0.0.1-beta.211

package/lib/tree/props.d.ts

@@ -19,6 +19,15 @@ export declare const treeProps: {
      * 指定节点标签为节点对象的某个属性值
      */
     label: import("vue-types").VueTypeDef<any>;
+    /**
+     * 每个树节点用来作为唯一标识的属性，此标识应该是唯一的
+     * 如果设置系统会默认自动生成唯一id
+     */
+    nodeKey: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
     /**
      * 子节点 Key, 用于读取子节点
      * 默认 children
@@ -72,10 +81,104 @@ export declare const treeProps: {
      * @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;
+    };
+    /**
+     * 是否支持多选
+     */
+    showCheckbox: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    /**
+     * 是否显示节点类型Icon
+     */
+    showNodeTypeIcon: 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,9 +1,149 @@
+.bk-F-scroll-x {
+  overflow-x: auto;
+  scrollbar-color: #a0a0a0 transparent;
+  scrollbar-width: thin;
+}
+.bk-F-scroll-x::-webkit-scrollbar {
+  height: 6px;
+}
+.bk-F-scroll-y {
+  overflow-y: auto;
+}
+.bk-F-scroll-y::-webkit-scrollbar {
+  width: 4px;
+}
+.bk-F-scroll-y::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+}
+.bk-virtual-render {
+  position: relative;
+}
+.bk-virtual-render .bk-virtual-content,
+.bk-virtual-render.bk-virtual-content {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.bk-virtual-render .bk-virtual-section {
+  width: 1px;
+  background: transparent;
+}
+.bk-checkbox {
+  display: inline-flex;
+  justify-self: center;
+  font-size: 14px;
+  line-height: 18px;
+  letter-spacing: normal;
+  color: #63656e;
+  cursor: pointer;
+  user-select: none;
+}
+.bk-checkbox ~ .bk-checkbox {
+  margin-left: 30px;
+}
+.bk-checkbox.is-checked .bk-checkbox-input {
+  background: #3a84ff;
+  border-color: #3a84ff;
+  transition: all 0.1s;
+}
+.bk-checkbox.is-checked .bk-checkbox-input.small::after {
+  width: 3px;
+  height: 6px;
+}
+.bk-checkbox.is-checked .bk-checkbox-input::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 4px;
+  height: 8px;
+  border: 2px solid #fff;
+  border-top: 0;
+  border-left: 0;
+  content: '';
+  transform: translate(-50%, -60%) scaleY(1) rotate(45deg);
+  transform-origin: center;
+}
+.bk-checkbox.is-indeterminated .bk-checkbox-input {
+  background: #3a84ff;
+  border-color: #3a84ff;
+  transition: all 0.1s;
+}
+.bk-checkbox.is-indeterminated .bk-checkbox-input.small::after {
+  width: 6px;
+  height: 2px;
+}
+.bk-checkbox.is-indeterminated .bk-checkbox-input::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 8px;
+  height: 2px;
+  background: #fff;
+  border: none;
+  border-radius: 2px;
+  content: '';
+  transform: translate(-50%, -50%);
+}
+.bk-checkbox.is-disabled {
+  color: #c4c6cc;
+  cursor: not-allowed;
+}
+.bk-checkbox.is-disabled .bk-checkbox-input {
+  background: #fafbfd;
+  border-color: #dcdee5;
+}
+.bk-checkbox.is-disabled .bk-checkbox-input::after {
+  background: #dcdee5;
+}
+.bk-checkbox.is-disabled.is-checked .bk-checkbox-input {
+  background: #dcdee5;
+}
+.bk-checkbox .bk-checkbox-input {
+  position: relative;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  margin-right: 5px;
+  vertical-align: middle;
+  border: 1px solid #979ba5;
+  border-radius: 2px;
+}
+.bk-checkbox .bk-checkbox-input.small {
+  width: 14px;
+  height: 14px;
+}
+.bk-checkbox .bk-checkbox-original {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  width: 0;
+  height: 0;
+}
+.bk-checkbox .bk-checkbox-label {
+  display: inline-block;
+  vertical-align: middle;
+}
+.bk-tree {
+  font-size: 14px;
+}
+.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;
+  align-items: center;
 }
 .bk-tree .bk-tree-node:not(.is-root) {
   margin-left: calc(var(--depth)*var(--indent));
@@ -19,15 +159,47 @@
   border-bottom: var(--level-line);
   content: '';
 }
+.bk-tree .bk-tree-node.is-open .bk-node-action {
+  color: #63656e;
+}
 .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%;
+  left: calc(var(--depth) * var(--indent) * -1 + 6px);
+  display: inline-block;
   width: 0;
   border-left: var(--level-line);
 }
+.bk-tree .bk-tree-node .bk-node-prefix {
+  display: flex;
+  width: 14px;
+  height: 14px;
+  align-items: center;
+  justify-content: center;
+}
+.bk-tree .bk-tree-node .bk-node-action {
+  margin-right: 6px;
+  color: #979ba5;
+}
 .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-checkbox {
+  margin: 0;
+}
+.bk-tree .bk-tree-node .bk-node-content .bk-checkbox .bk-checkbox-input {
+  margin: 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

@@ -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,25 +39,78 @@ declare const _default: import("vue").DefineComponent<{
     async: import("vue-types").VueTypeShape<{
         callback: (item: any, cb: any) => Promise<any>;
         cache: Boolean;
+        deepAutoOpen?: string;
     }>;
-}, {
-    renderData: import("vue").ComputedRef<any[]>;
-    flatData: {
-        data: any[];
-        schema: any[] | Map<string, any>;
-        levelLineSchema: {};
-    };
-    hanldeTreeNodeClick: (item: any) => void;
-    getActionIcon: (item: any) => string | JSX.Element;
-    getRootIcon: (item: any) => JSX.Element;
-    getVirtualLines: (node: any) => JSX.Element[];
-    getNodePrefixIcon: (item: any) => string | JSX.Element;
-    getLoadingIcon: (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<import("vue").ExtractPropTypes<{
+    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;
+    };
+    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;
+    };
+}, () => 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;
+}, 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;
     } & {
@@ -82,14 +140,89 @@ 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;
+    };
+    dragSort: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    selectable: 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;
+    };
+}>> & {
+    onNodeClick?: (...args: any[]) => any;
+    onNodeCollapse?: (...args: any[]) => any;
+    onNodeExpand?: (...args: any[]) => any;
+    onNodeChecked?: (...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;
+    dragSort: boolean;
+    selectable: boolean;
+    showCheckbox: boolean;
+    showNodeTypeIcon: boolean;
+    autoCheckChildren: boolean;
+    autoOpenParentNode: boolean;
 }>;
 export default _default;

package/lib/tree/tree.less

@@ -1,10 +1,27 @@
-.bk-tree {
-  .bk-tree-node {
+@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-selected {
+      background-color: #ebf2ff;
+    }
+  }
+
+  .@{bk-prefix}-tree-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));
@@ -24,18 +41,59 @@
       }
     }
 
+    &.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;
     }
+
+    .@{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;
+      }
+    }
   }
 }