From 45982cff8a65a57928e21598e2234b3ecdb41be0 Mon Sep 17 00:00:00 2001
From: jeremywu <15975785+JeremyWuuuuu@users.noreply.github.com>
Date: Wed, 23 Jun 2021 14:35:42 +0800
Subject: [PATCH] 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                   |  2 +
 packages/constants/package.json               | 13 ++++++
 packages/constants/popper.constants.ts        |  6 +++
 packages/internal/package.json                | 13 ++++++
 .../props/use-popper-props.ts}                | 45 +++++--------------
 packages/popover/src/index.vue                |  8 ++--
 packages/popover/src/usePopover.ts            |  7 +--
 packages/popper/index.ts                      |  2 -
 packages/popper/src/index.vue                 |  2 +-
 packages/popper/src/use-popper/index.ts       |  6 +--
 .../popper/src/use-popper/popper-options.ts   | 13 +-----
 packages/tooltip/src/index.ts                 |  2 +-
 packages/types/index.ts                       |  1 +
 packages/types/package.json                   | 13 ++++++
 14 files changed, 74 insertions(+), 59 deletions(-)
 create mode 100644 packages/constants/index.ts
 create mode 100644 packages/constants/package.json
 create mode 100644 packages/constants/popper.constants.ts
 create mode 100644 packages/internal/package.json
 rename packages/{popper/src/use-popper/defaults.ts => internal/props/use-popper-props.ts} (76%)
 create mode 100644 packages/types/index.ts
 create mode 100644 packages/types/package.json

diff --git a/packages/constants/index.ts b/packages/constants/index.ts
new file mode 100644
index 0000000000..bfeb7f3a54
--- /dev/null
+++ b/packages/constants/index.ts
@@ -0,0 +1,2 @@
+export * from './popper.constants'
+
diff --git a/packages/constants/package.json b/packages/constants/package.json
new file mode 100644
index 0000000000..87476f2fab
--- /dev/null
+++ b/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"
+    }
+  }
+  
\ No newline at end of file
diff --git a/packages/constants/popper.constants.ts b/packages/constants/popper.constants.ts
new file mode 100644
index 0000000000..ac318fcc5a
--- /dev/null
+++ b/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 = []
+
diff --git a/packages/internal/package.json b/packages/internal/package.json
new file mode 100644
index 0000000000..543425f289
--- /dev/null
+++ b/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"
+    }
+  }
+  
\ No newline at end of file
diff --git a/packages/popper/src/use-popper/defaults.ts b/packages/internal/props/use-popper-props.ts
similarity index 76%
rename from packages/popper/src/use-popper/defaults.ts
rename to packages/internal/props/use-popper-props.ts
index c494412262..877e9153cd 100644
--- a/packages/popper/src/use-popper/defaults.ts
+++ b/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
diff --git a/packages/popover/src/index.vue b/packages/popover/src/index.vue
index 709679f59d..513f1aa571 100644
--- a/packages/popover/src/index.vue
+++ b/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,
diff --git a/packages/popover/src/usePopover.ts b/packages/popover/src/usePopover.ts
index 0ec53e124e..077135850b 100644
--- a/packages/popover/src/usePopover.ts
+++ b/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
diff --git a/packages/popper/index.ts b/packages/popper/index.ts
index 4d45212cfd..efda333aa0 100644
--- a/packages/popper/index.ts
+++ b/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'
diff --git a/packages/popper/src/index.vue b/packages/popper/src/index.vue
index 076c0cf7a6..0c4935a10e 100644
--- a/packages/popper/src/index.vue
+++ b/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'
diff --git a/packages/popper/src/use-popper/index.ts b/packages/popper/src/use-popper/index.ts
index 07a7939744..a793cfbb7c 100644
--- a/packages/popper/src/use-popper/index.ts
+++ b/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'
diff --git a/packages/popper/src/use-popper/popper-options.ts b/packages/popper/src/use-popper/popper-options.ts
index 2c17f2696f..e58ae76d56 100644
--- a/packages/popper/src/use-popper/popper-options.ts
+++ b/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,
diff --git a/packages/tooltip/src/index.ts b/packages/tooltip/src/index.ts
index a3ac1179a3..6ed2b1d2e9 100644
--- a/packages/tooltip/src/index.ts
+++ b/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'
 
 /**
diff --git a/packages/types/index.ts b/packages/types/index.ts
new file mode 100644
index 0000000000..6d0077ca2c
--- /dev/null
+++ b/packages/types/index.ts
@@ -0,0 +1 @@
+export type RefElement = Nullable<HTMLElement>
diff --git a/packages/types/package.json b/packages/types/package.json
new file mode 100644
index 0000000000..e76419f33d
--- /dev/null
+++ b/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"
+    }
+  }
+  
\ No newline at end of file