Skip to content

Commit df55d88

Browse files
HyperLife1119HyperLife1119
authored
feat: redesign the input-number (#8901)
* refactor(module:input-number): rename to input-number-legacy * docs: support deprecated tag * refactor(module:core): deprecated NzFormPatchModule * refactor(module:color-picker): fix input number parser type * feat(module:input): add addon & affix directives * feat(module:input-number): redesign the input-number
1 parent a63549f commit df55d88

70 files changed

Lines changed: 2388 additions & 735 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎components/color-picker/color-format.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -162,7 +162,7 @@ export class NzColorFormatComponent implements OnChanges, OnInit, OnDestroy {
162162
}>;
163163

164164
formatterPercent = (value: number): string => `${value} %`;
165-
parserPercent = (value: string): string => value.replace(' %', '');
165+
parserPercent = (value: string): number => +value.replace(' %', '');
166166

167167
constructor(private formBuilder: FormBuilder) {
168168
this.validateForm = this.formBuilder.nonNullable.group({

‎components/core/form/nz-form-patch.module.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ import { NgModule } from '@angular/core';
77

88
import { NzFormItemFeedbackIconComponent } from './nz-form-item-feedback-icon.component';
99

10+
/**
11+
* @deprecated Will be removed in v20. Use NzFormItemFeedbackIconComponent directly
12+
*/
1013
@NgModule({
1114
imports: [NzFormItemFeedbackIconComponent],
1215
exports: [NzFormItemFeedbackIconComponent]

‎components/input-number-legacy/demo/addon.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
order: 7
3+
title:
4+
zh-CN: 前置/后置标签
5+
en-US: Pre / Post tab
6+
---
7+
8+
## zh-CN
9+
10+
用于配置一些固定组合。
11+
12+
## en-US
13+
14+
Using pre & post tabs example.

‎components/input-number-legacy/demo/addon.ts‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { Component } from '@angular/core';
2+
import { FormsModule } from '@angular/forms';
3+
4+
import { NzCascaderModule } from 'ng-zorro-antd/cascader';
5+
import { NzInputNumberLegacyModule } from 'ng-zorro-antd/input-number-legacy';
6+
import { NzSelectModule } from 'ng-zorro-antd/select';
7+
import { NzSpaceModule } from 'ng-zorro-antd/space';
8+
9+
@Component({
10+
selector: 'nz-demo-input-number-legacy-addon',
11+
standalone: true,
12+
imports: [FormsModule, NzCascaderModule, NzInputNumberLegacyModule, NzSelectModule, NzSpaceModule],
13+
template: `
14+
<nz-space nzDirection="vertical" style="width: 100%">
15+
<nz-input-number-group *nzSpaceItem nzAddOnBefore="+" nzAddOnAfter="$">
16+
<nz-input-number-legacy [(ngModel)]="value" [nzStep]="1"></nz-input-number-legacy>
17+
</nz-input-number-group>
18+
<nz-input-number-group *nzSpaceItem [nzAddOnBefore]="addOnBeforeTemplate" [nzAddOnAfter]="addOnAfterTemplate">
19+
<nz-input-number-legacy [(ngModel)]="value" [nzStep]="1"></nz-input-number-legacy>
20+
</nz-input-number-group>
21+
<ng-template #addOnBeforeTemplate>
22+
<nz-select [ngModel]="'add'" style="width: 60px">
23+
<nz-option nzLabel="+" nzValue="add"></nz-option>
24+
<nz-option nzLabel="-" nzValue="minus"></nz-option>
25+
</nz-select>
26+
</ng-template>
27+
<ng-template #addOnAfterTemplate>
28+
<nz-select [ngModel]="'USD'" style="width: 60px">
29+
<nz-option nzValue="USD" nzLabel="$"></nz-option>
30+
<nz-option nzValue="EUR" nzLabel="€"></nz-option>
31+
<nz-option nzValue="GBP" nzLabel="£"></nz-option>
32+
<nz-option nzValue="CNY" nzLabel="¥"></nz-option>
33+
</nz-select>
34+
</ng-template>
35+
<nz-input-number-group *nzSpaceItem nzAddOnAfterIcon="setting">
36+
<nz-input-number-legacy [(ngModel)]="value" [nzStep]="1"></nz-input-number-legacy>
37+
</nz-input-number-group>
38+
<nz-input-number-group *nzSpaceItem [nzAddOnBefore]="addOnBeforeCascaderTemplate">
39+
<nz-input-number-legacy [(ngModel)]="value" [nzStep]="1"></nz-input-number-legacy>
40+
</nz-input-number-group>
41+
<ng-template #addOnBeforeCascaderTemplate>
42+
<nz-cascader [nzOptions]="[]" nzPlaceHolder="cascader" style="width: 150px"></nz-cascader>
43+
</ng-template>
44+
</nz-space>
45+
`
46+
})
47+
export class NzDemoInputNumberLegacyAddonComponent {
48+
value = 100;
49+
}

‎components/input-number-legacy/demo/basic.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
order: 0
3+
title:
4+
zh-CN: 基本
5+
en-US: Basic
6+
---
7+
8+
## zh-CN
9+
10+
数字输入框。
11+
12+
## en-US
13+
14+
Numeric-only input box.
15+

‎components/input-number-legacy/demo/basic.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Component } from '@angular/core';
2+
import { FormsModule } from '@angular/forms';
3+
4+
import { NzInputNumberLegacyModule } from 'ng-zorro-antd/input-number-legacy';
5+
6+
@Component({
7+
selector: 'nz-demo-input-number-legacy-basic',
8+
standalone: true,
9+
imports: [FormsModule, NzInputNumberLegacyModule],
10+
template: `<nz-input-number-legacy
11+
[(ngModel)]="value"
12+
[nzMin]="1"
13+
[nzMax]="10"
14+
[nzStep]="1"
15+
></nz-input-number-legacy>`
16+
})
17+
export class NzDemoInputNumberLegacyBasicComponent {
18+
value = 3;
19+
}

‎components/input-number-legacy/demo/borderless.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
order: 0
3+
title:
4+
zh-CN: 无边框
5+
en-US: Borderless
6+
---
7+
8+
## zh-CN
9+
10+
没有边框。
11+
12+
## en-US
13+
14+
Borderless input number.
15+

‎components/input-number-legacy/demo/borderless.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Component } from '@angular/core';
2+
import { FormsModule } from '@angular/forms';
3+
4+
import { NzInputNumberLegacyModule } from 'ng-zorro-antd/input-number-legacy';
5+
6+
@Component({
7+
selector: 'nz-demo-input-number-legacy-borderless',
8+
standalone: true,
9+
imports: [FormsModule, NzInputNumberLegacyModule],
10+
template: `<nz-input-number-legacy nzBorderless [(ngModel)]="value"></nz-input-number-legacy>`
11+
})
12+
export class NzDemoInputNumberLegacyBorderlessComponent {
13+
value = 3;
14+
}

‎components/input-number-legacy/demo/digit.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
order: 3
3+
title:
4+
zh-CN: 小数
5+
en-US: Decimals
6+
---
7+
8+
## zh-CN
9+
10+
和原生的数字输入框一样，value 的精度由 `nzStep` 的小数位数决定。
11+
12+
## en-US
13+
14+
A numeric-only input box whose values can be increased or decreased using a decimal step. The number of decimals (also known as precision) is determined by the `nzStep` prop.
15+

‎components/input-number-legacy/demo/digit.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { Component } from '@angular/core';
2+
import { FormsModule } from '@angular/forms';
3+
4+
import { NzInputNumberLegacyModule } from 'ng-zorro-antd/input-number-legacy';
5+
6+
@Component({
7+
selector: 'nz-demo-input-number-legacy-digit',
8+
standalone: true,
9+
imports: [FormsModule, NzInputNumberLegacyModule],
10+
template: `
11+
<nz-input-number-legacy
12+
[(ngModel)]="value"
13+
[nzMin]="1"
14+
[nzMax]="10"
15+
[nzStep]="0.1"
16+
[nzPlaceHolder]="'Digital'"
17+
></nz-input-number-legacy>
18+
`
19+
})
20+
export class NzDemoInputNumberLegacyDigitComponent {
21+
value = 0;
22+
}

0 commit comments

Comments
 (0)