bk-magic-vue 2.5.9-beta.21 → 2.5.9-beta.23

package/dist/bk-magic-vue.css

@@ -14307,6 +14307,11 @@ th.bk-table-column-selection .cell, th.bk-table-column-expand .cell, td.bk-table
             width:100%;
             height:100%;
         }
+.bk-big-tree .fixed-width{
+        width:-webkit-max-content;
+        width:-moz-max-content;
+        width:max-content;
+    }
 .bk-big-tree .bk-big-tree-empty{
         text-align:center;
         font-size:14px;

package/dist/bk-magic-vue.js

@@ -40352,9 +40352,23 @@
               this.table.$emit('current-change', row, oldCurrentRow);
             }
           },
-          rowSelectedChanged: function rowSelectedChanged(states, row) {
+          rowSelectedChanged: function rowSelectedChanged(states, row, index) {
+            var _this5 = this;
             var changed = _toggleRowSelection(states, row);
             var selection = states.selection;
+            if (this.table.shiftMulti.setStore(row, index)) {
+              var _this$table$shiftMult = this.table.shiftMulti.getStore(),
+                start = _this$table$shiftMult.start,
+                end = _this$table$shiftMult.end;
+              (this.table.data.slice(start.index, end.index + 1) || []).forEach(function (child) {
+                if (!states.selection.includes(child)) {
+                  states.selection.push(child);
+                }
+              });
+              setTimeout(function () {
+                _this5.table.$el.style.setProperty('user-select', 'inherit');
+              });
+            }
             if (changed) {
               var table = this.table;
               table.$emit('selection-change', selection ? selection.slice() : []);
@@ -40424,13 +40438,13 @@
     }, {
       key: "isAllSelectionDisabled",
       get: function get() {
-        var _this5 = this;
+        var _this6 = this;
         if (!this.states.selectable) {
           return false;
         }
         var isEmpty = this.states.data && this.states.data.length === 0;
         var isDisabled = this.states.data.every(function (row, index) {
-          return !_this5.states.selectable(row, index);
+          return !_this6.states.selectable(row, index);
         });
         return isEmpty || isDisabled;
       }
@@ -40918,7 +40932,7 @@
         var rows = this.table.$refs.tableBody.$refs.row || [];
         var rowsHeight = rows.reduce(function (accumulator, row) {
           var key = row.getAttribute('data-table-row');
-          accumulator[key] = row.offsetHeight;
+          accumulator[key] = row.getBoundingClientRect().height;
           return accumulator;
         }, {});
         if (isShallowEqual(rowsHeight, this.rowsHeight)) return;
@@ -42790,6 +42804,81 @@
     }
   };
 
+  var shiftMultiSelect = (function (props) {
+    var isShiftKeyDown = false;
+    var store = {
+      start: null,
+      end: null
+    };
+    var handleKeyDown = function handleKeyDown(e) {
+      if (e.key === 'Shift') {
+        isShiftKeyDown = true;
+      }
+    };
+    var handleKeyUp = function handleKeyUp(e) {
+      if (e.key === 'Shift') {
+        isShiftKeyDown = false;
+        clearStore();
+      }
+    };
+    var setStore = function setStore(row, index) {
+      if (!isShiftKeyDown) {
+        return false;
+      }
+      if (store.start === null && store.end === null) {
+        store.start = {
+          index: index,
+          row: row
+        };
+        return false;
+      }
+      store.end = {
+        index: index,
+        row: row
+      };
+      return true;
+    };
+    var clearStore = function clearStore() {
+      store.start = null;
+      store.end = null;
+    };
+    var init = function init() {
+      if (props.shiftMultiChecked) {
+        window.addEventListener('keydown', handleKeyDown);
+        window.addEventListener('keyup', handleKeyUp);
+      }
+    };
+    var getStore = function getStore() {
+      var start = store.start,
+        end = store.end;
+      var startRow = start.index < end.index ? start : end;
+      var endRow = start.index < end.index ? end : start;
+      return {
+        start: startRow,
+        end: endRow
+      };
+    };
+    var onUnmounted = function onUnmounted() {
+      if (props.shiftMultiChecked) {
+        window.removeEventListener('keydown', handleKeyDown);
+        window.removeEventListener('keyup', handleKeyUp);
+        clearStore();
+      }
+    };
+    var isShift = function isShift() {
+      return isShiftKeyDown;
+    };
+    return {
+      isShiftKeyDown: isShiftKeyDown,
+      isShift: isShift,
+      onUnmounted: onUnmounted,
+      setStore: setStore,
+      getStore: getStore,
+      clearStore: clearStore,
+      init: init
+    };
+  });
+
   var tableIdSeed = 1;
   var script$12 = {
     name: 'bk-table',
@@ -42938,6 +43027,10 @@
         default: function _default() {
           return {};
         }
+      },
+      shiftMultiChecked: {
+        type: Boolean,
+        default: false
       }
     },
     data: function data() {
@@ -42953,6 +43046,7 @@
         showHeader: this.showHeader
       });
       this.pagination.showTotalCount = !!this.showPaginationInfo;
+      var shiftMulti = shiftMultiSelect(this);
       return {
         layout: layout,
         store: store,
@@ -42965,7 +43059,8 @@
         },
         isGroup: false,
         scrollPosition: 'left',
-        scrollThrottle: false
+        scrollThrottle: false,
+        shiftMulti: shiftMulti
       };
     },
     computed: {
@@ -43146,6 +43241,7 @@
       this.debouncedUpdateLayout = debounce(50, function () {
         return _this2.doLayout();
       });
+      this.shiftMulti.init();
     },
     mounted: function mounted() {
       var _this3 = this;
@@ -43170,6 +43266,7 @@
     },
     beforeDestroy: function beforeDestroy() {
       this.$destroyed = true;
+      this.shiftMulti.onUnmounted();
       if (this.resizeListener) removeResizeListener(this.$el, this.resizeListener);
     },
     methods: {
@@ -43753,44 +43850,49 @@
           store = _ref2.store,
           $index = _ref2.$index;
         var disabled = column.selectable ? !column.selectable.call(null, row, $index) : false;
+        var beforeChange = function beforeChange() {
+          if (store.table.shiftMulti.isShift()) {
+            return !store.isSelected(row);
+          }
+          return column.beforeSelectChange(store.isSelected(row), {
+            row: row,
+            column: column,
+            store: store,
+            $index: $index
+          });
+        };
         return h("bk-checkbox", {
           "attrs": {
             "checked": store.isSelected(row),
             "disabled": disabled,
-            "before-change": function beforeChange() {
-              return column.beforeSelectChange(store.isSelected(row), {
-                row: row,
-                column: column,
-                store: store,
-                $index: $index
-              });
-            }
+            "before-change": beforeChange
           },
           "nativeOn": {
             "click": function () {
               var _click2 = _asyncToGenerator( _regeneratorRuntime().mark(function _callee2(event) {
-                var result;
+                var isShift, result;
                 return _regeneratorRuntime().wrap(function _callee2$(_context2) {
                   while (1) switch (_context2.prev = _context2.next) {
                     case 0:
                       event.stopPropagation();
+                      event.preventDefault();
+                      event.stopImmediatePropagation();
                       if (!disabled) {
-                        _context2.next = 3;
+                        _context2.next = 5;
                         break;
                       }
                       return _context2.abrupt("return");
-                    case 3:
-                      _context2.next = 5;
-                      return column.beforeSelectChange(store.isSelected(row), {
-                        row: row,
-                        column: column,
-                        store: store,
-                        $index: $index
-                      });
                     case 5:
+                      isShift = store.table.shiftMulti.isShift();
+                      if (isShift) {
+                        store.table.$el.style.setProperty('user-select', 'none');
+                      }
+                      _context2.next = 9;
+                      return beforeChange();
+                    case 9:
                       result = _context2.sent;
-                      result !== false && store.commit('rowSelectedChanged', row);
-                    case 7:
+                      result !== false && store.commit('rowSelectedChanged', row, $index);
+                    case 11:
                     case "end":
                       return _context2.stop();
                   }
@@ -54812,6 +54914,10 @@
           return {};
         }
       },
+      fixedWidth: {
+        type: Boolean,
+        default: false
+      },
       lazyMethod: Function,
       lazyDisabled: [Boolean, Function],
       selectable: Boolean,
@@ -55513,6 +55619,10 @@
       style: {
         height: _vm.treeHeight
       }
+    }, [_c('div', {
+      class: ['tree-wrapper', {
+        'fixed-width': _vm.fixedWidth
+      }]
     }, [_vm.height ? _c('bk-virtual-scroll', {
       ref: "virtualScroll",
       attrs: {
@@ -55549,8 +55659,8 @@
     }), (_vm.$slots.empty || _vm.useDefaultEmpty) && _vm.isSearchEmpty ? _c('div', {
       staticClass: "bk-big-tree-empty"
     }, [_vm._t("empty", function () {
-      return [_vm._v("\n      " + _vm._s(_vm.t('bk.bigTree.emptyText')) + "\n    ")];
-    })], 2) : _vm._e()], 2);
+      return [_vm._v("\n        " + _vm._s(_vm.t('bk.bigTree.emptyText')) + "\n      ")];
+    })], 2) : _vm._e()], 2)]);
   };
   var __vue_staticRenderFns__$1l = [];