feat: add no-drag feature (#42)

* Add no-drag feature * chore: add changeset * test: add no drag element test * chore: add changeset * Revert "chore: add changeset" This reverts commit 03e11d1. * fix: firefox not closing down properly --------- Co-authored-by: zernonia <[email protected]> Co-authored-by: zernonia <[email protected]>
unovue · May 6, 2024 · 669d0d8 · 669d0d8
1 parent b1d3ae0
commit 669d0d8
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 0 deletions.
diff --git a/.changeset/green-meals-attend.md b/.changeset/green-meals-attend.md
@@ -0,0 +1,5 @@
+---
+"vaul-vue": patch
+---
+
+Add no-drag feature
diff --git a/packages/vaul-vue/src/controls.ts b/packages/vaul-vue/src/controls.ts
@@ -195,6 +195,10 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
     const swipeAmount = drawerRef.value ? getTranslateY(drawerRef.value.$el) : null
     const date = new Date()
 
+    if (element.hasAttribute('data-vaul-no-drag') || element.closest('[data-vaul-no-drag]')) {
+      return false;
+    }
+
     // Allow scrolling when animating
     if (openTime.value && date.getTime() - openTime.value.getTime() < 500)
       return false

diff --git a/playground/e2e/no-drag-element.spec.ts b/playground/e2e/no-drag-element.spec.ts
@@ -0,0 +1,29 @@
+import { expect, test } from '@playwright/test'
+import { openDrawer } from './helpers'
+import { ANIMATION_DURATION } from './constants'
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/test/no-drag-element')
+})
+
+test.describe('No drag element', () => {
+  test('should close when dragged down', async ({ page }) => {
+    await openDrawer(page)
+    await page.hover('[data-testid=handler]')
+    await page.mouse.down()
+    await page.mouse.move(0, 500)
+    await page.mouse.up()
+    await page.waitForTimeout(ANIMATION_DURATION)
+    await expect(page.getByTestId('content')).not.toBeVisible()
+  })
+
+  test('should not close when dragged down', async ({ page }) => {
+    await openDrawer(page)
+    await page.hover('[data-vaul-no-drag]')
+    await page.mouse.down()
+    await page.mouse.move(0, 500)
+    await page.mouse.up()
+    await page.waitForTimeout(ANIMATION_DURATION)
+    await expect(page.getByTestId('content')).toBeVisible()
+  })
+})
diff --git a/playground/src/router/index.ts b/playground/src/router/index.ts
@@ -14,6 +14,10 @@ const router = createRouter({
           path: 'controlled',
           component: () => import('../views/tests/ControlledView.vue'),
         },
+        {
+          path: 'no-drag-element',
+          component: () => import('../views/tests/NoDragElementView.vue'),
+        },
         {
           path: 'initial-snap',
           component: () => import('../views/tests/InitialSnapView.vue'),

diff --git a/playground/src/views/tests/NoDragElementView.vue b/playground/src/views/tests/NoDragElementView.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { DrawerContent, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTrigger } from 'vaul-vue'
+</script>
+
+<template>
+  <div
+    class="w-screen h-screen bg-white p-8 flex justify-center items-center"
+    vaul-drawer-wrapper=""
+  >
+    <DrawerRoot should-scale-background>
+      <DrawerTrigger
+        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"
+      >
+        <button data-testid="trigger" class="text-2xl">
+          Open Drawer
+        </button>
+      </DrawerTrigger>
+      <DrawerPortal>
+        <DrawerOverlay data-testid="overlay" class="fixed bg-black/40 inset-0" />
+        <DrawerContent
+          data-testid="content"
+          class="bg-gray-100 flex flex-col rounded-t-[10px] h-full mt-24 max-h-[96%] fixed bottom-0 left-0 right-0"
+        >
+          <div class="p-4 bg-white rounded-t-[10px] flex-1">
+            <div data-testid="handler" class="mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-gray-300 mb-8" />
+            <div class="max-w-md mx-auto" data-vaul-no-drag>
+              <h2 id="radix-:R3emdaH1:" class="font-medium mb-4">
+                The whole content is not draggable
+              </h2>
+              <p class="text-gray-600 mb-2">
+                This component can be used as a Dialog replacement on mobile and tablet devices.
+              </p>
+              <p class="text-gray-600 mb-2">
+                It comes unstyled, has gesture-driven animations, and is made by
+                <a href="https://emilkowal.ski/" class="underline" target="_blank">Emil Kowalski</a>.
+              </p>
+              <p class="text-gray-600 mb-8">
+                It uses
+                <a
+                  href="https://www.radix-ui.com/docs/primitives/components/dialog"
+                  class="underline"
+                  target="_blank"
+                >Radix's Dialog primitive</a>
+                under the hood and is inspired by
+                <a
+                  href="https://twitter.com/devongovett/status/1674470185783402496"
+                  class="underline"
+                  target="_blank"
+                >this tweet.</a>
+              </p>
+            </div>
+          </div>
+        </DrawerContent>
+      </DrawerPortal>
+    </DrawerRoot>
+  </div>
+</template>