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