@scalar/draggable - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

CHANGELOG.md

 # @scalar/draggable
 
+## 0.1.4
+
+### Patch Changes
+
+- dfa7434: feat(api-client): added drag and drop to the api client
+
 ## 0.1.3
@@ -4,0 +10,0 @@

dist/Draggable.vue.d.ts

@@ -22,7 +22,7 @@ import { type DraggingItem, type HoveredItem } from './store';
     /**
-     * Prevents items from being hovered and dropped into
+     * Prevents items from being hovered and dropped into. Can be either a function or a boolean
      *
      * @default true
      */
-    isDroppable?: boolean;
+    isDroppable?: boolean | ((draggingItem: DraggingItem, hoveredItem: HoveredItem) => boolean);
     /**
@@ -45,3 +45,13 @@ * We pass an array of parents to make it easier to reverse traverse
     isDroppable: boolean;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}>, {
+    draggingItem: import("vue").Ref<{
+        id: string;
+        parentId: string | null;
+    } | null>;
+    hoveredItem: import("vue").Ref<{
+        id: string;
+        parentId: string | null;
+        offset: number;
+    } | null>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     onDragEnd: (draggingItem: DraggingItem, hoveredItem: HoveredItem) => void;
@@ -61,3 +71,3 @@ onDragStart: (draggingItem: DraggingItem) => void;
     isDraggable: boolean;
-    isDroppable: boolean;
+    isDroppable: boolean | ((draggingItem: DraggingItem, hoveredItem: HoveredItem) => boolean);
 }, {}>;
@@ -64,0 +74,0 @@ declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;

dist/index.js

@@ -1,8 +0,8 @@
-import { ref as D, defineComponent as _, computed as p, openBlock as S, createElementBlock as T, normalizeClass as Y, withModifiers as v, unref as m, renderSlot as w } from "vue";
-const o = D(null), r = D(null), B = (i, d) => {
-  let t = !1;
-  return function(...l) {
-    t || (i(...l), t = !0, setTimeout(() => t = !1, d));
+import { ref as b, defineComponent as T, computed as v, openBlock as Y, createElementBlock as w, normalizeClass as y, withModifiers as m, unref as D, renderSlot as B } from "vue";
+const r = b(null), n = b(null), C = (d, f) => {
+  let l = !1;
+  return function(...t) {
+    l || (d(...t), l = !0, setTimeout(() => l = !1, f));
   };
-}, C = ["draggable"], y = /* @__PURE__ */ _({
+}, L = ["draggable"], A = /* @__PURE__ */ T({
   __name: "Draggable",
@@ -13,3 +13,3 @@ props: {
     isDraggable: { type: Boolean, default: !0 },
-    isDroppable: { type: Boolean, default: !0 },
+    isDroppable: { type: [Boolean, Function], default: !0 },
     parentIds: {},
@@ -19,38 +19,45 @@ id: {}
   emits: ["onDragEnd", "onDragStart"],
-  setup(i, { emit: d }) {
-    const t = i, l = d, f = p(
+  setup(d, { expose: f, emit: l }) {
+    const t = d, u = l, i = v(
       () => (t.parentIds.length ?? 0) > 0 ? t.parentIds[t.parentIds.length - 1] : null
-    ), b = (e) => {
-      !e.dataTransfer || !(e.target instanceof HTMLDivElement) || !t.isDraggable || (e.target.classList.add("dragging"), e.dataTransfer.dropEffect = "move", e.dataTransfer.effectAllowed = "move", o.value = { id: t.id, parentId: f.value }, l("onDragStart", { id: t.id, parentId: f.value }));
-    }, g = B((e) => {
-      if (o.value?.id === t.id || t.parentIds.includes(o.value?.id ?? "") || !t.isDroppable)
+    ), I = (e) => {
+      !e.dataTransfer || !(e.target instanceof HTMLElement) || !t.isDraggable || (e.target.classList.add("dragging"), e.dataTransfer.dropEffect = "move", e.dataTransfer.effectAllowed = "move", r.value = { id: t.id, parentId: i.value }, u("onDragStart", { id: t.id, parentId: i.value }));
+    }, h = (e) => typeof t.isDroppable == "function" ? t.isDroppable(r.value, {
+      id: t.id,
+      parentId: i.value,
+      offset: e
+    }) : t.isDroppable, g = C((e) => {
+      if (!r.value || r.value.id === t.id || t.parentIds.includes(r.value?.id ?? ""))
         return;
-      const a = r.value?.offset, n = e.target.offsetHeight, u = t.floor * n, c = t.ceiling * n;
+      const a = n.value?.offset, o = e.target.offsetHeight, c = t.floor * o, p = t.ceiling * o;
       let s = 3;
-      e.offsetY <= 0 && a && a !== 3 ? s = a : e.offsetY <= u ? s = 0 : e.offsetY >= c ? s = 1 : e.offsetY > u && e.offsetY < c && (s = 2), r.value = { id: t.id, parentId: f.value, offset: s };
-    }, 25), I = ["above", "below", "asChild"], h = p(() => {
+      e.offsetY <= 0 && a && a !== 3 ? s = a : e.offsetY <= c ? s = 0 : e.offsetY >= p ? s = 1 : e.offsetY > c && e.offsetY < p && (s = 2), h(s) && (n.value = { id: t.id, parentId: i.value, offset: s });
+    }, 25), E = ["above", "below", "asChild"], _ = v(() => {
       let e = "sidebar-indent-nested";
-      return t.isDroppable && t.id === r.value?.id && (e += ` dragover-${I[r.value.offset]}`), e;
-    }), E = () => {
-      if (!r.value || !o.value) return;
-      const e = { ...o.value }, a = { ...r.value };
-      o.value = null, r.value = null, document.querySelectorAll("div.dragging").forEach((n) => n.classList.remove("dragging")), e.id !== a.id && l("onDragEnd", e, a);
+      return t.id === n.value?.id && (e += ` dragover-${E[n.value.offset]}`), e;
+    }), S = () => {
+      if (!n.value || !r.value) return;
+      const e = { ...r.value }, a = { ...n.value };
+      r.value = null, n.value = null, document.querySelectorAll("div.dragging").forEach((o) => o.classList.remove("dragging")), e.id !== a.id && u("onDragEnd", e, a);
     };
-    return (e, a) => (S(), T("div", {
-      class: Y(h.value),
+    return f({
+      draggingItem: r,
+      hoveredItem: n
+    }), (e, a) => (Y(), w("div", {
+      class: y(_.value),
       draggable: e.isDraggable,
-      onDragend: E,
-      onDragover: a[0] || (a[0] = v(
+      onDragend: S,
+      onDragover: a[0] || (a[0] = m(
         //@ts-ignore
-        (...n) => m(g) && m(g)(...n),
+        (...o) => D(g) && D(g)(...o),
         ["prevent", "stop"]
       )),
-      onDragstart: v(b, ["stop"])
+      onDragstart: m(I, ["stop"])
     }, [
-      w(e.$slots, "default")
-    ], 42, C));
+      B(e.$slots, "default")
+    ], 42, L));
   }
 });
 export {
-  y as Draggable
+  A as Draggable
 };

package.json

@@ -16,3 +16,3 @@ {
   ],
-  "version": "0.1.3",
+  "version": "0.1.4",
   "engines": {
@@ -37,12 +37,10 @@ "node": ">=18"
   "dependencies": {
-    "vue": "^3.4.22"
+    "vue": "^3.4.29"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
-    "tsc-alias": "^1.8.8",
     "vite": "^5.2.10",
     "vite-plugin-dts": "^3.6.3",
     "vite-svg-loader": "^5.1.0",
-    "vue": "^3.4.22",
-    "vue-tsc": "^2.0.13"
+    "vue": "^3.4.29"
   },
@@ -49,0 +47,0 @@ "scripts": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

25961

increased by2.78%

Dev dependency count

5

decreased by-28.57%

Lines of code

207

increased by8.95%

Dependency changes

• Updatedvue@^3.4.29