refactor(components): refactor space (element-plus#3757)

packages/components/space/__tests__/space.spec.ts

@@ -1,6 +1,6 @@
 import { nextTick, h } from 'vue'
 import { mount } from '@vue/test-utils'
-import Space from '../src/index'
+import Space from '../src/space'
 
 const AXIOM = 'Rem is the best girl'
 

packages/components/space/index.ts

@@ -1,13 +1,9 @@
-import Space from './src/index'
+import { withInstall } from '@element-plus/utils/with-install'
 
-import type { App } from 'vue'
-import type { SFCWithInstall } from '@element-plus/utils/types'
+import Space from './src/space'
 
-const _Space = Space as SFCWithInstall<typeof Space>
+export const ElSpace = withInstall(Space)
+export default ElSpace
 
-_Space.install = (app: App) => {
-  app.component(_Space.name, _Space)
-}
-
-export default _Space
-export const ElSpace = _Space
+export * from './src/space'
+export * from './src/use-space'

packages/components/space/src/item.vue

@@ -1,22 +1,28 @@
 <template>
   <div :class="classes">
-    <slot></slot>
+    <slot />
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, computed } from 'vue'
+import { buildProps } from '@element-plus/utils/props'
 
-export default defineComponent({
-  props: {
-    prefixCls: {
-      type: String,
-      default: 'el-space',
-    },
+const spaceItem = buildProps({
+  prefixCls: {
+    type: String,
+    default: 'el-space',
   },
+} as const)
+
+export default defineComponent({
+  props: spaceItem,
+
   setup(props) {
+    const classes = computed(() => [`${props.prefixCls}__item`])
+
     return {
-      classes: computed(() => `${props.prefixCls}__item`),
+      classes,
     }
   },
 })