fix: grid props

components/grid/Col.tsx

@@ -1,5 +1,6 @@
 import { inject, defineComponent, HTMLAttributes, CSSProperties } from 'vue';
 import classNames from '../_util/classNames';
+import PropTypes from '../_util/vue-types';
 import { defaultConfigProvider } from '../config-provider';
 import { rowContextState } from './Row';
 
@@ -43,40 +44,26 @@ function parseFlex(flex: FlexType): string {
   return flex;
 }
 
-export default defineComponent({
+const ACol = defineComponent<ColProps>({
   name: 'ACol',
-  inheritAttrs: false,
+  setup(props, { slots }) {
-  setup(_: ColProps, { slots, attrs }) {
     const configProvider = inject('configProvider', defaultConfigProvider);
     const rowContext = inject<rowContextState>('rowContext', {});
 
     return () => {
       const { gutter } = rowContext;
-      const {
+      const { prefixCls: customizePrefixCls, span, order, offset, push, pull, flex } = props;
-        prefixCls: customizePrefixCls,
-        span,
-        order,
-        offset,
-        push,
-        pull,
-        class: className,
-        flex,
-        style,
-        ...others
-      } = attrs as ColProps;
       const prefixCls = configProvider.getPrefixCls('col', customizePrefixCls);
       let sizeClassObj = {};
       ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].forEach(size => {
         let sizeProps: ColSize = {};
-        const propSize = attrs[size];
+        const propSize = props[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,
@@ -97,10 +84,9 @@ export default defineComponent({
           [`${prefixCls}-push-${push}`]: push,
           [`${prefixCls}-pull-${pull}`]: pull,
         },
-        className,
         sizeClassObj,
       );
-      let mergedStyle: CSSProperties = { ...(style as CSSProperties) };
+      let mergedStyle: CSSProperties = {};
       if (gutter) {
         mergedStyle = {
           ...(gutter[0]! > 0
@@ -123,10 +109,40 @@ export default defineComponent({
       }
 
       return (
-        <div {...others} style={mergedStyle} class={classes}>
+        <div style={mergedStyle} class={classes}>
           {slots.default?.()}
         </div>
       );
     };
   },
 });
+
+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]);
+
+ACol.props = {
+  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 ACol;

components/grid/Row.tsx

@@ -18,13 +18,6 @@ import ResponsiveObserve, {
   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');
 
@@ -35,22 +28,21 @@ export interface rowContextState {
 }
 
 export interface RowProps extends HTMLAttributes {
+  type?: 'flex';
   gutter?: Gutter | [Gutter, Gutter];
   align?: typeof RowAligns[number];
   justify?: typeof RowJustify[number];
   prefixCls?: string;
 }
 
-export default defineComponent<RowProps>({
+const ARow = defineComponent<RowProps>({
   name: 'ARow',
-  setup(_: RowProps, { slots, attrs }) {
+  setup(props, { slots }) {
     const rowContext = reactive<rowContextState>({
       gutter: undefined,
     });
     provide('rowContext', rowContext);
 
-    const props = attrs as RowProps;
-
     let token: number;
 
     onMounted(() => {
@@ -81,8 +73,7 @@ export default defineComponent<RowProps>({
     const gutterRef = ref<Gutter | [Gutter, Gutter]>();
     gutterRef.value = props.gutter;
 
-    const configProvider = inject('configProvider', defaultConfigProvider);
+    const { getPrefixCls } = inject('configProvider', defaultConfigProvider);
-    const { getPrefixCls } = configProvider;
 
     const getGutter = (): [number, number] => {
       const results: [number, number] = [0, 0];
@@ -105,24 +96,13 @@ export default defineComponent<RowProps>({
     };
 
     return () => {
-      const {
+      const { prefixCls: customizePrefixCls, justify, align } = props;
-        prefixCls: customizePrefixCls,
-        justify,
-        align,
-        class: className,
-        style,
-        ...others
-      } = props;
       const prefixCls = getPrefixCls('row', customizePrefixCls);
       const gutter = getGutter();
-      const classes = classNames(
+      const classes = classNames(prefixCls, {
-        prefixCls,
+        [`${prefixCls}-${justify}`]: justify,
-        {
+        [`${prefixCls}-${align}`]: align,
-          [`${prefixCls}-${justify}`]: justify,
+      });
-          [`${prefixCls}-${align}`]: align,
-        },
-        className,
-      );
       const rowStyle = {
         ...(gutter[0]! > 0
           ? {
@@ -137,15 +117,23 @@ export default defineComponent<RowProps>({
             }
           : {}),
       };
-      const otherProps = { ...others, style };
-      delete otherProps.gutter;
 
       rowContext.gutter = gutter;
       return (
-        <div {...otherProps} class={classes} style={rowStyle}>
+        <div class={classes} style={rowStyle}>
           {slots.default?.()}
         </div>
       );
     };
   },
 });
+
+ARow.props = {
+  type: PropTypes.oneOf(['flex']),
+  align: PropTypes.oneOf(RowAligns),
+  justify: PropTypes.oneOf(RowJustify),
+  prefixCls: PropTypes.string,
+  gutter: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array]).def(0),
+};
+
+export default ARow;