maz-ui/dist/composables/useDropzone.js

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

import{onBeforeUnmount,ref,shallowRef,toValue,unref,watch}from"vue";import{isClient}from"@maz-ui/utils/helpers/isClient";var isSafariRegex=/^(?:(?!chrome|android).)*safari/i;function useDropzone(target,options={}){let isOverDropZone=ref(!1);let isOverError=ref(!1);let files=shallowRef(null);let counter=0;let isValid=!0;if(isClient()){let _options=typeof options==`function`?{onDrop:options}:options;let multiple=_options.multiple??!0;let preventDefaultForUnhandled=_options.preventDefaultForUnhandled??!1;function getFiles(event){let list=[...event.dataTransfer?.files??[]];return list.length===0?null:multiple?list:[list[0]]}function checkDataTypes(types){let dataTypes=unref(_options.dataTypes);if(typeof dataTypes==`function`)return dataTypes(types);if(!dataTypes||dataTypes?.length===0)return!0;let mimeTypes=dataTypes.filter(type=>!type.startsWith(`.`));if(mimeTypes.length===0)return!0;let validTypes=types.filter(Boolean);return validTypes.length===0?!0:validTypes.every(type=>mimeTypes?.some(allowedType=>type.includes(allowedType)))}function checkValidity(items){return checkDataTypes(Array.from(items??[],item=>item.type))&&(multiple||items.length<=1)}function isSafari(){return isSafariRegex.test(navigator.userAgent)&&!(`chrome`in globalThis)}function handleDragEvent(event,eventType){let dataTransferItemList=event.dataTransfer?.items;isValid=(dataTransferItemList&&checkValidity(dataTransferItemList))??!1,preventDefaultForUnhandled&&event.preventDefault();let currentFiles=getFiles(event);switch(!isSafari()&&!isValid&&event.dataTransfer&&(event.dataTransfer.dropEffect=`none`),event.preventDefault(),event.dataTransfer&&(event.dataTransfer.dropEffect=`copy`),eventType){case`enter`:counter+=1,isOverDropZone.value=!0,isOverError.value=!isValid,_options.onEnter?.(null,event);break;case`over`:_options.onOver?.(null,event);break;case`leave`:--counter,counter===0&&(isOverDropZone.value=!1,isOverError.value=!1),_options.onLeave?.(null,event);break;case`drop`:counter=0,isOverDropZone.value=!1,isOverError.value=!1,isValid?(files.value=currentFiles,_options.onDrop?.(currentFiles,event)):_options.onError?.(currentFiles,event);break}}let dragEnterHandler=event=>handleDragEvent(event,`enter`);let dragOverHandler=event=>handleDragEvent(event,`over`);let dragLeaveHandler=event=>handleDragEvent(event,`leave`);let dropHandler=event=>handleDragEvent(event,`drop`);function removeEventListeners(){let targetElement=toValue(target);targetElement&&(targetElement.removeEventListener(`dragenter`,dragEnterHandler),targetElement.removeEventListener(`dragover`,dragOverHandler),targetElement.removeEventListener(`dragleave`,dragLeaveHandler),targetElement.removeEventListener(`drop`,dropHandler))}watch(()=>toValue(target),(element,oldElement)=>{oldElement&&(oldElement.removeEventListener(`dragenter`,dragEnterHandler),oldElement.removeEventListener(`dragover`,dragOverHandler),oldElement.removeEventListener(`dragleave`,dragLeaveHandler),oldElement.removeEventListener(`drop`,dropHandler)),element&&(element.addEventListener(`dragenter`,dragEnterHandler),element.addEventListener(`dragover`,dragOverHandler),element.addEventListener(`dragleave`,dragLeaveHandler),element.addEventListener(`drop`,dropHandler))},{immediate:!0}),onBeforeUnmount(()=>{removeEventListeners()})}return{files,isOverDropZone,isOverError}}export{useDropzone};