fix: fix popper in dialog isn't enough space to position problem (#2102)

Co-authored-by: yangyu8 <yangyu8@kingsoft.com>

packages/popper/src/use-popper/build-modifiers.ts

@@ -1,10 +1,11 @@
-import type { StrictModifiers } from '@popperjs/core'
+import type { StrictModifiers, Placement } from '@popperjs/core'
 
 interface ModifierProps {
   offset?: number
   arrow?: HTMLElement
   arrowOffset?: number
   gpuAcceleration?: boolean
+  fallbackPlacements?: Array<Placement>
 }
 
 export default function buildModifier(props: ModifierProps, externalModifiers: StrictModifiers[] = []) {
@@ -14,6 +15,7 @@ export default function buildModifier(props: ModifierProps, externalModifiers: S
     arrowOffset,
     offset,
     gpuAcceleration,
+    fallbackPlacements,
   } = props
 
   const modifiers: Array<StrictModifiers> = [
@@ -38,6 +40,7 @@ export default function buildModifier(props: ModifierProps, externalModifiers: S
       name: 'flip',
       options: {
         padding: 5,
+        fallbackPlacements: fallbackPlacements ?? [],
       },
     },
     {

packages/popper/src/use-popper/defaults.ts

@@ -1,4 +1,4 @@
-import type { PropType } from 'vue'
+import type { PropType  } from 'vue'
 import type { Placement, PositioningStrategy, Instance as PopperInstance, Options } from '@popperjs/core'
 
 export enum Effect {
@@ -35,9 +35,11 @@ export type IPopperOptions = {
   visible: boolean
   stopPopperMouseEvent: boolean
   gpuAcceleration: boolean
+  fallbackPlacements: Array<Placement>
 }
 
 export const DEFAULT_TRIGGER = 'hover'
+const DEFAULT_FALLBACK_PLACEMENTS = ['auto']
 
 export default {
   // the arrow size is an equailateral triangle with 10px side length, the 3rd side length ~ 14.1px
@@ -144,4 +146,8 @@ export default {
     type: Boolean,
     default: true,
   },
+  fallbackPlacements: {
+    type: Array as PropType<Placement[]>,
+    default: DEFAULT_FALLBACK_PLACEMENTS,
+  },
 }

packages/popper/src/use-popper/popper-options.ts

@@ -10,6 +10,7 @@ interface IUsePopperProps {
   offset: number
   placement: Placement
   gpuAcceleration: boolean
+  fallbackPlacements: Array<Placement>
 }
 
 interface IUsePopperState {
@@ -27,6 +28,7 @@ export default function usePopperOptions(props: IUsePopperProps, state: IUsePopp
         arrowOffset: props.arrowOffset,
         offset: props.offset,
         gpuAcceleration: props.gpuAcceleration,
+        fallbackPlacements: props.fallbackPlacements,
       }, props.popperOptions?.modifiers),
     }
   })