Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

draft(abc:price): add price component #1259

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/abc/index.less
Original file line number Diff line number Diff line change
Expand Up @@ -18,3 +18,4 @@
@import './loading/style/index.less';
@import './onboarding/style/index.less';
@import './pdf/style/index.less';
@import './price/style/index.less';
69 changes: 69 additions & 0 deletions packages/abc/price/demo/basic.md
Original file line number Diff line number Diff line change
@@ -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');
}
}
```
124 changes: 124 additions & 0 deletions packages/abc/price/demo/design.md
Original file line number Diff line number Diff line change
@@ -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);
}
}
```
37 changes: 37 additions & 0 deletions packages/abc/price/index.en-US.md
Original file line number Diff line number Diff line change
@@ -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).
1 change: 1 addition & 0 deletions packages/abc/price/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './public_api';
36 changes: 36 additions & 0 deletions packages/abc/price/index.zh-CN.md
Original file line number Diff line number Diff line change
@@ -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) 的写法。
11 changes: 11 additions & 0 deletions packages/abc/price/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"ngPackage": {
"lib": {
"flatModuleFile": "price",
"entryFile": "public_api.ts",
"umdModuleIds": {
"@delon/util": "delon.util"
}
}
}
}
67 changes: 67 additions & 0 deletions packages/abc/price/price.component.ts
Original file line number Diff line number Diff line change
@@ -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;
}
}
14 changes: 14 additions & 0 deletions packages/abc/price/price.module.ts
Original file line number Diff line number Diff line change
@@ -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 {}
Loading