feat(form): add hideStep of number widget (#1303)

ng-alain · Aug 7, 2021 · f895bf0 · f895bf0
1 parent 6a94dbd
commit f895bf0
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 31 deletions.
diff --git a/packages/form/src/widgets/number/demo/simple.md b/packages/form/src/widgets/number/demo/simple.md
@@ -15,12 +15,13 @@ Simplest of usage.
 
 ```ts
 import { Component } from '@angular/core';
+
 import { SFNumberWidgetSchema, SFSchema } from '@delon/form';
 import { NzMessageService } from 'ng-zorro-antd/message';
 
 @Component({
   selector: 'app-demo',
-  template: ` <sf [schema]="schema" (formSubmit)="submit($event)"></sf> `,
+  template: ` <sf [schema]="schema" (formSubmit)="submit($event)"></sf> `
 })
 export class DemoComponent {
   schema: SFSchema = {
@@ -29,7 +30,8 @@ export class DemoComponent {
       integer: { type: 'integer', default: 10 },
       unit: { type: 'number', default: 10, ui: { unit: '%' } as SFNumberWidgetSchema },
       prefix: { type: 'number', default: 10, ui: { prefix: '$' } as SFNumberWidgetSchema },
-    },
+      hideStep: { type: 'number', default: 10, ui: { hideStep: true } as SFNumberWidgetSchema }
+    }
   };
 
   constructor(private msg: NzMessageService) {}

diff --git a/packages/form/src/widgets/number/index.en-US.md b/packages/form/src/widgets/number/index.en-US.md
@@ -10,21 +10,22 @@ Enter a number within certain range with the mouse or keyboard.
 
 ### schema
 
-| Property             | Description                                         | Type      | Default |
-| -------------------- | --------------------------------------------------- | --------- | ------- |
-| `[minimum]`          | min value                                           | `number`  | -       |
-| `[exclusiveMinimum]` | Indicate whether minimum are exclusive of the value | `boolean` | -       |
-| `[maximum]`          | max value                                           | `number`  | -       |
-| `[exclusiveMaximum]` | Indicate whether maximum are exclusive of the value | `boolean` | -       |
-| `[multipleOf]`       | Restricted to a multiple of a given number,         | `number`  | `1`     |
+| Property | Description | Type | Default |
+|----------|-------------|------|---------|
+| `[minimum]` | min value | `number` | - |
+| `[exclusiveMinimum]` | Indicate whether minimum are exclusive of the value | `boolean` | - |
+| `[maximum]` | max value | `number` | - |
+| `[exclusiveMaximum]` | Indicate whether maximum are exclusive of the value | `boolean` | - |
+| `[multipleOf]` | Restricted to a multiple of a given number, | `number` | `1` |
 
 ### ui
 
-| Property      | Description                                              | Type | Default |
-| ------------- | -------------------------------------------------------- | ---- | ------- |
-| `[prefix]`    | Prefix, simplifying the use of `nzFormatter`, `nzParser` | -    | -       |
-| `[unit]`      | Unit, simplifying the use of `nzFormatter`, `nzParser`   | -    | -       |
-| `[formatter]` | Specifies the format of the value presented              | -    | -       |
-| `[parser]`    | Specifies the value extracted from nzFormatter           | -    | -       |
-| `[precision]` | precision of input value                                 | -    | -       |
+| Property | Description | Type | Default |
+|----------|-------------|------|---------|
+| `[prefix]` | Prefix, simplifying the use of `nzFormatter`, `nzParser` | - | - |
+| `[unit]` | Unit, simplifying the use of `nzFormatter`, `nzParser` | - | - |
+| `[formatter]` | Specifies the format of the value presented | - | - |
+| `[parser]` | Specifies the value extracted from nzFormatter | - | - |
+| `[precision]` | precision of input value | - | - |
 | `[widgetWidth]` | Specify `nz-number` width | `number` | `90` |
+| `[hideStep]` | Hide step icon | `boolean` | `false` |
diff --git a/packages/form/src/widgets/number/index.zh-CN.md b/packages/form/src/widgets/number/index.zh-CN.md
@@ -14,21 +14,22 @@ type: Widgets
 
 ### schema 属性
 
-成员 | 说明 | 类型 | 默认值
-----|------|-----|------
-`[minimum]` | 最小值 | `number` | -
-`[exclusiveMinimum]` | 约束是否包括 `minimum` 值，`true` 表示排除 `minimum` 值 | `boolean` | -
-`[maximum]` | 最大值 | `number` | -
-`[exclusiveMaximum]` | 约束是否包括 `maximum` 值，`true` 表示排除 `maximum` 值 | `boolean` | -
-`[multipleOf]` | 倍数 | `number` | `1`
+| 成员 | 说明 | 类型 | 默认值 |
+|----|----|----|-----|
+| `[minimum]` | 最小值 | `number` | - |
+| `[exclusiveMinimum]` | 约束是否包括 `minimum` 值，`true` 表示排除 `minimum` 值 | `boolean` | - |
+| `[maximum]` | 最大值 | `number` | - |
+| `[exclusiveMaximum]` | 约束是否包括 `maximum` 值，`true` 表示排除 `maximum` 值 | `boolean` | - |
+| `[multipleOf]` | 倍数 | `number` | `1` |
 
 ### ui 属性
 
-成员 | 说明 | 类型 | 默认值
-----|------|-----|------
-`[prefix]` | 前缀，简化 `nzFormatter`、`nzParser` 的使用 | - | -
-`[unit]` | 单位，简化 `nzFormatter`、`nzParser` 的使用 | - | -
-`[formatter]` | 等同 `nzFormatter` | - | -
-`[parser]` | 等同 `nzParser` | - | -
-`[precision]` | 等同 `nzPrecision` | - | -
-`[widgetWidth]` | 指定 `nz-number` 宽度 | `number` | `90`
+| 成员 | 说明 | 类型 | 默认值 |
+|----|----|----|-----|
+| `[prefix]` | 前缀，简化 `nzFormatter`、`nzParser` 的使用 | - | - |
+| `[unit]` | 单位，简化 `nzFormatter`、`nzParser` 的使用 | - | - |
+| `[formatter]` | 等同 `nzFormatter` | - | - |
+| `[parser]` | 等同 `nzParser` | - | - |
+| `[precision]` | 等同 `nzPrecision` | - | - |
+| `[widgetWidth]` | 指定 `nz-number` 宽度 | `number` | `90` |
+| `[hideStep]` | 隐藏步数操作区 | `boolean` | `false` |
diff --git a/packages/form/src/widgets/number/number.widget.html b/packages/form/src/widgets/number/number.widget.html
@@ -13,6 +13,7 @@
     [nzPrecision]="ui.precision"
     [nzPlaceHolder]="ui.placeholder || ''"
     [style.width.px]="ui.widgetWidth || 90"
+    [ngClass]="{ 'ant-input-number__hide-step': ui.hideStep }"
   >
   </nz-input-number>
 </sf-item-wrap>
diff --git a/packages/form/src/widgets/number/schema.ts b/packages/form/src/widgets/number/schema.ts
@@ -34,4 +34,11 @@ export interface SFNumberWidgetSchema extends SFUISchemaItem {
    * 指定 `nz-number` 宽度
    */
   widgetWidth?: number;
+
+  /**
+   * Hide step icon
+   *
+   * 隐藏步数操作区
+   */
+  hideStep?: boolean;
 }
diff --git a/packages/theme/system/antd/_input-number.less b/packages/theme/system/antd/_input-number.less
@@ -0,0 +1,10 @@
+/**
+  * Hide step icon
+  *
+  * 隐藏步数操作区
+  */
+.@{ant-prefix}-input-number__hide-step {
+  .@{ant-prefix}-input-number-handler-wrap {
+    visibility: hidden;
+  }
+}
diff --git a/packages/theme/system/antd/index.less b/packages/theme/system/antd/index.less
@@ -1,5 +1,6 @@
 @import './_link.less';
 
+@import './_input-number.less';
 @import './_card.less';
 @import './_drawer.less';
 @import './_form.less';