bkui-vue 2.0.1-beta.40 → 2.0.1-beta.42

package/lib/checkbox/index.js

@@ -285,7 +285,8 @@ var useCheckbox = function useCheckbox() {
       } else {
         return Promise.reject();
       }
-    })["catch"](function () {
+    })["catch"](function (err) {
+      console.error(err);
       $targetInput.checked = isChecked.value;
     })["finally"](function () {
       isPrechecking.value = false;

package/lib/index.js

@@ -4,5 +4,5 @@ export { default } from './preset';
 export * from './config-provider';
 export * from './directives';
 export * as plugins from './plugins';
-export const version = "2.0.1-beta.40";
+export const version = "2.0.1-beta.42";
 window.__bkui_vue_version__ = version;

package/lib/scrollbar/{scrollbar.css → css/scrollbar.css}

@@ -128,97 +128,112 @@
   --select-active-color: #e1ecff;
   --select-hover-color: #f5f7fa;
 }
-.bk-scrollbar-wrapper {
-  position: relative;
-  overflow: hidden;
-}
-.bk-scrollbar-wrapper .bk-scrollbar-content-el {
-  display: inline-flex;
-  flex-direction: column;
-  width: 100%;
+.bk-scrollbar {
+  overflow: hidden !important;
+  overflow-anchor: none;
+  touch-action: auto;
+  /*
+ * Scrollbar rail styles
+ */
+  /*
+ * Scrollbar thumb styles
+ */
+}
+.bk-scrollbar.bk--active-x > .bk__rail-x,
+.bk-scrollbar.bk--active-y > .bk__rail-y {
+  display: block;
+}
+.bk-scrollbar .bk__rail-x:hover,
+.bk-scrollbar .bk__rail-y:hover,
+.bk-scrollbar .bk__rail-x:focus,
+.bk-scrollbar .bk__rail-y:focus,
+.bk-scrollbar .bk__rail-x.bk--clicking,
+.bk-scrollbar .bk__rail-y.bk--clicking {
+  background-color: #f0f1f5;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track {
-  z-index: 1;
+.bk-scrollbar .bk__rail-x {
+  display: none;
+  opacity: 0;
+  transition: background-color 0.2s linear, opacity 0.2s linear;
+  height: 10px;
+  bottom: 0px;
   position: absolute;
-  right: 0;
-  bottom: 0;
-  pointer-events: none;
-  overflow: hidden;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-vertical {
-  width: 6px;
+.bk-scrollbar .bk__rail-x.bk-size-small {
+  height: 8px;
+}
+.bk-scrollbar .bk__rail-x.bk-size-small .bk__thumb-x {
+  height: 6px;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-vertical.bk-scrollbar-hover {
+.bk-scrollbar .bk__rail-y {
+  display: none;
+  opacity: 0;
+  transition: background-color 0.2s linear, opacity 0.2s linear;
+  width: 10px;
+  right: 0px;
+  position: absolute;
+  margin-right: 2px;
+}
+.bk-scrollbar .bk__rail-y.bk-size-small {
   width: 8px;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal {
-  height: 6px;
+.bk-scrollbar .bk__rail-y.bk-size-small .bk__thumb-y {
+  width: 6px;
+}
+.bk-scrollbar:hover > .bk__rail-x,
+.bk-scrollbar:hover > .bk__rail-y,
+.bk-scrollbar.bk--focus > .bk__rail-x,
+.bk-scrollbar.bk--focus > .bk__rail-y,
+.bk-scrollbar.bk--scrolling-x > .bk__rail-x,
+.bk-scrollbar.bk--scrolling-y > .bk__rail-y {
+  opacity: 0.9;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal.bk-scrollbar-hover {
+.bk-scrollbar .bk__thumb-x {
+  background-color: #dcdee5;
+  border-radius: 8px;
+  transition: background-color 0.2s linear, height 0.2s ease-in-out;
   height: 8px;
+  bottom: 0px;
+  position: absolute;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover {
-  background-color: #f0f1f5;
-  cursor: pointer;
+.bk-scrollbar .bk__thumb-y {
+  background-color: #dcdee5;
+  border-radius: 8px;
+  transition: background-color 0.2s linear, width 0.2s ease-in-out;
+  width: 8px;
+  right: 0px;
+  position: absolute;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover .bk-scrollbar::before {
+.bk-scrollbar .bk__rail-x:hover > .bk__thumb-x,
+.bk-scrollbar .bk__rail-x:focus > .bk__thumb-x,
+.bk-scrollbar .bk__rail-x.bk--clicking .bk__thumb-x {
   background-color: #979ba5;
+  height: 10px;
 }
-.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-vertical.bk-scrollbar-hover {
+.bk-scrollbar .bk__rail-y:hover > .bk__thumb-y,
+.bk-scrollbar .bk__rail-y:focus > .bk__thumb-y,
+.bk-scrollbar .bk__rail-y.bk--clicking .bk__thumb-y {
+  background-color: #979ba5;
   width: 10px;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal {
-  left: 0;
+.bk-scrollbar .bk-size-small > .bk__thumb-x,
+.bk-scrollbar .bk-size-small > .bk__thumb-x,
+.bk-scrollbar .bk-size-small.bk--clicking .bk__thumb-x {
   height: 8px;
-  transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal.bk-scrollbar-hover {
-  height: 10px;
+.bk-scrollbar .bk-size-small:hover > .bk__thumb-y,
+.bk-scrollbar .bk-size-small:focus > .bk__thumb-y,
+.bk-scrollbar .bk-size-small.bk--clicking .bk__thumb-y {
+  width: 8px;
 }
-.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;
-  top: 0;
-  bottom: 0;
+/* MS supports */
+@supports (-ms-overflow-style: none) {
+  .bk-scrollbar {
+    overflow: auto !important;
+  }
 }
-.bk-scrollbar-wrapper .bk-scrollbar::before {
-  position: absolute;
-  content: '';
-  background: #dcdee5;
-  border-radius: 6px;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  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;
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  .bk-scrollbar {
+    overflow: auto !important;
+  }
 }

package/lib/scrollbar/css/scrollbar.less

@@ -0,0 +1,139 @@
+@import '../../styles/themes/themes.less';
+
+.@{bk-prefix}-scrollbar {
+  overflow: hidden !important;
+  overflow-anchor: none;
+  touch-action: auto;
+
+  &.@{bk-prefix}--active-x > .@{bk-prefix}__rail-x,
+  &.@{bk-prefix}--active-y > .@{bk-prefix}__rail-y {
+    display: block;
+  }
+
+  .@{bk-prefix}__rail-x:hover,
+  .@{bk-prefix}__rail-y:hover,
+  .@{bk-prefix}__rail-x:focus,
+  .@{bk-prefix}__rail-y:focus,
+  .@{bk-prefix}__rail-x.@{bk-prefix}--clicking,
+  .@{bk-prefix}__rail-y.@{bk-prefix}--clicking {
+    background-color: #f0f1f5;
+  }
+
+  /*
+ * Scrollbar rail styles
+ */
+  .@{bk-prefix}__rail-x {
+    display: none;
+    opacity: 0;
+    transition:
+      background-color 0.2s linear,
+      opacity 0.2s linear;
+    height: 10px;
+    bottom: 0px;
+    position: absolute;
+    // margin-bottom: 2px;
+
+    &.@{bk-prefix}-size-small {
+      height: 8px;
+
+      .@{bk-prefix}__thumb-x {
+        height: 6px;
+      }
+    }
+  }
+
+  .@{bk-prefix}__rail-y {
+    display: none;
+    opacity: 0;
+    transition:
+      background-color 0.2s linear,
+      opacity 0.2s linear;
+    width: 10px;
+    right: 0px;
+    position: absolute;
+    margin-right: 2px;
+
+    &.@{bk-prefix}-size-small {
+      width: 8px;
+
+      .@{bk-prefix}__thumb-y {
+        width: 6px;
+      }
+    }
+  }
+
+  &:hover > .@{bk-prefix}__rail-x,
+  &:hover > .@{bk-prefix}__rail-y,
+  &.@{bk-prefix}--focus > .@{bk-prefix}__rail-x,
+  &.@{bk-prefix}--focus > .@{bk-prefix}__rail-y,
+  &.@{bk-prefix}--scrolling-x > .@{bk-prefix}__rail-x,
+  &.@{bk-prefix}--scrolling-y > .@{bk-prefix}__rail-y {
+    opacity: 0.9;
+  }
+
+  /*
+ * Scrollbar thumb styles
+ */
+  .@{bk-prefix}__thumb-x {
+    background-color: #dcdee5;
+    border-radius: 8px;
+    transition:
+      background-color 0.2s linear,
+      height 0.2s ease-in-out;
+    height: 8px;
+    bottom: 0px;
+    position: absolute;
+  }
+
+  .@{bk-prefix}__thumb-y {
+    background-color: #dcdee5;
+    border-radius: 8px;
+    transition:
+      background-color 0.2s linear,
+      width 0.2s ease-in-out;
+    width: 8px;
+    right: 0px;
+    position: absolute;
+  }
+
+  .@{bk-prefix}__rail-x:hover > .@{bk-prefix}__thumb-x,
+  .@{bk-prefix}__rail-x:focus > .@{bk-prefix}__thumb-x,
+  .@{bk-prefix}__rail-x.@{bk-prefix}--clicking .@{bk-prefix}__thumb-x {
+    background-color: #979ba5;
+    height: 10px;
+  }
+
+  .@{bk-prefix}__rail-y:hover > .@{bk-prefix}__thumb-y,
+  .@{bk-prefix}__rail-y:focus > .@{bk-prefix}__thumb-y,
+  .@{bk-prefix}__rail-y.@{bk-prefix}--clicking .@{bk-prefix}__thumb-y {
+    background-color: #979ba5;
+    width: 10px;
+  }
+
+  .@{bk-prefix}-size-small {
+    > .@{bk-prefix}__thumb-x,
+    > .@{bk-prefix}__thumb-x,
+    &.@{bk-prefix}--clicking .@{bk-prefix}__thumb-x {
+      height: 8px;
+    }
+
+    &:hover > .@{bk-prefix}__thumb-y,
+    &:focus > .@{bk-prefix}__thumb-y,
+    &.@{bk-prefix}--clicking .@{bk-prefix}__thumb-y {
+      width: 8px;
+    }
+  }
+}
+
+/* MS supports */
+@supports (-ms-overflow-style: none) {
+  .@{bk-prefix}-scrollbar {
+    overflow: auto !important;
+  }
+}
+
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  .@{bk-prefix}-scrollbar {
+    overflow: auto !important;
+  }
+}

package/lib/scrollbar/{scrollbar.variable.css → css/scrollbar.variable.css}

@@ -388,97 +388,112 @@
   --select-active-color: #e1ecff;
   --select-hover-color: #f5f7fa;
 }
-.bk-scrollbar-wrapper {
-  position: relative;
-  overflow: hidden;
+.bk-scrollbar {
+  overflow: hidden !important;
+  overflow-anchor: none;
+  touch-action: auto;
+  /*
+ * Scrollbar rail styles
+ */
+  /*
+ * Scrollbar thumb styles
+ */
 }
-.bk-scrollbar-wrapper .bk-scrollbar-content-el {
-  display: inline-flex;
-  flex-direction: column;
-  width: 100%;
+.bk-scrollbar.bk--active-x > .bk__rail-x,
+.bk-scrollbar.bk--active-y > .bk__rail-y {
+  display: block;
 }
-.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.track-small.bk-scrollbar-vertical {
-  width: 6px;
-}
-.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-vertical.bk-scrollbar-hover {
-  width: 8px;
+.bk-scrollbar .bk__rail-x:hover,
+.bk-scrollbar .bk__rail-y:hover,
+.bk-scrollbar .bk__rail-x:focus,
+.bk-scrollbar .bk__rail-y:focus,
+.bk-scrollbar .bk__rail-x.bk--clicking,
+.bk-scrollbar .bk__rail-y.bk--clicking {
+  background-color: #f0f1f5;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal {
-  height: 6px;
+.bk-scrollbar .bk__rail-x {
+  display: none;
+  opacity: 0;
+  transition: background-color 0.2s linear, opacity 0.2s linear;
+  height: 10px;
+  bottom: 0px;
+  position: absolute;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal.bk-scrollbar-hover {
+.bk-scrollbar .bk__rail-x.bk-size-small {
   height: 8px;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover {
-  background-color: #f0f1f5;
-  cursor: pointer;
+.bk-scrollbar .bk__rail-x.bk-size-small .bk__thumb-x {
+  height: 6px;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover .bk-scrollbar::before {
-  background-color: #979ba5;
+.bk-scrollbar .bk__rail-y {
+  display: none;
+  opacity: 0;
+  transition: background-color 0.2s linear, opacity 0.2s linear;
+  width: 10px;
+  right: 0px;
+  position: absolute;
+  margin-right: 2px;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical {
-  top: 0;
+.bk-scrollbar .bk__rail-y.bk-size-small {
   width: 8px;
-  transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical.bk-scrollbar-hover {
-  width: 10px;
+.bk-scrollbar .bk__rail-y.bk-size-small .bk__thumb-y {
+  width: 6px;
+}
+.bk-scrollbar:hover > .bk__rail-x,
+.bk-scrollbar:hover > .bk__rail-y,
+.bk-scrollbar.bk--focus > .bk__rail-x,
+.bk-scrollbar.bk--focus > .bk__rail-y,
+.bk-scrollbar.bk--scrolling-x > .bk__rail-x,
+.bk-scrollbar.bk--scrolling-y > .bk__rail-y {
+  opacity: 0.9;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal {
-  left: 0;
+.bk-scrollbar .bk__thumb-x {
+  background-color: #dcdee5;
+  border-radius: 8px;
+  transition: background-color 0.2s linear, height 0.2s ease-in-out;
   height: 8px;
-  transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
+  bottom: 0px;
+  position: absolute;
 }
-.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal.bk-scrollbar-hover {
+.bk-scrollbar .bk__thumb-y {
+  background-color: #dcdee5;
+  border-radius: 8px;
+  transition: background-color 0.2s linear, width 0.2s ease-in-out;
+  width: 8px;
+  right: 0px;
+  position: absolute;
+}
+.bk-scrollbar .bk__rail-x:hover > .bk__thumb-x,
+.bk-scrollbar .bk__rail-x:focus > .bk__thumb-x,
+.bk-scrollbar .bk__rail-x.bk--clicking .bk__thumb-x {
+  background-color: #979ba5;
   height: 10px;
 }
-.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 .bk__rail-y:hover > .bk__thumb-y,
+.bk-scrollbar .bk__rail-y:focus > .bk__thumb-y,
+.bk-scrollbar .bk__rail-y.bk--clicking .bk__thumb-y {
+  background-color: #979ba5;
+  width: 10px;
 }
-.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 .bk-size-small > .bk__thumb-x,
+.bk-scrollbar .bk-size-small > .bk__thumb-x,
+.bk-scrollbar .bk-size-small.bk--clicking .bk__thumb-x {
+  height: 8px;
 }
-.bk-scrollbar-wrapper .bk-scrollbar {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
+.bk-scrollbar .bk-size-small:hover > .bk__thumb-y,
+.bk-scrollbar .bk-size-small:focus > .bk__thumb-y,
+.bk-scrollbar .bk-size-small.bk--clicking .bk__thumb-y {
+  width: 8px;
 }
-.bk-scrollbar-wrapper .bk-scrollbar::before {
-  position: absolute;
-  content: '';
-  background: #dcdee5;
-  border-radius: 6px;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  opacity: 0;
-  transition: opacity 0.2s 0.9s linear;
+/* MS supports */
+@supports (-ms-overflow-style: none) {
+  .bk-scrollbar {
+    overflow: auto !important;
+  }
 }
-.bk-scrollbar-wrapper .bk-scrollbar.bk-scrollbar-visible::before {
-  opacity: 0.9;
-  transition-delay: 0s;
-  transition-duration: 0s;
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  .bk-scrollbar {
+    overflow: auto !important;
+  }
 }

package/lib/scrollbar/handlers/click-rail.d.ts

@@ -0,0 +1,2 @@
+import BkScrollbar from '..';
+export default function (i: BkScrollbar): void;

package/lib/scrollbar/handlers/drag-thumb.d.ts

@@ -0,0 +1 @@
+export default function (i: any): void;

package/lib/scrollbar/handlers/keyboard.d.ts

@@ -0,0 +1,2 @@
+import BkScrollbar from '..';
+export default function (i: BkScrollbar): void;

package/lib/scrollbar/handlers/mouse-wheel.d.ts

@@ -0,0 +1,2 @@
+import BkScrollbar from '..';
+export default function (i: BkScrollbar): void;

package/lib/scrollbar/handlers/touch.d.ts

@@ -0,0 +1,4 @@
+import BkScrollbar from '..';
+export default function (i: BkScrollbar & {
+    isInitialized: boolean;
+}): void;

package/lib/scrollbar/helper/class-names.d.ts

@@ -0,0 +1,21 @@
+declare class Cls {
+    main: string;
+    rtl: string;
+    element: {
+        thumb: (x: string) => string;
+        rail: (x: string) => string;
+        size: (size: string) => string;
+        consuming: string;
+    };
+    state: {
+        focus: string;
+        clicking: string;
+        active: (x: string) => string;
+        scrolling: (x: string) => string;
+    };
+    constructor(prefix?: string);
+}
+export default Cls;
+export declare function addScrollingClass(i: any, x: any): void;
+export declare function removeScrollingClass(i: any, x: any): void;
+export declare function setScrollingClassInstantly(i: any, x: any): void;

package/lib/scrollbar/helper/css.d.ts

@@ -0,0 +1,3 @@
+import { VirtualElement } from '..';
+export declare function get(element: Partial<Element> | Partial<VirtualElement>): CSSStyleDeclaration;
+export declare function set(element: any, obj: any): any;

package/lib/scrollbar/helper/dom.d.ts

@@ -0,0 +1,4 @@
+export declare function div(className: any): HTMLDivElement;
+export declare function matches(el: any, query: any): boolean;
+export declare function remove(el: any): void;
+export declare function queryChildren(element: any, selector: any): any[];

package/lib/scrollbar/helper/event-manager.d.ts

@@ -0,0 +1,20 @@
+import { VirtualElement } from '..';
+declare class EventElement {
+    element: Element | VirtualElement;
+    handlers: Record<string, ((...args: any[]) => void)[]>;
+    constructor(element: Element & VirtualElement);
+    bind(eventName: any, handler: any): void;
+    unbind(eventName: any, target?: any): void;
+    unbindAll(): void;
+    get isEmpty(): boolean;
+}
+export default class EventManager {
+    eventElements: EventElement[];
+    constructor();
+    eventElement(element: any): EventElement;
+    bind(element: any, eventName: any, handler: any): void;
+    unbind(element: any, eventName: any, handler: any): void;
+    unbindAll(): void;
+    once(element: any, eventName: any, handler: any): void;
+}
+export {};

package/lib/scrollbar/helper/util.d.ts

@@ -0,0 +1,11 @@
+import { VirtualElement } from '..';
+export declare function toInt(x: any): number;
+export declare function isEditable(el: any): boolean;
+export declare function outerWidth(element: any): number;
+export declare const env: {
+    isWebKit: boolean;
+    supportsTouch: boolean;
+    supportsIePointer: any;
+    isChrome: boolean;
+};
+export declare const getElement: (element: Partial<Element> | Partial<VirtualElement>) => Element;