feat(gui-v2): extend overlay props

packages/nc-gui-v2/components/general/Overlay.vue

@@ -1,9 +1,16 @@
 <script lang="ts" setup>
 import { onKeyDown } from '@vueuse/core'
+import type { TeleportProps } from '@vue/runtime-core'
 import { useVModel, watch } from '#imports'
 
 interface Props {
   modelValue?: any
+  /** if true, overlay will use `position: absolute` instead of `position: fixed` */
+  inline?: boolean
+  /** target to teleport to */
+  target?: TeleportProps['to']
+  teleportDisabled?: TeleportProps['disabled']
+  transition?: boolean
 }
 
 interface Emits {
@@ -12,11 +19,11 @@ interface Emits {
   (event: 'open'): void
 }
 
-const props = defineProps<Props>()
+const { transition = true, teleportDisabled = false, inline = false, target, ...rest } = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
-const vModel = useVModel(props, 'modelValue', emits)
+const vModel = useVModel(rest, 'modelValue', emits)
 
 onKeyDown('Escape', () => {
   vModel.value = false
@@ -28,11 +35,22 @@ watch(vModel, (nextVal) => {
 })
 </script>
 
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
+
 <template>
-  <teleport to="body">
+  <teleport :disabled="teleportDisabled || (inline && !target)" :to="target || 'body'">
     <div
-      :class="[vModel ? 'opacity-100' : 'opacity-0 pointer-events-none']"
-      class="transition-opacity duration-200 ease-in-out fixed z-100 top-0 left-0 bottom-0 right-0 bg-gray-700/75"
+      v-bind="$attrs"
+      :class="[
+        vModel ? 'opacity-100' : 'opacity-0 pointer-events-none',
+        inline ? 'absolute' : 'fixed',
+        transition ? 'transition-opacity duration-200 ease-in-out' : '',
+      ]"
+      class="z-100 top-0 left-0 bottom-0 right-0 bg-gray-700/75"
     >
       <slot :is-open="vModel" />
     </div>