feat(hooks): export popperjs common attributes (#2520)

- Export popperjs/core common attributes for reusing

packages/hooks/index.ts

@@ -10,3 +10,4 @@ export { default as usePreventGlobal } from './use-prevent-global'
 export { default as useTeleport } from './use-teleport'
 export { default as useTimeout } from './use-timeout'
 export * from './use-model-toggle'
+export * from './use-popper'

packages/hooks/use-popper/index.ts

@@ -58,22 +58,48 @@ export const LIGHT_EFFECT = 'light'
 
 const DEFAULT_FALLBACK_PLACEMENTS = []
 
-export const usePopperProps = {
-  // the arrow size is an equailateral triangle with 10px side length, the 3rd side length ~ 14.1px
-  // adding a offset to the ceil of 4.1 should be 5 this resolves the problem of arrow overflowing out of popper.
-  arrowOffset: {
-    type: Number,
-    default: 5,
-  },
+
+export const popperConfigs = {
   appendToBody: {
     type: Boolean,
     default: true,
   },
-  autoClose: {
+  arrowOffset: {
     type: Number,
-    default: 0,
+    default: 5,
   },
-  boundariesPadding: {
+  fallbackPlacements: {
+    type: Array as PropType<Placement[]>,
+    default: () => DEFAULT_FALLBACK_PLACEMENTS,
+  },
+  gpuAcceleration: {
+    type: Boolean,
+    default: true,
+  },
+  offset: {
+    type: Number,
+    default: 12,
+  },
+  placement: {
+    type: String as PropType<Placement>,
+    default: 'bottom' as Placement,
+  },
+  // Once this option were given, the entire popper is under the users' control, top priority
+  popperOptions: {
+    type: Object as PropType<Options>,
+    default: () => null,
+  },
+  strategy: {
+    type: String as PropType<PositioningStrategy>,
+    default: 'fixed' as PositioningStrategy,
+  },
+}
+
+export const usePopperProps = {
+  ...popperConfigs,
+  // the arrow size is an equailateral triangle with 10px side length, the 3rd side length ~ 14.1px
+  // adding a offset to the ceil of 4.1 should be 5 this resolves the problem of arrow overflowing out of popper.
+  autoClose: {
     type: Number,
     default: 0,
   },
@@ -90,10 +116,6 @@ export const usePopperProps = {
     type: Number,
     default: 200,
   },
-  cutoff: {
-    type: Boolean,
-    default: false,
-  },
   disabled: {
     type: Boolean,
     default: false,
@@ -114,14 +136,6 @@ export const usePopperProps = {
     type: Number,
     default: 0,
   },
-  offset: {
-    type: Number,
-    default: 12,
-  },
-  placement: {
-    type: String as PropType<Placement>,
-    default: 'bottom' as Placement,
-  },
   popperClass: {
     type: String,
     default: '',
@@ -130,19 +144,10 @@ export const usePopperProps = {
     type: Boolean,
     default: false,
   },
-  // Once this option were given, the entire popper is under the users' control, top priority
-  popperOptions: {
-    type: Object as PropType<Options>,
-    default: () => null,
-  },
   showArrow: {
     type: Boolean,
     default: true,
   },
-  strategy: {
-    type: String as PropType<PositioningStrategy>,
-    default: 'fixed' as PositioningStrategy,
-  },
   transition: {
     type: String,
     default: 'el-fade-in-linear',
@@ -159,14 +164,6 @@ export const usePopperProps = {
     type: Boolean,
     default: true,
   },
-  gpuAcceleration: {
-    type: Boolean,
-    default: true,
-  },
-  fallbackPlacements: {
-    type: Array as PropType<Placement[]>,
-    default: () => DEFAULT_FALLBACK_PLACEMENTS,
-  },
 }
 
 export const usePopper = () => {

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

@@ -1,15 +1,21 @@
 import { computed, getCurrentInstance } from 'vue'
 
 import type { Ref } from 'vue'
-import type { Options, Placement, StrictModifiers } from '@popperjs/core'
+import type {
+  Options,
+  Placement,
+  StrictModifiers,
+  PositioningStrategy,
+} from '@popperjs/core'
 
 interface IUsePopperProps {
-  popperOptions: Options
   arrowOffset: number
-  offset: number
-  placement: Placement
-  gpuAcceleration: boolean
   fallbackPlacements: Array<Placement>
+  gpuAcceleration: boolean
+  offset: number
+  popperOptions: Options
+  placement: Placement
+  strategy: PositioningStrategy
 }
 
 export const usePopperOptions = (arrowRef: Ref<HTMLElement>) => {
@@ -20,6 +26,7 @@ export const usePopperOptions = (arrowRef: Ref<HTMLElement>) => {
   return computed(() => {
     return {
       placement: props.placement,
+      strategy: props.strategy,
       ...props.popperOptions,
       // Avoiding overriding modifiers.
       modifiers: buildModifiers({