@opentiny/vue-renderless 3.16.1 → 3.17.1

package/input/index.js

@@ -77,7 +77,9 @@ const calcTextareaHeight = ({
   if (mode === "mobile") {
     height = Math.max(hiddenTextarea.scrollHeight, constants.TEXTAREA_HEIGHT_MOBILE);
   }
-  if (boxSizing === STYLE.ContentBox) {
+  if (boxSizing === STYLE.BorderBox) {
+    height = height + borderSize * 2 + paddingSize;
+  } else if (boxSizing === STYLE.ContentBox) {
     height = height - paddingSize;
   }
   hiddenTextarea.value = "";
@@ -265,7 +267,9 @@ const hasSelection = (api) => () => {
   return input && input.selectionStart !== input.selectionEnd;
 };
 const handleEnterDisplayOnlyContent = ({ state, props }) => ($event, type) => {
-  const target = $event.target;
+  if (type === "textarea" && props.popupMore)
+    return;
+  const target = type === "textarea" ? $event.target.querySelector(".text-box") : $event.target;
   state.displayOnlyTooltip = "";
   if (!target) {
     return;
@@ -333,6 +337,31 @@ const getDisplayOnlyText = ({ parent, state, props }) => () => {
   const showEmptyValue = typeof props.showEmptyValue === "boolean" ? props.showEmptyValue : (parent.tinyForm || {}).showEmptyValue;
   return showEmptyValue ? text : text || "-";
 };
+const setShowMoreBtn = ({ state, vm }) => (init) => {
+  if (state.timer)
+    clearTimeout(state.timer);
+  state.timer = setTimeout(() => {
+    const textBox = vm.$refs && vm.$refs.textBox;
+    if (!textBox)
+      return;
+    if (init && textBox.offsetHeight === 0) {
+      let textBoxClone = textBox.cloneNode(true);
+      textBoxClone.style.visibility = "hidden";
+      textBoxClone.style.position = "absolute";
+      textBoxClone.style.left = "-9999px";
+      document.body.appendChild(textBoxClone);
+      if (textBoxClone.scrollHeight > textBoxClone.offsetHeight) {
+        state.showMoreBtn = true;
+      }
+      document.body.removeChild(textBoxClone);
+      textBoxClone = null;
+    } else if (textBox.scrollHeight > textBox.offsetHeight) {
+      state.showMoreBtn = true;
+    } else {
+      state.showMoreBtn = false;
+    }
+  }, 100);
+};
 export {
   blur,
   calcIconOffset,
@@ -362,6 +391,7 @@ export {
   select,
   setInputDomValue,
   setNativeInputValue,
+  setShowMoreBtn,
   showBox,
   textLength,
   updateIconOffset,

package/input/vue.js

@@ -34,9 +34,11 @@ import {
   inputStyle,
   handleEnterTextarea,
   handleLeaveTextarea,
-  getDisplayOnlyText
+  getDisplayOnlyText,
+  setShowMoreBtn
 } from "./index";
 import useStorageBox from "../tall-storage/vue-storage-box";
+import { on, off } from "../common/deps/dom";
 const api = [
   "blur",
   "showBox",
@@ -123,6 +125,7 @@ const initState = ({
     nativeInputValue: computed(
       () => props.modelValue === null || props.modelValue === void 0 ? "" : String(props.modelValue)
     ),
+    tooltipConfig: computed(() => parent.tinyForm ? parent.tinyForm.tooltipConfig : {}),
     isWordLimitVisible: computed(
       () => (props.showWordLimit && parent.$attrs.maxlength || props.counter) && (parent.type === "text" || parent.type === "textarea") && !state.inputDisabled && !props.readonly && !props.showPassword
     ),
@@ -130,6 +133,9 @@ const initState = ({
       () => (props.displayOnly || (parent.tinyForm || {}).displayOnly) && ["text", "textarea", "password", "number"].includes(props.type)
     ),
     displayOnlyTooltip: "",
+    showMoreBtn: false,
+    showDisplayOnlyBox: false,
+    timer: null,
     hiddenPassword: computed(() => api2.hiddenPassword()),
     displayedMaskValue: computed(() => api2.getDisplayedMaskValue()),
     displayOnlyText: computed(() => api2.getDisplayOnlyText())
@@ -155,6 +161,7 @@ const initApi = ({
     showBox: showBox(state),
     clear: clear(emit),
     getInput: getInput(vm),
+    setShowMoreBtn: setShowMoreBtn({ state, vm }),
     handleChange: handleChange(emit),
     watchFormSelect: watchFormSelect({ emit, props, state }),
     calcIconOffset: calcIconOffset({ CLASS_PREFIX, parent }),
@@ -244,6 +251,9 @@ const initWatch = ({
       if (props.validateEvent) {
         api2.dispatch(componentName, eventName.change, [value]);
       }
+      if (props.type === "textarea" && props.popupMore && state.isDisplayOnly) {
+        api2.setShowMoreBtn();
+      }
       api2.setInputDomValue();
     }
   );
@@ -292,7 +302,7 @@ const initWatch = ({
     { immediate: true }
   );
 };
-const renderless = (props, { computed, onMounted, onUpdated, reactive, toRefs, watch, inject }, { vm, refs, parent, emit, constants, nextTick, broadcast, dispatch, mode }) => {
+const renderless = (props, { computed, onMounted, onBeforeUnmount, onUpdated, reactive, toRefs, watch, inject }, { vm, refs, parent, emit, constants, nextTick, broadcast, dispatch, mode }) => {
   const api2 = {};
   const componentName = constants.COMPONENT_NAME.FormItem;
   const eventName = { change: "form.change", blur: "form.blur" };
@@ -313,6 +323,15 @@ const renderless = (props, { computed, onMounted, onUpdated, reactive, toRefs, w
     api2.setInputDomValue();
     dispatch("Select", "input-mounted", vm.$el);
     dispatch("Tooltip", "tooltip-update", vm.$el);
+    if (props.type === "textarea" && props.popupMore && state.isDisplayOnly) {
+      api2.setShowMoreBtn(true);
+      on(window, "resize", api2.setShowMoreBtn);
+    }
+  });
+  onBeforeUnmount(() => {
+    if (props.type === "textarea" && props.popupMore && state.isDisplayOnly) {
+      off(window, "resize", api2.setShowMoreBtn);
+    }
   });
   onUpdated(() => {
     nextTick(api2.updateIconOffset);

package/nav-menu/index.js

@@ -145,7 +145,7 @@ const mounted = ({
   on(window, "resize", api.calcWidth);
   if (router) {
     state.afterEach = () => {
-      api.setActiveMenu(api.getSelectedIndex(route.path));
+      api.setActiveMenu(api.getSelectedIndex(router.currentRoute.path));
     };
     router.afterEach(state.afterEach);
   }

package/numeric/index.js

@@ -196,6 +196,9 @@ const setCurrentValue = ({
   }
 };
 const handleInput = ({ state, api, emit, props }) => (event) => {
+  if (event.isComposing) {
+    return;
+  }
   const { fraction } = state.format;
   const emitError = () => {
     if (state.pasting) {
@@ -206,7 +209,7 @@ const handleInput = ({ state, api, emit, props }) => (event) => {
   if (value !== "-" && api.getDecimal(value).isNaN()) {
     emitError();
     if (!(value === "" && props.allowEmpty)) {
-      value = !value.includes("e") ? state.lastInput : value;
+      value = state.lastInput;
     }
   } else {
     value = value.split(".").map((a, i) => {

package/option/vue.js

@@ -105,16 +105,16 @@ const initOnBeforeUnmount = ({ onBeforeUnmount, props, select, vm, state }) => {
     select.onOptionDestroy(select.state.options.findIndex((opt) => opt.state === state));
   });
 };
-const initSelectState = ({ state, select, markRaw, props }) => {
-  let vm = __spreadProps(__spreadValues({}, props), { state });
-  select.state.options.push(markRaw(vm));
-  select.state.cachedOptions.push(markRaw(vm));
+const initSelectState = ({ state, select, props, toRefs, reactive }) => {
+  let vm = reactive(__spreadProps(__spreadValues({}, toRefs(props)), { state }));
+  select.state.options.push(vm);
+  select.state.cachedOptions.push(vm);
   select.state.optionsIndex++;
   state.index = select.state.optionsIndex;
   select.state.optionsCount++;
   select.state.filteredOptionsCount++;
 };
-const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, watch, inject, markRaw }, { vm, parent }) => {
+const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, watch, inject, markRaw, toRefs }, { vm, parent }) => {
   const api2 = {};
   const select = inject("select");
   const constants = select._constants;
@@ -123,7 +123,7 @@ const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, wat
   initWatch({ watch, props, state, select, constants });
   initOnMounted({ onMounted, props, api: api2, vm, state, constants, select });
   initOnBeforeUnmount({ onBeforeUnmount, props, select, vm, state });
-  initSelectState({ state, select, markRaw, props });
+  initSelectState({ state, select, props, toRefs, reactive });
   parent.$on(constants.EVENT_NAME.handleGroupDisabled, api2.handleGroupDisabled);
   return api2;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-renderless",
-  "version": "3.16.1",
+  "version": "3.17.1",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "homepage": "https://opentiny.design/tiny-vue",
   "keywords": [

package/picker/mb.js

@@ -12,6 +12,7 @@ const timeMobileToggle = ({ state, props, api }) => (visible) => {
     return;
   if (visible) {
     state.timeMobileOption.value = api.dateToTimeArray(props.modelValue);
+    state.timeMobileOption.defaultValue = api.dateToTimeArray(props.defaultValue);
   }
   state.timeMobileOption.visible = visible;
 };
@@ -20,7 +21,11 @@ const timeMobileConfirm = ({ state, api }) => () => {
 };
 const dateToTimeArray = (value) => {
   const date = new Date(value);
-  return [date.getHours(), date.getMinutes(), date.getSeconds()];
+  if (isNaN(date.getTime())) {
+    return [];
+  } else {
+    return [date.getHours(), date.getMinutes(), date.getSeconds()];
+  }
 };
 const timeArrayToDate = ({ props }) => (value) => {
   const timeArr = value;

package/picker/vue.js

@@ -132,7 +132,8 @@ const initState = ({ api: api2, reactive, vm, computed, props, utils, parent, br
     timeMobileOption: {
       visible: false,
       type: props.type,
-      value: [0, 0, 0]
+      value: [0, 0, 0],
+      defaultValue: [0, 0, 0]
     },
     isDateMobileComponent: computed(
       () => [

package/select/index.js

@@ -52,8 +52,8 @@ const showTip = ({ props, state, vm }) => (show) => {
   }
 };
 const gridOnQueryChange = ({ props, vm, constants, state }) => (value) => {
-  const { multiple, valueField, filterMethod, filterable, remote, remoteMethod } = props;
-  if (filterable && typeof filterMethod === "function") {
+  const { multiple, valueField, filterMethod, remote, remoteMethod } = props;
+  if ((props.filterable || props.searchable) && typeof filterMethod === "function") {
     const table = vm.$refs.selectGrid.$refs.tinyTable;
     const fullData = table.afterFullData;
     vm.$refs.selectGrid.scrollTo(null, 0);
@@ -106,7 +106,7 @@ const queryChange = ({ props, state, constants }) => (value, isInput) => {
 };
 const setFilteredSelectCls = (nextTick, state, props) => {
   nextTick(() => {
-    if (props.multiple && props.showAlloption && props.filterable && state.query && !props.remote) {
+    if (props.multiple && props.showAlloption && (props.filterable || props.searchable) && state.query && !props.remote) {
       const filterSelectedVal = state.options.filter((item) => item.state.visible && item.state.itemSelected).map((opt) => opt.value);
       const visibleOptions = state.options.filter((item) => item.state.visible);
       if (filterSelectedVal.length === visibleOptions.length) {
@@ -133,7 +133,7 @@ const handleQueryChange = ({ api, constants, nextTick, props, vm, state }) => (v
   }
   if (props.renderType === constants.TYPE.Tree) {
     state.previousQuery = value;
-    if (props.filterable && typeof props.filterMethod === "function") {
+    if ((props.filterable || props.searchable) && typeof props.filterMethod === "function") {
       vm.$refs.selectTree && vm.$refs.selectTree.filter(value);
     }
   }
@@ -146,8 +146,11 @@ const handleQueryChange = ({ api, constants, nextTick, props, vm, state }) => (v
     }
   });
   state.hoverIndex = -1;
-  if (props.multiple && props.filterable && !props.shape) {
+  if (props.multiple && (props.filterable || props.searchable) && !props.shape) {
     nextTick(() => {
+      if (!vm.$refs.input) {
+        return;
+      }
       const length = vm.$refs.input.value.length * 15 + 20;
       state.inputLength = state.collapseTags ? Math.min(50, length) : length;
       api.managePlaceholder();
@@ -302,7 +305,7 @@ const getResultOfSetSelected = ({ state, isGrid, isTree, api, props }) => {
   api.clearNoMatchValue(newModelValue);
   return result;
 };
-const setGridOrTreeSelected = ({ props, state, vm, isTree, api }) => {
+const setGridOrTreeSelected = ({ props, state, vm, isTree, api, init }) => {
   if (!props.modelValue) {
     state.selectedLabel = "";
     state.selected = {};
@@ -311,7 +314,7 @@ const setGridOrTreeSelected = ({ props, state, vm, isTree, api }) => {
     vm.$refs.selectTree && vm.$refs.selectTree.setCurrentKey && vm.$refs.selectTree.setCurrentKey(null);
     return;
   }
-  const isRemote = props.filterable && props.remote && (typeof props.remoteMethod === "function" || typeof props.initQuery === "function");
+  const isRemote = (props.filterable || props.searchable) && props.remote && (typeof props.remoteMethod === "function" || typeof props.initQuery === "function");
   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)) {
@@ -321,26 +324,28 @@ const setGridOrTreeSelected = ({ props, state, vm, isTree, api }) => {
   const obj = Object.assign({}, data);
   const label = data[props.textField];
   obj.currentLabel = label;
+  state.selectedLabel = init && !label && props.initLabel ? props.initLabel : label;
   state.selectedLabel = label;
   state.selected = obj;
   state.currentKey = data[props.valueField];
 };
-const setSelected = ({ api, constants, nextTick, props, vm, state }) => () => {
+const setSelected = ({ api, constants, nextTick, props, vm, state }) => (init) => {
   const isTree = props.renderType === constants.TYPE.Tree;
   const isGrid = props.renderType === constants.TYPE.Grid;
   if (!props.multiple) {
     if (isGrid || isTree) {
-      setGridOrTreeSelected({ props, state, vm, isTree, api });
+      setGridOrTreeSelected({ props, state, vm, isTree, api, init });
     } else {
       const option = getOptionOfSetSelected({ api, props });
       state.selected = option;
       state.selectedLabel = option.state.currentLabel || option.currentLabel;
-      props.filterable && !props.shape && (state.query = state.selectedLabel);
+      (props.filterable || props.searchable) && !props.shape && (state.query = state.selectedLabel);
     }
   } else {
     const result = getResultOfSetSelected({ state, props, isGrid, isTree, api });
     state.selectCls = result.length ? result.length === state.options.length ? "checked-sur" : "halfselect" : "check";
     state.selected = result;
+    state.selected.length && (state.selectedLabel = "");
     vm.$refs.selectTree && vm.$refs.selectTree.setCheckedNodes && vm.$refs.selectTree.setCheckedNodes(state.selected);
     state.tips = state.selected.map((item) => item.state ? item.state.currentLabel : item.currentLabel).join(",");
     setFilteredSelectCls(nextTick, state, props);
@@ -348,7 +353,7 @@ const setSelected = ({ api, constants, nextTick, props, vm, state }) => () => {
   }
 };
 const getPluginOption = ({ api, props, state }) => (value, isTree) => {
-  const isRemote = props.filterable && props.remote && (typeof props.remoteMethod === "function" || typeof props.initQuery === "function");
+  const isRemote = (props.filterable || props.searchable) && props.remote && (typeof props.remoteMethod === "function" || typeof props.initQuery === "function");
   const { textField, valueField } = props;
   const sourceData = isRemote ? state.remoteData : isTree ? api.getTreeData(state.treeData) : state.gridData;
   const selNode = find(sourceData, (item) => item[valueField] === value);
@@ -364,7 +369,7 @@ const toggleCheckAll = ({ api, state, props }) => (filtered) => {
   const enabledValues = state.options.filter((op) => !op.state.disabled && !op.state.groupDisabled && !op.required && op.state.visible).map((op) => op.value);
   if (filtered) {
     if (state.filteredSelectCls === "check" || state.filteredSelectCls === "halfselect") {
-      value = [.../* @__PURE__ */ new Set([...state.modelValue, ...enabledValues])];
+      value = Array.from(/* @__PURE__ */ new Set([...state.modelValue, ...enabledValues]));
     } else {
       value = state.modelValue.filter((val) => !enabledValues.includes(val));
     }
@@ -388,7 +393,7 @@ const toggleCheckAll = ({ api, state, props }) => (filtered) => {
 };
 const handleFocus = ({ emit, props, state }) => (event) => {
   if (!state.softFocus) {
-    if (props.automaticDropdown || props.filterable) {
+    if (props.automaticDropdown || props.filterable || props.searchable) {
       state.visible = true;
       state.softFocus = true;
     }
@@ -486,7 +491,7 @@ const resetInputState = ({ api, vm, state }) => (event) => {
   api.resetInputHeight();
 };
 const resetInputHeight = ({ constants, nextTick, props, vm, state, api, designConfig }) => () => {
-  if (state.collapseTags && !props.filterable) {
+  if (state.collapseTags && !(props.filterable || props.searchable)) {
     return;
   }
   nextTick(() => {
@@ -503,7 +508,7 @@ const resetInputHeight = ({ constants, nextTick, props, vm, state, api, designCo
     if (!state.isDisplayOnly && (props.hoverExpand || props.clickExpand) && !props.disabled) {
       api.calcCollapseTags();
     }
-    const sizeInMap = (designConfig == null ? void 0 : designConfig.state.initialInputHeight) || state.initialInputHeight || (state.isSaaSTheme ? 28 : 30);
+    const sizeInMap = (designConfig == null ? void 0 : designConfig.state.initialInputHeight) || Math.round(state.initialInputHeight) || (state.isSaaSTheme ? 28 : 30);
     const noSelected = state.selected.length === 0;
     const spacingHeight = designConfig ? (_a = designConfig.state) == null ? void 0 : _a.spacingHeight : constants.SPACING_HEIGHT;
     if (!state.isDisplayOnly) {
@@ -553,6 +558,7 @@ const resetDatas = ({ props, state }) => () => {
   }
 };
 const handleOptionSelect = ({ api, nextTick, props, vm, state }) => (option, byClick) => {
+  var _a;
   state.memorize && state.memorize.updateByKey(option[state.memorize._dataKey] || option.value);
   if (props.multiple) {
     const value = (state.modelValue || []).slice();
@@ -572,8 +578,8 @@ const handleOptionSelect = ({ api, nextTick, props, vm, state }) => (option, byC
       api.handleQueryChange("", isChange, isInput);
       state.inputLength = 20;
     }
-    if (props.filterable) {
-      vm.$refs.input.focus();
+    if (props.filterable || props.searchable) {
+      (_a = vm.$refs.input) == null ? void 0 : _a.focus();
     }
     if (props.autoClose) {
       state.visible = false;
@@ -627,7 +633,7 @@ const getValueIndex = (props) => (arr = [], value = null) => {
   }
 };
 const toggleMenu = ({ vm, state, props, api }) => (e) => {
-  if (props.keepFocus && state.visible && props.filterable) {
+  if (props.keepFocus && state.visible && (props.filterable || props.searchable)) {
     return;
   }
   const event = e || window.event;
@@ -641,7 +647,7 @@ const toggleMenu = ({ vm, state, props, api }) => (e) => {
     toggleVisible && !state.softFocus && (state.visible = !state.visible);
     state.softFocus = false;
     if (state.visible) {
-      if (!(props.filterable && props.shape)) {
+      if (!((props.filterable || props.searchable) && props.shape)) {
         const dom = vm.$refs.input || vm.$refs.reference;
         (dom == null ? void 0 : dom.focus) && dom.focus();
         api.setOptionHighlight();
@@ -726,7 +732,7 @@ const deleteTag = ({ api, constants, emit, props, state, nextTick, vm }) => (eve
 };
 const onInputChange = ({ api, props, state, constants, nextTick }) => () => {
   if (!props.delay) {
-    if (props.filterable && state.query !== state.selectedLabel) {
+    if ((props.filterable || props.searchable) && state.query !== state.selectedLabel) {
       const isChange = false;
       const isInput = true;
       state.query = state.selectedLabel;
@@ -889,7 +895,7 @@ const emptyText = ({ I18N, props, state, t, isMobileFirstMode }) => () => {
   if (props.remote && state.query === "" && state.emptyFlag && !state.triggerSearch) {
     return props.shape === "filter" || isMobileFirstMode ? "" : false;
   }
-  if (props.filterable && state.query && (props.remote && state.emptyFlag || !state.options.some((option) => option.visible && option.state.visible))) {
+  if ((props.filterable || props.searchable) && state.query && (props.remote && state.emptyFlag || !state.options.some((option) => option.visible && option.state.visible))) {
     return props.noMatchText || t(I18N.noMatch);
   }
   if (state.emptyFlag) {
@@ -911,14 +917,14 @@ const watchValue = ({ api, constants, dispatch, props, vm, state }) => (value, o
     } else {
       state.currentPlaceholder = state.cachedPlaceHolder;
     }
-    if (props.filterable && !props.reserveKeyword) {
+    if ((props.filterable || props.searchable) && !props.reserveKeyword) {
       props.renderType !== constants.TYPE.Grid && !props.searchable && (state.query = "");
     }
   }
   api.setSelected();
   !state.isClickChoose && api.initQuery({ init: true }).then(() => api.setSelected());
   state.isClickChoose = false;
-  if (props.filterable && !props.multiple) {
+  if ((props.filterable || props.searchable) && !props.multiple) {
     state.inputLength = 20;
   }
   if (state.completed && !isEqual(value, oldValue)) {
@@ -961,24 +967,30 @@ const calcOverFlow = ({ vm, props, state }) => (height) => {
 };
 const postOperOfToVisible = ({ props, state, constants }) => {
   if (props.multiple) {
+    if (props.modelValue && props.modelValue.length && props.initLabel && !state.selected.length) {
+      state.selectedLabel = props.initLabel;
+    }
     return;
   }
   if (state.selected) {
     if (props.renderType === constants.TYPE.Grid || props.renderType === constants.TYPE.Tree) {
       state.selectedLabel = state.selected.currentLabel;
     } else {
-      if (props.filterable && props.allowCreate && state.createdSelected && state.createdLabel) {
+      if ((props.filterable || props.searchable) && props.allowCreate && state.createdSelected && state.createdLabel) {
         state.selectedLabel = state.createdLabel;
       } else {
         state.selectedLabel = state.selected.state.currentLabel || state.selected.currentLabel;
       }
-      if (props.filterable) {
+      if (props.filterable || props.searchable) {
         state.query = state.selectedLabel;
       }
     }
-    if (props.filterable) {
+    if (props.filterable || props.searchable) {
       state.currentPlaceholder = state.cachedPlaceHolder;
     }
+    if (props.modelValue && props.initLabel && !state.selectedLabel) {
+      state.selectedLabel = props.initLabel;
+    }
   }
 };
 const toVisible = ({ constants, state, props, vm, api, nextTick }) => () => {
@@ -1007,15 +1019,16 @@ const toVisible = ({ constants, state, props, vm, api, nextTick }) => () => {
   postOperOfToVisible({ props, state, constants });
 };
 const toHide = ({ constants, state, props, vm, api }) => () => {
-  const { filterable, remote, remoteConfig, shape, renderType, multiple, valueField } = props;
+  var _a;
+  const { remote, remoteConfig, shape, renderType, multiple, valueField } = props;
   state.selectEmitter.emit(constants.COMPONENT_NAME.SelectDropdown, constants.EVENT_NAME.updatePopper);
-  if (filterable) {
+  if (props.filterable || props.searchable) {
     state.query = remote || shape ? "" : renderType !== constants.TYPE.Tree ? state.selectedLabel : "";
     const isChange = remote && remoteConfig.autoSearch && (state.firstAutoSearch || remoteConfig.clearData);
     state.firstAutoSearch = false;
     api.handleQueryChange(state.query, isChange);
     if (multiple) {
-      vm.$refs.input.focus();
+      (_a = vm.$refs.input) == null ? void 0 : _a.focus();
     } else {
       if (!remote) {
         state.selectEmitter.emit(constants.EVENT_NAME.queryChange, "");
@@ -1040,16 +1053,17 @@ const toHide = ({ constants, state, props, vm, api }) => () => {
       vm.$refs.selectGrid.clearRadioRow();
       vm.$refs.selectGrid.setRadioRow(find(fullData, (item) => props.modelValue === item[valueField]));
     }
-    if (filterable && typeof props.filterMethod === "function") {
+    if ((props.filterable || props.searchable) && typeof props.filterMethod === "function") {
       vm.$refs.selectGrid.handleTableData(true);
-    } else if (filterable && remote && (typeof props.remoteMethod === "function" || typeof props.initQuery === "function")) {
+    } else if ((props.filterable || props.searchable) && remote && (typeof props.remoteMethod === "function" || typeof props.initQuery === "function")) {
       vm.$refs.selectGrid.handleTableData();
     }
   }
 };
 const watchVisible = ({ api, constants, emit, state, vm, props }) => (value) => {
-  if ((props.filterable || props.remote) && !value) {
-    vm.$refs.reference.blur();
+  var _a;
+  if ((props.filterable || props.searchable || props.remote) && !value) {
+    (_a = vm.$refs.reference) == null ? void 0 : _a.blur();
   }
   if (api.onCopying()) {
     return;
@@ -1101,7 +1115,7 @@ const watchOptions = ({ api, constants, nextTick, parent, props, state }) => ()
 const getOptionIndexArr = ({ props, state, api }) => () => {
   setTimeout(() => {
     state.optionIndexArr = api.queryVisibleOptions().map((item) => Number(item.getAttribute("data-index")));
-    if (props.defaultFirstOption && (props.filterable || props.remote) && state.filteredOptionsCount) {
+    if (props.defaultFirstOption && (props.filterable || props.searchable || props.remote) && state.filteredOptionsCount) {
       if (props.optimization) {
         optmzApis.checkDefaultFirstOption({ state });
       } else {
@@ -1220,7 +1234,7 @@ const nodeExpand = ({ state, constants }) => () => {
   }, 310);
 };
 const debouncRquest = ({ api, state, props }) => debounce(props.delay, () => {
-  if (props.filterable && state.query !== state.selectedLabel) {
+  if ((props.filterable || props.searchable) && state.query !== state.selectedLabel) {
     const isChange = false;
     const isInput = true;
     state.query = state.selectedLabel;
@@ -1390,7 +1404,7 @@ const watchInputHover = ({ vm }) => (newVal) => {
   }
 };
 const initQuery = ({ props, state, constants, vm }) => ({ init } = {}) => {
-  const isRemote = props.filterable && props.remote && (typeof props.remoteMethod === "function" || typeof props.initQuery === "function");
+  const isRemote = (props.filterable || props.searchable) && props.remote && (typeof props.remoteMethod === "function" || typeof props.initQuery === "function");
   const isGrid = props.renderType === constants.TYPE.Grid;
   let selected;
   if (isRemote && isGrid && props.initQuery) {
@@ -1434,7 +1448,12 @@ const mounted = ({ api, parent, state, props, vm, designConfig }) => () => {
     api.resetInputHeight();
   }
   state.inputWidth = inputClientRect.width;
-  api.initQuery({ init: true }).then(() => api.setSelected());
+  api.initQuery({ init: true }).then(() => {
+    api.setSelected(true);
+    if (props.modelValue && props.initLabel) {
+      state.selectedLabel = props.initLabel;
+    }
+  });
   if (props.dataset) {
     api.watchPropsOption();
   }
@@ -1553,16 +1572,22 @@ const computedTagsStyle = ({ props, parent, state, vm }) => () => {
   }
   return tagsStyle;
 };
-const computedReadonly = ({ props, state }) => () => state.device === "mb" || props.readonly || !props.filterable || props.multiple || browserInfo.name !== BROWSER_NAME.IE && browserInfo.name !== BROWSER_NAME.Edge && !state.visible;
+const computedReadonly = ({ props, state }) => () => state.device === "mb" || props.readonly || !(props.filterable || props.searchable) || props.multiple || browserInfo.name !== BROWSER_NAME.IE && browserInfo.name !== BROWSER_NAME.Edge && !state.visible;
 const computedShowClose = ({ props, state }) => () => props.clearable && !state.selectDisabled && (state.inputHovering || props.multiple && state.visible) && (props.multiple ? Array.isArray(props.modelValue) && props.modelValue.length > 0 : !isNull(props.modelValue) && props.modelValue !== "");
 const computedCollapseTagSize = (state) => () => state.selectSize;
 const computedShowNewOption = ({ props, state }) => () => {
   const query = state.device === "mb" ? state.queryValue : state.query;
-  return props.filterable && props.allowCreate && query && !state.options.filter((option) => !option.created).some((option) => option.state.currentLabel === state.query);
+  return (props.filterable || props.searchable) && props.allowCreate && query && !state.options.filter((option) => !option.created).some((option) => option.state.currentLabel === state.query);
 };
 const computedShowCopy = ({ props, state }) => () => props.multiple && props.copyable && state.inputHovering && state.selected.length;
 const computedOptionsAllDisabled = (state) => () => state.options.filter((option) => option.visible).every((option) => option.disabled);
-const computedDisabledTooltipContent = (state) => () => state.selected.map((item) => item.state ? item.state.currentLabel : item.currentLabel).join("\uFF1B");
+const computedDisabledTooltipContent = ({ props, state }) => () => {
+  if (props.multiple) {
+    return state.selected.map((item) => item.state ? item.state.currentLabel : item.currentLabel).join(";");
+  } else {
+    return state.selected.state ? state.selected.state.currentLabel : state.selected.currentLabel;
+  }
+};
 const computedSelectDisabled = ({ props, parent }) => () => props.disabled || (parent.form || {}).disabled || props.displayOnly || (parent.form || {}).displayOnly;
 const computedIsExpand = ({ props, state }) => () => {
   const hoverExpanded = (state.selectHover || state.visible) && props.hoverExpand && !props.disabled;

package/select/vue.js

@@ -285,7 +285,7 @@ const initStateAdd = ({ computed, props, api: api2, parent }) => {
     isDisplayOnly: computed(() => props.displayOnly || (parent.form || {}).displayOnly),
     gridCheckedData: computed(() => api2.getcheckedData()),
     isExpandAll: computed(() => api2.computedIsExpandAll()),
-    searchSingleCopy: computed(() => props.allowCopy && !props.multiple && props.filterable),
+    searchSingleCopy: computed(() => props.allowCopy && !props.multiple && (props.filterable || props.searchable)),
     childrenName: computed(() => props.treeOp.props && props.treeOp.props.children || "children"),
     tooltipContent: {},
     isHidden: false,