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,67 +10,74 @@ const spaceSize = {
   large: 24,
 };
 
-export interface SpaceProps {
+const Space = defineComponent({
-  prefixCls?: string;
+  name: 'ASpace',
-  className?: string;
+  props: {
-  style?: CSSProperties;
+    prefixCls: PropTypes.string,
-  size?: SizeType | number;
+    size: {
-  direction?: 'horizontal' | 'vertical';
+      type: [String, Number] as PropType<number | SizeType>,
-  // No `stretch` since many components do not support that.
+    },
-  align?: 'start' | 'end' | 'center' | 'baseline';
+    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 Space = (props: SpaceProps, { slots }: SetupContext) => {
+    const { getPrefixCls } = configProvider;
-  const configProvider = inject('configProvider', defaultConfigProvider);
-  const { align, size = 'small', direction = 'horizontal', prefixCls: customizePrefixCls } = props;
 
-  const { getPrefixCls } = configProvider;
+    return () => {
-  const prefixCls = getPrefixCls('space', customizePrefixCls);
+      const prefixCls = getPrefixCls('space', customizePrefixCls);
-  const items = filterEmpty(slots.default?.());
+      const items = filterEmpty(slots.default?.());
-  const len = items.length;
+      const len = items.length;
 
-  if (len === 0) {
+      if (len === 0) {
-    return null;
+        return null;
-  }
+      }
 
-  const mergedAlign = align === undefined && direction === 'horizontal' ? 'center' : align;
+      const mergedAlign = align === undefined && direction === 'horizontal' ? 'center' : align;
 
-  const someSpaceClass = {
+      const someSpaceClass = {
-    [prefixCls]: true,
+        [prefixCls]: true,
-    [`${prefixCls}-${direction}`]: true,
+        [`${prefixCls}-${direction}`]: true,
-    [`${prefixCls}-align-${mergedAlign}`]: mergedAlign,
+        [`${prefixCls}-align-${mergedAlign}`]: mergedAlign,
-  };
+      };
 
-  const itemClassName = `${prefixCls}-item`;
+      const itemClassName = `${prefixCls}-item`;
-  const marginDirection = 'marginRight'; // directionConfig === 'rtl' ? 'marginLeft' : 'marginRight';
+      const marginDirection = 'marginRight'; // directionConfig === 'rtl' ? 'marginLeft' : 'marginRight';
 
-  return (
+      return (
-    <div class={someSpaceClass}>
+        <div class={someSpaceClass}>
-      {items.map((child, i) => (
+          {items.map((child, i) => (
-        <div
+            <div
-          class={itemClassName}
+              class={itemClassName}
-          key={`${itemClassName}-${i}`}
+              key={`${itemClassName}-${i}`}
-          style={
+              style={
-            i === len - 1
+                i === len - 1
-              ? {}
+                  ? {}
-              : {
+                  : {
-                  [direction === 'vertical' ? 'marginBottom' : marginDirection]:
+                      [direction === 'vertical' ? 'marginBottom' : marginDirection]:
-                    typeof size === 'string' ? `${spaceSize[size]}px` : `${size}px`,
+                        typeof size === 'string' ? `${spaceSize[size]}px` : `${size}px`,
-                }
+                    }
-          }
+              }
-        >
+            >
-          {child}
+              {child}
+            </div>
+          ))}
         </div>
-      ))}
+      );
-    </div>
+    };
-  );
+  },
-};
+});
-
-Space.displayName = 'ASpace';
 
 /* istanbul ignore next */
 Space.install = function(app: App) {
-  app.component(Space.displayName, Space);
+  app.component(Space.name, Space);
   return app;
 };