fix(Drawer): use full height/width for snapPoints (#5041)

Co-authored-by: Benjamin Canac <[email protected]>

Author: J-Michalek

src/runtime/components/Drawer.vue

@@ -109,7 +109,8 @@ const contentEvents = computed(() => {
 
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.drawer || {}) })({
   direction: props.direction,
-  inset: props.inset
+  inset: props.inset,
+  snapPoints: props.snapPoints && props.snapPoints.length > 0
 }))
 </script>
 

src/theme/drawer.ts

@@ -35,6 +35,9 @@ export default (options: Required<ModuleOptions>) => ({
       true: {
         content: 'rounded-lg after:hidden overflow-hidden [--initial-transform:calc(100%+1.5rem)]'
       }
+    },
+    snapPoints: {
+      true: ''
     }
   },
   compoundVariants: [{
@@ -43,13 +46,26 @@ export default (options: Required<ModuleOptions>) => ({
       content: 'h-auto max-h-[96%]',
       handle: '!w-12 !h-1.5 mx-auto'
     }
+  }, {
+    direction: ['top', 'bottom'],
+    snapPoints: true,
+    class: {
+      content: 'h-full'
+    }
   }, {
     direction: ['right', 'left'],
     class: {
       content: 'w-auto max-w-[calc(100%-2rem)]',
       handle: '!h-12 !w-1.5 mt-auto mb-auto'
     }
   }, {
+    direction: ['right', 'left'],
+    snapPoints: true,
+    class: {
+      content: 'w-full'
+    }
+  },
+  {
     direction: 'top',
     inset: true,
     class: {