chore: add autocomplete

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
 ];

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';

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);

packages/form/src/widgets/autocomplete/demo/simple.md → 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';
 

packages/form/src/widgets/autocomplete/index.en-US.md → 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**

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);
+  }
+}

packages/form/src/widgets/autocomplete/index.zh-CN.md → 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`。
+
 ## 数据源说明
 
 **静态**

packages/form/src/widgets/autocomplete/schema.ts → 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 {
   /**
    * 异步静态数据源

packages/form/src/widgets/autocomplete/autocomplete.widget.spec.ts → 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<TestFormComponent>;
@@ -19,7 +19,7 @@ describe('form: widget: autocomplete', () => {
   let page: SFPage;
   const widget = 'autocomplete';
 
-  configureSFTestSuite();
+  configureSFTestSuite({ imports: [AutoCompleteWidgetModule] });
 
   beforeEach(() => {
     ({ fixture, dl, context } = createTestContext(TestFormComponent));

packages/form/src/widgets/autocomplete/autocomplete.widget.ts → 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: `<sf-item-wrap
+    [id]="id"
+    [schema]="schema"
+    [ui]="ui"
+    [showError]="showError"
+    [error]="error"
+    [showTitle]="schema.title"
+  >
+    <input
+      nz-input
+      [nzAutocomplete]="auto"
+      [attr.id]="id"
+      [disabled]="disabled"
+      [attr.disabled]="disabled"
+      [nzSize]="ui.size!"
+      [(ngModel)]="typing"
+      (ngModelChange)="_setValue($event)"
+      [attr.maxLength]="schema.maxLength || null"
+      [attr.placeholder]="ui.placeholder"
+      autocomplete="off"
+    />
+    <nz-autocomplete
+      #auto
+      [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>
+    </nz-autocomplete>
+  </sf-item-wrap>`,
   preserveWhitespaces: false,
   encapsulation: ViewEncapsulation.None
 })
 export class AutoCompleteWidget extends ControlUIWidget<SFAutoCompleteWidgetSchema> {
+  static readonly KEY = 'autocomplete';
+
   i: NzSafeAny = {};
   list!: Observable<SFSchemaEnum[]>;
   typing: string = '';

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,