@scalar/draggable - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

CHANGELOG.md

 # @scalar/draggable
 
+## 0.0.6
+
+### Patch Changes
+
+- b5a3f7e: feat: added a few props to draggable and exported prop types
+
 ## 0.0.5
@@ -4,0 +10,0 @@

dist/Draggable.vue.d.ts

 import { type DraggingItem, type HoveredItem } from './store';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+export type DraggableProps = {
     /**
@@ -8,3 +8,3 @@ * Upper threshold (gets multiplied with height)
      */
-    ceiling?: number | undefined;
+    ceiling?: number;
     /**
@@ -15,30 +15,15 @@ * Lower threshold (gets multiplied with height)
      */
-    floor?: number | undefined;
+    floor?: number;
     /**
-     * We pass an array of parents to make it easier to reverse traverse
-     */
-    parentIds: string[];
-    /**
-     * ID for the current item
-     */
-    id: string;
-}>, {
-    ceiling: number;
-    floor: number;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    onDragEnd: (draggingItem: DraggingItem, hoveredItem: HoveredItem) => void;
-    onDragStart: (draggingItem: DraggingItem) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    /**
-     * Upper threshold (gets multiplied with height)
+     * Disable dragging by setting to false
      *
-     * @default 0.8
+     * @default true
      */
-    ceiling?: number | undefined;
+    isDraggable?: boolean;
     /**
-     * Lower threshold (gets multiplied with height)
+     * Prevents items from being hovered and dropped into
      *
-     * @default 0.2
+     * @default true
      */
-    floor?: number | undefined;
+    isDroppable?: boolean;
     /**
@@ -52,5 +37,16 @@ * We pass an array of parents to make it easier to reverse traverse
     id: string;
-}>, {
+};
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<DraggableProps>, {
     ceiling: number;
     floor: number;
+    isDraggable: boolean;
+    isDroppable: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    onDragEnd: (draggingItem: DraggingItem, hoveredItem: HoveredItem) => void;
+    onDragStart: (draggingItem: DraggingItem) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<DraggableProps>, {
+    ceiling: number;
+    floor: number;
+    isDraggable: boolean;
+    isDroppable: boolean;
 }>>> & {
@@ -62,2 +58,4 @@ onOnDragEnd?: ((draggingItem: DraggingItem, hoveredItem: HoveredItem) => any) | undefined;
     floor: number;
+    isDraggable: boolean;
+    isDroppable: boolean;
 }, {}>, {
@@ -64,0 +62,0 @@ default?(_: {}): any;

dist/index.d.ts

 import Draggable from './Draggable.vue';
+export type { DraggableProps } from './Draggable.vue';
 export type { DraggingItem, HoveredItem } from './store';
 export { Draggable };
 //# sourceMappingURL=index.d.ts.map

dist/index.js

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

package.json

@@ -16,3 +16,3 @@ {
   ],
-  "version": "0.0.5",
+  "version": "0.0.6",
   "engines": {
@@ -19,0 +19,0 @@ "node": ">=18"

No alert changes

Improved metrics

Total package byte prevSize

16357

4.5%

Worsened metrics

Lines of code

185

-1.07%

No dependency changes