maz-ui/dist/composables/useDropzone.js

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

import { e } from "../chunks/isClient.8V3qjGdO.js";
import { ref, shallowRef, watch, toValue, onBeforeUnmount, unref } from "vue";
function useDropzone(target, options = {}) {
  const isOverDropZone = ref(!1), isOverError = ref(!1), files = shallowRef(null);
  let counter = 0, isValid = !0;
  if (e()) {
    let getFiles = function(event) {
      const list = Array.from(event.dataTransfer?.files ?? []);
      return list.length === 0 ? null : multiple ? list : [list[0]];
    }, checkDataTypes = function(types) {
      const dataTypes = unref(_options.dataTypes);
      return typeof dataTypes == "function" ? dataTypes(types) : !dataTypes || dataTypes?.length === 0 ? !0 : types.length === 0 ? !1 : types.every(
        (type) => dataTypes?.some((allowedType) => type.includes(allowedType))
      );
    }, checkValidity = function(items) {
      const types = Array.from(items ?? []).map((item) => item.type), dataTypesValid = checkDataTypes(types), multipleFilesValid = multiple || items.length <= 1;
      return dataTypesValid && multipleFilesValid;
    }, isSafari = function() {
      return /^(?:(?!chrome|android).)*safari/i.test(navigator.userAgent) && !("chrome" in globalThis);
    }, handleDragEvent = function(event, eventType) {
      const dataTransferItemList = event.dataTransfer?.items;
      isValid = (dataTransferItemList && checkValidity(dataTransferItemList)) ?? !1, preventDefaultForUnhandled && event.preventDefault();
      const 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 -= 1, 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;
      }
    }, removeEventListeners = function() {
      const targetElement = toValue(target);
      targetElement && (targetElement.removeEventListener("dragenter", dragEnterHandler), targetElement.removeEventListener("dragover", dragOverHandler), targetElement.removeEventListener("dragleave", dragLeaveHandler), targetElement.removeEventListener("drop", dropHandler));
    };
    const _options = typeof options == "function" ? { onDrop: options } : options, multiple = _options.multiple ?? !0, preventDefaultForUnhandled = _options.preventDefaultForUnhandled ?? !1, dragEnterHandler = (event) => handleDragEvent(event, "enter"), dragOverHandler = (event) => handleDragEvent(event, "over"), dragLeaveHandler = (event) => handleDragEvent(event, "leave"), dropHandler = (event) => handleDragEvent(event, "drop");
    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
};