Merge branch 'v18'

EnochGao · Dec 23, 2024 · 8e9d453 · 8e9d453
2 parents 03219e2 + b491f37
commit 8e9d453
Show file tree

Hide file tree

Showing 40 changed files with 729 additions and 626 deletions.
diff --git a/.docgenirc.js b/.docgenirc.js
@@ -53,14 +53,14 @@ const docsLibs = [
  * @type {import('@docgeni/core').DocgeniConfig}
  */
 module.exports = {
-  mode: 'full',
-  theme: 'angular',
+  mode: "full",
+  theme: "angular",
   switchTheme: true,
-  title: 'ng-zorro-antd-extension',
-  description: 'ng zorro 拓展包',
-  siteProjectName: 'docs-site',
-  logoUrl: 'https://avatars.githubusercontent.com/u/41459067?v=4',
-  repoUrl: 'https://github.com/EnochGao/ng-zorro-antd-extension',
+  title: "ng-zorro-antd-extension",
+  description: "ng zorro 拓展包",
+  siteProjectName: "docs-site",
+  logoUrl: "assets/images/logo.png",
+  repoUrl: "https://github.com/EnochGao/ng-zorro-antd-extension",
   footer:
     'Open-source MIT Licensed | Copyright © 2022-present Powered by EnochGao',
   navs: [

diff --git a/README-zh_CN.md b/README-zh_CN.md
@@ -79,6 +79,6 @@ npm install [email protected] --save
 npm install [email protected] --save
 ```
 
-注意：v13.0.0(只包含多选框，简单表格，映射管道)，推荐使用最新版本，具体 feature 请查看组件文档中基本使用下的版本
+注意：v13.0.0(只包含多选框，简单表格，映射管道)，推荐使用最新版本，具体 feature 请查看组件文档中使用下的版本
 
 欢迎 star fork pr
diff --git a/components/README-zh_CN.md b/components/README-zh_CN.md
@@ -73,6 +73,6 @@ export class AppModule {}
 npm install [email protected] --save
 ```
 
-注意：v13.0.0(只包含多选框，简单表格，映射管道)，推荐使用 15.0.0+以上版本，具体 feature 请查看组件文档中基本使用下的版本
+注意：v13.0.0(只包含多选框，简单表格，映射管道)，推荐使用 15.0.0+以上版本，具体 feature 请查看组件文档中使用下的版本
 
 欢迎在 [github](https://github.com/EnochGao/ng-zorro-antd-extension) star fork pr
diff --git a/components/acl/doc/zh-cn.md b/components/acl/doc/zh-cn.md
@@ -7,11 +7,11 @@ order: 5
 
 简单实现访问控制
 
-## 支持版本
+## 版本支持
 
-<label type="success">v15.9.0</label>
+<label type="success">v15.9.0+</label>
 
-## 基本使用
+## 使用
 
 ### 引入
 

diff --git a/components/blank-field/doc/zh-cn.md b/components/blank-field/doc/zh-cn.md
@@ -7,11 +7,11 @@ order: 5
 
 空表单控件，方便 angular 表单中自定义显示
 
-## 支持版本
+## 版本支持
 
 <label type="success">v13.3.0+</label>
 
-## 基本使用
+## 使用
 
 ### 引入
 

diff --git a/components/checkbox/doc/zh-cn.md b/components/checkbox/doc/zh-cn.md
@@ -9,11 +9,11 @@ order: 1
 
 提供`customFormateInFn`和`customFormateOutFn`自定义函数转换出入参格式
 
-## 支持版本
+## 版本支持
 
 <label type="success">v13.0.0+</label>
 
-## 基本使用
+## 使用
 
 ### 引入
 

diff --git a/components/configurable-query/api/zh-cn.js b/components/configurable-query/api/zh-cn.js
@@ -36,7 +36,7 @@ module.exports = [
       },
       {
         name: 'nzxSpan',
-        type: `number`,
+        type: 'number',
         description: '查询项所占栅格数',
       },
       {
@@ -46,12 +46,12 @@ module.exports = [
       },
       {
         name: 'nzxLSpan',
-        type: `number`,
+        type: 'number',
         description: '查询项label所占栅格数',
       },
       {
         name: 'nzxRSpan',
-        type: `number`,
+        type: 'number',
         description: '查询项控件所占栅格数',
       },
       {

diff --git a/components/configurable-query/configurable-query.component.html b/components/configurable-query/configurable-query.component.html
@@ -1,51 +1,66 @@
-<form #queyForm class="nzx-query-container" nz-form [formGroup]="queryForm">
-  <div nz-row [nzGutter]="nzxGutter" [nzJustify]="nzxJustify">
-    <ng-container *ngFor="let config of controls; let i = index">
+<nz-card>
+  <form #queyForm class="nzx-query-container" nz-form [formGroup]="queryForm">
+    <div nz-row [nzGutter]="nzxGutter" [nzJustify]="nzxJustify">
+      <ng-container *ngFor="let config of controls; let i = index">
+        <div
+          *ngIf="!config.hidden"
+          nz-col
+          [nzSpan]="config.nzxSpan || 24 / lineNumber"
+          [hidden]="config.collapse"
+          [nzOrder]="i"
+        >
+          <nzx-configurable-query-item
+            *ngIf="config.controlName"
+            [form]="queryForm"
+            [control]="config"
+          ></nzx-configurable-query-item>
+        </div>
+      </ng-container>
+
       <div
-        *ngIf="!config.hidden"
+        class="nzx-query-btn"
         nz-col
-        [nzSpan]="config.nzxSpan || 24 / lineNumber"
-        [hidden]="config.collapse"
-        [nzOrder]="i"
+        [nzOrder]="controls.length"
+        [nzSpan]="nzxBtnSpan || 24 / lineNumber"
       >
-        <nzx-configurable-query-item
-          *ngIf="config.controlName"
-          [form]="queryForm"
-          [control]="config"
-        ></nzx-configurable-query-item>
-      </div>
-    </ng-container>
-
-    <div
-      [nzOrder]="controls.length"
-      class="nzx-query-btn"
-      nz-col
-      [nzSpan]="nzxBtnSpan || 24 / lineNumber"
-    >
-      <div nz-row nzJustify="end" nzAlign="middle">
-        <button
-          nz-button
-          nzType="primary"
-          type="button"
-          title="Enter"
-          (click)="search()"
-        >
-          {{ locale['query'] }}
-        </button>
-        <button nz-button type="button" title="ctrl+r" (click)="reset()">
-          {{ locale['reset'] }}
-        </button>
-        <ng-content></ng-content>
-        <a
-          *ngIf="nzxCollapse"
-          nz-button
-          nzType="link"
-          (click)="toggleCollapse()"
-        >
-          {{ collapseText }}
-          <i nz-icon [nzType]="collapseIcon"></i>
-        </a>
+        <div nz-row nzJustify="end" nzAlign="middle">
+          <nz-space>
+            <button
+              *nzSpaceItem
+              nz-button
+              nzType="primary"
+              type="button"
+              title="Enter"
+              (click)="search()"
+            >
+              {{ locale['query'] }}
+            </button>
+            <button
+              *nzSpaceItem
+              nz-button
+              type="button"
+              title="ctrl+r"
+              (click)="reset()"
+            >
+              {{ locale['reset'] }}
+            </button>
+            <ng-container *nzSpaceItem>
+              <ng-content></ng-content>
+            </ng-container>
+            <ng-container *ngIf="nzxCollapse">
+              <a
+                *nzSpaceItem
+                nz-button
+                nzType="link"
+                (click)="toggleCollapse()"
+              >
+                {{ collapseText }}
+                <i nz-icon [nzType]="collapseIcon"></i>
+              </a>
+            </ng-container>
+          </nz-space>
+        </div>
       </div>
     </div>
-  </div>
-</form>
+  </form>
+</nz-card>
diff --git a/components/configurable-query/configurable-query.component.less b/components/configurable-query/configurable-query.component.less
@@ -1,18 +1,10 @@
 .nzx-query-container {
-  padding: 12px;
-  background-color: #fff;
-  border-radius: 8px;
-
   [nz-form-label] {
     overflow: visible;
   }
 
   .nzx-query-btn {
     flex-grow: 2;
     max-width: none;
-
-    button {
-      margin: 0 4px;
-    }
   }
 }
diff --git a/components/configurable-query/configurable-query.component.ts b/components/configurable-query/configurable-query.component.ts
@@ -41,39 +41,42 @@ import { NzxQueryControlOptions, NzxQueryParams } from './type';
 export class NzxConfigurableQueryComponent
   implements OnChanges, OnInit, AfterViewInit, AfterContentInit, OnDestroy
 {
-  /** 配置项 */
+  /**
+   * 配置项用来生成查询表单
+   */
   @Input() controls: Array<NzxQueryControlOptions> = [];
-  /** 查询表单排列方式 */
+  /** 查询表单排列方式默认start */
   @Input() nzxJustify: NzJustify = 'start';
-  /** 查询项间隔 */
+  /** 查询项间隔默认为8 */
   @Input() nzxGutter: number = 8;
-  /** 一行展示多少查询项 */
+  /** 一行展示多少查询项默认展示3个 */
   @Input() lineNumber: number = 3;
   /** 操作按钮所占栅格数，24则换行 */
   @Input() nzxBtnSpan: number | null = null;
-  /** 初始化时，主动查询 */
+  /** 初始化时，是否主动触发查询 */
   @Input() initQuery = false;
-  /** 缺省 固定参数 */
+  /** 缺省 固定参数会固定携带在抛出事件中 */
   @Input() fixedParams = {};
 
   /** 查询时会触发抛出查询参数 */
   @Output() queryChange = new EventEmitter<NzxQueryParams>();
   /** 重置时会触发抛出查询参数 */
   @Output() resetChange = new EventEmitter<NzxQueryParams>();
 
-  /** 查询组件出参*/
+  /** 组件最终的查询参数 */
   get queryParams() {
     return this._queryParams;
   }
   set queryParams(value: any) {
     this._queryParams = value;
   }
 
+  /** 判断当前组件是否展示展开折叠按钮 */
   get nzxCollapse() {
     return this.controls.some((i) => i.hasOwnProperty('collapse'));
   }
 
-  /** form 表单*/
+  /** 内置 form 查询表单实例 */
   queryForm!: FormGroup;
   locale!: NzxQueryI18nInterface;
   collapseIcon: string = 'down';
@@ -280,6 +283,7 @@ export class NzxConfigurableQueryComponent
     this.destroy$.complete();
   }
 
+  /** 计算展开收起icon、文案 */
   private calculateText() {
     if (this.controls.some((i) => i.collapse === true)) {
       this.collapseIcon = 'down';

diff --git a/components/configurable-query/configurable-query.module.ts b/components/configurable-query/configurable-query.module.ts
@@ -21,6 +21,8 @@ import { NzxSelectControlComponent } from './controls/select.control';
 import { NzxTemplateControlComponent } from './controls/template.control';
 import { NzxQueryConfigService, QUERY_CONFIG } from './query-config.service';
 import { NzxQueryConfig } from './type';
+import { NzCardModule } from 'ng-zorro-antd/card';
+import { NzSpaceModule } from 'ng-zorro-antd/space';
 
 @NgModule({
   declarations: [
@@ -43,6 +45,8 @@ import { NzxQueryConfig } from './type';
     NzButtonModule,
     NzSelectModule,
     NzDatePickerModule,
+    NzCardModule,
+    NzSpaceModule,
     NzIconModule,
     NzI18nModule,
   ],

diff --git a/components/configurable-query/doc/zh-cn.md b/components/configurable-query/doc/zh-cn.md
@@ -7,11 +7,11 @@ order: 3
 
 通过配置项生成一个查询表单控件，支持自定义拓展查询控件，使用NzxQueryConfigService支持全局配置查询控件
 
-## 支持版本
+## 版本支持
 
 <label type="success">v14.0.0+</label>
 
-## 基本使用
+## 使用
 
 ### 引入
 

diff --git a/components/configurable-query/query-config.service.ts b/components/configurable-query/query-config.service.ts
@@ -48,6 +48,7 @@ export class NzxQueryConfigService {
     }
   }
 
+  /** 添加controlType 类型控件 */
   addControlType(controlType: NzxQueryControlType) {
     const find = this.controlTypePoll.some((i) => i.key === controlType.key);
     if (find) {
@@ -56,6 +57,7 @@ export class NzxQueryConfigService {
     this.controlTypePoll.push(controlType);
   }
 
+  /** 删除controlType 类型控件 */
   removeControlType(key: string) {
     const find = this.controlTypePoll.some((i) => i.key === key);
     if (find) {
@@ -65,6 +67,7 @@ export class NzxQueryConfigService {
     }
   }
 
+  /** 刷新 */
   refreshControlType() {
     this.controlTypes$.next(this.controlTypePoll);
   }

diff --git a/components/dynamic-form/doc/zh-cn.md b/components/dynamic-form/doc/zh-cn.md
@@ -0,0 +1,39 @@
+---
+category: component
+title: 动态表单
+subtitle: nzx-dynamic-form
+order: 10
+---
+
+<alert type="warning">开发中...</alert>
+
+动态表单通过配置项快速实现表单
+
+## 版本支持
+
+<label type="success">v17.5.0+ </label>
+
+<label type="success">v18.2.0+ </label>
+
+## 使用
+
+### 引入
+
+```ts
+import { NzxDynamicFormModule } from 'ng-zorro-antd-extension/dynamic-form';
+```
+
+appModule 中
+
+```ts
+@NgModule({
+  imports: [NzxDynamicFormModule.forRoot()],
+})
+class AppModule {}
+```
+
+### html
+
+```html
+
+```