JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
    • 0
  • Score
    100M100P100Q8041F
  • License MIT

Biblioteca de componentes angular vr software

Package Exports

  • vr-components

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vr-components) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

VR COMPONENTS

Angular TypeScript

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 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 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

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;
 }
}