VR COMPONENTS
vr components é uma biblioteca Angular (>=9) com componentes reutilizáveis.
Install
$ npm install vr-components --save
E instale "peer dependencies":
@angular/common@9.0.7@angular/core@9.0.7tslib@1.10.0moment@^2.24.0lodash@^4.17.15
$ npm install @angular/common @angular/core @angular/platform-browser --save
$ npm install tslib --save
$ npm install moment lodash --save
Pré Requisitos
Vr Design Guide
$ npm install vr-design-guide@* --save
Uso
No módulo importa-se o componente necessário, por exemplo o VrcDatepickerModule no seu app.
Adicione VrcDatepickerModule no imports do App.
import { NgModule } from '@angular/core';
import { VrcDatepickerModule} from 'vrc-components';
@NgModule({
imports: [ VrcDatepickerModule ]
})
export class AppModule {}
Como usar um componente como VrcDatepickerComponent no templete:
Vinculando('Binding') para propriedade data
Vincule o valor de remarcação à propriedade de value do componente de apresentação.
<vrc-datepicker [value]="data" label="Data"></vrc-datepicker>
Vinculando o valor com tow way data binding.
import { Component } from '@angular/core';
@Component({
selector: 'vr-root',
template: '<vrc-datepicker [(ngModel)]="data" [useNonWorkingDays]="false" label="Data"></vrc-datepicker>'
})
export class AppComponent{
data = '01/01/2020';
}
VR Autocomplete
Como usar o componente VrcAutocompleteComponent :
Para usar o vr autocomplete precisa importar os modulos VrcAutocompleteModule e VrcOptionModule.
import { NgModule } from '@angular/core';
import { VrcAutocompleteModule, VrcOptionModule } from 'vrc-components';
@NgModule({
imports: [ VrcAutocompleteModule, VrcOptionModule ]
})
export class MyModule {}
templete:
<vrc-autocomplete label="Opções" [(ngModel)]="value">
<vrc-option value="Primeiro">1 - Primeiro </vrc-option>
<vrc-option value="Segundo">2 - Segundo </vrc-option>
<vrc-option value="Terceiro">3 - Terceiro</vrc-option>
</vrc-autocomplete>
Vinculando o valor.
import { Component } from '@angular/core';
@Component({
selector: 'vr-my',
template: `
<vrc-autocomplete label="Opções" [(ngModel)]="valor">
<vrc-option value="Primeiro">1 - Primeiro </vrc-option>
<vrc-option value="Segundo">2 - Segundo </vrc-option>
<vrc-option value="Terceiro">3 - Terceiro</vrc-option>
</vrc-autocomplete>`
})
export class MyComponent{
valor!: string;
}
Propriedades
Propriedades @Input()
|
|
| id |
define um id para o elemento input |
| classeCss |
seta classe css para todo o componente |
| name |
define um name para o elemento input |
| label |
define um label para o elemento input |
| control |
utilizando em formulários reativos |
| placeholder |
define o placeholder para o elemento input |
| isReadOnly |
define o input como apenas leitura (readonly) |
| isDisabled |
define o input como desabilitado (disabled) |
| isRequired* |
define o input como obrigatório (required) |
* Em formulários reativos não precisa declarar se é obrigatório, pois é definido na construção do FormGroup
Exemplo Formulário Reativo
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Observable } from 'rxjs';
import { startWith, map } from 'rxjs/operators';
@Component({
selector: 'vr-my',
template: `
<form [formGroup]="formGroup">
<vrc-autocomplete label="Estado" formControlName="estado" [control]="getField('estado')">
<vrc-option *ngFor="let estado of filteredOptions | async" [value]="estado">
<span>{{ estado }}</span>
</vrc-option>
</vrc-autocomplete>
</form>`
})
export class MyComponent implements OnInit {
filteredOptions!: Observable<string[]>;
estados = [{
id: 1,
sigla: 'SP',
nome: 'São Paulo'
},
{
id: 2,
sigla: 'BA',
nome: 'Bahia'
},
{
id: 3,
sigla: 'PR',
nome: 'Paraná'
},
{
id: 4,
sigla: 'AM',
nome: 'Amazonas'
}];
formGroup!: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit(): void {
this.buildForm();
}
getField(field: string): any {
return this.formGroup.get(field);
}
private buildForm(): void {
this.formGroup = this.formBuilder.group({
estado: [null, Validators.required]
});
}
private filterEstados(): void {
this.filteredOptions = this.getField('estado')?.valueChanges
.pipe(
startWith(''),
map((v: string) => this.filter(v))
);
}
private filter(value: string): string[] {
const filterValue = value?.toLowerCase();
return this.estados.map(estado => estado?.nome ?? '').filter(option => option.toLowerCase().includes(filterValue));
}
}
VR Checkbox
Como usar o componente VrcCheckboxComponent :
Para usar o vr checkbox precisa importar o seu modulo e então poderá usa-lo como um componente.
import { NgModule } from '@angular/core';
import { VrcCheckboxModule } from 'vrc-components';
@NgModule({
imports: [VrcCheckboxModule]
})
export class MyModule {}
templete:
<vrc-checkbox [(ngModel)]="isChecked">Ok?</vrc-checkbox>
Vinculando o valor.
import { Component } from '@angular/core';
@Component({
selector: 'vr-my',
template: '<vrc-checkbox [(ngModel)]="isChecked" >Ok?</vrc-checkbox>'
})
export class MyComponent{
isChecked = false;
}
Propriedades
Propriedades @Input()
|
|
| id |
define um id para o elemento input |
| classeCss |
seta classe css para todo o componente |
| name |
define um name para o elemento input |
| control |
utilizando em formulários reativos |
| isReadOnly |
define o input como apenas leitura (readonly) |
| isDisabled |
define o input como desabilitado (disabled) |
| isRequired* |
define o input como obrigatório (required) |
* Em formulários reativos não precisa declarar se é obrigatório, pois é definido na construção do FormGroup
Exemplo Formulário Reativo
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';
import { VrcFormValidations } from 'vrc-components';
@Component({
selector: 'vr-my',
template: `<form [formGroup]="formGroup">
<div class="row">
<div class="col-sm-12">
<ng-container formArrayName="frameworks" *ngFor="let item of formFrameworks.controls; let i = index">
<vrc-checkbox [formControlName]="i">{{frameworks[i] }}</vrc-checkbox>
</ng-container>
</div>
</div>
</form>`
})
export class MyComponent implements OnInit {
formGroup!: FormGroup;
frameworks = ['Angular', 'React', 'Vue'];
constructor(private formBuilder: FormBuilder) { }
get formFrameworks(): FormArray {
return this.formGroup.get('frameworks') as FormArray;
}
ngOnInit(): void {
this.buildForm();
}
getField(field: string): any {
return this.formGroup.get(field);
}
private buildForm(): void {
this.formGroup = this.formBuilder.group({
frameworks: this.buildFrameworks()
});
}
private buildFrameworks(): FormArray {
const values = this.frameworks.map(v => new FormControl(false));
return this.formBuilder.array(values, VrcFormValidations.requiredMinChebox());
}
}
VR Datepicker
O datepicker utiliza o valor no formato de text como por exemplo '20/02/2019'
Como usar o componente VrcDatepickerComponent :
Para usar o vr datepicker precisa importar o seu modulo e então poderá usa-lo como um componente.
import { NgModule } from '@angular/core';
import { VrcDatepickerModule } from 'vrc-components';
@NgModule({
imports: [ VrcDatepickerModule ]
})
export class MyModule {}
templete:
<vrc-datepicker id="dataId" [(ngModel)]="data"></vrc-datepicker>
Vinculando o valor.
import { Component } from '@angular/core';
@Component({
selector: 'vr-my',
template: '<vrc-datepicker label="Exemplo" type="text" isRequired="true" [(ngModel)]="valor"></vrc-datepicker>'
})
export class MyComponent{
data= '05/01/2020';
}
Propriedades
Propriedades @Input()
|
|
| id |
define um id para o elemento input |
| classeCss |
seta classe css para todo o componente |
| name |
define um name para o elemento input |
| label |
define um label para o elemento input |
| control |
utilizando em formulários reativos |
| placeholder |
define o placeholder para o elemento input |
| isReadOnly |
define o input como apenas leitura (readonly) |
| isDisabled |
define o input como desabilitado (disabled) |
| isRequired* |
define o input como obrigatório (required) |
| useNonWorkingDays |
utilizando quando precisa informar os dias não uteis providos de uma API externa |
* Em formulários reativos não precisa declarar se é obrigatório, pois é definido na construção do FormGroup
Exemplo Formulário Reativo
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'vr-my',
template: `
<form [formGroup]="formGroup">
<vrc-datepicker
label="Data"
formControlName="data"
[control]="getField('data')">
</vrc-datepicker>
</form>`
})
export class MyComponent implements OnInit{
formGroup!: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit(): void {
this.formGroup = this.formBuilder.group({
data: [null, Validators.required]
});
}
getField(field: string): any {
return this.formGroup.get(field);
}
}
VR Input
Como usar o componente VrcInputComponent :
Para usar o vr input precisa importar o seu modulo e então poderá usa-lo como um componente.
import { NgModule } from '@angular/core';
import { VrcInputModule } from 'vrc-components';
@NgModule({
imports: [ VrcImputModule ]
})
export class MyModule {}
templete:
<vrc-input type="text" [(ngModel)]="valor"></vrc-input>
Vinculando o valor.
import { Component } from '@angular/core';
@Component({
selector: 'vr-my',
template: '<vrc-input label="Exemplo" type="text" isRequired="true" [(ngModel)]="valor"></vrc-input>'
})
export class MyComponent{
valor = '';
}
Propriedades
Propriedades @Input()
|
|
| id |
define um id para o elemento input |
| classeCss |
seta classe css para todo o componente |
| name |
define um name para o elemento input |
| label |
define um label para o elemento input |
| type |
define um type para o elemento input, por padrão se inicializa como text |
| control |
utilizando em formulários reativos |
| placeholder |
define o placeholder para o elemento input |
| isReadOnly |
define o input como apenas leitura (readonly) |
| isDisabled |
define o input como desabilitado (disabled) |
| isRequired* |
define o input como obrigatório (required) |
* Em formulários reativos não precisa declarar se é obrigatório, pois é definido na construção do FormGroup
Exemplo Formulário Reativo
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'vr-my',
template: `
<form [formGroup]="formGroup">
<vrc-input
id="cpfcnpjId"
label="CPF/CNPJ"
formControlName="cnpjcpf"
[control]="getField('cnpjcpf')">
</vrc-input>
</form>`
})
export class MyComponent implements OnInit{
formGroup!: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit(): void {
this.formGroup = this.formBuilder.group({
cnpjcpf: [null, Validators.required]
});
}
getField(field: string): any {
return this.formGroup.get(field);
}
}
VR Radio
Como usar os componentes VrcRadioGroupComponent e VrcRadioButtonComponent :
O radio e composto por dois componentes o grupo de radio e os botões de radio.
import { NgModule } from '@angular/core';
import { VrcRadioModule } from 'vrc-components';
@NgModule({
imports: [VrcRadioModule]
})
export class MyModule {}
templete:
<vrc-radio-group [(ngModel)]="place">
<vrc-radio-button value="Casa">Em casa</vrc-radio-button>
<vrc-radio-button value="Trabalho">No trabalho</vrc-radio-button>
<vrc-radio-button value="Viajando">Viajando</vrc-radio-button>
</vrc-radio-group>
Vinculando o valor.
import { Component } from '@angular/core';
@Component({
selector: 'vr-my',
template: '<vrc-radio-group [(ngModel)]="place">
<vrc-radio-button value="Casa">Em casa</vrc-radio-button>
<vrc-radio-button value="Trabalho">No trabalho</vrc-radio-button>
<vrc-radio-button value="Viajando">Viajando</vrc-radio-button>
</vrc-radio-group>'
})
export class MyComponent{
place!: string;
}
Propriedades
Propriedades @Input()
|
|
| id |
define um id para o elemento input |
| classeCss |
seta classe css para todo o componente |
| name |
define um name para o elemento input |
| control |
utilizando em formulários reativos |
| isReadOnly |
define o input como apenas leitura (readonly) |
| isDisabled |
define o input como desabilitado (disabled) |
| isRequired* |
define o input como obrigatório (required) |
* Em formulários reativos não precisa declarar se é obrigatório, pois é definido na construção do FormGroup
Obs: Para alinha os botões verticalmente se usa a propriedade 'classeCss', passando a classe 'vertical-align'.
Exemplo Formulário Reativo
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';
import { VrcFormValidations } from 'vrc-components';
@Component({
selector: 'vr-my',
template: `<form [formGroup]="formGroup">
<div class="row">
<div class="col-sm-6">
<vrc-radio-group formControlName="gender" [control]="getField('gender')">
<vrc-radio-button *ngFor="let gender of genders" [value]="gender.value">{{ gender?.description }}
</vrc-radio-button>
</vrc-radio-group>
</div>
</div>
</form>`
})
export class MyComponent implements OnInit {
formGroup!: FormGroup;
genders: Gender[] = [
{ value: 'M', description: 'Masculino' },
{ value: 'F', description: 'Feminino' },
{ value: 'O', description: 'Outro' }
];
constructor(private formBuilder: FormBuilder) { }
ngOnInit(): void {
this.buildForm();
}
getField(field: string): any {
return this.formGroup.get(field);
}
private buildForm(): void {
this.formGroup = this.formBuilder.group({
gender: [null, Validators.required]
});
}
}
VR Slide Toggle
Como usar o componente VrcSlideToggleComponent :
Para usar o vr slide toggle precisa importar o seu modulo e então poderá usa-lo como um componente.
import { NgModule } from "@angular/core";
import { VrcSlideToggleModule } from "vrc-components";
@NgModule({
imports: [VrcSlideToggleModule],
})
export class MyModule {}
templete:
<vrc-slide-toggle [(ngModel)]="isChecked">Ok?</vrc-slide-toggle>
Vinculando o valor.
import { Component } from "@angular/core";
@Component({
selector: "vr-my",
template: '<vrc-slide-toggle [(ngModel)]="isChecked" >Ok?</vrc-slide-toggle>',
})
export class MyComponent {
isChecked = false;
}
Propriedades
Propriedades @Input()
|
|
| id |
define um id para o elemento input |
| classeCss |
seta classe css para todo o componente |
| name |
define um name para o elemento input |
| control |
utilizando em formulários reativos |
| isReadOnly |
define o input como apenas leitura (readonly) |
| isDisabled |
define o input como desabilitado (disabled) |
| isRequired* |
define o input como obrigatório (required) |
* Em formulários reativos não precisa declarar se é obrigatório, pois é definido na construção do FormGroup
Exemplo Formulário Reativo
import { Component, OnInit } from "@angular/core";
import { FormBuilder, FormGroup, FormArray, FormControl } from "@angular/forms";
import { VrcFormValidations } from "vrc-components";
@Component({
selector: "vr-my",
template: `<form [formGroup]="formGroup">
<div class="row">
<div class="col-sm-12">
<ng-container
formArrayName="frameworks"
*ngFor="let item of formFrameworks.controls; let i = index"
>
<vrc-slide-toggle [formControlName]="i">{{
frameworks[i]
}}</vrc-slide-toggle>
</ng-container>
</div>
</div>
</form>`,
})
export class MyComponent implements OnInit {
formGroup!: FormGroup;
frameworks = ["Angular", "React", "Vue"];
constructor(private formBuilder: FormBuilder) {}
get formFrameworks(): FormArray {
return this.formGroup.get("frameworks") as FormArray;
}
ngOnInit(): void {
this.buildForm();
}
getField(field: string): any {
return this.formGroup.get(field);
}
private buildForm(): void {
this.formGroup = this.formBuilder.group({
frameworks: this.buildFrameworks(),
});
}
private buildFrameworks(): FormArray {
const values = this.frameworks.map((v) => new FormControl(false));
return this.formBuilder.array(
values,
VrcFormValidations.requiredMinChebox()
);
}
}
VR Tabs
Como usar o componente VrcTabsComponent :
Para usar o vr tabs precisa importar o seu modulo e então poderá usa-lo como um componente.
import { NgModule } from "@angular/core";
import { VrcTabsModule } from "vrc-components";
@NgModule({
imports: [VrcTabsModule],
})
export class MyModule {}
templete:
<vrc-tabs>
<vrc-tab label="Primeiro"><div class="col-sm-12">Tab 01</div></vrc-tab>
<vrc-tab label="Segundo"><div class="col-sm-12">Tab 02</div></vrc-tab>
<vrc-tab label="Terceiro"><div class="col-sm-12">Tab 03</div></vrc-tab>
</vrc-tabs>
Propriedades
Propriedade @Output()
|
|
| selected |
obtém o valor selecionado no click |
| styleButton |
altera stilo do botão de seleção |
Exemplo
import { Component } from "@angular/core";
("@angular/forms");
@Component({
selector: "vr-my",
template: `
<vrc-tabs (selected)="onSelected($event)">
<vrc-tab label="Primeiro"><div class="col-sm-12">Tab 01</div></vrc-tab>
<vrc-tab label="Segundo"><div class="col-sm-12">Tab 02</div></vrc-tab>
<vrc-tab label="Terceiro"><div class="col-sm-12">Tab 03</div></vrc-tab>
</vrc-tabs>
`,
})
export class MyComponent {
selected!: string;
onSelected(selected: string): void {
this.selected = selected;
}
}
VR Textarea
Como usar o componente VrcTextareaComponent :
Para usar o vr textarea precisa importar o seu modulo e então poderá usa-lo como um componente.
import { NgModule } from "@angular/core";
import { VrcTextareaModule } from "vrc-components";
@NgModule({
imports: [VrcTextareaModule],
})
export class MyModule {}
templete:
<vrc-textarea [(ngModel)]="valor"></vrc-textarea>
Vinculando o valor.
import { Component } from "@angular/core";
@Component({
selector: "vr-my",
template:
'<vrc-textarea label="Exemplo" rows="5" isRequired="true" [(ngModel)]="valor"></vrc-textarea>',
})
export class MyComponent {
valor = "";
}
Propriedades
Propriedades @Input()
|
|
| id |
define um id para o elemento input |
| classeCss |
seta classe css para todo o componente |
| name |
define um name para o elemento input |
| label |
define um label para o elemento input |
| type |
define um type para o elemento input, por padrão se inicializa como text |
| control |
utilizando em formulários reativos |
| placeholder |
define o placeholder para o elemento input |
| isReadOnly |
define o input como apenas leitura (readonly) |
| isDisabled |
define o input como desabilitado (disabled) |
| isRequired* |
define o input como obrigatório (required) |
| maxlength |
especifica um número máximo de caracteres que o 'textarea' tem permissão para conter. |
| minlength |
especifica um número mínimo de caracteres que o 'textarea' tem permissão para conter. |
| row |
O número de linhas de texto visíveis para o controle. |
| spellcheck |
Especifica se o 'textarea' está sujeito a verificação ortográfica pelo navegador / SO subjacente |
| wrap |
Indica como o controle quebra o texto. |
* Em formulários reativos não precisa declarar se é obrigatório, pois é definido na construção do FormGroup
Para mais informações acesse aqui.
Exemplo Formulário Reativo
import { Component, OnInit } from "@angular/core";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
@Component({
selector: "vr-my",
template: ` <form [formGroup]="formGroup">
<vrc-textarea
label="Descrição"
formControlName="descricao"
[control]="getField('descricao')"
>
</vrc-textarea>
</form>`,
})
export class MyComponent implements OnInit {
formGroup!: FormGroup;
constructor(private formBuilder: FormBuilder) {}
ngOnInit(): void {
this.formGroup = this.formBuilder.group({
descricao: [null, Validators.required],
});
}
getField(field: string): any {
return this.formGroup.get(field);
}
}
