Nice Pottery Mug

    vr-components
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.6 • Public • Published

    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(valuestring): 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);
      }
    }

    Install

    npm i vr-components

    DownloadsWeekly Downloads

    1

    Version

    1.2.6

    License

    MIT

    Unpacked Size

    1.37 MB

    Total Files

    212

    Last publish

    Collaborators

    • vrsoft