123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538 |
- /**
- * To match accessibility requirement, we always provide an input in the component.
- * Other element will not set `tabindex` to avoid `onBlur` sequence problem.
- * For focused select, we set `aria-live="polite"` to update the accessibility content.
- *
- * ref:
- * - keyboard: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role#Keyboard_interactions
- *
- * New api:
- * - listHeight
- * - listItemHeight
- * - component
- *
- * Remove deprecated api:
- * - multiple
- * - tags
- * - combobox
- * - firstActiveValue
- * - dropdownMenuStyle
- * - openClassName (Not list in api)
- *
- * Update:
- * - `backfill` only support `combobox` mode
- * - `combobox` mode not support `labelInValue` since it's meaningless
- * - `getInputElement` only support `combobox` mode
- * - `onChange` return OptionData instead of ReactNode
- * - `filterOption` `onChange` `onSelect` accept OptionData instead of ReactNode
- * - `combobox` mode trigger `onChange` will get `undefined` if no `value` match in Option
- * - `combobox` mode not support `optionLabelProp`
- */
- import type { DisplayValueType } from './BaseSelect';
- import type { Key, VueNode } from '../_util/type';
- import type { ExtractPropTypes, PropType } from 'vue';
- declare type ArrayElementType<T> = T extends (infer E)[] ? E : T;
- export declare type OnActiveValue = (active: RawValueType, index: number, info?: {
- source?: 'keyboard' | 'mouse';
- }) => void;
- export declare type OnInternalSelect = (value: RawValueType, info: {
- selected: boolean;
- }) => void;
- export declare type RawValueType = string | number;
- export interface LabelInValueType {
- label: any;
- originLabel?: any;
- value: RawValueType;
- /** @deprecated `key` is useless since it should always same as `value` */
- key?: Key;
- }
- export declare type DraftValueType = RawValueType | LabelInValueType | DisplayValueType | (RawValueType | LabelInValueType | DisplayValueType)[];
- export declare type FilterFunc<OptionType> = (inputValue: string, option?: OptionType) => boolean;
- export interface FieldNames {
- value?: string;
- label?: string;
- options?: string;
- }
- export interface BaseOptionType {
- disabled?: boolean;
- [name: string]: any;
- }
- export interface DefaultOptionType extends BaseOptionType {
- label?: any;
- value?: string | number | null;
- children?: Omit<DefaultOptionType, 'children'>[];
- }
- export declare type SelectHandler<ValueType = any, OptionType extends BaseOptionType = DefaultOptionType> = ((value: RawValueType | LabelInValueType, option: OptionType) => void) | ((value: ValueType, option: OptionType) => void);
- export declare function selectProps<ValueType = any, OptionType extends BaseOptionType = DefaultOptionType>(): {
- prefixCls: StringConstructor;
- id: StringConstructor;
- backfill: {
- type: BooleanConstructor;
- default: any;
- };
- fieldNames: PropType<FieldNames>;
- /** @deprecated Use `searchValue` instead */
- inputValue: StringConstructor;
- searchValue: StringConstructor;
- onSearch: PropType<(value: string) => void>;
- autoClearSearchValue: {
- type: BooleanConstructor;
- default: any;
- };
- onSelect: PropType<SelectHandler<ArrayElementType<ValueType>, OptionType>>;
- onDeselect: PropType<SelectHandler<ArrayElementType<ValueType>, OptionType>>;
- /**
- * In Select, `false` means do nothing.
- * In TreeSelect, `false` will highlight match item.
- * It's by design.
- */
- filterOption: {
- type: PropType<boolean | FilterFunc<OptionType>>;
- default: any;
- };
- filterSort: PropType<(optionA: OptionType, optionB: OptionType) => number>;
- optionFilterProp: StringConstructor;
- optionLabelProp: StringConstructor;
- options: PropType<OptionType[]>;
- defaultActiveFirstOption: {
- type: BooleanConstructor;
- default: any;
- };
- virtual: {
- type: BooleanConstructor;
- default: any;
- };
- listHeight: NumberConstructor;
- listItemHeight: NumberConstructor;
- menuItemSelectedIcon: import("vue-types").VueTypeValidableDef<any>;
- mode: PropType<"multiple" | "tags" | "combobox">;
- labelInValue: {
- type: BooleanConstructor;
- default: any;
- };
- value: import("vue-types").VueTypeValidableDef<any>;
- defaultValue: import("vue-types").VueTypeValidableDef<any>;
- onChange: PropType<(value: ValueType, option: OptionType | OptionType[]) => void>;
- children: PropType<VueNode[]>;
- showSearch: {
- type: BooleanConstructor;
- default: any;
- };
- tagRender: {
- type: PropType<(props: import("./BaseSelect").CustomTagProps) => any>;
- };
- optionLabelRender: {
- type: PropType<(option: Record<string, any>) => any>;
- };
- direction: {
- type: PropType<"ltr" | "rtl">;
- };
- tabindex: NumberConstructor;
- autofocus: BooleanConstructor;
- notFoundContent: import("vue-types").VueTypeValidableDef<any>;
- placeholder: import("vue-types").VueTypeValidableDef<any>;
- onClear: PropType<() => void>;
- choiceTransitionName: StringConstructor;
- disabled: {
- type: BooleanConstructor;
- default: any;
- };
- loading: {
- type: BooleanConstructor;
- default: any;
- };
- open: {
- type: BooleanConstructor;
- default: any;
- };
- defaultOpen: {
- type: BooleanConstructor;
- default: any;
- };
- onDropdownVisibleChange: {
- type: PropType<(open: boolean) => void>;
- };
- getInputElement: {
- type: PropType<() => any>;
- };
- getRawInputElement: {
- type: PropType<() => any>;
- };
- maxTagTextLength: NumberConstructor;
- maxTagCount: {
- type: PropType<number | "responsive">;
- };
- maxTagPlaceholder: import("vue-types").VueTypeValidableDef<any>;
- tokenSeparators: {
- type: PropType<string[]>;
- };
- allowClear: {
- type: BooleanConstructor;
- default: any;
- };
- showArrow: {
- type: BooleanConstructor;
- default: any;
- };
- inputIcon: import("vue-types").VueTypeValidableDef<any>;
- clearIcon: import("vue-types").VueTypeValidableDef<any>;
- removeIcon: import("vue-types").VueTypeValidableDef<any>;
- animation: StringConstructor;
- transitionName: StringConstructor;
- dropdownStyle: {
- type: PropType<import("vue").CSSProperties>;
- };
- dropdownClassName: StringConstructor;
- dropdownMatchSelectWidth: {
- type: PropType<number | boolean>;
- default: any;
- };
- dropdownRender: {
- type: PropType<import("./BaseSelect").DropdownRender>;
- };
- dropdownAlign: PropType<import("../vc-trigger/interface").AlignType>;
- placement: {
- type: PropType<import("./BaseSelect").Placement>;
- };
- getPopupContainer: {
- type: PropType<import("./BaseSelect").RenderDOMFunc>;
- };
- showAction: {
- type: PropType<("click" | "focus")[]>;
- };
- onBlur: {
- type: PropType<(e: FocusEvent) => void>;
- };
- onFocus: {
- type: PropType<(e: FocusEvent) => void>;
- };
- onKeyup: PropType<(e: KeyboardEvent) => void>;
- onKeydown: PropType<(e: KeyboardEvent) => void>;
- onMousedown: PropType<(e: MouseEvent) => void>;
- onPopupScroll: PropType<(e: UIEvent) => void>;
- onInputKeyDown: PropType<(e: KeyboardEvent) => void>;
- onMouseenter: PropType<(e: MouseEvent) => void>;
- onMouseleave: PropType<(e: MouseEvent) => void>;
- onClick: PropType<(e: MouseEvent) => void>;
- };
- export declare type SelectProps = Partial<ExtractPropTypes<ReturnType<typeof selectProps>>>;
- declare const _default: import("vue").DefineComponent<{
- prefixCls: StringConstructor;
- id: StringConstructor;
- backfill: {
- type: BooleanConstructor;
- default: any;
- };
- fieldNames: PropType<FieldNames>;
- /** @deprecated Use `searchValue` instead */
- inputValue: StringConstructor;
- searchValue: StringConstructor;
- onSearch: PropType<(value: string) => void>;
- autoClearSearchValue: {
- type: BooleanConstructor;
- default: any;
- };
- onSelect: PropType<SelectHandler<any, DefaultOptionType>>;
- onDeselect: PropType<SelectHandler<any, DefaultOptionType>>;
- /**
- * In Select, `false` means do nothing.
- * In TreeSelect, `false` will highlight match item.
- * It's by design.
- */
- filterOption: {
- type: PropType<boolean | FilterFunc<DefaultOptionType>>;
- default: any;
- };
- filterSort: PropType<(optionA: DefaultOptionType, optionB: DefaultOptionType) => number>;
- optionFilterProp: StringConstructor;
- optionLabelProp: StringConstructor;
- options: PropType<DefaultOptionType[]>;
- defaultActiveFirstOption: {
- type: BooleanConstructor;
- default: any;
- };
- virtual: {
- type: BooleanConstructor;
- default: any;
- };
- listHeight: NumberConstructor;
- listItemHeight: NumberConstructor;
- menuItemSelectedIcon: import("vue-types").VueTypeValidableDef<any>;
- mode: PropType<"multiple" | "tags" | "combobox">;
- labelInValue: {
- type: BooleanConstructor;
- default: any;
- };
- value: import("vue-types").VueTypeValidableDef<any>;
- defaultValue: import("vue-types").VueTypeValidableDef<any>;
- onChange: PropType<(value: any, option: DefaultOptionType | DefaultOptionType[]) => void>;
- children: PropType<VueNode[]>;
- showSearch: {
- type: BooleanConstructor;
- default: any;
- };
- tagRender: {
- type: PropType<(props: import("./BaseSelect").CustomTagProps) => any>;
- };
- optionLabelRender: {
- type: PropType<(option: Record<string, any>) => any>;
- };
- direction: {
- type: PropType<"ltr" | "rtl">;
- };
- tabindex: NumberConstructor;
- autofocus: BooleanConstructor;
- notFoundContent: import("vue-types").VueTypeValidableDef<any>;
- placeholder: import("vue-types").VueTypeValidableDef<any>;
- onClear: PropType<() => void>;
- choiceTransitionName: StringConstructor;
- disabled: {
- type: BooleanConstructor;
- default: any;
- };
- loading: {
- type: BooleanConstructor;
- default: any;
- };
- open: {
- type: BooleanConstructor;
- default: any;
- };
- defaultOpen: {
- type: BooleanConstructor;
- default: any;
- };
- onDropdownVisibleChange: {
- type: PropType<(open: boolean) => void>;
- };
- getInputElement: {
- type: PropType<() => any>;
- };
- getRawInputElement: {
- type: PropType<() => any>;
- };
- maxTagTextLength: NumberConstructor;
- maxTagCount: {
- type: PropType<number | "responsive">;
- };
- maxTagPlaceholder: import("vue-types").VueTypeValidableDef<any>;
- tokenSeparators: {
- type: PropType<string[]>;
- };
- allowClear: {
- type: BooleanConstructor;
- default: any;
- };
- showArrow: {
- type: BooleanConstructor;
- default: any;
- };
- inputIcon: import("vue-types").VueTypeValidableDef<any>;
- clearIcon: import("vue-types").VueTypeValidableDef<any>;
- removeIcon: import("vue-types").VueTypeValidableDef<any>;
- animation: StringConstructor;
- transitionName: StringConstructor;
- dropdownStyle: {
- type: PropType<import("vue").CSSProperties>;
- };
- dropdownClassName: StringConstructor;
- dropdownMatchSelectWidth: {
- type: PropType<number | boolean>;
- default: any;
- };
- dropdownRender: {
- type: PropType<import("./BaseSelect").DropdownRender>;
- };
- dropdownAlign: PropType<import("../vc-trigger/interface").AlignType>;
- placement: {
- type: PropType<import("./BaseSelect").Placement>;
- };
- getPopupContainer: {
- type: PropType<import("./BaseSelect").RenderDOMFunc>;
- };
- showAction: {
- type: PropType<("click" | "focus")[]>;
- };
- onBlur: {
- type: PropType<(e: FocusEvent) => void>;
- };
- onFocus: {
- type: PropType<(e: FocusEvent) => void>;
- };
- onKeyup: PropType<(e: KeyboardEvent) => void>;
- onKeydown: PropType<(e: KeyboardEvent) => void>;
- onMousedown: PropType<(e: MouseEvent) => void>;
- onPopupScroll: PropType<(e: UIEvent) => void>;
- onInputKeyDown: PropType<(e: KeyboardEvent) => void>;
- onMouseenter: PropType<(e: MouseEvent) => void>;
- onMouseleave: PropType<(e: MouseEvent) => void>;
- onClick: PropType<(e: MouseEvent) => void>;
- }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
- prefixCls: StringConstructor;
- id: StringConstructor;
- backfill: {
- type: BooleanConstructor;
- default: any;
- };
- fieldNames: PropType<FieldNames>;
- /** @deprecated Use `searchValue` instead */
- inputValue: StringConstructor;
- searchValue: StringConstructor;
- onSearch: PropType<(value: string) => void>;
- autoClearSearchValue: {
- type: BooleanConstructor;
- default: any;
- };
- onSelect: PropType<SelectHandler<any, DefaultOptionType>>;
- onDeselect: PropType<SelectHandler<any, DefaultOptionType>>;
- /**
- * In Select, `false` means do nothing.
- * In TreeSelect, `false` will highlight match item.
- * It's by design.
- */
- filterOption: {
- type: PropType<boolean | FilterFunc<DefaultOptionType>>;
- default: any;
- };
- filterSort: PropType<(optionA: DefaultOptionType, optionB: DefaultOptionType) => number>;
- optionFilterProp: StringConstructor;
- optionLabelProp: StringConstructor;
- options: PropType<DefaultOptionType[]>;
- defaultActiveFirstOption: {
- type: BooleanConstructor;
- default: any;
- };
- virtual: {
- type: BooleanConstructor;
- default: any;
- };
- listHeight: NumberConstructor;
- listItemHeight: NumberConstructor;
- menuItemSelectedIcon: import("vue-types").VueTypeValidableDef<any>;
- mode: PropType<"multiple" | "tags" | "combobox">;
- labelInValue: {
- type: BooleanConstructor;
- default: any;
- };
- value: import("vue-types").VueTypeValidableDef<any>;
- defaultValue: import("vue-types").VueTypeValidableDef<any>;
- onChange: PropType<(value: any, option: DefaultOptionType | DefaultOptionType[]) => void>;
- children: PropType<VueNode[]>;
- showSearch: {
- type: BooleanConstructor;
- default: any;
- };
- tagRender: {
- type: PropType<(props: import("./BaseSelect").CustomTagProps) => any>;
- };
- optionLabelRender: {
- type: PropType<(option: Record<string, any>) => any>;
- };
- direction: {
- type: PropType<"ltr" | "rtl">;
- };
- tabindex: NumberConstructor;
- autofocus: BooleanConstructor;
- notFoundContent: import("vue-types").VueTypeValidableDef<any>;
- placeholder: import("vue-types").VueTypeValidableDef<any>;
- onClear: PropType<() => void>;
- choiceTransitionName: StringConstructor;
- disabled: {
- type: BooleanConstructor;
- default: any;
- };
- loading: {
- type: BooleanConstructor;
- default: any;
- };
- open: {
- type: BooleanConstructor;
- default: any;
- };
- defaultOpen: {
- type: BooleanConstructor;
- default: any;
- };
- onDropdownVisibleChange: {
- type: PropType<(open: boolean) => void>;
- };
- getInputElement: {
- type: PropType<() => any>;
- };
- getRawInputElement: {
- type: PropType<() => any>;
- };
- maxTagTextLength: NumberConstructor;
- maxTagCount: {
- type: PropType<number | "responsive">;
- };
- maxTagPlaceholder: import("vue-types").VueTypeValidableDef<any>;
- tokenSeparators: {
- type: PropType<string[]>;
- };
- allowClear: {
- type: BooleanConstructor;
- default: any;
- };
- showArrow: {
- type: BooleanConstructor;
- default: any;
- };
- inputIcon: import("vue-types").VueTypeValidableDef<any>;
- clearIcon: import("vue-types").VueTypeValidableDef<any>;
- removeIcon: import("vue-types").VueTypeValidableDef<any>;
- animation: StringConstructor;
- transitionName: StringConstructor;
- dropdownStyle: {
- type: PropType<import("vue").CSSProperties>;
- };
- dropdownClassName: StringConstructor;
- dropdownMatchSelectWidth: {
- type: PropType<number | boolean>;
- default: any;
- };
- dropdownRender: {
- type: PropType<import("./BaseSelect").DropdownRender>;
- };
- dropdownAlign: PropType<import("../vc-trigger/interface").AlignType>;
- placement: {
- type: PropType<import("./BaseSelect").Placement>;
- };
- getPopupContainer: {
- type: PropType<import("./BaseSelect").RenderDOMFunc>;
- };
- showAction: {
- type: PropType<("click" | "focus")[]>;
- };
- onBlur: {
- type: PropType<(e: FocusEvent) => void>;
- };
- onFocus: {
- type: PropType<(e: FocusEvent) => void>;
- };
- onKeyup: PropType<(e: KeyboardEvent) => void>;
- onKeydown: PropType<(e: KeyboardEvent) => void>;
- onMousedown: PropType<(e: MouseEvent) => void>;
- onPopupScroll: PropType<(e: UIEvent) => void>;
- onInputKeyDown: PropType<(e: KeyboardEvent) => void>;
- onMouseenter: PropType<(e: MouseEvent) => void>;
- onMouseleave: PropType<(e: MouseEvent) => void>;
- onClick: PropType<(e: MouseEvent) => void>;
- }>>, {
- open: boolean;
- disabled: boolean;
- virtual: boolean;
- dropdownMatchSelectWidth: number | boolean;
- autofocus: boolean;
- loading: boolean;
- showSearch: boolean;
- defaultOpen: boolean;
- allowClear: boolean;
- showArrow: boolean;
- backfill: boolean;
- autoClearSearchValue: boolean;
- filterOption: boolean | FilterFunc<DefaultOptionType>;
- defaultActiveFirstOption: boolean;
- labelInValue: boolean;
- }>;
- export default _default;
|