bk-magic-vue 2.4.9 → 2.4.11-beta.1

package/dist/bk-magic-vue.css

@@ -8990,6 +8990,15 @@ span.bk-date-picker-cells-cell-disabled.bk-date-picker-cells-cell-selected em{
     width:100%;
     z-index:777;
 }
+.bk-select-tag-input{
+    height:22px;
+    max-width:190px;
+    padding:0;
+    margin:4px 5px 4px 0;
+    overflow:hidden;
+    border:none;
+    outline:none;
+}
 .bk-sideslider-show{
     overflow-y:hidden !important;
 }
@@ -15353,9 +15362,23 @@ th.bk-table-column-selection .cell, th.bk-table-column-expand .cell, td.bk-table
       font-size:26px;
     }
 .bk-divider{
-    position:relative
+  position:relative
 }
-.bk-divider-info{
+.bk-divider.bk-divider__vertical{
+    display:inline-block;
+    width:0;
+    height:1em;
+    margin:0 8px;
+    verticalAlign:middle;
+  }
+.bk-divider.bk-divider__horizontal{
+    display:block;
+    width:100%;
+    height:0;
+    margin:1em 0;
+    verticalAlign:middle;
+  }
+.bk-divider .bk-divider-info{
     position:absolute;
     padding:0 1.4em;
     color:#313238;
@@ -15363,16 +15386,16 @@ th.bk-table-column-selection .cell, th.bk-table-column-expand .cell, td.bk-table
     -webkit-transform:translateY(-50%);
             transform:translateY(-50%);
     background-color:#fff;
-}
-.bk-divider-info-left{
+  }
+.bk-divider .bk-divider-info-left{
         left:2em;
     }
-.bk-divider-info-center{
+.bk-divider .bk-divider-info-center{
         left:50%;
         -webkit-transform:translateX(-50%) translateY(-50%);
                 transform:translateX(-50%) translateY(-50%)
     }
-.bk-divider-info-right{
+.bk-divider .bk-divider-info-right{
         right:2em;
     }
 .bk-compose-form-item{

package/dist/bk-magic-vue.js

@@ -25272,7 +25272,7 @@
         timer: 0,
         isShow: false,
         popInstance: null,
-        containerHeight: 32
+        holderHeight: variable_1
       };
     },
     computed: {
@@ -25287,7 +25287,6 @@
       }
     },
     mounted: function mounted() {
-      this.containerHeight = this.containerHeight + _parseInt$2(variable_1, 10);
       var placement = "bottom".concat(this.getPlacementFix());
       this.popInstance = new Popper(this.$refs.refDropTrigger, this.$refs.refDropContent, {
         placement: placement,
@@ -25383,9 +25382,6 @@
       }],
       staticClass: "bk-dropdown-menu",
       class: [_vm.disabled ? 'disabled' : '', _vm.positionFixed ? '' : 'bk-dropdown-full-width', _vm.fontSizeCls, _vm.extCls],
-      style: {
-        height: _vm.containerHeight + 'px'
-      },
       attrs: {
         "tabindex": "0"
       },
@@ -25414,6 +25410,12 @@
       ref: "refDropTrigger",
       staticClass: "bk-dropdown-trigger"
     }, [_vm._t("dropdown-trigger")], 2), _c('div', {
+      style: {
+        height: _vm.holderHeight,
+        width: '100%',
+        position: 'absolute'
+      }
+    }), _c('div', {
       ref: "refDropContent",
       class: ['bk-dropdown-content', {
         'is-show': _vm.isShow,
@@ -29617,7 +29619,10 @@
         type: String,
         default: 'normal'
       },
-      precision: Number,
+      precision: {
+        type: Number,
+        default: 0
+      },
       passwordIcon: {
         type: Array,
         default: function _default() {
@@ -29670,7 +29675,15 @@
         inputSize: this.size,
         inputPasswordIcon: this.passwordIcon,
         inputRightPadding: '10px',
-        iconAreaSizeObserver: null
+        iconAreaSizeObserver: null,
+        validKeyCodeList: [48, 49, 50, 51, 52, 53, 54, 55, 56, 57,
+        8,
+        189,
+        190,
+        38, 40, 37, 39,
+        46,
+        9
+        ]
       };
     },
     computed: {
@@ -29822,6 +29835,7 @@
               max: this.max
             };
             _extends(outputAttr, defaultAttr, numberAttr);
+            outputAttr.type = 'text';
             break;
           case 'textarea':
             var txtAttr = {
@@ -29926,7 +29940,53 @@
         this.$emit('keypress', value, event);
       },
       handlerKeydown: function handlerKeydown(event) {
-        var value = event.target.value;
+        var keyCode = event.keyCode;
+        var target = event.currentTarget;
+        var value = target.value;
+        if (this.inputType === 'number') {
+          if (this.validKeyCodeList.indexOf(keyCode) < 0) {
+            event.stopPropagation();
+            event.preventDefault();
+            return false;
+          }
+          if (keyCode === 190) {
+            if (this.precision === 0) {
+              event.stopPropagation();
+              event.preventDefault();
+              return false;
+            }
+            if (String(value).trim()) {
+              if (value.indexOf('.') >= 0) {
+                event.stopPropagation();
+                event.preventDefault();
+                return false;
+              }
+            }
+          }
+          if (event.keyCode === 189) {
+            if (String(value).trim()) {
+              if (value.indexOf('-') >= 0) {
+                event.stopPropagation();
+                event.preventDefault();
+                return false;
+              }
+              if (document.getSelection().type !== 'Range') {
+                if (target.selectionEnd !== 0) {
+                  event.stopPropagation();
+                  event.preventDefault();
+                  return false;
+                }
+              }
+            }
+          }
+          if (keyCode === 38) {
+            event.preventDefault();
+            this.handleNumberAdd(event);
+          } else if (keyCode === 40) {
+            event.preventDefault();
+            this.handleNumberDelete(event);
+          }
+        }
         this.$emit('keydown', value, event);
       },
       handlerFocus: function handlerFocus(event) {
@@ -31809,7 +31869,8 @@
     data: function data() {
       return {
         overflowTagNode: null,
-        overflowTagIndex: null
+        overflowTagIndex: null,
+        newOptionName: ''
       };
     },
     mounted: function mounted() {
@@ -31817,12 +31878,22 @@
       this.calcOverflow();
       this.$watch(function () {
         return _this.select.focus;
-      }, this.calcOverflow);
+      }, function (isFocus) {
+        _this.calcOverflow();
+        if (isFocus) {
+          _this.focusInput();
+        } else {
+          _this.newOptionName = '';
+        }
+      });
       this.$watch(function () {
         return _this.select.selected;
       }, this.calcOverflow);
     },
     methods: {
+      focusInput: function focusInput() {
+        this.$refs.inputRef && this.$refs.inputRef.focus();
+      },
       handleRemoveSelected: function handleRemoveSelected(event, option) {
         if (this.select.disabled || this.select.readonly) {
           return false;
@@ -31898,6 +31969,10 @@
         if (this.overflowTagNode && this.overflowTagNode.parentNode === this.$el) {
           this.$el.removeChild(this.overflowTagNode);
         }
+      },
+      handleCreateTag: function handleCreateTag(e) {
+        this.$emit('create-tag', e.target.value);
+        this.newOptionName = '';
       }
     }
   };
@@ -31925,7 +32000,7 @@
         'is-small-size': _vm.select.size === 'small',
         'has-prefix-icon': !!_vm.select.prefixIcon
       }
-    }, _vm._l(_vm.select.selectedOptions, function (option) {
+    }, [_vm._l(_vm.select.selectedOptions, function (option) {
       return _c('div', {
         key: option.id,
         staticClass: "bk-select-tag",
@@ -31940,7 +32015,36 @@
           }
         }
       })]);
-    }), 0);
+    }), _vm.select.allowCreate ? _c('input', {
+      directives: [{
+        name: "model",
+        rawName: "v-model",
+        value: _vm.newOptionName,
+        expression: "newOptionName"
+      }],
+      ref: "inputRef",
+      staticClass: "bk-select-tag-input",
+      domProps: {
+        "value": _vm.newOptionName
+      },
+      on: {
+        "blur": _vm.handleCreateTag,
+        "keyup": function keyup($event) {
+          if (!('button' in $event) && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) {
+            return null;
+          }
+
+          return _vm.handleCreateTag($event);
+        },
+        "input": function input($event) {
+          if ($event.target.composing) {
+            return;
+          }
+
+          _vm.newOptionName = $event.target.value;
+        }
+      }
+    }) : _vm._e()], 2);
   };
 
   var __vue_staticRenderFns__$J = [];
@@ -32676,7 +32780,8 @@
       bkSelectTag: __vue_component__$J,
       bkVirtualScroll: __vue_component__$K,
       virtualOption: virtualOption,
-      bkSpin: __vue_component__$7
+      bkSpin: __vue_component__$7,
+      bkOption: __vue_component__$F
     },
     directives: {
       bkloading: bkLoading
@@ -32714,6 +32819,10 @@
         default: true
       },
       allowCreate: Boolean,
+      allowEnter: {
+        type: Boolean,
+        default: true
+      },
       disabled: Boolean,
       readonly: Boolean,
       loading: Boolean,
@@ -32836,7 +32945,8 @@
         autoUpdate: false,
         renderPopoverOptions: {},
         popoverDistance: 10 + _parseInt$2(variable_1),
-        optionList: null
+        optionList: null,
+        allowCreateData: []
       };
     },
     computed: {
@@ -32957,6 +33067,11 @@
         if (this.shouldUpdate || this.autoUpdate) {
           this.setSelectedOptions();
         }
+        if (this.allowCreate && this.displayTag && this.multiple && isArray$1(value)) {
+          this.allowCreateData = this.allowCreateData.filter(function (item) {
+            return value.includes(item.id);
+          });
+        }
         this.$emit('input', value);
         this.$emit('change', value, oldValue);
         this.dispatch('bk-form-item', 'form-change');
@@ -33086,7 +33201,7 @@
         var popover = this.getPopoverInstance();
         popover.set({
           onShown: function onShown() {
-            if (_this6.searchable && !_this6.allowCreate) {
+            if (_this6.searchable) {
               _this6.$refs.searchInput.focus();
             }
           }
@@ -33100,7 +33215,6 @@
         this.focus = false;
       },
       handleInputChange: function handleInputChange(e) {
-        console.log(e.target.value);
         var value = e.target.value;
         this.$emit('input', value);
         this.$emit('change', value, this.value);
@@ -33134,6 +33248,7 @@
         this.$nextTick(function () {
           _this7.$emit('selected', _this7.selected, _this7.selectedOptions);
         });
+        this.focusTagInput();
       },
       unselectOption: function unselectOption(option) {
         var _this8 = this;
@@ -33254,6 +33369,58 @@
         this.close();
         this.$refs.bkSelect && this.$refs.bkSelect.focus();
       },
+      ensureSearch: function ensureSearch() {
+        var _this12 = this;
+        if (!this.allowEnter) {
+          return false;
+        }
+        var option = {};
+        this.options.some(function (item) {
+          var searchValue = _this12.searchValue;
+          var data = item;
+          if (item.$options) {
+            data = item.$options.propsData;
+          }
+          var name = data.name;
+          if (typeof name === 'string' && _this12.searchWithPinyin) {
+            var pinyinList = pinyin.parse(name).map(function (v) {
+              if (v.type === 2) {
+                return v.target.toLowerCase();
+              }
+              return v.target;
+            });
+            var pinyinStr = pinyinList.reduce(function (res, cur) {
+              return res + cur[0];
+            }, '');
+            if (pinyinList.join('').indexOf(searchValue) !== -1 || pinyinStr.indexOf(searchValue) !== -1) {
+              option = data;
+              return true;
+            }
+            return pinyinList.join('').indexOf(searchValue) !== -1 || pinyinStr.indexOf(searchValue) !== -1;
+          } else {
+            if ("".concat(name).includes(_this12.searchValue)) {
+              option = data;
+              return true;
+            }
+          }
+          return false;
+        });
+        if (option) {
+          if (this.multiple && this.selected.includes(option.id)) {
+            return false;
+          }
+          this.selectOption(option);
+        } else {
+          if (this.allowCreate) {
+            this.$refs.createInput.value = this.searchValue;
+            this.handleInputChange({
+              target: {
+                value: this.searchValue
+              }
+            });
+          }
+        }
+      },
       handleTabRemove: function handleTabRemove(options) {
         this.$emit('tab-remove', options);
       },
@@ -33266,6 +33433,19 @@
         if (optionList.scrollHeight - (optionList.clientHeight + optionList.scrollTop) < 30) {
           this.$emit('scroll-end', true);
         }
+      },
+      handleCreateTag: function handleCreateTag(value) {
+        if (!value || this.optionsMap[value] || this.allowCreateData.find(function (item) {
+          return item.id === value;
+        })) return;
+        this.allowCreateData.push({
+          id: value,
+          name: value
+        });
+        this.selected.push(value);
+      },
+      focusTagInput: function focusTagInput() {
+        this.$refs.bkSelectTag && this.$refs.bkSelectTag.focusInput();
       }
     }
   };
@@ -33357,10 +33537,15 @@
     }, [_vm.prefixIcon ? _c('i', {
       class: ['bk-select-prefix-icon', _vm.prefixIcon]
     }) : _vm._e(), _vm._t("trigger", [_vm.multiple && _vm.displayTag ? _c('bk-select-tag', {
+      ref: "bkSelectTag",
       attrs: {
         "width-limit": _vm.isTagWidthLimit
+      },
+      on: {
+        "create-tag": _vm.handleCreateTag
       }
-    }) : [_vm.allowCreate ? _c('input', {
+    }) : [_vm.allowCreate && !_vm.multiple ? _c('input', {
+      ref: "createInput",
       staticClass: "bk-select-name",
       class: _vm.fontSizeCls,
       attrs: {
@@ -33409,6 +33594,12 @@
       },
       on: {
         "keydown": [function ($event) {
+          if (!('button' in $event) && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) {
+            return null;
+          }
+
+          return _vm.ensureSearch($event);
+        }, function ($event) {
           if (!('button' in $event) && _vm._k($event.keyCode, "tab", 9, $event.key, "Tab")) {
             return null;
           }
@@ -33455,7 +33646,21 @@
       }
     }, [_vm.multiple && _vm.showSelectAll && !_vm.searchValue ? _c('bk-option-all', {
       ref: "selectAllOption"
-    }) : _vm._e(), _vm.enableVirtualScroll ? _c('bk-virtual-scroll', {
+    }) : _vm._e(), _vm._l(_vm.allowCreateData, function (item) {
+      return _c('bk-option', {
+        directives: [{
+          name: "show",
+          rawName: "v-show",
+          value: false,
+          expression: "false"
+        }],
+        key: item.id,
+        attrs: {
+          "id": item.id,
+          "name": item.name
+        }
+      });
+    }), _vm.enableVirtualScroll ? _c('bk-virtual-scroll', {
       ref: "virtualScroll",
       staticClass: "bk-virtual-select",
       style: {
@@ -35384,9 +35589,7 @@
       name: {
         type: [String, Number],
         default: function _default() {
-          var seed = 0;
-          var now = now$1();
-          return "bk_radio_".concat(now, "_").concat(seed++);
+          return "bk_radio_".concat(uuid());
         }
       }
     },
@@ -37184,7 +37387,7 @@
         type: String,
         default: '',
         validator: function validator(value) {
-          if (['', 'large', 'small'].indexOf(value) < 0) {
+          if (['', 'normal', 'large', 'small'].indexOf(value) < 0) {
             console.error("size property is not valid: '".concat(value, "'"));
             return false;
           }
@@ -48483,6 +48686,16 @@
         var indexMove = this.realWidth * this.currentIndex;
         var imageMove = indexMove - this.mouseDistance;
         return -imageMove;
+      },
+      swiperStyle: function swiperStyle() {
+        var swiperStyle = {};
+        if (this.realWidth > 0) {
+          swiperStyle.width = "".concat(this.realWidth, "px");
+        }
+        if (this.realHeight > 0) {
+          swiperStyle.height = "".concat(this.realHeight, "px");
+        }
+        return swiperStyle;
       }
     },
     watch: {
@@ -48501,16 +48714,21 @@
       }
     },
     mounted: function mounted() {
-      this.initStatus();
+      var _this = this;
+      setTimeout(function () {
+        _this.initStatus();
+      });
     },
     beforeDestroy: function beforeDestroy() {
       this.destoryStatus();
     },
     methods: {
       calcSize: function calcSize() {
+        console.log(this);
+        var swiperSize = getElementSize(this.$refs.swiper);
         var swiperParentSize = getElementSize(this.$refs.swiper && this.$refs.swiper.parentElement);
-        this.realWidth = +this.width > 0 ? this.width : swiperParentSize.width || 600;
-        this.realHeight = +this.height > 0 ? this.height : swiperParentSize.height || 300;
+        this.realWidth = +this.width > 0 ? this.width : swiperSize.width > 0 ? swiperSize.width : swiperParentSize.width;
+        this.realHeight = +this.height > 0 ? this.height : swiperSize.height > 25 ? swiperSize.height : swiperParentSize.height;
       },
       initStatus: function initStatus() {
         this.calcSize();
@@ -48524,13 +48742,13 @@
         document.removeEventListener('visibilitychange', this.visChange);
       },
       watchParentSizeChange: function watchParentSizeChange() {
-        var _this = this;
+        var _this2 = this;
         var parentEle = this.$refs.swiper && this.$refs.swiper.parentElement;
         if (!parentEle || !window.ResizeObserver) {
           return;
         }
         this.resizeObserver = new ResizeObserver(function () {
-          _this.calcSize();
+          _this2.calcSize();
         });
         this.resizeObserver.observe(parentEle);
       },
@@ -48597,13 +48815,13 @@
         }
       },
       startLoop: function startLoop() {
-        var _this2 = this;
+        var _this3 = this;
         if (!this.isLoop) return;
         this.endLoop();
         this.loopId = window.setTimeout(function () {
-          _this2.isTransition = true;
-          _this2.changeCurrentIndex(_this2.currentIndex + 1);
-          _this2.startLoop();
+          _this3.isTransition = true;
+          _this3.changeCurrentIndex(_this3.currentIndex + 1);
+          _this3.startLoop();
         }, this.loopTime);
       },
       endLoop: function endLoop() {
@@ -48626,10 +48844,7 @@
     return _vm.sourceList.length ? _c('section', {
       ref: "swiper",
       class: ['bk-swiper-home', _vm.extCls],
-      style: {
-        width: _vm.realWidth + "px",
-        height: _vm.realHeight + "px"
-      }
+      style: _vm.swiperStyle
     }, [_c('hgroup', {
       class: [{
         'bk-transition': _vm.isTransition
@@ -55927,20 +56142,10 @@
       style: function style() {
         if (this.direction === 'vertical') {
           return {
-            display: 'inline-block',
-            width: 0,
-            height: '1em',
-            margin: '0 8px',
-            verticalAlign: 'middle',
             borderRight: "".concat(this.width, "px ").concat(this.type, " ").concat(this.color)
           };
         }
         return {
-          display: 'block',
-          width: '100%',
-          height: 0,
-          margin: '1em 0',
-          verticalAlign: 'middle',
           borderBottom: "".concat(this.width, "px ").concat(this.type, " ").concat(this.color)
         };
       }
@@ -55960,6 +56165,7 @@
 
     return _c('div', {
       staticClass: "bk-divider",
+      class: _vm.direction === 'horizontal' ? 'bk-divider__horizontal' : 'bk-divider__vertical',
       style: _vm.style
     }, [_vm.direction === 'horizontal' ? _c('div', {
       class: ['bk-divider-info', "bk-divider-info-" + _vm.align]