feat: add disabled prop to draggable

.changeset/wet-phones-own.md

@@ -0,0 +1,5 @@
+---
+"vue-simple-dnd": minor
+---
+
+Adds a `disabled` prop to `useDraggable` and `<Draggable />`

package/src/components/Draggable.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts" generic="T">
-import { ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 import { useDraggable } from "../composables/use-draggable.js";
 import { useElementBounding } from "@vueuse/core";
 
@@ -8,21 +8,36 @@ const emit = defineEmits<{
   dragEnd: [data: T];
 }>();
 
-const props = defineProps<{
-  /**
-   * Pass any data that you want to get back in `Droppable@drop`.
-   */
-  data: T;
-  /**
-   * When dragging, we create a copy of the default slot to make
-   * sure there is no layout shift. Specify this option will add
-   * the class to this fallback element.
-   */
-  fallbackClass?: string;
-}>();
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Pass any data that you want to get back in `Droppable@drop`.
+     */
+    data: T;
+    /**
+     * When dragging, we create a copy of the default slot to make
+     * sure there is no layout shift. Specify this option will add
+     * the class to this fallback element.
+     */
+    fallbackClass?: string;
+    /**
+     * When disabled, the `dragging` slot prop will always be false.
+     *
+     * @default `false`
+     */
+    disabled?: boolean;
+  }>(),
+  {
+    disabled: false,
+  }
+);
 
 const el = ref<HTMLElement | null>(null);
-const { dragging, style } = useDraggable({ el: el as any, data: props.data });
+const { dragging, style } = useDraggable({
+  el: el as any,
+  data: computed(() => props.data),
+  disabled: computed(() => props.disabled),
+});
 
 const fallbackRef = ref<HTMLElement | null>(null);
 const bounding = useElementBounding(fallbackRef as any);

package/src/composables/use-draggable.ts

@@ -1,4 +1,11 @@
-import { nextTick, onMounted, watch, type Ref, computed } from "vue";
+import {
+  nextTick,
+  onMounted,
+  watch,
+  type Ref,
+  computed,
+  type ComputedRef,
+} from "vue";
 import {
   useDraggable as _useDraggable,
   useElementBounding,
@@ -11,6 +18,7 @@ import { Draggable } from "../types.js";
 export const useDraggable = <T>({
   el,
   data,
+  disabled = computed(() => false),
 }: {
   /**
    * A reference to the element acting as the draggable.
@@ -19,17 +27,29 @@ export const useDraggable = <T>({
   /**
    * Pass any data that you want to get back in `useDroppable` `onDrop`.
    */
-  data: T;
+  data: Ref<T>;
+  /**
+   * When disabled, `dragging` will always be false.
+   *
+   * @default `false`
+   */
+  disabled?: ComputedRef<boolean>;
 }) => {
   const bounding = useElementBounding(el);
   const dimensions = useBoundingDimensions(bounding);
-  const { isDragging, style: _style, position } = _useDraggable(el);
+  const {
+    isDragging: _isDragging,
+    style: _style,
+    position,
+  } = _useDraggable(el);
   const { machine } = useDragContext();
   const droppable = useDroppableContext();
 
+  const isDragging = computed(() => !disabled.value && _isDragging.value);
+
   const draggable = computed<Draggable>(() => ({
     dimensions: dimensions.value,
-    data,
+    data: data.value,
     droppableId: droppable.id,
   }));