refactor(components): [space] refactor (#8386)

packages/components/space/index.ts

@@ -6,4 +6,5 @@ export const ElSpace = withInstall(Space)
 export default ElSpace
 
 export * from './src/space'
+export * from './src/item'
 export * from './src/use-space'

packages/components/space/src/item.ts

@@ -0,0 +1,30 @@
+import { computed, defineComponent, h, renderSlot } from 'vue'
+import { buildProps } from '@element-plus/utils'
+import { useNamespace } from '@element-plus/hooks'
+
+import type { ExtractPropTypes } from 'vue'
+
+const spaceItemProps = buildProps({
+  prefixCls: {
+    type: String,
+  },
+} as const)
+export type SpaceItemProps = ExtractPropTypes<typeof spaceItemProps>
+
+const SpaceItem = defineComponent({
+  name: 'ElSpaceItem',
+
+  props: spaceItemProps,
+
+  setup(props, { slots }) {
+    const ns = useNamespace('space')
+
+    const classes = computed(() => `${props.prefixCls || ns.b()}__item`)
+
+    return () =>
+      h('div', { class: classes.value }, renderSlot(slots, 'default'))
+  },
+})
+export type SpaceItemInstance = InstanceType<typeof SpaceItem>
+
+export default SpaceItem

packages/components/space/src/item.vue

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

packages/components/space/src/space.ts

@@ -16,7 +16,7 @@ import {
   isValidElementNode,
 } from '@element-plus/utils'
 import { componentSizes } from '@element-plus/constants'
-import Item from './item.vue'
+import Item from './item'
 import { useSpace } from './use-space'
 
 import type { ExtractPropTypes, StyleValue, VNode, VNodeChild } from 'vue'
@@ -58,15 +58,9 @@ export const spaceProps = buildProps({
     validator: (val: unknown) => isVNode(val) || isNumber(val) || isString(val),
   },
 
-  wrap: {
-    type: Boolean,
-    default: false,
-  },
+  wrap: Boolean,
 
-  fill: {
-    type: Boolean,
-    default: false,
-  },
+  fill: Boolean,
 
   fillRatio: {
     type: Number,
@@ -79,7 +73,7 @@ export const spaceProps = buildProps({
     validator: (val: unknown): val is [number, number] | number => {
       return (
         isNumber(val) ||
-        (isArray(val) && val.length === 2 && val.every((i) => isNumber(i)))
+        (isArray(val) && val.length === 2 && val.every(isNumber))
       )
     },
   },

packages/components/space/src/use-space.ts

@@ -1,16 +1,16 @@
 import { computed, ref, watchEffect } from 'vue'
-import { isNumber } from '@element-plus/utils'
+import { isArray, isNumber } from '@element-plus/utils'
 import { useNamespace } from '@element-plus/hooks'
-import type { SpaceProps } from './space'
 
+import type { SpaceProps } from './space'
 import type { CSSProperties, StyleValue } from 'vue'
 import type { ComponentSize } from '@element-plus/constants'
 
-const SIZE_MAP: Record<ComponentSize, number> = {
+const SIZE_MAP = {
   small: 8,
   default: 12,
   large: 16,
-}
+} as Record<ComponentSize, number>
 
 export function useSpace(props: SpaceProps) {
   const ns = useNamespace('space')
@@ -48,7 +48,7 @@ export function useSpace(props: SpaceProps) {
     const { size = 'small', wrap, direction: dir, fill } = props
 
     // when the specified size have been given
-    if (Array.isArray(size)) {
+    if (isArray(size)) {
       const [h = 0, v = 0] = size
       horizontalSize.value = h
       verticalSize.value = v