feat(module:input-number): support input number group (#7488)

* feat(module:input-number): support input number group feat(module:input-number): add nzCompact * feat(module:input-number): add tests * feat(module:input-number): fix some errors * feat(module:input-number): fix demos
NG-ZORRO · Jun 2, 2022 · b038fa2 · b038fa2
1 parent d28f861
commit b038fa2
Show file tree

Hide file tree

Showing 18 changed files with 932 additions and 22 deletions.
diff --git a/components/input-number/demo/addon.md b/components/input-number/demo/addon.md
@@ -0,0 +1,14 @@
+---
+order: 7
+title:
+    zh-CN: 前置/后置标签
+    en-US: Pre / Post tab
+---
+
+## zh-CN
+
+用于配置一些固定组合。
+
+## en-US
+
+Using pre & post tabs example.
diff --git a/components/input-number/demo/addon.ts b/components/input-number/demo/addon.ts
@@ -0,0 +1,41 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-input-number-addon',
+  template: `
+    <nz-space nzDirection="vertical" style="width: 100%">
+      <nz-input-number-group *nzSpaceItem nzAddOnBefore="+" nzAddOnAfter="$">
+        <nz-input-number [(ngModel)]="demoValue" [nzStep]="1"></nz-input-number>
+      </nz-input-number-group>
+      <nz-input-number-group *nzSpaceItem [nzAddOnBefore]="addOnBeforeTemplate" [nzAddOnAfter]="addOnAfterTemplate">
+        <nz-input-number [(ngModel)]="demoValue" [nzStep]="1"></nz-input-number>
+      </nz-input-number-group>
+      <ng-template #addOnBeforeTemplate>
+        <nz-select [ngModel]="'add'" style="width: 60px">
+          <nz-option nzLabel="+" nzValue="add"></nz-option>
+          <nz-option nzLabel="-" nzValue="minus"></nz-option>
+        </nz-select>
+      </ng-template>
+      <ng-template #addOnAfterTemplate>
+        <nz-select [ngModel]="'USD'" style="width: 60px">
+          <nz-option nzValue="USD" nzLabel="$"></nz-option>
+          <nz-option nzValue="EUR" nzLabel="€"></nz-option>
+          <nz-option nzValue="GBP" nzLabel="£"></nz-option>
+          <nz-option nzValue="CNY" nzLabel="¥"></nz-option>
+        </nz-select>
+      </ng-template>
+      <nz-input-number-group *nzSpaceItem nzAddOnAfterIcon="setting">
+        <nz-input-number [(ngModel)]="demoValue" [nzStep]="1"></nz-input-number>
+      </nz-input-number-group>
+      <nz-input-number-group *nzSpaceItem [nzAddOnBefore]="addOnBeforeCascaderTemplate">
+        <nz-input-number [(ngModel)]="demoValue" [nzStep]="1"></nz-input-number>
+      </nz-input-number-group>
+      <ng-template #addOnBeforeCascaderTemplate>
+        <nz-cascader [nzOptions]="[]" nzPlaceHolder="cascader" style="width: 150px"></nz-cascader>
+      </ng-template>
+    </nz-space>
+  `
+})
+export class NzDemoInputNumberAddonComponent {
+  demoValue = 100;
+}
diff --git a/components/input-number/demo/group.md b/components/input-number/demo/group.md
@@ -0,0 +1,18 @@
+---
+order: 9
+title:
+    zh-CN: 输入框组合
+    en-US: Input Number Group
+---
+
+## zh-CN
+
+数字输入框的组合展现。
+
+注意：使用 `nzCompact` 模式时，不需要通过 `nz-col` 来控制宽度。
+
+## en-US
+
+InputNumber.Group example.
+
+Note: You don't need `nz-col` to control the width in the `nzCompact` mode.
diff --git a/components/input-number/demo/group.ts b/components/input-number/demo/group.ts
@@ -0,0 +1,47 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-input-number-group',
+  template: `
+    <nz-space nzDirection="vertical" style="width: 100%">
+      <nz-input-number-group nz-row [nzGutter]="8" nzSize="large" *nzSpaceItem>
+        <div nz-col nzSpan="8">
+          <nz-input-number [ngModel]="1234" [nzStep]="1" style="width: 100%"></nz-input-number>
+        </div>
+        <div nz-col nzSpan="8">
+          <nz-input-number [ngModel]="56789" [nzStep]="1" style="width: 100%"></nz-input-number>
+        </div>
+      </nz-input-number-group>
+      <nz-input-number-group *nzSpaceItem nzCompact>
+        <nz-input-number [ngModel]="1234" [nzStep]="1" style="width: 33%"></nz-input-number>
+        <nz-input-number [ngModel]="56789" [nzStep]="1" style="width: 33%"></nz-input-number>
+      </nz-input-number-group>
+      <nz-input-number-group *nzSpaceItem nzCompact>
+        <nz-input-number [ngModel]="1234" [nzStep]="1" style="width: calc(100% - 200px)"></nz-input-number>
+        <button nz-button nzType="primary">Submit</button>
+      </nz-input-number-group>
+      <nz-input-number-group *nzSpaceItem nzCompact>
+        <nz-input-number [ngModel]="1234" [nzStep]="1" style="width: calc(100% - 200px)"></nz-input-number>
+        <button nz-button>
+          <i nz-icon nzType="copy" nzTheme="outline"></i>
+        </button>
+      </nz-input-number-group>
+      <nz-input-number-group *nzSpaceItem nzCompact>
+        <nz-select ngModel="Zhejiang">
+          <nz-option nzValue="Zhejiang" nzLabel="Zhejiang"></nz-option>
+          <nz-option nzValue="Jiangsu" nzLabel="Jiangsu"></nz-option>
+        </nz-select>
+        <nz-input-number [ngModel]="1234" [nzStep]="1" style="width: 50%"></nz-input-number>
+      </nz-input-number-group>
+      <nz-input-number-group *nzSpaceItem nzCompact>
+        <nz-input-number [ngModel]="1234" [nzStep]="1" style="width: 50%"></nz-input-number>
+        <nz-date-picker></nz-date-picker>
+      </nz-input-number-group>
+      <nz-input-number-group *nzSpaceItem nzCompact>
+        <nz-input-number [ngModel]="1234" [nzStep]="1" style="width: 30%"></nz-input-number>
+        <nz-range-picker></nz-range-picker>
+      </nz-input-number-group>
+    </nz-space>
+  `
+})
+export class NzDemoInputNumberGroupComponent {}
diff --git a/components/input-number/demo/module b/components/input-number/demo/module
@@ -1,4 +1,10 @@
 import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
 import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzSpaceModule } from 'ng-zorro-antd/space';
+import { NzSelectModule } from 'ng-zorro-antd/select';
+import { NzCascaderModule } from 'ng-zorro-antd/cascader';
+import { NzGridModule } from 'ng-zorro-antd/grid';
+import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
 
-export const moduleList = [ NzInputNumberModule, NzButtonModule ];
+export const moduleList = [ NzInputNumberModule, NzButtonModule, NzIconModule, NzSpaceModule, NzSelectModule, NzCascaderModule, NzGridModule, NzDatePickerModule ];
diff --git a/components/input-number/demo/prefix.md b/components/input-number/demo/prefix.md
@@ -0,0 +1,14 @@
+---
+order: 8
+title:
+    zh-CN: 前缀
+    en-US: Prefix
+---
+
+## zh-CN
+
+在数字输入框上添加前缀图标。
+
+## en-US
+
+Add a prefix inside input.
diff --git a/components/input-number/demo/prefix.ts b/components/input-number/demo/prefix.ts
@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-input-number-prefix',
+  template: `
+    <nz-space nzDirection="vertical" style="width: 100%">
+      <nz-input-number-group *nzSpaceItem nzPrefix="￥" style="width: 100%">
+        <nz-input-number [nzStep]="1"></nz-input-number>
+      </nz-input-number-group>
+      <nz-input-number-group *nzSpaceItem nzAddOnBeforeIcon="user" nzPrefix="￥" style="width: 100%">
+        <nz-input-number [nzStep]="1"></nz-input-number>
+      </nz-input-number-group>
+      <nz-input-number-group *nzSpaceItem nzPrefix="￥" style="width: 100%">
+        <nz-input-number nzDisabled [nzStep]="1"></nz-input-number>
+      </nz-input-number-group>
+    </nz-space>
+  `
+})
+export class NzDemoInputNumberPrefixComponent {}
diff --git a/components/input-number/demo/status.ts b/components/input-number/demo/status.ts
@@ -3,16 +3,16 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-input-number-status',
   template: `
-    <nz-input-number [nzStep]="1" nzStatus="error"></nz-input-number>
-    <nz-input-number [nzStep]="1" nzStatus="warning"></nz-input-number>
-  `,
-  styles: [
-    `
-      nz-input-number {
-        width: 100%;
-        margin-bottom: 8px;
-      }
-    `
-  ]
+    <nz-space nzDirection="vertical" style="width: 100%">
+      <nz-input-number *nzSpaceItem [nzStep]="1" nzStatus="error" style="width: 100%"></nz-input-number>
+      <nz-input-number *nzSpaceItem [nzStep]="1" nzStatus="warning" style="width: 100%"></nz-input-number>
+      <nz-input-number-group *nzSpaceItem nzPrefixIcon="clock-circle" nzStatus="error" style="width: 100%">
+        <nz-input-number [nzStep]="1"></nz-input-number>
+      </nz-input-number-group>
+      <nz-input-number-group *nzSpaceItem nzPrefixIcon="clock-circle" nzStatus="warning" style="width: 100%">
+        <nz-input-number [nzStep]="1"></nz-input-number>
+      </nz-input-number-group>
+    </nz-space>
+  `
 })
 export class NzDemoInputNumberStatusComponent {}
diff --git a/components/input-number/doc/index.en-US.md b/components/input-number/doc/index.en-US.md
@@ -41,6 +41,20 @@ import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
 | `(nzFocus)` | focus callback | `EventEmitter<void>` | - |
 | `(nzBlur)` | blur callback | `EventEmitter<void>` | - |
 
+### nz-input-number-group
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| `[nzAddOnAfter]` | The label text displayed after (on the right side of) the input number field, can work with `nzAddOnBefore` | `string \| TemplateRef<void>` | - |
+| `[nzAddOnBefore]` | The label text displayed before (on the left side of) the input number field, can work with `nzAddOnAfter`   | `string \| TemplateRef<void>` | - |
+| `[nzPrefix]` | The prefix icon for the Input Number, can work with `nzSuffix` | `string \| TemplateRef<void>` | - |
+| `[nzSuffix]` | The suffix icon for the Input Number, can work with `nzPrefix` | `string \| TemplateRef<void>` | - |
+| `[nzPrefixIcon]` | The prefix icon for the Input Number | `string` | - |
+| `[nzSuffixIcon]` | The suffix icon for the Input Number | `string` | - |
+| `[nzCompact]` | Whether use compact style | `boolean` | `false` |
+| `[nzSize]` | The size of `nz-input-number-group` specifies the size of the included `nz-input-number` fields | `'large' \| 'small' \| 'default'` | `'default'` |
+| `[nzStatus]` | Set validation status | `'error' \| 'warning'` | - |
+
 #### Methods
 
 You can get instance by `ViewChild`

diff --git a/components/input-number/doc/index.zh-CN.md b/components/input-number/doc/index.zh-CN.md
@@ -42,6 +42,20 @@ import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
 | `(nzFocus)` | focus时回调 | `EventEmitter<void>` | - |
 | `(nzBlur)` | blur时回调 | `EventEmitter<void>` | - |
 
+### nz-input-number-group
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| `[nzAddOnAfter]` | 带标签的 input-number，设置后置标签，可以与 `nzAddOnBefore` 配合使用 | `string \| TemplateRef<void>` | - |
+| `[nzAddOnBefore]` | 带标签的 input-number，设置前置标签，可以与 `nzAddOnAfter` 配合使用 | `string \| TemplateRef<void>` | - |
+| `[nzPrefix]` | 带有前缀图标的 input-number，可以与 `nzSuffix` 配合使用 | `string \| TemplateRef<void>` | - |
+| `[nzSuffix]` | 带有后缀图标的 input-number，可以与 `nzPrefix` 配合使用 | `string \| TemplateRef<void>` | - |
+| `[nzPrefixIcon]` | 带有前缀图标的 input-number | `string` | - |
+| `[nzSuffixIcon]` | 带有后缀图标的 input-number | `string` | - |
+| `[nzCompact]` | 是否用紧凑模式 | `boolean` | `false` |
+| `[nzSize]` | `nz-input-number-group` 中所有的 `nz-input-number` 的大小 | `'large' \| 'small' \| 'default'` | `'default'` |
+| `[nzStatus]` | 设置校验状态 | `'error' \| 'warning'` | - |
+
 #### 方法
 
 通过 `ViewChild` 等方法获得实例后调用

diff --git a/components/input-number/input-number-group-slot.component.ts b/components/input-number/input-number-group-slot.component.ts
@@ -0,0 +1,28 @@
+/**
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
+ */
+
+import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: '[nz-input-number-group-slot]',
+  preserveWhitespaces: false,
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <i nz-icon [nzType]="icon" *ngIf="icon"></i>
+    <ng-container *nzStringTemplateOutlet="template">{{ template }}</ng-container>
+    <ng-content></ng-content>
+  `,
+  host: {
+    '[class.ant-input-number-group-addon]': `type === 'addon'`,
+    '[class.ant-input-number-prefix]': `type === 'prefix'`,
+    '[class.ant-input-number-suffix]': `type === 'suffix'`
+  }
+})
+export class NzInputNumberGroupSlotComponent {
+  @Input() icon?: string | null = null;
+  @Input() type: 'addon' | 'prefix' | 'suffix' | null = null;
+  @Input() template?: string | TemplateRef<void> | null = null;
+}