bkui-vue 2.0.1-beta.39.table.2 → 2.0.1-beta.40

package/lib/table/table.variable.css

@@ -535,118 +535,111 @@
 .bk-F-scroll-y::-webkit-scrollbar-thumb {
   border-radius: 4px;
 }
-.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-wrapper {
+  position: relative;
+  overflow: hidden;
 }
-.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-content-el {
+  display: inline-flex;
+  flex-direction: column;
+  width: 100%;
 }
-.bk-scrollbar .bk__rail-x {
-  display: none;
-  opacity: 0;
-  transition: background-color 0.2s linear, opacity 0.2s linear;
-  height: 10px;
-  bottom: 0px;
+.bk-scrollbar-wrapper .bk-scrollbar-track {
+  z-index: 1;
   position: absolute;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  overflow: hidden;
 }
-.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 .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.track-small.bk-scrollbar-vertical {
+  width: 6px;
 }
-.bk-scrollbar .bk__rail-y.bk-size-small {
+.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-vertical.bk-scrollbar-hover {
   width: 8px;
 }
-.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 {
+  height: 6px;
 }
-.bk-scrollbar .bk__thumb-x {
-  background-color: #dcdee5;
-  border-radius: 8px;
-  transition: background-color 0.2s linear, height 0.2s ease-in-out;
+.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal.bk-scrollbar-hover {
   height: 8px;
-  bottom: 0px;
-  position: absolute;
 }
-.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 {
+  background-color: #f0f1f5;
+  cursor: pointer;
 }
-.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 {
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover .bk-scrollbar::before {
   background-color: #979ba5;
-  height: 10px;
 }
-.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;
+.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 {
   width: 10px;
 }
-.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 {
+.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 .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-hover {
+  height: 10px;
 }
-/* MS supports */
-@supports (-ms-overflow-style: none) {
-  .bk-scrollbar {
-    overflow: auto !important;
-  }
+.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;
 }
-@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-  .bk-scrollbar {
-    overflow: auto !important;
-  }
+.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;
+}
+.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;
 }
 .bk-virtual-render {
   position: relative;
 }
+.bk-virtual-render .bk-virtual-content {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
 .bk-virtual-render .bk-virtual-section {
   width: 1px;
   background: transparent;
@@ -1648,7 +1641,7 @@
   overflow: hidden;
 }
 .bk-table .bk-table-body .prepend-row {
-  transform: translate(var(--translate-x), 0);
+  transform: translate3d(var(--translate-x), 0, 0);
 }
 .bk-table .bk-table-body .resize-column {
   position: absolute;
@@ -1657,7 +1650,7 @@
   left: 0;
   width: 1px;
   background-color: #3785ff;
-  transform: translate(var(--drag-offset-x), var(--translate-y));
+  transform: translate3d(var(--drag-offset-x), var(--translate-y), 0);
 }
 .bk-table .bk-table-body-content.bk-stripe table tbody tr:nth-child(even) td {
   background-color: var(--table-strip-color);
@@ -1826,6 +1819,24 @@
   font-weight: 400;
   background-color: var(--background-color);
 }
+.bk-table .bk-table-head table thead th.col-resize-hover::after,
+.bk-table .bk-table-body table thead th.col-resize-hover::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  width: 6px;
+  pointer-events: none;
+  background-color: #3785ff;
+  content: '';
+  transform: translateX(50%);
+  cursor: col-resize;
+}
+.bk-table .bk-table-head table thead th.col-resize-hover .cell,
+.bk-table .bk-table-body table thead th.col-resize-hover .cell {
+  cursor: col-resize;
+}
 .bk-table .bk-table-head table thead th .cell,
 .bk-table .bk-table-body table thead th .cell {
   display: flex;
@@ -1833,21 +1844,17 @@
   height: calc(var(--row-height) - 2px);
   color: var(--table-head-font-color);
 }
-.bk-table .bk-table-head table thead th .cell.cell-resize,
-.bk-table .bk-table-body table thead th .cell.cell-resize {
-  cursor: col-resize;
+.bk-table .bk-table-head table thead th.active,
+.bk-table .bk-table-body table thead th.active,
+.bk-table .bk-table-head table thead th:hover,
+.bk-table .bk-table-body table thead th:hover {
+  cursor: pointer;
+  background: var(--table-row-active-bg-color);
 }
 .bk-table .bk-table-head table thead th.column_fixed,
 .bk-table .bk-table-body table thead th.column_fixed {
   transform: translateX(var(--translate-x));
 }
-.bk-table .bk-table-head table:not(.col-resize-hover) thead th.active,
-.bk-table .bk-table-body table:not(.col-resize-hover) thead th.active,
-.bk-table .bk-table-head table:not(.col-resize-hover) thead th:hover,
-.bk-table .bk-table-body table:not(.col-resize-hover) thead th:hover {
-  cursor: pointer;
-  background: var(--table-row-active-bg-color);
-}
 .bk-table .bk-table-head table tbody tr td,
 .bk-table .bk-table-body table tbody tr td {
   background-color: #fff;
@@ -1887,7 +1894,6 @@
   overflow: hidden;
   background-color: var(--background-color);
   height: var(--row-height);
-  min-height: var(--row-height);
 }
 .bk-table .bk-table-head.has-group .is-head-group {
   border-bottom: 1px solid var(--table-border-color);
@@ -1906,14 +1912,16 @@
   z-index: 1;
   width: 6px;
   background-color: #3785ff;
-  transform: translate(var(--drag-offset-h-x), 0);
-  pointer-events: none;
+  transform: translate3d(var(--drag-offset-h-x), 0, 0);
+}
+.bk-table .bk-table-head .col-resize-drag:hover {
+  cursor: ew-resize !important;
 }
 .bk-table .bk-table-head .bk-table-fixed {
-  transform: translate(0, 0);
+  transform: translate3d(0, 0, 0);
 }
 .bk-table .bk-table-head thead {
-  transform: translate(var(--translate-x-1), 0);
+  transform: translate3d(var(--translate-x-1), 0, 0);
 }
 .bk-table .bk-table-head .table-head-settings {
   position: absolute;
@@ -1940,7 +1948,6 @@
   display: flex;
   width: 100%;
   height: var(--footer-height);
-  min-height: var(--footer-height);
   align-items: center;
   padding: 0 16px 0 22px;
 }
@@ -2011,7 +2018,7 @@
   bottom: 0;
   left: 0;
   pointer-events: none;
-  transform: translate(var(--translate-x), var(--translate-y));
+  transform: translate3d(var(--translate-x), var(--translate-y), 0);
 }
 .bk-table .bk-table-fixed .column_fixed_right {
   box-shadow: var(--shadow-right);

package/lib/table-column/index.js

@@ -17636,9 +17636,6 @@ var IColSortBehavior;
    */
   IColSortBehavior["interdependent"] = "interdependent";
 })(IColSortBehavior || (IColSortBehavior = {}));
-// export enum BkScrollBehavior {
-//   AUTO = 'auto',
-// };
 var tableProps = {
   /**
    * 渲染列表
@@ -17888,7 +17885,6 @@ var tableProps = {
    * 启用Scrollbar
    */
   scrollbar: shared_namespaceObject.PropTypes.bool.def(true),
-  // scrollbehavior: toType<`${ScrollBehavior}`>('ScrollBehavior', {
   /**
    * 固定在底部的配置项
    */

package/lib/tree/tree.css

@@ -145,118 +145,111 @@
 .bk-F-scroll-y::-webkit-scrollbar-thumb {
   border-radius: 4px;
 }
-.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 .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 .bk__rail-x.bk-size-small {
-  height: 8px;
+.bk-scrollbar-wrapper {
+  position: relative;
+  overflow: hidden;
 }
-.bk-scrollbar .bk__rail-x.bk-size-small .bk__thumb-x {
-  height: 6px;
+.bk-scrollbar-wrapper .bk-scrollbar-content-el {
+  display: inline-flex;
+  flex-direction: column;
+  width: 100%;
 }
-.bk-scrollbar .bk__rail-y {
-  display: none;
-  opacity: 0;
-  transition: background-color 0.2s linear, opacity 0.2s linear;
-  width: 10px;
-  right: 0px;
+.bk-scrollbar-wrapper .bk-scrollbar-track {
+  z-index: 1;
   position: absolute;
-  margin-right: 2px;
-}
-.bk-scrollbar .bk__rail-y.bk-size-small {
-  width: 8px;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  overflow: hidden;
 }
-.bk-scrollbar .bk__rail-y.bk-size-small .bk__thumb-y {
+.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-vertical {
   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-vertical.bk-scrollbar-hover {
+  width: 8px;
+}
+.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal {
+  height: 6px;
 }
-.bk-scrollbar .bk__thumb-x {
-  background-color: #dcdee5;
-  border-radius: 8px;
-  transition: background-color 0.2s linear, height 0.2s ease-in-out;
+.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-horizontal.bk-scrollbar-hover {
   height: 8px;
-  bottom: 0px;
-  position: absolute;
 }
-.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 {
+  background-color: #f0f1f5;
+  cursor: pointer;
 }
-.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 {
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover .bk-scrollbar::before {
   background-color: #979ba5;
-  height: 10px;
 }
-.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;
+.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 {
   width: 10px;
 }
-.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 {
+.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 .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-hover {
+  height: 10px;
 }
-/* MS supports */
-@supports (-ms-overflow-style: none) {
-  .bk-scrollbar {
-    overflow: auto !important;
-  }
+.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;
 }
-@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-  .bk-scrollbar {
-    overflow: auto !important;
-  }
+.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;
+}
+.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;
 }
 .bk-virtual-render {
   position: relative;
 }
+.bk-virtual-render .bk-virtual-content {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
 .bk-virtual-render .bk-virtual-section {
   width: 1px;
   background: transparent;