From 426a1814d049aefbcbe000c5e9774db6890505d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Wed, 22 Sep 2021 01:41:44 +0800
Subject: [PATCH] refactor(components): refactor empty (#3522)

* refactor(components): refactor empty

* fix: tests
---
 .../components/empty/__tests__/empty.spec.ts  |  2 +-
 packages/components/empty/index.ts            | 15 ++++-------
 packages/components/empty/src/empty.ts        | 14 ++++++++++
 .../empty/src/{index.vue => empty.vue}        | 27 +++++++------------
 4 files changed, 30 insertions(+), 28 deletions(-)
 create mode 100644 packages/components/empty/src/empty.ts
 rename packages/components/empty/src/{index.vue => empty.vue} (74%)

diff --git a/packages/components/empty/__tests__/empty.spec.ts b/packages/components/empty/__tests__/empty.spec.ts
index d758a22f29..7f20c679a5 100644
--- a/packages/components/empty/__tests__/empty.spec.ts
+++ b/packages/components/empty/__tests__/empty.spec.ts
@@ -1,5 +1,5 @@
 import makeMount from '@element-plus/test-utils/make-mount'
-import Empty from '../src/index.vue'
+import Empty from '../src/empty.vue'
 
 const AXIOM = 'Rem is the best girl'
 
diff --git a/packages/components/empty/index.ts b/packages/components/empty/index.ts
index 3b1a70c929..ef2b1567a0 100644
--- a/packages/components/empty/index.ts
+++ b/packages/components/empty/index.ts
@@ -1,13 +1,8 @@
-import Empty from './src/index.vue'
+import { withInstall } from '@element-plus/utils/with-install'
 
-import type { App } from 'vue'
-import type { SFCWithInstall } from '@element-plus/utils/types'
+import Empty from './src/empty.vue'
 
-Empty.install = (app: App): void => {
-  app.component(Empty.name, Empty)
-}
+export const ElEmpty = withInstall(Empty)
+export default ElEmpty
 
-const _Empty = Empty as SFCWithInstall<typeof Empty>
-
-export default _Empty
-export const ElEmpty = _Empty
+export * from './src/empty'
diff --git a/packages/components/empty/src/empty.ts b/packages/components/empty/src/empty.ts
new file mode 100644
index 0000000000..c4aeacfd31
--- /dev/null
+++ b/packages/components/empty/src/empty.ts
@@ -0,0 +1,14 @@
+import type { ExtractPropTypes } from 'vue'
+
+export const emptyProps = {
+  image: {
+    type: String,
+    default: '',
+  },
+  imageSize: Number,
+  description: {
+    type: String,
+    default: '',
+  },
+} as const
+export type EmptyProps = ExtractPropTypes<typeof emptyProps>
diff --git a/packages/components/empty/src/index.vue b/packages/components/empty/src/empty.vue
similarity index 74%
rename from packages/components/empty/src/index.vue
rename to packages/components/empty/src/empty.vue
index 0f36e8efa4..b65d112e5c 100644
--- a/packages/components/empty/src/index.vue
+++ b/packages/components/empty/src/empty.vue
@@ -20,33 +20,26 @@
 import { computed, defineComponent } from 'vue'
 import { useLocaleInject } from '@element-plus/hooks'
 import ImgEmpty from './img-empty.vue'
+import { emptyProps } from './empty'
+
+import type { CSSProperties } from 'vue'
 
 export default defineComponent({
   name: 'ElEmpty',
   components: {
-    [ImgEmpty.name]: ImgEmpty,
-  },
-  props: {
-    image: {
-      type: String,
-      default: '',
-    },
-    imageSize: Number,
-    description: {
-      type: String,
-      default: '',
-    },
+    ImgEmpty,
   },
+
+  props: emptyProps,
+
   setup(props) {
     const { t } = useLocaleInject()
     const emptyDescription = computed(
       () => props.description || t('el.table.emptyText')
     )
-    const imageStyle = computed(() => {
-      return {
-        width: props.imageSize ? `${props.imageSize}px` : '',
-      }
-    })
+    const imageStyle = computed<CSSProperties>(() => ({
+      width: props.imageSize ? `${props.imageSize}px` : '',
+    }))
 
     return {
       emptyDescription,