bkui-vue 0.0.1-beta.42 → 0.0.1-beta.420

package/lib/tree/props.d.ts

@@ -1,4 +1,12 @@
 import { ExtractPropTypes } from 'vue';
+declare enum TreeSearchMatchEnum {
+    FUZZY = "fuzzy",
+    FULL = "full"
+}
+declare enum TreeSearchResultEnum {
+    TREE = "tree",
+    LIST = "list"
+}
 /**
  * Tree Prop: prefixIcon function
  * @param {} isRoot 是否为分跟节点
@@ -19,6 +27,15 @@ export declare const treeProps: {
      * 指定节点标签为节点对象的某个属性值
      */
     label: import("vue-types").VueTypeDef<any>;
+    /**
+     * 每个树节点用来作为唯一标识的属性，此标识应该是唯一的
+     * 如果设置系统会默认自动生成唯一id
+     */
+    nodeKey: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
     /**
      * 子节点 Key, 用于读取子节点
      * 默认 children
@@ -80,10 +97,117 @@ export declare const treeProps: {
     } & {
         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;
+    };
+    disableDrag: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
+        default: (...args: any[]) => any;
+    };
+    disableDrop: import("vue-types").VueTypeValidableDef<(...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;
+    };
+    /**
+     * 是否显示节点类型Icon
+     */
+    showNodeTypeIcon: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    /**
+     * 默认选中的节点id，selectable为false时无效
+     */
+    selected: import("vue-types").VueTypeDef<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;
+    };
+    /**
+     * 默认是否展开所有节点
+     */
+    expandAll: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    /**
+     * 节点内容点击行为
+     * 此处配置每个节点除了展开\收起箭头之外的内容块时的行为
+     * 默认为 ['selected', 'expand', 'click']，点击内容块为选中当前节点
+     */
+    nodeContentAction: import("vue-types").VueTypeDef<any> & {
+        default: any;
+    };
 };
 declare type AsyncOption = {
     callback: (item: any, cb: any) => Promise<any>;
     cache: Boolean;
+    deepAutoOpen?: string;
+};
+export declare type SearchOption = {
+    value: string | number | boolean;
+    match?: `${TreeSearchMatchEnum}` | Function;
+    resultType?: `${TreeSearchResultEnum}`;
+    openResultNode: boolean;
 };
 export declare type TreePropTypes = Readonly<ExtractPropTypes<typeof treeProps>>;
 export {};

package/lib/tree/tree.css

@@ -1,10 +1,150 @@
+.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-group {
+  display: inline-flex;
+  letter-spacing: normal;
+}
+.bk-checkbox {
+  display: inline-flex;
+  justify-self: center;
+  align-items: center;
+  font-size: 14px;
+  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: #a3c5fd;
+  border-color: #a3c5fd;
+}
+.bk-checkbox.is-disabled.is-checked .bk-checkbox-input::after {
+  background: #a3c5fd;
+}
+.bk-checkbox-input {
+  position: relative;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  vertical-align: middle;
+  border: 1px solid #979ba5;
+  border-radius: 2px;
+}
+.bk-checkbox-input.small {
+  width: 14px;
+  height: 14px;
+}
+.bk-checkbox-original {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  width: 0;
+  height: 0;
+}
+.bk-checkbox-label {
+  display: inline-block;
+  margin-left: 5px;
+  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-checked {
+.bk-tree .bk-node-row.is-selected {
   background-color: #ebf2ff;
 }
-.bk-tree .bk-tree-node {
+.bk-tree-node {
   position: relative;
   display: flex;
   height: var(--lineHeight);
@@ -13,10 +153,10 @@
   cursor: pointer;
   align-items: center;
 }
-.bk-tree .bk-tree-node:not(.is-root) {
+.bk-tree-node:not(.is-root) {
   margin-left: calc(var(--depth)*var(--indent));
 }
-.bk-tree .bk-tree-node:not(.is-root).level-line::before {
+.bk-tree-node:not(.is-root).level-line::before {
   position: absolute;
   top: calc(50% + 1px);
   left: calc(0px - var(--indent) + 6px);
@@ -27,7 +167,10 @@
   border-bottom: var(--level-line);
   content: '';
 }
-.bk-tree .bk-tree-node .node-virtual-line {
+.bk-tree-node.is-open .bk-node-action {
+  color: #63656e;
+}
+.bk-tree-node .node-virtual-line {
   position: absolute;
   top: -12px;
   bottom: 50%;
@@ -36,15 +179,44 @@
   width: 0;
   border-left: var(--level-line);
 }
-.bk-tree .bk-tree-node .bk-tree-icon {
+.bk-tree-node .bk-node-prefix {
+  display: flex;
+  width: 14px;
+  height: 14px;
+  align-items: center;
+  justify-content: center;
+}
+.bk-tree-node .bk-node-action {
+  margin-right: 6px;
+  color: #979ba5;
+}
+.bk-tree-node .bk-tree-icon {
   margin: 0 6px 0 4px;
 }
-.bk-tree .bk-tree-node .bk-node-content {
-  display: inline-flex;
+.bk-tree-node .bk-node-content {
+  display: flex;
+  flex: 1;
   align-items: center;
+  min-width: 0;
+}
+.bk-tree-node .bk-node-content .bk-checkbox {
+  margin: 0;
+}
+.bk-tree-node .bk-node-content .bk-checkbox .bk-checkbox-input {
+  margin: 0;
 }
-.bk-tree .bk-tree-node .bk-node-content .bk-node-text {
+.bk-tree-node .bk-node-content .bk-node-text {
+  flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.bk-tree-drop-active {
+  background: #f5f7fa;
+}
+.bk-tree-drop-disabled {
+  background: #ffd5d5;
+}
+.bk-tree-drop-disabled .bk-tree-node {
+  cursor: no-drop;
+}

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,95 @@ 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: (e: MouseEvent, 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;
+    };
+    disableDrop: import("vue-types").VueTypeValidableDef<(...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;
+    }>;
+    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 +157,108 @@ 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;
+    };
+    disableDrop: import("vue-types").VueTypeValidableDef<(...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;
+    }>;
+    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;
     prefixIcon: any;
     children: string;
+    offsetLeft: number;
+    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{
+
+  }
 }