@aotearoan/neon/dist/components/user-input/drop-zone/NeonDropZone.es.js

Neon is a lightweight design library of Vue 3 components with minimal dependencies.

import { defineComponent as f, ref as o, onMounted as u, onUnmounted as i } from "vue";
import { NeonState as v } from "../../../model/common/state/NeonState.es.js";
const m = f({
  name: "NeonDropZone",
  props: {
    /**
     * The state of the drop zone, used to indicate loading. ACCEPTS <em>Ready</em> and <em>Loading</em> states ONLY.
     */
    state: { type: String, default: () => v.Ready },
    /**
     * The disabled state of the drop zone
     */
    disabled: { type: Boolean, default: !1 },
    /**
     * Display the drop zone as a circle instead of square
     */
    circular: { type: Boolean, default: !1 }
  },
  emits: [
    /**
     * Emitted when files are dropped on the drop zone
     * @type {FileList} the list of dropped files
     */
    "files"
  ],
  setup(n, { emit: d }) {
    const e = o(null), r = o(!1), t = (a) => (a != null && a.dataTransfer && (a.preventDefault(), a.dataTransfer.effectAllowed = "copy", r.value = !0), !1), l = () => {
      r.value = !1;
    }, s = (a) => (n.state !== "loading" && !n.disabled && a != null && a.dataTransfer && (a.preventDefault(), d("files", a.dataTransfer.files), r.value = !1), !1);
    return u(() => {
      e.value && (e.value.addEventListener("dragover", t), e.value.addEventListener("dragenter", t), e.value.addEventListener("dragleave", l), e.value.addEventListener("drop", s));
    }), i(() => {
      e.value && (e.value.removeEventListener("dragover", t), e.value.removeEventListener("dragenter", t), e.value.addEventListener("dragleave", l), e.value.removeEventListener("drop", s));
    }), {
      active: r,
      dropzone: e
    };
  }
});
export {
  m as default
};
//# sourceMappingURL=NeonDropZone.es.js.map