vue-fluid-dnd/dist/vue-fluid-dnd.js

A Vue 3 drag and drop library to sort all kind of lists

var me = Object.defineProperty;
var Se = (e, t, n) => t in e ? me(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
var V = (e, t, n) => Se(e, typeof t != "symbol" ? t + "" : t, n);
import { ref as ve, watch as De } from "vue";
const Q = "draggable", Vt = "droppable", Ot = "handler-class", qt = "dragging", It = "dragging-handler-class", Wt = "dropping", se = "grabbing", Xt = "grab", Jt = "disable-transition", nt = (e, t) => e.classList.contains(t), gt = (e, t, n = !1) => {
  e.classList.toggle(t, n);
}, U = (e, t) => {
  e.classList.add(t);
}, Ct = (e, t) => {
  e.classList.remove(t);
}, be = (e, t) => yt(t).every(
  (n) => nt(e, n)
), dt = (e) => e ? `.${yt(e).join(".")}` : "", Te = (e, t) => {
  if (!t)
    return;
  const n = yt(t);
  e.classList.add(...n);
}, yt = (e) => e ? e.split(" ").filter((t) => t) : [];
class Ee {
  constructor() {
    V(this, "handlers");
    this.handlers = [];
  }
  addSubscriber(t) {
    this.handlers.includes(t) || (this.handlers.push(t), U(t, Xt));
  }
  toggleGrabClass(t) {
    for (const n of this.handlers)
      gt(n, Xt, t);
  }
}
const Ce = (e, t) => {
  const n = e.value;
  if (n.length <= 0)
    return;
  const [s] = n.splice(t, 1);
  return s;
}, ye = (e, t, n) => {
  e.value.splice(t, 0, n);
}, Ae = (e) => e.value.length, xe = (e, t) => e.value[t], _ = "horizontal", tt = "vertical", we = () => {
  const { scrollX: e, scrollY: t } = window;
  return { scrollX: e, scrollY: t };
}, zt = (e) => !e || e.trim().length == 0 || e == "normal" ? 0 : parseFloat(e), Be = (e) => e ? parseInt(e) : -1, Le = (e) => {
  const t = getComputedStyle(e), n = new DOMMatrixReadOnly(t.transform);
  return {
    x: n.m41,
    y: n.m42
  };
}, oe = (e, t) => e.x1 > t.x1 ? oe(t, e) : e.x2 < t.x1 ? 0 : e.x2 >= t.x2 ? e.x2 - e.x1 : e.x2 - t.x1, ht = (e, t) => !Re(e, t), Re = (e, t) => {
  const n = Mt(e), s = Mt(t), o = Kt(n, s, tt), r = Kt(n, s, _);
  return o >= Math.min(n.height, s.height) / 2 && r >= Math.min(n.width, s.width) / 2;
}, Kt = (e, t, n) => {
  const { before: s, distance: o } = w(n);
  return oe(
    {
      x1: e[s],
      x2: e[s] + e[o]
    },
    {
      x1: t[s],
      x2: t[s] + t[o]
    }
  );
}, L = (e, t) => e ? zt(getComputedStyle(e)[t]) : 0, Qt = (e) => {
  const { scrollLeft: t, scrollTop: n } = e;
  return { scrollLeft: t, scrollTop: n };
}, Mt = (e) => e.getBoundingClientRect(), w = (e) => {
  const t = e == _;
  return {
    beforeMargin: t ? "marginLeft" : "marginTop",
    afterMargin: t ? "marginRight" : "marginBottom",
    borderBeforeWidth: t ? "borderLeftWidth" : "borderTopWidth",
    before: t ? "left" : "top",
    after: t ? "right" : "down",
    gap: t ? "columnGap" : "rowGap",
    distance: t ? "width" : "height",
    axis: t ? "x" : "y",
    offset: t ? "offsetX" : "offsetY",
    scroll: t ? "scrollX" : "scrollY",
    scrollElement: t ? "scrollLeft" : "scrollTop",
    page: t ? "pageX" : "pageY",
    inner: t ? "innerWidth" : "innerHeight",
    offsetElement: t ? "offsetLeft" : "offsetTop",
    scrollDistance: t ? "scrollWidth" : "scrollHeight",
    clientDistance: t ? "clientWidth" : "clientHeight",
    paddingBefore: t ? "paddingLeft" : "paddingTop",
    getRect: Mt
  };
}, Lt = (e, t) => Oe(e, t), re = (e) => [...e.children].filter(
  (n) => nt(n, Q)
), Oe = (e, t) => {
  const n = [...t.children].filter(
    (o) => nt(o, Q) && !o.isEqualNode(e)
  ).toReversed(), s = [...t.children].findLastIndex(
    (o) => o.isEqualNode(e)
  );
  return [
    n,
    s,
    t
  ];
}, Me = (e) => {
  let t = e.parentElement;
  for (; t; ) {
    if (window.getComputedStyle(t).position === "fixed")
      return t;
    t = t.parentElement;
  }
  return null;
}, ie = (e, t) => {
  const {
    before: n,
    borderBeforeWidth: s
  } = w(t), o = Me(e);
  return o ? Mt(o)[n] + L(o, s) : 0;
}, Yt = (e) => window.TouchEvent && e instanceof TouchEvent, at = (e) => e instanceof HTMLElement, ce = (e) => e instanceof MouseEvent, Pe = ["onmouseup", "onmousedown", "onmousemove"], Ne = (e, t, n) => {
  e && (e.style.height = `${t}px`, e.style.width = `${n}px`);
}, Tt = (e, t, n) => {
  !e || !at(e) || (n == 0 && t == 0 ? e.style.transform = "" : e.style.transform = `translate(${n}px,${t}px)`);
}, Fe = (e, t, n) => {
  e[t] = (s) => {
    if (s.defaultPrevented)
      return;
    const o = Ht(s);
    n(o);
  };
}, $t = (e, t, n) => {
  n && ($e(t) ? e[t] = n : Fe(e, t, n));
}, $e = (e) => Pe.includes(e), Ge = (e) => {
  const { target: t } = e;
  return {
    clientX: 0,
    clientY: 0,
    pageX: 0,
    pageY: 0,
    screenX: 0,
    screenY: 0,
    target: t,
    offsetX: 0,
    offsetY: 0
  };
}, Ve = (e, t) => {
  const n = (s, o) => We(t, window, o, s);
  if (ce(e)) {
    const { offsetX: s, offsetY: o } = e;
    return [s, o];
  } else {
    const s = e.target;
    return [
      n(s, _),
      n(s, tt)
    ];
  }
}, Ht = (e) => {
  const t = Ie(e);
  if (!t)
    return Ge(e);
  const [n, s] = Ve(e, t), { clientX: o, clientY: r, pageX: a, pageY: l, screenX: u, screenY: h, target: p } = t;
  return {
    clientX: o,
    clientY: r,
    pageX: a,
    pageY: l,
    screenX: u,
    screenY: h,
    target: p,
    offsetX: n,
    offsetY: s
  };
}, Ie = (e) => {
  if (Yt(e))
    return e.touches[0] ?? e.changedTouches[0];
  if (ce(e))
    return e;
}, We = (e, t, n, s) => {
  const { page: o, scroll: r, before: a, borderBeforeWidth: l, getRect: u } = w(n), h = u(s);
  return e[o] - t[r] - h[a] - L(s, l);
}, Nt = (e, t, n = "ease-out", s = "transform") => {
  at(e) && (e.style.transitionDuration = `${t}ms`, e.style.transitionTimingFunction = `${n}`, e.style.transitionProperty = `${s}`);
}, ae = (e, t, n) => {
  !e || !at(e) || (e[t] = () => {
    n();
  });
}, Xe = (e) => {
  var t = e.querySelector("style");
  if (!t) {
    var n = document.createElement("style");
    return e.appendChild(n), n;
  }
  return t;
}, Ye = (e, t) => {
  const n = /\.-?[_a-zA-Z0-9-*\s<>():]+/g, [s] = t.match(n) || [];
  for (const o of e.cssRules) {
    const [r] = o.cssText.match(n) || [];
    if (s === r)
      return !0;
  }
  return !1;
}, He = (e, t) => {
  t.forEach((n) => {
    _e(e, n);
  });
}, _e = (e, t) => {
  var s;
  var n = Xe(e);
  n.sheet && (Ye(n.sheet, t) || (s = n.sheet) == null || s.insertRule(t, n.sheet.cssRules.length));
}, le = (e, t = {}) => {
  for (const n of Object.keys(t)) {
    const s = t[n];
    s != null && qe(e, `--${n}`, s);
  }
}, qe = (e, t, n) => e && e.style.setProperty(t, n), ue = "startDrag", Pt = "drag", jt = "startDrop", ze = "drop", pt = "temp-child", fe = "cubic-bezier(0.2, 0, 0, 1)", je = (e) => e === ze || e === jt, _t = (e) => !e || e.length == 0 ? 0 : zt(e.replace("px", "")), ke = (e, t) => {
  const n = getComputedStyle(e)[t];
  if (n.match("%")) {
    const o = zt(n.replace("%", "")), { width: r } = e.getBoundingClientRect();
    return r * (o / 100);
  }
  return _t(n);
}, kt = (e, t) => {
  if (!(e instanceof Element))
    return [
      0,
      !1
    ];
  const n = ke(e, t), s = getComputedStyle(e).display, o = n > 0 || s === "flex";
  return [n, o];
}, Ze = (e) => {
  const { top: t, left: n } = getComputedStyle(e);
  return [_t(t), _t(n)];
}, Je = (e, t) => {
  const { gap: n } = w(t), [s, o] = kt(e, n);
  return o ? s : 0;
};
function Et(e, t, n, s, o = e.previousElementSibling, r = e.nextElementSibling) {
  let { height: a, width: l } = Ke(
    n,
    e,
    o,
    r
  );
  return ht(e, s) && t == Pt && (a = 0, l = 0), { height: a, width: l };
}
const Ke = (e, t, n, s) => {
  const {
    afterMargin: o,
    beforeMargin: r,
    distance: a,
    gap: l,
    getRect: u
  } = w(e), h = L(t, o), p = L(t, r), D = L(s, r), [R, m] = kt(
    t.parentElement,
    l
  ), B = u(t)[a];
  if (m)
    return Ut(B, p, h, R, 0, e);
  const [C, v, O] = Qe(
    n,
    D,
    h,
    p,
    o
  );
  return Ut(B, v, C, 0, O, e);
}, Qe = (e, t, n, s, o) => {
  const r = Math.max(t, n);
  let a = s, l = t;
  if (e) {
    const u = L(
      e,
      o
    );
    a = Math.max(u, s), l = Math.max(l, u);
  }
  return [r, a, l];
}, Ut = (e, t, n, s, o, r) => Ue(r, e + t + n + s - o), Ue = (e, t) => e == _ ? { width: t, height: 0 } : { width: 0, height: t }, te = (e, t) => {
  const {
    borderBeforeWidth: n,
    paddingBefore: s,
    axis: o,
    getRect: r
  } = w(e), a = L(t, n), l = L(t, s), u = r(t)[o];
  return a + l + u;
}, tn = (e, t) => {
  const [n, s] = Ze(t), o = te(tt, e);
  return [
    te(_, e) - s,
    o - n
  ];
};
function en(e, t, n, s, o, r, a, l, u) {
  let h = 0, p = 0;
  const D = !!(n < 0 && u);
  if (n === s && !D)
    return ee(
      { height: h, width: p },
      e,
      o,
      a,
      D
    );
  const [R, m, B, C] = on(t, n, s, u);
  if (D) {
    const [et, ot] = tn(l, u);
    h += ot, p += et;
  }
  const {
    scrollElement: v,
    beforeMargin: O,
    afterMargin: N,
    distance: I,
    gap: W
  } = w(e), [X, F] = kt(l, W), [
    st,
    q,
    P
  ] = cn(
    O,
    N,
    R,
    m == null ? void 0 : m.previousElementSibling,
    C,
    F,
    D
  ), [Z, z, j] = rn(
    O,
    N,
    I,
    B,
    X,
    F
  ), Y = sn(
    z,
    Z,
    j,
    q,
    st,
    X
  ), k = D ? l[v] : nn(v, l, r), $ = (C ? Y - P : P - Y) - k;
  return e === tt ? h += $ : e === _ && (p += $), ee(
    { height: h, width: p },
    e,
    o,
    a,
    D
  );
}
const nn = (e, t, n) => {
  const s = t[e], o = n[e];
  return s - o;
}, sn = (e, t, n, s, o, r) => {
  const a = Math.max(t, o);
  return Math.max(n, s) + e + a + r;
}, on = (e, t, n, s) => {
  const o = t < n, [r, a] = [t, n].toSorted(
    (p, D) => p - D
  ), l = e[t] ?? s, u = e[n];
  let h = o ? e.slice(r + 1, a + 1) : e.slice(r, a);
  return r < 0 && s && (h = e.slice(r + 1, a)), [
    l,
    u,
    h,
    o
  ];
}, rn = (e, t, n, s, o, r) => {
  if (s.length == 0)
    return [0, 0, 0];
  const a = L(s[0], e);
  let l = 0, u = -a;
  for (const [h, p] of s.entries()) {
    const D = p.getBoundingClientRect()[n], R = L(p, e);
    r && (l += R), r && h > 0 ? l += o : l = Math.max(l, R), u += l + D, l = L(p, t);
  }
  return [a, u, l];
}, ee = (e, t, n, s, o) => {
  const { scroll: r, distance: a } = w(t), l = window[r], u = n[r], h = o ? 0 : u - 2 * l + s[r];
  return e[a] += h, e;
}, cn = (e, t, n, s, o, r, a) => {
  const l = o ? n.previousElementSibling : s;
  return an(
    e,
    t,
    l,
    n,
    r,
    a
  );
}, an = (e, t, n, s, o, r) => {
  if (o)
    return [0, 0, 0];
  const a = L(
    r ? null : n,
    t
  ), l = L(s, e);
  let u = Math.max(a, l);
  return [a, l, u];
}, Zt = (e, t, n) => {
  const s = new MutationObserver((o) => {
    o.forEach((r) => {
      e(s, r);
    });
  });
  return s.observe(t, n), s;
}, ln = (e, t, n) => {
  n != 0 && (t === "vertical" ? e.scrollBy(0, n) : e.scrollBy(n, 0));
}, un = (e, t, n) => {
  const { scrollDistance: s, clientDistance: o, scrollElement: r } = w(e);
  return n[r] / (t[s] - t[o]);
}, fn = "startDrag", ge = "cubic-bezier(0.2, 0, 0, 1)", gn = (e, t, n) => {
  let s = Et(
    t,
    fn,
    n,
    e
  );
  const o = Je(e, n), { distance: r } = w(n);
  s[r] -= o;
  const [a, l] = dn(n, t);
  return s[l] = a, s;
}, dn = (e, t) => {
  const n = e == _ ? tt : _, { distance: s, getRect: o } = w(n);
  return [
    o(t)[s],
    s
  ];
}, mt = (e, t, n) => {
  Ne(e, t, n), e.style.minWidth = `${n}px`;
}, hn = (e, t, n) => (s) => {
  t.contains(e) && (mt(e, n.height, n.width), s.disconnect());
}, pn = (e, t) => {
  if (!t)
    return;
  const { droppable: n, config: s, scroll: o } = e, { direction: r } = s, a = un(s.direction, n, o) > 0.99, { scrollDistance: l, clientDistance: u, scrollElement: h } = w(r);
  a && (n[h] = n[l] - n[u]);
}, de = (e, t, n, s) => {
  if (!n)
    return;
  const { droppable: o, config: r } = n, { direction: a, animationDuration: l } = r;
  if (pn(n, t), o.querySelector(`.${pt}`) || !e)
    return;
  var u = e.tagName == "LI" ? "DIV" : e.tagName, h = document.createElement(u);
  U(h, pt), mt(h, 0, 0);
  const p = gn(o, e, a);
  return Nt(
    h,
    l,
    ge,
    "width, min-width, height"
  ), [h, p, o];
}, Gt = (e, t, n, s, o) => {
  const r = de(e, n, s);
  if (!r)
    return;
  const [a, l, u] = r;
  t.isSameNode(u) && mt(a, l.height, l.width), Zt(
    hn(a, u, l),
    u,
    {
      childList: !0,
      subtree: !0
    }
  ), u.appendChild(a);
}, mn = (e, t, n) => {
  const s = de(e, t, n);
  if (!s)
    return;
  const [o, r, a] = s;
  a.appendChild(o), Sn(o, r);
}, Sn = (e, t) => requestAnimationFrame(() => {
  mt(e, t.height, t.width), requestAnimationFrame(() => {
    Nt(
      e,
      0,
      ge,
      "width, min-width, height"
    );
  });
}), vn = (e, t, n, s, o = !0) => {
  if (n) {
    var r = document.querySelectorAll(
      `${dt(n)} > .${pt}`
    );
    r.forEach((a) => {
      const l = a.parentElement;
      if (l != null && l.isSameNode(t) || !o && (l != null && l.isSameNode(e)))
        return;
      mt(a, 0, 0), setTimeout(() => {
        var h;
        (h = a.parentNode) == null || h.removeChild(a);
      }, s);
    });
  }
}, bt = (e, t, n = !1) => {
  var s = e.querySelectorAll(`.${pt}`);
  s.forEach((o) => {
    n ? (mt(o, 0, 0), setTimeout(() => {
      e.contains(o) && e.removeChild(o);
    }, t)) : e.removeChild(o);
  });
}, Dn = 50;
function bn(e, t, n, s, o, r) {
  let a = t;
  const {
    direction: l,
    handlerSelector: u,
    onRemoveAtEvent: h,
    animationDuration: p,
    delayBeforeInsert: D,
    draggingClass: R
  } = e, m = (i, f, g, S, y) => {
    if (!S)
      return;
    const { droppable: b, config: T } = S, A = Et(
      i,
      f,
      T.direction,
      b
    );
    je(f) ? F(
      i,
      f,
      A,
      g,
      S,
      y
    ) : O(
      i,
      f,
      A,
      S
    );
  }, B = (i, f, g, S, y) => {
    const b = Et(
      f,
      "insert",
      e.direction,
      g
    ), { onInsertEvent: T } = e, A = re(g);
    for (const [M, x] of A.entries())
      nt(x, Q) && M >= i && X(x, b);
    y(), setTimeout(() => {
      T(i, S), bt(n, 0, !0), he(i, g, e), et(f), H(f, n);
    }, D);
  }, C = (i, f, g, S) => {
    if (!g || !g.droppable || !g.config)
      return;
    const { droppable: y, config: b } = g;
    let [T] = Lt(f, y);
    T = [f, ...T].toReversed();
    const A = Et(
      f,
      "remove",
      b.direction,
      y
    );
    for (const [M, x] of T.entries())
      M >= i && (W(x, A), setTimeout(() => {
        S(x);
      }, p));
  }, v = (i) => {
    bt(n, p, !0), setTimeout(() => {
      et(i), H(i, n);
    }, p);
  }, O = (i, f, g, S) => {
    const { config: y, droppable: b } = S, [T] = Lt(i, b), A = ht(i, b);
    T.length == 0 && I(
      g,
      1,
      y.direction,
      T
    );
    for (const [M, x] of T.entries()) {
      if (!nt(x, Q))
        continue;
      const G = N(
        y.direction,
        i,
        x,
        g
      );
      if (!A && G)
        g = G;
      else if (!A)
        continue;
      const J = T.length - M;
      I(
        g,
        J,
        y.direction,
        T
      ), f === ue ? W(x, g) : f === Pt && X(x, g);
    }
  }, N = (i, f, g, S) => {
    const { before: y, distance: b, axis: T, getRect: A } = w(i), M = A(f), x = A(g), G = M[y], J = x[y], ut = x[b], St = J + ut / 2, vt = Le(g)[T], ct = St - vt;
    return G > ct ? { height: 0, width: 0 } : S;
  }, I = (i, f, g, S) => {
    const y = S.filter(
      (T) => nt(T, Q)
    ).length, { distance: b } = w(g);
    i[b] == 0 ? a = Math.max(a, f) : a = Math.min(a, f - 1), a = Math.min(a, y);
  }, W = (i, f) => {
    const { width: g, height: S } = f;
    Tt(i, S, g);
  }, X = (i, f) => {
    const { width: g, height: S } = f;
    Tt(i, S, g), Nt(i, p, fe);
  }, F = (i, f, g, S, y, b) => {
    const { droppable: T, scroll: A, config: M } = y, [x, G] = Lt(
      i,
      T
    ), J = x.toReversed(), ut = G === -1 ? J.length : G;
    J.splice(ut, 0, i);
    const [St, vt, ct] = st(
      i,
      G,
      J,
      T
    );
    g = Et(
      i,
      f,
      M.direction,
      n,
      St,
      vt
    );
    const Ft = we(), At = en(
      M.direction,
      J,
      G,
      ct,
      Ft,
      A,
      S,
      T,
      i
    );
    x.length == 0 && q(
      void 0,
      g,
      i,
      At
    );
    for (const [xt, wt] of x.toReversed().entries()) {
      let Bt = g;
      ct - 1 >= xt && (Bt = { height: 0, width: 0 }), f === jt && !nt(wt, pt) && q(
        wt,
        Bt,
        i,
        At
      );
    }
    P(
      ct,
      i,
      M,
      T,
      b
    );
  }, st = (i, f, g, S) => {
    const b = ht(i, S) ? f : a, T = () => f < b ? [b, b + 1] : f > b ? [b - 1, b] : [b - 1, b + 1], [A, M] = T(), x = g[A] ?? null, G = g[M] ?? null;
    return [
      x,
      G,
      b
    ];
  }, q = (i, f, g, S) => {
    Tt(i, f.height, f.width), Tt(
      g,
      S.height,
      S.width
    );
  }, P = (i, f, g, S, y) => {
    const { onInsertEvent: b, onDragEnd: T } = g;
    U(f, Wt), j(f, n, S, () => {
      if (Ct(f, Wt), y != null) {
        const A = h(y);
        A != null && (b(i, A), T({ value: A, index: i })), z(f), Z();
      }
    });
  }, Z = () => {
    if (s) {
      var i = document.querySelectorAll(
        `${dt(s)} > .${Q}`
      );
      for (const f of i)
        $(f);
    }
  }, z = (i) => {
    setTimeout(() => {
      Ct(i, R);
    }, Dn);
  }, j = (i, f, g, S) => {
    setTimeout(() => {
      S && S(), Y(f, g), k(g), et(i), H(i, f), H(i, g);
    }, p);
  }, Y = (i, f) => {
    i.isSameNode(f) ? bt(i, p) : (bt(i, p, !0), bt(f, p));
  }, k = (i) => {
    if (n.isSameNode(i))
      return;
    var [f] = n.querySelectorAll(`.${pt}`);
    if (!f)
      return;
    const { distance: g } = w(l);
    at(f) && (f.style[g] = "0px");
  }, H = (i, f) => {
    const [g] = Lt(i, f);
    for (const S of [...g, i])
      $(S);
  }, $ = (i) => {
    at(i) && (i.style.transition = "", i.style.transform = "");
  }, et = (i) => {
    r(), lt(i, !1), i.style.transform = "", i.style.transition = "", i.style.top = "", i.style.left = "", le(i, {
      fixedHeight: "",
      fixedWidth: ""
    });
  }, ot = (i, f) => {
    const g = f.querySelector(u);
    gt(document.body, se, i), gt(g || f, It, i);
  }, lt = (i, f) => {
    gt(i, qt, f), ot(f, i), o.toggleGrabClass(!f);
  };
  return [
    m,
    C,
    B,
    v,
    lt
  ];
}
const he = (e, t, n) => {
  const { insertingFromClass: s, animationDuration: o } = n, r = Zt(() => {
    const l = re(t)[e];
    U(l, s), U(l, Jt), setTimeout(() => {
      Ct(l, Jt), Ct(l, s), r.disconnect();
    }, o);
  }, t, {
    childList: !0
  });
}, Tn = (e, t, n, s) => {
  if (!t)
    return;
  const { onInsertEvent: o, delayBeforeInsert: r } = e;
  setTimeout(() => {
    o(n, s), he(n, t, e);
  }, r);
};
class En {
  constructor(t, n) {
    V(this, "items");
    V(this, "parent");
    this.items = t, this.parent = n;
  }
  removeAtEvent(t) {
    return Ce(this.items, t);
  }
  insertEvent(t, n) {
    return ye(this.items, t, n);
  }
  getLength() {
    return Ae(this.items);
  }
  getValue(t) {
    return xe(this.items, t);
  }
  insertToListEmpty(t, n, s) {
    Tn(t, this.parent.value, n, s);
  }
}
const Cn = (e, t) => {
  const n = (a) => e.removeAtEvent(a), s = (a, l) => e.insertEvent(a, l), o = () => e.getLength(), r = (a) => e.getValue(a);
  return {
    direction: (t == null ? void 0 : t.direction) ?? tt,
    handlerSelector: (t == null ? void 0 : t.handlerSelector) ?? Q,
    draggingClass: (t == null ? void 0 : t.draggingClass) ?? "dragging",
    droppableClass: (t == null ? void 0 : t.droppableClass) ?? "droppable-hover",
    isDraggable: (t == null ? void 0 : t.isDraggable) ?? (() => !0),
    onDragStart: (t == null ? void 0 : t.onDragStart) ?? (() => {
    }),
    onDragEnd: (t == null ? void 0 : t.onDragEnd) ?? (() => {
    }),
    droppableGroup: t == null ? void 0 : t.droppableGroup,
    onRemoveAtEvent: n,
    onInsertEvent: s,
    onGetLegth: o,
    onGetValue: r,
    animationDuration: (t == null ? void 0 : t.animationDuration) ?? 150,
    removingClass: (t == null ? void 0 : t.removingClass) ?? "removing",
    insertingFromClass: (t == null ? void 0 : t.insertingFromClass) ?? "from-inserting",
    delayBeforeRemove: (t == null ? void 0 : t.delayBeforeRemove) ?? 200,
    delayBeforeInsert: (t == null ? void 0 : t.delayBeforeInsert) ?? 200
  };
}, yn = (e) => {
  let t = { offsetX: 0, offsetY: 0 }, n = { top: 0, left: 0 }, s = { x: 0, y: 0 };
  const o = (u) => {
    e.style.transform = `translate( ${u.x}px, ${u.y}px)`;
  }, r = (u) => {
    e.style.top = `${u.top}px`, e.style.left = `${u.left}px`;
  };
  return [
    (u, h, p, D) => {
      const R = (C) => {
        const {
          beforeMargin: v,
          borderBeforeWidth: O,
          before: N,
          offset: I,
          scroll: W,
          page: X,
          inner: F,
          distance: st,
          axis: q,
          getRect: P
        } = w(C), Z = p[X], z = window[W], j = window[F], Y = P(u)[st], k = L(u, O), H = L(u, v), $ = Z - t[I], et = ie(u, C);
        if ($ >= z - Y / 2 && $ <= z + j) {
          const lt = $ - n[N] - k - H - z - et;
          return m(C), lt;
        }
        return s[q];
      }, m = (C) => {
        if (u && nt(u, qt) && C === D) {
          const { before: v, distance: O, axis: N, getRect: I } = w(D), W = I(u)[O], X = I(h), F = n[v] - X[v] + s[N], q = X[O] - W, P = F / q, Z = W / q, z = 0.1, j = 0.2, Y = 0.8;
          let k = 0;
          const H = ht(u, h);
          !H && P < j && P > -Z ? k = P / j - 1 : !H && P > Y && P < 1 + Z && (k = 1 / (1 - Y) * (P - Y));
          const $ = z * W * k;
          ln(h, D, $);
        }
      }, B = (C) => {
        const { axis: v } = w(C);
        s[v] = R(C), o(s);
      };
      B(_), B(tt);
    },
    (u, h) => {
      const [p, D, R, m] = wn(
        u,
        h,
        e
      );
      n = {
        top: p,
        left: D
      }, r(n), t = { offsetX: R, offsetY: m };
    }
  ];
}, Rt = (e, t, n) => {
  const { borderBeforeWidth: s, before: o, getRect: r } = w(e);
  return r(t)[o] - r(n)[o] - L(n, s);
}, An = (e, t) => {
  let { offsetX: n, offsetY: s, target: o } = e, r = xn(o, t);
  const a = o;
  return a && r && !a.isSameNode(r) && (n += Rt(_, a, r), s += Rt(tt, a, r)), r && t != o && (n += Rt(_, r, t), s += Rt(tt, r, t)), [n, s];
}, xn = (e, t) => {
  const n = e == null ? void 0 : e.closest(`.${Ot}`);
  return n && n.isSameNode(t) ? e : n;
}, ne = (e, t, n, s) => {
  const { offset: o, beforeMargin: r, page: a, borderBeforeWidth: l, scroll: u } = w(e), h = ie(n, e);
  return t[a] - s[o] - L(n, r) - L(n, l) - window[u] - h;
}, wn = (e, t, n) => {
  const [s, o] = An(e, n);
  return [
    ne(tt, e, t, {
      offsetX: s,
      offsetY: o
    }),
    ne(_, e, t, {
      offsetX: s,
      offsetY: o
    }),
    s,
    o
  ];
}, K = class K {
  static addConfig(t, n) {
    const s = K.configs.filter(
      (r) => !r.droppable.isSameNode(t)
    ), o = Qt(t);
    s.push({
      droppable: t,
      config: n,
      scroll: o
    }), K.configs = s;
  }
  static updateScrolls(t, n) {
    for (const s of K.configs) {
      const { droppable: o } = s;
      (n && be(o, n) || o.isSameNode(t)) && (s.scroll = Qt(o));
    }
  }
  static getConfig(t) {
    return K.configs.find(
      ({ droppable: s }) => s.isSameNode(t)
    );
  }
};
V(K, "configs", []), V(K, "removeObsoleteConfigs", () => {
  const t = K.configs.filter(
    ({ droppable: n }) => document.contains(n)
  );
  K.configs = t;
});
let it = K;
class Bn {
  constructor(t, n, s, o, r) {
    V(this, "initial");
    V(this, "current");
    V(this, "parent");
    V(this, "draggableElement");
    V(this, "groupClass");
    V(this, "dragEvent");
    V(this, "changeDroppable");
    this.parent = s, this.draggableElement = t, this.groupClass = n, this.dragEvent = o, this.initial = s ? it.getConfig(s) : void 0, this.changeDroppable = r;
  }
  getDraggableAncestor(t, n, s) {
    return document.elementsFromPoint(t, n).filter((o) => !o.isSameNode(s));
  }
  getElementBelow(t, n, s = !0) {
    const o = (a) => {
      const [l] = a.getDraggableAncestor(
        n.clientX,
        n.clientY,
        t
      );
      return l;
    };
    let r = null;
    return s ? (t.hidden = !0, r = o(this), t.hidden = !1) : r = o(this), r;
  }
  getCurrent(t, n, s = !0) {
    const o = this.getElementBelow(t, n, s);
    return !this.groupClass || !o ? void 0 : o.closest(
      dt(this.groupClass)
    );
  }
  isOutsideOfAllDroppables(t) {
    return (this.groupClass ? Array.from(
      document.querySelectorAll(dt(this.groupClass))
    ) : [this.parent]).every(
      (s) => ht(t, s)
    );
  }
  isNotInsideAnotherDroppable(t, n) {
    return !ht(t, n) || this.isOutsideOfAllDroppables(t);
  }
  onScrollEvent() {
    this.dragEvent();
  }
  setOnScroll(t) {
    ae(t, "onscroll", () => {
      this.onScrollEvent();
    });
  }
  getCurrentConfig(t) {
    var o;
    const n = this.draggableElement;
    if (this.current && this.isNotInsideAnotherDroppable(
      n,
      (o = this.current) == null ? void 0 : o.droppable
    ))
      return this.current;
    const s = this.getCurrent(n, t);
    return s ? (at(s) && !s.onscroll && this.setOnScroll(s), it.getConfig(s)) : it.getConfig(this.parent);
  }
  updateConfig(t) {
    const n = this.current;
    this.current = this.getCurrentConfig(t), this.changeDroppable(this.current, n);
  }
  isOutside(t, n = !0) {
    const s = this.draggableElement;
    return !this.getCurrent(s, t, n);
  }
}
function Ln(e, t, n, s, o) {
  const {
    handlerSelector: r,
    isDraggable: a,
    droppableGroup: l,
    animationDuration: u,
    delayBeforeRemove: h,
    draggingClass: p,
    removingClass: D,
    onRemoveAtEvent: R,
    droppableClass: m,
    onDragStart: B
  } = n, C = yt(l).map((c) => `droppable-group-${c}`).join(" ");
  let v = 0, O = {
    scrollX: 0,
    scrollY: 0
  }, N = { pageX: 0, pageY: 0 }, I;
  const [W, X] = yn(
    e
  ), [
    F,
    st,
    q,
    P,
    Z
  ] = bn(
    n,
    t,
    s,
    C,
    o,
    () => v = 0
    /* NOT_DRAGGING */
  ), z = () => {
    U(e, Q);
  }, j = (c) => {
    U(c, Ot), o.addSubscriber(c);
  }, Y = () => {
    if (a(e)) {
      const c = e.querySelector(r);
      j(c || e);
    }
  }, k = () => {
    He(document.body, [
      `.${Q}{touch-action:manipulation;user-select:none;box-sizing:border-box!important;-webkit-user-select:none;}`,
      `.${Ot}{pointer-events:auto!important;}`,
      `.${Xt}{cursor:grab;}`,
      ".temp-child{touch-action:none;pointer-events:none;box-sizing:border-box!important;}",
      ".droppable{box-sizing:border-box!important;}",
      `.${qt}{position:fixed;z-index:5000;width:var(--fixedWidth)!important;height:var(--fixedHeight)!important;}`,
      `.${It}{pointer-events:none!important;}`,
      `.${Wt}{pointer-events:none!important;}`,
      `.${se}{cursor:grabbing;}`,
      ".disable-transition{transition:none!important;}"
    ]), Y(), z();
  }, H = (c) => {
    const d = c == null ? void 0 : c.querySelector(`.${Ot}`), E = d == null ? void 0 : d.parentElement;
    return d && E && nt(E, Vt) && !E.isSameNode(s) ? null : d;
  }, $ = (c) => {
    const d = H(c) ?? c;
    d && a(c) && ($t(
      d,
      "onmousedown",
      M("mousemove", "mouseup")
    ), $t(
      d,
      "ontouchstart",
      M("touchmove", "touchend")
    ), et(d)), c != null && c.isSameNode(d) || $t(c, "onmousedown", x), U(s, Vt);
  }, et = (c) => {
    const d = c.querySelectorAll("img");
    Array.from(d).forEach((E) => {
      E.onmousedown = () => !1;
    });
  }, ot = () => {
    if (N.pageX == 0 && N.pageY == 0 || !i.current)
      return;
    const { droppable: c, config: d } = i.current;
    W(e, c, N, d.direction), F(
      e,
      Pt,
      O,
      i.current
    );
  }, lt = (c, d) => {
    d && v == 2 && !(c != null && c.droppable.isSameNode(d.droppable)) && F(
      e,
      Pt,
      O,
      d
    );
  }, i = new Bn(
    e,
    C,
    s,
    ot,
    lt
  ), f = (c) => {
    if (!i.current)
      return;
    const d = C ? Array.from(
      document.querySelectorAll(dt(C))
    ) : [s];
    for (const E of d)
      E.classList.toggle(
        m,
        !c && E.isSameNode(i.current.droppable)
      );
  }, g = (c) => {
    i.updateConfig(c);
    const d = i.isOutside(c);
    f(d), v === 1 ? ut(c) : v === 2 && (S(d), vt(c));
  }, S = (c = !0) => {
    if (!i.current)
      return;
    const { droppable: d } = i.current;
    vn(
      d,
      s,
      C,
      u,
      c
    ), !c && Gt(
      e,
      s,
      v == 1,
      i.current
    );
  }, y = (c) => {
    if (Yt(c) && c.cancelable)
      c.preventDefault();
    else if (Yt(c))
      return;
    const d = Ht(c);
    g(d);
  }, b = (c, d) => {
    c == "touchmove" ? I = setTimeout(() => {
      d();
    }, 200) : d();
  }, T = (c, d) => {
    const { clientX: E, clientY: ft } = c, rt = document.elementFromPoint(E, ft), Dt = rt == null ? void 0 : rt.closest(`.${Q}`);
    return rt && d && Dt && !d.isSameNode(Dt);
  }, A = (c) => {
    const d = n.onGetValue(t);
    return { index: t, element: c, value: d };
  }, M = (c, d) => (E) => {
    if (T(E, e))
      return;
    it.updateScrolls(s, C);
    const { scrollX: ft, scrollY: rt } = window;
    if (O = { scrollX: ft, scrollY: rt }, v === 0) {
      v = 1;
      const Dt = A(e);
      Dt && B(Dt), b(c, () => {
        c == "touchmove" && (i.updateConfig(E), f(i.isOutside(E)), ut(E)), document.addEventListener(c, y, {
          passive: !1
        });
      }), ct(s), document.addEventListener(d, G(c), {
        once: !0
      });
    }
  }, x = (c) => i.updateConfig(c), G = (c) => (d) => {
    f(!0);
    const E = Ht(d);
    clearTimeout(I), At(i.isOutside(E, !1)), document.removeEventListener(c, y), i.updateConfig(E);
    const ft = i.getCurrentConfig(E);
    if (ft) {
      const { droppable: rt } = ft;
      J(rt);
    }
    s.onscroll = null;
  }, J = (c) => {
    if (c.onscroll = null, !C)
      return;
    const d = Array.from(
      document.querySelectorAll(dt(C))
    );
    for (const E of d)
      at(E) && (E.onscroll = null);
  }, ut = (c) => {
    Gt(
      e,
      s,
      v == 1,
      i.current
    ), St(), F(
      e,
      ue,
      O,
      i.current
    ), wt(e), X(c, e);
  }, St = () => {
    v = 2;
  }, vt = (c) => {
    const { pageX: d, pageY: E } = c;
    N = { pageX: d, pageY: E }, ot();
  }, ct = (c) => ae(c, "onscroll", Ft), Ft = () => ot(), At = (c) => {
    if (v !== 2) {
      v = 0;
      return;
    }
    v = 3, xt(e), F(
      e,
      jt,
      O,
      c ? i.initial : i.current,
      t
    );
  }, xt = (c) => {
    Nt(c, u, fe), Tt(c, 0, 0);
  }, wt = (c) => {
    const { height: d, width: E } = c.getBoundingClientRect();
    le(c, {
      fixedHeight: `${d}px`,
      fixedWidth: `${E}px`
    }), Z(c, !0), gt(c, p, !0), c.style.transition = "";
  }, Bt = (c) => {
    if (!i.current)
      return;
    const d = i.current;
    c == t && (U(e, D), setTimeout(() => {
      R(t), Ct(e, D), Gt(
        e,
        s,
        v == 1,
        i.current
      ), st(
        c,
        e,
        d,
        (E) => {
          xt(E), P(e);
        }
      );
    }, h));
  }, pe = (c, d) => {
    (c === t || c === n.onGetLegth() && t === c - 1) && q(
      c,
      e,
      s,
      d,
      () => {
        mn(
          e,
          v == 1,
          i.initial
        );
      }
    );
  };
  return k(), $(e), [Bt, pe];
}
const Rn = (e, t) => {
  e && Te(t, e);
};
function On(e, t, n) {
  const s = "index";
  let o = [], r = [];
  const { droppableGroup: a } = e;
  if (!n)
    return [
      o,
      r
    ];
  const l = yt(a).map((u) => `droppable-group-${u}`).join(" ");
  Rn(l, n);
  for (const u of n.children) {
    const h = u.getAttribute(s), p = Be(h), D = u;
    if (D && p >= 0) {
      const [R, m] = Ln(
        D,
        p,
        e,
        n,
        t
      );
      o.push(R), r.push(m);
    }
  }
  return [
    o,
    r
  ];
}
function Mn(e, t, n) {
  let s = [], o = [];
  const r = Cn(e, n), a = (m) => {
    for (const B of s)
      B(m);
  }, l = (m, B) => {
    if (r.onGetLegth() === 0)
      e.insertToListEmpty(r, m, B);
    else
      for (const v of o)
        v(m, B);
  }, u = (m) => {
    const [B, C] = On(r, t, m);
    s = B, o = C;
  }, h = (m) => {
    Zt(
      () => {
        u(m);
      },
      m,
      { childList: !0 }
    );
  }, p = (m) => {
    U(m, Vt);
  }, D = (m) => {
    it.addConfig(
      m,
      r
    );
  };
  return [a, l, (m) => {
    m && (p(m), D(m), h(m), u(m), it.removeObsoleteConfigs());
  }];
}
const Pn = new Ee();
function $n(e, t) {
  const n = ve();
  var s = new En(e, n);
  const [o, r, a] = Mn(s, Pn, t);
  return De(n, () => {
    a(n.value);
  }), { parent: n, removeAt: o, insertAt: r };
}
export {
  $n as useDragAndDrop
};