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

Some content is hidden

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

70 files changed

+2388
-735
lines changed

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

+1-1
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

+3
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

+14
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

+49
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

+15
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

+19
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

+15
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

+14
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

+15
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

+22
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+
}

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

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
order: 2
3+
title:
4+
zh-CN: 不可用
5+
en-US: Disabled
6+
---
7+
8+
## zh-CN
9+
10+
点击按钮切换可用状态。
11+
12+
## en-US
13+
14+
Click the button to toggle between available and disabled states.
15+
16+

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

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { Component } from '@angular/core';
2+
import { FormsModule } from '@angular/forms';
3+
4+
import { NzButtonModule } from 'ng-zorro-antd/button';
5+
import { NzInputNumberLegacyModule } from 'ng-zorro-antd/input-number-legacy';
6+
7+
@Component({
8+
selector: 'nz-demo-input-number-legacy-disabled',
9+
standalone: true,
10+
imports: [FormsModule, NzButtonModule, NzInputNumberLegacyModule],
11+
template: `
12+
<nz-input-number-legacy
13+
[(ngModel)]="value"
14+
[nzMin]="1"
15+
[nzMax]="10"
16+
[nzStep]="1"
17+
[nzDisabled]="isDisabled"
18+
></nz-input-number-legacy>
19+
<br />
20+
<br />
21+
<button nz-button [nzType]="'primary'" (click)="toggleDisabled()">
22+
<span>Toggle Disabled</span>
23+
</button>
24+
`
25+
})
26+
export class NzDemoInputNumberLegacyDisabledComponent {
27+
value = 3;
28+
isDisabled = false;
29+
30+
toggleDisabled(): void {
31+
this.isDisabled = !this.isDisabled;
32+
}
33+
}

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

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
order: 4
3+
title:
4+
zh-CN: 格式化展示
5+
en-US: Formatter
6+
---
7+
8+
## zh-CN
9+
10+
通过 `nzFormatter` 格式化数字，以展示具有具体含义的数据，往往需要配合 `nzParser` 一起使用。
11+
12+
## en-US
13+
14+
Display value within it's situation with `nzFormatter`, and we usually use `nzParser` at the same time.
15+

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

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
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-formatter',
8+
standalone: true,
9+
imports: [FormsModule, NzInputNumberLegacyModule],
10+
template: `
11+
<nz-input-number-legacy
12+
[(ngModel)]="demoValue"
13+
[nzMin]="1"
14+
[nzMax]="100"
15+
[nzStep]="1"
16+
[nzFormatter]="formatterDollar"
17+
[nzParser]="parserDollar"
18+
></nz-input-number-legacy>
19+
<nz-input-number-legacy
20+
[(ngModel)]="demoValue"
21+
[nzMin]="1"
22+
[nzMax]="100"
23+
[nzStep]="1"
24+
[nzFormatter]="formatterPercent"
25+
[nzParser]="parserPercent"
26+
></nz-input-number-legacy>
27+
`,
28+
styles: [
29+
`
30+
nz-input-number {
31+
margin-right: 8px;
32+
}
33+
`
34+
]
35+
})
36+
export class NzDemoInputNumberLegacyFormatterComponent {
37+
demoValue = 100;
38+
formatterPercent = (value: number): string => `${value} %`;
39+
parserPercent = (value: string): string => value.replace(' %', '');
40+
formatterDollar = (value: number): string => `$ ${value}`;
41+
parserDollar = (value: string): string => value.replace('$ ', '');
42+
}

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

File renamed without changes.

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

+24-14
Original file line numberDiff line numberDiff line change
@@ -4,42 +4,52 @@ import { FormsModule } from '@angular/forms';
44
import { NzButtonModule } from 'ng-zorro-antd/button';
55
import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
66
import { NzGridModule } from 'ng-zorro-antd/grid';
7-
import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
7+
import { NzIconModule } from 'ng-zorro-antd/icon';
8+
import { NzInputNumberLegacyModule } from 'ng-zorro-antd/input-number-legacy';
89
import { NzSelectModule } from 'ng-zorro-antd/select';
910
import { NzSpaceModule } from 'ng-zorro-antd/space';
1011

1112
@Component({
12-
selector: 'nz-demo-input-number-group',
13+
selector: 'nz-demo-input-number-legacy-group',
1314
standalone: true,
1415
imports: [
1516
FormsModule,
1617
NzButtonModule,
1718
NzDatePickerModule,
1819
NzGridModule,
19-
NzInputNumberModule,
20+
NzInputNumberLegacyModule,
2021
NzSelectModule,
21-
NzSpaceModule
22+
NzSpaceModule,
23+
NzIconModule
2224
],
2325
template: `
2426
<nz-space nzDirection="vertical" style="width: 100%">
2527
<nz-input-number-group nz-row [nzGutter]="8" nzSize="large" *nzSpaceItem>
2628
<div nz-col nzSpan="8">
27-
<nz-input-number [ngModel]="1234" [nzStep]="1" style="width: 100%"></nz-input-number>
29+
<nz-input-number-legacy [ngModel]="1234" [nzStep]="1" style="width: 100%"></nz-input-number-legacy>
2830
</div>
2931
<div nz-col nzSpan="8">
30-
<nz-input-number [ngModel]="56789" [nzStep]="1" style="width: 100%"></nz-input-number>
32+
<nz-input-number-legacy [ngModel]="56789" [nzStep]="1" style="width: 100%"></nz-input-number-legacy>
3133
</div>
3234
</nz-input-number-group>
3335
<nz-input-number-group *nzSpaceItem nzCompact>
34-
<nz-input-number [ngModel]="1234" [nzStep]="1" style="width: 33%"></nz-input-number>
35-
<nz-input-number [ngModel]="56789" [nzStep]="1" style="width: 33%"></nz-input-number>
36+
<nz-input-number-legacy [ngModel]="1234" [nzStep]="1" style="width: 33%"></nz-input-number-legacy>
37+
<nz-input-number-legacy [ngModel]="56789" [nzStep]="1" style="width: 33%"></nz-input-number-legacy>
3638
</nz-input-number-group>
3739
<nz-input-number-group *nzSpaceItem nzCompact>
38-
<nz-input-number [ngModel]="1234" [nzStep]="1" style="width: calc(100% - 200px)"></nz-input-number>
40+
<nz-input-number-legacy
41+
[ngModel]="1234"
42+
[nzStep]="1"
43+
style="width: calc(100% - 200px)"
44+
></nz-input-number-legacy>
3945
<button nz-button nzType="primary">Submit</button>
4046
</nz-input-number-group>
4147
<nz-input-number-group *nzSpaceItem nzCompact>
42-
<nz-input-number [ngModel]="1234" [nzStep]="1" style="width: calc(100% - 200px)"></nz-input-number>
48+
<nz-input-number-legacy
49+
[ngModel]="1234"
50+
[nzStep]="1"
51+
style="width: calc(100% - 200px)"
52+
></nz-input-number-legacy>
4353
<button nz-button>
4454
<span nz-icon nzType="copy" nzTheme="outline"></span>
4555
</button>
@@ -49,17 +59,17 @@ import { NzSpaceModule } from 'ng-zorro-antd/space';
4959
<nz-option nzValue="Zhejiang" nzLabel="Zhejiang"></nz-option>
5060
<nz-option nzValue="Jiangsu" nzLabel="Jiangsu"></nz-option>
5161
</nz-select>
52-
<nz-input-number [ngModel]="1234" [nzStep]="1" style="width: 50%"></nz-input-number>
62+
<nz-input-number-legacy [ngModel]="1234" [nzStep]="1" style="width: 50%"></nz-input-number-legacy>
5363
</nz-input-number-group>
5464
<nz-input-number-group *nzSpaceItem nzCompact>
55-
<nz-input-number [ngModel]="1234" [nzStep]="1" style="width: 50%"></nz-input-number>
65+
<nz-input-number-legacy [ngModel]="1234" [nzStep]="1" style="width: 50%"></nz-input-number-legacy>
5666
<nz-date-picker></nz-date-picker>
5767
</nz-input-number-group>
5868
<nz-input-number-group *nzSpaceItem nzCompact>
59-
<nz-input-number [ngModel]="1234" [nzStep]="1" style="width: 30%"></nz-input-number>
69+
<nz-input-number-legacy [ngModel]="1234" [nzStep]="1" style="width: 30%"></nz-input-number-legacy>
6070
<nz-range-picker></nz-range-picker>
6171
</nz-input-number-group>
6272
</nz-space>
6373
`
6474
})
65-
export class NzDemoInputNumberGroupComponent {}
75+
export class NzDemoInputNumberLegacyGroupComponent {}

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

File renamed without changes.

0 commit comments

Comments
 (0)