vue3-drag-drop/dist/vue3-drag-drop.es.js

Simple drag and drop using native event API for Vue 3

import { openBlock as f, createBlock as D, resolveDynamicComponent as u, withCtx as v, renderSlot as d, createElementBlock as h, normalizeStyle as y, withModifiers as m } from "vue";
const l = { data: void 0 }, o = (t) => t.reduce((e, r) => (e[r] = r) && e, {}), i = o([
  "drag",
  "dragend",
  "dragenter",
  "dragleave",
  "dragstart",
  "dragover",
  "drop"
]);
o(["copy", "move", "link", "none"]);
const w = o([
  "none",
  "copy",
  "copyLink",
  "copyMove",
  "link",
  "linkMove",
  "move",
  "all",
  "uninitialized"
]), p = (t, e) => {
  const r = t.__vccOpts || t;
  for (const [n, g] of e)
    r[n] = g;
  return r;
}, c = {
  props: {
    draggable: { type: Boolean, default: !0 },
    transferData: {},
    effectAllowed: { validator: (t) => t in w },
    image: String,
    imageXOffset: { type: Number, default: 0 },
    imageYOffset: { type: Number, default: 0 },
    hideImageHtml: { type: Boolean, default: !0 },
    tag: { type: String, default: "div" }
  },
  emits: i,
  data() {
    return { dragging: !1 };
  },
  computed: {
    events: () => i,
    scopedData() {
      return this.dragging && this.transferData;
    },
    hideImageStyle: () => ({ position: "fixed", top: "-1000px" })
  },
  methods: {
    emitEvent(t, e) {
      const r = e.dataTransfer;
      if (t === i.dragstart) {
        if (this.effectAllowed && (r.effectAllowed = this.effectAllowed), this.image) {
          const n = new Image();
          n.src = this.image, r.setDragImage && r.setDragImage(n, this.imageXOffset, this.imageYOffset);
        } else if (this.$slots.image && this.$refs.imageSlotWrapper) {
          const n = this.$refs.imageSlotWrapper.firstElementChild;
          n && r.setDragImage && r.setDragImage(n, this.imageXOffset, this.imageYOffset);
        }
        this.transferData !== void 0 && (l.data = this.transferData, e.dataTransfer.setData("text", "")), this.dragging = !0;
      }
      this.$emit(t, this.transferData, e), t === i.dragend && (l.data = void 0, this.dragging = !1);
    }
  }
};
function E(t, e, r, n, g, a) {
  return f(), D(u(r.tag), {
    draggable: r.draggable,
    onDrag: e[0] || (e[0] = (s) => a.emitEvent(a.events.drag, s)),
    onDragstart: e[1] || (e[1] = (s) => a.emitEvent(a.events.dragstart, s)),
    onDragenter: e[2] || (e[2] = (s) => a.emitEvent(a.events.dragenter, s)),
    onDragleave: e[3] || (e[3] = (s) => a.emitEvent(a.events.dragleave, s)),
    onDragend: e[4] || (e[4] = (s) => a.emitEvent(a.events.dragend, s))
  }, {
    default: v(() => [
      d(t.$slots, "default", { transferData: a.scopedData }),
      r.hideImageHtml ? (f(), h("div", {
        key: 0,
        ref: "imageSlotWrapper",
        style: y(a.hideImageStyle)
      }, [
        d(t.$slots, "image", { transferData: a.scopedData })
      ], 4)) : d(t.$slots, "image", {
        key: 1,
        transferData: a.scopedData
      })
    ]),
    _: 3
  }, 40, ["draggable"]);
}
const S = /* @__PURE__ */ p(c, [["render", E]]), k = {
  data() {
    return { transferData: void 0, isDraggingOver: !1, insideElements: /* @__PURE__ */ new Set() };
  },
  props: {
    tag: { type: String, default: "div" }
  },
  emits: i,
  computed: {
    events: () => i,
    scopedData() {
      return this.isDraggingOver && this.transferData;
    }
  },
  methods: {
    emitEvent(t, e) {
      this.transferData = l.data, this.$emit(t, this.transferData, e), t === i.dragenter && (this.insideElements.size || e.target === this.$el) && this.insideElements.add(e.target), t === i.dragleave && this.insideElements.delete(e.target), t === i.drop && this.insideElements.clear(), this.isDraggingOver = Boolean(this.insideElements.size);
    }
  }
};
function O(t, e, r, n, g, a) {
  return f(), D(u(r.tag), {
    onDragenter: e[0] || (e[0] = (s) => a.emitEvent(a.events.dragenter, s)),
    onDragleave: e[1] || (e[1] = (s) => a.emitEvent(a.events.dragleave, s)),
    onDragover: e[2] || (e[2] = m((s) => a.emitEvent(a.events.dragover, s), ["prevent"])),
    onDrop: e[3] || (e[3] = m((s) => a.emitEvent(a.events.drop, s), ["prevent"]))
  }, {
    default: v(() => [
      d(t.$slots, "default", { transferData: a.scopedData })
    ]),
    _: 3
  }, 32);
}
const I = /* @__PURE__ */ p(k, [["render", O]]);
typeof window < "u" && import("./DragDropTouch-085ebe4e.mjs");
const b = {
  install(t) {
    t.component("Drag", S), t.component("Drop", I);
  }
};
typeof window < "u" && window.Vue && window.Vue.use(b);
export {
  S as Drag,
  I as Drop,
  b as default
};