naive-ui
Version:
A Vue 3 Component Library. Fairly Complete, Theme Customizable, Uses TypeScript, Fast
787 lines (786 loc) • 27.6 kB
TypeScript
import type { FormValidationStatus } from '../../../form/src/public-types';
import type { SelectBaseOption } from '../../../select/src/interface';
import type { TagRef } from '../../../tag/src/Tag';
import type { RenderLabel, RenderLabelImpl } from '../../select-menu/src/interface';
import type { RenderTag } from './interface';
import { type InputHTMLAttributes, type PropType } from 'vue';
import { type VOverflowInst } from 'vueuc';
import { type PopoverProps } from '../../../popover';
export interface InternalSelectionInst {
isComposing: boolean;
focus: () => void;
focusInput: () => void;
blur: () => void;
blurInput: () => void;
$el: HTMLElement;
}
declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
clsPrefix: {
type: StringConstructor;
required: true;
};
bordered: {
type: PropType<boolean | undefined>;
default: undefined;
};
active: BooleanConstructor;
pattern: {
type: StringConstructor;
default: string;
};
placeholder: StringConstructor;
selectedOption: {
type: PropType<SelectBaseOption | null>;
default: null;
};
selectedOptions: {
type: PropType<SelectBaseOption[] | null>;
default: null;
};
labelField: {
type: StringConstructor;
default: string;
};
valueField: {
type: StringConstructor;
default: string;
};
multiple: BooleanConstructor;
filterable: BooleanConstructor;
clearable: BooleanConstructor;
disabled: BooleanConstructor;
size: {
type: PropType<"tiny" | "small" | "medium" | "large">;
default: string;
};
loading: BooleanConstructor;
autofocus: BooleanConstructor;
showArrow: {
type: BooleanConstructor;
default: boolean;
};
inputProps: PropType<InputHTMLAttributes>;
focused: BooleanConstructor;
renderTag: PropType<RenderTag>;
onKeydown: PropType<(e: KeyboardEvent) => void>;
onClick: PropType<(e: MouseEvent) => void>;
onBlur: PropType<(e: FocusEvent) => void>;
onFocus: PropType<(e: FocusEvent) => void>;
onDeleteOption: PropType<(option: SelectBaseOption) => void>;
maxTagCount: PropType<number | "responsive">;
ellipsisTagPopoverProps: PropType<PopoverProps>;
onClear: PropType<(e: MouseEvent) => void>;
onPatternInput: PropType<(e: InputEvent) => void>;
onPatternFocus: PropType<(e: FocusEvent) => void>;
onPatternBlur: PropType<(e: FocusEvent) => void>;
renderLabel: PropType<RenderLabel>;
status: PropType<FormValidationStatus>;
inlineThemeDisabled: BooleanConstructor;
ignoreComposition: {
type: BooleanConstructor;
default: boolean;
};
onResize: PropType<() => void>;
theme: PropType<import("../../../_mixins").Theme<"InternalSelection", {
fontSizeTiny: string;
fontSizeSmall: string;
fontSizeMedium: string;
fontSizeLarge: string;
heightTiny: string;
heightSmall: string;
heightMedium: string;
heightLarge: string;
borderRadius: string;
fontWeight: string;
textColor: string;
textColorDisabled: string;
placeholderColor: string;
placeholderColorDisabled: string;
color: string;
colorDisabled: string;
colorActive: string;
border: string;
borderHover: string;
borderActive: string;
borderFocus: string;
boxShadowHover: string;
boxShadowActive: string;
boxShadowFocus: string;
caretColor: string;
arrowColor: string;
arrowColorDisabled: string;
loadingColor: string;
borderWarning: string;
borderHoverWarning: string;
borderActiveWarning: string;
borderFocusWarning: string;
boxShadowHoverWarning: string;
boxShadowActiveWarning: string;
boxShadowFocusWarning: string;
colorActiveWarning: string;
caretColorWarning: string;
borderError: string;
borderHoverError: string;
borderActiveError: string;
borderFocusError: string;
boxShadowHoverError: string;
boxShadowActiveError: string;
boxShadowFocusError: string;
colorActiveError: string;
caretColorError: string;
clearColor: string;
clearColorHover: string;
clearColorPressed: string;
paddingSingle: string;
paddingMultiple: string;
clearSize: string;
arrowSize: string;
}, {
Popover: import("../../../_mixins").Theme<"Popover", {
fontSize: string;
borderRadius: string;
color: string;
dividerColor: string;
textColor: string;
boxShadow: string;
space: string;
spaceArrow: string;
arrowOffset: string;
arrowOffsetVertical: string;
arrowHeight: string;
padding: string;
}, any>;
}>>;
themeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"InternalSelection", {
fontSizeTiny: string;
fontSizeSmall: string;
fontSizeMedium: string;
fontSizeLarge: string;
heightTiny: string;
heightSmall: string;
heightMedium: string;
heightLarge: string;
borderRadius: string;
fontWeight: string;
textColor: string;
textColorDisabled: string;
placeholderColor: string;
placeholderColorDisabled: string;
color: string;
colorDisabled: string;
colorActive: string;
border: string;
borderHover: string;
borderActive: string;
borderFocus: string;
boxShadowHover: string;
boxShadowActive: string;
boxShadowFocus: string;
caretColor: string;
arrowColor: string;
arrowColorDisabled: string;
loadingColor: string;
borderWarning: string;
borderHoverWarning: string;
borderActiveWarning: string;
borderFocusWarning: string;
boxShadowHoverWarning: string;
boxShadowActiveWarning: string;
boxShadowFocusWarning: string;
colorActiveWarning: string;
caretColorWarning: string;
borderError: string;
borderHoverError: string;
borderActiveError: string;
borderFocusError: string;
boxShadowHoverError: string;
boxShadowActiveError: string;
boxShadowFocusError: string;
colorActiveError: string;
caretColorError: string;
clearColor: string;
clearColorHover: string;
clearColorPressed: string;
paddingSingle: string;
paddingMultiple: string;
clearSize: string;
arrowSize: string;
}, {
Popover: import("../../../_mixins").Theme<"Popover", {
fontSize: string;
borderRadius: string;
color: string;
dividerColor: string;
textColor: string;
boxShadow: string;
space: string;
spaceArrow: string;
arrowOffset: string;
arrowOffsetVertical: string;
arrowHeight: string;
padding: string;
}, any>;
}>>>;
builtinThemeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"InternalSelection", {
fontSizeTiny: string;
fontSizeSmall: string;
fontSizeMedium: string;
fontSizeLarge: string;
heightTiny: string;
heightSmall: string;
heightMedium: string;
heightLarge: string;
borderRadius: string;
fontWeight: string;
textColor: string;
textColorDisabled: string;
placeholderColor: string;
placeholderColorDisabled: string;
color: string;
colorDisabled: string;
colorActive: string;
border: string;
borderHover: string;
borderActive: string;
borderFocus: string;
boxShadowHover: string;
boxShadowActive: string;
boxShadowFocus: string;
caretColor: string;
arrowColor: string;
arrowColorDisabled: string;
loadingColor: string;
borderWarning: string;
borderHoverWarning: string;
borderActiveWarning: string;
borderFocusWarning: string;
boxShadowHoverWarning: string;
boxShadowActiveWarning: string;
boxShadowFocusWarning: string;
colorActiveWarning: string;
caretColorWarning: string;
borderError: string;
borderHoverError: string;
borderActiveError: string;
borderFocusError: string;
boxShadowHoverError: string;
boxShadowActiveError: string;
boxShadowFocusError: string;
colorActiveError: string;
caretColorError: string;
clearColor: string;
clearColorHover: string;
clearColorPressed: string;
paddingSingle: string;
paddingMultiple: string;
clearSize: string;
arrowSize: string;
}, {
Popover: import("../../../_mixins").Theme<"Popover", {
fontSize: string;
borderRadius: string;
color: string;
dividerColor: string;
textColor: string;
boxShadow: string;
space: string;
spaceArrow: string;
arrowOffset: string;
arrowOffsetVertical: string;
arrowHeight: string;
padding: string;
}, any>;
}>>>;
}>, {
mergedTheme: import("vue").ComputedRef<{
common: import("../../..").ThemeCommonVars;
self: {
fontSizeTiny: string;
fontSizeSmall: string;
fontSizeMedium: string;
fontSizeLarge: string;
heightTiny: string;
heightSmall: string;
heightMedium: string;
heightLarge: string;
borderRadius: string;
fontWeight: string;
textColor: string;
textColorDisabled: string;
placeholderColor: string;
placeholderColorDisabled: string;
color: string;
colorDisabled: string;
colorActive: string;
border: string;
borderHover: string;
borderActive: string;
borderFocus: string;
boxShadowHover: string;
boxShadowActive: string;
boxShadowFocus: string;
caretColor: string;
arrowColor: string;
arrowColorDisabled: string;
loadingColor: string;
borderWarning: string;
borderHoverWarning: string;
borderActiveWarning: string;
borderFocusWarning: string;
boxShadowHoverWarning: string;
boxShadowActiveWarning: string;
boxShadowFocusWarning: string;
colorActiveWarning: string;
caretColorWarning: string;
borderError: string;
borderHoverError: string;
borderActiveError: string;
borderFocusError: string;
boxShadowHoverError: string;
boxShadowActiveError: string;
boxShadowFocusError: string;
colorActiveError: string;
caretColorError: string;
clearColor: string;
clearColorHover: string;
clearColorPressed: string;
paddingSingle: string;
paddingMultiple: string;
clearSize: string;
arrowSize: string;
};
peers: {
Popover: import("../../../_mixins").Theme<"Popover", {
fontSize: string;
borderRadius: string;
color: string;
dividerColor: string;
textColor: string;
boxShadow: string;
space: string;
spaceArrow: string;
arrowOffset: string;
arrowOffsetVertical: string;
arrowHeight: string;
padding: string;
}, any>;
};
peerOverrides: {
Popover?: {
peers?: {
[x: string]: any;
} | undefined;
} | undefined;
};
}>;
mergedClearable: import("vue").ComputedRef<boolean>;
mergedClsPrefix: import("vue").Ref<string, string>;
rtlEnabled: import("vue").Ref<import("../../../config-provider/src/internal-interface").RtlItem | undefined, import("../../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
patternInputFocused: import("vue").Ref<boolean, boolean>;
filterablePlaceholder: import("vue").ComputedRef<import("vue").VNodeChild>;
label: import("vue").ComputedRef<unknown>;
selected: import("vue").ComputedRef<boolean>;
showTagsPanel: import("vue").Ref<boolean, boolean>;
isComposing: import("vue").Ref<boolean, boolean>;
counterRef: import("vue").Ref<{
$el: HTMLElement;
setTextContent: (textContent: string) => void;
} | null, TagRef | {
$el: HTMLElement;
setTextContent: (textContent: string) => void;
} | null>;
counterWrapperRef: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
patternInputMirrorRef: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
patternInputRef: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
selfRef: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
multipleElRef: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
singleElRef: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
patternInputWrapperRef: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
overflowRef: import("vue").Ref<{
sync: (options: {
showAllItemsBeforeCalculate: boolean;
}) => void;
} | null, VOverflowInst | {
sync: (options: {
showAllItemsBeforeCalculate: boolean;
}) => void;
} | null>;
inputTagElRef: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
handleMouseDown: (e: MouseEvent) => void;
handleFocusin: (e: FocusEvent) => void;
handleClear: (e: MouseEvent) => void;
handleMouseEnter: () => void;
handleMouseLeave: () => void;
handleDeleteOption: (option: SelectBaseOption) => void;
handlePatternKeyDown: (e: KeyboardEvent) => void;
handlePatternInputInput: (e: InputEvent) => void;
handlePatternInputBlur: (e: FocusEvent) => void;
handlePatternInputFocus: (e: FocusEvent) => void;
handleMouseEnterCounter: () => void;
handleMouseLeaveCounter: () => void;
handleFocusout: (e: FocusEvent) => void;
handleCompositionEnd: () => void;
handleCompositionStart: () => void;
onPopoverUpdateShow: (show: boolean) => void;
focus: () => void;
focusInput: () => void;
blur: () => void;
blurInput: () => void;
updateCounter: (count: number) => void;
getCounter: () => HTMLElement | null;
getTail: () => HTMLElement | null;
renderLabel: RenderLabelImpl;
cssVars: import("vue").ComputedRef<{
'--n-bezier': string;
'--n-border': string;
'--n-border-active': string;
'--n-border-focus': string;
'--n-border-hover': string;
'--n-border-radius': string;
'--n-box-shadow-active': string;
'--n-box-shadow-focus': string;
'--n-box-shadow-hover': string;
'--n-caret-color': string;
'--n-color': string;
'--n-color-active': string;
'--n-color-disabled': string;
'--n-font-size': string;
'--n-height': string;
'--n-padding-single-top': string;
'--n-padding-multiple-top': string;
'--n-padding-single-right': string;
'--n-padding-multiple-right': string;
'--n-padding-single-left': string;
'--n-padding-multiple-left': string;
'--n-padding-single-bottom': string;
'--n-padding-multiple-bottom': string;
'--n-placeholder-color': string;
'--n-placeholder-color-disabled': string;
'--n-text-color': string;
'--n-text-color-disabled': string;
'--n-arrow-color': string;
'--n-arrow-color-disabled': string;
'--n-loading-color': string;
'--n-color-active-warning': string;
'--n-box-shadow-focus-warning': string;
'--n-box-shadow-active-warning': string;
'--n-box-shadow-hover-warning': string;
'--n-border-warning': string;
'--n-border-focus-warning': string;
'--n-border-hover-warning': string;
'--n-border-active-warning': string;
'--n-color-active-error': string;
'--n-box-shadow-focus-error': string;
'--n-box-shadow-active-error': string;
'--n-box-shadow-hover-error': string;
'--n-border-error': string;
'--n-border-focus-error': string;
'--n-border-hover-error': string;
'--n-border-active-error': string;
'--n-clear-size': string;
'--n-clear-color': string;
'--n-clear-color-hover': string;
'--n-clear-color-pressed': string;
'--n-arrow-size': string;
'--n-font-weight': string;
}> | undefined;
themeClass: import("vue").Ref<string, string> | undefined;
onRender: (() => void) | undefined;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
clsPrefix: {
type: StringConstructor;
required: true;
};
bordered: {
type: PropType<boolean | undefined>;
default: undefined;
};
active: BooleanConstructor;
pattern: {
type: StringConstructor;
default: string;
};
placeholder: StringConstructor;
selectedOption: {
type: PropType<SelectBaseOption | null>;
default: null;
};
selectedOptions: {
type: PropType<SelectBaseOption[] | null>;
default: null;
};
labelField: {
type: StringConstructor;
default: string;
};
valueField: {
type: StringConstructor;
default: string;
};
multiple: BooleanConstructor;
filterable: BooleanConstructor;
clearable: BooleanConstructor;
disabled: BooleanConstructor;
size: {
type: PropType<"tiny" | "small" | "medium" | "large">;
default: string;
};
loading: BooleanConstructor;
autofocus: BooleanConstructor;
showArrow: {
type: BooleanConstructor;
default: boolean;
};
inputProps: PropType<InputHTMLAttributes>;
focused: BooleanConstructor;
renderTag: PropType<RenderTag>;
onKeydown: PropType<(e: KeyboardEvent) => void>;
onClick: PropType<(e: MouseEvent) => void>;
onBlur: PropType<(e: FocusEvent) => void>;
onFocus: PropType<(e: FocusEvent) => void>;
onDeleteOption: PropType<(option: SelectBaseOption) => void>;
maxTagCount: PropType<number | "responsive">;
ellipsisTagPopoverProps: PropType<PopoverProps>;
onClear: PropType<(e: MouseEvent) => void>;
onPatternInput: PropType<(e: InputEvent) => void>;
onPatternFocus: PropType<(e: FocusEvent) => void>;
onPatternBlur: PropType<(e: FocusEvent) => void>;
renderLabel: PropType<RenderLabel>;
status: PropType<FormValidationStatus>;
inlineThemeDisabled: BooleanConstructor;
ignoreComposition: {
type: BooleanConstructor;
default: boolean;
};
onResize: PropType<() => void>;
theme: PropType<import("../../../_mixins").Theme<"InternalSelection", {
fontSizeTiny: string;
fontSizeSmall: string;
fontSizeMedium: string;
fontSizeLarge: string;
heightTiny: string;
heightSmall: string;
heightMedium: string;
heightLarge: string;
borderRadius: string;
fontWeight: string;
textColor: string;
textColorDisabled: string;
placeholderColor: string;
placeholderColorDisabled: string;
color: string;
colorDisabled: string;
colorActive: string;
border: string;
borderHover: string;
borderActive: string;
borderFocus: string;
boxShadowHover: string;
boxShadowActive: string;
boxShadowFocus: string;
caretColor: string;
arrowColor: string;
arrowColorDisabled: string;
loadingColor: string;
borderWarning: string;
borderHoverWarning: string;
borderActiveWarning: string;
borderFocusWarning: string;
boxShadowHoverWarning: string;
boxShadowActiveWarning: string;
boxShadowFocusWarning: string;
colorActiveWarning: string;
caretColorWarning: string;
borderError: string;
borderHoverError: string;
borderActiveError: string;
borderFocusError: string;
boxShadowHoverError: string;
boxShadowActiveError: string;
boxShadowFocusError: string;
colorActiveError: string;
caretColorError: string;
clearColor: string;
clearColorHover: string;
clearColorPressed: string;
paddingSingle: string;
paddingMultiple: string;
clearSize: string;
arrowSize: string;
}, {
Popover: import("../../../_mixins").Theme<"Popover", {
fontSize: string;
borderRadius: string;
color: string;
dividerColor: string;
textColor: string;
boxShadow: string;
space: string;
spaceArrow: string;
arrowOffset: string;
arrowOffsetVertical: string;
arrowHeight: string;
padding: string;
}, any>;
}>>;
themeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"InternalSelection", {
fontSizeTiny: string;
fontSizeSmall: string;
fontSizeMedium: string;
fontSizeLarge: string;
heightTiny: string;
heightSmall: string;
heightMedium: string;
heightLarge: string;
borderRadius: string;
fontWeight: string;
textColor: string;
textColorDisabled: string;
placeholderColor: string;
placeholderColorDisabled: string;
color: string;
colorDisabled: string;
colorActive: string;
border: string;
borderHover: string;
borderActive: string;
borderFocus: string;
boxShadowHover: string;
boxShadowActive: string;
boxShadowFocus: string;
caretColor: string;
arrowColor: string;
arrowColorDisabled: string;
loadingColor: string;
borderWarning: string;
borderHoverWarning: string;
borderActiveWarning: string;
borderFocusWarning: string;
boxShadowHoverWarning: string;
boxShadowActiveWarning: string;
boxShadowFocusWarning: string;
colorActiveWarning: string;
caretColorWarning: string;
borderError: string;
borderHoverError: string;
borderActiveError: string;
borderFocusError: string;
boxShadowHoverError: string;
boxShadowActiveError: string;
boxShadowFocusError: string;
colorActiveError: string;
caretColorError: string;
clearColor: string;
clearColorHover: string;
clearColorPressed: string;
paddingSingle: string;
paddingMultiple: string;
clearSize: string;
arrowSize: string;
}, {
Popover: import("../../../_mixins").Theme<"Popover", {
fontSize: string;
borderRadius: string;
color: string;
dividerColor: string;
textColor: string;
boxShadow: string;
space: string;
spaceArrow: string;
arrowOffset: string;
arrowOffsetVertical: string;
arrowHeight: string;
padding: string;
}, any>;
}>>>;
builtinThemeOverrides: PropType<import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"InternalSelection", {
fontSizeTiny: string;
fontSizeSmall: string;
fontSizeMedium: string;
fontSizeLarge: string;
heightTiny: string;
heightSmall: string;
heightMedium: string;
heightLarge: string;
borderRadius: string;
fontWeight: string;
textColor: string;
textColorDisabled: string;
placeholderColor: string;
placeholderColorDisabled: string;
color: string;
colorDisabled: string;
colorActive: string;
border: string;
borderHover: string;
borderActive: string;
borderFocus: string;
boxShadowHover: string;
boxShadowActive: string;
boxShadowFocus: string;
caretColor: string;
arrowColor: string;
arrowColorDisabled: string;
loadingColor: string;
borderWarning: string;
borderHoverWarning: string;
borderActiveWarning: string;
borderFocusWarning: string;
boxShadowHoverWarning: string;
boxShadowActiveWarning: string;
boxShadowFocusWarning: string;
colorActiveWarning: string;
caretColorWarning: string;
borderError: string;
borderHoverError: string;
borderActiveError: string;
borderFocusError: string;
boxShadowHoverError: string;
boxShadowActiveError: string;
boxShadowFocusError: string;
colorActiveError: string;
caretColorError: string;
clearColor: string;
clearColorHover: string;
clearColorPressed: string;
paddingSingle: string;
paddingMultiple: string;
clearSize: string;
arrowSize: string;
}, {
Popover: import("../../../_mixins").Theme<"Popover", {
fontSize: string;
borderRadius: string;
color: string;
dividerColor: string;
textColor: string;
boxShadow: string;
space: string;
spaceArrow: string;
arrowOffset: string;
arrowOffsetVertical: string;
arrowHeight: string;
padding: string;
}, any>;
}>>>;
}>> & Readonly<{}>, {
pattern: string;
size: "small" | "medium" | "large" | "tiny";
disabled: boolean;
multiple: boolean;
active: boolean;
autofocus: boolean;
loading: boolean;
bordered: boolean | undefined;
inlineThemeDisabled: boolean;
labelField: string;
valueField: string;
showArrow: boolean;
filterable: boolean;
clearable: boolean;
focused: boolean;
selectedOption: SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)> | null;
selectedOptions: SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>[] | null;
ignoreComposition: boolean;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
export default _default;