@opentiny/vue-renderless 3.12.0 → 3.13.0-alpha.0

package/multi-select/index.js

@@ -1,6 +1,40 @@
-import "../chunk-G2ADBYYC.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "../chunk-G2ADBYYC.js";
 import { cloneDeep } from "../chart-core/deps/utils";
-const created = ({ props, state, refs, nextTick }) => () => {
+const initValue = ({ props, emit }) => () => {
+  var _a;
+  const { dataSource = [] } = props;
+  let value;
+  if (dataSource.length === 1 && !((_a = dataSource[0]) == null ? void 0 : _a.multiple)) {
+    value = "";
+  } else {
+    value = [];
+    dataSource == null ? void 0 : dataSource.forEach((data, index) => {
+      if (data.multiple && !Array.isArray(props.modelValue[index])) {
+        value.push([]);
+      }
+      if (!data.multiple && Array.isArray(props.modelValue)) {
+        value.push("");
+      }
+    });
+  }
+  emit("update:modelValue", value);
+};
+const updateValue = ({ state, props, emit }) => (value) => {
+  const activeIndex = state.headerIndex;
+  const values = cloneDeep(props.modelValue);
+  if (Array.isArray(values[state.headerIndex])) {
+    const currentVal = values[activeIndex];
+    values[activeIndex] = currentVal.includes(value) ? currentVal.filter((i) => i !== value) : [...currentVal, value];
+  } else {
+    values[activeIndex] = value;
+  }
+  emit("update:modelValue", values);
+};
+const created = ({ api, emit, props, state, refs, nextTick }) => () => {
+  api.initValue({ props, emit });
   nextTick(() => {
     state.dataSource = cloneDeep(props.dataSource);
     state.defaultSelectedArray = cloneDeep(props.defaultSelectedArray);
@@ -9,35 +43,109 @@ const created = ({ props, state, refs, nextTick }) => () => {
     state.headerInfo = state.dataSource.map((item) => {
       return { isSelected: false, title: item.title, isUP: false };
     });
+    if (props.type === "list") {
+      state.dataSource.forEach((item, index) => {
+        const { flattenData, dataMap } = getFlatOptions(item.options);
+        item.options = flattenData;
+        state.optionMap[index] = dataMap;
+      });
+    }
+  });
+};
+const computedCurrentOptions = ({ state, props }) => () => {
+  const { options = [], multiple } = state.dataSource[state.headerIndex] || {};
+  const selectedValue = props.modelValue[state.headerIndex];
+  options.forEach((item) => {
+    var _a;
+    item.show = state.isSearching ? item.label.includes(state.searchValue) : ((_a = item.show) != null ? _a : parent == null ? void 0 : parent.expanded) || item.level === 0;
+    item.active = multiple ? selectedValue.includes(item.value) : item.value === selectedValue;
+  });
+  return options.filter((i) => i.show);
+};
+const getFlatOptions = (options) => {
+  const flattenData = [];
+  const dataMap = {};
+  const getChild = (data, level = 0, parent2) => {
+    data.forEach((item, index) => {
+      var _a, _b;
+      const id = parent2 ? parent2.id + index : String(index);
+      const parentId = (parent2 == null ? void 0 : parent2.id) || "";
+      const expanded = (parent2 == null ? void 0 : parent2.expanded) && ((_a = item.children) == null ? void 0 : _a.length) && item.expanded || false;
+      const currentData = __spreadProps(__spreadValues({}, item), { id, level, expanded, parentId });
+      flattenData.push(currentData);
+      if ((_b = item.children) == null ? void 0 : _b.length) {
+        getChild(item.children, level + 1, currentData);
+      }
+      dataMap[currentData.id] = item;
+    });
+  };
+  getChild(options);
+  flattenData.forEach((item) => {
+    if (item.children) {
+      item.hasChild = item.children.length > 0;
+      delete item.children;
+    }
   });
+  return { flattenData, dataMap };
 };
 const handleClick = ({ api, props, state }) => (value) => {
   var _a, _b, _c;
-  state.wheelData = (_a = props.dataSource[value]) == null ? void 0 : _a.children;
+  if (props.disabled || props.dataSource[value].disabled) {
+    return;
+  }
+  if (props.type === "wheel") {
+    state.wheelData = (_a = props.dataSource[value]) == null ? void 0 : _a.options;
+  }
   if (state.headerIndex === -1) {
-    state.showWheel = true;
+    state.showOptions = true;
     state.headerIndex = value;
     state.headerInfo[value] = getNewHeaderInfo(state.headerInfo, value, true);
     state.defaultSelectedIndexs = (_b = state.defaultSelectedArray[value]) != null ? _b : api.loadDefault(value);
   } else if (state.headerIndex !== value) {
-    state.showWheel = true;
+    state.showOptions = true;
     state.headerInfo[state.headerIndex] = getNewHeaderInfo(state.headerInfo, state.headerIndex, false);
     state.headerIndex = value;
     state.headerInfo[value] = getNewHeaderInfo(state.headerInfo, value, true);
     state.defaultSelectedIndexs = (_c = state.defaultSelectedArray[value]) != null ? _c : api.loadDefault(value);
   } else {
-    state.showWheel = !state.showWheel;
+    state.showOptions = !state.showOptions;
     const { isUP } = state.headerInfo[value];
     state.headerInfo[value] = getNewHeaderInfo(state.headerInfo, value, !isUP);
   }
 };
+const handleOptionSelect = ({ api, state, emit }) => (option) => {
+  api.updateValue(option.value);
+  emit("item-click", state.optionMap[state.headerIndex][option.id]);
+};
+const handleSearchInput = ({ state, emit }) => () => {
+  const { searchValue } = state;
+  emit("update:searchValue", searchValue);
+};
+const toggleChildExpand = (state, parentId, index) => {
+  const { options } = state.dataSource[state.headerIndex];
+  for (let i = index + 1; i < options.length; i++) {
+    if (options[i].parentId === parentId) {
+      options[i].show = !options[i].show;
+    } else {
+      break;
+    }
+  }
+};
+const toggleItemExpand = ({ state }) => (option) => {
+  const index = state.dataSource[state.headerIndex].options.findIndex((i) => i.id === option.id);
+  if (index !== -1) {
+    const target = state.dataSource[state.headerIndex].options[index];
+    target.expanded = !target.expanded;
+    toggleChildExpand(state, target.id, index);
+  }
+};
 const confirm = ({ state, emit }) => () => {
   const wheelLevelItems = getWheelLevelItems(state.wheelData, state.defaultSelectedIndexs);
   const { selectedLabels, selectedItems } = getSelected(wheelLevelItems, state.defaultSelectedIndexs);
   state.headerInfo[state.headerIndex] = { isSelected: true, title: selectedLabels, isUP: false };
   state.defaultSelectedArray[state.headerIndex] = state.defaultSelectedIndexs;
   emit("confirm", selectedItems, state.headerIndex, state.defaultSelectedIndexs);
-  state.showWheel = false;
+  state.showOptions = false;
 };
 const reset = ({ api, props, state, emit }) => () => {
   var _a;
@@ -45,7 +153,13 @@ const reset = ({ api, props, state, emit }) => () => {
   state.defaultSelectedIndexs = (_a = props.defaultSelectedArray[state.headerIndex]) != null ? _a : api.loadDefault(state.headerIndex);
   state.defaultSelectedArray[state.headerIndex] = state.defaultSelectedIndexs;
   emit("reset", [], state.headerIndex, state.defaultSelectedIndexs);
-  state.showWheel = false;
+  state.showOptions = false;
+};
+const handleClose = (state) => () => {
+  state.showOptions = false;
+  if (state.headerIndex !== -1) {
+    state.headerInfo[state.headerIndex].isUP = false;
+  }
 };
 const wheelChange = (state) => (indexs) => {
   state.defaultSelectedIndexs = indexs;
@@ -60,7 +174,7 @@ const clickWheelItem = ({ state, emit }) => (indexs, text, item) => {
   }
   state.defaultSelectedArray[state.headerIndex] = state.defaultSelectedIndexs;
   emit("confirm", item, state.headerIndex, indexs);
-  state.showWheel = false;
+  state.showOptions = false;
 };
 const getWheelLevelItems = (wheelData, newIndexs) => {
   const level_1 = wheelData;
@@ -160,9 +274,16 @@ const getEl = (node) => {
   return node.$el || node;
 };
 const getLabelsStyle = (state) => {
+  const len = state.dataSource.length;
+  if (len === 1) {
+    return [
+      {
+        justifyContent: "space-between"
+      }
+    ];
+  }
   const over25Labels = state.labelLevelsInfo.filter((i) => i && !i.isOver25);
   let widthInfo = over25Labels;
-  const len = state.dataSource.length;
   if (len >= 4) {
     return getStyleConfig(state.labelLevelsInfo, { width: `${(1 / len * 100).toFixed(2)}%` });
   }
@@ -197,8 +318,20 @@ const getFillArray = (state, widthInfo, maxWidth) => {
     };
   });
 };
+const handleSearchBtnClick = ({ props, state, nextTick, vm }) => () => {
+  if (props.disabled) {
+    return;
+  }
+  state.isSearching = !state.isSearching;
+  nextTick(() => {
+    if (state.isSearching) {
+      vm.$refs.searchInput.focus();
+    }
+  });
+};
 export {
   clickWheelItem,
+  computedCurrentOptions,
   confirm,
   created,
   getEl,
@@ -213,7 +346,14 @@ export {
   getStyleConfig,
   getWheelLevelItems,
   handleClick,
+  handleClose,
+  handleOptionSelect,
+  handleSearchBtnClick,
+  handleSearchInput,
+  initValue,
   loadDefault,
   reset,
+  toggleItemExpand,
+  updateValue,
   wheelChange
 };

package/multi-select/vue.js

@@ -1,5 +1,21 @@
 import "../chunk-G2ADBYYC.js";
-import { created, handleClick, confirm, reset, wheelChange, clickWheelItem, loadDefault } from "./index";
+import {
+  created,
+  initValue,
+  handleClick,
+  confirm,
+  reset,
+  wheelChange,
+  clickWheelItem,
+  loadDefault,
+  handleSearchBtnClick,
+  handleOptionSelect,
+  handleClose,
+  toggleItemExpand,
+  computedCurrentOptions,
+  updateValue,
+  handleSearchInput
+} from "./index";
 const api = [
   "state",
   "created",
@@ -8,34 +24,50 @@ const api = [
   "reset",
   "wheelChange",
   "clickWheelItem",
-  "loadDefault"
+  "loadDefault",
+  "handleSearchBtnClick",
+  "handleClose",
+  "handleSearchInput"
 ];
-const initState = (reactive) => {
+const initState = ({ emitter, reactive, computed, api: api2 }) => {
   const state = reactive({
     dataSource: [],
     wheelData: [],
+    isSearching: false,
     headerIndex: -1,
-    showWheel: false,
+    showOptions: false,
     labelLevelsInfo: [],
     labelsStyle: [],
     wheelIndex: [],
     wheelText: "",
     headerInfo: [],
     defaultSelectedIndexs: [],
-    defaultSelectedArray: []
+    defaultSelectedArray: [],
+    multiSelectEmitter: emitter(),
+    searchValue: "",
+    optionMap: [],
+    currentOptions: computed(() => api2.computedCurrentOptions())
   });
   return state;
 };
-const initApi = ({ api: api2, props, state, emit, nextTick, refs }) => {
+const initApi = ({ api: api2, props, state, emit, nextTick, refs, vm }) => {
   Object.assign(api2, {
     state,
-    created: created({ props, state, refs, nextTick }),
+    created: created({ api: api2, emit, props, state, refs, nextTick }),
+    initValue: initValue({ props, emit }),
     handleClick: handleClick({ api: api2, props, state }),
     confirm: confirm({ state, emit }),
     reset: reset({ api: api2, props, state, emit }),
     wheelChange: wheelChange(state),
     clickWheelItem: clickWheelItem({ state, emit }),
-    loadDefault: loadDefault({ props, state })
+    loadDefault: loadDefault({ props, state }),
+    handleSearchBtnClick: handleSearchBtnClick({ props, state, nextTick, vm }),
+    handleOptionSelect: handleOptionSelect({ api: api2, state, emit }),
+    handleClose: handleClose(state),
+    toggleItemExpand: toggleItemExpand({ state }),
+    computedCurrentOptions: computedCurrentOptions({ state, props }),
+    updateValue: updateValue({ state, props, emit }),
+    handleSearchInput: handleSearchInput({ props, state, emit })
   });
 };
 const initWatch = ({ watch, props, state, refs, nextTick }) => {
@@ -52,14 +84,17 @@ const initWatch = ({ watch, props, state, refs, nextTick }) => {
     }
   );
 };
-const renderless = (props, { onMounted, reactive, watch }, { emit, nextTick, refs }) => {
+const renderless = (props, { onMounted, reactive, watch, provide, computed }, { emit, nextTick, refs, vm, emitter }) => {
   const api2 = {};
-  const state = initState(reactive);
-  initApi({ api: api2, props, state, emit, nextTick, refs });
+  const state = initState({ emitter, reactive, computed, api: api2 });
+  provide("multiSelect", vm);
+  initApi({ api: api2, props, state, emit, nextTick, refs, vm });
   initWatch({ watch, props, state, refs, nextTick });
   onMounted(() => {
     api2.created({ props, state, refs, nextTick });
   });
+  state.multiSelectEmitter.on("multiSelectItemClick", api2.handleOptionSelect);
+  state.multiSelectEmitter.on("toggleItemExpand", api2.toggleItemExpand);
   return api2;
 };
 export {

package/multi-select-item/index.js

@@ -0,0 +1,17 @@
+import "../chunk-G2ADBYYC.js";
+const handleClick = ({ props, multiSelect }) => (event) => {
+  event.stopPropagation();
+  if (props.disabled !== true && multiSelect.disabled !== true) {
+    multiSelect.state.multiSelectEmitter.emit("multiSelectItemClick", props.option);
+  }
+};
+const toggleExpand = ({ props, multiSelect }) => (event) => {
+  event.stopPropagation();
+  if (props.disabled !== true && multiSelect.disabled !== true) {
+    multiSelect.state.multiSelectEmitter.emit("toggleItemExpand", props.option);
+  }
+};
+export {
+  handleClick,
+  toggleExpand
+};

package/multi-select-item/vue.js

@@ -0,0 +1,31 @@
+import "../chunk-G2ADBYYC.js";
+import { handleClick, toggleExpand } from "./index";
+const api = [
+  "state",
+  "created",
+  "handleClick",
+  "confirm",
+  "reset",
+  "wheelChange",
+  "clickWheelItem",
+  "loadDefault",
+  "toggleExpand"
+];
+const initApi = ({ api: api2, props, state, multiSelect }) => {
+  Object.assign(api2, {
+    state,
+    handleClick: handleClick({ props, multiSelect }),
+    toggleExpand: toggleExpand({ props, multiSelect })
+  });
+};
+const renderless = (props, { reactive, inject }, { emit, nextTick, refs, vm }) => {
+  const api2 = {};
+  const multiSelect = inject("multiSelect");
+  const state = reactive({});
+  initApi({ api: api2, multiSelect, props, state, emit, nextTick, refs, vm });
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/numeric/index.js

@@ -108,9 +108,9 @@ const handleBlur = ({
     dispatch(constants.COMPONENT_NAME, constants.EVENT_NAME.blur, [state.displayValue]);
   }
 };
-const handleFocus = ({ emit, state, props, api, refs }) => (event) => {
+const handleFocus = ({ emit, state, props, api, vm }) => (event) => {
   if (props.disabled) {
-    refs.input.blur();
+    vm.$refs.input.blur();
   }
   state.inputStatus = true;
   const currentValue = api.getDecimal(state.currentValue);
@@ -126,8 +126,8 @@ const handleFocus = ({ emit, state, props, api, refs }) => (event) => {
   }
   emit("focus", event);
 };
-const focus = (refs) => () => {
-  refs.input.focus();
+const focus = (vm) => () => {
+  vm.$refs.input.focus();
 };
 const getEmitValue = (args) => {
   let { newVal, emitValue, allowEmpty, defaultVal, bigNew, oldVal } = args;
@@ -219,12 +219,35 @@ const handleInput = ({ state, api, emit, props }) => (event) => {
   state.lastInput = value;
   state.userInput = value;
 };
-const handleInputChange = ({ api }) => (event) => {
-  const value = event.target.value;
-  api.setCurrentValue(value === "-" ? 0 : value);
+const handleInputChange = ({ api, state, props }) => (event) => {
+  var _a, _b;
+  const value = ((_a = event.target) == null ? void 0 : _a.value) === "-" ? 0 : (_b = event.target) == null ? void 0 : _b.value;
+  if (props.stepStrictly) {
+    const previousValue = Number((props.mouseWheel ? state.displayValue : props.modelValue) || 0);
+    if (Math.abs(previousValue - value) % Number(props.step) === 0)
+      return api.setCurrentValue(value);
+    const step = Number(props.step);
+    const difference = value - previousValue;
+    const sign = difference >= 0 ? 1 : -1;
+    return api.setCurrentValue(sign * Math.round(Math.abs(difference) / step) * step + previousValue);
+  }
+  api.setCurrentValue(value);
 };
-const select = (refs) => () => refs.input.select();
+const select = (vm) => () => vm.$refs.input.select();
 const mounted = ({ constants, parent, props, state }) => () => {
+  if (props.shape === "filter") {
+    state.controls = false;
+  }
+  if (state.currentValue < props.min) {
+    state.currentValue = props.min;
+    state.lastInput = props.min;
+    state.userInput = props.min;
+  }
+  if (state.currentValue > props.max) {
+    state.currentValue = props.max;
+    state.lastInput = props.max;
+    state.userInput = props.max;
+  }
   const innerInput = parent.$el.querySelector("input");
   innerInput.setAttribute(constants.KEY, constants.VALUE);
   innerInput.setAttribute(constants.MAX, props.max);
@@ -245,8 +268,11 @@ const updated = ({ constants, parent, state }) => () => {
   const innerInput = parent.$el.querySelector("input");
   innerInput && innerInput.setAttribute(constants.VALUENOW, state.currentValue);
 };
-const displayValue = ({ props, state }) => () => {
+const displayValue = ({ props, state, api }) => () => {
   const { currentValue, inputStatus, userInput } = state;
+  if (props.shape === "filter" && props.filter) {
+    api.filterValue();
+  }
   if (inputStatus) {
     return userInput;
   }
@@ -311,10 +337,24 @@ const getDisplayOnlyText = ({ parent, state, props }) => () => {
     }
   }
 };
+const filterValue = ({ state }) => () => {
+  return (state.radioVal || "") + state.lastInput;
+};
+const handleClear = ({ state, emit }) => () => {
+  state.currentValue = "";
+  state.userInput = "";
+  state.lastInput = "";
+  state.radioVal = "";
+  emit("clear");
+};
+const handleChange = ({ state, emit }) => () => {
+  emit("filter-change", state.radioVal);
+};
 export {
   decrease,
   dispatchDisplayedValue,
   displayValue,
+  filterValue,
   focus,
   getDecimal,
   getDisplayOnlyText,
@@ -323,6 +363,8 @@ export {
   getPrecision,
   getUnitPrecision,
   handleBlur,
+  handleChange,
+  handleClear,
   handleFocus,
   handleInput,
   handleInputChange,

package/numeric/vue.js

@@ -25,7 +25,10 @@ import {
   initService,
   dispatchDisplayedValue,
   getDisplayedValue,
-  getDisplayOnlyText
+  getDisplayOnlyText,
+  filterValue,
+  handleClear,
+  handleChange
 } from "./index";
 const api = [
   "state",
@@ -37,9 +40,19 @@ const api = [
   "handleInputChange",
   "mouseEvent",
   "focus",
-  "select"
+  "select",
+  "handleClear",
+  "handleChange"
 ];
-const initState = ({ reactive, computed, props, api: api2, $service, parent }) => {
+const initState = ({
+  reactive,
+  computed,
+  props,
+  api: api2,
+  $service,
+  constants,
+  parent
+}) => {
   const state = reactive({
     currentValue: props.modelValue,
     userInput: props.modelValue,
@@ -57,8 +70,13 @@ const initState = ({ reactive, computed, props, api: api2, $service, parent }) =
     maxDisabled: computed(() => !props.circulate && state.currentValue >= props.max || state.formDisabled),
     controlsAtRight: computed(() => props.controls && props.controlsPosition === "right"),
     format: computed(() => getUnitPrecision({ service: $service, props })),
+    filterMenu: constants.FILTER_OPTION,
+    filterValue: computed(() => api2.filterValue()),
+    handleClear: computed(() => api2.handleClear()),
+    handleChange: computed(() => api2.handleClear()),
     isDisplayOnly: computed(() => props.displayOnly || (parent.tinyForm || {}).displayOnly),
-    displayOnlyText: computed(() => api2.getDisplayOnlyText())
+    displayOnlyText: computed(() => api2.getDisplayOnlyText()),
+    controls: props.controls
   });
   return state;
 };
@@ -67,7 +85,7 @@ const initApi = ({
   props,
   state,
   parent,
-  refs,
+  vm,
   emit,
   dispatch,
   constants,
@@ -75,30 +93,33 @@ const initApi = ({
 }) => {
   Object.assign(api2, {
     state,
-    focus: focus(refs),
-    select: select(refs),
+    focus: focus(vm),
+    select: select(vm),
     getPrecision: getPrecision(),
     toPrecision: toPrecision(state),
     updated: updated({ constants, parent, state }),
     mounted: mounted({ constants, parent, props, state }),
     unmounted: unmounted({ parent, state }),
     getDecimal: getDecimal(props),
-    handleFocus: handleFocus({ emit, state, props, api: api2, refs }),
+    handleFocus: handleFocus({ emit, state, props, api: api2, vm }),
     decrease: decrease({ api: api2, props, state }),
     increase: increase({ api: api2, props, state }),
     handleInput: handleInput({ state, api: api2, emit, props }),
     getNumPecision: getNumPecision({ api: api2, props }),
-    displayValue: displayValue({ props, state }),
+    displayValue: displayValue({ props, state, api: api2 }),
     internalDecrease: internalDecrease({ api: api2, state }),
     internalIncrease: internalIncrease({ api: api2, state }),
-    handleInputChange: handleInputChange({ api: api2 }),
+    handleInputChange: handleInputChange({ api: api2, state, props }),
     mouseEvent: mouseEvent({ api: api2, props, state }),
     handleBlur: handleBlur({ constants, dispatch, emit, props, state, api: api2 }),
     watchValue: watchValue({ api: api2, state, nextTick }),
     setCurrentValue: setCurrentValue({ api: api2, constants, dispatch, emit, props, state }),
     dispatchDisplayedValue: dispatchDisplayedValue({ api: api2, state, dispatch }),
     getDisplayedValue: getDisplayedValue({ state, props }),
-    getDisplayOnlyText: getDisplayOnlyText({ parent, props, state })
+    getDisplayOnlyText: getDisplayOnlyText({ parent, props, state }),
+    filterValue: filterValue({ state }),
+    handleClear: handleClear({ state, emit }),
+    handleChange: handleChange({ state, emit })
   });
   api2.getDecimal(0);
 };
@@ -108,15 +129,24 @@ const initWatch = ({
   props,
   api: api2
 }) => {
+  watch(
+    () => [props.max, props.min],
+    ([curMax, curMin]) => {
+      if (curMax < curMin) {
+        throw new Error("[Numeric]: The maximum value should not be less than to the minimum value");
+      }
+    },
+    { immediate: true }
+  );
   watch(() => props.modelValue, api2.watchValue, { immediate: true });
   watch(() => state.isDisplayOnly, api2.dispatchDisplayedValue);
 };
-const renderless = (props, { computed, onMounted, onUpdated, onUnmounted, reactive, watch, inject }, { parent, emit, refs, constants, dispatch, service, nextTick }) => {
+const renderless = (props, { computed, onMounted, onUpdated, onUnmounted, reactive, watch, inject }, { parent, emit, vm, constants, dispatch, service, nextTick }) => {
   const api2 = {};
   const $service = initService(service);
-  const state = initState({ reactive, computed, props, api: api2, $service, parent });
+  const state = initState({ reactive, computed, props, api: api2, constants, $service, parent });
   parent.tinyForm = parent.tinyForm || inject("form", null);
-  initApi({ api: api2, props, state, parent, refs, emit, dispatch, constants, nextTick });
+  initApi({ api: api2, props, state, parent, vm, emit, dispatch, constants, nextTick });
   initWatch({ state, watch, props, api: api2 });
   onMounted(() => {
     api2.dispatchDisplayedValue();

package/option/index.js

@@ -1,5 +1,6 @@
 import "../chunk-G2ADBYYC.js";
 import { getObj } from "../common/object";
+import { omitText } from "../common/string";
 const escapeRegexpString = (value = "") => String(value).replace(/[|\\{}()[\]^$+*?.]/g, "\\$&");
 const isEqual = ({ select, state }) => (a, b) => {
   if (!state.isObject) {
@@ -17,10 +18,17 @@ const contains = ({ select, state }) => (arr = [], target = null) => {
     return arr && arr.some((item) => getObj(item, valueKey) === getObj(target, valueKey));
   }
 };
-const handleGroupDisabled = (state) => (val) => {
+const handleGroupDisabled = ({ state, vm }) => (val) => {
   state.groupDisabled = val;
+  vm.groupDisabled = val;
 };
-const hoverItem = ({ select, props, state, vm }) => () => {
+const hoverItem = ({ select, props, state, vm }) => (e) => {
+  const dom = e.target;
+  const text = dom.textContent;
+  const font = window.getComputedStyle(dom).font;
+  const rect = dom.getBoundingClientRect();
+  const res = omitText(text, font, rect.width);
+  state.showTitle = res.o;
   if (!props.disabled && !state.groupDisabled) {
     select.state.hoverIndex = select.state.options.indexOf(vm);
   }
@@ -32,9 +40,8 @@ const selectOptionClick = ({ props, state, select, constants, vm }) => () => {
     select.state.selectEmitter.emit(constants.EVENT_NAME.handleOptionClick, vm, true);
   }
 };
-const queryChange = ({ select, props, state }) => (query) => {
-  state.visible = new RegExp(escapeRegexpString(query), "i").test(state.currentLabel) || props.created;
-  select.state.filteredOptionsCount += state.visible ? 1 : -1;
+const queryChange = ({ props, state }) => (query) => {
+  state.visible = new RegExp(escapeRegexpString(query), "i").test(state.currentLabel) || !!props.created;
 };
 const toggleEvent = ({ props, vm, type }) => {
   const optionEl = vm.$refs.option;