feat: threshold (#174)

* Push * format * capture:true for pointerup->click to avoid runnig click after drag is done * Add documentation * Add changesets
PuruVJ · Dec 6, 2024 · 45d9eeb · 45d9eeb
1 parent ac0e10b
commit 45d9eeb
Show file tree

Hide file tree

Showing 10 changed files with 352 additions and 83 deletions.
diff --git a/.changeset/angry-berries-build.md b/.changeset/angry-berries-build.md
@@ -0,0 +1,10 @@
+---
+"@neodrag/core": patch
+"@neodrag/react": patch
+"@neodrag/solid": patch
+"@neodrag/svelte": patch
+"@neodrag/vanilla": patch
+"@neodrag/vue": patch
+---
+
+fix: drag end no longer causes onclick to trigger.
diff --git a/.changeset/happy-radios-brake.md b/.changeset/happy-radios-brake.md
@@ -0,0 +1,10 @@
+---
+"@neodrag/core": minor
+"@neodrag/react": minor
+"@neodrag/solid": minor
+"@neodrag/svelte": minor
+"@neodrag/vanilla": minor
+"@neodrag/vue": minor
+---
+
+feat: threshold option
diff --git a/docs/src/components/options/Options.astro b/docs/src/components/options/Options.astro
@@ -15,6 +15,7 @@ const ORDER = [
 	'bounds',
 	'recomputeBounds',
 	'grid',
+	'threshold',
 	'defaultPosition',
 	'position',
 	'gpuAcceleration',
@@ -66,7 +67,7 @@ const orderedOptionsMD = ORDER.map(
 ) as typeof optionsMD & { shortDescription: string }[];
 ---
 
-<section class="options-examples container">
+<section class='options-examples container'>
 	{
 		orderedOptionsMD.map(
 			({ Content, frontmatter: { defaultValue, title, type } }) => (
@@ -75,27 +76,27 @@ const orderedOptionsMD = ORDER.map(
 						{title}
 
 						<a
-							aria-hidden="true"
-							tabindex="-1"
-							class="unstyled heading-anchor"
+							aria-hidden='true'
+							tabindex='-1'
+							class='unstyled heading-anchor'
 							href={`#${slugify(title)}`}
 						>
 							<PhLinkThin
 								{
 								/* @ts-ignore */ }
-								style="color: var(--app-color-dark)"
-								width="1em"
-								height="1em"
+								style='color: var(--app-color-dark)'
+								width='1em'
+								height='1em'
 							/>
 						</a>
 					</h3>
 					<p>
 						Type:
-						<span class="code-like" style="font-family: var(--app-font-mono)">
+						<span class='code-like' style='font-family: var(--app-font-mono)'>
 							{type}
 						</span>
 						<br />
-						Default Value: <span class="code-like">{defaultValue}</span>
+						Default Value: <span class='code-like'>{defaultValue}</span>
 					</p>
 
 					<Content />
@@ -105,7 +106,7 @@ const orderedOptionsMD = ORDER.map(
 	}
 </section>
 
-<style lang="scss">
+<style lang='scss'>
 	.code-like {
 		font-family: var(--app-font-mono);
 		font-size: 0.8em;

diff --git a/docs/src/data/sizes.json b/docs/src/data/sizes.json
@@ -1,22 +1,22 @@
 {
   "react": {
-    "size": "2.01",
+    "size": "2.20",
+    "version": "2.0.4"
+  },
+  "svelte": {
+    "size": "1.97",
+    "version": "2.0.6"
+  },
+  "solid": {
+    "size": "1.99",
     "version": "2.0.4"
   },
   "vue": {
-    "size": "1.81",
+    "size": "1.99",
     "version": "2.0.4"
   },
   "vanilla": {
-    "size": "1.84",
+    "size": "2.01",
     "version": "2.0.5"
-  },
-  "solid": {
-    "size": "1.80",
-    "version": "2.0.4"
-  },
-  "svelte": {
-    "size": "1.78",
-    "version": "2.0.6"
   }
 }
diff --git a/docs/src/documentation/options/threshold/+option.mdx b/docs/src/documentation/options/threshold/+option.mdx
@@ -0,0 +1,111 @@
+---
+title: threshold
+type: '{ distance?: number; delay?: number }'
+defaultValue: '{ distance: 3, delay: 0 }'
+---
+
+import Code from '$components/options/OptionsCode.astro';
+import Example from '$components/options/OptionsExample.astro';
+import Examples from '$components/options/OptionsExamples.svelte';
+
+import DelayExample from './Delay.example.svelte';
+import DistanceExample from './Distance.example.svelte';
+
+export const shortDescription =
+  "Threshold for dragging to start. If the user moves the mouse/finger less than this distance, the dragging won't start.";
+
+Allows you to set a threshold for dragging to start. If the user moves the mouse/finger less than this distance, the dragging won't start. Or user must hold the mouse/finger for the specified delay for dragging to begin.
+
+<Examples client:load>
+  <Example>
+    <DelayExample client:visible slot="demo" />
+
+    <Code slot="codes">
+      <div slot="svelte">
+        ```svelte
+        <div use:draggable={{ threshold: { delay: 200 } }}>
+          200ms Delay
+        </div>
+        ```
+      </div>
+
+      <div slot="vue">
+        ```vue
+        <template>
+          <div v-draggable="{{ threshold: { delay: 200 } }}">
+            200ms Delay
+          </div>
+        </template>
+        ```
+      </div>
+
+      <div slot="solid">
+        ```jsx
+        <div use:draggable={{ threshold: { delay: 200 } }}>
+         200ms Delay
+        </div>
+        ```
+      </div>
+
+      <div slot="react">
+        ```ts
+        useDraggable(draggableRef, { threshold: { delay: 200 } });
+        ```
+      </div>
+
+      <div slot="vanilla">
+        ```js
+        new Draggable(el, { threshold: { delay: 200 } });
+        ```
+      </div>
+
+    </Code>
+
+  </Example>
+
+  <Example>
+    <DistanceExample client:visible slot="demo" />
+
+    <Code slot="codes">
+      <div slot="svelte">
+        ```svelte
+        <div use:draggable={{ threshold: { distance: 100 } }}>
+          100px distance
+        </div>
+        ```
+      </div>
+
+      <div slot="vue">
+        ```vue
+        <template>
+          <div v-draggable="{{ threshold: { distance: 100 } }}">
+            100px distance
+          </div>
+        </template>
+        ```
+      </div>
+
+      <div slot="solid">
+        ```jsx
+        <div use:draggable={{ threshold: { distance: 100 } }}>
+          100px distance
+        </div>
+        ```
+      </div>
+
+      <div slot="react">
+        ```ts
+        useDraggable(draggableRef, { threshold: { distance: 100 } });
+        ```
+      </div>
+
+      <div slot="vanilla">
+        ```js
+        new Draggable(el, { threshold: { distance: 100 } });
+        ```
+      </div>
+
+    </Code>
+
+  </Example>
+</Examples>
diff --git a/docs/src/documentation/options/threshold/Delay.example.svelte b/docs/src/documentation/options/threshold/Delay.example.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import OptionsDemoBase from '$components/options/OptionsDemoBase.svelte';
+</script>
+
+<OptionsDemoBase
+	options={{
+		threshold: {
+			delay: 200,
+		},
+	}}
+>
+	200ms delay
+</OptionsDemoBase>
diff --git a/docs/src/documentation/options/threshold/Distance.example.svelte b/docs/src/documentation/options/threshold/Distance.example.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import OptionsDemoBase from '$components/options/OptionsDemoBase.svelte';
+</script>
+
+<OptionsDemoBase
+	options={{
+		threshold: {
+			distance: 100,
+		},
+	}}
+>
+	100px distance
+</OptionsDemoBase>