🐞 fix: make delayBeforeTouchMoveEvent config optional

Author: carlosjorger

docs/package.json

@@ -21,7 +21,7 @@
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.3",
     "astro": "^5.6.1",
-    "fluid-dnd": "^2.0.2",
+    "fluid-dnd": "^2.1.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "sharp": "^0.34.1",

docs/pnpm-lock.yaml

@@ -1,29 +1,40 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watchEffect } from "vue";
 import { useDragAndDrop } from "fluid-dnd/vue";
 import type { Pokemon } from "../Pokemon";
 import PokemonComponent from "./PokemonComponent.vue";
 import { fetchPokemons } from "@/server/pokemonServer";
+import touchDelaySilder from "./touchDelaySilder.vue";
 
 const pokemons = ref([] as Pokemon[]);
 pokemons.value = await fetchPokemons(3);
-const [ parent ] = useDragAndDrop(pokemons, {
-  draggingClass: "dragging-pokemon",
-});
+const delay = ref(150);
+let parent = ref<HTMLElement | undefined>();
+
+watchEffect(()=>{
+  const dragAndDrop = useDragAndDrop(pokemons, {
+    draggingClass: "dragging-pokemon",
+    delayBeforeTouchMoveEvent: delay.value,
+  });
+  parent = dragAndDrop[0];
+})
 </script>
 <template>
-  <div class="flex max-sm:justify-center items-start">
-    <div
-      ref="parent"
-      class="bg-gray-200/60 border-solid border-black/40 rounded-2xl w-60 border-4 p-4 block"
-    >
-      <PokemonComponent
-        v-for="(pokemon, index) in pokemons"
-        :key="pokemon.name"
-        :index="index"
-        :pokemon="pokemon"
-      />
+  <div class="flex-col gap-4">
+    <div class="flex max-sm:justify-center items-start">
+        <div
+          ref="parent"
+          class="bg-gray-200/60 border-solid border-black/40 rounded-2xl w-60 border-4 p-4 block"
+        >
+          <PokemonComponent
+            v-for="(pokemon, index) in pokemons"
+            :key="pokemon.name"
+            :index="index"
+            :pokemon="pokemon"
+          />
+        </div>
     </div>
+    <touchDelaySilder v-model="delay"/>
   </div>
 </template>
 <style>

docs/src/components/examples/vue/SingleVerticalListOfPokemons.vue

@@ -0,0 +1,39 @@
+<template>
+    <div class="flex flex-col gap-8 delay-menu">
+        <h2>Delay before touchmove event</h2>
+        <div class="w-full max-w-xs">
+            <input type="range" min="150" max="750" value="150" class="range w-full" step="150" @change="changeDelay" />
+            <div class="flex justify-between px-2.5 mt-2 text-xs">
+                <span>|</span>
+                <span>|</span>
+                <span>|</span>
+                <span>|</span>
+                <span>|</span>
+            </div>
+            <div class="flex justify-between  mt-2 text-xs">
+                <span>150</span>
+                <span>300</span>
+                <span>450</span>
+                <span>600</span>
+                <span>750</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script  setup lang="ts">
+    const model = defineModel({ type: Number })
+    const emit = defineEmits<{
+        (e: 'update:modelValue', value: Number | number): void
+    }>();
+    const changeDelay = (event: Event) => {
+        const target = event.target as HTMLInputElement;
+        const value = parseFloat(target.value); // Convert string to number
+        emit('update:modelValue', value);
+    }
+</script>
+<style scoped>
+.delay-menu {
+    margin-top: 3rem !important;    
+}
+</style>

docs/src/components/examples/vue/touchDelaySilder.vue

@@ -1,6 +1,8 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+/* @plugin "daisyui"; */
+
 details {
   max-height: 4rem; /* Set a max-height value just enough to show the summary */
   overflow: hidden; /* Hide the rest of the content */

docs/src/tailwind.css

@@ -90,7 +90,7 @@ export interface DragStartEventData<T> {
     /**
      * The delay before the touchmove event is fired.
      */
-    delayBeforeTouchMoveEvent:number;
+    delayBeforeTouchMoveEvent?:number;
   }
   /**
    * onDrop event function.