vft 0.0.375 → 0.0.376

package/es/components/select/useSelect.js

@@ -1,788 +1,443 @@
 import "../form/index.js";
-import { EVENT_CODE } from "../../constants/aria.js";
-import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from "../../constants/event.js";
-import { useResizeObserver } from "@vueuse/core";
-import { isArray, isFunction, isObject, isNumber, isUndefined } from "@vft/utils";
-import { debugWarn } from "../../utils/error.js";
+import { EVENT_CODE as xt } from "../../constants/aria.js";
+import { UPDATE_MODEL_EVENT as Ot, CHANGE_EVENT as It } from "../../constants/event.js";
+import { useResizeObserver as p } from "@vueuse/core";
+import { isArray as w, isFunction as z, isObject as ee, isNumber as pt, isUndefined as wt } from "@vft/utils";
+import { debugWarn as te } from "../../utils/error.js";
 import "../config-provider/hooks/use-global-config.js";
-import { reactive, ref, computed, toRaw, watch, nextTick, watchEffect, onMounted } from "vue";
-import { escapeStringRegexp } from "../../utils/vue/data-helper.js";
-import { debounce, get, isEqual, findLastIndex } from "lodash-es";
-import { useNamespace } from "../../hooks/use-namespace/index.js";
+import { reactive as yt, ref as m, computed as o, toRaw as Ct, watch as T, nextTick as h, watchEffect as Se, onMounted as Et } from "vue";
+import { escapeStringRegexp as Tt } from "../../utils/vue/data-helper.js";
+import { debounce as St, get as A, isEqual as _, findLastIndex as Rt } from "lodash-es";
+import { useNamespace as Re } from "../../hooks/use-namespace/index.js";
 import "../../hooks/use-model-toggle/index.js";
 import "@popperjs/core";
 import "../../hooks/use-z-index/index.js";
-import { useComposition } from "../../hooks/use-composition/index.js";
-import { useFocusController } from "../../hooks/use-focus-controller/index.js";
-import { useEmptyValues } from "../../hooks/use-empty-values/index.js";
-import { useAllowCreate } from "./useAllowCreate.js";
-import { useProps } from "./useProps.js";
-import { useFormItem, useFormItemInputId } from "../form/hooks/use-form-item.js";
-import { useFormSize } from "../form/hooks/use-form-common-props.js";
-const useSelect = (props, emit) => {
-  const nsSelect = useNamespace("select");
-  const nsInput = useNamespace("input");
-  const { form: elForm, formItem: elFormItem } = useFormItem();
-  const { inputId } = useFormItemInputId(props, {
-    formItemContext: elFormItem
-  });
-  const { aliasProps, getLabel, getValue, getDisabled, getOptions } = useProps(props);
-  const { valueOnClear, isEmptyValue } = useEmptyValues(props);
-  const states = reactive({
+import { useComposition as Mt } from "../../hooks/use-composition/index.js";
+import { useFocusController as Wt } from "../../hooks/use-focus-controller/index.js";
+import { useEmptyValues as Ft } from "../../hooks/use-empty-values/index.js";
+import { useAllowCreate as Lt } from "./useAllowCreate.js";
+import { useProps as Nt } from "./useProps.js";
+import { useFormItem as Dt, useFormItemInputId as Ht } from "../form/hooks/use-form-item.js";
+import { useFormSize as Bt } from "../form/hooks/use-form-common-props.js";
+const il = (t, v) => {
+  const $ = Re("select"), Me = Re("input"), { form: le, formItem: S } = Dt(), { inputId: We } = Ht(t, {
+    formItemContext: S
+  }), { aliasProps: ne, getLabel: g, getValue: d, getDisabled: R, getOptions: Fe } = Nt(t), { valueOnClear: Le, isEmptyValue: ae } = Ft(t), l = yt({
     inputValue: "",
     cachedOptions: [],
     createdOptions: [],
     hoveringIndex: -1,
-    inputHovering: false,
+    inputHovering: !1,
     selectionWidth: 0,
     collapseItemWidth: 0,
     previousQuery: null,
     previousValue: void 0,
     selectedLabel: "",
-    menuVisibleOnFocus: false,
-    isBeforeHide: false
-  });
-  const popperSize = ref(-1);
-  const selectRef = ref();
-  const selectionRef = ref();
-  const tooltipRef = ref();
-  const tagTooltipRef = ref();
-  const inputRef = ref();
-  const prefixRef = ref();
-  const suffixRef = ref();
-  const menuRef = ref();
-  const tagMenuRef = ref();
-  const collapseItemRef = ref();
-  const {
-    isComposing,
-    handleCompositionStart,
-    handleCompositionEnd,
-    handleCompositionUpdate
-  } = useComposition({
-    afterComposition: (e) => onInput(e)
-  });
-  const selectDisabled = computed(() => props.disabled || !!elForm?.disabled);
-  const { wrapperRef, isFocused, handleBlur } = useFocusController(inputRef, {
-    disabled: selectDisabled,
+    menuVisibleOnFocus: !1,
+    isBeforeHide: !1
+  }), M = m(-1), G = m(), y = m(), W = m(), Q = m(), V = m(), Ne = m(), De = m(), b = m(), ie = m(), F = m(), {
+    isComposing: oe,
+    handleCompositionStart: He,
+    handleCompositionEnd: Be,
+    handleCompositionUpdate: Pe
+  } = Mt({
+    afterComposition: (e) => Ee(e)
+  }), x = o(() => t.disabled || !!le?.disabled), { wrapperRef: ue, isFocused: se, handleBlur: Ke } = Wt(V, {
+    disabled: x,
     afterFocus() {
-      if (props.automaticDropdown && !expanded.value) {
-        expanded.value = true;
-        states.menuVisibleOnFocus = true;
-      }
+      t.automaticDropdown && !u.value && (u.value = !0, l.menuVisibleOnFocus = !0);
     },
-    beforeBlur(event) {
-      return tooltipRef.value?.isFocusInsideContent(event) || tagTooltipRef.value?.isFocusInsideContent(event);
+    beforeBlur(e) {
+      return W.value?.isFocusInsideContent(e) || Q.value?.isFocusInsideContent(e);
     },
     afterBlur() {
-      expanded.value = false;
-      states.menuVisibleOnFocus = false;
-      if (props.validateEvent) {
-        elFormItem?.validate?.("blur").catch((err) => debugWarn(err));
-      }
-    }
-  });
-  const allOptions = computed(() => filterOptions(""));
-  const hasOptions = computed(() => {
-    if (props.loading) return false;
-    return props.options.length > 0 || states.createdOptions.length > 0;
-  });
-  const filteredOptions = ref([]);
-  const expanded = ref(false);
-  const needStatusIcon = computed(() => elForm?.statusIcon ?? false);
-  const popupHeight = computed(() => {
-    const totalHeight = filteredOptions.value.length * props.itemHeight;
-    return totalHeight > props.height ? props.height : totalHeight;
-  });
-  const hasModelValue = computed(() => {
-    return props.multiple ? isArray(props.modelValue) && props.modelValue.length > 0 : !isEmptyValue(props.modelValue);
-  });
-  const showClearBtn = computed(() => {
-    return props.clearable && !selectDisabled.value && states.inputHovering && hasModelValue.value;
-  });
-  const iconComponent = computed(
-    () => props.remote && props.filterable ? "" : "icon-arrow-down"
-  );
-  const iconReverse = computed(
-    () => iconComponent.value && nsSelect.is("reverse", expanded.value)
-  );
-  const validateState = computed(() => elFormItem?.validateState || "");
-  const validateIcon = "validateIcon";
-  const debounce$1 = computed(() => props.remote ? 300 : 0);
-  const emptyText = computed(() => {
-    if (props.loading) {
-      return props.loadingText || "加载中";
-    } else {
-      if (props.remote && !states.inputValue && !hasOptions.value) return false;
-      if (props.filterable && states.inputValue && hasOptions.value && filteredOptions.value.length === 0) {
-        return props.noMatchText || "无匹配数据";
-      }
-      if (!hasOptions.value) {
-        return props.noDataText || "暂无数据";
-      }
-    }
-    return null;
-  });
-  const filterOptions = (query) => {
-    const regexp = new RegExp(escapeStringRegexp(query), "i");
-    const { filterMethod, remoteMethod } = toRaw(props);
-    const isFilterMethodValid = props.filterable && isFunction(filterMethod);
-    const isRemoteMethodValid = props.filterable && props.remote && isFunction(remoteMethod);
-    const isValidOption = (o) => {
-      if (isFilterMethodValid || isRemoteMethodValid) return true;
-      return query ? regexp.test(getLabel(o) || "") : true;
-    };
-    if (props.loading) {
-      return [];
-    }
-    return [...states.createdOptions, ...props.options].reduce((all, item) => {
-      const options = getOptions(item);
-      if (isArray(options)) {
-        const filtered = options.filter(isValidOption);
-        if (filtered.length > 0) {
-          all.push(
-            {
-              label: getLabel(item),
-              type: "Group"
-            },
-            ...filtered
-          );
-        }
-      } else if (props.remote || isValidOption(item)) {
-        all.push(item);
-      }
-      return all;
+      u.value = !1, l.menuVisibleOnFocus = !1, t.validateEvent && S?.validate?.("blur").catch((e) => te(e));
+    }
+  }), ce = o(() => me("")), L = o(() => t.loading ? !1 : t.options.length > 0 || l.createdOptions.length > 0), s = m([]), u = m(!1), ke = o(() => le?.statusIcon ?? !1), ze = o(() => {
+    const e = s.value.length * t.itemHeight;
+    return e > t.height ? t.height : e;
+  }), N = o(() => t.multiple ? w(t.modelValue) && t.modelValue.length > 0 : !ae(t.modelValue)), Ae = o(() => t.clearable && !x.value && l.inputHovering && N.value), de = o(
+    () => t.remote && t.filterable ? "" : "icon-arrow-down"
+  ), _e = o(
+    () => de.value && $.is("reverse", u.value)
+  ), $e = o(() => S?.validateState || ""), Ge = "validateIcon", re = o(() => t.remote ? 300 : 0), fe = o(() => t.loading ? t.loadingText || "加载中" : t.remote && !l.inputValue && !L.value ? !1 : t.filterable && l.inputValue && L.value && s.value.length === 0 ? t.noMatchText || "无匹配数据" : L.value ? null : t.noDataText || "暂无数据"), me = (e) => {
+    const n = new RegExp(Tt(e), "i"), { filterMethod: a, remoteMethod: i } = Ct(t), c = t.filterable && z(a), f = t.filterable && t.remote && z(i), P = (O) => c || f ? !0 : e ? n.test(g(O) || "") : !0;
+    return t.loading ? [] : [...l.createdOptions, ...t.options].reduce((O, I) => {
+      const K = Fe(I);
+      if (w(K)) {
+        const k = K.filter(P);
+        k.length > 0 && O.push(
+          {
+            label: g(I),
+            type: "Group"
+          },
+          ...k
+        );
+      } else (t.remote || P(I)) && O.push(I);
+      return O;
     }, []);
-  };
-  const updateOptions = () => {
-    filteredOptions.value = filterOptions(states.inputValue);
-  };
-  const allOptionsValueMap = computed(() => {
-    const valueMap = /* @__PURE__ */ new Map();
-    allOptions.value.forEach((option, index) => {
-      valueMap.set(getValueKey(getValue(option)), { option, index });
-    });
-    return valueMap;
-  });
-  const filteredOptionsValueMap = computed(() => {
-    const valueMap = /* @__PURE__ */ new Map();
-    filteredOptions.value.forEach((option, index) => {
-      valueMap.set(getValueKey(getValue(option)), { option, index });
-    });
-    return valueMap;
-  });
-  const optionsAllDisabled = computed(
-    () => filteredOptions.value.every((option) => getDisabled(option))
-  );
-  const selectSize = useFormSize();
-  const collapseTagSize = computed(
-    () => "small" === selectSize.value ? "small" : "default"
-  );
-  const calculatePopperSize = () => {
-    if (isNumber(props.fitInputWidth)) {
-      popperSize.value = props.fitInputWidth;
+  }, he = () => {
+    s.value = me(l.inputValue);
+  }, ve = o(() => {
+    const e = /* @__PURE__ */ new Map();
+    return ce.value.forEach((n, a) => {
+      e.set(r(d(n)), { option: n, index: a });
+    }), e;
+  }), D = o(() => {
+    const e = /* @__PURE__ */ new Map();
+    return s.value.forEach((n, a) => {
+      e.set(r(d(n)), { option: n, index: a });
+    }), e;
+  }), Qe = o(
+    () => s.value.every((e) => R(e))
+  ), ge = Bt(), Ue = o(
+    () => ge.value === "small" ? "small" : "default"
+  ), C = () => {
+    if (pt(t.fitInputWidth)) {
+      M.value = t.fitInputWidth;
       return;
     }
-    const width = selectRef.value?.offsetWidth || 200;
-    if (!props.fitInputWidth && hasOptions.value) {
-      nextTick(() => {
-        popperSize.value = Math.max(width, calculateLabelMaxWidth());
-      });
-    } else {
-      popperSize.value = width;
-    }
-  };
-  const calculateLabelMaxWidth = () => {
-    const canvas = document.createElement("canvas");
-    const ctx = canvas.getContext("2d");
-    const selector = nsSelect.be("dropdown", "item");
-    const dom = menuRef.value?.listRef?.innerRef || document;
-    const dropdownItemEl = dom.querySelector(`.${selector}`);
-    if (dropdownItemEl === null || ctx === null) return 0;
-    const style = getComputedStyle(dropdownItemEl);
-    const padding = Number.parseFloat(style.paddingLeft) + Number.parseFloat(style.paddingRight);
-    ctx.font = `bold ${style.font.replace(
-      new RegExp(`\\b${style.fontWeight}\\b`),
+    const e = G.value?.offsetWidth || 200;
+    !t.fitInputWidth && L.value ? h(() => {
+      M.value = Math.max(e, je());
+    }) : M.value = e;
+  }, je = () => {
+    const n = document.createElement("canvas").getContext("2d"), a = $.be("dropdown", "item"), c = (b.value?.listRef?.innerRef || document).querySelector(`.${a}`);
+    if (c === null || n === null) return 0;
+    const f = getComputedStyle(c), P = Number.parseFloat(f.paddingLeft) + Number.parseFloat(f.paddingRight);
+    return n.font = `bold ${f.font.replace(
+      new RegExp(`\\b${f.fontWeight}\\b`),
       ""
-    )}`;
-    const maxWidth = filteredOptions.value.reduce((max, option) => {
-      const metrics = ctx.measureText(getLabel(option));
-      return Math.max(metrics.width, max);
-    }, 0);
-    return maxWidth + padding;
-  };
-  const getGapWidth = () => {
-    if (!selectionRef.value) return 0;
-    const style = window.getComputedStyle(selectionRef.value);
-    return Number.parseFloat(style.gap || "6px");
-  };
-  const tagStyle = computed(() => {
-    const gapWidth = getGapWidth();
-    const maxWidth = collapseItemRef.value && props.maxCollapseTags === 1 ? states.selectionWidth - states.collapseItemWidth - gapWidth : states.selectionWidth;
-    return { maxWidth: `${maxWidth}px` };
-  });
-  const collapseTagStyle = computed(() => {
-    return { maxWidth: `${states.selectionWidth}px` };
-  });
-  const shouldShowPlaceholder = computed(() => {
-    if (isArray(props.modelValue)) {
-      return props.modelValue.length === 0 && !states.inputValue;
-    }
-    return props.filterable ? !states.inputValue : true;
-  });
-  const currentPlaceholder = computed(() => {
-    const _placeholder = props.placeholder || "请选择";
-    return props.multiple || !hasModelValue.value ? _placeholder : states.selectedLabel;
-  });
-  const popperRef = computed(() => tooltipRef.value?.popperRef?.contentRef);
-  const indexRef = computed(() => {
-    if (props.multiple) {
-      const len = props.modelValue.length;
-      if (props.modelValue.length > 0 && filteredOptionsValueMap.value.has(props.modelValue[len - 1])) {
-        const { index } = filteredOptionsValueMap.value.get(
-          props.modelValue[len - 1]
+    )}`, s.value.reduce((I, K) => {
+      const k = n.measureText(g(K));
+      return Math.max(k.width, I);
+    }, 0) + P;
+  }, qe = () => {
+    if (!y.value) return 0;
+    const e = window.getComputedStyle(y.value);
+    return Number.parseFloat(e.gap || "6px");
+  }, Je = o(() => {
+    const e = qe();
+    return { maxWidth: `${F.value && t.maxCollapseTags === 1 ? l.selectionWidth - l.collapseItemWidth - e : l.selectionWidth}px` };
+  }), Xe = o(() => ({ maxWidth: `${l.selectionWidth}px` })), Ye = o(() => w(t.modelValue) ? t.modelValue.length === 0 && !l.inputValue : t.filterable ? !l.inputValue : !0), Ze = o(() => {
+    const e = t.placeholder || "请选择";
+    return t.multiple || !N.value ? e : l.selectedLabel;
+  }), et = o(() => W.value?.popperRef?.contentRef), tt = o(() => {
+    if (t.multiple) {
+      const e = t.modelValue.length;
+      if (t.modelValue.length > 0 && D.value.has(t.modelValue[e - 1])) {
+        const { index: n } = D.value.get(
+          t.modelValue[e - 1]
         );
-        return index;
-      }
-    } else {
-      if (!isEmptyValue(props.modelValue) && filteredOptionsValueMap.value.has(props.modelValue)) {
-        const { index } = filteredOptionsValueMap.value.get(props.modelValue);
-        return index;
+        return n;
       }
+    } else if (!ae(t.modelValue) && D.value.has(t.modelValue)) {
+      const { index: e } = D.value.get(t.modelValue);
+      return e;
     }
     return -1;
-  });
-  const dropdownMenuVisible = computed({
+  }), lt = o({
     get() {
-      return expanded.value && emptyText.value !== false;
+      return u.value && fe.value !== !1;
     },
-    set(val) {
-      expanded.value = val;
-    }
-  });
-  const showTagList = computed(() => {
-    if (!props.multiple) {
-      return [];
-    }
-    return props.collapseTags ? states.cachedOptions.slice(0, props.maxCollapseTags) : states.cachedOptions;
-  });
-  const collapseTagList = computed(() => {
-    if (!props.multiple) {
-      return [];
-    }
-    return props.collapseTags ? states.cachedOptions.slice(props.maxCollapseTags) : [];
-  });
-  const {
-    createNewOption,
-    removeNewOption,
-    selectNewOption,
-    clearAllNewOption
-  } = useAllowCreate(props, states);
-  const toggleMenu = () => {
-    if (selectDisabled.value) return;
-    if (states.menuVisibleOnFocus) {
-      states.menuVisibleOnFocus = false;
-    } else {
-      expanded.value = !expanded.value;
-    }
-  };
-  const onInputChange = () => {
-    if (states.inputValue.length > 0 && !expanded.value) {
-      expanded.value = true;
-    }
-    createNewOption(states.inputValue);
-    nextTick(() => {
-      handleQueryChange(states.inputValue);
+    set(e) {
+      u.value = e;
+    }
+  }), nt = o(() => t.multiple ? t.collapseTags ? l.cachedOptions.slice(0, t.maxCollapseTags) : l.cachedOptions : []), at = o(() => t.multiple ? t.collapseTags ? l.cachedOptions.slice(t.maxCollapseTags) : [] : []), {
+    createNewOption: Ve,
+    removeNewOption: U,
+    selectNewOption: be,
+    clearAllNewOption: j
+  } = Lt(t, l), q = () => {
+    x.value || (l.menuVisibleOnFocus ? l.menuVisibleOnFocus = !1 : u.value = !u.value);
+  }, xe = () => {
+    l.inputValue.length > 0 && !u.value && (u.value = !0), Ve(l.inputValue), h(() => {
+      J(l.inputValue);
     });
-  };
-  const debouncedOnInputChange = debounce(onInputChange, debounce$1.value);
-  const handleQueryChange = (val) => {
-    if (states.previousQuery === val || isComposing.value) {
-      return;
-    }
-    states.previousQuery = val;
-    if (props.filterable && isFunction(props.filterMethod)) {
-      props.filterMethod(val);
-    } else if (props.filterable && props.remote && isFunction(props.remoteMethod)) {
-      props.remoteMethod(val);
-    }
-    if (props.defaultFirstOption && (props.filterable || props.remote) && filteredOptions.value.length) {
-      nextTick(checkDefaultFirstOption);
-    } else {
-      nextTick(updateHoveringIndex);
-    }
-  };
-  const checkDefaultFirstOption = () => {
-    const optionsInDropdown = filteredOptions.value.filter(
-      (n) => !n.disabled && n.type !== "Group"
-    );
-    const userCreatedOption = optionsInDropdown.find((n) => n.created);
-    const firstOriginOption = optionsInDropdown[0];
-    states.hoveringIndex = getValueIndex(
-      filteredOptions.value,
-      userCreatedOption || firstOriginOption
+  }, Oe = St(xe, re.value), J = (e) => {
+    l.previousQuery === e || oe.value || (l.previousQuery = e, t.filterable && z(t.filterMethod) ? t.filterMethod(e) : t.filterable && t.remote && z(t.remoteMethod) && t.remoteMethod(e), t.defaultFirstOption && (t.filterable || t.remote) && s.value.length ? h(it) : h(gt));
+  }, it = () => {
+    const e = s.value.filter(
+      (i) => !i.disabled && i.type !== "Group"
+    ), n = e.find((i) => i.created), a = e[0];
+    l.hoveringIndex = X(
+      s.value,
+      n || a
     );
-  };
-  const emitChange = (val) => {
-    if (!isEqual(props.modelValue, val)) {
-      emit(CHANGE_EVENT, val);
-    }
-  };
-  const update = (val) => {
-    emit(UPDATE_MODEL_EVENT, val);
-    emitChange(val);
-    states.previousValue = props.multiple ? String(val) : val;
-    nextTick(() => {
-      if (props.multiple && isArray(props.modelValue)) {
-        const cachedOptions = states.cachedOptions.slice();
-        const selectedOptions = props.modelValue.map(
-          (value) => getOption(value, cachedOptions)
+  }, ot = (e) => {
+    _(t.modelValue, e) || v(It, e);
+  }, E = (e) => {
+    v(Ot, e), ot(e), l.previousValue = t.multiple ? String(e) : e, h(() => {
+      if (t.multiple && w(t.modelValue)) {
+        const n = l.cachedOptions.slice(), a = t.modelValue.map(
+          (i) => Te(i, n)
         );
-        if (!isEqual(states.cachedOptions, selectedOptions)) {
-          states.cachedOptions = selectedOptions;
-        }
-      } else {
-        initStates(true);
-      }
+        _(l.cachedOptions, a) || (l.cachedOptions = a);
+      } else
+        B(!0);
     });
-  };
-  const getValueIndex = (arr = [], value) => {
-    if (!isObject(value)) {
-      return arr.indexOf(value);
-    }
-    const valueKey = props.valueKey;
-    let index = -1;
-    arr.some((item, i) => {
-      if (get(item, valueKey) === get(value, valueKey)) {
-        index = i;
-        return true;
-      }
-      return false;
-    });
-    return index;
-  };
-  const getValueKey = (item) => {
-    return isObject(item) ? get(item, props.valueKey) : item;
-  };
-  const handleResize = () => {
-    calculatePopperSize();
-  };
-  const resetSelectionWidth = () => {
-    states.selectionWidth = Number.parseFloat(
-      window.getComputedStyle(selectionRef.value).width
+  }, X = (e = [], n) => {
+    if (!ee(n))
+      return e.indexOf(n);
+    const a = t.valueKey;
+    let i = -1;
+    return e.some((c, f) => A(c, a) === A(n, a) ? (i = f, !0) : !1), i;
+  }, r = (e) => ee(e) ? A(e, t.valueKey) : e, Ie = () => {
+    C();
+  }, pe = () => {
+    l.selectionWidth = Number.parseFloat(
+      window.getComputedStyle(y.value).width
     );
-  };
-  const resetCollapseItemWidth = () => {
-    states.collapseItemWidth = collapseItemRef.value.getBoundingClientRect().width;
-  };
-  const updateTooltip = () => {
-    tooltipRef.value?.updatePopper?.();
-  };
-  const updateTagTooltip = () => {
-    tagTooltipRef.value?.updatePopper?.();
-  };
-  const onSelect = (option) => {
-    if (props.multiple) {
-      let selectedOptions = props.modelValue.slice();
-      const index = getValueIndex(selectedOptions, getValue(option));
-      if (index > -1) {
-        selectedOptions = [
-          ...selectedOptions.slice(0, index),
-          ...selectedOptions.slice(index + 1)
-        ];
-        states.cachedOptions.splice(index, 1);
-        removeNewOption(option);
-      } else if (props.multipleLimit <= 0 || selectedOptions.length < props.multipleLimit) {
-        selectedOptions = [...selectedOptions, getValue(option)];
-        states.cachedOptions.push(option);
-        selectNewOption(option);
-      }
-      update(selectedOptions);
-      if (option.created) {
-        handleQueryChange("");
-      }
-      if (props.filterable && !props.reserveKeyword) {
-        states.inputValue = "";
-      }
-    } else {
-      states.selectedLabel = getLabel(option);
-      update(getValue(option));
-      expanded.value = false;
-      selectNewOption(option);
-      if (!option.created) {
-        clearAllNewOption();
-      }
-    }
-    focus();
-  };
-  const deleteTag = (event, option) => {
-    let selectedOptions = props.modelValue.slice();
-    const index = getValueIndex(selectedOptions, getValue(option));
-    if (index > -1 && !selectDisabled.value) {
-      selectedOptions = [
-        ...props.modelValue.slice(0, index),
-        ...props.modelValue.slice(index + 1)
-      ];
-      states.cachedOptions.splice(index, 1);
-      update(selectedOptions);
-      emit("remove-tag", getValue(option));
-      removeNewOption(option);
-    }
-    event.stopPropagation();
-    focus();
-  };
-  const focus = () => {
-    inputRef.value?.focus();
-  };
-  const blur = () => {
-    if (expanded.value) {
-      expanded.value = false;
-      nextTick(() => inputRef.value?.blur());
+  }, ut = () => {
+    l.collapseItemWidth = F.value.getBoundingClientRect().width;
+  }, Y = () => {
+    W.value?.updatePopper?.();
+  }, we = () => {
+    Q.value?.updatePopper?.();
+  }, ye = (e) => {
+    if (t.multiple) {
+      let n = t.modelValue.slice();
+      const a = X(n, d(e));
+      a > -1 ? (n = [
+        ...n.slice(0, a),
+        ...n.slice(a + 1)
+      ], l.cachedOptions.splice(a, 1), U(e)) : (t.multipleLimit <= 0 || n.length < t.multipleLimit) && (n = [...n, d(e)], l.cachedOptions.push(e), be(e)), E(n), e.created && J(""), t.filterable && !t.reserveKeyword && (l.inputValue = "");
+    } else
+      l.selectedLabel = g(e), E(d(e)), u.value = !1, be(e), e.created || j();
+    H();
+  }, st = (e, n) => {
+    let a = t.modelValue.slice();
+    const i = X(a, d(n));
+    i > -1 && !x.value && (a = [
+      ...t.modelValue.slice(0, i),
+      ...t.modelValue.slice(i + 1)
+    ], l.cachedOptions.splice(i, 1), E(a), v("remove-tag", d(n)), U(n)), e.stopPropagation(), H();
+  }, H = () => {
+    V.value?.focus();
+  }, ct = () => {
+    if (u.value) {
+      u.value = !1, h(() => V.value?.blur());
       return;
     }
-    inputRef.value?.blur();
-  };
-  const handleEsc = () => {
-    if (states.inputValue.length > 0) {
-      states.inputValue = "";
-    } else {
-      expanded.value = false;
-    }
-  };
-  const getLastNotDisabledIndex = (value) => findLastIndex(
-    value,
-    (it) => !states.cachedOptions.some(
-      (option) => getValue(option) === it && getDisabled(option)
+    V.value?.blur();
+  }, dt = () => {
+    l.inputValue.length > 0 ? l.inputValue = "" : u.value = !1;
+  }, rt = (e) => Rt(
+    e,
+    (n) => !l.cachedOptions.some(
+      (a) => d(a) === n && R(a)
     )
-  );
-  const handleDel = (e) => {
-    if (!props.multiple) return;
-    if (e.code === EVENT_CODE.delete) return;
-    if (states.inputValue.length === 0) {
+  ), ft = (e) => {
+    if (t.multiple && e.code !== xt.delete && l.inputValue.length === 0) {
       e.preventDefault();
-      const selected = props.modelValue.slice();
-      const lastNotDisabledIndex = getLastNotDisabledIndex(selected);
-      if (lastNotDisabledIndex < 0) return;
-      const removeTagValue = selected[lastNotDisabledIndex];
-      selected.splice(lastNotDisabledIndex, 1);
-      const option = states.cachedOptions[lastNotDisabledIndex];
-      states.cachedOptions.splice(lastNotDisabledIndex, 1);
-      removeNewOption(option);
-      update(selected);
-      emit("remove-tag", removeTagValue);
-    }
-  };
-  const handleClear = () => {
-    let emptyValue;
-    if (isArray(props.modelValue)) {
-      emptyValue = [];
-    } else {
-      emptyValue = valueOnClear.value;
-    }
-    states.selectedLabel = "";
-    expanded.value = false;
-    update(emptyValue);
-    emit("clear");
-    clearAllNewOption();
-    focus();
-  };
-  const onKeyboardNavigate = (direction, hoveringIndex = void 0) => {
-    const options = filteredOptions.value;
-    if (!["forward", "backward"].includes(direction) || selectDisabled.value || options.length <= 0 || optionsAllDisabled.value || isComposing.value) {
+      const n = t.modelValue.slice(), a = rt(n);
+      if (a < 0) return;
+      const i = n[a];
+      n.splice(a, 1);
+      const c = l.cachedOptions[a];
+      l.cachedOptions.splice(a, 1), U(c), E(n), v("remove-tag", i);
+    }
+  }, mt = () => {
+    let e;
+    w(t.modelValue) ? e = [] : e = Le.value, l.selectedLabel = "", u.value = !1, E(e), v("clear"), j(), H();
+  }, Ce = (e, n = void 0) => {
+    const a = s.value;
+    if (!["forward", "backward"].includes(e) || x.value || a.length <= 0 || Qe.value || oe.value)
       return;
-    }
-    if (!expanded.value) {
-      return toggleMenu();
-    }
-    if (isUndefined(hoveringIndex)) {
-      hoveringIndex = states.hoveringIndex;
-    }
-    let newIndex = -1;
-    if (direction === "forward") {
-      newIndex = hoveringIndex + 1;
-      if (newIndex >= options.length) {
-        newIndex = 0;
-      }
-    } else if (direction === "backward") {
-      newIndex = hoveringIndex - 1;
-      if (newIndex < 0 || newIndex >= options.length) {
-        newIndex = options.length - 1;
-      }
-    }
-    const option = options[newIndex];
-    if (getDisabled(option) || option.type === "Group") {
-      return onKeyboardNavigate(direction, newIndex);
-    } else {
-      states.hoveringIndex = newIndex;
-      scrollToItem(newIndex);
-    }
-  };
-  const onKeyboardSelect = () => {
-    if (!expanded.value) {
-      return toggleMenu();
-    } else if (~states.hoveringIndex && filteredOptions.value[states.hoveringIndex]) {
-      onSelect(filteredOptions.value[states.hoveringIndex]);
-    }
-  };
-  const onHoverOption = (idx) => {
-    states.hoveringIndex = idx ?? -1;
-  };
-  const updateHoveringIndex = () => {
-    if (!props.multiple) {
-      states.hoveringIndex = filteredOptions.value.findIndex((item) => {
-        return getValueKey(getValue(item)) === getValueKey(props.modelValue);
-      });
-    } else {
-      states.hoveringIndex = filteredOptions.value.findIndex(
-        (item) => props.modelValue.some(
-          (modelValue) => getValueKey(modelValue) === getValueKey(getValue(item))
-        )
+    if (!u.value)
+      return q();
+    wt(n) && (n = l.hoveringIndex);
+    let i = -1;
+    e === "forward" ? (i = n + 1, i >= a.length && (i = 0)) : e === "backward" && (i = n - 1, (i < 0 || i >= a.length) && (i = a.length - 1));
+    const c = a[i];
+    if (R(c) || c.type === "Group")
+      return Ce(e, i);
+    l.hoveringIndex = i, Z(i);
+  }, ht = () => {
+    if (u.value)
+      ~l.hoveringIndex && s.value[l.hoveringIndex] && ye(s.value[l.hoveringIndex]);
+    else return q();
+  }, vt = (e) => {
+    l.hoveringIndex = e ?? -1;
+  }, gt = () => {
+    t.multiple ? l.hoveringIndex = s.value.findIndex(
+      (e) => t.modelValue.some(
+        (n) => r(n) === r(d(e))
+      )
+    ) : l.hoveringIndex = s.value.findIndex((e) => r(d(e)) === r(t.modelValue));
+  }, Ee = (e) => {
+    if (l.inputValue = e.target.value, t.remote)
+      Oe();
+    else
+      return xe();
+  }, Vt = (e) => {
+    if (u.value = !1, se.value) {
+      const n = new FocusEvent("focus", e);
+      Ke(n);
+    }
+  }, bt = () => (l.isBeforeHide = !1, h(() => {
+    ~tt.value && Z(l.hoveringIndex);
+  })), Z = (e) => {
+    b.value.scrollToItem(e);
+  }, Te = (e, n) => {
+    const a = r(e);
+    if (ve.value.has(a)) {
+      const { option: i } = ve.value.get(a);
+      return i;
+    }
+    if (n && n.length) {
+      const i = n.find(
+        (c) => r(d(c)) === a
       );
-    }
-  };
-  const onInput = (event) => {
-    states.inputValue = event.target.value;
-    if (props.remote) {
-      debouncedOnInputChange();
-    } else {
-      return onInputChange();
-    }
-  };
-  const handleClickOutside = (event) => {
-    expanded.value = false;
-    if (isFocused.value) {
-      const _event = new FocusEvent("focus", event);
-      handleBlur(_event);
-    }
-  };
-  const handleMenuEnter = () => {
-    states.isBeforeHide = false;
-    return nextTick(() => {
-      if (~indexRef.value) {
-        scrollToItem(states.hoveringIndex);
-      }
-    });
-  };
-  const scrollToItem = (index) => {
-    menuRef.value.scrollToItem(index);
-  };
-  const getOption = (value, cachedOptions) => {
-    const selectValue = getValueKey(value);
-    if (allOptionsValueMap.value.has(selectValue)) {
-      const { option } = allOptionsValueMap.value.get(selectValue);
-      return option;
-    }
-    if (cachedOptions && cachedOptions.length) {
-      const option = cachedOptions.find(
-        (option2) => getValueKey(getValue(option2)) === selectValue
-      );
-      if (option) {
-        return option;
-      }
+      if (i)
+        return i;
     }
     return {
-      [aliasProps.value.value]: value,
-      [aliasProps.value.label]: value
+      [ne.value.value]: e,
+      [ne.value.label]: e
     };
-  };
-  const initStates = (needUpdateSelectedLabel = false) => {
-    if (props.multiple) {
-      if (props.modelValue.length > 0) {
-        const cachedOptions = states.cachedOptions.slice();
-        states.cachedOptions.length = 0;
-        states.previousValue = props.modelValue.toString();
-        for (const value of props.modelValue) {
-          const option = getOption(value, cachedOptions);
-          states.cachedOptions.push(option);
-        }
-      } else {
-        states.cachedOptions = [];
-        states.previousValue = void 0;
-      }
-    } else {
-      if (hasModelValue.value) {
-        states.previousValue = props.modelValue;
-        const options = filteredOptions.value;
-        const selectedItemIndex = options.findIndex(
-          (option) => getValueKey(getValue(option)) === getValueKey(props.modelValue)
-        );
-        if (~selectedItemIndex) {
-          states.selectedLabel = getLabel(options[selectedItemIndex]);
-        } else {
-          if (!states.selectedLabel || needUpdateSelectedLabel) {
-            states.selectedLabel = getValueKey(props.modelValue);
-          }
+  }, B = (e = !1) => {
+    if (t.multiple)
+      if (t.modelValue.length > 0) {
+        const n = l.cachedOptions.slice();
+        l.cachedOptions.length = 0, l.previousValue = t.modelValue.toString();
+        for (const a of t.modelValue) {
+          const i = Te(a, n);
+          l.cachedOptions.push(i);
         }
-      } else {
-        states.selectedLabel = "";
-        states.previousValue = void 0;
-      }
-    }
-    clearAllNewOption();
-    calculatePopperSize();
+      } else
+        l.cachedOptions = [], l.previousValue = void 0;
+    else if (N.value) {
+      l.previousValue = t.modelValue;
+      const n = s.value, a = n.findIndex(
+        (i) => r(d(i)) === r(t.modelValue)
+      );
+      ~a ? l.selectedLabel = g(n[a]) : (!l.selectedLabel || e) && (l.selectedLabel = r(t.modelValue));
+    } else
+      l.selectedLabel = "", l.previousValue = void 0;
+    j(), C();
   };
-  watch(
-    () => props.fitInputWidth,
+  return T(
+    () => t.fitInputWidth,
     () => {
-      calculatePopperSize();
-    }
-  );
-  watch(expanded, (val) => {
-    if (val) {
-      if (!props.persistent) {
-        calculatePopperSize();
-      }
-      handleQueryChange("");
-    } else {
-      states.inputValue = "";
-      states.previousQuery = null;
-      states.isBeforeHide = true;
-      createNewOption("");
-    }
-    emit("visible-change", val);
-  });
-  watch(
-    () => props.modelValue,
-    (val, oldVal) => {
-      const isValEmpty = !val || isArray(val) && val.length === 0;
-      if (isValEmpty || props.multiple && !isEqual(val.toString(), states.previousValue) || !props.multiple && getValueKey(val) !== getValueKey(states.previousValue)) {
-        initStates(true);
-      }
-      if (!isEqual(val, oldVal) && props.validateEvent) {
-        elFormItem?.validate?.("change").catch((err) => debugWarn(err));
-      }
+      C();
+    }
+  ), T(u, (e) => {
+    e ? (t.persistent || C(), J("")) : (l.inputValue = "", l.previousQuery = null, l.isBeforeHide = !0, Ve("")), v("visible-change", e);
+  }), T(
+    () => t.modelValue,
+    (e, n) => {
+      (!e || w(e) && e.length === 0 || t.multiple && !_(e.toString(), l.previousValue) || !t.multiple && r(e) !== r(l.previousValue)) && B(!0), !_(e, n) && t.validateEvent && S?.validate?.("change").catch((i) => te(i));
     },
     {
-      deep: true
+      deep: !0
     }
-  );
-  watch(
-    () => props.options,
+  ), T(
+    () => t.options,
     () => {
-      const input = inputRef.value;
-      if (!input || input && document.activeElement !== input) {
-        initStates();
-      }
+      const e = V.value;
+      (!e || e && document.activeElement !== e) && B();
     },
     {
-      deep: true,
+      deep: !0,
       flush: "post"
     }
-  );
-  watch(
-    () => filteredOptions.value,
-    () => {
-      calculatePopperSize();
-      return menuRef.value && nextTick(menuRef.value.resetScrollTop);
-    }
-  );
-  watchEffect(() => {
-    if (states.isBeforeHide) return;
-    updateOptions();
-  });
-  watchEffect(() => {
-    const { valueKey, options } = props;
-    const duplicateValue = /* @__PURE__ */ new Map();
-    for (const item of options) {
-      const optionValue = getValue(item);
-      let v = optionValue;
-      if (isObject(v)) {
-        v = get(optionValue, valueKey);
-      }
-      if (duplicateValue.get(v)) {
-        debugWarn(
+  ), T(
+    () => s.value,
+    () => (C(), b.value && h(b.value.resetScrollTop))
+  ), Se(() => {
+    l.isBeforeHide || he();
+  }), Se(() => {
+    const { valueKey: e, options: n } = t, a = /* @__PURE__ */ new Map();
+    for (const i of n) {
+      const c = d(i);
+      let f = c;
+      if (ee(f) && (f = A(c, e)), a.get(f)) {
+        te(
           "ElSelectV2",
-          `The option values you provided seem to be duplicated, which may cause some problems, please check.`
+          "The option values you provided seem to be duplicated, which may cause some problems, please check."
         );
         break;
-      } else {
-        duplicateValue.set(v, true);
-      }
+      } else
+        a.set(f, !0);
     }
-  });
-  onMounted(() => {
-    initStates();
-  });
-  useResizeObserver(selectRef, handleResize);
-  useResizeObserver(selectionRef, resetSelectionWidth);
-  useResizeObserver(menuRef, updateTooltip);
-  useResizeObserver(wrapperRef, updateTooltip);
-  useResizeObserver(tagMenuRef, updateTagTooltip);
-  useResizeObserver(collapseItemRef, resetCollapseItemWidth);
-  return {
+  }), Et(() => {
+    B();
+  }), p(G, Ie), p(y, pe), p(b, Y), p(ue, Y), p(ie, we), p(F, ut), {
     // data exports
-    inputId,
-    collapseTagSize,
-    currentPlaceholder,
-    expanded,
-    emptyText,
-    popupHeight,
-    debounce: debounce$1,
-    allOptions,
-    filteredOptions,
-    iconComponent,
-    iconReverse,
-    tagStyle,
-    collapseTagStyle,
-    popperSize,
-    dropdownMenuVisible,
-    hasModelValue,
-    shouldShowPlaceholder,
-    selectDisabled,
-    selectSize,
-    needStatusIcon,
-    showClearBtn,
-    states,
-    isFocused,
-    nsSelect,
-    nsInput,
+    inputId: We,
+    collapseTagSize: Ue,
+    currentPlaceholder: Ze,
+    expanded: u,
+    emptyText: fe,
+    popupHeight: ze,
+    debounce: re,
+    allOptions: ce,
+    filteredOptions: s,
+    iconComponent: de,
+    iconReverse: _e,
+    tagStyle: Je,
+    collapseTagStyle: Xe,
+    popperSize: M,
+    dropdownMenuVisible: lt,
+    hasModelValue: N,
+    shouldShowPlaceholder: Ye,
+    selectDisabled: x,
+    selectSize: ge,
+    needStatusIcon: ke,
+    showClearBtn: Ae,
+    states: l,
+    isFocused: se,
+    nsSelect: $,
+    nsInput: Me,
     // refs items exports
-    inputRef,
-    menuRef,
-    tagMenuRef,
-    tooltipRef,
-    tagTooltipRef,
-    selectRef,
-    wrapperRef,
-    selectionRef,
-    prefixRef,
-    suffixRef,
-    collapseItemRef,
-    popperRef,
-    validateState,
-    validateIcon,
-    showTagList,
-    collapseTagList,
+    inputRef: V,
+    menuRef: b,
+    tagMenuRef: ie,
+    tooltipRef: W,
+    tagTooltipRef: Q,
+    selectRef: G,
+    wrapperRef: ue,
+    selectionRef: y,
+    prefixRef: Ne,
+    suffixRef: De,
+    collapseItemRef: F,
+    popperRef: et,
+    validateState: $e,
+    validateIcon: Ge,
+    showTagList: nt,
+    collapseTagList: at,
     // methods exports
-    debouncedOnInputChange,
-    deleteTag,
-    getLabel,
-    getValue,
-    getDisabled,
-    getValueKey,
-    handleClear,
-    handleClickOutside,
-    handleDel,
-    handleEsc,
-    focus,
-    blur,
-    handleMenuEnter,
-    handleResize,
-    resetSelectionWidth,
-    updateTooltip,
-    updateTagTooltip,
-    updateOptions,
-    toggleMenu,
-    scrollTo: scrollToItem,
-    onInput,
-    onKeyboardNavigate,
-    onKeyboardSelect,
-    onSelect,
-    onHover: onHoverOption,
-    handleCompositionStart,
-    handleCompositionEnd,
-    handleCompositionUpdate
+    debouncedOnInputChange: Oe,
+    deleteTag: st,
+    getLabel: g,
+    getValue: d,
+    getDisabled: R,
+    getValueKey: r,
+    handleClear: mt,
+    handleClickOutside: Vt,
+    handleDel: ft,
+    handleEsc: dt,
+    focus: H,
+    blur: ct,
+    handleMenuEnter: bt,
+    handleResize: Ie,
+    resetSelectionWidth: pe,
+    updateTooltip: Y,
+    updateTagTooltip: we,
+    updateOptions: he,
+    toggleMenu: q,
+    scrollTo: Z,
+    onInput: Ee,
+    onKeyboardNavigate: Ce,
+    onKeyboardSelect: ht,
+    onSelect: ye,
+    onHover: vt,
+    handleCompositionStart: He,
+    handleCompositionEnd: Be,
+    handleCompositionUpdate: Pe
   };
 };
 export {
-  useSelect as default
+  il as default
 };