chore: refactor space

components/_util/props-util.ts

@@ -1,6 +1,6 @@
 import isPlainObject from 'lodash/isPlainObject';
 import classNames from 'classnames';
-import { isVNode, Fragment, Comment, Text, h } from 'vue';
+import { isVNode, Fragment, Comment, Text, h, VNode, Prop, PropOptions } from 'vue';
 import { camelize, hyphenate, isOn, resolvePropValue } from './util';
 import isValid from './isValid';
 // function getType(fn) {
@@ -345,8 +345,8 @@ export function isStringElement(c) {
   return c && c.type === Text;
 }
 
-export function filterEmpty(children = []) {
+export function filterEmpty(children: VNode[] = []) {
-  const res = [];
+  const res: VNode[] = [];
   children.forEach(child => {
     if (Array.isArray(child)) {
       res.push(...child);
@@ -358,10 +358,14 @@ export function filterEmpty(children = []) {
   });
   return res.filter(c => !isEmptyElement(c));
 }
-const initDefaultProps = (propTypes, defaultProps) => {
+const initDefaultProps = <T>(
-  Object.keys(defaultProps).forEach(k => {
+  propTypes: T,
-    if (propTypes[k]) {
+  defaultProps: { [K in Extract<keyof T, string>]?: any },
-      propTypes[k].def && (propTypes[k] = propTypes[k].def(defaultProps[k]));
+): T => {
+  Object.keys(defaultProps).forEach((k: Extract<keyof T, string>) => {
+    let prop = propTypes[k] as PropOptions<any>;
+    if (prop) {
+      prop.default = defaultProps[k];
     } else {
       throw new Error(`not have ${k} prop`);
     }

components/_util/responsiveObserve.ts

@@ -1,26 +1,10 @@
-// matchMedia polyfill for
+export type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
-// https://github.com/WickyNilliams/enquire.js/issues/82
+export type BreakpointMap = Partial<Record<Breakpoint, string>>;
-let enquire;
+export type ScreenMap = Partial<Record<Breakpoint, boolean>>;
 
-// TODO: Will be removed in antd 4.0 because we will no longer support ie9
+export const responsiveArray: Breakpoint[] = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
-if (typeof window !== 'undefined') {
-  const matchMediaPolyfill = mediaQuery => {
-    return {
-      media: mediaQuery,
-      matches: false,
-      addListener() {},
-      removeListener() {},
-    };
-  };
-  // ref: https://github.com/ant-design/ant-design/issues/18774
-  if (!window.matchMedia) window.matchMedia = matchMediaPolyfill;
-  // eslint-disable-next-line global-require
-  enquire = require('enquire.js');
-}
 
-export const responsiveArray = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
+export const responsiveMap: BreakpointMap = {
-
-export const responsiveMap = {
   xs: '(max-width: 575px)',
   sm: '(min-width: 576px)',
   md: '(min-width: 768px)',
@@ -29,65 +13,60 @@ export const responsiveMap = {
   xxl: '(min-width: 1600px)',
 };
 
-let subscribers = [];
+type SubscribeFunc = (screens: ScreenMap) => void;
+const subscribers = new Map<Number, SubscribeFunc>();
 let subUid = -1;
 let screens = {};
 
 const responsiveObserve = {
-  dispatch(pointMap) {
+  matchHandlers: {} as {
+    [prop: string]: {
+      mql: MediaQueryList;
+      listener: ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null;
+    };
+  },
+  dispatch(pointMap: ScreenMap) {
     screens = pointMap;
-    if (subscribers.length < 1) {
+    subscribers.forEach(func => func(screens));
-      return false;
+    return subscribers.size >= 1;
-    }
-
-    subscribers.forEach(item => {
-      item.func(screens);
-    });
-
-    return true;
   },
-  subscribe(func) {
+  subscribe(func: SubscribeFunc): number {
-    if (subscribers.length === 0) {
+    if (!subscribers.size) this.register();
-      this.register();
+    subUid += 1;
-    }
+    subscribers.set(subUid, func);
-    const token = (++subUid).toString();
-    subscribers.push({
-      token,
-      func,
-    });
     func(screens);
-    return token;
+    return subUid;
   },
-  unsubscribe(token) {
+  unsubscribe(token: number) {
-    subscribers = subscribers.filter(item => item.token !== token);
+    subscribers.delete(token);
-    if (subscribers.length === 0) {
+    if (!subscribers.size) this.unregister();
-      this.unregister();
-    }
   },
   unregister() {
-    Object.keys(responsiveMap).map(screen => enquire.unregister(responsiveMap[screen]));
+    Object.keys(responsiveMap).forEach((screen: Breakpoint) => {
+      const matchMediaQuery = responsiveMap[screen]!;
+      const handler = this.matchHandlers[matchMediaQuery];
+      handler?.mql.removeListener(handler?.listener);
+    });
+    subscribers.clear();
   },
   register() {
-    Object.keys(responsiveMap).map(screen =>
+    Object.keys(responsiveMap).forEach((screen: Breakpoint) => {
-      enquire.register(responsiveMap[screen], {
+      const matchMediaQuery = responsiveMap[screen]!;
-        match: () => {
+      const listener = ({ matches }: { matches: boolean }) => {
-          const pointMap = {
+        this.dispatch({
           ...screens,
-            [screen]: true,
+          [screen]: matches,
+        });
       };
-          this.dispatch(pointMap);
+      const mql = window.matchMedia(matchMediaQuery);
-        },
+      mql.addListener(listener);
-        unmatch: () => {
+      this.matchHandlers[matchMediaQuery] = {
-          const pointMap = {
+        mql,
-            ...screens,
+        listener,
-            [screen]: false,
       };
-          this.dispatch(pointMap);
+
-        },
+      listener(mql);
-        // Keep a empty destroy to avoid triggering unmatch when unregister
+    });
-        destroy() {},
-      }),
-    );
   },
 };
 

components/_util/type.ts

@@ -1,4 +1,4 @@
 // https://stackoverflow.com/questions/46176165/ways-to-get-string-literal-type-of-array-values-without-enum-overhead
-export const tuple = (...args) => args;
+export const tuple = <T extends string[]>(...args: T) => args;
 
 export const tupleNum = (...args) => args;

components/_util/vue-types/index.ts

@@ -1,3 +1,4 @@
+import { PropType } from 'vue';
 import isPlainObject from 'lodash/isPlainObject';
 import { toType, getType, isFunction, validateType, isInteger, isArray, warn } from './utils';
 
@@ -9,57 +10,57 @@ const VuePropTypes = {
   },
 
   get func() {
-    return toType('function', {
+    return {
       type: Function,
-    }).def(currentDefaults.func);
+    };
   },
 
   get bool() {
-    return toType('boolean', {
+    return {
       type: Boolean,
-    }).def(currentDefaults.bool);
+    };
   },
 
   get string() {
-    return toType('string', {
+    return {
       type: String,
-    }).def(currentDefaults.string);
+    };
   },
 
   get number() {
-    return toType('number', {
+    return {
       type: Number,
-    }).def(currentDefaults.number);
+    };
   },
 
   get array() {
-    return toType('array', {
+    return {
       type: Array,
-    }).def(currentDefaults.array);
+    };
   },
 
   get object() {
-    return toType('object', {
+    return {
       type: Object,
-    }).def(currentDefaults.object);
+    };
   },
 
   get integer() {
-    return toType('integer', {
+    return {
       type: Number,
-      validator(value) {
+      validator(value: number) {
         return isInteger(value);
       },
-    }).def(currentDefaults.integer);
+    };
   },
 
   get symbol() {
-    return toType('symbol', {
+    return {
       type: null,
-      validator(value) {
+      validator(value: Symbol) {
         return typeof value === 'symbol';
       },
-    });
+    };
   },
 
   custom(validatorFn, warnMsg = 'custom validation failed') {
@@ -76,7 +77,13 @@ const VuePropTypes = {
     });
   },
 
-  oneOf(arr) {
+  tuple<T>() {
+    return {
+      type: (String as unknown) as PropType<T>,
+    };
+  },
+
+  oneOf(arr: unknown[]) {
     if (!isArray(arr)) {
       throw new TypeError('[VueTypes error]: You must provide an array as argument');
     }
@@ -90,7 +97,7 @@ const VuePropTypes = {
 
     return toType('oneOf', {
       type: allowedTypes.length > 0 ? allowedTypes : null,
-      validator(value) {
+      validator(value: unknown) {
         const valid = arr.indexOf(value) !== -1;
         if (!valid) warn(msg);
         return valid;
@@ -98,10 +105,10 @@ const VuePropTypes = {
     });
   },
 
-  instanceOf(instanceConstructor) {
+  instanceOf<T>(instanceConstructor: T) {
-    return toType('instanceOf', {
+    return {
       type: instanceConstructor,
-    });
+    };
   },
 
   oneOfType(arr) {
@@ -158,10 +165,10 @@ const VuePropTypes = {
     }).def(undefined);
   },
 
-  arrayOf(type) {
+  arrayOf<T extends object>(type: T) {
     return toType('arrayOf', {
-      type: Array,
+      type: Array as PropType<T[]>,
-      validator(values) {
+      validator(values: T[]) {
         const valid = values.every(value => validateType(type, value));
         if (!valid) warn(`arrayOf - value must be an array of "${getType(type)}"`);
         return valid;
@@ -171,8 +178,8 @@ const VuePropTypes = {
 
   objectOf(type) {
     return toType('objectOf', {
-      type: Object,
+      type: Object as PropType<T>,
-      validator(obj) {
+      validator(obj: T): obj is T {
         const valid = Object.keys(obj).every(key => validateType(type, obj[key]));
         if (!valid) warn(`objectOf - value must be an object of "${getType(type)}"`);
         return valid;

components/col/index.ts

@@ -1,6 +1,7 @@
+import { App } from 'vue';
 import { Col } from '../grid';
 /* istanbul ignore next */
-Col.install = function(app) {
+Col.install = function(app: App) {
   app.component(Col.name, Col);
 };
 

components/empty/index.tsx

@@ -1,9 +1,10 @@
-import { defineComponent, CSSProperties, VNodeChild, inject, App } from 'vue';
+import { defineComponent, CSSProperties, VNodeChild, inject, App, PropType, VNode } from 'vue';
 import classNames from 'classnames';
 import { ConfigConsumerProps } from '../config-provider';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import DefaultEmptyImg from './empty';
 import SimpleEmptyImg from './simple';
+import { filterEmpty } from '../_util/props-util';
 
 const defaultEmptyImg = <DefaultEmptyImg />;
 const simpleEmptyImg = <SimpleEmptyImg />;
@@ -12,19 +13,23 @@ export interface TransferLocale {
   description: string;
 }
 
-export interface EmptyProps {
+const Empty = defineComponent({
-  prefixCls?: string;
-  class?: string;
-  style?: CSSProperties;
-  imageStyle?: CSSProperties;
-  image?: VNodeChild;
-  description?: VNodeChild;
-  children?: VNodeChild;
-}
-
-const Empty = defineComponent<EmptyProps>({
   name: 'AEmpty',
-  setup(props) {
+  props: {
+    prefixCls: {
+      type: String,
+    },
+    imageStyle: {
+      type: Object as PropType<string | CSSProperties>,
+    },
+    image: {
+      type: Object as PropType<VNode>,
+    },
+    description: {
+      type: String,
+    },
+  },
+  setup(props, { slots }) {
     const configProvider = inject('configProvider', ConfigConsumerProps);
     const { getPrefixCls } = configProvider;
     const {
@@ -32,7 +37,6 @@ const Empty = defineComponent<EmptyProps>({
       prefixCls: customizePrefixCls,
       image = defaultEmptyImg,
       description,
-      children,
       imageStyle,
       ...restProps
     } = props;
@@ -44,7 +48,6 @@ const Empty = defineComponent<EmptyProps>({
           const prefixCls = getPrefixCls('empty', customizePrefixCls);
           const des = typeof description !== 'undefined' ? description : locale.description;
           const alt = typeof des === 'string' ? des : 'empty';
-
           let imageNode: any = null;
 
           if (typeof image === 'string') {
@@ -68,7 +71,9 @@ const Empty = defineComponent<EmptyProps>({
                 {imageNode}
               </div>
               {des && <p class={`${prefixCls}-description`}>{des}</p>}
-              {children && <div class={`${prefixCls}-footer`}>{children}</div>}
+              {slots.default && (
+                <div class={`${prefixCls}-footer`}>{filterEmpty(slots.default?.())}</div>
+              )}
             </div>
           ) as VNodeChild;
         }}

components/grid/Col.jsx

@@ -1,125 +0,0 @@
-import { inject } from 'vue';
-import PropTypes from '../_util/vue-types';
-import { ConfigConsumerProps } from '../config-provider';
-import { getSlot } from '../_util/props-util';
-
-const stringOrNumber = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
-
-export const ColSize = PropTypes.shape({
-  span: stringOrNumber,
-  order: stringOrNumber,
-  offset: stringOrNumber,
-  push: stringOrNumber,
-  pull: stringOrNumber,
-}).loose;
-
-const objectOrNumber = PropTypes.oneOfType([PropTypes.string, PropTypes.number, ColSize]);
-
-export const ColProps = {
-  span: stringOrNumber,
-  order: stringOrNumber,
-  offset: stringOrNumber,
-  push: stringOrNumber,
-  pull: stringOrNumber,
-  xs: objectOrNumber,
-  sm: objectOrNumber,
-  md: objectOrNumber,
-  lg: objectOrNumber,
-  xl: objectOrNumber,
-  xxl: objectOrNumber,
-  prefixCls: PropTypes.string,
-  flex: stringOrNumber,
-};
-
-export default {
-  name: 'ACol',
-  props: ColProps,
-  setup() {
-    return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
-      rowContext: inject('rowContext', null),
-    };
-  },
-  methods: {
-    parseFlex(flex) {
-      if (typeof flex === 'number') {
-        return `${flex} ${flex} auto`;
-      }
-      if (/^\d+(\.\d+)?(px|em|rem|%)$/.test(flex)) {
-        return `0 0 ${flex}`;
-      }
-      return flex;
-    },
-  },
-  render() {
-    const {
-      span,
-      order,
-      offset,
-      push,
-      pull,
-      flex,
-      prefixCls: customizePrefixCls,
-      rowContext,
-    } = this;
-    const getPrefixCls = this.configProvider.getPrefixCls;
-    const prefixCls = getPrefixCls('col', customizePrefixCls);
-
-    let sizeClassObj = {};
-    ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].forEach(size => {
-      let sizeProps = {};
-      const propSize = this[size];
-      if (typeof propSize === 'number') {
-        sizeProps.span = propSize;
-      } else if (typeof propSize === 'object') {
-        sizeProps = propSize || {};
-      }
-
-      sizeClassObj = {
-        ...sizeClassObj,
-        [`${prefixCls}-${size}-${sizeProps.span}`]: sizeProps.span !== undefined,
-        [`${prefixCls}-${size}-order-${sizeProps.order}`]: sizeProps.order || sizeProps.order === 0,
-        [`${prefixCls}-${size}-offset-${sizeProps.offset}`]:
-          sizeProps.offset || sizeProps.offset === 0,
-        [`${prefixCls}-${size}-push-${sizeProps.push}`]: sizeProps.push || sizeProps.push === 0,
-        [`${prefixCls}-${size}-pull-${sizeProps.pull}`]: sizeProps.pull || sizeProps.pull === 0,
-      };
-    });
-    const classes = {
-      [`${prefixCls}`]: true,
-      [`${prefixCls}-${span}`]: span !== undefined,
-      [`${prefixCls}-order-${order}`]: order,
-      [`${prefixCls}-offset-${offset}`]: offset,
-      [`${prefixCls}-push-${push}`]: push,
-      [`${prefixCls}-pull-${pull}`]: pull,
-      ...sizeClassObj,
-    };
-    const divProps = {
-      class: classes,
-      style: {},
-    };
-    if (rowContext) {
-      const gutter = rowContext.getGutter();
-      if (gutter) {
-        divProps.style = {
-          ...(gutter[0] > 0
-            ? {
-                paddingLeft: `${gutter[0] / 2}px`,
-                paddingRight: `${gutter[0] / 2}px`,
-              }
-            : {}),
-          ...(gutter[1] > 0
-            ? {
-                paddingTop: `${gutter[1] / 2}px`,
-                paddingBottom: `${gutter[1] / 2}px`,
-              }
-            : {}),
-        };
-      }
-    }
-    if (flex) {
-      divProps.style.flex = this.parseFlex(flex);
-    }
-    return <div {...divProps}>{getSlot(this)}</div>;
-  },
-};

components/grid/Col.tsx

@@ -0,0 +1,131 @@
+import { inject, defineComponent, HTMLAttributes, CSSProperties } from 'vue';
+import classNames from 'classnames';
+import { ConfigConsumerProps } from '../config-provider';
+import { rowContextState } from './Row';
+
+type ColSpanType = number | string;
+
+type FlexType = number | 'none' | 'auto' | string;
+
+export interface ColSize {
+  span?: ColSpanType;
+  order?: ColSpanType;
+  offset?: ColSpanType;
+  push?: ColSpanType;
+  pull?: ColSpanType;
+}
+
+export interface ColProps extends HTMLAttributes {
+  span?: ColSpanType;
+  order?: ColSpanType;
+  offset?: ColSpanType;
+  push?: ColSpanType;
+  pull?: ColSpanType;
+  xs?: ColSpanType | ColSize;
+  sm?: ColSpanType | ColSize;
+  md?: ColSpanType | ColSize;
+  lg?: ColSpanType | ColSize;
+  xl?: ColSpanType | ColSize;
+  xxl?: ColSpanType | ColSize;
+  prefixCls?: string;
+  flex?: FlexType;
+}
+
+function parseFlex(flex: FlexType): string {
+  if (typeof flex === 'number') {
+    return `${flex} ${flex} auto`;
+  }
+
+  if (/^\d+(\.\d+)?(px|em|rem|%)$/.test(flex)) {
+    return `0 0 ${flex}`;
+  }
+
+  return flex;
+}
+
+export default defineComponent<ColProps>({
+  name: 'ACol',
+  setup(props, { slots }) {
+    const configProvider = inject('configProvider', ConfigConsumerProps);
+    const rowContext = inject<rowContextState>('rowContext', {});
+
+    return () => {
+      const { gutter } = rowContext;
+      const {
+        prefixCls: customizePrefixCls,
+        span,
+        order,
+        offset,
+        push,
+        pull,
+        class: className,
+        flex,
+        style,
+        ...others
+      } = props;
+      const prefixCls = configProvider.getPrefixCls('col', customizePrefixCls);
+      let sizeClassObj = {};
+      ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].forEach(size => {
+        let sizeProps: ColSize = {};
+        const propSize = (props as any)[size];
+        if (typeof propSize === 'number') {
+          sizeProps.span = propSize;
+        } else if (typeof propSize === 'object') {
+          sizeProps = propSize || {};
+        }
+
+        delete (others as any)[size];
+
+        sizeClassObj = {
+          ...sizeClassObj,
+          [`${prefixCls}-${size}-${sizeProps.span}`]: sizeProps.span !== undefined,
+          [`${prefixCls}-${size}-order-${sizeProps.order}`]:
+            sizeProps.order || sizeProps.order === 0,
+          [`${prefixCls}-${size}-offset-${sizeProps.offset}`]:
+            sizeProps.offset || sizeProps.offset === 0,
+          [`${prefixCls}-${size}-push-${sizeProps.push}`]: sizeProps.push || sizeProps.push === 0,
+          [`${prefixCls}-${size}-pull-${sizeProps.pull}`]: sizeProps.pull || sizeProps.pull === 0,
+        };
+      });
+      const classes = classNames(
+        prefixCls,
+        {
+          [`${prefixCls}-${span}`]: span !== undefined,
+          [`${prefixCls}-order-${order}`]: order,
+          [`${prefixCls}-offset-${offset}`]: offset,
+          [`${prefixCls}-push-${push}`]: push,
+          [`${prefixCls}-pull-${pull}`]: pull,
+        },
+        className,
+        sizeClassObj,
+      );
+      let mergedStyle: CSSProperties = {};
+      if (gutter) {
+        mergedStyle = {
+          ...(gutter[0]! > 0
+            ? {
+                paddingLeft: gutter[0]! / 2,
+                paddingRight: gutter[0]! / 2,
+              }
+            : {}),
+          ...(gutter[1]! > 0
+            ? {
+                paddingTop: gutter[1]! / 2,
+                paddingBottom: gutter[1]! / 2,
+              }
+            : {}),
+          ...mergedStyle,
+        };
+      }
+      if (flex) {
+        mergedStyle.flex = parseFlex(flex);
+      }
+
+      return (
+        <div {...others} style={mergedStyle} class={classes}>
+          {slots.default?.()}
+        </div>
+      );
+    };
+  },
+});

components/grid/Row.jsx

@@ -1,114 +0,0 @@
-import { inject, provide, reactive } from 'vue';
-import PropTypes from '../_util/vue-types';
-import BaseMixin from '../_util/BaseMixin';
-import { ConfigConsumerProps } from '../config-provider';
-import ResponsiveObserve from '../_util/responsiveObserve';
-import { getSlot } from '../_util/props-util';
-
-const RowProps = {
-  gutter: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array]),
-  type: PropTypes.oneOf(['flex']),
-  align: PropTypes.oneOf(['top', 'middle', 'bottom', 'stretch']),
-  justify: PropTypes.oneOf(['start', 'end', 'center', 'space-around', 'space-between']),
-  prefixCls: PropTypes.string,
-};
-
-const responsiveArray = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
-
-export default {
-  name: 'ARow',
-  mixins: [BaseMixin],
-  props: {
-    ...RowProps,
-    gutter: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array]).def(0),
-  },
-  setup() {
-    const rowContext = reactive({
-      getGutter: undefined,
-    });
-    provide('rowContext', rowContext);
-    return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
-      rowContext,
-    };
-  },
-  data() {
-    return {
-      screens: {},
-    };
-  },
-  created() {
-    this.rowContext.getGutter = this.getGutter;
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.token = ResponsiveObserve.subscribe(screens => {
-        const { gutter } = this;
-        if (
-          typeof gutter === 'object' ||
-          (Array.isArray(gutter) &&
-            (typeof gutter[0] === 'object' || typeof gutter[1] === 'object'))
-        ) {
-          this.screens = screens;
-        }
-      });
-    });
-  },
-  beforeUnmount() {
-    ResponsiveObserve.unsubscribe(this.token);
-  },
-  methods: {
-    getGutter() {
-      const results = [0, 0];
-      const { gutter, screens } = this;
-      const normalizedGutter = Array.isArray(gutter) ? gutter : [gutter, 0];
-      normalizedGutter.forEach((g, index) => {
-        if (typeof g === 'object') {
-          for (let i = 0; i < responsiveArray.length; i++) {
-            const breakpoint = responsiveArray[i];
-            if (screens[breakpoint] && g[breakpoint] !== undefined) {
-              results[index] = g[breakpoint];
-              break;
-            }
-          }
-        } else {
-          results[index] = g || 0;
-        }
-      });
-      return results;
-    },
-  },
-
-  render() {
-    const { type, justify, align, prefixCls: customizePrefixCls } = this;
-    const getPrefixCls = this.configProvider.getPrefixCls;
-    const prefixCls = getPrefixCls('row', customizePrefixCls);
-
-    const gutter = this.getGutter();
-    const classes = {
-      [prefixCls]: !type,
-      [`${prefixCls}-${type}`]: type,
-      [`${prefixCls}-${type}-${justify}`]: type && justify,
-      [`${prefixCls}-${type}-${align}`]: type && align,
-    };
-    const rowStyle = {
-      ...(gutter[0] > 0
-        ? {
-            marginLeft: `${gutter[0] / -2}px`,
-            marginRight: `${gutter[0] / -2}px`,
-          }
-        : {}),
-      ...(gutter[1] > 0
-        ? {
-            marginTop: `${gutter[1] / -2}px`,
-            marginBottom: `${gutter[1] / -2}px`,
-          }
-        : {}),
-    };
-    return (
-      <div class={classes} style={rowStyle}>
-        {getSlot(this)}
-      </div>
-    );
-  },
-};

components/grid/Row.tsx

@@ -0,0 +1,149 @@
+import {
+  inject,
+  provide,
+  reactive,
+  defineComponent,
+  HTMLAttributes,
+  ref,
+  onMounted,
+  onBeforeUnmount,
+} from 'vue';
+import classNames from 'classnames';
+import { tuple } from '../_util/type';
+import PropTypes from '../_util/vue-types';
+import { ConfigConsumerProps } from '../config-provider';
+import ResponsiveObserve, {
+  Breakpoint,
+  ScreenMap,
+  responsiveArray,
+} from '../_util/responsiveObserve';
+
+const RowProps = {
+  gutter: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array]),
+  type: PropTypes.oneOf(['flex']),
+  align: PropTypes.oneOf(['top', 'middle', 'bottom', 'stretch']),
+  justify: PropTypes.oneOf(['start', 'end', 'center', 'space-around', 'space-between']),
+  prefixCls: PropTypes.string,
+};
+const RowAligns = tuple('top', 'middle', 'bottom', 'stretch');
+const RowJustify = tuple('start', 'end', 'center', 'space-around', 'space-between');
+
+export type Gutter = number | Partial<Record<Breakpoint, number>>;
+
+export interface rowContextState {
+  gutter?: [number, number];
+}
+
+export interface RowProps extends HTMLAttributes {
+  gutter?: Gutter | [Gutter, Gutter];
+  align?: typeof RowAligns[number];
+  justify?: typeof RowJustify[number];
+  prefixCls?: string;
+}
+
+export default defineComponent<RowProps>({
+  name: 'ARow',
+  setup(props, { slots }) {
+    const rowContext = reactive<rowContextState>({
+      gutter: undefined,
+    });
+    provide('rowContext', rowContext);
+
+    let token: number;
+
+    onMounted(() => {
+      token = ResponsiveObserve.subscribe(screen => {
+        const currentGutter = gutterRef.value || 0;
+        if (
+          (!Array.isArray(currentGutter) && typeof currentGutter === 'object') ||
+          (Array.isArray(currentGutter) &&
+            (typeof currentGutter[0] === 'object' || typeof currentGutter[1] === 'object'))
+        ) {
+          screens.value = screen;
+        }
+      });
+    });
+
+    onBeforeUnmount(() => {
+      ResponsiveObserve.unsubscribe(token);
+    });
+
+    const screens = ref<ScreenMap>({
+      xs: true,
+      sm: true,
+      md: true,
+      lg: true,
+      xl: true,
+      xxl: true,
+    });
+    const gutterRef = ref<Gutter | [Gutter, Gutter]>();
+    gutterRef.value = props.gutter;
+
+    const configProvider = inject('configProvider', ConfigConsumerProps);
+    const { getPrefixCls } = configProvider;
+
+    const getGutter = (): [number, number] => {
+      const results: [number, number] = [0, 0];
+      const { gutter = 0 } = props;
+      const normalizedGutter = Array.isArray(gutter) ? gutter : [gutter, 0];
+      normalizedGutter.forEach((g, index) => {
+        if (typeof g === 'object') {
+          for (let i = 0; i < responsiveArray.length; i++) {
+            const breakpoint: Breakpoint = responsiveArray[i];
+            if (screens.value[breakpoint] && g[breakpoint] !== undefined) {
+              results[index] = g[breakpoint] as number;
+              break;
+            }
+          }
+        } else {
+          results[index] = g || 0;
+        }
+      });
+      return results;
+    };
+
+    return () => {
+      const {
+        prefixCls: customizePrefixCls,
+        justify,
+        align,
+        class: className,
+        style,
+        ...others
+      } = props;
+      const prefixCls = getPrefixCls('row', customizePrefixCls);
+      const gutter = getGutter();
+      const classes = classNames(
+        prefixCls,
+        {
+          [`${prefixCls}-${justify}`]: justify,
+          [`${prefixCls}-${align}`]: align,
+        },
+        className,
+      );
+      const rowStyle = {
+        ...(gutter[0]! > 0
+          ? {
+              marginLeft: gutter[0]! / -2,
+              marginRight: gutter[0]! / -2,
+            }
+          : {}),
+        ...(gutter[1]! > 0
+          ? {
+              marginTop: gutter[1]! / -2,
+              marginBottom: gutter[1]! / 2,
+            }
+          : {}),
+      };
+      const otherProps = { ...others, style };
+      delete otherProps.gutter;
+
+      rowContext.gutter = gutter;
+      return (
+        <div {...otherProps} class={classes} style={rowStyle}>
+          {slots.default?.()}
+        </div>
+      );
+    };
+  },
+});

components/locale-provider/LocaleReceiver.tsx

@@ -1,4 +1,4 @@
-import { inject, defineComponent, VNode, VNodeChild } from 'vue';
+import { inject, defineComponent, VNodeChild, PropType } from 'vue';
 import defaultLocaleData from './default';
 
 export interface LocaleReceiverProps {
@@ -11,8 +11,21 @@ interface LocaleInterface {
   [key: string]: any;
 }
 
-export default defineComponent<LocaleReceiverProps>({
+export default defineComponent({
   name: 'LocaleReceiver',
+  props: {
+    componentName: {
+      type: String,
+    },
+    defaultLocale: {
+      type: [Object, Function],
+    },
+    children: {
+      type: Function as PropType<
+        (locale: object, localeCode?: string, fullLocale?: object) => VNodeChild
+      >,
+    },
+  },
   setup() {
     return {
       localeData: inject('localeData', {}),

components/locale-provider/index.tsx

@@ -38,7 +38,9 @@ function setMomentLocale(locale?: Locale) {
 const LocaleProvider = defineComponent({
   name: 'ALocaleProvider',
   props: {
-    locale: PropTypes.object.def(() => ({})),
+    locale: {
+      type: Object,
+    },
     _ANT_MARK__: PropTypes.string,
   },
   data() {

components/space/index.tsx

@@ -1,22 +1,15 @@
-import { inject, defineComponent, CSSProperties } from 'vue';
+import { inject, defineComponent, App } from 'vue';
+import { initDefaultProps } from '../_util/props-util';
 import PropTypes from '../_util/vue-types';
 import { filterEmpty } from '../_util/props-util';
 import { ConfigConsumerProps } from '../config-provider';
 
-export interface SpaceProps {
+export const SpaceProps = {
-  prefixCls?: string;
+  prefixCls: PropTypes.string,
-  class?: any;
+  align: PropTypes.tuple<'start' | 'end' | 'center' | 'baseline'>(),
-  style?: CSSProperties | string;
+  size: PropTypes.tuple<'small' | 'middle' | 'large'>(),
-  size?: number;
+  direction: PropTypes.tuple<'horizontal' | 'vertical'>(),
-  direction?: 'horizontal' | 'vertical';
+};
-  // No `stretch` since many components do not support that.
-  align?: 'start' | 'end' | 'center' | 'baseline';
-}
-
-export const SpaceSizeType = PropTypes.oneOfType([
-  PropTypes.number,
-  PropTypes.oneOf(['small', 'middle', 'large']),
-]);
 
 const spaceSize = {
   small: 8,
@@ -35,7 +28,7 @@ const Space = (props, { slots }) => {
   const configProvider = inject('configProvider', ConfigConsumerProps);
   const { align, size, direction, prefixCls: customizePrefixCls } = props;
 
-  const getPrefixCls = configProvider.getPrefixCls;
+    const { getPrefixCls } = configProvider;
     const prefixCls = getPrefixCls('space', customizePrefixCls);
     const items = filterEmpty(slots.default?.());
     const len = items.length;
@@ -49,7 +42,6 @@ const Space = (props, { slots }) => {
     const someSpaceClass = {
       [prefixCls]: true,
       [`${prefixCls}-${direction}`]: true,
-    // [`${prefixCls}-rtl`]: directionConfig === 'rtl',
       [`${prefixCls}-align-${mergedAlign}`]: mergedAlign,
     };
 

examples/App.vue

@@ -39,8 +39,12 @@ Use Drawer to quickly preview details of an object, such as those in a list.
       </template>
     </a-list>
     <a-drawer width="640" placement="right" :closable="false" :visible="visible" @close="onClose">
-      <p :style="[pStyle, pStyle2]">User Profile</p>
+      <p :style="[pStyle, pStyle2]">
-      <p :style="pStyle">Personal</p>
+        User Profile
+      </p>
+      <p :style="pStyle">
+        Personal
+      </p>
       <a-row>
         <a-col :span="12">
           <description-item title="Full Name" content="Lily" />
@@ -74,7 +78,9 @@ Use Drawer to quickly preview details of an object, such as those in a list.
         </a-col>
       </a-row>
       <a-divider />
-      <p :style="pStyle">Company</p>
+      <p :style="pStyle">
+        Company
+      </p>
       <a-row>
         <a-col :span="12">
           <description-item title="Position" content="Programmer" />
@@ -104,7 +110,9 @@ Use Drawer to quickly preview details of an object, such as those in a list.
         </a-col>
       </a-row>
       <a-divider />
-      <p :style="pStyle">Contacts</p>
+      <p :style="pStyle">
+        Contacts
+      </p>
       <a-row>
         <a-col :span="12">
           <description-item title="Email" content="ant-design-vue@example.com" />
@@ -117,9 +125,9 @@ Use Drawer to quickly preview details of an object, such as those in a list.
         <a-col :span="24">
           <description-item title="Github">
             <template v-slot:content>
-              <a href="https://github.com/vueComponent/ant-design-vue"
+              <a
-                >github.com/vueComponent/ant-design-vue</a
+                href="https://github.com/vueComponent/ant-design-vue"
-              >
+              >github.com/vueComponent/ant-design-vue</a>
             </template>
           </description-item>
         </a-col>

examples/index.js

@@ -1,21 +1,8 @@
 import '@babel/polyfill';
-import 'ant-design-vue/style.js';
 import { createApp, version } from 'vue';
 import App from './App.vue';
-import antd from 'ant-design-vue/index.js';
-
 // eslint-disable-next-line no-console
 console.log('Vue version: ', version);
-const basic = (_, { slots }) => {
+
-  return slots && slots.default && slots.default();
-};
 const app = createApp(App);
-app
+app.mount('#app');
-  .component('demo-sort', basic)
-  .component('md', basic)
-  .component('api', basic)
-  .component('CN', basic)
-  .component('US', basic)
-  .component('demo-container', basic)
-  .use(antd)
-  .mount('#app');

package.json

@@ -76,6 +76,7 @@
     "@babel/plugin-transform-template-literals": "^7.8.3",
     "@babel/polyfill": "^7.8.7",
     "@babel/preset-env": "^7.9.6",
+    "@babel/preset-typescript": "^7.10.4",
     "@commitlint/cli": "^8.0.0",
     "@commitlint/config-conventional": "^8.0.0",
     "@octokit/rest": "^16.0.0",
@@ -159,6 +160,7 @@
     "stylelint-config-standard": "^19.0.0",
     "terser-webpack-plugin": "^3.0.3",
     "through2": "^3.0.0",
+    "ts-loader": "^8.0.2",
     "typescript": "^3.9.7",
     "umi-mock-middleware": "^1.0.0",
     "umi-request": "^1.3.5",

webpack.config.js

@@ -4,6 +4,44 @@ const WebpackBar = require('webpackbar');
 const path = require('path');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
+const babelConfig = {
+  cacheDirectory: true,
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          browsers: [
+            'last 2 versions',
+            'Firefox ESR',
+            '> 1%',
+            'ie >= 9',
+            'iOS >= 8',
+            'Android >= 4',
+          ],
+        },
+      },
+    ],
+    '@babel/preset-typescript',
+  ],
+  plugins: [
+    [
+      'babel-plugin-import',
+      {
+        libraryName: 'ant-design-vue',
+        libraryDirectory: '', // default: lib
+        style: true,
+      },
+    ],
+    ['@ant-design-vue/babel-plugin-jsx', { optimize: true }],
+    '@babel/plugin-proposal-optional-chaining',
+    '@babel/plugin-transform-object-assign',
+    '@babel/plugin-proposal-object-rest-spread',
+    '@babel/plugin-proposal-export-default-from',
+    '@babel/plugin-proposal-class-properties',
+  ],
+};
+
 module.exports = {
   mode: 'development',
   entry: {
@@ -20,46 +58,27 @@ module.exports = {
         test: /\.(en-US.md|zh-CN.md)$/,
         use: [{ loader: 'vue-loader' }, { loader: './loader.js' }],
       },
+      {
+        test: /\.tsx?$/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: babelConfig,
+          },
+          {
+            loader: 'ts-loader',
+            options: {
+              transpileOnly: true,
+            },
+          },
+        ],
+        exclude: /node_modules/,
+      },
       {
         test: /\.(js|jsx)$/,
         loader: 'babel-loader',
         exclude: /pickr.*js/,
-        options: {
+        options: babelConfig,
-          cacheDirectory: true,
-          presets: [
-            [
-              '@babel/preset-env',
-              {
-                targets: {
-                  browsers: [
-                    'last 2 versions',
-                    'Firefox ESR',
-                    '> 1%',
-                    'ie >= 9',
-                    'iOS >= 8',
-                    'Android >= 4',
-                  ],
-                },
-              },
-            ],
-          ],
-          plugins: [
-            [
-              'babel-plugin-import',
-              {
-                libraryName: 'ant-design-vue',
-                libraryDirectory: '', // default: lib
-                style: true,
-              },
-            ],
-            ['@ant-design-vue/babel-plugin-jsx', { transformOn: true, usePatchFlag: false }],
-            '@babel/plugin-proposal-optional-chaining',
-            '@babel/plugin-transform-object-assign',
-            '@babel/plugin-proposal-object-rest-spread',
-            '@babel/plugin-proposal-export-default-from',
-            '@babel/plugin-proposal-class-properties',
-          ],
-        },
       },
       {
         test: /\.(png|jpg|gif|svg)$/,
@@ -115,7 +134,7 @@ module.exports = {
 
       vue$: 'vue/dist/vue.esm-bundler.js',
     },
-    extensions: ['.js', '.jsx', '.vue', '.md'],
+    extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue', '.md'],
   },
   devServer: {
     historyApiFallback: {