@opentiny/vue-renderless 3.12.1 → 3.13.0-alpha.1

package/select/index.js

@@ -4,7 +4,6 @@ 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";
@@ -17,6 +16,7 @@ import { extend } from "../common/object";
 import { BROWSER_NAME } from "../common";
 import browserInfo from "../common/browser";
 import { fastdom } from "../common/deps/fastdom";
+import { deepClone } from "../picker-column";
 const handleComposition = ({ api, nextTick, state }) => (event) => {
   const text = event.target.value;
   if (event.type === "compositionend") {
@@ -69,7 +69,7 @@ const gridOnQueryChange = ({ props, vm, constants, state }) => (value) => {
         state.remoteData = data.filter((row) => !~selectedIds.indexOf(row[valueField])).concat(state.selected);
       } else {
         vm.$refs.selectGrid.clearRadioRow();
-        vm.$refs.selectGrid.setRadioRow(find(data, (item) => props.modelValue == item[props.valueField]));
+        vm.$refs.selectGrid.setRadioRow(find(data, (item) => props.modelValue === item[props.valueField]));
         state.remoteData = data;
       }
       vm.$refs.selectGrid.$refs.tinyTable.lastScrollTop = 0;
@@ -86,7 +86,6 @@ const defaultOnQueryChange = ({ props, state, constants, api }) => (value) => {
     props.filterMethod(value);
     state.selectEmitter.emit(constants.COMPONENT_NAME.OptionGroup, constants.EVENT_NAME.queryChange);
   } else {
-    state.filteredOptionsCount = state.optionsCount;
     state.selectEmitter.emit(constants.EVENT_NAME.queryChange, value);
   }
   if (props.defaultFirstOption && (props.filterable || props.remote) && state.filteredOptionsCount) {
@@ -111,6 +110,7 @@ const handleQueryChange = ({ api, constants, nextTick, props, vm, state }) => (v
       vm.$refs.selectTree && vm.$refs.selectTree.filter(value);
     }
   }
+  state.query = value;
   state.previousQuery = value;
   window.requestAnimationFrame(() => {
     if (state.visible) {
@@ -132,20 +132,28 @@ const handleQueryChange = ({ api, constants, nextTick, props, vm, state }) => (v
   if (props.renderType === constants.TYPE.Tree) {
     return;
   }
+  state.triggerSearch = true;
   api.defaultOnQueryChange(value);
 };
+const resetFilter = ({ state, api }) => () => {
+  state.query = "";
+  state.previousQuery = void 0;
+  api.handleQueryChange(state.query);
+};
 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 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) => {
@@ -162,7 +170,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 || [];
@@ -184,6 +192,11 @@ const emitChange = ({ emit, props, state, constants }) => (value) => {
     }
   }
 };
+const directEmitChange = ({ emit, props, state }) => (value, key) => {
+  if (state.device === "mb" && props.multiple)
+    return;
+  emit("change", value, key);
+};
 const clearNoMatchValue = ({ props, emit }) => (newModelValue) => {
   if (!props.clearNoMatchValue) {
     return;
@@ -241,11 +254,11 @@ const getOptionOfSetSelected = ({ api, props }) => {
   }
   return option;
 };
-const getResultOfSetSelected = ({ props, isGrid, isTree, api }) => {
+const getResultOfSetSelected = ({ state, props, isGrid, isTree, api }) => {
   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);
@@ -275,7 +288,7 @@ const setGridOrTreeSelected = ({ props, state, vm, isTree, api }) => {
   }
   const isRemote = state.filterOrSearch && 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]);
+  const data = find(nestdata, (item) => props.modelValue === item[props.valueField]);
   if (isEmptyObject(data)) {
     api.clearNoMatchValue("");
     return;
@@ -305,7 +318,7 @@ const setSelected = ({ api, constants, nextTick, props, vm, state }) => () => {
     }
     return;
   }
-  const result = getResultOfSetSelected({ props, isGrid, isTree, api });
+  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);
@@ -316,7 +329,7 @@ const getPluginOption = ({ api, props, state }) => (value, isTree) => {
   const isRemote = state.filterOrSearch && 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);
+  const selNode = find(sourceData, (item) => item[valueField] === value);
   const items = [];
   if (selNode) {
     selNode.currentLabel = selNode[textField];
@@ -324,12 +337,21 @@ const getPluginOption = ({ api, props, state }) => (value, isTree) => {
   }
   return items;
 };
-const toggleCheckAll = ({ api, emit, state, props }) => () => {
+const toggleCheckAll = ({ api, state }) => () => {
   const getEnabledValues = (options) => {
     let values = [];
     for (let i = 0; i < options.length; i++) {
-      if (!options[i].state.disabled && !options[i].state.groupDisabled) {
-        values.push(options[i].value);
+      const isEnabled = !options[i].state.disabled && !options[i].state.groupDisabled;
+      const isRequired = options[i].required;
+      const isDisabledAndChecked = !isEnabled && options[i].state.selectCls === "checked-sur";
+      if (state.isSelectAll) {
+        if (isRequired || isDisabledAndChecked) {
+          values.push(options[i].value);
+        }
+      } else {
+        if (isEnabled || isRequired || isDisabledAndChecked) {
+          values.push(options[i].value);
+        }
       }
     }
     return values;
@@ -341,29 +363,14 @@ const toggleCheckAll = ({ api, emit, state, props }) => () => {
     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 = [];
-  }
-  const requiredValue = [];
-  if (props.multiple) {
-    state.options.forEach((opt) => {
-      if (opt.required)
-        requiredValue.push(opt.value);
-    });
-  }
-  if (Array.isArray(value)) {
-    value = requiredValue.concat(value.filter((val) => !requiredValue.find((requireVal) => requireVal === val)));
+    value = getEnabledValues(state.options);
   }
   api.setSoftFocus();
   state.isSilentBlur = true;
   api.updateModelValue(value);
-  emit("change", 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;
@@ -371,12 +378,11 @@ 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;
@@ -390,16 +396,17 @@ const blur = ({ vm, state }) => () => {
   (_a = vm.$refs.reference) == null ? void 0 : _a.blur();
 };
 const handleBlur = ({ constants, dispatch, emit, state }) => (event) => {
+  var _a;
   clearTimeout(state.timer);
   state.timer = setTimeout(() => {
-    var _a;
     if (state.isSilentBlur) {
       state.isSilentBlur = false;
     } else {
       emit("blur", event);
     }
-    dispatch(constants.COMPONENT_NAME.FormItem, constants.EVENT_NAME.formBlur, (_a = event == null ? void 0 : event.target) == null ? void 0 : _a.value);
   }, 200);
+  dispatch(constants.COMPONENT_NAME.FormItem, constants.EVENT_NAME.formBlur, (_a = event == null ? void 0 : event.target) == null ? void 0 : _a.value);
+  state.triggerSearch = false;
   state.softFocus = false;
 };
 const handleClearClick = (api) => (event) => {
@@ -419,6 +426,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;
@@ -429,8 +439,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) {
@@ -461,9 +472,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;
@@ -471,18 +480,19 @@ 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;
     const noSelected = state.selected.length === 0;
+    const spacingHeight = designConfig ? (_a = designConfig.state) == null ? void 0 : _a.spacingHeight : constants.SPACING_HEIGHT;
     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 {
-        input.style.height = noSelected ? sizeInMap + "px" : Math.max(0, sizeInMap) + "px";
+        input.style.height = sizeInMap + "px";
       }
     } else {
       input.style.height = "auto";
@@ -512,13 +522,14 @@ const handleOptionSelect = ({ api, nextTick, props, vm, state }) => (option, byC
   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) {
@@ -536,6 +547,7 @@ const handleOptionSelect = ({ api, nextTick, props, vm, state }) => (option, byC
       state.visible = false;
     }
   } else {
+    state.compareValue = deepClone(option.value);
     api.updateModelValue(option.value);
     api.emitChange(option.value);
     if (option.created) {
@@ -579,11 +591,17 @@ 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;
@@ -591,6 +609,7 @@ const toggleMenu = ({ vm, state, props }) => (e) => {
       if (!(props.filterable && props.shape)) {
         const dom = vm.$refs.input || vm.$refs.reference;
         dom == null ? void 0 : dom.focus();
+        api.setOptionHighlight();
       }
     }
   }
@@ -605,11 +624,11 @@ const selectOption = ({ api, state, props }) => (e) => {
   }
 };
 const deleteSelected = ({ api, constants, emit, props, vm, state }) => (event) => {
-  event.stopPropagation();
+  event == null ? void 0 : 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;
@@ -623,8 +642,9 @@ const deleteSelected = ({ api, constants, emit, props, vm, state }) => (event) =
     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");
 };
@@ -648,7 +668,7 @@ 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);
@@ -658,6 +678,7 @@ const deleteTag = ({ api, constants, emit, props, state, nextTick, vm }) => (eve
       refs.selectGrid.clearSelection();
       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]);
@@ -698,6 +719,15 @@ 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.visible && option.state.itemSelected) {
+      state.hoverIndex = i;
+      break;
+    }
+  }
+};
 const checkDefaultFirstOption = (state) => () => {
   state.hoverIndex = -1;
   let hasCreated = false;
@@ -734,7 +764,11 @@ const getValueKey = (props) => (item) => {
   }
   return getObj(item.value, props.valueKey);
 };
-const navigateOptions = ({ api, nextTick, state }) => (direction) => {
+const navigateOptions = ({ api, nextTick, state, props }) => (direction) => {
+  const { optimization } = props;
+  if (optimization) {
+    return;
+  }
   const len = state.options.length;
   if (!state.visible) {
     state.visible = true;
@@ -756,38 +790,37 @@ const navigateOptions = ({ api, nextTick, state }) => (direction) => {
       }
     }
     const option = state.options[state.hoverIndex];
-    if (option.disabled === true || option.groupDisabled === true || !option.visible) {
+    if (option.disabled === true || option.groupDisabled === true || !option.visible || option.state.limitReached) {
       api.navigateOptions(direction);
     }
     nextTick(() => api.scrollToOption(state.hoverOption));
   }
 };
-const emptyText = ({ I18N, props, state, t }) => () => {
+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;
+      return remoteEmptyText(props, state);
+    }
+    if (props.remote && state.query === "" && state.options.length === 0 && !state.triggerSearch) {
+      return props.shape === "filter" || isMobileFirstMode ? "" : false;
     }
     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)) {
+    if (!state.options.some((option) => option.visible && option.state.visible)) {
       return props.noDataText || t(I18N.noData);
     }
-    if (props.remote && state.query === "" && state.options.length === 0) {
-      if (props.shape === "filter") {
-        return "";
-      } else {
-        return false;
-      }
-    }
   }
   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();
@@ -816,7 +849,7 @@ 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();
@@ -825,7 +858,7 @@ const calcOverFlow = ({ vm, props, state }) => (height) => {
       } else {
         for (let i = 1; i < tags.length; i++) {
           let tx = tags[i].getBoundingClientRect().x;
-          if (tx == x) {
+          if (tx === x) {
             state.overflow = i - 1;
             break;
           }
@@ -878,7 +911,7 @@ const toVisible = ({ constants, state, props, vm, api, nextTick }) => () => {
   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();
   nextTick(() => {
@@ -893,21 +926,24 @@ const toVisible = ({ constants, state, props, vm, api, nextTick }) => () => {
 };
 const toHide = ({ constants, state, props, vm, api, nextTick }) => () => {
   var _a, _b;
+  const { remote, remoteConfig, shape, renderType, multiple, valueField } = props;
   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) {
+    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) {
       props.filterable ? (_a = vm.$refs.input) == null ? void 0 : _a.focus() : (_b = vm.$refs.reference) == null ? void 0 : _b.focus();
     } else {
-      if (!props.remote) {
+      if (!remote) {
         state.selectEmitter.emit(constants.EVENT_NAME.queryChange);
         state.selectEmitter.emit(constants.COMPONENT_NAME.OptionGroup);
       }
-      if (state.selectedLabel && !props.shape) {
+      if (state.selectedLabel && !shape) {
         state.currentPlaceholder = state.selectedLabel;
         state.selectedLabel = "";
       }
@@ -915,25 +951,25 @@ 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[props.valueField]));
     }
     if (state.filterOrSearch && 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 (state.filterOrSearch && remote && (typeof props.remoteMethod === "function" || typeof props.initQuery === "function")) {
       vm.$refs.selectGrid.handleTableData();
     }
   }
 };
-const watchVisible = ({ api, constants, emit, state, vm, props }) => (value) => {
+const watchVisible = ({ api, constants, emit, state, vm, props, isMobileFirstMode }) => (value) => {
   var _a;
   if ((state.filterOrSearch || props.remote) && !value) {
     (_a = vm.$refs.reference) == null ? void 0 : _a.blur();
@@ -941,6 +977,9 @@ const watchVisible = ({ api, constants, emit, state, vm, props }) => (value) =>
   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) => {
@@ -950,10 +989,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) {
+      vm.$refs.scrollbar.handleScroll();
+    }
+  }, props.updateDelay);
   if (!value && props.shape === "filter") {
     state.softFocus = false;
   }
   if (value && state.optimizeStore.flag) {
+    if (isMobileFirstMode) {
+      optmzApis.queryWrap(vm.$refs).addEventListener("scroll", api.getScrollListener);
+    }
     optmzApis.createMacro(() => {
       optmzApis.setScrollTop({ refs: vm.$refs, state });
       api.getScrollListener();
@@ -990,7 +1038,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]);
@@ -1000,12 +1048,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 = [];
@@ -1018,14 +1066,14 @@ const getcheckedData = ({ props, state }) => () => {
     return checkedKey;
   }
 };
-const radioChange = ({ emit, props, state, api }) => ({ row }) => {
+const radioChange = ({ props, state, api }) => ({ row }) => {
   row.value = row[props.valueField];
   row.currentLabel = row[props.textField];
   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 = [];
@@ -1041,14 +1089,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();
@@ -1057,7 +1105,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;
@@ -1065,9 +1113,10 @@ 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 checkedNodes;
   });
   api.updateModelValue(checkedKeys);
-  emit("change", checkedKeys, checkedNodes);
+  api.directEmitChange(checkedKeys, checkedNodes);
 };
 const nodeCollapse = ({ state, constants }) => () => {
   setTimeout(() => {
@@ -1144,7 +1193,7 @@ const buildRadioConfig = ({ props, state }) => () => {
   const radioConfig = props.radioConfig;
   return __spreadValues(__spreadValues({}, radioConfig), { checkRowKey, highlight });
 };
-const onMouseenterNative = ({ state }) => (e) => {
+const onMouseenterNative = ({ state }) => () => {
   state.inputHovering = true;
   if (state.searchSingleCopy && state.selectedLabel) {
     state.softFocus = true;
@@ -1183,17 +1232,17 @@ 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.some((tag, index) => {
+  tagList.forEach((tag, index) => {
     if (tag !== collapseTag) {
       const { width: tagContentWidth, marginRight: marginRight2 } = tag && window.getComputedStyle(tag);
       total += parseFloat(tagContentWidth) + parseFloat(marginRight2);
@@ -1244,8 +1293,8 @@ const initQuery = ({ props, state, constants, vm }) => ({ init } = {}) => {
   }
   return Promise.resolve(selected);
 };
-const mounted = ({ api, parent, state, props, vm, constants }) => () => {
-  var _a;
+const mounted = ({ api, parent, state, props, vm, designConfig }) => () => {
+  var _a, _b;
   state.defaultCheckedKeys = state.gridCheckedData;
   const parentEl = parent.$el;
   const inputEl = parentEl.querySelector("input.tiny-input__inner") || parentEl.querySelector("input.tiny-mobile-input__inner");
@@ -1254,11 +1303,12 @@ const mounted = ({ api, parent, state, props, vm, constants }) => () => {
     (_a = document.activeElement) == null ? void 0 : _a.blur();
   }
   state.completed = true;
-  const sizeMap = { mini: 28, small: 32, medium: 36 };
+  const defaultSizeMap = { default: 28, mini: 24, small: 32, medium: 40 };
+  const sizeMap = ((_b = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _b.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 = sizeMap[state.selectSize || "default"];
   addResizeListener(parentEl, api.handleResize);
   if (vm.$refs.tags) {
     addResizeListener(vm.$refs.tags, api.resetInputHeight);
@@ -1337,7 +1387,7 @@ const optmzApis = {
     return sliced;
   },
   queryWrap: (refs) => refs.scrollbar.$el.querySelector(".tiny-scrollbar__wrap.virtual"),
-  queryItems: (refs) => refs.scrollbar.$el.querySelectorAll(".tiny-option.virtual"),
+  queryItems: (refs) => refs.scrollbar.$el.querySelectorAll('[data-tag="tiny-option"].virtual'),
   createMacro: (cb) => setTimeout(cb),
   setScrollTop: ({ refs, state }) => {
     const { optimizeOpts, optimizeStore } = state;
@@ -1438,9 +1488,13 @@ const computeMultipleLimit = ({ props, state }) => () => {
   const { optimizeOpts, optimizeStore } = state;
   return optmzApis.natural(multiple && optimizeStore.flag ? 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;
@@ -1459,11 +1513,14 @@ 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)
+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 && 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");
@@ -1508,15 +1565,22 @@ 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 }) => (name) => {
-  return props.dropdownIcon || (designConfig == null ? void 0 : designConfig.icons[name]) || (constants == null ? void 0 : constants.ICON_MAP[name]);
+const computedGetIcon = ({ constants, designConfig, props }) => (iconKey = "dropdownIcon") => {
+  const defaultDropdownIcon = {
+    icon: (designConfig == null ? void 0 : designConfig.icons[iconKey]) || (constants == null ? void 0 : constants.ICON_MAP[iconKey]),
+    isDefault: true
+  };
+  if (props.dropdownIcon) {
+    return { icon: props.dropdownIcon };
+  }
+  return defaultDropdownIcon;
 };
 const computedGetTagType = ({ designConfig, props }) => () => {
   var _a;
@@ -1557,6 +1621,7 @@ export {
   deletePrevTag,
   deleteSelected,
   deleteTag,
+  directEmitChange,
   doDestroy,
   emitChange,
   emptyText,
@@ -1606,6 +1671,7 @@ export {
   scrollToOption,
   selectChange,
   selectOption,
+  setOptionHighlight,
   setSelected,
   setSoftFocus,
   showTip,