Skip to content

Commit 45d9eeb

Browse files
PuruVJPuruVJ
authored
feat: threshold (#174)
* Push * format * capture:true for pointerup->click to avoid runnig click after drag is done * Add documentation * Add changesets
1 parent ac0e10b commit 45d9eeb

File tree

10 files changed

+352
-83
lines changed

10 files changed

+352
-83
lines changed

‎.changeset/angry-berries-build.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
"@neodrag/core": patch
3+
"@neodrag/react": patch
4+
"@neodrag/solid": patch
5+
"@neodrag/svelte": patch
6+
"@neodrag/vanilla": patch
7+
"@neodrag/vue": patch
8+
---
9+
10+
fix: drag end no longer causes onclick to trigger.

‎.changeset/happy-radios-brake.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
"@neodrag/core": minor
3+
"@neodrag/react": minor
4+
"@neodrag/solid": minor
5+
"@neodrag/svelte": minor
6+
"@neodrag/vanilla": minor
7+
"@neodrag/vue": minor
8+
---
9+
10+
feat: threshold option

‎docs/src/components/options/Options.astro‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ const ORDER = [
1515
'bounds',
1616
'recomputeBounds',
1717
'grid',
18+
'threshold',
1819
'defaultPosition',
1920
'position',
2021
'gpuAcceleration',
@@ -66,7 +67,7 @@ const orderedOptionsMD = ORDER.map(
6667
) as typeof optionsMD & { shortDescription: string }[];
6768
---
6869

69-
<section class="options-examples container">
70+
<section class='options-examples container'>
7071
{
7172
orderedOptionsMD.map(
7273
({ Content, frontmatter: { defaultValue, title, type } }) => (
@@ -75,27 +76,27 @@ const orderedOptionsMD = ORDER.map(
7576
{title}
7677

7778
<a
78-
aria-hidden="true"
79-
tabindex="-1"
80-
class="unstyled heading-anchor"
79+
aria-hidden='true'
80+
tabindex='-1'
81+
class='unstyled heading-anchor'
8182
href={`#${slugify(title)}`}
8283
>
8384
<PhLinkThin
8485
{
8586
/* @ts-ignore */ }
86-
style="color: var(--app-color-dark)"
87-
width="1em"
88-
height="1em"
87+
style='color: var(--app-color-dark)'
88+
width='1em'
89+
height='1em'
8990
/>
9091
</a>
9192
</h3>
9293
<p>
9394
Type:
94-
<span class="code-like" style="font-family: var(--app-font-mono)">
95+
<span class='code-like' style='font-family: var(--app-font-mono)'>
9596
{type}
9697
</span>
9798
<br />
98-
Default Value: <span class="code-like">{defaultValue}</span>
99+
Default Value: <span class='code-like'>{defaultValue}</span>
99100
</p>
100101

101102
<Content />
@@ -105,7 +106,7 @@ const orderedOptionsMD = ORDER.map(
105106
}
106107
</section>
107108

108-
<style lang="scss">
109+
<style lang='scss'>
109110
.code-like {
110111
font-family: var(--app-font-mono);
111112
font-size: 0.8em;

‎docs/src/data/sizes.json‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
{
22
"react": {
3-
"size": "2.01",
3+
"size": "2.20",
4+
"version": "2.0.4"
5+
},
6+
"svelte": {
7+
"size": "1.97",
8+
"version": "2.0.6"
9+
},
10+
"solid": {
11+
"size": "1.99",
412
"version": "2.0.4"
513
},
614
"vue": {
7-
"size": "1.81",
15+
"size": "1.99",
816
"version": "2.0.4"
917
},
1018
"vanilla": {
11-
"size": "1.84",
19+
"size": "2.01",
1220
"version": "2.0.5"
13-
},
14-
"solid": {
15-
"size": "1.80",
16-
"version": "2.0.4"
17-
},
18-
"svelte": {
19-
"size": "1.78",
20-
"version": "2.0.6"
2121
}
2222
}

‎docs/src/documentation/options/threshold/+option.mdx‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
---
2+
title: threshold
3+
type: '{ distance?: number; delay?: number }'
4+
defaultValue: '{ distance: 3, delay: 0 }'
5+
---
6+
7+
import Code from '$components/options/OptionsCode.astro';
8+
import Example from '$components/options/OptionsExample.astro';
9+
import Examples from '$components/options/OptionsExamples.svelte';
10+
11+
import DelayExample from './Delay.example.svelte';
12+
import DistanceExample from './Distance.example.svelte';
13+
14+
export const shortDescription =
15+
"Threshold for dragging to start. If the user moves the mouse/finger less than this distance, the dragging won't start.";
16+
17+
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.
18+
19+
<Examples client:load>
20+
<Example>
21+
<DelayExample client:visible slot="demo" />
22+
23+
<Code slot="codes">
24+
<div slot="svelte">
25+
```svelte
26+
<div use:draggable={{ threshold: { delay: 200 } }}>
27+
200ms Delay
28+
</div>
29+
```
30+
</div>
31+
32+
<div slot="vue">
33+
```vue
34+
<template>
35+
<div v-draggable="{{ threshold: { delay: 200 } }}">
36+
200ms Delay
37+
</div>
38+
</template>
39+
```
40+
</div>
41+
42+
<div slot="solid">
43+
```jsx
44+
<div use:draggable={{ threshold: { delay: 200 } }}>
45+
200ms Delay
46+
</div>
47+
```
48+
</div>
49+
50+
<div slot="react">
51+
```ts
52+
useDraggable(draggableRef, { threshold: { delay: 200 } });
53+
```
54+
</div>
55+
56+
<div slot="vanilla">
57+
```js
58+
new Draggable(el, { threshold: { delay: 200 } });
59+
```
60+
</div>
61+
62+
</Code>
63+
64+
</Example>
65+
66+
<Example>
67+
<DistanceExample client:visible slot="demo" />
68+
69+
<Code slot="codes">
70+
<div slot="svelte">
71+
```svelte
72+
<div use:draggable={{ threshold: { distance: 100 } }}>
73+
100px distance
74+
</div>
75+
```
76+
</div>
77+
78+
<div slot="vue">
79+
```vue
80+
<template>
81+
<div v-draggable="{{ threshold: { distance: 100 } }}">
82+
100px distance
83+
</div>
84+
</template>
85+
```
86+
</div>
87+
88+
<div slot="solid">
89+
```jsx
90+
<div use:draggable={{ threshold: { distance: 100 } }}>
91+
100px distance
92+
</div>
93+
```
94+
</div>
95+
96+
<div slot="react">
97+
```ts
98+
useDraggable(draggableRef, { threshold: { distance: 100 } });
99+
```
100+
</div>
101+
102+
<div slot="vanilla">
103+
```js
104+
new Draggable(el, { threshold: { distance: 100 } });
105+
```
106+
</div>
107+
108+
</Code>
109+
110+
</Example>
111+
</Examples>

‎docs/src/documentation/options/threshold/Delay.example.svelte‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<script lang="ts">
2+
import OptionsDemoBase from '$components/options/OptionsDemoBase.svelte';
3+
</script>
4+
5+
<OptionsDemoBase
6+
options={{
7+
threshold: {
8+
delay: 200,
9+
},
10+
}}
11+
>
12+
200ms delay
13+
</OptionsDemoBase>

‎docs/src/documentation/options/threshold/Distance.example.svelte‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<script lang="ts">
2+
import OptionsDemoBase from '$components/options/OptionsDemoBase.svelte';
3+
</script>
4+
5+
<OptionsDemoBase
6+
options={{
7+
threshold: {
8+
distance: 100,
9+
},
10+
}}
11+
>
12+
100px distance
13+
</OptionsDemoBase>

0 commit comments

Comments
 (0)