feat(Drawer): add programmatic close functionality to drawer from dialog-root

.changeset/deep-moons-cry.md

@@ -0,0 +1,5 @@
+---
+"vaul-vue": patch
+---
+
+added programmatic close functionality to drawer from dialog root

packages/vaul-vue/README.md

@@ -31,6 +31,33 @@ import { DrawerContent, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTrigger }
       <DrawerOverlay />
       <DrawerContent>
         <p>Content</p>
+
+        <DrawerClose>
+          Close
+        </DrawerClose>
+      </DrawerContent>
+    </DrawerPortal>
+  </DrawerRoot>
+</template>
+```
+
+#### Close programatically
+
+```vue
+<script setup lang="ts">
+import { DrawerContent, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTrigger } from 'vaul-vue'
+</script>
+
+<template>
+  <DrawerRoot v-slot="{ close }">
+    <DrawerTrigger> Open </DrawerTrigger>
+    <DrawerPortal>
+      <DrawerOverlay />
+      <DrawerContent>
+        <p>Content</p>
+        <button @click="close">
+          close
+        </button>
       </DrawerContent>
     </DrawerPortal>
   </DrawerRoot>

packages/vaul-vue/package.json

@@ -41,7 +41,7 @@
   },
   "dependencies": {
     "@vueuse/core": "^10.8.0",
-    "reka-ui": "^2.0.0",
+    "reka-ui": "^2.3.0",
     "vue": "^3.4.5"
   },
   "devDependencies": {

packages/vaul-vue/src/DrawerOverlay.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { DialogOverlay } from 'reka-ui'
-import { computed } from 'vue'
 import { injectDrawerRootContext } from './context'
 
 const { overlayRef, hasSnapPoints, isOpen, shouldFade } = injectDrawerRootContext()

packages/vaul-vue/src/DrawerRoot.vue

@@ -34,6 +34,7 @@ const emit = defineEmits<DrawerRootEmits>()
 const slots = defineSlots<{
   default: (props: {
     open: typeof isOpen.value
+    close: () => void
   }) => any
 }>()
 
@@ -93,10 +94,11 @@ defineExpose({
 
 <template>
   <DialogRoot
+    v-slot="{ close }"
     :open="isOpen"
     :modal="modal"
     @update:open="handleOpenChange"
   >
-    <slot :open="isOpen" />
+    <slot :open="isOpen" :close="close" />
   </DialogRoot>
 </template>

packages/vaul-vue/src/DrawerRootNested.vue

@@ -6,6 +6,11 @@ import { injectDrawerRootContext } from './context'
 
 const props = defineProps<DrawerRootProps>()
 const emits = defineEmits<DrawerRootEmits>()
+const slots = defineSlots<{
+  default: (props: {
+    close: () => void
+  }) => any
+}>()
 
 const { onNestedDrag, onNestedOpenChange, onNestedRelease } = injectDrawerRootContext()
 function onClose() {
@@ -28,13 +33,14 @@ const forwarded = useForwardPropsEmits(props, emits)
 
 <template>
   <DrawerRoot
+    v-slot="{ close }"
     v-bind="forwarded"
     nested
     @close="onClose"
     @drag="onDrag"
     @release="onNestedRelease"
     @update:open="onOpenChange"
   >
-    <slot />
+    <slot :close="close" />
   </DrawerRoot>
 </template>

packages/vaul-vue/src/controls.ts

@@ -1,4 +1,4 @@
-import { computed, onUnmounted, ref, watch, watchEffect } from 'vue'
+import { computed, ref, watch, watchEffect } from 'vue'
 import type { ComponentPublicInstance, Ref } from 'vue'
 import { isClient } from '@vueuse/core'
 import { dampenValue, getTranslate, isVertical, reset, set } from './helpers'

packages/vaul-vue/src/useScaleBackground.ts

@@ -1,6 +1,6 @@
 import { ref, watchEffect } from 'vue'
 import { injectDrawerRootContext } from './context'
-import { assignStyle, chain, isVertical, reset } from './helpers'
+import { assignStyle, chain, isVertical } from './helpers'
 import { BORDER_RADIUS, TRANSITIONS, WINDOW_TOP_OFFSET } from './constants'
 
 const noop = () => () => {}

packages/vaul-vue/src/useSnapPoints.ts

@@ -49,17 +49,17 @@ export function useSnapPoints({
   const isLastSnapPoint = computed(
     () =>
       (snapPoints.value
-      && activeSnapPoint.value === snapPoints.value[snapPoints.value.length - 1])
+        && activeSnapPoint.value === snapPoints.value[snapPoints.value.length - 1])
       ?? null,
   )
 
   const shouldFade = computed(
     () =>
       (snapPoints.value
-      && snapPoints.value.length > 0
-      && (fadeFromIndex?.value || fadeFromIndex?.value === 0)
-      && !Number.isNaN(fadeFromIndex?.value)
-      && snapPoints.value[fadeFromIndex?.value ?? -1] === activeSnapPoint.value)
+        && snapPoints.value.length > 0
+        && (fadeFromIndex?.value || fadeFromIndex?.value === 0)
+        && !Number.isNaN(fadeFromIndex?.value)
+        && snapPoints.value[fadeFromIndex?.value ?? -1] === activeSnapPoint.value)
       || !snapPoints.value,
   )
 
@@ -143,8 +143,9 @@ export function useSnapPoints({
           snapPointsOffset.value
           && newIndex !== -1
           && typeof snapPointsOffset.value[newIndex] === 'number'
-        )
+        ) {
           snapToPoint(snapPointsOffset.value[newIndex])
+        }
       }
     },
     {
@@ -249,8 +250,9 @@ export function useSnapPoints({
       || typeof activeSnapPointIndex.value !== 'number'
       || !snapPointsOffset.value
       || fadeFromIndex.value === undefined
-    )
+    ) {
       return null
+    }
 
     // If this is true we are dragging to a snap point that is supposed to have an overlay
     const isOverlaySnapPoint = activeSnapPointIndex.value === fadeFromIndex.value - 1
@@ -275,7 +277,7 @@ export function useSnapPoints({
       ? snapPointsOffset.value[targetSnapPointIndex]
       - snapPointsOffset.value[targetSnapPointIndex - 1]
       : snapPointsOffset.value[targetSnapPointIndex + 1]
-      - snapPointsOffset.value[targetSnapPointIndex]
+        - snapPointsOffset.value[targetSnapPointIndex]
 
     const percentageDragged = absDraggedDistance / Math.abs(snapPointDistance)
 

playground/package.json

@@ -13,7 +13,7 @@
     "test": "pnpm run test:e2e"
   },
   "dependencies": {
-    "reka-ui": "^2.0.0",
+    "reka-ui": "^2.3.0",
     "vaul-vue": "workspace:*",
     "vue": "^3.4.5",
     "vue-router": "4"

playground/src/App.vue

@@ -1,6 +1,9 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import Nav from './components/Nav.vue'
+</script>
 
 <template>
+  <Nav />
   <RouterView />
 </template>
 

playground/src/components/Nav.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import {
+  NavigationMenuContent,
+  NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuRoot,
+  NavigationMenuTrigger,
+  NavigationMenuViewport,
+} from 'reka-ui'
+import { RouterLink, useRouter } from 'vue-router'
+import { computed } from 'vue'
+
+const router = useRouter()
+
+const testPages = computed(() => {
+  const testRoute = router.getRoutes().filter(route => route.path.includes('/test'))
+  return testRoute?.map(child => ({
+    path: child.path,
+    name: child.name,
+  }))
+})
+</script>
+
+<template>
+  <NavigationMenuRoot class="fixed top-0 left-0 right-0 z-10 flex max-w-max flex-1 items-center justify-center">
+    <NavigationMenuList class="group flex flex-1 list-none items-center justify-center space-x-1">
+      <!-- Home Link -->
+      <NavigationMenuItem>
+        <NavigationMenuLink as-child>
+          <RouterLink
+            to="/"
+            class="group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
+          >
+            Home
+          </RouterLink>
+        </NavigationMenuLink>
+      </NavigationMenuItem>
+
+      <!-- Test Pages Dropdown -->
+      <NavigationMenuItem>
+        <NavigationMenuTrigger class="group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50">
+          Demo Pages
+        </NavigationMenuTrigger>
+        <NavigationMenuContent>
+          <div class="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
+            <div v-for="page in testPages" :key="page.path" class="row-span-1">
+              <NavigationMenuLink as-child>
+                <RouterLink
+                  :to="page.path"
+                  class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
+                >
+                  <div class="text-sm font-medium leading-none">
+                    {{ page.name }}
+                  </div>
+                </RouterLink>
+              </NavigationMenuLink>
+            </div>
+          </div>
+        </NavigationMenuContent>
+      </NavigationMenuItem>
+
+      <NavigationMenuIndicator class="top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in">
+        <div class="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+      </NavigationMenuIndicator>
+    </NavigationMenuList>
+
+    <div class="absolute left-0 top-full flex justify-center">
+      <NavigationMenuViewport class="origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]" />
+    </div>
+  </NavigationMenuRoot>
+</template>

playground/src/router/index.ts

@@ -12,46 +12,62 @@ const router = createRouter({
       children: [
         {
           path: 'controlled',
+          name: 'Controlled Drawer',
           component: () => import('../views/tests/ControlledView.vue'),
         },
         {
           path: 'no-drag-element',
+          name: 'No Drag Element',
           component: () => import('../views/tests/NoDragElementView.vue'),
         },
         {
           path: 'initial-snap',
+          name: 'Initial Snap Point',
           component: () => import('../views/tests/InitialSnapView.vue'),
         },
         {
           path: 'direction',
+          name: 'Drawer Direction',
           component: () => import('../views/tests/DirectionView.vue'),
         },
         {
           path: 'nested-drawer',
+          name: 'Nested Drawer',
           component: () => import('../views/tests/NestedDrawerView.vue'),
         },
+        {
+          path: 'nested-programmatic-close',
+          name: 'Nested Programmatic Close',
+          component: () => import('../views/tests/NestedProgrammaticClose.vue'),
+        },
         {
           path: 'non-dismissible',
+          name: 'Non-Dismissible Drawer',
           component: () => import('../views/tests/NonDismissibleView.vue'),
         },
         {
           path: 'scrollable-with-inputs',
+          name: 'Scrollable with Inputs',
           component: () => import('../views/tests/ScrollableWithInputsView.vue'),
         },
         {
           path: 'without-scaled-background',
+          name: 'Without Scaled Background',
           component: () => import('../views/tests/WithoutScaledBackgroundView.vue'),
         },
         {
           path: 'with-handle',
+          name: 'With Handle',
           component: () => import('../views/tests/WithHandleView.vue'),
         },
         {
           path: 'with-scaled-background',
+          name: 'With Scaled Background',
           component: () => import('../views/tests/WithScaledBackgroundView.vue'),
         },
         {
           path: 'with-snap-points',
+          name: 'With Snap Points',
           component: () => import('../views/tests/WithSnapPointsView.vue'),
         },
 

playground/src/views/tests/DirectionView.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import {
-  DrawerClose,
   type DrawerDirection,
   DrawerOverlay,
   DrawerPortal,