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

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

@@ -0,0 +1,246 @@
+import { IconComponent } from '@maz-ui/icons';
+import { HTMLAttributes } from 'vue';
+import { RouteLocationRaw } from 'vue-router';
+import { MazLinkProps } from './MazLink.vue';
+import { MazPopoverProps } from './MazPopover.vue';
+import { MazColor, MazSize } from './types';
+type __VLS_Props = MazDropdownProps;
+type MazDropdownItemBase = Record<string, unknown> & {
+    label: string;
+    class?: unknown;
+    color?: MazColor;
+};
+type MazDropdownLinkItem = MazDropdownItemBase & MazLinkProps & {
+    target?: string;
+    href?: string;
+    to?: RouteLocationRaw;
+};
+type MazDropdownActionItem = MazDropdownItemBase & {
+    onClick?: () => unknown;
+};
+export type MazDropdownMenuItem = (MazDropdownLinkItem & {
+    action?: never;
+}) | (MazDropdownActionItem & {
+    href?: never;
+    to?: never;
+    target?: never;
+});
+export interface MazDropdownProps extends Omit<MazPopoverProps, 'modelValue' | 'role'> {
+    /**
+     * Controls whether the dropdown menu is open
+     * @model
+     * @type {boolean}
+     * @default false
+     */
+    modelValue?: boolean;
+    /**
+     * Inline styles to apply to the component root element
+     * @type {HTMLAttributes['style']}
+     */
+    style?: HTMLAttributes['style'];
+    /**
+     * CSS classes to apply to the component root element
+     * @type {HTMLAttributes['class']}
+     */
+    class?: HTMLAttributes['class'];
+    /**
+     * Menu items to display in the dropdown
+     * Each item can be either a link (with href/to properties) or an action (with onClick function)
+     * @type {MazDropdownMenuItem[]}
+     * @default []
+     * @example
+     * [
+     *   { label: 'Profile', href: '/profile' },
+     *   { label: 'Settings', onClick: () => console.log('Settings clicked') }
+     * ]
+     */
+    items?: MazDropdownMenuItem[];
+    /**
+     * Unique identifier for the dropdown component
+     * @type {string}
+     */
+    id?: string;
+    /**
+     * Determines how the dropdown should be triggered
+     * @type {MazPopoverProps['trigger']}
+     * @values click, hover, manual, adaptive
+     * @default 'adaptive'
+     */
+    trigger?: MazPopoverProps['trigger'];
+    /**
+     * Color theme for the dropdown button
+     * @type {MazColor}
+     * @values primary, secondary, info, success, warning, destructive, transparent, contrast, accent
+     * @default 'transparent'
+     */
+    color?: MazColor;
+    /**
+     * Position of the menu relative to trigger
+     * @values auto, top, bottom, left, right, top-start, top-end, bottom-start, bottom-end, left-start, left-end, right-start, right-end
+     * @default 'auto'
+     */
+    position?: MazPopoverProps['position'];
+    /**
+     * Controls whether the dropdown menu closes when a menu item is clicked
+     * @type {boolean}
+     * @default true
+     */
+    closeOnClick?: boolean;
+    /**
+     * Disables the dropdown functionality
+     * @type {boolean}
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Controls whether to show the chevron icon in the trigger button
+     * @type {boolean}
+     * @default true
+     */
+    chevron?: boolean;
+    /**
+     * Accessible description for screen readers describing the dropdown functionality
+     * If not provided, the default translation of MazUiTranslations plugin will be used
+     * @type {string}
+     * @default MazUiTranslationsSchema['dropdown']['screenReaderDescription']
+     */
+    screenReaderDescription?: string;
+    /**
+     * Additional CSS classes to apply to the dropdown menu panel
+     * Useful for customizing the dropdown appearance (background, border, etc.)
+     * @type {HTMLAttributes['class']}
+     */
+    menuPanelClass?: HTMLAttributes['class'];
+    /**
+     * Inline styles to apply to the dropdown menu panel
+     * Useful for custom styling. You may use `!important` to override default styles
+     * @type {HTMLAttributes['style']}
+     */
+    menuPanelStyle?: HTMLAttributes['style'];
+    /**
+     * Makes the dropdown button expand to full width of its container
+     * @type {boolean}
+     * @default false
+     */
+    block?: boolean;
+    /**
+     * Icon to use instead of the default chevron for the dropdown indicator
+     * Can be either an icon name string or a Vue component
+     * @type {string | IconComponent}
+     * @example 'arrow-down'
+     * @example ArrowDownIcon (import { ArrowDownIcon } from '@maz-ui/icons')
+     */
+    dropdownIcon?: string | IconComponent;
+    /**
+     * Controls whether the dropdown icon rotates when the dropdown is opened
+     * @type {boolean}
+     * @default true
+     */
+    dropdownIconAnimation?: boolean;
+    /**
+     * Size of the dropdown button
+     * @type {MazSize}
+     * @values mini, xs, sm, md, lg, xl
+     * @default 'md'
+     */
+    size?: MazSize;
+    /**
+     * Transition to use when the dropdown is opened or closed
+     * @type {MazPopoverProps['transition']}
+     * @values 'scale-pop' | 'scale-fade' | string
+     * @default 'scale-pop'
+     */
+    transition?: MazPopoverProps['transition'];
+}
+declare const __VLS_defaults: {
+    modelValue: boolean;
+};
+type __VLS_PublicProps = {
+    modelValue?: typeof __VLS_defaults['modelValue'];
+} & __VLS_Props;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        'screen-reader-description'?(_: {}): any;
+        trigger?(_: {
+            isOpen: boolean;
+            toggle: () => void;
+            close: () => void;
+            open: () => void;
+        }): any;
+        default?(_: {}): any;
+        'dropdown-icon'?(_: {
+            isOpen: boolean;
+            toggle: () => void;
+            close: () => void;
+            open: () => void;
+        }): any;
+        dropdown?(_: {
+            items: MazDropdownMenuItem[];
+            open: () => void;
+            close: () => void;
+            isOpen: boolean;
+            toggle: () => void;
+        }): any;
+        menuitem?(_: {
+            item: MazDropdownMenuItem;
+            open: () => void;
+            close: () => void;
+            isOpen: boolean;
+            toggle: () => void;
+        }): any;
+        'menuitem-label'?(_: {
+            item: Record<string, unknown> & {
+                label: string;
+                class?: unknown;
+                color?: MazColor;
+            } & MazLinkProps & {
+                target?: string;
+                href?: string;
+                to?: RouteLocationRaw;
+            } & {
+                action?: never;
+            };
+            open: () => void;
+            close: () => void;
+            isOpen: boolean;
+            toggle: () => void;
+        }): any;
+        'menuitem-label'?(_: {
+            item: Record<string, unknown> & {
+                label: string;
+                class?: unknown;
+                color?: MazColor;
+            } & {
+                onClick?: () => unknown;
+            } & {
+                href?: never;
+                to?: never;
+                target?: never;
+            };
+            open: () => void;
+            close: () => void;
+            isOpen: boolean;
+            toggle: () => void;
+        }): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:model-value": (value: boolean) => any;
+    "update:modelValue": (value: boolean) => any;
+    "menuitem-clicked": (event: Event) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:model-value"?: ((value: boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    "onMenuitem-clicked"?: ((event: Event) => any) | undefined;
+}>, {}, {}, {}, {}, 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/components/MazDropzone.vue.d.ts

@@ -0,0 +1,294 @@
+import { MazUiTranslationsNestedSchema } from '@maz-ui/translations';
+import { DeepPartial } from '@maz-ui/utils';
+import { MazBtnProps } from './MazBtn.vue';
+import { MazSpinnerProps } from './MazSpinner.vue';
+import { MazColor } from './types';
+type __VLS_Props = MazDropzoneProps;
+export type MazDropzoneErrorCode = 'FILE_SIZE_EXCEEDED' | 'MAX_FILES_EXCEEDED' | 'FILE_TYPE_NOT_ALLOWED' | 'FILE_DUPLICATED' | 'FILE_UPLOAD_ERROR' | 'NO_FILES_TO_UPLOAD' | 'FILE_UPLOAD_ERROR_MULTIPLE' | 'NO_URL' | 'FILE_SIZE_TOO_SMALL';
+export type MazDropzoneProps = {
+    /**
+     * The id of the dropzone
+     */
+    id?: string;
+    /**
+     * Allow multiple files to be uploaded.
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * Allowed data types/MIME types for files (e.g. ['application/json'])
+     * @default ['*\/*']
+     */
+    dataTypes?: string[];
+    /**
+     * Prevent default behavior for unhandled drag & drop events.
+     * @default true
+     */
+    preventDefaultForUnhandled?: boolean;
+    /**
+     * Maximum file size in MB.
+     */
+    maxFileSize?: number;
+    /**
+     * Maximum number of files allowed.
+     */
+    maxFiles?: number;
+    /**
+     * Disable the dropzone
+     */
+    disabled?: boolean;
+    /**
+     * Show file preview
+     */
+    preview?: boolean;
+    /**
+     * Minimum file size in MB
+     */
+    minFileSize?: number;
+    /**
+     * Allow duplicates
+     * @default false
+     */
+    allowDuplicates?: boolean;
+    /**
+     * Translations
+     * @description Custom translations for the component
+     * @type {Partial<MazUiTranslationsNestedSchema['dropzone']>}
+     */
+    translations?: DeepPartial<MazUiTranslationsNestedSchema['dropzone']>;
+    /**
+     * Main color of the component
+     * @default 'primary'
+     */
+    color?: MazColor;
+    /**
+     * MazBtn props [MazBtn props](/components/maz-btn#props)
+     * @default {}
+     */
+    removeFileBtnProps?: MazBtnProps;
+    /**
+     * MazSpinner props [MazSpinner props](/components/maz-spinner#props)
+     * @default {}
+     */
+    spinnerProps?: MazSpinnerProps;
+    /**
+     * Auto upload files
+     * @description If set to `multiple`, all files will be uploaded at once in a single request. If set to `single`, files will be uploaded one by one in separate requests. If set to `false`, no upload will be done automatically.
+     * @default false
+     */
+    autoUpload?: 'multiple' | 'single' | false;
+    /**
+     * Upload URL
+     * @description If set, files will be uploaded to the given URL.
+     */
+    url?: string;
+    /**
+     * Request options
+     * @description Request options to be used for the upload (using fetch) [Request options](https://developer.mozilla.org/en-US/docs/Web/API/fetch#options)
+     * @example `{ mode: 'no-cors', headers: { 'Content-Type': 'multipart/form-data', 'Authorization': 'Bearer 1234567890' } }`
+     */
+    requestOptions?: RequestInit;
+    /**
+     * Transform the body of the request
+     */
+    transformBody?: (formData: FormData) => RequestInit['body'];
+    /**
+     * Maximum number of concurrent uploads
+     * @description Limit the number of files uploaded simultaneously to avoid overwhelming the server
+     * @default 5
+     */
+    maxConcurrentUploads?: number;
+};
+export interface MazDropzoneFileData {
+    file: File;
+    name?: string;
+    size?: number;
+    type?: string;
+    lastModified?: number;
+    sizeInMb?: string;
+    thumbnail?: string | undefined;
+    lastModifiedDate?: Date;
+    uploading?: boolean;
+    success?: boolean;
+    error?: boolean;
+    url?: string;
+}
+declare function getFormData(file: File): FormData;
+declare function getFormDataMultiple(): FormData;
+declare function uploadFilesMultiple(): Promise<void>;
+declare function uploadFiles(): Promise<void>;
+declare function handleFileInputClick(): void;
+declare function reset(): void;
+declare function addFile(file: File): void;
+declare function removeFile(file: File): void;
+type __VLS_PublicProps = {
+    modelValue?: MazDropzoneFileData[];
+} & __VLS_Props;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        'files-area'?(_: {
+            filesData: MazDropzoneFileData[];
+        }): any;
+        'file-item'?(_: {
+            file: MazDropzoneFileData;
+        }): any;
+        'no-files-area'?(_: {
+            selectFile: typeof handleFileInputClick;
+        }): any;
+        'upload-icon'?(_: {}): any;
+    };
+    refs: {
+        dropZoneRef: HTMLLabelElement;
+        fileInput: HTMLInputElement;
+    };
+    rootEl: HTMLLabelElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {
+    /**
+     * Upload files
+     * @description With this method, the files are uploaded one by one (a request for each file)
+     * @usage `mazDropzoneInstance.value?.uploadFiles()`
+     */
+    uploadFiles: typeof uploadFiles;
+    /**
+     * Upload multiple files
+     * @description With this method, the files are uploaded all at once in a single request
+     * @usage `mazDropzoneInstance.value?.uploadFilesMultiple()`
+     */
+    uploadFilesMultiple: typeof uploadFilesMultiple;
+    /**
+     * Get form data
+     * @description Get the form data of one file
+     * @usage `const formData = mazDropzoneInstance.value?.getFormData(file)`
+     */
+    getFormData: typeof getFormData;
+    /**
+     * Get form data multiple
+     * @description Get the form data of all files
+     * @usage `const formData = mazDropzoneInstance.value?.getFormDataMultiple()`
+     */
+    getFormDataMultiple: typeof getFormDataMultiple;
+    /**
+     * Reset the files
+     * @description Remove all files from the dropzone
+     * @usage `mazDropzoneInstance.value?.reset()`
+     */
+    reset: typeof reset;
+    /**
+     * Check if the files are uploading
+     * @type boolean
+     * @description Check if the files are uploading
+     * @usage `const isUploading = mazDropzoneInstance.value?.isUploading`
+     */
+    isUploading: import('vue').Ref<boolean, boolean>;
+    /**
+     * Add a file to the dropzone
+     * @description Add a file manually to the dropzone
+     * @usage `mazDropzoneInstance.value?.addFile(file)`
+     */
+    addFile: typeof addFile;
+    /**
+     * Remove a file from the dropzone
+     * @description Remove a file manually from the dropzone
+     * @usage `mazDropzoneInstance.value?.removeFile(file)`
+     */
+    removeFile: typeof removeFile;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    drop: (values: {
+        files: File[] | null;
+        event: DragEvent;
+    }) => any;
+    error: (values: {
+        files: File[] | null;
+        event: DragEvent | null;
+        code: MazDropzoneErrorCode;
+    }) => any;
+    add: (value: File) => any;
+    enter: (values: {
+        files: File[] | null;
+        event: DragEvent;
+    }) => any;
+    over: (values: {
+        files: File[] | null;
+        event: DragEvent;
+    }) => any;
+    leave: (values: {
+        files: File[] | null;
+        event: DragEvent;
+    }) => any;
+    "update:modelValue": (value: MazDropzoneFileData[]) => any;
+    remove: (value: File) => any;
+    "upload-error": (values: {
+        file: File;
+        code: MazDropzoneErrorCode;
+        error: unknown;
+    }) => any;
+    "upload-error-multiple": (values: {
+        files: File[];
+        code: MazDropzoneErrorCode;
+        error: unknown;
+    }) => any;
+    "upload-success": (values: {
+        file: File;
+        response?: Response;
+    }) => any;
+    "upload-success-multiple": (values: {
+        files: File[];
+        response?: Response;
+    }) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onDrop?: ((values: {
+        files: File[] | null;
+        event: DragEvent;
+    }) => any) | undefined;
+    onError?: ((values: {
+        files: File[] | null;
+        event: DragEvent | null;
+        code: MazDropzoneErrorCode;
+    }) => any) | undefined;
+    onAdd?: ((value: File) => any) | undefined;
+    onEnter?: ((values: {
+        files: File[] | null;
+        event: DragEvent;
+    }) => any) | undefined;
+    onOver?: ((values: {
+        files: File[] | null;
+        event: DragEvent;
+    }) => any) | undefined;
+    onLeave?: ((values: {
+        files: File[] | null;
+        event: DragEvent;
+    }) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: MazDropzoneFileData[]) => any) | undefined;
+    onRemove?: ((value: File) => any) | undefined;
+    "onUpload-error"?: ((values: {
+        file: File;
+        code: MazDropzoneErrorCode;
+        error: unknown;
+    }) => any) | undefined;
+    "onUpload-error-multiple"?: ((values: {
+        files: File[];
+        code: MazDropzoneErrorCode;
+        error: unknown;
+    }) => any) | undefined;
+    "onUpload-success"?: ((values: {
+        file: File;
+        response?: Response;
+    }) => any) | undefined;
+    "onUpload-success-multiple"?: ((values: {
+        files: File[];
+        response?: Response;
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    dropZoneRef: HTMLLabelElement;
+    fileInput: HTMLInputElement;
+}, HTMLLabelElement>;
+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/MazExpandAnimation.vue.d.ts

@@ -0,0 +1,44 @@
+export interface MazExpandAnimationProps {
+    /**
+     * Duration of the animation in milliseconds
+     * @default '300ms'
+     */
+    duration?: string;
+    /**
+     * Timing function of the animation
+     * @default 'ease-in-out'
+     */
+    timingFunction?: string;
+}
+type __VLS_Props = MazExpandAnimationProps;
+type __VLS_PublicProps = {
+    modelValue?: boolean;
+} & __VLS_Props;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {
+        expandAnimationRef: HTMLDivElement;
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    duration: string;
+    timingFunction: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    expandAnimationRef: HTMLDivElement;
+}, 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/MazFullscreenLoader.vue.d.ts

@@ -0,0 +1,26 @@
+import { MazColor } from './types';
+export interface MazFullscreenLoaderProps {
+    /** The color of the spinner */
+    color?: MazColor;
+    /** The size of the spinner */
+    size?: string;
+    /** The selector to teleport the loader */
+    teleportSelector?: string;
+}
+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<MazFullscreenLoaderProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<MazFullscreenLoaderProps> & Readonly<{}>, {}, {}, {}, {}, 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/components/MazGallery.vue.d.ts

@@ -0,0 +1,85 @@
+export type MazGalleryImage = {
+    thumbnail?: string;
+    src: string;
+    alt?: string;
+} | string;
+export interface MazGalleryProps {
+    /**
+     *  Array of string or object: `['https://via.placeholder.com/500', 'https://via.placeholder.com/600']` or `[{ slug: 'https://via.placeholder.com/500', alt: 'image descripton' }, { slug: 'https://via.placeholder.com/600', alt: 'image descripton' }]`
+     */
+    images?: MazGalleryImage[];
+    /**
+     * Images count shown (max: 5)
+     * @type number
+     * @default 5
+     */
+    displayedCount?: number;
+    /**
+     * Remove transparent layer with the remain count (ex: +2)
+     * @type boolean
+     * @default true
+     */
+    remaining?: boolean;
+    /**
+     * Height of gallery - set to `false` to remove default height
+     * @type number | string | false
+     * @default 150
+     */
+    height?: number | string | false;
+    /**
+     * Width of gallery - set to `false` to remove default width
+     * @type number | string | false
+     * @default '100%'
+     */
+    width?: number | string | false;
+    /**
+     * Disable the border radius of the gallery
+     * @type boolean
+     * @default false
+     */
+    radius?: boolean;
+    /**
+     * Disable full size display when clicking on image
+     * @type boolean
+     * @default false
+     */
+    zoom?: boolean;
+    /**
+     * Layer with photography icon when no images is provided
+     * @type boolean
+     * @default true
+     */
+    hasEmptyLayer?: boolean;
+    /**
+     * Lazy load image - if false, images are directly loaded
+     * @type boolean
+     * @default true
+     */
+    lazy?: boolean;
+    /**
+     * Disable blur effect on image hover
+     * @type boolean
+     * @default true
+     */
+    blur?: boolean;
+    /**
+     * Disable scale animation effect on image hover
+     * @type boolean
+     * @default true
+     */
+    scale?: boolean;
+    /**
+     * Choose color of borders between images - Should be a CSS color or CSS variable - Ex: `#000` or `hsl(var(--maz-background-300))`
+     * @type string
+     * @default 'transparent'
+     */
+    separatorColor?: string;
+    /**
+     * Choose background color of the gallery - Should be a CSS color or CSS variable - Ex: `#000` or `hsl(var(--maz-background-300))`
+     * @type string
+     * @default 'hsl(var(--maz-background-300))'
+     */
+    backgroundColor?: string;
+}
+declare const _default: import('vue').DefineComponent<MazGalleryProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<MazGalleryProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;