From 87137f2391e58ecf4e88e6357a4b41512e0bf39f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=A5=98=ED=95=9C=EA=B2=BD?= <hangyeong.ryu@gmail.com>
Date: Sat, 11 Feb 2023 20:11:22 +0900
Subject: [PATCH] refactor(components): [empty] (#11494)

---
 packages/components/empty/index.ts          |  1 +
 packages/components/empty/src/empty.ts      |  9 ++++-----
 packages/components/empty/src/empty.vue     |  3 ++-
 packages/components/empty/src/img-empty.vue | 18 ++++++------------
 packages/components/empty/src/instance.ts   |  3 +++
 5 files changed, 16 insertions(+), 18 deletions(-)
 create mode 100644 packages/components/empty/src/instance.ts

diff --git a/packages/components/empty/index.ts b/packages/components/empty/index.ts
index c8259b0192..634bac7207 100644
--- a/packages/components/empty/index.ts
+++ b/packages/components/empty/index.ts
@@ -6,3 +6,4 @@ export const ElEmpty = withInstall(Empty)
 export default ElEmpty
 
 export * from './src/empty'
+export type { EmptyInstance } from './src/instance'
diff --git a/packages/components/empty/src/empty.ts b/packages/components/empty/src/empty.ts
index ed8400d775..91363b4b23 100644
--- a/packages/components/empty/src/empty.ts
+++ b/packages/components/empty/src/empty.ts
@@ -1,7 +1,7 @@
+import { buildProps } from '@element-plus/utils'
 import type { ExtractPropTypes } from 'vue'
-import type Empty from './empty.vue'
 
-export const emptyProps = {
+export const emptyProps = buildProps({
   image: {
     type: String,
     default: '',
@@ -11,7 +11,6 @@ export const emptyProps = {
     type: String,
     default: '',
   },
-} as const
-export type EmptyProps = ExtractPropTypes<typeof emptyProps>
+} as const)
 
-export type EmptyInstance = InstanceType<typeof Empty>
+export type EmptyProps = ExtractPropTypes<typeof emptyProps>
diff --git a/packages/components/empty/src/empty.vue b/packages/components/empty/src/empty.vue
index 3ca0eee157..2d745ce653 100644
--- a/packages/components/empty/src/empty.vue
+++ b/packages/components/empty/src/empty.vue
@@ -19,6 +19,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { useLocale, useNamespace } from '@element-plus/hooks'
+import { addUnit } from '@element-plus/utils'
 import ImgEmpty from './img-empty.vue'
 import { emptyProps } from './empty'
 
@@ -36,6 +37,6 @@ const emptyDescription = computed(
   () => props.description || t('el.table.emptyText')
 )
 const imageStyle = computed<CSSProperties>(() => ({
-  width: props.imageSize ? `${props.imageSize}px` : '',
+  width: addUnit(props.imageSize),
 }))
 </script>
diff --git a/packages/components/empty/src/img-empty.vue b/packages/components/empty/src/img-empty.vue
index a31ee1da2f..5063f007b2 100644
--- a/packages/components/empty/src/img-empty.vue
+++ b/packages/components/empty/src/img-empty.vue
@@ -126,19 +126,13 @@
   </svg>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue'
-import { useNamespace } from '@element-plus/hooks'
+<script lang="ts" setup>
+import { useId, useNamespace } from '@element-plus/hooks'
 
-let id = 0
-export default defineComponent({
+defineOptions({
   name: 'ImgEmpty',
-  setup() {
-    const ns = useNamespace('empty')
-    return {
-      ns,
-      id: ++id,
-    }
-  },
 })
+
+const ns = useNamespace('empty')
+const id = useId()
 </script>
diff --git a/packages/components/empty/src/instance.ts b/packages/components/empty/src/instance.ts
new file mode 100644
index 0000000000..974b37d15e
--- /dev/null
+++ b/packages/components/empty/src/instance.ts
@@ -0,0 +1,3 @@
+import type Empty from './empty.vue'
+
+export type EmptyInstance = InstanceType<typeof Empty>