chore: wrap direction content

Author: zernonia

playground/src/components/DemoDrawer.vue

@@ -1,49 +1,48 @@
 <script setup lang="ts">
-import { DrawerContent, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTrigger } from 'vaul-vue'
+import { type DrawerDirection, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTrigger } from 'vaul-vue'
+import { ref } from 'vue'
+import DrawerContentWrapper from './DrawerContent.vue'
+
+const direction = ref<DrawerDirection>('bottom')
 </script>
 
 <template>
-  <DrawerRoot should-scale-background direction="left">
+  <DrawerRoot should-scale-background :direction="direction">
     <DrawerTrigger
       class="rounded-full bg-white px-4 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
     >
       Open Drawer
     </DrawerTrigger>
     <DrawerPortal>
       <DrawerOverlay class="fixed bg-black/40 inset-0" />
-      <DrawerContent
-        class="bg-gray-100 flex flex-col rounded-t-[10px] h-full mt-24 max-h-[96%] fixed bottom-0 left-0 right-0"
-      >
-        <div class="p-4 bg-white rounded-t-[10px] flex-1">
-          <div class="mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-gray-300 mb-8" />
-          <div class="max-w-md mx-auto">
-            <h2 id="radix-:R3emdaH1:" class="font-medium mb-4">
-              Drawer for Vue.
-            </h2>
-            <p class="text-gray-600 mb-2">
-              This component can be used as a Dialog replacement on mobile and tablet devices.
-            </p>
-            <p class="text-gray-600 mb-2">
-              It comes unstyled, has gesture-driven animations, and is made by
-              <a href="https://emilkowal.ski/" class="underline" target="_blank">Emil Kowalski</a>.
-            </p>
-            <p class="text-gray-600 mb-8">
-              It uses
-              <a
-                href="https://www.radix-ui.com/docs/primitives/components/dialog"
-                class="underline"
-                target="_blank"
-              >Radix's Dialog primitive</a>
-              under the hood and is inspired by
-              <a
-                href="https://twitter.com/devongovett/status/1674470185783402496"
-                class="underline"
-                target="_blank"
-              >this tweet.</a>
-            </p>
-          </div>
+      <DrawerContentWrapper :direction="direction">
+        <div class="max-w-md mx-auto">
+          <h2 id="radix-:R3emdaH1:" class="font-medium mb-4">
+            Drawer for Vue.
+          </h2>
+          <p class="text-gray-600 mb-2">
+            This component can be used as a Dialog replacement on mobile and tablet devices.
+          </p>
+          <p class="text-gray-600 mb-2">
+            It comes unstyled, has gesture-driven animations, and is made by
+            <a href="https://emilkowal.ski/" class="underline" target="_blank">Emil Kowalski</a>.
+          </p>
+          <p class="text-gray-600 mb-8">
+            It uses
+            <a
+              href="https://www.radix-ui.com/docs/primitives/components/dialog"
+              class="underline"
+              target="_blank"
+            >Radix's Dialog primitive</a>
+            under the hood and is inspired by
+            <a
+              href="https://twitter.com/devongovett/status/1674470185783402496"
+              class="underline"
+              target="_blank"
+            >this tweet.</a>
+          </p>
         </div>
-      </DrawerContent>
+      </DrawerContentWrapper>
     </DrawerPortal>
   </DrawerRoot>
 </template>

playground/src/components/DrawerContent.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { DrawerContent, type DrawerDirection } from 'vaul-vue'
+
+const props = withDefaults(defineProps<{
+  direction: DrawerDirection
+}>(), {
+  direction: 'bottom',
+})
+</script>
+
+<template>
+  <DrawerContent
+    data-testid="content"
+    class="bg-zinc-100 flex fixed p-6"
+    :class="{
+      'rounded-t-[10px] flex-col h-[50%] bottom-0 left-0 right-0': direction === 'bottom',
+      'rounded-b-[10px] flex-col h-[50%] top-0 left-0 right-0': direction === 'top',
+      'rounded-r-[10px] flex-row w-[50%] left-0 top-0 bottom-0': direction === 'left',
+      'rounded-l-[10px] flex-row w-[50%] right-0 top-0 bottom-0': direction === 'right',
+    }"
+  >
+    <div
+      class="w-full h-full flex rounded-full gap-8"
+      :class="{
+        'flex-col': direction === 'bottom',
+        'flex-col-reverse': direction === 'top',
+        'flex-row-reverse': direction === 'left',
+        'flex-row ': direction === 'right',
+      }"
+    >
+      <div
+        class="rounded-full bg-zinc-300"
+        :class="{
+          'mx-auto w-12 h-1.5': direction === 'top' || direction === 'bottom',
+          'my-auto h-12 w-1.5': direction === 'left' || direction === 'right',
+        }"
+      />
+
+      <div class="grid place-content-center w-full h-full">
+        <slot />
+      </div>
+    </div>
+  </DrawerContent>
+</template>