@opentiny/vue-renderless 3.9.3 → 3.10.0

package/select/index.js

@@ -11,9 +11,12 @@ 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 } from "../common/type";
+import { isEmptyObject, isNull } 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 { fastdom } from "../common/deps/fastdom";
 const handleComposition = ({ api, nextTick, state }) => (event) => {
   const text = event.target.value;
   if (event.type === "compositionend") {
@@ -24,7 +27,7 @@ const handleComposition = ({ api, nextTick, state }) => (event) => {
     state.isOnComposition = !isKorean(lastCharacter);
   }
 };
-const showTip = ({ props, state, refs }) => (show) => {
+const showTip = ({ props, state, vm }) => (show) => {
   if (!props.showOverflowTooltip) {
     return;
   }
@@ -33,52 +36,52 @@ const showTip = ({ props, state, refs }) => (show) => {
     clearTimeout(state.tipTimer);
     state.tipTimer = setTimeout(() => {
       state.showTip = state.tipHover;
-    }, refs.popover.closeDelay);
+    }, vm.$refs.popover.closeDelay);
   } else {
     if (!props.multiple) {
-      const reference = refs.reference.$el;
+      const reference = vm.$refs.reference.$el;
       overflow = reference.querySelector("input").scrollWidth > reference.scrollWidth;
     } else {
-      overflow = refs.tags.scrollHeight > refs.tags.getBoundingClientRect().height;
+      overflow = vm.$refs.tags.scrollHeight > vm.$refs.tags.getBoundingClientRect().height;
     }
     state.showTip = show && overflow && !!state.tips && !state.visible;
   }
 };
-const gridOnQueryChange = ({ props, refs, constants, state }) => (value) => {
+const gridOnQueryChange = ({ props, vm, constants, state }) => (value) => {
   const { multiple, valueField, filterMethod, filterable, remote, remoteMethod } = props;
   if (filterable && typeof filterMethod === "function") {
-    const table = refs.selectGrid.$refs.tinyTable;
+    const table = vm.$refs.selectGrid.$refs.tinyTable;
     const fullData = table.afterFullData;
-    refs.selectGrid.scrollTo(null, 0);
+    vm.$refs.selectGrid.scrollTo(null, 0);
     table.afterFullData = filterMethod(value, fullData) || [];
-    refs.selectGrid.handleTableData(!value).then(() => state.selectEmitter.emit(constants.EVENT_NAME.updatePopper));
+    vm.$refs.selectGrid.handleTableData(!value).then(() => state.selectEmitter.emit(constants.EVENT_NAME.updatePopper));
     state.previousQuery = value;
   } else if (remote && typeof remoteMethod === "function") {
     state.previousQuery = value;
-    remoteMethod(value).then((data) => {
+    remoteMethod(value, props.extraQueryParams).then((data) => {
       if (multiple) {
         const selectedIds = state.selected.map((sel) => sel[valueField]);
-        refs.selectGrid.clearSelection();
-        refs.selectGrid.setSelection(
+        vm.$refs.selectGrid.clearSelection();
+        vm.$refs.selectGrid.setSelection(
           data.filter((row) => ~selectedIds.indexOf(row[valueField])),
           true
         );
         state.remoteData = data.filter((row) => !~selectedIds.indexOf(row[valueField])).concat(state.selected);
       } else {
-        refs.selectGrid.clearRadioRow();
-        refs.selectGrid.setRadioRow(find(data, (item) => props.modelValue == item[props.valueField]));
+        vm.$refs.selectGrid.clearRadioRow();
+        vm.$refs.selectGrid.setRadioRow(find(data, (item) => props.modelValue == item[props.valueField]));
         state.remoteData = data;
       }
-      refs.selectGrid.$refs.tinyTable.lastScrollTop = 0;
-      refs.selectGrid.loadData(data);
-      refs.selectGrid.handleTableData(!value).then(() => state.selectEmitter.emit(constants.EVENT_NAME.updatePopper));
+      vm.$refs.selectGrid.$refs.tinyTable.lastScrollTop = 0;
+      vm.$refs.selectGrid.loadData(data);
+      vm.$refs.selectGrid.handleTableData(!value).then(() => state.selectEmitter.emit(constants.EVENT_NAME.updatePopper));
     });
   }
 };
 const defaultOnQueryChange = ({ props, state, constants, api }) => (value) => {
-  if (props.remote && typeof props.remoteMethod === "function") {
+  if (props.remote && (typeof props.remoteMethod === "function" || typeof props.initQuery === "function")) {
     state.hoverIndex = -1;
-    props.remoteMethod(value);
+    props.remoteMethod && props.remoteMethod(value, props.extraQueryParams);
   } else if (typeof props.filterMethod === "function") {
     props.filterMethod(value);
     state.selectEmitter.emit(constants.COMPONENT_NAME.OptionGroup, constants.EVENT_NAME.queryChange);
@@ -90,12 +93,11 @@ const defaultOnQueryChange = ({ props, state, constants, api }) => (value) => {
     api.checkDefaultFirstOption();
   }
 };
-const handleQueryChange = ({ api, constants, nextTick, props, vm, state }) => (value) => {
-  const refs = vm.$refs;
-  if (state.previousQuery === value || state.isOnComposition) {
+const handleQueryChange = ({ api, constants, nextTick, props, vm, state }) => (value, isChange = false) => {
+  if (state.previousQuery === value && !isChange || state.isOnComposition) {
     return;
   }
-  if (state.previousQuery === null && (typeof props.filterMethod === "function" || typeof props.remoteMethod === "function")) {
+  if (state.previousQuery === null && !isChange && (typeof props.filterMethod === "function" || typeof props.remoteMethod === "function" || typeof props.initQuery === "function")) {
     state.previousQuery = value;
     return;
   }
@@ -106,21 +108,21 @@ 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") {
-      refs.selectTree && refs.selectTree.filter(value);
+      vm.$refs.selectTree && vm.$refs.selectTree.filter(value);
     }
   }
   state.previousQuery = value;
-  nextTick(() => {
+  window.requestAnimationFrame(() => {
     if (state.visible) {
       state.selectEmitter.emit(constants.EVENT_NAME.updatePopper);
       state.showWarper = true;
     }
   });
   state.hoverIndex = -1;
-  if (props.multiple && props.filterable) {
+  if (props.multiple && props.filterable && !props.shape) {
     nextTick(() => {
-      if (refs.input) {
-        const length = refs.input.value.length * 15 + 20;
+      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();
@@ -132,13 +134,13 @@ const handleQueryChange = ({ api, constants, nextTick, props, vm, state }) => (v
   }
   api.defaultOnQueryChange(value);
 };
-const scrollToOption = ({ refs, constants }) => (option) => {
+const scrollToOption = ({ vm, constants }) => (option) => {
   const target = Array.isArray(option) && option[0] ? option[0].el : option.el;
-  if (refs.popper && target) {
-    const menu = refs.popper.$el.querySelector(constants.CLASS.SelectDropdownWrap);
+  if (vm.$refs.popper && target) {
+    const menu = vm.$refs.popper.$el.querySelector(constants.CLASS.SelectDropdownWrap);
     scrollIntoView(menu, target);
   }
-  refs.scrollbar && refs.scrollbar.handleScroll();
+  vm.$refs.scrollbar && vm.$refs.scrollbar.handleScroll();
 };
 const handleMenuEnter = ({ api, nextTick, state }) => () => {
   nextTick(() => api.scrollToOption(state.selected));
@@ -185,7 +187,7 @@ const emitChange = ({ emit, props, state, constants }) => (value) => {
 const getOption = ({ props, state }) => (value) => {
   let option;
   const isObject = Object.prototype.toString.call(value).toLowerCase() === "[object object]";
-  const isNull = Object.prototype.toString.call(value).toLowerCase() === "[object null]";
+  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];
@@ -198,7 +200,7 @@ const getOption = ({ props, state }) => (value) => {
   if (option) {
     return option;
   }
-  const label = !isObject && !isNull && !isUndefined ? value : "";
+  const label = !isObject && !isNull2 && !isUndefined ? value : "";
   let newOption = { value, currentLabel: label };
   if (props.multiple) {
     newOption.hitState = false;
@@ -232,7 +234,7 @@ const getResultOfSetSelected = ({ props, isGrid, isTree, api }) => {
   }
   return result;
 };
-const setGridOrTreeSelected = ({ props, state, vm, isTree, api }) => () => {
+const setGridOrTreeSelected = ({ props, state, vm, isTree, api }) => {
   if (!props.modelValue) {
     state.selectedLabel = "";
     state.selected = {};
@@ -241,7 +243,7 @@ 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";
+  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]);
   if (isEmptyObject(data)) {
@@ -280,7 +282,7 @@ const setSelected = ({ api, constants, nextTick, props, vm, state }) => () => {
   nextTick(api.resetInputHeight);
 };
 const getPluginOption = ({ api, props, state }) => (value, isTree) => {
-  const isRemote = state.filterOrSearch && props.remote && typeof props.remoteMethod === "function";
+  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);
@@ -291,7 +293,7 @@ const getPluginOption = ({ api, props, state }) => (value, isTree) => {
   }
   return items;
 };
-const toggleCheckAll = ({ api, emit, state }) => () => {
+const toggleCheckAll = ({ api, emit, state, props }) => () => {
   const getEnabledValues = (options) => {
     let values = [];
     for (let i = 0; i < options.length; i++) {
@@ -310,8 +312,19 @@ const toggleCheckAll = ({ api, emit, state }) => () => {
   } 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)));
+  }
   api.setSoftFocus();
-  emit("update:modelValue", value);
+  state.isSilentBlur = true;
+  api.updateModelValue(value);
   emit("change", value);
 };
 const resetFilter = ({ state, api }) => () => {
@@ -334,19 +347,20 @@ const handleFocus = ({ emit, props, state, api }) => (event) => {
     api.resetFilter();
   }
 };
-const focus = ({ refs, state }) => () => {
+const focus = ({ vm, state }) => () => {
   var _a;
   if (!state.softFocus) {
-    (_a = refs.reference) == null ? void 0 : _a.focus();
+    (_a = vm.$refs.reference) == null ? void 0 : _a.focus();
   }
 };
-const blur = ({ refs, state }) => () => {
+const blur = ({ vm, state }) => () => {
   var _a;
   state.visible = false;
-  (_a = refs.reference) == null ? void 0 : _a.blur();
+  (_a = vm.$refs.reference) == null ? void 0 : _a.blur();
 };
 const handleBlur = ({ constants, dispatch, emit, state }) => (event) => {
-  setTimeout(() => {
+  clearTimeout(state.timer);
+  state.timer = setTimeout(() => {
     var _a;
     if (state.isSilentBlur) {
       state.isSilentBlur = false;
@@ -354,14 +368,14 @@ const handleBlur = ({ constants, dispatch, emit, state }) => (event) => {
       emit("blur", event);
     }
     dispatch(constants.COMPONENT_NAME.FormItem, constants.EVENT_NAME.formBlur, (_a = event == null ? void 0 : event.target) == null ? void 0 : _a.value);
-  }, 100);
+  }, 200);
   state.softFocus = false;
 };
 const handleClearClick = (api) => (event) => {
   api.deleteSelected(event);
 };
-const doDestroy = (refs) => () => {
-  refs.popper && refs.popper.doDestroy();
+const doDestroy = (vm) => () => {
+  vm.$refs.popper && vm.$refs.popper.doDestroy();
 };
 const handleClose = (state) => () => {
   state.visible = false;
@@ -382,51 +396,67 @@ const toggleLastOptionHitState = ({ state }) => (hit) => {
   hitTarget.hitState = !hitTarget.hitState;
   return hitTarget.hitState;
 };
-const deletePrevTag = ({ api, constants, emit, props, state, vm }) => (event) => {
-  const refs = vm.$refs;
+const deletePrevTag = ({ api, constants, props, state, vm }) => (event) => {
   if (event.target.value.length <= 0 && !api.toggleLastOptionHitState()) {
     const value = props.modelValue.slice();
     value.pop();
-    emit("update:modelValue", value);
+    api.updateModelValue(value);
     api.emitChange(value);
     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);
     }
   }
 };
-const managePlaceholder = ({ refs, state }) => () => {
+const managePlaceholder = ({ vm, state }) => () => {
   if (state.currentPlaceholder !== "") {
-    state.currentPlaceholder = refs.input.value ? "" : state.cachedPlaceHolder;
+    state.currentPlaceholder = vm.$refs.input.value ? "" : state.cachedPlaceHolder;
   }
 };
-const resetInputState = ({ api, refs, state }) => (event) => {
+const resetInputState = ({ api, vm, state }) => (event) => {
   if (event.keyCode !== 8) {
     api.toggleLastOptionHitState(false);
   }
-  state.inputLength = refs.input.value.length * 15 + 20;
+  state.inputLength = vm.$refs.input.value.length * 15 + 20;
   api.resetInputHeight();
 };
-const resetInputHeight = ({ constants, nextTick, props, refs, state }) => () => {
-  if (state.collapseTags && (!props.filterable || !props.searchable)) {
+const resetInputHeight = ({ constants, nextTick, props, vm, state, api, designConfig }) => () => {
+  if (state.collapseTags && !props.filterable) {
     return;
   }
   nextTick(() => {
-    if (!refs.reference) {
+    var _a;
+    if (!vm.$refs.reference) {
       return;
     }
-    const inputChildNodes = refs.reference.$el.childNodes;
+    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");
-    const tags = refs.tags;
+    const tags = vm.$refs.tags;
     if (!input) {
       return;
     }
-    const sizeInMap = state.initialInputHeight || 30;
+    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 noSelected = state.selected.length === 0;
     const borderHeight = 2;
-    input.style.height = noSelected ? sizeInMap + "px" : Math.max(tags ? tags.clientHeight + (tags.clientHeight > sizeInMap ? borderHeight : 0) : 0, sizeInMap) + "px";
+    if (!state.isDisplayOnly) {
+      if (!noSelected && tags) {
+        fastdom.measure(() => {
+          const tagsClientHeight = tags.clientHeight;
+          fastdom.mutate(() => {
+            input.style.height = Math.max(tagsClientHeight + (tagsClientHeight > sizeInMap ? borderHeight : 0), sizeInMap) + "px";
+          });
+        });
+      } else {
+        input.style.height = noSelected ? sizeInMap + "px" : Math.max(0, sizeInMap) + "px";
+      }
+    } else {
+      input.style.height = "auto";
+    }
     if (state.visible && state.emptyText !== false) {
       state.selectEmitter.emit(constants.EVENT_NAME.updatePopper, true);
     }
@@ -448,7 +478,7 @@ const resetHoverIndex = ({ props, state }) => () => {
     }
   }
 };
-const handleOptionSelect = ({ api, emit, nextTick, props, refs, state }) => (option, byClick) => {
+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) {
@@ -459,7 +489,7 @@ const handleOptionSelect = ({ api, emit, nextTick, props, refs, state }) => (opt
     } else if (state.multipleLimit <= 0 || value.length < state.multipleLimit) {
       value.push(option.value);
     }
-    emit("update:modelValue", value);
+    api.updateModelValue(value);
     api.emitChange(value);
     if (option.created) {
       state.query = "";
@@ -467,16 +497,16 @@ const handleOptionSelect = ({ api, emit, nextTick, props, refs, state }) => (opt
       state.inputLength = 20;
     }
     if (props.filterable) {
-      (_a = refs.input) == null ? void 0 : _a.focus();
+      (_a = vm.$refs.input) == null ? void 0 : _a.focus();
     }
     if (props.searchable) {
-      (_b = refs.reference) == null ? void 0 : _b.focus();
+      (_b = vm.$refs.reference) == null ? void 0 : _b.focus();
     }
     if (props.autoClose) {
       state.visible = false;
     }
   } else {
-    emit("update:modelValue", option.value);
+    api.updateModelValue(option.value);
     api.emitChange(option.value);
     if (option.created) {
       state.createdSelected = true;
@@ -493,9 +523,13 @@ const handleOptionSelect = ({ api, emit, nextTick, props, refs, state }) => (opt
     api.scrollToOption(option);
   });
 };
-const setSoftFocus = ({ refs, state }) => () => {
+const initValue = ({ state }) => (vm) => {
+  const isExist = state.initValue.find((val) => val === vm.value);
+  !isExist && state.initValue.push(vm.value);
+};
+const setSoftFocus = ({ vm, state }) => () => {
   state.softFocus = true;
-  const input = refs.input || refs.reference;
+  const input = vm.$refs.input || vm.$refs.reference;
   input == null ? void 0 : input.focus();
 };
 const getValueIndex = (props) => (arr = [], value = null) => {
@@ -515,22 +549,25 @@ const getValueIndex = (props) => (arr = [], value = null) => {
     return index;
   }
 };
-const toggleMenu = ({ refs, state, props }) => () => {
+const toggleMenu = ({ vm, state, props }) => (e) => {
+  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 (!state.selectDisabled) {
-    !props.ignoreEnter && (state.visible = !state.visible);
-    if (state.softFocus && refs.reference) {
-      !props.ignoreEnter && (state.visible = !state.visible);
-      state.softFocus = false;
-    }
+    toggleVisible && !state.softFocus && (state.visible = !state.visible);
+    state.softFocus = false;
     if (state.visible) {
-      const dom = refs.input || refs.reference;
-      dom == null ? void 0 : dom.focus();
+      if (!(props.filterable && props.shape)) {
+        const dom = vm.$refs.input || vm.$refs.reference;
+        dom == null ? void 0 : dom.focus();
+      }
     }
   }
 };
-const selectOption = ({ api, state, props }) => () => {
+const selectOption = ({ api, state, props }) => (e) => {
   if (!state.visible || props.hideDrop) {
-    api.toggleMenu();
+    api.toggleMenu(e);
   } else {
     if (state.options[state.hoverIndex]) {
       api.handleOptionSelect(state.options[state.hoverIndex]);
@@ -539,7 +576,12 @@ const selectOption = ({ api, state, props }) => () => {
 };
 const deleteSelected = ({ api, constants, emit, props, vm, state }) => (event) => {
   event.stopPropagation();
-  const value = props.multiple ? [] : "";
+  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));
+  }
+  const value = props.multiple ? selectedValue : "";
   const refs = vm.$refs;
   if (props.renderType === constants.TYPE.Tree) {
     state.selected = {};
@@ -551,12 +593,14 @@ const deleteSelected = ({ api, constants, emit, props, vm, state }) => (event) =
     refs.selectGrid.clearRadioRow();
   }
   state.showTip = false;
-  emit("update:modelValue", value);
+  api.updateModelValue(value);
   api.emitChange(value);
   state.visible = false;
   emit("clear");
 };
-const deleteTag = ({ api, constants, emit, props, state, vm }) => (event, tag) => {
+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);
@@ -568,7 +612,7 @@ const deleteTag = ({ api, constants, emit, props, state, vm }) => (event, tag) =
       treeIds.push(...api.getChildValue(node.childNodes, props.valueField));
     }
     while (node.parent && !Array.isArray(node.parent.data)) {
-      treeIds.push(node.parent.data[props.valueField]);
+      node.parent.data && treeIds.push(node.parent.data[props.valueField]);
       node = node.parent;
     }
     state.selected.slice().map((node2) => !treeIds.includes(node2[props.valueField]) && treeValue.push(node2[props.valueField]));
@@ -584,9 +628,10 @@ const deleteTag = ({ api, constants, emit, props, state, vm }) => (event, tag) =
       refs.selectGrid.clearSelection();
       refs.selectGrid.setSelection(rows, true);
     }
-    emit("update:modelValue", isTree ? treeValue : value);
+    api.updateModelValue(isTree ? treeValue : value);
     api.emitChange(value);
     emit(constants.EVENT_NAME.removeTag, tag[props.valueField]);
+    nextTick(() => state.key++);
   }
   event.stopPropagation();
 };
@@ -613,13 +658,13 @@ const onOptionDestroy = (state) => (index) => {
     state.options.splice(index, 1);
   }
 };
-const resetInputWidth = ({ refs, state }) => () => {
+const resetInputWidth = ({ vm, state }) => () => {
   var _a, _b, _c;
-  state.inputWidth = ((_c = (_b = (_a = refs.reference) == null ? void 0 : _a.$el) == null ? void 0 : _b.getBoundingClientRect()) == null ? void 0 : _c.width) || 0;
+  state.inputWidth = ((_c = (_b = (_a = vm.$refs.reference) == null ? void 0 : _a.$el) == null ? void 0 : _b.getBoundingClientRect()) == null ? void 0 : _c.width) || 0;
 };
-const handleResize = ({ api, props }) => () => {
+const handleResize = ({ api, props, state }) => () => {
   api.resetInputWidth();
-  if (props.multiple) {
+  if (props.multiple && !state.isDisplayOnly) {
     api.resetInputHeight();
   }
 };
@@ -639,7 +684,7 @@ const checkDefaultFirstOption = (state) => () => {
   for (let i = 0; i !== state.options.length; ++i) {
     const option = state.options[i];
     if (state.query) {
-      if (!option.disabled && !option.groupDisabled && option.visible) {
+      if (!option.disabled && !option.groupDisabled && option.state.visible) {
         state.hoverIndex = i;
         break;
       }
@@ -652,8 +697,10 @@ const checkDefaultFirstOption = (state) => () => {
   }
 };
 const getValueKey = (props) => (item) => {
+  if (!item)
+    return;
   if (Object.prototype.toString.call(item.value).toLowerCase() !== "[object object]") {
-    return item.value;
+    return item.value || item[props.valueField];
   }
   return getObj(item.value, props.valueKey);
 };
@@ -695,120 +742,26 @@ const emptyText = ({ I18N, props, state, t }) => () => {
       }
       return state.selected[props.valueField] || state.remoteData.length > 0;
     }
-    if (props.remote && state.query === "" && state.options.length === 0) {
-      return false;
-    }
-    if (state.filterOrSearch && state.query && state.options.length > 0 && state.filteredOptionsCount === 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);
     }
-  }
-  return null;
-};
-const optmzApis = {
-  exist: (val, multiple) => multiple ? Array.isArray(val) && val.length : val,
-  getValueIndex: (props) => {
-    const { options, valueField, modelValue, multiple } = props;
-    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)) {
-      const lastVal = multiple ? modelValue[modelValue.length - 1] : modelValue;
-      for (let i = 0; i < options.length; 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);
+    if (props.remote && state.query === "" && state.options.length === 0) {
+      if (props.shape === "filter") {
+        return "";
       } else {
-        findPush(modelValue);
+        return false;
       }
     }
-    return sliced;
-  },
-  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);
-  },
-  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];
-  },
-  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 });
   }
+  return null;
 };
-const watchValue = ({ api, constants, dispatch, props, refs, state }) => (value, oldValue) => {
+const watchValue = ({ api, constants, dispatch, props, vm, state }) => (value, oldValue) => {
   if (props.multiple) {
     api.resetInputHeight();
-    if (value && value.length > 0 || refs.input && state.query !== "") {
+    if (value && value.length > 0 || vm.$refs.input && state.query !== "") {
       state.currentPlaceholder = "";
     } else {
       state.currentPlaceholder = state.cachedPlaceHolder;
@@ -819,6 +772,8 @@ const watchValue = ({ api, constants, dispatch, props, refs, state }) => (value,
     }
   }
   api.setSelected();
+  !state.isClickChoose && api.initQuery({ init: true }).then(() => api.setSelected());
+  state.isClickChoose = false;
   if (props.filterable && !props.multiple) {
     state.inputLength = 20;
   }
@@ -827,41 +782,41 @@ const watchValue = ({ api, constants, dispatch, props, refs, state }) => (value,
   }
   state.optimizeStore.flag && optmzApis.setValueIndex({ props, state });
 };
-const calcOverFlow = ({ refs, props, state }) => (height) => {
-  if (!props.multiple || !props.showOverflowTooltip) {
-    return;
-  }
-  state.overflow = false;
-  const tagDom = refs.tags;
-  const tags = tagDom.querySelectorAll(".tiny-tag");
-  if (tags.length) {
-    tagDom.scrollTo && tagDom.scrollTo({ top: 0 });
-    let { x, width } = tags[0].getBoundingClientRect();
-    if (width >= tagDom.getBoundingClientRect().width) {
-      state.overflow = 0;
-    } else {
-      for (let i = 1; i < tags.length; i++) {
-        let tx = tags[i].getBoundingClientRect().x;
-        if (tx == x) {
-          state.overflow = i - 1;
-          break;
+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");
+    if (tags.length) {
+      tagDom.scrollTo && tagDom.scrollTo({ top: 0 });
+      let { x, width } = tags[0].getBoundingClientRect();
+      if (width >= tagDom.getBoundingClientRect().width) {
+        state.overflow = 0;
+      } else {
+        for (let i = 1; i < tags.length; i++) {
+          let tx = tags[i].getBoundingClientRect().x;
+          if (tx == x) {
+            state.overflow = i - 1;
+            break;
+          }
         }
       }
     }
+    vm.$refs.select.style.height = vm.$refs.select.style.height || height;
+    vm.$refs.reference.$el.style.position = "absolute";
+    const inputWidth = vm.$refs.select.getBoundingClientRect().width;
+    const position = state.visible ? "absolute" : "";
+    state.selectFiexd = {
+      height,
+      position,
+      width: inputWidth + "px",
+      zIndex: PopupManager.nextZIndex()
+    };
+    state.inputWidth = inputWidth;
   }
-  refs.select.style.height = refs.select.style.height || height;
-  refs.reference.$el.style.position = "absolute";
-  const inputWidth = refs.select.getBoundingClientRect().width;
-  const position = state.visible ? "absolute" : "";
-  state.selectFiexd = {
-    height,
-    position,
-    width: inputWidth + "px",
-    zIndex: PopupManager.nextZIndex()
-  };
-  state.inputWidth = inputWidth;
 };
 const postOperOfToVisible = ({ props, state, constants }) => {
+  var _a;
   if (props.multiple) {
     return;
   }
@@ -872,7 +827,7 @@ const postOperOfToVisible = ({ props, state, constants }) => {
       if (props.filterable && props.allowCreate && state.createdSelected && state.createdLabel) {
         state.selectedLabel = state.createdLabel;
       } else {
-        state.selectedLabel = state.selected.state.currentLabel || state.selected.currentLabel;
+        state.selectedLabel = ((_a = state.selected.state) == null ? void 0 : _a.currentLabel) || state.selected.currentLabel;
       }
       if (props.filterable) {
         state.query = state.selectedLabel;
@@ -885,69 +840,92 @@ const postOperOfToVisible = ({ props, state, constants }) => {
 };
 const toVisible = ({ constants, state, props, vm, api, nextTick }) => () => {
   var _a;
-  const refs = vm.$refs;
   state.selectEmitter.emit(constants.EVENT_NAME.destroyPopper);
   props.remote && props.dropOnlySearch && (state.showWarper = false);
-  (_a = refs.input) == null ? void 0 : _a.blur();
+  (_a = vm.$refs.input) == null ? void 0 : _a.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;
   }
   api.resetHoverIndex();
   nextTick(() => {
-    if (refs.input && refs.input.value === "" && state.selected.length === 0) {
+    if (vm.$refs.input && vm.$refs.input.value === "" && state.selected.length === 0) {
       state.currentPlaceholder = state.cachedPlaceHolder;
     }
-    if (refs.selectGrid) {
-      refs.selectGrid.clearScroll();
+    if (vm.$refs.selectGrid) {
+      vm.$refs.selectGrid.clearScroll();
     }
   });
   postOperOfToVisible({ props, state, constants });
 };
 const toHide = ({ constants, state, props, vm, api }) => () => {
   var _a, _b;
-  const refs = vm.$refs;
   state.selectEmitter.emit(constants.COMPONENT_NAME.SelectDropdown, constants.EVENT_NAME.updatePopper);
   if (state.filterOrSearch) {
-    state.query = props.remote || props.searchable ? "" : props.renderType !== constants.TYPE.Tree ? state.selectedLabel : "";
+    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 = refs.input) == null ? void 0 : _a.focus() : (_b = refs.reference) == null ? void 0 : _b.focus();
+      props.filterable ? (_a = vm.$refs.input) == null ? void 0 : _a.focus() : (_b = vm.$refs.reference) == null ? void 0 : _b.focus();
     } else {
       if (!props.remote) {
         state.selectEmitter.emit(constants.EVENT_NAME.queryChange, "");
         state.selectEmitter.emit(constants.COMPONENT_NAME.OptionGroup, constants.EVENT_NAME.queryChange);
       }
-      if (state.selectedLabel) {
+      if (state.selectedLabel && !props.shape) {
         state.currentPlaceholder = state.selectedLabel;
         state.selectedLabel = "";
       }
     }
   }
-  if (refs.selectGrid) {
-    refs.selectGrid.clearSelection();
-    refs.selectGrid.setSelection(state.selected, true);
+  if (vm.$refs.selectGrid) {
+    let { fullData } = vm.$refs.selectGrid.getTableData();
+    if (props.multiple) {
+      const selectedIds = state.selected.map((sel) => sel[props.valueField]);
+      vm.$refs.selectGrid.clearSelection();
+      vm.$refs.selectGrid.setSelection(
+        fullData.filter((row) => ~selectedIds.indexOf(row[props.valueField])),
+        true
+      );
+    } else {
+      vm.$refs.selectGrid.clearRadioRow();
+      vm.$refs.selectGrid.setRadioRow(find(fullData, (item) => props.modelValue == item[props.valueField]));
+    }
     if (state.filterOrSearch && typeof props.filterMethod === "function") {
-      refs.selectGrid.handleTableData(true);
-    } else if (state.filterOrSearch && props.remote && typeof props.remoteMethod === "function") {
-      refs.selectGrid.handleTableData();
+      vm.$refs.selectGrid.handleTableData(true);
+    } else if (state.filterOrSearch && props.remote && (typeof props.remoteMethod === "function" || typeof props.initQuery === "function")) {
+      vm.$refs.selectGrid.handleTableData();
     }
   }
 };
-const watchVisible = ({ api, constants, emit, state, refs }) => (value) => {
+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 (api.onCopying()) {
     return;
   }
+  setTimeout(() => {
+    if (!value && !state.selectedLabel) {
+      state.cachedOptions.forEach((item) => {
+        item.state.visible = true;
+      });
+    }
+  }, 200);
   value ? api.toHide() : api.toVisible();
   emit(constants.EVENT_NAME.visibleChange, value);
   setTimeout(() => {
     state.selectEmitter.emit(constants.EVENT_NAME.updatePopper);
-  });
+  }, props.updateDelay);
+  if (!value && props.shape === "filter") {
+    state.softFocus = false;
+  }
   if (value && state.optimizeStore.flag) {
     optmzApis.createMacro(() => {
-      optmzApis.setScrollTop({ refs, state });
+      optmzApis.setScrollTop({ refs: vm.$refs, state });
       api.getScrollListener();
     });
   }
@@ -967,7 +945,7 @@ const watchOptions = ({ api, constants, nextTick, parent, props, state }) => ()
       api.setSelected();
     }
   });
-  if (props.defaultFirstOption && (props.filterabl || props.searchable || props.remote) && state.filteredOptionsCount) {
+  if (props.defaultFirstOption && (props.filterable || props.searchable || props.remote) && state.filteredOptionsCount) {
     api.checkDefaultFirstOption();
   }
 };
@@ -982,7 +960,7 @@ const handleCopyClick = ({ parent, props, state }) => () => {
   document.execCommand("copy");
   parent.$el.removeChild(input);
 };
-const selectChange = ({ emit, props, state }) => ({ $table, selection, checked, row }) => {
+const selectChange = ({ emit, props, state, api }) => ({ $table, selection, checked, row }) => {
   const { textField, valueField } = props;
   const remoteItem = (row2) => {
     const removeItem = find(state.selected, (item) => item[valueField] === row2[valueField]);
@@ -993,10 +971,10 @@ const selectChange = ({ emit, props, state }) => ({ $table, selection, checked,
   } else {
     checked ? state.selected = state.selected.concat(
       selection.filter((row2) => !~props.modelValue.indexOf(row2[valueField]))
-    ) : $table.tableData.forEach((row2) => remoteItem(row2));
+    ) : $table.tableFullData.forEach((row2) => remoteItem(row2));
   }
   const keys = state.selected.map((item) => item[valueField]);
-  emit("update:modelValue", keys);
+  api.updateModelValue(keys);
   emit("change", keys, state.selected);
 };
 const getcheckedData = ({ props, state }) => () => {
@@ -1010,13 +988,13 @@ const getcheckedData = ({ props, state }) => () => {
     return checkedKey;
   }
 };
-const radioChange = ({ emit, props, state }) => ({ row }) => {
+const radioChange = ({ emit, 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];
-  emit("update:modelValue", row.value);
+  api.updateModelValue(row.value);
   emit("change", row);
 };
 const getTreeData = (props) => (data) => {
@@ -1033,22 +1011,32 @@ const getTreeData = (props) => (data) => {
   getChild(data, null);
   return nodes;
 };
-const treeNodeClick = ({ emit, props, state }) => (data) => {
+const treeNodeClick = ({ emit, props, state, api, vm }) => (data) => {
   if (!props.multiple) {
     data.currentLabel = data[props.textField];
     data.value = data[props.valueField];
     state.selected = data;
     state.visible = false;
-    emit("update:modelValue", data.value);
+    api.updateModelValue(data.value);
     emit("change", data);
+  } else {
+    if (props.treeOp.checkOnClickNode) {
+      const checkedNodes = vm.$refs.selectTree.getCheckedNodes();
+      const checkedKeys = vm.$refs.selectTree.getCheckedKeys();
+      api.nodeCheckClick(data, { checkedNodes, checkedKeys });
+    }
   }
 };
-const nodeCheckClick = ({ emit, props }) => (data, { checkedKeys, checkedNodes }) => {
-  checkedNodes.forEach((node) => {
+const nodeCheckClick = ({ emit, props, state, api }) => (data, { checkedKeys, checkedNodes }) => {
+  const selected = state.selected.map((item) => api.getValueKey(item));
+  if (isEqual(selected, checkedKeys)) {
+    return;
+  }
+  state.selected = checkedNodes.filter((node) => {
     node.currentLabel = node[props.textField];
     node.value = node[props.valueField];
   });
-  emit("update:modelValue", checkedKeys);
+  api.updateModelValue(checkedKeys);
   emit("change", checkedKeys, checkedNodes);
 };
 const nodeCollapse = ({ state, constants }) => () => {
@@ -1094,11 +1082,23 @@ const watchPropsOption = ({ constants, parent, props, state }) => () => {
     } else if (renderType === constants.TYPE.Grid) {
       state.gridData = data;
     } else {
+      let sortData = data.slice();
+      if (props.multiple) {
+        const requiredData = [];
+        sortData = sortData.filter((item) => {
+          if (item.required) {
+            requiredData.push(item);
+            return false;
+          }
+          return true;
+        });
+        sortData = requiredData.concat(sortData);
+      }
       if (props.cacheOp && props.cacheOp.key) {
         state.memorize = new Memorize(props.cacheOp);
-        state.datas = state.memorize.assemble(data.slice());
+        state.datas = state.memorize.assemble(sortData.slice());
       } else {
-        state.datas = data;
+        state.datas = sortData;
       }
     }
   });
@@ -1114,19 +1114,23 @@ const buildRadioConfig = ({ props, state }) => () => {
   const radioConfig = props.radioConfig;
   return __spreadValues(__spreadValues({}, radioConfig), { checkRowKey, highlight });
 };
-const onMouseenterNative = ({ state }) => () => {
+const onMouseenterNative = ({ state }) => (e) => {
+  if (e.target === e.currentTarget)
+    return;
   state.inputHovering = true;
   if (state.searchSingleCopy && state.selectedLabel) {
     state.softFocus = true;
   }
 };
-const onMouseleaveNative = ({ state }) => () => {
+const onMouseleaveNative = ({ state }) => (e) => {
+  if (e.target === e.currentTarget)
+    return;
   state.inputHovering = false;
   if (state.searchSingleCopy && state.selectedLabel) {
     state.softFocus = false;
   }
 };
-const onCopying = ({ state, refs }) => () => state.searchSingleCopy && state.selectedLabel && refs.reference && refs.reference.hasSelection && refs.reference.hasSelection();
+const onCopying = ({ state, vm }) => () => 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] || {};
@@ -1137,11 +1141,87 @@ const watchHoverIndex = ({ state }) => (value) => {
     option.hover = state.hoverOption === option;
   });
 };
-const mounted = ({ api, parent, state, props, refs }) => () => {
+const handleDropdownClick = ({ emit }) => ($event) => {
+  emit("dropdown-click", $event);
+};
+const handleEnterTag = ({ state }) => ($event, key) => {
+  const target = $event.target;
+  if (target && target.scrollWidth > target.offsetWidth) {
+    state.tooltipContent = __spreadProps(__spreadValues({}, state.tooltipContent), { [key]: target.innerText });
+  }
+};
+const calcCollapseTags = ({ state, vm }) => () => {
+  if (state.inputHovering) {
+    return state.isHidden = true;
+  }
+  const tags = vm.$refs.tags;
+  if (!tags) {
+    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"));
+  let { total, dom, idx } = { total: collapseTagWidth, dom: null, idx: 0 };
+  tagList.some((tag, index) => {
+    if (tag !== collapseTag) {
+      const { width: tagContentWidth, marginRight: marginRight2 } = tag && window.getComputedStyle(tag);
+      total += parseFloat(tagContentWidth) + parseFloat(marginRight2);
+    }
+    if (tag !== collapseTag && total > tagsWidth && !dom) {
+      dom = tag;
+      idx = index;
+    }
+  });
+  let isOneLine = total - collapseTagWidth <= tagsWidth;
+  if (isOneLine) {
+    return state.isHidden = true;
+  }
+  if (dom) {
+    dom.before(collapseTag);
+    state.isHidden = false;
+  } else {
+    state.isHidden = true;
+  }
+  state.collapseTagsLength = tagList.length - idx;
+};
+const watchInputHover = ({ vm }) => (newVal) => {
+  const [inputHovering, visible] = newVal;
+  if (!inputHovering && !visible) {
+    const tags = vm.$refs.tags;
+    const content = vm.$refs["tags-content"];
+    tags && content && tags.scrollTo({ top: content });
+  }
+};
+const initQuery = ({ props, state, constants, vm }) => ({ init } = {}) => {
+  const isRemote = props.filterable && props.remote && (typeof props.remoteMethod === "function" || typeof props.initQuery === "function");
+  const isGrid = props.renderType === constants.TYPE.Grid;
+  let selected;
+  if (isRemote && isGrid && props.initQuery) {
+    let initData = props.initQuery(props.modelValue, props.extraQueryParams, !!init);
+    if (initData.then) {
+      return new Promise((resolve) => {
+        initData.then((selected2) => {
+          state.remoteData = selected2;
+          vm.$refs.selectGrid.loadData(selected2);
+          resolve(selected2);
+        });
+      });
+    }
+    selected = initData;
+    state.remoteData = selected;
+    vm.$refs.selectGrid.loadData(selected);
+  }
+  return Promise.resolve(selected);
+};
+const mounted = ({ api, parent, state, props, vm }) => () => {
   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 inputClientRect = (inputEl == null ? void 0 : inputEl.getBoundingClientRect()) || {};
   if (inputEl === document.activeElement) {
     (_a = document.activeElement) == null ? void 0 : _a.blur();
   }
@@ -1150,31 +1230,127 @@ const mounted = ({ api, parent, state, props, refs }) => () => {
   if (props.multiple && Array.isArray(props.modelValue) && props.modelValue.length > 0) {
     state.currentPlaceholder = "";
   }
-  if (inputClientRect) {
-    state.initialInputHeight = inputClientRect.height || sizeMap[state.selectSize];
-    addResizeListener(parentEl, api.handleResize);
-    if (refs.tags) {
-      addResizeListener(refs.tags, api.resetInputHeight);
-    }
-    if (props.remote && props.multiple) {
-      api.resetInputHeight();
-    }
-    state.inputWidth = inputClientRect.width;
+  state.initialInputHeight = state.isDisplayOnly ? sizeMap[state.selectSize] : inputClientRect.height || sizeMap[state.selectSize];
+  addResizeListener(parentEl, api.handleResize);
+  if (vm.$refs.tags) {
+    addResizeListener(vm.$refs.tags, api.resetInputHeight);
   }
-  api.setSelected();
+  if (props.remote && props.multiple) {
+    api.resetInputHeight();
+  }
+  state.inputWidth = inputClientRect.width;
+  api.initQuery({ init: true }).then(() => api.setSelected());
   if (props.dataset) {
     api.watchPropsOption();
   }
 };
-const unMount = ({ api, parent, refs, state }) => () => {
+const unMount = ({ api, parent, vm, state }) => () => {
   if (parent.$el && api.handleResize) {
     removeResizeListener(parent.$el, api.handleResize);
   }
-  if (refs.tags) {
-    removeResizeListener(refs.tags, api.resetInputHeight);
+  if (vm.$refs.tags) {
+    removeResizeListener(vm.$refs.tags, api.resetInputHeight);
   }
   state.popperElm = null;
-  state.optimizeStore.flag && optmzApis.removeScrollListener({ api, refs, state });
+  state.optimizeStore.flag && optmzApis.removeScrollListener({ api, refs: vm.$refs, state });
+};
+const optmzApis = {
+  exist: (val, multiple) => multiple ? Array.isArray(val) && val.length : val,
+  getValueIndex: (props) => {
+    const { options, valueField, modelValue, multiple } = props;
+    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)) {
+      const lastVal = multiple ? modelValue[modelValue.length - 1] : modelValue;
+      for (let i = 0; i < options.length; 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;
+  },
+  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);
+  },
+  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];
+  },
+  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 });
+  }
 };
 const computeOptimizeOpts = ({ props, state }) => () => {
   const { optimization } = props;
@@ -1190,7 +1366,7 @@ const computeOptimizeOpts = ({ props, state }) => () => {
     return optOpts;
   }
 };
-const watchOptimizeOpts = ({ api, props, refs, state }) => () => {
+const watchOptimizeOpts = ({ api, props, vm, state }) => () => {
   const { optimizeOpts, optimizeStore } = state;
   if (optimizeOpts) {
     const { virtualScroll, optionHeight } = optimizeOpts;
@@ -1201,26 +1377,26 @@ const watchOptimizeOpts = ({ api, props, refs, state }) => () => {
       optmzApis.process({ props, state });
       optmzApis.createMacro(() => {
         const itemFn = (i) => optionHeight * (optimizeStore.startIndex + i);
-        optmzApis.addScrollListener({ api, refs, state });
-        optmzApis.updateItems({ refs, state, itemFn });
+        optmzApis.addScrollListener({ api, refs: vm.$refs, state });
+        optmzApis.updateItems({ refs: vm.$refs, state, itemFn });
       });
     }
   }
 };
-const getScrollListener = ({ props, refs, state }) => {
+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(refs);
+    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, state, itemFn });
+        optmzApis.updateItems({ refs: vm.$refs, state, itemFn });
       });
     }
   };
@@ -1234,19 +1410,118 @@ const computeMultipleLimit = ({ props, state }) => () => {
   const { optimizeOpts, optimizeStore } = state;
   return optmzApis.natural(multiple && optimizeStore.flag ? multipleLimit || optimizeOpts.limit : multipleLimit);
 };
-const computedGetIcon = ({ constants, designConfig }) => (name = "downWard") => {
-  return (designConfig == null ? void 0 : designConfig.icons[name]) || (constants == null ? void 0 : constants.ICON_MAP[name]);
+const updateModelValue = ({ emit, state }) => (value) => {
+  state.isClickChoose = true;
+  emit("update:modelValue", value);
+};
+const getLabelSlotValue = ({ props, state }) => (item) => {
+  const datas = state.optimizeStore.flag ? state.optimizeStore.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), {
+    label: item.state ? item.state.currentLabel : item.currentLabel,
+    value
+  });
+  return ["grid", "tree"].includes(props.renderType) ? item : obj;
+};
+const computedTagsStyle = ({ props, parent, state }) => () => {
+  const isReadonly = props.disabled || (parent.form || {}).disabled || props.displayOnly;
+  return {
+    "max-width": isReadonly ? "" : state.inputWidth - state.inputPaddingRight + "px",
+    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 ? 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 computedShowCopy = ({ props, state }) => () => props.multiple && props.copyable && state.inputHovering && state.selected.length;
+const computedOptionsAllDisabled = (state) => () => state.options.filter((option) => option.visible).every((option) => option.disabled);
+const computedDisabledTooltipContent = (state) => () => state.selected.map((item) => item.state ? item.state.currentLabel : item.currentLabel).join("\uFF1B");
+const computedSelectDisabled = ({ props, parent }) => () => props.disabled || (parent.form || {}).disabled || props.displayOnly || (parent.form || {}).displayOnly;
+const computedIsExpandAll = (props) => () => {
+  const { defaultExpandAll, lazy } = props.treeOp;
+  return !lazy && defaultExpandAll !== false;
+};
+const loadTreeData = ({ state, vm, props, api }) => ({ data = [], init = false }) => {
+  const getTreeDatas = (datas, newDatas = []) => {
+    datas.forEach(({ data: data2, childNodes }) => {
+      let temData = __spreadProps(__spreadValues({}, data2), { children: [] });
+      if (childNodes && childNodes.length) {
+        getTreeDatas(childNodes, temData.children);
+      }
+      newDatas.push(temData);
+    });
+  };
+  if (init) {
+    state.treeData = data;
+  } else if (vm.$refs.selectTree) {
+    const treeData = [];
+    getTreeDatas(vm.$refs.selectTree.state.root.childNodes, treeData);
+    state.treeData = treeData;
+    const { multiple, treeOp } = props;
+    if (multiple && treeOp.lazy) {
+      const checkedNodes = vm.$refs.selectTree.getCheckedNodes();
+      const checkedKeys = vm.$refs.selectTree.getCheckedKeys();
+      api.nodeCheckClick(null, { checkedNodes, checkedKeys });
+    }
+  }
+};
+const watchInitValue = ({ props, emit }) => (value) => {
+  if (props.multiple) {
+    let modelValue = props.modelValue.slice();
+    value.forEach((val) => {
+      modelValue = modelValue.filter((item) => item !== val);
+    });
+    emit("update:modelValue", value.concat(modelValue));
+  }
+};
+const watchShowClose = ({ nextTick, state, parent }) => () => {
+  nextTick(() => {
+    const parentEl = parent.$el;
+    const inputEl = parentEl.querySelector("input.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 computedGetTagType = ({ designConfig, props }) => () => {
+  var _a;
+  if (((_a = designConfig == null ? void 0 : designConfig.props) == null ? void 0 : _a.tagType) && !props.tagType) {
+    return designConfig.props.tagType;
+  }
+  return props.tagType;
+};
+const computedShowDropdownIcon = ({ props, state }) => () => {
+  return !state.showClose && !(props.remote && props.filterable && !props.remoteConfig.showIcon);
 };
 export {
   blur,
   buildRadioConfig,
   buildSelectConfig,
+  calcCollapseTags,
   calcOverFlow,
   checkDefaultFirstOption,
   computeCollapseTags,
   computeMultipleLimit,
   computeOptimizeOpts,
+  computedCollapseTagSize,
+  computedDisabledTooltipContent,
   computedGetIcon,
+  computedGetTagType,
+  computedIsExpandAll,
+  computedOptionsAllDisabled,
+  computedReadonly,
+  computedSelectDisabled,
+  computedShowClose,
+  computedShowCopy,
+  computedShowDropdownIcon,
+  computedShowNewOption,
+  computedTagsStyle,
   debouncRquest,
   defaultOnQueryChange,
   deletePrevTag,
@@ -1257,6 +1532,7 @@ export {
   emptyText,
   focus,
   getChildValue,
+  getLabelSlotValue,
   getOption,
   getPluginOption,
   getScrollListener,
@@ -1270,11 +1546,16 @@ export {
   handleClose,
   handleComposition,
   handleCopyClick,
+  handleDropdownClick,
+  handleEnterTag,
   handleFocus,
   handleMenuEnter,
   handleOptionSelect,
   handleQueryChange,
   handleResize,
+  initQuery,
+  initValue,
+  loadTreeData,
   managePlaceholder,
   mounted,
   navigateOptions,
@@ -1295,7 +1576,6 @@ export {
   scrollToOption,
   selectChange,
   selectOption,
-  setGridOrTreeSelected,
   setSelected,
   setSoftFocus,
   showTip,
@@ -1306,10 +1586,14 @@ export {
   toggleMenu,
   treeNodeClick,
   unMount,
+  updateModelValue,
   watchHoverIndex,
+  watchInitValue,
+  watchInputHover,
   watchOptimizeOpts,
   watchOptions,
   watchPropsOption,
+  watchShowClose,
   watchValue,
   watchVisible
 };