Enhancement: Drawer teleporting

demo/sections/components/Drawer.vue

@@ -61,6 +61,18 @@
         </p-navigation-bar>
       </p-drawer>
     </template>
+
+    <template #local>
+      <div class="drawer__local">
+        Local drawer
+
+        <p-button @click="toggle('local')">Open</p-button>
+
+        <p-drawer v-model:open="drawers.local" :placement disable-teleport class="p-background">
+          Local drawer
+        </p-drawer>
+      </div>
+    </template>
   </ComponentPage>
 </template>
 
@@ -79,6 +91,9 @@
     {
       title: 'Advanced',
     },
+    {
+      title: 'Local',
+    },
   ]
 
   const placement = ref<DrawerPlacement>('left')
@@ -89,6 +104,7 @@
     nested: false,
     nestedBottom: false,
     advanced: false,
+    local: false,
   })
 
   const toggle = (name: keyof typeof drawers): void => {
@@ -123,4 +139,11 @@
 .p-drawer--bottom .drawer__navigation-bar { @apply
   rounded-t-default
 }
-</style>
+
+.drawer__local { @apply
+  bg-slate-500
+  h-96
+  w-full
+  relative
+}
+</style>

src/components/Drawer/PDrawer.vue

@@ -1,8 +1,8 @@
 <template>
-  <teleport :to>
+  <teleport :to :disabled="disableTeleport">
     <transition name="p-drawer__slide" :duration="350">
       <keep-alive>
-        <PLayoutResizable v-if="open" :disabled="!resizable" class="p-drawer" :class="classes.root" :placement="placement">
+        <PLayoutResizable v-if="open" :disabled="!resizable" class="p-drawer" :class="classes.root" :placement>
           <template #aside>
             <div class="p-drawer__aside" v-bind="attrs">
               <slot v-bind="drawerScope" />
@@ -27,40 +27,27 @@
 </script>
 
 <script lang="ts" setup>
-  import { computed, useAttrs, ref } from 'vue'
+  import { computed, useAttrs } from 'vue'
   import { useDrawer, useGlobalEventListener } from '@/compositions'
   import { PLayoutResizable } from '@/layouts'
   import { DrawerPlacement, keys } from '@/types'
   import { isKeyEvent } from '@/utilities'
 
-  const props = defineProps<{
-    open?: boolean,
+  const props = withDefaults(defineProps<{
     resizable?: boolean,
     placement?: DrawerPlacement,
     to?: string,
-  }>()
-
-  const emit = defineEmits<{
-    (event: 'update:open', value: boolean): void,
-  }>()
+    disableTeleport?: boolean,
+  }>(), {
+    placement: 'left',
+    to: 'body',
+  })
 
-  const placement = computed(() => props.placement ?? 'left')
-  const to = computed(() => props.to ?? 'body')
+  const open = defineModel<boolean>('open', { required: true })
 
   const attrs = useAttrs()
-
-  const internalOpen = ref<boolean>(false)
-  const open = computed<boolean>({
-    get() {
-      return props.open || internalOpen.value
-    },
-    set(value) {
-      internalOpen.value = value
-      emit('update:open', value)
-    },
-  })
-
   const drawerScope = useDrawer(open)
+
   function closeOnEscape(event: KeyboardEvent): void {
     if (isKeyEvent(keys.escape, event)) {
       drawerScope.close()
@@ -69,7 +56,10 @@
   useGlobalEventListener('keyup', closeOnEscape)
 
   const classes = computed(() => ({
-    root: `p-drawer--${placement.value}`,
+    root: {
+      [`p-drawer--${props.placement}`]: true,
+      'p-drawer--teleport': !props.disableTeleport,
+    },
   }))
 </script>
 
@@ -98,11 +88,15 @@
 
 .p-drawer { @apply
   h-full
-  fixed
+  absolute
   w-full
   z-50
 }
 
+.p-drawer--teleport { @apply
+  fixed
+}
+
 .p-drawer--top,
 .p-drawer--left { @apply
   left-0
@@ -167,4 +161,4 @@
 .p-drawer__slide-leave-to::before { @apply
   opacity-0
 }
-</style>
+</style>