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

package/lib/virtual-render/use-scrollbar.d.ts

@@ -0,0 +1,24 @@
+import { Ref } from 'vue';
+import BkScrollbar from '../scrollbar';
+import { VirtualRenderProps } from './props';
+declare const _default: (target: Ref<HTMLElement>, props: VirtualRenderProps) => {
+    init: (scrollFn?: any, delegateXContent?: any, delegateYContent?: any) => void;
+    instance: BkScrollbar;
+    scrollTo: (x: any, y: any) => void;
+    classNames: {
+        contentEl: string;
+        wrapper: string;
+        scrollbar: string;
+        track: string;
+        visible: string;
+        horizontal: string;
+        vertical: string;
+        hover: string;
+        dragging: string;
+        scrolling: string;
+        scrollable: string;
+        mouseEntered: string;
+    };
+    updateScrollHeight: (height: number) => void;
+};
+export default _default;

package/lib/virtual-render/v-virtual-render.d.ts

@@ -3,7 +3,7 @@ export declare function getMatchedIndex(maxCount: number, maxHeight: number, gro
     height: number;
     diffHeight: number;
 };
-export declare function computedVirtualIndex(lineHeight: any, callback: any, pagination: any, _el: any, event: any): {
+export declare function computedVirtualIndex(lineHeight: any, callback: any, pagination: any, wrapper: any, event: any): {
     targetStartIndex: number;
     targetEndIndex: number;
     elScrollTop: any;
@@ -20,6 +20,7 @@ export declare class VisibleRender {
     install(): void;
     uninstall(): void;
     setBinding(binding: any): void;
+    private getEvent;
 }
 declare const _default: {
     mounted(el: any, binding: any): void;

package/lib/virtual-render/virtual-render.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/virtual-render/virtual-render.d.ts

@@ -129,6 +129,7 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
+    scrollbar: import("vue-types").VueTypeDef<import("./props").IScrollbarOption>;
     autoReset: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
@@ -137,6 +138,11 @@ declare const _default: import("vue").DefineComponent<{
     wrapperStyle: import("vue-types").VueTypeValidableDef<any> & {
         default: any;
     };
+    autoIndex: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -264,6 +270,7 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
+    scrollbar: import("vue-types").VueTypeDef<import("./props").IScrollbarOption>;
     autoReset: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
@@ -272,12 +279,20 @@ declare const _default: import("vue").DefineComponent<{
     wrapperStyle: import("vue-types").VueTypeValidableDef<any> & {
         default: any;
     };
+    autoIndex: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
 }>> & {
     [x: `on${Capitalize<string>}`]: (...args: any[]) => any;
 }, {
     width: string | number;
     height: string | number;
     maxHeight: number;
+    contentClassName: string | {
+        [key: string]: any;
+    };
     enabled: boolean;
     list: unknown[];
     minHeight: number;
@@ -287,9 +302,6 @@ declare const _default: import("vue").DefineComponent<{
     };
     lineHeight: any;
     scrollEvent: boolean;
-    contentClassName: string | {
-        [key: string]: any;
-    };
     contentStyle: {
         [key: string]: any;
     };
@@ -306,6 +318,7 @@ declare const _default: import("vue").DefineComponent<{
     rowKey: string;
     keepAlive: boolean;
     autoReset: boolean;
+    autoIndex: boolean;
 }, SlotsType<{
     default?: any;
     beforeContent?: any;

package/lib/virtual-render/virtual-render.less

@@ -1,11 +1,11 @@
 @import '../styles/themes/themes.less';
 @import '../styles/mixins/scroll.less';
+@import '../scrollbar/scrollbar.less';
 
 .@{bk-prefix}-virtual-render {
   position: relative;
 
-  .@{bk-prefix}-virtual-content,
-  &.@{bk-prefix}-virtual-content {
+  .@{bk-prefix}-virtual-content {
     position: absolute;
     top: 0;
     bottom: 0;
@@ -18,4 +18,4 @@
     width: 1px;
     background: transparent;
   }
-}
+}

package/lib/virtual-render/virtual-render.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bkui-vue",
-  "version": "1.0.3-beta.9",
+  "version": "2.0.1-beta.2",
   "workspaces": {
     "packages": [
       "packages/!(**.bak)*",

package/lib/shared/mask.d.ts

@@ -1,11 +0,0 @@
-type IMaskOption = {
-    el: HTMLElement;
-    mask?: HTMLElement;
-    backgroundColor?: string;
-    showMask?: boolean;
-};
-export declare const mask: {
-    showMask: (options: IMaskOption) => void;
-    hideMask: (options: IMaskOption) => void;
-};
-export {};