vft 0.0.524 → 0.0.525

package/lib/components/select/useSelect.cjs

@@ -1 +1,617 @@
-"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;
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_error = require("../../utils/error.cjs");
+const require_index = require("../../hooks/use-namespace/index.cjs");
+const require_aria = require("../../constants/aria.cjs");
+const require_event = require("../../constants/event.cjs");
+const require_index$1 = require("../../hooks/use-composition/index.cjs");
+const require_index$2 = require("../../hooks/use-focus-controller/index.cjs");
+const require_data_helper = require("../../utils/vue/data-helper.cjs");
+const require_use_form_common_props = require("../form/hooks/use-form-common-props.cjs");
+const require_use_form_item = require("../form/hooks/use-form-item.cjs");
+const require_index$3 = require("../../hooks/use-empty-values/index.cjs");
+const require_useProps = require("./useProps.cjs");
+const require_useAllowCreate = require("./useAllowCreate.cjs");
+let _vft_utils = require("@vft/utils");
+let _vueuse_core = require("@vueuse/core");
+let lodash_es = require("lodash-es");
+let vue = require("vue");
+//#region ../../packages/components/select/useSelect.ts
+const useSelect = (props, emit) => {
+	const nsSelect = require_index.useNamespace("select");
+	const nsInput = require_index.useNamespace("input");
+	const { form: elForm, formItem: elFormItem } = require_use_form_item.useFormItem();
+	const { inputId } = require_use_form_item.useFormItemInputId(props, { formItemContext: elFormItem });
+	const { aliasProps, getLabel, getValue, getDisabled, getOptions } = require_useProps.useProps(props);
+	const { valueOnClear, isEmptyValue } = require_index$3.useEmptyValues(props);
+	const states = (0, 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 = (0, vue.ref)(-1);
+	const selectRef = (0, vue.ref)();
+	const selectionRef = (0, vue.ref)();
+	const tooltipRef = (0, vue.ref)();
+	const tagTooltipRef = (0, vue.ref)();
+	const inputRef = (0, vue.ref)();
+	const prefixRef = (0, vue.ref)();
+	const suffixRef = (0, vue.ref)();
+	const menuRef = (0, vue.ref)();
+	const tagMenuRef = (0, vue.ref)();
+	const collapseItemRef = (0, vue.ref)();
+	const { isComposing, handleCompositionStart, handleCompositionEnd, handleCompositionUpdate } = require_index$1.useComposition({ afterComposition: (e) => onInput(e) });
+	const selectDisabled = (0, vue.computed)(() => props.disabled || !!elForm?.disabled);
+	const { wrapperRef, isFocused, handleBlur } = require_index$2.useFocusController(inputRef, {
+		disabled: selectDisabled,
+		afterFocus() {
+			if (props.automaticDropdown && !expanded.value) {
+				expanded.value = true;
+				states.menuVisibleOnFocus = true;
+			}
+		},
+		beforeBlur(event) {
+			return tooltipRef.value?.isFocusInsideContent(event) || tagTooltipRef.value?.isFocusInsideContent(event);
+		},
+		afterBlur() {
+			expanded.value = false;
+			states.menuVisibleOnFocus = false;
+			if (props.validateEvent) elFormItem?.validate?.("blur").catch((err) => require_error.debugWarn(err));
+		}
+	});
+	const allOptions = (0, vue.computed)(() => filterOptions(""));
+	const hasOptions = (0, vue.computed)(() => {
+		if (props.loading) return false;
+		return props.options.length > 0 || states.createdOptions.length > 0;
+	});
+	const filteredOptions = (0, vue.ref)([]);
+	const expanded = (0, vue.ref)(false);
+	const needStatusIcon = (0, vue.computed)(() => elForm?.statusIcon ?? false);
+	const popupHeight = (0, vue.computed)(() => {
+		const totalHeight = filteredOptions.value.length * props.itemHeight;
+		return totalHeight > props.height ? props.height : totalHeight;
+	});
+	const hasModelValue = (0, vue.computed)(() => {
+		return props.multiple ? (0, _vft_utils.isArray)(props.modelValue) && props.modelValue.length > 0 : !isEmptyValue(props.modelValue);
+	});
+	const showClearBtn = (0, vue.computed)(() => {
+		return props.clearable && !selectDisabled.value && states.inputHovering && hasModelValue.value;
+	});
+	const iconComponent = (0, vue.computed)(() => props.remote && props.filterable ? "" : "icon-arrow-down");
+	const iconReverse = (0, vue.computed)(() => iconComponent.value && nsSelect.is("reverse", expanded.value));
+	const validateState = (0, vue.computed)(() => elFormItem?.validateState || "");
+	const validateIcon = "validateIcon";
+	const debounce = (0, vue.computed)(() => props.remote ? 300 : 0);
+	const emptyText = (0, 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(require_data_helper.escapeStringRegexp(query), "i");
+		const { filterMethod, remoteMethod } = (0, vue.toRaw)(props);
+		const isFilterMethodValid = props.filterable && (0, _vft_utils.isFunction)(filterMethod);
+		const isRemoteMethodValid = props.filterable && props.remote && (0, _vft_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 ((0, _vft_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 = (0, vue.computed)(() => {
+		const valueMap = /* @__PURE__ */ new Map();
+		allOptions.value.forEach((option, index) => {
+			valueMap.set(getValueKey(getValue(option)), {
+				option,
+				index
+			});
+		});
+		return valueMap;
+	});
+	const filteredOptionsValueMap = (0, vue.computed)(() => {
+		const valueMap = /* @__PURE__ */ new Map();
+		filteredOptions.value.forEach((option, index) => {
+			valueMap.set(getValueKey(getValue(option)), {
+				option,
+				index
+			});
+		});
+		return valueMap;
+	});
+	const optionsAllDisabled = (0, vue.computed)(() => filteredOptions.value.every((option) => getDisabled(option)));
+	const selectSize = require_use_form_common_props.useFormSize();
+	const collapseTagSize = (0, vue.computed)(() => "small" === selectSize.value ? "small" : "default");
+	const calculatePopperSize = () => {
+		if ((0, _vft_utils.isNumber)(props.fitInputWidth)) {
+			popperSize.value = props.fitInputWidth;
+			return;
+		}
+		const width = selectRef.value?.offsetWidth || 200;
+		if (!props.fitInputWidth && hasOptions.value) (0, vue.nextTick)(() => {
+			popperSize.value = Math.max(width, calculateLabelMaxWidth());
+		});
+		else popperSize.value = width;
+	};
+	const calculateLabelMaxWidth = () => {
+		const ctx = document.createElement("canvas").getContext("2d");
+		const selector = nsSelect.be("dropdown", "item");
+		const dropdownItemEl = (menuRef.value?.listRef?.innerRef || document).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`), "")}`;
+		return filteredOptions.value.reduce((max, option) => {
+			const metrics = ctx.measureText(getLabel(option));
+			return Math.max(metrics.width, max);
+		}, 0) + padding;
+	};
+	const getGapWidth = () => {
+		if (!selectionRef.value) return 0;
+		const style = window.getComputedStyle(selectionRef.value);
+		return Number.parseFloat(style.gap || "6px");
+	};
+	const tagStyle = (0, vue.computed)(() => {
+		const gapWidth = getGapWidth();
+		return { maxWidth: `${collapseItemRef.value && props.maxCollapseTags === 1 ? states.selectionWidth - states.collapseItemWidth - gapWidth : states.selectionWidth}px` };
+	});
+	const collapseTagStyle = (0, vue.computed)(() => {
+		return { maxWidth: `${states.selectionWidth}px` };
+	});
+	const shouldShowPlaceholder = (0, vue.computed)(() => {
+		if ((0, _vft_utils.isArray)(props.modelValue)) return props.modelValue.length === 0 && !states.inputValue;
+		return props.filterable ? !states.inputValue : true;
+	});
+	const currentPlaceholder = (0, vue.computed)(() => {
+		const _placeholder = props.placeholder || "请选择";
+		return props.multiple || !hasModelValue.value ? _placeholder : states.selectedLabel;
+	});
+	const popperRef = (0, vue.computed)(() => tooltipRef.value?.popperRef?.contentRef);
+	const indexRef = (0, vue.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]);
+				return index;
+			}
+		} else if (!isEmptyValue(props.modelValue) && filteredOptionsValueMap.value.has(props.modelValue)) {
+			const { index } = filteredOptionsValueMap.value.get(props.modelValue);
+			return index;
+		}
+		return -1;
+	});
+	const dropdownMenuVisible = (0, vue.computed)({
+		get() {
+			return expanded.value && emptyText.value !== false;
+		},
+		set(val) {
+			expanded.value = val;
+		}
+	});
+	const showTagList = (0, vue.computed)(() => {
+		if (!props.multiple) return [];
+		return props.collapseTags ? states.cachedOptions.slice(0, props.maxCollapseTags) : states.cachedOptions;
+	});
+	const collapseTagList = (0, vue.computed)(() => {
+		if (!props.multiple) return [];
+		return props.collapseTags ? states.cachedOptions.slice(props.maxCollapseTags) : [];
+	});
+	const { createNewOption, removeNewOption, selectNewOption, clearAllNewOption } = require_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);
+		(0, vue.nextTick)(() => {
+			handleQueryChange(states.inputValue);
+		});
+	};
+	const debouncedOnInputChange = (0, lodash_es.debounce)(onInputChange, debounce.value);
+	const handleQueryChange = (val) => {
+		if (states.previousQuery === val || isComposing.value) return;
+		states.previousQuery = val;
+		if (props.filterable && (0, _vft_utils.isFunction)(props.filterMethod)) props.filterMethod(val);
+		else if (props.filterable && props.remote && (0, _vft_utils.isFunction)(props.remoteMethod)) props.remoteMethod(val);
+		if (props.defaultFirstOption && (props.filterable || props.remote) && filteredOptions.value.length) (0, vue.nextTick)(checkDefaultFirstOption);
+		else (0, vue.nextTick)(updateHoveringIndex);
+	};
+	/**
+	* find and highlight first option as default selected
+	* @remark
+	* - if the first option in dropdown list is user-created,
+	*   it would be at the end of the optionsArray
+	*   so find it and set hover.
+	*   (NOTE: there must be only one user-created option in dropdown list with query)
+	* - if there's no user-created option in list, just find the first one as usual
+	*   (NOTE: exclude options that are disabled or in disabled-group)
+	*/
+	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 (!(0, lodash_es.isEqual)(props.modelValue, val)) emit(require_event.CHANGE_EVENT, val);
+	};
+	const update = (val) => {
+		emit(require_event.UPDATE_MODEL_EVENT, val);
+		emitChange(val);
+		states.previousValue = props.multiple ? String(val) : val;
+		(0, vue.nextTick)(() => {
+			if (props.multiple && (0, _vft_utils.isArray)(props.modelValue)) {
+				const cachedOptions = states.cachedOptions.slice();
+				const selectedOptions = props.modelValue.map((value) => getOption(value, cachedOptions));
+				if (!(0, lodash_es.isEqual)(states.cachedOptions, selectedOptions)) states.cachedOptions = selectedOptions;
+			} else initStates(true);
+		});
+	};
+	const getValueIndex = (arr = [], value) => {
+		if (!(0, _vft_utils.isObject)(value)) return arr.indexOf(value);
+		const valueKey = props.valueKey;
+		let index = -1;
+		arr.some((item, i) => {
+			if ((0, lodash_es.get)(item, valueKey) === (0, lodash_es.get)(value, valueKey)) {
+				index = i;
+				return true;
+			}
+			return false;
+		});
+		return index;
+	};
+	const getValueKey = (item) => {
+		return (0, _vft_utils.isObject)(item) ? (0, lodash_es.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 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;
+			(0, 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) => (0, lodash_es.findLastIndex)(value, (it) => !states.cachedOptions.some((option) => getValue(option) === it && getDisabled(option)));
+	const handleDel = (e) => {
+		if (!props.multiple) return;
+		if (e.code === require_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 ((0, _vft_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 ((0, _vft_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 = (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 (0, vue.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((option) => getValueKey(getValue(option)) === 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();
+	};
+	(0, vue.watch)(() => props.fitInputWidth, () => {
+		calculatePopperSize();
+	});
+	(0, 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);
+	});
+	(0, vue.watch)(() => props.modelValue, (val, oldVal) => {
+		if (!val || (0, _vft_utils.isArray)(val) && val.length === 0 || props.multiple && !(0, lodash_es.isEqual)(val.toString(), states.previousValue) || !props.multiple && getValueKey(val) !== getValueKey(states.previousValue)) initStates(true);
+		if (!(0, lodash_es.isEqual)(val, oldVal) && props.validateEvent) elFormItem?.validate?.("change").catch((err) => require_error.debugWarn(err));
+	}, { deep: true });
+	(0, vue.watch)(() => props.options, () => {
+		const input = inputRef.value;
+		if (!input || input && document.activeElement !== input) initStates();
+	}, {
+		deep: true,
+		flush: "post"
+	});
+	(0, vue.watch)(() => filteredOptions.value, () => {
+		calculatePopperSize();
+		return menuRef.value && (0, vue.nextTick)(menuRef.value.resetScrollTop);
+	});
+	(0, vue.watchEffect)(() => {
+		if (states.isBeforeHide) return;
+		updateOptions();
+	});
+	(0, vue.watchEffect)(() => {
+		const { valueKey, options } = props;
+		const duplicateValue = /* @__PURE__ */ new Map();
+		for (const item of options) {
+			const optionValue = getValue(item);
+			let v = optionValue;
+			if ((0, _vft_utils.isObject)(v)) v = (0, lodash_es.get)(optionValue, valueKey);
+			if (duplicateValue.get(v)) {
+				require_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);
+		}
+	});
+	(0, vue.onMounted)(() => {
+		initStates();
+	});
+	(0, _vueuse_core.useResizeObserver)(selectRef, handleResize);
+	(0, _vueuse_core.useResizeObserver)(selectionRef, resetSelectionWidth);
+	(0, _vueuse_core.useResizeObserver)(menuRef, updateTooltip);
+	(0, _vueuse_core.useResizeObserver)(wrapperRef, updateTooltip);
+	(0, _vueuse_core.useResizeObserver)(tagMenuRef, updateTagTooltip);
+	(0, _vueuse_core.useResizeObserver)(collapseItemRef, resetCollapseItemWidth);
+	return {
+		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,
+		inputRef,
+		menuRef,
+		tagMenuRef,
+		tooltipRef,
+		tagTooltipRef,
+		selectRef,
+		wrapperRef,
+		selectionRef,
+		prefixRef,
+		suffixRef,
+		collapseItemRef,
+		popperRef,
+		validateState,
+		validateIcon,
+		showTagList,
+		collapseTagList,
+		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
+	};
+};
+//#endregion
+exports.default = useSelect;

package/lib/components/select/useSelect.d.ts

@@ -103,9 +103,9 @@ declare const useSelect: (props: SelectV2Props, emit: any) => {
             readonly placement?: import("@popperjs/core").Placement | undefined;
             readonly strategy?: "fixed" | "absolute" | undefined;
             readonly effect?: "light" | "dark" | undefined;
-            readonly visible?: boolean | null | undefined;
             readonly teleported?: boolean | undefined;
             readonly open?: boolean | undefined;
+            readonly visible?: boolean | null | undefined;
             readonly trigger?: import("vft/es/components/tooltip").TooltipTriggerType | undefined;
             readonly arrowOffset?: number | undefined;
             readonly gpuAcceleration?: boolean | undefined;
@@ -521,9 +521,9 @@ declare const useSelect: (props: SelectV2Props, emit: any) => {
             readonly placement?: import("@popperjs/core").Placement | undefined;
             readonly strategy?: "fixed" | "absolute" | undefined;
             readonly effect?: "light" | "dark" | undefined;
-            readonly visible?: boolean | null | undefined;
             readonly teleported?: boolean | undefined;
             readonly open?: boolean | undefined;
+            readonly visible?: boolean | null | undefined;
             readonly trigger?: import("vft/es/components/tooltip").TooltipTriggerType | undefined;
             readonly arrowOffset?: number | undefined;
             readonly gpuAcceleration?: boolean | undefined;
@@ -940,9 +940,9 @@ declare const useSelect: (props: SelectV2Props, emit: any) => {
             readonly placement?: import("@popperjs/core").Placement | undefined;
             readonly strategy?: "fixed" | "absolute" | undefined;
             readonly effect?: "light" | "dark" | undefined;
-            readonly visible?: boolean | null | undefined;
             readonly teleported?: boolean | undefined;
             readonly open?: boolean | undefined;
+            readonly visible?: boolean | null | undefined;
             readonly trigger?: import("vft/es/components/tooltip").TooltipTriggerType | undefined;
             readonly arrowOffset?: number | undefined;
             readonly gpuAcceleration?: boolean | undefined;
@@ -1358,9 +1358,9 @@ declare const useSelect: (props: SelectV2Props, emit: any) => {
             readonly placement?: import("@popperjs/core").Placement | undefined;
             readonly strategy?: "fixed" | "absolute" | undefined;
             readonly effect?: "light" | "dark" | undefined;
-            readonly visible?: boolean | null | undefined;
             readonly teleported?: boolean | undefined;
             readonly open?: boolean | undefined;
+            readonly visible?: boolean | null | undefined;
             readonly trigger?: import("vft/es/components/tooltip").TooltipTriggerType | undefined;
             readonly arrowOffset?: number | undefined;
             readonly gpuAcceleration?: boolean | undefined;