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

package/dist/composables/useFormValidator.d.ts

@@ -0,0 +1,23 @@
+import { DeepPartial } from '@maz-ui/utils/ts-helpers/DeepPartial';
+import { MaybeRefOrGetter, Ref } from 'vue';
+import { BaseFormPayload, ExtractModelKey, FieldsStates, FormSchema, FormValidatorOptions, InferOutputSchemaFormValidator, InferSchemaFormValidator } from './useFormValidator/types';
+import { scrollToError } from './useFormValidator/dom-events';
+export declare function useFormValidator<TSchema extends MaybeRefOrGetter<FormSchema<BaseFormPayload>>>({ schema, defaultValues, model, options }: {
+    schema: TSchema;
+    defaultValues?: MaybeRefOrGetter<DeepPartial<InferSchemaFormValidator<TSchema>> | undefined | null>;
+    model?: Ref<DeepPartial<InferSchemaFormValidator<TSchema>> | undefined | null>;
+    options?: FormValidatorOptions<InferSchemaFormValidator<TSchema>>;
+}): {
+    identifier: string | symbol;
+    isDirty: import('vue').ComputedRef<boolean>;
+    isSubmitting: Ref<boolean, boolean>;
+    isSubmitted: Ref<boolean, boolean>;
+    isValid: import('vue').ComputedRef<boolean>;
+    errors: import('vue').ComputedRef<Record<ExtractModelKey<FormSchema<InferSchemaFormValidator<TSchema>>>, import('./useFormValidator/types').ValidationIssues>>;
+    model: Ref<InferSchemaFormValidator<TSchema>, InferSchemaFormValidator<TSchema>>;
+    fieldsStates: Ref<FieldsStates<InferSchemaFormValidator<TSchema>, ExtractModelKey<FormSchema<InferSchemaFormValidator<TSchema>>>>, FieldsStates<InferSchemaFormValidator<TSchema>, ExtractModelKey<FormSchema<InferSchemaFormValidator<TSchema>>>>>;
+    validateForm: (setErrors?: boolean) => Promise<void[]>;
+    scrollToError: typeof scrollToError;
+    handleSubmit: <Func extends (model: InferOutputSchemaFormValidator<TSchema>) => Promise<Awaited<ReturnType<Func>>> | ReturnType<Func>>(successCallback: Func, enableScrollOrSelector?: FormValidatorOptions["scrollToError"]) => (event?: Event) => Promise<ReturnType<Func> | undefined>;
+    errorMessages: import('vue').ComputedRef<Record<ExtractModelKey<FormSchema<InferSchemaFormValidator<TSchema>>>, string | undefined>>;
+};

package/dist/composables/useFreezeValue.d.ts

@@ -0,0 +1,5 @@
+import { MaybeRef } from 'vue';
+/**
+ * Freeze a value to prevent it from being modified
+ */
+export declare function useFreezeValue<T>(value: MaybeRef<T>): Readonly<T>;

package/dist/composables/useIdleTimeout.d.ts

@@ -0,0 +1,5 @@
+import { IdleTimeoutCallback, IdleTimeoutOptions, IdleTimeout } from '@maz-ui/utils/helpers/idleTimeout';
+export declare function useIdleTimeout({ callback, options, }: {
+    callback: IdleTimeoutCallback;
+    options?: IdleTimeoutOptions;
+}): IdleTimeout;

package/dist/composables/useInjectStrict.d.ts

@@ -0,0 +1,2 @@
+import { InjectionKey } from 'vue';
+export declare function useInjectStrict<T>(key: string | InjectionKey<T> | symbol, fallback?: T, errorMessage?: string): NonNullable<T>;

package/dist/composables/useInstanceUniqId.d.ts

@@ -0,0 +1,4 @@
+export declare function useInstanceUniqId({ componentName, providedId, }: {
+    componentName: string;
+    providedId?: string;
+}): import('vue').ComputedRef<string>;

package/dist/composables/useMountComponent.d.ts

@@ -0,0 +1,14 @@
+import { App, Component, VNodeProps, createVNode } from 'vue';
+export declare function useMountComponent<T extends Component | string, P = Record<string, unknown>>(component: T | string, options?: {
+    props?: P & VNodeProps;
+    children?: Parameters<typeof createVNode>[2];
+    app?: App;
+    element?: HTMLElement;
+    noRender?: boolean;
+}): {
+    vNode: import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+        [key: string]: any;
+    }>;
+    destroy: () => void;
+    el: HTMLElement;
+};

package/dist/composables/useMutationObserver.d.ts

@@ -0,0 +1,13 @@
+import { ComponentPublicInstance, MaybeRefOrGetter } from 'vue';
+export interface UseMutationObserverOptions extends MutationObserverInit {
+    internalWindow?: Window | undefined;
+}
+/**
+ * Watch for changes into DOM element.
+ */
+export declare function useMutationObserver(target: MaybeRefOrGetter<HTMLElement | SVGElement | ComponentPublicInstance | undefined | null>, callback: MutationCallback, options?: UseMutationObserverOptions): {
+    isSupported: import('vue').Ref<boolean, boolean>;
+    stop: () => void;
+    takeRecords: () => MutationRecord[] | undefined;
+};
+export type UseMutationObserverReturn = ReturnType<typeof useMutationObserver>;

package/dist/composables/useReadingTime.d.ts

@@ -0,0 +1,25 @@
+import { ComputedRef, Ref } from 'vue';
+export interface ReadingTimeOptions {
+    /** Content to calculate the reading time */
+    content?: string | Ref<string>;
+    /** Selector of the content to calculate the reading time */
+    contentSelector?: string | Ref<string>;
+    /** Ref of the content to calculate the reading time */
+    contentRef?: Ref<HTMLElement | undefined>;
+    /**
+     * Words per minute
+     * @default 150
+     */
+    velocity?: number | Ref<number>;
+}
+export interface ReadingTimeReturn {
+    /** Content to calculate the reading time */
+    content: ComputedRef<string | undefined | null>;
+    /** Number of words in the content */
+    wordCount: ComputedRef<number>;
+    /** Words per minute */
+    velocity: ComputedRef<number>;
+    /** Reading time in minutes */
+    duration: ComputedRef<number>;
+}
+export declare function useReadingTime(options: ReadingTimeOptions): ReadingTimeReturn;

package/dist/composables/useStringMatching.d.ts

@@ -0,0 +1,5 @@
+import { MaybeRefOrGetter } from 'vue';
+export declare function useStringMatching(string1: MaybeRefOrGetter<string>, string2: MaybeRefOrGetter<string>, threshold?: MaybeRefOrGetter<number>): {
+    isMatching: import('vue').ComputedRef<boolean>;
+    score: import('vue').ComputedRef<number>;
+};

package/dist/composables/useSwipe.d.ts

@@ -0,0 +1,14 @@
+import { SwipeOptions } from '@maz-ui/utils/helpers/swipeHandler';
+import { MaybeRef } from 'vue';
+export declare function useSwipe(options: Omit<SwipeOptions, 'onValuesChanged' | 'element'> & {
+    element: MaybeRef<HTMLElement> | string | null | undefined;
+}): {
+    xDiff: import('vue').Ref<number | undefined, number | undefined>;
+    yDiff: import('vue').Ref<number | undefined, number | undefined>;
+    xStart: import('vue').Ref<number | undefined, number | undefined>;
+    xEnd: import('vue').Ref<number | undefined, number | undefined>;
+    yStart: import('vue').Ref<number | undefined, number | undefined>;
+    yEnd: import('vue').Ref<number | undefined, number | undefined>;
+    start: () => void;
+    stop: () => void;
+};

package/dist/composables/useTimer.d.ts

@@ -0,0 +1,30 @@
+export interface TimerOptions {
+    /**
+     * The time in milliseconds
+     * @default 1000
+     */
+    timeout?: number;
+    /**
+     * The callback to execute when the timer is finished
+     * @default undefined
+     */
+    callback?: () => unknown;
+    /**
+     * The interval to update the remaining time
+     * @default 200
+     */
+    remainingTimeUpdate?: number;
+    /**
+     * The offset time to execute the callback
+     * @default 0
+     */
+    callbackOffsetTime?: number;
+}
+export declare function useTimer({ timeout, callback, remainingTimeUpdate, callbackOffsetTime }: TimerOptions): {
+    remainingTime: import('vue').Ref<number, number>;
+    start: (timeout?: number) => void;
+    pause: () => void;
+    resume: () => void;
+    stop: () => void;
+    reset: () => void;
+};

package/dist/composables/useToast.d.ts

@@ -0,0 +1,22 @@
+export declare function useToast(): {
+    message: (message: string, options?: import('../plugins').ToastOptions) => {
+        destroy: () => void;
+        close: () => any;
+    };
+    success: (message: string, options?: Omit<import('../plugins').ToastOptions, "type">) => {
+        destroy: () => void;
+        close: () => any;
+    };
+    error: (message: string, options?: Omit<import('../plugins').ToastOptions, "type">) => {
+        destroy: () => void;
+        close: () => any;
+    };
+    info: (message: string, options?: Omit<import('../plugins').ToastOptions, "type">) => {
+        destroy: () => void;
+        close: () => any;
+    };
+    warning: (message: string, options?: Omit<import('../plugins').ToastOptions, "type">) => {
+        destroy: () => void;
+        close: () => any;
+    };
+};

package/dist/composables/useUserVisibility.d.ts

@@ -0,0 +1,5 @@
+import { UserVisibilyCallback, UserVisibilyOptions, UserVisibility } from '@maz-ui/utils/helpers/userVisibility';
+export declare function useUserVisibility({ callback, options, }: {
+    callback: UserVisibilyCallback;
+    options?: UserVisibilyOptions;
+}): UserVisibility;

package/dist/composables/useWait.d.ts

@@ -0,0 +1,2 @@
+import { WaitHandler } from '../plugins/wait';
+export declare function useWait(): WaitHandler;

package/dist/composables/useWindowSize.d.ts

@@ -0,0 +1,32 @@
+export interface UseWindowSizeOptions {
+    /**
+     * The window object to use
+     * @default window - in browser, undefined in SSR
+     */
+    internalWindow?: Window | undefined;
+    /**
+     * Initial width of the window (useful in SSR)
+     * @default Number.POSITIVE_INFINITY
+     */
+    initialWidth?: number;
+    /**
+     * Initial height of the window (useful in SSR)
+     * @default Number.POSITIVE_INFINITY
+     */
+    initialHeight?: number;
+    /**
+     * Listen to window `orientationchange` event
+     *
+     * @default true
+     */
+    listenOrientation?: boolean;
+    /**
+     * Whether the scrollbar should be included in the width and height
+     * @default true
+     */
+    includeScrollbar?: boolean;
+}
+export declare function useWindowSize(options?: UseWindowSizeOptions): {
+    width: import('vue').Ref<number, number>;
+    height: import('vue').Ref<number, number>;
+};

package/dist/directives/index.d.ts

@@ -0,0 +1,5 @@
+export * from './vClickOutside';
+export * from './vFullscreenImg';
+export * from './vLazyImg';
+export * from './vTooltip';
+export * from './vZoomImg';

package/dist/directives/vClickOutside.d.ts

@@ -0,0 +1,36 @@
+import { ObjectDirective, Plugin } from 'vue';
+interface VClickOutsideOptions {
+    /**
+     * The callback function to be called when the element is clicked outside.
+     */
+    callback: (...args: any[]) => any;
+    /**
+     * The selectors to ignore.
+     */
+    ignore?: string[];
+    /**
+     * Whether to capture the event.
+     */
+    capture?: boolean;
+    /**
+     * Whether to only trigger the callback once.
+     */
+    once?: boolean;
+    /**
+     * Whether to stop event propagation.
+     */
+    stopPropagation?: boolean;
+}
+/**
+ * The value of the v-click-outside directive.
+ */
+type VClickOutsideBindingValue = ((...args: any[]) => any) | VClickOutsideOptions;
+export type VClickOutsideDirective = ObjectDirective<HTMLElement, VClickOutsideBindingValue>;
+declare const directive: VClickOutsideDirective;
+declare const plugin: Plugin;
+export { directive as vClickOutside, type VClickOutsideBindingValue, plugin as vClickOutsideInstall, type VClickOutsideOptions, };
+declare module 'vue' {
+    interface GlobalDirectives {
+        vClickOutside: VClickOutsideDirective;
+    }
+}

package/dist/directives/vFullscreenImg/MazFullscreenImg.vue.d.ts

@@ -0,0 +1,50 @@
+export interface MazFullscreenImgProps {
+    src: string;
+    clickedElementBounds?: {
+        top: number;
+        left: number;
+        height: number;
+        width: number;
+    };
+    offset?: number;
+    animation?: {
+        duration?: number;
+        easing?: string;
+    };
+    openInstanceClass?: string;
+    clickedElement: HTMLElement;
+    destroy?: () => void;
+    alt?: string | null;
+    zoom?: boolean;
+}
+declare const _default: import('vue').DefineComponent<MazFullscreenImgProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+    "before-close": (...args: any[]) => void;
+    next: (...args: any[]) => void;
+    previous: (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<MazFullscreenImgProps> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+    "onBefore-close"?: ((...args: any[]) => any) | undefined;
+    onNext?: ((...args: any[]) => any) | undefined;
+    onPrevious?: ((...args: any[]) => any) | undefined;
+}>, {
+    destroy: () => void;
+    offset: number;
+    animation: {
+        duration?: number;
+        easing?: string;
+    };
+    alt: string | null;
+    clickedElementBounds: {
+        top: number;
+        left: number;
+        height: number;
+        width: number;
+    };
+    openInstanceClass: string;
+    zoom: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    FullscreenImgElement: HTMLDivElement;
+    ImgElement: HTMLImageElement;
+}, HTMLDivElement>;
+export default _default;

package/dist/directives/vFullscreenImg/fullscreen-img.directive.d.ts

@@ -0,0 +1,5 @@
+import { ObjectDirective } from 'vue';
+import { VFullscreenImgBindingValue } from './fullscreen-img.handler';
+export type VFullscreenImgDirective = ObjectDirective<HTMLElement, VFullscreenImgBindingValue>;
+declare const directive: VFullscreenImgDirective;
+export { directive as vFullscreenImg };

package/dist/directives/vFullscreenImg/fullscreen-img.handler.d.ts

@@ -0,0 +1,36 @@
+import { DirectiveBinding } from 'vue';
+export interface VFullscreenImgOptions {
+    disabled?: boolean;
+    scaleOnHover?: boolean;
+    blurOnHover?: boolean;
+    zoom?: boolean;
+    offset?: number;
+    animation?: {
+        duration?: number;
+        easing?: string;
+    };
+}
+interface VFullscreenImgBindingOptions extends VFullscreenImgOptions {
+    src: string;
+    alt?: string | null;
+}
+export type VFullscreenImgBindingValue = string | VFullscreenImgBindingOptions | undefined;
+export type VFullscreenImgBinding = DirectiveBinding<VFullscreenImgBindingValue>;
+export declare class FullscreenImgHandler {
+    private options;
+    private defaultOptions;
+    private mouseEnterListener;
+    private mouseLeaveListener;
+    private renderPreviewListener;
+    private buildOptions;
+    get allInstances(): HTMLElement[];
+    private getImgSrc;
+    private getImgAlt;
+    create(el: HTMLElement, binding: VFullscreenImgBinding): void;
+    update(el: HTMLElement, binding: VFullscreenImgBinding): void;
+    remove(el: HTMLElement): void;
+    private renderPreview;
+    private mouseLeave;
+    private mouseEnter;
+}
+export {};

package/dist/directives/vFullscreenImg.d.ts

@@ -0,0 +1,11 @@
+import { Plugin } from 'vue';
+import { VFullscreenImgDirective } from './vFullscreenImg/fullscreen-img.directive';
+declare const plugin: Plugin;
+export { plugin as vFullscreenImgInstall };
+export { vFullscreenImg, type VFullscreenImgDirective } from './vFullscreenImg/fullscreen-img.directive';
+export type { VFullscreenImgBindingValue, VFullscreenImgOptions } from './vFullscreenImg/fullscreen-img.handler';
+declare module 'vue' {
+    interface GlobalDirectives {
+        vFullscreenImg: VFullscreenImgDirective;
+    }
+}

package/dist/directives/vLazyImg/lazy-img.directive.d.ts

@@ -0,0 +1,5 @@
+import { ObjectDirective } from 'vue';
+import { VLazyImgBindingValue } from './lazy-img.handler';
+export type VLazyImgDirective = ObjectDirective<HTMLElement, VLazyImgBindingValue>;
+declare const directive: VLazyImgDirective;
+export { directive as vLazyImg };

package/dist/directives/vLazyImg/lazy-img.handler.d.ts

@@ -0,0 +1,38 @@
+import { ClassOptions, VLazyImgBinding, VLazyImgOptions } from './types';
+export * from './types';
+export declare const DEFAULT_OPTIONS: ClassOptions;
+export declare class LazyImg {
+    private observers;
+    private readonly defaultOptions;
+    private options;
+    private onImgLoadedCallback;
+    private onImgErrorCallback;
+    private hasImgLoaded;
+    constructor(opts?: VLazyImgOptions);
+    private loadErrorPhoto;
+    private buildOptions;
+    private removeClass;
+    private addClass;
+    private removeAllStateClasses;
+    private setBaseClass;
+    private imageIsLoading;
+    private imageIsLoaded;
+    private imageHasError;
+    private getSrc;
+    private getImageUrl;
+    private setPictureSourceUrls;
+    private hasBgImgMode;
+    private isPictureElement;
+    private getImgElement;
+    private setDefaultPhoto;
+    private addEventListenerToImg;
+    private loadImage;
+    setImgSrc(el: HTMLElement, src: string): void;
+    private handleIntersectionObserver;
+    private createObserver;
+    private imageHandler;
+    private bindUpdateHandler;
+    add(el: HTMLElement, binding: VLazyImgBinding): Promise<void>;
+    update(el: HTMLElement, binding: VLazyImgBinding): Promise<void>;
+    remove(el: HTMLElement, binding: VLazyImgBinding): void;
+}

package/dist/directives/vLazyImg/types.d.ts

@@ -0,0 +1,29 @@
+import { DirectiveBinding, ObjectDirective } from 'vue';
+export interface ClassOptions {
+    baseClass: string;
+    loadingClass: string;
+    loadedClass: string;
+    errorClass: string;
+    fallbackClass: string;
+    observerOnce: boolean;
+    loadOnce: boolean;
+    observerOptions: {
+        root?: HTMLElement | null;
+        threshold: number;
+        rootMargin?: string;
+    };
+    fallbackSrc?: string | false;
+    onLoading?: (el: Element) => unknown;
+    onLoaded?: (el: Element) => unknown;
+    onError?: (el: Element) => unknown;
+    onIntersecting?: (el: Element) => unknown;
+}
+export type VLazyImgOptions = Partial<ClassOptions>;
+interface VLazyImgBindingOptions extends VLazyImgOptions {
+    src?: string;
+    disabled?: boolean;
+}
+export type VLazyImgBindingValue = string | VLazyImgBindingOptions;
+export type VLazyImgBinding = DirectiveBinding<VLazyImgBindingValue>;
+export type VLazyImgDirective = ObjectDirective<HTMLElement, VLazyImgBinding>;
+export {};

package/dist/directives/vLazyImg.d.ts

@@ -0,0 +1,12 @@
+import { Plugin } from 'vue';
+import { VLazyImgDirective } from './vLazyImg/lazy-img.directive';
+import { VLazyImgOptions } from './vLazyImg/types';
+declare const plugin: Plugin<[VLazyImgOptions?]>;
+export { vLazyImg, type VLazyImgDirective } from './vLazyImg/lazy-img.directive';
+export { plugin as vLazyImgInstall };
+export type { VLazyImgBindingValue, VLazyImgOptions } from './vLazyImg/types';
+declare module 'vue' {
+    interface GlobalDirectives {
+        vLazyImg: VLazyImgDirective;
+    }
+}

package/dist/directives/vTooltip.d.ts

@@ -0,0 +1,54 @@
+import { DirectiveBinding, ObjectDirective, Plugin } from 'vue';
+import { MazPopoverPosition, MazPopoverProps, MazPopoverTrigger } from '../components/MazPopover.vue';
+interface VTooltipOptions extends Partial<Omit<MazPopoverProps, 'modelValue'>> {
+    /**
+     * Text to display in the tooltip
+     */
+    text?: string;
+    /**
+     * HTML content (alternative to text)
+     */
+    html?: string;
+    /**
+     * Color variant of the tooltip
+     * @default contrast
+     */
+    color?: MazPopoverProps['color'];
+    /**
+     * Position of the tooltip
+     * The preferred position is set to 'top' if no position is provided
+     * @default top
+     */
+    position?: MazPopoverPosition;
+    /**
+     * Trigger of the tooltip
+     * @default hover
+     */
+    trigger?: MazPopoverTrigger;
+    /**
+     * Close on click outside
+     * @default false
+     */
+    closeOnClickOutside?: boolean;
+    /**
+     * Close on escape
+     * @default false
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Open the tooltip
+     * @default false
+     */
+    open?: boolean;
+}
+type VTooltipBindingValue = string | VTooltipOptions;
+export type TooltipBinding = DirectiveBinding<VTooltipBindingValue, NonNullable<MazPopoverProps['position']>>;
+export type VTooltipDirective = ObjectDirective<HTMLElement, VTooltipBindingValue, NonNullable<MazPopoverProps['position']>>;
+declare const directive: VTooltipDirective;
+declare const plugin: Plugin<[Partial<VTooltipOptions>?]>;
+export { directive as vTooltip, type VTooltipBindingValue, plugin as vTooltipInstall, type VTooltipOptions, };
+declare module 'vue' {
+    interface GlobalDirectives {
+        vTooltip: VTooltipDirective;
+    }
+}

package/dist/directives/vZoomImg/style.d.ts

@@ -0,0 +1 @@
+export declare const style = "\n.maz-zoom-img {\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  padding: 1rem;\n  z-index: 1050;\n  background-color: hsla(238, 15%, 40%, 0.7);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n}\n\n.maz-zoom-img,\n.maz-zoom-img * {\n  box-sizing: border-box;\n}\n\n.maz-zoom-img .maz-zoom-img__wrapper {\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  min-width: 0;\n  min-height: 0;\n  max-width: 100%;\n  max-height: 100%;\n  transition: all 300ms ease-in-out;\n  opacity: 0;\n  transform: scale(0.5);\n}\n\n.maz-zoom-img.maz-animate .maz-zoom-img__wrapper {\n  opacity: 1;\n  transform: scale(1);\n}\n\n.maz-zoom-img.maz-animate .maz-zoom-img__loader {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: hsla(238, 15%, 40%, 0.7);\n  border-radius: 1rem;\n  z-index: 2;\n  min-width: 60px;\n  min-height: 60px;\n}\n.maz-zoom-img.maz-animate .maz-zoom-img__loader[hidden] {\n  display: none;\n}\n\n@-webkit-keyframes spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n\n@keyframes spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n\n.maz-zoom-img.maz-animate .maz-zoom-img__loader__svg {\n  animation: spin .6s linear infinite;\n}\n\n.maz-zoom-img img {\n  max-width: 100%;\n  max-height: 100%;\n  min-width: 0;\n  border-radius: 1rem;\n}\n\n.maz-zoom-img .maz-zoom-btn {\n  margin: 0 auto;\n  border: none;\n  background-color: hsla(0, 0%, 7%, 0.5);\n  box-shadow: 0 0 0.5rem 0 hsla(0, 0%, 0%, 0.2);\n  height: 2.2rem;\n  min-height: 2.2rem;\n  width: 2.2rem;\n  min-width: 2.2rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 2.2rem;\n  cursor: pointer;\n  flex: 0 0 auto;\n  outline: none;\n}\n\n.maz-zoom-img .maz-zoom-btn svg {\n  fill: white;\n}\n\n.maz-zoom-img .maz-zoom-btn.maz-zoom-btn--close {\n  position: absolute;\n  top: 0.5rem;\n  right: 0.5rem;\n  z-index: 1;\n}\n\n.maz-zoom-img .maz-zoom-btn.maz-zoom-btn--previous {\n  position: absolute;\n  left: 0.5rem;\n  z-index: 1;\n}\n\n.maz-zoom-img .maz-zoom-btn.maz-zoom-btn--next {\n  position: absolute;\n  right: 0.5rem;\n  z-index: 1;\n}\n\n.maz-zoom-img .maz-zoom-btn:hover {\n  background-color: hsl(0, 0%, 0%);\n}";

package/dist/directives/vZoomImg/svgs.d.ts

@@ -0,0 +1,3 @@
+export declare const svgs: {
+    [key: string]: string;
+};

package/dist/directives/vZoomImg/zoom-img.directive.d.ts

@@ -0,0 +1,8 @@
+import { ObjectDirective } from 'vue';
+import { VZoomImgBindingValue } from './zoom-img.handler';
+export type VZoomImgDirective = ObjectDirective<HTMLElement, VZoomImgBindingValue>;
+export declare const vZoomImg: {
+    created(el: HTMLElement, binding: import('vue').DirectiveBinding<VZoomImgBindingValue, string, any>): void;
+    updated(_el: HTMLElement, binding: import('vue').DirectiveBinding<VZoomImgBindingValue, string, any>): void;
+    unmounted(el: HTMLElement): void;
+};

package/dist/directives/vZoomImg/zoom-img.handler.d.ts

@@ -0,0 +1,46 @@
+import { DirectiveBinding } from 'vue';
+export interface VZoomImgOptions {
+    disabled?: boolean;
+    scale?: boolean;
+    blur?: boolean;
+}
+interface VZoomImgBindingOptions extends VZoomImgOptions {
+    src: string;
+    alt?: string;
+}
+export type VZoomImgBindingValue = string | VZoomImgBindingOptions;
+export type VZoomImgBinding = DirectiveBinding<VZoomImgBindingValue>;
+export declare class ZoomImgHandler {
+    private options;
+    private loader;
+    private wrapper;
+    private img;
+    private keydownHandler;
+    private onImgLoadedCallback;
+    private buttonsAdded;
+    private defaultOptions;
+    private mouseEnterListener;
+    private mouseLeaveListener;
+    private renderPreviewListener;
+    constructor(binding: VZoomImgBinding);
+    private buildOptions;
+    get allInstances(): HTMLElement[];
+    create(el: HTMLElement): void;
+    update(binding: VZoomImgBinding): void;
+    remove(el: HTMLElement): void;
+    private renderPreview;
+    private onImgLoaded;
+    private getLoader;
+    private mouseLeave;
+    private mouseEnter;
+    private keydownLister;
+    private getButton;
+    private closePreview;
+    private getNewInstanceIndex;
+    private nextPreviousImage;
+    private useNextInstance;
+    private addStyle;
+    private keyboardEventHandler;
+    private imgEventHandler;
+}
+export {};

package/dist/directives/vZoomImg.d.ts

@@ -0,0 +1,10 @@
+import { Plugin } from 'vue';
+import { VZoomImgDirective, vZoomImg } from './vZoomImg/zoom-img.directive';
+declare const plugin: Plugin;
+export { vZoomImg, type VZoomImgDirective, plugin as vZoomImgInstall };
+export type { VZoomImgBindingValue } from './vZoomImg/zoom-img.handler';
+declare module 'vue' {
+    interface GlobalDirectives {
+        vZoomImg: VZoomImgDirective;
+    }
+}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from '@maz-ui/utils';