# monitor-components

> Componentes para o e-monitor

Latest version **1.0.0** (published 2018-09-17) · 0 weekly downloads

## Install

```sh
npm install monitor-components
pnpm add monitor-components
yarn add monitor-components
bun add monitor-components
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2018-09-17 |
| First published | 2018-09-17 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 598.9 KB |
| Known vulnerabilities | 0 (+2 in 2 direct dependencies) |
| Install scripts | no |
| Author | p.eduardoaraujo@gmail.com |
| Maintainers | peduardorocha |

## Links

- npm: https://www.npmjs.com/package/monitor-components
- npm.io page: https://npm.io/package/monitor-components

## Dependencies (4)

- [vue](https://npm.io/package/vue.md) ^2.4.2
- [buefy](https://npm.io/package/buefy.md) ^0.6.5
- [vue-cookie](https://npm.io/package/vue-cookie.md) ^1.1.4
- [vue-the-mask](https://npm.io/package/vue-the-mask.md) ^0.11.1

## Recent versions

- 1.0.0 (latest) — 2018-09-17

## README

# air-vue-components
> Componentes VueJS para os projetos Web do Ecossistema AIR

``` bash
npm install air-vue-components --save
```
## Índice
1. [How To](#how-to)
2. [Componentes](#componentes)
    * [403](#anchor-403)
    * [404](#anchor-404)
    * [AirBoleano](#air-booleano)
    * [AirBotao](#air-botao)
    * [AirBotaoJson](#air-botao-json)
    * [AirBox](#air-box)
    * [AirCabecalho](#air-cabecalho)
    * [AirCheckboxCatalogo](#air-checkbox-catalogo)
    * [AirCheckboxUnidade](#air-checkbox-unidade)
    * [AirColumn](#air-column)
    * [AirColumns](#air-columns)
    * [AirFiltro](#air-filtro)
    * [AirListaVazia](#air-lista-vazia)
    * [AirLoading](#air-loading)
    * [AirPerfil](#air-perfil)
    * [AirPermissoes](#air-permissoes)
    * [AirRodape](#air-rodape)
    * [AirRotulo](#air-rotudo)
    * [AirStatusIntegracao](#air-status-integracao)
    * [AirUsuario](#air-usuario)
    * [AirUsuarioCard](#air-usuario-card)
3. [Mixins](#mixins)
    * [Mixin Default](#mixin-default)
    * [Form](#form)
    * [Listagem](#listagem)
    * [View](#view)
4. [Constantes](#constantes)
5. [Filters](#filters)
6. [Vuex](#vuex)

## [How To](http://git.sumicity.net.br/ecossistema/air-vue-components/blob/master/src/air-vue-components.js)

```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](http://git.sumicity.net.br/ecossistema/air-vue-components/tree/master/src/components)

### [403](http://git.sumicity.net.br/ecossistema/air-vue-components/blob/master/src/components/403.vue)

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

##### Exemplo

```html
<template>
    <air-403/>
</template>
```

### [404](http://git.sumicity.net.br/ecossistema/air-vue-components/blob/master/src/components/404.vue)

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

##### Exemplo

```html
<template>
    <air-404/>
</template>
```

### [air-booleano](http://git.sumicity.net.br/ecossistema/air-vue-components/blob/master/src/components/AirBooleano.vue)

Componente de tratamento de valores booleanos .

##### Exemplo

```html
<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](http://git.sumicity.net.br/ecossistema/air-vue-components/blob/master/src/components/AirBotao.vue)

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
<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](http://git.sumicity.net.br/ecossistema/air-vue-components/blob/master/src/components/AirBotaoJson.vue)

Botão para modal.

##### Exemplo

```html
<footer>
    <air-botao-json :value="item" />
</footer>
```

##### Props

|Prop            |Tipo                           |Default                      |
|:--------------:|:-----------------------------:|:---------------------------:|
|value           |Object                         |                             |

### [air-box](http://git.sumicity.net.br/ecossistema/air-vue-components/blob/master/src/components/AirBox.vue)

Componente para criação de um container com título.
> Este componente apresenta os *Slots* de *menu* e *titulo*.

##### Exemplo

```html
<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](http://git.sumicity.net.br/ecossistema/air-vue-components/blob/master/src/components/AirCabecalho.vue)

Componente para cabeçalho Air.

##### Exemplo

```html
<template>
  <div>
    <air-cabecalho>
      <air-menu/>
    </air-cabecalho>
  </div>
</template>
```

### [air-checkbox-catalogo](http://git.sumicity.net.br/ecossistema/air-vue-components/blob/master/src/components/AirCheckboxCatalogo.vue)

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

##### Events

|Event           |Data                           |
|:--------------:|:-----------------------------:|
|input           |Array                          |

##### Exemplo

```html
<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](http://git.sumicity.net.br/ecossistema/air-vue-components/blob/master/src/components/AirCheckboxUnidade.vue)

Tabela para seleção de unidades.

##### Events

|Event           |Data                           |
|:--------------:|:-----------------------------:|
|input           |Array                          |

##### Exemplo

```html
<air-column>
    <air-checkbox-unidade v-model="objeto.unidades" height="350" />
</air-column>
```

##### Props

|Prop            |Tipo                           |Default                      |
|:--------------:|:-----------------------------:|:---------------------------:|
|value           |Array                          |[]                           |
|height          |String                         |'350px'                      |

### [air-column](http://git.sumicity.net.br/ecossistema/air-vue-components/blob/master/src/components/AirColumn.vue)

Coluna padrão Air.

##### Exemplo

```html
<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](http://git.sumicity.net.br/ecossistema/air-vue-components/blob/master/src/components/AirColumns.vue)

Sistema de colunas Air.

##### Exemplo

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

### [air-filtro](http://git.sumicity.net.br/ecossistema/air-vue-components/blob/master/src/components/AirFiltro.vue)

Componente para comportar campos de filtros.

##### Exemplo

```html
<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](http://git.sumicity.net.br/ecossistema/air-vue-components/blob/master/src/components/AirListaVazia.vue)

Aviso de lista vazia.

##### Exemplo

```html
<air-lista-vazia slot="empty"/>
```

##### Props

|Prop            |Tipo                           |Default                      |
|:--------------:|:-----------------------------:|:---------------------------:|
|mensagem        |String                         |'Nenhum registro localizado.' |
|icon            |String                         |'frown'                       |

### [air-loading](http://git.sumicity.net.br/ecossistema/air-vue-components/blob/master/src/components/AirLoading.vue)

Indicador de carregamentos.

##### Exemplo

```html
<air-loading class="m-t-xl" :value="loadingPermissao"/>
```

##### Props

|Prop            |Tipo                           |Default                      |
|:--------------:|:-----------------------------:|:---------------------------:|
|message         |String                         |''                           |
|value           |Boolean                        |true                         |
|isLarge         |Boolean                        |false                        |

### [air-perfil](http://git.sumicity.net.br/ecossistema/air-vue-components/blob/master/src/components/AirPerfil.vue)

Perfil de usuário Air.

##### Exemplo

```html
<div class="column">
    <air-perfil/>
</div>
```

### [air-permissoes](http://git.sumicity.net.br/ecossistema/air-vue-components/blob/master/src/components/AirPermissoes.vue)

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

##### Exemplo

```html
<div class="column">
    <air-permissoes :url="url" to="/dashboard" />
</div>
```
### [air-rodape](http://git.sumicity.net.br/ecossistema/air-vue-components/blob/master/src/components/AirRodape.vue)

Rodapé padrão Air.

##### Exemplo

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

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

    <air-rodape/>
  </div>
</template>
```
### [air-rotulo](http://git.sumicity.net.br/ecossistema/air-vue-components/blob/master/src/components/AirRotulo.vue)

Apresenta dados com label.

##### Exemplo

```html
<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](http://git.sumicity.net.br/ecossistema/air-vue-components/blob/master/src/components/AirStatusIntegracao.vue)

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

##### Exemplo

```html
<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](http://git.sumicity.net.br/ecossistema/air-vue-components/blob/master/src/components/AirUsuario.vue)

Exibe a imagem de um usuário.

##### Exemplo

```html
<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](http://git.sumicity.net.br/ecossistema/air-vue-components/blob/master/src/components/AirUsuarioCard.vue)

Exibe informações de um usuário.

##### Props

|Prop            |Tipo                           |Default                      |
|:--------------:|:-----------------------------:|:---------------------------:|
|codigo          |String                         |null                         |

## [Mixins](http://git.sumicity.net.br/ecossistema/air-vue-components/tree/master/mixins)

### [mixin-default](http://git.sumicity.net.br/ecossistema/air-vue-components/blob/master/mixins/mixin-default.js)

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](http://git.sumicity.net.br/ecossistema/air-vue-components/blob/master/mixins/form.js)

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](http://git.sumicity.net.br/ecossistema/air-vue-components/blob/master/mixins/listagem.js)

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](http://git.sumicity.net.br/ecossistema/air-vue-components/blob/master/mixins/view.js)

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)', <br>
           'rgba(220, 57, 18, 0.7)', <br>
           'rgba(255, 153, 0, 0.7)', <br>
           'rgba(16, 150, 24, 0.7)', <br>
           'rgba(153, 0, 153, 0.7)', <br>
           'rgba(59, 62, 172, 0.7)', <br>
           'rgba(0, 153, 198, 0.7)', <br>
           'rgba(221, 68, 119, 0.7)', <br>
           'rgba(102, 170, 0, 0.7)', <br>
           'rgba(184, 46, 46, 0.7)', <br>
           'rgba(49, 99, 149, 0.7)', <br>
           'rgba(153, 68, 153, 0.7)', <br>
           'rgba(34, 170, 153, 0.7)', <br>
           'rgba(170, 170, 17, 0.7)', <br>
           'rgba(102, 51, 204, 0.7)', <br>
           'rgba(230, 115, 0, 0.7)', <br>
           'rgba(139, 7, 7, 0.7)', <br>
           'rgba(50, 146, 98, 0.7)', <br>
           'rgba(85, 116, 166, 0.7)', <br>
           '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)  |-          |

---
_Source: https://npm.io/package/monitor-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._