refactor(abc): As configurable as possible

ng-alain · Apr 16, 2018 · d553a38 · d553a38
1 parent b641c68
commit d553a38
Show file tree

Hide file tree

Showing 12 changed files with 65 additions and 26 deletions.
diff --git a/packages/abc/desc-list/desc-list.component.ts b/packages/abc/desc-list/desc-list.component.ts
@@ -1,6 +1,7 @@
 import { Component, Input, ViewEncapsulation, ElementRef, Renderer2, OnChanges, SimpleChanges, OnInit, ContentChild, TemplateRef, ContentChildren, QueryList, SimpleChange } from '@angular/core';
 import { coerceNumberProperty } from '@angular/cdk/coercion';
 import { DescListItemComponent } from './desc-list-item.component';
+import { AdDescListConfig } from './desc-list.config';
 
 @Component({
     selector: 'desc-list',
@@ -82,7 +83,13 @@ export class DescListComponent implements OnChanges, OnInit {
 
     // endregion
 
-    constructor(private el: ElementRef, private renderer: Renderer2) {}
+    constructor(
+        cog: AdDescListConfig,
+        private el: ElementRef,
+        private renderer: Renderer2
+    ) {
+        Object.assign(this, cog);
+    }
 
     ngOnInit() {
         this.setClass();

diff --git a/packages/abc/desc-list/desc-list.config.ts b/packages/abc/desc-list/desc-list.config.ts
@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class AdDescListConfig {
+    /**
+     * 布局方式
+     */
+    layout?: 'horizontal' | 'vertical' = 'horizontal';
+
+    /**
+     * 列表项间距，单位为 `px`
+     */
+    gutter?: number = 32;
+
+    /**
+     * 列表型号
+     */
+    size?: 'small' | 'large';
+}
diff --git a/packages/abc/desc-list/desc-list.module.ts b/packages/abc/desc-list/desc-list.module.ts
@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 
 import { DescListComponent } from './desc-list.component';
 import { DescListItemComponent } from './desc-list-item.component';
+import { AdDescListConfig } from './desc-list.config';
 
 const COMPONENTS = [DescListComponent, DescListItemComponent];
 
@@ -21,6 +22,6 @@ const ZORROMODULES = [ NgZorroAntdModule ];
 })
 export class AdDescListModule {
     static forRoot(): ModuleWithProviders {
-        return { ngModule: AdDescListModule, providers: [] };
+        return { ngModule: AdDescListModule, providers: [ AdDescListConfig ] };
     }
 }
diff --git a/packages/abc/desc-list/index.md b/packages/abc/desc-list/index.md
@@ -4,6 +4,7 @@ subtitle: 描述列表
 order: 60
 cols: 1
 module: AdDescListModule
+config: AdDescListConfig
 ---
 
 成组展示多个只读字段，常见于详情页的信息展示。
@@ -16,7 +17,7 @@ layout | 布局方式  | `horizontal,vertical` | `horizontal`
 col | 指定信息最多分几列展示，最终一行几列由 col 配置结合响应式规则决定 | `number(0 < col <= 4)` | `3`
 title | 列表标题  | `string, TemplateRef<any>` | -
 gutter | 列表项间距，单位为 `px`  | `number` | `32`
-size | 列表型号，可以设置为 `large` `small`  | `string` | -
+size | 列表型号，可以设置为 `large, small`  | `string` | -
 
 ## 响应式规则
 

diff --git a/packages/abc/error-collect/error-collect.component.ts b/packages/abc/error-collect/error-collect.component.ts
@@ -2,6 +2,7 @@ import { Component, Directive, OnInit, Input, HostBinding, OnDestroy, ElementRef
 import { FormGroup } from '@angular/forms';
 import { DOCUMENT } from '@angular/platform-browser';
 import { coerceNumberProperty } from '@angular/cdk/coercion';
+import { AdErrorCollectConfig } from './error-collect.config';
 
 /**
  * 错误消息采集器
@@ -39,7 +40,15 @@ export class ErrorCollectComponent implements OnInit, OnDestroy {
 
     count = 0;
 
-    constructor(private el: ElementRef, private renderer: Renderer2, private cd: ChangeDetectorRef, @Inject(DOCUMENT) private doc: any) {}
+    constructor(
+        cog: AdErrorCollectConfig,
+        private el: ElementRef,
+        private renderer: Renderer2,
+        private cd: ChangeDetectorRef,
+        @Inject(DOCUMENT) private doc: any
+    ) {
+        Object.assign(this, cog);
+    }
 
     private get errEls() {
         return this.formEl.querySelectorAll('.has-error');

diff --git a/packages/abc/error-collect/error-collect.config.ts b/packages/abc/error-collect/error-collect.config.ts
@@ -0,0 +1,13 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class AdErrorCollectConfig {
+    /**
+     * 监听频率
+     */
+    freq?: number = 500;
+    /**
+     * 顶部偏移值
+     */
+    offsetTop?: number = 65 + 64 + 8 * 2;
+}
diff --git a/packages/abc/error-collect/error-collect.module.ts b/packages/abc/error-collect/error-collect.module.ts
@@ -2,6 +2,7 @@ import { NgModule, ModuleWithProviders } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { ErrorCollectComponent } from './error-collect.component';
+import { AdErrorCollectConfig } from './error-collect.config';
 
 const COMPONENTS = [ErrorCollectComponent];
 
@@ -12,6 +13,6 @@ const COMPONENTS = [ErrorCollectComponent];
 })
 export class AdErrorCollectModule {
     static forRoot(): ModuleWithProviders {
-        return { ngModule: AdErrorCollectModule, providers: [] };
+        return { ngModule: AdErrorCollectModule, providers: [ AdErrorCollectConfig ] };
     }
 }
diff --git a/packages/abc/error-collect/index.md b/packages/abc/error-collect/index.md
@@ -4,6 +4,7 @@ subtitle: 表单异常消息采集器
 order: 90
 cols: 1
 module: AdErrorCollectModule
+config: AdErrorCollectConfig
 ---
 
 一个简单的表单异常消息采集器，点击图标自然跳转相应的位置；必须是一个标准的表单，例如：
@@ -12,5 +13,5 @@ module: AdErrorCollectModule
 
 参数 | 说明 | 类型 | 默认值
 ----|------|-----|------
-freq | 监听频率  | `number` | -
-offsetTop | 顶部偏移值  | `number` | -
+freq | 监听频率，单位：毫秒 | `number` | `500`
+offsetTop | 顶部偏移值，单位：`px` | `number` | `145`
diff --git a/packages/abc/image/index.md b/packages/abc/image/index.md
@@ -5,6 +5,7 @@ order: 300
 cols: 1
 type: Directive
 module: AdImageModule
+config: AdImageConfig
 ---
 
 等同于 `src`，但相比较更多功能：
@@ -19,19 +20,3 @@ module: AdImageModule
 ----|------|-----|------
 size | 图像大小 | `number` | `64`
 error | 替代图像无法加载 | `string` | `./assets/img/logo.svg`
-
-### ImageConfig
-
-导入 `AdImageModule` 时，允许指定默认 `size`、`error` 值。例如：
-
-```ts
-@NgModule({
-    imports: [
-        AdImageModule.forRoot()
-    ],
-    providers: [
-        // 重置默认大小为：32
-        { provide: ImageConfig, useFactory: ()=> { return Object.assign(new ImageConfig(), { size: 32 }); } }
-    ]
-})
-```
diff --git a/packages/abc/lodop/index.md b/packages/abc/lodop/index.md
@@ -4,6 +4,7 @@ subtitle: Lodop打印
 order: 130
 cols: 1
 module: AdLodopModule
+config: AdLodopConfig
 ---
 
 Lodop 打印的基础实现，若需要商用还需要单独购买KEY。同时感谢 [lodop](http://c-lodop.com/) 为 ng-alain 免费提供正版KEY。

diff --git a/packages/abc/simple-table/index.md b/packages/abc/simple-table/index.md
@@ -4,6 +4,7 @@ subtitle: 简易表格
 order: 10
 cols: 1
 module: AdSimpleTableModule
+config: AdSimpleTableConfig
 ---
 
 现有的 `nz-table` 已经足够满足绝大多数需求，然而在中台系统中绝大多数在使用过程中只是需要一个简单的数据表格展示，但现有的使用规则很繁琐：

diff --git a/packages/theme/services/menu/interface.ts b/packages/theme/services/menu/interface.ts
@@ -18,13 +18,13 @@ export interface Menu {
     badge?: number;
     /** 徽标数，显示小红点 */
     badge_dot?: boolean;
-    /** 徽标数，设置 Badge 颜色 （默认：error， 所有颜色值见：https://github.com/cipchk/ng-alain/blob/master/_documents/utils.md#色彩） */
+    /** 徽标 Badge 颜色 （默认：error， 所有颜色值见：https://github.com/cipchk/ng-alain/blob/master/_documents/utils.md#色彩） */
     badge_status?: string;
     /** 是否隐藏菜单 */
     hide?: boolean;
-    /** 隐藏面包屑，指 `pro-header` 组件的自动生成面包屑时有效 */
+    /** 隐藏面包屑，指 `page-header` 组件的自动生成面包屑时有效 */
     hideInBreadcrumb?: boolean;
-    /** ACL配置，若导入 `@delon/acl` 时自动有效 */
+    /** ACL配置，若导入 `@delon/acl` 时自动有效，等同于 `ACLService.can(roleOrAbility: ACLCanType)` 参数值 */
     acl?: any;
     /** 是否快捷菜单项 */
     shortcut?: boolean;