Fix/revert changes for fixing issue (#2313)

* Revert "fix(project): fix beta 49 build issue (#2310)"

This reverts commit 7d39b37f00.

* Revert "feat(hooks): feat: Encapsulate function for rendering teleport element"

This reverts commit 74ec002d23.

* Revert "refactor(popper): refactor extract common props for props (#2300)"

This reverts commit 45982cff8a.

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

build/rollup.config.js

@@ -20,7 +20,7 @@ const inputs = getPackagesSync()
   .map(pkg => pkg.name)
   .filter(name =>
     name.includes('@element-plus') &&
-    !name.includes('utils') && !name.includes('internal'),
+    !name.includes('utils'),
   )
 
 export default inputs.map(name => ({

packages/constants/index.ts

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

packages/constants/package.json

@@ -1,13 +0,0 @@
-{
-    "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

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

packages/hooks/use-teleport/index.ts

@@ -1,60 +0,0 @@
-import { h, ref, Teleport, getCurrentInstance, onMounted } from 'vue'
-import { NOOP } from '@vue/shared'
-import isServer from '@element-plus/utils/isServer'
-import { createGlobalNode, removeGlobalNode } from '@element-plus/utils/global-nodes'
-
-import type { VNode } from 'vue'
-
-export default (contentRenderer: () => VNode, appendToBody: boolean) => {
-  const vm = getCurrentInstance()
-
-  const isTeleportVisible = ref(false)
-
-  if (isServer) {
-    return {
-      isTeleportVisible,
-      showTeleport: NOOP,
-      hideTeleport: NOOP,
-      renderTeleport: NOOP,
-    }
-  }
-
-  const target = (vm.proxy.$props as { target: string; }).target
-  let $el: HTMLElement = null
-
-  const showTeleport = () => {
-
-    isTeleportVisible.value = true
-    $el = createGlobalNode()
-  }
-
-  const hideTeleport = () => {
-
-    isTeleportVisible.value = true
-    removeGlobalNode($el)
-    $el = null
-  }
-
-  const renderTeleport = () => {
-    return appendToBody !== true
-      ? contentRenderer()
-      : isTeleportVisible.value === true
-        ? [
-          h(
-            Teleport,
-            { to: target },
-            contentRenderer(),
-          ),
-        ]
-        : void 0
-  }
-
-  onMounted(hideTeleport)
-
-  return {
-    isTeleportVisible,
-    showTeleport,
-    hideTeleport,
-    renderTeleport,
-  }
-}

packages/internal/package.json

@@ -1,13 +0,0 @@
-{
-    "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/popover/src/index.vue

@@ -1,17 +1,15 @@
 <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 { renderIf, PatchFlags } from '@element-plus/utils/vnode'
-import { LIGHT_EFFECT } from '../../constants/popper.constants'
-import defaultProps from '../../internal/props/use-popper-props'
-
 import usePopover, { SHOW_EVENT, HIDE_EVENT } from './usePopover'
 
 import type { PropType } from 'vue'
-import type { TriggerType } from '../../internal/props/use-popper-props'
+import type { TriggerType } from '@element-plus/popper'
 
 const emits = ['update:visible', 'after-enter', 'after-leave', SHOW_EVENT, HIDE_EVENT]
 const NAME = 'ElPopover'
@@ -91,7 +89,7 @@ export default defineComponent({
     ].join(' ')
 
     let popover = renderPopper({
-      effect: LIGHT_EFFECT,
+      effect: Effect.LIGHT,
       name: transition,
       popperClass: kls,
       popperStyle: popperStyle,

packages/popover/src/usePopover.ts

@@ -1,11 +1,10 @@
+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 type { SetupContext } from 'vue'
-import type { EmitType } from '@element-plus/popper/src/use-popper'
-import type { IPopperOptions } from '../../internal/props/use-popper-props'
+import { EmitType } from '@element-plus/popper/src/use-popper'
 
 export interface IUsePopover extends IPopperOptions {
   width: number | string

packages/popper/index.ts

@@ -10,6 +10,8 @@ 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

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

packages/popper/src/renderers/popper.ts

@@ -3,7 +3,7 @@ import { NOOP } from '@vue/shared'
 import { stop } from '@element-plus/utils/dom'
 
 import type { VNode, Ref } from 'vue'
-import type { Effect } from '../../../internal/props/use-popper-props'
+import type { Effect } from '../use-popper/defaults'
 
 interface IRenderPopperProps {
   effect: Effect

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

@@ -1,11 +1,12 @@
-
-import { DEFAULT_TRIGGER, DEFAULT_FALLBACK_PLACEMENTS } from '../../constants/popper.constants'
-
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { PropType  } from 'vue'
 import type { Placement, PositioningStrategy, Instance as PopperInstance, Options } from '@popperjs/core'
 
-export type Effect = 'light' | 'dark'
+export enum Effect {
+  DARK = 'dark',
+  LIGHT = 'light'
+}
 
+export type RefElement = Nullable<HTMLElement>
 export type Offset = [number, number] | number
 
 export type { Placement, PositioningStrategy, PopperInstance, Options }
@@ -14,7 +15,33 @@ export type TriggerType = 'click' | 'hover' | 'focus' | 'manual'
 
 export type Trigger = TriggerType | TriggerType[]
 
-const defaultProps = {
+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 {
   // 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: {
@@ -56,7 +83,7 @@ const defaultProps = {
   },
   effect: {
     type: String as PropType<Effect>,
-    default: 'dark',
+    default: Effect.DARK,
   },
   enterable: {
     type: Boolean,
@@ -124,7 +151,3 @@ const defaultProps = {
     default: DEFAULT_FALLBACK_PLACEMENTS,
   },
 }
-
-export type IPopperOptions = ExtractPropTypes<typeof defaultProps>
-
-export default defaultProps

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,
-} from '../../../internal/props/use-popper-props'
+  RefElement,
+} from './defaults'
 
 export type ElementType = ComponentPublicInstance | HTMLElement
 export type EmitType = 'update:visible' | 'after-enter' | 'after-leave' | 'before-enter' | 'before-leave'
@@ -294,3 +294,5 @@ export default function(
     visibility,
   }
 }
+
+export * from './defaults'

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

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

packages/types/index.ts

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

packages/types/package.json

@@ -1,13 +0,0 @@
-{
-    "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"
-    }
-  }
-  

packages/utils/global-nodes.ts

@@ -1,34 +0,0 @@
-import isServer from './isServer'
-
-const globalNodes = []
-let target = isServer ? void 0 : document.body
-
-export function createGlobalNode(id?: string) {
-  const el = document.createElement('div')
-
-  if (id !== void 0) {
-    el.id = id
-  }
-
-  target.appendChild(el)
-  globalNodes.push(el)
-
-  return el
-}
-
-export function removeGlobalNode(el: HTMLElement) {
-  globalNodes.splice(globalNodes.indexOf(el), 1)
-  el.remove()
-}
-
-export function changeGlobalNodesTarget(el: HTMLElement) {
-  if (el !== target) {
-    target = el
-
-    globalNodes.forEach(el => {
-      if (el.contains(target) === false) {
-        target.appendChild(el)
-      }
-    })
-  }
-}