feat(grid): Row Props.gutterTS类型补充lg,xl,xxl

packages/products/tdesign-react/src/grid/defaultProps.ts

@@ -0,0 +1,9 @@
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdRowProps, TdColProps } from './type';
+
+export const rowDefaultProps: TdRowProps = { align: 'top', gutter: 0, justify: 'start', tag: 'div' };
+
+export const colDefaultProps: TdColProps = { offset: 0, order: 0, pull: 0, push: 0, tag: 'div' };

packages/products/tdesign-react/src/grid/grid.en-US.md

@@ -1,16 +1,15 @@
 :: BASE_DOC ::
 
 ## API
-
 ### Row Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，Typescript：`React.CSSProperties` | N
-align | String | top | options：start/end/center/stretch/baseline/top/middle/bottom | N
-gutter | Number / Object / Array | 0 | Typescript：`number \| GutterObject \| Array<GutterObject \| number>` `interface GutterObject { xs: number; sm: number; md: number } `。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/grid/type.ts) | N
-justify | String | start | options：start/end/center/space-around/space-between | N
+align | String | top | options: start/end/center/stretch/baseline/top/middle/bottom | N
+gutter | Number / Object / Array | 0 | Typescript：`number \| GutterObject \| Array<GutterObject \| number>` `interface GutterObject { xs: number; sm: number; md: number; lg: number, xl: number; xxl: number; } `。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/grid/type.ts) | N
+justify | String | start | options: start/end/center/space-around/space-between | N
 tag | String | div | \- | N
 
 ### Col Props

packages/products/tdesign-react/src/grid/grid.md

@@ -1,15 +1,14 @@
 :: BASE_DOC ::
 
 ## API
-
 ### Row Props
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 align | String | top | 纵向对齐方式，CSS 属性 `align-items` 值。其中 `top` 和 `start` 等效；`middle` 和 `center` 等效；`bottom` 和 `end` 等效。可选项：start/end/center/stretch/baseline/top/middle/bottom | N
-gutter | Number / Object / Array | 0 | 栅格间隔，示例：`{ xs: 8, sm: 16, md: 24}`。当数据类型为 Number 和 Object 时，用于指定横向间隔。当数据类型为数组时，第一个参数为横向间隔，第二个参数为纵向间隔， [水平间隔, 垂直间隔]。TS 类型：`number \| GutterObject \| Array<GutterObject \| number>` `interface GutterObject { xs: number; sm: number; md: number } `。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/grid/type.ts) | N
+gutter | Number / Object / Array | 0 | 栅格间隔，示例：`{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 40 }`。当数据类型为 Number 和 Object 时，用于指定横向间隔。当数据类型为数组时，第一个参数为横向间隔，第二个参数为纵向间隔， [水平间隔, 垂直间隔]。TS 类型：`number \| GutterObject \| Array<GutterObject \| number>` `interface GutterObject { xs: number; sm: number; md: number; lg: number, xl: number; xxl: number; } `。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/grid/type.ts) | N
 justify | String | start | flex 布局下的水平排列方式。可选项：start/end/center/space-around/space-between | N
 tag | String | div | 自定义元素标签 | N
 

packages/products/tdesign-react/src/grid/type.ts

@@ -0,0 +1,105 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+export interface TdRowProps {
+ /**
+ * 纵向对齐方式，CSS 属性 `align-items` 值。其中 `top` 和 `start` 等效；`middle` 和 `center` 等效；`bottom` 和 `end` 等效
+ * @default top
+ */
+ align?: 'start' | 'end' | 'center' | 'stretch' | 'baseline' | 'top' | 'middle' | 'bottom';
+ /**
+ * 栅格间隔，示例：`{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 40 }`。当数据类型为 Number 和 Object 时，用于指定横向间隔。当数据类型为数组时，第一个参数为横向间隔，第二个参数为纵向间隔， [水平间隔, 垂直间隔]
+ * @default 0
+ */
+ gutter?: number | GutterObject | Array<GutterObject | number>;
+ /**
+ * flex 布局下的水平排列方式
+ * @default start
+ */
+ justify?: 'start' | 'end' | 'center' | 'space-around' | 'space-between';
+ /**
+ * 自定义元素标签
+ * @default div
+ */
+ tag?: string;
+}
+
+export interface TdColProps {
+ /**
+ * flex 布局填充。CSS 属性 flex 值。示例：2 / 3 / '100px' / 'auto' / '1 1 200px'
+ */
+ flex?: string | number;
+ /**
+ * ≥1200px 响应式栅格，可为栅格数或一个包含其他属性的对象（小尺寸电脑）
+ */
+ lg?: number | BaseColProps;
+ /**
+ * ≥992px 响应式栅格，可为栅格数或一个包含其他属性的对象（超小尺寸电脑）
+ */
+ md?: number | BaseColProps;
+ /**
+ * 栅格左侧的间隔格数，间隔内不可以有栅格
+ * @default 0
+ */
+ offset?: number;
+ /**
+ * 栅格顺序，flex 布局模式下有效
+ * @default 0
+ */
+ order?: number;
+ /**
+ * 栅格向左移动格数
+ * @default 0
+ */
+ pull?: number;
+ /**
+ * 栅格向右移动格数
+ * @default 0
+ */
+ push?: number;
+ /**
+ * ≥768px 响应式栅格，可为栅格数或一个包含其他属性的对象（平板）
+ */
+ sm?: number | BaseColProps;
+ /**
+ * 栅格占位格数，为 0 时相当于 display: none
+ */
+ span?: number;
+ /**
+ * 自定义元素标签
+ * @default div
+ */
+ tag?: string;
+ /**
+ * ≥1400px 响应式栅格，可为栅格数或一个包含其他属性的对象（中尺寸电脑）
+ */
+ xl?: number | BaseColProps;
+ /**
+ * <768px 响应式栅格，可为栅格数或一个包含其他属性的对象（手机）
+ */
+ xs?: number | BaseColProps;
+ /**
+ * ≥1880px 响应式栅格，可为栅格数或一个包含其他属性的对象（大尺寸电脑）
+ */
+ xxl?: number | BaseColProps;
+}
+
+export interface GutterObject {
+ xs: number;
+ sm: number;
+ md: number;
+ lg: number;
+ xl: number;
+ xxl: number;
+}
+
+export interface BaseColProps {
+ offset: number;
+ order: number;
+ pull: number;
+ push: number;
+ span: number;
+}

packages/products/tdesign-vue-next/src/grid/col-props.ts

@@ -0,0 +1,68 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdColProps } from '../grid/type';
+import { PropType } from 'vue';
+
+export default {
+ /** flex 布局填充。CSS 属性 flex 值。示例：2 / 3 / '100px' / 'auto' / '1 1 200px' */
+ flex: {
+ type: [String, Number] as PropType<TdColProps['flex']>,
+ },
+ /** ≥1200px 响应式栅格，可为栅格数或一个包含其他属性的对象（小尺寸电脑） */
+ lg: {
+ type: [Number, Object] as PropType<TdColProps['lg']>,
+ },
+ /** ≥992px 响应式栅格，可为栅格数或一个包含其他属性的对象（超小尺寸电脑） */
+ md: {
+ type: [Number, Object] as PropType<TdColProps['md']>,
+ },
+ /** 栅格左侧的间隔格数，间隔内不可以有栅格 */
+ offset: {
+ type: Number,
+ default: 0,
+ },
+ /** 栅格顺序，flex 布局模式下有效 */
+ order: {
+ type: Number,
+ default: 0,
+ },
+ /** 栅格向左移动格数 */
+ pull: {
+ type: Number,
+ default: 0,
+ },
+ /** 栅格向右移动格数 */
+ push: {
+ type: Number,
+ default: 0,
+ },
+ /** ≥768px 响应式栅格，可为栅格数或一个包含其他属性的对象（平板） */
+ sm: {
+ type: [Number, Object] as PropType<TdColProps['sm']>,
+ },
+ /** 栅格占位格数，为 0 时相当于 display: none */
+ span: {
+ type: Number,
+ },
+ /** 自定义元素标签 */
+ tag: {
+ type: String,
+ default: 'div',
+ },
+ /** ≥1400px 响应式栅格，可为栅格数或一个包含其他属性的对象（中尺寸电脑） */
+ xl: {
+ type: [Number, Object] as PropType<TdColProps['xl']>,
+ },
+ /** <768px 响应式栅格，可为栅格数或一个包含其他属性的对象（手机） */
+ xs: {
+ type: [Number, Object] as PropType<TdColProps['xs']>,
+ },
+ /** ≥1880px 响应式栅格，可为栅格数或一个包含其他属性的对象（大尺寸电脑） */
+ xxl: {
+ type: [Number, Object] as PropType<TdColProps['xxl']>,
+ },
+};

packages/products/tdesign-vue-next/src/grid/grid.en-US.md

@@ -0,0 +1,29 @@
+:: BASE_DOC ::
+
+## API
+### Row Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+align | String | top | options: start/end/center/stretch/baseline/top/middle/bottom | N
+gutter | Number / Object / Array | 0 | Typescript：`number \| GutterObject \| Array<GutterObject \| number>` `interface GutterObject { xs: number; sm: number; md: number; lg: number, xl: number; xxl: number; } `。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/grid/type.ts) | N
+justify | String | start | options: start/end/center/space-around/space-between | N
+tag | String | div | \- | N
+
+### Col Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+flex | String / Number | - | \- | N
+lg | Number / Object | - | Typescript：`number \| BaseColProps` | N
+md | Number / Object | - | Typescript：`number \| BaseColProps` | N
+offset | Number | 0 | \- | N
+order | Number | 0 | \- | N
+pull | Number | 0 | \- | N
+push | Number | 0 | \- | N
+sm | Number / Object | - | Typescript：`number \| BaseColProps` | N
+span | Number | - | \- | N
+tag | String | div | \- | N
+xl | Number / Object | - | Typescript：`number \| BaseColProps` | N
+xs | Number / Object | - | Typescript：`number \| BaseColProps` `interface BaseColProps { offset: number; order: number; pull: number; push: number; span: number }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/grid/type.ts) | N
+xxl | Number / Object | - | Typescript：`number \| BaseColProps` | N

packages/products/tdesign-vue-next/src/grid/grid.md

@@ -0,0 +1,29 @@
+:: BASE_DOC ::
+
+## API
+### Row Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+align | String | top | 纵向对齐方式，CSS 属性 `align-items` 值。其中 `top` 和 `start` 等效；`middle` 和 `center` 等效；`bottom` 和 `end` 等效。可选项：start/end/center/stretch/baseline/top/middle/bottom | N
+gutter | Number / Object / Array | 0 | 栅格间隔，示例：`{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 40 }`。当数据类型为 Number 和 Object 时，用于指定横向间隔。当数据类型为数组时，第一个参数为横向间隔，第二个参数为纵向间隔， [水平间隔, 垂直间隔]。TS 类型：`number \| GutterObject \| Array<GutterObject \| number>` `interface GutterObject { xs: number; sm: number; md: number; lg: number, xl: number; xxl: number; } `。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/grid/type.ts) | N
+justify | String | start | flex 布局下的水平排列方式。可选项：start/end/center/space-around/space-between | N
+tag | String | div | 自定义元素标签 | N
+
+### Col Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+flex | String / Number | - | flex 布局填充。CSS 属性 flex 值。示例：2 / 3 / '100px' / 'auto' / '1 1 200px' | N
+lg | Number / Object | - | ≥1200px 响应式栅格，可为栅格数或一个包含其他属性的对象（小尺寸电脑）。TS 类型：`number \| BaseColProps` | N
+md | Number / Object | - | ≥992px 响应式栅格，可为栅格数或一个包含其他属性的对象（超小尺寸电脑）。TS 类型：`number \| BaseColProps` | N
+offset | Number | 0 | 栅格左侧的间隔格数，间隔内不可以有栅格 | N
+order | Number | 0 | 栅格顺序，flex 布局模式下有效 | N
+pull | Number | 0 | 栅格向左移动格数 | N
+push | Number | 0 | 栅格向右移动格数 | N
+sm | Number / Object | - | ≥768px 响应式栅格，可为栅格数或一个包含其他属性的对象（平板）。TS 类型：`number \| BaseColProps` | N
+span | Number | - | 栅格占位格数，为 0 时相当于 display: none | N
+tag | String | div | 自定义元素标签 | N
+xl | Number / Object | - | ≥1400px 响应式栅格，可为栅格数或一个包含其他属性的对象（中尺寸电脑）。TS 类型：`number \| BaseColProps` | N
+xs | Number / Object | - | <768px 响应式栅格，可为栅格数或一个包含其他属性的对象（手机）。TS 类型：`number \| BaseColProps` `interface BaseColProps { offset: number; order: number; pull: number; push: number; span: number }`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/grid/type.ts) | N
+xxl | Number / Object | - | ≥1880px 响应式栅格，可为栅格数或一个包含其他属性的对象（大尺寸电脑）。TS 类型：`number \| BaseColProps` | N

packages/products/tdesign-vue-next/src/grid/row-props.ts

@@ -0,0 +1,39 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdRowProps } from '../grid/type';
+import { PropType } from 'vue';
+
+export default {
+ /** 纵向对齐方式，CSS 属性 `align-items` 值。其中 `top` 和 `start` 等效；`middle` 和 `center` 等效；`bottom` 和 `end` 等效 */
+ align: {
+ type: String as PropType<TdRowProps['align']>,
+ default: 'top' as TdRowProps['align'],
+ validator(val: TdRowProps['align']): boolean {
+ if (!val) return true;
+ return ['start', 'end', 'center', 'stretch', 'baseline', 'top', 'middle', 'bottom'].includes(val);
+ },
+ },
+ /** 栅格间隔，示例：`{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 40 }`。当数据类型为 Number 和 Object 时，用于指定横向间隔。当数据类型为数组时，第一个参数为横向间隔，第二个参数为纵向间隔， [水平间隔, 垂直间隔] */
+ gutter: {
+ type: [Number, Object, Array] as PropType<TdRowProps['gutter']>,
+ default: 0 as TdRowProps['gutter'],
+ },
+ /** flex 布局下的水平排列方式 */
+ justify: {
+ type: String as PropType<TdRowProps['justify']>,
+ default: 'start' as TdRowProps['justify'],
+ validator(val: TdRowProps['justify']): boolean {
+ if (!val) return true;
+ return ['start', 'end', 'center', 'space-around', 'space-between'].includes(val);
+ },
+ },
+ /** 自定义元素标签 */
+ tag: {
+ type: String,
+ default: 'div',
+ },
+};