@vue-dnd-kit/components/dist/vue-dnd-kit-components.es.js

Components for Vue DnD Kit

import { defineComponent as f, createPropsRestProxy as I, computed as K, createBlock as v, openBlock as u, resolveDynamicComponent as h, withKeys as M, unref as a, normalizeClass as V, withModifiers as w, withCtx as m, renderSlot as g, createElementVNode as $, createVNode as H, toDisplayString as R, createElementBlock as L, Fragment as _, renderList as P, createTextVNode as O } from "vue";
import { useDraggable as C, useSelection as j, useDroppable as z } from "@vue-dnd-kit/core";
var E = /* @__PURE__ */ ((n) => (n.DRAGGABLE = "dnd-kit-draggable", n.DRAGGABLE_DISABLED = "dnd-kit-draggable-disabled", n.DRAGGABLE_ACTIVE = "dnd-kit-draggable-active", n.DRAGGABLE_SELECTED = "dnd-kit-draggable-selected", n.DRAGGABLE_ALLOWED = "dnd-kit-draggable-allowed", n.DRAGGABLE_OVERED = "dnd-kit-draggable-overed", n))(E || {}), B = /* @__PURE__ */ ((n) => (n.DROPPABLE = "dnd-kit-droppable", n.DROPPABLE_DISABLED = "dnd-kit-droppable-disabled", n.DROPPABLE_ACTIVE = "dnd-kit-droppable-active", n))(B || {});
const Q = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
  __proto__: null,
  DraggableClassNames: E,
  DroppableClassNames: B
}, Symbol.toStringTag, { value: "Module" })), G = /* @__PURE__ */ f({
  __name: "Draggable",
  props: {
    tag: { default: "div" },
    container: {},
    data: {},
    groups: {},
    keyboardMoveStep: {},
    layer: {},
    sensorThrottle: {},
    sensorSetup: {},
    preventRootDrag: { type: Boolean },
    index: {},
    source: {}
  },
  emits: ["start", "end", "leave", "hover", "move"],
  setup(n, { emit: d }) {
    const r = I(n, ["tag", "container"]), e = d, { elementRef: t, handleDragStart: o, isAllowed: s, isDragging: p, isOvered: i } = C({
      container: n.container,
      data: K(() => ({
        index: r.index,
        source: r.source,
        ...r.data
      })),
      groups: r.groups,
      layer: r.layer,
      keyboard: {
        moveStep: r.keyboardMoveStep
      },
      sensor: {
        throttle: r.sensorThrottle,
        setup: r.sensorSetup
      },
      events: {
        onStart: (l) => e("start", l),
        onLeave: (l) => e("leave", l),
        onHover: (l) => e("hover", l),
        onMove: (l) => e("move", l),
        onEnd: (l) => e("end", l)
      }
    }), {
      isSelected: b,
      handleSelect: k,
      handleToggleSelect: y,
      handleUnselect: D,
      isParentOfSelected: c
    } = j(t);
    return (l, A) => (u(), v(h(l.tag), {
      ref_key: "elementRef",
      ref: t,
      class: V({
        [a(E).DRAGGABLE]: !0,
        [a(E).DRAGGABLE_ACTIVE]: a(p),
        [a(E).DRAGGABLE_SELECTED]: a(b),
        [a(E).DRAGGABLE_ALLOWED]: a(s),
        [a(E).DRAGGABLE_OVERED]: a(i)
      }),
      disabled: a(p),
      onPointerdown: A[0] || (A[0] = (T) => !l.preventRootDrag && a(o)(T)),
      onKeydown: A[1] || (A[1] = M(w(
        (T) => !l.preventRootDrag && a(o)(T),
        ["self"]
      ), ["space"]))
    }, {
      default: m(() => [
        g(l.$slots, "default", {
          handleDragStart: a(o),
          data: l.data,
          isAllowed: a(s),
          isDragging: a(p),
          isOvered: a(i),
          isSelected: a(b),
          isParentOfSelected: a(c),
          handleSelect: a(k),
          handleToggleSelect: a(y),
          handleUnselect: a(D)
        })
      ]),
      _: 3
    }, 40, ["class", "disabled"]));
  }
}), S = /* @__PURE__ */ f({
  __name: "Droppable",
  props: {
    tag: { default: "div" },
    data: {},
    groups: {},
    source: {}
  },
  emits: ["drop", "hover", "leave"],
  setup(n, { emit: d }) {
    const r = d, { elementRef: e, isAllowed: t, isOvered: o } = z({
      data: {
        source: n.source,
        ...n.data
      },
      groups: n.groups,
      events: {
        onDrop: (s) => r("drop", s),
        onHover: (s) => r("hover", s),
        onLeave: (s) => r("leave", s)
      }
    });
    return (s, p) => (u(), v(h(s.tag), {
      ref_key: "elementRef",
      ref: e,
      class: V(["dnd-kit-droppable", {
        [a(B).DROPPABLE_DISABLED]: !a(t),
        [a(B).DROPPABLE_ACTIVE]: a(o)
      }])
    }, {
      default: m(() => [
        g(s.$slots, "default", {
          isAllowed: a(t),
          isOvered: a(o)
        })
      ]),
      _: 3
    }, 8, ["class"]));
  }
}), U = /* @__PURE__ */ f({
  __name: "Kanban",
  props: {
    tag: { default: "ul" },
    groups: { default: () => ["kanban-column"] }
  },
  emits: ["drop", "hover", "leave"],
  setup(n, { emit: d }) {
    const r = d;
    return (e, t) => (u(), v(S, {
      tag: e.tag,
      groups: e.groups,
      class: "dnd-kit-kanban",
      onDrop: t[0] || (t[0] = (o) => r("drop", o)),
      onHover: t[1] || (t[1] = (o) => r("hover", o)),
      onLeave: t[2] || (t[2] = (o) => r("leave", o))
    }, {
      default: m(() => [
        g(e.$slots, "default")
      ]),
      _: 3
    }, 8, ["tag", "groups"]));
  }
}), W = { class: "dnd-kit-kanban-column-header" }, X = /* @__PURE__ */ f({
  __name: "KanbanColumn",
  props: {
    tag: { default: "li" },
    title: {},
    preventRootDrag: { type: Boolean, default: !0 },
    groups: { default: () => ["kanban-column"] },
    source: {},
    index: {},
    container: {},
    keyboardMoveStep: {},
    layer: {},
    data: {},
    sensorThrottle: {},
    sensorSetup: {},
    bodyGroups: { default: () => ["kanban-item"] },
    bodyTag: { default: "ul" }
  },
  emits: ["start", "end", "leave", "hover", "move", "drop"],
  setup(n, { emit: d }) {
    const r = d;
    return (e, t) => (u(), v(G, {
      tag: e.tag,
      class: "dnd-kit-kanban-column",
      "prevent-root-drag": e.preventRootDrag,
      groups: e.groups,
      onStart: t[1] || (t[1] = (o) => r("start", o)),
      onEnd: t[2] || (t[2] = (o) => r("end", o)),
      onLeave: t[3] || (t[3] = (o) => r("leave", o)),
      onHover: t[4] || (t[4] = (o) => r("hover", o)),
      onMove: t[5] || (t[5] = (o) => r("move", o)),
      container: e.container,
      data: e.data,
      source: e.source,
      index: e.index,
      "keyboard-move-step": e.keyboardMoveStep,
      layer: e.layer,
      "sensor-throttle": e.sensorThrottle,
      "sensor-setup": e.sensorSetup
    }, {
      default: m(({
        handleDragStart: o,
        isAllowed: s,
        data: p,
        handleSelect: i,
        handleToggleSelect: b,
        isDragging: k,
        handleUnselect: y,
        isOvered: D,
        isParentOfSelected: c,
        isSelected: l
      }) => [
        $("div", W, [
          g(e.$slots, "header", {
            title: e.title,
            handleDragStart: o,
            isAllowed: s,
            data: p,
            handleSelect: i,
            handleToggleSelect: b,
            isDragging: k,
            handleUnselect: y,
            isOvered: D,
            isParentOfSelected: c,
            isSelected: l
          }, () => [
            $("span", null, R(e.title) + " " + R(e.index), 1)
          ])
        ]),
        H(S, {
          groups: e.bodyGroups,
          tag: e.bodyTag,
          onDrop: t[0] || (t[0] = (A) => r("drop", A)),
          source: e.source[e.index].items,
          class: "dnd-kit-kanban-column-body"
        }, {
          default: m(() => [
            g(e.$slots, "default", {
              handleDragStart: o,
              isAllowed: s,
              data: p,
              handleSelect: i,
              handleToggleSelect: b,
              isDragging: k,
              handleUnselect: y,
              isOvered: D,
              isParentOfSelected: c,
              isSelected: l
            })
          ]),
          _: 2
        }, 1032, ["groups", "tag", "source"]),
        g(e.$slots, "footer", {
          handleDragStart: o,
          isAllowed: s,
          data: p,
          handleSelect: i,
          handleToggleSelect: b,
          isDragging: k,
          handleUnselect: y,
          isOvered: D,
          isParentOfSelected: c,
          isSelected: l
        })
      ]),
      _: 3
    }, 8, ["tag", "prevent-root-drag", "groups", "container", "data", "source", "index", "keyboard-move-step", "layer", "sensor-throttle", "sensor-setup"]));
  }
}), Y = /* @__PURE__ */ f({
  __name: "KanbanItem",
  props: {
    tag: { default: "li" },
    groups: { default: () => ["kanban-item"] },
    preventRootDrag: { type: Boolean, default: !0 },
    source: {},
    index: {},
    data: {}
  },
  setup(n) {
    return (d, r) => (u(), v(G, {
      tag: d.tag,
      groups: d.groups,
      "prevent-root-drag": d.preventRootDrag,
      data: d.data,
      source: d.source,
      index: d.index
    }, {
      default: m(({
        data: e,
        handleDragStart: t,
        handleSelect: o,
        handleToggleSelect: s,
        handleUnselect: p,
        isAllowed: i,
        isDragging: b,
        isOvered: k,
        isSelected: y,
        isParentOfSelected: D
      }) => [
        g(d.$slots, "default", {
          handleDragStart: t,
          isAllowed: i,
          data: e,
          handleSelect: o,
          handleToggleSelect: s,
          isDragging: b,
          handleUnselect: p,
          isOvered: k,
          isParentOfSelected: D,
          isSelected: y
        })
      ]),
      _: 3
    }, 8, ["tag", "groups", "prevent-root-drag", "data", "source", "index"]));
  }
}), F = { class: "dnd-kit-table" }, Z = /* @__PURE__ */ f({
  __name: "Table",
  setup(n) {
    return (d, r) => (u(), L("table", F, [
      g(d.$slots, "default")
    ]));
  }
}), N = /* @__PURE__ */ f({
  __name: "TableBody",
  props: {
    columns: {},
    data: {}
  },
  emits: ["drop"],
  setup(n, { emit: d }) {
    const r = d, e = (t) => {
      r("drop", t);
    };
    return (t, o) => (u(), v(S, {
      tag: "tbody",
      onDrop: e
    }, {
      default: m(() => [
        (u(!0), L(_, null, P(t.data, (s, p) => (u(), v(G, {
          key: p,
          class: "dnd-kit-table-row",
          tag: "tr",
          "prevent-root-drag": !1,
          source: t.data,
          index: p
        }, {
          default: m(() => [
            (u(!0), L(_, null, P(t.columns, (i) => (u(), L("td", {
              key: i.key,
              class: "dnd-kit-table-cell"
            }, [
              g(t.$slots, "cell", {
                row: s,
                column: i,
                value: s[i.key]
              }, () => [
                O(R(s[i.key]), 1)
              ])
            ]))), 128))
          ]),
          _: 2
        }, 1032, ["source", "index"]))), 128))
      ]),
      _: 3
    }));
  }
}), x = /* @__PURE__ */ f({
  __name: "TableHead",
  props: {
    columns: {}
  },
  emits: ["drop"],
  setup(n, { emit: d }) {
    const r = d;
    return (e, t) => (u(), v(S, {
      tag: "thead",
      source: e.columns,
      onDrop: t[0] || (t[0] = (o) => r("drop", o))
    }, {
      default: m(() => [
        $("tr", null, [
          (u(!0), L(_, null, P(e.columns, (o, s) => (u(), v(G, {
            key: o.key,
            class: "dnd-kit-table-header-cell",
            tag: "th",
            index: s,
            source: e.columns
          }, {
            default: m(() => [
              O(R(s) + " ", 1),
              g(e.$slots, "column", { column: o }, () => [
                O(R(o.name), 1)
              ])
            ]),
            _: 2
          }, 1032, ["index", "source"]))), 128))
        ])
      ]),
      _: 3
    }, 8, ["source"]));
  }
});
export {
  G as Draggable,
  S as Droppable,
  U as Kanban,
  X as KanbanColumn,
  Y as KanbanItem,
  Z as Table,
  N as TableBody,
  x as TableHead,
  Q as classNames
};
//# sourceMappingURL=vue-dnd-kit-components.es.js.map