jadq-x-vue/es/attachments/DropArea.mjs

Craft AI-driven interfaces effortlessly

import { defineComponent as E, onMounted as L, watch as m, toValue as A, computed as x, createVNode as v, Teleport as w } from "vue";
import { b } from "../chunks/module-chunk.mjs";
import f from "../_util/hooks/use-state.mjs";
import { useAttachmentContextInject as y } from "./context.mjs";
const V = /* @__PURE__ */ E({
  name: "AXAttachmentsDropArea",
  __name: "DropArea",
  props: {
    prefixCls: null,
    className: null,
    getDropContainer: {
      type: Function
    },
    children: null
  },
  setup(e) {
    const g = y(), [t, l] = f(), [D, r] = f(null);
    L(() => {
      var n;
      l((n = e.getDropContainer) == null ? void 0 : n.call(e));
    }), m(() => A(e.getDropContainer), () => {
      var o;
      const n = (o = e.getDropContainer) == null ? void 0 : o.call(e);
      t.value !== n && l(n);
    }), m(() => !!t.value, (n, o, h) => {
      if (t.value) {
        const u = () => {
          r(!0);
        }, c = (a) => {
          a.preventDefault();
        }, i = (a) => {
          a.relatedTarget || r(!1);
        }, s = (a) => {
          r(!1), a.preventDefault();
        };
        document.addEventListener("dragenter", u), document.addEventListener("dragover", c), document.addEventListener("dragleave", i), document.addEventListener("drop", s), h(() => {
          document.removeEventListener("dragenter", u), document.removeEventListener("dragover", c), document.removeEventListener("dragleave", i), document.removeEventListener("drop", s);
        });
      }
    });
    const C = x(() => e.getDropContainer && t.value && !g.value.disabled), d = `${e.prefixCls}-drop-area`;
    return () => C.value ? v(w, {
      to: t.value
    }, {
      default: () => [v("div", {
        class: b(d, e.className, {
          [`${d}-on-body`]: t.value.tagName === "BODY"
        }),
        style: {
          display: D.value ? "block" : "none"
        }
      }, [e.children])]
    }) : null;
  }
});
export {
  V as default
};