monitor-components v1.0.0

air-vue-components

Componentes VueJS para os projetos Web do Ecossistema AIR

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

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

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

air-botao-json

Botão para modal.

Exemplo

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

Props

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

air-cabecalho

Componente para cabeçalho Air.

Exemplo

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

air-checkbox-catalogo

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

Events

Exemplo

<air-column>
    <air-checkbox v-model="objeto.veiculos" height="170"
       label="Tipos de veículo" :catalogoItens="catalogoItensVeiculo" />
</air-column>

Props

air-checkbox-unidade

Tabela para seleção de unidades.

Events

Exemplo

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

Props

air-column

Coluna padrão Air.

Exemplo

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

Props

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

Props

air-lista-vazia

Aviso de lista vazia.

Exemplo

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

Props

air-loading

Indicador de carregamentos.

Exemplo

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

Props

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

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

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

air-usuario-card

Exibe informações de um usuário.

Props

Mixins

mixin-default

Mixin padrão para todos os componentes Vue.

Data

Methods

Form

Mixin para formulários.

Data

Methods

Listagem

Mixin para listas.

Data

Methods

View

Mixin para páginas descritivas.

Data

Methods

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

Vuex

Stores

• auth

State

Mutations