style: update grid

components/grid/Col.tsx

@@ -1,7 +1,6 @@
-import type { CSSProperties, ExtractPropTypes } from 'vue';
+import type { CSSProperties, ExtractPropTypes, PropType } from 'vue';
 import { defineComponent, computed } from 'vue';
 import classNames from '../_util/classNames';
-import PropTypes from '../_util/vue-types';
 import useConfigInject from '../_util/hooks/useConfigInject';
 import { useInjectRow } from './context';
 
@@ -29,38 +28,28 @@ function parseFlex(flex: FlexType): string {
   return flex;
 }
 
-const stringOrNumber = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
+const colProps = () => ({
-export const colSize = PropTypes.shape<ColSize>({
+  span: [String, Number],
-  span: stringOrNumber,
+  order: [String, Number],
-  order: stringOrNumber,
+  offset: [String, Number],
-  offset: stringOrNumber,
+  push: [String, Number],
-  push: stringOrNumber,
+  pull: [String, Number],
-  pull: stringOrNumber,
+  xs: { type: [String, Number, Object] as PropType<string | number | ColSize> },
-}).loose;
+  sm: { type: [String, Number, Object] as PropType<string | number | ColSize> },
-const objectOrNumber = PropTypes.oneOfType([PropTypes.string, PropTypes.number, colSize]);
+  md: { type: [String, Number, Object] as PropType<string | number | ColSize> },
+  lg: { type: [String, Number, Object] as PropType<string | number | ColSize> },
+  xl: { type: [String, Number, Object] as PropType<string | number | ColSize> },
+  xxl: { type: [String, Number, Object] as PropType<string | number | ColSize> },
+  xxxl: { type: [String, Number, Object] as PropType<string | number | ColSize> },
+  prefixCls: String,
+  flex: [String, Number],
+});
 
-const colProps = {
+export type ColProps = Partial<ExtractPropTypes<ReturnType<typeof colProps>>>;
-  span: stringOrNumber,
-  order: stringOrNumber,
-  offset: stringOrNumber,
-  push: stringOrNumber,
-  pull: stringOrNumber,
-  xs: objectOrNumber,
-  sm: objectOrNumber,
-  md: objectOrNumber,
-  lg: objectOrNumber,
-  xl: objectOrNumber,
-  xxl: objectOrNumber,
-  xxxl: objectOrNumber,
-  prefixCls: PropTypes.string,
-  flex: stringOrNumber,
-};
-
-export type ColProps = Partial<ExtractPropTypes<typeof colProps>>;
 
 export default defineComponent({
   name: 'ACol',
-  props: colProps,
+  props: colProps(),
   setup(props, { slots }) {
     const { gutter, supportFlexGap, wrap } = useInjectRow();
     const { prefixCls, direction } = useConfigInject('col', props);
@@ -123,7 +112,7 @@ export default defineComponent({
 
         // Hack for Firefox to avoid size issue
         // https://github.com/ant-design/ant-design/pull/20023#issuecomment-564389553
-        if (flex === 'auto' && wrap.value === false && !style.minWidth) {
+        if (wrap.value === false && !style.minWidth) {
           style.minWidth = 0;
         }
       }

components/grid/Row.tsx

@@ -1,8 +1,7 @@
-import type { ExtractPropTypes, CSSProperties } from 'vue';
+import type { ExtractPropTypes, CSSProperties, PropType } from 'vue';
 import { defineComponent, ref, onMounted, onBeforeUnmount, computed } from 'vue';
 import classNames from '../_util/classNames';
 import { tuple } from '../_util/type';
-import PropTypes from '../_util/vue-types';
 import type { Breakpoint, ScreenMap } from '../_util/responsiveObserve';
 import ResponsiveObserve, { responsiveArray } from '../_util/responsiveObserve';
 import useConfigInject from '../_util/hooks/useConfigInject';
@@ -18,20 +17,19 @@ export interface rowContextState {
   gutter?: [number, number];
 }
 
-const rowProps = {
+export const rowProps = () => ({
-  type: PropTypes.oneOf(['flex']),
+  align: String as PropType<typeof RowAligns[number]>,
-  align: PropTypes.oneOf(RowAligns),
+  justify: String as PropType<typeof RowJustify[number]>,
-  justify: PropTypes.oneOf(RowJustify),
+  prefixCls: String,
-  prefixCls: PropTypes.string,
+  gutter: { type: [Number, Array, Object] as PropType<Gutter | [Gutter, Gutter]>, default: 0 },
-  gutter: PropTypes.oneOfType([PropTypes.object, PropTypes.number, PropTypes.array]).def(0),
+  wrap: { type: Boolean, default: undefined },
-  wrap: PropTypes.looseBool,
+});
-};
 
-export type RowProps = Partial<ExtractPropTypes<typeof rowProps>>;
+export type RowProps = Partial<ExtractPropTypes<ReturnType<typeof rowProps>>>;
 
 const ARow = defineComponent({
   name: 'ARow',
-  props: rowProps,
+  props: rowProps(),
   setup(props, { slots }) {
     const { prefixCls, direction } = useConfigInject('row', props);
 

components/grid/__tests__/__snapshots__/demo.test.js.snap

@@ -21,35 +21,35 @@ exports[`renders ./components/grid/demo/basic.vue correctly 1`] = `
 exports[`renders ./components/grid/demo/flex.vue correctly 1`] = `
 <div id="components-grid-demo-flex">
   <p>sub-element align left</p>
-  <div class="ant-row ant-row-start">
+  <div class="ant-row ant-row-start" type="flex">
     <div class="ant-col ant-col-4">col-4</div>
     <div class="ant-col ant-col-4">col-4</div>
     <div class="ant-col ant-col-4">col-4</div>
     <div class="ant-col ant-col-4">col-4</div>
   </div>
   <p>sub-element align center</p>
-  <div class="ant-row ant-row-center">
+  <div class="ant-row ant-row-center" type="flex">
     <div class="ant-col ant-col-4">col-4</div>
     <div class="ant-col ant-col-4">col-4</div>
     <div class="ant-col ant-col-4">col-4</div>
     <div class="ant-col ant-col-4">col-4</div>
   </div>
   <p>sub-element align right</p>
-  <div class="ant-row ant-row-end">
+  <div class="ant-row ant-row-end" type="flex">
     <div class="ant-col ant-col-4">col-4</div>
     <div class="ant-col ant-col-4">col-4</div>
     <div class="ant-col ant-col-4">col-4</div>
     <div class="ant-col ant-col-4">col-4</div>
   </div>
   <p>sub-element monospaced arrangement</p>
-  <div class="ant-row ant-row-space-between">
+  <div class="ant-row ant-row-space-between" type="flex">
     <div class="ant-col ant-col-4">col-4</div>
     <div class="ant-col ant-col-4">col-4</div>
     <div class="ant-col ant-col-4">col-4</div>
     <div class="ant-col ant-col-4">col-4</div>
   </div>
   <p>sub-element align full</p>
-  <div class="ant-row ant-row-space-around">
+  <div class="ant-row ant-row-space-around" type="flex">
     <div class="ant-col ant-col-4">col-4</div>
     <div class="ant-col ant-col-4">col-4</div>
     <div class="ant-col ant-col-4">col-4</div>
@@ -60,7 +60,7 @@ exports[`renders ./components/grid/demo/flex.vue correctly 1`] = `
 
 exports[`renders ./components/grid/demo/flex-align.vue correctly 1`] = `
 <p>Align Top</p>
-<div class="ant-row ant-row-center ant-row-top">
+<div class="ant-row ant-row-center ant-row-top" type="flex">
   <div class="ant-col ant-col-4">
     <p class="height-100">col-4</p>
   </div>
@@ -75,7 +75,7 @@ exports[`renders ./components/grid/demo/flex-align.vue correctly 1`] = `
   </div>
 </div>
 <p>Align Center</p>
-<div class="ant-row ant-row-space-around ant-row-middle">
+<div class="ant-row ant-row-space-around ant-row-middle" type="flex">
   <div class="ant-col ant-col-4">
     <p class="height-100">col-4</p>
   </div>
@@ -90,7 +90,7 @@ exports[`renders ./components/grid/demo/flex-align.vue correctly 1`] = `
   </div>
 </div>
 <p>Align Bottom</p>
-<div class="ant-row ant-row-space-between ant-row-bottom">
+<div class="ant-row ant-row-space-between ant-row-bottom" type="flex">
   <div class="ant-col ant-col-4">
     <p class="height-100">col-4</p>
   </div>
@@ -108,14 +108,14 @@ exports[`renders ./components/grid/demo/flex-align.vue correctly 1`] = `
 
 exports[`renders ./components/grid/demo/flex-order.vue correctly 1`] = `
 <div class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left" role="separator"><span class="ant-divider-inner-text">Normal</span></div>
-<div class="ant-row">
+<div class="ant-row" type="flex">
   <div class="ant-col ant-col-6 ant-col-order-4">1 col-order-4</div>
   <div class="ant-col ant-col-6 ant-col-order-3">2 col-order-3</div>
   <div class="ant-col ant-col-6 ant-col-order-2">3 col-order-2</div>
   <div class="ant-col ant-col-6 ant-col-order-1">4 col-order-1</div>
 </div>
 <div class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left" role="separator"><span class="ant-divider-inner-text">Responsive</span></div>
-<div class="ant-row">
+<div class="ant-row" type="flex">
   <div class="ant-col ant-col-6 ant-col-xs-order-1 ant-col-sm-order-2 ant-col-md-order-3 ant-col-lg-order-4"> 1 col-order-responsive </div>
   <div class="ant-col ant-col-6 ant-col-xs-order-2 ant-col-sm-order-1 ant-col-md-order-4 ant-col-lg-order-3"> 2 col-order-responsive </div>
   <div class="ant-col ant-col-6 ant-col-xs-order-3 ant-col-sm-order-4 ant-col-md-order-2 ant-col-lg-order-2"> 3 col-order-responsive </div>
@@ -125,17 +125,17 @@ exports[`renders ./components/grid/demo/flex-order.vue correctly 1`] = `
 
 exports[`renders ./components/grid/demo/flex-stretch.vue correctly 1`] = `
 <div class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left" role="separator"><span class="ant-divider-inner-text">Percentage columns</span></div>
-<div class="ant-row">
+<div class="ant-row" type="flex">
   <div class="ant-col" style="flex: 2 2 auto;">2 / 5</div>
   <div class="ant-col" style="flex: 3 3 auto;">3 / 5</div>
 </div>
 <div class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left" role="separator"><span class="ant-divider-inner-text">Fill rest</span></div>
-<div class="ant-row">
+<div class="ant-row" type="flex">
   <div class="ant-col" style="flex: 0 0 100px;">100px</div>
   <div class="ant-col" style="flex-basis: auto;">auto</div>
 </div>
 <div class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left" role="separator"><span class="ant-divider-inner-text">Raw flex style</span></div>
-<div class="ant-row">
+<div class="ant-row" type="flex">
   <div class="ant-col" style="flex: 1 1 200px;">1 1 200px</div>
   <div class="ant-col" style="flex: 0 1 300px;">0 1 300px</div>
 </div>

components/grid/demo/gutter.vue

@@ -22,7 +22,7 @@ You can use the `gutter` property of `Row` as grid spacing, we recommend set it
 
 You can set it to a object like `{ xs: 8, sm: 16, md: 24, lg: 32 }` for responsive design.
 
-You can use a array to set vertical spacing, `[horizontal, vertical]` `[16, { xs: 8, sm: 16, md: 24, lg: 32 }]`.
+You can use an array to set vertical spacing, `[horizontal, vertical]` `[16, { xs: 8, sm: 16, md: 24, lg: 32 }]`.
 
 > vertical gutter was supported after `1.5.0`.