Vr-components NPM

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.7
tslib@1.10.0
moment@^2.24.0
lodash@^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);
  }
}