Skip to content

Commit 9afbaa5

Browse files
shyakadavishuntabyte
shyakadavis
and
huntabyte
authored
feat: add non-draggable drawer functionality (#64)
* feat: add non-draggable drawer functionality * add changeset --------- Co-authored-by: Davis SHYAKA <[email protected]> Co-authored-by: Hunter Johnston <[email protected]>
1 parent e22039b commit 9afbaa5

File tree

5 files changed

+111
-0
lines changed

5 files changed

+111
-0
lines changed

‎.changeset/gold-cups-build.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"vaul-svelte": minor
3+
---
4+
5+
feat: add non-draggable drawer functionality

‎README.md

+2
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,8 @@ Additional props:
7070

7171
`backgroundColor`: Background color of the body when the drawer is open and `shouldScaleBackground` is true. Defaults to black.
7272

73+
`[data-vaul-no-drag]`: When interacting with an element with this data attribute, the drawer won't be dragged.
74+
7375
### Trigger
7476

7577
The button that opens the dialog. [Props](https://www.bits-ui.com/docs/components/dialog#trigger).

‎src/lib/internal/vaul.ts

+5
Original file line numberDiff line numberDiff line change
@@ -297,6 +297,11 @@ export function createVaul(props: CreateVaulProps) {
297297
const swipeAmount = $drawerRef ? getTranslate($drawerRef, $direction) : null;
298298
const date = new Date();
299299

300+
// Don't drag if the element has the `data-vaul-no-drag` attribute
301+
if (element.hasAttribute("data-vaul-no-drag") || element.closest("[data-vaul-no-drag]")) {
302+
return false;
303+
}
304+
300305
// Allow scrolling when animating
301306
const $openTime = get(openTime);
302307

‎src/routes/examples/+page.svelte

+4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script lang="ts">
22
import DirectionDrawer from "../(components)/direction-drawer.svelte";
33
import NestedDrawer from "./nested-drawer.svelte";
4+
import NonDraggableDrawer from "./non-draggable-drawer.svelte";
45
import ScrollableDrawer from "./scrollable-drawer.svelte";
56
import SnapPointDrawer from "./snap-point-drawer.svelte";
67
@@ -24,5 +25,8 @@
2425
<DirectionDrawer {direction} />
2526
</div>
2627
{/each}
28+
<div>
29+
<NonDraggableDrawer />
30+
</div>
2731
</div>
2832
</div>

‎src/routes/examples/non-draggable-drawer.svelte

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<script lang="ts">
2+
import { Drawer } from "$lib/index.js";
3+
import CenteredContent from "../(components)/centered-content.svelte";
4+
</script>
5+
6+
<Drawer.Root>
7+
<Drawer.Trigger
8+
class="rounded-full bg-white px-4 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
9+
>
10+
Open non-draggable drawer
11+
</Drawer.Trigger>
12+
<Drawer.Portal>
13+
<Drawer.Overlay class="fixed inset-0 bg-black/40" />
14+
<Drawer.Content
15+
class="fixed bottom-0 left-0 right-0 mt-24 flex h-full max-h-[96%] flex-col rounded-t-[10px] bg-gray-100"
16+
>
17+
<div class="flex-1 rounded-t-[10px] bg-white p-4">
18+
<div class="mx-auto mb-8 h-1.5 w-12 flex-shrink-0 rounded-full bg-gray-300" />
19+
<CenteredContent>
20+
<p class="mb-8 text-gray-600">
21+
Here are
22+
<a href="/examples" class="underline">some more examples</a>
23+
of the component in action.
24+
</p>
25+
26+
<section
27+
data-vaul-no-drag
28+
class="grid min-h-16 place-items-center gap-4 rounded-lg bg-gray-400 p-4"
29+
>
30+
<p>Try dragging me</p>
31+
32+
<figure>
33+
<blockquote>
34+
<p>Here I Am, Here I Remain.</p>
35+
</blockquote>
36+
<figcaption>
37+
<cite>- Duke Leto Atreides</cite>
38+
</figcaption>
39+
</figure>
40+
</section>
41+
</CenteredContent>
42+
</div>
43+
<div class="mt-auto border-t border-gray-200 bg-gray-100 p-4">
44+
<div class="mx-auto flex max-w-md justify-end gap-6">
45+
<a
46+
class="gap-0.25 flex items-center text-xs text-gray-600"
47+
href="https://github.com/huntabyte/vaul-svelte"
48+
target="_blank"
49+
>
50+
GitHub
51+
<svg
52+
fill="none"
53+
height="16"
54+
stroke="currentColor"
55+
stroke-linecap="round"
56+
stroke-linejoin="round"
57+
stroke-width="2"
58+
viewBox="0 0 24 24"
59+
width="16"
60+
aria-hidden="true"
61+
class="ml-1 h-3 w-3"
62+
>
63+
<path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path>
64+
<path d="M15 3h6v6"></path>
65+
<path d="M10 14L21 3"></path>
66+
</svg>
67+
</a>
68+
<a
69+
class="gap-0.25 flex items-center text-xs text-gray-600"
70+
href="https://twitter.com/huntabyte"
71+
target="_blank"
72+
>
73+
Twitter
74+
<svg
75+
fill="none"
76+
height="16"
77+
stroke="currentColor"
78+
stroke-linecap="round"
79+
stroke-linejoin="round"
80+
stroke-width="2"
81+
viewBox="0 0 24 24"
82+
width="16"
83+
aria-hidden="true"
84+
class="ml-1 h-3 w-3"
85+
>
86+
<path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path>
87+
<path d="M15 3h6v6"></path>
88+
<path d="M10 14L21 3"></path>
89+
</svg>
90+
</a>
91+
</div>
92+
</div>
93+
</Drawer.Content>
94+
</Drawer.Portal>
95+
</Drawer.Root>

0 commit comments

Comments
 (0)