From 5a0ac482ce4ce7dc12b61599d973e241e7fc2cc6 Mon Sep 17 00:00:00 2001
From: jeremywu <15975785+JeremyWuuuuu@users.noreply.github.com>
Date: Wed, 3 Nov 2021 17:42:05 +0800
Subject: [PATCH] feat(components): el-teleport (#4186)

---
 .../teleport/__tests__/teleport.spec.ts       | 40 +++++++++++++++++++
 packages/components/teleport/index.ts         |  8 ++++
 packages/components/teleport/src/teleport.ts  | 19 +++++++++
 packages/components/teleport/src/teleport.vue | 36 +++++++++++++++++
 packages/components/teleport/style/css.ts     |  1 +
 packages/components/teleport/style/index.ts   |  1 +
 packages/hooks/use-popper/index.ts            |  4 +-
 7 files changed, 107 insertions(+), 2 deletions(-)
 create mode 100644 packages/components/teleport/__tests__/teleport.spec.ts
 create mode 100644 packages/components/teleport/index.ts
 create mode 100644 packages/components/teleport/src/teleport.ts
 create mode 100644 packages/components/teleport/src/teleport.vue
 create mode 100644 packages/components/teleport/style/css.ts
 create mode 100644 packages/components/teleport/style/index.ts

diff --git a/packages/components/teleport/__tests__/teleport.spec.ts b/packages/components/teleport/__tests__/teleport.spec.ts
new file mode 100644
index 0000000000..ceaa927458
--- /dev/null
+++ b/packages/components/teleport/__tests__/teleport.spec.ts
@@ -0,0 +1,40 @@
+import { mount } from '@vue/test-utils'
+import Teleport from '../src/teleport.vue'
+
+const AXIOM = 'rem is the best girl'
+
+describe('<el-teleport />', () => {
+  let wrapper
+  beforeEach(() => {
+    wrapper = mount(Teleport, {
+      slots: { default: () => AXIOM },
+    })
+  })
+
+  afterEach(() => {
+    wrapper.unmount()
+  })
+
+  it('should render slot correctly', () => {
+    expect(wrapper.text()).toBe('')
+    expect(document.body.textContent).toBe(AXIOM)
+    expect(wrapper.vm.containerRef).toBeDefined()
+  })
+
+  describe('props', () => {
+    it('should be able to set customized style', async () => {
+      const style = {
+        color: 'red',
+      }
+
+      await wrapper.setProps({ style })
+      expect(getComputedStyle(wrapper.vm?.containerRef).color).toBe(style.color)
+    })
+
+    it('should be able to set z-index', async () => {
+      const zIndex = '10000'
+      await wrapper.setProps({ zIndex })
+      expect(getComputedStyle(wrapper.vm?.containerRef).zIndex).toBe(zIndex)
+    })
+  })
+})
diff --git a/packages/components/teleport/index.ts b/packages/components/teleport/index.ts
new file mode 100644
index 0000000000..607dcc348e
--- /dev/null
+++ b/packages/components/teleport/index.ts
@@ -0,0 +1,8 @@
+import { withInstall } from '@element-plus/utils/with-install'
+import Teleport from './src/teleport.vue'
+
+export const ElTeleport = withInstall(Teleport)
+
+export default ElTeleport
+
+export * from './src/teleport'
diff --git a/packages/components/teleport/src/teleport.ts b/packages/components/teleport/src/teleport.ts
new file mode 100644
index 0000000000..b1b75eadce
--- /dev/null
+++ b/packages/components/teleport/src/teleport.ts
@@ -0,0 +1,19 @@
+import { buildProps, definePropType } from '@element-plus/utils/props'
+
+import type { ExtractPropTypes, StyleValue } from 'vue'
+
+export const elTeleportProps = buildProps({
+  container: {
+    type: definePropType<string | HTMLElement>([String, Object]),
+    default: 'body',
+  },
+  style: {
+    type: definePropType<StyleValue>([String, Array, Object]),
+  },
+  zIndex: {
+    type: String,
+    default: '2000',
+  },
+})
+
+export type ElTeleportProps = ExtractPropTypes<typeof elTeleportProps>
diff --git a/packages/components/teleport/src/teleport.vue b/packages/components/teleport/src/teleport.vue
new file mode 100644
index 0000000000..513f5db645
--- /dev/null
+++ b/packages/components/teleport/src/teleport.vue
@@ -0,0 +1,36 @@
+<template>
+  <teleport v-if="container" :to="container">
+    <div ref="containerRef" class="el-teleport" :style="containerStyle">
+      <slot />
+    </div>
+  </teleport>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue'
+import { elTeleportProps } from './teleport'
+
+export default defineComponent({
+  props: elTeleportProps,
+  setup(props) {
+    const containerRef = ref<HTMLElement>()
+    const containerStyle = computed(() => {
+      return props.container === 'body'
+        ? [
+            props.style,
+            {
+              position: 'absolute',
+              top: `0px`,
+              left: `0px`,
+              zIndex: props.zIndex,
+            },
+          ]
+        : {}
+    })
+    return {
+      containerRef,
+      containerStyle,
+    }
+  },
+})
+</script>
diff --git a/packages/components/teleport/style/css.ts b/packages/components/teleport/style/css.ts
new file mode 100644
index 0000000000..7475d66381
--- /dev/null
+++ b/packages/components/teleport/style/css.ts
@@ -0,0 +1 @@
+/* Empty file for avoiding plugin error */
diff --git a/packages/components/teleport/style/index.ts b/packages/components/teleport/style/index.ts
new file mode 100644
index 0000000000..7475d66381
--- /dev/null
+++ b/packages/components/teleport/style/index.ts
@@ -0,0 +1 @@
+/* Empty file for avoiding plugin error */
diff --git a/packages/hooks/use-popper/index.ts b/packages/hooks/use-popper/index.ts
index 65d4635250..bf4768dd86 100644
--- a/packages/hooks/use-popper/index.ts
+++ b/packages/hooks/use-popper/index.ts
@@ -134,8 +134,8 @@ export const usePopperProps = {
 }
 
 export const usePopperHook = () => {
-  const vm = getCurrentInstance()
-  const props: ExtractPropTypes<typeof usePopperProps> = vm.props as any
+  const vm = getCurrentInstance()!
+  const props: ExtractPropTypes<typeof usePopperProps> = vm.proxy?.$props as any
   const { slots } = vm
 
   const arrowRef = ref<RefElement>(null)