diff --git a/packages/form/src/widgets/autocomplete/autocomplete.widget.html b/packages/form/src/widgets/autocomplete/autocomplete.widget.html index 2b13ac59c6..128281dcd5 100644 --- 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)" > {{ i.label }} diff --git a/packages/form/src/widgets/autocomplete/autocomplete.widget.ts b/packages/form/src/widgets/autocomplete/autocomplete.widget.ts index 3edfa41ab1..ad4fbc3085 100644 --- 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 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 index d4055c3785..b2d5042f8c 100644 --- 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 index f4ec332e2d..2baeea393b 100644 --- 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 index 5243764b92..dfa5243218 100644 --- 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 index 0037418d02..2bf2eacefa 100644 --- 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" > diff --git a/packages/form/src/widgets/boolean/index.en-US.md b/packages/form/src/widgets/boolean/index.en-US.md index c0080b502f..e229751769 100644 --- 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 index bd6382d883..50b568ae47 100644 --- 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 index e49706d27a..d12b6b83d4 100644 --- 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; + + /** + * 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 index 47cff39261..e9d3b0146e 100644 --- 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 index 1190eae0dd..15cd00d329 100644 --- 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: ` `, + template: ` ` }) 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 index e0eb4ba6dc..d317050437 100644 --- 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 index e018800afa..272665dfd8 100644 --- 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 index e53cb7db12..8ae5e02a25 100644 --- 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; + + /** + * 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 index 80608e713a..5165ac84c0 100644 --- 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 index cc9263b76e..788cdec94e 100644 --- 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; /** * 后置标签，等同 `nzAddOnAfter` */ - addOnAfter?: string; + addOnAfter?: string | TemplateRef; /** - * 前置Icon，等同 `nzAddOnBeforeIcon` + * 带有前缀图标的 input，等同 `nzPrefix` */ - addOnBeforeIcon?: string; + prefix?: string | TemplateRef; /** - * 后置Icon，等同 `nzAddOnAfterIcon` + * 带有后缀图标的 input，等同 `nzSuffix` */ - addOnAfterIcon?: string; + suffix?: string | TemplateRef; /** - * 带有前缀图标的 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 index baf2a08002..806ea44581 100644 --- 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: ` `, + template: ` ` }) 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 index 097fdd8f7b..5fe9be01ad 100644 --- 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 index fd0d90c48c..e63f072345 100644 --- 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 index 4377a94cc3..cb05c110d4 100644 --- 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; + /** * 内容变更事件 */ diff --git a/packages/form/src/widgets/textarea/textarea.widget.html b/packages/form/src/widgets/textarea/textarea.widget.html index 8a4bdddb6a..396cd3b149 100644 --- a/packages/form/src/widgets/textarea/textarea.widget.html +++ b/packages/form/src/widgets/textarea/textarea.widget.html @@ -1,18 +1,44 @@ - + + + + + + + + + diff --git a/packages/form/src/widgets/textarea/textarea.widget.ts b/packages/form/src/widgets/textarea/textarea.widget.ts index 1f8052b636..8f426de235 100644 --- a/packages/form/src/widgets/textarea/textarea.widget.ts +++ b/packages/form/src/widgets/textarea/textarea.widget.ts @@ -15,9 +15,11 @@ export class TextareaWidget extends ControlUIWidget impl autosize: boolean | AutoSizeType = true; ngOnInit(): void { - const { autosize } = this.ui; - if (autosize != null) { - this.autosize = autosize; + if (this.autosize != null) { + this.autosize = this.autosize; + } + if (this.ui.computeCharacterCount == null) { + this.ui.computeCharacterCount = v => v.length; } }