maz-ui/dist/chunks/MazDropzone.LzUmu7HY.js

A standalone components library for Vue.Js 3 & Nuxt.Js 3

import{t as _plugin_vue_export_helper_default}from"./_plugin-vue_export-helper.ChmETRGw.js";import{useInstanceUniqId}from"../composables/useInstanceUniqId.js";import{useDropzone}from"../composables/useDropzone.js";import{t as MazLink_default}from"./MazLink.Whs4ZCy8.js";import{t as MazBtn_default}from"./MazBtn.DJj8H23m.js";import{t as MazIcon_default}from"./MazIcon.DRXVVEtt.js";import{Fragment,Transition,TransitionGroup,computed,createBlock,createCommentVNode,createElementBlock,createElementVNode,createTextVNode,createVNode,defineAsyncComponent,defineComponent,mergeModels,mergeProps,normalizeClass,normalizeStyle,onBeforeMount,openBlock,ref,renderList,renderSlot,toDisplayString,unref,useModel,withCtx,withModifiers}from"vue";import{sleep}from"@maz-ui/utils/helpers/sleep";import{useTranslations}from"@maz-ui/translations/composables/useTranslations";import{MazCheckCircle}from"@maz-ui/icons/lazy/MazCheckCircle";import{MazTrash}from"@maz-ui/icons/lazy/MazTrash";import{MazArchiveBox}from"@maz-ui/icons/lazy/MazArchiveBox";import{MazArrowUpOnSquare}from"@maz-ui/icons/lazy/MazArrowUpOnSquare";import{MazCodeBracket}from"@maz-ui/icons/lazy/MazCodeBracket";import{MazCog}from"@maz-ui/icons/lazy/MazCog";import{MazCommandLine}from"@maz-ui/icons/lazy/MazCommandLine";import{MazDocumentIcon}from"@maz-ui/icons/lazy/MazDocumentIcon";import{MazDocumentText}from"@maz-ui/icons/lazy/MazDocumentText";import{MazFilm}from"@maz-ui/icons/lazy/MazFilm";import{MazLogoAndroid}from"@maz-ui/icons/lazy/MazLogoAndroid";import{MazLogoApple}from"@maz-ui/icons/lazy/MazLogoApple";import{MazLogoCsv}from"@maz-ui/icons/lazy/MazLogoCsv";import{MazLogoHtml}from"@maz-ui/icons/lazy/MazLogoHtml";import{MazLogoJs}from"@maz-ui/icons/lazy/MazLogoJs";import{MazLogoJson}from"@maz-ui/icons/lazy/MazLogoJson";import{MazLogoMarkdown}from"@maz-ui/icons/lazy/MazLogoMarkdown";import{MazLogoProperties}from"@maz-ui/icons/lazy/MazLogoProperties";import{MazLogoReact}from"@maz-ui/icons/lazy/MazLogoReact";import{MazLogoTxt}from"@maz-ui/icons/lazy/MazLogoTxt";import{MazLogoTypescript}from"@maz-ui/icons/lazy/MazLogoTypescript";import{MazLogoVue}from"@maz-ui/icons/lazy/MazLogoVue";import{MazLogoXliff}from"@maz-ui/icons/lazy/MazLogoXliff";import{MazLogoXls}from"@maz-ui/icons/lazy/MazLogoXls";import{MazLogoXml}from"@maz-ui/icons/lazy/MazLogoXml";import{MazPaintBrush}from"@maz-ui/icons/lazy/MazPaintBrush";import{MazPencilSquare}from"@maz-ui/icons/lazy/MazPencilSquare";import{MazPhoto}from"@maz-ui/icons/lazy/MazPhoto";import{MazPresentationChartBar}from"@maz-ui/icons/lazy/MazPresentationChartBar";import{MazSpeakerWave}from"@maz-ui/icons/lazy/MazSpeakerWave";import{MazXCircle}from"@maz-ui/icons/lazy/MazXCircle";import '../assets/MazDropzone.DRD0eN8E.css';var _hoisted_1=[`for`];var _hoisted_2={class:`m-dropzone__icon-container`};var _hoisted_3={key:3,class:`m-dropzone__file-icon-wrapper`};var _hoisted_4={class:`m-dropzone__description`};var _hoisted_5={class:`m-dropzone__file-info`};var _hoisted_6={class:`m-dropzone__file-name`};var _hoisted_7={class:`m-dropzone__file-size`};var _hoisted_8={class:`m-dropzone__content`};var _hoisted_9={class:`m-dropzone__upload-text`};var _hoisted_10={key:0,class:`m-dropzone__info-text`};var _hoisted_11={key:0};var _hoisted_12={key:1};var _hoisted_13={key:2};var _hoisted_14=[`id`,`multiple`,`accept`,`disabled`];var MazDropzone_default=_plugin_vue_export_helper_default(defineComponent({__name:`MazDropzone`,props:mergeModels({id:{},multiple:{type:Boolean,default:!1},dataTypes:{},preventDefaultForUnhandled:{type:Boolean,default:!0},maxFileSize:{},maxFiles:{},disabled:{type:Boolean,default:!1},preview:{type:Boolean,default:!0},minFileSize:{},allowDuplicates:{type:Boolean,default:!1},translations:{},color:{default:`primary`},removeFileBtnProps:{default:()=>({})},spinnerProps:{default:()=>({})},autoUpload:{type:[String,Boolean],default:!1},url:{},requestOptions:{},transformBody:{type:Function},maxConcurrentUploads:{default:5}},{modelValue:{default:()=>[]},modelModifiers:{}}),emits:mergeModels([`drop`,`enter`,`leave`,`over`,`add`,`remove`,`error`,`upload-error`,`upload-error-multiple`,`upload-success`,`upload-success-multiple`],[`update:modelValue`]),setup(__props,{expose:__expose,emit:__emit}){let emits=__emit;let MazSpinner=defineAsyncComponent(()=>import(`../components/MazSpinner.js`));let filesData=useModel(__props,`modelValue`);onBeforeMount(async()=>{filesData.value.length&&(filesData.value=await Promise.all(filesData.value.map(fileData=>getFileData(fileData.file))))});let dropZoneRef=ref();let isUploading=ref(!1);let hasMultiple=computed(()=>__props.multiple||(__props.maxFiles?__props.maxFiles>1:!1)||__props.autoUpload===`multiple`);let instanceId=useInstanceUniqId({componentName:`MazDropzone`,providedId:__props.id});function uploadFile(formData){if(!__props.url)throw emits(`error`,{files:null,event:null,code:`NO_URL`}),Error(`NO_URL`);try{let body=__props.transformBody?.(formData)??formData;return fetch(__props.url,{method:`POST`,body,...__props.requestOptions})}catch{emits(`error`,{files:null,event:null,code:`FILE_UPLOAD_ERROR`})}}function getFormData(file){let formData=new FormData;return formData.append(`file`,file),formData}function getFormDataMultiple(){let formData=new FormData;return filesData.value.forEach(fileData=>formData.append(`files`,fileData.file)),formData}async function uploadFilesMultiple(){if(!filesData.value.length){emits(`error`,{files:filesData.value.map(f=>f.file),event:null,code:`NO_FILES_TO_UPLOAD`});return}try{isUploading.value=!0,filesData.value=filesData.value.map(f=>({...f,uploading:!0,success:!1,error:!1}));let response=await uploadFile(getFormDataMultiple());filesData.value=filesData.value.map(f=>({...f,uploading:!1,success:!0,error:!1})),emits(`upload-success-multiple`,{files:filesData.value.map(f=>f.file),response})}catch(error){filesData.value=filesData.value.map(f=>({...f,uploading:!1,success:!1,error:!0})),emits(`upload-error-multiple`,{files:filesData.value.map(f=>f.file),code:`FILE_UPLOAD_ERROR_MULTIPLE`,error})}finally{isUploading.value=!1,await sleep(1e3),filesData.value=filesData.value.filter(f=>f.error)}}async function uploadFiles(){if(!filesData.value.length)throw emits(`error`,{files:filesData.value.map(f=>f.file),event:null,code:`NO_FILES_TO_UPLOAD`}),Error(`NO_FILES_TO_UPLOAD`);try{isUploading.value=!0;let queue=[...filesData.value];let activeUploads=[];async function uploadFileData(fileData){let formData=getFormData(fileData.file);try{fileData.error=!1,fileData.uploading=!0;let response=await uploadFile(formData);emits(`upload-success`,{file:fileData.file,response}),fileData.success=!0}catch(error){fileData.error=!0,emits(`upload-error`,{file:fileData.file,code:`FILE_UPLOAD_ERROR`,error})}finally{fileData.uploading=!1}}async function processQueue(){for(;queue.length>0;){let 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)}}async function getFileData(file){let fileData={file,name:file.name,size:file.size,type:file.type,lastModified:file.lastModified,sizeInMb:(file.size/1024/1024).toFixed(2),lastModifiedDate:new Date(file.lastModified),url:URL.createObjectURL(file),thumbnail:void 0,uploading:!1,success:!1,error:!1};return file.type.startsWith(`image/`)&&await new Promise(resolve=>{let reader=new FileReader;reader.onload=event=>{fileData.thumbnail=event.target?.result||void 0,resolve(null)},reader.readAsDataURL(file)}),__props.maxFileSize&&file.size>__props.maxFileSize*1024*1024&&emits(`error`,{files:[file],event:null,code:`FILE_SIZE_EXCEEDED`}),__props.minFileSize&&file.size<__props.minFileSize*1024*1024&&emits(`error`,{files:[file],event:null,code:`FILE_SIZE_TOO_SMALL`}),fileData}async function handleFiles(files){if(__props.disabled||!files)return null;for await(let file of files){if(!isFileTypeAllowed(file)){emits(`error`,{files:[file],event:null,code:`FILE_TYPE_NOT_ALLOWED`});continue}if(!hasMultiple.value&&filesData.value.length>=1){emits(`error`,{files:[file],event:null,code:`MAX_FILES_EXCEEDED`});continue}if(__props.maxFiles&&filesData.value.length>=__props.maxFiles){emits(`error`,{files:[file],event:null,code:`MAX_FILES_EXCEEDED`});continue}if(__props.maxFileSize&&file.size>__props.maxFileSize*1024*1024){emits(`error`,{files:[file],event:null,code:`FILE_SIZE_EXCEEDED`});continue}if(__props.minFileSize&&file.size<__props.minFileSize*1024*1024){emits(`error`,{files:[file],event:null,code:`FILE_SIZE_TOO_SMALL`});continue}if(!__props.allowDuplicates&&filesData.value.some(f=>f.name===file.name&&f.size===file.size&&f.type===file.type)){emits(`error`,{files:[file],event:null,code:`FILE_DUPLICATED`});continue}let fileData=await getFileData(file);filesData.value=[...filesData.value,fileData],emits(`add`,fileData.file)}return __props.autoUpload===`single`?uploadFiles():__props.autoUpload===`multiple`&&uploadFilesMultiple(),filesData.value}async function onDrop(files,event){await handleFiles(files),emits(`drop`,{files,event})}function onError(files,event){emits(`error`,{files,event,code:`FILE_TYPE_NOT_ALLOWED`})}function onEnter(files,event){emits(`enter`,{files,event})}function onLeave(files,event){emits(`leave`,{files,event})}function onOver(files,event){emits(`over`,{files,event})}let{isOverDropZone,isOverError}=useDropzone(dropZoneRef,{dataTypes:__props.dataTypes,onDrop,preventDefaultForUnhandled:__props.preventDefaultForUnhandled,multiple:hasMultiple.value,onError,onEnter,onLeave,onOver});let fileInput=ref();function handleFileUpload(event){let input=event.target;let files=input?.files;files&&handleFiles(files),setTimeout(()=>{input.value=``},3e3)}let extensionIconMap=(()=>{let map=new Map;let 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`.split(`.`)],[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(let[icon,extensions]of groups)for(let ext of extensions)map.set(ext,icon);return map})();function getIconComponent(fileData){let type=fileData.file.type.split(`/`)?.[1]?.split(`+`)?.[0]?.toLowerCase();let extension=fileData.file.name.split(`.`).pop()?.toLowerCase();return extensionIconMap.get(type)||extension&&extensionIconMap.get(extension)||extensionIconMap.get(`document`)}function handleFileInputClick(){fileInput.value&&fileInput.value.click()}function handleFileRemove(fileData){fileData.url&&URL.revokeObjectURL(fileData.url),filesData.value=filesData.value.filter(f=>f.file!==fileData.file),emits(`remove`,fileData.file)}let selectAreaCanBeDisplayed=ref(!0);let dataTypesString=computed(()=>__props.dataTypes?.map(formatReadable).join(`, `));let allFileIsAccepted=computed(()=>__props.dataTypes?.length===1&&__props.dataTypes[0]===`*/*`);let{t}=useTranslations();let messages=computed(()=>{let 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(`/`)){let[type,subtype]=fmt.split(`/`);if(subtype===`*`){let 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)}),filesData.value=[]}function addFile(file){handleFiles([file])}function removeFile(file){filesData.value=filesData.value.filter(f=>f.file!==file)}function isFileTypeAllowed(file){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({uploadFiles,uploadFilesMultiple,getFormData,getFormDataMultiple,reset,isUploading,addFile,removeFile}),(_ctx,_cache)=>(openBlock(),createElementBlock(`label`,{ref_key:`dropZoneRef`,ref:dropZoneRef,role:`button`,tabindex:`0`,for:`input-file-uploader-${unref(instanceId)}`,class:normalizeClass([`m-dropzone m-reset-css`,{"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-${__props.color}))`})},[renderSlot(_ctx.$slots,`files-area`,{filesData:filesData.value},()=>[createVNode(TransitionGroup,{name:`file-scale`,tag:`div`,class:`m-dropzone__files-container`,onBeforeEnter:_cache[1]||=$event=>selectAreaCanBeDisplayed.value=!1,onAfterLeave:_cache[2]||=$event=>selectAreaCanBeDisplayed.value=filesData.value.length===0},{default:withCtx(()=>[(openBlock(!0),createElementBlock(Fragment,null,renderList(filesData.value,file=>(openBlock(),createElementBlock(`div`,{key:`${file.name}-${file.size}-${file}`,class:`m-dropzone__file-item group`,onClick:_cache[0]||=withModifiers(()=>{},[`prevent`])},[renderSlot(_ctx.$slots,`file-item`,{file},()=>[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[4]||=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:__props.color,class:`m-dropzone__spinner`},{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(),createElementBlock(`div`,_hoisted_3,[createVNode(MazIcon_default,{icon:getIconComponent(file),size:`lg`,class:`m-dropzone__file-icon`},null,8,[`icon`])]))]),_:2},1024)]),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_default,mergeProps({key:0,size:`xs`,icon:unref(MazTrash),disabled:__props.disabled,color:`destructive`,pastel:``},{ref_for:!0},__props.removeFileBtnProps,{onClick:withModifiers($event=>handleFileRemove(file),[`prevent`])}),null,16,[`icon`,`disabled`,`onClick`])):createCommentVNode(``,!0)])],!0)]))),128))]),_:3})],!0),filesData.value.length===0&&selectAreaCanBeDisplayed.value?renderSlot(_ctx.$slots,`no-files-area`,{key:0,selectFile:handleFileInputClick},()=>[createElementVNode(`div`,_hoisted_8,[renderSlot(_ctx.$slots,`upload-icon`,{},()=>[createVNode(unref(MazArrowUpOnSquare),{class:`m-dropzone__upload-icon`})],!0),createElementVNode(`span`,_hoisted_9,[createTextVNode(toDisplayString(messages.value.dragAndDrop)+` `+toDisplayString(messages.value.divider)+` `,1),createVNode(MazLink_default,{color:`inherit`,underline:``,onClick:_cache[3]||=withModifiers($event=>!__props.disabled&&handleFileInputClick(),[`prevent`])},{default:withCtx(()=>[createTextVNode(toDisplayString(messages.value.selectFile),1)]),_:1})])]),!allFileIsAccepted.value&&(messages.value.fileMaxCount||messages.value.fileMaxSize||messages.value.fileTypes)?(openBlock(),createElementBlock(`p`,_hoisted_10,[messages.value.fileMaxCount?(openBlock(),createElementBlock(`span`,_hoisted_11,toDisplayString(messages.value.fileMaxCount),1)):createCommentVNode(``,!0),messages.value.fileMaxSize?(openBlock(),createElementBlock(`span`,_hoisted_12,toDisplayString(messages.value.fileMaxSize),1)):createCommentVNode(``,!0),messages.value.fileTypes?(openBlock(),createElementBlock(`span`,_hoisted_13,toDisplayString(messages.value.fileTypes),1)):createCommentVNode(``,!0)])):createCommentVNode(``,!0)],!0):createCommentVNode(``,!0),createElementVNode(`input`,{id:`input-file-uploader-${unref(instanceId)}`,ref_key:`fileInput`,ref:fileInput,multiple:hasMultiple.value,type:`file`,accept:__props.dataTypes?.join(`,`),tabindex:`-1`,disabled:__props.disabled,class:`m-dropzone__file-input`,onChange:handleFileUpload},null,40,_hoisted_14)],14,_hoisted_1))}}),[[`__scopeId`,`data-v-7a36205a`]]);export{MazDropzone_default as t};