bkui-vue 1.0.3-beta.47.scrollbar.1 → 1.0.3-beta.48

package/lib/dialog/dialog.css

@@ -56,7 +56,7 @@
   border-radius: 2px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
-.bk-modal-body {
+.bk-modal-content {
   overflow: auto;
 }
 .bk-modal-close {

package/lib/dialog/dialog.variable.css

@@ -185,7 +185,7 @@
   border-radius: 2px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
-.bk-modal-body {
+.bk-modal-content {
   overflow: auto;
 }
 .bk-modal-close {

package/lib/modal/index.js

@@ -506,7 +506,7 @@ function _defineProperty(obj, key, value) {
 ;// CONCATENATED MODULE: external "vue"
 var external_vue_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var external_vue_y = x => () => x
-const external_vue_namespaceObject = external_vue_x({ ["Transition"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.Transition, ["computed"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.computed, ["createVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createVNode, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["nextTick"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.nextTick, ["onBeforeUnmount"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onBeforeUnmount, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref, ["useSlots"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.useSlots, ["watch"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.watch });
+const external_vue_namespaceObject = external_vue_x({ ["Transition"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.Transition, ["computed"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.computed, ["createVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createVNode, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["nextTick"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.nextTick, ["onBeforeUnmount"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onBeforeUnmount, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref, ["watch"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.watch });
 // EXTERNAL MODULE: ../../node_modules/@babel/runtime/regenerator/index.js
 var regenerator = __webpack_require__(2841);
 var regenerator_default = /*#__PURE__*/__webpack_require__.n(regenerator);
@@ -550,14 +550,10 @@ const throttle_namespaceObject = throttle_x({ ["default"]: () => __WEBPACK_EXTER
 var useContentResize = function useContentResize(root, props) {
   var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
     resolveClassName = _usePrefix.resolveClassName;
-  var slots = (0,external_vue_namespaceObject.useSlots)();
   var isContentScroll = (0,external_vue_namespaceObject.ref)(false);
   var contentStyles = (0,external_vue_namespaceObject.ref)({});
   var observer;
   var handleContentBoxChange = function handleContentBoxChange() {
-    if (!slots.footer) {
-      return;
-    }
     var calcContentScroll = (0,throttle_namespaceObject["default"])(function () {
       var _root$value$querySele = root.value.querySelector(".".concat(resolveClassName('modal-header'))).getBoundingClientRect(),
         headerHeight = _root$value$querySele.height;

package/lib/modal/modal.css

@@ -56,7 +56,7 @@
   border-radius: 2px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
-.bk-modal-body {
+.bk-modal-content {
   overflow: auto;
 }
 .bk-modal-close {

package/lib/modal/modal.less

@@ -26,7 +26,7 @@
   display: none;
   width: 100%;
   height: 100%;
-  background-color: rgba(0,0,0,.6);
+  background-color: rgba(0, 0, 0, 0.6);
 }
 
 .@{bk-prefix}-modal-wrapper {
@@ -35,8 +35,6 @@
   left: 50%;
   border-radius: 2px;
   transform: translate(-50%, -50%);
-
-
 }
 
 .@{bk-prefix}-modal-outside {
@@ -52,10 +50,10 @@
   overflow: hidden;
   background: #fff;
   border-radius: 2px;
-  box-shadow: 0 4px 12px rgba(0,0,0,.15);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
-.@{bk-prefix}-modal-body {
+.@{bk-prefix}-modal-content {
   overflow: auto;
 }
 
@@ -72,11 +70,9 @@
   align-items: center;
   justify-content: center;
   border-radius: 50%;
-  transition: .15s;
+  transition: 0.15s;
 
   &:hover {
     background: #f0f1f5;
   }
 }
-
-

package/lib/modal/modal.variable.css

@@ -185,7 +185,7 @@
   border-radius: 2px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
-.bk-modal-body {
+.bk-modal-content {
   overflow: auto;
 }
 .bk-modal-close {

package/lib/sideslider/sideslider.css

@@ -79,11 +79,6 @@
   width: 100%;
   padding: 0 0 0 46px;
 }
-.bk-sideslider-content {
-  padding-right: 24px;
-  padding-left: 24px;
-  overflow-y: scroll;
-}
 .bk-sideslider-footer {
   display: flex;
   width: 100%;

package/lib/sideslider/sideslider.less

@@ -24,7 +24,7 @@
     &.is-fixed {
       .@{bk-prefix}-sideslider-footer {
         height: 54px;
-        margin: 0;;
+        margin: 0;
         border-top: 1px solid transparent;
         box-shadow: rgb(0 0 0 / 6%) 0 -2px 4px 0;
       }
@@ -98,11 +98,8 @@
   }
 }
 
-.@{bk-prefix}-sideslider-content {
-  padding-right: 24px;
-  padding-left: 24px;
-  overflow-y: scroll;
-}
+// .@{bk-prefix}-sideslider-content {
+// }
 
 .@{bk-prefix}-sideslider-footer {
   display: flex;
@@ -121,27 +118,27 @@
 .slide-leave-active,
 .@{bk-prefix}-modal-body {
   transform: translateX(0);
-  transition: transform .25s;
+  transition: transform 0.25s;
 }
 
 .slide-enter-active {
-  animation: slider-fade-in .25s;
+  animation: slider-fade-in 0.25s;
 }
 
 .slide-leave-active {
-  animation: slider-fade-in .25s reverse;
+  animation: slider-fade-in 0.25s reverse;
 }
 
 .slide-enter-from,
 .slide-leave-to {
   &.left {
     transform: translateX(-100%);
-    transition: transform .25s;
+    transition: transform 0.25s;
   }
 
   &.right {
     transform: translateX(100%);
-    transition: transform .25s;
+    transition: transform 0.25s;
   }
 }
 
@@ -154,6 +151,3 @@
     opacity: 1;
   }
 }
-
-
-

package/lib/sideslider/sideslider.variable.css

@@ -208,11 +208,6 @@
   width: 100%;
   padding: 0 0 0 46px;
 }
-.bk-sideslider-content {
-  padding-right: 24px;
-  padding-left: 24px;
-  overflow-y: scroll;
-}
 .bk-sideslider-footer {
   display: flex;
   width: 100%;

package/lib/table/index.js

@@ -6984,10 +6984,6 @@ function table_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { va
         "throttleDelay": 120,
         "scrollEvent": true,
         "rowKey": props.rowKey,
-        "scrollbar": {
-          enabled: true,
-          keepStruct: true
-        },
         "enabled": props.virtualEnabled,
         "keepAlive": true
       }), {

package/lib/table/table.css

@@ -997,9 +997,9 @@
 }
 .bk-table {
   position: relative;
-  width: 100%;
   height: auto;
   overflow: hidden;
+  width: 100%;
 }
 .bk-table-flex {
   display: flex;
@@ -1015,9 +1015,19 @@
 }
 .bk-table .bk-table-body {
   position: relative;
-  overflow: hidden;
+  overflow: auto;
+  scrollbar-gutter: stable;
   border-bottom: 1px solid #dcdee5;
 }
+.bk-table .bk-table-body::-webkit-scrollbar {
+  width: 5px;
+  height: 6px;
+}
+.bk-table .bk-table-body::-webkit-scrollbar-thumb {
+  background: #dcdee5;
+  border-radius: 10px;
+  box-shadow: inset 0 0 6px rgba(204, 204, 204, 0.3);
+}
 .bk-table .bk-table-body .prepend-row {
   transform: translateX(var(--prepend-left));
 }
@@ -1107,8 +1117,8 @@
 .bk-table .bk-table-body table th .cell .drag-cell,
 .bk-table .bk-table-head table td .cell .drag-cell,
 .bk-table .bk-table-body table td .cell .drag-cell {
-  height: 100%;
   font-size: 14px;
+  height: 100%;
 }
 .bk-table .bk-table-head table th .cell.has-sort,
 .bk-table .bk-table-body table th .cell.has-sort,
@@ -1270,8 +1280,8 @@
 }
 .bk-table .bk-table-head table tbody tr td .cell.drag,
 .bk-table .bk-table-body table tbody tr td .cell.drag {
-  text-align: center;
   cursor: move;
+  text-align: center;
 }
 .bk-table .bk-table-head table tbody tr:hover.hover-highlight td:not(.empty-cell),
 .bk-table .bk-table-body table tbody tr:hover.hover-highlight td:not(.empty-cell) {
@@ -1284,6 +1294,7 @@
 .bk-table .bk-table-head {
   position: relative;
   z-index: 2;
+  scrollbar-gutter: stable;
   overflow: hidden;
   background-color: var(--background-color);
 }

package/lib/table/table.less

@@ -12,9 +12,9 @@
 
 .@{bk-prefix}-table {
   position: relative;
-  width: 100%;
   height: auto;
   overflow: hidden;
+  width: 100%;
 
   &-flex {
     display: flex;
@@ -34,9 +34,21 @@
 
   .@{bk-prefix}-table-body {
     position: relative;
-    overflow: hidden;
+    overflow: auto;
+    scrollbar-gutter: stable;
     border-bottom: 1px solid @table-border-color;
 
+    &::-webkit-scrollbar {
+      width: 5px;
+      height: 6px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #dcdee5;
+      border-radius: 10px;
+      box-shadow: inset 0 0 6px rgba(204, 204, 204, .3);
+    }
+
     .prepend-row {
       transform: translateX(var(--prepend-left));
     }
@@ -136,8 +148,8 @@
           white-space: nowrap;
 
           .drag-cell {
-            height: 100%;
             font-size: 14px;
+            height: 100%;
           }
 
           &.has-sort {
@@ -285,8 +297,8 @@
               align-items: center;
 
               &.drag {
-                text-align: center;
                 cursor: move;
+                text-align: center;
               }
             }
           }
@@ -312,6 +324,7 @@
           // }
 
           &.--drag-start {
+
             td {
               background: #fff!important;
             }
@@ -324,6 +337,7 @@
   .@{bk-prefix}-table-head {
     position: relative;
     z-index: 2;
+    scrollbar-gutter: stable;
     overflow: hidden;
     background-color: var(--background-color);
 
@@ -439,8 +453,7 @@
 
   }
 
-  th,
-  td {
+  th, td {
     border-right: 1px solid transparent;
   }
 

package/lib/table/table.variable.css

@@ -1126,9 +1126,9 @@
 }
 .bk-table {
   position: relative;
-  width: 100%;
   height: auto;
   overflow: hidden;
+  width: 100%;
 }
 .bk-table-flex {
   display: flex;
@@ -1144,9 +1144,19 @@
 }
 .bk-table .bk-table-body {
   position: relative;
-  overflow: hidden;
+  overflow: auto;
+  scrollbar-gutter: stable;
   border-bottom: 1px solid #dcdee5;
 }
+.bk-table .bk-table-body::-webkit-scrollbar {
+  width: 5px;
+  height: 6px;
+}
+.bk-table .bk-table-body::-webkit-scrollbar-thumb {
+  background: #dcdee5;
+  border-radius: 10px;
+  box-shadow: inset 0 0 6px rgba(204, 204, 204, 0.3);
+}
 .bk-table .bk-table-body .prepend-row {
   transform: translateX(var(--prepend-left));
 }
@@ -1236,8 +1246,8 @@
 .bk-table .bk-table-body table th .cell .drag-cell,
 .bk-table .bk-table-head table td .cell .drag-cell,
 .bk-table .bk-table-body table td .cell .drag-cell {
-  height: 100%;
   font-size: 14px;
+  height: 100%;
 }
 .bk-table .bk-table-head table th .cell.has-sort,
 .bk-table .bk-table-body table th .cell.has-sort,
@@ -1399,8 +1409,8 @@
 }
 .bk-table .bk-table-head table tbody tr td .cell.drag,
 .bk-table .bk-table-body table tbody tr td .cell.drag {
-  text-align: center;
   cursor: move;
+  text-align: center;
 }
 .bk-table .bk-table-head table tbody tr:hover.hover-highlight td:not(.empty-cell),
 .bk-table .bk-table-body table tbody tr:hover.hover-highlight td:not(.empty-cell) {
@@ -1413,6 +1423,7 @@
 .bk-table .bk-table-head {
   position: relative;
   z-index: 2;
+  scrollbar-gutter: stable;
   overflow: hidden;
   background-color: var(--background-color);
 }

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

@@ -124,7 +124,6 @@ declare const BkVirtualRender: {
         } & {
             default: boolean;
         };
-        scrollbar: import("vue-types").VueTypeDef<import("./props").IScrollbarOption>;
         autoReset: import("vue-types").VueTypeValidableDef<boolean> & {
             default: boolean;
         } & {
@@ -262,7 +261,6 @@ declare const BkVirtualRender: {
         } & {
             default: boolean;
         };
-        scrollbar: import("vue-types").VueTypeDef<import("./props").IScrollbarOption>;
         autoReset: import("vue-types").VueTypeValidableDef<boolean> & {
             default: boolean;
         } & {
@@ -442,7 +440,6 @@ declare const BkVirtualRender: {
         } & {
             default: boolean;
         };
-        scrollbar: import("vue-types").VueTypeDef<import("./props").IScrollbarOption>;
         autoReset: import("vue-types").VueTypeValidableDef<boolean> & {
             default: boolean;
         } & {
@@ -616,7 +613,6 @@ declare const BkVirtualRender: {
     } & {
         default: boolean;
     };
-    scrollbar: import("vue-types").VueTypeDef<import("./props").IScrollbarOption>;
     autoReset: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {