monitor-components

v1.0.0

Published

4 years ago

Componentes para o e-monitor

Downloads

0High
0Medium
0Low

peduardorocha

air-vue-components

Componentes VueJS para os projetos Web do Ecossistema AIR

npm install air-vue-components --save

Índice

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

|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

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

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

|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

View

Mixin para páginas descritivas.

Data

|data |Default | |:----------------:|:---------------------------:| |id |null | |objeto |null | |url |null | |loadingItem |[] | |itens |[] | |buscas |[] |

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

|State |Default | |:-----------------:|:-------------:| |permissoes |[] | |catalogos |[] |

Mutations

|Mutation |Input |Output | |:--------------------------:|:--------------------------------:|:---------:| |registrarPermissoes |state (String), payload (Object) |- | |registrarCatalogos |state (String), payload (Object) |- |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

air-vue-components

Índice

Exemplo

Exemplo

Exemplo

Props

Exemplo

Props

Exemplo

Props

Exemplo

Props

Exemplo

Events

Exemplo

Props

Events

Exemplo

Props

Exemplo

Props

Exemplo

Exemplo

Events

Props

Exemplo

Props

Exemplo

Props

Exemplo

Exemplo

Exemplo

Exemplo

Props

Exemplo

Props

Exemplo

Props

Props

Data

Methods

Data

Methods

Data

Methods

Data

Methods

Constantes

Filters

Vuex

Stores

State

Mutations