@artmate/chat/dist/es/attachment/DropArea.vue.js

借鉴字节开源react库AntX，通过vue实现的版本

import { defineComponent as g, ref as c, watch as v, computed as m, onUnmounted as D, createBlock as E, createCommentVNode as C, openBlock as L, Teleport as y, createElementVNode as b, normalizeStyle as N, normalizeClass as h, unref as _, renderSlot as k } from "vue";
import { useNamespace as w } from "../hooks/useNamespace.js";
const z = /* @__PURE__ */ g({
  __name: "DropArea",
  props: {
    className: { default: "" },
    getDropContainer: { type: [Function, null], default: null },
    disabled: { type: Boolean, default: !1 }
  },
  setup(i) {
    const n = i, r = w("attachment-drop-area"), t = c(null), a = c(null);
    v(
      () => n.getDropContainer,
      () => {
        var o;
        const e = (o = n.getDropContainer) == null ? void 0 : o.call(n);
        t.value !== e && (t.value = e);
      },
      {
        immediate: !0
      }
    );
    const p = m(
      () => n.getDropContainer && t.value && !n.disabled
    ), f = m(() => {
      var e;
      return [
        n.className,
        {
          [r.b("on-body")]: t.value && ((e = t.value) == null ? void 0 : e.tagName) === "BODY"
        }
      ];
    }), l = () => {
      a.value = !0;
    }, d = (e) => {
      e.preventDefault();
    }, u = (e) => {
      e.relatedTarget || (a.value = !1);
    }, s = (e) => {
      a.value = !1, e.preventDefault();
    };
    return v(
      () => t.value,
      () => {
        t.value && (document.addEventListener("dragenter", l), document.addEventListener("dragover", d), document.addEventListener("dragleave", u), document.addEventListener("drop", s, !0));
      },
      {
        immediate: !0
      }
    ), D(() => {
      t.value && (document.removeEventListener("dragenter", l), document.removeEventListener("dragover", d), document.removeEventListener("dragleave", u), document.removeEventListener("drop", s));
    }), (e, o) => p.value ? (L(), E(y, {
      key: 0,
      to: t.value
    }, [
      b("div", {
        class: h([_(r).b(), ...f.value]),
        style: N({ display: a.value ? "block" : "none" })
      }, [
        k(e.$slots, "default")
      ], 6)
    ], 8, ["to"])) : C("", !0);
  }
});
export {
  z as default
};