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

package/lib/tree/props.d.ts

@@ -214,12 +214,30 @@ 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;
     deepAutoOpen?: string;
 };
+export type IIntersectionObserver = {
+    enabled: boolean;
+    callback: (node: any, level: number, index: number) => void;
+};
 export type SearchOption = {
     value: string | number | boolean;
     match?: `${TreeSearchMatchEnum}` | Function;

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

@@ -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[];
@@ -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,6 +260,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);
+    };
 }>> & {
     onNodeClick?: (...args: any[]) => any;
     onNodeCollapse?: (...args: any[]) => any;
@@ -254,6 +277,7 @@ declare const _default: import("vue").DefineComponent<{
     onNodeDragOver?: (...args: any[]) => any;
     onNodeDragLeave?: (...args: any[]) => any;
     onNodeDrop?: (...args: any[]) => any;
+    onNodeEnterView?: (...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.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-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-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/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>>;
     };

package/lib/upload/index.js

@@ -1431,6 +1431,9 @@ var themes = [EThemes.BUTTON, EThemes.DRAGGABLE, EThemes.PICTURE];
     "default": ''
   },
   customRequest: Function,
+  selectChange: {
+    type: Function
+  },
   beforeUpload: {
     type: Function
   },
@@ -1796,7 +1799,8 @@ const button_less_namespaceObject = button_less_x({  });
     accept: props.accept,
     file: {
       type: Object
-    }
+    },
+    selectChange: props.selectChange
   },
   emits: ['change', 'remove'],
   setup: function setup(props, _ref) {
@@ -1835,6 +1839,10 @@ const button_less_namespaceObject = button_less_x({  });
       inputEl.value.click();
     };
     var handleFileChange = function handleFileChange(e) {
+      var _props$selectChange;
+      if (props.selectChange && ((_props$selectChange = props.selectChange) === null || _props$selectChange === void 0 ? void 0 : _props$selectChange.call(props, e)) === false) {
+        return false;
+      }
       var files = e.target.files;
       emit('change', Array.from(files));
     };
@@ -1861,39 +1869,17 @@ const button_less_namespaceObject = button_less_x({  });
     var dragover = (0,external_vue_namespaceObject.ref)(false);
     var Dragger = function Dragger() {
       var handleDrop = function handleDrop(e) {
+        var _props$selectChange2;
         if (disabled.value) {
           return;
         }
         e.preventDefault();
         dragover.value = false;
-        var files = Array.from(e.dataTransfer.files);
-        if (!acceptTypes.value) {
-          emit('change', files);
-          return;
+        if (props.selectChange && ((_props$selectChange2 = props.selectChange) === null || _props$selectChange2 === void 0 ? void 0 : _props$selectChange2.call(props, e)) === false) {
+          return false;
         }
-        var filesFiltered = files.filter(function (file) {
-          var type = file.type,
-            name = file.name;
-          var extension = name.includes('.') ? ".".concat(name.split('.').pop()) : '';
-          var baseType = type.replace(/\/.*$/, '');
-          return acceptTypes.value.split(',').map(function (type) {
-            return type.trim();
-          }).filter(function (type) {
-            return type;
-          }).some(function (acceptedType) {
-            if (acceptedType.startsWith('.')) {
-              return extension === acceptedType;
-            }
-            if (/\/\*$/.test(acceptedType)) {
-              return baseType === acceptedType.replace(/\/\*$/, '');
-            }
-            if (/^[^/]+\/[^/]+$/.test(acceptedType)) {
-              return type === acceptedType;
-            }
-            return false;
-          });
-        });
-        emit('change', filesFiltered);
+        var files = Array.from(e.dataTransfer.files);
+        emit('change', files);
       };
       var handleDragover = function handleDragover(e) {
         e.preventDefault();
@@ -2639,7 +2625,8 @@ function upload_arrayLikeToArray(arr, len) { if (len == null || len > arr.length
         theme: props.theme,
         multiple: props.multiple,
         disabled: props.disabled,
-        accept: props.accept
+        accept: props.accept,
+        selectChange: props.selectChange
       };
     });
     function onRemove(file, fileList) {
@@ -2660,10 +2647,14 @@ function upload_arrayLikeToArray(arr, len) { if (len == null || len > arr.length
         return;
       }
       // limit检查
-      if (props.limit && fileList.value.length + files.length > props.limit) {
+      if (props.limit > 1 && fileList.value.length + files.length > props.limit) {
         emit('exceed', files, fileList.value);
         return;
       }
+      // 限制1个时使用替换方式，将之前的列表清空
+      if (!props.multiple && props.limit === 1) {
+        fileList.value = [];
+      }
       var sendFiles = files;
       if (!props.multiple || props.limit === 1) {
         sendFiles = files.slice(0, 1);

package/lib/upload/props.d.ts

@@ -85,6 +85,9 @@ declare const _default: {
         default: string;
     };
     customRequest: PropType<UploadRequestHandler>;
+    selectChange: {
+        type: PropType<(event: Event) => boolean | void>;
+    };
     beforeUpload: {
         type: PropType<(file: UploadRawFile) => Promise<boolean> | boolean>;
     };

package/lib/upload/upload-trigger.d.ts

@@ -20,6 +20,9 @@ declare const _default: import("vue").DefineComponent<{
     file: {
         type: PropType<UploadFile>;
     };
+    selectChange: {
+        type: PropType<(event: Event) => boolean | void>;
+    };
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "remove")[], "change" | "remove", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     theme: {
         type: PropType<"button" | "picture" | "draggable">;
@@ -40,6 +43,9 @@ declare const _default: import("vue").DefineComponent<{
     file: {
         type: PropType<UploadFile>;
     };
+    selectChange: {
+        type: PropType<(event: Event) => boolean | void>;
+    };
 }>> & {
     onChange?: (...args: any[]) => any;
     onRemove?: (...args: any[]) => any;

package/lib/upload/upload.d.ts

@@ -84,6 +84,9 @@ declare const _default: import("vue").DefineComponent<{
         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: UploadRawFile) => boolean | Promise<boolean>>;
     };
@@ -191,6 +194,9 @@ declare const _default: import("vue").DefineComponent<{
         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: UploadRawFile) => boolean | Promise<boolean>>;
     };

package/lib/upload/upload.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;
 }
 @keyframes loading-scale-animate {
   0% {