@vue-dnd-kit/core 2.4.7 → 3.0.0-beta.2

package/dist/devtools.js

@@ -0,0 +1,569 @@
+import { toValue as $, unref as z, getCurrentScope as H, watch as k, nextTick as q, shallowReactive as C, toRaw as T, isRef as G, triggerRef as W, getCurrentInstance as B, effectScope as U, onScopeDispose as Z } from "vue";
+const V = (e) => ({
+  id: e.id,
+  ids: [...e.ids],
+  items: e.items.map(({ id: o, type: t, data: n, item: a }) => a === void 0 ? { id: o, type: t, data: n } : { id: o, type: t, data: n, item: a }),
+  type: e.type,
+  sensor: e.sensor,
+  element: e.element,
+  rect: e.rect
+}), D = (e) => e && { id: e.id, accepted: e.accepted, data: e.data, element: e.element, rect: e.rect }, J = (e) => {
+  const o = e.active.value;
+  return {
+    status: e.status.value,
+    active: o && V(o),
+    over: D(e.over.value),
+    pointer: e.pointer.value,
+    transform: e.transform.value,
+    mode: e.mode.value,
+    landingKey: e.landingKey.value,
+    landings: [...e.landings.value],
+    fitSize: e.fitSize.value,
+    overlay: !!o && e.hasOverlay,
+    overlayElement: e.overlayElement.value,
+    previews: [...e.previewIds],
+    // A decided drop lands as a flight, the drag state already gone: the latest one.
+    settling: e.flights.value.length > 0,
+    dropTarget: D(e.flights.value.at(-1)?.over ?? null),
+    autoScrolling: e.isAutoScrolling.value,
+    activation: e.activationProgress.value,
+    // The live region adds a space to repeat a text (screen readers speak changes only).
+    announcement: e.announcement.value.trim()
+  };
+}, Q = (e) => ({
+  activeKey: e.activeKey,
+  lead: e.lead,
+  keys: [...e.keys],
+  origin: { ...e.origin },
+  slot: e.slot,
+  list: e.list,
+  // The session's own mode: a held exchange shows in the drag's `mode` ('swap').
+  kind: e.mode.name,
+  block: [...e.block],
+  swap: e.swap,
+  removed: e.removed
+}), X = (e, o) => {
+  const t = o.result?.event;
+  return t ? {
+    group: e.name,
+    keys: [...t.keys],
+    accepted: [...t.accepted],
+    rejected: [...t.rejected],
+    from: { ...t.from },
+    to: { ...t.to },
+    sameList: t.sameList,
+    mode: t.mode,
+    ...t.partner ? { partner: t.partner.key } : {},
+    result: t.result,
+    defaultPrevented: t.defaultPrevented
+  } : null;
+}, F = (e, o, t) => {
+  const n = e.active.value;
+  if (!n) return null;
+  if (o.isDisabled()) return !1;
+  const a = e.over.value;
+  return a?.id === o.id ? a.accepted : t && t.session.value?.mode.name === "insert" ? null : o.accepts(n);
+}, Y = (e, o, t) => {
+  const n = t.getKeys(), a = e.getDroppable(t.id);
+  return {
+    id: t.id,
+    kind: t.layout.nested ? "tree" : "list",
+    group: o.name,
+    strategy: t.strategy(),
+    placeholder: t.placeholder(),
+    behavior: t.behavior?.() ?? "sort",
+    multiple: t.multiple?.() ?? "stack",
+    pull: t.pull(),
+    sort: t.canSort(),
+    dropOutside: t.dropOutside(),
+    acceptMode: t.acceptMode?.() ?? "all",
+    disabled: t.isDisabled(),
+    controlled: t.isReadonly(),
+    count: n.length,
+    keys: n,
+    draft: t.draft.value,
+    element: t.getElement(),
+    over: e.over.value?.id === t.id,
+    accepting: a ? F(e, a, o) : null
+  };
+}, ee = (e, o) => {
+  const t = o.session.value;
+  return {
+    name: o.name,
+    lists: [...o.lists.values()].map((n) => Y(e, o, n)),
+    session: t && Q(t),
+    indicator: o.indicator.value
+  };
+}, te = (e, o, t) => ({
+  id: o.id,
+  type: o.getTypes(),
+  disabled: o.isDisabled(),
+  selected: e.selection.has(o.id),
+  dragging: e.active.value?.ids.includes(o.id) ?? !1,
+  element: o.getElement(),
+  handle: o.getHandle(),
+  data: o.getData(),
+  // Sortable items have a container: their list.
+  list: o.getContainer ? t.get(o.id) ?? null : null
+}), oe = (e, o, t) => ({
+  id: o.id,
+  // A function is a rule, not a getter: `unref`, as the droppable reads it.
+  accept: z(o.options?.accept),
+  acceptMode: $(o.options?.acceptMode) ?? "all",
+  priority: o.getPriority(),
+  disabled: o.isDisabled(),
+  over: e.over.value?.id === o.id,
+  accepting: F(e, o, t),
+  element: o.getElement(),
+  data: o.getData(),
+  sortable: !!o.sortable
+}), se = (e, o) => {
+  const t = [...o].filter((s) => s.lists.size > 0), n = /* @__PURE__ */ new Map(), a = /* @__PURE__ */ new Map();
+  for (const s of t)
+    for (const r of s.lists.values()) {
+      a.set(r.id, s);
+      for (const i of r.draft.value ?? r.getKeys()) n.set(i, r.id);
+    }
+  return {
+    status: e.status.value,
+    options: { ...e.props },
+    draggables: [...e.getDraggables()].map((s) => te(e, s, n)),
+    droppables: [...e.getDroppables()].map(
+      (s) => oe(e, s, s.sortable ? a.get(s.id) : void 0)
+    ),
+    groups: t.map((s) => ee(e, s)),
+    selection: [...e.selection],
+    session: J(e)
+  };
+}, ne = (e, o) => {
+  const t = new Set(e), n = new Set(o), a = o.filter((p) => !t.has(p)), s = e.filter((p) => !n.has(p)), r = o.filter((p) => t.has(p)), i = e.filter((p) => n.has(p)), v = r.some((p, y) => p !== i[y]);
+  return a.length || s.length || v ? { added: a, removed: s, reordered: v } : null;
+};
+function re(e, o) {
+  const t = H();
+  let n = !1;
+  const a = [
+    k(
+      e.session,
+      (s, r) => {
+        const i = r && X(e, r);
+        i && o.drop(i);
+      },
+      { flush: "sync" }
+    )
+  ];
+  return q(() => {
+    if (n || !t?.active) return;
+    const s = t.run(
+      () => k(
+        () => [...e.lists.values()].filter((r) => r.animate?.()).map((r) => [r.id, r.getKeys()]),
+        (r, i) => {
+          if (e.dragPass || e.session.value) return;
+          const v = new Map(i);
+          for (const [p, y] of r) {
+            const w = v.has(p) && ne(v.get(p), y);
+            w && o.change({ type: "change", group: e.name, list: p, ...w });
+          }
+        },
+        { flush: "pre" }
+      )
+    );
+    s && a.push(s);
+  }), () => {
+    n = !0, a.forEach((s) => s());
+  };
+}
+const R = {
+  disabled: ["isDisabled", (e) => !!e],
+  keyboardMode: ["getKeyboard", (e) => e],
+  activation: ["getActivation", (e) => e]
+}, _ = /* @__PURE__ */ new Set(["disabled", "priority", "accept", "acceptMode"]), le = /* @__PURE__ */ new Set(["animation", "accept", "overlay"]), L = (e, o) => `${e.kind === "provider" ? e.kind : `${e.kind}:${typeof e.id}:${e.id}`}|${o}`, ce = (e, o) => e.kind === o.kind && (e.kind === "provider" || e.id === o.id);
+function ie(e, o) {
+  const t = C(/* @__PURE__ */ new Map()), n = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new WeakMap();
+  let s = [], r = !1;
+  const i = (l) => {
+    if (l.kind === "provider") return T(e.props);
+    if (l.kind === "list") {
+      for (const h of o()) if (h.id === l.id) return h.options ? T(h.options) : null;
+      return null;
+    }
+    const d = l.kind === "droppable" ? e.getDroppable(l.id) : void 0;
+    return d && !d.sortable && d.options ? T(d.options) : null;
+  }, v = (l, d, h, f) => {
+    let m = n.get(l);
+    if (m?.has(d)) return !0;
+    const g = Object.getOwnPropertyDescriptor(l, d);
+    let b = g?.value;
+    const c = g?.get ? () => g.get.call(l) : () => b;
+    try {
+      Object.defineProperty(l, d, {
+        configurable: !0,
+        enumerable: g?.enumerable ?? !1,
+        get: () => {
+          const u = t.get(h);
+          return u ? u.value : c();
+        },
+        set: (u) => {
+          g?.set ? g.set.call(l, u) : b = u;
+        }
+      });
+    } catch {
+      return !1;
+    }
+    return m || n.set(l, m = /* @__PURE__ */ new Map()), m.set(d, c), s.push(() => {
+      m.delete(d), g ? Object.defineProperty(l, d, g.get || g.set ? g : { ...g, value: c() }) : delete l[d];
+    }), f ? C(l)[d] = c() : G(b) && W(b), !0;
+  }, p = (l, d, h) => {
+    const f = R[d];
+    if (!f) return !1;
+    const [m, g] = f;
+    let b = a.get(l);
+    if (b?.has(m)) return !0;
+    const c = l[m];
+    return b || a.set(l, b = /* @__PURE__ */ new Map()), b.set(m, c), l[m] = (() => {
+      const u = t.get(h);
+      return u ? g(u.value) : c?.call(l);
+    }), s.push(() => {
+      b.delete(m), c ? l[m] = c : delete l[m];
+    }), !0;
+  }, y = ({ target: l, option: d }, h) => {
+    if (l.kind === "draggable") {
+      const m = e.getDraggable(l.id);
+      return !!m && p(m, d, h);
+    }
+    if (l.kind === "droppable" && !_.has(d)) return !1;
+    const f = i(l);
+    return !!f && v(f, d, h, l.kind === "provider");
+  }, w = () => {
+    for (const [l, d] of t) y(d, l);
+  }, x = () => {
+    if (r) return;
+    r = !0;
+    const { registerDraggable: l, registerDroppable: d } = e;
+    e.registerDraggable = (h) => {
+      const f = l(h);
+      return w(), f;
+    }, e.registerDroppable = (h) => {
+      const f = d(h);
+      return w(), f;
+    }, s.push(() => {
+      e.registerDraggable = l, e.registerDroppable = d, r = !1;
+    });
+  }, E = () => {
+    const l = s;
+    s = [];
+    for (let d = l.length - 1; d >= 0; d--) l[d]();
+    t.clear();
+  };
+  return {
+    set(l, d, h) {
+      const f = L(l, d), m = t.get(f);
+      return t.set(f, { target: l, option: d, value: h }), y({ target: l, option: d }, f) ? (l.kind !== "provider" && x(), !0) : (m ? t.set(f, m) : t.delete(f), !1);
+    },
+    reset(l, d) {
+      if (!l) return E();
+      for (const [h, f] of [...t])
+        ce(f.target, l) && (d === void 0 || f.option === d) && t.delete(h);
+      t.size || E();
+    },
+    read(l, d) {
+      const h = t.has(L(l, d));
+      if (l.kind === "draggable") {
+        const b = e.getDraggable(l.id), c = R[d]?.[0];
+        if (!b || !c) return;
+        const u = a.get(b)?.has(c) ? a.get(b).get(c) : b[c];
+        return { value: b[c]?.(), code: u?.call(b), overridden: h };
+      }
+      if (l.kind === "droppable" && !_.has(d)) return;
+      const f = i(l);
+      if (!f) return;
+      const m = n.get(f)?.get(d), g = f[d];
+      return {
+        value: l.kind === "provider" ? g : le.has(d) ? z(g) : $(g),
+        code: m ? m() : g,
+        overridden: h
+      };
+    },
+    list: () => [...t.values()].map(({ target: l, option: d, value: h }) => ({ target: l, option: d, value: h }))
+  };
+}
+let ae = 0;
+const de = (e) => {
+  const o = e?.parent?.type, t = o?.name ?? o?.__name ?? o?.__file?.match(/([^/\\]+)\.vue$/)?.[1];
+  return t ? `DnDProvider · ${t}` : "DnDProvider";
+};
+function ue(e, o) {
+  const t = B(), n = /* @__PURE__ */ new Map();
+  let a = null, s = null, r = 0, i = null, v = null, p = [], y = null;
+  const w = ie(e, () => [...n.keys()].flatMap((c) => [...c.lists.values()])), x = (c) => a.run(
+    () => re(c, {
+      drop: (u) => p.push(u),
+      change: (u) => l(u)
+    })
+  ), E = {
+    id: `provider-${++ae}`,
+    label: de(t),
+    app: t?.appContext.app ?? null,
+    // What `useDnDContext()` hands out: the manager, opaque.
+    context: e,
+    snapshot() {
+      for (const [c, u] of n)
+        c.lists.size || (u?.(), n.delete(c));
+      return se(e, n.keys());
+    },
+    cancel: () => e.cancel(),
+    clearSelection: () => e.selection.clear(),
+    overrides: w,
+    addGroup(c) {
+      n.has(c) || n.set(c, a && x(c));
+    },
+    sensorStarts(c, u, S) {
+      y = { id: c, sensor: { name: u?.name, touch: S } };
+    },
+    follow() {
+      if (!a) {
+        a = U(!0), s = e.addMonitor(g);
+        for (const c of n.keys()) n.set(c, x(c));
+        a.run(b);
+      }
+    },
+    stop() {
+      a?.stop(), s?.(), a = s = null, n.clear(), w.reset();
+    }
+  }, l = (c) => o(E, c), d = () => v === null ? null : Math.round(performance.now() - v), h = () => {
+    const c = p;
+    return p = [], c;
+  }, f = () => {
+    i = null, v = null;
+  }, m = (c) => {
+    for (const u of n.keys()) {
+      const S = u.session.value;
+      if (S?.activeKey === c) return S.origin.list;
+    }
+    return null;
+  }, g = {
+    onDragStart(c) {
+      r++, f(), p = [];
+      const u = y?.id === c.active.id ? y.sensor : null;
+      y = null, l({
+        type: "start",
+        drag: r,
+        active: V(c.active),
+        pointer: c.pointer,
+        source: c.source?.list ?? m(c.active.id),
+        sensor: u
+      });
+    },
+    onDragOver(c) {
+      const u = i;
+      i = c.over?.id ?? null, l({ type: "over", drag: r, over: D(c.over), previous: u });
+    },
+    onDragMove: () => l({ type: "move", drag: r }),
+    onBeforeDrop(c) {
+      v = performance.now(), l({ type: "release", drag: r, over: D(c.over) });
+    },
+    onDragEnd(c) {
+      const u = new Set(c.accepted);
+      l({
+        type: "drop",
+        drag: r,
+        over: D(c.over),
+        dropped: c.dropped,
+        accepted: [...c.accepted],
+        rejected: c.active.ids.filter((S) => !u.has(S)),
+        waited: d() ?? 0,
+        sortable: h()
+      }), f();
+    },
+    onDragCancel(c) {
+      const u = v === null ? "cancelled" : c.over && !c.over.accepted ? "refused" : "rejected";
+      l({ type: "cancel", drag: r, reason: u, over: D(c.over), waited: d(), sortable: h() }), f();
+    }
+  }, b = () => {
+    const c = { flush: "sync" };
+    k(e.status, (u) => l({ type: "status", status: u }), c), k(e.isAutoScrolling, (u) => l({ type: "autoScroll", scrolling: u }), c), k(
+      e.announcement,
+      (u) => {
+        u.trim() && l({ type: "announcement", text: u.trim() });
+      },
+      c
+    ), k(
+      () => [...e.selection],
+      (u) => l({ type: "selection", ids: u })
+    );
+  };
+  return E;
+}
+const pe = 200, I = 4, O = (e) => e.split(" "), N = new Set(
+  O(
+    "color font-family font-size font-weight font-style font-variant font-feature-settings line-height letter-spacing text-align text-transform text-shadow white-space word-break overflow-wrap direction visibility list-style-type"
+  )
+), fe = [
+  ...N,
+  ...O(
+    "display opacity filter box-shadow outline background overflow text-overflow text-decoration-line border-radius padding border-width border-style border-color flex-flow place-content place-items gap position z-index vertical-align flex object-fit"
+  )
+], K = O("grid-template-columns grid-template-rows margin inset transform translate rotate scale"), ve = O("width height"), P = (e, o, t = /* @__PURE__ */ new Map()) => {
+  for (const n of o) t.set(n, e.getPropertyValue(n));
+  return t;
+}, he = (e, o) => {
+  const t = [{ source: e, clone: o, passes: [] }];
+  for (const n of t)
+    n.source.localName !== "svg" && [...n.source.children].forEach((a, s) => {
+      const r = n.clone.children[s];
+      r && t.length < pe && t.push({ source: a, clone: r, parent: n, passes: [] });
+    });
+  return t;
+}, me = (e, o) => {
+  for (let t = 0; t < e.length; t++) {
+    const n = e.item(t);
+    n.startsWith("--") && o.set(n, e.getPropertyValue(n));
+  }
+  return o;
+}, ge = (e) => {
+  const o = getComputedStyle(e.source), { parent: t } = e, n = P(o, t ? ve : []), a = P(o, fe);
+  e.passes = [
+    t ? a : me(o, a),
+    P(o, t ? K : K.slice(0, 2)),
+    n,
+    n,
+    /* @__PURE__ */ new Map()
+  ];
+}, be = (e, o) => {
+  try {
+    return e.styleMap ??= e.source.computedStyleMap?.() ?? null, e.styleMap?.get(o)?.toString();
+  } catch {
+  }
+}, ye = (e, o) => {
+  const { clone: t, parent: n, passes: a } = e, s = getComputedStyle(t), r = [];
+  for (const [i, v] of a[o]) {
+    let p = s.getPropertyValue(i);
+    const y = N.has(i);
+    if (a[I].set(i, p), y && n && p === n.passes[I].get(i) && (p = n.passes[0].get(i)), p === v || o > 1 && Math.abs(parseFloat(p) - parseFloat(v)) < 0.5) continue;
+    const w = o % 3 || y ? be(e, i) : void 0;
+    o === 2 && /^[a-z-]*$/.test(w + "") || r.push(() => t.style.setProperty(i, w ?? v));
+  }
+  return r;
+}, we = (e, o) => {
+  const t = e.map((s) => ({ ...s, entries: he(s.source, s.clone) }));
+  for (const s of t) s.entries.forEach(ge);
+  const n = t.map((s) => s.source.getBoundingClientRect()), a = t.map((s, r) => {
+    const i = document.createElement("div");
+    return i.style.cssText = `position:fixed;contain:strict;width:${n[r].width}px;height:${n[r].height}px`, i.appendChild(s.mount), i;
+  });
+  o.append(...a);
+  try {
+    for (let s = 0; s < 4; s++) {
+      for (const r of t) r.mount.getAnimations?.({ subtree: !0 }).forEach((i) => i.cancel());
+      t.flatMap((r) => r.entries.flatMap((i) => ye(i, s))).forEach((r) => r());
+    }
+  } finally {
+    for (const s of t) s.mount.remove();
+    for (const s of a) s.remove();
+  }
+};
+let Se = 0;
+const ke = (e, o) => {
+  const t = e.querySelectorAll("input, textarea, select"), n = o.querySelectorAll("input, textarea, select"), a = `-dnd-clone-${++Se}`;
+  t.forEach((s, r) => {
+    const i = n[r];
+    i && (s instanceof HTMLInputElement && i instanceof HTMLInputElement ? (i.value = s.value, i.checked = s.checked, s.type === "radio" && s.name && (i.name = s.name + a)) : s instanceof HTMLTextAreaElement && i instanceof HTMLTextAreaElement ? i.value = s.value : s instanceof HTMLSelectElement && i instanceof HTMLSelectElement && (i.selectedIndex = s.selectedIndex));
+  });
+}, De = (e, o) => {
+  const t = e.querySelectorAll("canvas"), n = o.querySelectorAll("canvas");
+  t.forEach((a, s) => {
+    const r = n[s];
+    try {
+      r?.getContext("2d")?.drawImage(a, 0, 0);
+    } catch {
+    }
+  });
+}, Ee = (e, o) => {
+  const t = document.createElement("table"), n = document.createElement("tbody");
+  t.style.borderCollapse = "collapse", t.style.width = "100%", t.style.height = "100%";
+  const a = o.children;
+  return Array.from(e.children).forEach((s, r) => {
+    const i = a[r]?.getBoundingClientRect().width;
+    i && (s.style.width = `${i}px`);
+  }), n.appendChild(e), t.appendChild(n), t;
+}, Me = ".v-ripple__container, .q-ripple, .p-ink, .n-base-wave", j = /* @__PURE__ */ new WeakSet(), xe = (e) => {
+  for (const o of e.querySelectorAll("*"))
+    (j.has(o) || o.matches(Me)) && o.remove();
+}, Oe = (e) => {
+  const o = e.cloneNode(!0);
+  for (const t of [o, ...o.querySelectorAll("*")]) {
+    t.removeAttribute("id"), t.hasAttribute("data-dnd-no-clone") && j.add(t);
+    for (const n of t.getAttributeNames())
+      n.startsWith("data-dnd-") && t.removeAttribute(n);
+  }
+  return ke(e, o), De(e, o), o.setAttribute("aria-hidden", "true"), o.removeAttribute("tabindex"), o;
+}, Ce = (e, o = {}) => Pe([e], o)[0], Te = (e) => {
+  const o = Oe(e), t = getComputedStyle(e), n = document.createElement("div");
+  n.style.cssText = "width:100%;height:100%";
+  for (let a = 0; a < t.length; a++) {
+    const s = t.item(a);
+    s.startsWith("--") && n.style.setProperty(s, t.getPropertyValue(s));
+  }
+  return Object.assign(o.style, {
+    width: "100%",
+    height: "100%",
+    margin: "0",
+    boxSizing: "border-box",
+    transform: "none",
+    translate: "none",
+    transition: "none",
+    pointerEvents: "none"
+  }), n.appendChild(e.tagName === "TR" ? Ee(o, e) : o), { source: e, clone: o, mount: n, positioned: t.position !== "static" };
+}, Pe = (e, { container: o } = {}) => {
+  const t = e.map(Te);
+  return we(t, o ?? document.body), t.map(({ clone: n, mount: a, positioned: s }) => (xe(n), n.style.removeProperty("transition"), s && Object.assign(n.style, { position: "relative", inset: "auto" }), a));
+}, A = "__VUE_DND_KIT_DEVTOOLS_HOOK__";
+let M = null;
+function Re() {
+  if (M) return M;
+  const e = /* @__PURE__ */ new Map(), o = /* @__PURE__ */ new Set(), t = (r) => {
+    for (const i of o)
+      try {
+        r(i);
+      } catch (v) {
+        console.error(v);
+      }
+  }, n = () => [...o].some((r) => r.event), a = {
+    provider(r) {
+      if (e.has(r)) return;
+      const i = ue(r, (v, p) => t((y) => y.event?.(v, p)));
+      e.set(r, i), n() && i.follow(), H() && Z(() => {
+        e.get(r) === i && (i.stop(), e.delete(r), t((v) => v.removed?.(i)));
+      }), t((v) => v.added?.(i));
+    },
+    group(r) {
+      e.get(r.manager)?.addGroup(r);
+    },
+    sensor(r, i, v, p) {
+      e.get(r)?.sensorStarts(i, v, p);
+    }
+  };
+  globalThis[A] = a;
+  const s = {
+    providers: () => [...e.values()],
+    subscribe(r) {
+      if (o.add(r), r.event) for (const i of e.values()) i.follow();
+      return () => {
+        o.delete(r);
+      };
+    },
+    disconnect() {
+      const r = globalThis;
+      r[A] === a && delete r[A];
+      for (const i of e.values()) i.stop();
+      e.clear(), o.clear(), M === s && (M = null);
+    }
+  };
+  return M = s, s;
+}
+export {
+  Ce as clonePreview,
+  Re as connectDevtools,
+  Oe as copyElement
+};
+//# sourceMappingURL=devtools.js.map