Componentes VueJS para os projetos Web do Ecossistema AIR
`` bash`
npm install air-vue-components --saveÍndice
1. How To
2. Componentes
* 403
* 404
* AirBoleano
* AirBotao
* AirBotaoJson
* AirBox
* AirCabecalho
* AirCheckboxCatalogo
* AirCheckboxUnidade
* AirColumn
* AirColumns
* AirFiltro
* AirListaVazia
* AirLoading
* AirPerfil
* AirPermissoes
* AirRodape
* AirRotulo
* AirStatusIntegracao
* AirUsuario
* AirUsuarioCard
3. Mixins
* Mixin Default
* Form
* Listagem
* View
4. Constantes
5. Filters
6. Vuex
`javascript`
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
Dedicado à exibição de mensagem de acesso negado.
##### Exemplo
`html`
Dedicado à exibição de mensagem de endereço não encontrado.
##### Exemplo
`html`
Componente de tratamento de valores booleanos .
##### Exemplo
`html`
##### 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' |
Botão padrão Air
> Este componente não tem o evento @click, sendo necessária a utilização do evento @click.native.
##### Exemplo
`html`
##### 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 |
Botão para modal.
##### Exemplo
`html`
##### Props
|Prop |Tipo |Default |
|:--------------:|:-----------------------------:|:---------------------------:|
|value |Object | |
Componente para criação de um container com título.
> Este componente apresenta os Slots de menu e titulo.
##### Exemplo
`html
Avisos
{{filtro.ativo ? 'Sim' : 'Não'}}
##### Props
|Prop |Tipo |Default |
|:--------------:|:-----------------------------:|:---------------------------:|
|background |String |'#ffffff' |
|border |String |'#c2c5c7' |
|padding |String |'13px' |
|nivel |Number |1 |
$3
Componente para cabeçalho Air.
##### Exemplo
html
`$3
Tabela para seleção de itens de um catálogo.
##### Events
|Event |Data |
|:--------------:|:-----------------------------:|
|input |Array |
##### Exemplo
html
`##### Props
|Prop |Tipo |Default |
|:--------------:|:-----------------------------:|:---------------------------:|
|value |Array |[] |
|height |String |'350px' |
|catalogoItens |Array |null |
|label |String |null |
$3
Tabela para seleção de unidades.
##### Events
|Event |Data |
|:--------------:|:-----------------------------:|
|input |Array |
##### Exemplo
html
`##### Props
|Prop |Tipo |Default |
|:--------------:|:-----------------------------:|:---------------------------:|
|value |Array |[] |
|height |String |'350px' |
$3
Coluna padrão Air.
##### Exemplo
html
`##### 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 |
$3
Sistema de colunas Air.
##### Exemplo
html
`$3
Componente para comportar campos de filtros.
##### Exemplo
html
`
> * 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 | |
$3
Aviso de lista vazia.
##### Exemplo
html
`##### Props
|Prop |Tipo |Default |
|:--------------:|:-----------------------------:|:---------------------------:|
|mensagem |String |'Nenhum registro localizado.' |
|icon |String |'frown' |
$3
Indicador de carregamentos.
##### Exemplo
html
`##### Props
|Prop |Tipo |Default |
|:--------------:|:-----------------------------:|:---------------------------:|
|message |String |'' |
|value |Boolean |true |
|isLarge |Boolean |false |
$3
Perfil de usuário Air.
##### Exemplo
html
`$3
Carrega as permissões de um usuário logado ou o redireciona para a tela de login.
##### Exemplo
html
`
$3
Rodapé padrão Air.
##### Exemplo
html
`
$3
Apresenta dados com label.
##### Exemplo
html
`##### Props
|Prop |Tipo |Default |
|:--------------:|:-----------------------------:|:---------------------------:|
|inline |Boolean |false |
|momentFromNow |Boolean |false |
|catalogoItem |Boolean |false |
|value |String |'-' |
|label |String |null |
|moment |String |null |
|icon |String |null |
$3
Tooltip com cores padrão para mensagens de integração.
##### Exemplo
html
Situação da integração com o VSC
`##### Props
|Prop |Tipo |Default |
|:--------------:|:-----------------------------:|:---------------------------:|
|status |String |null |
|size |String |'' |
|mensagem |String |'' |
$3
Exibe a imagem de um usuário.
##### Exemplo
html
``##### Props
|Prop |Tipo |Default |
|:--------------:|:-----------------------------:|:---------------------------:|
|codigo |String |null |
|size |String |'img-xs' |
Exibe informações de um usuário.
##### Props
|Prop |Tipo |Default |
|:--------------:|:-----------------------------:|:---------------------------:|
|codigo |String |null |
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 |
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 |
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 |
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 |
- 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)']
|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 |
#### State
|State |Default |
|:-----------------:|:-------------:|
|permissoes |[] |
|catalogos |[] |
#### Mutations
|Mutation |Input |Output |
|:--------------------------:|:--------------------------------:|:---------:|
|registrarPermissoes |state (String), payload (Object) |- |
|registrarCatalogos |state (String), payload (Object) |- |