element-plus 2.8.3 → 2.8.4

package/lib/components/select-v2/src/select.vue.d.ts

@@ -91,8 +91,18 @@ declare const _default: import("vue").DefineComponent<{
     emptyText: import("vue").ComputedRef<string | false | null>;
     popupHeight: import("vue").ComputedRef<number>;
     debounce: import("vue").ComputedRef<0 | 300>;
-    allOptions: import("vue").Ref<never[]>;
-    filteredOptions: import("vue").Ref<never[]>;
+    allOptions: import("vue").Ref<({
+        [x: string]: any;
+    } | {
+        [x: string]: any;
+        created?: boolean | undefined;
+    })[]>;
+    filteredOptions: import("vue").Ref<({
+        [x: string]: any;
+    } | {
+        [x: string]: any;
+        created?: boolean | undefined;
+    })[]>;
     iconComponent: import("vue").ComputedRef<any>;
     iconReverse: import("vue").ComputedRef<any>;
     tagStyle: import("vue").ComputedRef<{
@@ -111,27 +121,7 @@ declare const _default: import("vue").DefineComponent<{
     selectDisabled: import("vue").ComputedRef<boolean | undefined>;
     selectSize: import("vue").ComputedRef<"" | "small" | "default" | "large">;
     showClearBtn: import("vue").ComputedRef<boolean>;
-    states: {
-        inputValue: string;
-        cachedOptions: {
-            [x: string]: any;
-            created?: boolean | undefined;
-        }[];
-        createdOptions: {
-            [x: string]: any;
-            created?: boolean | undefined;
-        }[];
-        hoveringIndex: number;
-        inputHovering: boolean;
-        selectionWidth: number;
-        calculatorWidth: number;
-        collapseItemWidth: number;
-        previousQuery: null;
-        previousValue: undefined;
-        selectedLabel: string;
-        menuVisibleOnFocus: boolean;
-        isBeforeHide: boolean;
-    };
+    states: import("./select.types").SelectStates;
     isFocused: import("vue").Ref<boolean>;
     nsSelect: {
         namespace: import("vue").ComputedRef<string>;
@@ -169,10 +159,10 @@ declare const _default: import("vue").DefineComponent<{
         cssVarBlock: (object: Record<string, string>) => Record<string, string>;
         cssVarBlockName: (name: string) => string;
     };
-    calculatorRef: import("vue").Ref<HTMLElement>;
-    inputRef: import("vue").Ref<HTMLElement>;
-    menuRef: import("vue").Ref<HTMLElement>;
-    tagMenuRef: import("vue").Ref<HTMLElement>;
+    calculatorRef: import("vue").Ref<HTMLElement | undefined>;
+    inputRef: import("vue").Ref<HTMLElement | undefined>;
+    menuRef: import("vue").Ref<import("./select-dropdown").SelectDropdownInstance | undefined>;
+    tagMenuRef: import("vue").Ref<HTMLElement | undefined>;
     tooltipRef: import("vue").Ref<({
         $: import("vue").ComponentInternalInstance;
         $data: {};
@@ -1385,7 +1375,7 @@ declare const _default: import("vue").DefineComponent<{
             default?(_: {}): any;
             content?(_: {}): any;
         };
-    }) | null>;
+    }) | undefined>;
     tagTooltipRef: import("vue").Ref<({
         $: import("vue").ComponentInternalInstance;
         $data: {};
@@ -2598,24 +2588,18 @@ declare const _default: import("vue").DefineComponent<{
             default?(_: {}): any;
             content?(_: {}): any;
         };
-    }) | null>;
-    selectRef: import("vue").Ref<HTMLElement>;
+    }) | undefined>;
+    selectRef: import("vue").Ref<HTMLElement | undefined>;
     wrapperRef: import("vue").ShallowRef<HTMLElement | undefined>;
-    selectionRef: import("vue").Ref<HTMLElement>;
-    prefixRef: import("vue").Ref<HTMLElement>;
-    suffixRef: import("vue").Ref<HTMLElement>;
-    collapseItemRef: import("vue").Ref<HTMLElement>;
+    selectionRef: import("vue").Ref<HTMLElement | undefined>;
+    prefixRef: import("vue").Ref<HTMLElement | undefined>;
+    suffixRef: import("vue").Ref<HTMLElement | undefined>;
+    collapseItemRef: import("vue").Ref<HTMLElement | undefined>;
     popperRef: import("vue").ComputedRef<HTMLElement | undefined>;
     validateState: import("vue").ComputedRef<"" | "error" | "success" | "validating">;
     validateIcon: import("vue").ComputedRef<any>;
-    showTagList: import("vue").ComputedRef<{
-        [x: string]: any;
-        created?: boolean | undefined;
-    }[]>;
-    collapseTagList: import("vue").ComputedRef<{
-        [x: string]: any;
-        created?: boolean | undefined;
-    }[]>;
+    showTagList: import("vue").ComputedRef<import("./select.types").Option[]>;
+    collapseTagList: import("vue").ComputedRef<import("./select.types").Option[]>;
     debouncedOnInputChange: import("lodash").DebouncedFunc<() => void>;
     deleteTag: (event: MouseEvent, option: import("./select.types").Option) => void;
     getLabel: (option: import("./select.types").Option) => any;
@@ -2637,15 +2621,23 @@ declare const _default: import("vue").DefineComponent<{
     updateOptions: () => void;
     toggleMenu: () => void;
     scrollTo: (index: number) => void;
-    onInput: (event: any) => void;
-    onKeyboardNavigate: (direction: "forward" | "backward", hoveringIndex?: number) => any;
+    onInput: (event: Event) => void;
+    onKeyboardNavigate: (direction: "forward" | "backward", hoveringIndex?: number | undefined) => void;
     onKeyboardSelect: () => void;
     onSelect: (option: import("./select.types").Option) => void;
-    onHover: (idx: number) => void;
+    onHover: (idx?: number | undefined) => void;
     handleCompositionStart: (event: CompositionEvent) => void;
     handleCompositionEnd: (event: CompositionEvent) => void;
     handleCompositionUpdate: (event: CompositionEvent) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("clear" | "update:modelValue" | "change" | "blur" | "focus" | "visible-change" | "remove-tag")[], "clear" | "update:modelValue" | "change" | "blur" | "focus" | "visible-change" | "remove-tag", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (val: any) => boolean;
+    change: (val: any) => boolean;
+    'remove-tag': (val: unknown) => boolean;
+    'visible-change': (visible: boolean) => boolean;
+    focus: (evt: FocusEvent) => boolean;
+    blur: (evt: FocusEvent) => boolean;
+    clear: () => boolean;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly ariaLabel: StringConstructor;
     readonly emptyValues: ArrayConstructor;
     readonly valueOnClear: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor, BooleanConstructor, FunctionConstructor], unknown, unknown, undefined, boolean>;
@@ -2730,13 +2722,13 @@ declare const _default: import("vue").DefineComponent<{
         readonly __epPropKey: true;
     };
 }>> & {
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    onChange?: ((...args: any[]) => any) | undefined;
-    onFocus?: ((...args: any[]) => any) | undefined;
-    onBlur?: ((...args: any[]) => any) | undefined;
-    onClear?: ((...args: any[]) => any) | undefined;
-    "onVisible-change"?: ((...args: any[]) => any) | undefined;
-    "onRemove-tag"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((val: any) => any) | undefined;
+    onChange?: ((val: any) => any) | undefined;
+    onFocus?: ((evt: FocusEvent) => any) | undefined;
+    onBlur?: ((evt: FocusEvent) => any) | undefined;
+    onClear?: (() => any) | undefined;
+    "onVisible-change"?: ((visible: boolean) => any) | undefined;
+    "onRemove-tag"?: ((val: unknown) => any) | undefined;
 }, {
     readonly height: number;
     readonly multiple: boolean;

package/lib/components/select-v2/src/token.d.ts

@@ -1,16 +1,15 @@
-import type { OptionProps, SelectProps } from './defaults';
-import type { ExtractPropTypes, InjectionKey, Ref } from 'vue';
+import type { IOptionV2Props, ISelectV2Props } from './defaults';
+import type { InjectionKey, Ref } from 'vue';
 import type { Option } from './select.types';
 import type { TooltipInstance } from 'element-plus/es/components/tooltip';
 export interface SelectV2Context {
-    props: ExtractPropTypes<typeof SelectProps>;
-    expanded: boolean;
-    tooltipRef: Ref<TooltipInstance>;
+    props: ISelectV2Props;
+    expanded: Ref<boolean>;
+    tooltipRef: Ref<TooltipInstance | undefined>;
     onSelect: (option: Option) => void;
-    onHover: (idx: number) => void;
+    onHover: (idx?: number) => void;
     onKeyboardNavigate: (direction: 'forward' | 'backward') => void;
     onKeyboardSelect: () => void;
 }
 export declare const selectV2InjectionKey: InjectionKey<SelectV2Context>;
-export declare type IOptionV2Props = ExtractPropTypes<typeof OptionProps>;
-export declare type ISelectV2Props = ExtractPropTypes<typeof SelectProps>;
+export type { ISelectV2Props, IOptionV2Props };

package/lib/components/select-v2/src/token.js.map

@@ -1 +1 @@
-{"version":3,"file":"token.js","sources":["../../../../../../packages/components/select-v2/src/token.ts"],"sourcesContent":["import type { OptionProps, SelectProps } from './defaults'\nimport type { ExtractPropTypes, InjectionKey, Ref } from 'vue'\nimport type { Option } from './select.types'\nimport type { TooltipInstance } from '@element-plus/components/tooltip'\n\nexport interface SelectV2Context {\n  props: ExtractPropTypes<typeof SelectProps>\n  expanded: boolean\n  tooltipRef: Ref<TooltipInstance>\n  onSelect: (option: Option) => void\n  onHover: (idx: number) => void\n  onKeyboardNavigate: (direction: 'forward' | 'backward') => void\n  onKeyboardSelect: () => void\n}\n\nexport const selectV2InjectionKey: InjectionKey<SelectV2Context> = Symbol(\n  'ElSelectV2Injection'\n)\nexport type IOptionV2Props = ExtractPropTypes<typeof OptionProps>\nexport type ISelectV2Props = ExtractPropTypes<typeof SelectProps>\n"],"names":[],"mappings":";;;;AAAY,MAAC,oBAAoB,GAAG,MAAM,CAAC,qBAAqB;;;;"}
+{"version":3,"file":"token.js","sources":["../../../../../../packages/components/select-v2/src/token.ts"],"sourcesContent":["import type { IOptionV2Props, ISelectV2Props } from './defaults'\nimport type { InjectionKey, Ref } from 'vue'\nimport type { Option } from './select.types'\nimport type { TooltipInstance } from '@element-plus/components/tooltip'\n\nexport interface SelectV2Context {\n  props: ISelectV2Props\n  expanded: Ref<boolean>\n  tooltipRef: Ref<TooltipInstance | undefined>\n  onSelect: (option: Option) => void\n  onHover: (idx?: number) => void\n  onKeyboardNavigate: (direction: 'forward' | 'backward') => void\n  onKeyboardSelect: () => void\n}\n\nexport const selectV2InjectionKey: InjectionKey<SelectV2Context> = Symbol(\n  'ElSelectV2Injection'\n)\nexport type { ISelectV2Props, IOptionV2Props }\n"],"names":[],"mappings":";;;;AAAY,MAAC,oBAAoB,GAAG,MAAM,CAAC,qBAAqB;;;;"}

package/lib/components/select-v2/src/useAllowCreate.d.ts

@@ -1,6 +1,6 @@
 import type { ISelectV2Props } from './token';
-import type { Option } from './select.types';
-export declare function useAllowCreate(props: ISelectV2Props, states: any): {
+import type { Option, SelectStates } from './select.types';
+export declare function useAllowCreate(props: ISelectV2Props, states: SelectStates): {
     createNewOption: (query: string) => void;
     removeNewOption: (option: Option) => void;
     selectNewOption: (option: Option) => void;

package/lib/components/select-v2/src/useAllowCreate.js

@@ -8,7 +8,7 @@ var useProps = require('./useProps.js');
 function useAllowCreate(props, states) {
   const { aliasProps, getLabel, getValue } = useProps.useProps(props);
   const createOptionCount = vue.ref(0);
-  const cachedSelectedOption = vue.ref(null);
+  const cachedSelectedOption = vue.ref();
   const enableAllowCreateMode = vue.computed(() => {
     return props.allowCreate && props.filterable;
   });

package/lib/components/select-v2/src/useAllowCreate.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAllowCreate.js","sources":["../../../../../../packages/components/select-v2/src/useAllowCreate.ts"],"sourcesContent":["// @ts-nocheck\nimport { computed, ref } from 'vue'\nimport { useProps } from './useProps'\nimport type { ISelectV2Props } from './token'\nimport type { Option } from './select.types'\n\nexport function useAllowCreate(props: ISelectV2Props, states) {\n  const { aliasProps, getLabel, getValue } = useProps(props)\n\n  const createOptionCount = ref(0)\n  const cachedSelectedOption = ref<Option>(null)\n\n  const enableAllowCreateMode = computed(() => {\n    return props.allowCreate && props.filterable\n  })\n\n  function hasExistingOption(query: string) {\n    const hasOption = (option) => getLabel(option) === query\n    return (\n      (props.options && props.options.some(hasOption)) ||\n      states.createdOptions.some(hasOption)\n    )\n  }\n\n  function selectNewOption(option: Option) {\n    if (!enableAllowCreateMode.value) {\n      return\n    }\n    if (props.multiple && option.created) {\n      createOptionCount.value++\n    } else {\n      cachedSelectedOption.value = option\n    }\n  }\n\n  function createNewOption(query: string) {\n    if (enableAllowCreateMode.value) {\n      if (query && query.length > 0) {\n        if (hasExistingOption(query)) {\n          return\n        }\n        const newOption = {\n          [aliasProps.value.value]: query,\n          [aliasProps.value.label]: query,\n          created: true,\n          [aliasProps.value.disabled]: false,\n        }\n        if (states.createdOptions.length >= createOptionCount.value) {\n          states.createdOptions[createOptionCount.value] = newOption\n        } else {\n          states.createdOptions.push(newOption)\n        }\n      } else {\n        if (props.multiple) {\n          states.createdOptions.length = createOptionCount.value\n        } else {\n          const selectedOption = cachedSelectedOption.value\n          states.createdOptions.length = 0\n          if (selectedOption && selectedOption.created) {\n            states.createdOptions.push(selectedOption)\n          }\n        }\n      }\n    }\n  }\n\n  function removeNewOption(option: Option) {\n    if (\n      !enableAllowCreateMode.value ||\n      !option ||\n      !option.created ||\n      (option.created &&\n        props.reserveKeyword &&\n        states.inputValue === getLabel(option))\n    ) {\n      return\n    }\n    const idx = states.createdOptions.findIndex(\n      (it) => getValue(it) === getValue(option)\n    )\n    if (~idx) {\n      states.createdOptions.splice(idx, 1)\n      createOptionCount.value--\n    }\n  }\n\n  function clearAllNewOption() {\n    if (enableAllowCreateMode.value) {\n      states.createdOptions.length = 0\n      createOptionCount.value = 0\n    }\n  }\n\n  return {\n    createNewOption,\n    removeNewOption,\n    selectNewOption,\n    clearAllNewOption,\n  }\n}\n"],"names":["useProps","ref","computed"],"mappings":"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"}
+{"version":3,"file":"useAllowCreate.js","sources":["../../../../../../packages/components/select-v2/src/useAllowCreate.ts"],"sourcesContent":["import { computed, ref } from 'vue'\nimport { useProps } from './useProps'\nimport type { ISelectV2Props } from './token'\nimport type { Option, SelectStates } from './select.types'\n\nexport function useAllowCreate(props: ISelectV2Props, states: SelectStates) {\n  const { aliasProps, getLabel, getValue } = useProps(props)\n\n  const createOptionCount = ref(0)\n  const cachedSelectedOption = ref<Option>()\n\n  const enableAllowCreateMode = computed(() => {\n    return props.allowCreate && props.filterable\n  })\n\n  function hasExistingOption(query: string) {\n    const hasOption = (option: Option) => getLabel(option) === query\n    return (\n      (props.options && props.options.some(hasOption)) ||\n      states.createdOptions.some(hasOption)\n    )\n  }\n\n  function selectNewOption(option: Option) {\n    if (!enableAllowCreateMode.value) {\n      return\n    }\n    if (props.multiple && option.created) {\n      createOptionCount.value++\n    } else {\n      cachedSelectedOption.value = option\n    }\n  }\n\n  function createNewOption(query: string) {\n    if (enableAllowCreateMode.value) {\n      if (query && query.length > 0) {\n        if (hasExistingOption(query)) {\n          return\n        }\n        const newOption = {\n          [aliasProps.value.value]: query,\n          [aliasProps.value.label]: query,\n          created: true,\n          [aliasProps.value.disabled]: false,\n        }\n        if (states.createdOptions.length >= createOptionCount.value) {\n          states.createdOptions[createOptionCount.value] = newOption\n        } else {\n          states.createdOptions.push(newOption)\n        }\n      } else {\n        if (props.multiple) {\n          states.createdOptions.length = createOptionCount.value\n        } else {\n          const selectedOption = cachedSelectedOption.value\n          states.createdOptions.length = 0\n          if (selectedOption && selectedOption.created) {\n            states.createdOptions.push(selectedOption)\n          }\n        }\n      }\n    }\n  }\n\n  function removeNewOption(option: Option) {\n    if (\n      !enableAllowCreateMode.value ||\n      !option ||\n      !option.created ||\n      (option.created &&\n        props.reserveKeyword &&\n        states.inputValue === getLabel(option))\n    ) {\n      return\n    }\n    const idx = states.createdOptions.findIndex(\n      (it) => getValue(it) === getValue(option)\n    )\n    if (~idx) {\n      states.createdOptions.splice(idx, 1)\n      createOptionCount.value--\n    }\n  }\n\n  function clearAllNewOption() {\n    if (enableAllowCreateMode.value) {\n      states.createdOptions.length = 0\n      createOptionCount.value = 0\n    }\n  }\n\n  return {\n    createNewOption,\n    removeNewOption,\n    selectNewOption,\n    clearAllNewOption,\n  }\n}\n"],"names":["useProps","ref","computed"],"mappings":"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"}

package/lib/components/select-v2/src/useOption.d.ts

@@ -1,6 +1,7 @@
 import type { IOptionV2Props } from './token';
+import type { OptionEmitFn } from './defaults';
 export declare function useOption(props: IOptionV2Props, { emit }: {
-    emit: any;
+    emit: OptionEmitFn;
 }): {
     hoverItem: () => void;
     selectOptionClick: () => void;

package/lib/components/select-v2/src/useOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"useOption.js","sources":["../../../../../../packages/components/select-v2/src/useOption.ts"],"sourcesContent":["// @ts-nocheck\nimport type { IOptionV2Props } from './token'\n\nexport function useOption(props: IOptionV2Props, { emit }) {\n  return {\n    hoverItem: () => {\n      if (!props.disabled) {\n        emit('hover', props.index)\n      }\n    },\n    selectOptionClick: () => {\n      if (!props.disabled) {\n        emit('select', props.item, props.index)\n      }\n    },\n  }\n}\n"],"names":[],"mappings":";;;;AAAO,SAAS,SAAS,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE;AAC3C,EAAE,OAAO;AACT,IAAI,SAAS,EAAE,MAAM;AACrB,MAAM,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;AAC3B,QAAQ,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;AACnC,OAAO;AACP,KAAK;AACL,IAAI,iBAAiB,EAAE,MAAM;AAC7B,MAAM,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;AAC3B,QAAQ,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;AAChD,OAAO;AACP,KAAK;AACL,GAAG,CAAC;AACJ;;;;"}
+{"version":3,"file":"useOption.js","sources":["../../../../../../packages/components/select-v2/src/useOption.ts"],"sourcesContent":["import type { IOptionV2Props } from './token'\nimport type { OptionEmitFn } from './defaults'\n\nexport function useOption(\n  props: IOptionV2Props,\n  { emit }: { emit: OptionEmitFn }\n) {\n  return {\n    hoverItem: () => {\n      if (!props.disabled) {\n        emit('hover', props.index)\n      }\n    },\n    selectOptionClick: () => {\n      if (!props.disabled) {\n        emit('select', props.item, props.index)\n      }\n    },\n  }\n}\n"],"names":[],"mappings":";;;;AAAO,SAAS,SAAS,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE;AAC3C,EAAE,OAAO;AACT,IAAI,SAAS,EAAE,MAAM;AACrB,MAAM,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;AAC3B,QAAQ,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;AACnC,OAAO;AACP,KAAK;AACL,IAAI,iBAAiB,EAAE,MAAM;AAC7B,MAAM,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;AAC3B,QAAQ,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;AAChD,OAAO;AACP,KAAK;AACL,GAAG,CAAC;AACJ;;;;"}

package/lib/components/select-v2/src/useSelect.d.ts

@@ -1,7 +1,9 @@
 import { nextTick } from 'vue';
-import type { Option } from './select.types';
+import type { Option, SelectStates } from './select.types';
 import type { ISelectV2Props } from './token';
-declare const useSelect: (props: ISelectV2Props, emit: any) => {
+import type { SelectEmitFn } from './defaults';
+import type { SelectDropdownInstance } from './select-dropdown';
+declare const useSelect: (props: ISelectV2Props, emit: SelectEmitFn) => {
     inputId: import("vue").Ref<string | undefined>;
     collapseTagSize: import("vue").ComputedRef<"small" | "default">;
     currentPlaceholder: import("vue").ComputedRef<string>;
@@ -9,8 +11,18 @@ declare const useSelect: (props: ISelectV2Props, emit: any) => {
     emptyText: import("vue").ComputedRef<string | false | null>;
     popupHeight: import("vue").ComputedRef<number>;
     debounce: import("vue").ComputedRef<0 | 300>;
-    allOptions: import("vue").Ref<never[]>;
-    filteredOptions: import("vue").Ref<never[]>;
+    allOptions: import("vue").Ref<({
+        [x: string]: any;
+    } | {
+        [x: string]: any;
+        created?: boolean | undefined;
+    })[]>;
+    filteredOptions: import("vue").Ref<({
+        [x: string]: any;
+    } | {
+        [x: string]: any;
+        created?: boolean | undefined;
+    })[]>;
     iconComponent: import("vue").ComputedRef<any>;
     iconReverse: import("vue").ComputedRef<any>;
     tagStyle: import("vue").ComputedRef<{
@@ -29,27 +41,7 @@ declare const useSelect: (props: ISelectV2Props, emit: any) => {
     selectDisabled: import("vue").ComputedRef<boolean | undefined>;
     selectSize: import("vue").ComputedRef<"" | "small" | "default" | "large">;
     showClearBtn: import("vue").ComputedRef<boolean>;
-    states: {
-        inputValue: string;
-        cachedOptions: {
-            [x: string]: any;
-            created?: boolean | undefined;
-        }[];
-        createdOptions: {
-            [x: string]: any;
-            created?: boolean | undefined;
-        }[];
-        hoveringIndex: number;
-        inputHovering: boolean;
-        selectionWidth: number;
-        calculatorWidth: number;
-        collapseItemWidth: number;
-        previousQuery: null;
-        previousValue: undefined;
-        selectedLabel: string;
-        menuVisibleOnFocus: boolean;
-        isBeforeHide: boolean;
-    };
+    states: SelectStates;
     isFocused: import("vue").Ref<boolean>;
     nsSelect: {
         namespace: import("vue").ComputedRef<string>;
@@ -87,10 +79,10 @@ declare const useSelect: (props: ISelectV2Props, emit: any) => {
         cssVarBlock: (object: Record<string, string>) => Record<string, string>;
         cssVarBlockName: (name: string) => string;
     };
-    calculatorRef: import("vue").Ref<HTMLElement>;
-    inputRef: import("vue").Ref<HTMLElement>;
-    menuRef: import("vue").Ref<HTMLElement>;
-    tagMenuRef: import("vue").Ref<HTMLElement>;
+    calculatorRef: import("vue").Ref<HTMLElement | undefined>;
+    inputRef: import("vue").Ref<HTMLElement | undefined>;
+    menuRef: import("vue").Ref<SelectDropdownInstance | undefined>;
+    tagMenuRef: import("vue").Ref<HTMLElement | undefined>;
     tooltipRef: import("vue").Ref<({
         $: import("vue").ComponentInternalInstance;
         $data: {};
@@ -1303,7 +1295,7 @@ declare const useSelect: (props: ISelectV2Props, emit: any) => {
             default?(_: {}): any;
             content?(_: {}): any;
         };
-    }) | null>;
+    }) | undefined>;
     tagTooltipRef: import("vue").Ref<({
         $: import("vue").ComponentInternalInstance;
         $data: {};
@@ -2516,24 +2508,18 @@ declare const useSelect: (props: ISelectV2Props, emit: any) => {
             default?(_: {}): any;
             content?(_: {}): any;
         };
-    }) | null>;
-    selectRef: import("vue").Ref<HTMLElement>;
+    }) | undefined>;
+    selectRef: import("vue").Ref<HTMLElement | undefined>;
     wrapperRef: import("vue").ShallowRef<HTMLElement | undefined>;
-    selectionRef: import("vue").Ref<HTMLElement>;
-    prefixRef: import("vue").Ref<HTMLElement>;
-    suffixRef: import("vue").Ref<HTMLElement>;
-    collapseItemRef: import("vue").Ref<HTMLElement>;
+    selectionRef: import("vue").Ref<HTMLElement | undefined>;
+    prefixRef: import("vue").Ref<HTMLElement | undefined>;
+    suffixRef: import("vue").Ref<HTMLElement | undefined>;
+    collapseItemRef: import("vue").Ref<HTMLElement | undefined>;
     popperRef: import("vue").ComputedRef<HTMLElement | undefined>;
     validateState: import("vue").ComputedRef<"" | "error" | "success" | "validating">;
     validateIcon: import("vue").ComputedRef<any>;
-    showTagList: import("vue").ComputedRef<{
-        [x: string]: any;
-        created?: boolean | undefined;
-    }[]>;
-    collapseTagList: import("vue").ComputedRef<{
-        [x: string]: any;
-        created?: boolean | undefined;
-    }[]>;
+    showTagList: import("vue").ComputedRef<Option[]>;
+    collapseTagList: import("vue").ComputedRef<Option[]>;
     debouncedOnInputChange: import("lodash").DebouncedFunc<() => void>;
     deleteTag: (event: MouseEvent, option: Option) => void;
     getLabel: (option: Option) => any;
@@ -2555,11 +2541,11 @@ declare const useSelect: (props: ISelectV2Props, emit: any) => {
     updateOptions: () => void;
     toggleMenu: () => void;
     scrollTo: (index: number) => void;
-    onInput: (event: any) => void;
-    onKeyboardNavigate: (direction: 'forward' | 'backward', hoveringIndex?: number) => any;
+    onInput: (event: Event) => void;
+    onKeyboardNavigate: (direction: 'forward' | 'backward', hoveringIndex?: number | undefined) => void;
     onKeyboardSelect: () => void;
     onSelect: (option: Option) => void;
-    onHover: (idx: number) => void;
+    onHover: (idx?: number) => void;
     handleCompositionStart: (event: CompositionEvent) => void;
     handleCompositionEnd: (event: CompositionEvent) => void;
     handleCompositionUpdate: (event: CompositionEvent) => void;

package/lib/components/select-v2/src/useSelect.js

@@ -53,17 +53,17 @@ const useSelect = (props, emit) => {
     isBeforeHide: false
   });
   const popperSize = vue.ref(-1);
-  const selectRef = vue.ref(null);
-  const selectionRef = vue.ref(null);
-  const tooltipRef = vue.ref(null);
-  const tagTooltipRef = vue.ref(null);
-  const inputRef = vue.ref(null);
-  const calculatorRef = vue.ref(null);
-  const prefixRef = vue.ref(null);
-  const suffixRef = vue.ref(null);
-  const menuRef = vue.ref(null);
-  const tagMenuRef = vue.ref(null);
-  const collapseItemRef = vue.ref(null);
+  const selectRef = vue.ref();
+  const selectionRef = vue.ref();
+  const tooltipRef = vue.ref();
+  const tagTooltipRef = vue.ref();
+  const inputRef = vue.ref();
+  const calculatorRef = 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,
@@ -108,7 +108,11 @@ const useSelect = (props, emit) => {
   const iconComponent = vue.computed(() => props.remote && props.filterable ? "" : iconsVue.ArrowDown);
   const iconReverse = vue.computed(() => iconComponent.value && nsSelect.is("reverse", expanded.value));
   const validateState = vue.computed(() => (elFormItem == null ? void 0 : elFormItem.validateState) || "");
-  const validateIcon = vue.computed(() => icon.ValidateComponentsMap[validateState.value]);
+  const validateIcon = vue.computed(() => {
+    if (!validateState.value)
+      return;
+    return icon.ValidateComponentsMap[validateState.value];
+  });
   const debounce = vue.computed(() => props.remote ? 300 : 0);
   const emptyText = vue.computed(() => {
     if (props.loading) {
@@ -481,7 +485,7 @@ const useSelect = (props, emit) => {
     }
   };
   const onHoverOption = (idx) => {
-    states.hoveringIndex = idx;
+    states.hoveringIndex = idx != null ? idx : -1;
   };
   const updateHoveringIndex = () => {
     if (!props.multiple) {