maz-ui 4.1.8-beta.1 → 4.1.8-beta.2

package/dist/components/MazInputPhoneNumber.vue.d.ts

@@ -0,0 +1,421 @@
+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;
+    };
+};

package/dist/components/MazInputPrice.vue.d.ts

@@ -0,0 +1,48 @@
+import { FilterCurrencyOptions } from '@maz-ui/utils/helpers/formatCurrency';
+export interface MazInputPriceProps {
+    /** @model The value of the input */
+    modelValue?: number;
+    /** The currency to use */
+    currency?: string;
+    /** The locale to use */
+    locale?: string;
+    /** The minimum value that the input can accept */
+    min?: number;
+    /** The maximum value that the input can accept */
+    max?: number;
+    /** The input will be displayed without icon */
+    noIcon?: boolean;
+    /** The input will be displayed in full width */
+    block?: boolean;
+    /** Will display the input in error state. */
+    error?: boolean;
+    /** The hint text to display below the input. */
+    hint?: string;
+    /** Will display the input in success state. */
+    success?: boolean;
+    /** Will display the input in warning state. */
+    warning?: boolean;
+    /** Options for the currency helper - [see](https://maz-ui.com/helpers/currency) */
+    currencyOptions?: Omit<FilterCurrencyOptions, 'currency'>;
+}
+declare const _default: import('vue').DefineComponent<MazInputPriceProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    blur: (value: Event) => any;
+    focus: (value: Event) => any;
+    input: (value: number | undefined) => any;
+    "update:model-value": (value: number | undefined) => any;
+    formatted: (value: string | undefined) => any;
+}, string, import('vue').PublicProps, Readonly<MazInputPriceProps> & Readonly<{
+    onBlur?: ((value: Event) => any) | undefined;
+    onFocus?: ((value: Event) => any) | undefined;
+    onInput?: ((value: number | undefined) => any) | undefined;
+    "onUpdate:model-value"?: ((value: number | undefined) => any) | undefined;
+    onFormatted?: ((value: string | undefined) => any) | undefined;
+}>, {
+    max: number;
+    min: number;
+    currency: string;
+    locale: string;
+    modelValue: number;
+    noIcon: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/MazInputTags.vue.d.ts

@@ -0,0 +1,51 @@
+import { HTMLAttributes } from 'vue';
+import { MazColor, MazSize } from './types';
+export interface MazInputTagsProps {
+    /** Style attribut of the component root element */
+    style?: HTMLAttributes['style'];
+    /** Class attribut of the component root element */
+    class?: HTMLAttributes['class'];
+    /** @model The modelValue of the input */
+    modelValue?: (string | number)[];
+    /** The placeholder of the input */
+    placeholder?: string;
+    /** The label of the input */
+    label?: string;
+    /** Disable the input */
+    disabled?: boolean;
+    /** Display the input with error style */
+    error?: boolean;
+    /** Display the input with success style */
+    success?: boolean;
+    /** Display the input with warning style */
+    warning?: boolean;
+    /** The size of the input */
+    size?: MazSize;
+    /** The color of the input */
+    color?: MazColor;
+    /** The input will be displayed in full width */
+    block?: boolean;
+    /** Add tags on blur */
+    addTagsOnBlur?: boolean;
+    /** The hint text to display below the input. */
+    hint?: string;
+}
+declare const _default: import('vue').DefineComponent<MazInputTagsProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:model-value": (value?: (string | number)[] | undefined) => any;
+}, string, import('vue').PublicProps, Readonly<MazInputTagsProps> & Readonly<{
+    "onUpdate:model-value"?: ((value?: (string | number)[] | undefined) => any) | undefined;
+}>, {
+    error: boolean;
+    size: MazSize;
+    label: string;
+    style: string | false | import('vue').CSSProperties | import('vue').StyleValue[] | null;
+    class: HTMLAttributes["class"];
+    success: boolean;
+    warning: boolean;
+    color: MazColor;
+    disabled: boolean;
+    placeholder: string;
+    modelValue: (string | number)[];
+    addTagsOnBlur: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/MazLazyImg.vue.d.ts

@@ -0,0 +1,78 @@
+import { HTMLAttributes } from 'vue';
+import { VLazyImgOptions } from '../directives/vLazyImg';
+interface Source {
+    srcset?: string;
+    media?: string;
+}
+interface DataImage {
+    sources?: Source[];
+}
+export type MazImage = DataImage | string;
+export interface MazLazyImgProps {
+    /** The style of the component */
+    style?: HTMLAttributes['style'];
+    /** The class of the component */
+    class?: HTMLAttributes['class'];
+    /**
+     * The source of the image
+     * @type {string | Image | null}
+     */
+    src?: MazImage | null;
+    /** The alt of the image */
+    alt?: string;
+    /** Remove the loader */
+    hideLoader?: boolean;
+    /** Remove the observer once the image is loaded */
+    observerOnce?: boolean;
+    /** Remove the observer once the image is loaded */
+    loadOnce?: boolean;
+    /** Make the image height full */
+    imageHeightFull?: boolean;
+    /** The options of the observer */
+    observerOptions?: VLazyImgOptions['observerOptions'];
+    /** The fallback src to replace the src on loading error */
+    fallbackSrc?: string;
+    /** The classes of the image element */
+    imgClass?: HTMLAttributes['class'];
+    /** The image will be displayed in full width */
+    block?: boolean;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<MazLazyImgProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    error: (el: Element) => any;
+    loaded: (el: Element) => any;
+    loading: (el: Element) => any;
+    intersecting: (el: Element) => any;
+}, string, import('vue').PublicProps, Readonly<MazLazyImgProps> & Readonly<{
+    onError?: ((el: Element) => any) | undefined;
+    onLoaded?: ((el: Element) => any) | undefined;
+    onLoading?: ((el: Element) => any) | undefined;
+    onIntersecting?: ((el: Element) => any) | undefined;
+}>, {
+    src: MazImage | null;
+    style: string | false | import('vue').CSSProperties | import('vue').StyleValue[] | null;
+    class: HTMLAttributes["class"];
+    alt: string;
+    observerOnce: boolean;
+    observerOptions: {
+        root?: HTMLElement | null;
+        threshold: number;
+        rootMargin?: string;
+    };
+    fallbackSrc: string;
+}, {}, {}, {}, 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;
+    };
+};