maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
422 lines (421 loc) • 14.5 kB
TypeScript
import { MazUiTranslationsNestedSchema } from '@maz-ui/translations';
import { CountryCallingCode, CountryCode, NationalNumber, NumberType } from 'libphonenumber-js';
import { HTMLAttributes } from 'vue';
import { MazPopoverProps } from './MazPopover.vue';
import { MazColor, MazSize } from './types';
export interface MazInputPhoneNumberData {
isValid: boolean;
isPossible?: boolean;
countryCode?: CountryCode | undefined | null;
parsedCountryCode?: CountryCode | undefined | null;
countryCallingCode?: CountryCallingCode;
nationalNumber?: NationalNumber;
type?: NumberType;
formatInternational?: string;
formatNational?: string;
uri?: string;
e164?: string;
rfc3966?: string;
possibleCountries?: CountryCode[];
phoneNumber?: string | undefined | null;
}
export interface MazInputPhoneNumberProps {
/**
* Style attribut of the component root element
* @type {HTMLAttributes['style']}
*/
style?: HTMLAttributes['style'];
/**
* Class attribut of the component root element
* @type {HTMLAttributes['class']}
*/
class?: HTMLAttributes['class'];
/**
* The current value of the input field in international format (e.g. +33612345678)
* @model
* @type {string | undefined | null}
* @example "+33612345678"
*/
modelValue?: string | undefined | null;
/**
* The selected country code (e.g. "FR")
* @model
* @type {CountryCode | undefined | null}
* @example "FR"
*/
countryCode?: CountryCode | undefined | null;
/**
* Unique identifier for the component
* @type {string}
* @example "phone-input-1"
*/
id?: string;
/**
* Text displayed when the input is empty
* @type {string}
* @example "Enter your phone number"
*/
placeholder?: string;
/**
* Label displayed above the input
* @type {string}
* @example "Phone Number"
*/
label?: string;
/**
* List of country codes to place first in the select list
* @type {CountryCode[]}
* @example ["FR", "BE", "GE"]
*/
preferredCountries?: CountryCode[];
/**
* List of country codes to be removed from the select list
* @type {CountryCode[]}
* @example ["FR", "BE", "GE"]
*/
ignoredCountries?: CountryCode[];
/**
* List of country codes to only have the countries selected in the select list
* @type {CountryCode[]}
* @example ["FR", "BE", "GE"]
*/
onlyCountries?: CountryCode[];
/**
* Locale strings of the component
* The default values are the translations of the MazUiTranslations plugin
* @type {Partial<MazUiTranslationsNestedSchema['inputPhoneNumber']>}
* @default {
* countrySelect: {
* error: 'Choose country',
* placeholder: 'Country code',
* searchPlaceholder: 'Search the country',
* },
* phoneInput: {
* placeholder: 'Phone number',
* example: 'Example: {example}',
* },
* }
*/
translations?: Partial<MazUiTranslationsNestedSchema['inputPhoneNumber']>;
/**
* Position where the list of countries will be opened
* @type {MazPopoverProps['position']}
* @values top left, top right, bottom left, bottom right
* @default "bottom left"
*/
listPosition?: MazPopoverProps['position'];
/**
* Component color applied
* @type {MazColor}
* @values primary, secondary, accent, info, success, warning, destructive, contrast
* @default "primary"
*/
color?: MazColor;
/**
* Component size applied
* @type {MazSize}
* @values xs, sm, md, lg, xl, mini
* @default "md"
*/
size?: MazSize;
/**
* Remove flags in country list
* @default false
*/
hideFlags?: boolean;
/**
* Disable input
* @default false
*/
disabled?: boolean;
/**
* Show the phone number example
* @default true
*/
example?: boolean;
/**
* Disable search input in country list
* @default true
*/
search?: boolean;
/**
* Threshold of the search input in country list where 1 is a perfect match and 0 is a match with any character
* @type {number}
* @default 0.75
*/
searchThreshold?: number;
/**
* If true, the browser locale will be used
* @default true
*/
useBrowserLocale?: 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
* @default false
*/
fetchCountry?: boolean;
/**
* Hide the country selector
* @default false
*/
hideCountrySelect?: boolean;
/**
* Show country calling code in the country list
* @default false
*/
showCodeInList?: boolean;
/**
* Replace country names
* @type {Record<CountryCode, string>}
*/
customCountriesList?: Record<CountryCode, string>;
/**
* Disabled auto-format when phone is valid
* @default 'blur'
*/
autoFormat?: 'blur' | 'typing' | 'disabled' | false;
/**
* Locale of country list
* @example "fr-FR"
*/
countryLocale?: string;
/**
* Disable validation error UI
* @default true
*/
validationError?: boolean;
/**
* Disable validation success UI
* @default true
*/
validationSuccess?: boolean;
/**
* Add success UI
* @default false
*/
success?: boolean;
/**
* Add error UI
* @default false
*/
error?: boolean;
/**
* Will replace the calling code by the country name in the country selector
* @default false
*/
displayCountryName?: boolean;
/**
* The input will be displayed in full width
* @default false
*/
block?: boolean;
/**
* Orientation of the inputs in the component
* @type {'row' | 'col' | 'responsive'}
* @values row, col, responsive
* @default "responsive"
*/
orientation?: 'row' | 'col' | 'responsive';
/**
* Meta attributes of the country input
* @type {Record<string, unknown>}
* @default { autocomplete: 'off', name: 'country' }
*/
countrySelectAttributes?: Record<string, unknown>;
/**
* Meta attributes of the phone number input
* @type {Record<string, unknown>}
* @default { autocomplete: 'tel', name: 'phone', inputmode: 'tel' }
*/
phoneInputAttributes?: Record<string, unknown> & {
name: string;
inputmode: HTMLAttributes['inputmode'];
autocomplete: string;
};
}
/** Models */
declare const phoneNumber: import('vue').Ref<string | null | undefined, string | null | undefined>;
declare const selectedCountry: import('vue').Ref<CountryCode | undefined, CountryCode | undefined>;
declare const results: import('vue').Ref<{
isValid: boolean;
isPossible?: boolean | undefined;
countryCode?: CountryCode | null | undefined;
parsedCountryCode?: CountryCode | null | undefined;
countryCallingCode?: CountryCallingCode | undefined;
nationalNumber?: NationalNumber | undefined;
type?: NumberType;
formatInternational?: string | undefined;
formatNational?: string | undefined;
uri?: string | undefined;
e164?: string | undefined;
rfc3966?: string | undefined;
possibleCountries?: CountryCode[] | undefined;
phoneNumber?: string | undefined | null | undefined;
}, MazInputPhoneNumberData | {
isValid: boolean;
isPossible?: boolean | undefined;
countryCode?: CountryCode | null | undefined;
parsedCountryCode?: CountryCode | null | undefined;
countryCallingCode?: CountryCallingCode | undefined;
nationalNumber?: NationalNumber | undefined;
type?: NumberType;
formatInternational?: string | undefined;
formatNational?: string | undefined;
uri?: string | undefined;
e164?: string | undefined;
rfc3966?: string | undefined;
possibleCountries?: CountryCode[] | undefined;
phoneNumber?: string | undefined | null | undefined;
}>;
/** Inject */
export interface MazInputPhoneNumberInjectedData {
selectedCountry: typeof selectedCountry;
phoneNumber: typeof phoneNumber;
results: typeof results;
}
declare function __VLS_template(): {
attrs: Partial<{}>;
slots: {
'no-results'?(_: {}): any;
'selector-flag'?(_: {
countryCode: CountryCode | undefined;
}): any;
'country-list-flag'?(_: {
countryCode: CountryCode;
option: import('./MazInputPhoneNumber/useMazInputPhoneNumber').CountryOption;
isSelected: boolean;
}): any;
};
refs: {
PhoneInputRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
modelValue?: string | undefined | null;
} & Omit<import('./MazInput.vue').MazInputProps<import('./MazInput.vue').MazInputValue>, "modelValue"> & {
id: string;
locales: {
placeholder: string;
example: string | undefined;
};
example: boolean;
hasRadius: boolean;
autoFormat: "blur" | "typing" | "disabled" | false;
}> & Readonly<{
"onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
}>, {
focus: () => void;
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
"update:modelValue": (value: string | null | undefined) => any;
}, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
input: import('vue').ShallowUnwrapRef<{}> | null;
}, any, import('vue').ComponentProvideOptions, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, Readonly<{
modelValue?: string | undefined | null;
} & Omit<import('./MazInput.vue').MazInputProps<import('./MazInput.vue').MazInputValue>, "modelValue"> & {
id: string;
locales: {
placeholder: string;
example: string | undefined;
};
example: boolean;
hasRadius: boolean;
autoFormat: "blur" | "typing" | "disabled" | false;
}> & Readonly<{
"onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
}>, {
focus: () => void;
}, {}, {}, {}, {}> | null;
};
rootEl: any;
};
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
declare const __VLS_component: import('vue').DefineComponent<MazInputPhoneNumberProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
data: (results: MazInputPhoneNumberData) => any;
"update:model-value": (value: string | null | undefined) => any;
"country-code": (countryCode?: CountryCode | null | undefined) => any;
"update:country-code": (countryCode?: CountryCode | null | undefined) => any;
}, string, import('vue').PublicProps, Readonly<MazInputPhoneNumberProps> & Readonly<{
onData?: ((results: MazInputPhoneNumberData) => any) | undefined;
"onUpdate:model-value"?: ((value: string | null | undefined) => any) | undefined;
"onCountry-code"?: ((countryCode?: CountryCode | null | undefined) => any) | undefined;
"onUpdate:country-code"?: ((countryCode?: CountryCode | null | undefined) => any) | undefined;
}>, {
size: MazSize;
search: boolean;
color: MazColor;
disabled: boolean;
orientation: "row" | "col" | "responsive";
example: boolean;
useBrowserLocale: boolean;
listPosition: import('./MazPopover.vue').MazPopoverPosition;
searchThreshold: number;
hideFlags: boolean;
showCodeInList: boolean;
autoFormat: "blur" | "typing" | "disabled" | false;
hideCountrySelect: boolean;
customCountriesList: Record<CountryCode, string>;
countryLocale: string;
validationError: boolean;
validationSuccess: boolean;
displayCountryName: boolean;
countrySelectAttributes: Record<string, unknown>;
phoneInputAttributes: Record<string, unknown> & {
name: string;
inputmode: HTMLAttributes["inputmode"];
autocomplete: string;
};
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
PhoneInputRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
modelValue?: string | undefined | null;
} & Omit<import('./MazInput.vue').MazInputProps<import('./MazInput.vue').MazInputValue>, "modelValue"> & {
id: string;
locales: {
placeholder: string;
example: string | undefined;
};
example: boolean;
hasRadius: boolean;
autoFormat: "blur" | "typing" | "disabled" | false;
}> & Readonly<{
"onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
}>, {
focus: () => void;
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
"update:modelValue": (value: string | null | undefined) => any;
}, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
input: import('vue').ShallowUnwrapRef<{}> | null;
}, any, import('vue').ComponentProvideOptions, {
P: {};
B: {};
D: {};
C: {};
M: {};
Defaults: {};
}, Readonly<{
modelValue?: string | undefined | null;
} & Omit<import('./MazInput.vue').MazInputProps<import('./MazInput.vue').MazInputValue>, "modelValue"> & {
id: string;
locales: {
placeholder: string;
example: string | undefined;
};
example: boolean;
hasRadius: boolean;
autoFormat: "blur" | "typing" | "disabled" | false;
}> & Readonly<{
"onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
}>, {
focus: () => void;
}, {}, {}, {}, {}> | null;
}, any>;
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
export default _default;
type __VLS_WithTemplateSlots<T, S> = T & {
new (): {
$slots: S;
};
};