@opentiny/vue-renderless 3.13.2 → 3.14.0

package/select/index.js

@@ -4,24 +4,28 @@ import {
 } from "../chunk-G2ADBYYC.js";
 import { find } from "../common/array";
 import { getObj, isEqual } from "../common/object";
-import { hasClass } from "../common/deps/dom";
 import { isKorean } from "../common/string";
 import scrollIntoView from "../common/deps/scroll-into-view";
 import PopupManager from "../common/deps/popup-manager";
 import debounce from "../common/deps/debounce";
 import { getDataset } from "../common/dataset";
 import Memorize from "../common/deps/memorize";
-import { isEmptyObject, isNull, isObject } from "../common/type";
+import { isEmptyObject } from "../common/type";
 import { addResizeListener, removeResizeListener } from "../common/deps/resize-event";
 import { extend } from "../common/object";
 import { BROWSER_NAME } from "../common";
 import browserInfo from "../common/browser";
+import { isNull } from "../common/type";
 import { fastdom } from "../common/deps/fastdom";
+import { deepClone } from "../picker-column";
+import { escapeRegexpString } from "../option";
 const handleComposition = ({ api, nextTick, state }) => (event) => {
   const text = event.target.value;
   if (event.type === "compositionend") {
     state.isOnComposition = false;
-    nextTick(() => api.handleQueryChange(text));
+    const isChange = false;
+    const isInput = true;
+    nextTick(() => api.handleQueryChange(text, isChange, isInput));
   } else {
     const lastCharacter = text[text.length - 1] || "";
     state.isOnComposition = !isKorean(lastCharacter);
@@ -78,7 +82,7 @@ const gridOnQueryChange = ({ props, vm, constants, state }) => (value) => {
     });
   }
 };
-const defaultOnQueryChange = ({ props, state, constants, api }) => (value) => {
+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);
@@ -86,13 +90,36 @@ const defaultOnQueryChange = ({ props, state, constants, api }) => (value) => {
     props.filterMethod(value);
     state.selectEmitter.emit(constants.COMPONENT_NAME.OptionGroup, constants.EVENT_NAME.queryChange);
   } else {
-    state.selectEmitter.emit(constants.EVENT_NAME.queryChange, value);
+    api.queryChange(value, isInput);
   }
-  if (props.defaultFirstOption && (props.filterable || props.remote) && state.filteredOptionsCount) {
-    api.checkDefaultFirstOption();
+  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));
+    state.datas = filterDatas;
+  } else {
+    state.selectEmitter.emit(constants.EVENT_NAME.queryChange, value);
   }
 };
-const handleQueryChange = ({ api, constants, nextTick, props, vm, state }) => (value, isChange = false) => {
+const setFilteredSelectCls = (nextTick, state, props) => {
+  nextTick(() => {
+    if (props.multiple && props.showAlloption && props.filterable && 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) {
+        state.filteredSelectCls = "checked-sur";
+      } else if (filterSelectedVal.length === 0) {
+        state.filteredSelectCls = "check";
+      } else {
+        state.filteredSelectCls = "halfselect";
+      }
+    }
+  });
+};
+const handleQueryChange = ({ api, constants, nextTick, props, vm, state }) => (value, isChange = false, isInput = false) => {
   if (state.previousQuery === value && !isChange || state.isOnComposition) {
     return;
   }
@@ -106,10 +133,11 @@ const handleQueryChange = ({ api, constants, nextTick, props, vm, state }) => (v
   }
   if (props.renderType === constants.TYPE.Tree) {
     state.previousQuery = value;
-    if (state.filterOrSearch && typeof props.filterMethod === "function") {
+    if (props.filterable && typeof props.filterMethod === "function") {
       vm.$refs.selectTree && vm.$refs.selectTree.filter(value);
     }
   }
+  state.query = value;
   state.previousQuery = value;
   window.requestAnimationFrame(() => {
     if (state.visible) {
@@ -120,38 +148,34 @@ const handleQueryChange = ({ api, constants, nextTick, props, vm, state }) => (v
   state.hoverIndex = -1;
   if (props.multiple && props.filterable && !props.shape) {
     nextTick(() => {
-      if (vm.$refs.input) {
-        const length = vm.$refs.input.value.length * 15 + 20;
-        state.inputLength = state.collapseTags ? Math.min(50, length) : length;
-        api.managePlaceholder();
-        api.resetInputHeight();
-      }
+      const length = vm.$refs.input.value.length * 15 + 20;
+      state.inputLength = state.collapseTags ? Math.min(50, length) : length;
+      api.managePlaceholder();
+      api.resetInputHeight();
     });
   }
   if (props.renderType === constants.TYPE.Tree) {
     return;
   }
-  api.defaultOnQueryChange(value);
-};
-const debouncedQueryChange = ({ props, api }) => (event) => {
-  const value = props.shape ? event : event.target.value;
-  api.handleDebouncedQueryChange(value);
+  state.triggerSearch = true;
+  api.defaultOnQueryChange(value, isInput);
 };
-const handleDebouncedQueryChange = ({ state, api }) => debounce(state.debounce, (value) => {
-  api.handleQueryChange(value);
-});
 const scrollToOption = ({ vm, constants }) => (option) => {
-  const target = Array.isArray(option) && option[0] ? option[0].el : option.el;
+  const target = Array.isArray(option) && option[0] && option[0].state ? option[0].state.el : option.state ? option.state.el : "";
   if (vm.$refs.popper && target) {
     const menu = vm.$refs.popper.$el.querySelector(constants.CLASS.SelectDropdownWrap);
-    scrollIntoView(menu, target);
+    setTimeout(() => scrollIntoView(menu, target));
   }
   vm.$refs.scrollbar && vm.$refs.scrollbar.handleScroll();
 };
-const handleMenuEnter = ({ api, nextTick, state }) => () => {
-  nextTick(() => api.scrollToOption(state.selected));
+const handleMenuEnter = ({ api, nextTick, state, props }) => () => {
+  if (!props.optimization) {
+    nextTick(() => api.scrollToOption(state.selected));
+  }
 };
-const emitChange = ({ emit, props, state, constants }) => (value) => {
+const emitChange = ({ emit, props, state, constants }) => (value, changed) => {
+  if (state.device === "mb" && props.multiple && !changed)
+    return;
   const seekItem = (val, arr, items, flag) => {
     if (constants.TYPE.Tree === flag) {
       const recurNode = (node) => {
@@ -168,7 +192,7 @@ const emitChange = ({ emit, props, state, constants }) => (value) => {
       }
     }
   };
-  if (!isEqual(props.modelValue, value)) {
+  if (!isEqual(props.modelValue, state.compareValue)) {
     if (props.renderType === constants.TYPE.Grid && props.multiple) {
       value = value || [];
       const gridData = state.gridData || [];
@@ -195,47 +219,50 @@ const directEmitChange = ({ emit, props, state }) => (value, key) => {
     return;
   emit("change", value, key);
 };
-const clearNoMatchValue = ({ props, emit }) => (newModelValue) => {
-  if (!props.clearNoMatchValue) {
-    return;
-  }
-  if (props.multiple && props.modelValue.length !== newModelValue.length || !props.multiple && props.modelValue !== newModelValue) {
-    emit("update:modelValue", newModelValue);
-  }
-};
-const getOption = ({ props, state }) => (value) => {
+const getOption = ({ props, state, api }) => (value) => {
   let option;
-  const optionsList = props.optimization ? props.options : state.cachedOptions;
-  for (let i = optionsList.length - 1; i >= 0; i--) {
-    const cachedOption = optionsList[i];
-    const isEqual2 = isObject(value) ? getObj(cachedOption.value, props.valueKey) === getObj(value, props.valueKey) : cachedOption.value === value;
+  const isObject = Object.prototype.toString.call(value).toLowerCase() === "[object object]";
+  const isNull2 = Object.prototype.toString.call(value).toLowerCase() === "[object null]";
+  const isUndefined = Object.prototype.toString.call(value).toLowerCase() === "[object undefined]";
+  for (let i = state.cachedOptions.length - 1; i >= 0; i--) {
+    const cachedOption = state.cachedOptions[i];
+    const isEqual2 = isObject ? getObj(cachedOption.value, props.valueKey) === getObj(value, props.valueKey) : cachedOption.value === value;
     if (isEqual2) {
       option = cachedOption;
       break;
     }
   }
   if (option) {
-    if (props.optimization) {
-      const cloneOption = extend(true, {}, option);
-      cloneOption.currentLabel = cloneOption[props.textField];
-      return cloneOption;
-    } else {
-      if (!option.currentLabel) {
-        option.currentLabel = option[props.textField];
-      }
-      return option;
-    }
+    return option;
   }
-  let label = "";
-  if (!isObject(value) && !isNull(value) && !props.clearNoMatchValue) {
-    label = value;
+  if (props.optimization) {
+    option = api.getSelectedOption(value);
+    if (option) {
+      return { value: option.value, currentLabel: option.label || option.currentLabel };
+    }
+    option = state.datas.find((v) => getObj(v, props.valueKey) === value);
+    if (option) {
+      return { value: option.value, currentLabel: option.label || option.currentLabel };
+    }
   }
+  const label = !isObject && !isNull2 && !isUndefined && !props.clearNoMatchValue ? value : "";
   let newOption = { value, currentLabel: label };
   if (props.multiple) {
     newOption.hitState = false;
   }
   return newOption;
 };
+const getSelectedOption = ({ props, state }) => (value) => {
+  let option;
+  if (props.multiple) {
+    option = state.selected.find((v) => getObj(v, props.valueKey) === value);
+  } else {
+    if (!isEmptyObject(state.selected) && getObj(state.selected, props.valueKey) === value) {
+      option = state.selected;
+    }
+  }
+  return option;
+};
 const getOptionOfSetSelected = ({ api, props }) => {
   const option = api.getOption(props.modelValue) || {};
   if (!option.state) {
@@ -252,11 +279,11 @@ const getOptionOfSetSelected = ({ api, props }) => {
   }
   return option;
 };
-const getResultOfSetSelected = ({ props, isGrid, isTree, api }) => {
+const getResultOfSetSelected = ({ state, isGrid, isTree, api, props }) => {
   let result = [];
   const newModelValue = [];
-  if (Array.isArray(props.modelValue)) {
-    props.modelValue.forEach((value) => {
+  if (Array.isArray(state.modelValue)) {
+    state.modelValue.forEach((value) => {
       if (isGrid || isTree) {
         const option = api.getPluginOption(value, isTree);
         result = result.concat(option);
@@ -265,7 +292,7 @@ const getResultOfSetSelected = ({ props, isGrid, isTree, api }) => {
         }
       } else {
         const option = api.getOption(value);
-        if (!props.clearNoMatchValue || props.clearNoMatchValue && option.currentLabel) {
+        if (!props.clearNoMatchValue || props.clearNoMatchValue && option.label) {
           result.push(option);
           newModelValue.push(value);
         }
@@ -284,14 +311,14 @@ const setGridOrTreeSelected = ({ props, state, vm, isTree, api }) => {
     vm.$refs.selectTree && vm.$refs.selectTree.setCurrentKey && vm.$refs.selectTree.setCurrentKey(null);
     return;
   }
-  const isRemote = state.filterOrSearch && props.remote && (typeof props.remoteMethod === "function" || typeof props.initQuery === "function");
+  const isRemote = props.filterable && props.remote && (typeof props.remoteMethod === "function" || typeof props.initQuery === "function");
   const nestdata = isRemote ? state.remoteData : isTree ? api.getTreeData(state.treeData) : state.gridData;
   const data = find(nestdata, (item) => props.modelValue === item[props.valueField]);
   if (isEmptyObject(data)) {
     api.clearNoMatchValue("");
     return;
   }
-  const obj = __spreadValues({}, data);
+  const obj = Object.assign({}, data);
   const label = data[props.textField];
   obj.currentLabel = label;
   state.selectedLabel = label;
@@ -306,25 +333,22 @@ const setSelected = ({ api, constants, nextTick, props, vm, state }) => () => {
       setGridOrTreeSelected({ props, state, vm, isTree, api });
     } else {
       const option = getOptionOfSetSelected({ api, props });
-      nextTick(() => {
-        state.selected = option;
-        state.selectedLabel = option.state.currentLabel || option.currentLabel;
-        if (state.filterOrSearch && !props.shape && !props.allowCreate) {
-          state.query = state.selectedLabel;
-        }
-      });
+      state.selected = option;
+      state.selectedLabel = option.state.currentLabel || option.currentLabel;
+      props.filterable && !props.shape && (state.query = state.selectedLabel);
     }
-    return;
+  } else {
+    const result = getResultOfSetSelected({ state, props, isGrid, isTree, api });
+    state.selectCls = result.length ? result.length === state.options.length ? "checked-sur" : "halfselect" : "check";
+    state.selected = result;
+    vm.$refs.selectTree && vm.$refs.selectTree.setCheckedNodes && vm.$refs.selectTree.setCheckedNodes(state.selected);
+    state.tips = state.selected.map((item) => item.state ? item.state.currentLabel : item.currentLabel).join(",");
+    setFilteredSelectCls(nextTick, state, props);
+    nextTick(api.resetInputHeight);
   }
-  const result = getResultOfSetSelected({ props, isGrid, isTree, api });
-  state.selectCls = result.length ? result.length === state.options.length ? "checked-sur" : "halfselect" : "check";
-  state.selected = result;
-  vm.$refs.selectTree && vm.$refs.selectTree.setCheckedNodes && vm.$refs.selectTree.setCheckedNodes(state.selected);
-  state.tips = state.selected.map((item) => item.state ? item.state.currentLabel : item.currentLabel).join(",");
-  nextTick(api.resetInputHeight);
 };
 const getPluginOption = ({ api, props, state }) => (value, isTree) => {
-  const isRemote = state.filterOrSearch && props.remote && (typeof props.remoteMethod === "function" || typeof props.initQuery === "function");
+  const isRemote = props.filterable && props.remote && (typeof props.remoteMethod === "function" || typeof props.initQuery === "function");
   const { textField, valueField } = props;
   const sourceData = isRemote ? state.remoteData : isTree ? api.getTreeData(state.treeData) : state.gridData;
   const selNode = find(sourceData, (item) => item[valueField] === value);
@@ -335,7 +359,7 @@ const getPluginOption = ({ api, props, state }) => (value, isTree) => {
   }
   return items;
 };
-const toggleCheckAll = ({ api, state }) => () => {
+const toggleCheckAll = ({ api, state, props }) => (filtered) => {
   const getEnabledValues = (options) => {
     let values = [];
     for (let i = 0; i < options.length; i++) {
@@ -355,25 +379,29 @@ const toggleCheckAll = ({ api, state }) => () => {
     return values;
   };
   let value;
-  if (state.selectCls === "check") {
-    value = getEnabledValues(state.options);
-  } else if (state.selectCls === "halfselect") {
-    const unchecked = state.options.filter((item) => !item.disabled && item.state.selectCls === "check");
-    unchecked.length ? value = getEnabledValues(state.options) : value = [];
-  } else if (state.selectCls === "checked-sur") {
-    value = getEnabledValues(state.options);
+  const enabledValues = getEnabledValues(state.options);
+  if (filtered) {
+    if (state.filteredSelectCls === "check" || state.filteredSelectCls === "halfselect") {
+      value = [.../* @__PURE__ */ new Set([...state.modelValue, ...enabledValues])];
+    } else {
+      value = state.modelValue.filter((val) => !enabledValues.includes(val));
+    }
+  } else {
+    if (state.selectCls === "check") {
+      value = enabledValues;
+    } else if (state.selectCls === "halfselect") {
+      const unchecked = state.options.filter((item) => !item.state.disabled && item.state.selectCls === "check");
+      unchecked.length ? value = enabledValues : value = [];
+    } else if (state.selectCls === "checked-sur") {
+      value = getEnabledValues(state.options);
+    }
   }
   api.setSoftFocus();
   state.isSilentBlur = true;
   api.updateModelValue(value);
   api.directEmitChange(value);
 };
-const resetFilter = ({ state, api }) => () => {
-  state.query = "";
-  state.previousQuery = void 0;
-  api.handleQueryChange(state.query);
-};
-const handleFocus = ({ emit, props, state, api }) => (event) => {
+const handleFocus = ({ emit, props, state }) => (event) => {
   if (!state.softFocus) {
     if (props.automaticDropdown || props.filterable) {
       state.visible = true;
@@ -381,26 +409,22 @@ const handleFocus = ({ emit, props, state, api }) => (event) => {
     }
     emit("focus", event);
   } else {
+    if (state.searchSingleCopy && state.selectedLabel) {
+      emit("focus", event);
+    }
     state.softFocus = false;
   }
-  if (props.remote && state.filterOrSearch && state.firstAutoSearch) {
-    state.firstAutoSearch = false;
-    api.resetFilter();
-  }
 };
 const focus = ({ vm, state }) => () => {
-  var _a;
   if (!state.softFocus) {
-    (_a = vm.$refs.reference) == null ? void 0 : _a.focus();
+    vm.$refs.reference.focus();
   }
 };
 const blur = ({ vm, state }) => () => {
-  var _a;
   state.visible = false;
-  (_a = vm.$refs.reference) == null ? void 0 : _a.blur();
+  vm.$refs.reference.blur();
 };
 const handleBlur = ({ constants, dispatch, emit, state }) => (event) => {
-  var _a;
   clearTimeout(state.timer);
   state.timer = setTimeout(() => {
     if (state.isSilentBlur) {
@@ -409,7 +433,7 @@ const handleBlur = ({ constants, dispatch, emit, state }) => (event) => {
       emit("blur", event);
     }
   }, 200);
-  dispatch(constants.COMPONENT_NAME.FormItem, constants.EVENT_NAME.formBlur, (_a = event == null ? void 0 : event.target) == null ? void 0 : _a.value);
+  dispatch(constants.COMPONENT_NAME.FormItem, constants.EVENT_NAME.formBlur, event.target.value);
   state.softFocus = false;
 };
 const handleClearClick = (api) => (event) => {
@@ -429,6 +453,9 @@ const toggleLastOptionHitState = ({ state }) => (hit) => {
   if (!option) {
     return;
   }
+  if (option.required) {
+    return true;
+  }
   const hitTarget = option.state || option;
   if (hit === true || hit === false) {
     hitTarget.hitState = hit;
@@ -439,8 +466,9 @@ const toggleLastOptionHitState = ({ state }) => (hit) => {
 };
 const deletePrevTag = ({ api, constants, props, state, vm }) => (event) => {
   if (event.target.value.length <= 0 && !api.toggleLastOptionHitState()) {
-    const value = props.modelValue.slice();
+    const value = state.modelValue.slice();
     value.pop();
+    state.compareValue = deepClone(value);
     api.updateModelValue(value);
     api.emitChange(value);
     if (props.renderType === constants.TYPE.Grid) {
@@ -471,9 +499,7 @@ const resetInputHeight = ({ constants, nextTick, props, vm, state, api, designCo
     if (!vm.$refs.reference) {
       return;
     }
-    const inputChildNodes = vm.$refs.reference.$el.childNodes;
-    const inputContainer = [].filter.call(inputChildNodes, (item) => hasClass(item, "tiny-input-display-only"))[0];
-    const input = inputContainer && inputContainer.querySelector("input");
+    let input = vm.$refs.reference.type === "text" && vm.$refs.reference.$el.querySelector("input");
     const tags = vm.$refs.tags;
     if (!input) {
       return;
@@ -481,14 +507,15 @@ const resetInputHeight = ({ constants, nextTick, props, vm, state, api, designCo
     if (!state.isDisplayOnly && props.hoverExpand && !props.disabled) {
       api.calcCollapseTags();
     }
-    const sizeInMap = ((_a = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _a.initialInputHeight) || state.initialInputHeight;
+    const sizeInMap = state.initialInputHeight || (state.isSaaSTheme ? 28 : 30);
     const noSelected = state.selected.length === 0;
+    const spacingHeight = designConfig ? (_a = designConfig.state) == null ? void 0 : _a.spacingHeight : 2;
     if (!state.isDisplayOnly) {
       if (!noSelected && tags) {
         fastdom.measure(() => {
           const tagsClientHeight = tags.clientHeight;
           fastdom.mutate(() => {
-            input.style.height = Math.max(tagsClientHeight + (tagsClientHeight > sizeInMap ? constants.BORDER_HEIGHT : 0), sizeInMap) + "px";
+            input.style.height = Math.max(tagsClientHeight + spacingHeight, sizeInMap) + "px";
           });
         });
       } else {
@@ -498,7 +525,7 @@ const resetInputHeight = ({ constants, nextTick, props, vm, state, api, designCo
       input.style.height = "auto";
     }
     if (state.visible && state.emptyText !== false) {
-      state.selectEmitter.emit(constants.EVENT_NAME.updatePopper);
+      state.selectEmitter.emit(constants.EVENT_NAME.updatePopper, true);
     }
   });
 };
@@ -518,34 +545,39 @@ const resetHoverIndex = ({ props, state }) => () => {
     }
   }
 };
+const resetDatas = ({ props, state }) => () => {
+  if (props.optimization && !props.remote && !props.filterMethod) {
+    state.datas = state.initDatas;
+  }
+};
 const handleOptionSelect = ({ api, nextTick, props, vm, state }) => (option, byClick) => {
-  var _a, _b;
   state.memorize && state.memorize.updateByKey(option[state.memorize._dataKey] || option.value);
   if (props.multiple) {
-    const value = (props.modelValue || []).slice();
+    const value = (state.modelValue || []).slice();
     const optionIndex = api.getValueIndex(value, option.value);
     if (optionIndex > -1) {
       value.splice(optionIndex, 1);
     } else if (state.multipleLimit <= 0 || value.length < state.multipleLimit) {
       value.push(option.value);
     }
+    state.compareValue = deepClone(value);
     api.updateModelValue(value);
     api.emitChange(value);
     if (option.created) {
+      const isChange = false;
+      const isInput = true;
       state.query = "";
-      api.handleQueryChange("");
+      api.handleQueryChange("", isChange, isInput);
       state.inputLength = 20;
     }
     if (props.filterable) {
-      (_a = vm.$refs.input) == null ? void 0 : _a.focus();
-    }
-    if (props.searchable) {
-      (_b = vm.$refs.reference) == null ? void 0 : _b.focus();
+      vm.$refs.input.focus();
     }
     if (props.autoClose) {
       state.visible = false;
     }
   } else {
+    state.compareValue = deepClone(option.value);
     api.updateModelValue(option.value);
     api.emitChange(option.value);
     if (option.created) {
@@ -570,11 +602,13 @@ const initValue = ({ state }) => (vm) => {
 const setSoftFocus = ({ vm, state }) => () => {
   state.softFocus = true;
   const input = vm.$refs.input || vm.$refs.reference;
-  input == null ? void 0 : input.focus();
+  if (input) {
+    input.focus();
+  }
 };
 const getValueIndex = (props) => (arr = [], value = null) => {
-  const isObject2 = Object.prototype.toString.call(value).toLowerCase() === "[object object]";
-  if (!isObject2) {
+  const isObject = Object.prototype.toString.call(value).toLowerCase() === "[object object]";
+  if (!isObject) {
     return arr.indexOf(value);
   } else {
     const valueKey = props.valueKey;
@@ -589,18 +623,25 @@ const getValueIndex = (props) => (arr = [], value = null) => {
     return index;
   }
 };
-const toggleMenu = ({ vm, state, props }) => (e) => {
+const toggleMenu = ({ vm, state, props, api }) => (e) => {
+  if (props.keepFocus && state.visible && props.filterable) {
+    return;
+  }
   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) {
+    event.stopPropagation();
+  }
   if (!state.selectDisabled) {
     toggleVisible && !state.softFocus && (state.visible = !state.visible);
     state.softFocus = false;
     if (state.visible) {
       if (!(props.filterable && props.shape)) {
         const dom = vm.$refs.input || vm.$refs.reference;
-        dom == null ? void 0 : dom.focus();
+        (dom == null ? void 0 : dom.focus) && dom.focus();
+        api.setOptionHighlight();
       }
     }
   }
@@ -609,45 +650,49 @@ const selectOption = ({ api, state, props }) => (e) => {
   if (!state.visible || props.hideDrop) {
     api.toggleMenu(e);
   } else {
-    if (state.options[state.hoverIndex]) {
-      api.handleOptionSelect(state.options[state.hoverIndex]);
+    let option = "";
+    if (state.query || props.remote) {
+      option = state.options.find((item) => item.state.index === state.hoverValue);
+    } else {
+      option = state.options[state.hoverIndex];
     }
+    option && api.handleOptionSelect(option);
   }
 };
 const deleteSelected = ({ api, constants, emit, props, vm, state }) => (event) => {
-  event.stopPropagation();
+  event && event.stopPropagation();
   let selectedValue = [];
   if (props.multiple) {
     const requireOptions = state.options.filter((opt) => opt.required && opt.value);
-    selectedValue = props.modelValue.slice().filter((v) => requireOptions.find((opt) => opt.value === v));
+    selectedValue = state.modelValue.slice().filter((v) => requireOptions.find((opt) => opt.value === v));
   }
   const value = props.multiple ? selectedValue : "";
-  const refs = vm.$refs;
   if (props.renderType === constants.TYPE.Tree) {
     state.selected = {};
     state.selectedLabel = "";
-    refs.selectTree.setCurrentKey(null);
+    vm.$refs.selectTree.state.currentRadio.value = null;
+    vm.$refs.selectTree.setCurrentKey(null);
   } else if (props.renderType === constants.TYPE.Grid) {
     state.selected = {};
     state.selectedLabel = "";
-    refs.selectGrid.clearRadioRow();
+    vm.$refs.selectGrid.clearRadioRow();
   }
   state.showTip = false;
-  api.updateModelValue(value);
-  api.emitChange(value);
+  state.compareValue = deepClone(value);
+  api.updateModelValue(value, true);
+  api.emitChange(value, true);
   state.visible = false;
   emit("clear");
 };
 const deleteTag = ({ api, constants, emit, props, state, nextTick, vm }) => (event, tag) => {
   if (tag.required)
     return;
-  const refs = vm.$refs;
   const isTree = props.renderType === constants.TYPE.Tree;
   const index = state.selected.indexOf(tag);
   const treeValue = [];
   const treeIds = [tag[props.valueField]];
   if (isTree && !props.treeOp.checkStrictly) {
-    let node = refs.selectTree.getNode(tag[props.valueField]);
+    let node = vm.$refs.selectTree.getNode(tag[props.valueField]);
     if (!node.isLeaf) {
       treeIds.push(...api.getChildValue(node.childNodes, props.valueField));
     }
@@ -658,28 +703,31 @@ const deleteTag = ({ api, constants, emit, props, state, nextTick, vm }) => (eve
     state.selected.slice().map((node2) => !treeIds.includes(node2[props.valueField]) && treeValue.push(node2[props.valueField]));
   }
   if (index > -1 && !state.selectDisabled) {
-    const value = props.modelValue.slice();
+    const value = state.modelValue.slice();
     value.splice(index, 1);
     if (props.renderType === constants.TYPE.Tree) {
       props.treeOp.checkStrictly && treeValue.push(...value);
-      refs.selectTree.setCheckedKeys(treeValue);
+      vm.$refs.selectTree.setCheckedKeys(treeValue);
     } else if (props.renderType === constants.TYPE.Grid) {
       const rows = state.selected.slice().filter((item) => value.includes(item[props.valueField]));
-      refs.selectGrid.clearSelection();
-      refs.selectGrid.setSelection(rows, true);
+      vm.$refs.selectGrid.clearSelection();
+      vm.$refs.selectGrid.setSelection(rows, true);
     }
+    state.compareValue = deepClone(value);
     api.updateModelValue(isTree ? treeValue : value);
     api.emitChange(value);
     emit(constants.EVENT_NAME.removeTag, tag[props.valueField]);
     nextTick(() => state.key++);
   }
-  event.stopPropagation();
+  event && event.stopPropagation();
 };
 const onInputChange = ({ api, props, state, constants, nextTick }) => () => {
   if (!props.delay) {
     if (props.filterable && state.query !== state.selectedLabel) {
+      const isChange = false;
+      const isInput = true;
       state.query = state.selectedLabel;
-      api.handleQueryChange(state.query);
+      api.handleQueryChange(state.query, isChange, isInput);
       nextTick(() => {
         state.selectEmitter.emit(constants.EVENT_NAME.updatePopper);
       });
@@ -699,8 +747,9 @@ const onOptionDestroy = (state) => (index) => {
   }
 };
 const resetInputWidth = ({ vm, state }) => () => {
-  var _a, _b, _c;
-  state.inputWidth = ((_c = (_b = (_a = vm.$refs.reference) == null ? void 0 : _a.$el) == null ? void 0 : _b.getBoundingClientRect()) == null ? void 0 : _c.width) || 0;
+  if (vm.$refs.reference && vm.$refs.reference.$el) {
+    state.inputWidth = vm.$refs.reference.$el.getBoundingClientRect().width;
+  }
 };
 const handleResize = ({ api, props, state }) => () => {
   api.resetInputWidth();
@@ -708,29 +757,42 @@ const handleResize = ({ api, props, state }) => () => {
     api.resetInputHeight();
   }
 };
+const setOptionHighlight = (state) => () => {
+  for (let i = 0; i < state.options.length; ++i) {
+    const option = state.options[i];
+    if (!option.disabled && !option.groupDisabled && !option.state.created && option.state.visible && option.state.itemSelected) {
+      state.hoverIndex = i;
+      break;
+    }
+  }
+};
 const checkDefaultFirstOption = (state) => () => {
   state.hoverIndex = -1;
   let hasCreated = false;
-  for (let i = state.options.length - 1; i >= 0; i--) {
-    if (state.options[i].created) {
+  const visibleOptions = state.options.filter((item) => item.visible && item.state.visible);
+  for (let i = visibleOptions.length - 1; i >= 0; i--) {
+    if (visibleOptions[i].created) {
       hasCreated = true;
       state.hoverIndex = i;
+      state.hoverValue = state.optionIndexArr[i];
       break;
     }
   }
   if (hasCreated) {
     return;
   }
-  for (let i = 0; i !== state.options.length; ++i) {
-    const option = state.options[i];
+  for (let i = 0; i < visibleOptions.length; i++) {
+    const option = visibleOptions[i];
     if (state.query) {
-      if (!option.disabled && !option.groupDisabled && option.state.visible) {
+      if (!option.disabled && !option.groupDisabled && option.state.visible && option.visible) {
         state.hoverIndex = i;
+        state.hoverValue = state.optionIndexArr[i];
         break;
       }
     } else {
       if (option.itemSelected) {
         state.hoverIndex = i;
+        state.hoverValue = state.optionIndexArr[i];
         break;
       }
     }
@@ -744,8 +806,12 @@ const getValueKey = (props) => (item) => {
   }
   return getObj(item.value, props.valueKey);
 };
-const navigateOptions = ({ api, nextTick, state }) => (direction) => {
-  const len = state.options.length;
+const navigateOptions = ({ api, state, props, nextTick }) => (direction) => {
+  const { optimization } = props;
+  if (optimization) {
+    return;
+  }
+  const len = state.options.filter((item) => item.visible && item.state.visible).length;
   if (!state.visible) {
     state.visible = true;
     return;
@@ -753,6 +819,13 @@ const navigateOptions = ({ api, nextTick, state }) => (direction) => {
   if (len === 0 || state.filteredOptionsCount === 0) {
     return;
   }
+  state.disabledOptionHover = true;
+  setTimeout(() => {
+    state.disabledOptionHover = false;
+  }, 100);
+  if (state.hoverIndex < -1 || state.hoverIndex >= len) {
+    state.hoverIndex = 0;
+  }
   if (!state.optionsAllDisabled) {
     if (direction === "next") {
       state.hoverIndex++;
@@ -765,39 +838,68 @@ const navigateOptions = ({ api, nextTick, state }) => (direction) => {
         state.hoverIndex = len - 1;
       }
     }
-    const option = state.options[state.hoverIndex];
-    if (option.disabled === true || option.groupDisabled === true || !option.visible) {
+    let option = {};
+    state.hoverValue = state.optionIndexArr[state.hoverIndex];
+    if (state.query || props.remote) {
+      option = state.options.find((item) => item.state.index === state.hoverValue);
+    } else {
+      option = state.options[state.hoverIndex];
+    }
+    if (option.disabled === true || option.groupDisabled === true || !option.state.visible || option.state.limitReached) {
       api.navigateOptions(direction);
     }
-    nextTick(() => api.scrollToOption(state.hoverOption));
+    nextTick(() => api.scrollToOption(state.hoverIndex === -9 ? {} : option || {}));
   }
 };
-const emptyText = ({ I18N, props, state, t }) => () => {
+const emptyFlag = ({ props, state }) => () => {
+  if (props.optimization) {
+    if (props.allowCreate) {
+      return state.query === "" && state.datas.length === 0;
+    } else {
+      return state.datas.length === 0;
+    }
+  } else {
+    return state.options.length === 0;
+  }
+};
+const recycleScrollerHeight = ({ state, props, recycle }) => () => {
+  const { ITEM_HEIGHT, SAFE_MARGIN, SAAS_HEIGHT, AURORA_HEIGHT } = recycle;
+  let length = state.datas.length;
+  if (state.showNewOption) {
+    length += 1;
+  }
+  if (length === 0 || props.loading) {
+    return 0;
+  } else if (length < 6) {
+    return length * ITEM_HEIGHT + (state.isSaaSTheme ? SAFE_MARGIN * 2 : 0);
+  } else {
+    return state.isSaaSTheme ? SAAS_HEIGHT : AURORA_HEIGHT;
+  }
+};
+const emptyText = ({ I18N, props, state, t, isMobileFirstMode }) => () => {
   if (props.loading) {
     return props.loadingText || t(I18N.loading);
-  } else {
-    if (props.remote && state.query === "" && props.renderType) {
-      if (props.multiple) {
-        return state.selected.length > 0 || state.remoteData.length > 0;
-      }
-      return state.selected[props.valueField] || state.remoteData.length > 0;
-    }
-    if (state.filterOrSearch && state.query && state.options.length >= 0 && state.filteredOptionsCount === 0) {
-      return props.noMatchText || t(I18N.noMatch);
-    }
-    if (!state.options.some((option) => option.visible)) {
-      return props.noDataText || t(I18N.noData);
-    }
-    if (props.remote && state.query === "" && state.options.length === 0) {
-      if (props.shape === "filter") {
-        return "";
-      } else {
-        return false;
-      }
-    }
+  }
+  if (props.remote && state.query === "" && props.renderType) {
+    return remoteEmptyText(props, state);
+  }
+  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))) {
+    return props.noMatchText || t(I18N.noMatch);
+  }
+  if (state.emptyFlag) {
+    return props.noDataText || t(I18N.noData);
   }
   return null;
 };
+const remoteEmptyText = function(props, state) {
+  if (props.multiple) {
+    return state.selected.length > 0 || state.remoteData.length >= 0;
+  }
+  return state.selected[props.valueField] || state.remoteData.length >= 0;
+};
 const watchValue = ({ api, constants, dispatch, props, vm, state }) => (value, oldValue) => {
   if (props.multiple) {
     api.resetInputHeight();
@@ -806,9 +908,11 @@ const watchValue = ({ api, constants, dispatch, props, vm, state }) => (value, o
     } else {
       state.currentPlaceholder = state.cachedPlaceHolder;
     }
-    if (state.filterOrSearch && !props.reserveKeyword) {
+    if (props.filterable && !props.reserveKeyword) {
+      const isChange = false;
+      const isInput = true;
       props.renderType !== constants.TYPE.Grid && (state.query = "");
-      api.handleQueryChange(state.query);
+      api.handleQueryChange(state.query, isChange, isInput);
     }
   }
   api.setSelected();
@@ -820,13 +924,13 @@ const watchValue = ({ api, constants, dispatch, props, vm, state }) => (value, o
   if (state.completed && !isEqual(value, oldValue)) {
     dispatch(constants.COMPONENT_NAME.FormItem, constants.EVENT_NAME.formChange, value);
   }
-  state.optimizeStore.flag && optmzApis.setValueIndex({ props, state });
+  props.optimization && optmzApis.setValueIndex({ props, state });
 };
 const calcOverFlow = ({ vm, props, state }) => (height) => {
   if (props.multiple && props.showOverflowTooltip) {
     state.overflow = false;
     const tagDom = vm.$refs.tags;
-    const tags = tagDom.querySelectorAll(".tiny-tag");
+    const tags = tagDom.querySelectorAll('[data-tag="tiny-tag"]');
     if (tags.length) {
       tagDom.scrollTo && tagDom.scrollTo({ top: 0 });
       let { x, width } = tags[0].getBoundingClientRect();
@@ -856,7 +960,6 @@ const calcOverFlow = ({ vm, props, state }) => (height) => {
   }
 };
 const postOperOfToVisible = ({ props, state, constants }) => {
-  var _a;
   if (props.multiple) {
     return;
   }
@@ -867,30 +970,32 @@ const postOperOfToVisible = ({ props, state, constants }) => {
       if (props.filterable && props.allowCreate && state.createdSelected && state.createdLabel) {
         state.selectedLabel = state.createdLabel;
       } else {
-        state.selectedLabel = ((_a = state.selected.state) == null ? void 0 : _a.currentLabel) || state.selected.currentLabel;
+        state.selectedLabel = state.selected.state.currentLabel || state.selected.currentLabel;
       }
       if (props.filterable) {
         state.query = state.selectedLabel;
       }
     }
-    if (state.filterOrSearch) {
+    if (props.filterable) {
       state.currentPlaceholder = state.cachedPlaceHolder;
     }
   }
 };
 const toVisible = ({ constants, state, props, vm, api, nextTick }) => () => {
-  var _a;
   state.selectEmitter.emit(constants.EVENT_NAME.destroyPopper);
   props.remote && props.dropOnlySearch && (state.showWarper = false);
-  (_a = vm.$refs.input) == null ? void 0 : _a.blur();
+  if (vm.$refs.input) {
+    vm.$refs.input.blur();
+  }
   state.query = "";
   state.selectedLabel = "";
   state.inputLength = 20;
   state.previousQuery !== state.query && api.initQuery().then(() => api.setSelected());
   if (props.renderType !== constants.TYPE.Tree) {
-    state.previousQuery = props.remoteConfig.clearData && state.previousQuery !== state.query ? void 0 : null;
+    state.previousQuery = null;
   }
   api.resetHoverIndex();
+  api.resetDatas();
   nextTick(() => {
     if (vm.$refs.input && vm.$refs.input.value === "" && state.selected.length === 0) {
       state.currentPlaceholder = state.cachedPlaceHolder;
@@ -901,23 +1006,22 @@ const toVisible = ({ constants, state, props, vm, api, nextTick }) => () => {
   });
   postOperOfToVisible({ props, state, constants });
 };
-const toHide = ({ constants, state, props, vm, api, nextTick }) => () => {
-  var _a, _b;
-  state.selectEmitter.emit(constants.COMPONENT_NAME.SelectDropdown);
-  nextTick(() => {
-    state.selectEmitter.emit(constants.EVENT_NAME.updatePopper);
-  });
-  if (state.filterOrSearch) {
-    state.query = props.remote || props.shape ? "" : props.renderType !== constants.TYPE.Tree ? state.selectedLabel : "";
-    state.previousQuery !== state.query && api.handleQueryChange(state.query);
-    if (props.multiple) {
-      props.filterable ? (_a = vm.$refs.input) == null ? void 0 : _a.focus() : (_b = vm.$refs.reference) == null ? void 0 : _b.focus();
+const toHide = ({ constants, state, props, vm, api }) => () => {
+  const { filterable, remote, remoteConfig, shape, renderType, multiple, valueField } = props;
+  state.selectEmitter.emit(constants.COMPONENT_NAME.SelectDropdown, constants.EVENT_NAME.updatePopper);
+  if (filterable) {
+    state.query = remote || shape ? "" : renderType !== constants.TYPE.Tree ? 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();
     } else {
-      if (!props.remote) {
-        state.selectEmitter.emit(constants.EVENT_NAME.queryChange);
-        state.selectEmitter.emit(constants.COMPONENT_NAME.OptionGroup);
+      if (!remote) {
+        state.selectEmitter.emit(constants.EVENT_NAME.queryChange, "");
+        state.selectEmitter.emit(constants.COMPONENT_NAME.OptionGroup, constants.EVENT_NAME.queryChange);
       }
-      if (state.selectedLabel && !props.shape) {
+      if (state.selectedLabel && !shape) {
         state.currentPlaceholder = state.selectedLabel;
         state.selectedLabel = "";
       }
@@ -925,32 +1029,34 @@ const toHide = ({ constants, state, props, vm, api, nextTick }) => () => {
   }
   if (vm.$refs.selectGrid) {
     let { fullData } = vm.$refs.selectGrid.getTableData();
-    if (props.multiple) {
-      const selectedIds = state.selected.map((sel) => sel[props.valueField]);
+    if (multiple) {
+      const selectedIds = state.selected.map((sel) => sel[valueField]);
       vm.$refs.selectGrid.clearSelection();
       vm.$refs.selectGrid.setSelection(
-        fullData.filter((row) => ~selectedIds.indexOf(row[props.valueField])),
+        fullData.filter((row) => ~selectedIds.indexOf(row[valueField])),
         true
       );
     } else {
       vm.$refs.selectGrid.clearRadioRow();
-      vm.$refs.selectGrid.setRadioRow(find(fullData, (item) => props.modelValue === item[props.valueField]));
+      vm.$refs.selectGrid.setRadioRow(find(fullData, (item) => props.modelValue === item[valueField]));
     }
-    if (state.filterOrSearch && typeof props.filterMethod === "function") {
+    if (filterable && typeof props.filterMethod === "function") {
       vm.$refs.selectGrid.handleTableData(true);
-    } else if (state.filterOrSearch && props.remote && (typeof props.remoteMethod === "function" || typeof props.initQuery === "function")) {
+    } else if (filterable && remote && (typeof props.remoteMethod === "function" || typeof props.initQuery === "function")) {
       vm.$refs.selectGrid.handleTableData();
     }
   }
 };
 const watchVisible = ({ api, constants, emit, state, vm, props }) => (value) => {
-  var _a;
-  if ((state.filterOrSearch || props.remote) && !value) {
-    (_a = vm.$refs.reference) == null ? void 0 : _a.blur();
+  if ((props.filterable || props.remote) && !value) {
+    vm.$refs.reference.blur();
   }
   if (api.onCopying()) {
     return;
   }
+  if (value && props.multiple && state.device === "mb") {
+    state.selectedCopy = state.selected.slice();
+  }
   setTimeout(() => {
     if (!value && !state.selectedLabel) {
       state.cachedOptions.forEach((item) => {
@@ -960,15 +1066,19 @@ const watchVisible = ({ api, constants, emit, state, vm, props }) => (value) =>
   }, 200);
   value ? api.toHide() : api.toVisible();
   emit(constants.EVENT_NAME.visibleChange, value);
+  setTimeout(() => {
+    state.selectEmitter.emit(constants.EVENT_NAME.updatePopper);
+    if (value && vm.$refs.scrollbar) {
+      if (props.optimization) {
+        optmzApis.setScrollTop({ refs: vm.$refs, state });
+      } else {
+        vm.$refs.scrollbar.handleScroll();
+      }
+    }
+  }, props.updateDelay);
   if (!value && props.shape === "filter") {
     state.softFocus = false;
   }
-  if (value && state.optimizeStore.flag) {
-    optmzApis.createMacro(() => {
-      optmzApis.setScrollTop({ refs: vm.$refs, state });
-      api.getScrollListener();
-    });
-  }
 };
 const watchOptions = ({ api, constants, nextTick, parent, props, state }) => () => {
   if (typeof window === "undefined") {
@@ -985,8 +1095,25 @@ const watchOptions = ({ api, constants, nextTick, parent, props, state }) => ()
       api.setSelected();
     }
   });
-  if (props.defaultFirstOption && (props.filterable || props.searchable || props.remote) && state.filteredOptionsCount) {
-    api.checkDefaultFirstOption();
+  api.getOptionIndexArr();
+};
+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.optimization) {
+        optmzApis.checkDefaultFirstOption({ state });
+      } else {
+        api.checkDefaultFirstOption();
+      }
+    }
+  });
+};
+const queryVisibleOptions = ({ props, vm, isMobileFirstMode }) => () => {
+  if (props.optimization) {
+    return optmzApis.queryVisibleOptions(vm, isMobileFirstMode);
+  } else {
+    return Array.from(vm.$refs.scrollbar.$el.querySelectorAll('[data-index]:not([style*="display: none"])'));
   }
 };
 const handleCopyClick = ({ parent, props, state }) => () => {
@@ -1000,7 +1127,7 @@ const handleCopyClick = ({ parent, props, state }) => () => {
   document.execCommand("copy");
   parent.$el.removeChild(input);
 };
-const selectChange = ({ emit, props, state, api }) => ({ $table, selection, checked, row }) => {
+const selectChange = ({ props, state, api }) => ({ $table, selection, checked, row }) => {
   const { textField, valueField } = props;
   const remoteItem = (row2) => {
     const removeItem = find(state.selected, (item) => item[valueField] === row2[valueField]);
@@ -1010,12 +1137,12 @@ const selectChange = ({ emit, props, state, api }) => ({ $table, selection, chec
     checked ? state.selected.push(__spreadProps(__spreadValues({}, row), { value: row[valueField], currentLabel: row[textField] })) : remoteItem(row);
   } else {
     checked ? state.selected = state.selected.concat(
-      selection.filter((row2) => !~props.modelValue.indexOf(row2[valueField]))
+      selection.filter((row2) => !~state.modelValue.indexOf(row2[valueField]))
     ) : $table.tableFullData.forEach((row2) => remoteItem(row2));
   }
   const keys = state.selected.map((item) => item[valueField]);
   api.updateModelValue(keys);
-  emit("change", keys, state.selected);
+  api.directEmitChange(keys, state.selected);
 };
 const getcheckedData = ({ props, state }) => () => {
   const checkedKey = [];
@@ -1028,14 +1155,16 @@ const getcheckedData = ({ props, state }) => () => {
     return checkedKey;
   }
 };
-const radioChange = ({ emit, props, state, api }) => ({ row }) => {
+const radioChange = ({ props, state, api, vm }) => ({ row }) => {
   row.value = row[props.valueField];
   row.currentLabel = row[props.textField];
+  !state.hasClearSelection && vm.$refs.selectGrid.clearSelection();
+  state.hasClearSelection = true;
   state.selected = row;
   state.visible = false;
   state.currentKey = row[props.valueField];
   api.updateModelValue(row.value);
-  emit("change", row);
+  api.directEmitChange(row);
 };
 const getTreeData = (props) => (data) => {
   const nodes = [];
@@ -1051,14 +1180,14 @@ const getTreeData = (props) => (data) => {
   getChild(data, null);
   return nodes;
 };
-const treeNodeClick = ({ emit, props, state, api, vm }) => (data) => {
+const treeNodeClick = ({ props, state, api, vm }) => (data) => {
   if (!props.multiple) {
     data.currentLabel = data[props.textField];
     data.value = data[props.valueField];
     state.selected = data;
     state.visible = false;
     api.updateModelValue(data.value);
-    emit("change", data);
+    api.directEmitChange(data);
   } else {
     if (props.treeOp.checkOnClickNode) {
       const checkedNodes = vm.$refs.selectTree.getCheckedNodes();
@@ -1067,7 +1196,7 @@ const treeNodeClick = ({ emit, props, state, api, vm }) => (data) => {
     }
   }
 };
-const nodeCheckClick = ({ emit, props, state, api }) => (data, { checkedKeys, checkedNodes }) => {
+const nodeCheckClick = ({ props, state, api }) => (data, { checkedKeys, checkedNodes }) => {
   const selected = state.selected.map((item) => api.getValueKey(item));
   if (isEqual(selected, checkedKeys)) {
     return;
@@ -1075,10 +1204,9 @@ const nodeCheckClick = ({ emit, props, state, api }) => (data, { checkedKeys, ch
   state.selected = checkedNodes.filter((node) => {
     node.currentLabel = node[props.textField];
     node.value = node[props.valueField];
-    return node;
   });
   api.updateModelValue(checkedKeys);
-  emit("change", checkedKeys, checkedNodes);
+  api.directEmitChange(checkedKeys, checkedNodes);
 };
 const nodeCollapse = ({ state, constants }) => () => {
   setTimeout(() => {
@@ -1091,9 +1219,11 @@ const nodeExpand = ({ state, constants }) => () => {
   }, 310);
 };
 const debouncRquest = ({ api, state, props }) => debounce(props.delay, () => {
-  if (state.filterOrSearch && state.query !== state.selectedLabel) {
+  if (props.filterable && state.query !== state.selectedLabel) {
+    const isChange = false;
+    const isInput = true;
     state.query = state.selectedLabel;
-    api.handleQueryChange(state.query);
+    api.handleQueryChange(state.query, isChange, isInput);
   }
 });
 const getChildValue = () => (data, key) => {
@@ -1140,6 +1270,7 @@ const watchPropsOption = ({ constants, parent, props, state }) => () => {
         state.datas = state.memorize.assemble(sortData.slice());
       } else {
         state.datas = sortData;
+        state.initDatas = sortData;
       }
     }
   });
@@ -1147,13 +1278,13 @@ const watchPropsOption = ({ constants, parent, props, state }) => () => {
 const buildSelectConfig = ({ props, state }) => () => {
   const checkRowKeys = state.gridCheckedData;
   const selectConfig = props.selectConfig;
-  return __spreadProps(__spreadValues({}, selectConfig), { checkRowKeys });
+  return Object.assign({}, selectConfig, { checkRowKeys });
 };
 const buildRadioConfig = ({ props, state }) => () => {
   const checkRowKey = state.currentKey;
   const highlight = true;
   const radioConfig = props.radioConfig;
-  return __spreadValues(__spreadValues({}, radioConfig), { checkRowKey, highlight });
+  return Object.assign({}, radioConfig, { checkRowKey, highlight });
 };
 const onMouseenterNative = ({ state }) => () => {
   state.inputHovering = true;
@@ -1169,16 +1300,15 @@ const onMouseleaveNative = ({ state }) => (e) => {
     state.softFocus = false;
   }
 };
-const onCopying = ({ state, vm }) => () => state.searchSingleCopy && state.selectedLabel && vm.$refs.reference && vm.$refs.reference.hasSelection && vm.$refs.reference.hasSelection();
+const onCopying = ({ state, vm }) => () => {
+  return state.searchSingleCopy && state.selectedLabel && vm.$refs.reference && vm.$refs.reference.hasSelection && vm.$refs.reference.hasSelection();
+};
 const watchHoverIndex = ({ state }) => (value) => {
-  if (typeof value === "number" && value > -1) {
-    state.hoverOption = state.options[value] || {};
-  } else if (value === -9) {
-    state.hoverOption = {};
+  if (value === -1 || value === -9) {
+    state.hoverValue = -1;
+  } else {
+    state.hoverValue = state.optionIndexArr[value];
   }
-  state.options.forEach((option) => {
-    option.hover = state.hoverOption === option;
-  });
 };
 const handleDropdownClick = ({ emit }) => ($event) => {
   emit("dropdown-click", $event);
@@ -1194,15 +1324,15 @@ const calcCollapseTags = ({ state, vm }) => () => {
     return state.isHidden = true;
   }
   const tags = vm.$refs.tags;
-  if (!tags) {
+  const collapseTag = tags && tags.querySelector('[data-tag="tags-collapse"]');
+  if (!tags || !collapseTag) {
     return;
   }
   const { width: tagsContentWidth, paddingLeft, paddingRight } = window.getComputedStyle(tags);
   const tagsWidth = parseFloat(tagsContentWidth) - parseFloat(paddingLeft) - parseFloat(paddingRight);
-  const collapseTag = tags.querySelector(".tiny-select__tags-collapse");
   const { width: collapseTagContentWidth, marginRight } = collapseTag && window.getComputedStyle(collapseTag);
   const collapseTagWidth = collapseTag && parseFloat(collapseTagContentWidth) + parseFloat(marginRight);
-  const tagList = Array.from(tags.querySelectorAll(".tiny-tag"));
+  const tagList = Array.from(tags.querySelectorAll('[data-tag="tiny-tag"]'));
   let { total, dom, idx } = { total: collapseTagWidth, dom: null, idx: 0 };
   tagList.forEach((tag, index) => {
     if (tag !== collapseTag) {
@@ -1255,21 +1385,22 @@ const initQuery = ({ props, state, constants, vm }) => ({ init } = {}) => {
   }
   return Promise.resolve(selected);
 };
-const mounted = ({ api, parent, state, props, vm, constants }) => () => {
+const mounted = ({ api, parent, state, props, vm, designConfig }) => () => {
   var _a;
   state.defaultCheckedKeys = state.gridCheckedData;
   const parentEl = parent.$el;
-  const inputEl = parentEl.querySelector("input.tiny-input__inner") || parentEl.querySelector("input.tiny-mobile-input__inner");
-  const inputClientRect = (inputEl == null ? void 0 : inputEl.getBoundingClientRect()) || {};
+  const inputEl = parentEl.querySelector('input[data-tag="tiny-input-inner"]');
+  const inputClientRect = inputEl && inputEl.getBoundingClientRect() || {};
   if (inputEl === document.activeElement) {
-    (_a = document.activeElement) == null ? void 0 : _a.blur();
+    document.activeElement.blur();
   }
   state.completed = true;
-  const sizeMap = { mini: 28, small: 32, medium: 36 };
+  const defaultSizeMap = { default: 28, mini: 24, small: 32, medium: 40 };
+  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] || constants.DEFAULT_HEIGHT : inputClientRect.height || sizeMap[state.selectSize] || constants.DEFAULT_HEIGHT;
+  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);
@@ -1291,7 +1422,6 @@ const unMount = ({ api, parent, vm, state }) => () => {
     removeResizeListener(vm.$refs.tags, api.resetInputHeight);
   }
   state.popperElm = null;
-  state.optimizeStore.flag && optmzApis.removeScrollListener({ api, refs: vm.$refs, state });
 };
 const optmzApis = {
   exist: (val, multiple) => multiple ? Array.isArray(val) && val.length : val,
@@ -1300,100 +1430,40 @@ const optmzApis = {
     const contain = (val, arr) => Array.isArray(arr) && ~arr.indexOf(val);
     const equal = (val, opt) => multiple ? contain(opt[valueField], [val]) : opt[valueField] === val;
     let start = 0;
-    if (optmzApis.exist(modelValue, multiple)) {
+    if (optmzApis.exist(modelValue, multiple) && options) {
       const lastVal = multiple ? modelValue[modelValue.length - 1] : modelValue;
       for (let i = 0; i < options.length; i++) {
-        if (!equal(lastVal, options[i])) {
+        if (!equal(lastVal, options[i]))
           continue;
-        }
         return i;
       }
     }
     return start;
   },
-  getStartIndex: ({ props, state }) => {
-    const { options } = props;
-    const { optimizeOpts, optimizeStore } = state;
-    const { rSize } = optimizeOpts;
-    const { valueIndex } = optimizeStore;
-    return valueIndex + rSize > options.length ? options.length - rSize : valueIndex;
-  },
-  getViewStyle: ({ props, state }) => {
-    const { options } = props;
-    const { optimizeOpts } = state;
-    const { optionHeight } = optimizeOpts;
-    return `height:${optionHeight * options.length}px`;
-  },
-  getStoreDatas: ({ props, state }) => {
-    const { options, valueField, modelValue, multiple } = props;
-    const { datas, optimizeOpts, optimizeStore } = state;
-    const { startIndex } = optimizeStore;
-    const { rSize } = optimizeOpts;
-    const sliced = datas.slice(startIndex, startIndex + rSize);
-    const hiddenOptions = optimizeStore.hiddenOptions = [];
-    const findPush = (val) => {
-      const opt = options.find((option) => option[valueField] === val);
-      if (opt && !~sliced.indexOf(opt)) {
-        sliced.push(opt);
-        hiddenOptions.push(opt);
-      }
-    };
-    if (optmzApis.exist(modelValue, multiple)) {
-      if (multiple) {
-        modelValue.forEach(findPush);
-      } else {
-        findPush(modelValue);
-      }
-    }
-    return sliced;
+  queryVisibleOptions: (vm, isMobileFirstMode) => {
+    const querySelectKey = isMobileFirstMode ? ".cursor-not-allowed" : ".is-disabled";
+    return Array.from(
+      vm.$refs.scrollbar.$el.querySelectorAll(
+        '.tiny-recycle-scroller__slot, .tiny-recycle-scroller__item-view:not([style*="transform: translateY(-9999px) translateX(0px)"])'
+      )
+    ).map((item) => item.querySelector(`[data-tag="tiny-select-dropdown-item"]:not(${querySelectKey})`)).filter((v) => v);
   },
-  queryWrap: (refs) => refs.scrollbar.$el.querySelector(".tiny-scrollbar__wrap.virtual"),
-  queryItems: (refs) => refs.scrollbar.$el.querySelectorAll(".tiny-option.virtual"),
-  createMacro: (cb) => setTimeout(cb),
   setScrollTop: ({ refs, state }) => {
-    const { optimizeOpts, optimizeStore } = state;
-    const { optionHeight } = optimizeOpts;
-    const wrap = optmzApis.queryWrap(refs);
-    wrap.scrollTop = optionHeight * optimizeStore.valueIndex;
-  },
-  setValueIndex: ({ props, state }) => state.optimizeStore.valueIndex = optmzApis.getValueIndex(props),
-  addScrollListener: ({ api, refs, state }) => {
     const { optimizeStore } = state;
-    const wrap = optmzApis.queryWrap(refs);
-    !optimizeStore.bind && wrap.addEventListener("scroll", api.getScrollListener) && (optimizeStore.bind = true);
+    refs.scrollbar.scrollToItem(optimizeStore.valueIndex);
   },
-  removeScrollListener: ({ api, refs, state }) => {
-    const { optimizeStore } = state;
-    const wrap = optmzApis.queryWrap(refs);
-    optimizeStore.bind && wrap.removeEventListener("scroll", api.getScrollListener) && (optimizeStore.bind = false);
-  },
-  isFirstPage: ({ props, state }) => {
-    const { optimizeStore } = state;
-    const { datas } = optimizeStore;
-    const { options } = props;
-    return Array.isArray(datas) && Array.isArray(options) && datas[0] === options[0];
+  setValueIndex: ({ props, state }) => {
+    state.optimizeStore.valueIndex = optmzApis.getValueIndex(props);
   },
   natural: (val) => val < 0 ? 0 : val,
-  updateItems: ({ refs, state, itemFn }) => {
-    const { optimizeOpts } = state;
-    const { optionHeight } = optimizeOpts;
-    const items = optmzApis.queryItems(refs);
-    for (let i = 0; i < items.length; i++) {
-      const item = items[i];
-      const flag = item.classList.contains("virtual-hidden");
-      item.style.top = flag ? `-${optionHeight}px` : `${itemFn(i)}px`;
-    }
-  },
-  process: ({ props, start, state }) => {
-    const { optimizeStore } = state;
-    optimizeStore.startIndex = typeof start !== "undefined" ? start : optmzApis.getStartIndex({ props, state });
-    optimizeStore.datas = optmzApis.getStoreDatas({ props, state });
-    optimizeStore.firstPage = optmzApis.isFirstPage({ props, state });
+  checkDefaultFirstOption: ({ state }) => {
+    state.hoverIndex = 0;
+    state.hoverValue = state.optionIndexArr[0];
   }
 };
-const computeOptimizeOpts = ({ props, state }) => () => {
+const computeOptimizeOpts = ({ props, designConfig }) => () => {
   const { optimization } = props;
-  const baseOpts = { gt: 20, rSize: 10, optionHeight: 30, limit: 20 };
+  const baseOpts = (designConfig == null ? void 0 : designConfig.baseOpts) ? designConfig.baseOpts : { gt: 20, rSize: 10, optionHeight: 30, limit: 20 };
   let optOpts;
   if (optimization) {
     if (typeof optimization === "boolean") {
@@ -1401,60 +1471,33 @@ const computeOptimizeOpts = ({ props, state }) => () => {
     } else {
       optOpts = extend(true, {}, baseOpts, optimization);
     }
-    optOpts.virtualScroll = optOpts.gt > 0 && optOpts.gt <= state.datas.length;
     return optOpts;
   }
 };
-const watchOptimizeOpts = ({ api, props, vm, state }) => () => {
+const watchOptimizeOpts = ({ props, state }) => () => {
   const { optimizeOpts, optimizeStore } = state;
   if (optimizeOpts) {
-    const { virtualScroll, optionHeight } = optimizeOpts;
-    optimizeStore.flag = virtualScroll;
-    if (virtualScroll) {
-      optimizeStore.viewStyle = optmzApis.getViewStyle({ props, state });
+    if (props.optimization) {
       optimizeStore.valueIndex = optmzApis.getValueIndex(props);
-      optmzApis.process({ props, state });
-      optmzApis.createMacro(() => {
-        const itemFn = (i) => optionHeight * (optimizeStore.startIndex + i);
-        optmzApis.addScrollListener({ api, refs: vm.$refs, state });
-        optmzApis.updateItems({ refs: vm.$refs, state, itemFn });
-      });
     }
   }
 };
-const getScrollListener = ({ props, vm, state }) => {
-  const listener = () => {
-    const { options } = props;
-    const { optimizeOpts } = state;
-    const { optionHeight } = optimizeOpts;
-    const viewHeight = optionHeight * options.length;
-    const { clientHeight, scrollTop } = optmzApis.queryWrap(vm.$refs);
-    const maxScrollTop = viewHeight - clientHeight;
-    const start = Math.floor(scrollTop / optionHeight);
-    if (scrollTop <= maxScrollTop) {
-      optmzApis.process({ props, start, state });
-      optmzApis.createMacro(() => {
-        const itemFn = (i) => scrollTop + optionHeight * i - scrollTop % optionHeight;
-        optmzApis.updateItems({ refs: vm.$refs, state, itemFn });
-      });
-    }
-  };
-  const { optimization } = props;
-  const delay = optmzApis.natural((optimization && typeof optimization === "object" ? optimization.delay : null) || 10);
-  return debounce(delay, listener);
-};
 const computeCollapseTags = (props) => () => props.collapseTags;
 const computeMultipleLimit = ({ props, state }) => () => {
-  const { multipleLimit, multiple } = props;
-  const { optimizeOpts, optimizeStore } = state;
-  return optmzApis.natural(multiple && optimizeStore.flag ? multipleLimit || optimizeOpts.limit : multipleLimit);
+  const { multipleLimit, multiple, optimization } = props;
+  const { optimizeOpts } = state;
+  return optmzApis.natural(multiple && optimization ? multipleLimit || optimizeOpts.limit : multipleLimit);
 };
-const updateModelValue = ({ emit, state }) => (value) => {
+const updateModelValue = ({ props, emit, state }) => (value, needUpdate) => {
   state.isClickChoose = true;
-  emit("update:modelValue", value);
+  if (state.device === "mb" && props.multiple && !needUpdate) {
+    state.modelValue = value;
+  } else {
+    emit("update:modelValue", value);
+  }
 };
 const getLabelSlotValue = ({ props, state }) => (item) => {
-  const datas = state.optimizeStore.flag ? state.optimizeStore.datas : state.datas;
+  const datas = state.datas;
   const value = item.state ? item.state.currentValue : item.value;
   const data = datas.find((data2) => data2.value === value);
   const obj = __spreadProps(__spreadValues({}, data), {
@@ -1470,11 +1513,13 @@ const computedTagsStyle = ({ props, parent, state }) => () => {
     width: "100%"
   };
 };
-const computedReadonly = ({ props, state }) => () => props.readonly || !props.filterable || 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 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 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 }) => () => props.filterable && props.allowCreate && state.query !== "" && !state.options.filter((option) => !option.created).some((option) => option.state.currentLabel === state.query);
+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 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");
@@ -1519,15 +1564,18 @@ const watchInitValue = ({ props, emit }) => (value) => {
 const watchShowClose = ({ nextTick, state, parent }) => () => {
   nextTick(() => {
     const parentEl = parent.$el;
-    const inputEl = parentEl.querySelector("input.tiny-input__inner");
+    const inputEl = parentEl.querySelector('input[data-tag="tiny-input-inner"]');
     if (inputEl) {
       const { paddingRight } = getComputedStyle(inputEl);
       state.inputPaddingRight = parseFloat(paddingRight);
     }
   });
 };
-const computedGetIcon = ({ constants, designConfig, props }) => (iconKey = "dropdownIcon") => {
-  return props.dropdownIcon || (designConfig == null ? void 0 : designConfig.icons[iconKey]) || (constants == null ? void 0 : constants.ICON_MAP[iconKey]);
+const computedGetIcon = ({ designConfig, props }) => () => {
+  return props.dropdownIcon ? { icon: props.dropdownIcon } : {
+    icon: (designConfig == null ? void 0 : designConfig.icons.dropdownIcon) || "icon-delta-down",
+    isDefault: true
+  };
 };
 const computedGetTagType = ({ designConfig, props }) => () => {
   var _a;
@@ -1536,8 +1584,18 @@ const computedGetTagType = ({ designConfig, props }) => () => {
   }
   return props.tagType;
 };
-const computedShowDropdownIcon = ({ props, state }) => () => {
-  return !state.showClose && !(props.remote && props.filterable && !props.remoteConfig.showIcon);
+const clearSearchText = ({ state, api }) => () => {
+  state.query = "";
+  state.previousQuery = void 0;
+  api.handleQueryChange(state.query);
+};
+const clearNoMatchValue = ({ props, emit }) => (newModelValue) => {
+  if (!props.clearNoMatchValue) {
+    return;
+  }
+  if (props.multiple && props.modelValue.length !== newModelValue.length || !props.multiple && props.modelValue !== newModelValue) {
+    emit("update:modelValue", newModelValue);
+  }
 };
 export {
   blur,
@@ -1547,6 +1605,7 @@ export {
   calcOverFlow,
   checkDefaultFirstOption,
   clearNoMatchValue,
+  clearSearchText,
   computeCollapseTags,
   computeMultipleLimit,
   computeOptimizeOpts,
@@ -1560,11 +1619,9 @@ export {
   computedSelectDisabled,
   computedShowClose,
   computedShowCopy,
-  computedShowDropdownIcon,
   computedShowNewOption,
   computedTagsStyle,
   debouncRquest,
-  debouncedQueryChange,
   defaultOnQueryChange,
   deletePrevTag,
   deleteSelected,
@@ -1572,13 +1629,15 @@ export {
   directEmitChange,
   doDestroy,
   emitChange,
+  emptyFlag,
   emptyText,
   focus,
   getChildValue,
   getLabelSlotValue,
   getOption,
+  getOptionIndexArr,
   getPluginOption,
-  getScrollListener,
+  getSelectedOption,
   getTreeData,
   getValueIndex,
   getValueKey,
@@ -1589,7 +1648,6 @@ export {
   handleClose,
   handleComposition,
   handleCopyClick,
-  handleDebouncedQueryChange,
   handleDropdownClick,
   handleEnterTag,
   handleFocus,
@@ -1611,8 +1669,11 @@ export {
   onMouseenterNative,
   onMouseleaveNative,
   onOptionDestroy,
+  queryChange,
+  queryVisibleOptions,
   radioChange,
-  resetFilter,
+  recycleScrollerHeight,
+  resetDatas,
   resetHoverIndex,
   resetInputHeight,
   resetInputState,
@@ -1620,6 +1681,7 @@ export {
   scrollToOption,
   selectChange,
   selectOption,
+  setOptionHighlight,
   setSelected,
   setSoftFocus,
   showTip,