refactor(components): [empty] (#11494)

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'

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>

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>

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>

packages/components/empty/src/instance.ts

@@ -0,0 +1,3 @@
+import type Empty from './empty.vue'
+
+export type EmptyInstance = InstanceType<typeof Empty>