refactor(popper): refactor extract common props for props (#2300)

- Extract some common props out of prop

Co-authored-by: jeremywuuuuu <jeremywuuuuu@no-reply.github.com>

packages/constants/index.ts

@@ -0,0 +1,2 @@
+export * from './popper.constants'
+

packages/constants/package.json

@@ -0,0 +1,13 @@
+{
+    "name": "@element-plus/constants",
+    "description": "Stores all commonly used constants",
+    "version": "0.0.0",
+    "license": "MIT",
+    "peerDependencies": {
+      "vue": "3.1.1"
+    },
+    "devDependencies": {
+      "@vue/test-utils": "^2.0.0-beta.3"
+    }
+  }
+  

packages/constants/popper.constants.ts

@@ -0,0 +1,6 @@
+export const DARK_EFFECT = 'dark'
+export const LIGHT_EFFECT = 'light'
+
+export const DEFAULT_TRIGGER = 'hover'
+export const DEFAULT_FALLBACK_PLACEMENTS = []
+

packages/internal/package.json

@@ -0,0 +1,13 @@
+{
+    "name": "@element-plus/internal",
+    "description": "Stores all internal objects",
+    "version": "0.0.0",
+    "license": "MIT",
+    "peerDependencies": {
+      "vue": "3.1.1"
+    },
+    "devDependencies": {
+      "@vue/test-utils": "^2.0.0-beta.3"
+    }
+  }
+  

packages/internal/props/use-popper-props.ts

@@ -1,12 +1,11 @@
-import type { PropType  } from 'vue'
+
+import { DEFAULT_TRIGGER, DEFAULT_FALLBACK_PLACEMENTS } from '@element-plus/constants/popper.constants'
+
+import type { PropType, ExtractPropTypes } from 'vue'
 import type { Placement, PositioningStrategy, Instance as PopperInstance, Options } from '@popperjs/core'
 
-export enum Effect {
-  DARK = 'dark',
-  LIGHT = 'light'
-}
+export type Effect = 'light' | 'dark'
 
-export type RefElement = Nullable<HTMLElement>
 export type Offset = [number, number] | number
 
 export type { Placement, PositioningStrategy, PopperInstance, Options }
@@ -15,33 +14,7 @@ export type TriggerType = 'click' | 'hover' | 'focus' | 'manual'
 
 export type Trigger = TriggerType | TriggerType[]
 
-export type IPopperOptions = {
-  arrowOffset: number
-  autoClose: number
-  boundariesPadding: number
-  class: string
-  cutoff: boolean
-  disabled: boolean
-  enterable: boolean
-  hideAfter: number
-  manualMode: boolean
-  offset: number
-  placement: Placement
-  popperOptions: Options
-  showAfter: number
-  showArrow: boolean
-  strategy: PositioningStrategy
-  trigger: Trigger
-  visible: boolean
-  stopPopperMouseEvent: boolean
-  gpuAcceleration: boolean
-  fallbackPlacements: Array<Placement>
-}
-
-export const DEFAULT_TRIGGER = 'hover'
-const DEFAULT_FALLBACK_PLACEMENTS = []
-
-export default {
+const defaultProps = {
   // 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: {
@@ -83,7 +56,7 @@ export default {
   },
   effect: {
     type: String as PropType<Effect>,
-    default: Effect.DARK,
+    default: 'dark',
   },
   enterable: {
     type: Boolean,
@@ -151,3 +124,7 @@ export default {
     default: DEFAULT_FALLBACK_PLACEMENTS,
   },
 }
+
+export type IPopperOptions = ExtractPropTypes<typeof defaultProps>
+
+export default defaultProps

packages/popover/src/index.vue

@@ -1,15 +1,17 @@
 <script lang="ts">
 import { defineComponent, Fragment, createTextVNode, renderSlot, toDisplayString, createCommentVNode, withDirectives, Teleport, h } from 'vue'
 import ElPopper from '@element-plus/popper'
-import { defaultProps, Effect } from '@element-plus/popper'
 import { renderPopper, renderTrigger, renderArrow } from '@element-plus/popper'
 import { ClickOutside } from '@element-plus/directives'
 import { warn } from '@element-plus/utils/error'
+import defaultProps from '@element-plus/internal/props/use-popper-props'
+import { LIGHT_EFFECT } from '@element-plus/constants/popper.constants'
 import { renderIf, PatchFlags } from '@element-plus/utils/vnode'
+
 import usePopover, { SHOW_EVENT, HIDE_EVENT } from './usePopover'
 
 import type { PropType } from 'vue'
-import type { TriggerType } from '@element-plus/popper'
+import type { TriggerType } from '@element-plus/internal/props/use-popper-props'
 
 const emits = ['update:visible', 'after-enter', 'after-leave', SHOW_EVENT, HIDE_EVENT]
 const NAME = 'ElPopover'
@@ -89,7 +91,7 @@ export default defineComponent({
     ].join(' ')
 
     let popover = renderPopper({
-      effect: Effect.LIGHT,
+      effect: LIGHT_EFFECT,
       name: transition,
       popperClass: kls,
       popperStyle: popperStyle,

packages/popover/src/usePopover.ts

@@ -1,10 +1,11 @@
-import type { SetupContext } from 'vue'
 import { computed, ref, watch } from 'vue'
 import { isString } from '@element-plus/utils/util'
-import type { IPopperOptions } from '@element-plus/popper'
 import { usePopper } from '@element-plus/popper'
 import PopupManager from '@element-plus/utils/popup-manager'
-import { EmitType } from '@element-plus/popper/src/use-popper'
+
+import type { SetupContext } from 'vue'
+import type { EmitType } from '@element-plus/popper/src/use-popper'
+import type { IPopperOptions } from '@element-plus/internal/props/use-popper-props'
 
 export interface IUsePopover extends IPopperOptions {
   width: number | string

packages/popper/index.ts

@@ -10,8 +10,6 @@ const _Popper: SFCWithInstall<typeof Popper> = Popper
 
 export default _Popper
 
-export { default as defaultProps, Effect } from './src/use-popper/defaults'
 export type { Placement, Options } from '@popperjs/core'
-export type { TriggerType, IPopperOptions, PopperInstance } from './src/use-popper/defaults'
 export { default as usePopper } from './src/use-popper/index'
 export * from './src/renderers/index'

packages/popper/src/index.vue

@@ -14,9 +14,9 @@ import {
 } from 'vue'
 
 import throwError from '@element-plus/utils/error'
+import defaultProps from '@element-plus/internal/props/use-popper-props'
 
 import usePopper from './use-popper/index'
-import defaultProps from './use-popper/defaults'
 
 import { renderPopper, renderTrigger, renderArrow } from './renderers'
 import { ClickOutside } from '@element-plus/directives'

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

@@ -14,12 +14,12 @@ import PopupManager from '@element-plus/utils/popup-manager'
 import usePopperOptions from './popper-options'
 
 import type { ComponentPublicInstance, SetupContext, Ref } from 'vue'
+import type { RefElement } from '@element-plus/types'
 import type {
   IPopperOptions,
   TriggerType,
   PopperInstance,
-  RefElement,
-} from './defaults'
+} from '@element-plus/internal/props/use-popper-props'
 
 export type ElementType = ComponentPublicInstance | HTMLElement
 export type EmitType = 'update:visible' | 'after-enter' | 'after-leave' | 'before-enter' | 'before-leave'
@@ -294,5 +294,3 @@ export default function(
     visibility,
   }
 }
-
-export * from './defaults'

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

@@ -2,22 +2,13 @@ import { computed } from 'vue'
 import buildModifiers from './build-modifiers'
 
 import type { Ref } from 'vue'
-import type { Options, Placement } from '@popperjs/core'
-
-interface IUsePopperProps {
-  popperOptions: Options
-  arrowOffset: number
-  offset: number
-  placement: Placement
-  gpuAcceleration: boolean
-  fallbackPlacements: Array<Placement>
-}
+import type { IPopperOptions } from '@element-plus/internal/props/use-popper-props'
 
 interface IUsePopperState {
   arrow: Ref<HTMLElement>
 }
 
-export default function usePopperOptions(props: IUsePopperProps, state: IUsePopperState) {
+export default function usePopperOptions(props: IPopperOptions, state: IUsePopperState) {
   return computed(() => {
     return {
       placement: props.placement,

packages/tooltip/src/index.ts

@@ -2,7 +2,7 @@ import { defineComponent, h, ref, cloneVNode } from 'vue'
 import ElPopper from '@element-plus/popper'
 import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
 import throwError from '@element-plus/utils/error'
-import { defaultProps } from '@element-plus/popper'
+import defaultProps from '@element-plus/internal/props/use-popper-props'
 import { getFirstValidNode } from '@element-plus/utils/vnode'
 
 /**

packages/types/index.ts

@@ -0,0 +1 @@
+export type RefElement = Nullable<HTMLElement>

packages/types/package.json

@@ -0,0 +1,13 @@
+{
+    "name": "@element-plus/types",
+    "description": "Stores all common type",
+    "version": "0.0.0",
+    "license": "MIT",
+    "peerDependencies": {
+      "vue": "3.1.1"
+    },
+    "devDependencies": {
+      "@vue/test-utils": "^2.0.0-beta.3"
+    }
+  }
+