refactor(components): refactor empty (#3522)

* refactor(components): refactor empty

* fix: tests

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'
 

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'

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>

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,