feat(abc:qr): add qr component

.angular-cli.json

@@ -20,7 +20,8 @@
         "../node_modules/@antv/g2/dist/g2.min.js",
         "../node_modules/@antv/data-set/dist/data-set.min.js",
         "../node_modules/@antv/g2-plugin-slider/dist/g2-plugin-slider.min.js",
-        "../node_modules/ajv/dist/ajv.bundle.js"
+        "../node_modules/ajv/dist/ajv.bundle.js",
+        "../node_modules/qrious/dist/qrious.min.js"
       ],
       "environmentSource": "environments/environment.ts",
       "environments": {
@@ -52,7 +53,8 @@
         "../node_modules/ace-builds/src-min/ace.js",
         "../node_modules/ace-builds/src-min/mode-json.js",
         "../node_modules/ace-builds/src-min/theme-github.js",
-        "../node_modules/ajv/dist/ajv.bundle.js"
+        "../node_modules/ajv/dist/ajv.bundle.js",
+        "../node_modules/qrious/dist/qrious.min.js"
       ],
       "environmentSource": "environments/environment.ts",
       "environments": {

packages/abc/abc.module.ts

@@ -27,6 +27,7 @@ import { AdZipModule } from './zip/zip.module';
 import { AdNumberToChineseModule } from './number-to-chinese/number-to-chinese.module';
 import { AdLodopModule } from './lodop/lodop.module';
 import { AdQuickMenuModule } from './quick-menu/quick-menu.module';
+import { AdQRModule } from './qr/qr.module';
 // charts
 import { AdG2BarModule } from './charts/bar/bar.module';
 import { AdG2CardModule } from './charts/card/card.module';
@@ -68,6 +69,7 @@ const MODULES = [
   AdNumberToChineseModule,
   AdLodopModule,
   AdQuickMenuModule,
+  AdQRModule,
   // charts
   AdG2BarModule,
   AdG2CardModule,
@@ -113,6 +115,7 @@ const MODULES = [
     AdNumberToChineseModule.forRoot(),
     AdLodopModule.forRoot(),
     AdQuickMenuModule.forRoot(),
+    AdQRModule.forRoot(),
     // charts
     AdG2BarModule.forRoot(),
     AdG2CardModule.forRoot(),
@@ -133,7 +136,7 @@ export class DelonABCRootModule {}
 
 @NgModule({ exports: MODULES })
 export class DelonABCModule {
-  public static forRoot(): ModuleWithProviders {
+  static forRoot(): ModuleWithProviders {
     return { ngModule: DelonABCRootModule };
   }
 }

packages/abc/index.less

@@ -10,6 +10,7 @@
 @import "./number-info/style/index.less";
 @import "./page-header/style/index.less";
 @import "./quick-menu/style/index.less";
+@import "./qr/style/index.less";
 @import "./result/style/index.less";
 @import "./reuse-tab/style/index.less";
 @import "./simple-table/style/index.less";

packages/abc/package.json

@@ -18,7 +18,8 @@
   "keywords": ["delon", "ng-alain", "alain", "antd", "ng-zorro-antd"],
   "dependencies": {
     "file-saver": "^1.3.3",
-    "ngx-countdown": "^2.1.0"
+    "ngx-countdown": "^2.1.0",
+    "qrious": "^4.0.2"
   },
   "peerDependencies": {
     "@delon/theme": "PEER-0.0.0-PLACEHOLDER",

packages/abc/public_api.ts

@@ -25,6 +25,7 @@ export * from './zip';
 export * from './number-to-chinese';
 export * from './lodop';
 export * from './quick-menu';
+export * from './qr';
 // charts
 export * from './charts/bar';
 export * from './charts/card';

packages/abc/qr/demo/basic.md

@@ -0,0 +1,16 @@
+---
+order: 1
+title: 演示
+---
+
+最简单的用法。
+
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-demo',
+  template: `<qr value="https://ng-alain.com/"></qr>`,
+})
+export class DemoComponent {}
+```

packages/abc/qr/demo/design.md

@@ -0,0 +1,110 @@
+---
+order: 2
+title: 设计器
+---
+
+通过 `QRService` 操作更多参数；`change` 可以回调二维码 dataURL 值。
+
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-demo',
+  template: `
+  <nz-row [nzGutter]="24">
+    <nz-col [nzSpan]="8" class="text-center">
+      <qr
+        [value]="value"
+        [background]="background"
+        [backgroundAlpha]="backgroundAlpha"
+        [foreground]="foreground"
+        [foregroundAlpha]="foregroundAlpha"
+        [level]="level"
+        [mime]="mime"
+        [padding]="padding"
+        [size]="size"
+        (change)="change($event)"
+        style="border:1px solid #999"></qr>
+    </nz-col>
+    <nz-col [nzSpan]="16">
+    <form nz-form>
+      <nz-form-item>
+        <nz-form-label [nzSpan]="8">背景</nz-form-label>
+        <nz-form-control [nzSpan]="16">
+          <nz-input-group>
+            <div nz-col nzSpan="12">
+              <input nz-input type="color" [(ngModel)]="background" [ngModelOptions]="{standalone: true}">
+            </div>
+            <div nz-col nzSpan="12">
+              <nz-input-number [(ngModel)]="backgroundAlpha" [nzMin]="0" [nzMax]="1" [nzStep]="0.1" [ngModelOptions]="{standalone: true}"></nz-input-number>
+            </div>
+          </nz-input-group>
+        </nz-form-control>
+      </nz-form-item>
+      <nz-form-item>
+        <nz-form-label [nzSpan]="8">前景</nz-form-label>
+        <nz-form-control [nzSpan]="16">
+          <nz-input-group>
+            <div nz-col nzSpan="12">
+              <input nz-input type="color" [(ngModel)]="foreground" [ngModelOptions]="{standalone: true}">
+            </div>
+            <div nz-col nzSpan="12">
+              <nz-input-number [(ngModel)]="foregroundAlpha" [nzMin]="0" [nzMax]="1" [nzStep]="0.1" [ngModelOptions]="{standalone: true}"></nz-input-number>
+            </div>
+          </nz-input-group>
+        </nz-form-control>
+      </nz-form-item>
+      <nz-form-item>
+        <nz-form-label [nzSpan]="8">误差</nz-form-label>
+        <nz-form-control [nzSpan]="16">
+          <nz-select [(ngModel)]="level" [ngModelOptions]="{standalone: true}">
+            <nz-option nzValue="L" nzLabel="L"></nz-option>
+            <nz-option nzValue="M" nzLabel="M"></nz-option>
+            <nz-option nzValue="Q" nzLabel="Q"></nz-option>
+            <nz-option nzValue="H" nzLabel="H"></nz-option>
+          </nz-select>
+        </nz-form-control>
+      </nz-form-item>
+      <nz-form-item>
+        <nz-form-label [nzSpan]="8">Mime</nz-form-label>
+        <nz-form-control [nzSpan]="16">
+          <nz-select [(ngModel)]="mime" [ngModelOptions]="{standalone: true}">
+            <nz-option nzValue="image/png" nzLabel="image/png"></nz-option>
+            <nz-option nzValue="image/jpeg" nzLabel="image/jpeg"></nz-option>
+            <nz-option nzValue="image/gif" nzLabel="image/gif"></nz-option>
+          </nz-select>
+        </nz-form-control>
+      </nz-form-item>
+      <nz-form-item>
+        <nz-form-label [nzSpan]="8">内边距</nz-form-label>
+        <nz-form-control [nzSpan]="16">
+          <nz-input-number [(ngModel)]="padding" [ngModelOptions]="{standalone: true}" [nzMin]="0" [nzMax]="100"></nz-input-number>px
+        </nz-form-control>
+      </nz-form-item>
+      <nz-form-item>
+        <nz-form-label [nzSpan]="8">大小</nz-form-label>
+        <nz-form-control [nzSpan]="16">
+          <nz-input-number [(ngModel)]="size" [ngModelOptions]="{standalone: true}" [nzMin]="100" [nzMax]="1000" [nzStep]="padding"></nz-input-number>px
+        </nz-form-control>
+      </nz-form-item>
+    </form>
+    </nz-col>
+  </nz-row>
+  `,
+})
+export class DemoComponent {
+  value = 'https://ng-alain.com/';
+  background = 'white';
+  backgroundAlpha = 1.0;
+  foreground = 'black';
+  foregroundAlpha = 1.0;
+  level = 'L';
+  mime = 'image/png';
+  padding = 10;
+  size = 220;
+
+  change(dataURL: string) {
+    console.log(dataURL);
+  }
+}
+```

packages/abc/qr/index.md

@@ -0,0 +1,33 @@
+---
+title: qr
+subtitle: 二维码
+cols: 1
+module: AdQRModule
+config: AdQRConfig
+---
+
+基于 [qrious](https://neocotic.com/qrious) 生成二维码。
+
+## 注意
+
+默认 `AdQRModule` 并没有强制依赖 `qrious`，因此还需要额外在 `.angular-cli.json` 的 `scripts` 节点引用它。
+
+```ts
+"scripts": [
+  "../node_modules/qrious/dist/qrious.min.js"
+]
+```
+
+## API
+
+参数 | 说明 | 类型 | 默认值
+----|------|-----|------
+background | 背景 | `string` | `white`
+backgroundAlpha | 背景透明级别，范围：`0-1` 之间 | `number` | `1.0`
+foreground | 前景 | `string` | `white`
+foregroundAlpha | 前景透明级别，范围：`0-1` 之间 | `number` | `1.0`
+level | 误差校正级别 | `L,M,Q,H` | `L`
+mime | 二维码输出图片MIME类型 | `string` | `image/png`
+padding | 内边距（单位：px） | `number` | `10`
+size | 大小（单位：px） | `number` | `220`
+change | 变更时回调，返回二维码dataURL值 | `EventEmitter<string>` | -

packages/abc/qr/index.ts

@@ -0,0 +1 @@
+export * from './public_api';

packages/abc/qr/public_api.ts

@@ -0,0 +1,4 @@
+export { QRService } from './qr.service';
+export { QRComponent } from './qr.component';
+export { AdQRConfig } from './qr.config';
+export { AdQRModule } from './qr.module';

packages/abc/qr/qr.component.ts

@@ -0,0 +1,76 @@
+import {
+  Component,
+  Input,
+  ChangeDetectionStrategy,
+  OnChanges,
+  ChangeDetectorRef,
+  SimpleChanges,
+  HostBinding,
+  Output,
+  EventEmitter,
+} from '@angular/core';
+import { QRService } from './qr.service';
+import { AdQRConfig } from './qr.config';
+
+@Component({
+  selector: 'qr',
+  template: `
+  <img src="{{dataURL}}">
+  `,
+  preserveWhitespaces: false,
+  host: { '[class.ad-qr]': 'true' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class QRComponent implements OnChanges {
+  dataURL: string;
+  // region: fields
+
+  /** 背景 */
+  @Input() background: string;
+  /** 背景透明级别，范围：`0-1` 之间 */
+  @Input() backgroundAlpha: number;
+  /** 前景 */
+  @Input() foreground: string;
+  /** 前景透明级别，范围：`0-1` 之间 */
+  @Input() foregroundAlpha: number;
+  /** 误差校正级别 */
+  @Input() level: string;
+  /** 二维码输出图片MIME类型 */
+  @Input() mime: string;
+  /** 内边距（单位：px） */
+  @Input() padding: number;
+  /** 大小（单位：px） */
+  @HostBinding('style.height.px')
+  @HostBinding('style.width.px')
+  @Input() size: number;
+  /** 值 */
+  @Input() value: string;
+  /** 变更时回调 */
+  @Output() change = new EventEmitter<string>();
+
+  // endregion
+
+  constructor(
+    cog: AdQRConfig,
+    private srv: QRService,
+    private cd: ChangeDetectorRef,
+  ) {
+    Object.assign(this, cog);
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.dataURL = this.srv.refresh({
+      background: this.background,
+      backgroundAlpha: this.backgroundAlpha,
+      foreground: this.foreground,
+      foregroundAlpha: this.foregroundAlpha,
+      level: this.level,
+      mime: this.mime,
+      padding: this.padding,
+      size: this.size,
+      value: this.value
+    });
+    this.cd.detectChanges();
+    this.change.emit(this.dataURL);
+  }
+}

packages/abc/qr/qr.config.ts

@@ -0,0 +1,18 @@
+export class AdQRConfig {
+  /** 背景，默认：`white` */
+  background = 'white';
+  /** 背景透明级别，范围：`0-1` 之间，默认：`1.0` */
+  backgroundAlpha = 1.0;
+  /** 前景，默认：`black` */
+  foreground = 'black';
+  /** 前景透明级别，范围：`0-1` 之间，默认：`1.0` */
+  foregroundAlpha = 1.0;
+  /** 误差校正级别，默认：`L` */
+  level: 'L' | 'M' | 'Q' | 'H' = 'L';
+  /** 二维码输出图片MIME类型，默认：`image/png` */
+  mime = 'image/png';
+  /** 内边距（单位：px），默认：`10` */
+  padding = 10;
+  /** 大小（单位：px），默认：`220` */
+  size = 220;
+}

packages/abc/qr/qr.module.ts

@@ -0,0 +1,19 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { AdQRConfig } from './qr.config';
+import { QRComponent } from './qr.component';
+import { QRService } from './qr.service';
+
+const COMPONENTS = [QRComponent];
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [...COMPONENTS],
+  exports: [...COMPONENTS],
+})
+export class AdQRModule {
+  static forRoot(): ModuleWithProviders {
+    return { ngModule: AdQRModule, providers: [AdQRConfig, QRService] };
+  }
+}