fix: modal/drawer position fixed while append to body

docs/src/components/common-ui/vben-drawer.md

@@ -98,6 +98,12 @@ const [Drawer, drawerApi] = useVbenDrawer({
 | headerClass | modal顶部区域的class | `string` | - |
 | zIndex | 抽屉的ZIndex层级 | `number` | `1000` |
 
+::: info appendToMain
+
+`appendToMain`可以指定将抽屉挂载到内容区域，打开抽屉时，内容区域以外的部分（标签栏、导航菜单等等）不会被遮挡。默认情况下，抽屉会挂载到body上。但是：挂载到内容区域时，作为页面根容器的`Page`组件，需要设置`auto-content-height`属性，以便抽屉能够正确计算高度。
+
+:::
+
 ### Event
 
 以下事件，只有在 `useVbenDrawer({onCancel:()=>{}})` 中传入才会生效。

docs/src/components/common-ui/vben-modal.md

@@ -109,6 +109,12 @@ const [Modal, modalApi] = useVbenModal({
 | bordered | 是否显示border | `boolean` | `false` |
 | zIndex | 抽屉的ZIndex层级 | `number` | `1000` |
 
+::: info appendToMain
+
+`appendToMain`可以指定将抽屉挂载到内容区域，打开抽屉时，内容区域以外的部分（标签栏、导航菜单等等）不会被遮挡。默认情况下，抽屉会挂载到body上。但是：挂载到内容区域时，作为页面根容器的`Page`组件，需要设置`auto-content-height`属性，以便抽屉能够正确计算高度。
+
+:::
+
 ### Event
 
 以下事件，只有在 `useVbenModal({onCancel:()=>{}})` 中传入才会生效。

packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue

@@ -47,6 +47,18 @@ const delegatedProps = computed(() => {
   return delegated;
 });
 
+function isAppendToBody() {
+  return (
+    props.appendTo === 'body' ||
+    props.appendTo === document.body ||
+    !props.appendTo
+  );
+}
+
+const position = computed(() => {
+  return isAppendToBody() ? 'fixed' : 'absolute';
+});
+
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
 const contentRef = ref<InstanceType<typeof DialogContent> | null>(null);
@@ -70,18 +82,18 @@ defineExpose({
     <Transition name="fade">
       <DialogOverlay
         v-if="open && modal"
-        :style="{ zIndex }"
+        :style="{ zIndex, position }"
         @click="() => emits('close')"
       />
     </Transition>
     <DialogContent
       ref="contentRef"
-      :style="{ zIndex }"
+      :style="{ zIndex, position }"
       @animationend="onAnimationEnd"
       v-bind="forwarded"
       :class="
         cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%] absolute w-full p-6 shadow-lg outline-none sm:rounded-xl',
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%] w-full p-6 shadow-lg outline-none sm:rounded-xl',
           props.class,
         )
       "

packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogOverlay.vue

@@ -7,5 +7,5 @@ useScrollLock();
 const id = inject('DISMISSABLE_MODAL_ID');
 </script>
 <template>
-  <div :data-dismissable-modal="id" class="bg-overlay absolute inset-0"></div>
+  <div :data-dismissable-modal="id" class="bg-overlay fixed inset-0"></div>
 </template>

packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetContent.vue

@@ -46,17 +46,29 @@ const delegatedProps = computed(() => {
   return delegated;
 });
 
+function isAppendToBody() {
+  return (
+    props.appendTo === 'body' ||
+    props.appendTo === document.body ||
+    !props.appendTo
+  );
+}
+
+const position = computed(() => {
+  return isAppendToBody() ? 'fixed' : 'absolute';
+});
+
 const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
   <DialogPortal :to="appendTo">
     <Transition name="fade">
-      <SheetOverlay v-if="open && modal" :style="{ zIndex }" />
+      <SheetOverlay v-if="open && modal" :style="{ zIndex, position }" />
     </Transition>
     <DialogContent
       :class="cn(sheetVariants({ side }), props.class)"
-      :style="{ zIndex }"
+      :style="{ zIndex, position }"
       v-bind="{ ...forwarded, ...$attrs }"
     >
       <slot></slot>

packages/@core/ui-kit/shadcn-ui/src/ui/sheet/sheet.ts

@@ -1,7 +1,7 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 
 export const sheetVariants = cva(
-  'absolute z-[1000] bg-background shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 border-border',
+  'z-[1000] bg-background shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 border-border',
   {
     defaultVariants: {
       side: 'right',

playground/src/views/examples/vxe-table/basic.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { VxeGridListeners, VxeGridProps } from '#/adapter/vxe-table';
 
-import { Page } from '@vben/common-ui';
+import { Page, useVbenDrawer, useVbenModal } from '@vben/common-ui';
 
 import { Button, message } from 'ant-design-vue';
 
@@ -66,6 +66,16 @@ function changeLoading() {
     gridApi.setLoading(false);
   }, 2000);
 }
+
+const [Modal, modalApi] = useVbenModal();
+const [Drawer, drawerApi] = useVbenDrawer();
+function openModal() {
+  modalApi.open();
+}
+
+function openDrawer() {
+  drawerApi.open();
+}
 </script>
 
 <template>
@@ -76,6 +86,16 @@ function changeLoading() {
     <template #extra>
       <DocButton path="/components/common-ui/vben-vxe-table" />
     </template>
+    <template #footer>
+      <Button type="primary" @click="openModal">打开弹窗</Button>
+      <Button type="primary" @click="openDrawer">打开抽屉</Button>
+    </template>
+    <Modal title="弹窗测试">
+      <p>这是一个弹窗</p>
+    </Modal>
+    <Drawer title="抽屉测试">
+      <p>这是一个抽屉</p>
+    </Drawer>
     <Grid table-title="基础列表" table-title-help="提示">
       <!-- <template #toolbar-actions>
         <Button class="mr-2" type="primary">左侧插槽</Button>