feat(Drawer): handle direction + handle props

docs/app/components/content/examples/command-palette/CommandPaletteOpenExample.vue

@@ -12,7 +12,12 @@ const users = [
 
 <template>
   <UModal v-model:open="open">
-    <UButton label="Search users..." color="gray" variant="subtle" icon="i-heroicons-magnifying-glass" />
+    <UButton
+      label="Search users..."
+      color="gray"
+      variant="subtle"
+      icon="i-heroicons-magnifying-glass"
+    />
 
     <template #content>
       <UCommandPalette

docs/app/components/content/examples/drawer/DrawerCommandPaletteExample.vue

@@ -19,7 +19,12 @@ const groups = computed(() => [{
 
 <template>
   <UDrawer>
-    <UButton label="Search users..." color="gray" variant="subtle" icon="i-heroicons-magnifying-glass" />
+    <UButton
+      label="Search users..."
+      color="gray"
+      variant="subtle"
+      icon="i-heroicons-magnifying-glass"
+    />
 
     <template #content>
       <UCommandPalette

docs/app/components/content/examples/drawer/DrawerFooterSlotExample.vue

@@ -3,7 +3,7 @@ const open = ref(false)
 </script>
 
 <template>
-  <UDrawer v-model:open="open" title="Drawer with footer" description="This is useful when you want a form in a Drawer.">
+  <UDrawer v-model:open="open" title="Drawer with footer" description="This is useful when you want a form in a Drawer." :ui="{ container: 'max-w-xl mx-auto' }">
     <UButton label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
 
     <template #body>

docs/app/components/content/examples/modal/ModalCommandPaletteExample.vue

@@ -19,7 +19,12 @@ const groups = computed(() => [{
 
 <template>
   <UModal>
-    <UButton label="Search users..." color="gray" variant="subtle" icon="i-heroicons-magnifying-glass" />
+    <UButton
+      label="Search users..."
+      color="gray"
+      variant="subtle"
+      icon="i-heroicons-magnifying-glass"
+    />
 
     <template #content>
       <UCommandPalette

docs/content/3.components/drawer.md

@@ -89,6 +89,85 @@ slots:
 :placeholder{class="h-48"}
 ::
 
+### Direction
+
+Use the `direction` prop to control the direction of the Drawer. Defaults to `bottom`.
+
+::component-code
+---
+prettier: true
+items:
+  direction:
+    - top
+    - bottom
+props:
+  direction: 'top'
+slots:
+  default: |
+
+    <UButton label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
+
+  content: |
+
+    <Placeholder class="h-96 m-4" />
+---
+
+:u-button{label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid"}
+
+#content
+:placeholder{class="h-96 m-4"}
+::
+
+::component-code
+---
+prettier: true
+items:
+  direction:
+    - right
+    - left
+props:
+  direction: 'right'
+slots:
+  default: |
+
+    <UButton label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
+
+  content: |
+
+    <Placeholder class="w-96 m-4" />
+---
+
+:u-button{label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid"}
+
+#content
+:placeholder{class="w-96 m-4"}
+::
+
+### Handle
+
+Use the `handle` prop to control whether the Drawer has a handle or not. Defaults to `true`.
+
+::component-code
+---
+prettier: true
+props:
+  handle: false
+slots:
+  default: |
+
+    <UButton label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
+
+  content: |
+
+    <Placeholder class="h-48 m-4" />
+---
+
+:u-button{label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid"}
+
+#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`.
@@ -174,6 +253,7 @@ You can control the open state by using the `default-open` prop or the `v-model:
 
 ::component-example
 ---
+prettier: true
 name: 'drawer-open-example'
 ---
 ::
@@ -192,6 +272,8 @@ Use the `#footer` slot to add content after the Drawer's body.
 
 ::component-example
 ---
+prettier: true
+collapse: true
 name: 'drawer-footer-slot-example'
 ---
 ::

playground/app/pages/components/drawer.vue

@@ -24,5 +24,37 @@ const open = ref(false)
         <Placeholder class="h-screen w-full" />
       </template>
     </UDrawer>
+
+    <UDrawer title="Drawer with bottom direction" direction="bottom" :handle="false">
+      <UButton color="gray" 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">
+      <UButton color="gray" 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">
+      <UButton color="gray" 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">
+      <UButton color="gray" variant="outline" label="Open on right" />
+
+      <template #body>
+        <Placeholder class="w-96 h-full" />
+      </template>
+    </UDrawer>
   </div>
 </template>

src/runtime/components/Drawer.vue

@@ -10,7 +10,7 @@ const appConfig = _appConfig as AppConfig & { ui: { drawer: Partial<typeof theme
 
 const drawer = tv({ extend: tv(theme), ...(appConfig.ui?.drawer || {}) })
 
-export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | 'closeThreshold' | 'defaultOpen' | 'direction' | 'dismissible' | 'fadeFromIndex' | 'fixed' | 'modal' | 'nested' | 'open' | 'scrollLockTimeout' | 'shouldScaleBackground' | 'snapPoints'> {
+export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | 'closeThreshold' | 'defaultOpen' | 'direction' | 'dismissible' | 'fadeFromIndex' | 'fixed' | 'modal' | 'nested' | 'direction' | 'open' | 'scrollLockTimeout' | 'shouldScaleBackground' | 'snapPoints'> {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
@@ -25,6 +25,11 @@ export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | '
    * @defaultValue true
    */
   overlay?: boolean
+  /**
+   * Render a handle on the drawer.
+   * @defaultValue true
+   */
+  handle?: boolean
   /**
    * Render the drawer in a portal.
    * @defaultValue true
@@ -49,23 +54,26 @@ export interface DrawerSlots {
 </script>
 
 <script setup lang="ts">
-import { toRef } from 'vue'
+import { computed, toRef } from 'vue'
 import { useForwardPropsEmits } from 'radix-vue'
 import { DrawerRoot, DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerTitle, DrawerDescription } from 'vaul-vue'
 import { reactivePick } from '@vueuse/core'
 
 const props = withDefaults(defineProps<DrawerProps>(), {
+  direction: 'bottom',
   portal: true,
-  overlay: true
+  overlay: true,
+  handle: true
 })
 const emits = defineEmits<DrawerEmits>()
 const slots = defineSlots<DrawerSlots>()
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'activeSnapPoint', 'closeThreshold', 'defaultOpen', 'dismissible', 'fadeFromIndex', 'fixed', 'modal', 'nested', 'open', 'scrollLockTimeout', 'shouldScaleBackground', 'snapPoints'), emits)
+const rootProps = useForwardPropsEmits(reactivePick(props, 'activeSnapPoint', 'closeThreshold', 'defaultOpen', 'dismissible', 'fadeFromIndex', 'fixed', 'modal', 'nested', 'direction', 'open', 'scrollLockTimeout', 'shouldScaleBackground', 'snapPoints'), emits)
 const contentProps = toRef(() => props.content)
 
-// eslint-disable-next-line vue/no-dupe-keys
-const ui = drawer()
+const ui = computed(() => drawer({
+  direction: props.direction
+}))
 </script>
 
 <template>
@@ -79,7 +87,7 @@ const ui = drawer()
 
       <DrawerContent :class="ui.content({ class: [props.class, props.ui?.content] })" v-bind="contentProps">
         <slot name="handle">
-          <div :class="ui.handle({ class: props.ui?.handle })" />
+          <div v-if="handle" :class="ui.handle({ class: props.ui?.handle })" />
         </slot>
 
         <slot name="content">

src/theme/drawer.ts

@@ -1,13 +1,46 @@
 export default {
   slots: {
     overlay: 'fixed inset-0 z-50 bg-gray-200/75 dark:bg-gray-800/75',
-    content: 'fixed inset-x-0 bottom-0 z-50 mt-24 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-t-lg h-auto max-h-[96%] flex flex-col focus:outline-none',
-    handle: 'mx-auto w-12 my-4 h-1.5 shrink-0 rounded-full bg-gray-200 dark:bg-gray-700',
-    container: 'mx-auto w-full max-w-md flex flex-col gap-4 px-4 pb-8 overflow-y-auto',
+    content: 'fixed z-50 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 flex focus:outline-none',
+    handle: 'shrink-0 rounded-full bg-gray-200 dark:bg-gray-700',
+    container: 'w-full flex flex-col gap-4 p-4 overflow-y-auto',
     header: '',
     title: 'text-gray-900 dark:text-white font-semibold',
     description: 'mt-1 text-gray-500 dark:text-gray-400 text-sm',
     body: 'flex-1',
     footer: 'flex flex-col gap-1.5'
-  }
+  },
+  variants: {
+    direction: {
+      top: {
+        content: 'top-0 mb-24 flex-col-reverse rounded-b-lg',
+        handle: 'mb-4'
+      },
+      right: {
+        content: 'right-4 flex-row',
+        handle: 'ml-4'
+      },
+      bottom: {
+        content: 'bottom-0 mt-24 flex-col rounded-t-lg',
+        handle: 'mt-4'
+      },
+      left: {
+        content: 'left-4 flex-row-reverse',
+        handle: 'mr-4'
+      }
+    }
+  },
+  compoundVariants: [{
+    direction: ['top', 'bottom'],
+    class: {
+      content: 'inset-x-0 h-auto max-h-[96%]',
+      handle: 'w-12 h-1.5 mx-auto'
+    }
+  }, {
+    direction: ['right', 'left'],
+    class: {
+      content: 'inset-y-4 w-auto max-w-[96%] rounded-lg after:hidden',
+      handle: 'h-12 w-1.5 mt-auto mb-auto'
+    }
+  }]
 }

test/components/Drawer.spec.ts

@@ -9,6 +9,10 @@ describe('Drawer', () => {
     // Props
     ['with title', { props: { ...props, title: 'Title' } }],
     ['with description', { props: { ...props, title: 'Title', description: 'Description' } }],
+    ['with left direction', { props: { ...props, direction: 'left', title: 'Title', description: 'Description' } }],
+    ['with top direction', { props: { ...props, direction: 'top', title: 'Title', description: 'Description' } }],
+    ['with right direction', { props: { ...props, direction: 'right', 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-gray-50 dark:bg-gray-800' } }],
     ['with ui', { props: { ...props, ui: { handle: 'w-20' } } }],

test/components/__snapshots__/Drawer.spec.ts.snap

@@ -6,9 +6,9 @@ exports[`Drawer > renders with body slot correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 z-50 bg-gray-200/75 dark:bg-gray-800/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed inset-x-0 bottom-0 z-50 mt-24 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-t-lg h-auto max-h-[96%] flex flex-col focus:outline-none">
-  <div class="mx-auto w-12 my-4 h-1.5 shrink-0 rounded-full bg-gray-200 dark:bg-gray-700"></div>
-  <div class="mx-auto w-full max-w-md flex flex-col gap-4 px-4 pb-8 overflow-y-auto">
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed z-50 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-lg inset-x-0 h-auto max-h-[96%]">
+  <div class="shrink-0 rounded-full bg-gray-200 dark:bg-gray-700 mt-4 w-12 h-1.5 mx-auto"></div>
+  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
     <div class="flex-1">Body slot</div>
     <!--v-if-->
@@ -25,9 +25,9 @@ exports[`Drawer > renders with class correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 z-50 bg-gray-200/75 dark:bg-gray-800/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed inset-x-0 bottom-0 z-50 mt-24 ring ring-gray-200 dark:ring-gray-800 rounded-t-lg h-auto max-h-[96%] flex flex-col focus:outline-none bg-gray-50 dark:bg-gray-800">
-  <div class="mx-auto w-12 my-4 h-1.5 shrink-0 rounded-full bg-gray-200 dark:bg-gray-700"></div>
-  <div class="mx-auto w-full max-w-md flex flex-col gap-4 px-4 pb-8 overflow-y-auto">
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed z-50 ring ring-gray-200 dark:ring-gray-800 flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-lg inset-x-0 h-auto max-h-[96%] bg-gray-50 dark:bg-gray-800">
+  <div class="shrink-0 rounded-full bg-gray-200 dark:bg-gray-700 mt-4 w-12 h-1.5 mx-auto"></div>
+  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
@@ -44,8 +44,8 @@ exports[`Drawer > renders with content slot correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 z-50 bg-gray-200/75 dark:bg-gray-800/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed inset-x-0 bottom-0 z-50 mt-24 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-t-lg h-auto max-h-[96%] flex flex-col focus:outline-none">
-  <div class="mx-auto w-12 my-4 h-1.5 shrink-0 rounded-full bg-gray-200 dark:bg-gray-700"></div>Content slot
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed z-50 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-lg inset-x-0 h-auto max-h-[96%]">
+  <div class="shrink-0 rounded-full bg-gray-200 dark:bg-gray-700 mt-4 w-12 h-1.5 mx-auto"></div>Content slot
 </div>
 
 
@@ -58,9 +58,9 @@ exports[`Drawer > renders with default slot correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 z-50 bg-gray-200/75 dark:bg-gray-800/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="radix-vue-dialog-content-v-0-0-0" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-2" aria-labelledby="radix-vue-dialog-title-v-0-0-1" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed inset-x-0 bottom-0 z-50 mt-24 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-t-lg h-auto max-h-[96%] flex flex-col focus:outline-none">
-  <div class="mx-auto w-12 my-4 h-1.5 shrink-0 rounded-full bg-gray-200 dark:bg-gray-700"></div>
-  <div class="mx-auto w-full max-w-md flex flex-col gap-4 px-4 pb-8 overflow-y-auto">
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="radix-vue-dialog-content-v-0-0-0" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-2" aria-labelledby="radix-vue-dialog-title-v-0-0-1" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed z-50 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-lg inset-x-0 h-auto max-h-[96%]">
+  <div class="shrink-0 rounded-full bg-gray-200 dark:bg-gray-700 mt-4 w-12 h-1.5 mx-auto"></div>
+  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
@@ -77,9 +77,9 @@ exports[`Drawer > renders with description correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 z-50 bg-gray-200/75 dark:bg-gray-800/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed inset-x-0 bottom-0 z-50 mt-24 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-t-lg h-auto max-h-[96%] flex flex-col focus:outline-none">
-  <div class="mx-auto w-12 my-4 h-1.5 shrink-0 rounded-full bg-gray-200 dark:bg-gray-700"></div>
-  <div class="mx-auto w-full max-w-md flex flex-col gap-4 px-4 pb-8 overflow-y-auto">
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed z-50 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-lg inset-x-0 h-auto max-h-[96%]">
+  <div class="shrink-0 rounded-full bg-gray-200 dark:bg-gray-700 mt-4 w-12 h-1.5 mx-auto"></div>
+  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
       <h2 id="radix-vue-dialog-title-v-0-0-0" class="text-gray-900 dark:text-white font-semibold">Title</h2>
       <p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-gray-500 dark:text-gray-400 text-sm">Description</p>
@@ -99,9 +99,9 @@ exports[`Drawer > renders with description slot correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 z-50 bg-gray-200/75 dark:bg-gray-800/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed inset-x-0 bottom-0 z-50 mt-24 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-t-lg h-auto max-h-[96%] flex flex-col focus:outline-none">
-  <div class="mx-auto w-12 my-4 h-1.5 shrink-0 rounded-full bg-gray-200 dark:bg-gray-700"></div>
-  <div class="mx-auto w-full max-w-md flex flex-col gap-4 px-4 pb-8 overflow-y-auto">
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed z-50 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-lg inset-x-0 h-auto max-h-[96%]">
+  <div class="shrink-0 rounded-full bg-gray-200 dark:bg-gray-700 mt-4 w-12 h-1.5 mx-auto"></div>
+  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
       <!--v-if-->
       <p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-gray-500 dark:text-gray-400 text-sm">Description slot</p>
@@ -121,9 +121,9 @@ exports[`Drawer > renders with footer slot correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 z-50 bg-gray-200/75 dark:bg-gray-800/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed inset-x-0 bottom-0 z-50 mt-24 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-t-lg h-auto max-h-[96%] flex flex-col focus:outline-none">
-  <div class="mx-auto w-12 my-4 h-1.5 shrink-0 rounded-full bg-gray-200 dark:bg-gray-700"></div>
-  <div class="mx-auto w-full max-w-md flex flex-col gap-4 px-4 pb-8 overflow-y-auto">
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed z-50 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-lg inset-x-0 h-auto max-h-[96%]">
+  <div class="shrink-0 rounded-full bg-gray-200 dark:bg-gray-700 mt-4 w-12 h-1.5 mx-auto"></div>
+  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
     <!--v-if-->
     <div class="flex flex-col gap-1.5">Footer slot</div>
@@ -140,9 +140,9 @@ exports[`Drawer > renders with header slot correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 z-50 bg-gray-200/75 dark:bg-gray-800/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed inset-x-0 bottom-0 z-50 mt-24 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-t-lg h-auto max-h-[96%] flex flex-col focus:outline-none">
-  <div class="mx-auto w-12 my-4 h-1.5 shrink-0 rounded-full bg-gray-200 dark:bg-gray-700"></div>
-  <div class="mx-auto w-full max-w-md flex flex-col gap-4 px-4 pb-8 overflow-y-auto">
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed z-50 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-lg inset-x-0 h-auto max-h-[96%]">
+  <div class="shrink-0 rounded-full bg-gray-200 dark:bg-gray-700 mt-4 w-12 h-1.5 mx-auto"></div>
+  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">Header slot</div>
     <!--v-if-->
     <!--v-if-->
@@ -150,6 +150,50 @@ exports[`Drawer > renders with header slot correctly 1`] = `
 </div>
 
 
+<!--teleport end-->"
+`;
+
+exports[`Drawer > renders with left direction correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 z-50 bg-gray-200/75 dark:bg-gray-800/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="left" vaul-drawer-visible="false" tabindex="-1" class="fixed z-50 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 flex focus:outline-none left-4 flex-row-reverse inset-y-4 w-auto max-w-[96%] rounded-lg after:hidden">
+  <div class="shrink-0 rounded-full bg-gray-200 dark:bg-gray-700 mr-4 h-12 w-1.5 mt-auto mb-auto"></div>
+  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div class="">
+      <h2 id="radix-vue-dialog-title-v-0-0-0" class="text-gray-900 dark:text-white font-semibold">Title</h2>
+      <p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-gray-500 dark:text-gray-400 text-sm">Description</p>
+    </div>
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Drawer > renders with right direction correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 z-50 bg-gray-200/75 dark:bg-gray-800/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="right" vaul-drawer-visible="false" tabindex="-1" class="fixed z-50 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 flex focus:outline-none right-4 flex-row inset-y-4 w-auto max-w-[96%] rounded-lg after:hidden">
+  <div class="shrink-0 rounded-full bg-gray-200 dark:bg-gray-700 ml-4 h-12 w-1.5 mt-auto mb-auto"></div>
+  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div class="">
+      <h2 id="radix-vue-dialog-title-v-0-0-0" class="text-gray-900 dark:text-white font-semibold">Title</h2>
+      <p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-gray-500 dark:text-gray-400 text-sm">Description</p>
+    </div>
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+</div>
+
+
 <!--teleport end-->"
 `;
 
@@ -159,9 +203,9 @@ exports[`Drawer > renders with title correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 z-50 bg-gray-200/75 dark:bg-gray-800/75"></div>
-<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed inset-x-0 bottom-0 z-50 mt-24 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-t-lg h-auto max-h-[96%] flex flex-col focus:outline-none">
-  <div class="mx-auto w-12 my-4 h-1.5 shrink-0 rounded-full bg-gray-200 dark:bg-gray-700"></div>
-  <div class="mx-auto w-full max-w-md flex flex-col gap-4 px-4 pb-8 overflow-y-auto">
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed z-50 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-lg inset-x-0 h-auto max-h-[96%]">
+  <div class="shrink-0 rounded-full bg-gray-200 dark:bg-gray-700 mt-4 w-12 h-1.5 mx-auto"></div>
+  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
       <h2 id="radix-vue-dialog-title-v-0-0-0" class="text-gray-900 dark:text-white font-semibold">Title</h2>
       <!--v-if-->
@@ -181,9 +225,9 @@ exports[`Drawer > renders with title slot correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 z-50 bg-gray-200/75 dark:bg-gray-800/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed inset-x-0 bottom-0 z-50 mt-24 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-t-lg h-auto max-h-[96%] flex flex-col focus:outline-none">
-  <div class="mx-auto w-12 my-4 h-1.5 shrink-0 rounded-full bg-gray-200 dark:bg-gray-700"></div>
-  <div class="mx-auto w-full max-w-md flex flex-col gap-4 px-4 pb-8 overflow-y-auto">
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed z-50 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-lg inset-x-0 h-auto max-h-[96%]">
+  <div class="shrink-0 rounded-full bg-gray-200 dark:bg-gray-700 mt-4 w-12 h-1.5 mx-auto"></div>
+  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
       <h2 id="radix-vue-dialog-title-v-0-0-0" class="text-gray-900 dark:text-white font-semibold">Title slot</h2>
       <!--v-if-->
@@ -194,6 +238,28 @@ exports[`Drawer > renders with title slot correctly 1`] = `
 </div>
 
 
+<!--teleport end-->"
+`;
+
+exports[`Drawer > renders with top direction correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 z-50 bg-gray-200/75 dark:bg-gray-800/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="top" vaul-drawer-visible="false" tabindex="-1" class="fixed z-50 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 flex focus:outline-none top-0 mb-24 flex-col-reverse rounded-b-lg inset-x-0 h-auto max-h-[96%]">
+  <div class="shrink-0 rounded-full bg-gray-200 dark:bg-gray-700 mb-4 w-12 h-1.5 mx-auto"></div>
+  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div class="">
+      <h2 id="radix-vue-dialog-title-v-0-0-0" class="text-gray-900 dark:text-white font-semibold">Title</h2>
+      <p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-gray-500 dark:text-gray-400 text-sm">Description</p>
+    </div>
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+</div>
+
+
 <!--teleport end-->"
 `;
 
@@ -203,9 +269,9 @@ exports[`Drawer > renders with ui correctly 1`] = `
 
 
 <div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 z-50 bg-gray-200/75 dark:bg-gray-800/75"></div>
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed inset-x-0 bottom-0 z-50 mt-24 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-t-lg h-auto max-h-[96%] flex flex-col focus:outline-none">
-  <div class="mx-auto my-4 h-1.5 shrink-0 rounded-full bg-gray-200 dark:bg-gray-700 w-20"></div>
-  <div class="mx-auto w-full max-w-md flex flex-col gap-4 px-4 pb-8 overflow-y-auto">
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed z-50 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-lg inset-x-0 h-auto max-h-[96%]">
+  <div class="shrink-0 rounded-full bg-gray-200 dark:bg-gray-700 mt-4 h-1.5 mx-auto w-20"></div>
+  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <!--v-if-->
     <!--v-if-->
     <!--v-if-->
@@ -213,6 +279,28 @@ exports[`Drawer > renders with ui correctly 1`] = `
 </div>
 
 
+<!--teleport end-->"
+`;
+
+exports[`Drawer > renders without handle correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<div data-state="open" style="pointer-events: auto;" vaul-drawer-visible="false" vaul-overlay="" vaul-snap-points="false" vaul-snap-points-overlay="true" class="fixed inset-0 z-50 bg-gray-200/75 dark:bg-gray-800/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed z-50 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-lg inset-x-0 h-auto max-h-[96%]">
+  <!--v-if-->
+  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
+    <div class="">
+      <h2 id="radix-vue-dialog-title-v-0-0-0" class="text-gray-900 dark:text-white font-semibold">Title</h2>
+      <p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-gray-500 dark:text-gray-400 text-sm">Description</p>
+    </div>
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+</div>
+
+
 <!--teleport end-->"
 `;
 
@@ -222,9 +310,9 @@ exports[`Drawer > renders without overlay correctly 1`] = `
 
 
 <!--v-if-->
-<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed inset-x-0 bottom-0 z-50 mt-24 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 rounded-t-lg h-auto max-h-[96%] flex flex-col focus:outline-none">
-  <div class="mx-auto w-12 my-4 h-1.5 shrink-0 rounded-full bg-gray-200 dark:bg-gray-700"></div>
-  <div class="mx-auto w-full max-w-md flex flex-col gap-4 px-4 pb-8 overflow-y-auto">
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="" role="dialog" aria-describedby="radix-vue-dialog-description-v-0-0-1" aria-labelledby="radix-vue-dialog-title-v-0-0-0" data-state="open" vaul-drawer="" vaul-drawer-direction="bottom" vaul-drawer-visible="false" tabindex="-1" class="fixed z-50 bg-white dark:bg-gray-900 ring ring-gray-200 dark:ring-gray-800 flex focus:outline-none bottom-0 mt-24 flex-col rounded-t-lg inset-x-0 h-auto max-h-[96%]">
+  <div class="shrink-0 rounded-full bg-gray-200 dark:bg-gray-700 mt-4 w-12 h-1.5 mx-auto"></div>
+  <div class="w-full flex flex-col gap-4 p-4 overflow-y-auto">
     <div class="">
       <h2 id="radix-vue-dialog-title-v-0-0-0" class="text-gray-900 dark:text-white font-semibold">Title</h2>
       <p id="radix-vue-dialog-description-v-0-0-1" class="mt-1 text-gray-500 dark:text-gray-400 text-sm">Description</p>