maz-ui 4.1.7-beta.6 → 4.1.7-beta.8

package/dist/components/MazDropzone.js

@@ -1,5 +1,5 @@
 import { defineComponent, mergeModels, defineAsyncComponent, useModel, onBeforeMount, ref, computed, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, renderSlot, createCommentVNode, createElementVNode, createVNode, TransitionGroup, withCtx, Fragment, renderList, withModifiers, Transition, createBlock, mergeProps, toDisplayString, createTextVNode } from "vue";
-import { MazCheckCircle, MazXCircle, MazTrash, MazArrowUpOnSquare } from "@maz-ui/icons";
+import { MazLogoJs, MazLogoTypescript, MazLogoVue, MazLogoReact, MazLogoJson, MazLogoXml, MazLogoHtml, MazLogoMarkdown, MazLogoProperties, MazLogoTxt, MazLogoCsv, MazLogoXls, MazLogoXliff, MazLogoApple, MazLogoAndroid, MazPhoto, MazFilm, MazSpeakerWave, MazArchiveBox, MazCommandLine, MazCodeBracket, MazCog, MazPresentationChartBar, MazDocumentText, MazPencilSquare, MazPaintBrush, MazDocumentIcon, MazCheckCircle, MazXCircle, MazTrash, MazArrowUpOnSquare } from "@maz-ui/icons";
 import { useTranslations } from "@maz-ui/translations";
 import { s as sleep } from "../chunks/sleep.BLRH1qZG.js";
 import { useInstanceUniqId } from "../composables/useInstanceUniqId.js";
@@ -7,10 +7,13 @@ import { useDropzone } from "../composables/useDropzone.js";
 import MazBtn from "./MazBtn.js";
 import MazIcon from "./MazIcon.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
-import '../assets/MazDropzone._2HwHowu.css';const _hoisted_1 = ["for"], _hoisted_2 = { class: "m-dropzone__icon-container" }, _hoisted_3 = { class: "m-dropzone__description" }, _hoisted_4 = { class: "m-dropzone__file-info" }, _hoisted_5 = { class: "m-dropzone__file-name" }, _hoisted_6 = { class: "m-dropzone__file-size" }, _hoisted_7 = { class: "m-dropzone__content" }, _hoisted_8 = { class: "m-dropzone__upload-text" }, _hoisted_9 = { class: "m-dropzone__divider" }, _hoisted_10 = {
+import '../assets/MazDropzone.B5e-z_Ba.css';const _hoisted_1 = ["for"], _hoisted_2 = { class: "m-dropzone__icon-container" }, _hoisted_3 = {
+  key: 3,
+  class: "m-dropzone__file-icon-wrapper"
+}, _hoisted_4 = { class: "m-dropzone__description" }, _hoisted_5 = { class: "m-dropzone__file-info" }, _hoisted_6 = { class: "m-dropzone__file-name" }, _hoisted_7 = { class: "m-dropzone__file-size" }, _hoisted_8 = { class: "m-dropzone__content" }, _hoisted_9 = { class: "m-dropzone__upload-text" }, _hoisted_10 = { class: "m-dropzone__divider" }, _hoisted_11 = {
   key: 0,
   class: "m-dropzone__info-text"
-}, _hoisted_11 = { key: 0 }, _hoisted_12 = { key: 0 }, _hoisted_13 = ["id", "multiple", "accept", "disabled"], _sfc_main = /* @__PURE__ */ defineComponent({
+}, _hoisted_12 = { key: 0 }, _hoisted_13 = { key: 0 }, _hoisted_14 = ["id", "multiple", "accept", "disabled"], _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "MazDropzone",
   props: /* @__PURE__ */ mergeModels({
     id: {},
@@ -31,7 +34,8 @@ import '../assets/MazDropzone._2HwHowu.css';const _hoisted_1 = ["for"], _hoisted
     autoUpload: { type: [String, Boolean], default: !1 },
     url: {},
     requestOptions: {},
-    transformBody: { type: Function }
+    transformBody: { type: Function },
+    maxConcurrentUploads: { default: 5 }
   }, {
     modelValue: {
       default: () => []
@@ -106,7 +110,8 @@ import '../assets/MazDropzone._2HwHowu.css';const _hoisted_1 = ["for"], _hoisted
         }), new Error("NO_FILES_TO_UPLOAD");
       try {
         isUploading.value = !0;
-        for await (const fileData of filesData.value) {
+        const queue = [...filesData.value], activeUploads = [];
+        async function uploadFileData(fileData) {
           const formData = getFormData(fileData.file);
           try {
             fileData.error = !1, fileData.uploading = !0;
@@ -122,6 +127,15 @@ import '../assets/MazDropzone._2HwHowu.css';const _hoisted_1 = ["for"], _hoisted
             fileData.uploading = !1;
           }
         }
+        async function processQueue() {
+          for (; queue.length > 0; ) {
+            const fileData = queue.shift();
+            fileData && await uploadFileData(fileData);
+          }
+        }
+        for (let i = 0; i < Math.min(__props.maxConcurrentUploads, filesData.value.length); i++)
+          activeUploads.push(processQueue());
+        await Promise.allSettled(activeUploads);
       } finally {
         isUploading.value = !1, await sleep(1e3), filesData.value = filesData.value.filter((f) => f.error);
       }
@@ -243,53 +257,44 @@ import '../assets/MazDropzone._2HwHowu.css';const _hoisted_1 = ["for"], _hoisted
         input.value = "";
       }, 3e3);
     }
-    const fileIconMap = {
-      jpeg: "photo",
-      png: "photo",
-      tiff: "photo",
-      bmp: "photo",
-      webp: "photo",
-      svg: "photo",
-      ico: "photo",
-      gif: "gif",
-      mp4: "camera",
-      webm: "camera",
-      ogg: "camera",
-      mp3: "speaker-wave",
-      wav: "speaker-wave",
-      m4a: "speaker-wave",
-      aac: "speaker-wave",
-      flac: "speaker-wave",
-      zip: "archive-box",
-      rar: "archive-box",
-      tar: "archive-box",
-      gz: "archive-box",
-      exe: "command-line",
-      dll: "command-line",
-      so: "command-line",
-      dylib: "command-line",
-      dmg: "command-line",
-      deb: "command-line",
-      rpm: "command-line",
-      apk: "command-line",
-      app: "command-line",
-      xls: "document",
-      xlsx: "document",
-      ppt: "document",
-      pptx: "document",
-      pdf: "document",
-      json: "document",
-      xml: "document",
-      csv: "document",
-      tsv: "document",
-      txt: "document",
-      doc: "document",
-      docx: "document",
-      document: "document"
-    };
-    function getFileIcon(fileData) {
+    const extensionIconMap = (() => {
+      const map = /* @__PURE__ */ new Map(), groups = [
+        [MazLogoJs, ["js", "mjs", "cjs"]],
+        [MazLogoTypescript, ["ts", "tsx", "mts", "cts"]],
+        [MazLogoVue, ["vue"]],
+        [MazLogoReact, ["jsx"]],
+        [MazLogoJson, ["json", "jsonc", "json5"]],
+        [MazLogoXml, ["xml"]],
+        [MazLogoHtml, ["html", "htm"]],
+        [MazLogoMarkdown, ["md", "markdown", "mdx"]],
+        [MazLogoProperties, ["properties"]],
+        [MazLogoTxt, ["txt"]],
+        [MazLogoCsv, ["csv"]],
+        [MazLogoXls, ["xls", "xlsx"]],
+        [MazLogoXliff, ["xliff", "xlf"]],
+        [MazLogoApple, ["strings", "stringsdict", "xcstrings"]],
+        [MazLogoAndroid, ["apk"]],
+        [MazPhoto, ["jpeg", "jpg", "png", "tiff", "bmp", "webp", "svg", "ico", "gif", "heic", "heif", "avif"]],
+        [MazFilm, ["mp4", "webm", "avi", "mov", "mkv", "flv", "wmv", "m4v", "mpeg", "mpg", "3gp", "ogv"]],
+        [MazSpeakerWave, ["mp3", "wav", "m4a", "aac", "flac", "ogg", "oga", "opus", "wma", "alac", "aiff"]],
+        [MazArchiveBox, ["zip", "rar", "tar", "gz", "7z", "bz2", "xz"]],
+        [MazCommandLine, ["exe", "dll", "so", "dylib", "dmg", "deb", "rpm", "app", "bat", "cmd"]],
+        [MazCodeBracket, ["css", "scss", "sass", "less", "py", "java", "cpp", "c", "h", "hpp", "go", "rs", "rust", "php", "rb", "swift", "kt", "kotlin", "sql", "sh", "bash", "zsh", "yaml", "yml", "toml", "ini"]],
+        [MazCog, ["conf", "config", "env", "cfg"]],
+        [MazPresentationChartBar, ["ppt", "pptx", "key", "odp"]],
+        [MazDocumentText, ["rtf", "odt"]],
+        [MazPencilSquare, ["ttf", "otf", "woff", "woff2", "eot"]],
+        [MazPaintBrush, ["ai", "psd", "sketch", "fig", "xd", "eps"]],
+        [MazDocumentIcon, ["pdf", "doc", "docx", "tsv", "document"]]
+      ];
+      for (const [icon, extensions] of groups)
+        for (const ext of extensions)
+          map.set(ext, icon);
+      return map;
+    })();
+    function getIconComponent(fileData) {
       const type = fileData.file.type.split("/")?.[1]?.split("+")?.[0]?.toLowerCase(), extension = fileData.file.name.split(".").pop()?.toLowerCase();
-      return fileIconMap[type] || extension && fileIconMap[extension] || fileIconMap.document;
+      return extensionIconMap.get(type) || extension && extensionIconMap.get(extension) || extensionIconMap.get("document");
     }
     function handleFileInputClick() {
       fileInput.value && fileInput.value.click();
@@ -297,14 +302,41 @@ import '../assets/MazDropzone._2HwHowu.css';const _hoisted_1 = ["for"], _hoisted
     function handleFileRemove(fileData) {
       fileData.url && URL.revokeObjectURL(fileData.url), filesData.value = filesData.value.filter((f) => f.file !== fileData.file), emits("remove", fileData.file);
     }
-    const selectAreaCanBeDisplayed = ref(!0), dataTypesString = computed(() => __props.dataTypes?.map((type) => type.split("/")[1]?.split("+")[0]?.toUpperCase()).join(", ")), allFileIsAccepted = computed(() => __props.dataTypes?.length === 1 && __props.dataTypes[0] === "*/*"), { t } = useTranslations(), messages = computed(() => ({
-      dragAndDrop: __props.translations?.dragAndDrop || t("dropzone.dragAndDrop"),
-      fileMaxCount: __props.translations?.fileMaxCount || __props.maxFiles ? t("dropzone.fileMaxCount", { count: __props.maxFiles }) : void 0,
-      fileMaxSize: __props.translations?.fileMaxSize || __props.maxFileSize ? t("dropzone.fileMaxSize", { size: __props.maxFileSize }) : void 0,
-      fileTypes: __props.translations?.fileTypes || dataTypesString.value ? t("dropzone.fileTypes", { types: dataTypesString.value }) : void 0,
-      selectFile: __props.translations?.selectFile || t("dropzone.selectFile"),
-      divider: __props.translations?.divider || t("dropzone.divider")
-    }));
+    const selectAreaCanBeDisplayed = ref(!0), dataTypesString = computed(() => __props.dataTypes?.map(formatReadable).join(", ")), allFileIsAccepted = computed(() => __props.dataTypes?.length === 1 && __props.dataTypes[0] === "*/*"), { t } = useTranslations(), messages = computed(() => {
+      const customTranslations = __props.translations || {};
+      return {
+        dragAndDrop: customTranslations.dragAndDrop ?? t("dropzone.dragAndDrop"),
+        fileMaxCount: __props.maxFiles ? customTranslations.fileMaxCount ?? t("dropzone.fileMaxCount", { count: __props.maxFiles }) : void 0,
+        fileMaxSize: __props.maxFileSize ? customTranslations.fileMaxSize ?? t("dropzone.fileMaxSize", { size: __props.maxFileSize }) : void 0,
+        fileTypes: dataTypesString.value ? customTranslations.fileTypes ?? t("dropzone.fileTypes", { types: dataTypesString.value }) : void 0,
+        selectFile: customTranslations.selectFile ?? t("dropzone.selectFile"),
+        divider: customTranslations.divider ?? t("dropzone.divider")
+      };
+    });
+    function formatReadable(fmt) {
+      if (fmt.startsWith("."))
+        return fmt;
+      if (fmt.includes("/")) {
+        const [type, subtype] = fmt.split("/");
+        if (subtype === "*") {
+          const customTypes = __props.translations?.types || {};
+          switch (type) {
+            case "image":
+              return customTypes.image ?? t("dropzone.types.image");
+            case "video":
+              return customTypes.video ?? t("dropzone.types.video");
+            case "audio":
+              return customTypes.audio ?? t("dropzone.types.audio");
+            case "text":
+              return customTypes.text ?? t("dropzone.types.text");
+            default:
+              return fmt;
+          }
+        }
+        return subtype;
+      }
+      return fmt;
+    }
     function reset() {
       filesData.value.forEach((fileData) => {
         fileData.url && URL.revokeObjectURL(fileData.url);
@@ -317,7 +349,7 @@ import '../assets/MazDropzone._2HwHowu.css';const _hoisted_1 = ["for"], _hoisted
       filesData.value = filesData.value.filter((f) => f.file !== file);
     }
     function isFileTypeAllowed(file) {
-      return !__props.dataTypes || __props.dataTypes.includes("*/*") ? !0 : __props.dataTypes.some((type) => type.endsWith("/*") ? file.type.startsWith(type.slice(0, -1)) : file.type === type);
+      return !__props.dataTypes || __props.dataTypes.includes("*/*") ? !0 : __props.dataTypes.some((type) => type.startsWith(".") ? file.name.toLowerCase().endsWith(type.toLowerCase()) : type.endsWith("/*") ? file.type.startsWith(type.slice(0, -1)) : file.type === type);
     }
     return __expose({
       /**
@@ -376,12 +408,12 @@ import '../assets/MazDropzone._2HwHowu.css';const _hoisted_1 = ["for"], _hoisted
       tabindex: "0",
       for: `input-file-uploader-${unref(instanceId)}`,
       class: normalizeClass(["m-dropzone m-reset-css", {
-        "m-dropzone--disabled": _ctx.disabled,
+        "m-dropzone--disabled": __props.disabled,
         "m-dropzone--is-over-drop-zone": unref(isOverDropZone) && !unref(isOverError),
         "m-dropzone--is-over-error": unref(isOverError)
       }]),
       style: normalizeStyle({
-        "--active-color": `hsl(var(--maz-${_ctx.color}))`
+        "--active-color": `hsl(var(--maz-${__props.color}))`
       })
     }, [
       renderSlot(_ctx.$slots, "files-area", { filesData: filesData.value }, () => [
@@ -400,49 +432,52 @@ import '../assets/MazDropzone._2HwHowu.css';const _hoisted_1 = ["for"], _hoisted
               }, ["prevent"]))
             }, [
               renderSlot(_ctx.$slots, "file-item", { file }, () => [
-                file.thumbnail && _ctx.preview ? (openBlock(), createElementBlock("div", {
-                  key: 0,
-                  style: normalizeStyle({ backgroundImage: `url(${file.thumbnail})`, backgroundSize: "cover", backgroundPosition: "center" }),
-                  class: "m-dropzone__thumbnail"
-                }, null, 4)) : createCommentVNode("", !0),
-                _cache[3] || (_cache[3] = createElementVNode("div", { class: "m-dropzone__overlay" }, null, -1)),
+                file.thumbnail && __props.preview ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                  createElementVNode("div", {
+                    style: normalizeStyle({ backgroundImage: `url(${file.thumbnail})`, backgroundSize: "cover", backgroundPosition: "center" }),
+                    class: "m-dropzone__thumbnail"
+                  }, null, 4),
+                  _cache[3] || (_cache[3] = createElementVNode("div", { class: "m-dropzone__overlay" }, null, -1))
+                ], 64)) : createCommentVNode("", !0),
                 createElementVNode("div", _hoisted_2, [
                   createVNode(Transition, { name: "icon-scale" }, {
                     default: withCtx(() => [
                       file.uploading ? (openBlock(), createBlock(unref(MazSpinner), mergeProps({
                         key: 0,
-                        color: _ctx.color,
+                        color: __props.color,
                         class: "m-dropzone__spinner"
-                      }, { ref_for: !0 }, _ctx.spinnerProps), null, 16, ["color"])) : file.success ? (openBlock(), createBlock(unref(MazCheckCircle), {
+                      }, { ref_for: !0 }, __props.spinnerProps), null, 16, ["color"])) : file.success ? (openBlock(), createBlock(unref(MazCheckCircle), {
                         key: 1,
                         class: "m-dropzone__success-icon"
                       })) : file.error ? (openBlock(), createBlock(unref(MazXCircle), {
                         key: 2,
                         class: "m-dropzone__error-icon"
-                      })) : (openBlock(), createBlock(MazIcon, {
-                        key: 3,
-                        name: getFileIcon(file),
-                        class: "m-dropzone__file-icon"
-                      }, null, 8, ["name"]))
+                      })) : (openBlock(), createElementBlock("div", _hoisted_3, [
+                        createVNode(MazIcon, {
+                          icon: getIconComponent(file),
+                          size: "lg",
+                          class: "m-dropzone__file-icon"
+                        }, null, 8, ["icon"])
+                      ]))
                     ]),
                     _: 2
                   }, 1024)
                 ]),
-                createElementVNode("div", _hoisted_3, [
-                  createElementVNode("div", _hoisted_4, [
-                    createElementVNode("span", _hoisted_5, toDisplayString(file.name), 1),
-                    createElementVNode("span", _hoisted_6, toDisplayString(file.sizeInMb) + " MB", 1)
+                createElementVNode("div", _hoisted_4, [
+                  createElementVNode("div", _hoisted_5, [
+                    createElementVNode("span", _hoisted_6, toDisplayString(file.name), 1),
+                    createElementVNode("span", _hoisted_7, toDisplayString(file.sizeInMb) + " MB", 1)
                   ]),
                   !file.uploading && !file.success ? (openBlock(), createBlock(MazBtn, mergeProps({
                     key: 0,
                     size: "xs",
-                    "rounded-size": "full",
                     icon: unref(MazTrash),
-                    disabled: _ctx.disabled,
-                    color: _ctx.color
-                  }, { ref_for: !0 }, _ctx.removeFileBtnProps, {
+                    disabled: __props.disabled,
+                    color: "destructive",
+                    pastel: ""
+                  }, { ref_for: !0 }, __props.removeFileBtnProps, {
                     onClick: withModifiers(($event) => handleFileRemove(file), ["prevent"])
-                  }), null, 16, ["icon", "disabled", "color", "onClick"])) : createCommentVNode("", !0)
+                  }), null, 16, ["icon", "disabled", "onClick"])) : createCommentVNode("", !0)
                 ])
               ], !0)
             ]))), 128))
@@ -454,30 +489,30 @@ import '../assets/MazDropzone._2HwHowu.css';const _hoisted_1 = ["for"], _hoisted
         key: 0,
         selectFile: handleFileInputClick
       }, () => [
-        createElementVNode("div", _hoisted_7, [
+        createElementVNode("div", _hoisted_8, [
           renderSlot(_ctx.$slots, "upload-icon", {}, () => [
             createVNode(unref(MazArrowUpOnSquare), { class: "m-dropzone__upload-icon" })
           ], !0),
-          createElementVNode("span", _hoisted_8, toDisplayString(messages.value.dragAndDrop), 1)
+          createElementVNode("span", _hoisted_9, toDisplayString(messages.value.dragAndDrop), 1)
         ]),
-        createElementVNode("span", _hoisted_9, toDisplayString(messages.value.divider), 1),
+        createElementVNode("span", _hoisted_10, toDisplayString(messages.value.divider), 1),
         createVNode(MazBtn, mergeProps({
-          disabled: _ctx.disabled,
-          color: _ctx.color
-        }, _ctx.selectFileBtnProps, { onClick: handleFileInputClick }), {
+          disabled: __props.disabled,
+          color: __props.color
+        }, __props.selectFileBtnProps, { onClick: handleFileInputClick }), {
           default: withCtx(() => [
             createTextVNode(toDisplayString(messages.value.selectFile), 1)
           ]),
           _: 1
         }, 16, ["disabled", "color"]),
-        !allFileIsAccepted.value && (messages.value.fileMaxCount || messages.value.fileMaxSize || messages.value.fileTypes) ? (openBlock(), createElementBlock("p", _hoisted_10, [
+        !allFileIsAccepted.value && (messages.value.fileMaxCount || messages.value.fileMaxSize || messages.value.fileTypes) ? (openBlock(), createElementBlock("p", _hoisted_11, [
           messages.value.fileMaxCount ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
             createTextVNode(toDisplayString(messages.value.fileMaxCount) + " ", 1),
-            messages.value.fileMaxSize || messages.value.fileTypes ? (openBlock(), createElementBlock("span", _hoisted_11, " - ")) : createCommentVNode("", !0)
+            messages.value.fileMaxSize || messages.value.fileTypes ? (openBlock(), createElementBlock("span", _hoisted_12, " - ")) : createCommentVNode("", !0)
           ], 64)) : createCommentVNode("", !0),
           messages.value.fileMaxSize ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
             createTextVNode(toDisplayString(messages.value.fileMaxSize) + " ", 1),
-            messages.value.fileTypes ? (openBlock(), createElementBlock("span", _hoisted_12, " - ")) : createCommentVNode("", !0)
+            messages.value.fileTypes ? (openBlock(), createElementBlock("span", _hoisted_13, " - ")) : createCommentVNode("", !0)
           ], 64)) : createCommentVNode("", !0),
           messages.value.fileTypes ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
             createTextVNode(toDisplayString(messages.value.fileTypes), 1)
@@ -490,15 +525,15 @@ import '../assets/MazDropzone._2HwHowu.css';const _hoisted_1 = ["for"], _hoisted
         ref: fileInput,
         multiple: hasMultiple.value,
         type: "file",
-        accept: _ctx.dataTypes?.join(","),
+        accept: __props.dataTypes?.join(","),
         tabindex: "-1",
-        disabled: _ctx.disabled,
+        disabled: __props.disabled,
         class: "m-dropzone__file-input",
         onChange: handleFileUpload
-      }, null, 40, _hoisted_13)
+      }, null, 40, _hoisted_14)
     ], 14, _hoisted_1));
   }
-}), MazDropzone = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-69969cc3"]]);
+}), MazDropzone = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2e1585c8"]]);
 export {
   MazDropzone as default
 };

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

@@ -1,3 +1,5 @@
+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';
@@ -51,23 +53,9 @@ export type MazDropzoneProps = {
     /**
      * Translations
      * @description Custom translations for the component
-     * @default {
-     *   dragAndDrop: 'Drag and drop your files',
-     *   fileMaxCount: 'Maximum {count} files',
-     *   fileMaxSize: 'Maximum {size} MB',
-     *   fileTypes: 'Allowed file types: {types}',
-     *   selectFile: 'Select file',
-     *   divider: 'or'
-     * }
+     * @type {Partial<MazUiTranslationsNestedSchema['dropzone']>}
      */
-    translations?: {
-        dragAndDrop?: string;
-        fileMaxCount?: string;
-        fileMaxSize?: string;
-        fileTypes?: string;
-        selectFile?: string;
-        divider?: string;
-    };
+    translations?: DeepPartial<MazUiTranslationsNestedSchema['dropzone']>;
     /**
      * Main color of the component
      * @default 'primary'
@@ -109,6 +97,12 @@ export type MazDropzoneProps = {
      * 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;

package/dist/components/MazExpandAnimation.js

@@ -29,7 +29,7 @@ import '../assets/MazExpandAnimation.DYyRTW8i.css';const _hoisted_1 = ["aria-hid
       class: normalizeClass(["m-expand-animation m-reset-css", { "m-expand-animation--expanded": isOpen.value }]),
       "aria-hidden": !isOpen.value,
       role: "region",
-      style: normalizeStyle([{ "--expand-animation-duration": _ctx.duration, "--expand-animation-timing-function": _ctx.timingFunction }])
+      style: normalizeStyle([{ "--expand-animation-duration": __props.duration, "--expand-animation-timing-function": __props.timingFunction }])
     }, [
       createElementVNode("div", mergeProps({ class: "m-expand-animation__inner" }, _ctx.$attrs, {
         class: {

package/dist/components/MazFullscreenLoader.js

@@ -20,11 +20,11 @@ import '../assets/MazFullscreenLoader.W0InbLUf.css';const _hoisted_1 = { key: 0
       addClassToDocument();
     }), onUnmounted(() => {
       removeClassFromDocument();
-    }), (_ctx, _cache) => (openBlock(), createBlock(Teleport, { to: _ctx.teleportSelector }, [
+    }), (_ctx, _cache) => (openBlock(), createBlock(Teleport, { to: __props.teleportSelector }, [
       createElementVNode("div", mergeProps({ class: "m-fullscreen-loader m-reset-css" }, _ctx.$attrs), [
         createVNode(MazSpinner, {
-          color: _ctx.color,
-          size: _ctx.size
+          color: __props.color,
+          size: __props.size
         }, null, 8, ["color", "size"]),
         _ctx.$slots.default ? (openBlock(), createElementBlock("span", _hoisted_1, [
           renderSlot(_ctx.$slots, "default", {}, void 0, !0)

package/dist/components/MazGallery.js

@@ -1,7 +1,7 @@
 import { defineComponent, onBeforeMount, computed, createElementBlock, createCommentVNode, openBlock, normalizeStyle, normalizeClass, createElementVNode, Fragment, renderList, withDirectives, unref, toDisplayString, createVNode } from "vue";
 import { MazNoImage } from "@maz-ui/icons";
 import { d as directive } from "../chunks/lazy-img.directive.BLFnGqQa.js";
-import { d as directive$1 } from "../chunks/fullscreen-img.directive.e2KyfwYA.js";
+import { d as directive$1 } from "../chunks/fullscreen-img.directive.BqO7XUdi.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
 import '../assets/MazGallery.BcmVxLFj.css';const _hoisted_1 = { class: "m-gallery__wrapper maz-flex maz-flex-1" }, _hoisted_2 = ["alt"], _hoisted_3 = {
   key: 0,
@@ -43,12 +43,12 @@ import '../assets/MazGallery.BcmVxLFj.css';const _hoisted_1 = { class: "m-galler
     function shouldHaveRemainingLayer(index) {
       return __props.remaining ? (numberImagesRemaining.value && index + 1) === imagesShown.value.length : !1;
     }
-    return (_ctx, _cache) => _ctx.images.length > 0 || _ctx.hasEmptyLayer ? (openBlock(), createElementBlock("div", {
+    return (_ctx, _cache) => __props.images.length > 0 || __props.hasEmptyLayer ? (openBlock(), createElementBlock("div", {
       key: 0,
-      class: normalizeClass(["m-gallery m-reset-css", { "--radius": _ctx.radius, "--has-background-color": !!_ctx.backgroundColor }]),
+      class: normalizeClass(["m-gallery m-reset-css", { "--radius": __props.radius, "--has-background-color": !!__props.backgroundColor }]),
       style: normalizeStyle([sizeStyle.value, {
-        "--gallery-separator-color": _ctx.separatorColor,
-        "--gallery-background-color": _ctx.backgroundColor
+        "--gallery-separator-color": __props.separatorColor,
+        "--gallery-background-color": __props.backgroundColor
       }])
     }, [
       createElementVNode("section", _hoisted_1, [
@@ -62,13 +62,13 @@ import '../assets/MazGallery.BcmVxLFj.css';const _hoisted_1 = { class: "m-galler
             alt: image.alt,
             loading: "lazy"
           }, null, 8, _hoisted_2), [
-            [unref(directive), { src: image.thumbnail, disabled: !_ctx.lazy }, "bg-image"],
+            [unref(directive), { src: image.thumbnail, disabled: !__props.lazy }, "bg-image"],
             [unref(directive$1), {
               src: image.src,
               alt: image.alt,
-              disabled: !_ctx.zoom || shouldHaveRemainingLayer(i),
-              blurOnHover: _ctx.blur,
-              scaleOnHover: _ctx.scale
+              disabled: !__props.zoom || shouldHaveRemainingLayer(i),
+              blurOnHover: __props.blur,
+              scaleOnHover: __props.scale
             }]
           ]),
           shouldHaveRemainingLayer(i) ? withDirectives((openBlock(), createElementBlock("div", _hoisted_3, [
@@ -77,15 +77,15 @@ import '../assets/MazGallery.BcmVxLFj.css';const _hoisted_1 = { class: "m-galler
             [unref(directive$1), {
               src: image.src,
               alt: image.alt,
-              disabled: !_ctx.zoom,
+              disabled: !__props.zoom,
               blurOnHover: !1,
-              scaleOnHover: _ctx.scale
+              scaleOnHover: __props.scale
             }]
           ]) : createCommentVNode("", !0)
         ], 2))), 128)),
-        _ctx.hasEmptyLayer && _ctx.images.length === 0 ? (openBlock(), createElementBlock("div", {
+        __props.hasEmptyLayer && __props.images.length === 0 ? (openBlock(), createElementBlock("div", {
           key: 0,
-          class: normalizeClass(["m-gallery__empty-layer", { "maz-rounded-xl": _ctx.radius }]),
+          class: normalizeClass(["m-gallery__empty-layer", { "maz-rounded-xl": __props.radius }]),
           style: normalizeStyle([sizeStyle.value])
         }, [
           createVNode(unref(MazNoImage), { class: "maz-size-8" })
@@ -95,7 +95,7 @@ import '../assets/MazGallery.BcmVxLFj.css';const _hoisted_1 = { class: "m-galler
         key: i,
         class: "m-gallery__hidden"
       })), [
-        [unref(directive$1), { src: image.src, disabled: !_ctx.zoom }]
+        [unref(directive$1), { src: image.src, disabled: !__props.zoom }]
       ])), 128))
     ], 6)) : createCommentVNode("", !0);
   }

package/dist/components/MazIcon.js

@@ -1,9 +1,10 @@
-import { defineComponent, ref, computed, onMounted, watchEffect, createElementBlock, createCommentVNode, openBlock, mergeProps, nextTick } from "vue";
+import { defineComponent, ref, computed, onMounted, watchEffect, createElementBlock, createBlock, openBlock, mergeProps, resolveDynamicComponent, normalizeStyle, normalizeClass, nextTick } from "vue";
 import { useInjectStrict } from "../composables/useInjectStrict.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
-import '../assets/MazIcon.3Pn7omz5.css';const _hoisted_1 = ["innerHTML"], _sfc_main = /* @__PURE__ */ defineComponent({
+import '../assets/MazIcon.Cl1pfRbK.css';const _hoisted_1 = ["innerHTML"], _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "MazIcon",
   props: {
+    icon: { type: [Function, Object] },
     src: {},
     path: {},
     name: {},
@@ -13,7 +14,7 @@ import '../assets/MazIcon.3Pn7omz5.css';const _hoisted_1 = ["innerHTML"], _sfc_m
   },
   emits: ["loaded", "unloaded", "error"],
   setup(__props, { emit: __emit }) {
-    const emits = __emit, cache = {}, svgElSource = ref(), svgElem = ref();
+    const emits = __emit, predefinedSizes = ["xs", "sm", "md", "lg", "xl"], cache = {}, svgElSource = ref(), svgElem = ref();
     function getMazIconPath() {
       try {
         return useInjectStrict("mazIconPath");
@@ -21,9 +22,12 @@ import '../assets/MazIcon.3Pn7omz5.css';const _hoisted_1 = ["innerHTML"], _sfc_m
         return;
       }
     }
-    const iconPath = computed(() => __props.path ?? getMazIconPath()), fullSrc = computed(() => __props.src ? __props.src : iconPath.value ? `${iconPath.value}/${__props.name}.svg` : `/${__props.name}.svg`);
+    const iconPath = computed(() => __props.path ?? getMazIconPath()), fullSrc = computed(() => {
+      if (!__props.icon)
+        return __props.src ? __props.src : iconPath.value ? `${iconPath.value}/${__props.name}.svg` : `/${__props.name}.svg`;
+    });
     onMounted(() => {
-      !__props.name && !__props.src && console.error('[maz-ui](MazIcon) you should provide "name" or "src" as prop');
+      (__props.icon && __props.src || __props.icon && __props.name) && console.error('[maz-ui](MazIcon) you should provide "name" or "src" as prop'), !__props.icon && !__props.name && !__props.src && console.error('[maz-ui](MazIcon) you should provide "icon", "name" or "src" as prop');
     });
     function setTitle(svg, title) {
       const titleTags = svg.querySelectorAll("title");
@@ -74,22 +78,37 @@ import '../assets/MazIcon.3Pn7omz5.css';const _hoisted_1 = ["innerHTML"], _sfc_m
         }), request.addEventListener("error", (error) => reject(error)), request.send();
       });
     }
-    return watchEffect(() => getSource(fullSrc.value)), (_ctx, _cache) => svgElSource.value ? (openBlock(), createElementBlock("svg", mergeProps({
+    const svgStyle = computed(() => {
+      if (!(__props.size && predefinedSizes.includes(__props.size)))
+        return {
+          fontSize: __props.size
+        };
+    }), svgClasses = computed(() => {
+      if (__props.size && predefinedSizes.includes(__props.size))
+        return `m-icon--${__props.size}`;
+    });
+    return watchEffect(() => {
+      fullSrc.value && getSource(fullSrc.value);
+    }), (_ctx, _cache) => svgElSource.value ? (openBlock(), createElementBlock("svg", mergeProps({
       key: 0,
       ref_key: "svgElem",
       ref: svgElem,
-      class: "m-icon m-reset-css",
+      class: ["m-icon m-reset-css", svgClasses.value],
       width: "1em",
       height: "1em"
     }, {
       ...getSvgAttrs(svgElSource.value),
       ...filterAttrs(_ctx.$attrs)
     }, {
-      style: `font-size: ${_ctx.size}`,
+      style: svgStyle.value,
       innerHTML: getSvgContent(svgElSource.value)
-    }), null, 16, _hoisted_1)) : createCommentVNode("", !0);
+    }), null, 16, _hoisted_1)) : (openBlock(), createBlock(resolveDynamicComponent(__props.icon), {
+      key: 1,
+      class: normalizeClass(["m-icon m-reset-css", svgClasses.value]),
+      style: normalizeStyle(svgStyle.value)
+    }, null, 8, ["class", "style"]));
   }
-}), MazIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-616a0f35"]]);
+}), MazIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ab2a19f1"]]);
 export {
   MazIcon as default
 };

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

@@ -1,12 +1,19 @@
+import { IconComponent } from '@maz-ui/icons';
+declare const predefinedSizes: readonly ["xs", "sm", "md", "lg", "xl"];
+type SizeUnit = `${number}px` | `${number}em` | `${number}rem` | `${number}%` | `${number}vw` | `${number}vh` | `${number}cm` | `${number}mm` | `${number}in` | `${number}pt` | `${number}pc` | `${number}ex`;
+type PredefinedSize = typeof predefinedSizes[number];
+type MazIconSize = SizeUnit | PredefinedSize;
 export interface MazIconProps {
+    /** The icon component to render - e.g: `import { MazStar } from '@maz-ui/icons'` */
+    icon?: IconComponent;
     /** The source path of the SVG file - e.g: `/icons/home.svg` */
     src?: string;
     /** The path of the folder where the SVG files are stored - e.g: `/icons` */
     path?: string;
     /** The name of the SVG file - e.g: `home` */
     name?: string;
-    /** The size of the SVG file - e.g: `1em` */
-    size?: string;
+    /** The size of the SVG file - e.g: `1em` or can be a predefined size: `'xs' | 'sm' | 'md' | 'lg' | 'xl'` */
+    size?: MazIconSize;
     /** The title of the SVG file - e.g: `Home` */
     title?: string;
     /** The function to transform the source of the SVG file - e.g: `(svg) => svg` */