feat(grid): grid complete 🎉

site/sidebar.config.ts

@@ -72,6 +72,12 @@ export default [
         path: '/components/space',
         component: () => import('tdesign-web-components/space/README.md'),
       },
+      {
+        title: 'Grid 栅格',
+        name: 'grid',
+        path: '/components/grid',
+        component: () => import('tdesign-web-components/grid/README.md'),
+      },
     ],
     tag: '',
   },

src/_util/dom.ts

@@ -157,3 +157,21 @@
   }
   return matched;
 }
+
+// DOM properties that should NOT have "px" added when numeric
+export const IS_NON_DIMENSIONAL = /acit|ex(?:s|g|n|p|$)|rph|ows|mnc|ntw|ine[ch]|zoo|^ord/i;
+
+export function setStyle(style: CSSStyleDeclaration, key: string, value: string | number | null) {
+  if (key[0] === '-') {
+    style.setProperty(key, value == null ? '' : value.toString());
+  } else if (value == null) {
+    // eslint-disable-next-line no-param-reassign
+    (style as any)[key] = '';
+  } else if (typeof value !== 'number' || IS_NON_DIMENSIONAL.test(key)) {
+    // eslint-disable-next-line no-param-reassign
+    (style as any)[key] = value.toString();
+  } else {
+    // eslint-disable-next-line no-param-reassign
+    (style as any)[key] = `${value}px`;
+  }
+}

src/avatar/README.md

@@ -50,12 +50,12 @@ spline: base
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 alt | String | - | 头像替换文本，仅当图片加载失败时有效 | N
-content | TNode | - | 子元素内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N
+content | TNode | - | 子元素内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/common.ts) | N
 hideOnLoadFailed | Boolean | false | 加载失败时隐藏图片 | N
-icon | TElement | - | 图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N
+icon | TElement | - | 图标。TS 类型：`TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/common.ts) | N
 image | String | - | 图片地址 | N
-imageProps | Object | - | 透传至 Image 组件。TS 类型：`ImageProps`，[Image API Documents](./image?tab=api)。[详细类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/avatar/type.ts) | N
-shape | String | circle | 形状。可选项：circle/round。TS 类型：`ShapeEnum ` `type ShapeEnum = 'circle' \| 'round'`。[详细类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/avatar/type.ts) | N
+imageProps | Object | - | 透传至 Image 组件。TS 类型：`ImageProps`，[Image API Documents](./image?tab=api)。[详细类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/avatar/type.ts) | N
+shape | String | circle | 形状。可选项：circle/round。TS 类型：`ShapeEnum ` `type ShapeEnum = 'circle' \| 'round'`。[详细类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/avatar/type.ts) | N
 size | String | - | 尺寸，示例值：small/medium/large/24px/38px 等。优先级高于 AvatarGroup.size 。Avatar 单独存在时，默认值为 medium。如果父组件存在 AvatarGroup，默认值便由 AvatarGroup.size 决定 | N
 onError | Function |  | TS 类型：`(context: { e: ImageEvent }) => void`<br/>图片加载失败时触发 | N
 
@@ -65,8 +65,8 @@ onError | Function |  | TS 类型：`(context: { e: ImageEvent }) => void`<br/>
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
-cascading | String | 'right-up' | 图片之间的层叠关系，可选值：左侧图片在上和右侧图片在上。可选项：left-up/right-up。TS 类型：`CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[详细类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/avatar/type.ts) | N
-collapseAvatar | TNode | - | 头像数量超出时，会出现一个头像折叠元素。该元素内容可自定义。默认为 `+N`。示例：`+5`，`...`, `更多`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N
+cascading | String | 'right-up' | 图片之间的层叠关系，可选值：左侧图片在上和右侧图片在上。可选项：left-up/right-up。TS 类型：`CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[详细类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/avatar/type.ts) | N
+collapseAvatar | TNode | - | 头像数量超出时，会出现一个头像折叠元素。该元素内容可自定义。默认为 `+N`。示例：`+5`，`...`, `更多`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/common.ts) | N
 max | Number | - | 能够同时显示的最多头像数量 | N
-popupProps | Object | - | 头像右上角提示信息。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/avatar/type.ts) | N
+popupProps | Object | - | 头像右上角提示信息。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/avatar/type.ts) | N
 size | String | - | 尺寸，示例值：small/medium/large/24px/38px 等。优先级低于 Avatar.size | N

src/avatar/avatar.en-US.md

@@ -9,13 +9,13 @@ name | type | default | description | required
 className | String | - | 类名 | N
 style | Object | - | 样式，Typescript：`React.CSSProperties` | N
 alt | String | - | show it when url is not valid | N
-children | TNode | - | children, same as `content`。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N
-content | TNode | - | content slot or props.content。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N
+children | TNode | - | children, same as `content`。Typescript：`string \| TNode`。[see more ts definition](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/common.ts) | N
+content | TNode | - | content slot or props.content。Typescript：`string \| TNode`。[see more ts definition](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/common.ts) | N
 hideOnLoadFailed | Boolean | false | hide image when loading image failed | N
-icon | TElement | - | use icon to fill。Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/common.ts) | N
+icon | TElement | - | use icon to fill。Typescript：`TNode`。[see more ts definition](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/common.ts) | N
 image | String | - | images url | N
-imageProps | Object | - | Typescript：`ImageProps`，[Image API Documents](./image?tab=api)。[see more ts definition](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/avatar/type.ts) | N
-shape | String | circle | shape。options：circle/round。Typescript：`ShapeEnum ` `type ShapeEnum = 'circle' \| 'round'`。[see more ts definition](https://github.com/Tencent/omi/blob/master/tdesign/desktop/src/avatar/type.ts) | N
+imageProps | Object | - | Typescript：`ImageProps`，[Image API Documents](./image?tab=api)。[see more ts definition](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/avatar/type.ts) | N
+shape | String | circle | shape。options：circle/round。Typescript：`ShapeEnum ` `type ShapeEnum = 'circle' \| 'round'`。[see more ts definition](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/avatar/type.ts) | N
 size | String | - | size | N
 onError | Function |  | Typescript：`(context: { e: ImageEvent }) => void`<br/>trigger on image load failed | N
 
@@ -25,8 +25,8 @@ name | type | default | description | required
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，Typescript：`React.CSSProperties` | N
-cascading | String | 'right-up' | multiple images cascading。options：left-up/right-up。Typescript：`CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/avatar/type.ts) | N
-collapseAvatar | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+cascading | String | 'right-up' | multiple images cascading。options：left-up/right-up。Typescript：`CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[see more ts definition](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/avatar/type.ts) | N
+collapseAvatar | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/common.ts) | N
 max | Number | - | \- | N
-popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/avatar/type.ts) | N
+popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/avatar/type.ts) | N
 size | String | - | size | N

src/avatar/avatar.tsx

@@ -83,7 +83,6 @@ export default class Avatar extends Component<AvatarProps> {
     const { SIZE } = getCommonClassName();
     const { componentName, isImgExist, groupSize, avatarRef, avatarChildrenRef, handleImgLoadError } = this;
     const { alt, icon, image, shape, size: avatarSize, children, content, style, imageProps, ...avatarProps } = props;
-    // console.log('this.injection.groupSize: ', this.injection.groupSize)
     const size = avatarSize === undefined ? groupSize : avatarSize;
 
     const numSizeStyle =
@@ -128,7 +127,7 @@ export default class Avatar extends Component<AvatarProps> {
       );
     }
     return (
-      <div ref={avatarRef} class={avatarClass} style={{ ...numSizeStyle, ...style }} {...avatarProps}>
+      <div class={avatarClass} style={{ ...numSizeStyle, ...style }} {...avatarProps} ref={avatarRef}>
         {renderChildren}
       </div>
     );

src/button/README.md

@@ -62,14 +62,14 @@ Block 按钮在宽度上充满其所在的父容器（无 padding 和 margin 值
 className | String | - | 类名 | N
 style | Object | - | 样式 | N
 block | Boolean | false | 是否为块级元素 | N
-children | TNode | - | 按钮内容，TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+children | TNode | - | 按钮内容，TS 类型：`string \| TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/common.ts) | N
 disabled | Boolean | false | 禁用状态 | N
 ghost | Boolean | false | 是否为幽灵按钮（镂空按钮） | N
 href | String | - | 跳转地址。href 存在时，按钮标签默认使用 `<a>` 渲染；如果指定了 `tag` 则使用指定的标签渲染 | N
-icon | TElement | - | 按钮内部图标，可完全自定义。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+icon | TElement | - | 按钮内部图标，可完全自定义。TS 类型：`TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/common.ts) | N
 loading | Boolean | false | 是否显示为加载状态 | N
 shape | String | rectangle | 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形。可选项：rectangle/square/round/circle | N
-size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/common.ts) | N
 tag | String | - | 渲染按钮的 HTML 标签，默认使用标签 `<button>` 渲染，可以自定义为 `<a>` `<div>` 等。透传全部 HTML 属性，如：`href/target/data-*` 等。⚠️ 禁用按钮 `<button disabled>`无法显示 Popup 浮层信息，可通过修改 `tag=div` 解决这个问题。可选项：button/a/div | N
 theme | String | - | 组件风格，依次为默认色、品牌色、危险色、警告色、成功色。可选项：default/primary/danger/warning/success | N
 type | String | button | 按钮类型。可选项：submit/reset/button | N

src/grid/README.md

@@ -0,0 +1,75 @@
+---
+title: Grid 栅格
+description: 栅格是以规则的网格阵列来指导和规范网页中的版面布局以及信息分布，提高界面内布局的一致性，节约成本。
+isComponent: true
+usage: { title: '', description: '' }
+spline: layout
+---
+
+### 基本使用
+
+{{ base }}
+
+### 区块间隔
+
+{{ gutter }}
+
+### 左右偏移
+
+{{ offset }}
+
+### 排序
+
+{{ sort }}
+
+### 次序
+
+{{ order }}
+
+### 排版
+
+{{ halign }}
+
+### 对齐
+
+{{ valign }}
+
+### flex
+
+{{ flex }}
+
+### 响应式布局
+
+{{ responsive }}
+
+## 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, 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/TDesignOteam/tdesign-web-components/tree/main/src/grid/type.ts) | N
+justify | String | start | flex 布局下的水平排列方式。可选项：start/end/center/space-around/space-between | N
+tag | String | div | 自定义元素标签 | N
+
+### Col Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+content | TNode | - | 内容 | N
+className | String | - | 类名 | N
+style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
+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
+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/TDesignOteam/tdesign-web-components/tree/main/src/grid/type.ts) | N
+xxl | Number / Object | - | ≥1880px 响应式栅格，可为栅格数或一个包含其他属性的对象（大尺寸电脑）。TS 类型：`number \| BaseColProps` | N

src/grid/_example/base.tsx

@@ -0,0 +1,29 @@
+import 'tdesign-web-components/grid';
+
+import { Component } from 'omi';
+import css from 'tdesign-web-components/grid/_example/common.css';
+
+const demoCols = [
+  Array(12).fill(1),
+  Array(6).fill(2),
+  Array(4).fill(3),
+  Array(3).fill(4),
+  Array(2).fill(6),
+  Array(1).fill(12),
+];
+
+export default class BasicGrid extends Component {
+  render() {
+    return (
+      <>
+        {demoCols.map((cols, i) => (
+          <t-row key={i} css={css}>
+            {cols.map((col, j) => (
+              <t-col span={col} key={j} content={<div>{col}</div>}></t-col>
+            ))}
+          </t-row>
+        ))}
+      </>
+    );
+  }
+}

src/grid/_example/common.css

@@ -0,0 +1,19 @@
+t-col-light-dom > div {
+  min-height: 40px;
+  margin-top: 8px;
+  margin-bottom: 8px;
+  background: var(--td-brand-color-6);
+  color: #fff;
+  text-align: center;
+  line-height: 40px;
+}
+
+t-col-light-dom:nth-of-type(2n) > div {
+  min-height: 40px;
+  margin-top: 8px;
+  margin-bottom: 8px;
+  color: #fff;
+  text-align: center;
+  line-height: 40px;
+  background: var(--td-brand-color-4);
+}

src/grid/_example/flex.jsx

@@ -0,0 +1,45 @@
+import 'tdesign-web-components/grid';
+
+import css from 'tdesign-web-components/grid/_example/common.css';
+
+export default function OrderGrid() {
+  return (
+    <>
+      <t-row css={css}>
+        <t-col flex={2}>
+          <div>2 / 5</div>
+        </t-col>
+        <t-col flex={3}>
+          <div>3 / 5</div>
+        </t-col>
+      </t-row>
+
+      <t-row css={css}>
+        <t-col flex="100px">
+          <div>100px</div>
+        </t-col>
+        <t-col flex="auto">
+          <div>Fill Rest</div>
+        </t-col>
+      </t-row>
+
+      <t-row css={css}>
+        <t-col flex="1 1 200px">
+          <div>1 1 200px</div>
+        </t-col>
+        <t-col flex="0 1 300px">
+          <div>0 1 300px</div>
+        </t-col>
+      </t-row>
+
+      <t-row css={css}>
+        <t-col flex="none">
+          <div style={{ padding: '0 16px' }}>none</div>
+        </t-col>
+        <t-col flex="auto">
+          <div>auto with no-wrap</div>
+        </t-col>
+      </t-row>
+    </>
+  );
+}

src/grid/_example/gutter.jsx

@@ -0,0 +1,25 @@
+import 'tdesign-web-components/grid';
+
+import css from 'tdesign-web-components/grid/_example/common.css';
+
+export default function SpaceGrid() {
+  const colRender = (num, span = 3) =>
+    Array(num)
+      .fill(3)
+      .map(() => <t-col span={span} content={<div>col-3</div>}></t-col>);
+  return (
+    <>
+      <t-row css={css} gutter={16}>
+        {colRender(4)}
+      </t-row>
+
+      <t-row css={css} gutter={{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 40 }}>
+        {colRender(4)}
+      </t-row>
+
+      <t-row css={css} gutter={[16, 24]}>
+        {colRender(8)}
+      </t-row>
+    </>
+  );
+}