Merge pull request #1359 from Micro-sun/develop

 feat: add align for grid

Author: chaishi

examples/grid/grid.en-US.md

@@ -1,12 +1,11 @@
 :: BASE_DOC ::
 
 ## API
-
 ### Row Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-align | String | top | options：top/middle/bottom | 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-vue/tree/develop/src/grid/type.ts) | N
 justify | String | start | options：start/end/center/space-around/space-between | N
 tag | String | div | \- | N

examples/grid/grid.md

@@ -5,7 +5,7 @@
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
-align | String | top | 纵向对齐方式。可选项：top/middle/bottom | 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-vue/tree/develop/src/grid/type.ts) | N
 justify | String | start | flex 布局下的水平排列方式。可选项：start/end/center/space-around/space-between | N
 tag | String | div | 自定义元素标签 | N

src/_common

@@ -2,7 +2,6 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-11-19 10:44:26
  * */
 
 import { TdColProps } from '../grid/type';
@@ -36,7 +35,7 @@ export default {
     type: Number,
     default: 0,
   },
-  /** 栅格向左移动格数 */
+  /** 栅格向右移动格数 */
   push: {
     type: Number,
     default: 0,

src/grid/col-props.ts

@@ -2,19 +2,19 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-11-19 10:44:26
  * */
 
 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 {
-      return ['top', 'middle', 'bottom'].includes(val);
+      if (!val) return true;
+      return ['start', 'end', 'center', 'stretch', 'baseline', 'top', 'middle', 'bottom'].includes(val);
     },
   },
   /** 栅格间隔，示例：`{ xs: 8, sm: 16, md: 24}`。当数据类型为 Number 和 Object 时，用于指定横向间隔。当数据类型为数组时，第一个参数为横向间隔，第二个参数为纵向间隔， [水平间隔, 垂直间隔] */
@@ -27,6 +27,7 @@ export default {
     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);
     },
   },

src/grid/row-props.ts

@@ -44,7 +44,7 @@ export default mixins(classPrefixMixins).extend({
         this.componentName,
         {
           [`${this.componentName}--${justify}`]: justify,
-          [`${this.componentName}--${align}`]: align,
+          [`${this.componentName}--align-${align}`]: align,
         },
       ];
     },

src/grid/row.tsx

@@ -2,20 +2,19 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-11-19 10:44:26
  * */
 
 export interface TdRowProps {
   /**
-   * 纵向对齐方式
+   * 纵向对齐方式，CSS 属性 `align-items` 值。其中 `top` 和 `start` 等效；`middle` 和 `center` 等效；`bottom` 和 `end` 等效
    * @default top
    */
-  align?: 'top' | 'middle' | 'bottom';
+  align?: 'start' | 'end' | 'center' | 'stretch' | 'baseline' | 'top' | 'middle' | 'bottom';
   /**
    * 栅格间隔，示例：`{ xs: 8, sm: 16, md: 24}`。当数据类型为 Number 和 Object 时，用于指定横向间隔。当数据类型为数组时，第一个参数为横向间隔，第二个参数为纵向间隔， [水平间隔, 垂直间隔]
    * @default 0
    */
-  gutter?: number |  GutterObject | Array<GutterObject | number>;
+  gutter?: number | GutterObject | Array<GutterObject | number>;
   /**
    * flex 布局下的水平排列方式
    * @default start
@@ -26,7 +25,7 @@ export interface TdRowProps {
    * @default div
    */
   tag?: string;
-};
+}
 
 export interface TdColProps {
   /**
@@ -57,7 +56,7 @@ export interface TdColProps {
    */
   pull?: number;
   /**
-   * 栅格向左移动格数
+   * 栅格向右移动格数
    * @default 0
    */
   push?: number;
@@ -87,8 +86,18 @@ export interface TdColProps {
    * ≥1880px 响应式栅格，可为栅格数或一个包含其他属性的对象（大尺寸电脑）
    */
   xxl?: number | BaseColProps;
-};
+}
 
-export interface GutterObject { xs: number; sm: number; md: number } ;
+export interface GutterObject {
+  xs: number;
+  sm: number;
+  md: number;
+}
 
-export interface BaseColProps { offset: number; order: number; pull: number; push: number; span: number };
+export interface BaseColProps {
+  offset: number;
+  order: number;
+  pull: number;
+  push: number;
+  span: number;
+}