vft 0.0.362 → 0.0.363

package/lib/components/select/useSelect.cjs

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