Skip to content

Commit

Permalink
feat(module:pagination): support standalone component (#8234)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ParsaArvanehPA
ParsaArvanehPA authored Dec 4, 2023
1 parent ad02381 commit 0f1690c
Show file tree
Hide file tree
Showing 8 changed files with 72 additions and 54 deletions.
38 changes: 19 additions & 19 deletions components/pagination/doc/index.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,22 +23,22 @@ import { NzPaginationModule } from 'ng-zorro-antd/pagination';
<nz-pagination [nzPageIndex]="1" [nzTotal]="50"></nz-pagination>
```

### nz-pagination

| Property | Description | Type | Default | Global Config |
| -------- | ----------- | ---- | ------- | ------------- |
| `[nzTotal]` | total number of data items | `number` | `0` | - |
| `[nzPageIndex]` | current page number，double binding | `number` | `1` | - |
| `[nzPageSize]` | number of data items per page, double binding | `number` | `10`| - |
| `[nzDisabled]` | disable pagination | `boolean` | `false`| - |
| `[nzShowQuickJumper]` | determine whether you can jump to pages directly | `boolean` | `false` | ✅ |
| `[nzShowSizeChanger]` | determine whether `nzPageSize` can be changed | `boolean` | `false` | ✅ |
| `[nzSimple]` | whether to use simple mode | `boolean` | - | ✅ |
| `[nzSize]` | specify the size of `nz-pagination`, can be set to `small` | `'small'` | `'default'` | ✅ |
| `[nzResponsive]` | `Pagination` would resize according to the width of the window | `boolean` | `false` | - |
| `[nzPageSizeOptions]` | specify the sizeChanger options | `number[]` | `[10, 20, 30, 40]` | ✅ |
| `[nzItemRender]` | to customize item | `TemplateRef<{ $implicit: 'page' \| 'prev' \| 'next'\| 'prev_5'\| 'next_5', page: number }>` | - | - |
| `[nzShowTotal]` | to display the total number and range | `TemplateRef<{ $implicit: number, range: [ number, number ] }>` | - | - |
| `[nzHideOnSinglePage]` | Whether to hide pager on single page | `boolean` | `false` | - |
| `(nzPageIndexChange)` | current page number change callback | `EventEmitter<number>` | - | - |
| `(nzPageSizeChange)` | number of data items per page change callback | `EventEmitter<number>` | - | - |
### nz-pagination:standalone

| Property | Description | Type | Default | Global Config |
| ---------------------- | -------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | ------------------ | ------------- |
| `[nzTotal]` | total number of data items | `number` | `0` | - |
| `[nzPageIndex]` | current page number，double binding | `number` | `1` | - |
| `[nzPageSize]` | number of data items per page, double binding | `number` | `10` | - |
| `[nzDisabled]` | disable pagination | `boolean` | `false` | - |
| `[nzShowQuickJumper]` | determine whether you can jump to pages directly | `boolean` | `false` | ✅ |
| `[nzShowSizeChanger]` | determine whether `nzPageSize` can be changed | `boolean` | `false` | ✅ |
| `[nzSimple]` | whether to use simple mode | `boolean` | - | ✅ |
| `[nzSize]` | specify the size of `nz-pagination`, can be set to `small` | `'small'` | `'default'` | ✅ |
| `[nzResponsive]` | `Pagination` would resize according to the width of the window | `boolean` | `false` | - |
| `[nzPageSizeOptions]` | specify the sizeChanger options | `number[]` | `[10, 20, 30, 40]` | ✅ |
| `[nzItemRender]` | to customize item | `TemplateRef<{ $implicit: 'page' \| 'prev' \| 'next'\| 'prev_5'\| 'next_5', page: number }>` | - | - |
| `[nzShowTotal]` | to display the total number and range | `TemplateRef<{ $implicit: number, range: [ number, number ] }>` | - | - |
| `[nzHideOnSinglePage]` | Whether to hide pager on single page | `boolean` | `false` | - |
| `(nzPageIndexChange)` | current page number change callback | `EventEmitter<number>` | - | - |
| `(nzPageSizeChange)` | number of data items per page change callback | `EventEmitter<number>` | - | - |
38 changes: 19 additions & 19 deletions components/pagination/doc/index.zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,22 +24,22 @@ import { NzPaginationModule } from 'ng-zorro-antd/pagination';
<nz-pagination [nzPageIndex]="1" [nzTotal]="50"></nz-pagination>
```

### nz-pagination

| 参数 | 说明 | 类型 | 默认值 | 全局配置 |
| --- | --- | --- | --- | --- |
| `[nzTotal]` | 数据总数 | `number` | - | - |
| `[nzPageIndex]` | 当前页数，可双向绑定 | `number` | `1` | - |
| `[nzPageSize]` | 每页条数 ，可双向绑定| `number` | `10`| - |
| `[nzDisabled]` | 是否禁用 | `boolean` | `false`| - |
| `[nzShowQuickJumper]` | 是否可以快速跳转至某页 | `boolean` | `false` | ✅ |
| `[nzShowSizeChanger]` | 是否可以改变 `nzPageSize` | `boolean` | `false` | ✅ |
| `[nzSimple]` | 当添加该属性时，显示为简单分页 | `boolean` | - | ✅ |
| `[nzSize]` | 当为「small」时，是小尺寸分页 | `'small'` | `'default'` | ✅ |
| `[nzResponsive]` | 当 `nzSize` 未指定时，根据屏幕宽度自动调整尺寸 | `boolean` | `false` | - |
| `[nzPageSizeOptions]` | 指定每页可以显示多少条 | `number[]` | `[10, 20, 30, 40]` | ✅ |
| `[nzItemRender]` | 用于自定义页码的结构 | `TemplateRef<{ $implicit: 'page' \| 'prev' \| 'next'\| 'prev_5'\| 'next_5', page: number }>` | - | - |
| `[nzShowTotal]` | 用于显示数据总量和当前数据范围，具体使用方式见代码演示部分 | `TemplateRef<{ $implicit: number, range: [ number, number ] }>` | - | - |
| `[nzHideOnSinglePage]` | 只有一页时是否隐藏分页器 | `boolean` | `false` | - |
| `(nzPageIndexChange)` | 页码改变的回调 | `EventEmitter<number>` | - | - |
| `(nzPageSizeChange)` | 每页条数改变的回调 | `EventEmitter<number>` | - | - |
### nz-pagination:standalone

| 参数 | 说明 | 类型 | 默认值 | 全局配置 |
| ---------------------- | ---------------------------------------------------------- | -------------------------------------------------------------------------------------------- | ------------------ | -------- |
| `[nzTotal]` | 数据总数 | `number` | - | - |
| `[nzPageIndex]` | 当前页数，可双向绑定 | `number` | `1` | - |
| `[nzPageSize]` | 每页条数 ，可双向绑定 | `number` | `10` | - |
| `[nzDisabled]` | 是否禁用 | `boolean` | `false` | - |
| `[nzShowQuickJumper]` | 是否可以快速跳转至某页 | `boolean` | `false` | ✅ |
| `[nzShowSizeChanger]` | 是否可以改变 `nzPageSize` | `boolean` | `false` | ✅ |
| `[nzSimple]` | 当添加该属性时，显示为简单分页 | `boolean` | - | ✅ |
| `[nzSize]` | 当为「small」时，是小尺寸分页 | `'small'` | `'default'` | ✅ |
| `[nzResponsive]` | 当 `nzSize` 未指定时，根据屏幕宽度自动调整尺寸 | `boolean` | `false` | - |
| `[nzPageSizeOptions]` | 指定每页可以显示多少条 | `number[]` | `[10, 20, 30, 40]` | ✅ |
| `[nzItemRender]` | 用于自定义页码的结构 | `TemplateRef<{ $implicit: 'page' \| 'prev' \| 'next'\| 'prev_5'\| 'next_5', page: number }>` | - | - |
| `[nzShowTotal]` | 用于显示数据总量和当前数据范围，具体使用方式见代码演示部分 | `TemplateRef<{ $implicit: number, range: [ number, number ] }>` | - | - |
| `[nzHideOnSinglePage]` | 只有一页时是否隐藏分页器 | `boolean` | `false` | - |
| `(nzPageIndexChange)` | 页码改变的回调 | `EventEmitter<number>` | - | - |
| `(nzPageSizeChange)` | 每页条数改变的回调 | `EventEmitter<number>` | - | - |
6 changes: 5 additions & 1 deletion components/pagination/pagination-default.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
*/

import { Direction, Directionality } from '@angular/cdk/bidi';
import { NgForOf, NgIf, NgTemplateOutlet } from '@angular/common';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Expand All @@ -29,6 +30,7 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
import { NzPaginationI18nInterface } from 'ng-zorro-antd/i18n';

import { NzPaginationItemComponent } from './pagination-item.component';
import { NzPaginationOptionsComponent } from './pagination-options.component';
import { PaginationItemRenderContext } from './pagination.types';

@Component({
Expand Down Expand Up @@ -75,7 +77,9 @@ import { PaginationItemRenderContext } from './pagination.types';
></li>
</ul>
</ng-template>
`
`,
imports: [NgTemplateOutlet, NgForOf, NgIf, NzPaginationItemComponent, NzPaginationOptionsComponent],
standalone: true
})
export class NzPaginationDefaultComponent implements OnChanges, OnDestroy, OnInit {
@ViewChild('containerTemplate', { static: true }) template!: TemplateRef<NzSafeAny>;
Expand Down
13 changes: 11 additions & 2 deletions components/pagination/pagination-item.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ import {
import { NzSafeAny } from 'ng-zorro-antd/core/types';
import { NzPaginationI18nInterface } from 'ng-zorro-antd/i18n';
import { PaginationItemRenderContext, PaginationItemType } from './pagination.types';
import { NgSwitch, NgSwitchCase, NgSwitchDefault, NgTemplateOutlet } from '@angular/common';
import { NzIconModule } from 'ng-zorro-antd/icon';

@Component({
selector: 'li[nz-pagination-item]',
Expand Down Expand Up @@ -45,7 +47,12 @@ import { PaginationItemRenderContext, PaginationItemType } from './pagination.ty
<div class="ant-pagination-item-container" *ngSwitchDefault>
<ng-container [ngSwitch]="type">
<ng-container *ngSwitchCase="'prev_5'" [ngSwitch]="direction">
<span *ngSwitchCase="'rtl'" nz-icon nzType="double-right" class="ant-pagination-item-link-icon"></span>
<span
*ngSwitchCase="'rtl'"
nz-icon
nzType="double-right"
class="ant-pagination-item-link-icon"
></span>
<span *ngSwitchDefault nz-icon nzType="double-left" class="ant-pagination-item-link-icon"></span>
</ng-container>
<ng-container *ngSwitchCase="'next_5'" [ngSwitch]="direction">
Expand Down Expand Up @@ -76,7 +83,9 @@ import { PaginationItemRenderContext, PaginationItemType } from './pagination.ty
'[class.ant-pagination-item-active]': 'active',
'[attr.title]': 'title',
'(click)': 'clickItem()'
}
},
imports: [NgSwitch, NgSwitchCase, NzIconModule, NgSwitchDefault, NgTemplateOutlet],
standalone: true
})
export class NzPaginationItemComponent implements OnChanges {
static ngAcceptInputType_type: PaginationItemType | string | null | undefined;
Expand Down
7 changes: 6 additions & 1 deletion components/pagination/pagination-options.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/

import { NgForOf, NgIf } from '@angular/common';
import {
ChangeDetectionStrategy,
Component,
Expand All @@ -13,9 +14,11 @@ import {
SimpleChanges,
ViewEncapsulation
} from '@angular/core';
import { FormsModule } from '@angular/forms';

import { toNumber } from 'ng-zorro-antd/core/util';
import { NzPaginationI18nInterface } from 'ng-zorro-antd/i18n';
import { NzSelectModule } from 'ng-zorro-antd/select';

@Component({
selector: 'li[nz-pagination-options]',
Expand Down Expand Up @@ -43,7 +46,9 @@ import { NzPaginationI18nInterface } from 'ng-zorro-antd/i18n';
{{ locale.page }}
</div>
`,
host: { class: 'ant-pagination-options' }
host: { class: 'ant-pagination-options' },
imports: [NzSelectModule, NgIf, FormsModule, NgForOf],
standalone: true
})
export class NzPaginationOptionsComponent implements OnChanges {
@Input() nzSize: 'default' | 'small' = 'default';
Expand Down
5 changes: 4 additions & 1 deletion components/pagination/pagination-simple.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
import { toNumber } from 'ng-zorro-antd/core/util';
import { NzPaginationI18nInterface } from 'ng-zorro-antd/i18n';

import { NzPaginationItemComponent } from './pagination-item.component';
import { PaginationItemRenderContext } from './pagination.types';

@Component({
Expand Down Expand Up @@ -64,7 +65,9 @@ import { PaginationItemRenderContext } from './pagination.types';
></li>
</ul>
</ng-template>
`
`,
imports: [NzPaginationItemComponent],
standalone: true
})
export class NzPaginationSimpleComponent implements OnChanges, OnDestroy, OnInit {
@ViewChild('containerTemplate', { static: true }) template!: TemplateRef<NzSafeAny>;
Expand Down
7 changes: 6 additions & 1 deletion components/pagination/pagination.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
*/

import { Direction, Directionality } from '@angular/cdk/bidi';
import { NgIf, NgTemplateOutlet } from '@angular/common';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Expand All @@ -28,6 +29,8 @@ import { BooleanInput, NumberInput } from 'ng-zorro-antd/core/types';
import { InputBoolean, InputNumber } from 'ng-zorro-antd/core/util';
import { NzI18nService, NzPaginationI18nInterface } from 'ng-zorro-antd/i18n';

import { NzPaginationDefaultComponent } from './pagination-default.component';
import { NzPaginationSimpleComponent } from './pagination-simple.component';
import { PaginationItemRenderContext } from './pagination.types';

const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'pagination';
Expand Down Expand Up @@ -77,7 +80,9 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'pagination';
'[class.ant-pagination-disabled]': 'nzDisabled',
'[class.mini]': `!nzSimple && size === 'small'`,
'[class.ant-pagination-rtl]': `dir === 'rtl'`
}
},
imports: [NgIf, NgTemplateOutlet, NzPaginationSimpleComponent, NzPaginationDefaultComponent],
standalone: true
})
export class NzPaginationComponent implements OnInit, OnDestroy, OnChanges {
readonly _nzModuleName: NzConfigKey = NZ_CONFIG_MODULE_NAME;
Expand Down
12 changes: 2 additions & 10 deletions components/pagination/pagination.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,7 @@
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/

import { BidiModule } from '@angular/cdk/bidi';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { NzI18nModule } from 'ng-zorro-antd/i18n';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzSelectModule } from 'ng-zorro-antd/select';

import { NzPaginationDefaultComponent } from './pagination-default.component';
import { NzPaginationItemComponent } from './pagination-item.component';
Expand All @@ -19,14 +12,13 @@ import { NzPaginationSimpleComponent } from './pagination-simple.component';
import { NzPaginationComponent } from './pagination.component';

@NgModule({
declarations: [
imports: [
NzPaginationComponent,
NzPaginationSimpleComponent,
NzPaginationOptionsComponent,
NzPaginationItemComponent,
NzPaginationDefaultComponent
],
exports: [NzPaginationComponent],
imports: [BidiModule, CommonModule, FormsModule, NzSelectModule, NzI18nModule, NzIconModule]
exports: [NzPaginationComponent]
})
export class NzPaginationModule {}

0 comments on commit 0f1690c

Please sign in to comment.