From 4ed56fcd217b79db846f0aee2d927f094812adbd Mon Sep 17 00:00:00 2001 From: cipchk Date: Sat, 21 Oct 2023 15:37:36 +0800 Subject: [PATCH] chore: add autocomplete --- packages/form/src/module.ts | 4 -- .../autocomplete/autocomplete.widget.html | 27 ------------ packages/form/src/widgets/index.ts | 2 - .../form/src/widgets/nz-widget.registry.ts | 2 - .../widgets/autocomplete/demo/simple.md | 3 +- .../widgets/autocomplete/index.en-US.md | 6 ++- packages/form/widgets/autocomplete/index.ts | 22 ++++++++++ .../widgets/autocomplete/index.zh-CN.md | 6 ++- .../{src => }/widgets/autocomplete/schema.ts | 6 +-- .../autocomplete/widget.spec.ts} | 10 ++--- .../autocomplete/widget.ts} | 44 ++++++++++++++++--- .../shared/json-schema/json-schema.module.ts | 2 + 12 files changed, 81 insertions(+), 53 deletions(-) delete mode 100644 packages/form/src/widgets/autocomplete/autocomplete.widget.html rename packages/form/{src => }/widgets/autocomplete/demo/simple.md (91%) rename packages/form/{src => }/widgets/autocomplete/index.en-US.md (90%) create mode 100644 packages/form/widgets/autocomplete/index.ts rename packages/form/{src => }/widgets/autocomplete/index.zh-CN.md (90%) rename packages/form/{src => }/widgets/autocomplete/schema.ts (89%) rename packages/form/{src/widgets/autocomplete/autocomplete.widget.spec.ts => widgets/autocomplete/widget.spec.ts} (96%) rename packages/form/{src/widgets/autocomplete/autocomplete.widget.ts => widgets/autocomplete/widget.ts} (74%) diff --git a/packages/form/src/module.ts b/packages/form/src/module.ts index e64509fba..e67ba6a9c 100644 --- a/packages/form/src/module.ts +++ b/packages/form/src/module.ts @@ -3,7 +3,6 @@ import { CommonModule } from '@angular/common'; import { ModuleWithProviders, NgModule, NgZone } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { NzAutocompleteModule } from 'ng-zorro-antd/auto-complete'; import { NzButtonModule } from 'ng-zorro-antd/button'; import { NzCardModule } from 'ng-zorro-antd/card'; import { NzCheckboxModule } from 'ng-zorro-antd/checkbox'; @@ -23,7 +22,6 @@ import { DelonLocaleModule } from '@delon/theme'; import { AlainConfigService } from '@delon/util/config'; const ZORROS = [ - NzAutocompleteModule, NzButtonModule, NzCardModule, NzCheckboxModule, @@ -53,7 +51,6 @@ const COMPONENTS = [SFComponent, SFItemComponent, SFItemWrapComponent, SFTemplat import { WidgetRegistry } from './widget.factory'; import { ArrayWidget } from './widgets/array/array.widget'; -import { AutoCompleteWidget } from './widgets/autocomplete/autocomplete.widget'; import { BooleanWidget } from './widgets/boolean/boolean.widget'; import { CheckboxWidget } from './widgets/checkbox/checkbox.widget'; import { CustomWidget } from './widgets/custom/custom.widget'; @@ -78,7 +75,6 @@ const WIDGETS = [ BooleanWidget, TextareaWidget, SelectWidget, - AutoCompleteWidget, CustomWidget, TextWidget ]; diff --git a/packages/form/src/widgets/autocomplete/autocomplete.widget.html b/packages/form/src/widgets/autocomplete/autocomplete.widget.html deleted file mode 100644 index 128281dcd..000000000 --- a/packages/form/src/widgets/autocomplete/autocomplete.widget.html +++ /dev/null @@ -1,27 +0,0 @@ - - - - {{ i.label }} - - diff --git a/packages/form/src/widgets/index.ts b/packages/form/src/widgets/index.ts index e9804ef1e..7045bcf23 100644 --- a/packages/form/src/widgets/index.ts +++ b/packages/form/src/widgets/index.ts @@ -17,8 +17,6 @@ export * from './textarea/textarea.widget'; export * from './textarea/schema'; export * from './select/select.widget'; export * from './select/schema'; -export * from './autocomplete/autocomplete.widget'; -export * from './autocomplete/schema'; export * from './text/text.widget'; export * from './text/schema'; export * from './custom/custom.widget'; diff --git a/packages/form/src/widgets/nz-widget.registry.ts b/packages/form/src/widgets/nz-widget.registry.ts index 464c9ace2..910a00de4 100644 --- a/packages/form/src/widgets/nz-widget.registry.ts +++ b/packages/form/src/widgets/nz-widget.registry.ts @@ -1,5 +1,4 @@ import { ArrayWidget } from './array/array.widget'; -import { AutoCompleteWidget } from './autocomplete/autocomplete.widget'; import { BooleanWidget } from './boolean/boolean.widget'; import { CheckboxWidget } from './checkbox/checkbox.widget'; import { CustomWidget } from './custom/custom.widget'; @@ -30,7 +29,6 @@ export class NzWidgetRegistry extends WidgetRegistry { this.register('boolean', BooleanWidget); this.register('textarea', TextareaWidget); this.register('select', SelectWidget); - this.register('autocomplete', AutoCompleteWidget); this.register('custom', CustomWidget); this.setDefault(StringWidget); diff --git a/packages/form/src/widgets/autocomplete/demo/simple.md b/packages/form/widgets/autocomplete/demo/simple.md similarity index 91% rename from packages/form/src/widgets/autocomplete/demo/simple.md rename to packages/form/widgets/autocomplete/demo/simple.md index 93a117f61..b55386039 100644 --- a/packages/form/src/widgets/autocomplete/demo/simple.md +++ b/packages/form/widgets/autocomplete/demo/simple.md @@ -15,7 +15,8 @@ Simplest of usage. ```ts import { Component } from '@angular/core'; -import { SFAutoCompleteWidgetSchema, SFSchema } from '@delon/form'; +import { SFSchema } from '@delon/form'; +import type { SFAutoCompleteWidgetSchema } from '@delon/form/widgets/autocomplete'; import { NzMessageService } from 'ng-zorro-antd/message'; import { of } from 'rxjs'; diff --git a/packages/form/src/widgets/autocomplete/index.en-US.md b/packages/form/widgets/autocomplete/index.en-US.md similarity index 90% rename from packages/form/src/widgets/autocomplete/index.en-US.md rename to packages/form/widgets/autocomplete/index.en-US.md index b2d5042f8..8425bf704 100644 --- a/packages/form/src/widgets/autocomplete/index.en-US.md +++ b/packages/form/widgets/autocomplete/index.en-US.md @@ -1,11 +1,15 @@ --- title: autocomplete subtitle: Autocomplete -type: Widgets +type: Non-built-in widgets --- Input complete automatically. +## Import module + +Non-built-in modules, Should be import `AutoCompleteWidgetModule` in [json-schema.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/shared/json-schema/json-schema.module.ts#L11). + ## Data Source **Static** diff --git a/packages/form/widgets/autocomplete/index.ts b/packages/form/widgets/autocomplete/index.ts new file mode 100644 index 000000000..6229fa2be --- /dev/null +++ b/packages/form/widgets/autocomplete/index.ts @@ -0,0 +1,22 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { FormsModule } from '@angular/forms'; + +import { DelonFormModule, WidgetRegistry } from '@delon/form'; +import { NzAutocompleteModule } from 'ng-zorro-antd/auto-complete'; +import { NzInputModule } from 'ng-zorro-antd/input'; + +import { AutoCompleteWidget } from './widget'; + +export * from './widget'; +export * from './schema'; + +@NgModule({ + imports: [FormsModule, DelonFormModule, CommonModule, NzInputModule, NzAutocompleteModule], + declarations: [AutoCompleteWidget] +}) +export class AutoCompleteWidgetModule { + constructor(widgetRegistry: WidgetRegistry) { + widgetRegistry.register(AutoCompleteWidget.KEY, AutoCompleteWidget); + } +} diff --git a/packages/form/src/widgets/autocomplete/index.zh-CN.md b/packages/form/widgets/autocomplete/index.zh-CN.md similarity index 90% rename from packages/form/src/widgets/autocomplete/index.zh-CN.md rename to packages/form/widgets/autocomplete/index.zh-CN.md index 2baeea393..859f4e686 100644 --- a/packages/form/src/widgets/autocomplete/index.zh-CN.md +++ b/packages/form/widgets/autocomplete/index.zh-CN.md @@ -1,11 +1,15 @@ --- title: autocomplete subtitle: 自动完成 -type: Widgets +type: Non-built-in widgets --- 输入框自动完成功能。 +## 导入模块 + +非内置模块，需要额外在 [json-schema.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/shared/json-schema/json-schema.module.ts#L11) 导入 `AutoCompleteWidgetModule`。 + ## 数据源说明 **静态** diff --git a/packages/form/src/widgets/autocomplete/schema.ts b/packages/form/widgets/autocomplete/schema.ts similarity index 89% rename from packages/form/src/widgets/autocomplete/schema.ts rename to packages/form/widgets/autocomplete/schema.ts index dfa524321..abe50891f 100644 --- a/packages/form/src/widgets/autocomplete/schema.ts +++ b/packages/form/widgets/autocomplete/schema.ts @@ -1,11 +1,9 @@ import { Observable } from 'rxjs'; -import { NzAutocompleteOptionComponent } from 'ng-zorro-antd/auto-complete'; +import type { SFSchemaEnum, SFSchemaEnumType, SFUISchemaItem } from '@delon/form'; +import type { NzAutocompleteOptionComponent } from 'ng-zorro-antd/auto-complete'; import type { CompareWith } from 'ng-zorro-antd/core/types'; -import type { SFSchemaEnum, SFSchemaEnumType } from '../../schema'; -import type { SFUISchemaItem } from '../../schema/ui'; - export interface SFAutoCompleteWidgetSchema extends SFUISchemaItem { /** * 异步静态数据源 diff --git a/packages/form/src/widgets/autocomplete/autocomplete.widget.spec.ts b/packages/form/widgets/autocomplete/widget.spec.ts similarity index 96% rename from packages/form/src/widgets/autocomplete/autocomplete.widget.spec.ts rename to packages/form/widgets/autocomplete/widget.spec.ts index dc67d71d2..3a7e75c33 100644 --- a/packages/form/src/widgets/autocomplete/autocomplete.widget.spec.ts +++ b/packages/form/widgets/autocomplete/widget.spec.ts @@ -2,15 +2,15 @@ import { DebugElement } from '@angular/core'; import { ComponentFixture, fakeAsync, TestBed } from '@angular/core/testing'; import { of } from 'rxjs'; +import { mergeConfig, SFSchema, SFSchemaEnum } from '@delon/form'; import { createTestContext } from '@delon/testing'; import { AlainConfigService } from '@delon/util/config'; import { NzSafeAny } from 'ng-zorro-antd/core/types'; -import { AutoCompleteWidget } from './autocomplete.widget'; +import { AutoCompleteWidgetModule } from './index'; import { SFAutoCompleteWidgetSchema } from './schema'; -import { configureSFTestSuite, SFPage, TestFormComponent } from '../../../spec/base.spec'; -import { SFSchema, SFSchemaEnum } from '../../../src/schema/index'; -import { mergeConfig } from '../../config'; +import { AutoCompleteWidget } from './widget'; +import { configureSFTestSuite, SFPage, TestFormComponent } from '../../spec/base.spec'; describe('form: widget: autocomplete', () => { let fixture: ComponentFixture; @@ -19,7 +19,7 @@ describe('form: widget: autocomplete', () => { let page: SFPage; const widget = 'autocomplete'; - configureSFTestSuite(); + configureSFTestSuite({ imports: [AutoCompleteWidgetModule] }); beforeEach(() => { ({ fixture, dl, context } = createTestContext(TestFormComponent)); diff --git a/packages/form/src/widgets/autocomplete/autocomplete.widget.ts b/packages/form/widgets/autocomplete/widget.ts similarity index 74% rename from packages/form/src/widgets/autocomplete/autocomplete.widget.ts rename to packages/form/widgets/autocomplete/widget.ts index 2a0acb9fd..68c87215e 100644 --- a/packages/form/src/widgets/autocomplete/autocomplete.widget.ts +++ b/packages/form/widgets/autocomplete/widget.ts @@ -2,22 +2,54 @@ import { Component, ViewChild, ViewEncapsulation } from '@angular/core'; import { NgModel } from '@angular/forms'; import { Observable, of, debounceTime, map, mergeMap, startWith, takeUntil } from 'rxjs'; +import { ControlUIWidget, SFSchemaEnum, SFValue, getCopyEnum, getEnum, toBool } from '@delon/form'; import { NzAutocompleteOptionComponent } from 'ng-zorro-antd/auto-complete'; import type { NzSafeAny } from 'ng-zorro-antd/core/types'; -import { SFAutoCompleteWidgetSchema } from './schema'; -import { SFValue } from '../../interface'; -import { SFSchemaEnum } from '../../schema'; -import { getCopyEnum, getEnum, toBool } from '../../utils'; -import { ControlUIWidget } from '../../widget'; +import type { SFAutoCompleteWidgetSchema } from './schema'; @Component({ selector: 'sf-autocomplete', - templateUrl: './autocomplete.widget.html', + template: ` + + + {{ i.label }} + + `, preserveWhitespaces: false, encapsulation: ViewEncapsulation.None }) export class AutoCompleteWidget extends ControlUIWidget { + static readonly KEY = 'autocomplete'; + i: NzSafeAny = {}; list!: Observable; typing: string = ''; diff --git a/src/app/shared/json-schema/json-schema.module.ts b/src/app/shared/json-schema/json-schema.module.ts index 51a383bed..f8de98c81 100644 --- a/src/app/shared/json-schema/json-schema.module.ts +++ b/src/app/shared/json-schema/json-schema.module.ts @@ -1,6 +1,7 @@ import { NgModule } from '@angular/core'; import { DelonFormModule, WidgetRegistry } from '@delon/form'; +import { AutoCompleteWidgetModule } from '@delon/form/widgets/autocomplete'; import { CascaderWidgetModule } from '@delon/form/widgets/cascader'; import { MentionWidgetModule } from '@delon/form/widgets/mention'; import { RateWidgetModule } from '@delon/form/widgets/rate'; @@ -21,6 +22,7 @@ export const SCHEMA_THIRDS_COMPONENTS = [TinymceWidget]; imports: [ SharedModule, DelonFormModule.forRoot(), + AutoCompleteWidgetModule, CascaderWidgetModule, TransferWidgetModule, MentionWidgetModule,