bkui-vue 1.0.3-beta.9 → 2.0.1-beta.10

package/lib/tree/props.d.ts

@@ -1,11 +1,11 @@
 import { ExtractPropTypes } from 'vue';
 declare enum TreeSearchMatchEnum {
-    FUZZY = "fuzzy",
-    FULL = "full"
+    FULL = "full",
+    FUZZY = "fuzzy"
 }
 declare enum TreeSearchResultEnum {
-    TREE = "tree",
-    LIST = "list"
+    LIST = "list",
+    TREE = "tree"
 }
 /**
  * Tree Prop: prefixIcon function
@@ -214,14 +214,32 @@ export declare const treeProps: {
     } & {
         default: boolean;
     };
+    /**
+     * 在显示复选框的情况下，是否严格的遵循父子互相关联的做法
+     */
+    checkStrictly: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    /**
+     * 是否开启监听Tree节点进入Tree容器可视区域
+     */
+    intersectionObserver: import("vue-types").VueTypeDef<boolean | IIntersectionObserver> & {
+        default: boolean | (() => IIntersectionObserver);
+    };
 };
 type AsyncOption = {
     callback: (item: any, cb: any) => Promise<any>;
-    cache: Boolean;
+    cache: boolean;
     deepAutoOpen?: string;
 };
+export type IIntersectionObserver = {
+    enabled: boolean;
+    callback: (node: any, level: number, index: number) => void;
+};
 export type SearchOption = {
-    value: string | number | boolean;
+    value: boolean | number | string;
     match?: `${TreeSearchMatchEnum}` | Function;
     resultType?: `${TreeSearchResultEnum}`;
     showChildNodes?: boolean;

package/lib/tree/tree.css

@@ -15,11 +15,85 @@
 .bk-F-scroll-y::-webkit-scrollbar-thumb {
   border-radius: 4px;
 }
+.bk-scrollbar-wrapper {
+  position: relative;
+  overflow: hidden;
+}
+.bk-scrollbar-wrapper .bk-scrollbar-content-el {
+  display: inline-flex;
+  flex-direction: column;
+  width: 100%;
+}
+.bk-scrollbar-wrapper .bk-scrollbar-track {
+  z-index: 1;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover {
+  background-color: #F0F1F5;
+  cursor: pointer;
+}
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover .bk-scrollbar::before {
+  background-color: #979BA5;
+}
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical {
+  top: 0;
+  width: 8px;
+  transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
+}
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal {
+  left: 0;
+  height: 8px;
+  transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
+}
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal.bk-scrollbar {
+  right: auto;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  min-height: 0;
+  min-width: 8px;
+  width: auto;
+}
+.bk-scrollbar-wrapper .bk-scrollbar-dragging {
+  pointer-events: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.bk-scrollbar-wrapper .bk-scrollbar {
+  position: absolute;
+  left: 0;
+  right: 0;
+  min-height: 8px;
+}
+.bk-scrollbar-wrapper .bk-scrollbar::before {
+  position: absolute;
+  content: '';
+  background: #DCDEE5;
+  border-radius: 6px;
+  left: 1px;
+  right: 1px;
+  top: 1px;
+  bottom: 1px;
+  opacity: 0;
+  transition: opacity 0.2s 0.9s linear;
+}
+.bk-scrollbar-wrapper .bk-scrollbar.bk-scrollbar-visible::before {
+  opacity: 0.9;
+  transition-delay: 0s;
+  transition-duration: 0s;
+}
 .bk-virtual-render {
   position: relative;
 }
-.bk-virtual-render .bk-virtual-content,
-.bk-virtual-render.bk-virtual-content {
+.bk-virtual-render .bk-virtual-content {
   position: absolute;
   top: 0;
   bottom: 0;

package/lib/tree/tree.d.ts

@@ -45,7 +45,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     async: import("vue-types").VueTypeShape<{
         callback: (item: any, cb: any) => Promise<any>;
-        cache: Boolean;
+        cache: boolean;
         deepAutoOpen?: string;
     }>;
     offsetLeft: import("vue-types").VueTypeValidableDef<number> & {
@@ -60,7 +60,10 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     } & {
         default: string;
-    };
+    }; /**
+     * 将制定元素滚动到顶部
+     * @param option
+     */
     draggable: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
@@ -120,6 +123,14 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
+    checkStrictly: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    intersectionObserver: import("vue-types").VueTypeDef<boolean | import("./props").IIntersectionObserver> & {
+        default: boolean | (() => import("./props").IIntersectionObserver);
+    };
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     nodeClick: (..._args: any[]) => boolean;
     nodeCollapse: (..._args: any[]) => boolean;
@@ -129,6 +140,7 @@ declare const _default: import("vue").DefineComponent<{
     nodeDragOver: (..._args: any[]) => boolean;
     nodeDragLeave: (..._args: any[]) => boolean;
     nodeDrop: (..._args: any[]) => boolean;
+    nodeEnterView: (..._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[];
@@ -170,7 +182,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     async: import("vue-types").VueTypeShape<{
         callback: (item: any, cb: any) => Promise<any>;
-        cache: Boolean;
+        cache: boolean;
         deepAutoOpen?: string;
     }>;
     offsetLeft: import("vue-types").VueTypeValidableDef<number> & {
@@ -185,7 +197,10 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     } & {
         default: string;
-    };
+    }; /**
+     * 将制定元素滚动到顶部
+     * @param option
+     */
     draggable: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
@@ -245,15 +260,24 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
+    checkStrictly: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    intersectionObserver: import("vue-types").VueTypeDef<boolean | import("./props").IIntersectionObserver> & {
+        default: boolean | (() => import("./props").IIntersectionObserver);
+    };
 }>> & {
+    onNodeChecked?: (...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;
+    onNodeDragOver?: (...args: any[]) => any;
+    onNodeDragStart?: (...args: any[]) => any;
     onNodeDrop?: (...args: any[]) => any;
+    onNodeEnterView?: (...args: any[]) => any;
+    onNodeExpand?: (...args: any[]) => any;
 }, {
     data: any[];
     height: number;
@@ -281,5 +305,7 @@ declare const _default: import("vue").DefineComponent<{
     expandAll: boolean;
     nodeContentAction: any;
     keepSlotData: boolean;
+    checkStrictly: boolean;
+    intersectionObserver: boolean | import("./props").IIntersectionObserver;
 }, {}>;
 export default _default;

package/lib/tree/tree.less

@@ -108,7 +108,7 @@
     }
   }
 
-  &-drag-disabled{
+  &-drag-disabled {
 
   }
 }

package/lib/tree/tree.variable.css

@@ -12,6 +12,7 @@
   --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
   --disable-bg-color: #f9fafd;
+  --border-color: #dcdee5;
   --font-size-base: 12px;
   --font-size-medium: 14px;
   --font-size-large: 16px;
@@ -123,6 +124,8 @@
   --search-select-placeholder-color: var(--light-gray);
   --search-select-message-color: var(--danger-color);
   --search-select-menu-border-color: var(--disable-color);
+  --select-active-color: #e1ecff;
+  --select-hover-color: #f5f7fa;
 }
 .bk-F-scroll-x {
   overflow-x: auto;
@@ -141,11 +144,85 @@
 .bk-F-scroll-y::-webkit-scrollbar-thumb {
   border-radius: 4px;
 }
+.bk-scrollbar-wrapper {
+  position: relative;
+  overflow: hidden;
+}
+.bk-scrollbar-wrapper .bk-scrollbar-content-el {
+  display: inline-flex;
+  flex-direction: column;
+  width: 100%;
+}
+.bk-scrollbar-wrapper .bk-scrollbar-track {
+  z-index: 1;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover {
+  background-color: #F0F1F5;
+  cursor: pointer;
+}
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover .bk-scrollbar::before {
+  background-color: #979BA5;
+}
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical {
+  top: 0;
+  width: 8px;
+  transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
+}
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal {
+  left: 0;
+  height: 8px;
+  transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
+}
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal.bk-scrollbar {
+  right: auto;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  min-height: 0;
+  min-width: 8px;
+  width: auto;
+}
+.bk-scrollbar-wrapper .bk-scrollbar-dragging {
+  pointer-events: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.bk-scrollbar-wrapper .bk-scrollbar {
+  position: absolute;
+  left: 0;
+  right: 0;
+  min-height: 8px;
+}
+.bk-scrollbar-wrapper .bk-scrollbar::before {
+  position: absolute;
+  content: '';
+  background: #DCDEE5;
+  border-radius: 6px;
+  left: 1px;
+  right: 1px;
+  top: 1px;
+  bottom: 1px;
+  opacity: 0;
+  transition: opacity 0.2s 0.9s linear;
+}
+.bk-scrollbar-wrapper .bk-scrollbar.bk-scrollbar-visible::before {
+  opacity: 0.9;
+  transition-delay: 0s;
+  transition-duration: 0s;
+}
 .bk-virtual-render {
   position: relative;
 }
-.bk-virtual-render .bk-virtual-content,
-.bk-virtual-render.bk-virtual-content {
+.bk-virtual-render .bk-virtual-content {
   position: absolute;
   top: 0;
   bottom: 0;

package/lib/tree/use-empty.d.ts

@@ -1,4 +1,4 @@
 declare const _default: (props: any) => {
-    renderEmpty: (type: '404' | '403' | '500' | 'building' | 'empty' | 'search-empty' | 'login') => JSX.Element;
+    renderEmpty: (type: '403' | '404' | '500' | 'building' | 'empty' | 'login' | 'search-empty') => JSX.Element;
 };
 export default _default;

package/lib/tree/use-intersection-observer.d.ts

@@ -0,0 +1,27 @@
+import { IIntersectionObserver, TreePropTypes } from './props';
+type IntersectionObserverOptions = {
+    rootMargin?: string;
+    threshold?: number | number[];
+    root?: Element | null;
+};
+type IntersectionObserverResponseValue = {
+    level: number;
+    node: Record<string, any>;
+    index: number;
+    entry: IntersectionObserverEntry;
+};
+type IntersectionObserverResponse = {
+    beforeResponse?: (entry: IntersectionObserverEntry) => IntersectionObserverResponseValue;
+};
+declare const _default: (props: TreePropTypes) => {
+    unobserveAll: () => void;
+    intersectionObserver: import("vue").ComputedRef<{
+        enabled: boolean | IIntersectionObserver;
+        once: boolean;
+        callback: any;
+    }>;
+    initIntersectionObserver: (target: Element | Element[] | Node | Node[], options: IntersectionObserverOptions, resp?: IntersectionObserverResponse) => void;
+    initRootMutationObserver: (root: Element, callback: any) => void;
+    getLastVisibleElement: (offsetY: number, root: HTMLElement) => HTMLElement[];
+};
+export default _default;

package/lib/tree/use-node-action.d.ts

@@ -8,7 +8,7 @@ declare const _default: (props: TreePropTypes, ctx: any, flatData: IFlatData, _r
     setNodeAction: (args: any | any[], action: string, value: any) => void;
     setNodeOpened: (item: any, isOpen?: any, e?: MouseEvent, fireEmit?: boolean) => void;
     setSelect: (nodes: any, selected?: boolean, autoOpen?: boolean) => void;
-    setOpen: (item: any[] | any, isOpen?: boolean, autoOpenParents?: boolean) => void;
-    setNodeAttribute: (node: any, attrName: string | string[], value: string | number | boolean | (string | number | boolean)[], loopParent?: boolean) => void;
+    setOpen: (item: any | any[], isOpen?: boolean, autoOpenParents?: boolean) => void;
+    setNodeAttribute: (node: any, attrName: string | string[], value: (boolean | number | string)[] | boolean | number | string, loopParent?: boolean) => void;
 };
 export default _default;

package/lib/tree/use-node-attribute.d.ts

@@ -6,6 +6,7 @@ declare const _default: (flatData: {
     getSchemaVal: (node: any) => any;
     getNodeAttr: (node: any, attr: string) => any;
     getNodeId: (node: any) => any;
+    getNodeById: (id: any) => any;
     getNodeParentId: (node: any) => any;
     getParentNodeData: (node: any) => any;
     getNodePathById: (id: string) => any;
@@ -47,5 +48,13 @@ declare const _default: (flatData: {
             parentId: any;
         };
     };
+    getIntersectionResponse: (target: HTMLElement | Record<string, any>) => {
+        level: any;
+        target: HTMLElement | Record<string, any>;
+        index: any;
+        parent: any;
+        node: HTMLElement | Record<string, any>;
+        isRoot: any;
+    };
 };
 export default _default;

package/lib/tree/use-search.d.ts

@@ -1,6 +1,6 @@
 import { SearchOption, TreePropTypes } from './props';
 declare const _default: (props: TreePropTypes) => {
-    searchFn: (itemValue: string | number, item: any) => any;
+    searchFn: (itemValue: number | string, item: any) => any;
     refSearch: import("vue").Ref<string | number | boolean | SearchOption>;
     isSearchActive: import("vue").ComputedRef<boolean>;
     isSearchDisabled: boolean;

package/lib/tree/util.d.ts

@@ -34,8 +34,8 @@ export declare const getNodeItemStyle: any;
  * @returns
  */
 export declare const getNodeItemClass: (item: any, schema: WeakMap<Object, any>, props: TreePropTypes, showTree?: boolean) => {
+    [x: string]: any;
     'is-root': any;
-    'bk-tree-node': boolean;
     'is-open': any;
     'is-virtual-render': boolean;
     'level-line': boolean;

package/lib/upload/index.d.ts

@@ -84,6 +84,9 @@ declare const Upload: {
             default: string;
         };
         customRequest: import("vue").PropType<import("./upload.type").UploadRequestHandler>;
+        selectChange: {
+            type: import("vue").PropType<(event: Event) => boolean | void>;
+        };
         beforeUpload: {
             type: import("vue").PropType<(file: import("./upload.type").UploadRawFile) => boolean | Promise<boolean>>;
         };
@@ -198,6 +201,9 @@ declare const Upload: {
             default: string;
         };
         customRequest: import("vue").PropType<import("./upload.type").UploadRequestHandler>;
+        selectChange: {
+            type: import("vue").PropType<(event: Event) => boolean | void>;
+        };
         beforeUpload: {
             type: import("vue").PropType<(file: import("./upload.type").UploadRawFile) => boolean | Promise<boolean>>;
         };
@@ -341,6 +347,9 @@ declare const Upload: {
             default: string;
         };
         customRequest: import("vue").PropType<import("./upload.type").UploadRequestHandler>;
+        selectChange: {
+            type: import("vue").PropType<(event: Event) => boolean | void>;
+        };
         beforeUpload: {
             type: import("vue").PropType<(file: import("./upload.type").UploadRawFile) => boolean | Promise<boolean>>;
         };
@@ -481,6 +490,9 @@ declare const Upload: {
         default: string;
     };
     customRequest: import("vue").PropType<import("./upload.type").UploadRequestHandler>;
+    selectChange: {
+        type: import("vue").PropType<(event: Event) => boolean | void>;
+    };
     beforeUpload: {
         type: import("vue").PropType<(file: import("./upload.type").UploadRawFile) => boolean | Promise<boolean>>;
     };