fix: adjusted to not working for popover

src/_styles/common/dark.ts

@@ -183,9 +183,8 @@ const derived: ThemeCommonVars = {
 
   boxShadow1:
     '0 1px 2px -2px rgba(0, 0, 0, .24), 0 3px 6px 0 rgba(0, 0, 0, .18), 0 5px 12px 4px rgba(0, 0, 0, .12)',
-
   boxShadow2:
-    '0 3px 6px -4px rgba(0, 0, 0, .16), 0 6px 12px 0 rgba(0, 0, 0, .08), 0 9px 18px 8px rgba(0, 0, 0, .04)',
+    '0 3px 6px -4px rgba(0, 0, 0, .24), 0 6px 12px 0 rgba(0, 0, 0, .16), 0 9px 18px 8px rgba(0, 0, 0, .10)',
   boxShadow3:
     '0 6px 16px -9px rgba(0, 0, 0, .08), 0 9px 28px 0 rgba(0, 0, 0, .05), 0 12px 48px 16px rgba(0, 0, 0, .03)'
 }

src/_utils/composable/use-adjusted-to.ts

@@ -1,7 +1,8 @@
 import { useMemo } from 'vooks'
 import { ComponentPublicInstance, ComputedRef, inject } from 'vue'
-import type { ModalBodyInjection } from '../../modal/src/BodyWrapper'
-import type { DrawerBodyInjection } from '../../drawer/src/DrawerBodyWrapper'
+import { modalBodyInjectionKey } from '../../modal/src/interface'
+import { drawerBodyInjectionKey } from '../../drawer/src/interface'
+import { popoverBodyInjectionKey } from '../../popover/src/interface'
 
 interface UseAdjustedToProps {
   to?: string | HTMLElement
@@ -11,15 +12,17 @@ interface UseAdjustedToProps {
 export function useAdjustedTo (
   props: UseAdjustedToProps
 ): ComputedRef<HTMLElement | string> {
-  const modal = inject<ModalBodyInjection | null>('NModalBody', null)
-  const drawer = inject<DrawerBodyInjection | null>('NDrawerBody', null)
+  const modal = inject(modalBodyInjectionKey, null)
+  const drawer = inject(drawerBodyInjectionKey, null)
+  const popover = inject(popoverBodyInjectionKey, null)
   return useMemo(() => {
     const { to } = props
     if (to !== undefined) return to
-    if (modal?.bodyRef) {
-      return (modal.bodyRef as ComponentPublicInstance).$el ?? modal.bodyRef
+    if (modal?.value) {
+      return (modal.value as ComponentPublicInstance).$el ?? modal.value
     }
-    if (drawer) return drawer.bodyRef
+    if (drawer?.value) return drawer.value
+    if (popover?.value) return popover.value
     return to ?? 'body'
   })
 }

src/drawer/src/DrawerBodyWrapper.tsx

@@ -7,7 +7,6 @@ import {
   watchEffect,
   provide,
   inject,
-  reactive,
   PropType,
   withDirectives,
   vShow,
@@ -18,6 +17,9 @@ import { NScrollbar } from '../../scrollbar'
 import type { ScrollbarProps } from '../../scrollbar'
 import type { MergedTheme } from '../../_mixins'
 import type { DrawerTheme } from '../styles'
+import { popoverBodyInjectionKey } from '../../popover/src/interface'
+import { modalBodyInjectionKey } from '../../modal/src/interface'
+import { drawerBodyInjectionKey } from './interface'
 
 export type Placement = 'left' | 'right' | 'top' | 'bottom'
 
@@ -26,10 +28,6 @@ export interface DrawerInjection {
   mergedTheme: MergedTheme<DrawerTheme>
 }
 
-export interface DrawerBodyInjection {
-  bodyRef: HTMLElement | null
-}
-
 export default defineComponent({
   name: 'NDrawerContent',
   inheritAttrs: false,
@@ -62,13 +60,9 @@ export default defineComponent({
     function handleAfterLeave (): void {
       displayedRef.value = false
     }
-    provide<DrawerBodyInjection>(
-      'NDrawerBody',
-      reactive({
-        bodyRef
-      })
-    )
-    provide('NModalBody', null)
+    provide(drawerBodyInjectionKey, bodyRef)
+    provide(popoverBodyInjectionKey, null)
+    provide(modalBodyInjectionKey, null)
     return {
       NDrawer,
       displayed: displayedRef,

src/drawer/src/interface.ts

@@ -0,0 +1,6 @@
+import { Ref, InjectionKey } from 'vue'
+
+export type DrawerBodyInjection = Ref<HTMLElement | null> | null
+export const drawerBodyInjectionKey: InjectionKey<DrawerBodyInjection> = Symbol(
+  'drawerBodyInjeciton'
+)

src/modal/src/BodyWrapper.tsx

@@ -1,7 +1,6 @@
 import {
   h,
   nextTick,
-  reactive,
   toRef,
   watch,
   ref,
@@ -23,10 +22,9 @@ import { NCard, cardPropKeys } from '../../card'
 import { getFirstSlotVNode, keep, warn } from '../../_utils'
 import { presetProps } from './presetProps'
 import type { ModalInjection } from './Modal'
-
-export interface ModalBodyInjection {
-  bodyRef: HTMLElement | ComponentPublicInstance | null
-}
+import { drawerBodyInjectionKey } from '../../drawer/src/interface'
+import { popoverBodyInjectionKey } from '../../popover/src/interface'
+import { modalBodyInjectionKey } from './interface'
 
 export default defineComponent({
   name: 'ModalBody',
@@ -135,13 +133,9 @@ export default defineComponent({
     function handleClickOutside (e: MouseEvent): void {
       props.onClickoutside(e)
     }
-    provide<ModalBodyInjection>(
-      'NModalBody',
-      reactive({
-        bodyRef
-      })
-    )
-    provide('NDrawerBody', null)
+    provide(modalBodyInjectionKey, bodyRef)
+    provide(drawerBodyInjectionKey, null)
+    provide(popoverBodyInjectionKey, null)
     return {
       NModal,
       bodyRef,

src/modal/src/interface.ts

@@ -0,0 +1,9 @@
+import { Ref, ComponentPublicInstance, InjectionKey } from 'vue'
+
+export type ModalBodyInjection = Ref<
+HTMLElement | ComponentPublicInstance | null
+> | null
+
+export const modalBodyInjectionKey: InjectionKey<ModalBodyInjection> = Symbol(
+  'modalBodyInjection'
+)

src/popover/src/PopoverBody.ts

@@ -12,7 +12,8 @@ import {
   DirectiveArguments,
   PropType,
   watch,
-  toRef
+  toRef,
+  provide
 } from 'vue'
 import { VFollower, FollowerPlacement, FollowerRef } from 'vueuc'
 import { clickoutside, mousemoveoutside } from 'vdirs'
@@ -23,7 +24,10 @@ import { popoverLight } from '../styles'
 import type { PopoverTheme } from '../styles'
 import style from './styles/index.cssr'
 import type { PopoverInjection } from './Popover'
-import { PopoverTrigger } from './interface'
+import type { PopoverTrigger } from './interface'
+import { popoverBodyInjectionKey } from './interface'
+import { drawerBodyInjectionKey } from '../../drawer/src/interface'
+import { modalBodyInjectionKey } from '../../modal/src/interface'
 
 export const popoverBodyProps = {
   ...(useTheme.props as ThemeProps<PopoverTheme>),
@@ -58,6 +62,7 @@ export default defineComponent({
     const themeRef = useTheme('Popover', 'Popover', style, popoverLight, props)
     const followerRef = ref<FollowerRef | null>(null)
     const NPopover = inject<PopoverInjection>('NPopover') as PopoverInjection
+    const bodyRef = ref<HTMLElement | null>(null)
     const followerEnabledRef = ref(props.show)
     const directivesRef = computed<DirectiveArguments>(() => {
       const { trigger } = props
@@ -167,10 +172,14 @@ export default defineComponent({
     function getTriggerElement (): HTMLElement {
       return NPopover.getTriggerElement()
     }
+    provide(popoverBodyInjectionKey, bodyRef)
+    provide(drawerBodyInjectionKey, null)
+    provide(modalBodyInjectionKey, null)
     return {
       ...useConfig(props),
       NPopover,
       followerRef,
+      bodyRef,
       adjustedTo: useAdjustedTo(props),
       followerEnabled: followerEnabledRef,
       style: styleRef,
@@ -198,7 +207,7 @@ export default defineComponent({
                     'n-popover--raw': this.raw
                   }
                 ],
-                ref: 'body',
+                ref: 'bodyRef',
                 style: this.style,
                 onMouseenter: this.handleMouseEnter,
                 onMouseleave: this.handleMouseLeave

src/popover/src/interface.ts

@@ -1,6 +1,14 @@
+import { Ref, InjectionKey } from 'vue'
+
 export type PopoverTrigger = 'click' | 'hover' | 'manual'
 
 export interface PopoverInst {
   syncPosition: () => void
   setShow: (value: boolean) => void
 }
+
+export type PopoverBodyInjection = Ref<HTMLElement | null> | null
+
+export const popoverBodyInjectionKey: InjectionKey<PopoverBodyInjection> = Symbol(
+  'popoverBodyInjection'
+)