maz-ui

import type { CountryCode } from 'libphonenumber-js'; import type { Results, Translations } from './MazPhoneNumberInput/types'; import type { Color, Position, Size } from './types'; import { type HTMLAttributes } from 'vue'; export type { Color, CountryCode, Position, Results as Result, Results, Size, Translations }; export interface Props { /** Style attribut of the component root element */ style?: HTMLAttributes['style']; /** Class attribut of the component root element */ class?: HTMLAttributes['class']; /** @model Country calling code + telephone number in international format */ modelValue?: string | undefined | null; /** @deprecated */ defaultPhoneNumber?: string | undefined | null; /** @model Country code selected - Ex: "FR" */ countryCode?: CountryCode | undefined | null; /** @deprecated - use country-code or v-model:country-code */ defaultCountryCode?: CountryCode | undefined | null; /** Id of the component */ id?: string; /** Placeholder of the input */ placeholder?: string; /** label of the input */ label?: 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>; /** Position where the list of countries will be opened */ listPosition?: Position; /** Component color applied - Ex: "secondary" */ color?: Color; /** Component size applied - Ex: "sm" */ size?: Size; /** Remove flags in country list */ noFlags?: boolean; /** Disable input */ disabled?: boolean; /** No show the phone number example */ noExample?: boolean; /** Disable search input in country list */ noSearch?: boolean; /** * Threshold of the search input in country list where 1 is a perfect match and 0 is a match with any character * @default 0.75 */ searchThreshold?: number; /** 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; /** Show country calling code in the country list */ showCodeOnList?: 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 * @deprecated use autoFormat instead */ noFormattingAsYouType?: boolean; /** * locale of country list - Ex: "fr-FR" * @default {string} browser locale */ countryLocale?: string; /** Disable validation error UI */ noValidationError?: boolean; /** Disable validation success UI */ noValidationSuccess?: boolean; /** Add success UI */ success?: boolean; /** Add error UI */ error?: boolean; /** Will replace the calling code by the country name in the country selector */ countrySelectorDisplayName?: boolean; /** Choose the width of the country selector */ countrySelectorWidth?: string; /** The input will be displayed in full width */ block?: boolean; /** Exclude selectors to close country selector list - usefull when you using custom flag */ excludeSelectors?: string[]; /** * Orientation of the inputs in the component * @default "responsive" * @values "row" | "col" | "responsive" */ orientation?: 'row' | 'col' | 'responsive'; /** * Meta attributes of the country input * @default `{Record<string, unknown>}` `{ autocomplete: 'off', name: 'country' }` */ countrySelectAttributes?: Record<string, unknown>; /** * Meta attributes of the phone number input * @default `{Record<string, unknown>}` `{ autocomplete: 'tel', name: 'phone', inputmode: 'tel' }` */ phoneInputAttributes?: Record<string, unknown>; } /** Models */ declare const phoneNumber: import("vue").Ref<string | null | undefined, string | null | undefined>; declare const selectedCountry: import("vue").Ref<CountryCode | null | undefined, CountryCode | null | undefined>; declare const results: import("vue").Ref<{ isValid: boolean; isPossible?: boolean | undefined; countryCode?: CountryCode | undefined | null; parsedCountryCode?: CountryCode | undefined | null; countryCallingCode?: import("libphonenumber-js").CountryCallingCode | undefined; nationalNumber?: import("libphonenumber-js").NationalNumber | undefined; type?: import("libphonenumber-js").NumberType; formatInternational?: string | undefined; formatNational?: string | undefined; uri?: string | undefined; e164?: string | undefined; rfc3966?: string | undefined; possibleCountries?: CountryCode[] | undefined; phoneNumber?: string | undefined | null; }, Results | { isValid: boolean; isPossible?: boolean | undefined; countryCode?: CountryCode | undefined | null; parsedCountryCode?: CountryCode | undefined | null; countryCallingCode?: import("libphonenumber-js").CountryCallingCode | undefined; nationalNumber?: import("libphonenumber-js").NationalNumber | undefined; type?: import("libphonenumber-js").NumberType; formatInternational?: string | undefined; formatNational?: string | undefined; uri?: string | undefined; e164?: string | undefined; rfc3966?: string | undefined; possibleCountries?: CountryCode[] | undefined; phoneNumber?: string | undefined | null; }>; /** Inject */ export interface InjectedData { selectedCountry: typeof selectedCountry; phoneNumber: typeof phoneNumber; results: typeof results; } declare function __VLS_template(): { attrs: Partial<{}>; slots: { "no-results"?(_: {}): any; "selector-flag"?(_: { countryCode: CountryCode; }): any; "country-list-flag"?(_: { countryCode: import("./types").ModelValueSimple; option: import("./MazSelect.vue").NormalizedOption; isSelected: boolean; }): any; }; refs: { PhoneInputRef: import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{ modelValue?: string | undefined | null; } & Omit<import("./MazInput.vue").Props<import("./types").ModelValueSimple>, "modelValue"> & { id: string; locales: Translations; noExample: boolean; hasRadius: boolean; autoFormat: boolean; }> & Readonly<{ "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined; }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, { "update:modelValue": (value: string | null | undefined) => any; }, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, { P: {}; B: {}; D: {}; C: {}; M: {}; Defaults: {}; }, Readonly<{ modelValue?: string | undefined | null; } & Omit<import("./MazInput.vue").Props<import("./types").ModelValueSimple>, "modelValue"> & { id: string; locales: Translations; noExample: boolean; hasRadius: boolean; autoFormat: boolean; }> & Readonly<{ "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined; }>, {}, {}, {}, {}, {}> | null; }; rootEl: any; }; type __VLS_TemplateResult = ReturnType<typeof __VLS_template>; declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, { data: (results: Results) => any; "update:model-value": (value: string | null | undefined) => any; update: (results: Results) => any; "country-code": (countryCode?: CountryCode | null | undefined) => any; "update:country-code": (countryCode?: CountryCode | null | undefined) => any; }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{ onData?: ((results: Results) => any) | undefined; "onUpdate:model-value"?: ((value: string | null | undefined) => any) | undefined; onUpdate?: ((results: Results) => any) | undefined; "onCountry-code"?: ((countryCode?: CountryCode | null | undefined) => any) | undefined; "onUpdate:country-code"?: ((countryCode?: CountryCode | null | undefined) => any) | undefined; }>, { label: string; style: string | false | import("vue").CSSProperties | import("vue").StyleValue[] | null; size: Size; color: Color; class: HTMLAttributes["class"]; id: string; modelValue: string | null; orientation: "row" | "col" | "responsive"; placeholder: string; listPosition: Position; searchThreshold: number; excludeSelectors: string[]; preferredCountries: CountryCode[]; ignoredCountries: CountryCode[]; onlyCountries: CountryCode[]; customCountriesList: Record<CountryCode, string>; countryLocale: string; countryCode: CountryCode | null; noExample: boolean; autoFormat: boolean; defaultPhoneNumber: string | null; defaultCountryCode: CountryCode | null; translations: Partial<Translations>; noFormattingAsYouType: boolean; countrySelectorWidth: string; countrySelectAttributes: Record<string, unknown>; phoneInputAttributes: Record<string, unknown>; }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>; declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>; export default _default; type __VLS_WithTemplateSlots<T, S> = T & { new (): { $slots: S; }; };