chore(deps): update vaul-vue

Author: benjamincanac

docs/content/3.components/drawer.md

@@ -166,6 +166,31 @@ slots:
 :placeholder{class="h-48 m-4"}
 ::
 
+### Handle Only
+
+Use the `handle-only` prop to only allow the Drawer to be dragged by the handle.
+
+::component-code
+---
+prettier: true
+props:
+  handleOnly: true
+slots:
+  default: |
+
+    <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />
+
+  content: |
+
+    <Placeholder class="h-48 m-4" />
+---
+
+:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up"}
+
+#content
+:placeholder{class="h-48 m-4"}
+::
+
 ### Overlay
 
 Use the `overlay` prop to control whether the Drawer has an overlay or not. Defaults to `true`.
@@ -193,13 +218,14 @@ slots:
 
 ### Scale background
 
-Use the `should-scale-background` prop to scale the background when the Drawer is open, creating a visual depth effect.
+Use the `should-scale-background` prop to scale the background when the Drawer is open, creating a visual depth effect. You can set the `set-background-color-on-scale` prop to `false` to prevent changing the background color.
 
 ::component-code
 ---
 prettier: true
 props:
   shouldScaleBackground: true
+  setBackgroundColorOnScale: true
 slots:
   default: |
 
@@ -217,12 +243,12 @@ slots:
 ::
 
 ::warning
-Make sure to add the `vaul-drawer-wrapper` directive to a parent element of your app to make this work.
+Make sure to add the `data-vaul-drawer-wrapper` directive to a parent element of your app to make this work.
 
 ```vue [app.vue]
 <template>
   <UApp>
-    <div class="bg-(--ui-bg)" vaul-drawer-wrapper>
+    <div class="bg-(--ui-bg)" data-vaul-drawer-wrapper>
       <NuxtLayout>
         <NuxtPage />
       </NuxtLayout>
@@ -235,7 +261,7 @@ Make sure to add the `vaul-drawer-wrapper` directive to a parent element of your
 export default defineNuxtConfig({
   app: {
     rootAttrs: {
-      'vaul-drawer-wrapper': '',
+      'data-vaul-drawer-wrapper': '',
       'class': 'bg-(--ui-bg)'
     }
   }

docs/nuxt.config.ts

@@ -55,8 +55,7 @@ export default defineNuxtConfig({
       }]
     },
     rootAttrs: {
-      // @ts-expect-error - vaul-drawer-wrapper is not typed
-      'vaul-drawer-wrapper': '',
+      'data-vaul-drawer-wrapper': '',
       'class': 'bg-(--ui-bg)'
     }
   },

package.json

@@ -116,7 +116,7 @@
     "unplugin": "^2.2.1",
     "unplugin-auto-import": "^19.1.1",
     "unplugin-vue-components": "^28.4.1",
-    "vaul-vue": "^0.3.0",
+    "vaul-vue": "^0.4.1",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"
   },

playground-vue/src/app.vue

@@ -84,7 +84,7 @@ defineShortcuts({
 
 <template>
   <UApp :toaster="(appConfig.toaster as any)">
-    <div class="h-screen w-screen overflow-hidden flex min-h-0 bg-(--ui-bg)" vaul-drawer-wrapper>
+    <div class="h-screen w-screen overflow-hidden flex min-h-0 bg-(--ui-bg)" data-vaul-drawer-wrapper>
       <UNavigationMenu :items="items" orientation="vertical" class="hidden lg:flex border-e border-(--ui-border) overflow-y-auto w-48 p-4" />
       <UNavigationMenu :items="items" orientation="horizontal" class="lg:hidden border-b border-(--ui-border) [&>div]:min-w-min overflow-x-auto" />
 

playground/app/app.vue

@@ -85,7 +85,7 @@ defineShortcuts({
 <template>
   <template v-if="!$route.path.startsWith('/__nuxt_ui__')">
     <UApp :toaster="appConfig.toaster">
-      <div class="h-screen w-screen overflow-hidden flex flex-col lg:flex-row min-h-0 bg-(--ui-bg)" vaul-drawer-wrapper>
+      <div class="h-screen w-screen overflow-hidden flex flex-col lg:flex-row min-h-0 bg-(--ui-bg)" data-vaul-drawer-wrapper>
         <UNavigationMenu :items="items" orientation="vertical" class="hidden lg:flex border-e border-(--ui-border) overflow-y-auto w-48 p-4" />
         <UNavigationMenu :items="items" orientation="horizontal" class="lg:hidden border-b border-(--ui-border) [&>div]:min-w-min overflow-x-auto" />
 

playground/app/pages/components/drawer.vue

@@ -20,39 +20,39 @@ const inset = ref(false)
       </template>
     </UDrawer>
 
-    <UDrawer should-scale-background title="Drawer with `should-scale-background`" description="You need to add the `vaul-drawer-wrapper` directive to your content to make it work." :inset="inset">
+    <UDrawer should-scale-background title="Drawer with `should-scale-background`" description="You need to add the `data-vaul-drawer-wrapper` directive to your content to make it work." :inset="inset">
       <UButton color="neutral" variant="outline" label="Open with scale" />
 
       <template #body>
         <Placeholder class="h-screen w-full" />
       </template>
     </UDrawer>
 
-    <UDrawer title="Drawer with bottom direction" direction="bottom" :handle="false" :inset="inset">
+    <UDrawer title="Drawer with bottom direction" direction="bottom" :inset="inset">
       <UButton color="neutral" variant="outline" label="Open on bottom" />
 
       <template #body>
         <Placeholder class="h-96 w-full" />
       </template>
     </UDrawer>
 
-    <UDrawer title="Drawer with left direction" direction="left" :handle="false" :inset="inset">
+    <UDrawer title="Drawer with left direction" direction="left" :inset="inset">
       <UButton color="neutral" variant="outline" label="Open on left" />
 
       <template #body>
         <Placeholder class="w-96 h-full" />
       </template>
     </UDrawer>
 
-    <UDrawer title="Drawer with top direction" direction="top" :handle="false" :inset="inset">
+    <UDrawer title="Drawer with top direction" direction="top" :inset="inset">
       <UButton color="neutral" variant="outline" label="Open on top" />
 
       <template #body>
         <Placeholder class="h-96 w-full" />
       </template>
     </UDrawer>
 
-    <UDrawer title="Drawer with right direction" direction="right" :handle="false" :inset="inset">
+    <UDrawer title="Drawer with right direction" direction="right" :inset="inset">
       <UButton color="neutral" variant="outline" label="Open on right" />
 
       <template #body>

pnpm-lock.yaml

@@ -7,7 +7,6 @@
   },
   "ignoreDeps": [
     "typescript",
-    "vaul-vue",
     "vue-tsc"
   ],
   "baseBranches": ["v2", "v3"],

renovate.json

@@ -11,7 +11,7 @@ const appConfigDrawer = _appConfig as AppConfig & { ui: { drawer: Partial<typeof
 
 const drawer = tv({ extend: tv(theme), ...(appConfigDrawer.ui?.drawer || {}) })
 
-export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | 'closeThreshold' | 'defaultOpen' | 'direction' | 'fadeFromIndex' | 'fixed' | 'modal' | 'nested' | 'direction' | 'open' | 'scrollLockTimeout' | 'shouldScaleBackground' | 'snapPoints'> {
+export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | 'closeThreshold' | 'shouldScaleBackground' | 'setBackgroundColorOnScale' | 'scrollLockTimeout' | 'fixed' | 'dismissible' | 'modal' | 'open' | 'defaultOpen' | 'nested' | 'direction' | 'noBodyStyles' | 'handleOnly' | 'preventScrollRestoration' | 'snapPoints'> {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
@@ -42,10 +42,9 @@ export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | '
    */
   portal?: boolean
   /**
-   * When `false`, the drawer will not close when clicking outside or pressing escape.
-   * @defaultValue true
+   * Index of a `snapPoint` from which the overlay fade should be applied. Defaults to the last snap point.
    */
-  dismissible?: boolean
+  fadeFromIndex?: any
   class?: any
   ui?: Partial<typeof drawer.slots>
 }
@@ -54,7 +53,6 @@ export interface DrawerEmits extends DrawerRootEmits {}
 
 export interface DrawerSlots {
   default(props?: {}): any
-  handle(props?: {}): any
   content(props?: {}): any
   header(props?: {}): any
   title(props?: {}): any
@@ -67,19 +65,21 @@ export interface DrawerSlots {
 <script setup lang="ts">
 import { computed, toRef } from 'vue'
 import { useForwardPropsEmits } from 'reka-ui'
-import { DrawerRoot, DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerTitle, DrawerDescription } from 'vaul-vue'
+import { DrawerRoot, DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerTitle, DrawerDescription, DrawerHandle } from 'vaul-vue'
 import { reactivePick } from '@vueuse/core'
 
 const props = withDefaults(defineProps<DrawerProps>(), {
   direction: 'bottom',
   portal: true,
   overlay: true,
-  handle: true
+  handle: true,
+  modal: true,
+  dismissible: true
 })
 const emits = defineEmits<DrawerEmits>()
 const slots = defineSlots<DrawerSlots>()
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'activeSnapPoint', 'closeThreshold', 'defaultOpen', 'dismissible', 'fadeFromIndex', 'fixed', 'modal', 'nested', 'direction', 'open', 'scrollLockTimeout', 'shouldScaleBackground', 'snapPoints'), emits)
+const rootProps = useForwardPropsEmits(reactivePick(props, 'activeSnapPoint', 'closeThreshold', 'shouldScaleBackground', 'setBackgroundColorOnScale', 'scrollLockTimeout', 'fixed', 'dismissible', 'modal', 'open', 'defaultOpen', 'nested', 'direction', 'noBodyStyles', 'handleOnly', 'preventScrollRestoration', 'snapPoints', 'fadeFromIndex'), emits)
 const contentProps = toRef(() => props.content)
 const contentEvents = {
   closeAutoFocus: (e: Event) => e.preventDefault()
@@ -101,9 +101,7 @@ const ui = computed(() => drawer({
       <DrawerOverlay v-if="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
 
       <DrawerContent :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps" v-on="contentEvents">
-        <slot name="handle">
-          <div v-if="handle" :class="ui.handle({ class: props.ui?.handle })" />
-        </slot>
+        <DrawerHandle v-if="handle" :class="ui.handle({ class: props.ui?.handle })" />
 
         <slot name="content">
           <div :class="ui.container({ class: props.ui?.container })">

src/runtime/components/Drawer.vue

@@ -1,8 +1,10 @@
-export default {
+import type { ModuleOptions } from '../module'
+
+export default (options: Required<ModuleOptions>) => ({
   slots: {
     overlay: 'fixed inset-0 bg-(--ui-bg-elevated)/75',
     content: 'fixed bg-(--ui-bg) ring ring-(--ui-border) flex focus:outline-none',
-    handle: 'shrink-0 rounded-full bg-(--ui-bg-accented)',
+    handle: ['!bg-(--ui-bg-accented)', options.theme.transitions && 'transition-opacity'],
     container: 'w-full flex flex-col gap-4 p-4 overflow-y-auto',
     header: '',
     title: 'text-(--ui-text-highlighted) font-semibold',
@@ -18,15 +20,15 @@ export default {
       },
       right: {
         content: 'flex-row',
-        handle: 'ml-4'
+        handle: '!ml-4'
       },
       bottom: {
         content: 'mt-24 flex-col',
         handle: 'mt-4'
       },
       left: {
         content: 'flex-row-reverse',
-        handle: 'mr-4'
+        handle: '!mr-4'
       }
     },
     inset: {
@@ -39,13 +41,13 @@ export default {
     direction: ['top', 'bottom'],
     class: {
       content: 'h-auto max-h-[96%]',
-      handle: 'w-12 h-1.5 mx-auto'
+      handle: '!w-12 !h-1.5 mx-auto'
     }
   }, {
     direction: ['right', 'left'],
     class: {
       content: 'w-auto max-w-[calc(100%-2rem)]',
-      handle: 'h-12 w-1.5 mt-auto mb-auto'
+      handle: '!h-12 !w-1.5 mt-auto mb-auto'
     }
   }, {
     direction: 'top',
@@ -96,4 +98,4 @@ export default {
       content: 'inset-y-0 right-0 rounded-l-[calc(var(--ui-radius)*2)]'
     }
   }]
-}
+})

src/theme/drawer.ts

@@ -14,8 +14,6 @@ describe('Drawer', () => {
     ['with description', { props: { ...props, title: 'Title', description: 'Description' } }],
     ...directions.map((direction: string) => [`with direction ${direction}`, { props: { ...props, direction, title: 'Title', description: 'Description' } }]),
     ...directions.map((direction: string) => [`with direction ${direction} inset`, { props: { ...props, direction, inset: true, title: 'Title', description: 'Description' } }]),
-    ['with top direction', { props: { ...props, direction: 'top' as const, title: 'Title', description: 'Description' } }],
-    ['with right direction', { props: { ...props, direction: 'right' as const, title: 'Title', description: 'Description' } }],
     ['without handle', { props: { ...props, handle: false, title: 'Title', description: 'Description' } }],
     ['without overlay', { props: { ...props, overlay: false, title: 'Title', description: 'Description' } }],
     ['with class', { props: { ...props, class: 'bg-(--ui-bg-elevated)' } }],