diff --git a/components/col/index.ts b/components/col/index.ts index 5638e8181a..fb02cf98ae 100644 --- a/components/col/index.ts +++ b/components/col/index.ts @@ -1,4 +1,4 @@ import { Col } from '../grid'; import { withInstall } from '../_util/type'; -export type { ColProps } from '../grid'; +export type { ColProps, ColSize } from '../grid'; export default withInstall(Col); diff --git a/components/col/style/index.ts b/components/col/style/index.ts new file mode 100644 index 0000000000..a491223046 --- /dev/null +++ b/components/col/style/index.ts @@ -0,0 +1,4 @@ +// Compatible for babel-plugin-import + +/* istanbul ignore next */ +export default {}; diff --git a/components/col/style/index.tsx b/components/col/style/index.tsx deleted file mode 100644 index 2127e6804d..0000000000 --- a/components/col/style/index.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import '../../style/index.less'; - -// style dependencies -// deps-lint-skip: grid -import '../../grid/style'; diff --git a/components/form/style/index.less b/components/form/style/index.less index 97be5a0121..313fd39ade 100644 --- a/components/form/style/index.less +++ b/components/form/style/index.less @@ -1,7 +1,6 @@ @import '../../style/themes/index'; @import '../../style/mixins/index'; @import '../../input/style/mixin'; -@import '../../grid/style/mixin'; @import './components'; @import './inline'; @import './horizontal'; @@ -109,7 +108,9 @@ } // Required mark - &.@{form-item-prefix-cls}-required:not(.@{form-item-prefix-cls}-required-mark-optional)::before { + &.@{form-item-prefix-cls}-required:not( + .@{form-item-prefix-cls}-required-mark-optional + )::before { display: inline-block; margin-right: 4px; color: @label-required-color; diff --git a/components/form/style/index.tsx b/components/form/style/index.tsx index 74a898d18d..7bd39f61bf 100644 --- a/components/form/style/index.tsx +++ b/components/form/style/index.tsx @@ -2,5 +2,4 @@ import '../../style/index.less'; import './index.less'; // style dependencies -import '../../grid/style'; import '../../tooltip/style'; diff --git a/components/form/style/rtl.less b/components/form/style/rtl.less index 7a297ef9c9..b518b0e08f 100644 --- a/components/form/style/rtl.less +++ b/components/form/style/rtl.less @@ -1,7 +1,6 @@ @import '../../style/themes/index'; @import '../../style/mixins/index'; @import '../../input/style/mixin'; -@import '../../grid/style/mixin'; @form-prefix-cls: ~'@{ant-prefix}-form'; @form-item-prefix-cls: ~'@{form-prefix-cls}-item'; diff --git a/components/grid/Col.tsx b/components/grid/Col.tsx index 1cc566a1fd..f5088e27de 100644 --- a/components/grid/Col.tsx +++ b/components/grid/Col.tsx @@ -3,6 +3,7 @@ import { defineComponent, computed } from 'vue'; import classNames from '../_util/classNames'; import useConfigInject from '../config-provider/hooks/useConfigInject'; import { useInjectRow } from './context'; +import { useColStyle } from './style'; type ColSpanType = number | string; @@ -68,18 +69,23 @@ export const colProps = () => ({ export type ColProps = Partial>>; +const sizes = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl'] as const; export default defineComponent({ compatConfig: { MODE: 3 }, name: 'ACol', + inheritAttrs: false, props: colProps(), - setup(props, { slots }) { + setup(props, { slots, attrs }) { const { gutter, supportFlexGap, wrap } = useInjectRow(); const { prefixCls, direction } = useConfigInject('col', props); + + const [wrapSSR, hashId] = useColStyle(prefixCls); + const classes = computed(() => { const { span, order, offset, push, pull } = props; const pre = prefixCls.value; let sizeClassObj = {}; - ['xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl'].forEach(size => { + sizes.forEach(size => { let sizeProps: ColSize = {}; const propSize = props[size]; if (typeof propSize === 'number') { @@ -108,6 +114,8 @@ export default defineComponent({ [`${pre}-pull-${pull}`]: pull, }, sizeClassObj, + attrs.class, + hashId.value, ); }); @@ -140,12 +148,16 @@ export default defineComponent({ } return style; }); - return () => { - return ( -
+ + return () => + wrapSSR( +
{slots.default?.()} -
+
, ); - }; }, }); diff --git a/components/grid/Row.tsx b/components/grid/Row.tsx index bd97870370..1877ae817d 100644 --- a/components/grid/Row.tsx +++ b/components/grid/Row.tsx @@ -1,26 +1,41 @@ 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 type { Breakpoint, ScreenMap } from '../_util/responsiveObserve'; import useResponsiveObserve, { responsiveArray } from '../_util/responsiveObserve'; import useConfigInject from '../config-provider/hooks/useConfigInject'; import useFlexGapSupport from '../_util/hooks/useFlexGapSupport'; import useProvideRow from './context'; - -const RowAligns = tuple('top', 'middle', 'bottom', 'stretch'); -const RowJustify = tuple('start', 'end', 'center', 'space-around', 'space-between', 'space-evenly'); +import { useRowStyle } from './style'; + +const RowAligns = ['top', 'middle', 'bottom', 'stretch'] as const; +const RowJustify = [ + 'start', + 'end', + 'center', + 'space-around', + 'space-between', + 'space-evenly', +] as const; + +type Responsive = 'xxxl' | 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs'; +type ResponsiveLike = { + [key in Responsive]?: T; +}; type Gap = number | undefined; export type Gutter = number | undefined | Partial>; +type ResponsiveAligns = ResponsiveLike<(typeof RowAligns)[number]>; +type ResponsiveJustify = ResponsiveLike<(typeof RowJustify)[number]>; + export interface rowContextState { gutter?: [number, number]; } export const rowProps = () => ({ - align: String as PropType<(typeof RowAligns)[number]>, - justify: String as PropType<(typeof RowJustify)[number]>, + align: [String, Object] as PropType<(typeof RowAligns)[number] | ResponsiveAligns>, + justify: [String, Object] as PropType<(typeof RowJustify)[number] | ResponsiveJustify>, prefixCls: String, gutter: { type: [Number, Array, Object] as PropType, @@ -35,8 +50,10 @@ const ARow = defineComponent({ compatConfig: { MODE: 3 }, name: 'ARow', props: rowProps(), - setup(props, { slots }) { + inheritAttrs: false, + setup(props, { slots, attrs }) { const { prefixCls, direction } = useConfigInject('row', props); + const [wrapSSR, hashId] = useRowStyle(prefixCls); let token: number; @@ -52,10 +69,46 @@ const ARow = defineComponent({ xxxl: true, }); + const curScreens = ref({ + xs: false, + sm: false, + md: false, + lg: false, + xl: false, + xxl: false, + xxxl: false, + }); + + const mergePropsByScreen = (oriProp: 'align' | 'justify') => { + return computed(() => { + if (typeof props[oriProp] === 'string') { + return props[oriProp]; + } + if (typeof props[oriProp] !== 'object') { + return ''; + } + + for (let i = 0; i < responsiveArray.length; i++) { + const breakpoint: Breakpoint = responsiveArray[i]; + // if do not match, do nothing + if (!curScreens.value[breakpoint]) continue; + const curVal = props[oriProp][breakpoint]; + if (curVal !== undefined) { + return curVal; + } + } + return ''; + }); + }; + + const mergeAlign = mergePropsByScreen('align'); + const mergeJustify = mergePropsByScreen('justify'); + const supportFlexGap = useFlexGapSupport(); onMounted(() => { token = responsiveObserve.value.subscribe(screen => { + curScreens.value = screen; const currentGutter = props.gutter || 0; if ( (!Array.isArray(currentGutter) && typeof currentGutter === 'object') || @@ -98,12 +151,17 @@ const ARow = defineComponent({ }); const classes = computed(() => - classNames(prefixCls.value, { - [`${prefixCls.value}-no-wrap`]: props.wrap === false, - [`${prefixCls.value}-${props.justify}`]: props.justify, - [`${prefixCls.value}-${props.align}`]: props.align, - [`${prefixCls.value}-rtl`]: direction.value === 'rtl', - }), + classNames( + prefixCls.value, + { + [`${prefixCls.value}-no-wrap`]: props.wrap === false, + [`${prefixCls.value}-${mergeJustify.value}`]: mergeJustify.value, + [`${prefixCls.value}-${mergeAlign.value}`]: mergeAlign.value, + [`${prefixCls.value}-rtl`]: direction.value === 'rtl', + }, + attrs.class, + hashId.value, + ), ); const rowStyle = computed(() => { @@ -128,13 +186,16 @@ const ARow = defineComponent({ return style; }); - return () => { - return ( -
+ return () => + wrapSSR( +
{slots.default?.()} -
+
, ); - }; }, }); diff --git a/components/grid/__tests__/__snapshots__/demo.test.js.snap b/components/grid/__tests__/__snapshots__/demo.test.js.snap index ee5868e472..9ea18c79da 100644 --- a/components/grid/__tests__/__snapshots__/demo.test.js.snap +++ b/components/grid/__tests__/__snapshots__/demo.test.js.snap @@ -1,6 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders ./components/grid/demo/basic.vue correctly 1`] = ` +
+
col
+
col-12
col-12
@@ -20,47 +23,54 @@ 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
col-4
+ +
+
col-4
+
col-4
+
col-4
+
col-4
+
`; exports[`renders ./components/grid/demo/flex-align.vue correctly 1`] = `

Align Top

-
+

col-4

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

Align Center

-
+

col-4

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

Align Bottom

-
+

col-4

@@ -108,14 +118,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,37 +135,84 @@ 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
+
+
+
none
+
+
auto with no-wrap
+
`; exports[`renders ./components/grid/demo/gutter.vue correctly 1`] = ` -
-
-
-
col-6
-
-
-
col-6
-
-
-
col-6
-
-
-
col-6
-
+ +
+
+
col-6
+
+
+
col-6
+
+
+
col-6
+
+
+
col-6
+
+
+ +
+
+
col-6
+
+
+
col-6
+
+
+
col-6
+
+
+
col-6
+
+
+ +
+
+
col-6
+
+
+
col-6
+
+
+
col-6
+
+
+
col-6
+
+
+
col-6
+
+
+
col-6
+
+
+
col-6
+
+
+
col-6
`; @@ -233,6 +290,19 @@ exports[`renders ./components/grid/demo/playfround.vue correctly 1`] = `
Column
+
Another Row:
+
+
Column
+
+
+
Column
+
+
+
Column
+
+
+
Column
+ 
<a-row :gutter="[16,16]">
   <a-col :span="6"/>
   <a-col :span="6"/>
@@ -269,3 +339,5 @@ exports[`renders ./components/grid/demo/sort.vue correctly 1`] = `
   
col-6 col-pull-18
`; + +exports[`renders ./components/grid/demo/use-breakpoint.vue correctly 1`] = `" Current break point:"`; diff --git a/components/grid/demo/basic.vue b/components/grid/demo/basic.vue index a3b2c914d1..5f66412548 100644 --- a/components/grid/demo/basic.vue +++ b/components/grid/demo/basic.vue @@ -21,6 +21,9 @@ You can create a basic grid system by using a single set of `Row` and `Col` grid diff --git a/components/grid/demo/flex.vue b/components/grid/demo/flex.vue index 52e8697e53..be6f44ff3c 100644 --- a/components/grid/demo/flex.vue +++ b/components/grid/demo/flex.vue @@ -20,7 +20,7 @@ Child elements depending on the value of the `start`,`center`, `end`,`space-betw diff --git a/components/grid/demo/gutter.vue b/components/grid/demo/gutter.vue index d07aa61254..8835d07b18 100644 --- a/components/grid/demo/gutter.vue +++ b/components/grid/demo/gutter.vue @@ -29,31 +29,68 @@ You can use an array to set vertical spacing, `[horizontal, vertical]` `[16, { x ``` diff --git a/components/grid/demo/index.vue b/components/grid/demo/index.vue index 59080e4cc5..7606478269 100644 --- a/components/grid/demo/index.vue +++ b/components/grid/demo/index.vue @@ -1,16 +1,17 @@ diff --git a/components/grid/demo/playfround.vue b/components/grid/demo/playfround.vue index c04a38594f..e5c3713ab8 100644 --- a/components/grid/demo/playfround.vue +++ b/components/grid/demo/playfround.vue @@ -66,6 +66,16 @@ A simple playground for column count and gutter.
Column
+ Another Row: + + +
Column
+ + 
{{ rowColHtml }}

{{ rowColHtml }}
@@ -141,11 +151,4 @@ export default defineComponent({ #components-grid-demo-playground .ant-col { padding: 0; } -.code-box-demo #components-grid-demo-playground .ant-row > div { - margin-top: 0; - margin-bottom: 0; -} -[data-theme='dark'] #components-grid-demo-playground [class~='ant-col'] > div { - background: #028ac8; -} diff --git a/components/grid/demo/use-breakpoint.vue b/components/grid/demo/use-breakpoint.vue new file mode 100644 index 0000000000..ebe90e3300 --- /dev/null +++ b/components/grid/demo/use-breakpoint.vue @@ -0,0 +1,41 @@ + +--- +order: 10 +title: + zh-CN: useBreakpoint Hook + en-US: useBreakpoint Hook +--- + +## zh-CN + +使用 `useBreakpoint` 个性化布局。 + +## en-US + +Use `useBreakpoint` Hook provide personalized layout. + + + + + diff --git a/components/grid/index.en-US.md b/components/grid/index.en-US.md index af025c1cf7..21c29c0f0d 100644 --- a/components/grid/index.en-US.md +++ b/components/grid/index.en-US.md @@ -3,7 +3,7 @@ category: Components type: Layout cols: 1 title: Grid -cover: https://gw.alipayobjects.com/zos/alicdn/5rWLU27so/Grid.svg +cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*mfJeS6cqZrEAAAAAAAAAAAAADrJ8AQ/original --- 24 Grids System. @@ -37,29 +37,29 @@ Our grid systems support Flex layout to allow the elements within the parent to ### Row -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| align | the vertical alignment of the flex layout: `top` `middle` `bottom` | string | `top` | -| gutter | spacing between grids, could be a number or a object like `{ xs: 8, sm: 16, md: 24}`. or you can use array to make horizontal and vertical spacing work at the same time `[horizontal, vertical]` (supported after `1.5.0`) | number/object/array | 0 | -| justify | horizontal arrangement of the flex layout: `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` | string | `start` | -| wrap | Auto wrap line | boolean | false | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | +| align | Vertical alignment | `top` \| `middle` \| `bottom` \| `stretch` \| `{[key in 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl']: 'top' | 'middle' | 'bottom' | 'stretch'}` | `top` | object: 4.0 | +| gutter | Spacing between grids, could be a number or a object like `{ xs: 8, sm: 16, md: 24}`. or you can use array to make horizontal and vertical spacing work at the same time `[horizontal, vertical]` (supported after `1.5.0`) | number/object/array | 0 | - | +| justify | Horizontal arrangement | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` \| `{[key in 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl']: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly'}` | `start` | object: 4.0 | +| wrap | Auto wrap line | boolean | false | - | ### Col -| Property | Description | Type | Default | -| --- | --- | --- | --- | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | | flex | the layout fill of flex | string\|number | - | | offset | the number of cells to offset Col from the left | number | 0 | | order | raster order, used in `flex` layout mode | number | 0 | | pull | the number of cells that raster is moved to the left | number | 0 | | push | the number of cells that raster is moved to the right | number | 0 | | span | raster number of cells to occupy, 0 corresponds to `display: none` | number | none | -| xxxl | `≥2000px`, could be a `span` value or an object containing above props | number\|object | - | | xs | `<576px` and also default setting, could be a `span` value or an object containing above props | number\|object | - | | sm | `≥576px`, could be a `span` value or an object containing above props | number\|object | - | | md | `≥768px`, could be a `span` value or an object containing above props | number\|object | - | | lg | `≥992px`, could be a `span` value or an object containing above props | number\|object | - | | xl | `≥1200px`, could be a `span` value or an object containing above props | number\|object | - | | xxl | `≥1600px`, could be a `span` value or an object containing above props | number\|object | - | +| xxxl | `≥2000px`, could be a `span` value or an object containing above props | number\|object | 3.0 | The breakpoints of responsive grid follow [BootStrap 4 media queries rules](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)(not including `occasionally part`). diff --git a/components/grid/index.zh-CN.md b/components/grid/index.zh-CN.md index b66180875b..722f37e96a 100644 --- a/components/grid/index.zh-CN.md +++ b/components/grid/index.zh-CN.md @@ -4,7 +4,7 @@ subtitle: 栅格 type: 布局 cols: 1 title: Grid -cover: https://gw.alipayobjects.com/zos/alicdn/5rWLU27so/Grid.svg +cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*mfJeS6cqZrEAAAAAAAAAAAAADrJ8AQ/original --- 24 栅格系统。 @@ -34,12 +34,12 @@ cover: https://gw.alipayobjects.com/zos/alicdn/5rWLU27so/Grid.svg ### Row -| 成员 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| align | flex 布局下的垂直对齐方式：`top` `middle` `bottom` | string | `top` | -| gutter | 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 `{ xs: 8, sm: 16, md: 24}`。或者使用数组形式同时设置 `[水平间距, 垂直间距]`（`1.5.0 后支持`）。 | number/object/array | 0 | -| justify | flex 布局下的水平排列方式： `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` | string | `start` | -| wrap | 是否自动换行 | boolean | false | +| 成员 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | +| align | 垂直对齐方式 | `top` \| `middle` \| `bottom` \| `stretch` \| `{[key in 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl']: 'top' | 'middle' | 'bottom' | 'stretch'}` | `top` | object: 4.0 | +| gutter | 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 `{ xs: 8, sm: 16, md: 24}`。或者使用数组形式同时设置 `[水平间距, 垂直间距]`（`1.5.0 后支持`）。 | number \| object \| array | 0 | - | +| justify | 水平排列方式 | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` \| `{[key in 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl']: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly'}` | `start` | object: 4.0 | +| wrap | 是否自动换行 | boolean | false | - | ### Col @@ -51,12 +51,12 @@ cover: https://gw.alipayobjects.com/zos/alicdn/5rWLU27so/Grid.svg | pull | 栅格向左移动格数 | number | 0 | | | push | 栅格向右移动格数 | number | 0 | | | span | 栅格占位格数，为 0 时相当于 `display: none` | number | - | | -| xxxl | `≥2000px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | 3.0 | | xs | `<576px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | | | sm | `≥576px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | | | md | `≥768px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | | | lg | `≥992px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | | | xl | `≥1200px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | | | xxl | `≥1600px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | | +| xxxl | `≥2000px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | 3.0 | 响应式栅格的断点扩展自 [BootStrap 4 的规则](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)（不包含链接里 `occasionally` 的部分)。 diff --git a/components/grid/style/index.less b/components/grid/style/index.less deleted file mode 100644 index eb6c076807..0000000000 --- a/components/grid/style/index.less +++ /dev/null @@ -1,127 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; -@import './mixin'; - -// Grid system -.@{row-prefix-cls} { - display: flex; - flex-flow: row wrap; - - &::before, - &::after { - display: flex; - } - - // No wrap of flex - &-no-wrap { - flex-wrap: nowrap; - } -} - -// x轴原点 -.@{row-prefix-cls}-start { - justify-content: flex-start; -} - -// x轴居中 -.@{row-prefix-cls}-center { - justify-content: center; -} - -// x轴反方向 -.@{row-prefix-cls}-end { - justify-content: flex-end; -} - -// x轴平分 -.@{row-prefix-cls}-space-between { - justify-content: space-between; -} - -// x轴有间隔地平分 -.@{row-prefix-cls}-space-around { - justify-content: space-around; -} - -// x轴有间隔地均分 -.@{row-prefix-cls}-space-evenly { - justify-content: space-evenly; -} - -// 顶部对齐 -.@{row-prefix-cls}-top { - align-items: flex-start; -} - -// 居中对齐 -.@{row-prefix-cls}-middle { - align-items: center; -} - -// 底部对齐 -.@{row-prefix-cls}-bottom { - align-items: flex-end; -} - -.@{col-prefix-cls} { - position: relative; - max-width: 100%; - // Prevent columns from collapsing when empty - min-height: 1px; -} - -.make-grid(); - -// Extra small grid -// -// Columns, offsets, pushes, and pulls for extra small devices like -// smartphones. - -.make-grid(-xs); - -// Small grid -// -// Columns, offsets, pushes, and pulls for the small device range, from phones -// to tablets. - -@media (min-width: @screen-sm-min) { - .make-grid(-sm); -} - -// Medium grid -// -// Columns, offsets, pushes, and pulls for the desktop device range. - -@media (min-width: @screen-md-min) { - .make-grid(-md); -} - -// Large grid -// -// Columns, offsets, pushes, and pulls for the large desktop device range. - -@media (min-width: @screen-lg-min) { - .make-grid(-lg); -} - -// Extra Large grid -// -// Columns, offsets, pushes, and pulls for the full hd device range. - -@media (min-width: @screen-xl-min) { - .make-grid(-xl); -} - -// Extra Extra Large grid -// -// Columns, offsets, pushes, and pulls for the full hd device range. - -@media (min-width: @screen-xxl-min) { - .make-grid(-xxl); -} - -@media (min-width: @screen-xxxl-min) { - .make-grid(-xxxl); -} - -@import './rtl'; diff --git a/components/grid/style/index.ts b/components/grid/style/index.ts new file mode 100644 index 0000000000..137b50251f --- /dev/null +++ b/components/grid/style/index.ts @@ -0,0 +1,175 @@ +import type { CSSObject } from '../../_util/cssinjs'; +import type { FullToken, GenerateStyle } from '../../theme/internal'; +import { genComponentStyleHook, mergeToken } from '../../theme/internal'; + +interface GridRowToken extends FullToken<'Grid'> {} + +interface GridColToken extends FullToken<'Grid'> { + gridColumns: number; +} + +// ============================== Row-Shared ============================== +const genGridRowStyle: GenerateStyle = (token): CSSObject => { + const { componentCls } = token; + + return { + // Grid system + [componentCls]: { + display: 'flex', + flexFlow: 'row wrap', + minWidth: 0, + + '&::before, &::after': { + display: 'flex', + }, + + '&-no-wrap': { + flexWrap: 'nowrap', + }, + + // The origin of the X-axis + '&-start': { + justifyContent: 'flex-start', + }, + + // The center of the X-axis + '&-center': { + justifyContent: 'center', + }, + + // The opposite of the X-axis + '&-end': { + justifyContent: 'flex-end', + }, + + '&-space-between': { + justifyContent: 'space-between', + }, + + '&-space-around ': { + justifyContent: 'space-around', + }, + + // Align at the top + '&-top': { + alignItems: 'flex-start', + }, + + // Align at the center + '&-middle': { + alignItems: 'center', + }, + + '&-bottom': { + alignItems: 'flex-end', + }, + }, + }; +}; + +// ============================== Col-Shared ============================== +const genGridColStyle: GenerateStyle = (token): CSSObject => { + const { componentCls } = token; + + return { + // Grid system + [componentCls]: { + position: 'relative', + maxWidth: '100%', + // Prevent columns from collapsing when empty + minHeight: 1, + }, + }; +}; + +const genLoopGridColumnsStyle = (token: GridColToken, sizeCls: string): CSSObject => { + const { componentCls, gridColumns } = token; + + const gridColumnsStyle: CSSObject = {}; + for (let i = gridColumns; i >= 0; i--) { + if (i === 0) { + gridColumnsStyle[`${componentCls}${sizeCls}-${i}`] = { + display: 'none', + }; + gridColumnsStyle[`${componentCls}-push-${i}`] = { + insetInlineStart: 'auto', + }; + gridColumnsStyle[`${componentCls}-pull-${i}`] = { + insetInlineEnd: 'auto', + }; + gridColumnsStyle[`${componentCls}${sizeCls}-push-${i}`] = { + insetInlineStart: 'auto', + }; + gridColumnsStyle[`${componentCls}${sizeCls}-pull-${i}`] = { + insetInlineEnd: 'auto', + }; + gridColumnsStyle[`${componentCls}${sizeCls}-offset-${i}`] = { + marginInlineEnd: 0, + }; + gridColumnsStyle[`${componentCls}${sizeCls}-order-${i}`] = { + order: 0, + }; + } else { + gridColumnsStyle[`${componentCls}${sizeCls}-${i}`] = { + display: 'block', + flex: `0 0 ${(i / gridColumns) * 100}%`, + maxWidth: `${(i / gridColumns) * 100}%`, + }; + gridColumnsStyle[`${componentCls}${sizeCls}-push-${i}`] = { + insetInlineStart: `${(i / gridColumns) * 100}%`, + }; + gridColumnsStyle[`${componentCls}${sizeCls}-pull-${i}`] = { + insetInlineEnd: `${(i / gridColumns) * 100}%`, + }; + gridColumnsStyle[`${componentCls}${sizeCls}-offset-${i}`] = { + marginInlineStart: `${(i / gridColumns) * 100}%`, + }; + gridColumnsStyle[`${componentCls}${sizeCls}-order-${i}`] = { + order: i, + }; + } + } + + return gridColumnsStyle; +}; + +const genGridStyle = (token: GridColToken, sizeCls: string): CSSObject => + genLoopGridColumnsStyle(token, sizeCls); + +const genGridMediaStyle = ( + token: GridColToken, + screenSize: number, + sizeCls: string, +): CSSObject => ({ + [`@media (min-width: ${screenSize}px)`]: { + ...genGridStyle(token, sizeCls), + }, +}); + +// ============================== Export ============================== +export const useRowStyle = genComponentStyleHook('Grid', token => [genGridRowStyle(token)]); + +export const useColStyle = genComponentStyleHook('Grid', token => { + const gridToken: GridColToken = mergeToken(token, { + gridColumns: 24, // Row is divided into 24 parts in Grid + }); + + const gridMediaSizesMap = { + '-sm': gridToken.screenSMMin, + '-md': gridToken.screenMDMin, + '-lg': gridToken.screenLGMin, + '-xl': gridToken.screenXLMin, + '-xxl': gridToken.screenXXLMin, + }; + + return [ + genGridColStyle(gridToken), + genGridStyle(gridToken, ''), + genGridStyle(gridToken, '-xs'), + Object.keys(gridMediaSizesMap) + .map((key: keyof typeof gridMediaSizesMap) => + genGridMediaStyle(gridToken, gridMediaSizesMap[key], key), + ) + .reduce((pre, cur) => ({ ...pre, ...cur }), {}), + ]; +}); diff --git a/components/grid/style/index.tsx b/components/grid/style/index.tsx deleted file mode 100644 index 3a3ab0de59..0000000000 --- a/components/grid/style/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -import '../../style/index.less'; -import './index.less'; diff --git a/components/grid/style/mixin.less b/components/grid/style/mixin.less deleted file mode 100644 index 7182bf4e45..0000000000 --- a/components/grid/style/mixin.less +++ /dev/null @@ -1,56 +0,0 @@ -@import '../../style/mixins/index'; - -@row-prefix-cls: ~'@{ant-prefix}-row'; -@col-prefix-cls: ~'@{ant-prefix}-col'; - -// mixins for grid system -// ------------------------ - -.loop-grid-columns(@index, @class) when (@index > 0) { - .@{col-prefix-cls}@{class}-@{index} { - display: block; - flex: 0 0 percentage((@index / @grid-columns)); - max-width: percentage((@index / @grid-columns)); - } - .@{col-prefix-cls}@{class}-push-@{index} { - left: percentage((@index / @grid-columns)); - } - .@{col-prefix-cls}@{class}-pull-@{index} { - right: percentage((@index / @grid-columns)); - } - .@{col-prefix-cls}@{class}-offset-@{index} { - margin-left: percentage((@index / @grid-columns)); - } - .@{col-prefix-cls}@{class}-order-@{index} { - order: @index; - } - .loop-grid-columns((@index - 1), @class); -} - -.loop-grid-columns(@index, @class) when (@index = 0) { - .@{col-prefix-cls}@{class}-@{index} { - display: none; - } - .@{col-prefix-cls}-push-@{index} { - left: auto; - } - .@{col-prefix-cls}-pull-@{index} { - right: auto; - } - .@{col-prefix-cls}@{class}-push-@{index} { - left: auto; - } - .@{col-prefix-cls}@{class}-pull-@{index} { - right: auto; - } - .@{col-prefix-cls}@{class}-offset-@{index} { - margin-left: 0; - } - .@{col-prefix-cls}@{class}-order-@{index} { - order: 0; - } -} - -.make-grid(@class: ~'') { - .loop-grid-columns(@grid-columns, @class); -} diff --git a/components/grid/style/rtl.less b/components/grid/style/rtl.less deleted file mode 100644 index b098812bc5..0000000000 --- a/components/grid/style/rtl.less +++ /dev/null @@ -1,69 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; -@import './mixin'; - -.@{row-prefix-cls} { - &-rtl { - direction: rtl; - } -} - -// mixin -.loop-grid-columns(@index, @class) when (@index > 0) { - .@{col-prefix-cls}@{class}-push-@{index} { - // reset property in RTL direction - &.@{col-prefix-cls}-rtl { - right: percentage((@index / @grid-columns)); - left: auto; - } - } - - .@{col-prefix-cls}@{class}-pull-@{index} { - // reset property in RTL direction - &.@{col-prefix-cls}-rtl { - right: auto; - left: percentage((@index / @grid-columns)); - } - } - - .@{col-prefix-cls}@{class}-offset-@{index} { - // reset property in RTL direction - &.@{col-prefix-cls}-rtl { - margin-right: percentage((@index / @grid-columns)); - margin-left: 0; - } - } -} - -.loop-grid-columns(@index, @class) when (@index = 0) { - .@{col-prefix-cls}-push-@{index} { - // reset property in RTL direction - &.@{col-prefix-cls}-rtl { - right: auto; - } - } - - .@{col-prefix-cls}-pull-@{index} { - &.@{col-prefix-cls}-rtl { - left: auto; - } - } - - .@{col-prefix-cls}@{class}-push-@{index} { - &.@{col-prefix-cls}-rtl { - right: auto; - } - } - - .@{col-prefix-cls}@{class}-pull-@{index} { - &.@{col-prefix-cls}-rtl { - left: auto; - } - } - - .@{col-prefix-cls}@{class}-offset-@{index} { - &.@{col-prefix-cls}-rtl { - margin-right: 0; - } - } -} diff --git a/components/list/style/index.tsx b/components/list/style/index.tsx index 294babf36f..86a219e854 100644 --- a/components/list/style/index.tsx +++ b/components/list/style/index.tsx @@ -5,4 +5,3 @@ import './index.less'; import '../../empty/style'; import '../../spin/style'; import '../../pagination/style'; -import '../../grid/style'; diff --git a/components/row/style/index.ts b/components/row/style/index.ts new file mode 100644 index 0000000000..a491223046 --- /dev/null +++ b/components/row/style/index.ts @@ -0,0 +1,4 @@ +// Compatible for babel-plugin-import + +/* istanbul ignore next */ +export default {}; diff --git a/components/row/style/index.tsx b/components/row/style/index.tsx deleted file mode 100644 index 2127e6804d..0000000000 --- a/components/row/style/index.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import '../../style/index.less'; - -// style dependencies -// deps-lint-skip: grid -import '../../grid/style'; diff --git a/components/style.ts b/components/style.ts index ca73d113f7..6bfc80e3c5 100644 --- a/components/style.ts +++ b/components/style.ts @@ -2,7 +2,7 @@ // import './icon/style'; import './radio/style'; import './checkbox/style'; -import './grid/style'; +// import './grid/style'; import './tag/style'; import './rate/style'; import './pagination/style';