chore: refactor space

components/space/index.tsx

@@ -1,6 +1,8 @@
-import { inject, App, CSSProperties, SetupContext } from 'vue';
+import { inject, App, defineComponent, PropType } from 'vue';
+import PropTypes from '../_util/vue-types';
 import { filterEmpty } from '../_util/props-util';
 import { defaultConfigProvider, SizeType } from '../config-provider';
+import { tuple } from '../_util/type';
 
 const spaceSize = {
   small: 8,
@@ -8,21 +10,28 @@ const spaceSize = {
   large: 24,
 };
 
-export interface SpaceProps {
-  prefixCls?: string;
-  className?: string;
-  style?: CSSProperties;
-  size?: SizeType | number;
-  direction?: 'horizontal' | 'vertical';
-  // No `stretch` since many components do not support that.
-  align?: 'start' | 'end' | 'center' | 'baseline';
-}
-
-const Space = (props: SpaceProps, { slots }: SetupContext) => {
+const Space = defineComponent({
+  name: 'ASpace',
+  props: {
+    prefixCls: PropTypes.string,
+    size: {
+      type: [String, Number] as PropType<number | SizeType>,
+    },
+    direction: PropTypes.oneOf(tuple('horizontal', 'vertical')),
+    align: PropTypes.oneOf(tuple('start', 'end', 'center', 'baseline')),
+  },
+  setup(props, { slots }) {
     const configProvider = inject('configProvider', defaultConfigProvider);
-  const { align, size = 'small', direction = 'horizontal', prefixCls: customizePrefixCls } = props;
+    const {
+      align,
+      size = 'small',
+      direction = 'horizontal',
+      prefixCls: customizePrefixCls,
+    } = props;
 
     const { getPrefixCls } = configProvider;
+
+    return () => {
       const prefixCls = getPrefixCls('space', customizePrefixCls);
       const items = filterEmpty(slots.default?.());
       const len = items.length;
@@ -62,13 +71,13 @@ const Space = (props: SpaceProps, { slots }: SetupContext) => {
           ))}
         </div>
       );
-};
-
-Space.displayName = 'ASpace';
+    };
+  },
+});
 
 /* istanbul ignore next */
 Space.install = function(app: App) {
-  app.component(Space.displayName, Space);
+  app.component(Space.name, Space);
   return app;
 };