bk-magic-vue 2.5.10-beta.3 → 2.5.10-beta.4

package/dist/bk-magic-vue.js

@@ -32339,6 +32339,12 @@
         if (!select.multiple) {
           select.close();
         }
+      },
+      handleMouseEnter: function handleMouseEnter() {
+        this.select.activeOptionID = this.id;
+      },
+      handleMouseLeave: function handleMouseLeave() {
+        this.select.activeOptionID = '';
       }
     }
   };
@@ -32362,10 +32368,12 @@
       class: {
         'is-selected': _vm.isSelected,
         'is-disabled': _vm.disabled,
-        'is-highlight': _vm.isHighlight
+        'is-highlight': _vm.isHighlight || _vm.select.activeOptionID === _vm.id
       },
       on: {
-        "click": _vm.handleOptionClick
+        "click": _vm.handleOptionClick,
+        "mouseenter": _vm.handleMouseEnter,
+        "mouseleave": _vm.handleMouseLeave
       }
     }, [_c('div', {
       staticClass: "bk-option-content"
@@ -34208,7 +34216,9 @@
         renderPopoverOptions: {},
         popoverDistance: 10 + _parseInt$2(variable_1),
         optionList: null,
-        allowCreateData: []
+        allowCreateData: [],
+        activeOptionID: undefined,
+        hasInitKeyDownEvent: false
       };
     },
     computed: {
@@ -34330,6 +34340,7 @@
           } else {
             _this2.search();
           }
+          _this2.initActiveOptionID();
         }, 100);
       },
       selected: function selected(value, oldValue) {
@@ -34477,11 +34488,22 @@
         });
       },
       handleDropdownShow: function handleDropdownShow() {
+        var _this7 = this;
+        if (!this.hasInitKeyDownEvent) {
+          document.addEventListener('keydown', this.handleDocumentKeydown);
+          setTimeout(function () {
+            _this7.initActiveOptionID();
+            _this7.scrollActiveOptionIntoView();
+          }, 50);
+          this.hasInitKeyDownEvent = true;
+        }
         this.defaultWidth = this.$el.offsetWidth;
         if (this.autoHeight) this.focus = true;
       },
       handleDropdownHide: function handleDropdownHide() {
+        document.removeEventListener('keydown', this.handleDocumentKeydown);
         this.focus = false;
+        this.hasInitKeyDownEvent = false;
       },
       handleInputChange: function handleInputChange(e) {
         var value = e.target.value;
@@ -34501,7 +34523,7 @@
         }
       },
       selectOption: function selectOption(option) {
-        var _this7 = this;
+        var _this8 = this;
         if (this.multiple) {
           if (!this.shouldUpdate) {
             this.selectedOptions.push(option);
@@ -34515,12 +34537,12 @@
           this.close();
         }
         this.$nextTick(function () {
-          _this7.$emit('selected', _this7.selected, _this7.selectedOptions);
+          _this8.$emit('selected', _this8.selected, _this8.selectedOptions);
         });
         this.focusTagInput();
       },
       unselectOption: function unselectOption(option) {
-        var _this8 = this;
+        var _this9 = this;
         if (this.multiple) {
           if (!this.shouldUpdate) {
             this.selectedOptions = this.selectedOptions.filter(function (selectedOption) {
@@ -34535,16 +34557,16 @@
           this.reset();
         }
         this.$nextTick(function () {
-          _this8.$emit('selected', _this8.selected, _this8.selectedOptions);
+          _this9.$emit('selected', _this9.selected, _this9.selectedOptions);
         });
       },
       reset: function reset() {
-        var _this9 = this;
+        var _this10 = this;
         this.selectedOptions = this.multiple ? [] : null;
         var prevSelected = this.multiple ? _toConsumableArray(this.selected) : this.selected;
         this.selected = this.multiple ? [] : '';
         this.$nextTick(function () {
-          _this9.$emit('clear', prevSelected);
+          _this10.$emit('clear', prevSelected);
         });
       },
       selectAll: function selectAll() {
@@ -34555,7 +34577,7 @@
         });
       },
       search: function search() {
-        var _this10 = this;
+        var _this11 = this;
         this.searchLoading = true;
         var searchValue = String(this.searchValue).trim();
         if (searchValue) {
@@ -34563,13 +34585,13 @@
             searchValue = searchValue.toLowerCase();
           }
           this.options.forEach(function (option) {
-            if (_this10.searchIgnoreCase) {
+            if (_this11.searchIgnoreCase) {
               option.unmatched = option.lowerName.indexOf(searchValue) < 0;
             } else {
               option.unmatched = option.name.indexOf(searchValue) < 0;
             }
-            if (option.unmatched && _this10.searchWithPinyin) {
-              var pinyinList = pinyin.parse(_this10.searchIgnoreCase ? option.lowerName : option.name).map(function (v) {
+            if (option.unmatched && _this11.searchWithPinyin) {
+              var pinyinList = pinyin.parse(_this11.searchIgnoreCase ? option.lowerName : option.name).map(function (v) {
                 if (v.type === 2) {
                   return v.target.toLowerCase();
                 }
@@ -34590,16 +34612,16 @@
         this.searchLoading = false;
       },
       remoteSearch: function remoteSearch() {
-        var _this11 = this;
+        var _this12 = this;
         return _asyncToGenerator( _regeneratorRuntime().mark(function _callee() {
           return _regeneratorRuntime().wrap(function _callee$(_context) {
             while (1) {
               switch (_context.prev = _context.next) {
                 case 0:
                   _context.prev = 0;
-                  _this11.searchLoading = true;
+                  _this12.searchLoading = true;
                   _context.next = 4;
-                  return _this11.remoteMethod(_this11.searchValue);
+                  return _this12.remoteMethod(_this12.searchValue);
                 case 4:
                   _context.next = 9;
                   break;
@@ -34609,7 +34631,7 @@
                   console.error(_context.t0);
                 case 9:
                   _context.prev = 9;
-                  _this11.searchLoading = false;
+                  _this12.searchLoading = false;
                   return _context.finish(9);
                 case 12:
                 case "end":
@@ -34639,19 +34661,19 @@
         this.$refs.bkSelect && this.$refs.bkSelect.focus();
       },
       ensureSearch: function ensureSearch() {
-        var _this12 = this;
+        var _this13 = this;
         if (!this.allowEnter) {
           return false;
         }
         var option = {};
         this.options.some(function (item) {
-          var searchValue = _this12.searchValue;
+          var searchValue = _this13.searchValue;
           var data = item;
           if (item.$options) {
             data = item.$options.propsData;
           }
           var name = data.name;
-          if (typeof name === 'string' && _this12.searchWithPinyin) {
+          if (typeof name === 'string' && _this13.searchWithPinyin) {
             var pinyinList = pinyin.parse(name).map(function (v) {
               if (v.type === 2) {
                 return v.target.toLowerCase();
@@ -34667,7 +34689,7 @@
             }
             return pinyinList.join('').indexOf(searchValue) !== -1 || pinyinStr.indexOf(searchValue) !== -1;
           } else {
-            if ("".concat(name).includes(_this12.searchValue)) {
+            if ("".concat(name).includes(_this13.searchValue)) {
               option = data;
               return true;
             }
@@ -34715,6 +34737,80 @@
       },
       focusTagInput: function focusTagInput() {
         this.$refs.bkSelectTag && this.$refs.bkSelectTag.focusInput();
+      },
+      isInViewPort: function isInViewPort(el, client) {
+        if (!el || !client) return true;
+        var _el$getBoundingClient = el.getBoundingClientRect(),
+          elTop = _el$getBoundingClient.top,
+          elBottom = _el$getBoundingClient.bottom;
+        var _client$getBoundingCl = client.getBoundingClientRect(),
+          clientTop = _client$getBoundingCl.top,
+          clientBottom = _client$getBoundingCl.bottom;
+        return elTop >= clientTop && elBottom <= clientBottom;
+      },
+      scrollActiveOptionIntoView: function scrollActiveOptionIntoView() {
+        var optionsDom = this.$refs.optionList.querySelectorAll('.is-selected');
+        if (!optionsDom) return;
+        optionsDom[0].scrollIntoView({
+          block: 'nearest'
+        });
+      },
+      initActiveOptionID: function initActiveOptionID() {
+        var firstSelectedID = isArray$1(this.selected) ? this.selected[0] : this.selected;
+        var option = this.optionsMap[firstSelectedID];
+        if (option && !option.disabled) {
+          this.activeOptionID = firstSelectedID;
+        } else {
+          var _option = this.options.find(function (option) {
+            return !option.disabled;
+          }) || {};
+          this.activeOptionID = _option.id || '';
+        }
+      },
+      handleDocumentKeydown: function handleDocumentKeydown(e) {
+        var _this14 = this;
+        if (this.disabled || !this.options.length) return;
+        var availableOptions = this.options.filter(function (option) {
+          return !option.disabled;
+        });
+        var index = availableOptions.findIndex(function (option) {
+          return option.id === _this14.activeOptionID;
+        });
+        switch (e.code) {
+          case 'ArrowUp':
+          case 'ArrowDown':
+            {
+              e.preventDefault();
+              e.stopPropagation();
+              this.$refs.searchInput && this.$refs.searchInput.blur();
+              var activeIndex = 0;
+              if (e.code === 'ArrowDown') {
+                activeIndex = index >= availableOptions.length - 1 ? 0 : index + 1;
+              } else {
+                activeIndex = index === 0 ? availableOptions.length - 1 : index - 1;
+              }
+              if (availableOptions[activeIndex] && availableOptions[activeIndex].$el && !this.isInViewPort(availableOptions[activeIndex].$el, this.$refs.optionList)) {
+                availableOptions[activeIndex].$el.scrollIntoView({
+                  block: 'nearest'
+                });
+              }
+              this.activeOptionID = availableOptions[activeIndex].id;
+              break;
+            }
+          case 'NumpadEnter':
+          case 'Enter':
+            {
+              var value = e.target.value;
+              if (this.allowCreate && value || e.target === this.$refs.searchInput) return;
+              var option = this.optionsMap[this.activeOptionID];
+              if (option.isSelected) {
+                this.unselectOption(option);
+              } else {
+                this.selectOption(option);
+              }
+              break;
+            }
+        }
       }
     }
   };