arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-23 16:30:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(Drawer): handle direction + handle props

Browse Source
This commit is contained in:
Benjamin Canac
2024-09-27 11:44:52 +02:00
parent 5b62a8c8ca
commit 5f77aac368
10 changed files with 312 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
test/components/Drawer.spec.ts
View File

@@ -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' } } }],

158
test/components/__snapshots__/Drawer.spec.ts.snap
View File

@@ -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>