v-phone-input
Version:
International phone field for Vuetify 3 and Vue 3.
92 lines (91 loc) • 3.1 kB
TypeScript
import { ParsedPhoneNumber, PhoneNumberFormat } from 'awesome-phonenumber';
import { PropType } from 'vue';
import { VPhoneInputCountryGuesser, VPhoneInputCountryObject } from '../types.ts';
import { default as makePhoneInputCountryProps } from './makePhoneInputCountryProps.ts';
import { default as makePhoneInputMessagesProps } from './makePhoneInputMessagesProps.ts';
declare function makePhoneInputComposableSpecificProps<Country extends VPhoneInputCountryObject>(): {
/**
* Guess the country of the user.
*/
guessCountry: {
type: PropType<VPhoneInputCountryGuesser>;
};
/**
* Format phone number for `modelValue` updates.
*
* @remarks
* This only applies to valid phone numbers.
* Using `null` will disable format feature and keep the input as is.
*
* @defaultValue
* `'e164'`
*/
modelFormat: {
type: PropType<PhoneNumberFormat | null>;
};
/**
* Format phone number for text input value.
*
* @remarks
* This only applies to valid phone numbers.
* Using `null` will disable format feature and keep the input as is.
*
* @defaultValue
* `'national'`
*/
displayFormat: {
type: PropType<PhoneNumberFormat | null>;
};
/**
* Delay (in milliseconds) before formatting the phone number
* for text input value when detecting an input.
*
* @remarks
* This only applies to valid phone numbers.
* Using `0` will format immediately after input.
*
* @defaultValue
* `1000` if `displayFormatOnBlur` is disabled.
*/
displayFormatDelay: {
type: PropType<number | boolean>;
default: symbol;
};
/**
* Format the phone number for text input only on blur event.
*
* @remarks
* This bypass the `displayFormatDelay` option, and only format the phone
* number on blur event or on `displayFormat` property change.
* Using `false` will restore the `displayFormatDelay` behavior.
* When using the composable, it is required to bind `countryInputRef` and
* `phoneInputRef` to appropriate focusable inputs.
*
* @defaultValue
* `true`
*/
displayFormatOnBlur: {
type: PropType<boolean>;
default: symbol;
};
/**
* Validate a phone number.
*
* @remarks
* Using `null` will disable the validation.
*
* @defaultValue
* Ensure `ParsedPhoneNumber.valid` is true and `ParsedPhoneNumber.regionCode` is a selectable
* country (not excluded from the countries list).
*/
validate: {
type: PropType<((phone: ParsedPhoneNumber | null, country: Country) => boolean) | null>;
};
};
/**
* Make phone input composable properties definition.
*
* @internal
*/
export default function makePhoneInputComposableProps<Country extends VPhoneInputCountryObject>(): ReturnType<typeof makePhoneInputCountryProps<Country>> & ReturnType<typeof makePhoneInputMessagesProps<Country>> & ReturnType<typeof makePhoneInputComposableSpecificProps<Country>>;
export {};