refactor(form): refining low-frequency widgets (#1668)

package.json

@@ -87,11 +87,12 @@
     "qrious": "^4.0.2",
     "@webcomponents/custom-elements": "^1.6.0",
     "aos": "^3.0.0-beta.6",
-    "@ng-util/monaco-editor": "^16.0.0",
+    "@ng-util/monaco-editor": "^16.0.1",
     "@nguniversal/express-engine": "^16.2.0",
     "express": "^4.18.2",
     "isutf8": "^4.0.0",
-    "@github/hotkey": "^2.0.1"
+    "@github/hotkey": "^2.0.1",
+    "ng-antd-color-picker": "^0.0.2"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^16.2.0",

packages/form/docs/customize.en-US.md

@@ -6,7 +6,7 @@ type: Documents
 
 ## Foreword
 
-`@delon/form` try our best to meet the needs of different environments, in addition to the built-in basic component widgets, you can further expand the requirements in two ways:
+`@delon/form` try our best to meet the needs of different environments, in addition to the built-in basic widgets (Some require manual registration), you can further expand the requirements in two ways:
 
 ## Custom widget in sf
 
@@ -18,15 +18,6 @@ Making a set of widgets for project can lead to faster development work.
 
 ### How to making widget
 
-**Third-party library**
-
-By default `@delon/form` implements some common third-party library widgets, which are called third-party component widgets. This widget exists in [widgets-third](https://github.com/ng-alain /delon/tree/master/packages/form/widgets-third) directory; you can use directly.
-
-| Name | Description | Document | Source |
-| ---- | ----------- | -------- | ------ |
-| `markdown` | Markdown Editor | [Document](/form/markdown) | [Source](https://github.com/ng-alain/delon/tree/master/packages/form/widgets-third/markdown) |
-| `tinymce` | Tinymce Editor | [Document](/form/tinymce) | [Source](https://github.com/ng-alain/delon/tree/master/packages/form/widgets-third/tinymce) |
-
 **Create widgets**
 
 A widget is a component. You only need to inherit `ControlWidget` to create a widget. For example:

packages/form/docs/customize.zh-CN.md

@@ -6,7 +6,7 @@ type: Documents
 
 ## 写在前面
 
-`@delon/form` 尽可能满足不同需求，除现有内置的十几种基础组件小部件外，可以通过以下两种方式进一步扩展需求：
+`@delon/form` 尽可能满足不同需求，除现有内置的十几种基础小部件(部分需要手动注册)外，可以通过以下两种方式进一步扩展需求：
 
 ## 自定义小部件
 
@@ -18,17 +18,6 @@ type: Documents
 
 ### 编写小部件
 
-**常见小部件库**
-
-默认情况下 @delon/form 实现了一些常见需求，但需要额外类库支持的，称它为第三方组件小部件，这一部分小部件存在于[widgets-third](https://github.com/ng-alain/delon/tree/master/packages/form/widgets-third)目录里；你可以直接复制使用。
-
-这些组件包括：
-
-| 名称 | 描述 | 文档 | 源代码 |
-| --- | ---- | ---- | ---- |
-| `markdown` | Markdown 编辑器 | [文档](/form/markdown) | [源代码](https://github.com/ng-alain/delon/tree/master/packages/form/widgets-third/markdown) |
-| `tinymce` | Tinymce 富文本框 | [文档](/form/tinymce) | [源代码](https://github.com/ng-alain/delon/tree/master/packages/form/widgets-third/tinymce) |
-
 **自己创建小部件**
 
 小部件就是一个组件，你只需要继承 `ControlWidget` 就相当于构建一个小部件，其结构如下：

packages/form/spec/base.spec.ts

@@ -75,10 +75,16 @@ export function builder(options?: {
   };
 }
 
-export function configureSFTestSuite(): void {
+export function configureSFTestSuite(options?: { imports?: NzSafeAny[] }): void {
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [NoopAnimationsModule, AlainThemeModule.forRoot(), DelonFormModule.forRoot(), HttpClientTestingModule],
+      imports: [
+        NoopAnimationsModule,
+        AlainThemeModule.forRoot(),
+        DelonFormModule.forRoot(),
+        HttpClientTestingModule,
+        ...(options?.imports ?? [])
+      ],
       declarations: [TestFormComponent]
     });
   });

packages/form/src/module.ts

@@ -3,59 +3,39 @@ 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 { NzCascaderModule } from 'ng-zorro-antd/cascader';
 import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
 import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
 import { NzFormModule } from 'ng-zorro-antd/form';
 import { NzGridModule } from 'ng-zorro-antd/grid';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 import { NzInputModule } from 'ng-zorro-antd/input';
 import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
-import { NzMentionModule } from 'ng-zorro-antd/mention';
 import { NzModalModule } from 'ng-zorro-antd/modal';
 import { NzRadioModule } from 'ng-zorro-antd/radio';
-import { NzRateModule } from 'ng-zorro-antd/rate';
 import { NzSelectModule } from 'ng-zorro-antd/select';
-import { NzSliderModule } from 'ng-zorro-antd/slider';
 import { NzSwitchModule } from 'ng-zorro-antd/switch';
-import { NzTagModule } from 'ng-zorro-antd/tag';
-import { NzTimePickerModule } from 'ng-zorro-antd/time-picker';
 import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
-import { NzTransferModule } from 'ng-zorro-antd/transfer';
-import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
-import { NzUploadModule } from 'ng-zorro-antd/upload';
 
 import { DelonLocaleModule } from '@delon/theme';
 import { AlainConfigService } from '@delon/util/config';
 
 const ZORROS = [
-  NzAutocompleteModule,
   NzButtonModule,
   NzCardModule,
-  NzCascaderModule,
   NzCheckboxModule,
   NzDatePickerModule,
   NzFormModule,
   NzGridModule,
   NzIconModule,
   NzInputModule,
   NzInputNumberModule,
-  NzMentionModule,
   NzModalModule,
   NzRadioModule,
-  NzRateModule,
   NzSelectModule,
-  NzSliderModule,
   NzSwitchModule,
-  NzTagModule,
-  NzTimePickerModule,
-  NzToolTipModule,
-  NzTransferModule,
-  NzTreeSelectModule,
-  NzUploadModule
+  NzToolTipModule
 ];
 
 import { SFFixedDirective } from './sf-fixed.directive';
@@ -71,50 +51,30 @@ 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 { CascaderWidget } from './widgets/cascader/cascader.widget';
 import { CheckboxWidget } from './widgets/checkbox/checkbox.widget';
 import { CustomWidget } from './widgets/custom/custom.widget';
 import { DateWidget } from './widgets/date/date.widget';
-import { MentionWidget } from './widgets/mention/mention.widget';
 import { NumberWidget } from './widgets/number/number.widget';
 import { NzWidgetRegistry } from './widgets/nz-widget.registry';
 import { ObjectWidget } from './widgets/object/object.widget';
 import { RadioWidget } from './widgets/radio/radio.widget';
-import { RateWidget } from './widgets/rate/rate.widget';
 import { SelectWidget } from './widgets/select/select.widget';
-import { SliderWidget } from './widgets/slider/slider.widget';
 import { StringWidget } from './widgets/string/string.widget';
-import { TagWidget } from './widgets/tag/tag.widget';
 import { TextWidget } from './widgets/text/text.widget';
 import { TextareaWidget } from './widgets/textarea/textarea.widget';
-import { TimeWidget } from './widgets/time/time.widget';
-import { TransferWidget } from './widgets/transfer/transfer.widget';
-import { TreeSelectWidget } from './widgets/tree-select/tree-select.widget';
-import { UploadWidget } from './widgets/upload/upload.widget';
 
 const WIDGETS = [
   ObjectWidget,
   ArrayWidget,
   StringWidget,
   NumberWidget,
   DateWidget,
-  TimeWidget,
   RadioWidget,
   CheckboxWidget,
   BooleanWidget,
   TextareaWidget,
   SelectWidget,
-  TreeSelectWidget,
-  TagWidget,
-  UploadWidget,
-  TransferWidget,
-  SliderWidget,
-  RateWidget,
-  AutoCompleteWidget,
-  CascaderWidget,
-  MentionWidget,
   CustomWidget,
   TextWidget
 ];

packages/form/src/widgets/array/index.en-US.md

@@ -2,6 +2,7 @@
 title: array
 subtitle: Array
 type: Widgets
+order: 2
 ---
 
 Create array object, it's only valid when `schema.type="array"`.

packages/form/src/widgets/array/index.zh-CN.md

@@ -2,6 +2,7 @@
 title: array
 subtitle: 数组
 type: Widgets
+order: 2
 ---
 
 创建对象数组，只对 `schema.type="array"` 时有效。

packages/form/src/widgets/boolean/index.en-US.md

@@ -2,6 +2,7 @@
 title: boolean
 subtitle: Switch
 type: Widgets
+order: 4
 ---
 
 Switching Selector.

packages/form/src/widgets/boolean/index.zh-CN.md

@@ -2,6 +2,7 @@
 title: boolean
 subtitle: 开关
 type: Widgets
+order: 4
 ---
 
 开关选择器

packages/form/src/widgets/checkbox/demo/simple.md

@@ -15,7 +15,8 @@ Simplest of usage.
 
 ```ts
 import { Component } from '@angular/core';
-import { SFCascaderWidgetSchema, SFCheckboxWidgetSchema, SFSchema } from '@delon/form';
+import { SFCheckboxWidgetSchema, SFSchema } from '@delon/form';
+import type { SFCascaderWidgetSchema } from '@delon/form/widgets/cascader';
 import { NzMessageService } from 'ng-zorro-antd/message';
 import { of, delay } from 'rxjs';
 

packages/form/src/widgets/custom/demo/simple.md

@@ -42,7 +42,7 @@ import { NzMessageService } from 'ng-zorro-antd/message';
         </div>
       </ng-template>
       <ng-template sf-template="qr" let-i let-ui="ui" let-schema="schema">
-        <qr [value]="i.value"></qr>
+        <nz-qrcode [nzValue]="i.value" />
       </ng-template>
     </sf>
   `

packages/form/src/widgets/index.ts

@@ -8,36 +8,15 @@ export * from './number/number.widget';
 export * from './number/schema';
 export * from './date/date.widget';
 export * from './date/schema';
-export * from './time/time.widget';
-export * from './time/schema';
 export * from './radio/radio.widget';
 export * from './radio/schema';
 export * from './checkbox/checkbox.widget';
 export * from './checkbox/schema';
 export * from './boolean/boolean.widget';
-export * from './cascader/schema';
 export * from './textarea/textarea.widget';
 export * from './textarea/schema';
 export * from './select/select.widget';
 export * from './select/schema';
-export * from './tree-select/tree-select.widget';
-export * from './tree-select/schema';
-export * from './tag/tag.widget';
-export * from './tag/schema';
-export * from './upload/upload.widget';
-export * from './upload/schema';
-export * from './transfer/transfer.widget';
-export * from './transfer/schema';
-export * from './slider/slider.widget';
-export * from './slider/schema';
-export * from './rate/rate.widget';
-export * from './rate/schema';
-export * from './autocomplete/autocomplete.widget';
-export * from './autocomplete/schema';
-export * from './cascader/cascader.widget';
-export * from './cascader/schema';
-export * from './mention/mention.widget';
-export * from './mention/schema';
 export * from './text/text.widget';
 export * from './text/schema';
 export * from './custom/custom.widget';

packages/form/src/widgets/number/index.en-US.md

@@ -2,6 +2,7 @@
 title: number
 subtitle: Input Number
 type: Widgets
+order: 5
 ---
 
 Enter a number within certain range with the mouse or keyboard.