bk-magic-vue 2.4.9 → 2.4.10-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;
 }

package/dist/bk-magic-vue.js

@@ -31809,7 +31809,8 @@
     data: function data() {
       return {
         overflowTagNode: null,
-        overflowTagIndex: null
+        overflowTagIndex: null,
+        newOptionName: ''
       };
     },
     mounted: function mounted() {
@@ -31817,12 +31818,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 +31909,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 +31940,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 +31955,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 +32720,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
@@ -32836,7 +32881,8 @@
         autoUpdate: false,
         renderPopoverOptions: {},
         popoverDistance: 10 + _parseInt$2(variable_1),
-        optionList: null
+        optionList: null,
+        allowCreateData: []
       };
     },
     computed: {
@@ -32957,6 +33003,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');
@@ -33100,7 +33151,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 +33184,7 @@
         this.$nextTick(function () {
           _this7.$emit('selected', _this7.selected, _this7.selectedOptions);
         });
+        this.focusTagInput();
       },
       unselectOption: function unselectOption(option) {
         var _this8 = this;
@@ -33266,6 +33317,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 +33421,14 @@
     }, [_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', {
       staticClass: "bk-select-name",
       class: _vm.fontSizeCls,
       attrs: {
@@ -33455,7 +33523,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: {
@@ -37184,7 +37266,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;
           }