feat(Drawer): add inset prop

Resolves #2994

src/runtime/components/Drawer.vue

@@ -19,6 +19,11 @@ export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | '
   as?: any
   title?: string
   description?: string
+  /**
+   * Whether to inset the drawer from the edges.
+   * @defaultValue false
+   */
+  inset?: boolean
   /** The content of the drawer. */
   content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'>
   /**
@@ -80,7 +85,8 @@ const rootProps = useForwardPropsEmits(reactivePick(props, 'activeSnapPoint', 'c
 const contentProps = toRef(() => props.content)
 
 const ui = computed(() => drawer({
-  direction: props.direction
+  direction: props.direction,
+  inset: props.inset
 }))
 </script>
 

src/theme/drawer.ts

@@ -13,34 +13,87 @@ export default {
   variants: {
     direction: {
       top: {
-        content: 'top-0 mb-24 flex-col-reverse rounded-b-[calc(var(--ui-radius)*2)]',
+        content: 'mb-24 flex-col-reverse',
         handle: 'mb-4'
       },
       right: {
-        content: 'right-4 flex-row',
+        content: 'flex-row',
         handle: 'ml-4'
       },
       bottom: {
-        content: 'bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)]',
+        content: 'mt-24 flex-col',
         handle: 'mt-4'
       },
       left: {
-        content: 'left-4 flex-row-reverse',
+        content: 'flex-row-reverse',
         handle: 'mr-4'
       }
+    },
+    inset: {
+      true: {
+        content: 'rounded-[calc(var(--ui-radius)*2)] after:hidden'
+      }
     }
   },
   compoundVariants: [{
     direction: ['top', 'bottom'],
     class: {
-      content: 'inset-x-0 h-auto max-h-[96%]',
+      content: 'h-auto max-h-[96%]',
       handle: 'w-12 h-1.5 mx-auto'
     }
   }, {
     direction: ['right', 'left'],
     class: {
-      content: 'inset-y-4 w-auto max-w-[calc(100%-2rem)] rounded-[calc(var(--ui-radius)*2)] after:hidden',
+      content: 'w-auto max-w-[calc(100%-2rem)]',
       handle: 'h-12 w-1.5 mt-auto mb-auto'
     }
+  }, {
+    direction: 'top',
+    inset: true,
+    class: {
+      content: 'inset-x-4 top-4'
+    }
+  }, {
+    direction: 'top',
+    inset: false,
+    class: {
+      content: 'inset-x-0 top-0 rounded-b-[calc(var(--ui-radius)*2)]'
+    }
+  }, {
+    direction: 'bottom',
+    inset: true,
+    class: {
+      content: 'inset-x-4 bottom-4'
+    }
+  }, {
+    direction: 'bottom',
+    inset: false,
+    class: {
+      content: 'inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]'
+    }
+  }, {
+    direction: 'left',
+    inset: true,
+    class: {
+      content: 'inset-y-4 left-4'
+    }
+  }, {
+    direction: 'left',
+    inset: false,
+    class: {
+      content: 'inset-y-0 left-0 rounded-r-[calc(var(--ui-radius)*2)]'
+    }
+  }, {
+    direction: 'right',
+    inset: true,
+    class: {
+      content: 'inset-y-4 right-4'
+    }
+  }, {
+    direction: 'right',
+    inset: false,
+    class: {
+      content: 'inset-y-0 right-0 rounded-l-[calc(var(--ui-radius)*2)]'
+    }
   }]
 }