maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
295 lines (294 loc) • 9.39 kB
TypeScript
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;
};
};