bkui-vue 2.0.1-beta.34.scrollbar.3 → 2.0.1-beta.35

package/lib/table/table.variable.css

@@ -535,119 +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;
-  margin-bottom: 2px;
-}
-.bk-scrollbar .bk__rail-x.bk-scroll-size-small {
-  height: 8px;
-}
-.bk-scrollbar .bk__rail-x.bk-scroll-size-small .bk__thumb-x {
-  height: 6px;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  overflow: hidden;
 }
-.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-scroll-size-small {
+.bk-scrollbar-wrapper .bk-scrollbar-track.track-small.bk-scrollbar-vertical.bk-scrollbar-hover {
   width: 8px;
 }
-.bk-scrollbar .bk__rail-y.bk-scroll-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-scroll-size-small > .bk__thumb-x,
-.bk-scrollbar .bk-scroll-size-small > .bk__thumb-x,
-.bk-scrollbar .bk-scroll-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-scroll-size-small:hover > .bk__thumb-y,
-.bk-scrollbar .bk-scroll-size-small:focus > .bk__thumb-y,
-.bk-scrollbar .bk-scroll-size-small.bk--clicking .bk__thumb-y {
-  width: 8px;
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal.bk-scrollbar-hover {
+  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-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;
 }
-@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-  .bk-scrollbar {
-    overflow: auto !important;
-  }
+.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;
@@ -1973,6 +1965,9 @@
   border-right: 1px solid var(--table-border-color);
   border-left: 1px solid var(--table-border-color);
 }
+.bk-table.bordered-outer .bk-table-footer {
+  border-bottom: 1px solid var(--table-border-color);
+}
 .bk-table.bordered-horizontal {
   border-top: 1px solid var(--table-border-color);
   border-bottom: 1px solid var(--table-border-color);

package/lib/tree/index.js

@@ -18713,9 +18713,9 @@ var use_node_action_this = undefined;
     });
   };
   var handleNodeItemCheckboxChange = function handleNodeItemCheckboxChange(item, value, event) {
-    event.preventDefault();
-    event.stopImmediatePropagation();
-    event.stopPropagation();
+    event === null || event === void 0 || event.preventDefault();
+    event === null || event === void 0 || event.stopImmediatePropagation();
+    event === null || event === void 0 || event.stopPropagation();
     setNodeAttr(item, NODE_ATTRIBUTES.IS_CHECKED, !!value);
     if (value) {
       setNodeAttr(item, NODE_ATTRIBUTES.IS_INDETERMINATE, false);
@@ -18869,9 +18869,18 @@ var use_node_action_this = undefined;
     e.preventDefault();
     handleTreeNodeClick(node, e);
   };
+  /**
+   * 设置节点选中状态
+   * @param nodes 选中节点，可以是多个
+   * @param selected 是否选中 default：true
+   * @param autoOpen 是否自动展开所有父级节点 default：true
+   * @param triggerEvent 是否触发抛出事件 false
+   * @returns
+   */
   var setSelect = function setSelect(nodes) {
     var selected = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
     var autoOpen = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+    var triggerEvent = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
     var nodeList = Array.isArray(nodes) ? nodes : [nodes];
     if (!nodeList.length) {
       return;
@@ -18898,10 +18907,12 @@ var use_node_action_this = undefined;
     }
     setNodeAttr(resolvedItem, NODE_ATTRIBUTES.IS_SELECTED, selected);
     selectedNodeId = getNodeId(resolvedItem);
-    ctx.emit(EVENTS.NODE_SELECTED, {
-      selected: selected,
-      node: resolvedItem
-    });
+    if (triggerEvent) {
+      ctx.emit(EVENTS.NODE_SELECTED, {
+        selected: selected,
+        node: resolvedItem
+      });
+    }
     /**
      * 如果设置了自动展开
      * 判定长度是为了处理异步节点,如果当前设置selected的节点为多级异步节点
@@ -19076,7 +19087,8 @@ var use_node_action_this = undefined;
     setNodeOpened: setNodeOpened,
     setSelect: setSelect,
     setOpen: setOpen,
-    setNodeAttribute: setNodeAttribute
+    setNodeAttribute: setNodeAttribute,
+    isIndeterminate: isIndeterminate
   };
 });
 ;// CONCATENATED MODULE: ../../packages/tree/src/use-node-drag.tsx
@@ -19931,7 +19943,8 @@ var use_tree_init_this = undefined;
       setNodeAction = _useNodeAction.setNodeAction,
       setSelect = _useNodeAction.setSelect,
       asyncNodeClick = _useNodeAction.asyncNodeClick,
-      setNodeAttribute = _useNodeAction.setNodeAttribute;
+      setNodeAttribute = _useNodeAction.setNodeAttribute,
+      isIndeterminate = _useNodeAction.isIndeterminate;
     var handleSearch = (0,shared_namespaceObject.debounce)(120, function () {
       matchedNodePath.length = 0;
       flatData.data.forEach(function (item) {
@@ -19961,10 +19974,19 @@ var use_tree_init_this = undefined;
      * 设置指定节点是否选中
      * @param item Node item | Node Id
      * @param checked
+     * @param triggerEvent 是否触发抛出事件
      */
     var setChecked = function setChecked(item) {
       var checked = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+      var triggerEvent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
       setNodeAction(resolveNodeItem(item), NODE_ATTRIBUTES.IS_CHECKED, checked);
+      if (triggerEvent) {
+        ctx.emit(EVENTS.NODE_CHECKED, flatData.data.filter(function (t) {
+          return isNodeChecked(t);
+        }), flatData.data.filter(function (t) {
+          return isIndeterminate(t);
+        }));
+      }
     };
     onSelected(function (newData) {
       setSelect(newData, true, props.autoOpenParentNode);

package/lib/tree/tree.css

@@ -145,119 +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;
-  margin-bottom: 2px;
-}
-.bk-scrollbar .bk__rail-x.bk-scroll-size-small {
-  height: 8px;
+.bk-scrollbar-wrapper {
+  position: relative;
+  overflow: hidden;
 }
-.bk-scrollbar .bk__rail-x.bk-scroll-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-scroll-size-small {
-  width: 8px;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  overflow: hidden;
 }
-.bk-scrollbar .bk__rail-y.bk-scroll-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-scroll-size-small > .bk__thumb-x,
-.bk-scrollbar .bk-scroll-size-small > .bk__thumb-x,
-.bk-scrollbar .bk-scroll-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-scroll-size-small:hover > .bk__thumb-y,
-.bk-scrollbar .bk-scroll-size-small:focus > .bk__thumb-y,
-.bk-scrollbar .bk-scroll-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;