@scalar/sidebar 0.8.8 → 0.8.10

package/dist/hooks/use-draggable.js

@@ -1,82 +0,0 @@
-import { cva as y } from "@scalar/use-hooks/useBindCx";
-import { computed as c, ref as h, toValue as p } from "vue";
-const S = (i, u) => {
-  let n = !1;
-  return (...f) => {
-    n || (i(...f), n = !0, setTimeout(() => n = !1, u));
-  };
-}, w = y({
-  base: "relative after:absolute after:inset-x-0 after:block after:bg-blue after:opacity-15 after:pointer-events-none after:rounded",
-  variants: {
-    position: {
-      before: "after:-top-0.5 after:h-0.75",
-      after: "after:-bottom-0.5 after:h-0.75",
-      into: "after:inset-0"
-    }
-  }
-}), a = h(null), r = h(null);
-function P(i) {
-  const {
-    ceiling: u = 0.8,
-    floor: n = 0.2,
-    isDraggable: f = !0,
-    isDroppable: d = !0,
-    parentIds: v = [],
-    id: l,
-    onDragStart: D,
-    onDragEnd: I
-  } = i, g = c(() => v.at(-1) ?? null), A = (t) => typeof d == "function" ? d(a.value, {
-    id: l,
-    parentId: g.value,
-    offset: t
-  }) : p(d), E = (t) => {
-    if (!p(f) || !t.dataTransfer || !(t.target instanceof HTMLElement))
-      return;
-    t.target.setAttribute("data-dragging", "true"), t.dataTransfer.dropEffect = "move", t.dataTransfer.effectAllowed = "move";
-    const e = { id: l, parentId: g.value };
-    a.value = e, D?.(e);
-  }, T = S((t) => {
-    if (!a.value || a.value.id === l || v.includes(a.value?.id ?? ""))
-      return;
-    const e = r.value?.offset, s = t.target.offsetHeight, b = n * s, m = u * s;
-    let o = null;
-    t.offsetY <= 0 && e && e !== "after" ? o = e : t.offsetY <= b ? o = "before" : t.offsetY >= m ? o = "after" : t.offsetY > b && t.offsetY < m && (o = "into"), A(o) && (r.value = { id: l, parentId: g.value, offset: o });
-  }, 25), Y = () => {
-    if (!r.value || !a.value)
-      return;
-    const t = { ...a.value }, e = { ...r.value };
-    a.value = null, r.value = null, document.querySelectorAll("[data-dragging]").forEach((s) => s.removeAttribute("data-dragging")), t.id !== e.id && I?.(t, e);
-  }, _ = c(() => {
-    const t = l === r.value?.id ? r.value.offset : void 0;
-    return t ? w({ position: t }) : "";
-  });
-  return {
-    /**
-     * Props object to bind to the draggable element.
-     * Contains the class and draggable attribute.
-     */
-    draggableAttrs: c(() => ({
-      class: _.value || void 0,
-      // Only set the draggable attribute if isDraggable is true
-      draggable: p(f) ? !0 : void 0
-    })),
-    /**
-     * Event handlers object to bind to the draggable element.
-     * Contains dragend, dragover, and dragstart handlers with proper event prevention.
-     */
-    draggableEvents: {
-      dragend: Y,
-      dragover: (t) => {
-        t.preventDefault(), t.stopPropagation(), T(t);
-      },
-      dragstart: (t) => {
-        t.stopPropagation(), E(t);
-      }
-    },
-    draggingItem: a,
-    hoveredItem: r
-  };
-}
-export {
-  P as useDraggable
-};