fix(form): async ng-zorro-antd (#1584)

ng-alain · Feb 17, 2023 · 5774c55 · 5774c55
1 parent fa8087f
commit 5774c55
Show file tree

Hide file tree

Showing 22 changed files with 170 additions and 55 deletions.
diff --git a/packages/form/src/widgets/autocomplete/autocomplete.widget.html b/packages/form/src/widgets/autocomplete/autocomplete.widget.html
@@ -17,6 +17,9 @@
     [nzBackfill]="i.backfill"
     [nzDefaultActiveFirstOption]="i.defaultActiveFirstOption"
     [nzWidth]="i.width"
+    [nzOverlayStyle]="ui.overlayStyle || {}"
+    [nzOverlayClassName]="ui.overlayClassName || ''"
+    [compareWith]="i.compareWith"
     (selectionChange)="updateValue($event)"
   >
     <nz-auto-option *ngFor="let i of list | async" [nzValue]="i" [nzLabel]="i.label"> {{ i.label }} </nz-auto-option>

diff --git a/packages/form/src/widgets/autocomplete/autocomplete.widget.ts b/packages/form/src/widgets/autocomplete/autocomplete.widget.ts
@@ -44,11 +44,12 @@ export class AutoCompleteWidget extends ControlUIWidget<SFAutoCompleteWidgetSche
   }
 
   afterViewInit(): void {
-    const { backfill, defaultActiveFirstOption, nzWidth, filterOption, asyncData } = this.ui;
+    const { backfill, defaultActiveFirstOption, nzWidth, filterOption, asyncData, compareWith } = this.ui;
     this.i = {
       backfill: toBool(backfill, false),
       defaultActiveFirstOption: toBool(defaultActiveFirstOption, true),
-      width: nzWidth || undefined
+      width: nzWidth || undefined,
+      compareWith: compareWith || ((o1, o2) => o1 === o2)
     };
 
     let filterOptionValue = filterOption == null ? true : filterOption;

diff --git a/packages/form/src/widgets/autocomplete/index.en-US.md b/packages/form/src/widgets/autocomplete/index.en-US.md
@@ -41,3 +41,6 @@ Every filter after data got is filtered by `filterOption`, data source is from `
 | `[backfill]` | Fill selected value into input when keyboard selection options is used | `boolean` | `false` |
 | `[nzWidth]` | Customize width, unit is px | `number` | Trigger width of element |
 | `[change]` | Change callback | `(item: NzAutocompleteOptionComponent, orgData: SFSchemaEnum) => void` | - |
+| `[overlayClassName]` | Class name of the dropdown root element | `string` | - |
+| `[overlayStyle]` | Style of the dropdown root element | `object` | - |
+| `[compareWith]` | Same as [SelectControlValueAccessor](https://angular.io/api/forms/SelectControlValueAccessor#caveat-option-selection) | `(o1: any, o2: any) => boolean` | `(o1: any, o2: any) => o1===o2` |
diff --git a/packages/form/src/widgets/autocomplete/index.zh-CN.md b/packages/form/src/widgets/autocomplete/index.zh-CN.md
@@ -41,3 +41,6 @@ type: Widgets
 | `[backfill]` | 使用键盘选择选项的时候把选中项回填到输入框中 | `boolean` | `false` |
 | `[nzWidth]` | 自定义宽度单位 px | `number` | 触发元素宽度 |
 | `[change]` | 变更回调 | `(item: NzAutocompleteOptionComponent, orgData: SFSchemaEnum) => void` | - |
+| `[overlayClassName]` | 下拉根元素的类名称 | `string` | - |
+| `[overlayStyle]` | 下拉根元素的样式 | `object` | - |
+| `[compareWith]` | 与 [SelectControlValueAccessor](https://angular.io/api/forms/SelectControlValueAccessor#caveat-option-selection) 相同 | `(o1: any, o2: any) => boolean` | `(o1: any, o2: any) => o1===o2` |
diff --git a/packages/form/src/widgets/autocomplete/schema.ts b/packages/form/src/widgets/autocomplete/schema.ts
@@ -1,9 +1,10 @@
 import { Observable } from 'rxjs';
 
 import { NzAutocompleteOptionComponent } from 'ng-zorro-antd/auto-complete';
+import type { CompareWith } from 'ng-zorro-antd/core/types';
 
-import { SFSchemaEnum, SFSchemaEnumType } from '../../schema';
-import { SFUISchemaItem } from '../../schema/ui';
+import type { SFSchemaEnum, SFSchemaEnumType } from '../../schema';
+import type { SFUISchemaItem } from '../../schema/ui';
 
 export interface SFAutoCompleteWidgetSchema extends SFUISchemaItem {
   /**
@@ -51,4 +52,19 @@ export interface SFAutoCompleteWidgetSchema extends SFUISchemaItem {
    * 变更回调
    */
   change?: (item: NzAutocompleteOptionComponent, orgData: SFSchemaEnum) => void;
+
+  /**
+   * 下拉根元素的类名称
+   */
+  overlayClassName?: string;
+
+  /**
+   * 下拉根元素的样式
+   */
+  overlayStyle?: { [key: string]: string };
+
+  /**
+   * 与 [SelectControlValueAccessor](https://angular.io/api/forms/SelectControlValueAccessor#caveat-option-selection) 相同
+   */
+  compareWith?: CompareWith;
 }
diff --git a/packages/form/src/widgets/boolean/boolean.widget.html b/packages/form/src/widgets/boolean/boolean.widget.html
@@ -6,6 +6,7 @@
     [nzSize]="ui.size!"
     [nzCheckedChildren]="ui.checkedChildren!"
     [nzUnCheckedChildren]="ui.unCheckedChildren!"
+    [nzLoading]="ui.loading"
   >
   </nz-switch>
 </sf-item-wrap>
diff --git a/packages/form/src/widgets/boolean/index.en-US.md b/packages/form/src/widgets/boolean/index.en-US.md
@@ -21,3 +21,4 @@ Switching Selector.
 | `[size]`              | Size of the `nz-switch`                         | `default,small` | `default` |
 | `[checkedChildren]`   | Content to be shown when the state is checked   | `string`        | -         |
 | `[unCheckedChildren]` | Content to be shown when the state is unchecked | `string`        | -         |
+| `[loading]` | Loading state of switch | `boolean` | `false` |
diff --git a/packages/form/src/widgets/boolean/index.zh-CN.md b/packages/form/src/widgets/boolean/index.zh-CN.md
@@ -21,3 +21,4 @@ type: Widgets
 | `[size]`              | 大小，等同 `nzSize` | `default,small` | `default` |
 | `[checkedChildren]`   | 选中时的内容        | `string`        | -         |
 | `[unCheckedChildren]` | 非选中时的内容      | `string`        | -         |
+| `[loading]` | 加载中的开关 | `boolean` | `false` |
diff --git a/packages/form/src/widgets/boolean/schema.ts b/packages/form/src/widgets/boolean/schema.ts
@@ -19,4 +19,9 @@ export interface SFBooleanWidgetSchema extends SFUISchemaItem {
    * Content to be shown when the state is unchecked
    */
   unCheckedChildren?: string | TemplateRef<void>;
+
+  /**
+   * Loading state of switch
+   */
+  loading?: boolean;
 }
diff --git a/packages/form/src/widgets/date/date.widget.html b/packages/form/src/widgets/date/date.widget.html
@@ -82,6 +82,8 @@
       [nzRenderExtraFooter]="ui.renderExtraFooter"
       [nzRanges]="ui.ranges"
       [nzShowTime]="ui.showTime"
+      [nzSeparator]="ui.separator"
+      [nzShowWeekNumber]="ui.showWeekNumber || false"
       [nzMode]="ui.rangeMode"
       [nzInputReadOnly]="ui.inputReadOnly"
       [nzInline]="ui.inline!"
@@ -108,6 +110,7 @@
       [nzRenderExtraFooter]="ui.renderExtraFooter"
       [nzShowTime]="ui.showTime"
       [nzShowToday]="i.showToday"
+      [nzShowWeekNumber]="ui.showWeekNumber || false"
       [nzInputReadOnly]="ui.inputReadOnly"
       [nzInline]="ui.inline!"
       (nzOnOk)="_ok($event)"

diff --git a/packages/form/src/widgets/date/demo/range.md b/packages/form/src/widgets/date/demo/range.md
@@ -15,55 +15,57 @@ A simple start & end date range, **Note: ** `end` still needs define in schema,
 
 ```ts
 import { Component } from '@angular/core';
-import { SFDateWidgetSchema, SFSchema } from '@delon/form';
+
 import { subWeeks } from 'date-fns';
+
+import { SFDateWidgetSchema, 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 = {
     properties: {
       start: {
         type: 'string',
-        ui: { widget: 'date', end: 'end' } as SFDateWidgetSchema,
-        default: new Date(),
+        ui: { widget: 'date', end: 'end', separator: '到' } as SFDateWidgetSchema,
+        default: new Date()
       },
       end: {
         type: 'string',
-        default: subWeeks(new Date(), 6),
+        default: subWeeks(new Date(), 6)
       },
       startWeek: {
         type: 'string',
         ui: { widget: 'date', rangeMode: 'week', end: 'endWeek' } as SFDateWidgetSchema,
-        default: new Date(),
+        default: new Date()
       },
       endWeek: {
         type: 'string',
-        default: subWeeks(new Date(), 6),
+        default: subWeeks(new Date(), 6)
       },
       startMonth: {
         type: 'string',
         ui: { widget: 'date', rangeMode: 'month', end: 'endMonth' } as SFDateWidgetSchema,
-        default: new Date(),
+        default: new Date()
       },
       endMonth: {
         type: 'string',
-        default: subWeeks(new Date(), 6),
+        default: subWeeks(new Date(), 6)
       },
       startYear: {
         type: 'string',
         ui: { widget: 'date', rangeMode: 'year', end: 'endYear' } as SFDateWidgetSchema,
-        default: new Date(),
+        default: new Date()
       },
       endYear: {
         type: 'string',
-        default: subWeeks(new Date(), 6),
-      },
+        default: subWeeks(new Date(), 6)
+      }
     },
-    required: ['start'],
+    required: ['start']
   };
 
   constructor(private msg: NzMessageService) {}

diff --git a/packages/form/src/widgets/date/index.en-US.md b/packages/form/src/widgets/date/index.en-US.md
@@ -52,5 +52,7 @@ To select or input a date.
 | `[showToday]` | whether to show "Today" button | `boolean` | `true` |
 | `[inputReadOnly]` | Set the readonly attribute of the input tag (avoids virtual keyboard on touch devices) | `boolean` | `false` |
 | `[inline]` | Inline mode of the date picker | `boolean` | `false` |
+| `[separator]` | separator | `string, TemplateRef` | `'~'` |
+| `[showWeekNumber]` | whether to show the week number on each row (Only supported by date picker. Week picker always shows week numbers) | `boolean` | `false` |
 | `[onOk]` | callback when click ok button | `(data: Date | Date[]) => void` | - |
 | `[change]` | Date change callback | `(data: Date | Date[]) => void` | - |
diff --git a/packages/form/src/widgets/date/index.zh-CN.md b/packages/form/src/widgets/date/index.zh-CN.md
@@ -53,5 +53,7 @@ type: Widgets
 | `[showToday]` | 是否展示“今天”按钮 | `boolean` | `true` |
 | `[inputReadOnly]` | 为 input 标签设置只读属性（避免在移动设备上触发小键盘） | `boolean` | `false` |
 | `[inline]` | 内联模式 | `boolean` | `false` |
+| `[separator]` | 分隔符 | `string, TemplateRef` | `'~'` |
+| `[showWeekNumber]` | 是否在每一行显示周数（仅日期选择器支持。周选择器始终显示周数） | `boolean` | `false` |
 | `[onOk]` | 点击确定按钮的回调 | `(data: Date | Date[]) => void` | - |
 | `[change]` | 时间发生变化的回调 | `(data: Date | Date[]) => void` | - |
diff --git a/packages/form/src/widgets/date/schema.ts b/packages/form/src/widgets/date/schema.ts
@@ -1,3 +1,5 @@
+import { TemplateRef } from '@angular/core';
+
 import type { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { DisabledDateFn, DisabledTimeFn, NzDatePickerSizeType, SupportTimeOptions } from 'ng-zorro-antd/date-picker';
 import { NzDatePickerI18nInterface } from 'ng-zorro-antd/i18n';
@@ -105,6 +107,16 @@ export interface SFDateWidgetSchema extends SFUISchemaItem {
    */
   inputReadOnly?: boolean;
 
+  /**
+   * separator
+   */
+  separator?: string | TemplateRef<NzSafeAny>;
+
+  /**
+   * Whether to show the week number on each row (Only supported by date picker. Week picker always shows week numbers)
+   */
+  showWeekNumber?: boolean;
+
   /**
    * Callback when click ok button
    */

diff --git a/packages/form/src/widgets/select/schema.ts b/packages/form/src/widgets/select/schema.ts
@@ -49,7 +49,7 @@ export interface SFSelectWidgetSchema extends SFUISchemaItem {
   /**
    * 下拉菜单的 className 属性
    */
-  dropdownClassName?: string;
+  dropdownClassName?: string | string[];
 
   /**
    * 下拉菜单和选择器同宽，默认：`true`

diff --git a/packages/form/src/widgets/string/schema.ts b/packages/form/src/widgets/string/schema.ts
@@ -1,3 +1,4 @@
+import { TemplateRef } from '@angular/core';
 import { Observable } from 'rxjs';
 
 import type { NzSafeAny } from 'ng-zorro-antd/core/types';
@@ -28,42 +29,50 @@ export interface SFStringWidgetSchema extends SFUISchemaItem {
   /**
    * 前置标签，等同 `nzAddOnBefore`
    */
-  addOnBefore?: string;
+  addOnBefore?: string | TemplateRef<void>;
 
   /**
    * 后置标签，等同 `nzAddOnAfter`
    */
-  addOnAfter?: string;
+  addOnAfter?: string | TemplateRef<void>;
 
   /**
-   * 前置Icon，等同 `nzAddOnBeforeIcon`
+   * 带有前缀图标的 input，等同 `nzPrefix`
    */
-  addOnBeforeIcon?: string;
+  prefix?: string | TemplateRef<void>;
 
   /**
-   * 后置Icon，等同 `nzAddOnAfterIcon`
+   * 带有后缀图标的 input，等同 `nzSuffix`
    */
-  addOnAfterIcon?: string;
+  suffix?: string | TemplateRef<void>;
 
   /**
-   * 带有前缀图标的 input，等同 `nzPrefix`
+   * 前置Icon，等同 `nzAddOnBeforeIcon`
+   *
+   * @deprecated `nz-input` 可能未来不再支持
    */
-  prefix?: string;
+  addOnBeforeIcon?: string;
 
   /**
-   * 前缀图标，等同 `nzPrefixIcon`
+   * 后置Icon，等同 `nzAddOnAfterIcon`
+   *
+   * @deprecated `nz-input` 可能未来不再支持
    */
-  prefixIcon?: string;
+  addOnAfterIcon?: string;
 
   /**
-   * 带有后缀图标的 input，等同 `nzSuffix`
+   * 后缀图标，等同 `nzSuffixIcon`
+   *
+   * @deprecated `nz-input` 可能未来不再支持
    */
-  suffix?: string;
+  suffixIcon?: string;
 
   /**
-   * 后缀图标，等同 `nzSuffixIcon`
+   * 前缀图标，等同 `nzPrefixIcon`
+   *
+   * @deprecated `nz-input` 可能未来不再支持
    */
-  suffixIcon?: string;
+  prefixIcon?: string;
 
   /**
    * Whether hide border, Default: `false`

diff --git a/packages/form/src/widgets/textarea/demo/simple.md b/packages/form/src/widgets/textarea/demo/simple.md
@@ -15,12 +15,13 @@ Simplest of usage.
 
 ```ts
 import { Component } from '@angular/core';
+
 import { SFSchema, SFTextareaWidgetSchema } 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 = {
@@ -33,10 +34,18 @@ export class DemoComponent {
           autosize: { minRows: 2, maxRows: 6 },
           change: val => console.log('change', val),
           focus: ev => console.log('focus', ev),
-          blur: ev => console.log('blur', ev),
-        } as SFTextareaWidgetSchema,
+          blur: ev => console.log('blur', ev)
+        } as SFTextareaWidgetSchema
       },
-    },
+      max: {
+        type: 'string',
+        title: 'Max',
+        ui: {
+          widget: 'textarea',
+          maxCharacterCount: 100
+        } as SFTextareaWidgetSchema
+      }
+    }
   };
 
   constructor(private msg: NzMessageService) {}

diff --git a/packages/form/src/widgets/textarea/index.en-US.md b/packages/form/src/widgets/textarea/index.en-US.md
@@ -23,6 +23,8 @@ Textarea.
 | `[placeholder]` | placeholder of the input | `string` | - |
 | `[autosize]` | height autosize feature, can be set to `boolean` or an object `{ minRows: 2, maxRows: 6 }` | `boolean丨{ minRows: number, maxRows: number }` | `true` |
 | `[borderless]` | Whether hide border | `boolean` | `false` |
+| `[maxCharacterCount]` | `textarea` maximum character count displayed | `number` | - |
+| `[computeCharacterCount]` | customized `characterCount` computation function | `(v: string) => number` | `v => v.length` |
 | `[change]` | The content event for the Input. | `(val: string) => void` | - |
 | `[focus]` | The focus event for the Input. | `(e: FocusEvent) => void` | - |
 | `[blur]` | The blur event for the Input. | `(e: FocusEvent) => void` | - |
diff --git a/packages/form/src/widgets/textarea/index.zh-CN.md b/packages/form/src/widgets/textarea/index.zh-CN.md
@@ -23,6 +23,8 @@ type: Widgets
 | `[placeholder]` | 在文字框中显示提示讯息 | `string` | - |
 | `[autosize]` | 自适应内容高度，可设置为 `true|false` 或对象：`{ minRows: 2, maxRows: 6 }` | `Boolean|Object` | `true` |
 | `[borderless]` | 是否隐藏边框 | `boolean` | `false` |
+| `[maxCharacterCount]` | `textarea` 数字提示显示的最大值 | `number` | - |
+| `[computeCharacterCount]` | 自定义计算 `characterCount` 的函数 | `(v: string) => number` | `v => v.length` |
 | `[change]` | 内容变更事件 | `(val: string) => void` | - |
 | `[focus]` | 焦点事件 | `(e: FocusEvent) => void` | - |
 | `[blur]` | 失焦事件 | `(e: FocusEvent) => void` | - |
diff --git a/packages/form/src/widgets/textarea/schema.ts b/packages/form/src/widgets/textarea/schema.ts
@@ -21,6 +21,16 @@ export interface SFTextareaWidgetSchema extends SFUISchemaItem {
    */
   borderless?: boolean;
 
+  /**
+   * `textarea` maximum character count displayed
+   */
+  maxCharacterCount?: number;
+
+  /**
+   * Customized `characterCount` computation function | `(v: string) => number`
+   */
+  computeCharacterCount?: (v: string) => number;
+
   /**
    * 内容变更事件
    */