bkui-vue 0.0.1-beta.4 → 0.0.1-beta.400

package/lib/tree/tree.d.ts

@@ -0,0 +1,283 @@
+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;
+    };
+    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;
+    };
+    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;
+    } & {
+        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;
+    };
+    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;
+    };
+}>> & {
+    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

@@ -0,0 +1,114 @@
+@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;
+    }
+  }
+
+  &-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));
+
+      &.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: '';
+        }
+      }
+    }
+
+    &.is-open {
+      .@{bk-prefix}-node-action {
+        color: #63656e;
+      }
+    }
+
+    .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-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;
+      }
+    }
+  }
+
+  &-drop-active {
+    background: #f5f7fa;
+  }
+
+  &-drop-disabled {
+    background: #ffd5d5;
+    .@{bk-prefix}-tree-node {
+      cursor: no-drop;
+    }
+  }
+
+  &-drag-disabled{
+
+  }
+}