chore(deps): update vaul-vue

src/runtime/components/Drawer.vue

@@ -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/theme/drawer.ts

@@ -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,7 +20,7 @@ export default {
       },
       right: {
         content: 'flex-row',
-        handle: 'ml-4'
+        handle: '!ml-4'
       },
       bottom: {
         content: 'mt-24 flex-col',
@@ -26,7 +28,7 @@ export default {
       },
       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)]'
     }
   }]
-}
+})