diff --git a/.changeset/gold-cups-build.md b/.changeset/gold-cups-build.md new file mode 100644 index 0000000..94a0fc0 --- /dev/null +++ b/.changeset/gold-cups-build.md @@ -0,0 +1,5 @@ +--- +"vaul-svelte": minor +--- + +feat: add non-draggable drawer functionality diff --git a/README.md b/README.md index e51b253..4130fb3 100644 --- a/README.md +++ b/README.md @@ -70,6 +70,8 @@ Additional props: `backgroundColor`: Background color of the body when the drawer is open and `shouldScaleBackground` is true. Defaults to black. +`[data-vaul-no-drag]`: When interacting with an element with this data attribute, the drawer won't be dragged. + ### Trigger The button that opens the dialog. [Props](https://www.bits-ui.com/docs/components/dialog#trigger). diff --git a/src/lib/internal/vaul.ts b/src/lib/internal/vaul.ts index bbdc732..d0b538b 100644 --- a/src/lib/internal/vaul.ts +++ b/src/lib/internal/vaul.ts @@ -297,6 +297,11 @@ export function createVaul(props: CreateVaulProps) { const swipeAmount = $drawerRef ? getTranslate($drawerRef, $direction) : null; const date = new Date(); + // Don't drag if the element has the `data-vaul-no-drag` attribute + if (element.hasAttribute("data-vaul-no-drag") || element.closest("[data-vaul-no-drag]")) { + return false; + } + // Allow scrolling when animating const $openTime = get(openTime); diff --git a/src/routes/examples/+page.svelte b/src/routes/examples/+page.svelte index 7ce1904..f908b47 100644 --- a/src/routes/examples/+page.svelte +++ b/src/routes/examples/+page.svelte @@ -1,6 +1,7 @@ + + + + Open non-draggable drawer + + + + +
+
+ +

+ Here are + some more examples + of the component in action. +

+ +
+

Try dragging me

+ +
+
+

Here I Am, Here I Remain.

+
+
+ - Duke Leto Atreides +
+
+
+ +
+
+
+ + GitHub + + + + Twitter + + +
+
+ + +