@opentiny/vue-renderless 3.26.0 → 3.28.0

package/base-select/index.js

@@ -52,23 +52,29 @@ const showTip = ({ props, state, vm }) => (show) => {
     state.showTip = show && overflow && !!state.tips && !state.visible;
   }
 };
-const defaultOnQueryChange = ({ props, state, constants, api, nextTick }) => (value, isInput) => {
-  if (props.remote && (typeof props.remoteMethod === "function" || typeof props.initQuery === "function")) {
-    state.hoverIndex = -1;
-    props.remoteMethod && props.remoteMethod(value, props.extraQueryParams);
-  } else if (typeof props.filterMethod === "function") {
+const defaultOnQueryChange = ({ props, state, constants, api, nextTick, vm }) => (value, isInput) => {
+  var _a;
+  if (typeof props.filterMethod === "function") {
     props.filterMethod(value);
     state.selectEmitter.emit(constants.COMPONENT_NAME.OptionGroup, constants.EVENT_NAME.queryChange);
+    if (props.remote && typeof props.remoteMethod === "function" && !((_a = vm.$slots) == null ? void 0 : _a.panel)) {
+      state.hoverIndex = -1;
+      props.remoteMethod(value, props.extraQueryParams);
+    }
+  } else if (props.remote && (typeof props.remoteMethod === "function" || typeof props.initQuery === "function")) {
+    state.hoverIndex = -1;
+    props.remoteMethod && props.remoteMethod(value, props.extraQueryParams);
   } else {
     api.queryChange(value, isInput);
   }
   setFilteredSelectCls(nextTick, state, props);
   api.getOptionIndexArr();
-  state.magicKey = state.magicKey > 0 ? -1 : 1;
 };
 const queryChange = ({ props, state, constants }) => (value, isInput) => {
   if (props.optimization && isInput) {
-    const filterDatas = state.initDatas.filter((item) => new RegExp(escapeRegexpString(value), "i").test(item.label));
+    const filterDatas = state.initDatas.filter(
+      (item) => new RegExp(escapeRegexpString(value), "i").test(item[props.textField])
+    );
     state.datas = filterDatas;
   } else {
     state.selectEmitter.emit(constants.EVENT_NAME.queryChange, value);
@@ -76,7 +82,7 @@ const queryChange = ({ props, state, constants }) => (value, isInput) => {
 };
 const setFilteredSelectCls = (nextTick, state, props) => {
   nextTick(() => {
-    if (props.multiple && props.showAlloption && props.filterable && state.query && !props.remote) {
+    if (props.multiple && props.showAlloption && (props.filterable || props.searchable) && state.query && !props.remote) {
       const filterSelectedVal = state.options.filter((item) => item.state.visible && item.state.itemSelected).map((opt) => opt.value);
       const visibleOptions = state.options.filter((item) => item.state.visible);
       if (filterSelectedVal.length === visibleOptions.length) {
@@ -106,7 +112,7 @@ const handleQueryChange = ({ api, constants, nextTick, props, vm, state }) => (v
     }
   });
   state.hoverIndex = -1;
-  if (props.multiple && props.filterable && !props.shape) {
+  if (props.multiple && (props.filterable || props.searchable) && !props.shape && !state.selectDisabled) {
     nextTick(() => {
       const length = vm.$refs.input.value.length * 15 + 20;
       state.inputLength = state.collapseTags ? Math.min(50, length) : length;
@@ -130,8 +136,8 @@ const handleMenuEnter = ({ api, nextTick, state, props }) => () => {
     nextTick(() => api.scrollToOption(state.selected));
   }
 };
-const emitChange = ({ emit, props, state, constants }) => (value, changed) => {
-  if (state.device === "mb" && props.multiple && !changed)
+const emitChange = ({ emit, props, state, constants, isMobileFirstMode }) => (value, changed) => {
+  if (isMobileFirstMode && state.device === "mb" && props.multiple && !changed)
     return;
   if (!isEqual(props.modelValue, state.compareValue)) {
     emit("change", value);
@@ -165,15 +171,15 @@ const getOption = ({ props, state, api }) => (value) => {
   if (props.optimization) {
     option = api.getSelectedOption(value);
     if (option) {
-      return { value: option.value, currentLabel: option.label || option.currentLabel };
+      return { value: option.value, currentLabel: option[props.textField] || option.currentLabel };
     }
-    option = state.datas.find((v) => getObj(v, props.valueKey) === value);
+    option = state.datas.find((v) => getObj(v, props.valueField) === value);
     if (option) {
-      return { value: option.value, currentLabel: option.label || option.currentLabel };
+      return { value: option[props.valueField], currentLabel: option[props.textField] || option.currentLabel };
     }
   }
   const label = !isObject && !isNull2 && !isUndefined && !props.clearNoMatchValue ? value : "";
-  let newOption = { value, currentLabel: label };
+  let newOption = { value, currentLabel: label, isFakeLabel: true };
   if (props.multiple) {
     newOption.hitState = false;
   }
@@ -182,9 +188,9 @@ const getOption = ({ props, state, api }) => (value) => {
 const getSelectedOption = ({ props, state }) => (value) => {
   let option;
   if (props.multiple) {
-    option = state.selected.find((v) => getObj(v, props.valueKey) === value);
+    option = state.selected.find((v) => getObj(v, props.valueField) === value && !v.isFakeLabel);
   } else {
-    if (!isEmptyObject(state.selected) && getObj(state.selected, props.valueKey) === value) {
+    if (!isEmptyObject(state.selected) && getObj(state.selected, props.valueField) === value && !state.selected.isFakeLabel) {
       option = state.selected;
     }
   }
@@ -195,13 +201,16 @@ const getOptionOfSetSelected = ({ api, props }) => {
   if (!option.state) {
     option.state = {};
   }
+  if (option.currentLabel !== void 0 && option.state.currentLabel === void 0) {
+    option.state.currentLabel = option.currentLabel;
+  }
   if (option.created) {
     option.createdLabel = option.state.currentLabel;
     option.createdSelected = true;
   } else {
     option.createdSelected = false;
   }
-  if (!option.state.currentLabel) {
+  if (!option.state.currentLabel && !option.currentLabel) {
     api.clearNoMatchValue("");
   }
   return option;
@@ -212,7 +221,8 @@ const getResultOfSetSelected = ({ state, api, props }) => {
   if (Array.isArray(state.modelValue)) {
     state.modelValue.forEach((value) => {
       const option = api.getOption(value);
-      if (!props.clearNoMatchValue || props.clearNoMatchValue && option.label) {
+      const hasLabel = (option == null ? void 0 : option.label) || (option == null ? void 0 : option.currentLabel) || (option == null ? void 0 : option.state) && option.state.currentLabel;
+      if (!props.clearNoMatchValue || props.clearNoMatchValue && hasLabel) {
         result.push(option);
         newModelValue.push(value);
       }
@@ -226,7 +236,10 @@ const setSelected = ({ api, nextTick, props, vm, state }) => () => {
     const option = getOptionOfSetSelected({ api, props });
     state.selected = option;
     state.selectedLabel = option.state.currentLabel || option.currentLabel;
-    props.filterable && !props.shape && (state.query = state.selectedLabel);
+    (props.filterable || props.searchable) && !props.shape && (state.query = state.selectedLabel);
+    if (vm.$slots.panel && state.selectedLabel && (props.filterable || props.searchable)) {
+      state.currentPlaceholder = "";
+    }
   } else {
     const result = getResultOfSetSelected({ state, props, api });
     state.selectCls = result.length ? result.length === state.options.length ? "checked-sur" : "halfselect" : "check";
@@ -234,6 +247,9 @@ const setSelected = ({ api, nextTick, props, vm, state }) => () => {
       state.selected = result;
     }
     state.selected.length && (state.selectedLabel = "");
+    if (vm.$slots.panel && result.length > 0 && (props.filterable || props.searchable)) {
+      state.currentPlaceholder = "";
+    }
     state.tips = state.selected.map((item) => item.state ? item.state.currentLabel : item.currentLabel).join(",");
     setFilteredSelectCls(nextTick, state, props);
     nextTick(api.resetInputHeight);
@@ -259,6 +275,7 @@ const toggleCheckAll = ({ api, state }) => (filtered) => {
       value = [.../* @__PURE__ */ new Set([...state.modelValue, ...enabledValues])];
     } else {
       value = state.modelValue.filter((val) => !enabledValues.includes(val));
+      value = Array.from(/* @__PURE__ */ new Set([...state.modelValue, ...enabledValues]));
     }
   } else {
     if (state.selectCls === "check") {
@@ -279,18 +296,28 @@ const toggleCheckAll = ({ api, state }) => (filtered) => {
   api.directEmitChange(value);
 };
 const handleFocus = ({ emit, props, state }) => (event) => {
-  if (!state.softFocus) {
-    if (props.automaticDropdown || props.filterable) {
-      state.visible = true;
-      state.softFocus = true;
-    }
-    emit("focus", event);
-  } else {
-    if (state.searchSingleCopy && state.selectedLabel) {
+  state.willFocusRun = true;
+  state.willFocusTimer && clearTimeout(state.willFocusTimer);
+  state.willFocusTimer = setTimeout(() => {
+    state.willFocusTimer = 0;
+    if (!state.willFocusRun)
+      return;
+    if (!state.softFocus) {
+      if (props.shape === "filter") {
+        return;
+      }
+      if (props.automaticDropdown || props.filterable || props.searchable) {
+        state.visible = true;
+        state.softFocus = true;
+      }
       emit("focus", event);
+    } else {
+      if (state.searchSingleCopy && state.selectedLabel) {
+        emit("focus", event);
+      }
+      state.softFocus = false;
     }
-    state.softFocus = false;
-  }
+  }, 10);
 };
 const focus = ({ vm, state }) => () => {
   if (!state.softFocus) {
@@ -303,6 +330,7 @@ const blur = ({ vm, state }) => () => {
 };
 const handleBlur = ({ constants, dispatch, emit, state, designConfig }) => (event) => {
   var _a;
+  state.willFocusRun = false;
   clearTimeout(state.timer);
   state.timer = setTimeout(() => {
     var _a2;
@@ -373,7 +401,7 @@ const resetInputState = ({ api, vm, state }) => (event) => {
   api.resetInputHeight();
 };
 const resetInputHeight = ({ constants, nextTick, props, vm, state, api, designConfig }) => () => {
-  if (state.collapseTags && !props.filterable) {
+  if (state.collapseTags && !(props.filterable || props.searchable)) {
     return;
   }
   nextTick(() => {
@@ -390,7 +418,6 @@ const resetInputHeight = ({ constants, nextTick, props, vm, state, api, designCo
     if (!state.isDisplayOnly && (props.hoverExpand || props.clickExpand) && !props.disabled) {
       api.calcCollapseTags();
     }
-    const sizeInMap = (designConfig == null ? void 0 : designConfig.state.initialInputHeight) || state.initialInputHeight || 32;
     const noSelected = state.selected.length === 0;
     const spacingHeight = (_b = (_a = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _a.spacingHeight) != null ? _b : constants.SPACING_HEIGHT;
     if (!state.isDisplayOnly) {
@@ -398,11 +425,11 @@ const resetInputHeight = ({ constants, nextTick, props, vm, state, api, designCo
         fastdom.measure(() => {
           const tagsClientHeight = tags.clientHeight;
           fastdom.mutate(() => {
-            input.style.height = Math.max(tagsClientHeight + spacingHeight, sizeInMap) + "px";
+            input.style.height = Math.max(tagsClientHeight + spacingHeight, state.currentSizeMap) + "px";
           });
         });
       } else {
-        input.style.height = noSelected ? sizeInMap + "px" : Math.max(0, sizeInMap) + "px";
+        input.style.height = noSelected ? state.currentSizeMap + "px" : Math.max(0, state.currentSizeMap) + "px";
       }
     } else {
       input.style.height = "auto";
@@ -440,6 +467,7 @@ const resetDatas = ({ props, state }) => () => {
   }
 };
 const handleOptionSelect = ({ api, nextTick, props, vm, state }) => (option, byClick) => {
+  var _a;
   state.memorize && state.memorize.updateByKey(option[state.memorize._dataKey] || option.value);
   if (props.multiple) {
     const value = (state.modelValue || []).slice();
@@ -459,8 +487,8 @@ const handleOptionSelect = ({ api, nextTick, props, vm, state }) => (option, byC
       api.handleQueryChange("", isChange, isInput);
       state.inputLength = 20;
     }
-    if (props.filterable) {
-      vm.$refs.input.focus();
+    if (props.filterable || props.searchable) {
+      (_a = vm.$refs.input) == null ? void 0 : _a.focus();
     }
     if (props.autoClose) {
       state.visible = false;
@@ -476,7 +504,8 @@ const handleOptionSelect = ({ api, nextTick, props, vm, state }) => (option, byC
     state.visible = false;
   }
   state.isSilentBlur = byClick;
-  api.setSoftFocus();
+  if (!props.automaticDropdown)
+    api.setSoftFocus();
   if (state.visible) {
     return;
   }
@@ -488,13 +517,17 @@ const initValue = ({ state }) => (vm) => {
   const isExist = state.initValue.find((val) => val === vm.value);
   !isExist && state.initValue.push(vm.value);
 };
-const setSoftFocus = ({ vm, state }) => () => {
+const setSoftFocus = ({ vm, state, props }) => () => {
+  if (vm.$slots.reference) {
+    return;
+  }
   state.softFocus = true;
   const input = vm.$refs.input || vm.$refs.reference;
-  if (input) {
-    input.focus();
+  if (!props.automaticDropdown) {
+    if (input) {
+      input.focus();
+    }
   }
-  state.softFocus = false;
 };
 const getValueIndex = (props) => (arr = [], value = null) => {
   const isObject = Object.prototype.toString.call(value).toLowerCase() === "[object object]";
@@ -513,22 +546,28 @@ const getValueIndex = (props) => (arr = [], value = null) => {
     return index;
   }
 };
-const toggleMenu = ({ vm, state, props, api }) => (e) => {
-  if (props.keepFocus && state.visible && props.filterable) {
+const toggleMenu = ({ vm, state, props, api, designConfig }) => (e) => {
+  var _a, _b, _c;
+  if (props.keepFocus && state.visible && (props.filterable || props.searchable)) {
     return;
   }
+  if (state.isIOS) {
+    state.selectHover = true;
+    state.inputHovering = true;
+  }
   const event = e || window.event;
   const enterCode = 13;
   const nodeName = event.target && event.target.nodeName;
   const toggleVisible = props.ignoreEnter ? event.keyCode !== enterCode && nodeName === "INPUT" : true;
-  if (!props.displayOnly) {
+  const isStop = (_c = (_b = props.stopPropagation) != null ? _b : (_a = designConfig == null ? void 0 : designConfig.props) == null ? void 0 : _a.stopPropagation) != null ? _c : false;
+  if (!props.displayOnly && isStop) {
     event.stopPropagation();
   }
   if (!state.selectDisabled) {
     toggleVisible && !state.softFocus && (state.visible = !state.visible);
     state.softFocus = false;
     if (state.visible) {
-      if (!(props.filterable && props.shape)) {
+      if (!((props.filterable || props.searchable) && props.shape)) {
         const dom = vm.$refs.input || vm.$refs.reference;
         (dom == null ? void 0 : dom.focus) && dom.focus();
         api.setOptionHighlight();
@@ -538,6 +577,7 @@ const toggleMenu = ({ vm, state, props, api }) => (e) => {
 };
 const selectOption = ({ api, state, props }) => (e) => {
   if (!state.visible || props.hideDrop) {
+    state.softFocus = false;
     api.toggleMenu(e);
   } else {
     let option = "";
@@ -581,7 +621,7 @@ const deleteTag = ({ api, constants, emit, props, state, nextTick, vm }) => (eve
 };
 const onInputChange = ({ api, props, state, constants, nextTick }) => () => {
   if (!props.delay) {
-    if (props.filterable && state.query !== state.selectedLabel) {
+    if ((props.filterable || props.searchable) && state.query !== state.selectedLabel) {
       const isChange = false;
       const isInput = true;
       state.query = state.selectedLabel;
@@ -744,7 +784,7 @@ const emptyText = ({ I18N, props, state, t, isMobileFirstMode }) => () => {
   if (props.remote && state.query === "" && state.emptyFlag && !state.triggerSearch) {
     return props.shape === "filter" || isMobileFirstMode ? "" : false;
   }
-  if (props.filterable && state.query && (props.remote && state.emptyFlag || !state.options.some((option) => option.visible && option.state.visible))) {
+  if ((props.filterable || props.searchable) && state.query && (props.remote && state.emptyFlag || !state.options.some((option) => option.visible && option.state.visible))) {
     return props.noMatchText || t(I18N.noMatch);
   }
   if (state.emptyFlag) {
@@ -761,19 +801,24 @@ const remoteEmptyText = function(props, state) {
 const watchValue = ({ api, constants, dispatch, props, vm, state }) => (value, oldValue) => {
   if (props.multiple) {
     api.resetInputHeight();
-    if (value && value.length > 0 || vm.$refs.input && state.query !== "") {
+    if (vm.$slots.panel && value && value.length > 0) {
+      state.currentPlaceholder = "";
+    } else if (value && value.length > 0 || vm.$refs.input && state.query !== "") {
       state.currentPlaceholder = "";
     } else {
       state.currentPlaceholder = state.cachedPlaceHolder;
     }
-    if (props.filterable && !props.reserveKeyword) {
-      !props.searchable && (state.query = "");
+    if ((props.filterable || props.searchable) && !props.reserveKeyword) {
+      const isChange = false;
+      const isInput = true;
+      state.query = "";
+      api.handleQueryChange(state.query, isChange, isInput);
     }
   }
   api.setSelected();
   !state.isClickChoose && api.initQuery({ init: true }).then(() => api.setSelected());
   state.isClickChoose = false;
-  if (props.filterable && !props.multiple) {
+  if ((props.filterable || props.searchable) && !props.multiple) {
     state.inputLength = 20;
   }
   if (state.completed && !isEqual(value, oldValue)) {
@@ -814,22 +859,38 @@ const calcOverFlow = ({ vm, props, state }) => (height) => {
     state.inputWidth = inputWidth;
   }
 };
-const postOperOfToVisible = ({ props, state, constants }) => {
+const postOperOfToVisible = ({ props, state, constants, vm }) => {
   if (props.multiple) {
+    if (props.modelValue && props.modelValue.length && props.initLabel && !state.selected.length) {
+      state.selectedLabel = props.initLabel;
+    }
     return;
   }
   if (state.selected) {
-    if (props.filterable && props.allowCreate && state.createdSelected && state.createdLabel) {
-      state.selectedLabel = state.createdLabel;
+    if (props.renderType === constants.TYPE.Grid || props.renderType === constants.TYPE.Tree) {
+      state.selectedLabel = state.selected.currentLabel;
     } else {
-      state.selectedLabel = state.selected.state.currentLabel || state.selected.currentLabel;
+      if ((props.filterable || props.searchable) && props.allowCreate && state.createdSelected && state.createdLabel) {
+        state.selectedLabel = state.createdLabel;
+      } else {
+        state.selectedLabel = state.selected.state.currentLabel || state.selected.currentLabel;
+      }
+      if (props.filterable || props.searchable) {
+        state.query = state.selectedLabel;
+      }
     }
-    if (props.filterable) {
-      state.query = state.selectedLabel;
+    if (props.filterable || props.searchable) {
+      if (vm.$slots.panel && state.selectedLabel) {
+        state.currentPlaceholder = "";
+      } else {
+        state.currentPlaceholder = state.cachedPlaceHolder;
+      }
     }
-    if (props.filterable) {
-      state.currentPlaceholder = state.cachedPlaceHolder;
+    if (props.modelValue && props.initLabel && !state.selectedLabel) {
+      state.selectedLabel = props.initLabel;
     }
+  } else if (props.modelValue && props.initLabel) {
+    state.selectedLabel = props.initLabel;
   }
 };
 const toVisible = ({ constants, state, props, vm, api, nextTick }) => () => {
@@ -850,18 +911,19 @@ const toVisible = ({ constants, state, props, vm, api, nextTick }) => () => {
       state.currentPlaceholder = state.cachedPlaceHolder;
     }
   });
-  postOperOfToVisible({ props, state, constants });
+  postOperOfToVisible({ props, state, constants, vm });
 };
 const toHide = ({ constants, state, props, vm, api }) => () => {
-  const { filterable, remote, remoteConfig, shape, multiple, valueField } = props;
+  var _a;
+  const { remote, remoteConfig, shape, renderType, multiple, valueField } = props;
   state.selectEmitter.emit(constants.COMPONENT_NAME.SelectDropdown, constants.EVENT_NAME.updatePopper);
-  if (filterable) {
+  if (props.filterable || props.searchable) {
     state.query = remote || shape ? "" : state.selectedLabel;
     const isChange = remote && remoteConfig.autoSearch && (state.firstAutoSearch || remoteConfig.clearData);
     state.firstAutoSearch = false;
     api.handleQueryChange(state.query, isChange);
     if (multiple) {
-      vm.$refs.input.focus();
+      (_a = vm.$refs.input) == null ? void 0 : _a.focus();
     } else {
       if (!remote) {
         state.selectEmitter.emit(constants.EVENT_NAME.queryChange, "");
@@ -874,14 +936,15 @@ const toHide = ({ constants, state, props, vm, api }) => () => {
     }
   }
 };
-const watchVisible = ({ api, constants, emit, state, vm, props }) => (value) => {
-  if ((props.filterable || props.remote) && !value) {
-    vm.$refs.reference.blur();
+const watchVisible = ({ api, constants, emit, state, vm, props, isMobileFirstMode }) => (value) => {
+  var _a;
+  if ((props.filterable || props.searchable || props.remote) && !value) {
+    (_a = vm.$refs.reference) == null ? void 0 : _a.blur();
   }
   if (api.onCopying()) {
     return;
   }
-  if (value && props.multiple && state.device === "mb") {
+  if (value && props.multiple && isMobileFirstMode && state.device === "mb") {
     state.selectedCopy = state.selected.slice();
   }
   setTimeout(() => {
@@ -919,16 +982,32 @@ const watchOptions = ({ api, constants, nextTick, parent, props, state }) => ()
     api.resetInputHeight();
   }
   nextTick(() => {
-    if (parent.$el.querySelector("input") !== document.activeElement) {
+    var _a;
+    if (parent.$el.querySelector("input") !== document.activeElement && // filterable时， 从 input 框离开了
+    !(((_a = document.activeElement) == null ? void 0 : _a.classList.contains("tiny-input__inner")) && // 并且当前不在下拉面板的searchable 的input中时，  才需要更新一下setSelect
+    document.activeElement.closest(".tiny-select-dropdown__search"))) {
       api.setSelected();
     }
   });
   api.getOptionIndexArr();
 };
+const watchOptionsWhenAutoSelect = ({ nextTick, props, state, api }) => () => {
+  if (props.autoSelect && props.remote) {
+    nextTick(() => {
+      var _a, _b;
+      if (((_a = props.options) == null ? void 0 : _a.length) === 1 || state.options.length === 1) {
+        const { valueField } = props;
+        const option = ((_b = props.options) == null ? void 0 : _b.length) === 1 ? props.options[0] : state.options[0];
+        api.updateModelValue(props.multiple ? [option[props.valueField]] : option[props.valueField]);
+        state.visible = false;
+      }
+    });
+  }
+};
 const getOptionIndexArr = ({ props, state, api }) => () => {
   setTimeout(() => {
     state.optionIndexArr = api.queryVisibleOptions().map((item) => Number(item.getAttribute("data-index")));
-    if (props.defaultFirstOption && (props.filterable || props.remote) && state.filteredOptionsCount) {
+    if (props.defaultFirstOption && (props.filterable || props.searchable || props.remote) && state.filteredOptionsCount) {
       if (props.optimization) {
         optmzApis.checkDefaultFirstOption({ state });
       } else {
@@ -956,7 +1035,7 @@ const handleCopyClick = ({ parent, props, state }) => () => {
   parent.$el.removeChild(input);
 };
 const debouncRquest = ({ api, state, props }) => debounce(props.delay, () => {
-  if (props.filterable && state.query !== state.selectedLabel) {
+  if ((props.filterable || props.searchable) && state.query !== state.selectedLabel) {
     const isChange = false;
     const isInput = true;
     state.query = state.selectedLabel;
@@ -1009,6 +1088,12 @@ const onMouseenterNative = ({ state }) => () => {
     state.softFocus = true;
   }
 };
+const onMouseenterSelf = ({ state }) => () => {
+  if (!state.isIOS) {
+    state.selectHover = true;
+    state.inputHovering = true;
+  }
+};
 const onMouseleaveNative = ({ state }) => (e) => {
   if (e.target === e.currentTarget)
     return;
@@ -1106,7 +1191,7 @@ const watchInputHover = ({ vm }) => (newVal) => {
   }
 };
 const initQuery = ({ props, state, constants, vm }) => ({ init } = {}) => {
-  const isRemote = props.filterable && props.remote && (typeof props.remoteMethod === "function" || typeof props.initQuery === "function");
+  const isRemote = (props.filterable || props.searchable) && props.remote && (typeof props.remoteMethod === "function" || typeof props.initQuery === "function");
   let selected;
   if (isRemote && props.initQuery) {
     let initData = props.initQuery(props.modelValue, props.extraQueryParams, !!init);
@@ -1123,8 +1208,13 @@ const initQuery = ({ props, state, constants, vm }) => ({ init } = {}) => {
   }
   return Promise.resolve(selected);
 };
-const mounted = ({ api, parent, state, props, vm, designConfig }) => () => {
+const computedCurrentSizeMap = ({ state, designConfig }) => () => {
   var _a;
+  const defaultSizeMap = { default: 32, mini: 24, small: 28, medium: 40 };
+  const sizeMap = ((_a = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _a.sizeMap) || defaultSizeMap;
+  return sizeMap[state.selectSize || "default"];
+};
+const mounted = ({ api, parent, state, props, vm, designConfig }) => () => {
   const parentEl = parent.$el;
   const inputEl = parentEl.querySelector('input[data-tag="tiny-input-inner"]');
   const inputClientRect = inputEl && inputEl.getBoundingClientRect() || {};
@@ -1132,12 +1222,9 @@ const mounted = ({ api, parent, state, props, vm, designConfig }) => () => {
     document.activeElement.blur();
   }
   state.completed = true;
-  const defaultSizeMap = { medium: 40, default: 32, small: 28, mini: 24 };
-  const sizeMap = ((_a = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _a.sizeMap) || defaultSizeMap;
   if (props.multiple && Array.isArray(props.modelValue) && props.modelValue.length > 0) {
     state.currentPlaceholder = "";
   }
-  state.initialInputHeight = state.isDisplayOnly ? sizeMap[state.selectSize || "default"] : inputClientRect.height || sizeMap[state.selectSize];
   addResizeListener(parentEl, api.handleResize);
   if (vm.$refs.tags) {
     addResizeListener(vm.$refs.tags, api.resetInputHeight);
@@ -1146,7 +1233,12 @@ const mounted = ({ api, parent, state, props, vm, designConfig }) => () => {
     api.resetInputHeight();
   }
   state.inputWidth = inputClientRect.width;
-  api.initQuery({ init: true }).then(() => api.setSelected());
+  api.initQuery({ init: true }).then(() => {
+    api.setSelected(true);
+    if (props.modelValue && props.initLabel) {
+      state.selectedLabel = props.initLabel;
+    }
+  });
   if (props.dataset) {
     api.watchPropsOption();
   }
@@ -1225,9 +1317,9 @@ const computeMultipleLimit = ({ props, state }) => () => {
   const { optimizeOpts } = state;
   return optmzApis.natural(multiple && optimization ? multipleLimit || optimizeOpts.limit : multipleLimit);
 };
-const updateModelValue = ({ props, emit, state }) => (value, needUpdate) => {
+const updateModelValue = ({ props, emit, state, isMobileFirstMode }) => (value, needUpdate) => {
   state.isClickChoose = true;
-  if (state.device === "mb" && props.multiple && !needUpdate) {
+  if (isMobileFirstMode && state.device === "mb" && props.multiple && !needUpdate) {
     state.modelValue = value;
   } else {
     emit("update:modelValue", value);
@@ -1265,17 +1357,25 @@ const computedTagsStyle = ({ props, parent, state, vm }) => () => {
   }
   return tagsStyle;
 };
-const computedReadonly = ({ props, state }) => () => state.device === "mb" || props.readonly || !props.filterable || props.multiple || browserInfo.name !== BROWSER_NAME.IE && browserInfo.name !== BROWSER_NAME.Edge && !state.visible;
+const computedReadonly = ({ props, state, isMobileFirstMode }) => () => {
+  if (state.isIOS && props.filterable) {
+    return false;
+  } else {
+    return isMobileFirstMode && state.device === "mb" || props.readonly || !(props.filterable || props.searchable) || props.multiple || browserInfo.name !== BROWSER_NAME.IE && browserInfo.name !== BROWSER_NAME.Edge && !state.visible;
+  }
+};
 const computedShowClose = ({ props, state }) => () => props.clearable && !state.selectDisabled && (state.inputHovering || props.multiple && state.visible) && (props.multiple ? Array.isArray(props.modelValue) && props.modelValue.length > 0 : !isNull(props.modelValue) && props.modelValue !== "");
 const computedCollapseTagSize = (state) => () => state.selectSize;
-const computedShowNewOption = ({ props, state }) => () => {
-  const query = state.device === "mb" ? state.queryValue : state.query;
-  return props.filterable && props.allowCreate && query && !state.options.filter((option) => !option.created).some((option) => option.state.currentLabel === state.query);
+const computedShowNewOption = ({ props, state, isMobileFirstMode }) => () => {
+  const query = isMobileFirstMode && state.device === "mb" ? state.queryValue : state.query;
+  return (props.filterable || props.searchable) && props.allowCreate && query && !state.options.filter((option) => !option.created).some((option) => option.state.currentLabel === state.query);
 };
 const computedShowCopy = ({ props, state }) => () => props.multiple && props.copyable && state.inputHovering && state.selected.length;
 const computedOptionsAllDisabled = (state) => () => state.options.filter((option) => option.visible).every((option) => option.disabled);
-const computedDisabledTooltipContent = (state) => () => state.selected.map((item) => item.state ? item.state.currentLabel : item.currentLabel).join("\uFF1B");
-const computedSelectDisabled = ({ props, parent }) => () => props.disabled || (parent.form || {}).disabled || props.displayOnly || (parent.form || {}).displayOnly;
+const computedDisabledTooltipContent = ({ state }) => () => {
+  return state.displayOnlyContent;
+};
+const computedSelectDisabled = ({ state }) => () => state.isDisabled || state.isDisplayOnly;
 const computedIsExpand = ({ props, state }) => () => {
   const hoverExpanded = (state.selectHover || state.visible) && props.hoverExpand && !props.disabled;
   const clickExpanded = props.clickExpand && state.exceedMaxVisibleRow && state.showCollapseTag;
@@ -1307,7 +1407,7 @@ const computedShowTagText = ({ state }) => () => state.isDisplayOnly;
 const isTagClosable = () => (item) => !item.required;
 const computedGetIcon = ({ designConfig, props }) => () => {
   return props.dropdownIcon ? { icon: props.dropdownIcon } : {
-    icon: (designConfig == null ? void 0 : designConfig.icons.dropdownIcon) || "icon-delta-down",
+    icon: (designConfig == null ? void 0 : designConfig.icons.dropdownIcon) || "icon-down-ward",
     isDefault: true
   };
 };
@@ -1332,7 +1432,7 @@ const clearNoMatchValue = ({ props, emit }) => (newModelValue) => {
   }
 };
 const handleDebouncedQueryChange = ({ state, api }) => debounce(state.debounce, (value) => {
-  api.handleQueryChange(value);
+  api.handleQueryChange(value, false, true);
 });
 const onClickCollapseTag = ({ state, props, nextTick, api }) => (event) => {
   event.stopPropagation();
@@ -1358,6 +1458,7 @@ export {
   computeMultipleLimit,
   computeOptimizeOpts,
   computedCollapseTagSize,
+  computedCurrentSizeMap,
   computedDisabledTooltipContent,
   computedGetIcon,
   computedGetTagType,
@@ -1413,6 +1514,7 @@ export {
   onCopying,
   onInputChange,
   onMouseenterNative,
+  onMouseenterSelf,
   onMouseleaveNative,
   onOptionDestroy,
   queryChange,
@@ -1442,6 +1544,7 @@ export {
   watchInputHover,
   watchOptimizeOpts,
   watchOptions,
+  watchOptionsWhenAutoSelect,
   watchPropsOption,
   watchShowClose,
   watchValue,