draft(abc:price): add price component

packages/abc/index.less

@@ -18,3 +18,4 @@
 @import './loading/style/index.less';
 @import './onboarding/style/index.less';
 @import './pdf/style/index.less';
+@import './price/style/index.less';

packages/abc/price/demo/basic.md

@@ -0,0 +1,69 @@
+---
+order: 1
+title:
+  zh-CN: 基础样例
+  en-US: Basic Usage
+---
+
+## zh-CN
+
+最简单的用法。
+
+## en-US
+
+Simplest of usage.
+
+```ts
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-demo',
+  template: `
+    <h3>{{ type }}</h3>
+    <qr [value]="value"></qr>
+    <div>
+      <button *ngFor="let t of types" nz-button (click)="change(t)">{{ t }}</button>
+    </div>
+  `,
+})
+export class DemoComponent implements OnInit {
+  types = ['url', 'email', 'tel', 'cn', 'vcard'];
+  value = '';
+  type = '';
+  change(type: string): void {
+    this.type = type;
+    switch (type) {
+      case 'url':
+        this.value = 'https://ng-alain.com/';
+        break;
+      case 'email':
+        this.value = 'mailto:[email protected]';
+        break;
+      case 'tel':
+        this.value = 'tel:15900000000';
+        break;
+      case 'cn':
+        this.value = '你好🇨🇳';
+        break;
+      case 'vcard':
+        this.value = `BEGIN:VCARD
+VERSION:4.0
+N:色;卡;;Mr.;
+FN:卡色
+ORG:NG-ALAIN
+TITLE:NG-ALAIN
+PHOTO;MEDIATYPE=image/svg:https://ng-alain.com/assets/img/logo-color.svg
+TEL;TYPE=work,voice;VALUE=uri:tel:15900000000
+ADR;TYPE=WORK;PREF=1;LABEL="中国上海":;;上海;中国
+EMAIL:[email protected]
+x-qq:94458893
+END:VCARD`;
+        break;
+    }
+  }
+
+  ngOnInit(): void {
+    this.change('url');
+  }
+}
+```

packages/abc/price/demo/design.md

@@ -0,0 +1,124 @@
+---
+order: 2
+title:
+  zh-CN: 设计器
+  en-US: Designer
+---
+
+## zh-CN
+
+利用 `change` 可以回调二维码 dataURL 值。
+
+## en-US
+
+Get QR code (dataURL value) via `change`.
+
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-demo',
+  template: `
+    <div nz-row [nzGutter]="24">
+      <div 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>
+      </div>
+      <div nz-col [nzSpan]="16">
+        <se-container col="1">
+          <se label="背景">
+            <nz-input-group>
+              <div nz-row [nzGutter]="8">
+                <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>
+              </div>
+            </nz-input-group>
+          </se>
+          <se label="前景">
+            <nz-input-group>
+              <div nz-row [nzGutter]="8">
+                <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>
+              </div>
+            </nz-input-group>
+          </se>
+          <se label="误差">
+            <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>
+          </se>
+          <se label="Mime">
+            <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>
+          </se>
+          <se label="内边距">
+            <nz-input-number [(ngModel)]="padding" [ngModelOptions]="{ standalone: true }" [nzMin]="0" [nzMax]="100"></nz-input-number> px
+          </se>
+          <se label="大小">
+            <nz-input-number
+              [(ngModel)]="size"
+              [ngModelOptions]="{ standalone: true }"
+              [nzMin]="100"
+              [nzMax]="1000"
+              [nzStep]="padding"
+            ></nz-input-number>
+            px
+          </se>
+        </se-container>
+      </div>
+    </div>
+  `,
+})
+export class DemoComponent {
+  value = 'https://ng-alain.com/';
+  background = '#ffffff';
+  backgroundAlpha = 1.0;
+  foreground = '#000000';
+  foregroundAlpha = 1.0;
+  level = 'L';
+  mime = 'image/png';
+  padding = 10;
+  size = 220;
+
+  change(dataURL: string): void {
+    console.log(dataURL);
+  }
+}
+```

packages/abc/price/index.en-US.md

@@ -0,0 +1,37 @@
+---
+type: Basic
+order: 3
+title: qr
+subtitle: QR
+cols: 1
+module: import { QRModule } from '@delon/abc/qr';
+---
+
+Generate a QR code based on [qrious](https://github.com/neocotic/qrious).
+
+
+Qr libary is lazy loading by default，you can change the default CDN path (or use the local path) via [Global Configuration](/docs/global-config). By default: `https://cdn.bootcdn.net/ajax/libs/qrious/4.0.2/qrious.min.js`. Or install dependence via `npm i --save qrious`, and import script path in `angular.json`.
+
+## API
+
+### qr
+
+| Property | Description | Type | Default | Global Config |
+|----------|-------------|------|---------|---------------|
+| `[value]` | Value encoded within the QR code | `string` | - |  |
+| `[background]` | Background colour of the QR code | `string` | `white` | ✅ |
+| `[backgroundAlpha]` | Background alpha of the QR code | `number` | `1` | ✅ |
+| `[foreground]` | Foreground colour of the QR code | `string` | `white` | ✅ |
+| `[foregroundAlpha]` | Foreground alpha of the QR code | `number` | `1` | ✅ |
+| `[level]` | Error correction level of the QR code | `'L','M','Q','H'` | `'L'` | ✅ |
+| `[mime]` | MIME type used to render the image for the QR code | `string` | `image/png` | ✅ |
+| `[padding]` | Padding for the QR code (pixels) | `number` | `10` | ✅ |
+| `[size]` | Size of the QR code (pixels) | `number` | `220` | ✅ |
+| `[delay]` | Delayed rendering, unit: ms | `number` | `0` | ✅ |
+| `(change)` | change event | `EventEmitter<string>` | - |  |
+
+## FAQ
+
+### Custom LOGO
+
+Refer to [#100](https://github.com/neocotic/qrious/issues/100#issuecomment-308249343).

packages/abc/price/index.ts

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

packages/abc/price/index.zh-CN.md

@@ -0,0 +1,36 @@
+---
+type: Basic
+order: 3
+title: qr
+subtitle: 二维码
+cols: 1
+module: import { QRModule } from '@delon/abc/qr';
+---
+
+基于 [qrious](https://github.com/neocotic/qrious) 生成二维码。
+
+默认二维码的操作并不是刚需的原因，因此采用一种延迟加载脚本的形式，可以通过[全局配置](/docs/global-config)配置来改变默认 CDN 路径（或使用本地路径），默认情况下使用 `https://cdn.bootcdn.net/ajax/libs/qrious/4.0.2/qrious.min.js`。或安装 `npm i --save qrious` 依赖包并在 `angular.json` 的 `scripts` 引用 `"node_modules/qrious/dist/qrious.min.js"`。
+
+## API
+
+### qr
+
+| 成员 | 说明 | 类型 | 默认值 | 全局配置 |
+|----|----|----|-----|------|
+| `[value]` | 值 | `string` | - |  |
+| `[background]` | 背景 | `string` | `white` | ✅ |
+| `[backgroundAlpha]` | 背景透明级别，范围：`0-1` 之间 | `number` | `1` | ✅ |
+| `[foreground]` | 前景 | `string` | `white` | ✅ |
+| `[foregroundAlpha]` | 前景透明级别，范围：`0-1` 之间 | `number` | `1` | ✅ |
+| `[level]` | 误差校正级别 | `'L','M','Q','H'` | `'L'` | ✅ |
+| `[mime]` | 二维码输出图片MIME类型 | `string` | `image/png` | ✅ |
+| `[padding]` | 内边距（单位：px） | `number` | `10` | ✅ |
+| `[size]` | 大小（单位：px） | `number` | `220` | ✅ |
+| `[delay]` | 延迟渲染，单位：毫秒 | `number` | `0` | ✅ |
+| `(change)` | 变更时回调，返回二维码dataURL值 | `EventEmitter<string>` | - |  |
+
+## 常见问题
+
+### 自定义LOGO
+
+参考 [#100](https://github.com/neocotic/qrious/issues/100#issuecomment-308249343) 的写法。

packages/abc/price/package.json

@@ -0,0 +1,11 @@
+{
+  "ngPackage": {
+    "lib": {
+      "flatModuleFile": "price",
+      "entryFile": "public_api.ts",
+      "umdModuleIds": {
+        "@delon/util": "delon.util"
+      }
+    }
+  }
+}

packages/abc/price/price.component.ts

@@ -0,0 +1,67 @@
+import { ChangeDetectionStrategy, Component, forwardRef, Input, ViewEncapsulation } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { BooleanInput, InputBoolean, toNumber } from '@delon/util/decorator';
+import type { NzSizeLDSType, OnChangeType, OnTouchedType } from 'ng-zorro-antd/core/types';
+
+@Component({
+  selector: 'price',
+  exportAs: 'price',
+  template: `
+    <nz-input-number
+      [(ngModel)]="value"
+      (ngModelChange)="handlValue($event)"
+      [nzSize]="size"
+      [nzMin]="min"
+      [nzMax]="max"
+      [nzPlaceHolder]="placeHolder"
+      [nzStep]="step"
+      [nzId]="nzId"
+      [nzDisabled]="disabled"
+      [nzAutoFocus]="autoFocus"
+    ></nz-input-number>
+  `,
+  host: {
+    '[class.price]': `true`,
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => PriceComponent),
+      multi: true,
+    },
+  ],
+  preserveWhitespaces: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class PriceComponent implements ControlValueAccessor {
+  static ngAcceptInputType_disabled: BooleanInput;
+  static ngAcceptInputType_autoFocus: BooleanInput;
+
+  onChange: OnChangeType = () => {};
+  onTouched: OnTouchedType = () => {};
+  value: number | null = null;
+
+  @Input() nzId: string | null = null;
+  @Input() size: NzSizeLDSType = 'default';
+  @Input() min: number = -Infinity;
+  @Input() max: number = Infinity;
+  @Input() placeHolder = '';
+  @Input() step = 1;
+  @Input() @InputBoolean() disabled = false;
+  @Input() @InputBoolean() autoFocus = false;
+
+  handlValue(val: number): void {
+    this.onChange(val);
+  }
+
+  writeValue(value: number): void {
+    this.value = toNumber(value, null);
+  }
+  registerOnChange(fn: OnChangeType): void {
+    this.onChange = fn;
+  }
+  registerOnTouched(fn: OnTouchedType): void {
+    this.onTouched = fn;
+  }
+}

packages/abc/price/price.module.ts

@@ -0,0 +1,14 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { PriceComponent } from './price.component';
+import { FormsModule } from '@angular/forms';
+import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
+
+const COMPONENTS = [PriceComponent];
+
+@NgModule({
+  imports: [CommonModule, FormsModule, NzInputNumberModule],
+  declarations: COMPONENTS,
+  exports: COMPONENTS,
+})
+export class PriceModule {}