feat(module:grid): support standalone component (#8250)

NG-ZORRO · Dec 4, 2023 · 208652c · 208652c
1 parent a91cac7
commit 208652c
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 57 deletions.
diff --git a/components/grid/col.directive.ts b/components/grid/col.directive.ts
@@ -38,7 +38,8 @@ export interface EmbeddedProperty {
   exportAs: 'nzCol',
   host: {
     '[style.flex]': 'hostFlexStyle'
-  }
+  },
+  standalone: true
 })
 export class NzColDirective implements OnInit, OnChanges, AfterViewInit, OnDestroy {
   private classMap: { [key: string]: boolean } = {};

diff --git a/components/grid/doc/index.en-US.md b/components/grid/doc/index.en-US.md
@@ -84,29 +84,29 @@ import { NzGridModule } from 'ng-zorro-antd/grid';
 
 ## API
 
-### [nz-row]
-
-| Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
-| `[nzAlign]` | the vertical alignment | `'top'\|'middle'\|'bottom'` | - |
-| `[nzGutter]` | 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]` | `string\|number\|object\|[number, number]\|[object, object]` | `0` |
-| `[nzJustify]` | horizontal arrangement | `'start'\|'end'\|'center'\|'space-around'\|'space-between'` | - |
-
-### [nz-col]
-
-| Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
-| `[nzFlex]` | flex layout style | `string \| number` | - |
-| `[nzOffset]` | the number of cells to offset Col from the left | `number` | `0` |
-| `[nzOrder]` | raster order | `number` | `0` |
-| `[nzPull]` | the number of cells that raster is moved to the left | `number` | `0` |
-| `[nzPush]` | the number of cells that raster is moved to the right | `number` | `0` |
-| `[nzSpan]` | raster number of cells to occupy, 0 corresponds to `display: none` | `number` | - |
-| `[nzXs]` | `<576px` and also default setting, could be a `span` value or an object containing above props | `number \| object` | - |
-| `[nzSm]` | `≥576px`, could be a `span` value or an object containing above props | `number \| object` | - |
-| `[nzMd]` | `≥768px`, could be a `span` value or an object containing above props | `number \| object` | - |
-| `[nzLg]` | `≥992px`, could be a `span` value or an object containing above props | `number \| object` | - |
-| `[nzXl]` | `≥1200px`, could be a `span` value or an object containing above props | `number \| object` | - |
-| `[nzXXl]` | `≥1600px`, could be a `span` value or an object containing above props | `number \| object` | - |
+### [nz-row]:standalone
+
+| Property      | Description                                                                                                                                                                                       | Type                                                         | Default |
+| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ | ------- |
+| `[nzAlign]`   | the vertical alignment                                                                                                                                                                            | `'top'\|'middle'\|'bottom'`                                  | -       |
+| `[nzGutter]`  | 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]` | `string\|number\|object\|[number, number]\|[object, object]` | `0`     |
+| `[nzJustify]` | horizontal arrangement                                                                                                                                                                            | `'start'\|'end'\|'center'\|'space-around'\|'space-between'`  | -       |
+
+### [nz-col]:standalone
+
+| Property     | Description                                                                                    | Type               | Default |
+| ------------ | ---------------------------------------------------------------------------------------------- | ------------------ | ------- |
+| `[nzFlex]`   | flex layout style                                                                              | `string \| number` | -       |
+| `[nzOffset]` | the number of cells to offset Col from the left                                                | `number`           | `0`     |
+| `[nzOrder]`  | raster order                                                                                   | `number`           | `0`     |
+| `[nzPull]`   | the number of cells that raster is moved to the left                                           | `number`           | `0`     |
+| `[nzPush]`   | the number of cells that raster is moved to the right                                          | `number`           | `0`     |
+| `[nzSpan]`   | raster number of cells to occupy, 0 corresponds to `display: none`                             | `number`           | -       |
+| `[nzXs]`     | `<576px` and also default setting, could be a `span` value or an object containing above props | `number \| object` | -       |
+| `[nzSm]`     | `≥576px`, could be a `span` value or an object containing above props                          | `number \| object` | -       |
+| `[nzMd]`     | `≥768px`, could be a `span` value or an object containing above props                          | `number \| object` | -       |
+| `[nzLg]`     | `≥992px`, could be a `span` value or an object containing above props                          | `number \| object` | -       |
+| `[nzXl]`     | `≥1200px`, could be a `span` value or an object containing above props                         | `number \| object` | -       |
+| `[nzXXl]`    | `≥1600px`, could be a `span` value or an object containing above props                         | `number \| object` | -       |
 
 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/doc/index.zh-CN.md b/components/grid/doc/index.zh-CN.md
@@ -83,29 +83,29 @@ import { NzGridModule } from 'ng-zorro-antd/grid';
 
 ## API
 
-### [nz-row]
-
-| 成员 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| `[nzAlign]` | 垂直对齐方式 | `'top' \| 'middle' \| 'bottom'` | - |
-| `[nzGutter]` | 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 `{ xs: 8, sm: 16, md: 24}`。或者使用数组形式同时设置 `[水平间距, 垂直间距]`。 | `string\|number\|object\|[number, number]\|[object, object]` | - |
-| `[nzJustify]` | 水平排列方式 | `'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between'` | - |
-
-### [nz-col]
-
-| 成员 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| `[nzFlex]` | flex 布局属性 | `string \| number` | - |
-| `[nzOffset]` | 栅格左侧的间隔格数，间隔内不可以有栅格 | `number` | - |
-| `[nzOrder]` | 栅格顺序 | `number` | - |
-| `[nzPull]` | 栅格向左移动格数 | `number` | - |
-| `[nzPush]` | 栅格向右移动格数 | `number` | - |
-| `[nzSpan]` | 栅格占位格数，为 0 时相当于 `display: none` | `number` | - |
-| `[nzXs]` | `<576px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | `number \| object` | - |
-| `[nzSm]` | `≥576px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | `number \| object` | - |
-| `[nzMd]` | `≥768px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | `number \| object` | - |
-| `[nzLg]` | `≥992px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | `number \| object` | - |
-| `[nzXl]` | `≥1200px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | `number \| object` | - |
-| `[nzXXl]` | `≥1600px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | `number \| object` | - |
+### [nz-row]:standalone
+
+| 成员          | 说明                                                                                                                                       | 类型                                                                | 默认值 |
+| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------- | ------ |
+| `[nzAlign]`   | 垂直对齐方式                                                                                                                               | `'top' \| 'middle' \| 'bottom'`                                     | -      |
+| `[nzGutter]`  | 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 `{ xs: 8, sm: 16, md: 24}`。或者使用数组形式同时设置 `[水平间距, 垂直间距]`。 | `string\|number\|object\|[number, number]\|[object, object]`        | -      |
+| `[nzJustify]` | 水平排列方式                                                                                                                               | `'start' \| 'end' \| 'center' \| 'space-around' \| 'space-between'` | -      |
+
+### [nz-col]:standalone
+
+| 成员         | 说明                                                     | 类型               | 默认值 |
+| ------------ | -------------------------------------------------------- | ------------------ | ------ |
+| `[nzFlex]`   | flex 布局属性                                            | `string \| number` | -      |
+| `[nzOffset]` | 栅格左侧的间隔格数，间隔内不可以有栅格                   | `number`           | -      |
+| `[nzOrder]`  | 栅格顺序                                                 | `number`           | -      |
+| `[nzPull]`   | 栅格向左移动格数                                         | `number`           | -      |
+| `[nzPush]`   | 栅格向右移动格数                                         | `number`           | -      |
+| `[nzSpan]`   | 栅格占位格数，为 0 时相当于 `display: none`              | `number`           | -      |
+| `[nzXs]`     | `<576px` 响应式栅格，可为栅格数或一个包含其他属性的对象  | `number \| object` | -      |
+| `[nzSm]`     | `≥576px` 响应式栅格，可为栅格数或一个包含其他属性的对象  | `number \| object` | -      |
+| `[nzMd]`     | `≥768px` 响应式栅格，可为栅格数或一个包含其他属性的对象  | `number \| object` | -      |
+| `[nzLg]`     | `≥992px` 响应式栅格，可为栅格数或一个包含其他属性的对象  | `number \| object` | -      |
+| `[nzXl]`     | `≥1200px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | `number \| object` | -      |
+| `[nzXXl]`    | `≥1600px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | `number \| object` | -      |
 
 响应式栅格的断点扩展自 [BootStrap 4 的规则](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)（不包含链接里 `occasionally` 的部分)。
diff --git a/components/grid/grid.module.ts b/components/grid/grid.module.ts
@@ -3,18 +3,13 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { BidiModule } from '@angular/cdk/bidi';
-import { LayoutModule } from '@angular/cdk/layout';
-import { PlatformModule } from '@angular/cdk/platform';
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { NzColDirective } from './col.directive';
 import { NzRowDirective } from './row.directive';
 
 @NgModule({
-  declarations: [NzColDirective, NzRowDirective],
-  exports: [NzColDirective, NzRowDirective],
-  imports: [BidiModule, CommonModule, LayoutModule, PlatformModule]
+  imports: [NzColDirective, NzRowDirective],
+  exports: [NzColDirective, NzRowDirective]
 })
 export class NzGridModule {}
diff --git a/components/grid/row.directive.ts b/components/grid/row.directive.ts
@@ -43,7 +43,8 @@ export type NzAlign = 'top' | 'middle' | 'bottom';
     '[class.ant-row-space-between]': `nzJustify === 'space-between'`,
     '[class.ant-row-space-evenly]': `nzJustify === 'space-evenly'`,
     '[class.ant-row-rtl]': `dir === "rtl"`
-  }
+  },
+  standalone: true
 })
 export class NzRowDirective implements OnInit, OnChanges, AfterViewInit, OnDestroy {
   @Input() nzAlign: NzAlign | null = null;