Merge remote-tracking branch 'origin/main' into pr/cpreston321/39

.changeset/chilly-plants-sort.md

@@ -0,0 +1,5 @@
+---
+"vaul-vue": patch
+---
+
+fix: body freezes when using with `radix-vue` dropdown 

.changeset/green-meals-attend.md

@@ -0,0 +1,5 @@
+---
+"vaul-vue": patch
+---
+
+Add no-drag feature

.changeset/sharp-apricots-exercise.md

@@ -0,0 +1,5 @@
+---
+"vaul-vue": patch
+---
+
+fix manual closing doesn't trigger animation

.github/workflows/ci.yaml

@@ -3,6 +3,9 @@ on:
   push:
     branches-ignore:
       - main
+  pull_request:
+    paths:
+      - 'packages/**'
 
 jobs:
   tests:

.vscode/extensions.json

@@ -1,7 +1,6 @@
 {
   "recommendations": [
     "Vue.volar",
-    "Vue.vscode-typescript-vue-plugin",
     "ms-playwright.playwright",
     "dbaeumer.vscode-eslint"
   ]

package.json

@@ -2,7 +2,7 @@
   "type": "module",
   "version": "0.0.0",
   "private": true,
-  "packageManager": "pnpm@8.14.1",
+  "packageManager": "pnpm@8.15.4",
   "scripts": {
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",

packages/vaul-vue/src/DrawerContent.vue

@@ -4,6 +4,7 @@ import { DialogContent } from 'radix-vue'
 import { injectDrawerRootContext } from './context'
 
 const {
+  open,
   isOpen,
   isVisible,
   snapPointsOffset,
@@ -34,7 +35,10 @@ function handlePointerDownOutside(event: Event) {
     keyboardIsOpen.value = false
 
   event.preventDefault()
-  if (!dismissible.value)
+
+  if (dismissible.value)
+    emitOpenChange(false)
+  if (!dismissible.value || open.value !== undefined)
     return
 
   closeDrawer()
@@ -63,6 +67,10 @@ watch(
     @pointermove="onDrag"
     @pointerup="onRelease"
     @pointer-down-outside="handlePointerDownOutside"
+    @escape-key-down="(event) => {
+      if (!dismissible)
+        event.preventDefault()
+    }"
   >
     <slot />
   </DialogContent>

packages/vaul-vue/src/DrawerRoot.vue

@@ -13,6 +13,7 @@ import {
 
 const props = withDefaults(defineProps<DrawerRootProps>(), {
   open: undefined,
+  defaultOpen: undefined,
   fixed: undefined,
   dismissible: true,
   activeSnapPoint: undefined,
@@ -43,11 +44,11 @@ const emitHandlers = {
   emitRelease: (open: boolean) => emit('release', open),
   emitClose: () => emit('close'),
   emitOpenChange: (o: boolean) => {
-    open.value = o
+    emit('update:open', o)
   },
 }
 
-const { closeDrawer, hasBeenOpened, modal } = provideDrawerRootContext(
+const { closeDrawer, hasBeenOpened, modal, isOpen } = provideDrawerRootContext(
   useDrawer({
     ...emitHandlers,
     ...toRefs(props),
@@ -58,19 +59,23 @@ const { closeDrawer, hasBeenOpened, modal } = provideDrawerRootContext(
 )
 
 function handleOpenChange(o: boolean) {
+  if (open.value !== undefined) {
+    emitHandlers.emitOpenChange(o)
+    return
+  }
   if (!o) {
     closeDrawer()
   }
   else {
     hasBeenOpened.value = true
-    open.value = o
+    isOpen.value = o
   }
 }
 </script>
 
 <template>
   <DialogRoot
-    :open="open"
+    :open="isOpen"
     :modal="modal"
     @update:open="handleOpenChange"
   >

packages/vaul-vue/src/context.ts

@@ -2,6 +2,7 @@ import type { ComponentPublicInstance, Ref } from 'vue'
 import { createContext } from 'radix-vue'
 
 export interface DrawerRootContext {
+  open: Ref<boolean>
   isOpen: Ref<boolean>
   modal: Ref<boolean>
   hasBeenOpened: Ref<boolean>

packages/vaul-vue/src/controls.ts

@@ -101,7 +101,7 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
     emitRelease,
     emitClose,
     emitOpenChange,
-    open: isOpen,
+    open,
     dismissible,
     nested,
     fixed,
@@ -113,6 +113,7 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
     fadeFromIndex,
   } = props
 
+  const isOpen = ref(open.value ?? false)
   const hasBeenOpened = ref(false)
   const isVisible = ref(false)
   const isDragging = ref(false)
@@ -194,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
@@ -372,7 +377,7 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
     })
 
     // Don't reset background if swiped upwards
-    if (shouldScaleBackground.value && currentSwipeAmount && currentSwipeAmount > 0 && isOpen) {
+    if (shouldScaleBackground.value && currentSwipeAmount && currentSwipeAmount > 0 && isOpen.value) {
       set(
         wrapper,
         {
@@ -407,10 +412,9 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
     scaleBackground(false)
     restorePositionSetting()
 
-    isVisible.value = false
     window.setTimeout(() => {
-      emitOpenChange(false)
-      // isOpen.value = false
+      isVisible.value = false
+      isOpen.value = false
     }, 300)
 
     window.setTimeout(() => {
@@ -502,13 +506,23 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
     resetDrawer()
   }
 
-  watch(isOpen, (open) => {
-    if (open) {
+  watch(isOpen, (o) => {
+    if (o) {
       openTime.value = new Date()
       scaleBackground(true)
     }
-    emitOpenChange(open)
-  })
+    emitOpenChange(o)
+  }, { immediate: true })
+
+  watch(open, (o) => {
+    if (o) {
+      isOpen.value = o
+      hasBeenOpened.value = true
+    }
+    else {
+      closeDrawer()
+    }
+  }, { immediate: true })
 
   function scaleBackground(open: boolean) {
     const wrapper = document.querySelector('[vaul-drawer-wrapper]')
@@ -603,6 +617,7 @@ export function useDrawer(props: UseDrawerProps & DialogEmitHandlers): DrawerRoo
   }
 
   return {
+    open,
     isOpen,
     modal,
     keyboardIsOpen,

packages/vaul-vue/vite.config.ts

@@ -29,7 +29,7 @@ export default defineConfig({
     rollupOptions: {
       // make sure to externalize deps that shouldn't be bundled
       // into your library (Vue)
-      external: ['vue'],
+      external: ['vue', 'radix-vue'],
       output: {
         // Provide global variables to use in the UMD build
         // for externalized deps

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()
+  })
+})

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'),

playground/src/views/tests/ControlledView.vue

@@ -10,8 +10,8 @@ import {
 } from 'vaul-vue'
 import { ref } from 'vue'
 
-const open = ref < boolean > (false)
-const fullyControlled = ref < boolean > (false)
+const open = ref<boolean>(false)
+const fullyControlled = ref<boolean>(false)
 </script>
 
 <template>

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>

playground/src/views/tests/NonDismissibleView.vue

@@ -9,7 +9,7 @@ import {
 } from 'vaul-vue'
 import { ref } from 'vue'
 
-const open = ref < boolean > (false)
+const open = ref<boolean>(false)
 </script>
 
 <template>

playground/src/views/tests/WithoutScaledBackgroundView.vue

@@ -10,7 +10,7 @@ import {
 } from 'vaul-vue'
 import { ref } from 'vue'
 
-const open = ref < boolean > (false)
+const open = ref<boolean>(false)
 </script>
 
 <template>