v-phone-input
Version:
International phone field for Vuetify 3 and Vue 3.
840 lines • 335 kB
TypeScript
import { Country, CountryGuesser, CountryOrIso2 } from '../types/countries';
import { CountryIconMode, CountryPhoneExample, MessageOptions, MessageResolver, PhoneValidator } from '../types/options';
import { ParsedPhoneNumber, PhoneNumberFormat } from 'awesome-phonenumber';
import { nextTick } from 'vue';
type ValidationResult = string | boolean;
type ValidateOnValue = 'blur' | 'input' | 'submit';
type VPhoneInputValidationResult = string | boolean | PromiseLike<string | boolean>;
type VPhoneInputValidationRule = VPhoneInputValidationResult | ((input: string, phone: ParsedPhoneNumber, messageOptions: MessageOptions) => VPhoneInputValidationResult);
type VPhoneInputProps = {
label?: MessageResolver;
ariaLabel?: MessageResolver;
countryLabel?: MessageResolver;
countryAriaLabel?: MessageResolver;
placeholder?: MessageResolver;
hint?: MessageResolver;
invalidMessage?: MessageResolver;
example?: CountryPhoneExample;
appendIcon?: string | undefined;
appendInnerIcon?: string | undefined;
prependIcon?: string | undefined;
prependInnerIcon?: string | undefined;
rules?: VPhoneInputValidationRule[];
validateOn?: ValidateOnValue | `${ValidateOnValue} lazy` | `lazy ${ValidateOnValue}` | 'lazy';
countryIconMode?: CountryIconMode;
allCountries?: Country[];
preferCountries?: CountryOrIso2[];
includeCountries?: CountryOrIso2[];
excludeCountries?: CountryOrIso2[];
defaultCountry?: CountryOrIso2 | undefined;
country?: string;
modelValue?: string | null;
wrapperProps?: Record<string, any>;
countryProps?: Record<string, any>;
phoneProps?: Record<string, any>;
/**
* @deprecated
* This public API will be replaced in a next major release.
*/
displayFormat?: PhoneNumberFormat;
/**
* @deprecated
* This public API will be replaced in a next major release.
*/
enableSearchingCountry?: boolean;
/**
* @deprecated
* This public API will be replaced in a next major release.
*/
phoneValidator?: PhoneValidator;
/**
* @deprecated
* This public API will be replaced in a next major release.
*/
countryGuesser?: CountryGuesser;
/**
* @deprecated
* This public API will be replaced in a next major release.
*/
guessCountry?: boolean;
/**
* @deprecated
* This public API will be replaced in a next major release.
*/
disableGuessLoading?: boolean;
};
type VPhoneInputSlots = {
'country-input'(props: {
props: (typeof countryInputProps)['value'];
}): any;
'country-selection'(props: {
country: Country;
}): any;
'country-icon'(props: {
country: Country;
decorative: boolean;
}): any;
'country-title'(props: {
country: Country;
}): any;
'country-append'(props: {
country: Country;
}): any;
'phone-input'(props: {
props: (typeof phoneInputProps)['value'];
}): any;
[key: `country:${string}`]: (props: any) => any;
[key: string]: (props: any) => any;
};
declare const countryInputProps: import('vue').ComputedRef<{
class: (string | {
'v-phone-input--focused': boolean;
})[];
'onUpdate:modelValue': (nextValue: string) => void;
onFocus: () => void;
onBlur: () => void;
ref: import('vue').Ref<null, null>;
modelValue: string | undefined;
label: import('../types/options').Message;
'aria-label': import('../types/options').Message;
items: ({
name: string;
iso2: string;
dialCode: string;
} | {
divider: boolean;
})[];
itemTitle: string;
itemValue: string;
loading: boolean;
prependIcon: string | undefined;
prependInnerIcon: string | undefined;
}>;
declare const phoneInputProps: import('vue').ComputedRef<{
validateOn: ValidateOnValue | "input lazy" | "blur lazy" | "submit lazy" | "lazy input" | "lazy blur" | "lazy submit" | "lazy" | undefined;
class: string;
type: string;
'onUpdate:modelValue': (nextValue: string) => void;
ref: import('vue').Ref<import('vue').CreateComponentPublicInstanceWithMixins<{
flat: boolean;
reverse: boolean;
variant: "filled" | "outlined" | "plain" | "underlined" | "solo" | "solo-inverted" | "solo-filled";
type: string;
error: boolean;
active: boolean;
direction: "horizontal" | "vertical";
style: import('vue').StyleValue;
autofocus: boolean;
disabled: boolean;
readonly: boolean | null;
messages: string | readonly string[];
rules: readonly (string | boolean | PromiseLike<import('vuetify/lib/composables/validation').ValidationResult> | ((value: any) => import('vuetify/lib/composables/validation').ValidationResult) | ((value: any) => PromiseLike<import('vuetify/lib/composables/validation').ValidationResult>) | [string, any, (string | undefined)?])[];
focused: boolean;
errorMessages: string | readonly string[] | null;
maxErrors: string | number;
density: import('vuetify/lib/composables/density').Density;
tile: boolean;
clearIcon: import('vuetify/lib/composables/icons').IconValue;
glow: boolean;
hideSpinButtons: boolean;
persistentHint: boolean;
clearable: boolean;
dirty: boolean;
persistentClear: boolean;
singleLine: boolean;
persistentPlaceholder: boolean;
persistentCounter: boolean;
} & {
name?: string | undefined;
id?: string | undefined;
width?: string | number | undefined;
color?: string | undefined;
maxWidth?: string | number | undefined;
minWidth?: string | number | undefined;
loading?: string | boolean | undefined;
label?: string | undefined;
prefix?: string | undefined;
role?: string | undefined;
class?: any;
theme?: string | undefined;
placeholder?: string | undefined;
counter?: string | number | boolean | undefined;
'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
modelValue?: any;
validateOn?: ("eager" | "lazy" | ("input" | "blur" | "submit" | "invalid-input") | "input lazy" | "blur lazy" | "submit lazy" | "invalid-input lazy" | "input eager" | "blur eager" | "submit eager" | "invalid-input eager" | "lazy input" | "lazy blur" | "lazy submit" | "lazy invalid-input" | "eager input" | "eager blur" | "eager submit" | "eager invalid-input") | undefined;
validationValue?: any;
rounded?: string | number | boolean | undefined;
baseColor?: string | undefined;
bgColor?: string | undefined;
prependIcon?: import('vuetify/lib/composables/icons').IconValue | undefined;
appendIcon?: import('vuetify/lib/composables/icons').IconValue | undefined;
appendInnerIcon?: import('vuetify/lib/composables/icons').IconValue | undefined;
prependInnerIcon?: import('vuetify/lib/composables/icons').IconValue | undefined;
'onClick:clear'?: ((args_0: MouseEvent) => void) | undefined;
'onClick:append'?: ((args_0: MouseEvent) => void) | undefined;
'onClick:prepend'?: ((args_0: MouseEvent) => void) | undefined;
'onClick:appendInner'?: ((args_0: MouseEvent) => void) | undefined;
'onClick:prependInner'?: ((args_0: MouseEvent) => void) | undefined;
centerAffix?: boolean | undefined;
iconColor?: string | boolean | undefined;
hint?: string | undefined;
hideDetails?: boolean | "auto" | undefined;
suffix?: string | undefined;
counterValue?: number | ((value: any) => number) | undefined;
modelModifiers?: Record<string, boolean> | undefined;
} & {
$children?: import('vue').VNodeChild | (() => import('vue').VNodeChild) | {
message?: ((arg: import('vuetify/lib/components/VMessages/VMessages').VMessageSlot) => import('vue').VNodeChild) | undefined;
clear?: ((arg: import('vuetify/lib/components/VField/VField').DefaultInputSlot & {
props: Record<string, any>;
}) => import('vue').VNodeChild) | undefined;
details?: ((arg: import('vuetify/lib/components/VInput/VInput').VInputSlot) => import('vue').VNodeChild) | undefined;
label?: ((arg: import('vuetify/lib/components/VField/VField').DefaultInputSlot & {
label: string | undefined;
props: Record<string, any>;
}) => import('vue').VNodeChild) | undefined;
append?: ((arg: import('vuetify/lib/components/VInput/VInput').VInputSlot) => import('vue').VNodeChild) | undefined;
prepend?: ((arg: import('vuetify/lib/components/VInput/VInput').VInputSlot) => import('vue').VNodeChild) | undefined;
loader?: ((arg: import('vuetify/lib/composables/loader').LoaderSlotProps) => import('vue').VNodeChild) | undefined;
"prepend-inner"?: ((arg: import('vuetify/lib/components/VField/VField').DefaultInputSlot) => import('vue').VNodeChild) | undefined;
"append-inner"?: ((arg: import('vuetify/lib/components/VField/VField').DefaultInputSlot) => import('vue').VNodeChild) | undefined;
default?: (() => import('vue').VNodeChild) | undefined;
counter?: ((arg: import('vuetify/lib/components/VCounter/VCounter').VCounterSlot) => import('vue').VNodeChild) | undefined;
};
'v-slots'?: {
message?: false | ((arg: import('vuetify/lib/components/VMessages/VMessages').VMessageSlot) => import('vue').VNodeChild) | undefined;
clear?: false | ((arg: import('vuetify/lib/components/VField/VField').DefaultInputSlot & {
props: Record<string, any>;
}) => import('vue').VNodeChild) | undefined;
details?: false | ((arg: import('vuetify/lib/components/VInput/VInput').VInputSlot) => import('vue').VNodeChild) | undefined;
label?: false | ((arg: import('vuetify/lib/components/VField/VField').DefaultInputSlot & {
label: string | undefined;
props: Record<string, any>;
}) => import('vue').VNodeChild) | undefined;
append?: false | ((arg: import('vuetify/lib/components/VInput/VInput').VInputSlot) => import('vue').VNodeChild) | undefined;
prepend?: false | ((arg: import('vuetify/lib/components/VInput/VInput').VInputSlot) => import('vue').VNodeChild) | undefined;
loader?: false | ((arg: import('vuetify/lib/composables/loader').LoaderSlotProps) => import('vue').VNodeChild) | undefined;
"prepend-inner"?: false | ((arg: import('vuetify/lib/components/VField/VField').DefaultInputSlot) => import('vue').VNodeChild) | undefined;
"append-inner"?: false | ((arg: import('vuetify/lib/components/VField/VField').DefaultInputSlot) => import('vue').VNodeChild) | undefined;
default?: false | (() => import('vue').VNodeChild) | undefined;
counter?: false | ((arg: import('vuetify/lib/components/VCounter/VCounter').VCounterSlot) => import('vue').VNodeChild) | undefined;
} | undefined;
} & {
"v-slot:message"?: false | ((arg: import('vuetify/lib/components/VMessages/VMessages').VMessageSlot) => import('vue').VNodeChild) | undefined;
"v-slot:clear"?: false | ((arg: import('vuetify/lib/components/VField/VField').DefaultInputSlot & {
props: Record<string, any>;
}) => import('vue').VNodeChild) | undefined;
"v-slot:details"?: false | ((arg: import('vuetify/lib/components/VInput/VInput').VInputSlot) => import('vue').VNodeChild) | undefined;
"v-slot:label"?: false | ((arg: import('vuetify/lib/components/VField/VField').DefaultInputSlot & {
label: string | undefined;
props: Record<string, any>;
}) => import('vue').VNodeChild) | undefined;
"v-slot:append"?: false | ((arg: import('vuetify/lib/components/VInput/VInput').VInputSlot) => import('vue').VNodeChild) | undefined;
"v-slot:prepend"?: false | ((arg: import('vuetify/lib/components/VInput/VInput').VInputSlot) => import('vue').VNodeChild) | undefined;
"v-slot:loader"?: false | ((arg: import('vuetify/lib/composables/loader').LoaderSlotProps) => import('vue').VNodeChild) | undefined;
"v-slot:prepend-inner"?: false | ((arg: import('vuetify/lib/components/VField/VField').DefaultInputSlot) => import('vue').VNodeChild) | undefined;
"v-slot:append-inner"?: false | ((arg: import('vuetify/lib/components/VField/VField').DefaultInputSlot) => import('vue').VNodeChild) | undefined;
"v-slot:default"?: false | (() => import('vue').VNodeChild) | undefined;
"v-slot:counter"?: false | ((arg: import('vuetify/lib/components/VCounter/VCounter').VCounterSlot) => import('vue').VNodeChild) | undefined;
} & {
"onUpdate:focused"?: ((focused: boolean) => any) | undefined;
"onUpdate:modelValue"?: ((val: string) => any) | undefined;
"onClick:control"?: ((e: MouseEvent) => any) | undefined;
"onMousedown:control"?: ((e: MouseEvent) => any) | undefined;
}, HTMLInputElement & Omit<Omit<{
$: import('vue').ComponentInternalInstance;
$data: {};
$props: Partial<{
error: boolean;
direction: "horizontal" | "vertical";
style: import('vue').StyleValue;
disabled: boolean | null;
readonly: boolean | null;
messages: string | readonly string[];
rules: readonly (string | boolean | PromiseLike<import('vuetify/lib/composables/validation').ValidationResult> | ((value: any) => import('vuetify/lib/composables/validation').ValidationResult) | ((value: any) => PromiseLike<import('vuetify/lib/composables/validation').ValidationResult>) | [string, any, (string | undefined)?])[];
focused: boolean;
errorMessages: string | readonly string[] | null;
maxErrors: string | number;
density: import('vuetify/lib/composables/density').Density;
centerAffix: boolean;
glow: boolean;
hideSpinButtons: boolean;
persistentHint: boolean;
}> & Omit<{
error: boolean;
direction: "horizontal" | "vertical";
style: import('vue').StyleValue;
disabled: boolean | null;
readonly: boolean | null;
messages: string | readonly string[];
rules: readonly (string | boolean | PromiseLike<import('vuetify/lib/composables/validation').ValidationResult> | ((value: any) => import('vuetify/lib/composables/validation').ValidationResult) | ((value: any) => PromiseLike<import('vuetify/lib/composables/validation').ValidationResult>) | [string, any, (string | undefined)?])[];
focused: boolean;
errorMessages: string | readonly string[] | null;
maxErrors: string | number;
density: import('vuetify/lib/composables/density').Density;
centerAffix: boolean;
glow: boolean;
hideSpinButtons: boolean;
persistentHint: boolean;
name?: string | undefined;
id?: string | undefined;
width?: string | number | undefined;
color?: string | undefined;
maxWidth?: string | number | undefined;
minWidth?: string | number | undefined;
label?: string | undefined;
class?: any;
theme?: string | undefined;
"onUpdate:focused"?: ((args_0: boolean) => void) | undefined;
validateOn?: ("eager" | "lazy" | ("input" | "blur" | "submit" | "invalid-input") | "input lazy" | "blur lazy" | "submit lazy" | "invalid-input lazy" | "input eager" | "blur eager" | "submit eager" | "invalid-input eager" | "lazy input" | "lazy blur" | "lazy submit" | "lazy invalid-input" | "eager input" | "eager blur" | "eager submit" | "eager invalid-input") | undefined;
validationValue?: any;
baseColor?: string | undefined;
prependIcon?: import('vuetify/lib/composables/icons').IconValue | undefined;
appendIcon?: import('vuetify/lib/composables/icons').IconValue | undefined;
"onClick:append"?: ((args_0: MouseEvent) => void) | undefined;
"onClick:prepend"?: ((args_0: MouseEvent) => void) | undefined;
iconColor?: string | boolean | undefined;
hint?: string | undefined;
hideDetails?: boolean | "auto" | undefined;
} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, "error" | "direction" | "style" | "disabled" | "readonly" | "messages" | "rules" | "focused" | "errorMessages" | "maxErrors" | "density" | "centerAffix" | "glow" | "hideSpinButtons" | "persistentHint">;
$attrs: {
[x: string]: unknown;
};
$refs: {
[x: string]: unknown;
};
$slots: Readonly<{
default?: ((arg: import('vuetify/lib/components/VInput/VInput').VInputSlot) => import('vue').VNode[]) | undefined;
prepend?: ((arg: import('vuetify/lib/components/VInput/VInput').VInputSlot) => import('vue').VNode[]) | undefined;
append?: ((arg: import('vuetify/lib/components/VInput/VInput').VInputSlot) => import('vue').VNode[]) | undefined;
details?: ((arg: import('vuetify/lib/components/VInput/VInput').VInputSlot) => import('vue').VNode[]) | undefined;
message?: ((arg: import('vuetify/lib/components/VMessages/VMessages').VMessageSlot) => import('vue').VNode[]) | undefined;
}>;
$root: import('vue').ComponentPublicInstance | null;
$parent: import('vue').ComponentPublicInstance | null;
$host: Element | null;
$emit: (event: string, ...args: any[]) => void;
$el: any;
$options: import('vue').ComponentOptionsBase<{
error: boolean;
direction: "horizontal" | "vertical";
style: import('vue').StyleValue;
disabled: boolean | null;
readonly: boolean | null;
messages: string | readonly string[];
rules: readonly (string | boolean | PromiseLike<import('vuetify/lib/composables/validation').ValidationResult> | ((value: any) => import('vuetify/lib/composables/validation').ValidationResult) | ((value: any) => PromiseLike<import('vuetify/lib/composables/validation').ValidationResult>) | [string, any, (string | undefined)?])[];
focused: boolean;
errorMessages: string | readonly string[] | null;
maxErrors: string | number;
density: import('vuetify/lib/composables/density').Density;
centerAffix: boolean;
glow: boolean;
hideSpinButtons: boolean;
persistentHint: boolean;
} & {
name?: string | undefined;
id?: string | undefined;
width?: string | number | undefined;
color?: string | undefined;
maxWidth?: string | number | undefined;
minWidth?: string | number | undefined;
label?: string | undefined;
class?: any;
theme?: string | undefined;
"onUpdate:focused"?: ((args_0: boolean) => void) | undefined;
validateOn?: ("eager" | "lazy" | ("input" | "blur" | "submit" | "invalid-input") | "input lazy" | "blur lazy" | "submit lazy" | "invalid-input lazy" | "input eager" | "blur eager" | "submit eager" | "invalid-input eager" | "lazy input" | "lazy blur" | "lazy submit" | "lazy invalid-input" | "eager input" | "eager blur" | "eager submit" | "eager invalid-input") | undefined;
validationValue?: any;
baseColor?: string | undefined;
prependIcon?: import('vuetify/lib/composables/icons').IconValue | undefined;
appendIcon?: import('vuetify/lib/composables/icons').IconValue | undefined;
"onClick:append"?: ((args_0: MouseEvent) => void) | undefined;
"onClick:prepend"?: ((args_0: MouseEvent) => void) | undefined;
iconColor?: string | boolean | undefined;
hint?: string | undefined;
hideDetails?: boolean | "auto" | undefined;
} & {}, {
reset: () => Promise<void>;
resetValidation: () => Promise<void>;
validate: (silent?: boolean) => Promise<string[]>;
isValid: import('vue').ComputedRef<boolean | null>;
errorMessages: import('vue').ComputedRef<string[]>;
}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, Omit<{
"update:modelValue": (value: any) => true;
}, "$children" | "v-slots" | "v-slot:default" | "modelValue" | "update:modelValue" | "v-slot:prepend" | "v-slot:append" | "v-slot:message" | "v-slot:details">, string, {
error: boolean;
direction: "horizontal" | "vertical";
style: import('vue').StyleValue;
disabled: boolean | null;
readonly: boolean | null;
messages: string | readonly string[];
rules: readonly (string | boolean | PromiseLike<import('vuetify/lib/composables/validation').ValidationResult> | ((value: any) => import('vuetify/lib/composables/validation').ValidationResult) | ((value: any) => PromiseLike<import('vuetify/lib/composables/validation').ValidationResult>) | [string, any, (string | undefined)?])[];
focused: boolean;
errorMessages: string | readonly string[] | null;
maxErrors: string | number;
density: import('vuetify/lib/composables/density').Density;
centerAffix: boolean;
glow: boolean;
hideSpinButtons: boolean;
persistentHint: boolean;
}, {}, string, import('vue').SlotsType<Partial<{
default: (arg: import('vuetify/lib/components/VInput/VInput').VInputSlot) => import('vue').VNode[];
prepend: (arg: import('vuetify/lib/components/VInput/VInput').VInputSlot) => import('vue').VNode[];
append: (arg: import('vuetify/lib/components/VInput/VInput').VInputSlot) => import('vue').VNode[];
details: (arg: import('vuetify/lib/components/VInput/VInput').VInputSlot) => import('vue').VNode[];
message: (arg: import('vuetify/lib/components/VMessages/VMessages').VMessageSlot) => import('vue').VNode[];
}>>, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
beforeCreate?: (() => void) | (() => void)[];
created?: (() => void) | (() => void)[];
beforeMount?: (() => void) | (() => void)[];
mounted?: (() => void) | (() => void)[];
beforeUpdate?: (() => void) | (() => void)[];
updated?: (() => void) | (() => void)[];
activated?: (() => void) | (() => void)[];
deactivated?: (() => void) | (() => void)[];
beforeDestroy?: (() => void) | (() => void)[];
beforeUnmount?: (() => void) | (() => void)[];
destroyed?: (() => void) | (() => void)[];
unmounted?: (() => void) | (() => void)[];
renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
};
$forceUpdate: () => void;
$nextTick: typeof nextTick;
$watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
} & Readonly<{
error: boolean;
direction: "horizontal" | "vertical";
style: import('vue').StyleValue;
disabled: boolean | null;
readonly: boolean | null;
messages: string | readonly string[];
rules: readonly (string | boolean | PromiseLike<import('vuetify/lib/composables/validation').ValidationResult> | ((value: any) => import('vuetify/lib/composables/validation').ValidationResult) | ((value: any) => PromiseLike<import('vuetify/lib/composables/validation').ValidationResult>) | [string, any, (string | undefined)?])[];
focused: boolean;
errorMessages: string | readonly string[] | null;
maxErrors: string | number;
density: import('vuetify/lib/composables/density').Density;
centerAffix: boolean;
glow: boolean;
hideSpinButtons: boolean;
persistentHint: boolean;
}> & Omit<{
error: boolean;
direction: "horizontal" | "vertical";
style: import('vue').StyleValue;
disabled: boolean | null;
readonly: boolean | null;
messages: string | readonly string[];
rules: readonly (string | boolean | PromiseLike<import('vuetify/lib/composables/validation').ValidationResult> | ((value: any) => import('vuetify/lib/composables/validation').ValidationResult) | ((value: any) => PromiseLike<import('vuetify/lib/composables/validation').ValidationResult>) | [string, any, (string | undefined)?])[];
focused: boolean;
errorMessages: string | readonly string[] | null;
maxErrors: string | number;
density: import('vuetify/lib/composables/density').Density;
centerAffix: boolean;
glow: boolean;
hideSpinButtons: boolean;
persistentHint: boolean;
} & {
name?: string | undefined;
id?: string | undefined;
width?: string | number | undefined;
color?: string | undefined;
maxWidth?: string | number | undefined;
minWidth?: string | number | undefined;
label?: string | undefined;
class?: any;
theme?: string | undefined;
'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
validateOn?: ("eager" | "lazy" | ("input" | "blur" | "submit" | "invalid-input") | "input lazy" | "blur lazy" | "submit lazy" | "invalid-input lazy" | "input eager" | "blur eager" | "submit eager" | "invalid-input eager" | "lazy input" | "lazy blur" | "lazy submit" | "lazy invalid-input" | "eager input" | "eager blur" | "eager submit" | "eager invalid-input") | undefined;
validationValue?: any;
baseColor?: string | undefined;
prependIcon?: import('vuetify/lib/composables/icons').IconValue | undefined;
appendIcon?: import('vuetify/lib/composables/icons').IconValue | undefined;
'onClick:append'?: ((args_0: MouseEvent) => void) | undefined;
'onClick:prepend'?: ((args_0: MouseEvent) => void) | undefined;
iconColor?: string | boolean | undefined;
hint?: string | undefined;
hideDetails?: boolean | "auto" | undefined;
}, "style" | "error" | "reset" | "persistentHint" | "rules" | "density" | "direction" | "disabled" | "readonly" | "isValid" | "validate" | "resetValidation" | "messages" | "focused" | "errorMessages" | "maxErrors" | "centerAffix" | "glow" | "hideSpinButtons"> & import('vue').ShallowUnwrapRef<{
reset: () => Promise<void>;
resetValidation: () => Promise<void>;
validate: (silent?: boolean) => Promise<string[]>;
isValid: import('vue').ComputedRef<boolean | null>;
errorMessages: import('vue').ComputedRef<string[]>;
}> & import('vue').ComponentCustomProperties & import('vuetify/lib/util').GenericProps<{
modelValue?: unknown;
'onUpdate:modelValue'?: ((value: unknown) => void) | undefined;
}, import('vuetify/lib/components/VInput/VInput').VInputSlots>, "label" | "style" | "error" | "class" | "name" | keyof import('vue').VNodeProps | "hint" | "persistentHint" | "appendIcon" | "prependIcon" | "rules" | "validateOn" | "modelValue" | "id" | "density" | "hideDetails" | "direction" | "color" | "theme" | "disabled" | "readonly" | "messages" | "focused" | "errorMessages" | "maxErrors" | "centerAffix" | "glow" | "hideSpinButtons" | "width" | "maxWidth" | "minWidth" | "onUpdate:focused" | "validationValue" | "baseColor" | "onClick:append" | "onClick:prepend" | "iconColor" | "$children" | "v-slots" | "v-slot:default" | "onUpdate:modelValue" | "v-slot:prepend" | "v-slot:append" | "v-slot:message" | "v-slot:details">, `$${any}`> & Omit<Omit<{
$: import('vue').ComponentInternalInstance;
$data: {};
$props: Partial<{
flat: boolean;
reverse: boolean;
variant: "filled" | "outlined" | "plain" | "underlined" | "solo" | "solo-inverted" | "solo-filled";
error: boolean;
active: boolean;
style: import('vue').StyleValue;
disabled: boolean;
focused: boolean;
rounded: string | number | boolean;
tile: boolean;
clearIcon: import('vuetify/lib/composables/icons').IconValue;
centerAffix: boolean;
glow: boolean;
clearable: boolean;
dirty: boolean;
persistentClear: boolean;
singleLine: boolean;
}> & Omit<{
flat: boolean;
reverse: boolean;
variant: "filled" | "outlined" | "plain" | "underlined" | "solo" | "solo-inverted" | "solo-filled";
error: boolean;
active: boolean;
style: import('vue').StyleValue;
disabled: boolean;
focused: boolean;
tile: boolean;
clearIcon: import('vuetify/lib/composables/icons').IconValue;
glow: boolean;
clearable: boolean;
dirty: boolean;
persistentClear: boolean;
singleLine: boolean;
id?: string | undefined;
color?: string | undefined;
loading?: string | boolean | undefined;
label?: string | undefined;
class?: any;
theme?: string | undefined;
"onUpdate:focused"?: (((args_0: boolean) => void) & ((focused: boolean) => any)) | undefined;
rounded?: string | number | boolean | undefined;
baseColor?: string | undefined;
bgColor?: string | undefined;
appendInnerIcon?: import('vuetify/lib/composables/icons').IconValue | undefined;
prependInnerIcon?: import('vuetify/lib/composables/icons').IconValue | undefined;
"onClick:clear"?: ((args_0: MouseEvent) => void) | undefined;
"onClick:appendInner"?: ((args_0: MouseEvent) => void) | undefined;
"onClick:prependInner"?: ((args_0: MouseEvent) => void) | undefined;
centerAffix?: boolean | undefined;
iconColor?: string | boolean | undefined;
} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, "flat" | "reverse" | "variant" | "error" | "active" | "style" | "disabled" | "focused" | "rounded" | "tile" | "clearIcon" | "centerAffix" | "glow" | "clearable" | "dirty" | "persistentClear" | "singleLine">;
$attrs: {
[x: string]: unknown;
};
$refs: {
[x: string]: unknown;
};
$slots: Readonly<{
clear?: ((arg: import('vuetify/lib/components/VField/VField').DefaultInputSlot & {
props: Record<string, any>;
}) => import('vue').VNode[]) | undefined;
"prepend-inner"?: ((arg: import('vuetify/lib/components/VField/VField').DefaultInputSlot) => import('vue').VNode[]) | undefined;
"append-inner"?: ((arg: import('vuetify/lib/components/VField/VField').DefaultInputSlot) => import('vue').VNode[]) | undefined;
label?: ((arg: import('vuetify/lib/components/VField/VField').DefaultInputSlot & {
label: string | undefined;
props: Record<string, any>;
}) => import('vue').VNode[]) | undefined;
loader?: ((arg: import('vuetify/lib/composables/loader').LoaderSlotProps) => import('vue').VNode[]) | undefined;
default?: ((arg: import('vuetify/lib/components/VField/VField').VFieldSlot) => import('vue').VNode[]) | undefined;
}>;
$root: import('vue').ComponentPublicInstance | null;
$parent: import('vue').ComponentPublicInstance | null;
$host: Element | null;
$emit: (event: "update:focused", focused: boolean) => void;
$el: any;
$options: import('vue').ComponentOptionsBase<{
flat: boolean;
reverse: boolean;
variant: "filled" | "outlined" | "plain" | "underlined" | "solo" | "solo-inverted" | "solo-filled";
error: boolean;
active: boolean;
style: import('vue').StyleValue;
disabled: boolean;
focused: boolean;
tile: boolean;
clearIcon: import('vuetify/lib/composables/icons').IconValue;
glow: boolean;
clearable: boolean;
dirty: boolean;
persistentClear: boolean;
singleLine: boolean;
} & {
id?: string | undefined;
color?: string | undefined;
loading?: string | boolean | undefined;
label?: string | undefined;
class?: any;
theme?: string | undefined;
"onUpdate:focused"?: ((args_0: boolean) => void) | undefined;
rounded?: string | number | boolean | undefined;
baseColor?: string | undefined;
bgColor?: string | undefined;
appendInnerIcon?: import('vuetify/lib/composables/icons').IconValue | undefined;
prependInnerIcon?: import('vuetify/lib/composables/icons').IconValue | undefined;
"onClick:clear"?: ((args_0: MouseEvent) => void) | undefined;
"onClick:appendInner"?: ((args_0: MouseEvent) => void) | undefined;
"onClick:prependInner"?: ((args_0: MouseEvent) => void) | undefined;
centerAffix?: boolean | undefined;
iconColor?: string | boolean | undefined;
} & {
"onUpdate:focused"?: ((focused: boolean) => any) | undefined;
}, {
controlRef: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
fieldIconColor: import('vue').ComputedRef<string | undefined>;
}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, Omit<{
"update:focused": (focused: boolean) => true;
"update:modelValue": (value: any) => true;
}, "$children" | "v-slots" | "v-slot:default" | "modelValue" | "update:modelValue" | "v-slot:loader" | "v-slot:label" | "v-slot:clear" | "v-slot:prepend-inner" | "v-slot:append-inner">, string, {
flat: boolean;
reverse: boolean;
variant: "filled" | "outlined" | "plain" | "underlined" | "solo" | "solo-inverted" | "solo-filled";
error: boolean;
active: boolean;
style: import('vue').StyleValue;
disabled: boolean;
focused: boolean;
rounded: string | number | boolean;
tile: boolean;
clearIcon: import('vuetify/lib/composables/icons').IconValue;
centerAffix: boolean;
glow: boolean;
clearable: boolean;
dirty: boolean;
persistentClear: boolean;
singleLine: boolean;
}, {}, string, import('vue').SlotsType<Partial<{
clear: (arg: import('vuetify/lib/components/VField/VField').DefaultInputSlot & {
props: Record<string, any>;
}) => import('vue').VNode[];
"prepend-inner": (arg: import('vuetify/lib/components/VField/VField').DefaultInputSlot) => import('vue').VNode[];
"append-inner": (arg: import('vuetify/lib/components/VField/VField').DefaultInputSlot) => import('vue').VNode[];
label: (arg: import('vuetify/lib/components/VField/VField').DefaultInputSlot & {
label: string | undefined;
props: Record<string, any>;
}) => import('vue').VNode[];
loader: (arg: import('vuetify/lib/composables/loader').LoaderSlotProps) => import('vue').VNode[];
default: (arg: import('vuetify/lib/components/VField/VField').VFieldSlot) => import('vue').VNode[];
}>>, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
beforeCreate?: (() => void) | (() => void)[];
created?: (() => void) | (() => void)[];
beforeMount?: (() => void) | (() => void)[];
mounted?: (() => void) | (() => void)[];
beforeUpdate?: (() => void) | (() => void)[];
updated?: (() => void) | (() => void)[];
activated?: (() => void) | (() => void)[];
deactivated?: (() => void) | (() => void)[];
beforeDestroy?: (() => void) | (() => void)[];
beforeUnmount?: (() => void) | (() => void)[];
destroyed?: (() => void) | (() => void)[];
unmounted?: (() => void) | (() => void)[];
renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
};
$forceUpdate: () => void;
$nextTick: typeof nextTick;
$watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
} & Readonly<{
flat: boolean;
reverse: boolean;
variant: "filled" | "outlined" | "plain" | "underlined" | "solo" | "solo-inverted" | "solo-filled";
error: boolean;
active: boolean;
style: import('vue').StyleValue;
disabled: boolean;
focused: boolean;
rounded: string | number | boolean;
tile: boolean;
clearIcon: import('vuetify/lib/composables/icons').IconValue;
centerAffix: boolean;
glow: boolean;
clearable: boolean;
dirty: boolean;
persistentClear: boolean;
singleLine: boolean;
}> & Omit<{
flat: boolean;
reverse: boolean;
variant: "filled" | "outlined" | "plain" | "underlined" | "solo" | "solo-inverted" | "solo-filled";
error: boolean;
active: boolean;
style: import('vue').StyleValue;
disabled: boolean;
focused: boolean;
tile: boolean;
clearIcon: import('vuetify/lib/composables/icons').IconValue;
glow: boolean;
clearable: boolean;
dirty: boolean;
persistentClear: boolean;
singleLine: boolean;
} & {
id?: string | undefined;
color?: string | undefined;
loading?: string | boolean | undefined;
label?: string | undefined;
class?: any;
theme?: string | undefined;
'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
rounded?: string | number | boolean | undefined;
baseColor?: string | undefined;
bgColor?: string | undefined;
appendInnerIcon?: import('vuetify/lib/composables/icons').IconValue | undefined;
prependInnerIcon?: import('vuetify/lib/composables/icons').IconValue | undefined;
'onClick:clear'?: ((args_0: MouseEvent) => void) | undefined;
'onClick:appendInner'?: ((args_0: MouseEvent) => void) | undefined;
'onClick:prependInner'?: ((args_0: MouseEvent) => void) | undefined;
centerAffix?: boolean | undefined;
iconColor?: string | boolean | undefined;
} & {
"onUpdate:focused"?: ((focused: boolean) => any) | undefined;
}, "reverse" | "flat" | "style" | "error" | "variant" | "tile" | "singleLine" | "disabled" | "rounded" | "focused" | "centerAffix" | "glow" | "active" | "clearIcon" | "clearable" | "dirty" | "persistentClear" | "controlRef" | "fieldIconColor"> & import('vue').ShallowUnwrapRef<{
controlRef: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
fieldIconColor: import('vue').ComputedRef<string | undefined>;
}> & import('vue').ComponentCustomProperties & import('vuetify/lib/util').GenericProps<{
modelValue?: unknown;
'onUpdate:modelValue'?: ((value: unknown) => void) | undefined;
}, import('vuetify/lib/components/VField/VField').VFieldSlots>, "reverse" | "flat" | "label" | "style" | "error" | "class" | keyof import('vue').VNodeProps | "appendInnerIcon" | "prependInnerIcon" | "modelValue" | "id" | "variant" | "tile" | "singleLine" | "color" | "bgColor" | "theme" | "disabled" | "rounded" | "focused" | "centerAffix" | "glow" | "onUpdate:focused" | "baseColor" | "iconColor" | "$children" | "v-slots" | "v-slot:default" | "onUpdate:modelValue" | "active" | "clearIcon" | "clearable" | "dirty" | "persistentClear" | "loading" | "onClick:clear" | "onClick:appendInner" | "onClick:prependInner" | "v-slot:loader" | "v-slot:label" | "v-slot:clear" | "v-slot:prepend-inner" | "v-slot:append-inner">, `$${any}`> & {
_allExposed: {
reset: () => Promise<void>;
resetValidation: () => Promise<void>;
validate: (silent?: boolean) => Promise<string[]>;
isValid: import('vue').ComputedRef<boolean | null>;
errorMessages: import('vue').ComputedRef<string[]>;
} | {
controlRef: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
fieldIconColor: import('vue').ComputedRef<string | undefined>;
} | {};
}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
'click:control': (e: MouseEvent) => true;
'mousedown:control': (e: MouseEvent) => true;
'update:focused': (focused: boolean) => true;
'update:modelValue': (val: string) => true;
}, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, {
flat: boolean;
reverse: boolean;
variant: "filled" | "outlined" | "plain" | "underlined" | "solo" | "solo-inverted" | "solo-filled";
type: string;
error: boolean;
active: boolean;
direction: "horizontal" | "vertical";
style: import('vue').StyleValue;
autofocus: boolean;
disabled: boolean;
readonly: boolean | null;
messages: string | readonly string[];
rules: readonly (string | boolean | PromiseLike<import('vuetify/lib/composables/validation').ValidationResult> | ((value: any) => import('vuetify/lib/composables/validation').ValidationResult) | ((value: any) => PromiseLike<import('vuetify/lib/composables/validation').ValidationResult>) | [string, any, (string | undefined)?])[];
focused: boolean;
errorMessages: string | readonly string[] | null;
maxErrors: string | number;
density: import('vuetify/lib/composables/density').Density;
rounded: string | number | boolean;
tile: boolean;
clearIcon: import('vuetify/lib/composables/icons').IconValue;
centerAffix: boolean;
glow: boolean;
hideSpinButtons: boolean;
persistentHint: boolean;
clearable: boolean;
dirty: boolean;
persistentClear: boolean;
singleLine: boolean;
persistentPlaceholder: boolean;
persistentCounter: boolean;
}, true, {}, import('vue').SlotsType<Partial<{
message: (arg: import('vuetify/lib/components/VMessages/VMessages').VMessageSlot) => import('vue').VNode[];
clear: (arg: import('vuetify/lib/components/VField/VField').DefaultInputSlot & {
props: Record<string, any>;
}) => import('vue').VNode[];
details: (arg: import('vuetify/lib/components/VInput/VInput').VInputSlot) => import('vue').VNode[];
label: (arg: import('vuetify/lib/components/VField/VField').DefaultInputSlot & {
label: string | undefined;
props: Record<string, any>;
}) => import('vue').VNode[];
append: (arg: import('vuetify/lib/components/VInput/VInput').VInputSlot) => import('vue').VNode[];
prepend: (arg: import('vuetify/lib/components/VInput/VInput').VInputSlot) => import('vue').VNode[];
loader: (arg: import('vuetify/lib/composables/loader').LoaderSlotProps) => import('vue').VNode[];
'prepend-inner': (arg: import('vuetify/lib/components/VField/VField').DefaultInputSlot) => import('vue').VNode[];
'append-inner': (arg: import('vuetify/lib/components/VField/VField').DefaultInputSlot) => import('vue').VNode[];
default: () => import('vue').VNode[];
counter: (arg: import('vuetify/lib/components/VCounter/VCounter').VCounterSlot) => import('vue').VNode[];
}>>, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, {
flat: boolean;
reverse: boolean;
variant: "filled" | "outlined" | "plain" | "underlined" | "solo" | "solo-inverted" | "solo-filled";
type: string;
error: boolean;
active: boolean;
direction: "horizontal" | "vertical";
style: import('vue').StyleValue;
autofocus: boolean;
disabled: boolean;
readonly: boolean | null;
messages: string | readonly string[];
rules: readonly (string | boolean | PromiseLike<import('vuetify/lib/composables/validation').ValidationResult> | ((value: any) => import('vuetify/lib/composables/validation').ValidationResult) | ((value: any) => PromiseLike<import('vuetify/lib/composables/validation').ValidationResult>) | [string, any, (string | undefined)?])[];
focused: boolean;
errorMessages: string | readonly string[] | null;
maxErrors: string | number;
density: import('vuetify/lib/composables/density').Density;
tile: boolean;
clearIcon: import('vuetify/lib/composables/icons').IconValue;
glow: boolean;
hideSpinButtons: boolean;
persistentHint: boolean;
clearable: boolean;
dirty: boolean;
persistentClear: boolean;
singleLine: boolean;
persistentPlaceholder: boolean;
persistentCounter: boolean;
} & {
name?: string | undefined;
id?: string | undefined;
width?: string | number | undefined;
color?: string | undefined;
maxWidth?: string | number | undefined;
minWidth?: string | number | undefined;
loading?: string | boolean | undefined;
label?: string | undefined;
prefix?: string | undefined;
role?: string | undefined;
class?: any;
theme?: string | undefined;
placeholder?: string | undefined;
counter?: string | number | boolean | undefined;
'onUpdate:focused'?: ((args_0: boolean) => void) | undefined;
modelValue?: any;
validateOn?: ("eager" | "lazy" | ("input" | "blur" | "submit" | "invalid-input") | "input lazy" | "blur lazy" | "submit lazy" | "invalid-input lazy" | "input eager" | "blur eager" | "submit eager" | "invalid-input eager" | "lazy input" | "lazy blur" | "lazy submit" | "lazy invalid-input" | "eager input" | "eager blur" | "eager submit" | "eager invalid-input") | undefined;
validationValue?: any;
rounded?: string | number | boolean | undefined;
baseColor?: string | undefined;
bgColor?: string | undefined;
prependIcon?: import('vuetify/lib/composables/icons').IconValue | undefined;
appendIcon?: import('vuetify/lib/composables/icons').IconValue | undefined;
appendInnerIcon?: import('vuetify/lib/composables/icons').IconValue | undefined;
prependInnerIcon?: import('vuetify/lib/composables/icons').IconValue | undefined;
'onClick:clear'?: ((args_0: MouseEvent) => void) | undefined;
'onClick:append'?: ((args_0: MouseEvent) => void) | undefined;
'onClick:prepend'?: ((args_0: MouseEvent) => void) | undefined;
'onClick:appendInner'?: ((args_0: MouseEvent) => void) | undefined;
'onClick:prependInner'?: ((args_0: MouseEvent) => void) | undefined;
centerAffix?: boolean | undefined;
iconColor?: string | boolean | undefined;
hint?: string | undefined;
hideDetails?: boolean | "auto" | undefined;
suffix?: string | undefined;
counterValue?: number | ((value: any) => number) | undefined;
modelModifiers?: Record<string, boolean> | undefined;
} & {
$children?: import('vue').VNodeChild | (() => import('vue').VNodeChild) | {
message?: ((arg: import('vuetify/lib/components/VMessages/VMessages').VMessageSlot) => import('vue').VNodeChild) | undefined;
clear?: ((arg: import('vuetify/lib/components/VField/VField').DefaultInputSlot & {
props: