feat(Drawer): implement with vaul-vue

Resolves #53

package.json

@@ -51,7 +51,8 @@
     "radix-vue": "^1.6.2",
     "scule": "^1.3.0",
     "tailwind-variants": "^0.2.1",
-    "tailwindcss": "4.0.0-alpha.14"
+    "tailwindcss": "4.0.0-alpha.14",
+    "vaul-vue": "^0.1.0"
   },
   "devDependencies": {
     "@nuxt/eslint-config": "^0.3.5",

playground/app.vue

@@ -18,6 +18,7 @@ const components = [
   'checkbox',
   'chip',
   'collapsible',
+  'drawer',
   'dropdown-menu',
   'form',
   'form-field',
@@ -45,7 +46,7 @@ function upperName (name: string) {
 
 <template>
   <UApp :toaster="appConfig.toaster">
-    <div class="min-h-screen w-screen flex flex-col items-center justify-center overflow-y-auto">
+    <div class="min-h-screen w-screen flex flex-col items-center justify-center overflow-y-auto" vaul-drawer-wrapper>
       <UNavigationMenu :links="components.map(component => ({ label: upperName(component), to: `/${component}` }))" class="border-b border-gray-200 dark:border-gray-800 overflow-x-auto px-2" />
 
       <div class="flex-1 flex flex-col justify-center py-12">

playground/pages/drawer.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+const open = ref(false)
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <UDrawer v-model:open="open" title="Drawer with v-model" description="This is useful to control the state yourself.">
+      <UButton color="white" label="Open with v-model" />
+
+      <template #body>
+        <Placeholder class="h-48 w-full" />
+      </template>
+
+      <template #footer>
+        <UButton label="Submit" color="black" class="justify-center" />
+        <UButton label="Cancel" color="white" class="justify-center" @click="open = 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.">
+      <UButton color="white" label="Open with scale" />
+
+      <template #body>
+        <Placeholder class="h-screen w-full" />
+      </template>
+    </UDrawer>
+  </div>
+</template>

playground/pages/slideover.vue

@@ -42,7 +42,7 @@ const open = ref(false)
       </template>
     </USlideover>
 
-    <USlideover v-model:open="open" title="Slideover with v-model" description="This can be useful to control the state of the slideover yourself.">
+    <USlideover v-model:open="open" title="Slideover with v-model" description="This is useful to control the state yourself.">
       <template #body>
         <Placeholder class="h-full w-full" />
       </template>

pnpm-lock.yaml

@@ -51,6 +51,9 @@ importers:
       tailwindcss:
         specifier: 4.0.0-alpha.14
         version: 4.0.0-alpha.14
+      vaul-vue:
+        specifier: ^0.1.0
+        version: 0.1.0(typescript@5.4.4)
     devDependencies:
       '@nuxt/eslint-config':
         specifier: ^0.3.5
@@ -12857,6 +12860,17 @@ packages:
     dependencies:
       builtins: 5.0.1
 
+  /vaul-vue@0.1.0(typescript@5.4.4):
+    resolution: {integrity: sha512-3PYWMbN3cSdsciv3fzewskxZFnX61PYq1uNsbvizXDo/8sN4SMrWkYDqWaPdTD3GTEm6wpx7j5flRLg7A5ZXbQ==}
+    dependencies:
+      '@vueuse/core': 10.9.0(vue@3.4.21)
+      radix-vue: 1.6.2(vue@3.4.21)
+      vue: 3.4.21(typescript@5.4.4)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - typescript
+    dev: false
+
   /vfile-location@5.0.2:
     resolution: {integrity: sha512-NXPYyxyBSH7zB5U6+3uDdd6Nybz6o6/od9rk8bp9H8GR3L+cm/fC0uUTbqBmUTnMCUDslAGBOIKNfvvb+gGlDg==}
     dependencies:

src/runtime/components/Drawer.vue

@@ -0,0 +1,100 @@
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { DrawerRootProps, DrawerRootEmits } from 'vaul-vue'
+import type { DialogContentProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/drawer'
+
+const appConfig = _appConfig as AppConfig & { ui: { drawer: Partial<typeof theme> } }
+
+const drawer = tv({ extend: tv(theme), ...(appConfig.ui?.drawer || {}) })
+
+export interface DrawerProps extends Omit<DrawerRootProps, 'asChild'> {
+  title?: string
+  description?: string
+  content?: Omit<DialogContentProps, 'asChild' | 'forceMount'>
+  overlay?: boolean
+  portal?: boolean
+  class?: any
+  ui?: Partial<typeof drawer.slots>
+}
+
+export interface DrawerEmits extends DrawerRootEmits {}
+
+export interface DrawerSlots {
+  default(): any
+  handle(): any
+  content(): any
+  header(): any
+  title(): any
+  description(): any
+  body(): any
+  footer(): any
+}
+</script>
+
+<script setup lang="ts">
+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>(), {
+  portal: true,
+  overlay: true
+})
+const emits = defineEmits<DrawerEmits>()
+defineSlots<DrawerSlots>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'activeSnapPoint', 'closeThreshold', 'defaultOpen', 'dismissible', 'fadeFromIndex', 'fixed', 'modal', 'nested', 'open', 'scrollLockTimeout', 'shouldScaleBackground', 'snapPoints'), emits)
+const contentProps = toRef(() => props.content)
+
+const ui = computed(() => tv({ extend: drawer, slots: props.ui })())
+</script>
+
+<template>
+  <DrawerRoot v-bind="rootProps">
+    <DrawerTrigger v-if="$slots.default" as-child>
+      <slot />
+    </DrawerTrigger>
+
+    <DrawerPortal :disabled="!portal">
+      <DrawerOverlay v-if="overlay" :class="ui.overlay()" />
+
+      <DrawerContent :class="ui.content({ class: props.class })" v-bind="contentProps">
+        <slot name="handle">
+          <div :class="ui.handle()" />
+        </slot>
+
+        <slot name="content">
+          <div :class="ui.container()">
+            <div v-if="$slots.header || (title || $slots.title) || (description || $slots.description)" :class="ui.header()">
+              <slot name="header">
+                <DrawerTitle v-if="title || $slots.title" :class="ui.title()">
+                  <slot name="title">
+                    {{ title }}
+                  </slot>
+                </DrawerTitle>
+
+                <DrawerDescription v-if="description || $slots.description" :class="ui.description()">
+                  <slot name="description">
+                    {{ description }}
+                  </slot>
+                </DrawerDescription>
+              </slot>
+            </div>
+
+            <div v-if="$slots.body" :class="ui.body()">
+              <slot name="body" />
+            </div>
+
+            <div v-if="$slots.footer" :class="ui.footer()">
+              <slot name="footer" />
+            </div>
+          </div>
+        </slot>
+      </DrawerContent>
+    </DrawerPortal>
+  </DrawerRoot>
+</template>

src/runtime/types/index.d.ts

@@ -8,6 +8,7 @@ export * from '../components/Checkbox.vue'
 export * from '../components/Chip.vue'
 export * from '../components/Collapsible.vue'
 export * from '../components/Container.vue'
+export * from '../components/Drawer.vue'
 export * from '../components/DropdownMenu.vue'
 export * from '../components/Form.vue'
 export * from '../components/FormField.vue'

src/theme/drawer.ts

@@ -0,0 +1,13 @@
+export default {
+  slots: {
+    overlay: 'fixed inset-0 z-30 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',
+    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'
+  }
+}

src/theme/index.ts

@@ -7,6 +7,7 @@ export { default as checkbox } from './checkbox'
 export { default as chip } from './chip'
 export { default as collapsible } from './collapsible'
 export { default as container } from './container'
+export { default as drawer } from './drawer'
 export { default as dropdownMenu } from './dropdown-menu'
 export { default as form } from './form'
 export { default as formField } from './form-field'

test/components/Drawer.spec.ts

@@ -0,0 +1,24 @@
+import { describe, it, expect } from 'vitest'
+import Drawer, { type DrawerProps } from '../../src/runtime/components/Drawer.vue'
+import ComponentRender from '../component-render'
+
+describe('Drawer', () => {
+  it.each([
+    ['basic case', { props: { open: true, portal: false } }],
+    ['with title', { props: { open: true, portal: false, title: 'Title' } }],
+    ['with description', { props: { open: true, portal: false, title: 'Title', description: 'Description' } }],
+    ['without overlay', { props: { open: true, portal: false, overlay: false, title: 'Title', description: 'Description' } }],
+    ['with class', { props: { open: true, portal: false, class: 'bg-gray-50 dark:bg-gray-800' } }],
+    ['with ui', { props: { open: true, portal: false, ui: { handle: 'w-20' } } }],
+    ['with default slot', { props: { open: true, portal: false }, slots: { default: () => 'Default slot' } }],
+    ['with content slot', { props: { open: true, portal: false }, slots: { content: () => 'Content slot' } }],
+    ['with header slot', { props: { open: true, portal: false }, slots: { header: () => 'Header slot' } }],
+    ['with title slot', { props: { open: true, portal: false }, slots: { title: () => 'Title slot' } }],
+    ['with description slot', { props: { open: true, portal: false }, slots: { description: () => 'Description slot' } }],
+    ['with body slot', { props: { open: true, portal: false }, slots: { body: () => 'Body slot' } }],
+    ['with footer slot', { props: { open: true, portal: false }, slots: { footer: () => 'Footer slot' } }]
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: DrawerProps, slots?: any }) => {
+    const html = await ComponentRender(nameOrHtml, options, Drawer)
+    expect(html).toMatchSnapshot()
+  })
+})

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

@@ -0,0 +1,258 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Drawer > renders basic case 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-30 bg-gray-200/75 dark:bg-gray-800/75"></div>
+<div data-dismissable-layer="" style="--snap-point-height: 0; pointer-events: auto;" id="radix-1" role="dialog" aria-describedby="radix-3" aria-labelledby="radix-2" data-state="open" vaul-drawer="" 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">
+    <!--v-if-->
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Drawer > renders with body slot 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-30 bg-gray-200/75 dark:bg-gray-800/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="radix-44" role="dialog" aria-describedby="radix-46" aria-labelledby="radix-45" data-state="open" vaul-drawer="" 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">
+    <!--v-if-->
+    <div class="flex-1">Body slot</div>
+    <!--v-if-->
+  </div>
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Drawer > renders with class 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-30 bg-gray-200/75 dark:bg-gray-800/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="radix-16" role="dialog" aria-describedby="radix-18" aria-labelledby="radix-17" data-state="open" vaul-drawer="" 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">
+    <!--v-if-->
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Drawer > renders with content slot 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-30 bg-gray-200/75 dark:bg-gray-800/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="radix-28" role="dialog" aria-describedby="radix-30" aria-labelledby="radix-29" data-state="open" vaul-drawer="" 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>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Drawer > renders with default slot correctly 1`] = `
+"Default slot
+<!--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-30 bg-gray-200/75 dark:bg-gray-800/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="radix-24" role="dialog" aria-describedby="radix-26" aria-labelledby="radix-25" data-state="open" vaul-drawer="" 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">
+    <!--v-if-->
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Drawer > renders with description 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-30 bg-gray-200/75 dark:bg-gray-800/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="radix-9" role="dialog" aria-describedby="radix-11" aria-labelledby="radix-10" data-state="open" vaul-drawer="" 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 class="">
+      <h2 id="radix-10" class="text-gray-900 dark:text-white font-semibold">Title</h2>
+      <p id="radix-11" 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 description slot 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-30 bg-gray-200/75 dark:bg-gray-800/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="radix-40" role="dialog" aria-describedby="radix-42" aria-labelledby="radix-41" data-state="open" vaul-drawer="" 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 class="">
+      <!--v-if-->
+      <p id="radix-42" class="mt-1 text-gray-500 dark:text-gray-400 text-sm">Description slot</p>
+    </div>
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Drawer > renders with footer slot 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-30 bg-gray-200/75 dark:bg-gray-800/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="radix-48" role="dialog" aria-describedby="radix-50" aria-labelledby="radix-49" data-state="open" vaul-drawer="" 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">
+    <!--v-if-->
+    <!--v-if-->
+    <div class="flex flex-col gap-1.5">Footer slot</div>
+  </div>
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Drawer > renders with header slot 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-30 bg-gray-200/75 dark:bg-gray-800/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="radix-32" role="dialog" aria-describedby="radix-34" aria-labelledby="radix-33" data-state="open" vaul-drawer="" 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 class="">Header slot</div>
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Drawer > renders with title 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-30 bg-gray-200/75 dark:bg-gray-800/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="radix-5" role="dialog" aria-describedby="radix-7" aria-labelledby="radix-6" data-state="open" vaul-drawer="" 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 class="">
+      <h2 id="radix-6" class="text-gray-900 dark:text-white font-semibold">Title</h2>
+      <!--v-if-->
+    </div>
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Drawer > renders with title slot 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-30 bg-gray-200/75 dark:bg-gray-800/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="radix-36" role="dialog" aria-describedby="radix-38" aria-labelledby="radix-37" data-state="open" vaul-drawer="" 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 class="">
+      <h2 id="radix-37" class="text-gray-900 dark:text-white font-semibold">Title slot</h2>
+      <!--v-if-->
+    </div>
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Drawer > renders with ui 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-30 bg-gray-200/75 dark:bg-gray-800/75"></div>
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="radix-20" role="dialog" aria-describedby="radix-22" aria-labelledby="radix-21" data-state="open" vaul-drawer="" 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">
+    <!--v-if-->
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+</div>
+
+
+<!--teleport end-->"
+`;
+
+exports[`Drawer > renders without overlay correctly 1`] = `
+"<!--v-if-->
+<!--teleport start-->
+
+
+<!--v-if-->
+<div data-dismissable-layer="" style="pointer-events: auto; --snap-point-height: 0;" id="radix-13" role="dialog" aria-describedby="radix-15" aria-labelledby="radix-14" data-state="open" vaul-drawer="" 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 class="">
+      <h2 id="radix-14" class="text-gray-900 dark:text-white font-semibold">Title</h2>
+      <p id="radix-15" class="mt-1 text-gray-500 dark:text-gray-400 text-sm">Description</p>
+    </div>
+    <!--v-if-->
+    <!--v-if-->
+  </div>
+</div>
+
+
+<!--teleport end-->"
+`;