base-vue-phone-input

import type { Examples } from 'libphonenumber-js'; import type { CountryCode } from 'libphonenumber-js'; import { type ComponentPublicInstance } from 'vue'; import type { Results, Translations } from '../helpers/types'; export interface Props { /** @model Country calling code + telephone number in international format */ modelValue?: string; /** @model Country code selected - Ex: "FR" */ countryCode?: CountryCode; /** Placeholder of the input */ placeholder?: string; /** List of country codes to place first in the select list - Ex: ['FR', 'BE', 'GE'] */ preferredCountries?: CountryCode[]; /** List of country codes to be removed from the select list - Ex: ['FR', 'BE', 'GE'] */ ignoredCountries?: CountryCode[]; /** List of country codes to only have the countries selected in the select list - Ex: ['FR', 'BE', 'GE'] */ onlyCountries?: CountryCode[]; /** Locale strings of the component */ translations?: Partial<Translations>; /** By default the component use the browser locale to set the default country code if not country code is provided */ noUseBrowserLocale?: boolean; /** The component will make a request (https://ipwho.is) to get the location of the user and use it to set the default country code */ fetchCountry?: boolean; /** No show the country selector */ noCountrySelector?: boolean; /** Replace country names */ customCountriesList?: Record<CountryCode, string>; /** * Disabled auto-format when phone is valid * @default true */ autoFormat?: boolean; /** * Disabled auto-format as you type * @default false */ noFormattingAsYouType?: boolean; /** * locale of country list - Ex: "fr-FR" * @default {string} browser locale */ countryLocale?: string; /** Exclude selectors to close country selector list - usefull when you using custom flag */ excludeSelectors?: string[]; } declare const _sfc_main: import("vue").DefineComponent<{ modelValue: { type: StringConstructor; required: false; default: any; }; countryCode: { type: any; required: false; default: any; }; placeholder: { type: StringConstructor; required: false; default: any; }; preferredCountries: { type: ArrayConstructor; required: false; default: any; }; ignoredCountries: { type: ArrayConstructor; required: false; default: any; }; onlyCountries: { type: ArrayConstructor; required: false; default: any; }; translations: { type: ObjectConstructor; required: false; default: any; }; noUseBrowserLocale: { type: BooleanConstructor; required: false; }; fetchCountry: { type: BooleanConstructor; required: false; }; noCountrySelector: { type: BooleanConstructor; required: false; }; customCountriesList: { type: ObjectConstructor; required: false; default: any; }; autoFormat: { type: BooleanConstructor; required: false; default: boolean; }; noFormattingAsYouType: { type: BooleanConstructor; required: false; default: boolean; }; countryLocale: { type: StringConstructor; required: false; default: any; }; excludeSelectors: { type: ArrayConstructor; required: false; default: any; }; }, { slots: Readonly<{ [name: string]: import("vue").Slot<any>; }>; props: any; emits: (event: "update:model-value" | "country-code" | "update:country-code" | "update" | "data", ...args: any[]) => void; fetchCountryCode: () => Promise<string>; sanitizePhoneNumber: (input?: string) => any; getBrowserLocale: () => { locale: string; browserLocale: string; }; isCountryAvailable: (locale: string) => boolean; getPhoneNumberResults: ({ phoneNumber, countryCode, }: { phoneNumber?: string; countryCode?: CountryCode; }) => Results; getAsYouTypeFormat: (countryCode?: CountryCode, phoneNumber?: string) => string; getPhoneNumberExamplesFile: () => Promise<import("libphonenumber-js/types").Examples>; getPhoneNumberExample: (examples: Examples, countryCode?: CountryCode) => string; examples: import("vue").Ref<Examples>; loadExamples: () => Promise<void>; getCountriesList: (locale?: string, customCountriesNameListByIsoCode?: Record<CountryCode, string>) => import("../helpers/types").Country[]; countries: import("vue").ComputedRef<import("../helpers/types").Country[]>; countriesList: import("vue").ComputedRef<import("../helpers/types").Country[]>; countriesFiltered: import("vue").ComputedRef<any>; otherCountries: import("vue").ComputedRef<import("../helpers/types").Country[]>; countriesSorted: import("vue").ComputedRef<any>; countryOptions: import("vue").ComputedRef<any>; phoneNumber: import("vue").Ref<string>; selectedCountry: import("vue").Ref<CountryCode>; results: import("vue").Ref<{ isValid: boolean; isPossible?: boolean; countryCode?: CountryCode; countryCallingCode?: import("libphonenumber-js").CountryCallingCode; nationalNumber?: import("libphonenumber-js").NationalNumber; type?: import("libphonenumber-js").NumberType; formatInternational?: string; formatNational?: string; uri?: string; e164?: string; rfc3966?: string; phoneNumber?: string; }>; PhoneInputRef: import("vue").Ref<ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}>>; getPhoneNumberInput: () => HTMLInputElement; selectPhoneNumberInput: () => Promise<void>; countryChanged: (countryCode?: CountryCode) => void; setSelectedCountry: (countryCode?: string) => void; handlePhoneNumberUpdate: (eventOrData: Event | { newPhoneNumber?: string; autoFormat: boolean; noFormattingAsYouType: boolean; updateResults?: boolean; }) => void; updatePhoneNumber: (value: string) => void; onPhoneNumberChanged: ({ newPhoneNumber, autoFormat, noFormattingAsYouType, updateResults, }: { newPhoneNumber?: string; autoFormat: boolean; noFormattingAsYouType: boolean; updateResults?: boolean; }) => void; getCountryPhoneNumberExample: (examples: Examples, selectedCountry?: CountryCode) => string; inputLabelOrPlaceholder: import("vue").ComputedRef<any>; onCountryChanged: ({ countryCode, autoFormat, noFormattingAsYouType, updateResults, }: { countryCode?: CountryCode; autoFormat: boolean; noFormattingAsYouType: boolean; updateResults?: boolean; }) => void; }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:model-value" | "country-code" | "update:country-code" | "update" | "data")[], "update:model-value" | "country-code" | "update:country-code" | "update" | "data", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{ modelValue: { type: StringConstructor; required: false; default: any; }; countryCode: { type: any; required: false; default: any; }; placeholder: { type: StringConstructor; required: false; default: any; }; preferredCountries: { type: ArrayConstructor; required: false; default: any; }; ignoredCountries: { type: ArrayConstructor; required: false; default: any; }; onlyCountries: { type: ArrayConstructor; required: false; default: any; }; translations: { type: ObjectConstructor; required: false; default: any; }; noUseBrowserLocale: { type: BooleanConstructor; required: false; }; fetchCountry: { type: BooleanConstructor; required: false; }; noCountrySelector: { type: BooleanConstructor; required: false; }; customCountriesList: { type: ObjectConstructor; required: false; default: any; }; autoFormat: { type: BooleanConstructor; required: false; default: boolean; }; noFormattingAsYouType: { type: BooleanConstructor; required: false; default: boolean; }; countryLocale: { type: StringConstructor; required: false; default: any; }; excludeSelectors: { type: ArrayConstructor; required: false; default: any; }; }>> & { "onUpdate:model-value"?: (...args: any[]) => any; "onCountry-code"?: (...args: any[]) => any; "onUpdate:country-code"?: (...args: any[]) => any; onUpdate?: (...args: any[]) => any; onData?: (...args: any[]) => any; }, { modelValue: string; countryCode: any; placeholder: string; preferredCountries: unknown[]; ignoredCountries: unknown[]; onlyCountries: unknown[]; translations: Record<string, any>; noUseBrowserLocale: boolean; fetchCountry: boolean; noCountrySelector: boolean; customCountriesList: Record<string, any>; autoFormat: boolean; noFormattingAsYouType: boolean; countryLocale: string; excludeSelectors: unknown[]; }, {}>; export default _sfc_main;