bkui-vue 0.0.1-beta.157 → 0.0.1-beta.158

package/dist/index.esm.js

@@ -7906,6 +7906,34 @@ const formKey = Symbol("form");
 const formItemKey = Symbol("formItem");
 const useForm = () => inject(formKey);
 const useFormItem = () => inject(formItemKey, EMPTY_OBJ);
+const on$2 = (() => {
+  if (document.addEventListener) {
+    return (element, event, handler) => {
+      if (element && event && handler) {
+        element.addEventListener(event, handler, true);
+      }
+    };
+  }
+  return (element, event, handler) => {
+    if (element && event && handler) {
+      element.attachEvent(`on${event}`, handler);
+    }
+  };
+})();
+const off$2 = (() => {
+  if (document.removeEventListener) {
+    return (element, event, handler) => {
+      if (element && event) {
+        element.removeEventListener(event, handler, true);
+      }
+    };
+  }
+  return (element, event, handler) => {
+    if (element && event) {
+      element.detachEvent(`on${event}`, handler);
+    }
+  };
+})();
 function classes(dynamicCls, constCls = "") {
   return Object.entries(dynamicCls).filter((entry) => entry[1]).map((entry) => entry[0]).join(" ").concat(constCls ? ` ${constCls}` : "");
 }
@@ -14232,7 +14260,7 @@ var SelectTagInput = defineComponent({
     allowCreate: PropTypes.bool.def(false),
     modelValue: PropTypes.any
   },
-  emits: ["update:modelValue", "remove", "focus", "enter"],
+  emits: ["update:modelValue", "remove", "enter"],
   setup(props2, {
     emit
   }) {
@@ -14248,9 +14276,6 @@ var SelectTagInput = defineComponent({
     const handleRemoveTag = (val) => {
       emit("remove", val);
     };
-    const handleFocus = () => {
-      emit("focus");
-    };
     const focus = () => {
       var _a;
       (_a = inputRef.value) == null ? void 0 : _a.focus();
@@ -14271,7 +14296,6 @@ var SelectTagInput = defineComponent({
       value,
       inputRef,
       handleRemoveTag,
-      handleFocus,
       focus,
       handleInput,
       handleKeydown,
@@ -14291,17 +14315,16 @@ var SelectTagInput = defineComponent({
       }, _isSlot$5(_slot = this.handleGetLabelByValue(item)) ? _slot : {
         default: () => [_slot]
       });
-    }), withDirectives(createVNode("input", {
+    }), createVNode("input", {
       "class": "bk-select-tag-input",
       "ref": "inputRef",
       "type": "text",
       "placeholder": !this.selected.length ? this.placeholder : "",
       "readonly": !this.filterable,
-      "onUpdate:modelValue": ($event) => this.value = $event,
-      "onFocus": this.handleFocus,
+      "value": !this.filterable ? "" : this.value,
       "onInput": this.handleInput,
       "onKeydown": this.handleKeydown
-    }, null), [[vModelText, this.value]]), (_d = (_c = this.$slots) == null ? void 0 : _c.suffix) == null ? void 0 : _d.call(_c)]);
+    }, null), (_d = (_c = this.$slots) == null ? void 0 : _c.suffix) == null ? void 0 : _d.call(_c)]);
   }
 });
 var Component$j = defineComponent({
@@ -14330,6 +14353,7 @@ var Component$j = defineComponent({
     noMatchText: PropTypes.string.def("\u65E0\u5339\u914D\u6570\u636E"),
     loadingText: PropTypes.string.def("\u52A0\u8F7D\u4E2D..."),
     placeholder: PropTypes.string.def("\u8BF7\u9009\u62E9"),
+    searchPlaceholder: PropTypes.string.def("\u8BF7\u8F93\u5165\u5173\u952E\u5B57"),
     selectAllText: PropTypes.string.def("\u5168\u90E8"),
     scrollLoading: PropTypes.bool.def(false),
     allowCreate: PropTypes.bool.def(false),
@@ -14339,7 +14363,8 @@ var Component$j = defineComponent({
     idKey: PropTypes.string.def("value"),
     displayKey: PropTypes.string.def("label"),
     withValidate: PropTypes.bool.def(true),
-    showSelectedIcon: PropTypes.bool.def(true)
+    showSelectedIcon: PropTypes.bool.def(true),
+    inputSearch: PropTypes.bool.def(true)
   },
   emits: ["update:modelValue", "change", "toggle", "clear", "scroll-end", "focus", "blur"],
   setup(props2, {
@@ -14360,11 +14385,14 @@ var Component$j = defineComponent({
       multipleMode,
       allowCreate,
       customContent,
-      showSelectedIcon
+      showSelectedIcon,
+      inputSearch
     } = toRefs(props2);
     const formItem = useFormItem();
     const inputRef = ref();
     const triggerRef = ref();
+    const contentRef = ref();
+    const searchRef = ref();
     const selectTagInputRef = ref();
     const optionsMap = ref(/* @__PURE__ */ new Map());
     const options = computed(() => [...optionsMap.value.values()]);
@@ -14422,13 +14450,17 @@ var Component$j = defineComponent({
       cancelHover
     } = useHover();
     const isFocus = ref(false);
-    const handleFocus = (e) => {
+    const handleFocus = () => {
+      if (isFocus.value)
+        return;
       isFocus.value = true;
-      emit("focus", e);
+      emit("focus");
     };
     const handleBlur = () => {
-      isFocus.value && emit("blur");
+      if (!isFocus.value)
+        return;
       isFocus.value = false;
+      emit("blur");
     };
     const {
       popperWidth,
@@ -14439,12 +14471,12 @@ var Component$j = defineComponent({
     } = usePopover({
       popoverMinWidth: popoverMinWidth.value
     }, triggerRef);
-    const isInput = computed(() => (filterable.value || allowCreate.value) && isPopoverShow.value);
+    const isInput = computed(() => (filterable.value && inputSearch.value || allowCreate.value) && isPopoverShow.value);
     watch(isPopoverShow, (isShow) => {
       if (!isShow) {
         searchKey.value = "";
       } else {
-        focus();
+        focusInput();
         initActiveOptionValue();
       }
     });
@@ -14479,6 +14511,7 @@ var Component$j = defineComponent({
     const handleTogglePopover = () => {
       if (isDisabled.value)
         return;
+      handleFocus();
       togglePopover();
       emit("toggle", isPopoverShow.value);
     };
@@ -14533,15 +14566,21 @@ var Component$j = defineComponent({
         emitChange(option.value);
         hidePopover();
       }
-      focus();
+      focusInput();
     };
-    const focus = () => {
-      var _a, _b;
-      if (multipleMode.value === "tag") {
-        (_a = selectTagInputRef.value) == null ? void 0 : _a.focus();
-      } else {
-        (_b = inputRef.value) == null ? void 0 : _b.focus();
-      }
+    const focusInput = () => {
+      setTimeout(() => {
+        var _a, _b, _c;
+        if (!inputSearch.value && !allowCreate.value) {
+          (_a = searchRef.value) == null ? void 0 : _a.focus();
+        } else {
+          if (multipleMode.value === "tag") {
+            (_b = selectTagInputRef.value) == null ? void 0 : _b.focus();
+          } else {
+            (_c = inputRef.value) == null ? void 0 : _c.focus();
+          }
+        }
+      }, 0);
     };
     const handleClear = (e) => {
       e.stopPropagation();
@@ -14567,7 +14606,7 @@ var Component$j = defineComponent({
         });
       }
       emitChange(selected.value.map((item) => item.value));
-      focus();
+      focusInput();
     };
     const handleScroll = (e) => {
       const {
@@ -14605,6 +14644,8 @@ var Component$j = defineComponent({
     };
     const handleKeydown = (e) => {
       var _a, _b;
+      if (!triggerRef.value.contains(e.target) && !contentRef.value.contains(e.target))
+        return;
       const availableOptions = options.value.filter((option) => !option.disabled && option.visible);
       const index = availableOptions.findIndex((option) => option.value === activeOptionValue.value);
       if (!availableOptions.length || index === -1)
@@ -14623,7 +14664,7 @@ var Component$j = defineComponent({
           break;
         }
         case "Backspace": {
-          if (!multiple.value || !selected.value.length || searchKey.value.length)
+          if (!multiple.value || !selected.value.length || searchKey.value.length || e.target === searchRef.value)
             return;
           selected.value.pop();
           emitChange(selected.value.map((item) => item.value));
@@ -14669,6 +14710,10 @@ var Component$j = defineComponent({
       setTimeout(() => {
         showOnInit.value && showPopover();
       });
+      on$2(document, "keydown", handleKeydown);
+    });
+    onBeforeMount(() => {
+      off$2(document, "keydown", handleKeydown);
     });
     return {
       selected,
@@ -14681,6 +14726,8 @@ var Component$j = defineComponent({
       popperWidth,
       inputRef,
       triggerRef,
+      contentRef,
+      searchRef,
       selectTagInputRef,
       searchLoading,
       isOptionsEmpty,
@@ -14693,6 +14740,7 @@ var Component$j = defineComponent({
       setHover,
       cancelHover,
       handleFocus,
+      handleBlur,
       handleTogglePopover,
       handleClear,
       hidePopover,
@@ -14757,7 +14805,6 @@ var Component$j = defineComponent({
           "tagTheme": this.tagTheme,
           "placeholder": this.placeholder,
           "filterable": this.isInput,
-          "onFocus": this.handleFocus,
           "onRemove": this.handleDeleteTag,
           "onEnter": this.handleInputEnter
         }, {
@@ -14778,10 +14825,8 @@ var Component$j = defineComponent({
         "disabled": this.isDisabled,
         "behavior": this.behavior,
         "size": this.size,
-        "onFocus": this.handleFocus,
         "onInput": this.handleInputChange,
-        "onEnter": this.handleInputEnter,
-        "onKeydown": (_2, e) => this.handleKeydown(e)
+        "onEnter": this.handleInputEnter
       }, {
         prefix: () => {
           var _a, _b;
@@ -14795,14 +14840,25 @@ var Component$j = defineComponent({
       "ref": "triggerRef",
       "onClick": this.handleTogglePopover,
       "onMouseenter": this.setHover,
-      "onMouseleave": this.cancelHover,
-      "onKeydown": this.handleKeydown
+      "onMouseleave": this.cancelHover
     }, [renderTriggerInput()]);
     const renderSelectContent = () => {
       var _a, _b;
       return createVNode("div", {
-        "class": "bk-select-content"
-      }, [!this.isShowSelectContent && createVNode("div", {
+        "class": "bk-select-content",
+        "ref": "contentRef"
+      }, [this.filterable && !this.inputSearch && createVNode("div", {
+        "class": "bk-select-search-wrapper"
+      }, [createVNode(search, {
+        "class": "icon-search",
+        "width": 16,
+        "height": 16
+      }, null), withDirectives(createVNode("input", {
+        "ref": "searchRef",
+        "class": "bk-select-search-input",
+        "placeholder": this.searchPlaceholder,
+        "onUpdate:modelValue": ($event) => this.searchKey = $event
+      }, null), [[vModelText, this.searchKey]])]), !this.isShowSelectContent && createVNode("div", {
         "class": "bk-select-empty"
       }, [this.searchLoading && createVNode(BkLoading, {
         "class": "mr5",