npm.io
1.0.0 • Published 7 years ago

monitor-components

Licence
—
Version
1.0.0
Deps
4
Size
599 kB
Vulns
2
Weekly
0
SummaryDependencyVersions

air-vue-components

Componentes VueJS para os projetos Web do Ecossistema AIR

npm install air-vue-components --save

Índice

  1. How To
  2. Componentes
  3. Mixins
  4. Constantes
  5. Filters
  6. Vuex

How To

this.$debug = (mtd, msg) => { if (process.env.NODE_ENV !== 'production') { console.log(mtd, msg) } }
this.$httpRequest = httpRequest
this.$URL = options.constantes.URL
this.$C = options.constantes
this.$meses = meses
this.$dias = dias
this.$cores = cores
this.$clonar = (obj) => JSON.parse(JSON.stringify(obj))
this.$domain = (process.env.NODE_ENV === 'development') ? 'localhost' : 'sumicity.net.br'
this.$sistema = {
    nome: options.nome,
    icone: options.icone,
    versao: options.versao,
    codigo: options.codigo
}

Componentes

403

Dedicado à exibição de mensagem de acesso negado.

Exemplo
<template>
    <air-403/>
</template>
404

Dedicado à exibição de mensagem de endereço não encontrado.

Exemplo
<template>
    <air-404/>
</template>
air-booleano

Componente de tratamento de valores booleanos .

Exemplo
<b-table-column label="Ativo" >
    <air-booleano :valor="props.row.ativo"/>
</b-table-column>
Props
Prop Tipo Default
value Boolean -
isIcon Boolean false
size String -
simTexto String 'Sim'
naoTexto String 'Não'
simIcone String 'check-circle'
naoIcone String 'minus-circle'
simType String 'is-info'
naoType String 'is-danger'
air-botao

Botão padrão Air

Este componente não tem o evento @click, sendo necessária a utilização do evento @click.native.

Exemplo
<footer>
    <air-botao type="submit" :loading="loadingForm" css="is-primary" icon="check" text="Salvar" />
</footer>
Props
Prop Tipo Default
type String 'button'
tooltip String null
to String null
loading String false
disabled Boolean null
routerLink Boolean false
text String null
icon String null
size String null
css String null
air-botao-json

Botão para modal.

Exemplo
<footer>
    <air-botao-json :value="item" />
</footer>
Props
Prop Tipo Default
value Object
air-box

Componente para criação de um container com título.

Este componente apresenta os Slots de menu e titulo.

Exemplo
<air-box>
  <h2 slot="titulo" class="title">Avisos</h2>

  <div slot="menu">
    <air-filtro @filtrar="filtrar" @limpar="limparFiltro" :loading="loading">

      <b-field label="Mensagem">
        <b-input v-model="filtro.mensagem" placeholder="Contém"/>
      </b-field>

      <b-field label="Ativo">
        <b-switch v-model="filtro.ativo">
          {{filtro.ativo ? 'Sim' : 'Não'}}
        </b-switch>
      </b-field>

    </air-filtro>

    <button class="button is-light" :class="{'is-loading': loading}" @click="listar()">
      <b-icon icon="sync"/>
    </button>

    <button class="button is-primary" @click="carregar()">
      <b-icon icon="plus"/>
      <span>Novo</span>
    </button>
  </div>
  
  <b-table :data="lista" :loading="loading" class="row-button">
  
  </b-table>
</air-box>
Props
Prop Tipo Default
background String '#ffffff'
border String '#c2c5c7'
padding String '13px'
nivel Number 1
air-cabecalho

Componente para cabeçalho Air.

Exemplo
<template>
  <div>
    <air-cabecalho>
      <air-menu/>
    </air-cabecalho>
  </div>
</template>

Tabela para seleção de itens de um catálogo.

Events
Event Data
input Array
Exemplo
<air-column>
    <air-checkbox v-model="objeto.veiculos" height="170"
       label="Tipos de veículo" :catalogoItens="catalogoItensVeiculo" />
</air-column>
Props
Prop Tipo Default
value Array []
height String '350px'
catalogoItens Array null
label String null
air-checkbox-unidade

Tabela para seleção de unidades.

Events
Event Data
input Array
Exemplo
<air-column>
    <air-checkbox-unidade v-model="objeto.unidades" height="350" />
</air-column>
Props
Prop Tipo Default
value Array []
height String '350px'
air-column

Coluna padrão Air.

Exemplo
<air-column>
    <air-checkbox-unidade v-model="objeto.unidades" height="350" />
</air-column>
Props
Prop TIPO Default
s1 Boolean false
s2 Boolean false
s3 Boolean false
s4 Boolean false
s5 Boolean false
s6 Boolean false
s7 Boolean false
s8 Boolean false
s9 Boolean false
s10 Boolean false
s11 Boolean false
s12 Boolean false
air-columns

Sistema de colunas Air.

Exemplo
<air-columns>
    <air-column>
        <air-checkbox-unidade v-model="objeto.unidades" height="350" />
    </air-column>
</air-columns>
air-filtro

Componente para comportar campos de filtros.

Exemplo
<template slot="menu">
    <air-filtro @filtrar="filtrar" @limpar="limparFiltro" :loading="loading">
      <b-field label="Código"> <b-input v-model="filtro.codigo" placeholder="Contém"/> </b-field>
      <b-field label="Nome">   <b-input v-model="filtro.cliente_nome" placeholder="Contém"/>   </b-field>
      <b-field label="E-mail"> <b-input v-model="filtro.email" placeholder="Contém"/>  </b-field>
    </air-filtro>
</template>
  • Em casos de parâmetros dentro de um objeto, substitua o '.' por um '_', como no caso do 'nome' no exemplo acima.
Events
Event Data
filtrar -
limpar -
Props
Prop Tipo Default
loading Boolean
air-lista-vazia

Aviso de lista vazia.

Exemplo
<air-lista-vazia slot="empty"/>
Props
Prop Tipo Default
mensagem String 'Nenhum registro localizado.'
icon String 'frown'
air-loading

Indicador de carregamentos.

Exemplo
<air-loading class="m-t-xl" :value="loadingPermissao"/>
Props
Prop Tipo Default
message String ''
value Boolean true
isLarge Boolean false
air-perfil

Perfil de usuário Air.

Exemplo
<div class="column">
    <air-perfil/>
</div>
air-permissoes

Carrega as permissões de um usuário logado ou o redireciona para a tela de login.

Exemplo
<div class="column">
    <air-permissoes :url="url" to="/dashboard" />
</div>
air-rodape

Rodapé padrão Air.

Exemplo
<template>
  <div id="app">
    <air-cabecalho>
      <air-menu/>
    </air-cabecalho>

    <div class="page">
      <router-view/>
    </div>

    <air-rodape/>
  </div>
</template>
air-rotulo

Apresenta dados com label.

Exemplo
<div class="content">
  <air-rotulo inline label="Cliente:" :value="props.row.nome"/>
</div>
Props
Prop Tipo Default
inline Boolean false
momentFromNow Boolean false
catalogoItem Boolean false
value String '-'
label String null
moment String null
icon String null
air-status-integracao

Tooltip com cores padrão para mensagens de integração.

Exemplo
<div class="has-text-centered m-t">
    <p class="m-b-sm">Situação da integração com o VSC</p>
    <air-status-integracao :status="reserva.status_integracao" :mensagem="reserva.mensagem_integracao"/>
</div>
Props
Prop Tipo Default
status String null
size String ''
mensagem String ''
air-usuario

Exibe a imagem de um usuário.

Exemplo
<b-table-column field="criador" label="Criador">
    <air-usuario url="usuario/codigo/" :codigo="props.row.criador"></air-usuario>
</b-table-column>
Props
Prop Tipo Default
codigo String null
size String 'img-xs'
air-usuario-card

Exibe informações de um usuário.

Props
Prop Tipo Default
codigo String null

Mixins

mixin-default

Mixin padrão para todos os componentes Vue.

Data
data Default
isLoading false
isFailed false
failMessage ''
Methods
Method Input Output
httpGet url (String) Promise
httpPost url (String), body (Object) Promise
httpPut url (String), body (Object) Promise
httpDelete url (String) Promise
toast response (Object) void
permitir permissao (String) Boolean
catalogo codigo (String) Array
Form

Mixin para formulários.

Data
data Default
mensagemExcluir 'Deseja realmente excluir este item? Esta ação não pode ser desfeita.'
url ''
objeto null
camposValidados []
loadingCampo []
Methods
Method Input Output
initObjeto - {}
salvar - void
deletar - void
mensagemForm response (Object) void
errorType response (Object) String
addCampoValido campo (String) void
removeCampoValido campo (String) void
addLoadingCampo campo (String) void
removeLoadingCampo campo (String) void
isLoadingField campo (String) Boolean
checkUnique campo (String) void
Listagem

Mixin para listas.

Data
data Default
lista []
filtro {}
pagina {}
sortField 'id'
sortOrder 'DESC'
page 0
perPage 20
url null
paginar false
metodo 'GET'
selecionado null
Methods
Method Input Output
listar - void
query - String
onPageChange page (Number) void
onSort field (String), order (String) void
filtrar - void
limparFiltro - void
resetPagina perPage (Number) void
listagemCarregada response (Object) void
View

Mixin para páginas descritivas.

Data
data Default
id null
objeto null
url null
loadingItem []
itens []
buscas []
Methods
Method Input Output
buscar - void
buscarGet - void
isLoadingItem urlSufixo (String) Boolean
addLoadingItem urlSufixo (String) void
removeLoadingItem urlSufixo (String) void
getItem urlSufixo (String) Array
removeItem urlSufixo (String) void
addItem urlSufixo (String), valor void
buscarItem response (Object) void

Constantes

  • meses => ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"]
  • dias => ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sab"]
  • cores => ['rgba(51, 102, 204, 0.7)',
    'rgba(220, 57, 18, 0.7)',
    'rgba(255, 153, 0, 0.7)',
    'rgba(16, 150, 24, 0.7)',
    'rgba(153, 0, 153, 0.7)',
    'rgba(59, 62, 172, 0.7)',
    'rgba(0, 153, 198, 0.7)',
    'rgba(221, 68, 119, 0.7)',
    'rgba(102, 170, 0, 0.7)',
    'rgba(184, 46, 46, 0.7)',
    'rgba(49, 99, 149, 0.7)',
    'rgba(153, 68, 153, 0.7)',
    'rgba(34, 170, 153, 0.7)',
    'rgba(170, 170, 17, 0.7)',
    'rgba(102, 51, 204, 0.7)',
    'rgba(230, 115, 0, 0.7)',
    'rgba(139, 7, 7, 0.7)',
    'rgba(50, 146, 98, 0.7)',
    'rgba(85, 116, 166, 0.7)',
    'rgba(59, 62, 172, 0.7)']

Filters

Filtro Input Output
booleano value (Boolean), sim (String), nao (String) String
truncate value (Boolean), length (Number) String
telefone value (String) String
numero value (String), casasDecimais (Number) String
cpfcnpj value (String) String
cep value (String) String
item value (Boolean), catalogos (String), atributo (String) String

Vuex

Stores
  • auth
State
State Default
permissoes []
catalogos []
Mutations
Mutation Input Output
registrarPermissoes state (String), payload (Object) -
registrarCatalogos state (String), payload (Object) -