cids-cgi v2.1.16

CGI Design System for Vue

Sobre o projeto

"O projeto veio para trazer um conforto a todos os desenvolvedores com casos onde o desenvolvimento se repete constantemente, como em casos de tabelas de CRUD, campos customizados de data, entre outros...".

Funcionalidades

• Criação de tabelas de dados com n opções de propriedades, tudo de acordo com o necessário para o uso da empresa.

Começando

Pré requisitos

Para rodar um projeto Vue e usar nossa biblioteca você precisa, além do vue corretamente instalado:

• Vuetify lib, pode ser achada aqui.
• Nossa lib, pode ser achada aqui.

Instalação

Baixe a biblioteca vuetify e configure ela corretamente de acordo com a documentação da mesma

Baixe a biblioteca cids-cgi no seu projeto

$ npm i cids-cgi

No arquivo main.js do seu projeto adicione

import Vue from 'vue'
import cids from 'cids-cgi/lib'

Vue.use(cids)

Rodando

Nos seus componentes do projeto use:

- Components

DataTable

- Component

<template>
  <cgi-data-table>
    <!-- 
        slot usado somente quando for customizar suas colunas, como formatar a data, por exemplo 
    -->
    <template v-slot:name_of_column="{ item }">
      {{ item.name }}
    </template>

    <template v-slot:botoes>
      <!-- 
        botões customizados
    -->
    </template>
    <template v-slot:pesquisa>
      <!-- 
        campo de pesquisa customizado
    -->
    </template>
  </cgi-data-table>
</template>

- Props

- Events

- Slots

CgiDatePicker

- Component

<template>
  <cgi-date-picker
    compacto
    tipo="mes"
    nome="Data"
    v-model="data"
    :desabilitado="false"
  />
</template>

- Props

- Sem Events

- Sem Slots

CgiTimePicker

- Component

<template>
  <cgi-time-picker compacto nome="Hora" v-model="hora" :desabilitado="false" />
</template>

- Props

- Sem Events

- Sem Slots

Snackbar

- Component

<!-- Instância unica no sistema, deve ser declarado uma unica vez no App.vue -->
<template>
  <cgi-snackbar />
</template>

import { snackbar } from "cids-cgi/lib/util"

// mensagem sem ações
snackbar.show({message: "Mensagem para mostrar ao usuário!"})

// mensagem de confirmação (promise que retorna true ou false)
const response = await snackbar.confirm({message: "Mensagem para mostrar ao usuário!"})

if (response) {
  // executa algo se o usuário confirmou
}

// parâmetros que podem ser usados no snackbar
snackbar.show({
  message,
  timeout = 10000,  // default em 10 segundos
  color = 'red',    // default vermelho
  position = {      // posição da mensagem na tela, default direita inferior
    right: true,
    center: true,
    top: false,
  }
})

- Sem Props

- Sem Events

- Sem Slots

Handler

- Sem Component

import { toAblDate, formatNumber, toExcel, groupBy } from 'cids-cgi/lib/util'

// converte data para o formato que o progress espera
const dataAbl = toAblDate('2021-10-08', 'dia') // retorna = DATE(8, 10, 2021)

// converte data para o formato que o progress espera
const dataAbl = toAblDate('2021-10-08', 'mes') // retorna = DATE(1, 10, 2021)

// converte data para o formato que o progress espera
const dataAbl = toAblDate('2021-10-08', 'ano') // retorna = DATE(1, 1, 2021)

// formata numeros para padrão brasileiro
const stringNumber = formatNumber(1234.12) //retorna = "1.234,12"

// exporta e faz download de um arquivo XLSX a partir de um dataset
toExcel(dataset, 'placas') // retorna = download de arquivo chamado placas.xlsx

// agrupa dataset por 0 ou n chaves
const datasetGrouped = groupBy(dataset, (item) => ['nome', 'cod_emp']) // retorna = dataset agrupado por nome e cod_emp respectivamente

- Sem Props

- Sem Events

- Sem Slots

Directives

v-cgi-mask

<template>
  <v-text-field label="Data" v-cgi-mask="mask"></v-text-field>
</template>

<script>
  export default {
    data: () => ({
      mask: 'dia-mes-ano', // tipos: dia-mes-ano; dia-mes; mes-ano; hora; cpf; cnpj, cpf-cnpj;
    }),
  }
</script>

v-cgi-money

<template>
  <!-- Converte os dados digitados na moeda brasileira -->
  <v-text-field label="Valor" v-cgi-money></v-text-field>
</template>

v-cgi-number

<template>
  <!-- Converte os dados digitados no padrão brasileiro de numeros -->
  <v-text-field label="Valor" v-cgi-number></v-text-field>
</template>