vr-components

v1.2.6

Published

3 years ago

Biblioteca de componentes angular VR Software

Downloads

0High
0Medium
0Low

vrsoft

VR vr vr software vrsoftware VR Software VR SOFTWARE VRSOFTWARE vr components vr componentes components componentes

vr components é uma biblioteca Angular (>=9) com componentes reutilizáveis.

Install


$ npm install vr-components --save

E instale "peer dependencies":

@angular/[email protected]
@angular/[email protected]
[email protected]
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()

* 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()

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Install

Pré Requisitos

Vr Design Guide

Uso

No módulo importa-se o componente necessário, por exemplo o VrcDatepickerModule no seu app.

Como usar um componente como VrcDatepickerComponent no templete:

Vinculando('Binding') para propriedade data

VR Autocomplete

Como usar o componente VrcAutocompleteComponent :

Propriedades

Exemplo Formulário Reativo

VR Checkbox

Como usar o componente VrcCheckboxComponent :

Propriedades

Exemplo Formulário Reativo

VR Datepicker

Como usar o componente VrcDatepickerComponent :

Propriedades

Exemplo Formulário Reativo

VR Input

Como usar o componente VrcInputComponent :

Propriedades

Exemplo Formulário Reativo

VR Radio

Como usar os componentes VrcRadioGroupComponent e VrcRadioButtonComponent :

Propriedades

Exemplo Formulário Reativo

VR Slide Toggle

Como usar o componente VrcSlideToggleComponent :

Propriedades

Exemplo Formulário Reativo

VR Tabs

Como usar o componente VrcTabsComponent :

Propriedades

Exemplo

VR Textarea

Como usar o componente VrcTextareaComponent :

Propriedades

Exemplo Formulário Reativo

No módulo importa-se o componente necessário, por exemplo o `VrcDatepickerModule` no seu app.

Como usar um componente como `VrcDatepickerComponent` no templete:

Vinculando('Binding') para propriedade `data`

Como usar o componente `VrcAutocompleteComponent` :

Como usar o componente `VrcCheckboxComponent` :

Como usar o componente `VrcDatepickerComponent` :

Como usar o componente `VrcInputComponent` :

Como usar os componentes `VrcRadioGroupComponent e VrcRadioButtonComponent` :

Como usar o componente `VrcSlideToggleComponent` :

Como usar o componente `VrcTabsComponent` :

Como usar o componente `VrcTextareaComponent` :