diff --git a/components/grid/Col.tsx b/components/grid/Col.tsx index 2aaf61dd2..0f28612c6 100644 --- a/components/grid/Col.tsx +++ b/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]); -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]); +const colProps = () => ({ + span: [String, Number], + order: [String, Number], + offset: [String, Number], + push: [String, Number], + pull: [String, Number], + xs: { type: [String, Number, Object] as PropType }, + sm: { type: [String, Number, Object] as PropType }, + md: { type: [String, Number, Object] as PropType }, + lg: { type: [String, Number, Object] as PropType }, + xl: { type: [String, Number, Object] as PropType }, + xxl: { type: [String, Number, Object] as PropType }, + xxxl: { type: [String, Number, Object] as PropType }, + prefixCls: String, + flex: [String, Number], +}); -const 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>; +export type ColProps = Partial>>; 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; } } diff --git a/components/grid/Row.tsx b/components/grid/Row.tsx index 73db79537..b387d013d 100644 --- a/components/grid/Row.tsx +++ b/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 = { - 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), - wrap: PropTypes.looseBool, -}; +export const rowProps = () => ({ + align: String as PropType, + justify: String as PropType, + prefixCls: String, + gutter: { type: [Number, Array, Object] as PropType, default: 0 }, + wrap: { type: Boolean, default: undefined }, +}); -export type RowProps = Partial>; +export type RowProps = Partial>>; const ARow = defineComponent({ name: 'ARow', - props: rowProps, + props: rowProps(), setup(props, { slots }) { const { prefixCls, direction } = useConfigInject('row', props); diff --git a/components/grid/__tests__/__snapshots__/demo.test.js.snap b/components/grid/__tests__/__snapshots__/demo.test.js.snap index 49e436ab7..c8ebc4703 100644 --- a/components/grid/__tests__/__snapshots__/demo.test.js.snap +++ b/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`] = `

sub-element align left

-
+
col-4
col-4
col-4
col-4

sub-element align center

-
+
col-4
col-4
col-4
col-4

sub-element align right

-
+
col-4
col-4
col-4
col-4

sub-element monospaced arrangement

-
+
col-4
col-4
col-4
col-4

sub-element align full

-
+
col-4
col-4
col-4
@@ -60,7 +60,7 @@ exports[`renders ./components/grid/demo/flex.vue correctly 1`] = ` exports[`renders ./components/grid/demo/flex-align.vue correctly 1`] = `

Align Top

-
+

col-4

@@ -75,7 +75,7 @@ exports[`renders ./components/grid/demo/flex-align.vue correctly 1`] = `

Align Center

-
+

col-4

@@ -90,7 +90,7 @@ exports[`renders ./components/grid/demo/flex-align.vue correctly 1`] = `

Align Bottom

-
+

col-4

@@ -108,14 +108,14 @@ exports[`renders ./components/grid/demo/flex-align.vue correctly 1`] = ` exports[`renders ./components/grid/demo/flex-order.vue correctly 1`] = ` -
+
1 col-order-4
2 col-order-3
3 col-order-2
4 col-order-1
-
+
1 col-order-responsive
2 col-order-responsive
3 col-order-responsive
@@ -125,17 +125,17 @@ exports[`renders ./components/grid/demo/flex-order.vue correctly 1`] = ` exports[`renders ./components/grid/demo/flex-stretch.vue correctly 1`] = ` -
+
2 / 5
3 / 5
-
+
100px
auto
-
+
1 1 200px
0 1 300px
diff --git a/components/grid/demo/gutter.vue b/components/grid/demo/gutter.vue index f81c5016e..d07aa6125 100644 --- a/components/grid/demo/gutter.vue +++ b/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`. diff --git a/components/grid/style/index.ts b/components/grid/style/index.tsx similarity index 100% rename from components/grid/style/index.ts rename to components/grid/style/index.tsx