feat(Drawer): implement with vaul-vue

Resolves #53

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>