maz-ui 4.0.0-alpha.5 → 4.0.0-beta.0

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

@@ -1,62 +1,158 @@
+import { MazTranslationsNestedSchema } from '@maz-ui/translations/src/types.js';
 import { CountryCode } from 'libphonenumber-js';
-import { MazInputPhoneNumberTranslations, Results } from './MazInputPhoneNumber/types';
-import { Color, Position, Size } from './types';
 import { HTMLAttributes } from 'vue';
+import { Results } from './MazInputPhoneNumber/types';
+import { MazPopoverProps } from './MazPopover.vue';
+import { MazColor, MazSize } from './types';
 export interface MazInputPhoneNumberProps {
-    /** Style attribut of the component root element */
+    /**
+     * Style attribut of the component root element
+     * @type {HTMLAttributes['style']}
+     */
     style?: HTMLAttributes['style'];
-    /** Class attribut of the component root element */
+    /**
+     * Class attribut of the component root element
+     * @type {HTMLAttributes['class']}
+     */
     class?: HTMLAttributes['class'];
-    /** @model Country calling code + telephone number in international format */
+    /**
+     * The current value of the input field in international format (e.g. +33612345678)
+     * @model
+     * @type {string | undefined | null}
+     * @example "+33612345678"
+     */
     modelValue?: string | undefined | null;
-    /** @deprecated */
-    defaultPhoneNumber?: string | undefined | null;
-    /** @model Country code selected - Ex: "FR" */
+    /**
+     * The selected country code (e.g. "FR")
+     * @model
+     * @type {CountryCode | undefined | null}
+     * @example "FR"
+     */
     countryCode?: CountryCode | undefined | null;
-    /** @deprecated - use country-code or v-model:country-code */
-    defaultCountryCode?: CountryCode | undefined | null;
-    /** Id of the component */
+    /**
+     * Unique identifier for the component
+     * @type {string}
+     * @example "phone-input-1"
+     */
     id?: string;
-    /** Placeholder of the input */
+    /**
+     * Text displayed when the input is empty
+     * @type {string}
+     * @example "Enter your phone number"
+     */
     placeholder?: string;
-    /** label of the input */
+    /**
+     * Label displayed above the input
+     * @type {string}
+     * @example "Phone Number"
+     */
     label?: string;
-    /** List of country codes to place first in the select list - Ex: ['FR', 'BE', 'GE'] */
+    /**
+     * 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 - Ex: ['FR', 'BE', 'GE'] */
+    /**
+     * 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 - Ex: ['FR', 'BE', 'GE'] */
+    /**
+     * 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 */
-    translations?: Partial<MazInputPhoneNumberTranslations>;
-    /** 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 */
+    /**
+     * Locale strings of the component
+     * The default values are the translations of the MazTranslations plugin
+     * @type {Partial<MazTranslationsNestedSchema['inputPhoneNumber']>}
+     * @default {
+     *   countrySelect: {
+     *     error: 'Choose country',
+     *     placeholder: 'Country code',
+     *     searchPlaceholder: 'Search the country',
+     *   },
+     *   phoneInput: {
+     *     placeholder: 'Phone number',
+     *     example: 'Example: {example}',
+     *   },
+     * }
+     */
+    translations?: Partial<MazTranslationsNestedSchema['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;
-    /** No show the phone number example */
-    noExample?: boolean;
-    /** Disable search input in country list */
-    noSearch?: 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;
-    /** 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 */
+    /**
+     * 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;
-    /** No show the country selector */
-    noCountrySelector?: boolean;
-    /** Show country calling code in the country list */
-    showCodeOnList?: boolean;
-    /** Replace country names */
+    /**
+     * 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
@@ -64,57 +160,69 @@ export interface MazInputPhoneNumberProps {
      */
     autoFormat?: boolean;
     /**
-     * Disabled auto-format as you type
-     * @default false
-     * @deprecated use autoFormat instead
+     * Locale of country list
+     * @type {string}
+     * @example "fr-FR"
+     */
+    countryLocale?: string;
+    /**
+     * Disable validation error UI
+     * @default true
      */
-    noFormattingAsYouType?: boolean;
+    validationError?: boolean;
     /**
-     * locale of country list - Ex: "fr-FR"
-     * @default {string} browser locale
+     * Disable validation success UI
+     * @default true
+     */
+    validationSuccess?: boolean;
+    /**
+     * Add success UI
+     * @default false
      */
-    countryLocale?: string;
-    /** Disable validation error UI */
-    noValidationError?: boolean;
-    /** Disable validation success UI */
-    noValidationSuccess?: boolean;
-    /** Add success UI */
     success?: boolean;
-    /** Add error UI */
+    /**
+     * Add error UI
+     * @default false
+     */
     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 */
+    /**
+     * 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;
-    /** Exclude selectors to close country selector list - usefull when you using custom flag */
-    excludeSelectors?: string[];
     /**
      * Orientation of the inputs in the component
+     * @type {'row' | 'col' | 'responsive'}
+     * @values row, col, responsive
      * @default "responsive"
-     * @values "row" | "col" | "responsive"
      */
     orientation?: 'row' | 'col' | 'responsive';
     /**
      * Meta attributes of the country input
-     * @default `{Record<string, unknown>}` `{ autocomplete: 'off', name: 'country' }`
+     * @type {Record<string, unknown>}
+     * @default { 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' }`
+     * @type {Record<string, unknown>}
+     * @default { 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 selectedCountry: import('vue').Ref<CountryCode | undefined, CountryCode | undefined>;
 declare const results: import('vue').Ref<{
     isValid: boolean;
     isPossible?: boolean | undefined;
-    countryCode?: CountryCode | undefined | null;
-    parsedCountryCode?: CountryCode | undefined | null;
+    countryCode?: CountryCode | null | undefined;
+    parsedCountryCode?: CountryCode | null | undefined;
     countryCallingCode?: import('libphonenumber-js').CountryCallingCode | undefined;
     nationalNumber?: import('libphonenumber-js').NationalNumber | undefined;
     type?: import('libphonenumber-js').NumberType;
@@ -124,12 +232,12 @@ declare const results: import('vue').Ref<{
     e164?: string | undefined;
     rfc3966?: string | undefined;
     possibleCountries?: CountryCode[] | undefined;
-    phoneNumber?: string | undefined | null;
+    phoneNumber?: string | undefined | null | undefined;
 }, Results | {
     isValid: boolean;
     isPossible?: boolean | undefined;
-    countryCode?: CountryCode | undefined | null;
-    parsedCountryCode?: CountryCode | undefined | null;
+    countryCode?: CountryCode | null | undefined;
+    parsedCountryCode?: CountryCode | null | undefined;
     countryCallingCode?: import('libphonenumber-js').CountryCallingCode | undefined;
     nationalNumber?: import('libphonenumber-js').NationalNumber | undefined;
     type?: import('libphonenumber-js').NumberType;
@@ -139,7 +247,7 @@ declare const results: import('vue').Ref<{
     e164?: string | undefined;
     rfc3966?: string | undefined;
     possibleCountries?: CountryCode[] | undefined;
-    phoneNumber?: string | undefined | null;
+    phoneNumber?: string | undefined | null | undefined;
 }>;
 /** Inject */
 export interface MazInputPhoneNumberInjectedData {
@@ -148,31 +256,39 @@ export interface MazInputPhoneNumberInjectedData {
     results: typeof results;
 }
 declare function __VLS_template(): {
+    attrs: Partial<{}>;
     slots: {
-        "no-results"?(_: {}): any;
-        "selector-flag"?(_: {
-            countryCode: CountryCode;
+        'no-results'?(_: {}): any;
+        'selector-flag'?(_: {
+            countryCode: CountryCode | undefined;
         }): any;
-        "country-list-flag"?(_: {
-            countryCode: import('./types').ModelValueSimple;
-            option: import('./MazSelect.vue').NormalizedOption;
+        'country-list-flag'?(_: {
+            countryCode: CountryCode;
+            option: import('./MazInputPhoneNumber/types').Country;
             isSelected: boolean;
         }): any;
     };
     refs: {
         PhoneInputRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
             modelValue?: string | undefined | null;
-        } & Omit<import('./MazInput.vue').MazInputProps<import('./types').ModelValueSimple>, "modelValue"> & {
+        } & Omit<import('./MazInput.vue').MazInputProps<import('./MazInput.vue').MazInputValue>, "modelValue"> & {
             id: string;
-            locales: MazInputPhoneNumberTranslations;
-            noExample: boolean;
+            locales: {
+                placeholder: string;
+                example: string | undefined;
+            };
+            example: boolean;
             hasRadius: boolean;
             autoFormat: boolean;
         }> & Readonly<{
-            "onUpdate:modelValue"?: ((modelValue: string | null | undefined) => any) | undefined;
-        }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-            "update:modelValue": (modelValue: string | null | undefined) => any;
-        }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+            "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: {};
@@ -181,60 +297,99 @@ declare function __VLS_template(): {
             Defaults: {};
         }, Readonly<{
             modelValue?: string | undefined | null;
-        } & Omit<import('./MazInput.vue').MazInputProps<import('./types').ModelValueSimple>, "modelValue"> & {
+        } & Omit<import('./MazInput.vue').MazInputProps<import('./MazInput.vue').MazInputValue>, "modelValue"> & {
             id: string;
-            locales: MazInputPhoneNumberTranslations;
-            noExample: boolean;
+            locales: {
+                placeholder: string;
+                example: string | undefined;
+            };
+            example: boolean;
             hasRadius: boolean;
             autoFormat: boolean;
         }> & Readonly<{
-            "onUpdate:modelValue"?: ((modelValue: string | null | undefined) => any) | undefined;
-        }>, {}, {}, {}, {}, {}> | null;
+            "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
+        }>, {
+            focus: () => void;
+        }, {}, {}, {}, {}> | null;
     };
-    attrs: Partial<{}>;
+    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: 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<MazInputPhoneNumberProps> & 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;
 }>, {
-    size: Size;
-    label: string;
-    style: string | false | import('vue').CSSProperties | import('vue').StyleValue[] | null;
-    class: HTMLAttributes["class"];
-    color: Color;
-    id: string;
-    modelValue: string | null;
+    size: MazSize;
+    search: boolean;
+    color: MazColor;
+    disabled: boolean;
     orientation: "row" | "col" | "responsive";
-    placeholder: string;
-    countryCode: CountryCode | null;
-    listPosition: Position;
+    example: boolean;
+    useBrowserLocale: boolean;
+    listPosition: import('./MazPopover.vue').PopoverPosition;
     searchThreshold: number;
-    excludeSelectors: string[];
-    preferredCountries: CountryCode[];
-    ignoredCountries: CountryCode[];
-    onlyCountries: CountryCode[];
+    hideFlags: boolean;
+    showCodeInList: boolean;
+    autoFormat: boolean;
+    hideCountrySelect: boolean;
     customCountriesList: Record<CountryCode, string>;
     countryLocale: string;
-    noExample: boolean;
-    autoFormat: boolean;
-    defaultPhoneNumber: string | null;
-    defaultCountryCode: CountryCode | null;
-    translations: Partial<MazInputPhoneNumberTranslations>;
-    noFormattingAsYouType: boolean;
-    countrySelectorWidth: string;
+    validationError: boolean;
+    validationSuccess: boolean;
+    displayCountryName: boolean;
     countrySelectAttributes: Record<string, unknown>;
     phoneInputAttributes: Record<string, unknown>;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, 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: boolean;
+    }> & 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: boolean;
+    }> & 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 & {

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

@@ -1,4 +1,4 @@
-import { FilterCurrencyOptions } from '../filters/currency';
+import { FilterCurrencyOptions } from '@maz-ui/utils/src/formatters/formatCurrency.js';
 export interface MazInputPriceProps {
     /** @model The value of the input */
     modelValue?: number;
@@ -22,18 +22,10 @@ export interface MazInputPriceProps {
     success?: boolean;
     /** Will display the input in warning state. */
     warning?: boolean;
-    /** Options for the currency helper - [see](https://maz-ui.com/helpers/currency) */
+    /** Options for the currency helper - [see](https://maz-ui.com/utils/currency) */
     currencyOptions?: Omit<FilterCurrencyOptions, 'currency'>;
 }
-declare function __VLS_template(): {
-    slots: {
-        "left-icon"?(_: {}): any;
-    };
-    refs: {};
-    attrs: Partial<{}>;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<MazInputPriceProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+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;
@@ -49,14 +41,8 @@ declare const __VLS_component: import('vue').DefineComponent<MazInputPriceProps,
     currency: string;
     locale: string;
     modelValue: number;
-    max: number;
     min: number;
+    max: number;
     noIcon: boolean;
 }, {}, {}, {}, 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;
-    };
-};

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

@@ -1,5 +1,5 @@
-import { Color, Size } from './types';
 import { HTMLAttributes } from 'vue';
+import { MazColor, MazSize } from './types';
 export interface MazInputTagsProps {
     /** Style attribut of the component root element */
     style?: HTMLAttributes['style'];
@@ -20,9 +20,9 @@ export interface MazInputTagsProps {
     /** Display the input with warning style */
     warning?: boolean;
     /** The size of the input */
-    size?: Size;
+    size?: MazSize;
     /** The color of the input */
-    color?: Color;
+    color?: MazColor;
     /** The input will be displayed in full width */
     block?: boolean;
     /** Add tags on blur */
@@ -36,13 +36,13 @@ declare const _default: import('vue').DefineComponent<MazInputTagsProps, {}, {},
     "onUpdate:model-value"?: ((value?: (string | number)[] | undefined) => any) | undefined;
 }>, {
     error: boolean;
-    size: Size;
-    label: string;
-    style: string | false | import('vue').CSSProperties | import('vue').StyleValue[] | null;
     success: boolean;
     warning: boolean;
+    size: MazSize;
+    label: string;
+    style: string | false | import('vue').CSSProperties | import('vue').StyleValue[] | null;
     class: HTMLAttributes["class"];
-    color: Color;
+    color: MazColor;
     disabled: boolean;
     modelValue: (string | number)[];
     placeholder: string;

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

@@ -1,13 +1,18 @@
-import { vLazyImgOptions } from '../directives/vLazyImg';
-import { MazImage } from './types';
 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'];
-    /** @deprecated Use `src` instead */
-    image?: MazImage | null;
     /**
      * The source of the image
      * @type {string | Image | null}
@@ -15,18 +20,16 @@ export interface MazLazyImgProps {
     src?: MazImage | null;
     /** The alt of the image */
     alt?: string;
-    /** Display the fallback image */
-    noPhoto?: boolean;
     /** Remove the loader */
-    noLoader?: boolean;
+    hideLoader?: boolean;
     /** Remove the observer once the image is loaded */
-    noObserverOnce?: boolean;
+    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'];
+    observerOptions?: VLazyImgOptions['observerOptions'];
     /** The fallback src to replace the src on loading error */
     fallbackSrc?: string;
     /** The classes of the image element */
@@ -35,29 +38,30 @@ export interface MazLazyImgProps {
     block?: boolean;
 }
 declare function __VLS_template(): {
+    attrs: Partial<{}>;
     slots: {
         default?(_: {}): any;
     };
     refs: {};
-    attrs: Partial<{}>;
+    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;
+    error: (el: HTMLElement) => any;
+    loaded: (el: HTMLElement) => any;
+    loading: (el: HTMLElement) => any;
+    intersecting: (el: HTMLElement) => 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;
+    onError?: ((el: HTMLElement) => any) | undefined;
+    onLoaded?: ((el: HTMLElement) => any) | undefined;
+    onLoading?: ((el: HTMLElement) => any) | undefined;
+    onIntersecting?: ((el: HTMLElement) => any) | undefined;
 }>, {
-    style: string | false | import('vue').CSSProperties | import('vue').StyleValue[] | null;
     src: MazImage | null;
-    image: 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;